/* Spred — homepage. Structure and motion adapted from guillaumezhu.com (see docs/), identity from docs/BRAND_TOKENS.md. */

:root{
  --paper:#FDFAF3; --stone:#E0E3DC; --white:#FFFFFF; --ink:#111111; --line:#C3CCC7; --accent:#EAFF00; --ink-2:#5C615E;
  --accent-shade:#B6C800;            /* accent at ~72% brightness: only for the 3D mark's extruded edge */
  --sheet:40px; --card:20px; --inset:18px; --m:40px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:768px){ :root{ --sheet:28px; --inset:10px; --m:20px; } }

*{box-sizing:border-box}
html{background:var(--ink); -webkit-text-size-adjust:100%; overflow-x:clip}
body{margin:0; background:var(--ink); color:var(--ink); font-family:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.4; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; overflow-x:clip}
h1,h2,h3,h4,p{margin:0; font-weight:300}
a{color:inherit}
ul,ol{list-style:none; margin:0; padding:0}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.skip{position:fixed; left:16px; top:16px; z-index:200; transform:translateY(-200%); background:var(--accent); color:var(--ink);
  padding:10px 16px; border-radius:999px; text-decoration:none}
.skip:focus{transform:none}
.w{display:inline-block; white-space:nowrap}
.ch{display:inline-block}

/* ── Persistent UI ───────────────────────────────────────────────── */
.top{position:fixed; inset:0 0 auto 0; z-index:60; pointer-events:none; height:0}
.badge{pointer-events:auto; position:fixed; left:calc(var(--inset) + 18px); top:calc(var(--inset) + 18px); width:52px; height:52px; border-radius:16px;
  background:var(--ink); display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(253,250,243,.16)}
.badge svg{width:32px; height:32px; fill:var(--accent)}
.pill-nav{pointer-events:auto; position:fixed; left:50%; top:calc(var(--inset) + 18px); translate:-50% 0; height:52px; padding:0 8px;
  display:flex; align-items:center; gap:2px; background:var(--paper); border-radius:999px; box-shadow:inset 0 0 0 1px var(--line)}
.pill-nav a{display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:999px; text-decoration:none; font-size:15px; color:var(--ink);
  transition:background .3s var(--ease)}
.pill-nav a:hover{background:var(--stone)}
.pill-nav a[aria-current="true"]{background:var(--accent)}
.ticks{position:fixed; left:calc(var(--inset) + 22px); bottom:calc(var(--inset) + 22px); z-index:60; display:flex; flex-direction:column; gap:7px; color:var(--paper);
  transition:color .4s var(--ease)}
html[data-ui="light"] .ticks{color:var(--ink)}
.ticks li{height:2px; width:12px; border-radius:2px; background:currentColor; opacity:.4; transition:width .4s var(--ease), opacity .4s var(--ease)}
.ticks li.on{width:30px; opacity:1}

/* ── Loader (motion only) ─────────────────────────────────────────── */
.loader{display:none}
.motion .loader{display:block; position:fixed; inset:0; z-index:80; pointer-events:none}
.loader__mark{position:absolute; left:50%; top:50%; width:min(38vh,32vw); translate:-50% -50%; overflow:visible}
.loader__mark path{fill:var(--accent)}
.motion.is-loading{overflow:hidden}
.motion.is-loading .hero__frame{clip-path:inset(50% 50% 50% 50% round var(--sheet))}
.motion.is-loading .hero__word-in,.motion.is-loading .hero__line,.motion.is-loading .mark3d,.motion.is-loading .hero__foot,
.motion.is-loading .pill-nav,.motion.is-loading .badge,.motion.is-loading .ticks{opacity:0}

/* ── 01 Hero ──────────────────────────────────────────────────────── */
.hero{position:relative; height:100vh; height:100svh; background:var(--paper); padding:var(--inset)}
.hero__frame{position:relative; height:100%; border-radius:var(--sheet); background:var(--ink); color:var(--paper); overflow:hidden; transform-origin:50% 0}
.hero__word{position:absolute; inset:0; display:grid; place-items:center}
.hero__word-in{display:block; font-size:17.2vw; line-height:.8; letter-spacing:-.06em; font-weight:300; white-space:nowrap; translate:0 -.03em}
.hero__mark{position:absolute; left:50%; top:50%; width:min(38vh,32vw); aspect-ratio:1; translate:-50% -50%; perspective:1400px; pointer-events:none}
.mark3d{position:relative; width:100%; height:100%; transform-style:preserve-3d}
.mark3d .layer{position:absolute; inset:0; width:100%; height:100%; fill:var(--accent-shade); backface-visibility:visible}
.mark3d .layer.front,.mark3d .layer.back{fill:var(--accent)}
.hero__line{position:absolute; z-index:2; display:flex; flex-direction:column; font-size:4.6vw; line-height:1; letter-spacing:-.04em; font-weight:300}
.hero__line--a{top:15%; right:5.5%; align-items:flex-end; text-align:right}
.hero__line--b{bottom:17%; left:5.5%}
.hero__foot{position:absolute; left:calc(var(--m) + 56px); right:var(--m); bottom:30px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  font-size:15px; line-height:1.35; color:rgba(253,250,243,.66)}
.hero__foot p{max-width:30em}
.hero__foot b{font-weight:500; color:var(--paper)}
.hero__scroll{white-space:nowrap}

/* ── 02 Manifesto ─────────────────────────────────────────────────── */
.sheet{position:relative; z-index:2; border-radius:0 0 var(--sheet) var(--sheet)}
.sheet--both{border-radius:var(--sheet)}
.manifesto{background:var(--paper); padding:22vh var(--m)}
.manifesto__line{font-size:9.4vw; line-height:.94; letter-spacing:-.055em; font-weight:300}
.motion .manifesto{padding:0}
.motion .manifesto__stage{height:100vh; display:flex; align-items:center; overflow:hidden}
.motion .manifesto__line{font-size:12vw; white-space:nowrap; will-change:transform}

/* ── 03 Journey ───────────────────────────────────────────────────── */
.journey{position:relative; z-index:1; background:var(--ink); color:var(--paper); margin-top:calc(var(--sheet) * -1)}
.journey__entry{min-height:100vh; display:grid; place-items:center; padding:var(--sheet) var(--m) 0; text-align:center}
.journey__title{font-size:8.6vw; line-height:.95; letter-spacing:-.055em; font-weight:300; max-width:11ch}
.chapter{min-height:86vh; display:grid; place-items:center; text-align:center; padding:0 var(--m)}
.chapter p{font-size:8vw; line-height:.95; letter-spacing:-.055em; font-weight:300}
.chapter__a,.chapter__b{display:block}
.chapter[data-bg="ink"]{background:var(--ink); color:var(--paper)}
.chapter[data-bg="paper"]{background:var(--paper); color:var(--ink)}
.chapter[data-bg="stone"]{background:var(--stone); color:var(--ink)}
.chapter[data-bg="accent"]{background:var(--accent); color:var(--ink)}
.journey__chapters{border-radius:0 0 var(--sheet) var(--sheet); overflow:hidden; position:relative; z-index:2}
.motion .journey__entry{height:100vh; min-height:0}
.motion .journey__chapters{height:100vh; background:var(--ink)}
.motion .chapter{position:absolute; inset:0; min-height:0; background:transparent !important}
.motion .chapter__b{overflow:hidden; padding-bottom:.08em}
.motion .chapter__b > span{display:block}

/* ── 04 System ────────────────────────────────────────────────────── */
.system{background:var(--ink); color:var(--paper); padding:calc(16vh + var(--sheet)) var(--m) 16vh; margin-top:calc(var(--sheet) * -1)}
.system__head{text-align:center}
.system__title{font-size:6vw; line-height:1; letter-spacing:-.05em; font-weight:300}
.system__label{margin-top:14px; font-size:18px; color:rgba(253,250,243,.7)}
.motion .system__label{position:relative; height:1.4em; overflow:hidden}
.motion .system__label span{position:absolute; inset:0}
.group{display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:9vh}
.group__name{width:100%; text-align:center; font-size:22px; letter-spacing:-.02em; color:rgba(253,250,243,.7)}
.card{width:clamp(150px,18vw,259px); aspect-ratio:259/366; border-radius:var(--card); padding:clamp(16px,1.6vw,24px);
  display:flex; flex-direction:column; justify-content:space-between; color:var(--ink)}
.card h4{font-size:clamp(28px,3.3vw,50px); line-height:.94; letter-spacing:-.05em; font-weight:400}
.card .tag{align-self:flex-start; font-size:clamp(11px,.9vw,13px); line-height:1.2; background:var(--ink); color:var(--paper); padding:7px 12px; border-radius:999px; max-width:100%}
.c-paper{background:var(--paper)} .c-stone{background:var(--stone)} .c-white{background:var(--white)} .c-accent{background:var(--accent)}
.motion .system{height:100vh; padding:0}
.motion .system__stage{position:relative; height:100vh; overflow:hidden}
.motion .system__head{position:absolute; left:0; right:0; top:15vh}
.motion .deck{position:absolute; left:50%; top:63%; width:0; height:0}
.motion .group{display:contents}
.motion .group__name{display:none}
.motion .card{position:absolute; left:0; top:0; will-change:transform}

/* ── 05 Outcomes ──────────────────────────────────────────────────── */
.outcomes{background:var(--stone); padding:17vh var(--m) 19vh; text-align:center}
.outcomes__title{font-size:6vw; line-height:1; letter-spacing:-.05em; font-weight:300}
.outcomes__intro{margin-top:16px; font-size:18px; color:var(--ink-2)}
.outcomes__list{margin-top:9vh}
.outcomes__list li{display:flex; justify-content:center; align-items:center; font-size:5.6vw; line-height:1.2; letter-spacing:-.035em;
  font-style:italic; font-weight:300; cursor:default; outline-offset:-2px}
.o-a{margin-right:.22em}
.chip{display:inline-flex; align-items:center; justify-content:center; height:3.1em; font-size:max(12px,.19em); font-style:normal; font-weight:400;
  letter-spacing:0; white-space:nowrap; overflow:hidden; border-radius:999px; background:var(--accent); color:var(--ink);
  max-width:0; padding:0; margin:0; opacity:0; transform:scale(.6);
  transition:max-width .6s var(--ease), padding .6s var(--ease), margin .6s var(--ease), opacity .3s var(--ease), transform .6s var(--ease)}
.outcomes__list li:hover .chip,.outcomes__list li:focus-visible .chip{max-width:16em; padding:0 1.3em; margin:0 1.2em 0 .9em; opacity:1; transform:none}

/* ── 06 Next ──────────────────────────────────────────────────────── */
.next{background:var(--ink); color:var(--paper); padding:calc(18vh + var(--sheet)) var(--m) 16vh; margin-top:calc(var(--sheet) * -1); position:relative; z-index:1}
.next__intro{text-align:center}
.next__intro h2{font-size:7vw; line-height:1; letter-spacing:-.05em; font-weight:300}
.next__link{display:inline-block; margin-top:22px; font-size:20px; text-decoration:none; border-bottom:1px solid rgba(253,250,243,.4); padding-bottom:3px;
  transition:border-color .3s var(--ease)}
.next__link:hover{border-color:var(--accent)}
.next__svg{display:none}
.next__plain{margin:12vh auto 0; max-width:16ch; text-align:center; font-size:6vw; line-height:.98; letter-spacing:-.05em}
.motion .next{height:100vh; padding:0}
.motion .next__stage{position:relative; height:100vh; overflow:hidden}
.motion .next__intro{position:absolute; left:0; right:0; top:24vh; z-index:2}
.motion .next__svg{display:block; position:absolute; inset:0; width:100%; height:100%}
.next__text{font-size:210px; font-weight:300; letter-spacing:-.045em; fill:var(--paper)}
.next__orb{fill:var(--accent)}
.motion .next__plain{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0}

/* ── Footer ───────────────────────────────────────────────────────── */
.foot{background:var(--ink); padding:var(--inset)}
/* Ported from the Huella direction: a stone floor with a visible square grid (8 columns, 4 on small screens).
   The yellow block is drawn cell by cell by assets/footer.js. */
.hf{container-type:inline-size}
.hf__panel{--cols:8; --hm:40px; --cell:calc((100cqw - 2 * var(--hm)) / var(--cols));
  border-radius:var(--sheet); padding:var(--hm); color:var(--ink); background-color:var(--stone);
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(180deg,var(--line) 1px,transparent 1px);
  background-size:var(--cell) var(--cell); background-position:var(--hm) var(--hm)}
.hf__grid{display:grid; grid-template-columns:repeat(var(--cols),var(--cell)); grid-auto-rows:var(--cell)}
.hf__grid > *{min-width:0}
.hf__title{grid-column:1 / span 4; grid-row:1 / span 2; padding:14px 10px 0; font-size:calc(var(--cell) * .6); line-height:.94; letter-spacing:-.045em; font-weight:300}
.hf__note{grid-column:1 / span 3; grid-row:3; align-self:end; padding:0 10px 16px; max-width:30em; color:var(--ink-2); font-size:16px; line-height:1.4}
.hf__block{grid-column:5 / span 4; grid-row:1 / span 3; position:relative; display:grid}
.hf__block > svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.hf__in{position:relative; z-index:1; padding:34px; display:flex; flex-direction:column; align-items:flex-start}
.hf__pill{display:inline-flex; align-items:center; height:34px; padding:0 16px; border-radius:999px; background:var(--white); font-size:16px; line-height:1}
.hf__mail{margin-top:auto; font-size:40px; line-height:1.1; letter-spacing:-.03em; font-weight:300; text-decoration:none;
  background-image:linear-gradient(var(--ink),var(--ink)); background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%}
.hf__mail:hover{background-size:0 1px; transition:background-size .3s var(--ease)}
.hf__legal{grid-column:1 / -1; grid-row:4; align-self:end; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:0 10px 16px}
.hf__lockup{display:inline-flex; align-items:center; gap:.28em; font-size:26px; letter-spacing:-.035em; line-height:1; text-decoration:none}
.hf__lockup svg{width:1.15em; height:1.15em; flex:none; fill:var(--accent)}
.hf__legal ul{display:flex; gap:20px; flex-wrap:wrap; font-size:13px}
.hf__legal a{text-decoration:none}
.hf__legal a:hover{text-decoration:underline; text-underline-offset:3px}
.hf :focus-visible{outline-color:var(--ink)}           /* the site's accent outline would vanish on stone and yellow */
.js-hf .hf__in{opacity:0; transition:opacity .32s var(--ease)}
.js-hf .hf__block.built .hf__in{opacity:1}

/* ── Small screens ────────────────────────────────────────────────── */
@media (max-width:768px){
  .badge{width:44px; height:44px; border-radius:13px; left:calc(var(--inset) + 12px); top:calc(var(--inset) + 12px)}
  .badge svg{width:26px; height:26px}
  .pill-nav{top:calc(var(--inset) + 12px); left:auto; right:calc(var(--inset) + 12px); translate:none; height:44px; padding:0 4px}
  .pill-nav a{height:34px; padding:0 11px; font-size:14px}
  .pill-nav a[href="#manifesto"]{display:none}
  .ticks{display:none}
  .hero__word-in{font-size:18.4vw}
  .hero__mark,.loader__mark{width:54vw}
  .hero__line{font-size:8.6vw}
  .hero__line--a{top:17%}
  .hero__line--b{bottom:21%}
  .hero__foot{flex-direction:column; align-items:flex-start; font-size:13px; bottom:22px; left:22px; right:22px; gap:8px}
  .hero__scroll{display:none}
  .manifesto__line{font-size:13vw}
  .motion .manifesto__line{font-size:21vw}
  .journey__title{font-size:14vw}
  .chapter p{font-size:14vw}
  .system__title,.outcomes__title{font-size:12vw}
  .system__label,.outcomes__intro{font-size:16px}
  .outcomes__list li{font-size:7.6vw; flex-wrap:wrap}
  .chip{font-size:12px}
  .next__intro h2{font-size:13vw}
  .next__plain{font-size:11vw}
  .next__text{font-size:118px}
  .hf__panel{--cols:4; --hm:16px}
  .hf__grid > *{grid-column:1 / -1 !important; grid-row:auto !important}
  .hf__title{grid-row-end:span 2 !important; padding:10px 6px 0}
  .hf__note{padding:8px 6px 12px; font-size:15px}
  .hf__block{grid-row-end:span 3 !important}
  .hf__in{padding:22px}
  .hf__mail{font-size:28px}
  .hf__legal{grid-row-end:span 2 !important; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:12px; padding:0 6px 12px}
  .hf__lockup{font-size:20px}
}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }