/* Daniel J. Green — shared stage.
   Dark plum ground with a warm light, light "paper" chapters, one accent (peach),
   one typeface (Figtree). Motion is slow, eased, and continuous. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(6px); } }

:root{
  --ground:#292331; --ground-2:#302838; --ground-3:#3a3043; --ink:#f6eee9; --soft:#d5c9d9; --muted:#a998ae; --faint:#7d6e83;
  --lilac:#c7b6dc; --peach:#f0c3a8; --line:#ffffff1a; --line-2:#ffffff2b;
  --paper:#f6efea; --paper-2:#efe6ea; --paper-ink:#3a3242; --paper-soft:#65586e; --paper-muted:#8a7b92; --paper-line:#6e5a8e24; --plum:#6e5a8e;
  --foil:linear-gradient(95deg,#fdb99a,#c98ba6,#6e5a8e);
  /* validated chart palettes (dataviz validator, 3 slots) */
  --c1:#cf6f4f; --c2:#8f78e6; --c3:#2fa894;            /* on dark  #2b2434 */
  --c1-l:#c46a45; --c2-l:#6e55c4; --c3-l:#118a72;      /* on light #f6efea */
  --good:#2fa894; --warn:#e0a85a;
  --ease: cubic-bezier(.2,.7,.2,1);
  --gutter: clamp(16px,5vw,72px);
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:Figtree,system-ui,sans-serif;font-weight:380;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;overflow-x:clip}
h1,h2,h3,h4,p,dl,dd,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,video,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--peach);outline-offset:4px}
::selection{background:#f0c3a855}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Light field */
.world{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(135deg,#1f1c27,#2f2838 62%,#3a2d3b);overflow:hidden}
.world i{position:absolute;inset:-25%;transition:transform 2.6s var(--ease),opacity 2.6s ease}
.world i:nth-child(1){background:radial-gradient(ellipse at 68% 42%,#c29d8b55,transparent 42%);transform:translate3d(var(--lx,0),var(--ly,0),0)}
.world i:nth-child(2){background:radial-gradient(ellipse at 18% 82%,#8e7aae2e,transparent 48%)}
.world:after{content:'';position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.17em;color:var(--peach)}
.display{font-weight:350;letter-spacing:-.045em;line-height:1.02;text-wrap:balance}
.display em,.h2 em{font-style:normal;color:var(--lilac)}
.h2{font-size:clamp(28px,3vw,44px);font-weight:370;letter-spacing:-.04em;line-height:1.06;text-wrap:balance}
.body{font-size:15px;line-height:1.75;color:var(--soft);max-width:460px}
.body+.body{margin-top:14px}
.small{font-size:12px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* Top bar on project pages */
.bar{position:fixed;inset:0 0 auto;z-index:50;pointer-events:none}
.bar .wrap{height:76px;display:flex;align-items:center;justify-content:space-between}
.bar a,.bar span{pointer-events:auto}
.bar:before{content:'';position:absolute;inset:0 0 -24px;background:linear-gradient(#251f2df2 35%,#251f2d00);opacity:var(--barbg,0);transition:opacity .4s,background .4s;pointer-events:none}
.bar.on-paper:before{background:linear-gradient(#f4ece9f2 35%,#f4ece900)}
.bar.scrolled{--barbg:1}
.bar .back{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px 0 12px;border-radius:22px;font-size:12px;color:var(--ink);background:#231e2bb8;border:1px solid var(--line-2);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 8px 24px #0d081a33;transition:color .3s,background .4s,border-color .4s}
.bar .back:hover{background:#2c2535e0}
.bar.on-paper .back{color:var(--paper-ink);background:#fffaf7cc;border-color:var(--paper-line);box-shadow:0 8px 24px #6549661a}
.bar.on-paper .back:hover{background:#fffaf7f2}
.bar .back svg{width:16px;transition:transform .4s var(--ease)}
.bar .back:hover svg{transform:translateX(-4px)}
.crumb{font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.bar.on-paper .crumb{color:var(--paper-soft)}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:41;background:var(--foil);transform-origin:0 50%;transform:scaleX(var(--read,0))}

/* Opening title */
.opening{min-height:100svh;display:grid;align-items:end;padding:120px 0 9vh;position:relative}
.opening .display{font-size:clamp(38px,6.2vw,94px)}
.opening .meta{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:34px;font-size:12px;color:var(--muted)}
.opening .meta b{display:block;font-weight:500;color:var(--soft);font-size:13px;margin-top:3px}
.cue{position:absolute;right:var(--gutter);bottom:9vh;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.cue:after{content:'';width:1px;height:48px;background:linear-gradient(var(--peach),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Masked line reveal: wrap lines in .line>span */
.lines .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.lines .line>span{display:block;transform:translateY(105%);transition:transform 1.25s var(--ease)}
.lines.in .line>span{transform:none}
.lines .line:nth-child(2)>span{transition-delay:.09s}.lines .line:nth-child(3)>span{transition-delay:.18s}.lines .line:nth-child(4)>span{transition-delay:.27s}

.rise{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1.2s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.1s}.rise.d2{transition-delay:.2s}.rise.d3{transition-delay:.3s}

/* Scroll scenes: a tall section with a sticky stage; JS writes --p (0..1) and data-step */
.scene{position:relative}
.scene>.stage{position:sticky;top:0;height:100svh;overflow:hidden}

/* Device */
.phone{position:relative;width:min(300px,62vw);aspect-ratio:720/1566;border-radius:42px;padding:6px;background:linear-gradient(145deg,#e2cbc1,#615469 36%,#322b3f 65%,#ac919a);box-shadow:0 40px 80px #0d081a66,0 0 0 1px #e3c8d630}
.phone>video,.phone>img,.phone .screen{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;border-radius:36px;background:#30263b}
.phone .screen{opacity:0;transition:opacity .8s var(--ease)}
.phone .screen[data-on]{opacity:1}
.phone:after{content:'';position:absolute;inset:6px;border-radius:36px;pointer-events:none;background:linear-gradient(115deg,#ffffff22,transparent 30%,transparent 70%,#ffffff0d);mix-blend-mode:screen}

/* Paper chapters */
.paper{background:linear-gradient(120deg,#f6efea,#f1e7ea 55%,#ebe5f0);color:var(--paper-ink)}
.paper .eyebrow{color:var(--plum)}
.paper .h2 em,.paper .display em{color:#8e7aae}
.paper .body{color:var(--paper-soft)}
.paper .small{color:var(--paper-muted)}

/* Dashboard primitives */
.dash{padding:clamp(80px,10vw,130px) 0}
.dash-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px}
.panel{background:#ffffff08;border:1px solid var(--line);border-radius:6px;padding:20px 20px 18px;position:relative;min-width:0}
.paper .panel{background:#fffaf7;border-color:var(--paper-line);box-shadow:0 1px 0 #ffffff inset,0 18px 40px #6549660d}
.panel h3{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--soft)}
.paper .panel h3{color:var(--paper-ink)}
.panel .sub{font-size:11px;color:var(--muted);margin-top:3px}
.paper .panel .sub{color:var(--paper-muted)}
.kpi{font-size:clamp(26px,2.3vw,34px);font-weight:380;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--line-2);color:var(--soft);white-space:nowrap}
.paper .chip{border-color:var(--paper-line);color:var(--paper-soft)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.good i{background:var(--good)}.chip.warn i{background:var(--warn)}
.seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:24px;gap:2px;flex-wrap:wrap}
.paper .seg{border-color:var(--paper-line)}
.seg button{border:0;background:transparent;font-size:12px;padding:8px 14px;min-height:36px;border-radius:20px;cursor:pointer;color:var(--soft);transition:background .25s,color .25s}
.paper .seg button{color:var(--paper-soft)}
.seg button[aria-pressed=true]{background:#f0c3a81f;color:var(--peach)}
.paper .seg button[aria-pressed=true]{background:var(--plum);color:#fff}
svg text{font-family:Figtree,system-ui,sans-serif}
.axis text{font-size:10px;fill:var(--muted)}
.paper .axis text{fill:var(--paper-muted)}
.axis line,.grid line{stroke:var(--line);stroke-width:1}
.paper .axis line,.paper .grid line{stroke:var(--paper-line)}
.tip{position:fixed;z-index:60;pointer-events:none;padding:9px 12px;border-radius:6px;background:#1f1a27f2;border:1px solid var(--line-2);color:var(--ink);font-size:12px;line-height:1.45;box-shadow:0 12px 30px #0006;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;max-width:260px}
.tip.on{opacity:1;transform:none}
.tip b{font-weight:600}
.tip span{display:block;color:var(--muted);font-size:11px}
.synthetic{font-size:10px;letter-spacing:.06em;color:var(--muted)}
.paper .synthetic{color:var(--paper-muted)}

/* Next project */
.next{display:block;padding:clamp(90px,14vw,180px) 0 70px;position:relative;border-top:1px solid var(--line)}
.next .eyebrow{color:var(--muted)}
.next .display{font-size:clamp(36px,5.6vw,84px);margin-top:18px;transition:letter-spacing .9s var(--ease),font-weight .9s var(--ease)}
.next:hover .display{letter-spacing:-.035em;font-weight:440}
.next .go{display:inline-flex;align-items:center;gap:14px;margin-top:26px;font-size:13px;color:var(--soft)}
.next .go svg{width:18px;transition:transform .5s var(--ease)}
.next:hover .go svg{transform:translateX(8px)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px 0 40px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;animation:none!important}
  .rise{opacity:1;transform:none}
  .lines .line>span{transform:none}
}