/* ==========================================================================
   Reth!nk.tax - V2
   Palette:  "Ledger"     ink on bone, deep green, brass
   Type:     "Broadsheet" Newsreader + IBM Plex Mono, self-hosted
   No imagery except one portrait. Whitespace, rule and scale do the work.
   Deliberately NOT Legacy.Partners: different grid, scale and rhythm.
   ========================================================================== */

/* ---- Self-hosted faces -------------------------------------------------
   WOFF2 files go in /fonts/. Until they are present the fallback stack
   carries the page: Newsreader falls back to a broadsheet serif, Plex Mono
   to the system monospace. Nothing breaks; it simply looks less like itself. */
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-400-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/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/plex-mono-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  /* ---- Ledger palette. Every ratio below is computed, not asserted. ---- */
 --ink:#14181A;            /* body text            15.97:1 on bone */
 --bone:#F4F2ED;           /* page ground */
 --band:#EAE7DF;           /* second ground, banding - 14.46:1 with ink */
 --paper:#FFFFFF;          /* cards, tool surfaces */
 --green:#1F4A3C;          /* primary brand         8.93:1 both ways on bone */
 --green-deep:#16362C;     /* hover, deep ground */
 --green-lt:#2E6B56;       /* rules, fills on dark */
 --brass:#A8802C;          /* DECORATIVE ONLY - 3.24:1, never text */
 --brass-text:#6E5115;     /* text-safe brass */
 --mute:#5C6660;           /* secondary text        5.33:1 on bone */
 --rule:#D8D3C7;           /* hairlines - decorative */
 --rule-strong:#918B7E;    /* form borders (SC 1.4.11) */
 --on-green:#F1EFE8;       /* text on green grounds */
 --on-green-soft:#A9BDB2;  /* secondary on green */

  /* semantic - calculators and verdicts */
 --yes:#1F4A3C;            /* likely qualifies */
 --maybe:#846611;          /* borderline - 4.79:1 on wash-maybe.
                               was #8A6A12 at 4.49:1, which failed AA by 0.01 */
 --no:#8C3A32;             /* unlikely */
 --wash-yes:#EDF3F0; --wash-maybe:#F7F1E2; --wash-no:#F7EDEC;

  /* ---- Measure and rhythm. Tighter and taller than LP. ---- */
 --gutter:clamp(20px,4vw,56px);
 --max:1180px;             /* LP is 1280 - narrower column, more air */
 --measure:62ch;           /* LP is 66ch - shorter line, faster read */
 --band-pad:clamp(64px,8vw,120px);
 --rule-w:1px;

  /* ---- Type. Serif-led. LP is sans-led. ---- */
 --serif:'Newsreader',Georgia,'Times New Roman',Times,serif;
 --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

 --step--1:clamp(.82rem,.79rem + .15vw,.9rem);
 --step-0: clamp(1.05rem,1rem + .25vw,1.18rem);
 --step-1: clamp(1.3rem,1.2rem + .5vw,1.6rem);
 --step-2: clamp(1.7rem,1.5rem + 1vw,2.3rem);
 --step-3: clamp(2.3rem,1.9rem + 2vw,3.6rem);
 --step-4: clamp(3rem,2.2rem + 4vw,5.6rem);   /* hero - much larger than LP */

 --nav-h:64px;
  /* Wordmark. Raised on instruction: the registered mark needs to carry
     more weight on the page than the type around it. */
  --brand-size:clamp(1.62rem,1.42rem + .78vw,2.05rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--serif);font-size:var(--step-0);line-height:1.62;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;          /* nothing may push the page sideways */
}
img{max-width:100%;height:auto}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--measure)}

/* ---- Headings. Tight leading, negative tracking - editorial. ---- */
h1,h2,h3,h4{font-weight:600;line-height:1.08;letter-spacing:-.018em;margin:0 0 .5em}
h1{font-size:var(--step-3)}
h2{font-size:var(--step-2);margin-top:2.2em}
h3{font-size:var(--step-1);margin-top:1.8em}
h4{font-size:var(--step-0)}
p{margin:0 0 1.15em;max-width:var(--measure)}
a{color:var(--green);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--green-deep)}
strong,b{font-weight:600}

/* ---- The eyebrow: mono, tracked, small. Appears above every section. ---- */
.eyebrow{
  font-family:var(--mono);font-size:var(--step--1);font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
  margin:0 0 1.1em;display:block;
}
.eyebrow--green{color:var(--green)}

/* ---- Hero. Enormous type, no image, deep top space. ---- */
.hero{padding:clamp(72px,12vh,150px) 0 clamp(56px,9vh,110px);border-bottom:var(--rule-w) solid var(--rule)}
.hero h1{font-size:var(--step-4);letter-spacing:-.03em;max-width:19ch}
.hero .lede{font-size:var(--step-1);color:var(--mute);max-width:50ch;margin-top:1.2em}
.hero .lede strong{color:var(--ink)}

/* ---- Bands ---- */
.band{padding:var(--band-pad) 0}
.band--band{background:var(--band)}
.band--green{background:var(--green);color:var(--on-green)}
.band--green h1,.band--green h2,.band--green h3{color:var(--on-green)}
.band--green a{color:var(--on-green);text-decoration-color:var(--green-lt)}
.band--green .eyebrow{color:var(--on-green-soft)}
.band--tight{padding-block:clamp(40px,5vw,68px)}
.band + .band{border-top:var(--rule-w) solid var(--rule)}

/* ---- The three-layer spine: the site's signature device ---- */
/* Every row shares ONE label column, so the questions all start at the same
   x. Each row used to be an independent grid with an `auto` first column, so
   the column sized to its own label - "The principle" 133px, "The promise"
   113px, "The gate" 82px - and the questions stepped raggedly across the
   page. subgrid makes the rows inherit the parent's tracks; the @supports
   block carries anything that does not have it. */
.spine{display:grid;grid-template-columns:max-content 1fr;gap:0;margin:2.5em 0;
  border-top:2px solid var(--ink)}
.spine__row{
  display:grid;grid-column:1/-1;grid-template-columns:subgrid;
  column-gap:clamp(16px,4vw,48px);
  padding:clamp(20px,3vw,34px) 0;border-bottom:var(--rule-w) solid var(--rule);
  align-items:baseline;
}
@supports not (grid-template-columns:subgrid){
  .spine{grid-template-columns:1fr}
  .spine__row{grid-template-columns:11rem 1fr;column-gap:clamp(16px,4vw,48px)}
}
.spine__label{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
.spine__q{font-size:var(--step-2);line-height:1.14;letter-spacing:-.02em;margin:0;max-width:24ch}
.spine__note{color:var(--mute);font-size:var(--step--1);margin:.5em 0 0;max-width:52ch}
/* The label is nowrap by design; below this width it starves the question. */
@media(max-width:560px){
  .spine{grid-template-columns:1fr}
  .spine__row{grid-template-columns:1fr;gap:.5rem}
}

/* ---- Numbered sequence - the ROP five steps ---- */
.steps{counter-reset:s;margin:2em 0;border-top:var(--rule-w) solid var(--rule);padding:0;list-style:none}
.steps li{
  counter-increment:s;list-style:none;display:grid;
  grid-template-columns:3.2rem 1fr auto;gap:clamp(14px,3vw,32px);
  padding:1.4em 0;border-bottom:var(--rule-w) solid var(--rule);align-items:start;
}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-size:var(--step--1);color:var(--brass-text);padding-top:.35em}
.steps h3{margin:0 0 .25em;font-size:var(--step-1)}
.steps p{margin:0 0 .6em;color:var(--mute);font-size:var(--step--1);max-width:56ch}
.steps p:last-child{margin-bottom:0}
/* Not nowrap: "Quoted per item, in writing" has to be allowed to wrap. */
.steps .fee{font-family:var(--mono);font-size:var(--step--1);color:var(--ink);
  padding-top:.35em;text-align:right;max-width:15ch;justify-self:end}
/* the question each step answers, and what the client ends up holding */
.steps .q-line{font-style:italic;color:var(--ink);font-size:var(--step-0);
  margin:0 0 .5em;max-width:56ch;padding:0;border:0}
.steps .sees{display:block;margin-top:.7em;padding-top:.7em;
  border-top:var(--rule-w) solid var(--rule);font-size:var(--step--1);
  color:var(--mute);max-width:56ch}
.steps .sees strong{display:block;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--brass-text);margin-bottom:.3em}
/* Stack on narrow screens. Without this the 3-column grid squeezed the text
   column to almost nothing on a phone. */
@media(max-width:620px){
  .steps li{grid-template-columns:2.4rem 1fr;gap:12px}
  .steps .fee{grid-column:2;padding-top:.6em;text-align:left;justify-self:start;max-width:none}
}

/* ---- Figures: mono, large, rule-separated. No cards, no boxes. ---- */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0;border-top:2px solid var(--ink);margin:2em 0}
.figures div{padding:1.5em 1.5em 1.5em 0;border-bottom:var(--rule-w) solid var(--rule)}
.figures b{display:block;font-family:var(--mono);font-size:var(--step-2);font-weight:600;
  letter-spacing:-.02em;line-height:1}
.figures span{display:block;color:var(--mute);font-size:var(--step--1);margin-top:.6em;max-width:26ch}
.figures small{display:block;color:var(--mute);font-family:var(--mono);font-size:.72rem;margin-top:.4em}

/* ---- Pull quote - used for Martin's voice ---- */
.said{border-left:3px solid var(--green);padding:.2em 0 .2em 1.5em;margin:2em 0;
  font-size:var(--step-1);line-height:1.34;max-width:44ch}
.said cite{display:block;font-style:normal;font-family:var(--mono);font-size:var(--step--1);
  color:var(--mute);margin-top:1em;letter-spacing:.04em}

/* ---- Defined term / statutory note - the "shows its working" device ---- */
.term{font-family:var(--mono);font-size:.88em;background:var(--band);padding:.1em .35em;border-radius:2px}
.note{font-family:var(--mono);font-size:var(--step--1);color:var(--mute);
  border-left:2px solid var(--rule-strong);padding-left:1em;margin:1.6em 0;max-width:54ch}

/* ---- Disclaimer - required on every tax-touching page ---- */
.disclaimer{border:var(--rule-w) solid var(--rule-strong);background:var(--paper);
  padding:1.1em 1.3em;margin:2em 0;font-size:var(--step--1);color:var(--mute);max-width:var(--measure)}
.disclaimer strong{color:var(--ink)}
.disclaimer--flag{border:2px solid var(--no);background:var(--wash-no)}

/* ---- Buttons - square, rule-based, no radius. LP's are softer. ---- */
.btn{display:inline-block;font-family:var(--mono);font-size:var(--step--1);letter-spacing:.06em;
  text-transform:uppercase;padding:.95em 1.6em;border:1px solid var(--ink);color:var(--ink);
  text-decoration:none;background:none;transition:background .15s,color .15s;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn--green{background:var(--green);border-color:var(--green);color:var(--on-green)}
.btn--green:hover{background:var(--green-deep);border-color:var(--green-deep);color:var(--on-green)}
.btn--onGreen{border-color:var(--on-green);color:var(--on-green)}
.btn--onGreen:hover{background:var(--on-green);color:var(--green)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* ---- Header - two-tier masthead --------------------------------------------
   Nine nav items at 106 characters cannot sit beside the wordmark on one line
   at ANY viewport width: measured, the row needs ~1185px against ~1070px of
   available column. The old rule hid that behind flex-wrap, which is what put
   the tabs on two ragged lines. Masthead over nav gives the nav the full
   column and reads as a broadsheet should.
   The wordmark needs nowrap: UAX #14 permits a line break after "!" (class EX),
   so "Reth!nk.tax" was free to split into "Reth!" / "nk.tax".            */
.site-header{border-bottom:var(--rule-w) solid var(--rule);background:var(--bone);
  position:sticky;top:0;z-index:50}
.site-header .inner{display:grid;grid-template-columns:1fr auto;row-gap:.5rem;
  padding-block:.7rem;align-items:center}
.site-header .brand{grid-column:1;grid-row:1}
.header-sign-in{ grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;

  /* sizing: let min-height set the touch target, center the label with flex */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25em;
  white-space: nowrap;

  /* colors */
  background: var(--green);
  color: var(--on-green);
  border-color: var(--green);}
.site-header nav{grid-column:1/-1;grid-row:2;min-width:0}
.nav-portal{display:none}
/* ---- The wordmark ------------------------------------------------------
   Reth!nk.tax(R) is a UK registered trade mark. Two things the registered
   form requires and the earlier type-setting did not do:
     · the exclamation mark drops below the line of the letters beside it
     · the (R) appears with the mark
   Set in type rather than as an image so it stays crisp at any size, remains
   selectable and searchable, and needs no extra request.                   */
.brand{font-size:var(--brand-size);font-weight:600;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink);white-space:nowrap;
  display:inline-block;line-height:1.05}
.brand b{color:var(--green)}
.brand .wm-x{display:inline-block;transform:translateY(.13em)}
.brand .wm-r{font-size:.34em;font-weight:400;letter-spacing:0;
  vertical-align:.95em;margin-left:.06em;color:var(--mute)}
.site-footer .brand{font-size:calc(var(--brand-size) * .82);margin-bottom:.5em}
.nav-list{display:flex;flex-wrap:nowrap;gap:clamp(10px,1.1vw,18px);list-style:none;
  margin:0;padding:0}
.nav-list li{white-space:nowrap}
.nav-list a{font-family:var(--serif);font-size:1rem;letter-spacing:0;
  text-decoration:none;color:var(--ink)}
.nav-list a:hover,.nav-list a[aria-current]{color:var(--green);text-decoration:underline}
.nav-toggle{display:none;font-family:var(--mono);font-size:var(--step--1);background:none;
  border:1px solid var(--ink);padding:.5em .9em;cursor:pointer;color:var(--ink)}
@media(max-width:1100px){
  .site-header .inner{grid-template-columns:1fr auto;row-gap:0;
    min-height:var(--nav-h);padding-block:0}
  .brand{grid-column:1;grid-row:1}
  .nav-toggle{display:block;grid-column:2;grid-row:1}
  .header-sign-in{display:none}
  .nav-list{grid-column:1/-1;grid-row:2;display:none;flex-direction:column;
    gap:.9em;padding:1.2em 0}
  .nav-list.open{display:flex}
  .nav-portal{display:list-item}
  .nav-portal a{display:flex;align-items:center;min-height:44px}
}

/* ---- Portrait - the only image on the site ---- */
.portrait{max-width:270px;width:100%;height:auto;display:block;
  filter:grayscale(100%) contrast(1.06);border:1px solid var(--rule)}
/* Home page: a headshot, not a full-length portrait. Square, and small
   enough that the words carry the section rather than the photograph. */
.portrait--head{max-width:178px;aspect-ratio:1;object-fit:cover}
@media(max-width:720px){.portrait--head{max-width:132px}}

/* ---- Footer ---- */
.site-footer{border-top:2px solid var(--ink);padding:var(--band-pad) 0 3rem;font-size:var(--step--1)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2.5rem 2rem}
.site-footer h2{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);margin:0 0 .9em;font-weight:400}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5em}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover{color:var(--green);text-decoration:underline}
.footer-note{color:var(--mute);max-width:60ch;margin-top:2.5rem}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;position:fixed;background:var(--ink);color:var(--bone);
  padding:.7em 1.1em;z-index:100}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

hr{border:0;border-top:var(--rule-w) solid var(--rule);margin:2.5em 0}
::selection{background:var(--green);color:var(--on-green)}

/* ---- Portrait + text pairing (About, home "who") ---- */
.who-grid{display:grid;grid-template-columns:minmax(132px,178px) 1fr;
  gap:clamp(24px,4vw,52px);align-items:start;margin-top:2em}
@media(max-width:720px){.who-grid{grid-template-columns:1fr}}
.who-grid .said{margin-top:1.6em}

/* ---- Form controls - tool pages ---- */
.q{margin:0 0 1.8em;padding-bottom:1.4em;border-bottom:var(--rule-w) solid var(--rule)}
.q label{display:block;margin-bottom:.6em;line-height:1.4}
.q label b{font-family:var(--mono);font-size:var(--step--1);color:var(--brass-text);margin-right:.5em}
.q select{
  width:100%;font-family:var(--serif);font-size:var(--step-0);color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-strong);border-radius:0;
  padding:.7em .8em;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 1.15em,calc(100% - 13px) 1.15em;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.q select:focus-visible{border-color:var(--green);outline:2px solid var(--green);outline-offset:1px}

/* ---- Tax on the Beach: archive index ---- */
.j-tools{display:grid;gap:1.2em;margin-bottom:2em}
#q{width:100%;max-width:34ch;font-family:var(--serif);font-size:var(--step-0);color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-strong);border-radius:0;padding:.7em .9em}
#q:focus-visible{border-color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:.5em}
.chip{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.04em;background:none;
  border:1px solid var(--rule-strong);color:var(--mute);padding:.45em .9em;cursor:pointer}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip--on{background:var(--green);border-color:var(--green);color:var(--on-green)}
.jlist{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.jlist .j{border-bottom:var(--rule-w) solid var(--rule);padding:1.05em 0;
  display:grid;grid-template-columns:1fr auto;gap:.4em 2rem;align-items:baseline}
.jlist a{text-decoration:none;display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;align-items:baseline}
.j-num{font-family:var(--mono);font-size:var(--step--1);color:var(--brass-text)}
.j-t{font-size:var(--step-1);line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.jlist a:hover .j-t{color:var(--green);text-decoration:underline}
.j-m{font-family:var(--mono);font-size:var(--step--1);color:var(--mute);white-space:nowrap;text-align:right}
@media(max-width:620px){.jlist .j{grid-template-columns:1fr}.j-m{text-align:left}}
/* journal body */
.tob p{font-size:var(--step-0);line-height:1.7}

/* ==========================================================================
   Compatibility aliases
   The calculators carry inherited token names from the Legacy.Partners
   lineage. Rather than rewrite their internals - and risk the maths - the
   old names are mapped onto Ledger here. One place to change, nothing to
   break. Delete these only when the tools are rebuilt from scratch.
   ========================================================================== */
:root{
 --cream:var(--bone);
 --cream-2:var(--band);
 --rule-light:var(--rule);
 --ink-soft:var(--mute);
 --teal:var(--green-deep);
 --teal-2:var(--green);
 --gold:var(--brass);
 --gold-text:var(--brass-text);
 --gold-deep:var(--brass-text);
 --on-teal:var(--on-green);
 --on-teal-soft:var(--on-green-soft);
 --rule-input:var(--rule-strong);
 --state-calm:var(--yes);
 --state-tension:var(--no);
 --state-accent:var(--brass-text);
 --wash-calm:var(--wash-yes);
 --wash-tension:var(--wash-no);
 --wash-gold:var(--wash-maybe);
 --wash-band:var(--band);
 --ff-body:var(--serif);
 --ff-display:var(--serif);
 --sans:var(--serif);
 --measure:62ch;
  /* the calculators' own private tokens */
 --pt-paper:var(--bone); --pt-card:var(--paper); --pt-ink:var(--ink);
 --pt-ink-2:var(--green); --pt-body:var(--ink); --pt-muted:var(--mute);
 --pt-line:var(--rule); --pt-accent:var(--brass-text);
 --pt-calm:var(--yes); --pt-tension:var(--no);
}

/* ==========================================================================
   Utility and journal classes - added 2026-08-04 (RT-55).
   These replace 647 inline style="" attributes. Inline style attributes need
   style-src 'unsafe-inline' in the Content-Security-Policy; removing them
   lets the policy tighten to 'self'.
   ========================================================================== */
.u-mt1  {margin-top:1.6em}
.u-mt2  {margin-top:2em}
.u-center{text-align:center}
.u-ink  {color:var(--ink)}
.u-sm   {font-size:var(--step--1)}
.footer-blurb{color:var(--mute);max-width:34ch}
.disclaimer--wide{max-width:820px;margin-top:40px}

/* Journal edition pages */
.j-title{font-size:var(--step-3);max-width:24ch}
.j-meta{font-family:var(--mono);font-size:var(--step--1);color:var(--mute);margin-top:1.2em}
.j-nav{margin-top:3em;font-family:var(--mono);font-size:var(--step--1);
  display:flex;gap:2rem;flex-wrap:wrap}
.j-nav .j-next{margin-left:auto}
.j-home{color:inherit}
.u-mt-sm{margin-top:1em}
.u-mt-md{margin-top:14px}
.u-block-gap{margin:18px 0}
.u-plain-link{text-decoration:none;display:inline-block}
.u-inline-link{color:var(--ink);text-decoration:underline}
.addr{color:var(--mute);font-size:var(--step--1);margin-top:2em}
.form-col{max-width:62ch;margin-top:2.5em}
.count{font-family:var(--mono);font-size:var(--step--1);color:var(--mute)}
.empty{color:var(--mute)}
.disclaimer--flag{border:2px solid var(--no);background:var(--wash-no);font-weight:600}
/* Business Relief checker verdicts - replaces JS-generated inline styles */
.verdict{margin-top:3em;border-top:2px solid var(--rule-strong);padding-inline:0}
.verdict h3{margin-top:0}
.verdict--yes  {background:var(--wash-yes);  border-top-color:var(--yes)}
.verdict--maybe{background:var(--wash-maybe);border-top-color:var(--maybe)}
.verdict--no   {background:var(--wash-no);   border-top-color:var(--no)}
.verdict--yes   h3,.verdict--yes   .verdict__label{color:var(--yes)}
.verdict--maybe h3,.verdict--maybe .verdict__label{color:var(--maybe)}
.verdict--no    h3,.verdict--no    .verdict__label{color:var(--no)}
.verdict__grid{grid-template-columns:1fr auto;padding:.9em 0}
.verdict__note{color:var(--mute);font-size:var(--step--1)}
.verdict__mono{font-family:var(--mono);font-size:var(--step--1)}
/* Journal prev/next markers. Guillemets rather than arrows: neither Newsreader
   nor IBM Plex Mono carries U+2190/U+2192, so the arrows had always been
   rendering in a fallback face on 71 pages (RT-65). */
.j-arrow{margin-right:.22em;color:var(--brass-text)}
.j-arrow--r{margin:0 0 0 .22em}
/* Focus ring must be visible on the green band too - green on green is 1.00:1.
   SC 1.4.11. */
.band--green :focus-visible,
.btn--onGreen:focus-visible{outline:2px solid var(--on-green);outline-offset:3px}

/* Home page: the headshot sits partway down the text rather than at the top,
   so the eye meets the words first and the photograph arrives as the section
   turns from "who I am" to "who else is involved". Floated, so the text wraps
   round it; the float is dropped on narrow screens where a 178px image beside
   a 62ch measure leaves nothing usable. */
.who-grid--inline{grid-template-columns:1fr}
.who-grid--inline .portrait--head{
  float:right;margin:.35em 0 1.1em 2rem;shape-margin:1rem;max-width:178px}
@media(max-width:640px){
  .who-grid--inline .portrait--head{float:none;margin:1.4em 0;max-width:150px}
}
.who-grid--inline .said{clear:right}

/* ---- ROPED V09.5: the journey is numbered 0-5, Discover is step 0 ---- */
.steps--zero{counter-reset:s -1}

/* ---- Contact form. Scoped so tool-page .q / .form-col stay untouched.
   Fields follow the same paper + rule treatment as .q select and #q.
   The column is the surrounding .wrap.narrow measure, not a second width. ---- */
.contact-form{
  margin-top:2em;width:100%;max-width:42rem;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:0;
  padding:clamp(22px,4vw,40px);
}
.contact-form .hs-form-frame,
.contact-form .hs-form-frame iframe{
  display:block;width:100%;max-width:100%;border:0;
}
.contact-form .form-col{width:100%;max-width:none;margin-top:0}
.contact-form > .note,
.contact-form > .disclaimer{margin:0 0 1.5em;max-width:none;width:100%}
.contact-form .q{
  margin:0 0 1.35em;padding:0;border:0;
}
.contact-form .q label{
  display:block;margin:0 0 .45em;line-height:1.35;
  font-family:var(--serif);font-size:var(--step-0);font-weight:400;color:var(--ink);
}
.contact-form .q input,
.contact-form .q textarea{
  display:block;width:100%;max-width:100%;margin:0;
  font-family:var(--serif);font-size:var(--step-0);font-weight:400;line-height:1.45;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-strong);border-radius:0;
  padding:.7em .9em;appearance:none;-webkit-appearance:none;
}
.contact-form .q input{min-height:3.05em}
.contact-form .q textarea{
  min-height:11em;resize:vertical;overflow:auto;
}
.contact-form .q input:hover,
.contact-form .q textarea:hover{border-color:var(--ink)}
.contact-form .q input:focus-visible,
.contact-form .q textarea:focus-visible{
  border-color:var(--green);outline:2px solid var(--green);outline-offset:1px;
}
.contact-form .q input:-webkit-autofill,
.contact-form .q textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 1000px var(--paper) inset;
  caret-color:var(--ink);
}
.contact-form .g-recaptcha{margin:0 0 1.35em;max-width:304px}
.contact-form .g-recaptcha iframe{max-width:100%}
.contact-form__actions{margin:1.55em 0 0}
.contact-form .btn{
  appearance:none;-webkit-appearance:none;border-radius:0;
  line-height:1.2;max-width:100%;
}