/* ═══════════════════════════════════════════════════════════════════════
   TIDELINE v2 — Cruz Co.
   Design layer for the existing static site. No JavaScript.

   The idea is unchanged: a horizon anchors every section. What's new is that
   the horizon keeps count — each rule fills a little further from the left as
   the page goes on, and closes at 100% in the colophon. The rule now spans a
   real two-column relationship: a 13rem rail of facts on the left, the reading
   column on the right, the price hanging on the right end of the rule.

   Set the fill per section in the markup:  style="--tide-fill:35%"
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fonts ─────────────────────────────────────────────────────────────── */
@font-face { font-family:'Instrument Serif'; src:url('/fonts/instrument-serif.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('/fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight:200 800; font-style:normal; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('/fonts/newsreader-var-italic.woff2') format('woff2-variations');
  font-weight:200 800; font-style:italic; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap; }

/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
  --paper:#f4f1eb; --paper-2:#e9e4d9; --night:#16282d;
  --rule:#d6d0c4; --rule-tint:#d0c9ba; --rule-night:#33474c; --rule-fine:#e2dcd0;
  --ink:#1c1a17; --ink-2:#4a443c; --ink-3:#6b655c;
  --teal:#2e4a52; --flare:#a8501f; --flare-line:#dcc0ac; --flare-night:#e0a37c;
  --night-hi:#f2efe6; --night-base:#e6e2d8; --night-body:#c3c8c3;
  --night-label:#8f9a99; --night-mute:#6e7d7d; --night-faint:#55645f;

  --display:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --read:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(1.25rem,3vw,2.5rem);
  --wrap:78rem; --rail:13rem; --measure:38rem;
  --band:clamp(2.5rem,5vw,4rem); --band-lg:clamp(3rem,6vw,5rem);
  --grade:.95;
}

/* ── reset & base ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--read); font-size:1.0625rem; line-height:1.7;
  font-weight:380; letter-spacing:-.002em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:var(--display);color:var(--ink)}
p{margin:0 0 1.35em} p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.75rem 1.25rem;z-index:100;font-family:var(--mono);font-size:.75rem}
.skip:focus{left:0}

/* ── shared type roles ─────────────────────────────────────────────────── */
.d1{font-family:var(--display);font-size:clamp(2.4rem,5.2vw,4.5rem);line-height:1.02;letter-spacing:-.02em;max-width:20ch;text-wrap:balance}
.d2{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.06;letter-spacing:-.016em;max-width:24ch;text-wrap:balance}
.d3{font-family:var(--display);font-size:clamp(2rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.018em}
.d4{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.dek{font-family:var(--read);font-style:italic;font-weight:300;font-size:1.25rem;line-height:1.4;color:var(--ink-2);margin:.85rem 0 1.4rem}
.lede{font-family:var(--read);font-weight:300;font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.5;letter-spacing:-.01em;color:var(--ink-2);max-width:34rem}
.micro{font-family:var(--mono);font-size:.625rem;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ── the tide ──────────────────────────────────────────────────────────── */
.tide{position:relative;height:1px;width:100%;background:var(--rule);margin-bottom:1.5rem}
.tide::before{content:'';position:absolute;left:0;top:-1px;height:3px;width:var(--tide-fill,10%);background:var(--ink)}
.tide::after{content:'';position:absolute;left:0;top:-6px;width:1px;height:13px;background:var(--teal)}
.tide--closed{--tide-fill:100%}
.tide--closed .tide__end,
.tide--closed::marker{}
.tide__end{position:absolute;right:0;top:-6px;width:1px;height:13px;background:var(--teal)}
.tide--flat::before{width:0}                    /* rules inside a section: no count */
.section--tint .tide{background:var(--rule-tint)}
.section--night .tide{background:var(--rule-night)}
.section--night .tide::before{background:var(--flare)}
.section--night .tide::after,
.section--night .tide__end{background:var(--flare)}

/* the price that hangs on the right end of a rule */
.tide__price{position:absolute;right:0;top:-.7em;font-family:var(--mono);font-weight:500;
  font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:var(--paper);padding-left:1rem}
.section--tint .tide__price{background:var(--paper-2)}

/* ── structure ─────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--band)}
.section--lg{padding-block:var(--band-lg)}
.section--tint{background:var(--paper-2)}
.section--night{background:var(--night);color:var(--night-base);padding-block:var(--band-lg)}
.cols{display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:flex-start}
.rail{flex:0 0 var(--rail);display:grid;gap:.5rem;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rail > :first-child{color:var(--ink)}
.section--night .rail{color:var(--night-label)}
.section--night .rail > :first-child{color:var(--night-hi)}
.col{flex:1 1 24rem;max-width:var(--measure)}
.col--evidence{flex:1 1 24rem;max-width:46rem}
.col--practice{flex:1 1 24rem;max-width:36rem}
.aside--portrait{flex:0 1 18rem;min-width:13rem}

/* ── masthead — static, no blur ────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead__inner{max-width:var(--wrap);margin-inline:auto;padding:1.5rem var(--gutter) 1.1rem;
  display:flex;align-items:flex-end;gap:2rem}
.wordmark{flex:none;display:grid;gap:.15rem}
.wordmark__name{font-family:var(--display);font-size:1.65rem;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.wordmark__place{font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.masthead__nav{margin-left:auto}
.masthead__nav ul{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;list-style:none}
.masthead__nav a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s ease,border-color .18s ease}
.masthead__nav a:hover,.masthead__nav a[aria-current='page']{color:var(--ink);border-bottom-color:var(--teal)}
.masthead__cta{flex:none;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);padding:.6rem 1.05rem;transition:background .18s ease}
.masthead__cta:hover{background:var(--flare)}
@media (max-width:62rem){
  .masthead__inner{flex-wrap:wrap;row-gap:.6rem}
  .masthead__cta{margin-left:auto}
  .masthead__nav{order:3;width:100%;margin-left:0;border-top:1px solid var(--rule-fine);padding-top:.6rem}
}

/* ── buttons & links ───────────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.95rem 1.5rem;border-radius:0;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--flare)}
.btn--ghost{border:1px solid #c8c1b3;color:var(--ink);padding-block:calc(.95rem - 1px)}
.btn--ghost:hover{border-color:var(--flare);color:var(--flare)}
.arrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--flare);border-bottom:1px solid var(--flare-line);padding-bottom:3px;transition:border-color .18s ease}
.arrow:hover{border-bottom-color:var(--flare)}

/* ── photographs ───────────────────────────────────────────────────────── */
.frame--band{margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw}
.frame--band img{width:100%;object-fit:cover;filter:saturate(var(--grade))}
.frame--hero img{height:clamp(18rem,42vw,30rem)}
.frame--tall img{height:clamp(13rem,26vw,20rem)}
.frame--wide img{height:clamp(11rem,20vw,16rem)}
.frame--close img{height:clamp(12rem,24vw,19rem)}
.frame figcaption{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;padding-top:.75rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.frame--band figcaption{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.frame figcaption .place{color:var(--ink)}
.frame--portrait img{width:100%;filter:saturate(var(--grade))}
.frame--portrait figcaption{display:block;margin-top:.75rem;line-height:1.6}

/* ── product entries ───────────────────────────────────────────────────── */
.entry{padding-block:var(--band)}
.entry__name{font-family:var(--display);font-size:clamp(2rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.018em;color:var(--ink)}
.entry__question{font-family:var(--read);font-style:italic;font-weight:300;font-size:1.25rem;line-height:1.4;
  color:var(--ink-2);margin:.85rem 0 1.4rem}
.entry__body{max-width:var(--measure)}
.entry__body p:last-of-type{margin-bottom:1.75rem}

/* ── statistics ────────────────────────────────────────────────────────── */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.5rem 2.5rem;
  margin-top:3rem;max-width:38rem}
.stat__n{display:block;font-family:var(--display);font-size:2.75rem;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.stat__label{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);max-width:14ch;line-height:1.5}

/* ── evidence / case studies ───────────────────────────────────────────── */
.case + .case{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--rule-night)}
.case__client{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--night-label)}
.move{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.5rem 2.5rem;margin-top:.4rem}
.move__end{display:flex;align-items:baseline;gap:.9rem}
.move__grade{font-family:var(--display);font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:1;letter-spacing:-.01em}
.move__grade--before{color:var(--night-mute)}         /* the failing grade stays quiet */
.move__grade--after{color:var(--night-hi)}
.move__unknown{font-size:.5em;color:var(--night-faint)} /* "not recorded" — stated, not hidden */
.move__arrow{font-family:var(--mono);font-size:1rem;color:var(--flare)}
.move__note{display:grid;gap:.4rem;padding-left:2rem;border-left:1px solid var(--rule-night)}
.move__label{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--night-label)}
.move__note-v{font-family:var(--display);font-size:1.75rem;line-height:1;color:var(--flare-night)}
@media (max-width:40rem){ .move__note{padding-left:0;border-left:0} }
.shots{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.75rem;max-width:46rem}
@media (max-width:52rem){ .shots{grid-template-columns:1fr;gap:1.75rem} }
.shot__label{margin:0 0 .5rem;font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--night-label)}
.shot img{width:100%;border:0;filter:none}            /* evidence is never graded or framed */
.case__body{max-width:34rem;color:var(--night-body);margin-top:1.5rem}
.case__note{font-family:var(--mono);font-size:.6875rem;line-height:1.7;letter-spacing:.02em;color:var(--night-label);margin-top:1.25rem}

/* ── plans ─────────────────────────────────────────────────────────────── */
.plan{padding-block:clamp(2rem,4vw,3rem)}
.plan__name{font-family:var(--display);font-size:clamp(2rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.018em}
.plan__body{max-width:var(--measure)}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq__item{padding-block:clamp(1.5rem,3vw,2.25rem)}
.faq__item:first-child{padding-top:0}
.faq__item .tide{--tide-fill:0}
.faq__q{font-family:var(--read);font-weight:400;font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.28;
  letter-spacing:-.014em;color:var(--ink);max-width:30ch;margin-bottom:.9rem}
.faq__a{max-width:var(--measure)}

/* ── lists ─────────────────────────────────────────────────────────────── */
.steps{list-style:none;counter-reset:step;max-width:var(--measure)}
.steps li{counter-increment:step;position:relative;padding-left:2.75rem;margin-bottom:1.15rem}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;color:var(--flare)}
.plain-list{list-style:none;max-width:var(--measure)}
.plain-list li{position:relative;padding-left:1.35rem;margin-bottom:.7rem}
.plain-list li::before{content:'';position:absolute;left:0;top:.8em;width:.5rem;height:1px;background:var(--flare)}

/* ── breadcrumbs & meta ────────────────────────────────────────────────── */
.crumbs ol{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none}
.crumbs li{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.crumbs li + li::before{content:'/';margin-right:.55rem;color:var(--rule)}
.post__meta{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ── article ───────────────────────────────────────────────────────────── */
.article{max-width:var(--measure)}
.article h2{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.015em;
  margin:clamp(2.75rem,6vh,4rem) 0 1.25rem;max-width:24ch}
.article h3{font-family:var(--read);font-weight:400;font-size:1.35rem;line-height:1.3;color:var(--ink);
  margin:clamp(2rem,4vh,2.75rem) 0 .85rem}
.article strong{font-weight:560;color:var(--ink)}
.article a{color:var(--flare);border-bottom:1px solid var(--flare-line)}
.article a:hover{border-bottom-color:var(--flare)}
.article .byline{font-family:var(--mono);font-size:.6875rem;line-height:1.8;color:var(--ink-3);
  border-top:1px solid var(--rule-fine);padding-top:clamp(2rem,4vh,3rem);margin-top:clamp(2rem,4vh,3rem)}

/* ── form ──────────────────────────────────────────────────────────────── */
.form{max-width:34rem;margin-top:clamp(2rem,4vw,3rem)}
.field{margin-bottom:1.6rem}
.field label{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);padding:.6rem 0;border-radius:0;transition:border-color .18s ease}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--flare)}
.field textarea{resize:vertical;min-height:7rem;line-height:1.6}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The long intake form. Sixteen questions need signposts the short contact
   form doesn't: section markers, help text under the label, and choice lists
   that stay legible without any script behind them. */
.form--long{max-width:38rem}
.form__step{font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);margin:2.75rem 0 1.5rem;padding-top:1rem;border-top:1px solid var(--rule)}
.form__step:first-of-type{margin-top:0}
.field__help{font-size:.875rem;line-height:1.6;color:var(--ink-3);margin:-.25rem 0 .75rem}
.field--set{border:0;padding:0;margin:0 0 1.6rem;min-width:0}
.field--set legend{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem;padding:0}
.field select{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);padding:.6rem 0;border-radius:0;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
    linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 10px) 1.2rem,calc(100% - 5px) 1.2rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.5rem;
  transition:border-color .18s ease}
.field select:focus{outline:none;border-bottom-color:var(--flare)}
.choices{display:flex;flex-direction:column;gap:.1rem}
.field .choice{display:flex;align-items:baseline;gap:.7rem;padding:.5rem 0;margin:0;cursor:pointer;
  font-family:var(--read);font-size:1rem;line-height:1.5;letter-spacing:normal;
  text-transform:none;color:var(--ink-2)}
.field .choice input{flex:none;width:.85rem;height:.85rem;margin:0;accent-color:var(--teal);cursor:pointer}
.field .choice:hover{color:var(--ink)}
.form__fine{font-family:var(--mono);font-size:.6875rem;line-height:1.8;color:var(--ink-3);
  margin-top:1.5rem;max-width:34rem}

/* ── tool embed ────────────────────────────────────────────────────────── */
:root{--tool-ground:#e8e6df}
.tool-band{background:var(--tool-ground);padding-block:clamp(2rem,4vw,3.25rem);
  margin-block:clamp(2.5rem,5vw,4rem);margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw;scroll-margin-top:2rem}
.tool{max-width:var(--wrap);margin-inline:auto}
.tool iframe{display:block;width:100%;border:0;background:var(--tool-ground)}
.tool__note{font-family:var(--mono);font-size:.6875rem;line-height:1.8;color:var(--ink-3);
  max-width:var(--wrap);margin-inline:auto;padding:1.25rem var(--gutter) 0}

/* ── colophon ──────────────────────────────────────────────────────────── */
.colophon{padding:var(--band-lg) 0 clamp(1.75rem,3vw,2.5rem);background:var(--paper)}
.colophon .tide{--tide-fill:100%;margin-bottom:clamp(2rem,4vw,3rem)}
.colophon__grid{display:flex;flex-wrap:wrap;gap:2.5rem 3rem;align-items:flex-start}
.colophon__brand{flex:1 1 20rem;max-width:30rem}
.colophon__brand .wordmark__name{font-size:clamp(2.25rem,4vw,3.25rem);line-height:1;letter-spacing:-.015em}
.colophon__line{margin:1rem 0 0;font-size:1.15rem;line-height:1.5;color:var(--ink-2);max-width:26ch}
.colophon address{font-style:normal;font-family:var(--mono);font-size:.75rem;line-height:2;
  letter-spacing:.04em;color:var(--ink-2);margin-top:1.5rem}
.colophon address a{border-bottom:1px solid var(--rule);padding-bottom:2px}
.colophon__nav{flex:0 0 9rem;display:grid;gap:.55rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.colophon__nav h2{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;color:var(--ink-3)}
.colophon__nav ul{list-style:none;display:grid;gap:.55rem}
.colophon__note{flex:1 1 15rem;max-width:24rem;display:grid;gap:1rem}
.colophon__note .said{font-family:var(--read);font-style:italic;font-size:1.0625rem;line-height:1.6;color:var(--ink-2);margin:0}
.colophon__note .fine{font-family:var(--mono);font-size:.6875rem;line-height:1.8;color:var(--ink-3);margin:0}
.colophon__fine{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.1rem;border-top:1px solid var(--rule-fine);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.colophon a:hover{color:var(--flare)}

/* ── print ─────────────────────────────────────────────────────────────── */
@media print{
  .masthead,.colophon__nav,.btn,.arrow{display:none}
  body{background:#fff;font-size:11pt}
  .frame--band{margin-inline:0;width:auto}
  .section--night{background:#fff;color:#000}
}

/* ═══════════════════════════════════════════════════════════════════════
   ADDITIONS — pieces the real site needs that the mock didn't cover.
   Same tokens, same rules. Nothing here overrides Tideline v2 above.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── button rows ───────────────────────────────────────────────────────── */
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

/* ── the rail's own micro type when it carries a link ──────────────────── */
.rail a{border-bottom:1px solid var(--rule);padding-bottom:2px}
.rail a:hover{color:var(--flare);border-bottom-color:var(--flare)}

/* ── breadcrumbs sit above the first rule on interior pages ────────────── */
.crumbs{padding-top:clamp(1.5rem,3vw,2.25rem)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current='page']{color:var(--ink-2)}

/* ── journal index ─────────────────────────────────────────────────────── */
.post-list{list-style:none}
.post-list li{padding-block:clamp(1.5rem,3vw,2.25rem)}
.post-list li:first-child{padding-top:0}
.post-list .tide{--tide-fill:0}
.post__title{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.08;
  letter-spacing:-.016em;margin:.6rem 0 .7rem;max-width:24ch}
.post__title a{color:var(--ink);border-bottom:1px solid transparent}
.post__title a:hover{border-bottom-color:var(--flare);color:var(--flare)}
.post__dek{max-width:var(--measure);color:var(--ink-2)}

/* ── case study: the live domain under each one ────────────────────────── */
.case__more{margin-top:1.5rem}
.section--night .arrow{color:var(--flare-night);border-bottom-color:var(--rule-night)}
.section--night .arrow:hover{border-bottom-color:var(--flare-night)}

/* ── plans: the price hangs on the rule, so the head is just the name ──── */
.plan__name{margin-bottom:1.25rem}

/* ── tool embed note keeps the mono voice ──────────────────────────────── */
.tool__note a{color:var(--flare);border-bottom:1px solid var(--flare-line);padding-bottom:2px}
.tool__note a:hover{border-bottom-color:var(--flare)}

/* ── prose links anywhere in a reading column ──────────────────────────── */
.col a:not(.btn):not(.arrow):not(.post__title a){color:var(--flare)}
.col p a{border-bottom:1px solid var(--flare-line);padding-bottom:1px}
.col p a:hover{border-bottom-color:var(--flare)}
.section--night .col p a{color:var(--flare-night)}

/* ── the closing rule carries a tick at both ends ──────────────────────── */
.colophon .tide__end{background:var(--teal)}

/* ── article: a rule above every h2, and its own rising fill ───────────── */
.article .tide{margin:clamp(2.75rem,6vw,4rem) 0 1.25rem}
.article h2{margin-top:0}
.article ol.steps{margin-top:1.5rem}

/* Headings sit hard against the next block otherwise — the reset zeroes their
   margins and `p` only carries margin-bottom. The entry name is excluded: its
   italic dek already supplies the gap. */
.col > :is(.d1, .d2, .d3, .d4, .plan__name) { margin-bottom: 1.5rem; }
.col > .lede { margin-bottom: 1.5rem; }

/* The reset gives every heading an explicit --ink, which beats the night
   section's inherited colour — the evidence title rendered as dark ink on the
   dark ground. Headings and the arrow link have to be re-lit here. */
.section--night :is(h1, h2, h3, h4) { color: var(--night-hi); }
.section--night .tide__price { background: var(--night); color: var(--night-hi); }

/* ── the masthead stays ─────────────────────────────────────────────────────
   Tideline v2 specified a static masthead, and gave a good reason: the old
   sticky bar used backdrop-filter, which smeared the top of every full-bleed
   photograph, and a blurred floating bar is an app gesture in a print system.

   The blur was the real problem, not the staying. Static breaks down badly on
   /audit/, where the report runs in an 1180px frame — scroll into the tool and
   every trace of the site disappears, so the most important minute a visitor
   spends here happens on what looks like somebody else's website.

   So: sticky, but solid paper and a hairline. No blur, nothing translucent,
   nothing smeared. The brand stays on screen while the tool is in use. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Anchor targets have to clear the bar they'd otherwise hide behind. */
[id] { scroll-margin-top: 6rem; }

/* A sticky bar has to earn its height. At full size it's 87px — 10% of a
   laptop screen, fine. On a phone the wrapped nav pushed it to 170px, a fifth
   of the viewport, permanently. So the small-screen bar drops the place line
   and tightens: the wordmark and the CTA are what need to stay reachable while
   the report is running. */
@media (max-width: 62rem) {
  .masthead__inner { padding: .75rem var(--gutter) .6rem; }
  .wordmark__place { display: none; }
  .wordmark__name { font-size: 1.35rem; }
  .masthead__nav { padding-top: .45rem; }
  .masthead__cta { padding: .5rem .85rem; }
}

/* ── glossary ──────────────────────────────────────────────────────────────
   Terms live on the site rather than inside the report: the report stays
   short, every report becomes a link back here, and a definition list is
   exactly the shape an answer engine quotes. */
.glossary { margin-top: clamp(2rem, 4vw, 3rem); }
.term { padding-block: clamp(1.5rem, 3vw, 2.25rem); scroll-margin-top: 7rem; }
.term:first-child { padding-top: 0; }
.term .tide { --tide-fill: 0; }
.term__name {
  font-family: var(--read);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.28;
  letter-spacing: -.014em;
  color: var(--ink);
}
.term__also {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: .45rem 0 0;
}
.term__def { max-width: var(--measure); margin-top: .9rem; }
/* a term linked to from a report should announce itself */
.term:target .term__name { color: var(--flare); }
.term:target .tide::after { background: var(--flare); }