/* ============================================================
   FUSION CREATION — "Studio Feed" shared system (v2 pages)
   Ground #ECECEA · Ink #17171A · Signal #D6336C
   Fraunces display / Archivo body / Space Mono provenance
   ============================================================ */
:root{
  --paper:#ececea;
  --paper-2:#f4f4f2;
  --ink:#17171a;
  --ink-60:#57575a;
  --ink-38:#656569;          /* ~4.9:1 on paper for 10-11px labels (clear AA margin) */
  --ink-faint:#8a8a8d;       /* old ink-38 — decorative only, never for text that must be read */
  --line:#d2d2cf;
  --signal:#d6336c;          /* display/large use */
  --signal-ink:#b3285a;      /* darker signal for small text (~4.5:1 on paper) */
  --signal-rgb:214,51,108;   /* for rgba() tints derived from the accent */
  --f-display:'Fraunces',Georgia,serif;
  --f-body:'Archivo',-apple-system,sans-serif;
  --f-mono:'Space Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-weight:400;
  font-size:16px;line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--signal);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* keyboard focus — one ring, everywhere. Never suppress without replacing. */
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;
}

/* skip link */
.skip{
  position:absolute;left:12px;top:-60px;z-index:300;
  background:var(--ink);color:var(--paper);padding:11px 18px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:top .2s ease;
}
.skip:focus{top:12px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#c4c4c1;border:3px solid var(--paper);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-38)}

.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:200;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.mono-s{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* screen-reader-only (skip target announcements, live regions) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* live/operational status text — ~5.9:1 on paper (AA for 10-11px text) */
.live{color:#0a6640}

/* ============ NAV — status bar ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 clamp(18px,3vw,40px);height:58px;
  background:rgba(236,236,234,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* brand lockup — circle FC mark + wordmark */
.nav-brand{display:flex;align-items:center;gap:11px;min-height:44px}
.brand-mark{
  width:34px;height:34px;flex:0 0 auto;border:1px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-style:italic;font-weight:420;font-size:15px;letter-spacing:0;color:var(--ink);
}
.brand-word{font-family:var(--f-display);font-weight:560;font-size:19px;letter-spacing:-.01em;line-height:1}
.brand-word em{font-style:italic;font-weight:420}
.nav-status{display:flex;align-items:center;gap:9px;color:var(--ink-60)}
.nav-status .pip{
  width:7px;height:7px;border-radius:50%;background:#0e9f6e;
  animation:pip 2.4s ease-out infinite;
}
@keyframes pip{
  0%{box-shadow:0 0 0 0 rgba(14,159,110,.45)}
  70%{box-shadow:0 0 0 8px rgba(14,159,110,0)}
  100%{box-shadow:0 0 0 0 rgba(14,159,110,0)}
}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.nav-links a{color:var(--ink-60);transition:color .2s ease;display:inline-flex;align-items:center;min-height:44px}
.nav-links a:hover,.nav-links a.here{color:var(--ink)}
.nav-links a.here{border-bottom:2px solid var(--signal)}
.nav-cta{
  color:var(--ink)!important;border:1px solid var(--ink);
  padding:9px 18px;min-height:40px;
  transition:background .22s ease,color .22s ease!important;
}
.nav-cta:hover{background:var(--ink);color:var(--paper)!important}
@media (max-width:860px){.nav-status{display:none}.nav-links a:not(.nav-cta){display:none}}

/* ============ page head (shared inner-page hero) ============ */
.page-head{padding:calc(58px + clamp(64px,9vw,120px)) clamp(18px,4.5vw,64px) clamp(40px,5vw,72px)}
.page-head-inner{max-width:1280px;margin:0 auto}
.page-head .kicker{color:var(--ink-38);margin-bottom:20px}
.page-head h1{
  font-family:var(--f-display);font-weight:420;
  font-size:clamp(40px,6.2vw,88px);line-height:1;letter-spacing:-.026em;
  max-width:14ch;text-wrap:balance;
}
.page-head h1 em{font-style:italic;font-weight:340;color:var(--signal)}
.page-head .lede{margin-top:24px;max-width:52ch;color:var(--ink-60);font-weight:300;font-size:clamp(15px,1.4vw,17px)}

/* ============ shared blocks ============ */
.sec{padding:clamp(72px,9vw,140px) clamp(18px,4.5vw,64px)}
.sec-inner{max-width:1280px;margin:0 auto}
.cta-solid{
  display:inline-flex;align-items:center;min-height:44px;
  background:var(--ink);color:var(--paper);
  padding:15px 34px;font-size:14px;letter-spacing:.05em;border:0;cursor:pointer;
  font-family:var(--f-body);
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s ease;
}
.cta-quiet{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--ink-38);color:var(--ink-60);
  transition:color .2s ease,border-color .2s ease;
}
/* hover transforms only on real hover pointers — avoids stuck states after tap */
@media (hover:hover) and (pointer:fine){
  .cta-solid:hover{transform:translateY(-2px);background:#000}
  .cta-quiet:hover{color:var(--ink);border-color:var(--ink)}
}

/* shared closing band — one component, so it can't drift */
.close-band{border-top:1px solid var(--ink)}
.close-band h2{
  font-family:var(--f-display);font-weight:420;
  font-size:clamp(30px,4vw,54px);letter-spacing:-.022em;line-height:1.04;
  max-width:20ch;text-wrap:balance;margin-bottom:26px;
}
.close-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap}

/* reveal system (clip child img, observe parent — self-clipped elements
   report zero intersection in Chromium) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.img-reveal img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.77,0,.175,1)}
.img-reveal.in img{clip-path:inset(0 0 0 0)}

/* provenance tag */
.prov{display:flex;justify-content:space-between;gap:10px;color:var(--ink-38);margin-top:10px}
.prov b{font-weight:400;color:var(--ink-60)}

/* editorial form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.4vw,34px) clamp(18px,2vw,28px)}
.field{display:flex;flex-direction:column;gap:9px}
.field.wide{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-38)}
.field input,.field select,.field textarea{
  font-family:var(--f-display);font-size:19px;font-weight:340;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--ink-38);
  padding:6px 0 10px;border-radius:0;outline:none;
  transition:border-color .25s ease;
}
.field textarea{resize:vertical;min-height:76px;line-height:1.4}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
@media (max-width:860px){.form-grid{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--ink);padding:clamp(36px,4vw,56px) clamp(18px,4.5vw,64px)}
.footer-inner{
  max-width:1280px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
}
.footer-brand{font-family:var(--f-display);font-weight:560;font-size:20px;display:flex;align-items:center;gap:10px}
.footer-brand .brand-mark{width:28px;height:28px;font-size:13px}
.footer-brand em{font-style:italic;font-weight:420}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:var(--ink-60);font-size:13px;transition:color .2s;display:inline-flex;align-items:center;min-height:36px}
.footer-links a:hover{color:var(--ink)}
.footer-note{color:var(--ink-38)}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .img-reveal img{clip-path:none;transition:none}
  html{scroll-behavior:auto}
  .nav-status .pip{animation:none}
}