/* The Automated Hour: home page. "One clock, five worlds".
   Default rules = static layout (no JavaScript, reduced motion).
   Rules under .motion = the pinned scroll story (added by story.js). */

/* ---------- header on the home page ---------- */
.home .top{position:fixed;left:0;right:0;top:0}
.js .home .top:not(.is-solid){background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.hud{display:flex;visibility:hidden;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-left:8px;min-width:76px}
.js .hud{visibility:visible}
.hud svg{width:26px;height:26px;transform:rotate(-90deg)}
.hud circle{fill:none;stroke-width:3}
.hud-track{stroke:var(--line-2)}
.hud-fill{stroke:var(--cyan);stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25;filter:drop-shadow(0 0 3px rgba(79,214,255,.7))}
.hud-min{color:var(--text);min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- worlds: shared layout ---------- */
.story{position:relative}
.stage{position:relative;overflow:hidden}
.world{
  --vis-h:min(60svh,560px);
  position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  column-gap:clamp(24px,5vw,72px);align-items:center;
  padding:calc(var(--header-h,64px) + 56px) max(var(--gutter,24px),calc((100% - var(--max,1200px))/2 + var(--gutter,24px))) 72px;
  border-top:0;
}
.w-copy{position:relative;z-index:2;max-width:36rem}
.w-copy > p:not(.eyebrow){color:var(--soft);font-size:19px}
.w-copy > p + p{margin-top:16px}
.w-visual{position:relative;height:var(--vis-h);min-width:0}
.w-hero{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.world h1{font-size:clamp(42px,5.3vw,76px);font-weight:650;letter-spacing:-.03em;line-height:1.0;margin:0 0 24px}
.world h2{font-size:clamp(34px,4.4vw,60px);letter-spacing:-.025em;line-height:1.02;margin:0 0 20px}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln > span{display:block}
.eyebrow .num{font-size:12px;color:var(--bg);background:var(--cyan);padding:3px 7px 2px;border-radius:6px;letter-spacing:.06em}

/* Neon clock */
.slot{position:relative;display:block}
.clock-static{width:100%;height:100%;overflow:visible;color:var(--cyan-core);filter:drop-shadow(0 0 2px var(--cyan)) drop-shadow(0 0 10px rgba(79,214,255,.85)) drop-shadow(0 0 26px rgba(79,214,255,.45))}

/* World 0: hero */
.w-hero{min-height:100vh;min-height:100svh;padding-bottom:96px;
  background:radial-gradient(60% 55% at 72% 46%,rgba(79,214,255,.10),transparent 70%)}
.w-hero .lead{color:var(--soft);font-size:clamp(18px,1.5vw,20px);max-width:33rem}
.w-hero .actions{margin-top:32px}
.w-hero .w-visual{display:grid;place-items:center}
.w-hero .slot{width:min(100%,400px,52svh);aspect-ratio:1}
.cue{position:absolute;left:50%;bottom:18px;margin-left:-160px;width:320px;display:flex;flex-direction:column;align-items:center;gap:6px;white-space:nowrap;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cue-line{display:block;width:1px;height:30px;margin-bottom:4px;background:linear-gradient(var(--cyan),transparent)}
.cue a{color:var(--cyan);text-decoration:none;font-size:11.5px;letter-spacing:.12em;padding:6px 12px;border-radius:999px;border:1px solid transparent;transition:border-color .2s,background-color .2s}
.cue a:hover{border-color:rgba(79,214,255,.45);background:rgba(79,214,255,.06);color:#8be6ff}

/* Pegboard texture (the room's wall), shared by the dark worlds */
.amb{display:none}
.w-hero,.w-manual,.w-build,.w-watch{background-color:var(--bg)}
.w-hero::before,.w-manual::before,.w-build::before,.w-watch::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(3px 6px at 50% 50%,rgba(255,255,255,.055) 60%,transparent 66%);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(80% 70% at 60% 50%,#000 30%,transparent 85%);mask-image:radial-gradient(80% 70% at 60% 50%,#000 30%,transparent 85%)}

/* World 1: the manual hour */
.w-manual{background-image:radial-gradient(55% 60% at 70% 50%,rgba(255,179,71,.13),transparent 70%)}
.w-manual .eyebrow .num{background:var(--amber)}
.w-manual .clock-static{color:var(--amber-core);filter:drop-shadow(0 0 2px var(--amber)) drop-shadow(0 0 10px rgba(255,179,71,.85)) drop-shadow(0 0 26px rgba(255,179,71,.45))}
.pile{position:absolute;inset:0}
.pile .slot{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:min(36%,240px);aspect-ratio:1;height:auto}
.tcard{position:absolute;width:0;height:0}
.tcard-tilt{position:absolute;left:0;top:0;transform:translate(-50%,-50%) rotate(var(--tilt,0deg))}
.tcard-in{display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:14.5px;line-height:1;color:#e9e1d6;padding:11px 14px;border-radius:12px;
  background:linear-gradient(180deg,#1c1a18,#15130f);border:1px solid #3a3024;box-shadow:0 14px 30px -14px rgba(0,0,0,.8),0 0 0 1px rgba(255,179,71,.04)}
.tcard-in .ic{width:17px;height:17px;flex:none;color:var(--amber)}
.voice{font-family:var(--mono);font-size:13px}
.wave{display:flex;align-items:center;gap:2px;height:16px}
.wave i{display:block;width:3px;border-radius:2px;background:var(--amber);opacity:.8;height:40%}
.wave i:nth-child(2){height:80%}.wave i:nth-child(3){height:55%}.wave i:nth-child(4){height:100%}.wave i:nth-child(5){height:65%}.wave i:nth-child(6){height:35%}.wave i:nth-child(7){height:70%}
.c1{left:18%;top:14%;--tilt:-6deg}
.c2{left:76%;top:12%;--tilt:5deg}
.c3{left:12%;top:52%;--tilt:4deg}
.c4{left:86%;top:46%;--tilt:-4deg}
.c5{left:26%;top:86%;--tilt:-3deg}
.c6{left:72%;top:84%;--tilt:3deg}
.c7{left:46%;top:4%;--tilt:2deg}
.c8{left:14%;top:33%;--tilt:-9deg}
.c9{left:88%;top:28%;--tilt:7deg}
.c10{left:9%;top:72%;--tilt:7deg}
.c11{left:84%;top:66%;--tilt:-7deg}
.c12{left:50%;top:96%;--tilt:-2deg}
.c13{left:58%;top:22%;--tilt:-12deg}
.c14{left:40%;top:76%;--tilt:10deg}

/* World 2: the build */
.w-build{background-image:radial-gradient(55% 60% at 70% 50%,rgba(79,214,255,.08),transparent 70%)}
.w-build .w-visual{display:flex;align-items:center}
.flow{display:flex;align-items:flex-start;width:100%}
.node{flex:none;width:clamp(96px,10vw,128px);display:flex;flex-direction:column;align-items:center;text-align:center}
.node-box{position:relative;width:clamp(64px,6.4vw,84px);aspect-ratio:1;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}
.node-box .lit{position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--cyan);box-shadow:0 0 22px rgba(79,214,255,.45),inset 0 0 18px rgba(79,214,255,.12)}
.n1 .lit{border-color:var(--amber);box-shadow:0 0 22px rgba(255,179,71,.45),inset 0 0 18px rgba(255,179,71,.12)}
.node-box .slot{width:62%;aspect-ratio:1}
.node-box .clock-static{filter:drop-shadow(0 0 1px var(--cyan)) drop-shadow(0 0 5px rgba(79,214,255,.8))}
.node-box{min-height:0;overflow:visible}
.node-ic{width:34px;height:34px;color:var(--cyan-core);filter:drop-shadow(0 0 5px rgba(79,214,255,.6))}
.node p{margin-top:14px;display:flex;flex-direction:column;gap:5px}
.node-kind{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.node-label{font-size:15px;line-height:1.3;color:var(--text);font-weight:500}
.wire{position:relative;flex:1 1 0;height:2px;margin-top:calc(clamp(64px,6.4vw,84px) / 2);min-width:20px;margin-inline:-14px}
.wire-line{position:absolute;inset:0;border-radius:2px;transform-origin:0 50%}
.w1 .wire-line{background:linear-gradient(90deg,var(--amber),#c4bf84)}
.w2 .wire-line{background:linear-gradient(90deg,#c4bf84,#8acac2)}
.w3 .wire-line{background:linear-gradient(90deg,#8acac2,var(--cyan))}
.wire-run{position:absolute;inset:0;display:none}
.packet{position:absolute;left:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(79,214,255,.35),0 0 16px 4px var(--cyan)}
.w1 .packet{box-shadow:0 0 0 3px rgba(255,179,71,.35),0 0 16px 4px var(--amber)}

/* World 3: the stopwatch */
.w-watch{background-image:radial-gradient(55% 60% at 70% 50%,rgba(79,214,255,.08),transparent 70%)}
.w-watch .w-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,3.5svh,40px)}
.w-watch .slot{width:min(46%,250px,30svh);aspect-ratio:1;flex:none}
.watch-static{position:absolute;inset:auto 0 0 0;height:112%!important}
.watch-status{font-family:var(--mono);font-size:14px!important;letter-spacing:.02em;color:var(--cyan)!important;border-left:2px solid var(--cyan);padding:4px 0 4px 14px;margin-top:24px!important}
.timers{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,460px)}
.timer{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line)}
.t-k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.t-before .t-k{color:var(--amber)} .t-after .t-k{color:var(--cyan)}
.t-v{font-family:var(--mono);font-size:clamp(34px,3.6vw,48px);line-height:1;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.t-u{font-size:13px;color:var(--muted)}
.saved{font-family:var(--mono);font-size:15px;color:var(--cyan);text-align:center}

/* World 4: the automated hour */
.w-room{min-height:100svh;align-items:end;padding-bottom:88px;background:var(--bg)}
.room{position:absolute;inset:0;overflow:hidden;container-type:size}
.room-frame{position:absolute;inset:-300%;margin:auto;width:max(100vw,179.2vh);height:max(100vh,55.81vw);width:max(100cqw,179.17cqh);height:max(100cqh,55.81cqw);transform-origin:50% 25.9%}
.room-frame picture,.room-frame img{width:100%;height:100%;object-fit:cover}
.room-frame .slot{position:absolute;left:50%;top:25.9%;width:14.83%;aspect-ratio:1;margin:-7.415% 0 0 -7.415%}
.room-glow{position:absolute;inset:-10% 0 -10% 0;background:radial-gradient(40% 30% at 50% 22%,rgba(79,214,255,.20),transparent 70%)}
.room-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,14,17,.92) 0%,rgba(11,14,17,.62) 38%,rgba(11,14,17,0) 62%),linear-gradient(0deg,rgba(11,14,17,.96) 0%,rgba(11,14,17,.5) 34%,rgba(11,14,17,0) 58%),linear-gradient(180deg,rgba(11,14,17,.55),rgba(11,14,17,0) 22%)}
.w-room .w-copy{grid-column:1/2}
.host{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.host img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--cyan);box-shadow:0 0 22px rgba(79,214,255,.45)}
.host-tag{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.host-tag b{font-family:var(--display);font-size:20px;font-weight:600}
.host-tag span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.disclosure{color:var(--soft)!important;font-size:18px!important}

.traveller{display:none}

/* After the story */
.how{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.how h2,.follow h2{font-size:clamp(32px,4vw,52px);margin-bottom:36px}
.follow-head{display:flex;align-items:center;gap:22px;margin-bottom:36px}
.follow-head h2{margin:0}
.follow-head .eyebrow{margin-bottom:8px;color:var(--cyan)}
.mini-clock{width:76px;height:76px;flex:none;overflow:visible;color:var(--cyan-core);filter:drop-shadow(0 0 2px var(--cyan)) drop-shadow(0 0 9px rgba(79,214,255,.8))}
.links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.links a{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;min-height:88px;padding:18px 22px;border-radius:var(--radius);text-decoration:none;color:var(--text);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);transition:border-color .2s,transform .25s var(--ease-out),box-shadow .25s}
.links a:hover{border-color:var(--cyan-deep);transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(79,214,255,.5)}
.l-name{font-family:var(--display);font-size:22px;font-weight:600}
.l-meta{grid-row:2;color:var(--muted);font-size:15px}
.l-ic{grid-row:1/3;grid-column:2;width:22px;height:22px;color:var(--muted);transition:color .2s,transform .25s var(--ease-out)}
.links a:hover .l-ic{color:var(--cyan);transform:translate(2px,-2px)}
.links .primary a{border-color:rgba(79,214,255,.55);box-shadow:0 0 0 1px rgba(79,214,255,.18),0 0 34px -10px rgba(79,214,255,.5)}
.links .primary .l-meta{color:var(--cyan)}
.contact p{font-size:19px;color:var(--soft)}
.contact h2{font-size:clamp(28px,3vw,40px);margin-bottom:14px}

/* Reduced motion / static reveal (story.js adds .reveal and .in) */
.reveal .world > *,.reveal section > .wrap{transition:opacity .2s ease-out}
.reveal .world:not(.in) > *,.reveal section:not(.in) > .wrap{opacity:0}

/* ---------- static layout: tablet and phone ---------- */
@media (max-width:899.98px){
  .world{grid-template-columns:1fr;row-gap:36px;padding-top:calc(var(--header-h,64px) + 40px);padding-bottom:64px}
  .world .w-visual{order:-1}
  .w-hero{grid-template-rows:minmax(0,1fr) auto;align-content:stretch;row-gap:24px;padding-top:calc(var(--header-h,64px) + 16px);padding-bottom:max(28px,4svh)}
  .w-hero{grid-template-rows:minmax(72px,1fr) auto}
  .w-hero .w-visual{height:auto;min-height:0;align-self:stretch;container-type:size}
  .w-hero .slot{width:auto;height:min(100cqh,300px);max-width:70vw;margin:0 auto}
  .w-copy{max-width:40rem}
  .cue{display:none}
  .w-room .w-visual{order:0}
  .w-room{padding-top:calc(var(--header-h,64px) + 34svh)}
  .room-scrim{background:linear-gradient(0deg,rgba(11,14,17,.97) 0%,rgba(11,14,17,.85) 48%,rgba(11,14,17,.2) 75%,rgba(11,14,17,.55) 100%)}
}
@media (max-width:599.98px){
  .world{--vis-h:330px}
  .world h1{font-size:clamp(36px,10.5vw,44px);margin-bottom:16px}
  .world h2{font-size:clamp(30px,8.6vw,36px);margin-bottom:14px}
  .w-copy > p:not(.eyebrow){font-size:16.5px;line-height:1.5}
  .w-hero .actions{margin-top:22px}
  .world .eyebrow{margin-bottom:12px}
  .home .top nav a:not([href="#follow"]){display:none}
  .tcard.x{display:none}
  .tcard-in{font-size:13px;padding:9px 11px}
  .c1{left:28%;top:7%} .c2{left:72%;top:16%} .c5{left:30%;top:25%} .c3{left:28%;top:77%} .c4{left:72%;top:86%} .c6{left:36%;top:95%}
  .pile .slot{width:min(42%,170px,22svh)}
  .flow{flex-direction:column;align-items:stretch;gap:0}
  .node{width:auto;flex-direction:row;text-align:left;gap:16px}
  .node-box{width:56px;border-radius:16px}
  .node p{margin-top:0;gap:3px}
  .wire{flex:none;width:2px;height:26px;margin:-4px 0 -4px 27px;min-width:0}
  .wire-line{transform-origin:50% 0}
  .w1 .wire-line{background:linear-gradient(180deg,var(--amber),#c4bf84)}
  .w2 .wire-line{background:linear-gradient(180deg,#c4bf84,#8acac2)}
  .w3 .wire-line{background:linear-gradient(180deg,#8acac2,var(--cyan))}
  .packet{left:-5px;top:-6px}
  .w-build .w-visual{height:auto}
  .w-watch .w-visual{height:auto}
  .timer{padding:14px 16px}
  .links{grid-template-columns:1fr}
  .mini-clock{width:60px;height:60px}
}

/* ---------- motion: the pinned story ---------- */
.motion .stage{height:100vh;height:100svh;background:var(--bg)}
.motion .world{position:absolute;inset:0;min-height:0;background:none}
.motion .world:not(.w-hero){padding-bottom:48px}
.motion .world::before{display:none}
.motion .world:not(.w-hero){opacity:0}
.motion .world{pointer-events:none}
.motion .world a{pointer-events:auto}
.motion .slot .clock-static{visibility:hidden}
.motion .amb{display:block;position:absolute;inset:0;pointer-events:none}
.motion .amb-peg{background-image:radial-gradient(3px 6px at 50% 50%,rgba(255,255,255,.055) 60%,transparent 66%);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(85% 75% at 60% 50%,#000 25%,transparent 85%);mask-image:radial-gradient(85% 75% at 60% 50%,#000 25%,transparent 85%)}
.motion .amb-cool{background:radial-gradient(55% 60% at 70% 48%,rgba(79,214,255,.12),transparent 70%)}
.motion .amb-warm{background:radial-gradient(60% 65% at 68% 50%,rgba(255,150,50,.16),transparent 70%),radial-gradient(90% 80% at 50% 120%,rgba(255,110,40,.10),transparent 70%);opacity:0}
.motion .wire-run{display:block}
.motion .w-room .room{opacity:0}
.motion .w-room{padding-bottom:64px}
.motion .traveller{display:block;position:absolute;left:0;top:0;width:400px;height:400px;z-index:5;pointer-events:none;will-change:transform}
.tv-on,.tv-face,.tv-hand,.tv-crown{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tv-face{will-change:opacity}
.tv-cyan{color:var(--cyan-core);filter:drop-shadow(0 0 3px var(--cyan)) drop-shadow(0 0 14px rgba(79,214,255,.8)) drop-shadow(0 0 34px rgba(79,214,255,.4))}
.tv-amber{color:var(--amber-core);opacity:0;filter:drop-shadow(0 0 3px var(--amber)) drop-shadow(0 0 14px rgba(255,179,71,.8)) drop-shadow(0 0 34px rgba(255,179,71,.4))}
.tv-hand{color:#c9f3ff;filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 0 12px currentColor);will-change:transform}
.tv-crown{color:var(--cyan-core);opacity:0;filter:drop-shadow(0 0 3px var(--magenta)) drop-shadow(0 0 12px rgba(255,79,216,.6))}

@media (max-width:899.98px){
  .motion .world{grid-template-rows:minmax(0,1fr) auto;align-content:stretch;row-gap:24px;padding-top:calc(var(--header-h,64px) + 16px);padding-bottom:max(28px,4svh)}
  .motion .world .w-visual{height:auto;min-height:0;align-self:stretch}
  .motion .w-room{padding-top:calc(var(--header-h,64px) + 16px)}
  .motion .w-room .w-copy{grid-row:2}
  .motion .w-watch .w-visual{gap:18px}
  .motion .w-watch .slot{width:auto;height:min(200px,24svh);flex:none}
  .motion .w-watch .w-visual{justify-content:center}
}
@media (max-width:599.98px){
  .motion .world{row-gap:18px}
  .motion .watch-status{margin-top:14px!important;font-size:13px!important}
  .motion .t-v{font-size:30px}
  .motion .host{margin-bottom:14px}
  .motion .host img{width:56px;height:56px}
}

/* Short phone screens (e.g. 320 x 640): tighten so each world fits one screen */
@media (max-width:599.98px) and (max-height:700px){
  .world h1{font-size:34px}
  .world h2{font-size:28px}
  .w-copy > p:not(.eyebrow){font-size:15.5px;line-height:1.45}
  .world .eyebrow{margin-bottom:8px}
  .node-box{width:44px;border-radius:12px}
  .node-ic{width:24px;height:24px}
  .wire{height:14px;margin-left:21px}
  .node-label{font-size:14px}
  .motion .world{row-gap:12px}
  .host img{width:48px;height:48px}
}
@media (max-width:379.98px){
  .hud{min-width:0;margin-left:2px}
  .hud-unit{display:none}
  .mark{font-size:12.5px;letter-spacing:.05em}
}