/* Tideline — the app's system, on the web.
   Marine ink, Newsreader for figures and headings, Schibsted for the interface. */
:root{
  --ground:#F3F7F6; --surface:#FFFFFF; --surface-2:#EDF3F2; --surface-3:#E4EDEB;
  --line:#DEE7E6; --line-2:#C9D8D6;
  --ink:#0C2A31; --ink-2:#4E6B72; --ink-3:#8AA0A5;
  --brand:#0B5560; --brand-2:#0E7480; --brand-soft:#DAEAEB;
  --plum:#8A4F7D; --plum-soft:#F0E5EE;
  --moss:#41724D; --moss-soft:#E1EDE3;
  --ochre:#9F6A15; --ochre-soft:#F6EBD7;
  --brick:#A2412F; --brick-soft:#F7E5E1;
  --deep:#0C2A31; --deep-2:#12383F; --on-deep:#E7EFEE; --on-deep-2:#9DB6BA;
  --on-accent:#FFFFFF;
  /* What each accent means, lifted from the app so the site cannot drift:
       band shading is always brand      — Design/Charts.swift:15,20,99
       a symptom series is plum          — Views/SymptomViews.swift:109, FlareStrip
       adherence is brand                — WeekStrip, Pips in Design/Charts.swift
       due or never answered is ochre    — Views/StackViews.swift:681
       better/worse than baseline        — Views/TodayView.swift:408,460 */
  --c-band:var(--brand);
  --c-symptom:var(--plum);
  --c-adherence:var(--brand);
  --c-open:var(--ochre);
  --c-better:var(--moss);
  --c-worse:var(--brick);
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1080px;
  /* One column for flowing text, one for display headings. Fixed lengths, not
     ch: ch scales with font-size, so every size would land on its own edge. */
  --measure:40rem;
  --measure-display:32rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0B1618; --surface:#122124; --surface-2:#182C30; --surface-3:#1E363A;
    --line:#22383C; --line-2:#2E484D;
    --ink:#E7EFEE; --ink-2:#A2B7BA; --ink-3:#6C858A;
    --brand:#57BAC0; --brand-2:#7BD0D4; --brand-soft:#123A3F;
    --plum:#C592BB; --plum-soft:#33212F;
    --moss:#82B48D; --moss-soft:#1A2E20;
    --ochre:#D9A54F; --ochre-soft:#33280F;
    --brick:#DB7A68; --brick-soft:#331A15;
    --deep:#10262B; --deep-2:#20454C; --on-deep:#E7EFEE; --on-deep-2:#A6BFC2;
    --on-accent:#08171A;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-2)}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:4px}

/* ── head ─────────────────────────────────────────────── */
header.site{padding:28px 0;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:14px;justify-content:space-between}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.mark img{width:34px;height:34px;border-radius:9px;display:block}
.mark span{font-family:var(--serif);font-size:24px;letter-spacing:-.015em}
nav.site a{font-size:14.5px;margin-left:20px;color:var(--ink-2);text-decoration:none}
nav.site a:hover{color:var(--ink)}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding-block:clamp(56px,9vw,104px) 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 20px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6.4vw,68px);line-height:1.04;
  letter-spacing:-.025em;margin:0 0 22px;max-width:var(--measure-display);text-wrap:balance}
.lede{font-size:clamp(18px,2.1vw,21px);color:var(--ink-2);max-width:var(--measure);margin:0 0 28px}
.status{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ochre);
  box-shadow:0 0 0 4px var(--ochre-soft);display:block}

/* ── sections ─────────────────────────────────────────── */
section{padding:clamp(44px,7vw,84px) 0;border-top:1px solid var(--line)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em;
  line-height:1.12;margin:0 0 18px;max-width:var(--measure-display);text-wrap:balance}
h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
p{margin:0 0 18px;max-width:var(--measure)}
.muted{color:var(--ink-2)}
.rule-list{list-style:none;padding:0;margin:32px 0 0;max-width:var(--measure)}
.rule-list li{border-top:1px solid var(--line);padding:18px 0}
.rule-list li:last-child{border-bottom:1px solid var(--line)}
.rule-list b{display:block;font-size:16px;margin-bottom:4px}
.rule-list span{color:var(--ink-2);font-size:15.5px}

.note{background:var(--ochre-soft);border:1px solid color-mix(in srgb,var(--ochre) 34%,transparent);
  border-radius:18px;padding:20px 22px;margin-top:28px}
.note p{margin:0;font-size:15px;color:var(--ink-2)}
.note b{color:var(--ink)}

/* ── section furniture ───────────────────────────────────────────────
   Each section states what it is before it says anything, and each sits on
   its own ground so the page has a rhythm rather than one long column. */
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:6px}
.sec-head .ix{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--brand);
  flex:0 0 auto}
.sec-head .rule{flex:1 1 auto;height:1px;background:var(--line-2)}
.sec-head .kind{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}

section.panel{background:var(--surface);border-top:1px solid var(--line)}
section.tint{background:var(--surface-2);border-top:1px solid var(--line)}
section.deep{background:var(--deep);border-top:0;color:var(--on-deep)}
section.deep h2{color:var(--on-deep)}
section.deep p,section.deep .muted{color:var(--on-deep-2)}
section.deep .sec-head .ix{color:var(--on-deep)}
section.deep .sec-head .kind{color:var(--on-deep-2)}
section.deep .sec-head .rule{background:var(--deep-2)}
section.deep .rule-list li{border-color:var(--deep-2)}
section.deep .rule-list li:last-child{border-bottom-color:var(--deep-2)}
section.deep .rule-list b{color:var(--on-deep)}
section.deep .rule-list span{color:var(--on-deep-2)}
section.deep .note{background:var(--deep-2);border-color:var(--deep-2)}
section.deep .note p{color:var(--on-deep-2)}
section.deep .note b{color:var(--on-deep)}

/* the hero band runs the full width of the viewport, not the text column */
.bleed{width:100%;margin-block:clamp(28px,4vw,44px) 0}

/* Markers sit in HTML, not in the SVG. The band paths are drawn with
   preserveAspectRatio="none" so they can stretch to any width, and anything
   round inside that viewport stretches with them into an ellipse. Positioning
   by percentage tracks the curve exactly — a point at 946 of a 1280 viewBox is
   at 73.906% however wide the page gets — and the dot stays a circle. */
.plot{position:relative}
.pt{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  border-radius:50%;box-sizing:border-box;pointer-events:none}
.pt-lg{width:15px;height:15px;background:var(--ground);border:3px solid var(--pc,var(--c-symptom))}
.pt-sm{width:8px;height:8px;background:var(--surface);border:2px solid var(--pc,var(--c-symptom))}
.pt-dot{width:7px;height:7px;background:var(--pc,var(--c-open))}

/* ── horizon: the band as the hero, drawn once at full width ──────────
   The art is a flow element rather than an absolutely-placed layer, so it
   can never ride up over the standfirst at a width I did not test. */
.horizon-art{margin:clamp(28px,4vw,44px) 0 0;
  height:clamp(150px,20vw,260px);width:100%;display:block}
.horizon-art svg{width:100%;height:100%;display:block}
.figrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3vw,40px);border-top:1px solid var(--line);padding-top:24px;
  margin-top:clamp(26px,3.4vw,40px)}
.fig .n{font-family:var(--serif);font-size:clamp(30px,3.6vw,40px);line-height:1;margin:0 0 6px;
  color:var(--c-band);font-variant-numeric:tabular-nums;max-width:none}
.fig .n.open{color:var(--c-open)}
.fig h3{font-size:14.5px;margin:0 0 4px}
.fig p{margin:0;font-size:13.5px;color:var(--ink-2);max-width:26ch}

/* ── small multiples: one band per symptom, each with its own n ───────
   A symptom series is plum; the band behind it is brand, as in the app. */
.multiples{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;margin-top:32px}
.sm{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px 12px}
.sm .h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sm h3{font-size:16px;margin:0}
.sm .n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.sm .rng{font-family:var(--mono);font-size:11.5px;color:var(--c-symptom);margin:2px 0 8px;
  letter-spacing:.03em;max-width:none}
.sm.thin .rng{color:var(--c-open)}
.sm .plot{margin:0}
.sm svg{width:100%;height:62px;display:block}
.sm p{margin:8px 0 0;font-size:13px;color:var(--ink-2);max-width:none}

/* ── adherence: thirty days, four slots each ──────────────────────────
   Brand for a closed slot, never moss — the app's WeekStrip does the same,
   and green here would read as praise for taking your supplements. */
.adh-scroll{overflow-x:auto;overflow-y:hidden;max-width:100%;
  margin-top:32px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.adh{display:grid;grid-template-columns:repeat(30,1fr);gap:5px;align-items:end;
  height:150px;min-width:560px}
.adh .col{display:flex;flex-direction:column-reverse;gap:3px;height:100%}
.adh .col b{display:block;flex:1 1 0;border-radius:3px;background:var(--c-adherence)}
.adh .col b.no{background:var(--surface-3)}
.adh .col.open{align-self:end;height:32px;border:1px dashed var(--line-2);border-radius:5px;
  background:repeating-linear-gradient(135deg,var(--surface-3) 0 4px,transparent 4px 9px)}
.adh .col.open b{display:none}
.adh-dates{display:grid;grid-template-columns:repeat(30,1fr);gap:5px;margin-top:9px;min-width:560px}
.adh-dates em{font-family:var(--mono);font-style:normal;font-size:9px;color:var(--ink-3);text-align:center}
.key{display:flex;flex-wrap:wrap;gap:22px;margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.key span{display:inline-flex;align-items:center;gap:8px}
.key i{width:13px;height:13px;border-radius:3px;display:inline-block;flex:0 0 auto}

/* ── prose pages ──────────────────────────────────────── */
/* Prose keeps the page gutter and constrains the measure inside it, so the
   text starts on the same left edge as the logo rather than in its own column. */
.prose{padding-block:clamp(40px,6vw,72px)}
.prose > *{max-width:var(--measure)}
.prose h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,48px);
  letter-spacing:-.02em;line-height:1.08;margin:14px 0 20px;max-width:var(--measure-display)}
.prose h2{font-size:clamp(24px,3vw,32px);margin-top:44px;max-width:var(--measure-display)}
.prose h2:first-of-type{margin-top:24px}
.prose ul{padding-left:20px;color:var(--ink-2)}
.prose li{margin:8px 0}
.prose dt{font-weight:600;margin-top:18px}
.prose dd{margin:4px 0 0;color:var(--ink-2)}
.updated{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}

/* ── callback ─────────────────────────────────────────── */
.centre{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}
.centre .inner{max-width:44ch}
.centre h1{font-size:clamp(30px,4.4vw,44px);margin:0 auto 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;
  border-radius:26px;background:var(--brand);color:var(--on-accent);font-weight:600;font-size:16px;
  text-decoration:none;margin-top:10px}
.btn:hover{background:var(--brand-2);color:var(--on-accent)}

/* ── foot ─────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--line);padding:40px 0 60px;color:var(--ink-3);font-size:14.5px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start}
footer.site a{color:var(--ink-2);text-decoration:none;margin-right:18px}
footer.site a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}