/* ─────────────────────────────────────────────────────────────────────────
   thesecondopinion.uk — the home page
   Battledress (3a), SO-STD-004. Tokens carried from Brand/tso-tokens.css;
   the values below are that file's, not a re-sample.

   ⚠ NO INLINE STYLES, ANYWHERE. The served CSP is `style-src 'self'`, so a
   <style> block or a style="" attribute is silently BLOCKED — that is how the
   first privacy.html came to render unstyled on 2026-09-12. Everything lives
   in this file.

   CONTRAST — computed from the hex values (WCAG 2.x relative luminance) on
   2026-09-20, not estimated. The ratios that govern the rules below:
     page  on olive      7.44:1   body and headings, any size
     tan   on olive      4.54:1   metadata rows — AA at normal size
     ink   on page      12.34:1   body
     olive-deep on page  8.93:1   headings
     muted on page       4.61:1   captions — AA, but tight: 14px floor
     red   on page       6.07:1   fine for type at 14px+
     brass on page       3.60:1   ✗ RULES AND HAIRLINES ONLY — never type
     red   on olive      1.22:1   ✗ never type; the flash square is KEYLINED
                                    in page cream, which is what makes it legal
   ───────────────────────────────────────────────────────────────────────── */

/* ── Typefaces — self-hosted, KP-STD-005. No font network, ever.
      Subset and instanced from Brand/battledress/assets/fonts on 2026-09-20;
      OFL licences sit beside the files. ─────────────────────────────────── */
@font-face{font-family:'Instrument Serif';src:url('./fonts/instrument-serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@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-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('./fonts/newsreader-italic-400.woff2') format('woff2');font-weight:400;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-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --olive:#4A4E36; --tan:#C9BB9A; --red:#A32E2A;
  --page:#F2EEE2; --ink:#2A2B22; --brass:#8C7A55;
  --olive-deep:#3E4230; --olive-rule:#6E7254; --tan-rule:#D8D0BB; --muted:#6E6C50;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --track:0.14em;
  --measure:34rem;
}

/* The page is a fixed cream-and-olive field by design; say so, or a dark-mode
   device paints its own chrome dark against it. */
:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--body); font-size:1.125rem; line-height:1.62;
  font-synthesis-weight:none;
}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 1.5rem}

a{color:var(--olive-deep); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--red)}
a:focus-visible{outline:2px solid var(--red); outline-offset:3px}

/* ── Masthead — the lockup of record, set live rather than as an image.
      Same order and the same three rules as Brand/logo-masthead.svg. ───── */
.masthead{background:var(--olive); color:var(--page); padding:2.25rem 0 2rem}
/* Same measure as the body so the brass rules share the text column's spine. */
.masthead .wrap{max-width:var(--measure)}
.rule-bold{height:2px; background:var(--brass); border:0; margin:0}
.rule-hair{height:1px; background:var(--brass); border:0; margin:0}
.meta{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:0.6875rem; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--tan); padding:0.55rem 0;
}
.wordmark{
  font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; line-height:1.05;
  font-size:clamp(2.5rem,10vw,4.25rem); color:var(--page);
  text-align:center; margin:1.15rem 0 1.1rem;
}
/* The strapline travels WITH the wordmark or not at all — SO-STD-004 §5.2.
   Do not lift this line into a footer, a signature or a banner on its own. */
.strapline{
  display:flex; align-items:center; gap:0.85rem;
  font-family:var(--body); font-style:italic; font-size:1.0625rem;
  color:var(--page); margin:0.95rem 0 0;
}
/* Red on olive is 1.22:1. The cream keyline is not decoration — it is the
   thing that makes the flash legal on this ground. Never set type in it. */
.flash{
  flex:0 0 auto; width:26px; height:10px; background:var(--red);
  box-shadow:0 0 0 1.5px var(--page);
}

/* ── The discipline tabs — the ruled disciplines line as navigation ──────
   Sits flush under the masthead on the same olive ground, separated by the
   brass rule the system already uses for that job, so the banner and the tabs
   read as one block of furniture rather than two.
   CONTRAST: tan on olive is 4.54:1 (AA at this size) for the words that are
   not links; page cream on olive is 7.44:1 for the ones that are — which is
   also the affordance, since a link here must be distinguishable from a word
   that is merely sitting there. */
.tabs{background:var(--olive); border-top:1px solid var(--olive-rule); padding:0.7rem 0 0.75rem}
.tabs ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0.4rem 1.4rem;
}
.tabs li{
  font-family:var(--mono); font-size:0.6875rem; font-weight:600;
  letter-spacing:var(--track); text-transform:uppercase; color:var(--tan);
}
.tabs a{color:var(--page); text-decoration:none; padding-bottom:3px; border-bottom:1px solid var(--olive-rule)}
.tabs a:hover{border-bottom-color:var(--page)}
.tabs a:focus-visible{outline:2px solid var(--page); outline-offset:3px}
/* The current page is named, not linked — a tab that navigates to where you
   already are is a dead control. The flash marks it, as it does on the chain. */
.tab-here{display:inline-flex; align-items:center; gap:0.5rem; color:var(--page)}
.tab-here .flash{width:14px; height:6px; background:var(--red); box-shadow:none}

/* ── Body sections ──────────────────────────────────────────────────────── */
main{padding:0 0 1rem}
.section{padding:2.75rem 0}
.section + .section{border-top:1px solid var(--tan-rule)}
.lede{font-size:1.3125rem; line-height:1.52; color:var(--olive-deep); margin:0 0 1.25rem}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
h2{
  font-family:var(--mono); font-size:0.6875rem; font-weight:600;
  letter-spacing:var(--track); text-transform:uppercase; color:var(--muted);
  margin:0 0 1.15rem;
}
h3{font-family:var(--serif); font-weight:400; font-size:1.5rem; line-height:1.2; color:var(--olive-deep); margin:0 0 0.4rem}
em,i{font-style:italic}
strong{font-weight:600}

/* ── The disciplines line — RULED equal standing for resilience,
      SO-STD-004 §5.4 (REC-576, 2026-09-20). Four words, one weight. ────── */
.disciplines{background:var(--olive); color:var(--page); padding:1.4rem 0}
.disciplines p{
  font-family:var(--mono); font-weight:600; font-size:0.6875rem;
  letter-spacing:var(--track); text-transform:uppercase; text-align:center;
  color:var(--page); margin:0; line-height:1.9;
}

/* ── The vignette — the book's inter-chapter device, in Battledress ──────
   Proportions carried from the book's own interlude CSS: hairline rules at
   40% max-width either side of a centre ornament, a centred italic line
   between them, the pair mirrored at the foot.
   The ornament is the FLASH rather than the book's fleuron — see the note in
   index.html. On cream it needs no keyline: red on page is 6.07:1, and the
   1.5px cream keyline is required only where red meets olive (1.22:1). */
.vignette{margin:2.1rem 0; text-align:center}
.v-orn{display:flex; align-items:center; justify-content:center; gap:0.85rem; margin:0}
.v-rule{flex:1 1 auto; max-width:40%; height:1px; background:var(--brass)}
.v-orn .flash{flex:0 0 auto; width:20px; height:8px; background:var(--red); box-shadow:none}
.v-line{
  font-family:var(--body); font-style:italic; font-weight:400;
  font-size:1.3125rem; line-height:1.34; color:var(--olive-deep);
  margin:1.15rem auto; max-width:26rem; text-wrap:balance;
}
/* The line break is set by hand so the antithesis lands on two lines. Below
   the measure it would break anywhere, so let it flow instead. */
@media (max-width:26rem){ .v-line br{display:none} }

/* ── Credo — the house rules, set as a block quote in the body face ────── */
.credo p{margin-bottom:0.85rem}
.credo .close{font-style:italic; color:var(--olive-deep)}

/* ── What's here — two entries, ruled apart like a contents page ───────── */
.entry{padding:1.15rem 0}
.entry + .entry{border-top:1px solid var(--tan-rule)}
.entry .note{font-size:0.9375rem; color:var(--muted); margin:0.5rem 0 0}
.eyebrow{
  font-family:var(--mono); font-size:0.6875rem; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--muted); display:block; margin:0 0 0.3rem;
}
.action{
  display:inline-block; margin-top:0.75rem; font-family:var(--mono);
  font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--red); text-decoration:none;
  border-bottom:2px solid var(--red); padding-bottom:2px;
}
.action:hover{color:var(--olive-deep); border-bottom-color:var(--olive-deep)}

/* ── A piece — the long-form discipline pages ───────────────────────────
   Built to the book's chapter device: cold open, the turn, the answer, the
   change, the result, the keep. The page furniture below is only what that
   arc needs — a title that behaves like a chapter title, a keep that reads as
   a held block, and sources the reader can actually follow. */
.masthead--sub{padding:1.35rem 0 1.15rem}
.masthead--sub .meta a{color:var(--tan); text-decoration:none}
.masthead--sub .meta a:hover{color:var(--page); text-decoration:underline}
.piece-title{
  font-family:var(--serif); font-weight:400; letter-spacing:-0.01em;
  font-size:clamp(2rem,6.5vw,2.85rem); line-height:1.08; color:var(--olive-deep);
  margin:0.35rem 0 1.4rem; text-wrap:balance;
}
.piece-sub{
  font-family:var(--body); font-style:italic; font-size:1.25rem; line-height:1.3;
  color:var(--muted); margin:-0.95rem 0 1.4rem; text-wrap:balance;
}

/* The standfirst — a broadsheet device, and the right one: the masthead idiom
   is already the brand's. It states the position; the cold open then shows it.
   Ruled off below so it reads as a standing statement rather than a first
   paragraph, without competing with the lede for weight. */
.standfirst{border-bottom:2px solid var(--brass); padding-bottom:1.25rem; margin:0 0 1.5rem}
.standfirst p{font-size:1.1875rem; line-height:1.5; color:var(--olive-deep); margin:0 0 0.7rem}
.standfirst-note{font-style:italic; font-size:1.0625rem!important; color:var(--muted)!important; margin:0!important}

/* The chain — the definition made into a shape the reader can recognise.
   A single brass hairline down the left is the chain itself; the links hang
   off it. The reader's current link is marked with the flash and set in ink
   while the others stay muted, so position is legible at a glance and the
   same block can serve all four pages by moving one class. */
.segue{margin:1.35rem 0 1.05rem}
.chain{
  list-style:none; margin:0 0 1.5rem; padding:0.2rem 0 0.2rem 1.5rem;
  border-left:1px solid var(--brass);
}
.chain li{position:relative; margin-bottom:0.85rem; line-height:1.45}
.chain li:last-child{margin-bottom:0}
.chain-name{
  display:block; font-family:var(--mono); font-size:0.6875rem; font-weight:600;
  letter-spacing:var(--track); text-transform:uppercase; color:var(--muted);
  margin-bottom:0.12rem;
}
.chain-def{display:block; color:var(--muted); font-size:1.0625rem}
.chain-here .chain-name{color:var(--ink)}
.chain-here .chain-def{color:var(--ink)}
/* The flash sits ON the chain rule, marking where the reader is standing. */
.chain-here .flash{
  position:absolute; left:-1.5rem; top:0.42rem; transform:translateX(-50%);
  width:14px; height:6px; background:var(--red); box-shadow:none;
}

.piece h2{
  font-family:var(--body); font-weight:600; text-transform:none; letter-spacing:0;
  font-size:1.2rem; line-height:1.3; color:var(--olive-deep);
  margin:2.3rem 0 0.9rem;
}
/* The keep — the chapter's held block. Ruled top and bottom rather than boxed:
   a box would read as a callout, and this is the part that is meant to be
   carried away, not glanced at. */
.keep{
  list-style:none; padding:1.35rem 0; margin:1.6rem 0;
  border-top:2px solid var(--brass); border-bottom:2px solid var(--brass);
}
.keep li{position:relative; padding-left:1.6rem; margin-bottom:0.8rem}
.keep li:last-child{margin-bottom:0}
.keep li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:11px; height:4px; background:var(--red);
}
.first-move{margin-top:1.5rem}
.vignette--law .v-line{font-weight:600; font-style:italic}
.sources-h{font-size:1rem!important; margin-top:2.4rem!important}
.sources{font-size:0.875rem; line-height:1.55; color:var(--muted)}
.sources a{color:var(--muted)}
.sources a:hover{color:var(--red)}
.back{margin-top:2rem; font-size:0.9375rem}

.author-actions{display:flex; flex-wrap:wrap; gap:0.6rem 1.75rem; margin:1.1rem 0 0}
.author-actions .action{margin-top:0}

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact dl{margin:0; display:grid; grid-template-columns:7.5rem 1fr; gap:0.55rem 1rem}
.contact dt{
  font-family:var(--mono); font-size:0.6875rem; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--muted); padding-top:0.4rem;
}
.contact dd{margin:0; overflow-wrap:anywhere}
.contact .belief{margin:1.75rem 0 0; font-style:italic; color:var(--olive-deep)}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer{background:var(--olive-deep); color:var(--tan); padding:1.5rem 0; margin-top:1rem}
.site-footer .wrap{
  max-width:var(--measure); display:flex; flex-wrap:wrap; gap:0.35rem 0.75rem;
  justify-content:space-between; font-family:var(--mono);
  font-size:0.6875rem; letter-spacing:var(--track); text-transform:uppercase;
}
.site-footer a{color:var(--tan); text-decoration-thickness:1px}
.site-footer a:hover{color:var(--page)}

/* ── Legal pages ───────────────────────────────────────────────────────── */
.legal{max-width:var(--measure); margin:0 auto; padding:2.5rem 1.5rem 1rem}
.legal h1{font-family:var(--serif); font-weight:400; font-size:2.25rem; line-height:1.15; color:var(--olive-deep); margin:0 0 1.1rem}
.legal h2{margin-top:2rem}
.legal ul{padding-left:1.15rem; margin:0 0 1.05rem}
.legal li{margin-bottom:0.6rem}
.legal code{font-family:var(--mono); font-size:0.85em; background:var(--tan-rule); padding:0.1em 0.35em; border-radius:2px}
.legal .updated,.legal .back{font-size:0.9375rem; color:var(--muted)}
.legal .back{margin-top:1.5rem}

@media (max-width:30rem){
  body{font-size:1.0625rem}
  .meta{font-size:0.625rem; letter-spacing:0.11em}
  .contact dl{grid-template-columns:1fr; gap:0.15rem}
  .contact dt{padding-top:0.7rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}