@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/atkinson-hyperlegible-latin-400.woff2") format("woff2")}
/* Layout: one calm column on a night-blue ground; the world band of time zones is the hero, then the travel day, the light dial, the steps, the promises. */
:root{
  --night:#0A1424;      /* app's start colour */
  --deep:#0E2A33;       /* blue-green depth */
  --surface:#12303A;    /* cards */
  --line:#1F4450;       /* hairlines */
  --text:#EAF2F2;       /* one text colour for headings and body */
  --muted:#A9C1C4;      /* quieter text, same hue family */
  --teal:#2CC9B5;       /* the app's accent, lifted for night */
  --dawn:#F3D29A;       /* light windows only */
  --sleep:#2B4F7A;      /* sleep bands */
  --face:"Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step-0:1rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:2.2rem; --step-4:clamp(2.2rem,6vw,3.6rem);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--night)}
body{margin:0;color:var(--text);font-family:var(--face);font-weight:400;font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:400;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-0.01em}
p{margin:0}
a{color:var(--teal)}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.eyebrow{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:flex;align-items:center;gap:10px;font-size:1.05rem;color:var(--text);text-decoration:none}
.mark{width:28px;height:28px;border-radius:8px;background:radial-gradient(circle at 70% 30%,var(--dawn) 0 18%,transparent 19%),linear-gradient(160deg,var(--deep),#173E4A);border:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--teal);color:#06231F;text-decoration:none;font-size:1rem;border:0;cursor:pointer;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}

/* hero */
.hero{padding-block:24px 8px;display:grid;gap:28px}
.hero h1{font-size:var(--step-4);max-width:15ch}
.hero .lede{font-size:var(--step-1);color:var(--muted);max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-note{font-size:.9rem;color:var(--muted)}

/* world band */
.band{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--deep);aspect-ratio:12/4.4;min-height:220px;max-width:100%}
.band .sky{position:absolute;inset:0;width:200%;
  background:linear-gradient(90deg,
    #0A1424 0%, #0A1424 8%, #24435A 14%, #6F7F86 18%, #C9B48C 21%, #E9D7A8 25%,
    #C9B48C 31%, #6F7F86 35%, #24435A 39%, #0A1424 45%, #0A1424 50%,
    #0A1424 58%, #24435A 64%, #6F7F86 68%, #C9B48C 71%, #E9D7A8 75%,
    #C9B48C 81%, #6F7F86 85%, #24435A 89%, #0A1424 95%, #0A1424 100%);
  opacity:.55;animation:drift 48s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.band svg{position:absolute;inset:0;width:100%;height:100%}
.band .zones line{stroke:#EAF2F2;stroke-opacity:.07}
.city text{fill:var(--text);font:14px var(--face)}
.city .t{fill:var(--muted);font-size:12px}
.city circle{fill:var(--text)}
.trail{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;opacity:.9}
.plane path{fill:var(--text)}
.band-caption{position:absolute;left:16px;bottom:14px;right:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}

/* clocks */
.clocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.clock{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 70%,transparent);min-width:0}
.clock svg{flex:0 0 52px;width:52px;height:52px}
.clock .face{fill:none;stroke:var(--line);stroke-width:2}
.clock .h{stroke:var(--text);stroke-width:3;stroke-linecap:round}
.clock .m{stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.clock.body .h{stroke:var(--teal)}
.clock .name{font-size:.85rem;color:var(--muted)}
.clock .time{font-size:1.35rem}
@media (max-width:640px){.clocks{grid-template-columns:1fr}}

/* sections */
section{padding-block:clamp(56px,9vw,96px)}
.sec-head{display:grid;gap:12px;max-width:60ch;margin-bottom:32px}
.sec-head h2{font-size:var(--step-3)}
.sec-head p{color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* phone */
.phone{width:min(340px,100%);margin-inline:auto;border-radius:40px;padding:14px;background:#081019;border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.screen{border-radius:28px;background:var(--night);padding:18px 14px 22px;display:grid;gap:8px;position:relative;overflow:hidden}
.screen .hdr{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 8px}
.screen .hdr b{font-weight:400;color:var(--teal);font-size:.95rem}
.screen .hdr span{font-size:.75rem;color:var(--muted)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid transparent;transition:border-color .6s ease,background-color .6s ease,opacity .6s ease}
.row .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.row .ic i{display:block;width:10px;height:10px;border-radius:50%}
.row .tt{font-size:.92rem}
.row .st{font-size:.76rem;color:var(--muted)}
.row.now{border-color:var(--teal);background:#163A45}
.row.past{opacity:.55}
.band-row{padding:8px 12px;border-radius:10px;font-size:.78rem;background:#17325A;color:var(--text)}
.band-row.plane{background:#1A3A63}
.divider{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--teal);padding:2px 2px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--teal);opacity:.55}
.light i{background:var(--dawn);box-shadow:0 0 12px var(--dawn)}
.wake i{background:var(--text)}
.meal i{background:var(--muted)}
.air i{background:var(--teal)}
.bed i{background:var(--sleep);border:1px solid var(--muted)}
.points{display:grid;gap:18px}
.point{display:grid;gap:4px}
.point h3{font-size:var(--step-1)}
.point p{color:var(--muted)}

/* dial */
.dial-wrap{display:grid;place-items:center;gap:16px}
.dial{width:min(360px,100%);height:auto;max-width:100%}
.dial .ring{fill:none;stroke:var(--line);stroke-width:18}
.dial .tick{stroke:var(--muted);stroke-opacity:.5}
.dial .lbl{fill:var(--muted);font:12px var(--face)}
.dial .center{fill:var(--text);font:20px var(--face)}
.dial .sub{fill:var(--muted);font:13px var(--face)}
#arcs{transition:transform 1.4s cubic-bezier(.4,0,.2,1);transform-origin:180px 180px}
.legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:.85rem;color:var(--muted)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.legend .l::before{background:var(--dawn)} .legend .s::before{background:var(--sleep);border:1px solid var(--muted)}
.days{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.days button{font:inherit;font-size:.8rem;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.days button[aria-pressed="true"]{color:var(--night);background:var(--teal);border-color:var(--teal)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.step{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:8px;min-width:0}
.step .n{font-size:.85rem;color:var(--teal)}
.step h3{font-size:var(--step-1)}
.step p{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* promises */
.promises{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.promise{padding:20px;border-radius:18px;background:var(--surface);display:grid;gap:6px;min-width:0}
.promise h3{font-size:1.1rem}
.promise p{color:var(--muted);font-size:.92rem}
@media (max-width:900px){.promises{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.promises{grid-template-columns:1fr}}

/* closing */
.closing{text-align:left;display:grid;gap:18px;justify-items:start;border-radius:28px;padding:clamp(28px,5vw,56px);background:linear-gradient(135deg,var(--deep),#123844);border:1px solid var(--line);position:relative;overflow:hidden}
.closing h2{font-size:var(--step-3);max-width:20ch}
.closing p{color:var(--muted);max-width:56ch}
.closing .sun{position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--dawn) 0%,rgba(243,210,154,.25) 35%,transparent 70%);opacity:.35;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12);opacity:.5}}

footer{padding-block:40px 56px;border-top:1px solid var(--line);margin-top:40px;display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;color:var(--muted);font-size:.9rem}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}

@media (prefers-reduced-motion:reduce){
  .band .sky,.closing .sun{animation:none}
  #arcs{transition:none}
  .row{transition:none}
}
/* page chrome added for the site [message 67] */
.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:#06231F;padding:10px 16px;border-radius:0 0 10px 10px;z-index:10}
.skip:focus{left:16px}
.draft{background:var(--surface);border-bottom:1px solid var(--line);color:var(--text);padding:10px clamp(16px,4vw,32px);font-size:.9rem;text-align:center}
.prose{max-width:70ch;padding-block:24px 8px}
.prose h1{font-size:var(--step-3);margin-bottom:8px}
.prose h2{font-size:var(--step-1);margin:28px 0 8px}
.prose p{margin:0 0 14px;color:var(--text)}
.prose .meta{color:var(--muted);font-size:.9rem}
.contact{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
.contact .card{padding:20px;border-radius:18px;background:var(--surface);display:grid;gap:6px;min-width:0}
.contact h3{font-size:1.1rem}
.contact p{color:var(--muted);font-size:.92rem}
.contact a{overflow-wrap:anywhere}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

.legend .note::before{display:none}
.legend .note{opacity:.85}

/* PHONES: the band keeps its picture's own proportions (no squashed text), the caption sits under it, and the two cities that crowd
   the others (Los Angeles, London) step aside so the labels can be read [message 67] */
@media (max-width:640px){
  .band{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column}
  .band svg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1200/440;flex:none}
  .band-caption{position:relative;left:auto;right:auto;bottom:auto;padding:6px 14px 12px}
  .city.opt{display:none}
  .city text{font-size:38px;transform:translateY(16px)}
  .city .t{font-size:32px;transform:translateY(34px)}
  .city circle{r:7px}
}
footer .disclaimer{flex-basis:100%;margin:0;font-size:.85rem}