:root{ --bone:#F4EFE8; --paper:#FBF8F4; --deep:#17130F; --ink:#1C1713; --soft:#6B6157; --faint:#9C9084; --amber:#A9752E; --amber-lt:#D9AE6B; --glow:#E8C596; --line:rgba(28,23,19,.14); --gut:clamp(20px,5vw,72px); --serif:'Didot','Bodoni MT','Playfair Display',ui-serif,Georgia,'Times New Roman',serif; --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Inter,Helvetica,Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:auto;-webkit-text-size-adjust:100%} body{ background:var(--bone); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--glow);color:var(--deep)} /* ---------- grain ---------- */ .grain{position:fixed;inset:-50%;pointer-events:none;z-index:9998;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='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode:multiply} /* ---------- type ---------- */ .display{font-family:var(--serif);font-weight:400;line-height:.92;letter-spacing:-.02em} .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);font-weight:500} .lede{font-size:clamp(16px,1.45vw,20px);line-height:1.6;color:var(--soft);max-width:46ch} .num{font-family:var(--serif);font-variant-numeric:lining-nums} /* ---------- prototype badge ---------- */ .proto{position:fixed;left:12px;bottom:12px;z-index:9999;font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--soft);background:rgba(251,248,244,.82); border:1px solid var(--line);border-radius:999px;padding:6px 12px;backdrop-filter:blur(8px)} /* ---------- nav ---------- */ nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center; justify-content:space-between;padding:18px var(--gut);transition:background .5s var(--ease), border-color .5s var(--ease),padding .5s var(--ease);border-bottom:1px solid transparent} nav.solid{background:rgba(244,239,232,.78);backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:var(--line);padding-top:13px;padding-bottom:13px} .wordmark{font-family:var(--serif);font-size:19px;letter-spacing:.36em;text-transform:uppercase; padding-left:.36em} .navlinks{display:flex;gap:34px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--soft)} .navlinks a{position:relative;padding:4px 0} .navlinks a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%; background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)} .navlinks a:hover::after{transform:scaleX(1);transform-origin:left} .cart{font-size:12px;letter-spacing:.11em;text-transform:uppercase;display:flex;gap:7px;align-items:center} .cart b{font-weight:500;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--bone); font-size:10px;display:grid;place-items:center} /* ---------- scroll rail ---------- */ .rail{position:fixed;right:clamp(10px,2.2vw,30px);top:50%;transform:translateY(-50%);z-index:880; display:flex;flex-direction:column;align-items:flex-end;gap:14px} .rail .track{width:1px;height:150px;background:var(--line);position:relative;overflow:hidden} .rail .fill{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--amber); transform:scaleY(0);transform-origin:top} .rail .label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint); writing-mode:vertical-rl;transition:opacity .4s} /* ---------- reveal primitives ---------- */ /* Reveal states apply ONLY when JS is running (html.js is set in ). Without JS — and to any crawler that does not execute it — every word is painted at full opacity instead of sitting at opacity:0 forever. */ .js [data-rise]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)} .js [data-rise].in{opacity:1;transform:none} .mask{overflow:hidden;display:block} .js .mask>span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease)} .js .in .mask>span,.js .mask.in>span{transform:none} /* ---------- hero ---------- */ .hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex; align-items:flex-end;padding:0 var(--gut) clamp(44px,7vh,84px)} .hero-media{position:absolute;inset:-14% -3% -14% -3%;z-index:0;will-change:transform} .hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.03) brightness(1.05) blur(1.4px)} .hero-wash{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(244,239,232,.55) 0%,rgba(244,239,232,.14) 34%,rgba(244,239,232,.72) 76%,var(--bone) 100%)} .hero-glow{position:absolute;left:50%;top:44%;width:min(78vw,900px);aspect-ratio:1;z-index:1; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(232,197,150,.55) 0%,rgba(232,197,150,0) 62%);mix-blend-mode:soft-light} .hero-inner{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1fr auto; gap:40px;align-items:end} .hero h1{font-size:clamp(52px,10.6vw,164px)} .hero h1 em{font-style:italic;color:var(--amber)} .hero .lede{margin-top:26px} .hero-side{text-align:right;padding-bottom:8px} .btnrow{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} .btn{font-size:12px;letter-spacing:.13em;text-transform:uppercase;padding:15px 30px;border-radius:999px; border:1px solid var(--ink);background:var(--ink);color:var(--bone);cursor:pointer; transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--bone)} .cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;display:grid; justify-items:center;gap:9px} .cue span{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft)} .cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--ink),transparent); animation:drop 2.4s var(--ease) infinite} @keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ---------- marquee ---------- */ .marquee{border-block:1px solid var(--line);padding:19px 0;overflow:hidden;background:var(--paper); position:relative;z-index:5} .mq-track{display:flex;gap:56px;white-space:nowrap;width:max-content;will-change:transform} .mq-track span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft); display:flex;align-items:center;gap:56px} .mq-track span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--amber-lt)} /* ---------- section chrome ---------- */ section{position:relative} .shead{display:flex;justify-content:space-between;align-items:baseline;gap:24px; padding:clamp(70px,10vh,130px) var(--gut) 0;border-top:1px solid transparent} .shead h2{font-size:clamp(34px,5.4vw,76px)} /* --- step 01 lifestyle band (ClearMark) --- */ .cleanse{position:relative;padding:clamp(56px,10vh,120px) var(--gut);background:var(--bone); border-bottom:1px solid var(--line);overflow:hidden} .cleanse-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(26px,6vw,86px);align-items:center} .cleanse-media{position:relative;border-radius:2px;overflow:hidden;background:#E7DED2;aspect-ratio:3/4} .cleanse-media video,.cleanse-media img{position:absolute;inset:-6% 0;width:100%;height:112%; object-fit:cover;will-change:transform} .cleanse-tag{position:absolute;left:13px;bottom:13px;z-index:2;font-size:9px;letter-spacing:.2em; text-transform:uppercase;color:var(--bone);background:rgba(23,19,15,.5); backdrop-filter:blur(6px);border-radius:999px;padding:6px 12px} .cleanse h2{font-size:clamp(32px,5.2vw,72px)} .cl-list{margin-top:clamp(24px,3.4vh,36px)} .cl-list li{list-style:none;display:flex;justify-content:space-between;align-items:baseline; gap:18px;padding:12px 0;border-top:1px solid var(--line);font-size:13.5px} .cl-list li:last-child{border-bottom:1px solid var(--line)} .cl-list b{font-weight:500;letter-spacing:.01em} .cl-list span{color:var(--soft);text-align:right;font-size:12.5px} .cl-note{margin-top:20px;font-size:13px;color:var(--faint);max-width:44ch} @media(max-width:900px){.cleanse-in{grid-template-columns:1fr;gap:34px}} @media(prefers-reduced-motion:reduce){.cleanse-media video{display:none}} /* --- shared price lockup: one component, used by the three-step band and the shop grid. Previously duplicated under two names. --- */ .price{display:flex;align-items:baseline;gap:11px;margin-top:16px;flex-wrap:wrap} .was{color:var(--faint);text-decoration:line-through;font-family:var(--serif);font-size:16px} .now{font-family:var(--serif);font-size:23px} .save{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber); border:1px solid rgba(169,117,46,.5);border-radius:999px;padding:4px 9px;align-self:center} /* ---------- ritual (pinned scrub) ---------- */ .ritual{background:var(--paper)} .ritual-track{height:380vh;position:relative} .ritual-pin{position:sticky;top:0;height:100svh;display:grid; grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(24px,5vw,80px); padding:0 var(--gut);overflow:hidden} .frame{position:relative;justify-self:end;width:min(38vw,430px);aspect-ratio:420/525; border-radius:2px;overflow:hidden;background:#E7DED2; box-shadow:0 40px 90px -40px rgba(28,23,19,.5)} .frame canvas{width:100%;height:100%;display:block} .frame::after{content:'';position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 90px rgba(28,23,19,.22)} .frame-tag{position:absolute;left:14px;bottom:12px;z-index:2;font-size:9px;letter-spacing:.2em; text-transform:uppercase;color:rgba(251,248,244,.9);text-shadow:0 1px 6px rgba(0,0,0,.5)} .steps{position:relative;height:min(60vh,440px);max-width:520px} .step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; opacity:0;transform:translateY(30px);transition:opacity .55s var(--ease),transform .7s var(--ease); pointer-events:none} .step.on{opacity:1;transform:none} .step .k{font-family:var(--serif);font-size:clamp(60px,8vw,110px);line-height:1;color:var(--amber-lt)} .step h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,52px); line-height:1.03;margin:10px 0 16px;letter-spacing:-.015em} .step p{color:var(--soft);max-width:40ch;font-size:15.5px} .stepbar{position:absolute;left:0;bottom:-46px;display:flex;gap:8px} .stepbar i{width:44px;height:2px;background:var(--line);position:relative;overflow:hidden} .stepbar i b{position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left; transition:transform .35s linear} /* ---------- actives (horizontal) ---------- */ .actives{background:var(--deep);color:var(--paper)} .actives .eyebrow{color:var(--glow)} .act-track{height:400vh;position:relative} .act-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center} .act-rail{display:flex;gap:clamp(20px,3vw,44px);padding-inline:var(--gut);width:max-content; will-change:transform} .act-intro{width:min(46vw,460px);flex:none;align-self:center} .act-intro h2{font-family:var(--serif);font-size:clamp(38px,5.6vw,80px);line-height:.95;letter-spacing:-.02em} .act-intro p{color:rgba(251,248,244,.62);margin-top:20px;max-width:34ch;font-size:15.5px} .card{width:min(38vw,340px);flex:none;border:1px solid rgba(251,248,244,.16);border-radius:3px; padding:30px 26px 26px;display:flex;flex-direction:column;justify-content:space-between; height:min(62vh,470px);position:relative;overflow:hidden;background:rgba(251,248,244,.03)} .card .bignum{position:absolute;right:-14px;bottom:-40px;font-family:var(--serif);font-size:190px; line-height:1;color:rgba(251,248,244,.05)} .card .pct{font-family:var(--serif);font-size:clamp(40px,4.6vw,62px);color:var(--glow);line-height:1} .card h3{font-family:var(--serif);font-weight:400;font-size:26px;margin-top:6px;letter-spacing:-.01em} .card .role{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-lt);margin-top:14px} .card p{color:rgba(251,248,244,.6);font-size:14.5px;margin-top:12px;position:relative;z-index:1} .card .foot{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,244,.38); border-top:1px solid rgba(251,248,244,.14);padding-top:14px;margin-top:18px} .act-prog{position:absolute;left:var(--gut);bottom:38px;right:var(--gut);height:1px; background:rgba(251,248,244,.18)} .act-prog b{position:absolute;inset:0;background:var(--glow);transform:scaleX(0);transform-origin:left} /* ================= CELLURA CHAPTER (dark) ================= */ .chapter{background:var(--deep);color:var(--paper);position:relative} .chapter .eyebrow{color:var(--glow)} /* --- scroll-linked tonal inversion: dark panel rises over light --- */ .chapter-open{height:170vh;position:relative;background:var(--bone)} .co-pin{position:sticky;top:0;height:100svh;overflow:hidden} .co-layer{position:absolute;inset:0;display:grid;place-content:center;justify-items:center; text-align:center;padding:0 var(--gut)} .co-light{background:var(--bone);color:var(--ink)} .co-dark{background:var(--deep);color:var(--paper);will-change:transform;transform:translateY(100%)} .co-h{font-family:var(--serif);font-weight:400;font-size:clamp(34px,6.6vw,96px);line-height:.97; letter-spacing:-.022em} .co-h em{font-style:italic;color:var(--amber)} .co-dark .co-h em{color:var(--glow)} .co-sub{margin-top:22px;font-size:clamp(14px,1.3vw,17.5px);max-width:46ch;line-height:1.6} .co-light .co-sub{color:var(--soft)} .co-dark .co-sub{color:rgba(251,248,244,.6)} .co-mark{font-family:var(--serif);letter-spacing:.44em;text-transform:uppercase; font-size:clamp(12px,1.5vw,17px);color:var(--glow);margin-bottom:26px;padding-left:.44em} .co-rule{width:1px;height:54px;background:linear-gradient(var(--glow),transparent);margin:30px auto 0} /* --- pinned scroll-scrub: the floating jar --- */ .balm-track{height:340vh;position:relative} .balm-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1.04fr; align-items:center;gap:clamp(24px,5vw,78px);padding:0 var(--gut);overflow:hidden} .balm-canvas{position:relative;justify-self:end;width:min(46vw,560px);aspect-ratio:620/432; border-radius:2px;overflow:hidden;background:#0c0c0e;box-shadow:0 50px 120px -55px #000} .balm-canvas canvas{width:100%;height:100%;display:block} .balm-canvas::after{content:'';position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 0 110px rgba(0,0,0,.55)} .bsteps{position:relative;height:min(58vh,430px);max-width:520px} .bstep{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; opacity:0;transform:translateY(28px);transition:opacity .55s var(--ease),transform .7s var(--ease); pointer-events:none} .bstep.on{opacity:1;transform:none} .bstep .k{font-size:10px;letter-spacing:.21em;text-transform:uppercase;color:var(--amber-lt)} .bstep h3{font-family:var(--serif);font-weight:400;font-size:clamp(29px,3.9vw,58px);line-height:1.01; margin:14px 0 16px;letter-spacing:-.018em} .bstep p{color:rgba(251,248,244,.63);max-width:42ch;font-size:15.5px} .bstep .note{margin-top:20px;font-size:11.5px;color:rgba(251,248,244,.4); border-left:1px solid rgba(251,248,244,.22);padding-left:13px;max-width:40ch;line-height:1.65} .bbar{position:absolute;left:0;bottom:-44px;display:flex;gap:8px} .bbar i{width:44px;height:2px;background:rgba(251,248,244,.2);position:relative;overflow:hidden} .bbar i b{position:absolute;inset:0;background:var(--glow);transform:scaleX(0);transform-origin:left; transition:transform .35s linear} /* --- six actives, sticky media + staggered rows --- */ .hex{padding:clamp(30px,6vh,80px) var(--gut) clamp(70px,10vh,130px); display:grid;grid-template-columns:.92fr 1.2fr;gap:clamp(30px,5vw,84px);align-items:start} .hex-media{position:sticky;top:11vh;overflow:hidden;border-radius:2px;aspect-ratio:4/5;background:#0c0c0e} .hex-media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform} .hex-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,66px); line-height:.99;letter-spacing:-.02em;margin-bottom:14px} .hex-head p{color:rgba(251,248,244,.58);font-size:15.5px;max-width:44ch;margin-bottom:26px} .hex-item{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:24px 0; border-top:1px solid rgba(251,248,244,.14)} .hex-item:last-child{border-bottom:1px solid rgba(251,248,244,.14)} .hex-ico{width:46px;height:46px;border-radius:50%;border:1px solid rgba(217,174,107,.5); display:grid;place-items:center;font-family:var(--serif);font-size:14px;color:var(--glow)} .hex-item h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--paper)} .hex-item p{font-size:14.5px;color:rgba(251,248,244,.58);margin-top:8px;max-width:48ch} .hex-note{grid-column:1/-1;margin-top:34px;font-size:11.5px;color:rgba(251,248,244,.36); max-width:70ch;line-height:1.65} /* --- full-bleed editorial band --- */ .band{position:relative;height:min(88svh,760px);overflow:hidden;background:#0c0c0e} .band img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover; object-position:50% 34%;will-change:transform;filter:saturate(.94) contrast(1.02)} .band::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,rgba(12,12,14,.82) 0%,rgba(12,12,14,.34) 46%,rgba(12,12,14,0) 74%)} .band-cap{position:absolute;left:var(--gut);bottom:clamp(34px,7vh,72px);z-index:2;max-width:34ch} .band-cap p{font-family:var(--serif);font-size:clamp(20px,2.5vw,34px);line-height:1.22; color:var(--paper);letter-spacing:-.01em} @media (max-width:1000px){ .band{height:min(70svh,520px)} .band::after{background:linear-gradient(0deg,rgba(12,12,14,.86) 0%,rgba(12,12,14,.2) 58%,rgba(12,12,14,0) 100%)} } /* --- inversion back to light --- */ .chapter-close{height:150vh;position:relative;background:var(--deep)} .cc-light{transform:translateY(100%);will-change:transform} /* --- placeholder product cards --- */ .prod.ph .prod-media{background:linear-gradient(155deg,#EFE7DC,#DFD2C0);display:grid;place-items:center} .ph-mark{text-align:center;padding:22px} .ph-mark b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,42px); color:rgba(28,23,19,.42);line-height:1.05} .ph-mark span{display:inline-block;margin-top:18px;font-size:9px;letter-spacing:.2em;text-transform:uppercase; color:var(--amber);border:1px dashed rgba(169,117,46,.65);padding:7px 13px;border-radius:999px} /* ---------- timeline ---------- */ .tl{padding:clamp(80px,12vh,150px) var(--gut) clamp(70px,10vh,120px)} .tl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px);margin-top:56px; position:relative} .tl-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)} .tl-line b{position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left} .tl-item{padding-top:26px;opacity:.3;transition:opacity .6s var(--ease)} .tl-item.on{opacity:1} .tl-item .wk{font-family:var(--serif);font-size:clamp(32px,4vw,54px);line-height:1} .tl-item h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:12px 0 8px;font-weight:500} .tl-item p{font-size:14.5px;color:var(--soft)} .tl-item .dot{position:absolute;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--bone); border:1px solid var(--line);transition:background .5s,border-color .5s} .tl-item.on .dot{background:var(--amber);border-color:var(--amber)} .disclaim{margin-top:44px;font-size:11.5px;color:var(--faint);max-width:64ch;line-height:1.6} /* ---------- products ---------- */ .shop{padding:0 var(--gut) clamp(80px,11vh,140px)} .prods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,40px);margin-top:52px} .prod{position:relative;display:block;cursor:pointer} .prod-media{position:relative;overflow:hidden;background:#E7DED2;aspect-ratio:4/5;border-radius:2px} .prod-media img{position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;will-change:transform; transition:filter .7s var(--ease)} .prod:hover .prod-media img{filter:brightness(1.05) saturate(.94)} .prod-media .tagpill{position:absolute;top:14px;left:14px;z-index:2;font-size:9px;letter-spacing:.18em; text-transform:uppercase;background:rgba(251,248,244,.9);padding:6px 12px;border-radius:999px} .prod-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;gap:14px} .prod-meta h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.01em} .prod-meta .price{font-family:var(--serif);font-size:19px} .prod-meta .sub{font-size:12.5px;color:var(--soft);margin-top:4px} .prod .add{margin-top:14px;width:100%;justify-content:center;display:flex} /* ---------- proof ---------- */ .proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper); display:grid;grid-template-columns:repeat(4,1fr)} .proof div{padding:clamp(30px,4.4vh,52px) clamp(18px,2.4vw,34px);border-right:1px solid var(--line)} .proof div:last-child{border-right:0} .proof .big{font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);line-height:1} .proof p{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-top:12px} /* ---------- cta + footer ---------- */ .cta{padding:clamp(90px,15vh,180px) var(--gut);text-align:center;position:relative;overflow:hidden} .cta h2{font-size:clamp(40px,8.4vw,128px)} .cta h2 em{font-style:italic;color:var(--amber)} .cta .lede{margin:22px auto 0} .signup{display:flex;gap:0;max-width:440px;margin:34px auto 0;border-bottom:1px solid var(--ink)} .signup input{flex:1;border:0;background:transparent;padding:13px 2px;font-family:var(--sans); font-size:14px;color:var(--ink);outline:none} .signup input::placeholder{color:var(--faint)} .signup button{border:0;background:transparent;font-size:11px;letter-spacing:.16em;text-transform:uppercase; cursor:pointer;padding:0 4px;color:var(--ink)} footer{border-top:1px solid var(--line);padding:44px var(--gut) 54px;display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;font-size:13px;color:var(--soft)} footer h5{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:14px; font-weight:500} footer ul{list-style:none;display:grid;gap:8px} footer .mark{font-family:var(--serif);font-size:17px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink)} footer .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin-top:14px; font-size:11px;color:var(--faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* ---------- responsive ---------- */ @media (max-width:1000px){ .rail{display:none} .hero-inner{grid-template-columns:1fr} .hero-side{text-align:left;padding-bottom:0} .ritual-track{height:auto} .ritual-pin{position:static;height:auto;grid-template-columns:1fr;padding-block:60px;gap:34px} .frame{justify-self:start;width:min(72vw,340px);order:-1} .ritual-pin{display:flex;flex-direction:column} .steps{position:static;height:auto;display:grid;gap:34px} .step{position:static;opacity:1;transform:none;padding-left:0} .step .k{font-size:44px} .stepbar{display:none} .act-track{height:auto} .act-pin{position:static;height:auto;display:block;padding-block:60px} .act-rail{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory; width:auto;padding-bottom:18px;-webkit-overflow-scrolling:touch} .act-rail>*{scroll-snap-align:start} .act-intro{width:min(78vw,420px)} .card{width:min(72vw,300px);height:auto;min-height:380px} .act-prog{display:none} .tl-grid{grid-template-columns:1fr 1fr;gap:28px 20px} .prods{grid-template-columns:1fr} .proof{grid-template-columns:1fr 1fr} .proof div:nth-child(2){border-right:0} .proof div:nth-child(1),.proof div:nth-child(2){border-bottom:1px solid var(--line)} footer{grid-template-columns:1fr 1fr} .navlinks{display:none} } @media (max-width:560px){ .tl-grid{grid-template-columns:1fr} .tl-line{display:none} .tl-item .dot{display:none} .tl-item{opacity:1;border-top:1px solid var(--line)} } /* ---- chapter responsive ---- */ @media (max-width:1000px){ .chapter-open{height:auto;background:var(--deep)} .co-pin{position:static;height:auto;overflow:visible} .co-layer{position:static;transform:none!important;padding-block:clamp(64px,11vh,110px)} .co-light{display:none} .balm-track{height:auto} .balm-pin{position:static;height:auto;display:flex;flex-direction:column; padding-block:60px;gap:34px;overflow:visible} .balm-canvas{width:100%;justify-self:stretch;order:-1} .bsteps{position:static;height:auto;display:grid;gap:36px;max-width:none} .bstep{position:static;opacity:1;transform:none} .bbar{display:none} .hex{grid-template-columns:1fr;gap:34px} .hex-media{position:relative;top:0} .chapter-close{height:auto;background:var(--bone)} .cc-light{transform:none!important} .prods{grid-template-columns:1fr} } @media (min-width:1001px) and (max-width:1240px){ .prods{grid-template-columns:repeat(3,1fr);gap:18px} .prod-meta{flex-direction:column;align-items:flex-start;gap:6px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .js [data-rise]{opacity:1!important;transform:none!important} .js .mask>span{transform:none!important} .step{opacity:1!important;position:static!important;transform:none!important} .steps{position:static;height:auto;display:grid;gap:30px} .ritual-track,.act-track{height:auto} .ritual-pin,.act-pin{position:static;height:auto} .act-rail{transform:none!important;overflow-x:auto} .balm-track,.chapter-open,.chapter-close{height:auto} .balm-pin,.co-pin{position:static;height:auto} .co-layer{position:static;transform:none!important} .co-light{display:none} .bstep{opacity:1!important;position:static!important;transform:none!important} .bsteps{position:static;height:auto;display:grid;gap:32px} .cc-light{transform:none!important} .hex-media{position:relative;top:0} .tl-item{opacity:1!important} .tl-line b{transform:scaleX(1)!important} } /* citation inside the role line — keeps the eyebrow style, drops the caps */ .card .role .cite{display:inline;text-transform:none;letter-spacing:.015em; font-size:11px;color:var(--faint);white-space:normal} .card .role{white-space:normal;line-height:1.45} /* ========================================================================= EVIDENCE — the four actives, graded. Editorial ledger: hairline rules, serif figures, no vertical borders. Lives on the light page between the dark ACTIVES rail and the tonal inversion into the Cellura chapter. ====================================================================== */ .evi{background:var(--bone);color:var(--ink); padding:clamp(80px,12vh,150px) var(--gut) clamp(70px,10vh,120px);position:relative} .evi::before{content:'';position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px; background:var(--line)} .evi-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px); align-items:end;margin-bottom:clamp(40px,6vh,72px)} .evi-head h2{font-size:clamp(32px,5vw,68px);margin-top:16px} .evi-head h2 em{font-style:italic;color:var(--amber)} .evi-intro{font-size:clamp(15px,1.25vw,17.5px);line-height:1.62;color:var(--soft);max-width:52ch} /* --- horizontal scroll shell (only ever needed on narrow desktops) --- */ .evi-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--line) transparent} .evi-scroll:focus-visible{outline:1px solid var(--amber);outline-offset:6px} .evi-scroll::-webkit-scrollbar{height:3px} .evi-scroll::-webkit-scrollbar-thumb{background:var(--line)} .evi-table{width:100%;min-width:1080px;border-collapse:collapse;text-align:left} .evi-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .evi-table thead th{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500; color:var(--faint);padding:0 clamp(14px,1.6vw,26px) 16px 0;vertical-align:bottom; border-bottom:1px solid var(--ink)} .evi-table thead th:last-child{padding-right:0} .evi-table .ta-r{text-align:right} /* fixed column rhythm — stops "Assessment window" colliding with the grade column */ .evi-table thead th:nth-child(1){width:13%} .evi-table thead th:nth-child(2){width:18%} .evi-table thead th:nth-child(3){width:16%} .evi-table thead th:nth-child(4){width:12%} .evi-table thead th:nth-child(5){width:11%} .evi-table thead th:nth-child(6){width:8%} .evi-table thead th:nth-child(7){width:22%} .evi-table tbody th, .evi-table tbody td{padding:clamp(24px,3vh,34px) clamp(14px,1.6vw,26px) clamp(24px,3vh,34px) 0; vertical-align:top;border-bottom:1px solid var(--line);font-weight:400} .evi-table tbody td:last-child{padding-right:0} .evi-table tbody tr:last-child th, .evi-table tbody tr:last-child td{border-bottom:1px solid var(--ink)} /* row-header: index, name, alias, and the amber accent that draws in */ .evi-table tbody th[scope="row"]{position:relative;width:16%;min-width:150px;padding-left:20px} .evi-table tbody th[scope="row"]::before{content:'';position:absolute;left:0;top:clamp(24px,3vh,34px); bottom:clamp(24px,3vh,34px);width:2px;background:var(--amber); transform-origin:top;transition:transform 1s var(--ease) .1s} .js .evi-table tbody th[scope="row"]::before{transform:scaleY(0)} .js .evi-table tbody tr.in th[scope="row"]::before{transform:scaleY(1)} .evi-n{display:block;font-size:11px;letter-spacing:.16em;color:var(--amber);margin-bottom:10px} .evi-name{display:block;font-family:var(--serif);font-size:clamp(21px,2.1vw,27px);line-height:1.08; letter-spacing:-.01em} .evi-alias{display:block;margin-top:8px;font-size:10px;letter-spacing:.15em;text-transform:uppercase; color:var(--faint)} .evi-role{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--amber);margin-bottom:10px;line-height:1.5} .evi-body{display:block;font-size:14.5px;line-height:1.6;color:var(--soft);max-width:38ch} .evi-fig{display:block;font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1; font-variant-numeric:lining-nums;white-space:nowrap} .evi-fig .u{font-size:.42em;letter-spacing:.08em;text-transform:uppercase;color:var(--faint); margin-left:.25em;vertical-align:.25em} .evi-sub{display:block;margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--faint);max-width:22ch; margin-left:auto} /* --- strength meter --- */ .evi-grade{display:flex;align-items:center;gap:6px;white-space:nowrap} .evi-grade i{width:7px;height:7px;border-radius:50%;border:1px solid var(--line);background:transparent; transition:transform .5s var(--ease),opacity .5s var(--ease), background-color .5s var(--ease),border-color .5s var(--ease)} .js .evi-grade i{transform:scale(.4);opacity:0} .evi-grade i:nth-child(2){transition-delay:.08s} .evi-grade i:nth-child(3){transition-delay:.16s} .js tr.in .evi-grade i{transform:scale(1);opacity:1} .evi-grade[data-level="1"] i:nth-child(-n+1), .evi-grade[data-level="2"] i:nth-child(-n+2), .evi-grade[data-level="3"] i:nth-child(-n+3){background:var(--amber);border-color:var(--amber)} .evi-grade b{margin-left:8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500} .evi-grade[data-level="1"] b{color:var(--faint)} .evi-why{display:block;margin-top:12px;font-size:13px;line-height:1.55;color:var(--soft);max-width:34ch} .evi-cite{display:block;margin-top:14px;font-size:11px;line-height:1.5;color:var(--faint); max-width:34ch;border-bottom:1px solid transparent;padding-bottom:1px; transition:color .4s var(--ease),border-color .4s var(--ease)} .evi-cite i{font-style:italic} .evi-cite:hover{color:var(--amber);border-bottom-color:rgba(169,117,46,.4)} .evi-cite:focus-visible{outline:1px solid var(--amber);outline-offset:3px} .evi-foot{margin-top:36px;font-size:11.5px;line-height:1.65;color:var(--faint);max-width:82ch} /* --- row + cell choreography (transform lives on the inner spans: table rows and cells are unreliable transform containers) --- */ .js .evi-table tbody tr[data-rise]{opacity:0;transform:none;transition:opacity .85s var(--ease)} .js .evi-table tbody tr[data-rise].in{opacity:1} .js .evi-table tbody tr[data-rise] > * > span, .js .evi-table tbody tr[data-rise] > * > a{opacity:0;transform:translateY(14px); transition:opacity .8s var(--ease),transform .9s var(--ease)} .js .evi-table tbody tr[data-rise].in > * > span, .js .evi-table tbody tr[data-rise].in > * > a{opacity:1;transform:none} .evi-table tbody tr[data-rise] > *:nth-child(2) > *{transition-delay:.06s} .evi-table tbody tr[data-rise] > *:nth-child(3) > *{transition-delay:.12s} .evi-table tbody tr[data-rise] > *:nth-child(4) > *{transition-delay:.18s} .evi-table tbody tr[data-rise] > *:nth-child(5) > *{transition-delay:.24s} .evi-table tbody tr[data-rise] > *:nth-child(6) > *{transition-delay:.3s} @media (hover:hover){ .evi-table tbody tr{transition:opacity .85s var(--ease),background-color .45s var(--ease)} .evi-table tbody tr:hover{background:rgba(251,248,244,.72)} } /* --- stacked cards below desktop --- */ @media (max-width:1000px){ .evi-head{grid-template-columns:1fr;align-items:start;gap:22px} .evi-scroll{overflow:visible} .evi-table{min-width:0;display:block} .evi-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .evi-table tbody,.evi-table tbody tr{display:block} .evi-table tbody tr{border:1px solid var(--line);border-radius:3px;padding:22px 20px; margin-bottom:16px;background:rgba(251,248,244,.5)} .evi-table tbody th,.evi-table tbody td{display:block;width:auto;min-width:0;border:0; padding:14px 0 0 0;text-align:left!important} .evi-table tbody tr:last-child th,.evi-table tbody tr:last-child td{border:0} .evi-table tbody th[scope="row"]{padding:0 0 4px 0} .evi-table tbody th[scope="row"]::before{display:none} .evi-table tbody td[data-label]::before{content:attr(data-label);display:block; font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:8px} .evi-table tbody td + td{border-top:1px solid var(--line)} .evi-body,.evi-why,.evi-cite,.evi-sub{max-width:none} .evi-sub{margin-left:0} .evi-fig{font-size:26px} } @media (prefers-reduced-motion:reduce){ .js .evi-table tbody tr[data-rise], .js .evi-table tbody tr[data-rise] > * > span, .js .evi-table tbody tr[data-rise] > * > a{opacity:1!important;transform:none!important} .js .evi-grade i{opacity:1!important;transform:none!important} .js .evi-table tbody th[scope="row"]::before{transform:scaleY(1)!important} } /* --- shop card: crawlable permalink wrapper --- */ .prod-link{display:block;color:inherit} .prod .add .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;width:100%} /* ========================================================================= INTERACTION LAYER — controls, not just scroll. Everything here is keyboard-reachable and has a visible focus ring. ====================================================================== */ .skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--deep);color:var(--paper); padding:12px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-radius:0 0 3px 0} .skip:focus{left:0} :where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--amber);outline-offset:3px} .actives :where(a,button,[tabindex]):focus-visible, .chapter :where(a,button,[tabindex]):focus-visible{outline-color:var(--glow)} /* --- cart button --- */ .cart{background:none;border:0;font:inherit;color:inherit;cursor:pointer; font-size:12px;letter-spacing:.11em;text-transform:uppercase} .cart b{transition:transform .45s var(--ease),background-color .45s var(--ease)} .cart.bump b{transform:scale(1.45);background:var(--amber)} /* --- toast --- */ .toast{position:fixed;left:50%;bottom:26px;z-index:9997;transform:translate(-50%,140%); background:var(--deep);color:var(--paper);font-size:12.5px;letter-spacing:.03em; padding:13px 22px;border-radius:999px;display:flex;align-items:center;gap:14px; box-shadow:0 12px 40px rgba(23,19,15,.28);transition:transform .55s var(--ease);max-width:calc(100vw - 32px)} .toast.show{transform:translate(-50%,0)} .toast a{color:var(--glow);border-bottom:1px solid rgba(232,197,150,.45);padding-bottom:1px;white-space:nowrap} /* --- button busy / done states --- */ .btn[aria-busy="true"]{opacity:.55;pointer-events:none} .btn.done{border-color:var(--amber);color:var(--amber)} /* --- actives rail: real controls --- */ .act-ctl{position:absolute;right:var(--gut);bottom:clamp(28px,6vh,54px);z-index:5;display:flex;gap:10px} .act-ctl button{width:44px;height:44px;border-radius:50%;cursor:pointer;background:transparent; border:1px solid rgba(251,248,244,.28);color:var(--paper);display:grid;place-items:center; transition:background-color .4s var(--ease),border-color .4s var(--ease),opacity .4s var(--ease)} .act-ctl button:hover:not(:disabled){background:rgba(251,248,244,.1);border-color:rgba(251,248,244,.55)} .act-ctl button:disabled{opacity:.28;cursor:default} .act-ctl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4} .act-hint{position:absolute;left:var(--gut);bottom:clamp(28px,6vh,54px);z-index:5; font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,248,244,.58)} .act-rail{cursor:grab} .act-rail.dragging{cursor:grabbing;user-select:none} @media (max-width:1000px){ .act-ctl,.act-hint{display:none} } /* --- ritual step bar becomes a control --- */ /* The step bars keep their exact 44x2 look; the ::before is an invisible 44x38 hit target so they are tappable as well as scroll-driven. */ .stepbar button,.bbar button{all:unset;box-sizing:border-box;display:block;cursor:pointer; width:44px;height:2px;position:relative;overflow:visible} .stepbar button{background:var(--line)} .bbar button{background:rgba(251,248,244,.2)} .stepbar button::before,.bbar button::before{content:'';position:absolute;left:0;right:0;top:-18px;bottom:-18px} .stepbar button b,.bbar button b{position:absolute;inset:0;transform:scaleX(0);transform-origin:left; transition:transform .35s linear} .stepbar button b{background:var(--amber)} .bbar button b{background:var(--glow)} .stepbar button:hover,.bbar button:hover{background:var(--amber-lt)} .stepbar button[aria-current="true"]{box-shadow:0 0 0 1px rgba(169,117,46,.45)} .stepbar button:focus-visible,.bbar button:focus-visible{outline-offset:8px} /* --- evidence sort control --- */ .evi-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 22px} .evi-tools .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint); margin-right:4px} .evi-tools button{background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer; font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft); padding:8px 16px;transition:border-color .35s var(--ease),color .35s var(--ease),background-color .35s var(--ease)} .evi-tools button:hover{border-color:var(--amber);color:var(--amber)} .evi-tools button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)} .evi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* --- signup form states --- */ .signup input:focus-visible{outline:2px solid var(--amber);outline-offset:2px} .signup button[aria-busy="true"]{opacity:.55;pointer-events:none} .signup-msg{margin-top:14px;font-size:12.5px;color:var(--soft);min-height:1.2em;text-align:center} .signup-msg.err{color:#9C3B22} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media (prefers-reduced-motion:reduce){ .toast{transition:none} .cart.bump b{transform:none} } /* card citations are links now — keep them quiet until hovered */ a.cite{border-bottom:1px solid transparent;transition:color .35s var(--ease),border-color .35s var(--ease)} a.cite:hover{color:var(--glow);border-bottom-color:rgba(232,197,150,.45)} /* --- "In Luminé": the column that reads the studied figure back against the product. Set apart with a tinted rule so the pair reads as a comparison, and honest where there is nothing to state. --- */ .evi-mine{background:rgba(169,117,46,.045);box-shadow:inset 1px 0 0 rgba(169,117,46,.22),inset -1px 0 0 rgba(169,117,46,.22)} .evi-table thead th.evi-mine{color:var(--amber)} .evi-fig.evi-own{color:var(--amber)} .evi-nd{font-family:var(--sans);font-size:12px;letter-spacing:.11em;text-transform:uppercase; color:var(--faint);white-space:nowrap} @media (max-width:1000px){ .evi-mine{background:rgba(169,117,46,.06);box-shadow:none;border-radius:2px; padding-left:12px!important;padding-right:12px!important;padding-bottom:12px!important} .evi-table tbody td.evi-mine::before{color:var(--amber)} } /* ========================================================================= THREE STEPS — the orientation band. Deliberately image-free: the product photography belongs to the shop grid at the foot of the page, and running the same three shots twice made the page feel like it repeated itself. This beat carries the causal argument instead — what each step does FOR the next one. ====================================================================== */ .steps3{padding:clamp(58px,9vh,110px) var(--gut) clamp(56px,8vh,96px);background:var(--paper); border-bottom:1px solid var(--line)} .s3-head{margin-bottom:clamp(30px,5vh,52px)} .s3-head h2{font-size:clamp(26px,3vw,40px);line-height:1.08;margin-top:14px;max-width:44ch} .s3-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#EAE1D7; border:1px solid rgba(28,23,19,.07);border-radius:2px;overflow:hidden} .s3-card{display:flex;flex-direction:column;padding:clamp(26px,2.6vw,40px); border-left:1px solid rgba(28,23,19,.1)} .s3-card:first-child{border-left:0} .s3-step{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft); font-weight:500} .s3-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.2vw,28px); letter-spacing:-.012em;margin-top:16px} .s3-card p{font-size:14.5px;line-height:1.6;color:var(--soft);margin-top:14px;flex:1;max-width:42ch} .s3-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:26px;padding-top:18px;border-top:1px solid rgba(28,23,19,.13)} .s3-foot .price{margin-top:0} .s3-tag{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint); white-space:nowrap} .s3-btn{margin-top:22px;align-self:flex-start} .s3-note{margin-top:clamp(24px,4vh,42px);border-left:2px solid var(--amber); padding:4px 0 4px clamp(18px,2vw,28px);display:flex;align-items:center;justify-content:space-between; gap:clamp(18px,3vw,40px);flex-wrap:wrap} .s3-note p{font-size:14.5px;line-height:1.62;color:var(--soft);max-width:62ch} .s3-note b{color:var(--amber);font-weight:500} .s3-bundle{flex:none} @media (max-width:900px){ .s3-grid{grid-template-columns:1fr} .s3-card{border-left:0;border-top:1px solid rgba(28,23,19,.1)} .s3-card:first-child{border-top:0} .s3-head h2{max-width:none} .s3-note{flex-direction:column;align-items:flex-start} .s3-btn,.s3-bundle{width:100%;text-align:center;justify-content:center} } /* ========================================================================= THE CHAIN — four stages, and an honest mark where nothing acts. ====================================================================== */ .chain{background:var(--paper);padding:clamp(66px,10vh,120px) var(--gut) clamp(50px,8vh,90px); border-top:1px solid var(--line)} .chain-head{max-width:62ch;margin-bottom:clamp(28px,5vh,46px)} .chain-head h2{font-size:clamp(27px,3.4vw,46px);line-height:1.05;letter-spacing:-.02em} .chain-head p{margin-top:16px;font-size:clamp(15px,1.25vw,17px);line-height:1.6;color:var(--soft);max-width:52ch} .chain-grid{display:grid;grid-template-columns:repeat(4,1fr);list-style:none; background:#EAE1D7;border:1px solid rgba(28,23,19,.07);border-radius:2px;overflow:hidden} .chain-cell{padding:clamp(20px,2vw,30px);border-left:1px solid rgba(28,23,19,.1); display:flex;flex-direction:column} .chain-cell:first-child{border-left:0} .chain-n{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);font-weight:500} .chain-cell h3{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.6vw,21px); letter-spacing:-.01em;margin-top:12px} .chain-cell p{font-size:13.5px;line-height:1.55;color:var(--soft);margin-top:10px;flex:1} .chain-act{margin-top:18px;padding-top:12px;border-top:1px solid rgba(28,23,19,.13); font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);line-height:1.5} /* the stage nothing in the formula touches — said out loud, not hidden */ .chain-cell.is-gap{background:rgba(28,23,19,.035)} .chain-gap{color:var(--faint)} .chain-notes{margin-top:clamp(24px,4vh,40px);display:grid;gap:18px;max-width:70ch} .chain-note{border-left:2px solid var(--line);padding-left:clamp(16px,1.6vw,22px); font-size:14px;line-height:1.65;color:var(--soft)} .chain-note:last-child{border-left-color:var(--amber)} @media (max-width:900px){ .chain-grid{grid-template-columns:1fr} .chain-cell{border-left:0;border-top:1px solid rgba(28,23,19,.1)} .chain-cell:first-child{border-top:0} } /* --- what to expect: prose above the week grid --- */ .tl-head{max-width:66ch} .tl-head h2{margin-top:14px} .tl-lede{margin-top:18px;font-size:clamp(15px,1.25vw,17px);line-height:1.62;color:var(--soft);max-width:56ch} .tl-spf{margin-top:40px;border-left:2px solid var(--amber);padding-left:clamp(16px,1.6vw,22px); font-size:14px;line-height:1.65;color:var(--soft);max-width:64ch} .tl-spf b{color:var(--ink);font-weight:500}