/* Ridley & Sons — THE ESTATE
   A club library's colours: bottle green, ivory type, brass for the rules. Small capitals and wide
   letterspacing; a crest engraved in a single stroke weight; a double rule.
   Nothing arrives in under a second and nothing moves across the page. */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
:root{
  --ground:#15291f; --ground-2:#1b3327; --ground-3:#0d1c14; --line:#4b5a40;
  --ivory:#efe6cf; --ink-2:#cfc6ad; --ink-3:#a39d86; --brass:#c6a15e;
  --serif:"Sorts Mill Goudy",Garamond,Georgia,serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --e:cubic-bezier(.4,0,.2,1);
}
body{background:var(--ground) radial-gradient(120% 70% at 50% 0%,#20392c 0%,transparent 62%) no-repeat;color:var(--ink-2);font-family:var(--serif);font-size:18.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2{font-weight:400;color:var(--ivory);line-height:1.05}
.demo{background:var(--ground-3);color:var(--ink-2);font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;padding:8px 16px;text-align:center}
.demo b{font-weight:400;color:var(--brass)}
.caps,.eyebrow,.top nav,.top__est,.entries dt,.foot,.appt{font-variant-caps:all-small-caps;letter-spacing:.22em;font-feature-settings:"smcp","c2sc"}
.eyebrow{font-size:1rem;color:var(--brass);margin-bottom:26px;text-align:center}
.small{font-size:15px;color:var(--ink-3);max-width:60ch;margin:40px auto 0;text-align:center;font-variant-caps:normal;letter-spacing:0}

.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:22px clamp(20px,5vw,72px);border-bottom:1px solid var(--line)}
.top__est{font-size:.95rem;color:var(--ink-3)}
.top__est span{color:var(--ivory)}
.brand{font-size:1.5rem;color:var(--ivory);letter-spacing:.06em;text-transform:uppercase;font-variant-caps:normal}
.top nav{display:flex;justify-content:flex-end;gap:28px;font-size:1rem;color:var(--ink-2)}
.top nav a[aria-current]{color:var(--ivory);border-bottom:1px solid var(--brass)}
.top nav a:hover{color:var(--ivory)}
@media(max-width:760px){.top{grid-template-columns:1fr;text-align:center}.top nav{justify-content:center;flex-wrap:wrap;gap:14px 20px}}

/* the hero, centred, arriving in order: the crest, the year, then the name */
.hero{text-align:center;max-width:820px;margin-inline:auto;padding:clamp(56px,10vh,120px) clamp(20px,5vw,72px) clamp(48px,8vh,96px)}
.hero--short{padding-top:clamp(40px,7vh,80px)}
/* the hero is a label: a brass double rule, like the one sewn inside the coat */
.hero{position:relative;width:calc(100% - 2 * clamp(14px,4vw,48px));margin-top:clamp(24px,5vh,56px)}
.hero::before{content:"";position:absolute;inset:0;border:1px solid var(--line);outline:1px solid var(--line);outline-offset:-6px;pointer-events:none}
.crest{width:clamp(84px,12vw,120px);height:auto;margin:0 auto 26px;color:var(--brass)}
.crest path,.crest circle{stroke-dasharray:1;stroke-dashoffset:1;animation:engrave 2200ms var(--e) both}
.crest circle:nth-child(2){animation-delay:300ms}.crest path:nth-child(3){animation-delay:600ms}
.crest path:nth-child(4){animation-delay:1000ms}.crest path:nth-child(5){animation-delay:1300ms}
@keyframes engrave{to{stroke-dashoffset:0}}
.hero .eyebrow{animation:fade 1400ms var(--e) 900ms both}
.hero h1{font-size:clamp(2.5rem,1.4rem + 4.6vw,5.5rem);letter-spacing:.06em;text-transform:uppercase;animation:fade 1600ms var(--e) 1300ms both}
.hero h1 span{color:var(--brass);text-transform:none;font-style:italic;letter-spacing:0}
.rules{display:block;width:min(100%,440px);margin:26px auto;height:5px;border-top:2px solid var(--brass);border-bottom:1px solid var(--brass);
  transform-origin:center;animation:rule 1400ms var(--e) 1600ms both}
.rules--thin{height:0;border-top:1px solid var(--line);border-bottom:0;animation:none;margin:0 auto 34px}
.lead{font-size:clamp(1.125rem,1rem + .6vw,1.375rem);max-width:52ch;margin:0 auto 34px;color:var(--ivory);animation:fade 1400ms var(--e) 1900ms both}
.appt{display:inline-block;font-size:1.05rem;color:var(--ivory);border:1px solid var(--brass);padding:12px 22px;animation:fade 1400ms var(--e) 2200ms both;
  transition:background 900ms var(--e),color 900ms var(--e)}
.appt:hover{background:var(--brass);color:var(--ground)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

[data-fade]{opacity:0;transition:opacity 1600ms var(--e)}
[data-fade].in{opacity:1}

.entries{max-width:720px;margin-inline:auto;padding:clamp(40px,7vh,80px) clamp(20px,5vw,72px)}
.entries dl{border-top:1px solid var(--line)}
.entries div{display:grid;grid-template-columns:9ch 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.entries dt{color:var(--brass);font-size:1.05rem;padding-top:2px}
.entries dd{color:var(--ivory)}
@media(max-width:520px){.entries div{grid-template-columns:1fr;gap:4px}}

.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);max-width:1040px;margin-inline:auto;
  padding:clamp(40px,7vh,80px) clamp(20px,5vw,72px);text-align:center}
.three h2{font-size:1.5rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.three p{max-width:32ch;margin-inline:auto;font-size:17px}
@media(max-width:700px){.three{grid-template-columns:1fr}}

.terms{max-width:720px;margin-inline:auto;padding:clamp(40px,7vh,80px) clamp(20px,5vw,72px) clamp(60px,10vh,120px);text-align:center}
.terms__line{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.4;color:var(--ivory);font-style:italic;margin-bottom:26px}
.terms .appt{animation:none}

.foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding:18px clamp(20px,5vw,72px) 44px;font-size:.95rem;color:var(--ink-3)}
.back{display:inline-flex;gap:9px;border:1px solid var(--brass);padding:9px 14px;color:var(--ivory)}
.back:hover{background:var(--brass);color:var(--ground)}

@media(prefers-reduced-motion:reduce){
  .crest path,.crest circle{animation:none;stroke-dashoffset:0}
  .hero .eyebrow,.hero h1,.rules,.lead,.appt{animation:none}
  [data-fade]{transition:none;opacity:1}
}