/* Debbie Sibal / E-com VA  -  "The Shift"
   Light stone page, one night band (the Shift + footer), tomato accent.
   Theme is locked light by design (see CONCEPT.md). */

:root{
  --stone:#ECEAE5; --stone-2:#E3E0D9; --line:#CFCBC3;
  --ink:#1D1C1A; --ink-2:#5C5852;
  --night:#1D1C1A; --night-2:#2A2825; --night-text:#ECEAE5; --night-mute:#9B968D; --night-line:rgba(236,234,229,.14);
  --tomato:#E4572E; --tomato-ink:#B9401C;
  --radius:4px;

  --f-display:"Cabinet Grotesk","Geist",system-ui,sans-serif;
  --f-text:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* type scale */
  --t-h1:clamp(44px, 5.4vw, 80px);
  --t-h2:clamp(34px, 3.8vw, 52px);
  --t-h3:clamp(28px, 2.6vw, 36px);
  --t-stat:clamp(52px, 5vw, 72px);
  --t-lede:17px;

  /* spacing (4/8 grid) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:48px;
  --header-h:64px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --dur-ui:180ms;
}
@media (max-width:1023px){ :root{ --gutter:32px; } }
@media (max-width:767px){ :root{ --gutter:16px; --t-lede:16px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--f-text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
picture{display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--tomato);color:var(--ink)}
html{scrollbar-color:#B8B3AA var(--stone)}
.aplus__frame{scrollbar-width:thin;scrollbar-color:#B8B3AA var(--stone-2)}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(1280px + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.i{width:1em;height:1em;fill:currentColor;flex:none}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--radius)}
.shift :focus-visible,.footer :focus-visible,.logcard :focus-visible{outline-color:var(--night-text)}

.skip{position:fixed;left:16px;top:12px;z-index:100;background:var(--ink);color:var(--stone);padding:10px 16px;border-radius:var(--radius);text-decoration:none;font-weight:500;transform:translateY(-160%);transition:transform var(--dur-ui) var(--ease-out)}
.skip:focus{transform:none}

/* ---------- shared bits ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--radius);font:500 16px/1 var(--f-text);text-decoration:none;white-space:nowrap;transition:transform 150ms var(--ease-out),background-color 150ms}
.btn--primary{background:var(--tomato);color:var(--ink)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--primary:active{transform:scale(.98)}
.btn--primary:focus-visible{outline-color:var(--ink)}
.footer .btn--primary:focus-visible{outline-color:var(--night-text)}

.text-link{display:inline-flex;align-items:center;gap:6px;font:500 16px/1.2 var(--f-text);color:var(--ink);text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1px}
.text-link:hover{text-decoration:underline;text-decoration-color:var(--tomato)}
.text-link .i{font-size:16px}

.night-link{display:inline-flex;align-items:center;gap:6px;font:500 15px/1.3 var(--f-text);color:var(--night-text);text-decoration:underline;text-decoration-color:var(--tomato);text-decoration-thickness:1px;text-underline-offset:4px}
.night-link .i{font-size:16px;transition:transform 200ms var(--ease-out)}
.night-link:hover .i{transform:translate(2px,-2px)}

.h2{font:700 var(--t-h2)/1.04 var(--f-display);letter-spacing:-0.03em;text-wrap:balance}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--ink-2);max-width:60ch;margin-top:var(--s-4)}
.label{font:400 12px/1.4 var(--f-mono);color:var(--ink-2);letter-spacing:.02em}
.caption{font-size:13px;line-height:1.45;color:var(--ink-2)}
.section{padding-block:clamp(72px, 8vw, 120px)}

/* name lockup */
.lockup{display:inline-flex;align-items:baseline;text-decoration:none;white-space:nowrap;color:var(--ink)}
.lockup__name{font:800 21px/1 var(--f-display);letter-spacing:-0.02em}
.lockup__slash{font:400 16px/1 var(--f-text);color:var(--tomato);white-space:pre}
.lockup__lane{font:400 13px/1 var(--f-mono);color:var(--ink-2)}
.lockup--night{color:var(--night-text)}
.lockup--night .lockup__lane{color:var(--night-mute)}

/* ---------- 0. header ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--stone);border-bottom:1px solid transparent;transition:border-color 200ms}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header__row{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-header__nav{display:flex;align-items:center;gap:28px}
.site-header__nav .text-link .i{font-size:14px}
.site-header__cta{height:40px;padding:0 18px;font-size:15px}
.site-header__cta-icon{display:none}
@media (max-width:520px){
  .site-header__nav{gap:16px}
  .site-header__cta{width:40px;padding:0}
  .site-header__cta-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-header__cta-icon{display:block;font-size:20px}
}
@media (max-width:399px){ .site-header .lockup__slash,.site-header .lockup__lane{display:none} }

/* ---------- 1. hero ---------- */
.hero{min-height:min(calc(100vh - var(--header-h)), 820px);min-height:min(calc(100dvh - var(--header-h)), 820px);display:flex;align-items:center;padding-block:clamp(28px, 5vw, 72px) clamp(56px, 6vw, 80px)}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.hero__copy{grid-column:1 / 8;padding-right:24px}
.hero__title{font:800 var(--t-h1)/1.0 var(--f-display);letter-spacing:-0.035em;max-width:11.5em}
.hero__title .h1-line-mask,.hero__title .h1-line{padding-bottom:.08em;margin-bottom:-.08em}
.hero__sub{font-size:19px;line-height:1.5;color:var(--ink-2);max-width:34ch;margin-top:28px}
.hero__sub strong{color:var(--ink);font-weight:500}
.hero__ctas{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:36px}
.hero__media{grid-column:8 / 13;position:relative}
.hero__photo{aspect-ratio:4 / 5;max-height:680px;margin-left:auto;overflow:hidden;border-radius:var(--radius);background:var(--stone-2)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

.logcard{position:absolute;left:-72px;bottom:-32px;width:380px;background:var(--night);color:var(--night-text);border-radius:var(--radius);padding:18px 20px 20px;font:400 13px/1.7 var(--f-mono)}
.logcard__head{display:flex;justify-content:space-between;gap:12px;font-size:11px;line-height:1.4;color:var(--night-mute);padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--night-line)}
.logcard__head span:last-child{color:var(--night-text)}
.log--card + .log--card{margin-top:8px}

/* log lines (hero card, Shift, footer) */
.log{display:grid;grid-template-columns:7.2em minmax(0,1fr);column-gap:12px;font-family:var(--f-mono);align-items:start}
.log__time{display:flex;flex-direction:column;color:var(--night-mute)}
.log__time time{font-variant-numeric:tabular-nums}
.log__tz{font-size:11px;line-height:1.5;color:var(--night-mute);white-space:nowrap}
.log__text{color:var(--night-text)}
.log__vis .w{white-space:nowrap}
.caret{display:none}
.caret.is-on{display:inline-block;position:relative;width:0;height:1em;vertical-align:-.14em}
.caret.is-on::after{content:"";position:absolute;left:.14em;top:-.04em;width:.6em;height:1.1em;background:var(--tomato)}
@media (prefers-reduced-motion:no-preference){
  .caret.is-on::after{animation:caret 1s steps(1) infinite}
}
@keyframes caret{50%{opacity:0}}

@media (max-width:1023px){
  .hero{min-height:0}
  .hero__grid{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .hero__copy,.hero__media{grid-column:1 / -1;padding-right:0}
  .hero__media{max-width:640px;width:100%}
  .hero__photo{aspect-ratio:5 / 4;max-height:none;margin-left:0}
  .hero__photo img{object-position:50% 28%}
  .logcard{position:relative;left:auto;bottom:auto;width:auto;max-width:400px;margin:-40px 16px 0 16px}
}
@media (max-width:767px){
  .hero__sub{font-size:17px;margin-top:20px}
  .hero__ctas{margin-top:24px}
  .hero__grid{row-gap:28px}
  .logcard{padding:14px 16px 16px;font-size:12.5px}
}

/* ---------- 2. numbers ribbon ---------- */
.ribbon__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ribbon__list li{padding:56px 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.ribbon__list li:first-child{border-left:0;padding-left:0}
.ribbon__num{font:800 clamp(44px, 4.4vw, 64px)/0.95 var(--f-display);letter-spacing:-0.035em;font-variant-numeric:lining-nums}
.ribbon__label{font-size:14px;line-height:1.4;color:var(--ink-2);max-width:22ch}
@media (max-width:767px){
  .ribbon__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ribbon__list li{padding:28px 16px}
  .ribbon__list li:nth-child(odd){border-left:0;padding-left:0}
  .ribbon__list li:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- 3. the Shift (night band) ---------- */
.shift{position:relative;isolation:isolate;color:var(--night-text);margin-top:clamp(40px, 5vw, 72px)}
.shift__bg{position:absolute;inset:0;z-index:-1;background:var(--night)}
.shift__stage{padding-block:clamp(80px, 9vw, 120px)}
.shift__head{margin-bottom:56px}
.shift__title{font:700 var(--t-h2)/1.04 var(--f-display);letter-spacing:-0.03em}
.shift__sub{font-size:17px;line-height:1.5;color:var(--night-mute);margin-top:12px}

.shift__body{position:relative;padding-left:40px}
.shift__line{position:absolute;left:0;top:6px;bottom:0;width:2px;background:var(--night-2)}
.shift__fill{position:absolute;inset:0;background:var(--tomato);transform-origin:50% 0}

.block + .block{margin-top:96px}
.block__copy > * + *{margin-top:16px}
.block .log{font-size:15px;line-height:1.55;grid-template-columns:7.4em minmax(0,1fr)}
.block__title{font:700 var(--t-h3)/1.05 var(--f-display);letter-spacing:-0.025em;margin-top:24px!important}
.stat{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.4;color:var(--night-mute)}
.stat strong{font:800 var(--t-stat)/0.92 var(--f-display);letter-spacing:-0.035em;color:var(--tomato)}
.what{font-size:17px;line-height:1.55;color:var(--night-text);max-width:40ch}
.block__links{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:8px}

.block__figure{margin-top:32px}
.block__figure figcaption{font-size:13px;line-height:1.45;color:var(--night-mute);margin-top:12px}
.frame{position:relative;background:var(--night-2);border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.frame__url{display:block;font:400 12px/1 var(--f-mono);color:var(--night-mute);padding:10px 12px}
.frame__img{width:100%;height:auto}
.frame--wide .frame__img{aspect-ratio:16 / 10;object-fit:cover;object-position:50% 0}
.frame-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.frame--sq .frame__img{aspect-ratio:1;object-fit:cover}
.frame-stack{position:relative;padding-top:40px}
.frame-stack .frame{width:88%}
.frame--back{position:absolute;top:0;left:12%}
.frame--front{position:relative}
.frame--tall{max-width:420px}
.frame--tall .frame__img{aspect-ratio:3 / 4;object-fit:cover}

@media (min-width:1024px){
  /* stacked (no JS / reduced motion) desktop layout: copy left, proof right */
  .block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .block__copy{grid-column:1 / 6}
  .block__figure{grid-column:6 / 13;margin-top:0}
}
@media (max-width:1023px){
  .block__copy{display:contents}
  .block > * + *{margin-top:16px}
  /* tablet: a one-line sticky log bar that releases after the caption */
  .block{padding-bottom:24px}
  .block .log{position:sticky;top:calc(var(--header-h) + 8px);z-index:2;background:var(--night);padding-block:8px;margin-top:0;grid-template-columns:4.2em minmax(0,1fr);box-shadow:0 1px 0 var(--night-line)}
  .block .log .log__tz{display:none}
  .block .log .log__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .block__title{margin-top:16px!important}
  .block__figure{margin-top:28px!important;max-width:640px}
}
@media (max-width:767px){
  .shift__body{padding-left:20px}
  .frame--wide .frame__img{aspect-ratio:4 / 5}
  .frame-stack{padding-top:0}
  .frame-stack .frame{width:100%}
  .frame--back{display:none}
  .frame--tall{max-width:none}
  .block + .block{margin-top:64px}
  /* phone: no sticky bar (the tomato rail already shows progress) */
  .block{padding-bottom:0}
  .block .log{position:static;padding-block:0;box-shadow:none;font-size:14px;grid-template-columns:6.8em minmax(0,1fr)}
  .block .log .log__tz{display:block}
  .block .log .log__text{white-space:normal;overflow:visible}
}

/* rail (desktop stage only; hidden attribute removed by JS) */
.rail[hidden]{display:none}
.rail{position:relative}
.rail__head{position:absolute;top:-30px;left:0;font:400 11px/1.4 var(--f-mono);color:var(--night-mute)}
.rail__track{position:relative;height:calc(100% - 56px);margin-top:6px}
.rail__ticks li{position:absolute;left:0;right:0;top:calc(var(--i) * 25%);transform:translateY(-12px)}
.tick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:2px 4px 2px 0;margin:0;cursor:pointer;text-align:left;font-family:var(--f-mono)}
.tick__time{position:relative;font-size:15px;line-height:20px;color:var(--night-mute);font-variant-numeric:tabular-nums}
.tick__hot{position:absolute;inset:0;color:var(--tomato);opacity:0}
.tick__tz{font-size:11px}
.tick:hover .tick__time{color:var(--night-text)}
.rail__now{position:absolute;left:66px;right:0;top:0;height:2px;margin-top:-1px;background:var(--tomato);will-change:transform;pointer-events:none}
.rail__dot{position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--tomato)}

/* pinned stage (class added by JS at >=1024px with motion allowed) */
.shift--stage .shift__stage{height:100vh;height:100dvh;padding:calc(var(--header-h) + 36px) 0 36px;overflow:hidden}
.shift--stage .shift__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:24px;height:100%}
.shift--stage .rail{grid-column:1 / 3;grid-row:2}
.shift--stage .shift__head{grid-column:3 / 13;grid-row:1;margin-bottom:36px}
.shift--stage .shift__body{grid-column:3 / 13;grid-row:2;padding-left:0;min-height:0}
.shift--stage .shift__line{display:none}
.shift--stage .shift__blocks{position:absolute;inset:0}
.shift--stage .block{position:absolute;inset:0;margin:0;padding:0;grid-template-columns:repeat(10,minmax(0,1fr));align-items:center;pointer-events:none}
.shift--stage .block.is-active{pointer-events:auto}
.shift--stage .block__copy{grid-column:1 / 5;padding-right:8px}
.shift--stage .block__figure{grid-column:5 / 11;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:0}
/* every visual shares one height (--vis), so all five frames share a top and bottom edge */
.shift--stage{--vis:calc(100dvh - 368px)}
.shift--stage .block__figure > :first-child{flex:0 1 auto;min-height:0}
.shift--stage .frame--wide{width:100%}
.shift--stage .frame--wide .frame__img{aspect-ratio:auto;width:100%;height:calc(var(--vis) - 32px);object-fit:cover;object-position:50% 0}
.shift--stage #block-inbox .frame__img{object-position:0 0} /* keep Limfae's left-aligned hero line whole */
.shift--stage .frame-pair{width:100%}
.shift--stage .frame-pair .frame__img{aspect-ratio:auto;width:100%;height:var(--vis);object-fit:cover;object-position:50% 20%}
.shift--stage .frame-stack{width:100%}
.shift--stage .frame-stack .frame__img{height:calc(var(--vis) - 72px)}
.shift--stage .frame-stack .frame{width:88%}
.shift--stage .frame--tall{height:var(--vis);flex:0 0 auto;max-width:none;width:auto;aspect-ratio:3 / 4}
.shift--stage .frame--tall picture,.shift--stage .frame--tall .frame__img{height:100%;width:100%}
.shift--stage .frame__img{will-change:transform}

/* ---------- 4. listings ---------- */
.section-head{max-width:760px;margin-bottom:56px}
.listings__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.aplus{grid-column:1 / 6;width:347px;max-width:100%;justify-self:start}
.aplus .label{margin-bottom:12px}
.aplus__frame{height:620px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--radius);background:var(--stone-2)}
.aplus__frame.is-scrub{overflow:hidden}
.aplus__img{width:100%;height:auto}
.stack4{grid-column:6 / 13;max-width:none;margin-top:29px}
.stack4__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stack4__grid > img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);background:var(--stone-2)}
.stack4 .caption{margin-top:12px}

.tools{margin-top:clamp(72px, 8vw, 112px)}
.tools__title{font:700 28px/1.1 var(--f-display);letter-spacing:-0.02em}
.tools__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 56px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.tools__list li{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.tools__list strong{font-weight:500;font-size:16px;color:var(--ink)}
.tools__foot{margin-top:24px}
@media (max-width:1023px){
  .listings__grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .aplus,.stack4{grid-column:1 / -1}
  .stack4{margin-top:0;max-width:640px}
}
@media (max-width:767px){
  .section-head{margin-bottom:40px}
  .aplus__frame{height:520px}
  .tools__list{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 5. stores ledger ---------- */
.ledger{--cols:minmax(0,1.7fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.5fr);position:relative;margin-top:48px;padding-right:384px}
.ledger__cols{display:grid;grid-template-columns:var(--cols);column-gap:24px;padding:0 16px 12px;font:400 12px/1.4 var(--f-mono);color:var(--ink-2)}
.ledger__rows{display:grid;gap:8px;padding-block:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ledger__row{position:relative;display:grid;grid-template-columns:var(--cols);column-gap:24px;align-items:center;min-height:72px;padding:10px 16px;border-radius:var(--radius);transition:background-color 200ms}
.ledger__info{display:contents}
.ledger__row:hover,.ledger__row:focus-within{background:var(--stone-2)}
.ledger__name{font:700 28px/1.05 var(--f-display);letter-spacing:-0.02em}
.ledger__name a{text-decoration:none}
.ledger__name a:hover{text-decoration:underline;text-decoration-color:var(--tomato);text-decoration-thickness:2px;text-underline-offset:5px}
.ledger__cell{font-size:15px;line-height:1.4;color:var(--ink-2)}
.ledger__preview{position:absolute;left:calc(100% + 24px);top:0;width:360px;height:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:50% 0;border-radius:var(--radius);border:1px solid var(--line);background:var(--stone-2);opacity:0;transform:translateY(8px);transition:opacity 200ms var(--ease-in),transform 200ms var(--ease-in);pointer-events:none}
.ledger__row:nth-child(n+4) .ledger__preview{top:auto;bottom:0}
.ledger__row:hover .ledger__preview,.ledger__row:focus-within .ledger__preview,
.ledger__rows:not(:hover):not(:focus-within) .ledger__row:first-child .ledger__preview{opacity:1;transform:none;transition-timing-function:var(--ease-out)}
@media (max-width:1023px){
  .ledger{padding-right:0;margin-top:40px}
  .ledger__cols{display:none}
  .ledger__rows{border:0;padding:0;gap:48px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger__row{display:flex;flex-direction:column;gap:14px;padding:0;min-height:0}
  .ledger__row:hover,.ledger__row:focus-within{background:none}
  .ledger__info{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0}
  .ledger__preview{position:static;order:-1;width:100%;opacity:1;transform:none}
  .ledger__name{width:100%;font-size:26px}
  .ledger__cell:nth-of-type(2):not(:empty)::before{content:"\00B7";padding:0 8px}
  .ledger__cell--empty{display:none}
  .ledger__cell:last-of-type{width:100%}
}
@media (max-width:640px){
  .ledger__rows{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
  .ledger__row{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
  .ledger__preview{grid-column:1;grid-row:1}
  .ledger__info{grid-column:2;grid-row:1;gap:2px 0}
  .ledger__name{font-size:21px;margin-bottom:4px}
  .ledger__cell{font-size:14px}
}

/* ---------- 6. day one ---------- */
.dayone__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.dayone__title{grid-column:2 / 10}
.dayone__body{grid-column:2 / 7;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:46ch;margin-top:24px}
.dayone__quote{grid-column:4 / 12;margin-top:72px;padding-left:32px;border-left:2px solid var(--tomato)}
.dayone__quote blockquote p{font:500 clamp(26px, 2.6vw, 34px)/1.25 var(--f-display);letter-spacing:-0.012em;max-width:30em;text-wrap:pretty}
.dayone__quote figcaption{font-size:15px;color:var(--ink-2);margin-top:20px}
@media (max-width:1023px){
  .dayone__title,.dayone__body,.dayone__quote{grid-column:1 / -1}
  .dayone__quote{margin-top:48px;padding-left:20px}
}

/* ---------- 7. setup ---------- */
.setup{border-top:1px solid var(--line)}
.setup__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.setup__title{grid-column:1 / 6;max-width:8em}
.setup__col:nth-of-type(1){grid-column:6 / 9}
.setup__col:nth-of-type(2){grid-column:9 / 13}
.setup__h{font:700 20px/1.2 var(--f-display);letter-spacing:-0.01em;padding-bottom:12px;border-bottom:1px solid var(--line)}
.spec > div{padding-top:18px}
.spec dt{font:400 12px/1.4 var(--f-mono);color:var(--ink-2)}
.spec dd{font-size:17px;line-height:1.45;margin-top:4px}
.proofs{display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:12px;margin-top:28px}
.proof{display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:transform 150ms var(--ease-out)}
.proof:hover{transform:translateY(-1px)}
.proof img{width:100%;height:auto;aspect-ratio:3 / 1;object-fit:cover;object-position:0 50%}
.proof--en img{transform:scale(1.8);transform-origin:12% 52%}
.proof__label{position:relative;display:block;padding:8px 10px;border-top:1px solid var(--line);background:var(--stone);font:400 12px/1.4 var(--f-mono);color:var(--ink-2)}
@media (max-width:1023px){
  .setup__grid{row-gap:40px}
  .setup__title{grid-column:1 / -1;max-width:none}
  .setup__col:nth-of-type(1){grid-column:1 / 7}
  .setup__col:nth-of-type(2){grid-column:7 / 13}
}
@media (max-width:767px){
  .setup__col:nth-of-type(1),.setup__col:nth-of-type(2){grid-column:1 / -1}
  .proofs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 8. specialist sites ---------- */
.sites__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.sites__head{grid-column:1 / 5;position:sticky;top:calc(var(--header-h) + 32px)}
.lanes{grid-column:5 / 13;display:grid;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.lane{display:grid;grid-template-columns:12px minmax(0,1fr) auto 20px;grid-template-areas:"sw title url arrow" ". line . .";column-gap:16px;row-gap:6px;align-items:baseline;min-height:104px;padding:22px 16px;border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:background-color 200ms}
.lane__swatch{grid-area:sw;width:12px;height:12px;border-radius:2px;background:var(--sw);align-self:center}
.lane__title{grid-area:title;font:700 clamp(24px, 2.3vw, 32px)/1.1 var(--f-display);letter-spacing:-0.02em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color 200ms}
.lane__line{grid-area:line;font-size:16px;line-height:1.45;color:var(--ink-2)}
.lane__url{grid-area:url;font:400 13px/1.4 var(--f-mono);color:var(--ink-2)}
.lane__arrow{grid-area:arrow;font-size:20px;align-self:center;transition:transform 200ms var(--ease-out)}
.lane:hover,.lane:focus-visible{background:var(--stone-2)}
.lane:hover .lane__title,.lane:focus-visible .lane__title{text-decoration-color:var(--tomato)}
.lane:hover .lane__arrow,.lane:focus-visible .lane__arrow{transform:translate(4px,-4px)}
@media (max-width:1023px){
  .sites__head{grid-column:1 / -1;position:static;margin-bottom:40px}
  .lanes{grid-column:1 / -1}
}
@media (max-width:767px){
  .lane{grid-template-columns:12px minmax(0,1fr) 20px;grid-template-areas:"sw title arrow" ". line ." ". url .";padding:20px 8px;column-gap:12px;min-height:0}
}

/* ---------- 9. footer ---------- */
.footer{background:var(--night);color:var(--night-text);padding:clamp(88px, 9vw, 120px) 0 40px}
.footer__log{position:relative;max-width:760px;padding-bottom:18px}
.footer .log{font-size:15px;line-height:1.55}
.footer__rule{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tomato);transform-origin:0 50%}
.footer__main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px 64px;align-items:end;margin-top:clamp(64px, 8vw, 104px)}
.footer__title{font:700 clamp(40px, 4.6vw, 64px)/1.02 var(--f-display);letter-spacing:-0.035em;max-width:12em;text-wrap:balance}
.footer__email{display:inline-block;margin-top:24px;font-size:20px;color:var(--night-text);text-decoration:underline;text-decoration-color:var(--night-mute);text-decoration-thickness:1px;text-underline-offset:5px}
.footer__email:hover{text-decoration-color:var(--tomato)}
.footer__actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:260px}
.footer__actions .btn{width:100%}
.footer__base{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-top:clamp(64px, 8vw, 104px);padding-top:24px;border-top:1px solid var(--night-line);font-size:14px;color:var(--night-mute)}
.footer__base .night-link{font-size:14px}
@media (max-width:767px){
  .footer__main{grid-template-columns:minmax(0,1fr)}
  .footer__actions{min-width:0}
  .footer .log{font-size:14px;grid-template-columns:6.8em minmax(0,1fr)}
  .footer__base{flex-direction:column;align-items:flex-start}
}

/* ---------- dialog ---------- */
.proof-dialog{border:0;padding:56px 24px 24px;border-radius:var(--radius);background:var(--stone);color:var(--ink);max-width:min(92vw, 760px);width:100%}
.proof-dialog::backdrop{background:rgba(29,28,26,.72)}
.proof-dialog__img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.proof-dialog__close{position:absolute;top:8px;right:8px;width:40px;height:40px;display:grid;place-items:center;background:none;border:0;border-radius:var(--radius);cursor:pointer}
.proof-dialog__close .i{font-size:22px}
.proof-dialog__close:hover{background:var(--stone-2)}