/* ============================================================
   FOUNDATION. 2026-10-02. the shared skeleton for v1f, v2f, v3f.
   every value here comes from ~/Sites/beads/FOUNDATION.md; the
   section numbers in the comments point there. skins change
   ground, type color and treatments, never these structures.
   ============================================================ */

/* ---------- 2. spacing: the only allowed steps ---------- */
:root{
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:192px;

  /* roles, phone first (one step down) */
  --gap-tight:var(--s1);     /* eyebrow to heading, label to field */
  --gap-in:var(--s2);        /* heading to body */
  --gap-block:var(--s3);     /* body to wall label, field to field */
  --gap-frame:var(--s3);     /* copy to its own frame */
  --gap-group:var(--s5);     /* frame to frame */
  --gap-sec-rel:var(--s7);   /* between related sections */
  --gap-sec-new:var(--s8);   /* between sections, new topic */

  /* 3. grid */
  --margin:var(--s3);
  --gutter:var(--s2);
  --max:1760px;
}
@media (min-width:900px){
  :root{
    --gap-frame:var(--s4); --gap-group:var(--s6);
    --gap-sec-rel:var(--s8); --gap-sec-new:var(--s9);
    --margin:var(--s6); --gutter:var(--s4);
  }
}
@media (min-width:1440px){ :root{ --margin:var(--s7) } }

/* ---------- 3. grid ---------- */
.f-wrap{
  box-sizing:border-box; width:100%;
  max-width:calc(var(--max) + 2 * var(--margin));
  margin-inline:auto; padding-inline:var(--margin);
}
.f-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter)}
@media (max-width:899px){
  .f-grid{grid-template-columns:minmax(0,1fr)}
  .f-grid > *{grid-column:1 / -1 !important}
}

/* ---------- 8. load: first content inside the Doherty threshold ---------- */
/* the veil and the top bar run on CSS alone, so nothing waits for the script.
   the hero copy is not a scroll reveal at all: it paints with the page. */
.veil{transition:none; animation:f-veil 700ms var(--ease) forwards}
@keyframes f-veil{to{opacity:0; visibility:hidden}}
.top{opacity:1; transition:none; animation:f-in 900ms var(--ease) both}
@keyframes f-in{from{opacity:0}}

/* ---------- 9. top bar on the rail; targets at least 44px ---------- */
.top{padding:var(--s3) max(var(--margin), calc((100% - var(--max)) / 2))}
.top__link, .vswitch a{position:relative}
.top__link::after, .vswitch a::after{content:""; position:absolute; inset:-14px -8px}

/* ---------- 4. frames: 3:2, one portrait 2:3 ---------- */
.f-frame{position:relative; overflow:hidden; aspect-ratio:3 / 2;
         background-size:cover; background-position:center}
.f-frame--S{aspect-ratio:2 / 3}
.f-img{
  position:absolute; left:0; top:-8%; width:100%; height:116%;
  object-fit:cover; display:block;
  opacity:0; transition:opacity 900ms var(--ease); will-change:transform;
}
.f-img.loaded{opacity:1}
.f-img--edges{object-position:30% 50%}

/* ---------- hero: Full ---------- */
.f-hero{position:relative; height:100svh; min-height:560px; overflow:hidden}
.f-hero__media{position:absolute; inset:0; background-size:cover; background-position:70% 50%}
.f-img--hero{opacity:1; top:-10%; height:120%; object-position:70% 50%}
.f-hero__type{position:absolute; left:0; right:0; bottom:var(--s6); z-index:2}
@media (min-width:900px){ .f-hero__type{bottom:var(--s7)} }
.f-hero__block{display:flex; flex-direction:column; gap:var(--gap-in); width:fit-content; max-width:min(760px,100%)}
.f-hero__row{display:flex; flex-direction:column; gap:var(--gap-in)}
.f-hero .t-intro{max-width:34ch}
body.ready .f-hero .rise{opacity:1; transform:none}

/* ---------- 6. sections ---------- */
.f-main{position:relative; z-index:2}
.f-sec{padding-top:var(--gap-sec-new)}
.f-sec--rel{padding-top:var(--gap-sec-rel)}
.f-contact{padding-bottom:var(--gap-sec-new)}

/* section anatomy: eyebrow 8 heading 16 body */
.f-copy{display:flex; flex-direction:column; align-self:start}
.f-copy > * {margin:0}
.f-copy > * + *{margin-top:var(--gap-in)}
.f-copy > .label + *{margin-top:var(--gap-tight)}
.f-copy .wall{max-width:65ch}

/* A, Beside: copy 4 columns, holding still; frames in the 8 to its right */
.f-a .f-copy{grid-column:1 / span 4}
.f-a .f-works{grid-column:5 / span 8; display:flex; flex-direction:column; gap:var(--gap-group)}
@media (min-width:900px){
  .f-a .f-copy{position:sticky; top:var(--s8)}
}
.f-fig{margin:0; position:relative}
.f-fig .tag{margin-top:var(--gap-block)}
/* S is 4 of the 8 works columns, and always hangs right */
.f-frame--S{width:calc((100% - 7 * var(--gutter)) / 8 * 4 + 3 * var(--gutter)); margin-left:auto}
@media (max-width:899px){
  .f-a .f-works{margin-top:var(--gap-frame)}
  .f-frame--S{width:66.666%}
}

/* D, Wall text */
.f-walltext{
  grid-column:1 / span 8; margin:0;
  font-size:clamp(24px,2.8vw,40px); line-height:1.3; font-weight:300; letter-spacing:-.012em;
  text-wrap:pretty;
}

/* B, Pair: two M side by side, copy 32 below on the rail */
.f-pair{grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter)}
.f-b .f-copy{grid-column:1 / span 6; margin-top:var(--gap-frame)}
@media (max-width:899px){ .f-pair{grid-template-columns:1fr; gap:var(--gap-block)} }

/* C, Break: one Full frame, copy 32 beneath on the rail */
.f-frame--full{width:100%; max-height:100svh}
.f-c .f-copy{grid-column:1 / span 6; margin-top:var(--gap-frame)}

/* Contact: copy 4 on the rail, form 6 from column 7 */
.f-contact .f-copy{grid-column:1 / span 4}
.f-form{grid-column:7 / span 6}
.f-form form{max-width:none}
.flow > .seg__lede{margin-bottom:calc(var(--s1) - 30px)}
@media (max-width:899px){ .f-form{margin-top:var(--gap-group)} }

/* footer on the rail, ground edge to edge */
.f-foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2) var(--s4);
  max-width:none; margin:0;
  padding:var(--s4) max(var(--margin), calc((100% - var(--max)) / 2)) var(--s5);
  border-top:1px solid var(--rule);
}

/* ---------- review only: version switcher. remove before launch ---------- */
.top__right{display:flex; align-items:baseline; gap:var(--s4); pointer-events:none}
.vswitch{display:flex; gap:var(--s3); pointer-events:auto}
.vs-pair{display:flex; gap:var(--s1)}
.vswitch a{min-width:24px; text-align:center; padding:12px 4px; margin:-12px -4px; font-size:13px; letter-spacing:.02em; color:var(--paper-dim); text-decoration:none;
           border-bottom:1px solid transparent; padding-bottom:2px}
.vswitch a:hover{color:var(--paper)}
.vswitch a[aria-current]{color:var(--paper); border-bottom-color:currentColor}
@media (max-width:899px){
  .vswitch{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(var(--s2) + env(safe-area-inset-bottom));
    padding:10px var(--s3); border-radius:999px;
    background:rgba(18,18,20,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
  .vswitch a{color:rgba(233,229,223,.7)}
  .vswitch a[aria-current]{color:#e9e5df}
}

@media (prefers-reduced-motion:reduce){
  .f-img{transition:none; opacity:1}
}

/* phones (Michael, 2026-10-02): the hero zoomed in too far. no overscan, no
   parallax, crop moved left to the sharp middle where the rows recede */
@media (max-width:899px){
  .f-hero__media{background-position:42% 50%}
  .f-img--hero{top:-2%; height:104%; object-position:42% 50%; transform:none !important}
}

/* ---------- phone hero type, 2026-10-03 (Michael: too small) ----------
   the headline is as large as it can be while "Weaving a world" still holds one
   line at 360px wide (measured per font), growing with wider phones to a cap.
   the line beneath and the location step up with it. */
@media (max-width:899px){
  .f-hero .t-h1{font-size:clamp(36px, calc((100vw - 48px) / 7.05), 48px); line-height:1.08}
  .f-hero .t-intro{font-size:21px; line-height:1.4}
  .f-hero .t-meta{font-size:16px}
}

/* phones: the portrait hero is already composed, so it sits centered */
@media (max-width:899px){ .f-img--hero{object-position:50% 50%} }

/* phones (Michael, 2026-10-03): no parallax, so no overscan; frames show the whole photo */
@media (max-width:899px){ .f-img{top:0; height:100%} }

/* the location in the hero, all caps (Michael, 2026-10-03); caps need tracking to read evenly */
.f-hero .t-meta{text-transform:uppercase; letter-spacing:.16em}