/* fletcherhillier.com
   Sky palette -- this site has its own scheme rather than the London
   Microgreens cream/green the other properties share. The page reads as sky
   from the top down to the interactive grass strip along the bottom of every
   page (see .grass and site.js). Playfair Display for display, JetBrains Mono
   for everything else. */

:root{
  /* Night sky. The page sits on true black with a moon, stars and the odd
     shooting star behind it (see #night-static / #night-fx in site.js); the
     grass strip grows out of the bottom of the home page only. */
  --sky:#000000;          /* page ground */
  --panel:#0A1622;        /* raised surfaces: cards, inputs, chat */
  --panel-hi:#101E2C;     /* hover on those */
  --deep:#0E1E2E;         /* the darker feature panels: tiles, banner */
  --head:#DCEBF8;         /* headings                       17.3:1 on black */
  --ink:#B9CFE0;          /* body text                      13.1:1 */
  --muted:#8AA6BC;        /* secondary text                  8.3:1 */
  --border:#1C3346;
  --tint:#0C2418;         /* success wash */
  --bad:#2A0F0F;          /* error wash */
  --error-red:#E58A8A;

  --on-dark:#E8F3FB;      /* text on surfaces that are dark in EVERY phase */
  --accent:#3E9BD8;       /* decoration: dots, borders, fills */
  --accent-ink:#6FC0F0;   /* accent as TEXT                 10.5:1 */
  --accent-lite:#7FC4EC;  /* accent as TEXT on panels        9.6:1 */

  --serif:'Playfair Display',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --wrap:1080px;
  --prose:640px;

  /* grass, moonlit rather than daylit */
  --grass-1:#2E5A24;
  --grass-2:#3E7A31;
  --grass-3:#1B3616;
  --grass-h:130px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}

body{
  min-height:100vh;
  background:var(--sky);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the house halftone: expanding dots anchored to two corners ---- */
.dotfield{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--dtr),var(--dbl);
  background-repeat:no-repeat,no-repeat;
  background-position:right -140px top -140px,left -170px bottom -170px;
  animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
@media(max-width:920px){
  .dotfield{
    background-image:var(--dtrm),var(--dblm);
    background-size:74vw 74vw,66vw 66vw;
    background-position:right -9vw top -7vw,left -13vw bottom -11vw;
  }
}
@media(prefers-reduced-motion:reduce){
  .dotfield{animation:none}
}

header,main,footer{position:relative;z-index:1}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 16px}}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--accent);
  color:#04121D;padding:10px 16px;border-radius:2px}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif);color:var(--head);font-weight:700;
  line-height:1.18;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,6vw,3.4rem)}
h2{font-size:clamp(1.4rem,3.4vw,1.95rem)}
h3{font-size:1.12rem}

a{color:var(--accent-ink);text-decoration:none;
  border-bottom:1px solid rgba(62,155,216,.5);
  transition:color .15s,border-color .15s}
a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}

.kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:600;display:block;margin-bottom:14px}

.lede{font-size:1.06rem;line-height:1.75;max-width:var(--prose)}

.prose{max-width:var(--prose)}
.prose p{margin-bottom:1.3em}
.prose p:last-child{margin-bottom:0}
.prose h2{margin:2.4em 0 .8em}
.prose h2:first-child{margin-top:0}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.82);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20}
.mast-inner{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px 24px;flex-wrap:wrap;max-width:var(--wrap);margin:0 auto}
@media(max-width:600px){.mast-inner{padding:14px 16px}}

.brand{border:0;display:block;line-height:1.25}
.brand:hover{color:inherit}
.brand-kicker{display:block;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-ink);font-weight:600}
.brand-name{display:block;font-family:var(--serif);font-size:1.28rem;
  font-weight:700;color:var(--head)}
.brand:hover .brand-name{color:var(--accent-ink)}

.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{border:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--head);border-bottom-color:var(--accent)}
.nav a[aria-current=page]{color:var(--head);border-bottom-color:var(--accent)}

.navtoggle{display:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;background:none;
  border:1px solid var(--border);color:var(--ink);padding:7px 12px;
  border-radius:2px;cursor:pointer}
/* Nine nav items in JetBrains Mono run out of room well before the usual
   mobile breakpoint, so this collapses earlier than 820px. */
@media(max-width:1100px){
  .navtoggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--border);margin-top:12px;padding-top:6px}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid var(--border)}
  .nav a:last-child{border-bottom:0}
}

/* ---------- sections ---------- */
.section{padding:76px 0}
.section-tight{padding:48px 0}
.section+.section{border-top:1px solid var(--border)}
@media(max-width:600px){.section{padding:52px 0}}

.hero{padding:96px 0 72px}
@media(max-width:600px){.hero{padding:60px 0 44px}}
.hero h1{margin-bottom:22px}
.hero .lede{font-size:1.14rem;max-width:660px}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.btn{display:inline-block;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:14px 24px;border-radius:2px;border:1px solid var(--accent);
  background:var(--accent);color:#04121D;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);
  color:#04121D}
.btn-ghost{background:transparent;color:var(--accent-ink);border-color:var(--accent-ink)}
.btn-ghost:hover{background:var(--accent-ink);border-color:var(--accent-ink);
  color:#04121D}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- the expanding-dot signature ---------- */
.dotseq{display:flex;align-items:center;gap:9px;margin:0 0 26px}
.dotseq i{display:block;border-radius:50%;background:var(--accent);
  animation:spritz 2.6s ease-in-out infinite}
.dotseq i:nth-child(1){width:4px;height:4px;animation-delay:0s}
.dotseq i:nth-child(2){width:6px;height:6px;animation-delay:.13s}
.dotseq i:nth-child(3){width:9px;height:9px;animation-delay:.26s}
.dotseq i:nth-child(4){width:13px;height:13px;animation-delay:.39s;
  background:var(--accent-ink)}
.dotseq i:nth-child(5){width:18px;height:18px;animation-delay:.52s;
  background:var(--accent-ink)}
@keyframes spritz{
  0%,70%,100%{transform:scale(1);opacity:.55}
  35%{transform:scale(1.42);opacity:1}
}
@media(prefers-reduced-motion:reduce){.dotseq i{animation:none;opacity:.9}}

/* ---------- lead-project banner (full bleed) ---------- */
.banner{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#061420 0%,#0E3A5A 55%,#123A57 100%);
  border-top:1px solid #0E3A5A;border-bottom:1px solid #0E3A5A;
  padding:84px 0}
@media(max-width:600px){.banner{padding:56px 0}}
.banner-dots{position:absolute;inset:0;pointer-events:none;
  background-image:url('/d/tr.svg');background-repeat:no-repeat;
  background-position:right -120px top -150px;opacity:.55;
  animation:breathe 11s ease-in-out infinite}
@media(max-width:920px){
  .banner-dots{background-size:70vw 70vw;
    background-position:right -12vw top -14vw;opacity:.4}
}
@media(prefers-reduced-motion:reduce){.banner-dots{animation:none}}
.banner-inner{position:relative;z-index:1}
.banner-kicker{display:block;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-lite);font-weight:600;margin-bottom:16px}
.banner-title{color:var(--on-dark);font-size:clamp(2rem,5.4vw,3.1rem);
  margin-bottom:18px}
.banner-lede{color:#C6E0F2;font-size:1.06rem;line-height:1.72;max-width:600px}
.btn-on-dark{background:var(--accent);border-color:var(--accent);color:#0B2E49}
.btn-on-dark:hover{background:var(--on-dark);border-color:var(--on-dark);
  color:var(--deep)}
.btn-ghost-dark{background:transparent;color:var(--on-dark);
  border-color:rgba(220,235,248,.4)}
.btn-ghost-dark:hover{background:var(--on-dark);border-color:var(--on-dark);
  color:var(--deep)}

/* ---------- project card grid ---------- */
.grid{display:grid;gap:1px;background:var(--border);
  border:1px solid var(--border);margin-top:40px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{background:var(--panel);padding:28px 26px 26px;display:flex;
  flex-direction:column;gap:10px;border:0;transition:background .18s}
.card:hover{background:var(--panel-hi);color:inherit}
.card-n{font-size:10px;letter-spacing:.2em;color:var(--accent-ink);font-weight:600}
.card h3{font-size:1.3rem}
.card:hover h3{color:var(--accent-ink)}
.card p{font-size:.9rem;color:var(--muted);line-height:1.65;flex:1}
.card-go{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--deep);font-weight:600;margin-top:8px}
.card-go::after{content:" \2192"}

/* Dark tiles. The hairline gaps come from the grid background showing through,
   so that has to darken with the cards or the seams glow. */
.grid-dark{background:#08243A;border-color:#08243A}
.grid-dark .card{background:#0E1E2E}
.grid-dark .card:hover{background:#134E76}
.grid-dark .card h3{color:var(--on-dark)}
.grid-dark .card:hover h3{color:var(--accent-ink)}
.grid-dark .card p{color:#9FC3DC}
.grid-dark .card-go{color:var(--accent-lite)}
.grid-dark .card-n{color:var(--accent-lite);opacity:.85}

/* ---------- project page ---------- */
.detail{border-left:2px solid var(--accent);padding:2px 0 2px 22px;
  margin:2em 0;color:var(--muted);font-size:.95rem;max-width:var(--prose)}

.livelink{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:0;margin-top:6px;display:inline-block}

.soon{display:inline-block;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--muted);
  border:1px dashed var(--border);padding:13px 22px;border-radius:2px}

.more{margin-top:64px;padding-top:34px;border-top:1px solid var(--border)}
.more h2{font-size:1.15rem;margin-bottom:18px}
.more-list{display:flex;gap:26px;flex-wrap:wrap}
.more-list a{font-size:.92rem}

/* ---------- lists ---------- */
.deflist{max-width:var(--prose);margin-top:34px}
.deflist>div{padding:22px 0;border-top:1px solid var(--border)}
.deflist>div:last-child{border-bottom:1px solid var(--border)}
.deflist h3{margin-bottom:8px}
.deflist h3 a{border:0}
.deflist p{font-size:.95rem;color:var(--muted)}
.rmeta{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:600;margin-top:8px}

.plainlist{max-width:var(--prose);margin:1.4em 0;list-style:none}
.plainlist li{padding-left:22px;position:relative;margin-bottom:.7em}
.plainlist li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin-top:40px}
.faq-item{border-top:1px solid var(--border);padding:26px 0}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-item h3{font-size:1.05rem;margin-bottom:10px}
.faq-item p{font-size:.95rem;color:var(--muted);max-width:var(--prose)}
.faq-item .more-at{display:inline-block;margin-top:10px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}

/* ---------- forms ---------- */
.form{max-width:var(--prose);margin-top:36px}
.field{margin-bottom:22px}
.field label{display:block;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:8px}
.field input,.field textarea{width:100%;font-family:var(--mono);font-size:15px;
  color:var(--ink);background:var(--panel);border:1px solid var(--border);
  border-radius:2px;padding:13px 14px;line-height:1.6}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(62,155,216,.22)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.choice{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:26px}
@media(max-width:560px){.choice{grid-template-columns:1fr}}
.choice label{display:block;border:1px solid var(--border);border-radius:2px;
  padding:18px;cursor:pointer;background:var(--panel);transition:border-color .15s,
  background .15s;text-transform:none;letter-spacing:0;font-weight:400}
.choice label:hover{border-color:var(--accent)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice input:checked+span{color:var(--head)}
.choice label:has(input:checked){border-color:var(--deep);
  background:var(--tint)}
.choice .ct{display:block;font-family:var(--serif);font-size:1.08rem;
  font-weight:700;color:var(--head);margin-bottom:5px}
.choice .cd{display:block;font-size:.84rem;color:var(--muted);line-height:1.6}

.formnote{font-size:.85rem;color:var(--muted);margin-top:18px}
.result{margin-top:20px;padding:15px 17px;border-radius:2px;font-size:.92rem;
  display:none}
.result.ok{display:block;background:var(--tint);
  border:1px solid var(--accent);color:var(--accent-ink)}
.result.bad{display:block;background:var(--bad);border:1px solid var(--error-red);
  color:var(--error-red)}

/* ---------- chat ---------- */
.chat{max-width:760px;margin-top:36px;border:1px solid var(--border);
  border-radius:2px;background:var(--panel);display:flex;flex-direction:column}
.chat-log{padding:22px;display:flex;flex-direction:column;gap:16px;
  min-height:260px;max-height:52vh;overflow-y:auto}
.msg{max-width:88%;font-size:.93rem;line-height:1.68;padding:12px 15px;
  border-radius:2px;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{background:var(--panel);border:1px solid var(--border);
  align-self:flex-start;color:var(--ink)}
.msg.me{background:#0E3A5A;color:var(--on-dark);align-self:flex-end}
.msg.err{background:var(--bad);border:1px solid var(--error-red);
  color:var(--error-red);align-self:flex-start}
.chat-form{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border)}
.chat-form input{flex:1;font-family:var(--mono);font-size:14px;
  background:var(--sky);border:1px solid var(--border);border-radius:2px;
  padding:12px 13px;color:var(--ink)}
.chat-form input:focus{outline:none;border-color:var(--accent)}
.chat-form .btn{padding:12px 18px}
.suggest{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.suggest button{font-family:var(--mono);font-size:11.5px;color:var(--ink);
  background:none;border:1px solid var(--border);border-radius:2px;
  padding:8px 13px;cursor:pointer;transition:border-color .15s,color .15s}
.suggest button:hover{border-color:var(--accent);color:var(--accent-ink)}
.typing{display:inline-flex;gap:5px;align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);
  animation:spritz 1.3s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--border);padding:56px 0 40px;margin-top:20px;
  background:rgba(0,0,0,.55)}
.foot-dots{display:flex;align-items:center;gap:7px;margin-bottom:22px}
.foot-dots i{display:block;border-radius:50%;background:var(--accent);opacity:.75}
.foot-dots i:nth-child(1){width:3px;height:3px}
.foot-dots i:nth-child(2){width:5px;height:5px}
.foot-dots i:nth-child(3){width:7px;height:7px}
.foot-dots i:nth-child(4){width:10px;height:10px;background:var(--accent-ink)}
.foot-dots i:nth-child(5){width:14px;height:14px;background:var(--accent-ink)}
.foot-line{font-family:var(--serif);font-size:1.16rem;color:var(--head);
  font-weight:700;margin-bottom:34px}
.foot-cols{display:grid;gap:34px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:36px}
.foot-cols h2{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);font-family:var(--mono);font-weight:600;margin-bottom:14px}
.foot-cols ul{list-style:none}
.foot-cols li{margin-bottom:9px}
.foot-cols a{font-size:.86rem;color:var(--ink);border:0}
.foot-cols a:hover{color:var(--accent-ink)}
.copy{font-size:11px;letter-spacing:.06em;color:var(--muted);
  padding-top:26px;border-top:1px solid var(--border)}

/* ---------- the grass strip ---------- */
/* Fixed along the bottom of every page. pointer-events:none so it never eats a
   click -- the pointer is tracked on window instead, which also means the
   blades react to a cursor that is merely passing over the footer. */
.grass{position:fixed;left:0;right:0;bottom:0;height:var(--grass-h);
  z-index:2;pointer-events:none}
.grass canvas{display:block;width:100%;height:100%}
/* The soil line keeps the blades from looking like they float. */
.grass::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:linear-gradient(180deg,rgba(60,115,49,0) 0%,var(--grass-3) 70%)}
@media(max-width:700px){:root{--grass-h:92px}}

/* Only the home page grows grass, so only it needs the footer to clear it. */
body:has(.grass) .foot{padding-bottom:calc(40px + var(--grass-h))}

@media(prefers-reduced-motion:reduce){
  /* Still drawn, just never animated -- see site.js. */
  .grass{opacity:.9}
}

/* ---------- night sky ---------- */
/* Two canvases: the static one carries the moon and the full starfield and is
   painted once per resize; the fx one only ever holds the handful of twinkling
   stars and any live shooting star, so the per-frame cost stays tiny even with
   a thousand stars on screen. */
.night{position:fixed;inset:0;z-index:0;pointer-events:none}
.night canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* The halftone sat on a light page. On black it only needs to be a faint
   wash or it competes with the stars. */
.dotfield{opacity:.5}
@media(prefers-reduced-motion:reduce){.night{opacity:1}}

/* ---------- cursive signature ---------- */
/* His name, and only his name. Dancing Script has real weight at 700, which
   the thinner formal scripts do not -- it has to hold up at masthead size on
   both the day and night backgrounds. */
.script{font-family:'Dancing Script',var(--serif);font-weight:700;
  letter-spacing:.005em}
h1.script{font-size:clamp(2.6rem,8vw,4.6rem);line-height:1.05;
  padding-bottom:.08em}
.brand-name.script{font-size:1.5rem;line-height:1.15}
.foot-line .script{font-size:1.35rem}

/* The introduction paragraph -- the one AI quotes. */
.lede-lead{font-size:1.2rem;line-height:1.7;color:var(--head);max-width:680px}
@media(max-width:600px){.lede-lead{font-size:1.08rem}}

/* ---------- what I do on site ---------- */
.taglist{list-style:none;display:flex;flex-wrap:wrap;gap:9px;
  max-width:var(--prose);margin:18px 0 0}
.taglist li{font-size:12px;letter-spacing:.06em;color:var(--ink);
  border:1px solid var(--border);border-radius:2px;padding:8px 13px;
  background:var(--panel)}

/* ---------- daytime palette ---------- */
/* The sky canvas paints a real blue gradient, so dark text sits directly on
   #7FC4EC at the top of the viewport. Every value below was picked against
   that worst case, not against the pale horizon -- which is why muted and
   accent-ink are noticeably darker here than a normal light theme would use. */
[data-sky="day"],[data-sky="dawn"],[data-sky="dusk"]{
  --sky:#CFE9FA;
  --panel:#FFFFFF;
  --panel-hi:#F3FAFF;
  --deep:#0E3A5A;
  --head:#0E3A5A;         /* 6.2:1 on the gradient top */
  --ink:#17303F;          /* 7.2:1 */
  --muted:#334756;        /* 5.1:1 */
  --border:#A9CFE8;
  --tint:#DBEDFB;
  --bad:#FBEEEE;
  --error-red:#A03A3A;
  --accent:#2E86C4;
  --accent-ink:#12496F;   /* 5.0:1 */
  --accent-lite:#7FC4EC;
  --grass-1:#4E8B3C;
  --grass-2:#6FAE4E;
  --grass-3:#3C7331;
}
/* Chrome washes flip with the phase. */
[data-sky="day"] .mast,[data-sky="dawn"] .mast,[data-sky="dusk"] .mast{
  background:rgba(228,243,253,.86)}
[data-sky="day"] .foot,[data-sky="dawn"] .foot,[data-sky="dusk"] .foot{
  background:rgba(228,243,253,.66)}
[data-sky="day"] .btn,[data-sky="dawn"] .btn,[data-sky="dusk"] .btn{
  background:var(--deep);border-color:var(--deep);color:#EAF5FF}
[data-sky="day"] .btn:hover,[data-sky="dawn"] .btn:hover,[data-sky="dusk"] .btn:hover{
  background:var(--accent);border-color:var(--accent);color:#04121D}
[data-sky="day"] .btn-ghost,[data-sky="dawn"] .btn-ghost,[data-sky="dusk"] .btn-ghost{
  background:transparent;color:var(--deep);border-color:var(--deep)}
[data-sky="day"] .dotfield,[data-sky="dawn"] .dotfield,[data-sky="dusk"] .dotfield{
  opacity:.35}

body,.mast,.foot{transition:background-color .8s ease,color .8s ease}

/* ---------- time-of-day control ---------- */
.skyctl{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;
  align-items:center;gap:10px;padding:9px 12px;border-radius:3px;
  background:rgba(10,22,34,.82);border:1px solid var(--border);
  backdrop-filter:blur(8px);font-family:var(--mono)}
[data-sky="day"] .skyctl,[data-sky="dawn"] .skyctl,[data-sky="dusk"] .skyctl{
  background:rgba(255,255,255,.86)}
.skyctl label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted)}
.skyctl input[type=range]{width:130px;accent-color:var(--accent);cursor:pointer}
.skyctl .clock{font-size:11.5px;color:var(--head);font-weight:600;
  min-width:62px;text-align:right;font-variant-numeric:tabular-nums}
.skyctl button{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);background:none;
  border:1px solid var(--border);border-radius:2px;padding:5px 9px;
  cursor:pointer}
.skyctl button:hover{color:var(--head);border-color:var(--accent)}
.skyctl[data-live="1"] button{opacity:.45}
@media(max-width:640px){
  .skyctl{right:10px;bottom:10px;gap:7px;padding:7px 9px}
  .skyctl label{display:none}
  .skyctl input[type=range]{width:92px}
}

/* ---------- the offer band ---------- */
/* Sits directly under the hero on the home page. Bordered rather than filled
   so it reads as a notice without fighting the sky behind it. */
.offer{border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
.offer h2{font-size:clamp(1.7rem,4.2vw,2.4rem)}