/* Vesper v4: hero */
:root{
  --ink:#1A2240; --ink2:#3C4566; --amber:#F2A33A; --amber-soft:#FFD58A; --sky:#DCE8F2;
  --serif:"Source Serif 4", Georgia, serif; --sans:"Instrument Sans", system-ui, sans-serif; --mono:"Martian Mono", ui-monospace, monospace;
  --ease:cubic-bezier(.2,.7,.1,1); --ease2:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
section[id]{scroll-margin-top:64px}
.links a.active::after{transform:scaleX(1)}
.links a.active{font-weight:600}
body{margin:0; background:var(--sky); color:var(--ink); font:420 17px/1.6 var(--sans)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Nav: transparent over the painting ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:10; height:76px; padding:0 clamp(20px,4vw,56px); display:flex; align-items:center; gap:32px; transition:background .3s, box-shadow .3s, height .3s}
.nav.solid{background:rgba(248,246,240,.82); backdrop-filter:blur(12px) saturate(1.2); box-shadow:0 1px 0 rgba(26,34,64,.08); height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.brand span{font:600 24px/1 var(--serif); font-variation-settings:"opsz" 40; letter-spacing:-.01em}
.mark{width:32px; height:32px; overflow:visible}
.mark .petal{fill:none; stroke:var(--ink); stroke-width:3.4; stroke-linejoin:round}
.mark .core{fill:var(--amber)}
.links{display:flex; gap:30px}
.links a,.sheet a:not(.btn){font:500 15px/1 var(--sans); text-decoration:none; position:relative; padding:6px 0}
.links a::after,.link::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.links a:hover::after,.links a:focus-visible::after,.link:hover::after,.link:focus-visible::after{transform:scaleX(1)}
.actions{display:flex; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; font:600 15px/1 var(--sans); text-decoration:none; border-radius:999px; padding:12px 20px; transition:background .2s, color .2s, box-shadow .25s, transform .15s}
.btn.solid{background:var(--ink); color:#F8F6F0}
.btn.solid:hover{box-shadow:0 8px 22px rgba(26,34,64,.28), inset 0 0 0 1px rgba(255,255,255,.12); transform:translateY(-1px)}
.btn.ghost{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink); color:#F8F6F0}
.btn.lg{font-size:16px; padding:16px 26px}
.btn:active{transform:translateY(0)}
.menu{display:none}

.sheet[hidden]{display:none!important}

/* ---------- Hero ---------- */
.hero{position:relative; height:100vh; height:100svh; min-height:620px; overflow:hidden}
.bg{position:absolute; inset:0}
.bg{background:linear-gradient(to bottom,#C9DBEC 0%,#DCE8F2 46%,#EFEFE9 78%,#F7F0E2 100%)}
.bg canvas{position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated}
/* desktop: soft light behind the text, a soft shade on the right edge (chosen: step 5 of 8) */
@media (min-width: 761px){
  .bg::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 52% 56% at 22% 34%, rgba(248,246,240,.55), rgba(248,246,240,0) 74%)}
}

.copy{position:relative; z-index:2; padding:clamp(118px,16vh,170px) clamp(20px,6vw,96px) 0; max-width:1100px}
h1{margin:0; font:600 clamp(44px,5.2vw,80px)/1.06 var(--serif); white-space:nowrap; font-variation-settings:"opsz" 60; letter-spacing:-.022em; color:var(--ink); text-shadow:0 0 40px rgba(240,246,252,.55)}
/* headline rises word by word out of a blur; the sub-line follows */
.ln{display:block}
.ln:nth-child(2){color:#2A3560}
.w{display:inline-block; filter:blur(10px); opacity:0; transform:translateY(.42em);
  transition:filter .9s var(--ease2), opacity .9s var(--ease2), transform .9s var(--ease2); transition-delay:calc(.55s + var(--i) * 65ms)}
.sub{filter:blur(10px); opacity:0; transform:translateY(.42em); transition:filter .9s var(--ease2), opacity .9s var(--ease2), transform .9s var(--ease2); transition-delay:1s}
.hero.ready .w,.hero.ready .sub{filter:none; opacity:1; transform:none}
/* the small things around it rise the same way, each on its own beat */
.rise{filter:blur(6px); opacity:0; transform:translateY(.45em); transition:filter .9s var(--ease2), opacity .9s var(--ease2), transform .9s var(--ease2); transition-delay:var(--d, 0s)}
.hero.ready .rise{filter:none; opacity:1; transform:none}
.nav{animation:nav-drop .9s var(--ease2) .1s both}
@keyframes nav-drop{from{opacity:0; transform:translateY(-.6em)}}

/* ---------- Kicker: live local time, typed line ---------- */
.kick{display:flex; align-items:center; gap:.6em; margin:0 0 18px; font:400 12.5px/1 var(--mono); font-stretch:92%; letter-spacing:.02em; color:var(--ink); white-space:pre;
  text-shadow:0 0 12px rgba(250,248,242,.95)}
.kick .br{color:var(--ink2); opacity:.75}
.kick .sq{width:.6em; height:.6em; flex:none; background:var(--amber); transition:background .3s}
.kick.typing .sq{animation:blink .9s steps(1) infinite}
#kickTxt::after{content:""; display:inline-block; width:.55em; height:1em; margin-left:2px; vertical-align:-2px; background:currentColor; opacity:0}
.kick.typing #kickTxt::after{opacity:.7}

/* ---------- Crew: the eight seals, stacked; they fan out on hover ---------- */
.crew{display:inline-flex; align-items:center; gap:12px; margin:0 0 30px; text-decoration:none}
.crew .seals{display:flex}
.crew .s{width:26px; height:26px; border-radius:50%; margin-left:-4px; background:#FBF8F1; box-shadow:0 0 0 1.5px #FBF8F1, 0 2px 6px rgba(26,34,64,.18); display:grid; place-items:center; color:var(--ink);
  transition:margin .35s var(--ease2), transform .35s var(--ease2); animation:seal-pop .7s var(--ease2) both; animation-delay:calc(.5s + var(--i) * 60ms); animation-play-state:paused}
.crew .s:first-child{margin-left:0}
.hero.ready .crew .s{animation-play-state:running}
.crew .s svg{width:22px; height:22px; overflow:visible}
.crew .s path{fill:none; stroke:var(--c, currentColor); opacity:.95}
.crew .s .core{fill:var(--amber); stroke:none}
/* one colour, hero only: the headline's navy, a step lighter so the seals stay quiet next to the headline,
   with the brand amber core on every seal (the Agents section keeps its own seals) */
.hero [data-agent]{--c:#3F4B78}
/* in the night log the lines are a pale tint of the same step so they read on the dark shade */
.ticker .ag[data-agent] .seal.mini path{stroke:color-mix(in srgb, var(--c) 38%, #fff); stroke-width:6; opacity:1}
.ticker .ag[data-agent] .seal.mini .core{fill:var(--amber)}
.ticker .ag[data-agent] .seal.mini{filter:drop-shadow(0 0 1.5px rgba(10,14,30,.7)) drop-shadow(0 0 4px rgba(10,14,30,.35))}
.crew .s g{transform-box:view-box; transform-origin:60px 60px}
.crew:hover .s,.crew:focus-visible .s{margin-left:3px}
.crew:hover .s:first-child,.crew:focus-visible .s:first-child{margin-left:0}
.crew:hover .s:nth-child(odd){transform:translateY(-2px)}
.crew .pill{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px; border-radius:999px; font:600 12.5px/1 var(--sans); color:var(--ink);
  background:rgba(251,248,241,.72); backdrop-filter:blur(8px) saturate(1.2); box-shadow:inset 0 0 0 1px rgba(26,34,64,.14)}
.crew .pill span{transition:transform .25s var(--ease)}
.crew:hover .pill span{transform:translateX(3px)}
@keyframes seal-pop{from{opacity:0; transform:scale(.5)}}

/* ---------- Evening stars: small gold glints in the sky ---------- */
.stars{position:absolute; z-index:1; left:0; top:0; width:100%; height:64%; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease)}
.hero.ready .stars{opacity:1}

/* ---------- Frame: hairline guides, + marks, and the tick that drops into the log ---------- */
.frame{display:none}
@media (min-width: 761px){
  .hero{--gx:max(14px, calc(clamp(20px,6vw,96px) - 34px)); --fh:84px}
  .frame{display:block; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.4s var(--ease) .6s}
  .hero.ready .frame{opacity:1}
  .frame .g{position:absolute; top:0; bottom:0; width:1px; background:linear-gradient(to bottom, rgba(26,34,64,0) 20%, rgba(26,34,64,.22) 100%)}
  .frame .g.l{left:var(--gx)} .frame .g.r{right:var(--gx)}
  .frame .h{position:absolute; left:0; right:0; bottom:var(--fh); height:1px; background:rgba(255,255,255,.18)}
  .frame .plus{position:absolute; width:21px; height:21px; margin:-10px 0 0 -10px; color:rgba(26,34,64,.7); transition:color .3s;
    background:linear-gradient(currentColor,currentColor) center/1px 100% no-repeat, linear-gradient(currentColor,currentColor) center/100% 1px no-repeat;
}
  .frame .p1{left:var(--gx); top:calc(100% - var(--fh))}
  .frame .p2{left:calc(100% - var(--gx)); top:calc(100% - var(--fh))}
  .frame .p3{left:var(--gx); top:100%}
  .frame .p4{left:calc(100% - var(--gx)); top:100%}
  .frame .p1.lit{color:var(--amber)}
  /* a soft shade under the bottom line so the white log reads over any painting */
  .frame::after{content:""; position:absolute; left:0; right:0; bottom:0; height:calc(var(--fh) + 30px);
    background:var(--ink)}
  .frame::after{height:var(--fh)}
  .frame .fall{position:absolute; left:calc(var(--gx) - .5px); top:46%; bottom:var(--fh); width:2px; overflow:hidden}
  .frame .fall i{position:absolute; left:0; right:0; top:-26px; height:26px; background:linear-gradient(to bottom, rgba(242,163,58,0), var(--amber)); opacity:0}

  /* the night log sits in the strip under the bottom line */
  .hero .ticker{bottom:calc(var(--fh) / 2); transform:translateY(50%)}
  .copy{padding-top:clamp(100px,12.5vh,140px)}
}
.sub{margin:22px 0 32px; font-size:clamp(17px,1.35vw,20px); line-height:1.5; color:var(--ink2); max-width:44ch; text-shadow:0 0 24px rgba(240,246,252,.8)}
.cta{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.link{position:relative; font:600 16px/1 var(--sans); text-decoration:none; padding:6px 0; text-shadow:0 0 18px rgba(240,246,252,.9)}
.link span{display:inline-block; transition:transform .25s var(--ease)}
.link:hover span{transform:translateX(4px)}

/* ---------- Ticker: the night log, typed live, in [ brackets ] ---------- */
.ticker{position:absolute; z-index:2; left:clamp(20px,6vw,96px); bottom:clamp(26px,5.5vh,48px); display:flex; align-items:center; gap:10px;
  font:500 15px/1.2 var(--mono); font-stretch:92%; letter-spacing:.005em; color:var(--ink); white-space:nowrap;
  text-shadow:0 0 2px rgba(250,248,242,.9), 0 0 10px rgba(250,248,242,.85), 0 0 22px rgba(250,248,242,.6)}
.ticker .br{font-weight:400; color:var(--ink2); font-size:1.1em}
.ticker .dot{width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(242,163,58,.6); animation:pulse 1.8s ease-out infinite}
.ticker .t b{font-weight:600; letter-spacing:.06em}
.ticker .t em{font-style:normal; font-weight:600; color:#9A4E12}
/* the agent's seal: its lines take the log's colour, the core stays amber */
.ticker .ag{width:26px; height:26px; flex:none; display:block}
.ticker .ag:empty{width:8px; height:8px; border-radius:50%; background:var(--amber)}
.ticker .seal.mini{width:100%; height:100%; display:block; overflow:visible}
.ticker .seal.mini g{transform-box:view-box; transform-origin:60px 60px}
.ticker .seal.mini path{fill:none; stroke:currentColor; opacity:.9}
.ticker .seal.mini .core{fill:var(--amber); stroke:none}
.ticker .seal.mini{filter:drop-shadow(0 0 3px rgba(10,14,30,.25))}
/* each agent keeps moving in its own way */
.ag[data-agent="steward"]   .seal{animation:ag-breathe 3s ease-in-out infinite}
.ag[data-agent="pulse"]     .o   {animation:ag-beat 1.6s ease-out infinite}
.ag[data-agent="keeper"]    .o   {animation:ag-click 4s steps(1) infinite}
.ag[data-agent="buyer"]     .i   {animation:ag-load 2.2s ease-in-out infinite}
.ag[data-agent="ledger"]    .m   {animation:ag-rock 2.6s ease-in-out infinite}
.ag[data-agent="compass"]   .seal{animation:ag-sway 3.2s ease-in-out infinite}
.ag[data-agent="habit"]     path {stroke-dasharray:.72 .28; animation:ag-tie 3.5s linear infinite}
.ag[data-agent="conductor"] .o   {animation:ag-spin 9s linear infinite}
.ag[data-agent="conductor"] .i   {animation:ag-spin 6s linear infinite reverse}
@keyframes ag-breathe{50%{transform:scale(1.08)}}
@keyframes ag-beat{0%,40%,100%{transform:scale(1)} 10%{transform:scale(1.14)} 25%{transform:scale(1.06)}}
@keyframes ag-click{0%{transform:rotate(0)} 25%{transform:rotate(45deg)} 50%{transform:rotate(90deg)} 75%{transform:rotate(135deg)}}
@keyframes ag-load{0%,100%{transform:scale(.85)} 50%{transform:scale(1.1)}}
@keyframes ag-rock{0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)}}
@keyframes ag-sway{0%,100%{transform:rotate(-16deg)} 50%{transform:rotate(16deg)}}
@keyframes ag-tie{to{stroke-dashoffset:-1}}
@keyframes ag-spin{to{transform:rotate(360deg)}}
.caret{width:8px; height:16px; background:currentColor; opacity:.8; animation:blink 1s steps(1) infinite}

/* desktop: the night log in white with a faint dark halo, regular weight */
@media (min-width: 761px){
  .ticker{color:#FFFFFF; font-weight:400; text-shadow:0 0 2px rgba(10,14,30,.55), 0 0 8px rgba(10,14,30,.35), 0 0 18px rgba(10,14,30,.2)}
  .ticker .br{color:rgba(255,255,255,.85)}
  .ticker .t b{font-weight:500}
  .ticker .t em{font-weight:400; color:#FFE2A8}
}

/* ---------- Hero image: anchored to the bottom, so wide or short screens trim sky first ---------- */
@media (max-width: 760px){
  /* the town rises behind the buttons and log on a phone: a soft light band keeps them readable */
  .bg::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom, rgba(248,246,240,0) 32%, rgba(248,246,240,.58) 50%, rgba(248,246,240,.5) 70%, rgba(248,246,240,0) 82%)}
}

/* ---------- Phone ---------- */
@media (max-width: 960px){ .links{display:none} }
@media (max-width: 760px){
  .nav{height:64px; gap:12px}
  .actions{display:none}
  .menu{display:grid; place-items:center; gap:5px; width:42px; height:42px; border:0; border-radius:50%; background:rgba(250,248,242,.6); backdrop-filter:blur(8px); cursor:pointer}
  .menu span{display:block; width:18px; height:1.6px; background:var(--ink); transition:transform .25s}
  .menu[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
  .menu[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
  .sheet{position:fixed; z-index:9; top:0; left:0; right:0; padding:84px 24px 28px; background:rgba(248,246,240,.96); backdrop-filter:blur(12px); display:flex; flex-direction:column; gap:18px; box-shadow:0 20px 40px rgba(26,34,64,.15)}
  .sheet a:not(.btn){font-size:20px}
  .sheet .btn{margin-top:8px}
  .copy{padding-top:118px}
  h1{font-size:clamp(40px,11.5vw,58px); line-height:1.04; white-space:normal}
  .sub{max-width:28ch; margin:16px 0 26px}
  .cta{gap:20px}
  /* the night log sits right under the buttons, as plain text */
  .ticker{position:relative; left:auto; right:auto; bottom:auto; margin:26px 20px 0; font-size:12.5px; line-height:19px; white-space:normal; align-items:flex-start; min-height:40px; gap:7px}
  .ticker .ag{width:22px; height:22px; margin-top:-2px}
  .kick{font-size:10.5px; gap:.5em; margin-bottom:14px}
  .crew{margin-bottom:24px}
  .ticker .br{flex:none}
  .ticker .caret{margin-top:2px; flex:none; height:14px; width:7px}
}
/* focus rings stay visible on the dark sections */
.agents :focus-visible,.safety :focus-visible,.foot :focus-visible,.plan.main :focus-visible{outline-color:#F2A33A}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .w,.sub,.rise,.stars,.frame{opacity:1; filter:none; transform:none}
}