/* Luka van Maren — "Quiet canvas, cinematic stage".
   Shipping stylesheet. Tokens, type scale, composition and the single motion
   moment are carried over unchanged from the approved cinematic direction; the
   additions below are the reusable section, index and case-study components the
   four-page site needs. */

@font-face{
  font-family:Archivo;
  src:url('./fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
}

:root{
  --white:#ffffff;
  --canvas:#f5f5f7;
  --ink:#111113;
  --ink-2:rgba(17,17,19,.68);
  --ink-3:rgba(17,17,19,.58);
  --line:rgba(17,17,19,.11);
  --stage:#08080a;
  --stage-2:rgba(255,255,255,.80);
  --stage-3:rgba(255,255,255,.60);
  --accent:#0b57d0;
  --pad:clamp(20px,5vw,64px);
  --block:clamp(84px,10vw,152px);
  --radius:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.011em;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0;font-weight:560;letter-spacing:-.032em;line-height:1.05;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%}

.skip{
  position:absolute;left:12px;top:-60px;z-index:50;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;
  font-size:14px;text-decoration:none;transition:top .16s ease;
}
.skip:focus{top:12px}

:where(a,button):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
.stage :where(a,button):focus-visible{outline-color:#8ab4ff}

/* ---------- top bar ---------- */
.bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--pad);height:56px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
}
.wordmark{font-size:15px;font-weight:600;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.bar nav{display:flex;gap:clamp(14px,2.4vw,30px)}
.bar nav a{font-size:14px;color:var(--ink-2);text-decoration:none;transition:color .18s ease}
.bar nav a:hover{color:var(--ink)}
.bar nav a[aria-current="page"]{color:var(--ink);font-weight:560}

/* ---------- hero (home) ---------- */
.hero{
  max-width:1000px;margin:0 auto;
  padding:clamp(56px,9vw,116px) var(--pad) clamp(44px,6vw,72px);
  text-align:center;
}
.hero-who{
  font-size:14px;color:var(--ink-2);letter-spacing:-.005em;
  margin-bottom:clamp(20px,3vw,32px);
}
.hero h1{
  font-size:clamp(2.45rem,6.1vw,5.1rem);
  line-height:1.025;letter-spacing:-.038em;font-weight:580;
  margin:0 auto;max-width:14ch;
}
.hero-lede{
  margin:clamp(22px,3vw,30px) auto 0;max-width:58ch;
  font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--ink-2);
  letter-spacing:-.014em;text-wrap:pretty;
}
.hero-actions{
  margin-top:clamp(28px,3.6vw,40px);
  display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center;align-items:center;
}

/* ---------- page lead (inner pages) ---------- */
.lead{
  max-width:940px;margin:0 auto;
  padding:clamp(52px,8vw,104px) var(--pad) clamp(34px,4.6vw,58px);
  text-align:center;
}
.lead-who{font-size:14px;color:var(--ink-2);letter-spacing:-.005em;margin-bottom:clamp(16px,2.4vw,26px)}
.lead h1{
  font-size:clamp(2.1rem,4.9vw,3.7rem);
  line-height:1.035;letter-spacing:-.036em;font-weight:580;
  margin:0 auto;max-width:20ch;
}
.lead-lede{
  margin:clamp(20px,2.8vw,28px) auto 0;max-width:60ch;
  font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.52;color:var(--ink-2);
  letter-spacing:-.013em;text-wrap:pretty;
}

/* ---------- buttons and text links ---------- */
.btn{
  display:inline-flex;align-items:center;
  background:var(--ink);color:#fff;text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:-.012em;
  padding:12px 24px;border-radius:999px;
  transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s ease;
}
.btn:hover{background:#2b2b30;transform:translateY(-1px)}
.btn-quiet{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent);text-decoration:none;font-size:15px;letter-spacing:-.012em;
}
.btn-quiet:hover{text-decoration:underline;text-underline-offset:4px}
.btn-quiet span{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.btn-quiet:hover span{transform:translateX(3px)}
.btn-stage{
  display:inline-flex;align-items:center;gap:6px;
  color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.34);
  text-underline-offset:5px;font-size:15px;letter-spacing:-.012em;
}
.btn-stage:hover{text-decoration-color:#fff}
.btn-stage span{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.btn-stage:hover span{transform:translateX(3px)}

.crumb{
  max-width:1180px;margin:0 auto;
  padding:clamp(18px,2.4vw,28px) var(--pad) 0;
  font-size:14px;color:var(--ink-2);
}
.crumb a{text-decoration:none;color:var(--accent)}
.crumb a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- cinematic stage ---------- */
.stage{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--stage);color:#fff;
  padding:clamp(64px,8vw,116px) var(--pad) clamp(56px,7vw,96px);
}
.stage-light{
  position:absolute;left:50%;top:clamp(90px,16vw,230px);
  width:min(1500px,170vw);aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(174,200,255,.20),rgba(120,140,190,.07) 42%,transparent 70%);
  z-index:-1;pointer-events:none;
}
.stage-inner{max-width:1180px;margin:0 auto}

.scene{
  margin:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(24px,4.5vw,76px);flex-wrap:wrap;
}
.scene--solo{gap:0}

/* phone-scale daily view */
.device{
  position:relative;flex:0 0 auto;margin-bottom:46px;
  width:min(330px,82vw);
  border-radius:40px;padding:9px;
  background:linear-gradient(170deg,#3a3a40,#17171a 38%,#101014);
  box-shadow:0 2px 2px rgba(255,255,255,.10) inset,
             0 42px 90px -28px rgba(0,0,0,.9),
             0 10px 28px -12px rgba(0,0,0,.7);
}
.scene--solo .device{width:min(352px,84vw)}
.screen{
  border-radius:32px;overflow:hidden;
  background:#0f0f12;
  padding:26px 18px 18px;
  display:flex;flex-direction:column;gap:18px;
  min-height:540px;
  font-size:13px;letter-spacing:-.01em;
}
.scr-top{display:flex;align-items:baseline;justify-content:space-between}
.scr-top span:first-child{font-size:25px;font-weight:600;letter-spacing:-.03em}
.scr-day{font-size:12px;color:rgba(255,255,255,.55)}
.scr-energy{display:flex;flex-direction:column;gap:10px}
.scr-kcal{display:flex;align-items:baseline;gap:8px}
.scr-kcal strong{font-size:34px;font-weight:580;letter-spacing:-.035em;line-height:1}
.scr-kcal em{font-style:normal;font-size:12px;color:var(--stage-3)}
.meter{height:3px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.meter i{display:block;height:100%;background:#eceef2;border-radius:999px}
.scr-macros{display:flex;justify-content:space-between;font-size:11.5px;color:var(--stage-3)}
.scr-macros b{font-weight:560;color:var(--stage-2)}
.scr-list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.09)}
.row{
  display:grid;grid-template-columns:42px 1fr auto;align-items:start;gap:10px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.r-time{font-size:11px;color:rgba(255,255,255,.46);padding-top:2px}
.r-name{display:flex;flex-direction:column;gap:2px;color:var(--stage-2);line-height:1.3}
.r-name small{font-size:10.5px;color:rgba(255,255,255,.48)}
.r-val{font-size:13px;color:#fff;font-weight:560;padding-top:1px}
.scr-foot{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:4px}
.pill{background:#fff;color:#111;font-size:12.5px;font-weight:560;padding:9px 16px;border-radius:999px}
.scr-note{font-size:10.5px;color:rgba(255,255,255,.52);line-height:1.3}

/* small cropped surface beside the device */
.detail{
  position:relative;flex:0 1 380px;margin-bottom:46px;min-width:min(300px,86vw);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:24px 24px 22px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
.detail-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:19px;font-weight:580;letter-spacing:-.025em;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10);
}
.detail-head span:last-child{font-size:12px;font-weight:400;color:var(--stage-3)}
.sets{list-style:none;margin:0;padding:0}
.sets li{
  display:grid;grid-template-columns:1fr auto 64px;gap:12px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:14px;color:var(--stage-2);
}
.sets b{font-weight:560;color:#fff;font-size:14px}
.sets em{font-style:normal;text-align:right;color:var(--stage-3);font-size:13px}
.detail-note{margin-top:14px;font-size:12.5px;color:var(--stage-3);line-height:1.45}

/* landscape review surface (projects stage) */
.panel{
  position:relative;flex:1 1 560px;max-width:620px;margin-bottom:46px;
  min-width:min(300px,86vw);
  background:#101014;
  border-radius:var(--radius);
  padding:26px 26px 24px;
  box-shadow:0 2px 2px rgba(255,255,255,.07) inset,
             0 42px 90px -30px rgba(0,0,0,.92);
}
.panel-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:20px;font-weight:580;letter-spacing:-.028em;
}
.panel-head span:last-child{font-size:12px;font-weight:400;color:var(--stage-3);white-space:nowrap}
.panel-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:22px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.09);
}
.panel-stats div{display:flex;flex-direction:column;gap:4px}
.panel-stats dt,.panel-stats span{font-size:11.5px;color:rgba(255,255,255,.56)}
.panel-stats strong{font-size:22px;font-weight:580;letter-spacing:-.03em;line-height:1.1}
.week{display:flex;align-items:flex-end;gap:clamp(6px,1.6vw,12px);margin-top:22px;height:84px}
.week div{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.week i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:rgba(255,255,255,.17)}
.week .on i{background:#eceef2}
.week b{font-size:10.5px;font-weight:400;color:rgba(255,255,255,.5)}
.panel-note{margin-top:20px;font-size:12.5px;color:var(--stage-3);line-height:1.45}

/* source-trail surface */
.trail{list-style:none;margin:16px 0 0;padding:0}
.trail li{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:13.5px;color:var(--stage-2);
}
.trail li span{display:flex;flex-direction:column;gap:2px}
.trail li small{font-size:11px;color:rgba(255,255,255,.48)}
.trail li em{font-style:normal;font-size:12px;color:var(--stage-3);white-space:nowrap}

.device-tag{
  position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);
  white-space:nowrap;
  font-size:11px;letter-spacing:.01em;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:5px 12px;border-radius:999px;
}

.stage-copy{
  max-width:720px;margin:clamp(78px,9vw,120px) auto 0;text-align:center;
}
.stage-copy h1,.stage-copy h2{font-size:clamp(2.1rem,3.9vw,3.3rem);letter-spacing:-.034em;font-weight:560}
.stage-status{font-size:13px;color:rgba(255,255,255,.62);margin-bottom:16px}
.stage-lede{
  margin:20px auto 0;max-width:52ch;
  font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--stage-2);text-wrap:pretty;
}
.stage-actions{margin:clamp(26px,3.4vw,36px) 0 0}
.facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 44px;
  margin:clamp(30px,4vw,44px) 0 0;text-align:left;
}
.facts div{display:flex;flex-direction:column;gap:3px}
.facts dt{font-size:12.5px;color:rgba(255,255,255,.62)}
.facts dd{margin:0;font-size:15px;font-weight:500;letter-spacing:-.018em}
.scene-cap{
  margin:clamp(30px,4vw,44px) auto 0;max-width:62ch;
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.66);
}

/* ---------- light sections ---------- */
.sec{padding:var(--block) var(--pad)}
.sec--canvas{background:var(--canvas)}
.sec--tight{padding-top:clamp(56px,6vw,92px)}
.sec-inner{max-width:760px;margin:0 auto}
.sec-inner--wide{max-width:980px}
.sec-inner--list{max-width:900px}
.sec h2{font-size:clamp(1.85rem,3.4vw,2.9rem);max-width:19ch}
.sec h2.wide{max-width:26ch}
.sec-inner p{margin-top:24px;max-width:68ch;color:var(--ink-2);font-size:clamp(16px,1.25vw,17.5px);text-wrap:pretty}
.sec-sub{color:var(--ink-3)}
.sec-actions{margin-top:clamp(30px,3.4vw,40px);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}

/* two restrained prose columns */
.cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(22px,3.4vw,52px);margin-top:clamp(28px,3.4vw,40px);
}
.cols p{margin-top:0;color:var(--ink-2);font-size:clamp(16px,1.25vw,17.5px);max-width:52ch;text-wrap:pretty}

/* I own / AI tools assist with */
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,3vw,40px);margin-top:clamp(40px,5vw,62px);
  padding-top:clamp(28px,3vw,36px);border-top:1px solid var(--line);
}
.split span{display:block;font-size:13px;color:var(--ink-3);margin-bottom:10px}
.split p{margin-top:0;font-size:16px;line-height:1.7;letter-spacing:-.015em;color:var(--ink)}

/* observed / not established */
.truth{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,3vw,40px);margin-top:clamp(36px,4vw,52px);
}
.truth h3{font-size:1.0625rem;letter-spacing:-.02em;font-weight:600}
.truth p{margin-top:8px;color:var(--ink-2);font-size:16px;max-width:46ch}

/* decisions: hairline-ruled two-column list, never a card grid */
.dec-list{list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0}
.dec-list li{
  padding:clamp(26px,3vw,34px) 0;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(20px,4vw,56px);align-items:start;
}
.dec-list li:last-child{border-bottom:1px solid var(--line)}
.dec-list h3{font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.026em;line-height:1.2;max-width:22ch}
.dec-list p{margin:0;color:var(--ink-2);font-size:16.5px;max-width:62ch}
.dec-list .status{
  display:block;margin-top:12px;font-size:13.5px;color:var(--ink-3);
}
.lesson{margin-top:14px;color:var(--ink-3);font-size:15px}

/* project index: a ruled entry, not a card */
.entries{list-style:none;margin:0;padding:0}
.entry{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;
  gap:clamp(12px,3vw,44px);align-items:start;
  padding:clamp(26px,3.2vw,38px) 0;
  border-top:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.entries li:last-child .entry{border-bottom:1px solid var(--line)}
.entry h3{font-size:clamp(1.35rem,2.2vw,1.8rem);letter-spacing:-.03em}
.entry-status{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-3)}
.entry-desc{margin:0;color:var(--ink-2);font-size:16.5px;max-width:52ch}
.entry-go{
  font-size:14px;color:var(--accent);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;padding-top:6px;
}
.entry-go i{font-style:normal;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.entry:hover .entry-go{text-decoration:underline;text-underline-offset:4px}
.entry:hover .entry-go i{transform:translateX(3px)}

/* illustrative loop diagram */
.loop{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;gap:clamp(8px,1.6vw,18px);
  margin-top:clamp(34px,4vw,48px);
}
.loop div{
  border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 20px;background:var(--white);
  display:flex;flex-direction:column;gap:6px;
}
.loop strong{font-size:15px;font-weight:560;letter-spacing:-.02em}
.loop small{font-size:13.5px;color:var(--ink-3);line-height:1.45}
.loop i{
  font-style:normal;align-self:center;color:var(--ink-3);font-size:15px;
}
.fig-note{margin-top:18px;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:62ch}

/* what would change the assessment */
details{margin-top:clamp(30px,3.4vw,40px);border-top:1px solid var(--line);padding-top:20px}
summary{
  cursor:pointer;font-size:16px;letter-spacing:-.016em;color:var(--ink);
  list-style:none;display:flex;align-items:baseline;gap:8px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ink-3);font-size:15px}
details[open] summary::after{content:"\2212"}
details p{margin-top:14px;color:var(--ink-2);font-size:16px;max-width:62ch}

/* ---------- footer ---------- */
.foot{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;
  padding:30px var(--pad) 40px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-3);
}
.foot-mid{flex:1 1 auto}
.foot nav{display:flex;gap:20px}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--ink)}

/* ---------- the one authored motion moment ---------- */
.js-lift{transition:transform 1s cubic-bezier(.16,1,.3,1)}
.js .js-lift{transform:translate3d(0,26px,0);will-change:transform}
.js-lift+.js-lift,.detail.js-lift{transition-delay:.12s}
.js-lift.is-settled{transform:translate3d(0,0,0)}
.no-motion .js-lift{transform:none;transition:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-lift{transform:none!important}
}

@media (max-width:900px){
  .dec-list li{grid-template-columns:1fr;gap:14px}
  .entry{grid-template-columns:1fr;gap:12px}
  .entry-go{padding-top:2px}
  .scene{gap:clamp(44px,9vw,70px)}
  .loop{grid-template-columns:1fr;gap:10px}
  .loop i{align-self:start;transform:rotate(90deg);margin-left:22px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .bar{height:52px}
  .bar nav{gap:16px}
  .hero h1{max-width:none}
  .lead h1{max-width:none}
  .facts{flex-direction:column;align-items:center;text-align:center;gap:16px}
  .detail{padding:20px 18px 20px}
  .panel{padding:20px 18px 20px}
  .panel-stats{grid-template-columns:1fr;gap:12px}
  .foot{flex-direction:column;align-items:flex-start;gap:8px}
}