/* ============================================================
   QULL — qull.io
   One design system, two worlds:
   the main site is monochrome and editorial (this file);
   Sofia's own site (sofia_site/, meetsophia.now) warms the same
   bones with its copy of this file plus sofia.css.
   Season Serif carries the voice. Inter carries the interface.
   ============================================================ */

@font-face{font-family:'Season Serif';src:url(fonts/SeasonSerif-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Season Serif';src:url(fonts/SeasonSerif-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#f4f2ec;        /* warm bone, not clinical white */
  --paper-2:#ece9e1;
  --ink:#141412;
  --ink-2:#54524b;        /* secondary text */
  --ink-3:#6f6b62;        /* tertiary, labels on paper (AA at small sizes) */
  --hair:rgba(20,20,18,.16);
  --hair-2:rgba(20,20,18,.08);
  --night:#100f0d;        /* dark bands */
  --night-2:#161511;
  --bone:#f0eee6;         /* text on night */
  --bone-2:#a3a094;       /* secondary on night */
  --hair-n:rgba(240,238,230,.16);
  --serif:'Season Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.2,1);
  --wide:1240px;
  --text:70ch;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--ink);color:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}

.skip-link{position:fixed;left:16px;top:-64px;z-index:200;background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:999px;font-size:.85rem;font-weight:600;transition:top .25s var(--ease)}
.skip-link:focus{top:16px}

/* ---------- type ---------- */
.overline{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3)}
.on-night .overline{color:var(--bone-2)}
.serif{font-family:var(--serif);font-weight:400}
.prose{max-width:var(--text);font-size:1.06rem;color:var(--ink-2)}
.prose p+p{margin-top:1.2em}
.prose strong{color:var(--ink);font-weight:600}
.prose .lead{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.5;color:var(--ink)}
.on-night .prose{color:var(--bone-2)}
.on-night .prose strong,.on-night .prose .lead{color:var(--bone)}

/* ---------- chrome: nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;
  mix-blend-mode:difference;color:#fff;
  transition:transform .45s var(--ease)}
.nav.hidden{transform:translateY(-110%)}
.nav.hidden:focus-within{transform:none}
.nav-inner{max-width:var(--wide);margin:0 auto;padding:22px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand svg{height:22px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:26px;font-size:.82rem;font-weight:500;letter-spacing:.04em}
.nav-links a{opacity:.75;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-cta{border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:8px 18px;
  font-size:.82rem;font-weight:600;letter-spacing:.03em;transition:background .25s,color .25s,border-color .25s}
.nav-cta:hover{background:#fff;color:#000;border-color:#fff}
@media(max-width:760px){.nav-links{display:none}.nav-inner{padding:16px 20px}}

/* ---------- buttons + links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;
  padding:14px 28px;font-weight:600;font-size:.92rem;letter-spacing:.02em;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn-ink:hover{background:transparent;color:var(--ink)}
.btn-ghost{border:1px solid var(--hair);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.on-night .btn-ink{background:var(--bone);color:var(--night);border-color:var(--bone)}
.on-night .btn-ink:hover{background:transparent;color:var(--bone)}
.on-night .btn-ghost{border-color:var(--hair-n);color:var(--bone)}
.on-night .btn-ghost:hover{border-color:var(--bone)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;
  border-bottom:1px solid var(--hair);padding-bottom:3px;transition:border-color .25s,gap .25s}
.link-arrow:hover{border-color:var(--ink);gap:12px}
.link-arrow .ar{transition:transform .25s var(--ease)}
.link-arrow:hover .ar{transform:translateX(2px)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 28px}
@media(max-width:760px){.wrap{padding:0 20px}}
section{position:relative}
.band{padding:clamp(96px,14vh,180px) 0}
.band-night{background:var(--night);color:var(--bone)}
.band-night ::selection{background:var(--bone);color:var(--night)}

/* chapter headers: number, hairline, title */
.ch-head{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(36px,6vh,64px)}
.ch-no{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3)}
.ch-rule{flex:1;height:1px;background:var(--hair-2);align-self:center}
.on-night .ch-no{color:var(--bone-2)}
.on-night .ch-rule{background:var(--hair-n)}
.ch-title{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.12;max-width:18ch;
  margin-bottom:clamp(18px,3vh,28px)}

/* ---------- reveal on scroll ----------
   Hidden states are gated on html.js (set by an inline script in <head>),
   so with scripting off every element is simply visible. */
html.js .r{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
html.js .r.in{opacity:1;transform:none;filter:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}

/* ---------- custom cursor (desktop, fine pointers) ---------- */
.cursor{position:fixed;z-index:300;left:0;top:0;width:8px;height:8px;border-radius:50%;
  background:var(--ink);pointer-events:none;opacity:0;
  transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),opacity .3s;
  mix-blend-mode:difference;background:#fff}
body.has-cursor .cursor{opacity:1}
.cursor.big{width:44px;height:44px}
@media(pointer:coarse){.cursor{display:none}}

/* ============================================================
   INDEX — the manifesto
   ============================================================ */

/* hero */
.hero{min-height:76svh;display:flex;align-items:center;padding:150px 0 40px}
/* Sofia follows the hero directly; keep the join tight */
#sofia.band{padding-top:clamp(40px,6vh,72px)}
.hero-inner{width:100%}
.hero .overline{margin-bottom:34px}
/* each statement is one line on desktop; the reveal masks read line by line */
.hero-h{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;
  font-size:clamp(2rem,4.1vw,3.85rem);line-height:1.26;max-width:44ch}
.hero-h .hl{display:block;overflow:hidden}
.hero-h .hl+.hl{margin-top:.55em}
.hero-h .hl>span{display:block}
html.js .hero-h .hl>span{transform:translateY(110%);
  transition:transform 1.1s var(--ease)}
html.js .hero-h .hl:nth-child(1)>span{transition-delay:.15s}
html.js .hero-h .hl:nth-child(2)>span{transition-delay:.4s}
html.js .hero-h .hl:nth-child(3)>span{transition-delay:.65s}
body.loaded .hero-h .hl>span{transform:none}
.hero-h .dim{color:var(--ink-3)}
.hero-sub{margin-top:38px;max-width:56ch;font-size:1.08rem;color:var(--ink-2)}
.hero-ctas{margin-top:44px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
html.js .hero-sub{opacity:0;transform:translateY(14px);
  transition:opacity 1s var(--ease) 1.1s,transform 1s var(--ease) 1.1s}
html.js .hero-ctas{opacity:0;transition:opacity 1s var(--ease) 1.35s}
body.loaded .hero-sub{opacity:1;transform:none}
body.loaded .hero-ctas{opacity:1}
/* the one-word beat */
.q-beat{text-align:center;padding:clamp(110px,18vh,220px) 0}
.q-beat .a{font-family:var(--serif);font-size:clamp(3rem,8.5vw,7.4rem);letter-spacing:-.015em;line-height:1.05}
.q-beat .a em{font-style:normal;position:relative;white-space:nowrap}
.q-beat .a em::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:1px;background:var(--ink);
  transform-origin:left}
html.js .q-beat .a em::after{transform:scaleX(0);transition:transform 1.2s var(--ease) .5s}
html.js .q-beat .a.in em::after{transform:scaleX(1)}

/* the personality ledger */
.ledger{margin-top:clamp(44px,7vh,72px);border-top:1px solid var(--hair)}
.lrow{display:grid;grid-template-columns:1fr 1fr;gap:32px;
  padding:clamp(22px,3.4vh,34px) 0;border-bottom:1px solid var(--hair)}
.lrow .agent{color:var(--ink-3);font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.4}
.lrow .person{font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.65rem);line-height:1.4}
@media(max-width:760px){.lrow{grid-template-columns:1fr;gap:8px}}

/* full-bleed quote beats */
.quote-beat{text-align:center}
.quote-beat blockquote{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,4rem);line-height:1.22;letter-spacing:-.01em;
  max-width:24ch;margin:0 auto}
.quote-beat .who{margin-top:30px;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-2);font-weight:600}

/* moat: three stones */
.stones{margin-top:clamp(44px,7vh,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-2)}
.stone{background:var(--paper);padding:34px 30px 40px}
.stone .k{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.3;margin-bottom:14px}
.stone p{font-size:.96rem;color:var(--ink-2)}
@media(max-width:860px){.stones{grid-template-columns:1fr}}

/* ---------- Sofia chapter (color enters here) ---------- */
.sofia-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
@media(max-width:960px){.sofia-grid{grid-template-columns:1fr}}
.sofia-copy .name{font-family:var(--serif);font-size:clamp(3rem,7vw,6rem);line-height:1;letter-spacing:-.015em;margin:14px 0 26px}
.sofia-copy .prose{font-size:1.02rem}
.sofia-facts{margin-top:34px;border-top:1px solid var(--hair)}
.sofia-facts div{display:flex;justify-content:space-between;gap:18px;padding:13px 2px;
  border-bottom:1px solid var(--hair);font-size:.9rem}
.sofia-facts dt{color:var(--ink-3);font-weight:500}
.sofia-facts dd{font-weight:600;text-align:right}
.sofia-ctas{margin-top:36px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* photo frames: real photos when present, a quiet monogram frame when not */
.photo{position:relative;overflow:hidden;background:var(--paper-2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.42));text-shadow:0 1px 8px rgba(0,0,0,.35)}
.photo.missing img{display:none}
.photo.missing::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 70% 20%,rgba(20,20,18,.05),transparent 60%),
    linear-gradient(160deg,var(--paper-2),#e2ded3)}
.photo.missing::after{content:attr(data-ph);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.4rem);color:var(--ink-3);letter-spacing:.02em}
.photo.missing figcaption{color:var(--ink-3);background:none;text-shadow:none}

/* the bloom: monochrome until seen, then colour arrives
   (released by .in on the figure itself OR on any revealed ancestor) */
html.js .photo.bloom img{filter:grayscale(1) contrast(1.04);transform:scale(1.04);
  transition:filter 2.2s var(--ease) .35s,transform 2.6s var(--ease) .1s}
html.js .photo.bloom.in img,html.js .in .photo.bloom img{filter:grayscale(0) contrast(1);transform:scale(1)}

/* the settle: every photo drifts from a gentle zoom into place as it enters */
html.js .photo.settle img{transform:scale(1.09);transition:transform 2.8s var(--ease)}
html.js .photo.settle.in img,html.js .in .photo.settle img{transform:scale(1)}

/* parallax layers: qull.js drives translate3d on [data-plx] */
[data-plx]{will-change:transform}

/* two-photo composition: the portrait carries, a second frame drifts behind it */
.duo{position:relative}
.duo .photo-b{position:absolute;right:-10%;bottom:-18%;width:50%;aspect-ratio:4/3.2;
  border:8px solid var(--paper);border-radius:2px;
  box-shadow:0 34px 80px -36px rgba(20,20,18,.5);z-index:2}
@media(max-width:960px){.duo{margin-bottom:20%}.duo .photo-b{right:-2%}}

/* full-bleed photo band: the image breathes behind a single line */
.band-photo{position:relative;height:min(82svh,760px);overflow:clip;display:flex;align-items:flex-end}
.band-photo .plate{position:absolute;inset:-12% 0;z-index:0}
.band-photo .plate img{width:100%;height:100%;object-fit:cover}
.band-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(178deg,transparent 40%,rgba(10,10,8,.62))}
.band-photo .caption{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,7vh,84px);color:#fff}
.band-photo .caption .big{font-family:var(--serif);font-size:clamp(1.8rem,4.2vw,3.4rem);
  line-height:1.16;letter-spacing:-.01em;max-width:22ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.band-photo .caption .overline{color:rgba(255,255,255,.75)}
.sofia-photo{aspect-ratio:4/4.6;border-radius:2px}

/* the scale beat: 250 million, counted up as it enters */
.scale-beat.band{padding:clamp(56px,8vh,96px) 0;text-align:center}
.scale-beat .n{font-family:var(--serif);font-size:clamp(3.2rem,10vw,8.4rem);
  line-height:1;letter-spacing:-.02em;margin-top:24px;font-variant-numeric:tabular-nums}
.scale-beat .who{margin-top:14px;font-family:var(--serif);
  font-size:clamp(1.3rem,2.6vw,2.1rem);color:var(--ink-2)}

/* the ambition band */
.ambition .big{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3.7rem);
  line-height:1.2;letter-spacing:-.01em;max-width:26ch}
.ambition .big em{font-style:normal;border-bottom:1px solid var(--hair-n)}
.amb-points{margin-top:clamp(44px,7vh,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.amb-points h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-bottom:12px}
.amb-points p{font-size:.95rem;color:var(--bone-2)}
@media(max-width:860px){.amb-points{grid-template-columns:1fr;gap:30px}}
.stats{margin-top:clamp(52px,8vh,84px);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-n)}
.stat{background:var(--night);padding:30px 26px 34px}
.stat .n{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;letter-spacing:-.01em}
.stat .l{margin-top:10px;font-size:.82rem;color:var(--bone-2);max-width:26ch}
@media(max-width:860px){.stats{grid-template-columns:1fr}}

/* closing beat */
.close-beat{min-height:92svh;display:flex;align-items:center;text-align:center}
.close-beat .inner{width:100%}
.close-beat .line1{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,3.9rem);line-height:1.2;color:var(--bone-2)}
.close-beat .line2{font-family:var(--serif);font-size:clamp(2rem,4.6vw,4.1rem);line-height:1.18;margin-top:18px;letter-spacing:-.012em}
.close-beat .line2b{display:block}
@media(max-width:760px){.close-beat .line2b{margin-top:14px}}
.close-beat .cta{margin-top:56px}

/* the quiet pulse: the wordmark's sound wave, breathing */
.pulse{display:inline-block;margin:0 auto 34px}
.pulse svg{display:block;height:44px;width:auto;overflow:visible}
.pulse .p1,.pulse .p2{transform-origin:left center}
.pulse .p1{animation:pw 4.2s var(--ease) infinite}
.pulse .p2{animation:pw 4.2s var(--ease) infinite 0.5s}
@keyframes pw{0%,100%{opacity:.25}45%{opacity:1}}

/* footer */
.footer{border-top:1px solid var(--hair-n);background:var(--night);color:var(--bone)}
.footer .wrap{padding-top:44px;padding-bottom:44px;display:flex;flex-wrap:wrap;gap:28px;
  align-items:center;justify-content:space-between;font-size:.85rem}
.footer .brand svg{height:18px}
.footer nav{display:flex;gap:24px;flex-wrap:wrap}
.footer a{color:var(--bone-2);transition:color .2s}
.footer a:hover{color:var(--bone)}
.footer .fine{width:100%;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--hair-n);color:var(--bone-2);font-size:.78rem}

/* paper footer variant (Sofia + utility pages) */
.footer.on-paper{background:var(--paper);color:var(--ink);border-top:1px solid var(--hair)}
.footer.on-paper a{color:var(--ink-2)}
.footer.on-paper a:hover{color:var(--ink)}
.footer.on-paper .fine{border-top-color:var(--hair);color:var(--ink-3)}

/* ---------- utility pages (thanks / 404 / start) ---------- */
.util{min-height:100svh;display:flex;align-items:center;text-align:center}
.util .inner{width:100%}
.util h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.1;margin:18px 0 20px}
.util p{max-width:52ch;margin:0 auto;color:var(--ink-2)}
.util .ctas{margin-top:40px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ---------- motion off ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav{transition:none}
  html.js .r,html.js .hero-sub,html.js .hero-ctas{opacity:1;transform:none;filter:none;transition:none}
  html.js .hero-h .hl>span{transform:none;transition:none}
  html.js .q-beat .a em::after{transform:scaleX(1);transition:none}
  .pulse .p1,.pulse .p2{animation:none;opacity:1}
  html.js .photo.bloom img{filter:none;transform:none;transition:none}
  html.js .photo.settle img{transform:none;transition:none}
  [data-plx]{transform:none!important}
  .cursor{display:none}
}