/* Shared site chrome: typeface, top nav, framed panel, footer.
 *
 * Linked by every page so the nav cannot drift between them. Page-specific
 * layout and palette stay inside each page's own <style> block; the tokens
 * here are namespaced --c-* so they never collide with a page's own names
 * (the landing page and the interior pages run slightly different palettes).
 *
 * No build step. Plain CSS, served as-is.
 */

/* ── typeface ──────────────────────────────────────────────── */
@font-face{font-family:Spectral;font-style:normal;font-weight:200;font-display:swap;src:url(/fonts/spectral-extralight.woff2) format('woff2')}
@font-face{font-family:Spectral;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/spectral-light.woff2) format('woff2')}
@font-face{font-family:Spectral;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/spectral-regular.woff2) format('woff2')}
@font-face{font-family:Spectral;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/spectral-medium.woff2) format('woff2')}
@font-face{font-family:Spectral;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/spectral-semibold.woff2) format('woff2')}
@font-face{font-family:Spectral;font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/spectral-italic.woff2) format('woff2')}
@font-face{font-family:Spectral;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/spectral-italic.woff2) format('woff2')}

:root{
  --c-gold:      #C8A64D;
  --c-gold-lift: #E4C878;
  --c-hair:      rgba(255,255,255,.10);
  --c-rule:      rgba(200,166,77,.26);
  --c-dim:       rgba(255,255,255,.64);
  --c-dimmer:    rgba(255,255,255,.44);
  --c-pad:       clamp(20px,5vw,64px);
  --c-wrap:      1280px;
  --c-serif:     Spectral,"Iowan Old Style",Georgia,"Times New Roman",serif;
}

/* width:100% is load-bearing. The interior pages make <body> a flex column so
   the footer sinks to the bottom on short pages; an auto cross-axis margin
   suppresses flex stretch, so without it .wrap shrink-wraps to its content and
   the whole page drifts off-grid (the footer mark sat 270px right of the
   masthead before this). */
.wrap{width:100%;max-width:var(--c-wrap);margin-inline:auto;padding-inline:var(--c-pad)}

/* ── masthead + primary nav ────────────────────────────────── */
.masthead{border-bottom:1px solid var(--c-hair);padding-block:22px}
.masthead__in{
  max-width:var(--c-wrap);margin:0 auto;padding-inline:var(--c-pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
}
.masthead__home{
  display:block;line-height:0;text-decoration:none;
  border-bottom:1px solid rgba(200,166,77,.42);
  padding-bottom:7px;
}
.masthead__home img{height:38px;width:auto;display:block}

.masthead__nav{display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.masthead__nav a{
  font-family:var(--c-serif);
  font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.52);text-decoration:none;white-space:nowrap;
  transition:color .25s ease;
}
.masthead__nav a:hover,
.masthead__nav a:focus-visible{color:var(--c-gold-lift)}
.masthead__nav a[aria-current="page"]{color:#FFF;font-weight:600}

/* ── framed panel (gold corner brackets on all four corners) ─ */
/* Sized and centred to sit as it does in the design: a contained frame on a
   wide field, not a full-bleed band across the content grid. */
.panel{
  position:relative;
  width:100%;
  max-width:690px;
  margin-inline:auto;
  border:1px solid var(--c-hair);
  background:
    radial-gradient(120% 130% at 50% 0%,rgba(30,36,44,.85),rgba(11,15,20,0) 68%),
    transparent;
  padding:clamp(26px,5vw,64px) clamp(20px,4vw,56px);
}
.panel__c{position:absolute;width:13px;height:13px;border:1px solid var(--c-gold)}
.panel__c--tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel__c--tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.panel__c--bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.panel__c--br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* Gold eyebrow with the leading dash used across the interior pages. */
.dash-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:.66rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--c-gold);
}
.dash-eyebrow::before{content:"";width:34px;height:1px;background:var(--c-gold);flex:none}

/* ── footer ────────────────────────────────────────────────── */
.foot{padding-block:clamp(44px,6vw,72px)}
.foot__top{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot img{height:58px;width:auto;display:block;opacity:.95}
.foot__tag{font-size:clamp(.9rem,1.5vw,1.15rem);font-weight:300;letter-spacing:.02em;font-style:italic}
.foot__tag .g{color:var(--c-gold)}
.foot__bar{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--c-hair);
  display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-dimmer);font-weight:500;
}
.foot__bar a{color:var(--c-dimmer);text-decoration:none;border-bottom:1px solid var(--c-rule)}
.foot__bar a:hover{color:var(--c-gold)}

/* ── scroll reveal (shared by the interior pages) ──────────── */
.rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
}

/* Home carries the full crest in the card below, so its masthead runs the nav
   alone rather than repeating the mark twice on one screen. */
.masthead--navonly .masthead__in{justify-content:flex-end}
