/* ============================================================================
   w2b.cc — design system
   Implements "Style Tile · W2B.CC · For Build Handoff" (Style Guide.pdf, 5pp).

   Every value below traces to that document. Where the guide gives a number,
   the number is used verbatim rather than approximated.

   The guide's palette is ten values and no more, all gold and black. The
   earlier black/gold/CRIMSON proposal is superseded — crimson is not in this
   system.
   ========================================================================== */

:root{
  /* ── palette · guide §01. Ten values, no more. ───────────────────────── */
  --obsidian:   #000000;   /* page ground. dominant */
  --rich:       #0A0A0A;   /* raised surfaces */
  --charcoal:   #16130B;   /* cards, wells — black with a gold cast */
  --bronze:     #6B5218;   /* gradient shadow stop, faint dividers */
  --antique:    #9A7B2F;   /* gradient shadow stop */
  --gold:       #C9A227;   /* primary accent, rules, active states */
  --gold-br:    #E8C766;   /* hover, emphasis, links */
  --champagne:  #F5E7B2;   /* gradient highlight, display type */
  --parchment:  #EDE6D6;   /* body copy on black */
  --muted:      #A89F8C;   /* captions, meta, secondary */

  /* the metallic gradient — "struck metal". One element per viewport, max. */
  --gold-grad: linear-gradient(160deg,#F5E7B2,#C9A227 45%,#9A7B2F 70%,#E8C766);

  /* hairline rules, 1px at 28–55% opacity */
  --rule-gold:        rgba(201,162,39,0.28);
  --rule-gold-strong: rgba(201,162,39,0.55);
  --rule-faint:       rgba(201,162,39,0.12);

  /* ── type · guide §02 ────────────────────────────────────────────────── */
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-edit:    'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── structure · guide §06 ───────────────────────────────────────────── */
  --measure:   68ch;
  --container: 1180px;
  --radius:    2px;
  --ease:      cubic-bezier(.2,.8,.2,1);

  /* 8pt spacing scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 56px; --s8: 72px; --s12: 96px;

  --pad-section: var(--s12);   /* 96px desktop, 56px mobile */
  --gutter: var(--s3);
}

@media (max-width:760px){
  :root{ --pad-section: var(--s6); }
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--obsidian);
  color:var(--parchment);
  font-family:var(--font-body);
  font-size:19px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Twenty years of pasted URLs live in this content. Without a global break
     rule a single long token pushes the document wider than the viewport and
     the whole page scrolls sideways on a phone. */
  overflow-wrap:break-word;
}

/* ── skip link ─────────────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);
  color:#000;padding:12px 20px;font-weight:600}
.skip:focus{left:0}

/* ══ TYPE SCALE · guide §02 ════════════════════════════════════════════════
   role            face          size  line  tracking
   hero display    Cinzel 700    64    1.05  .12em  uppercase, gradient fill
   page h1         Cinzel 700    44    1.1   .1em   champagne (FLAT, no gradient)
   section h2      Cinzel 600    31    1.2   .1em   + hairline rule
   page deck       Cormorant 300 25    1.55         italic optional, 56ch
   card h3         Cinzel 600    21    1.3   .08em  uppercase
   body            Inter 400     19    1.75         parchment, 68ch
   small/caption   Inter 400     14    1.5          muted
   eyebrow/label   Inter 500     12    1.4   .2em   uppercase, core gold
   ────────────────────────────────────────────────────────────────────────── */

h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--font-display)}

h1{font-weight:700;font-size:clamp(2rem,4.6vw,2.75rem);line-height:1.1;
   letter-spacing:.1em;color:var(--champagne)}

h2{font-weight:600;font-size:clamp(1.35rem,2.6vw,1.94rem);line-height:1.2;
   letter-spacing:.1em;color:var(--gold-br)}

h3{font-weight:600;font-size:1.31rem;line-height:1.3;letter-spacing:.08em;
   text-transform:uppercase;color:var(--parchment)}

h4{font-weight:600;font-size:1rem;line-height:1.35;letter-spacing:.1em;
   text-transform:uppercase;color:var(--gold-br)}

p{margin:0}
strong,b{font-weight:600;color:#fff}
em{font-style:italic}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--rule-faint);margin:0}

a{color:var(--gold-br);text-decoration-color:var(--rule-gold);text-underline-offset:3px;
  transition:color 180ms var(--ease)}
a:hover{color:var(--champagne)}
a:focus-visible{outline:2px solid var(--gold-br);outline-offset:3px;border-radius:var(--radius)}

.eyebrow{font-family:var(--font-body);font-size:.75rem;font-weight:500;line-height:1.4;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.deck{font-family:var(--font-edit);font-weight:300;font-size:1.56rem;line-height:1.55;
  color:var(--parchment);max-width:56ch}
.small,.meta{font-size:.875rem;line-height:1.5;color:var(--muted)}

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.col{max-width:var(--measure)}

/* ══ MOTIFS · guide §03 ═══════════════════════════════════════════════════
   Four devices lifted from the crest. The crest itself is never redrawn,
   recoloured, or cropped — it is placed, scaled, and framed.
   ────────────────────────────────────────────────────────────────────────── */

/* triple-stroke rule — echoes the shield's three concentric outlines */
.rule-triple{border:0;height:5px;background:
  linear-gradient(var(--gold),var(--gold)) 0 0/100% 1px no-repeat,
  linear-gradient(var(--rule-gold-strong),var(--rule-gold-strong)) 0 2px/100% 1px no-repeat,
  linear-gradient(var(--rule-gold),var(--rule-gold)) 0 4px/100% 1px no-repeat;}

/* quartering cross — divides sections, separates card quadrants */
.cross{display:flex;align-items:center;justify-content:center;gap:0;
  color:var(--gold);height:var(--s5);position:relative}
.cross::before,.cross::after{content:"";position:absolute;background:var(--rule-gold)}
.cross::before{width:100%;height:1px;left:0}
.cross::after{width:1px;height:var(--s5);top:0}

/* shield frame — portrait crops, book covers, avatars. Double outline. */
.shield{position:relative;padding:5px;border:1px solid var(--rule-gold)}
.shield::after{content:"";position:absolute;inset:2px;border:1px solid var(--rule-faint);
  pointer-events:none}
.shield img{display:block;width:100%}
.shield--clip img{clip-path:polygon(0 0,100% 0,100% 58%,78% 86%,50% 100%,22% 86%,0 58%)}

/* bullets — fleur from the coronet, or a plain diamond where it reads busy */
.prose ul{list-style:none;padding-left:var(--s3)}
.prose ul > li{position:relative}
.prose ul > li::before{content:"◆";position:absolute;left:calc(var(--s3) * -1);
  color:var(--gold);font-size:.7em;top:.45em}
ul.fleur{list-style:none;padding-left:var(--s4)}
ul.fleur > li{position:relative}
ul.fleur > li::before{content:"⚜";position:absolute;left:calc(var(--s4) * -1);
  color:var(--gold);font-size:.9em}

/* ── masthead ──────────────────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--rule-faint);background:var(--obsidian);
  position:sticky;top:0;z-index:40}
.masthead__in{display:flex;align-items:center;gap:var(--s4);
  max-width:var(--container);margin:0 auto;padding:var(--s2) var(--gutter)}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;flex-shrink:0}
.brand img{width:32px;height:auto;display:block}
.brand span{font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  letter-spacing:.18em;color:var(--champagne);text-transform:uppercase}
.nav{display:flex;gap:var(--s2) var(--s3);flex-wrap:wrap;align-items:center;
  justify-content:flex-end;margin-left:auto}
.nav a{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
  color:var(--parchment);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;transition:color 180ms var(--ease)}
.nav a:hover{color:var(--gold-br);border-bottom-color:var(--rule-gold)}
.nav a[aria-current]{color:var(--gold-br);border-bottom-color:var(--gold)}
/* the masthead action is a ghost, not a gold field — filled gold is once per
   screen and belongs to the page's primary action, guide §04 */
.nav .cta{border:1px solid var(--gold);color:var(--gold-br);padding:8px 16px;
  border-bottom-width:1px;border-radius:var(--radius);letter-spacing:.14em}
.nav .cta:hover{background:rgba(201,162,39,.08);border-bottom-color:var(--gold)}

/* Disclosure nav below 1100px, not 860px: six labels plus a brand and a CTA
   need ~1100px on one row. Between 861 and 1099 the old breakpoint left the
   desktop nav visible but wrapped onto two lines. */
.navtoggle{display:none}
@media (max-width:1099px){
  .masthead__in{flex-wrap:wrap;gap:var(--s2)}
  .navtoggle{display:block;margin-left:auto}
  .navtoggle summary{list-style:none;cursor:pointer;font-size:.75rem;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:6px 2px}
  .navtoggle summary::-webkit-details-marker{display:none}
  .nav{display:none}
  .navtoggle[open] + .nav{display:flex;flex-direction:column;align-items:stretch;
    gap:0;width:100%;margin:var(--s2) 0 var(--s1);order:9}
  .navtoggle[open] + .nav a{padding:12px 0;border-bottom:1px solid var(--rule-faint)}
  .navtoggle[open] + .nav .cta{text-align:center;margin-top:var(--s2);border:1px solid var(--gold)}
}

/* ── page head ─────────────────────────────────────────────────────────── */
.pagehead{padding:var(--pad-section) 0 var(--s5);display:flex;flex-direction:column;
  gap:var(--s2)}
.crumb{font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--gold-br)}

/* hero display — the one gradient element on the page */
.hero{padding:var(--pad-section) 0 var(--s8);display:flex;flex-direction:column;
  align-items:center;gap:var(--s4);text-align:center}
.hero__crest{width:min(240px,54vw);height:auto;display:block}
.hero h1{font-size:clamp(2.4rem,7vw,4rem);line-height:1.05;letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;padding-bottom:.06em}
.hero .deck{margin:0 auto}
.hero__actions{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}

/* ── prose ─────────────────────────────────────────────────────────────── */
.prose{display:flex;flex-direction:column;gap:var(--s3);min-width:0;
  padding-bottom:var(--s4)}
.prose > *{margin:0;min-width:0;max-width:var(--measure)}
.prose > .table-scroll{max-width:100%;width:100%}
.prose h2{margin-top:var(--s4);padding-bottom:var(--s2);
  border-bottom:1px solid var(--rule-gold)}
.prose h3{margin-top:var(--s3);color:var(--gold-br)}
.prose ol{padding-left:var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.prose ul{display:flex;flex-direction:column;gap:var(--s1)}
.prose ol li::marker{color:var(--gold)}
.prose img{display:block;border:1px solid var(--rule-faint)}
.prose blockquote{padding:var(--s1) 0 var(--s1) var(--s3);border-left:2px solid var(--gold);
  font-family:var(--font-edit);font-weight:300;font-style:italic;font-size:1.44rem;
  line-height:1.5;color:var(--parchment)}
.prose blockquote cite{display:block;margin-top:var(--s2);font-family:var(--font-body);
  font-style:normal;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}

/* long-form: same grid as everything else, only the black-to-type ratio changes */
.prose--long > p:first-of-type::first-letter{font-family:var(--font-display);
  font-size:3.2em;line-height:.82;float:left;padding:.06em .12em 0 0;
  color:var(--gold);font-weight:700}

/* ── tables · dense reference charts ───────────────────────────────────── */
/* zebra rows, hairline columns, no card padding */
.table-scroll{overflow-x:auto;border:1px solid var(--rule-gold);
  -webkit-overflow-scrolling:touch}
.prose table,table.data{border-collapse:collapse;width:100%;min-width:640px;
  font-size:.9rem;font-variant-numeric:tabular-nums}
.prose th,table.data th{background:var(--charcoal);color:var(--gold);text-align:left;
  padding:var(--s2);font-family:var(--font-body);font-weight:500;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--rule-gold);border-right:1px solid var(--rule-faint)}
.prose td,table.data td{padding:var(--s2);color:var(--parchment);vertical-align:top;
  border-bottom:1px solid var(--rule-faint);border-right:1px solid var(--rule-faint)}
.prose tr > *:last-child{border-right:0}
.prose tbody tr:nth-child(even){background:var(--rich)}

/* ── buttons · guide §04 ───────────────────────────────────────────────── */
/* "Filled gold is the one place gold becomes a field — and only at button
    scale, once per screen." */
.btn{display:inline-block;font-family:var(--font-display);font-weight:600;
  font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 30px;text-decoration:none;border-radius:var(--radius);
  border:1px solid transparent;background:var(--gold);color:#0A0800;
  transition:background 180ms var(--ease),color 180ms var(--ease)}
.btn:hover{background:var(--gold-br);color:#0A0800}
.btn--ghost{background:none;color:var(--gold-br);border-color:var(--gold)}
.btn--ghost:hover{background:rgba(201,162,39,.08);color:var(--champagne)}
.btn[aria-disabled="true"]{background:none;border-color:var(--rule-gold);
  color:var(--muted);cursor:default}
.btn[aria-disabled="true"]:hover{background:none;color:var(--muted)}
.link-arrow{font-family:var(--font-body);font-size:.9rem;font-weight:500;
  letter-spacing:.04em;color:var(--gold-br);text-decoration:none;
  border-bottom:1px solid var(--rule-gold);padding-bottom:2px}
.link-arrow:hover{border-bottom-color:var(--gold)}

/* ── form fields — wells: pure black inside a hairline ─────────────────── */
label{display:block;font-size:.75rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--s1)}
input[type=text],input[type=email],textarea{width:100%;background:var(--obsidian);
  border:1px solid var(--rule-gold);border-radius:var(--radius);padding:14px var(--s2);
  color:var(--parchment);font-family:var(--font-body);font-size:1rem}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}

/* ── cards ─────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--rule-faint);border:1px solid var(--rule-faint)}
.card{background:var(--charcoal);padding:var(--s4);display:flex;flex-direction:column;
  gap:var(--s2);text-decoration:none;color:inherit;
  transition:background 180ms var(--ease)}
a.card:hover{background:var(--rich)}
.card .eyebrow{font-family:var(--font-display);font-size:.8rem;letter-spacing:.16em;
  font-weight:600;color:var(--gold)}
.card h3{font-size:1.31rem;color:var(--champagne);padding-bottom:var(--s2);
  border-bottom:1px solid var(--rule-gold)}
.card p{font-size:.95rem;line-height:1.6;color:var(--parchment)}
.card .meta{margin-top:auto;padding-top:var(--s1)}
.card .go{font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-br)}

/* ── tenets ────────────────────────────────────────────────────────────── */
.tenets{display:flex;flex-direction:column;gap:1px;background:var(--rule-faint);
  border:1px solid var(--rule-faint)}
.tenet{background:var(--charcoal);padding:var(--s4);display:flex;gap:var(--s4);
  align-items:flex-start}
.tenet .n{font-family:var(--font-display);font-size:1.6rem;font-weight:700;
  color:var(--bronze);line-height:1;min-width:2ch;font-variant-numeric:tabular-nums}
.tenet .t{display:flex;flex-direction:column;gap:var(--s1)}
.tenet h3{font-size:1.12rem;color:var(--gold-br)}
.tenet p{font-size:.95rem;color:var(--parchment);max-width:60ch}
.motto{display:flex;flex-direction:column;gap:var(--s1);text-align:center;
  padding:var(--s4);border:1px solid var(--rule-gold);background:var(--charcoal);
  font-family:var(--font-display);font-size:1.12rem;letter-spacing:.06em;
  color:var(--champagne)}
.motto span{font-family:var(--font-edit);font-style:italic;font-weight:300;
  font-size:1.12rem;letter-spacing:0;color:var(--parchment)}

/* ── book ──────────────────────────────────────────────────────────────── */
.book{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:var(--s8);
  align-items:start}
@media (max-width:760px){.book{grid-template-columns:1fr;gap:var(--s4)}}
.book__body{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.pillars{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--rule-gold);
  background:var(--rule-faint);width:100%}
.pillars span{flex:1;min-width:96px;background:var(--charcoal);padding:var(--s2) var(--s1);
  text-align:center;font-family:var(--font-display);font-size:.8rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* ── bands ─────────────────────────────────────────────────────────────── */
.band{padding:var(--pad-section) 0;border-top:1px solid var(--rule-faint);
  display:flex;flex-direction:column;gap:var(--s4)}
.band__head{display:flex;flex-direction:column;gap:var(--s2)}

/* ── footer ────────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--rule-faint);margin-top:var(--s8);
  padding:var(--pad-section) 0 var(--s8);color:var(--muted);font-size:.875rem}
.footer__in{display:flex;flex-wrap:wrap;gap:var(--s8);justify-content:space-between}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--gold-br)}
.footer__nav{display:flex;flex-direction:column;gap:var(--s1)}
.footer__creed{font-family:var(--font-edit);font-style:italic;font-weight:300;
  color:var(--gold);font-size:1.12rem;max-width:34ch;line-height:1.6}

/* ── inherited-content guards ──────────────────────────────────────────────
   Three things in twenty years of hand-written pages forced the document
   wider than a phone screen. Fixed here rather than by editing the prose.  */

/* <pre> was used for centering, not for code — let it wrap, and let it use
   the body face rather than monospace */
.prose pre{white-space:pre-wrap;overflow-x:auto;font-family:inherit;
  font-size:inherit;margin:0}

/* responsive video embeds — the wrapper is added by migrate.py */
.embed{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--rule-gold)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── article with a portrait (About) ───────────────────────────────────── */
.article--portrait{display:grid;grid-template-columns:1fr minmax(200px,300px);
  gap:var(--s8);align-items:start}
@media (max-width:760px){
  .article--portrait{grid-template-columns:1fr;gap:var(--s4)}
  .article--portrait .portrait{max-width:280px}
}
.portrait{margin:0}
.portrait img{display:block;width:100%}


/* ── polish pass ────────────────────────────────────────────────────────── */

/* The portrait keeps the shield's double outline but NOT the clip: the polygon
   cut a point straight through the subject's shoulders and read as a mistake
   rather than a frame. Sticky so the long biography does not leave a column of
   dead black beside it. */
.article--portrait .portrait{position:sticky;top:calc(var(--s8) + var(--s4))}
@media (max-width:760px){
  .article--portrait .portrait{position:static;margin:0 auto}
}

/* A utility page does not need landing-page air between every section. */
.band--compact{padding:var(--s6) 0;gap:var(--s3)}

/* Two-column: reading column plus a facts rail. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  gap:var(--s8);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:var(--s4)}}

.facts{background:var(--charcoal);border:1px solid var(--rule-faint);
  padding:var(--s4);position:sticky;top:calc(var(--s8) + var(--s4))}
@media (max-width:860px){.facts{position:static}}
.facts h3{font-size:.95rem;color:var(--gold);padding-bottom:var(--s2);
  border-bottom:1px solid var(--rule-gold);margin-bottom:var(--s3)}
.facts dl{margin:0;display:grid;gap:var(--s2)}
.facts dt{font-family:var(--font-body);font-size:.7rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0 0 var(--s1) 0;font-size:.95rem;line-height:1.5;
  color:var(--parchment)}

/* Press-kit downloads read as actions, not articles. */
.cards .card .go{color:var(--gold)}

/* keep the brand and the menu toggle on one row on a phone */
@media (max-width:1099px){
  .brand span{font-size:.95rem;letter-spacing:.14em}
  .masthead__in{gap:var(--s2);row-gap:0}
}
@media (max-width:420px){
  .brand span{font-size:.85rem;letter-spacing:.1em}
  .brand img{width:28px}
}