/* Wellness Habits News — style.css
   Identity: "The 24-Hour Dial". Everyday tools filed by the hour of the day they are used.
   Four time blocks carry the whole system: morning 05-11 (dawn coral), midday 11-17 (sky),
   evening 17-21 (dusk slate), night 21-05 (indigo). White ground, indigo ink, rounded tiles,
   a 24-cell hour ruler under the header, a 24-hour dial on the homepage, and a 24-hour
   "typical window" bar on every tool card.
   Fonts: Young Serif (display, one weight), Figtree (body, variable), JetBrains Mono (utility). Self-hosted. */

@font-face{font-family:'Young Serif';src:url('/assets/fonts/young-serif.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/assets/fonts/figtree.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --ground:#FFFFFF; --panel:#F7F7FB; --panel-2:#EFEFF6;
  --ink:#1F1A3D; --ink-2:#3D3958; --muted:#6A6784;
  --line:#E4E3EE; --line-2:#CBC9DB;
  --coral:#FF7A59; --coral-ink:#B03C1B; --coral-tint:#FFF0EA;
  --sky:#7FB3D5; --sky-ink:#235F88; --sky-tint:#EAF3FA;
  --slate:#4A4A6A; --slate-ink:#4A4A6A; --slate-tint:#EDEDF3;
  --indigo:#1F1A3D; --night-ink:#1F1A3D; --night-tint:#E8E6F2;
  --seg-morning:#FF7A59; --seg-midday:#7FB3D5; --seg-evening:#4A4A6A; --seg-night:#1F1A3D;
  --ok:#1E7A52; --err:#B3261E;
  --photo-bg:#FFFFFF;
  --f-display:'Young Serif',Georgia,'Times New Roman',serif;
  --f-body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --radius:14px;
  --shadow:0 16px 40px rgba(31,26,61,.10);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#121027; --panel:#1A1733; --panel-2:#221F40;
    --ink:#EEEDF8; --ink-2:#C9C7E0; --muted:#9A97B8;
    --line:#2B2850; --line-2:#3D3A66;
    --coral:#FF8A6C; --coral-ink:#FFA088; --coral-tint:#3A2230;
    --sky:#8FC0E0; --sky-ink:#A9D0EA; --sky-tint:#1C2A44;
    --slate:#8A8AB0; --slate-ink:#B8B8D6; --slate-tint:#25243F;
    --indigo:#C4BEF0; --night-ink:#C4BEF0; --night-tint:#221E48;
    --seg-morning:#FF7A59; --seg-midday:#7FB3D5; --seg-evening:#5E5E86; --seg-night:#4B4390;
    --ok:#5CC495; --err:#F2837A;
    --photo-bg:#FFFFFF;
    --shadow:0 16px 40px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#121027; --panel:#1A1733; --panel-2:#221F40;
  --ink:#EEEDF8; --ink-2:#C9C7E0; --muted:#9A97B8;
  --line:#2B2850; --line-2:#3D3A66;
  --coral:#FF8A6C; --coral-ink:#FFA088; --coral-tint:#3A2230;
  --sky:#8FC0E0; --sky-ink:#A9D0EA; --sky-tint:#1C2A44;
  --slate:#8A8AB0; --slate-ink:#B8B8D6; --slate-tint:#25243F;
  --indigo:#C4BEF0; --night-ink:#C4BEF0; --night-tint:#221E48;
  --seg-morning:#FF7A59; --seg-midday:#7FB3D5; --seg-evening:#5E5E86; --seg-night:#4B4390;
  --ok:#5CC495; --err:#F2837A;
  --shadow:0 16px 40px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--sky-ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.12;letter-spacing:-.01em;margin:0 0 .45em;color:var(--ink);text-wrap:balance}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin-bottom:.35em}
hr{border:0;border-top:1px solid var(--line-2);margin:2.2em 0}
strong{font-weight:700}
code{font-family:var(--f-mono);font-size:.88em;background:var(--panel-2);padding:1px 5px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--ground);padding:8px 14px;z-index:100;border-radius:6px}
.skip-link:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 16px}
.eyebrow{font:600 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.entry-main,.prose,.doc,.hero-copy,.block-title,.note-body,.tile-body{min-width:0}

/* block colour contexts: every block-scoped element reads --blk / --blk-ink / --blk-tint */
.block-morning,.bi-morning,.hi-morning,.tag-morning,.dc-morning,.md-morning{--blk:var(--coral);--blk-ink:var(--coral-ink);--blk-tint:var(--coral-tint)}
.block-midday,.bi-midday,.hi-midday,.tag-midday,.dc-midday,.md-midday{--blk:var(--sky);--blk-ink:var(--sky-ink);--blk-tint:var(--sky-tint)}
.block-evening,.bi-evening,.hi-evening,.tag-evening,.dc-evening,.md-evening{--blk:var(--slate);--blk-ink:var(--slate-ink);--blk-tint:var(--slate-tint)}
.block-night,.bi-night,.hi-night,.tag-night,.dc-night,.md-night{--blk:var(--seg-night);--blk-ink:var(--night-ink);--blk-tint:var(--night-tint)}

/* ---------- header + hour ruler ---------- */
.topbar{background:var(--ground);position:relative;z-index:30}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{width:32px;height:32px;flex:none;color:var(--ink)}
.wordmark{font-family:var(--f-display);font-size:20px;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.wordmark .wm-accent{color:var(--coral-ink)}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ground);border-bottom:1px solid var(--line-2);box-shadow:var(--shadow);flex-direction:column;align-items:stretch;padding:8px 16px 14px;z-index:20}
.nav.is-open{display:flex}
.nav a{display:flex;align-items:center;gap:8px;font:600 15px/1 var(--f-body);color:var(--ink-2);text-decoration:none;padding:12px 10px;border-radius:999px}
.nav a:hover{background:var(--panel);color:var(--ink)}
.nav a[data-block]::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot);flex:none}
.nav a[data-block="morning"]{--dot:var(--seg-morning)}
.nav a[data-block="midday"]{--dot:var(--seg-midday)}
.nav a[data-block="evening"]{--dot:var(--seg-evening)}
.nav a[data-block="night"]{--dot:var(--seg-night)}
.nav a.is-now::before{box-shadow:0 0 0 3px var(--ground),0 0 0 5px var(--dot)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--panel-2)}
.nav-toggle{display:block;background:none;border:1.5px solid var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer;font:600 12px var(--f-mono);color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.hour-ruler{display:grid;grid-template-columns:repeat(24,1fr);height:6px;position:relative}
.hour-ruler i{display:block;position:relative}
.hour-ruler .h-morning{background:var(--seg-morning)}
.hour-ruler .h-midday{background:var(--seg-midday)}
.hour-ruler .h-evening{background:var(--seg-evening)}
.hour-ruler .h-night{background:var(--seg-night)}
.hour-ruler i+i{box-shadow:inset 1px 0 0 rgba(255,255,255,.55)}
.hour-ruler i.is-now::after{content:"";position:absolute;left:50%;top:6px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink);border-bottom:0}

/* ---------- buttons, tags, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1 var(--f-body);padding:14px 22px;border-radius:999px;border:1.5px solid var(--ink);cursor:pointer;text-decoration:none;transition:transform .12s ease,background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--ground)}
.btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--ground)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--ground)}
.btn-accent{background:var(--coral);border-color:var(--coral);color:#1F1A3D}
.btn-accent:hover{background:#FF6A45;border-color:#FF6A45;color:#1F1A3D}
.btn-block{display:flex;width:100%}

.tag{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px 5px;border-radius:999px;background:var(--blk-tint,var(--panel-2));color:var(--blk-ink,var(--ink));white-space:nowrap}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blk,var(--muted));flex:none}
.tag-plain{--blk:var(--muted);--blk-ink:var(--ink-2);--blk-tint:var(--panel-2)}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:6px 10px 5px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--ground);white-space:nowrap}

/* checklist (round ticks, like dial dots) */
.checklist{list-style:none;margin:0 0 1.2em;padding:0}
.checklist li{position:relative;padding-left:32px;margin:0 0 .7em}
.checklist li::before{content:"";position:absolute;left:0;top:.22em;width:20px;height:20px;border:2px solid var(--ink-2);border-radius:50%;background:var(--ground)}
.checklist li::after{content:"";position:absolute;left:7px;top:.42em;width:5px;height:10px;border:solid var(--coral-ink);border-width:0 2.5px 2.5px 0;transform:rotate(42deg);opacity:0}
.checklist li.is-done::after,.checklist.all-done li::after{opacity:1}

/* ---------- hero ---------- */
.hero{padding:36px 0 34px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.hero-title{font-size:clamp(2rem,5.4vw,3.25rem);line-height:1.06;letter-spacing:-.02em;margin:6px 0 18px}
.hero-em{color:var(--slate-ink);display:block;margin-top:.12em}
.hero-lede{font-size:1.1rem;color:var(--ink-2);max-width:36em;margin-bottom:24px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--line-2)}
.hero-facts div{padding:12px 0 2px;border-bottom:1px solid var(--line)}
.hero-facts dt{font:500 11px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-facts dd{margin:2px 0 8px;font:400 1.15rem/1.15 var(--f-display);color:var(--ink)}

/* ---------- 24-hour dial ---------- */
.dial-fig{margin:0 auto;max-width:470px;width:100%}
.dial{width:100%;height:auto;overflow:visible}
.dial-bg{fill:var(--panel)}
.dial-face{fill:var(--ground);stroke:var(--line-2);stroke-width:1.5}
.dial-seg{stroke:var(--ground);stroke-width:3;transition:opacity .15s}
.seg-morning{fill:var(--seg-morning)} .seg-midday{fill:var(--seg-midday)} .seg-evening{fill:var(--seg-evening)} .seg-night{fill:var(--seg-night)}
.dial-link:hover .dial-seg{opacity:.86}
.dial-link:focus{outline:none}
.dial-link:focus-visible .dial-seg{stroke:var(--coral-ink);stroke-width:5}
.dial-seg.is-now{stroke:var(--ink);stroke-width:3.5}
.dial-labels{pointer-events:none}
.dial-lab{font:700 10.5px var(--f-mono);letter-spacing:.06em}
.dial-hrs{font:500 10px var(--f-mono);letter-spacing:.02em}
.lab-morning,.lab-midday{fill:#1F1A3D}
.lab-evening,.lab-night{fill:#FFFFFF}
.dial-tick{stroke:var(--muted);stroke-width:1.5}
.dial-tick.is-major{stroke:var(--ink);stroke-width:2.5}
.dial-num{font:500 11px var(--f-mono);fill:var(--muted)}
.dial-big{font:400 46px var(--f-display);fill:var(--ink)}
.dial-small{font:600 10px var(--f-mono);letter-spacing:.24em;fill:var(--muted)}
.dial-now{font:600 12px var(--f-mono);fill:var(--coral-ink);letter-spacing:.06em}
.dial-hand line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.dial-hand path{fill:var(--ink)}
.dial-dot{stroke:var(--ground);stroke-width:3;transform-box:fill-box;transform-origin:center;transition:transform .12s}
.dot-morning{fill:var(--seg-morning)} .dot-midday{fill:var(--seg-midday)} .dot-evening{fill:var(--seg-evening)} .dot-night{fill:var(--seg-night)}
.dial-dot-link:hover .dial-dot,.dial-dot-link:focus-visible .dial-dot{transform:scale(1.35);stroke:var(--ink)}
.dial-dot-link:focus{outline:none}
.dial-fig figcaption{font:400 12.5px/1.5 var(--f-mono);color:var(--muted);margin-top:12px;text-align:left}

/* block index strip */
.block-index{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.block-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:14px;padding-bottom:14px}
.bi{display:grid;grid-template-columns:1fr;grid-template-areas:"hrs" "name" "count";align-items:baseline;gap:2px 10px;padding:12px 14px;border-radius:var(--radius);background:var(--ground);border:1px solid var(--line-2);border-top:6px solid var(--blk);text-decoration:none;color:var(--ink)}
.bi:hover{border-color:var(--ink);border-top-color:var(--blk);color:var(--ink)}
.bi-hrs{grid-area:hrs;font:600 11.5px/1 var(--f-mono);letter-spacing:.06em;color:var(--blk-ink)}
.bi-name{grid-area:name;font:400 1.3rem/1.1 var(--f-display)}
.bi-count{grid-area:count;font:500 11px var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* ---------- time-block sections ---------- */
.block{position:relative;padding:44px 0 40px;border-bottom:1px solid var(--line)}
.block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--blk)}
.block-head{display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px 16px;align-items:center;margin-bottom:22px;position:relative}
.block-title{grid-column:2}
.block-hrs{font:600 12.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--blk-ink);margin:0 0 6px}
.block-head h2{font-size:clamp(2rem,5vw,2.9rem);margin:0;line-height:1}
.block-lede{grid-column:1/-1;color:var(--ink-2);margin:6px 0 0;max-width:44em}
.now-flag{position:absolute;right:0;top:0;font:700 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ground);background:var(--ink);padding:6px 10px 5px;border-radius:999px}
.now-flag[hidden]{display:none}
.mini-dial{width:56px;height:56px;border-radius:50%;grid-row:1;
  -webkit-mask:radial-gradient(circle,transparent 48%,#000 49%);mask:radial-gradient(circle,transparent 48%,#000 49%)}
.md-morning{background:conic-gradient(var(--line-2) 0 75deg,var(--blk) 75deg 165deg,var(--line-2) 165deg 360deg)}
.md-midday{background:conic-gradient(var(--line-2) 0 165deg,var(--blk) 165deg 255deg,var(--line-2) 255deg 360deg)}
.md-evening{background:conic-gradient(var(--line-2) 0 255deg,var(--blk) 255deg 315deg,var(--line-2) 315deg 360deg)}
.md-night{background:conic-gradient(var(--blk) 0 75deg,var(--line-2) 75deg 315deg,var(--blk) 315deg 360deg)}
.block-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:22px 0 0;font-size:15px}
.block-note span{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.block-note a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--blk-tint);color:var(--ink);text-decoration:none;font-weight:600}
.block-note a::after{content:"\2192";color:var(--blk-ink)}
.block-note a:hover{text-decoration:underline}

/* tool tiles */
.tiles{display:grid;grid-template-columns:1fr;gap:16px;margin:0;padding:0;list-style:none}
.tiles li{margin:0;min-width:0}
.tile{display:flex;flex-direction:column;height:100%;background:var(--ground);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .12s,transform .12s}
.tile:hover{border-color:var(--ink);transform:translateY(-2px);color:var(--ink)}
.tile-photo{background:var(--photo-bg);border-bottom:1px solid var(--line);height:190px;display:flex;align-items:center;justify-content:center;padding:18px;position:relative}
.tile-photo img{width:100%;height:100%;object-fit:contain;object-position:center}
.tile-photo .tag{position:absolute;left:12px;top:12px}
.tile-body{padding:16px 18px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.tile-title{font:400 1.3rem/1.15 var(--f-display);margin:0}
.tile-sub{color:var(--ink-2);font-size:14.5px;line-height:1.5;margin:0;flex:1}
.tile-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;padding-top:10px;border-top:1px solid var(--line);font:500 11.5px/1.3 var(--f-mono);letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.tile-meta .go{color:var(--sky-ink)}
.tile:hover .go{text-decoration:underline}

.tile-note{background:var(--blk-tint);border-color:transparent}
.tile-note .tile-photo{background:transparent;border-bottom:0;padding:18px 18px 0;height:auto}
.tile-note .tile-photo img{height:auto;border-radius:10px;border:1px solid var(--line)}
.tile-note .tile-photo .tag{left:28px;top:28px}

/* 24-hour "typical window" bar — 00:00 at the left, 24:00 at the right, block tints behind */
.win-row{display:flex;align-items:center;gap:10px;margin-top:2px}
.win{position:relative;flex:1;min-width:0;height:10px;border-radius:5px;overflow:hidden;display:block;
  background:linear-gradient(90deg,var(--night-tint) 0 20.833%,var(--coral-tint) 20.833% 45.833%,var(--sky-tint) 45.833% 70.833%,var(--slate-tint) 70.833% 87.5%,var(--night-tint) 87.5%);
  box-shadow:inset 0 0 0 1px var(--line)}
.win::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line-2) calc(25% - 1px) 25%)}
.win i{position:absolute;top:0;bottom:0;left:calc(var(--a) / 24 * 100%);width:max(4px,calc((var(--b) - var(--a)) / 24 * 100%));background:var(--ink);border-radius:5px;z-index:1}
.win-lab{font:600 11.5px/1 var(--f-mono);color:var(--ink-2);white-space:nowrap}
.win-scale{display:flex;justify-content:space-between;font:500 10.5px/1 var(--f-mono);color:var(--muted);margin-top:6px}

/* ---------- generic sections ---------- */
.section{padding:52px 0}
.section-head{display:grid;gap:10px;margin-bottom:26px}
.section-head h2{font-size:clamp(1.8rem,4.2vw,2.6rem);margin:0}
.section-head .eyebrow{margin:0 0 6px}
.section-lede{color:var(--ink-2);max-width:44em;margin:0;font-size:1.05rem}
.section-foot{margin:22px 0 0;font-weight:600}

/* habit notes — a timeline down the day */
.notes{list-style:none;margin:0;padding:0;position:relative}
.notes::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--line-2)}
.notes li{margin:0;min-width:0}
.note{display:grid;grid-template-columns:1fr;gap:12px;padding:18px 0 22px 34px;text-decoration:none;color:inherit;position:relative;border-bottom:1px solid var(--line)}
.notes li:last-child .note{border-bottom:0}
.note::before{content:"";position:absolute;left:0;top:20px;width:16px;height:16px;border-radius:50%;background:var(--ground);border:3px solid var(--ink)}
.note:hover .note-title{text-decoration:underline;color:var(--ink)}
.note-time{font:500 11.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:baseline}
.note-time b{font:700 1.05rem/1 var(--f-mono);color:var(--ink);letter-spacing:0}
.note-cover{border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;max-width:420px;background:var(--panel)}
.note-cover img{width:100%;height:100%;object-fit:cover}
.note-title{font:400 clamp(1.3rem,2.4vw,1.65rem)/1.15 var(--f-display);margin:0 0 6px;color:var(--ink)}
.note-dek{color:var(--ink-2);margin:0;font-size:16px}

/* how we choose */
.how{display:grid;grid-template-columns:1fr;gap:14px}
.how-item{background:var(--ground);border:1px solid var(--line-2);border-radius:var(--radius);border-top:6px solid var(--blk,var(--ink));padding:18px 18px 16px}
.how-item h3{font:400 1.2rem/1.2 var(--f-display);margin:0 0 8px}
.how-item p{font-size:14.5px;line-height:1.55;margin:0;color:var(--ink-2)}

/* newsletter: a night-coloured panel */
.nl-section{padding-top:0}
.brief{background:#1F1A3D;color:#EEEDF8;border-radius:22px;padding:30px 22px;display:grid;grid-template-columns:1fr;gap:22px;align-items:center;position:relative;overflow:hidden}
.brief::after{content:"";position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;background:conic-gradient(#FF7A59 0 90deg,#7FB3D5 90deg 180deg,#4A4A6A 180deg 240deg,transparent 240deg);-webkit-mask:radial-gradient(circle,transparent 55%,#000 56%);mask:radial-gradient(circle,transparent 55%,#000 56%);opacity:.9}
.brief .eyebrow{color:#B9B6D6}
.brief h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:6px 0 8px;color:#FFFFFF}
.brief p{color:#D7D5EA;margin:0}
.nl-form{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.nl-form input[type=email]{flex:1;min-width:0;background:#FFFFFF;border:1.5px solid #FFFFFF;border-radius:999px;padding:14px 18px;font:500 16px var(--f-body);color:#1F1A3D}
.nl-form button{background:#FF7A59;color:#1F1A3D;border:1.5px solid #FF7A59;border-radius:999px;padding:14px 22px;font:700 15px var(--f-body);cursor:pointer}
.nl-form button:hover{background:#FF9678;border-color:#FF9678}
.nl-msg{min-height:1.4em;margin-top:10px;font-size:14.5px}
.brief .nl-msg{color:#FFFFFF}
.nl-note{font-size:13px;line-height:1.5;color:#B9B6D6!important;margin:12px 0 0!important;position:relative;z-index:1}
.nl-note a{color:#FFFFFF}

/* ---------- footer ---------- */
.site-footer{background:var(--panel);color:var(--ink-2);border-top:1px solid var(--line-2);margin-top:20px;position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:4px;background:linear-gradient(90deg,var(--seg-night) 0 20.833%,var(--seg-morning) 20.833% 45.833%,var(--seg-midday) 45.833% 70.833%,var(--seg-evening) 70.833% 87.5%,var(--seg-night) 87.5%)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:28px;padding:40px 16px 28px;max-width:1180px;margin:0 auto}
.footer-brand .brand{margin-bottom:12px}
.footer-brand p{font-size:15px;max-width:30em;margin:0}
.site-footer h5{font:600 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.site-footer a{color:var(--ink);text-decoration:none;display:block;padding:4px 0;font-size:15px}
.site-footer a:hover{color:var(--sky-ink);text-decoration:underline}
.f-hrs{font:500 11.5px var(--f-mono);color:var(--muted);margin-left:6px}
.footer-contact{font-size:14.5px;line-height:1.6;font-style:normal}
.footer-contact strong{color:var(--ink);display:block;margin-bottom:4px}
.footer-contact a{display:inline;padding:0}
.linklike{display:block;background:none;border:0;padding:4px 0;margin:0;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;text-align:left}
.linklike:hover{color:var(--sky-ink);text-decoration:underline}
.footer-bottom{border-top:1px solid var(--line-2);padding:18px 16px 26px;max-width:1180px;margin:0 auto;font-size:13.5px;line-height:1.55;color:var(--muted)}
.footer-bottom a{display:inline;color:var(--ink-2)}

/* ---------- breadcrumbs ---------- */
.crumbs{font:500 12px/1.3 var(--f-mono);letter-spacing:.03em;color:var(--muted);padding:20px 0 0;text-transform:uppercase;display:flex;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 8px;color:var(--line-2)}

/* ---------- tool entry (product) page ---------- */
.entry-head{padding:22px 0 26px;border-bottom:1px solid var(--line-2);margin-bottom:30px}
.entry-head .tag{margin-bottom:12px}
.entry-title{font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;letter-spacing:-.02em;margin:6px 0 12px}
.entry-deck{font-size:1.12rem;color:var(--ink-2);margin:0 0 16px;max-width:42em}
.entry-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.entry-meta time{font:500 12px var(--f-mono);color:var(--muted);letter-spacing:.03em;margin-left:4px}
.entry-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;padding-bottom:64px}
.entry-aside{display:grid;gap:18px;order:-1;min-width:0}
.factsheet{background:var(--ground);border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}
.fs-photo{background:var(--photo-bg);border-bottom:1px solid var(--line);padding:18px;display:flex;align-items:center;justify-content:center;min-height:200px}
.fs-photo img{max-height:280px;width:auto;margin:0 auto}
.fs-photo.fs-nophoto{background:repeating-linear-gradient(45deg,var(--ground),var(--ground) 10px,var(--panel) 10px,var(--panel) 20px);text-align:center;font:600 12px/1.4 var(--f-mono);color:var(--muted);padding:34px 20px;text-transform:uppercase;letter-spacing:.06em}
.fs-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.fs-title{font:600 11px/1 var(--f-mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0!important}
.fs-window{padding:12px 16px 14px;border-bottom:1px solid var(--line)}
.fs-window .fs-wlab{display:flex;justify-content:space-between;gap:8px;font:600 11px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fs-window .fs-wlab b{color:var(--ink);letter-spacing:.02em}
.fs-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.4}
.fs-table th{text-align:left;font:500 11px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px 10px 16px;width:36%;vertical-align:top;border-bottom:1px solid var(--line)}
.fs-table td{padding:10px 16px 10px 0;color:var(--ink);border-bottom:1px solid var(--line);vertical-align:top;word-break:break-word}
.fs-table tr:last-child th,.fs-table tr:last-child td{border-bottom:0}
.cta-box{background:var(--coral-tint);border:1px solid var(--coral);border-radius:var(--radius);padding:16px}
.cta-box .btn{margin-bottom:12px}
.disclosure{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.disclosure a{color:var(--muted)}
.aside-block h2{font:600 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;padding-top:12px;border-top:1px solid var(--line-2)}

.entry-main h2{font-size:clamp(1.5rem,2.8vw,1.95rem);margin:2em 0 .6em}
.entry-main h2:first-child{margin-top:0}
.entry-main h3{font-family:var(--f-body);font-weight:700;font-size:1.08rem;margin:1.6em 0 .5em;letter-spacing:0}
.entry-main p,.entry-main li{max-width:66ch}
.tldr{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:18px 22px 6px;margin-bottom:28px;position:relative;overflow:hidden}
.tldr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--blk,var(--coral))}
.tldr h2{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px!important}
.tldr .checklist li{max-width:none;margin-bottom:.6em}

/* where it sits in the day: four cells, the ones it is used in are "on" */
.day-strip{display:grid;grid-template-columns:1fr;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;margin:0 0 28px;background:var(--ground)}
.day-cell{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line);position:relative}
.day-cell:last-child{border-bottom:0}
.day-cell .tag{flex:none;margin-top:1px}
.day-cell p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2);max-width:none}
.day-cell.is-on{background:var(--blk-tint)}
.day-cell.is-on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blk)}
.day-cell.is-off .tag{--blk:var(--line-2);--blk-ink:var(--muted);--blk-tint:var(--panel)}
.day-cell.is-off p{color:var(--muted)}

/* numbered steps — dial-dot numbers */
.steps{list-style:none;margin:0 0 1.4em;padding:0;counter-reset:step}
.steps>li{position:relative;padding:4px 0 14px 56px;margin:0 0 6px;counter-increment:step;min-height:48px;max-width:none}
.steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--ground);font:700 15px/1 var(--f-mono);border-radius:50%}
.steps>li::after{content:"";position:absolute;left:19px;top:44px;bottom:-2px;border-left:2px dotted var(--line-2)}
.steps>li:last-child::after{display:none}
.steps>li h3{font-family:var(--f-body);font-weight:700;margin:7px 0 4px;font-size:1.06rem;letter-spacing:0}
.steps>li p{margin:0 0 .5em;max-width:60ch}
.steps>li .step-time{display:inline-block;font:600 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--coral-ink);background:var(--coral-tint);padding:5px 8px 4px;border-radius:999px;margin-left:8px;vertical-align:middle}
.steps-accent>li::before{background:var(--coral);color:#1F1A3D}

.callout{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--ground);padding:16px 20px 6px 24px;margin:1.6em 0;position:relative;overflow:hidden}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--cl,var(--ink))}
.callout-label{display:block;font:700 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;color:var(--cl-ink,var(--ink))}
.callout-note{--cl:var(--sky);--cl-ink:var(--sky-ink);background:var(--sky-tint)}
.callout-watch{--cl:var(--coral);--cl-ink:var(--coral-ink);background:var(--coral-tint)}
.callout-key{--cl:var(--slate);--cl-ink:var(--slate-ink);background:var(--slate-tint)}

.tbl-wrap{overflow-x:auto;margin:1.2em 0 1.6em;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--ground);-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.data-table th{font:600 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2);background:var(--panel)}
.data-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.data-table tr:last-child td{border-bottom:0}
.data-table td:first-child{font-weight:700}
.data-table .num{font-family:var(--f-mono);font-size:14px;white-space:nowrap}

.sources{font-size:14.5px;line-height:1.5;color:var(--ink-2);padding-left:1.4em}
.sources li{max-width:none;margin-bottom:.55em;word-break:break-word}
.related{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.related li{margin:0;max-width:none}
.related a{display:flex;align-items:center;gap:12px;background:var(--ground);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:700}
.related a:hover{border-color:var(--ink);background:var(--panel)}
.related small{display:block;font-weight:400;color:var(--muted);font-size:13.5px}
.related .tag{flex:none;padding:5px 8px 4px;font-size:10.5px}

/* ---------- habit note (article) ---------- */
.article-head{padding:22px 0 24px}
.article-title{font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:14px 0 16px;max-width:19em}
.article-dek{font-size:1.14rem;color:var(--ink-2);max-width:38em;margin:0 0 18px}
.article-byline{font:500 12px/1.4 var(--f-mono);letter-spacing:.03em;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;text-transform:uppercase}
.article-cover{border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 36px}
.article-cover img{width:100%}
.article-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;padding-bottom:64px}
.toc{font-size:14.5px;border-top:1px solid var(--line-2);padding-top:14px;order:-1;margin-bottom:24px;min-width:0}
.toc h2{font:600 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.toc>ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.toc>ol>li{counter-increment:toc;margin:0 0 9px;display:grid;grid-template-columns:26px 1fr;gap:6px;line-height:1.35}
.toc>ol>li::before{content:counter(toc,decimal-leading-zero);font:500 11px/1.7 var(--f-mono);color:var(--muted)}
.toc>ol>li>a{color:var(--ink);text-decoration:none}
.toc>ol>li>a:hover{text-decoration:underline}
.toc .related a{color:var(--ink)}
.toc-related{margin-top:28px}
.prose h2{font-size:clamp(1.55rem,2.9vw,2rem);margin:2em 0 .55em;scroll-margin-top:16px}
.prose h3{font-family:var(--f-body);font-weight:700;font-size:1.12rem;margin:1.7em 0 .5em;letter-spacing:0}
.prose p,.prose li{max-width:66ch}
.prose>p:first-of-type{font-size:1.12rem;color:var(--ink-2)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:6px solid var(--coral);font:400 1.3rem/1.35 var(--f-display);max-width:30em}
.prose .checklist li{max-width:60ch}

/* ---------- document (legal) pages ---------- */
.doc-head{padding:30px 0 24px;border-bottom:1px solid var(--line-2);margin-bottom:32px}
.doc-head h1{font-size:clamp(2rem,4.6vw,3rem);margin:10px 0 10px}
.doc-head p{color:var(--ink-2);margin:0;max-width:40em}
.doc-meta{font:500 12px/1.4 var(--f-mono);color:var(--muted);letter-spacing:.03em;margin-top:14px}
.doc{padding-bottom:72px}
.doc h2{font-size:1.55rem;margin:2em 0 .55em}
.doc h3{font-family:var(--f-body);font-weight:700;font-size:1.1rem;margin:1.5em 0 .4em;letter-spacing:0}
.doc p,.doc li{max-width:68ch}
.doc .how{margin-bottom:22px}
.doc-card{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius);padding:20px 22px;margin:1.4em 0}
.doc-card dl{margin:0;display:grid;grid-template-columns:1fr;gap:6px 18px}
.doc-card dt{font:500 11.5px/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.doc-card dd{margin:0 0 8px;word-break:break-word}

/* ---------- 404 ---------- */
.nf{padding:64px 0 100px}
.nf .big{font:700 clamp(4.5rem,16vw,9rem)/.9 var(--f-mono);letter-spacing:-.04em;margin:0 0 18px;color:var(--coral-ink)}
.nf p{max-width:44em}

/* ---------- cookie banner ---------- */
#cookieBanner{position:fixed;left:10px;right:10px;bottom:10px;background:var(--ground);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius);padding:16px 18px;z-index:60;box-shadow:var(--shadow);display:none;font-size:14px;line-height:1.5}
#cookieBanner.show{display:block}
#cookieBanner p{margin:0 0 12px;color:var(--ink-2)}
#cookieBanner a{color:var(--ink)}
.cookie-banner-actions{display:flex;gap:8px}
#cookieBanner button{flex:1;font:700 14px var(--f-body);padding:11px 12px;border-radius:999px;cursor:pointer}
#cbAccept{background:var(--ink);color:var(--ground);border:1.5px solid var(--ink)}
#cbAccept:hover{background:var(--ink-2);border-color:var(--ink-2)}
#cbReject{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
#cbReject:hover{background:var(--panel)}

/* ---------- responsive (mobile-first) ---------- */
@media (min-width:600px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nl-form{flex-direction:row}
  .doc-card dl{grid-template-columns:150px minmax(0,1fr)}
  .doc-card dd{margin:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .day-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .day-cell{flex-direction:column;gap:8px;border-bottom:0;border-right:1px solid var(--line)}
  .day-cell:last-child{border-right:0}
  .day-cell.is-on::before{left:0;right:0;top:0;bottom:auto;width:auto;height:4px}
  .note{grid-template-columns:200px minmax(0,1fr);grid-template-areas:"time time" "cover body";column-gap:22px}
  .note-time{grid-area:time}
  .note-cover{grid-area:cover}
  .note-body{grid-area:body}
  .block-index-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .block-head{grid-template-columns:64px minmax(0,1fr)}
  .mini-dial{width:64px;height:64px}
  #cookieBanner{left:16px;right:auto;bottom:16px;max-width:400px}
}
@media (min-width:861px){
  .nav-toggle{display:none}
  .nav{display:flex;position:static;flex-direction:row;align-items:center;gap:0;border:0;padding:0;background:transparent;box-shadow:none}
  .nav a{padding:9px 11px;font-size:14.5px}
  .topbar-inner{padding:16px 24px}
  .wrap,.wrap-narrow{padding:0 24px}
  .hero{padding:52px 0 50px}
  .section{padding:64px 0}
  .block{padding:56px 0 52px}
  .block-head{grid-template-columns:64px minmax(0,.9fr) minmax(0,1.1fr);gap:0 20px}
  .block-lede{grid-column:3;grid-row:1;margin:0;align-self:end}
  .now-flag{top:-26px}
  .brief{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;padding:40px 44px}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding:48px 24px 32px}
  .footer-bottom{padding:20px 24px 28px}
  .how{grid-template-columns:repeat(4,minmax(0,1fr))}
  .section-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:24px}
  .note{grid-template-columns:110px 240px minmax(0,1fr);grid-template-areas:"time cover body";align-items:center}
  .note-time{flex-direction:column;gap:6px}
  .note::before{top:50%;margin-top:-8px}
  .bi{grid-template-columns:auto 1fr;grid-template-areas:"hrs hrs" "name count"}
  .bi-count{justify-self:end}
}
@media (min-width:1001px){
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .block-midday .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile-photo{height:210px}
  .entry-grid{grid-template-columns:minmax(0,1fr) 350px;gap:52px}
  .entry-aside{position:sticky;top:20px;order:0}
  .article-grid{grid-template-columns:minmax(0,1fr) 250px;gap:64px}
  .toc{position:sticky;top:20px;order:0;margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.tile,.dial-dot,.dial-seg{transition:none}
  .btn:hover,.tile:hover{transform:none}
  .dial-dot-link:hover .dial-dot{transform:none}
}