/* ============================================================================
   WEAVEARENA · the house

   THE FOUNDATION EVERY PUBLIC PAGE IS BUILT ON, IN ONE FILE.
   It lived inline in index.html, which was correct while there was exactly one
   page. There are several now, and a foundation copied into each of them is a
   foundation that drifts: the day a button's radius changes on the front page
   and not on the one selling weddings is the day the site stops looking like
   one studio made it.

   What belongs here: the tokens, the reset, the type ramp, the layout rail,
   the bar, the buttons, the footer and the reveal. What does not: anything
   that only one page has. Those stay inline on the page that owns them.
   ============================================================================ */

:root{
  /* tier one, the only colours a buyer ever sees */
  --navy:#132449; --gold:#C8A24A; --silk:#EFEBE2;
  /* text ramp on silk */
  --slate:#414B5A; --mute:#5A6474;
  /* navy bands */
  --navy-lo:#0F1C39; --navy-hi:#1B3059;
  /* hairlines */
  --rule:rgba(19,36,73,.15); --rule-hi:rgba(19,36,73,.28);
  --rule-on-navy:rgba(239,235,226,.18); --rule-on-navy-hi:rgba(239,235,226,.34);
  --silk-on-navy:rgba(239,235,226,.76);
  --font:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:12px; --pill:999px;              /* cards 12, pills 999 */
  --pad:clamp(20px,5vw,64px); --wide:1240px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{background:var(--silk);color:var(--navy);font-family:var(--font)}
body{overflow-x:hidden;font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(200,162,74,.34)}
.wrap{width:min(100% - var(--pad)*2,var(--wide));margin-inline:auto}

/* ---------- the scale, straight off the book's digital table ---------- */
/* label 11 / 700 / +0.16em, the one place uppercase is allowed besides the
   wordmark. The gold pick in front of it is the mark's own thread. */
.kick{font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);display:inline-flex;align-items:center;gap:10px}
/* on a navy band the label can take the gold, because there it is 6.34 to 1 */
.onNavy .kick{color:var(--gold)}
.kick::before{content:'';width:26px;height:2px;flex:none;
  background:linear-gradient(90deg,var(--gold),rgba(200,162,74,0))}
/* display 48/34 · 800 · 1.05 · -0.02em */
h1{font-size:clamp(34px,3.7vw,48px);font-weight:800;line-height:1.05;letter-spacing:-.02em}
/* h2 28/22 · 700 · 1.25 · -0.015em */
h2{font-size:clamp(22px,2.3vw,28px);font-weight:700;line-height:1.25;letter-spacing:-.015em}
/* h3 22/19 · 700 · 1.30 · -0.01em */
h3{font-size:clamp(19px,1.7vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.01em}
/* lead 18/17 · 400 · 1.55 · 0, ranged left and capped for line length */
.lede{font-size:clamp(17px,1.3vw,18px);font-weight:400;line-height:1.55;
  color:var(--slate);max-width:68ch}
/* score 56/40 · 800 · 1.00 · -0.03em, tabular so digits never jump */
.score{font-size:clamp(40px,4.4vw,56px);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.gold{color:var(--gold)}

/* a navy band. White text only, and the hairlines invert with it. */
.onNavy{background:var(--navy);color:var(--silk)}
.onNavy .lede{color:var(--silk-on-navy)}

/* ---------- buttons: 15 / 600 / +0.01em, sentence case, pill ---------- */
/* Uppercase is for labels and the wordmark, so a button says its piece in
   sentence case. 44px is the smallest tappable target the book allows. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;border-radius:var(--pill);border:1px solid transparent;
  font-family:var(--font);font-size:15px;font-weight:600;line-height:1;letter-spacing:.01em;
  cursor:pointer;transition:transform .22s cubic-bezier(.2,.9,.3,1),background .22s,border-color .22s,color .22s}
/* navy on gold. Never white on gold. */
.btn.pri{background:var(--gold);color:var(--navy)}
.btn.pri:hover{transform:translateY(-2px);filter:brightness(.94)}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--rule-hi)}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--navy);background:rgba(19,36,73,.05)}
.onNavy .btn.ghost{color:var(--silk);border-color:var(--rule-on-navy-hi)}
.onNavy .btn.ghost:hover{background:rgba(239,235,226,.1);border-color:var(--silk)}
.btn i{font-style:normal;transition:transform .22s}
.btn:hover i{transform:translateX(3px)}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:12px var(--pad);color:var(--silk);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s}
nav.stuck{background:rgba(19,36,73,.92);border-bottom-color:var(--rule-on-navy);backdrop-filter:blur(16px)}
/* wordmark: one word, uppercase, 600, +0.10em */
#mark{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;
  letter-spacing:.10em;min-height:44px;padding:2px 0}
#mark svg{width:40px;height:40px;flex:none}
#navLinks{display:flex;align-items:center;gap:30px}
/* a bar link is one line or it is not a bar link: copy grows, translations
   grow, and the wrap is silent when it happens */
#navLinks a{white-space:nowrap}
#navLinks a:not(.btn){font-size:15px;font-weight:400;color:var(--silk-on-navy);transition:color .2s;
  position:relative;display:inline-flex;align-items:center;min-height:44px}
/* THE CURRENT SECTION MARKER NEVER TOUCHES THE BUTTON.
   .here repaints a link cream to say "you are here", and it was not scoped
   away from the gold button beside them. So the moment the contact section
   came into view, "Start a project" turned cream on gold and measured 2.02:1
   against a bar of 4.5: the one control on the page that exists to be pressed
   became the least readable thing on it, and only while a guest was looking
   at the section it points to. */
#navLinks a:not(.btn):hover,#navLinks a:not(.btn).here{color:var(--silk)}
#navLinks a:not(.btn).here::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--gold)}
#navLinks .btn{min-height:44px;padding:0 20px;font-size:14px}
#burger{display:none;background:none;border:0;color:var(--silk);cursor:pointer;
  padding:10px;min-width:44px;min-height:44px}
#burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6}


/* the weft: the mark's own geometry used as furniture */
.weft{height:7px;position:relative;
  background:repeating-linear-gradient(90deg,rgba(200,162,74,.55) 0 1px,transparent 1px 6px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.weft::after{content:'';position:absolute;left:0;right:0;top:3px;height:1px;
  background:rgba(200,162,74,.6)}

/* ---------- sections ---------- */
section{padding:clamp(60px,6vw,92px) 0;position:relative}
.head{max-width:68ch}
.head h2{margin:16px 0 0}
.head .lede{margin-top:16px}

/* ---------- the footer ---------- */
footer{background:var(--navy);color:var(--silk-on-navy);padding:30px var(--pad);display:flex;
  justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:14px}
footer .wm{font-weight:600;letter-spacing:.10em;color:var(--silk)}

/* ---------- the reveal ---------- */
.rise{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  #wall{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- narrower ---------- */

/* ---------- the bar folds here ----------
   MEASURED, NOT PICKED. Laid out in a row the bar needs 1117px: a 163px
   wordmark, six links and a button totalling 806px, and 64px of padding each
   side. It folded at 720 once and wrapped its links onto three lines on every
   tablet; it folded at 1000 until the Celebrations link was added, and then
   "Start a project" hung 16px off the side of a 1024 screen.

   So the number here is the measured requirement plus headroom, and
   tools/qc-front.mjs asserts the bar still fits inside it. Add a link to the
   bar and that assertion fails, which is the only reliable way this stays
   true: every previous value was correct on the day it was written. */
@media (max-width:1140px){
  #navLinks{position:fixed;inset:0 0 auto;top:0;flex-direction:column;justify-content:center;
    gap:22px;height:100svh;background:rgba(19,36,73,.98);backdrop-filter:blur(20px);
    transform:translateY(-100%);transition:transform .42s cubic-bezier(.3,.9,.3,1);padding:var(--pad)}
  #navLinks.open{transform:none}
  #navLinks a:not(.btn){font-size:22px;font-weight:700}
  #burger{display:block;z-index:2}
}