/* The Living Handbook on the site.

   Every colour and face comes from css/folio.css. Nothing is redeclared here -
   the Handbook is a rendering of the same content in the site's own language,
   and a second copy of the palette is a second thing to keep in step.

   The .docx and .pdf keep the navy; that is a document, and this is not. */
.hb-wrap{max-width:820px}
.hb-top{border-bottom:1px solid var(--hairline);padding:0 0 20px;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.hb-mark{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.hb-ver{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(30px,4.6vw,44px);line-height:1.1;letter-spacing:-.02em;margin:48px 0 6px;font-weight:600}
h2{font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;
   color:var(--gold);margin:44px 0 4px;font-weight:500;display:flex;align-items:center;gap:12px}
h2::before{content:"";width:34px;height:1px;background:var(--gold-line);flex:none}
h3{font-size:18px;margin:32px 0 8px;font-weight:600}
ul{list-style:none;margin:16px 0 0;padding:0}
li{position:relative;padding-left:22px;margin:0 0 14px;color:var(--secondary);text-wrap:pretty}
li::before{content:"";position:absolute;left:4px;top:.62em;width:5px;height:5px;
           border-radius:50%;background:var(--gold);opacity:.75}
p{color:var(--secondary);margin:0 0 14px}
.hb-source{font-style:italic;color:var(--muted);font-size:14px}
a.hb-dk{text-decoration:none;border-bottom:1px solid transparent}
a.hb-dk:hover{border-bottom-color:currentColor}
a.hb-dk:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.hb-dk{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;color:var(--gold);white-space:nowrap}
.hb-nav{margin:56px 0 0;padding:28px 0 0;border-top:1px solid var(--hairline);
        display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hb-nav a{color:var(--gold);text-decoration:none;font-size:14px}
.hb-nav a:hover{color:var(--gold-hi);text-decoration:underline}
/* --- the landing hero -------------------------------------------------
   Same shape as .apc-hero on the Prompt Creator and .ip-hero on the wall:
   name over three lines, lede, gold italic line, gold button, cutout facing
   the text. Values are the same tokens; nothing new is invented here. */
.hb-back{display:inline-block;margin-bottom:clamp(24px,4vw,40px);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-decoration:none;
  border:1px solid var(--gold-line);padding:11px 20px}
.hb-back:hover{border-color:var(--gold);background:var(--gold-soft)}
.hb-back:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hb-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(26px,4vw,58px);align-items:center}
.hb-hero-title{margin:0;font-family:var(--display);font-weight:600;color:var(--paper);
  font-size:clamp(42px,6.2vw,76px);line-height:.98;letter-spacing:-.022em}
.hb-hero-lede{margin:clamp(20px,2.8vw,32px) 0 0;font-family:var(--display);
  font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--secondary);
  max-width:36ch;text-wrap:pretty}
.hb-hero-pull{margin:clamp(18px,2.4vw,28px) 0 0;font-family:var(--display);font-style:italic;
  font-size:clamp(18px,1.8vw,21px);color:var(--gold)}
.hb-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(22px,3vw,34px) 0 0}
.hb-hero-actions .hb-hero-cta{margin-top:0}
.hb-hero-cta--quiet{background:transparent;color:var(--gold);border-color:var(--gold-line)}
.hb-hero-cta--quiet:hover{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.hb-hero-cta{display:inline-block;margin-top:clamp(22px,3vw,34px);background:var(--gold);
  color:#17130a;text-decoration:none;font-family:var(--text);font-size:15px;font-weight:500;
  padding:13px 26px;border-radius:999px;border:1px solid var(--gold)}
.hb-hero-cta:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.hb-hero-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hb-hero-figure{margin:0}
.hb-hero-figure img{display:block;width:100%;height:auto}
.hb-rule-eyebrow{display:flex;align-items:center;gap:14px;margin:clamp(48px,6vw,74px) 0 clamp(18px,3vw,26px)}
.hb-rule-eyebrow::before{content:"";width:64px;height:1px;background:var(--gold-line);flex:none}
.hb-rule-eyebrow span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hb-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(28px,5vw,68px);align-items:start}
.hb-why-text p{margin:0 0 1.1em;font-family:var(--display);font-size:17px;
  line-height:1.66;color:var(--secondary)}
.hb-why-text p:first-child{font-size:19px;line-height:1.55;color:var(--paper)}
.hb-why-text p:last-child{margin-bottom:0}
.hb-stats{display:flex;flex-direction:column}
.hb-stat{padding:20px 0;border-top:1px solid var(--hairline)}
.hb-stat:first-child{border-top:0;padding-top:0}
.hb-stat b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(27px,3.2vw,37px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.hb-stat span{display:block;margin-top:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:780px){
  .hb-hero{grid-template-columns:1fr}
  /* The portrait leads on a phone, as on the other two project pages. */
  .hb-hero-figure{order:-1;max-width:340px}
  .hb-why{grid-template-columns:1fr}
}
/* --- the cover ---------------------------------------------------------
   The .docx cover is full-bleed navy, centred, with the title large and the
   metadata in label/value pairs beneath. This keeps that structure and that
   restraint - a single ruled panel, generous space, nothing competing with
   the title - and takes its colour from the site instead. */
/* THE BOOK
   Ashley, 9 Sep 2026, on the first attempt: it "looks like a thumbnail rather
   than filling the whole page", half the cover's information had been moved
   inside, and the contents sat underneath rather than being a page in the book.
   So: the book fills the column, the colophon is back on the cover where he
   put it, and the contents is a leaf you turn away from. Every section is a
   leaf too, which is what makes clicking a contents line a page turn instead
   of a link to somewhere else. */
/* A4 is 1:1.414 portrait. The first attempt was 1072 wide by 820 tall, which
   is landscape and reads as squat - Ashley called it square. So the book is
   sized off the viewport HEIGHT and its width is derived from the A4 ratio:
   fill the page top to bottom, and let the proportion decide how wide. */
/* The site's .nav is position:sticky, top:0, z-index 20 — measured at 53px.
   Two consequences, both of which bit on Ashley's iPad: a book sized against
   the full viewport is taller than the space actually left under the nav, and
   scrollIntoView parks the book flush with the viewport top, which is behind
   the nav. So the height is measured against the space below the nav, and the
   book carries a scroll-margin so anything scrolling to it stops clear of it. */
.hb-flip{--nav-h:56px;
  --book-h:min(calc(92vh - var(--nav-h)),1240px);--book-w:calc(var(--book-h)/1.414);
  scroll-margin-top:calc(var(--nav-h) + 10px);
  margin:clamp(20px,3vw,32px) 0 0;perspective:3000px;perspective-origin:50% 42%}
.hb-flip-stage{position:relative;transform-style:preserve-3d;
  height:var(--book-h);min-height:560px;
  width:min(100%,var(--book-w));margin-inline:auto;
  border-radius:3px 8px 8px 3px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.02)}
/* The block of pages, so the book has a fore-edge and a thickness. */
.hb-flip-stage::after{content:"";position:absolute;top:9px;bottom:11px;right:-7px;width:10px;
  border-radius:0 3px 3px 0;pointer-events:none;
  background:repeating-linear-gradient(180deg,#d9d4c7 0 1px,#b3ad9e 1px 3px);opacity:.42}
.hb-page{position:absolute;inset:0;overflow:auto;
  scroll-padding-top:8px;-webkit-overflow-scrolling:touch;
  padding:clamp(30px,4.4vw,58px) clamp(24px,4vw,62px) clamp(70px,7vw,88px);
  border:1px solid var(--hairline);border-left:none;border-radius:0 8px 8px 0;
  background:linear-gradient(100deg,rgba(255,255,255,.05),transparent 34%),var(--surface);
  transform-origin:left center;backface-visibility:hidden}
/* The binding: a dark gutter down the left edge, as the spine casts. */
.hb-page::before{content:"";position:absolute;top:0;bottom:0;left:0;width:34px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.16) 55%,transparent);
  border-left:1px solid rgba(201,162,90,.24)}
.hb-page>:first-child{margin-top:0}
/* The book is wide; a line of text should not be. Hold the measure and centre
   the column inside the leaf, so the page is broad and the reading is not. */
.hb-page:not(.hb-page--cover)>*{max-width:74ch;margin-inline:auto}
.hb-page .hb-scroll{max-width:none}
.hb-page-foot{margin:clamp(30px,4vw,44px) 0 0;padding-top:16px;border-top:1px solid var(--hairline)}
.hb-page-foot a{color:var(--muted);font-size:13px;text-decoration:none}
.hb-page-foot a:hover{color:var(--gold)}
/* No script: every leaf is simply a section of one long document. */
.hb-flip-bar{display:none}
.hb-js .hb-flip-stage{}
.hb-js .hb-page{display:none}
.hb-js .hb-page.is-at{display:block}
/* Three classes beat one, so the line above was quietly overriding the cover's
   display:flex and space-between was doing nothing at all. The cover looked
   right on a desktop only because the content happened to fill the leaf; on an
   iPad it left the figure floating 326px above the foot. Match the specificity
   rather than reaching for !important. */
.hb-js .hb-page--cover.is-at{display:flex}
.hb-js .hb-page.on-top{z-index:3}
/* Paper has weight. A real leaf lifts slowly, swings through the middle, then
   settles - so the easing is slow at both ends and quick between, over 2s.
   0.46s was the first attempt and Ashley rightly called it the speed of light;
   1.25s was still quick, so this is his number. TURN in the script below must
   match this duration - they are the same fact written twice. The shadow
   sweeps with the leaf so the turn reads as a solid thing. */
.hb-js .hb-page.is-turning-out{display:block;z-index:4;
  animation:hb-turn-out 2s cubic-bezier(.62,.02,.34,1) both;
  box-shadow:26px 0 60px -20px rgba(0,0,0,.9)}
.hb-js .hb-page.is-turning-in{display:block;z-index:4;
  animation:hb-turn-in 2s cubic-bezier(.62,.02,.34,1) both;
  box-shadow:26px 0 60px -20px rgba(0,0,0,.9)}
@keyframes hb-turn-out{
  0%{transform:rotateY(0)}
  100%{transform:rotateY(-172deg)}}
@keyframes hb-turn-in{
  0%{transform:rotateY(-172deg)}
  100%{transform:rotateY(0)}}
/* THE COVER
   Ashley supplied a plate with every word stripped out — the office scene, the
   gold band and the gold rule, nothing else — so the type goes back as live
   text. Everything it says now reads from meta.json again, which is why the
   cover-image guard is gone: there is nothing baked left to go stale.

   Every position below is a percentage measured off his own artwork rather
   than chosen: the gold band ends at 7.51% of the width, the rule sits 7.58%
   down and runs 12.06% to 94.64%, and the title block occupied 10.23% to
   27.84%. Type is sized in cqw against the cover, so the whole thing holds
   at any width.

   Colours are sampled from his original, not taken from the site palette —
   the gold on "Handbook" is #FCDE81, considerably brighter than our #C9A25A,
   and using the token would have looked muddy. */
/* NOT position:relative — .hb-page is absolute with inset:0, and overriding
   that collapsed the leaf to 2px because every child here is positioned. An
   absolutely positioned box is already a containing block for its children. */
.hb-page--cover{container-type:inline-size;
  padding:0;overflow:hidden;display:block;
  border:1px solid rgba(201,162,77,.32);border-radius:3px 5px 5px 3px;background:#0b0a09}
.hb-js .hb-page--cover.is-at{display:block}
.hb-page--cover::before{display:none}
.hb-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hb-page--cover>:not(.hb-plate){position:absolute;z-index:2;margin:0}

/* the spine, on the band the plate already provides */
/* Every number here is measured off Ashley's artwork, not judged by eye.
   His spine type has a cap height of 1.33% of the cover width and the whole
   run sits between 11.33% and 78.20% down, centred on 44.77% rather than the
   middle. Solving his three runs for tracking gave .320, .325 and .325em
   independently, so .32em is his spacing, not a fit. The band ends at 7.68%
   but his type centres on 4.08%, hence the wider box. */
.hb-spine{left:0;top:0;bottom:10.46%;width:8.16%;display:flex;
  align-items:center;justify-content:center;padding:0}
.hb-spine-text{writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;align-items:center;gap:3.2cqw;white-space:nowrap}
.hb-spine-text span{font-size:max(7px,1.84cqw);font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:#17150f}
/* his rules cross the band: 4.93% of the cover wide, two pixels thick */
.hb-rule{width:4.93cqw;height:2px;background:rgba(23,21,15,.45);flex:none}
.hb-vol,.hb-when{color:rgba(23,21,15,.74)}

/* Ashley: "Version 11 UP — centre it between Goldline + Top of Page".
   The rule is 7.58% down, so its centre is 3.79%. */
.hb-badge{left:12.06%;top:3.79%;transform:translateY(-50%);
  border:1px solid rgba(252,222,129,.62);border-radius:999px;
  padding:.75cqw 2.1cqw;font-size:max(9px,1.45cqw);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#FCDE81;white-space:nowrap}

/* The title is Ashley's own artwork, not type. No installed or web font
   matched it: his three lines are three different sizes (ink heights 4.36%,
   5.77%, 6.91% of the cover) and no single face reproduced all three widths.
   So the glyphs were lifted off his original cover by differencing it against
   the plate he stripped, solving each pixel's coverage against the two glyph
   colours (#FFFFFF and #FEDE7E) and saving that as alpha. Recompositing it
   over the plate returns his original to within 8/255 on 86% of pixels; the
   0.12% that miss badly are all places the stripped image itself was
   repainted. It is static across versions — only the figures around it move —
   so nothing is lost by keeping it as artwork. Regenerate with
   scripts/extract-title.py if the cover art ever changes. */
.hb-title{left:11.47%;top:9.26%;width:61.99%;height:18.65%}
.hb-title img{display:block;width:100%;height:100%}
/* Sized off his artwork like the rest: his two tagline lines are 23.32% and
   15.64% of the cover wide, which solve to 2.76 and 2.70cqw independently, and
   his baselines are 2.28% apart. Left edge 13.36% puts it on the same line as
   the figures box, where he had it — not under the title's overhanging T.
   Still balanced, so it splits sensibly whatever a future tagline says. */
.hb-tag{left:13.36%;top:29.86%;font-size:2.73cqw;line-height:1.17;font-weight:500;
  color:#E7E7E7;max-width:25%;text-wrap:balance}

/* Ashley: "MATCH MINE". Both his columns are ranged LEFT off 82.09%, not
   right off the margin — every line in both groups starts there, and so does
   the gold rule. His longest line, REAL INSIGHTS, runs to 98.01%, so this
   deliberately sits closer to the edge than a right-ranged column would.
   His lines have a cap height of ~0.85% of the cover; INNOVATION measures
   12.13% wide, which gives the tracking. The two groups are leaded
   differently in his artwork — 1.93% apart in the first, a tighter 1.68% in
   the second — measured over four steps and three, consistent within each. */
.hb-motto{left:82.09%;right:auto;top:9.17%;text-align:left;display:flex;
  flex-direction:column;align-items:flex-start;gap:0}
.hb-motto p{margin:0;font-size:max(8px,1.63cqw);font-weight:500;letter-spacing:.166em;
  line-height:1.675;text-transform:uppercase;color:#DEDAD2}
.hb-motto p:last-of-type{line-height:1.458}
/* his rule: 2.56% of the cover wide, two pixels, sitting at 20.99% */
.hb-motto-rule{width:2.56cqw;height:2px;background:#FCDE81;opacity:.75;
  margin:3.00cqw 0 2.77cqw}

/* Also measured off his artwork. His box runs 13.27%-93.55% across and is
   6.70% of the cover tall; the figures have a cap height of 1.94% and the
   labels 1.00%, which put the labels at not much over half the size I had
   guessed. SOURCES, SECTIONS and NEW IN V11 each solve to .21-.23em tracking,
   so .215em. The padding is set to land the box on his 6.70% height.
   Ashley moved the block down from his 80.42% to 83.34%, so that stays. */
.hb-figs{left:13.27%;right:6.45%;top:83.34%;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid rgba(252,222,129,.5)}
.hb-figs div{padding:1.30cqw 2.4cqw;border-left:1px solid rgba(252,222,129,.5)}
.hb-figs div:first-child{border-left:none}
.hb-figs b{display:block;font-size:3.76cqw;font-weight:700;line-height:1;color:#E7E7E7;
  font-variant-numeric:tabular-nums}
.hb-figs b.is-gold{color:#FCDE81}
.hb-figs span{display:block;margin-top:.7cqw;font-size:max(8px,1.91cqw);font-weight:500;
  letter-spacing:.215em;line-height:1.15;text-transform:uppercase;color:#C8C3B9}
/* his byline stands 1.21% of the cover tall, not the 0.86% I had. Position is
   Ashley's own — he moved it right and down a line — so only the size changes. */
.hb-by{right:5.36%;top:92.4%;font-size:max(10px,2.27cqw);color:#E7E7E7;white-space:nowrap}
.hb-by b{font-weight:700}
.hb-contents-lede{color:var(--secondary);margin-top:6px}
/* The turning controls, under the book. */
/* THE TWO ACTIONS under the book. These were lost when the cover's CSS block
   was replaced with the artwork — the replacement cut from the cover comment
   to .hb-contents-lede and both button rules sat inside that span. Restored
   from git, and moved here beside the strip they actually live in so the same
   mistake cannot repeat. */
.hb-download{display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;background:#c4382c;color:#fff;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  padding:9px 18px;border-radius:999px;
  border:1px solid #c4382c;white-space:nowrap}
.hb-download:hover{background:#d94a3d;border-color:#d94a3d;color:#fff}
.hb-download:focus-visible{outline:2px solid #d94a3d;outline-offset:3px}
.hb-open{display:inline-flex;align-items:center;gap:8px;
  font:inherit;cursor:pointer;background:var(--gold);color:#17150f;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  padding:9px 18px;border-radius:999px;
  border:1px solid var(--gold);white-space:nowrap}
.hb-open span{font-size:15px;line-height:1}
.hb-open:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.hb-open:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hb-js .hb-flip-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;
  width:min(100%,var(--book-w));margin:clamp(26px,3.4vw,38px) auto 0;
  padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid rgba(201,162,77,.22)}
.hb-flip[data-at="cover"] .hb-flip-btn,
.hb-flip[data-at="cover"] .hb-flip-where{display:none}
.hb-flip:not([data-at="cover"]) .hb-open{display:none}
/* Nothing to go to when you are already there. */
.hb-flip[data-at="contents"] .hb-flip-home{display:none}
.hb-flip-btn{font:inherit;cursor:pointer;background:transparent;color:var(--secondary);
  border:1px solid var(--hairline);border-radius:999px;padding:9px 16px;font-size:14px}
.hb-flip-btn:hover:not(:disabled){color:var(--gold);border-color:var(--gold-line)}
.hb-flip-btn:disabled{opacity:.34;cursor:default}
.hb-flip-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hb-flip-home{color:var(--gold);border-color:var(--gold-line)}
.hb-flip-gap{flex:1}
.hb-flip-where{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--secondary);
  text-align:right}
/* PRINT — the downloadable PDF is this page, printed.
   Ashley, 10 Sep 2026: the PDF was navy-on-white from the Word build and
   looked nothing like the site. Rendering the web pages instead means the
   download is literally what a reader sees, and there is no second design to
   keep in step. The leaves are all in the page already — the script hides
   them — so print simply stops hiding them and gives each its own sheet. */
@media print{
  @page{size:A4;margin:0}
  html,body{background:#0a0a0b !important;
    -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  .nav,.foot,.hb-back,.hb-top,.hb-flip-bar,.hb-page-foot{display:none !important}
  .wrap,.hb-wrap{max-width:none !important;padding:0 !important;margin:0 !important}
  main{padding:0 !important;margin:0 !important}
  .hb-flip{margin:0 !important;perspective:none !important}
  .hb-flip-stage{height:auto !important;width:100% !important;min-height:0 !important;
    box-shadow:none !important;border-radius:0 !important;transform:none !important}
  .hb-flip-stage::after,.hb-flip-stage::before{display:none !important}
  /* every leaf shown, each on its own sheet */
  .hb-js .hb-page,.hb-page{display:block !important;position:relative !important;
    inset:auto !important;height:auto !important;min-height:297mm;overflow:visible !important;
    transform:none !important;animation:none !important;
    border-radius:0 !important;border-left:none !important;
    break-after:page;page-break-after:always}
  .hb-page:last-child{break-after:auto;page-break-after:auto}
  .hb-page::before{width:14mm !important}
  .hb-page:not(.hb-page--cover)>*{max-width:none !important}
  /* The cover is artwork now, so it simply fills the first sheet. Removing the
     old cover rules left a dangling selector list running straight into the
     h1 rule below — valid enough to parse, wrong enough to matter. */
  .hb-js .hb-page--cover.is-at,.hb-page--cover{display:block !important;
    min-height:297mm;padding:0 !important;border:none !important}
  .hb-cover-art{width:100% !important;height:297mm !important;object-fit:cover}
  /* body text sized for paper rather than a screen */
  .hb-page h1{font-size:22pt !important;break-after:avoid}
  .hb-page h2{font-size:9pt !important;break-after:avoid}
  .hb-page h3{font-size:12pt !important;break-after:avoid}
  .hb-page p,.hb-page li{font-size:10pt !important;line-height:1.5 !important}
  .hb-page li{break-inside:avoid}
  .hb-source{break-before:avoid}
  .hb-table{font-size:8pt !important}
  .hb-scroll{overflow:visible !important}
}
/* LATEST NEWS
   Rebuilt 10 Sep 2026 to Claude Design's layout, which Ashley approved: a
   full-bleed hero, a numbered contents grid, then a single 820px column of
   stories. The design arrived as 88 inline style attributes and no classes —
   that is 88 places to edit one colour — so it is re-expressed here as classes
   on the site's own tokens. Its palette was a hair off the site's (#0b0a09 for
   #0a0a0b, #ece7dd for #f3efe6, #c9a24d for #c9a25a); the site's values win, so
   this page cannot drift from the others.
   Its sticky sub-nav is deliberately NOT reproduced. The site already has one
   sticky bar, and a second cost Ashley half an iPad screen the last time. */
.nw-page{overflow-x:clip}          /* the hero breaks the wrap; clip, never scroll */
.nw{--nw-rule:rgba(201,162,90,.18)}

/* Hero — escapes the centred wrap to sit edge to edge.
   The image sits in normal flow at its own aspect and the header takes its
   height from it, so nothing is ever cropped. An earlier pass had this as
   object-fit:cover inside a fixed min-height, which sliced the picture in half
   and cut the man's face off — the whole subject of the photograph. */
.nw-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  margin-bottom:0;overflow:hidden}
.nw-hero>img{display:block;width:100%;height:auto}
.nw-veil{position:absolute;inset:0;background:linear-gradient(to top,
  var(--canvas) 1%,rgba(10,10,11,.92) 22%,rgba(10,10,11,.55) 56%,rgba(10,10,11,.14) 100%)}
.nw-hero-in{position:absolute;left:0;right:0;bottom:0;z-index:2;
  width:100%;max-width:1120px;margin:0 auto;
  padding:0 clamp(18px,4vw,44px) clamp(26px,4vw,44px)}
.nw-eyebrow{display:inline-flex;align-items:center;gap:13px;margin:0 0 18px;
  padding:7px 15px;border:1px solid var(--nw-rule);border-radius:999px;
  background:rgba(10,10,11,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nw-eyebrow i{width:24px;height:1px;background:var(--gold);flex:none}
.nw-eyebrow span{font-size:12.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
.nw-title{display:block;margin:0;text-transform:none;font-family:var(--display);
  font-size:clamp(44px,8vw,104px);line-height:.88;font-weight:700;
  letter-spacing:-.05em;color:var(--paper)}
.nw-title::before{display:none}
.nw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:22px 0 0}
.nw-when{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#17150f;background:var(--gold);padding:6px 12px;border-radius:4px;white-space:nowrap}
.nw-count{font-size:14px;font-weight:500;color:var(--secondary)}

/* Standfirst — the opening line large, the caveat beneath it quieter. */
.nw-standfirst{max-width:34ch;margin:clamp(40px,5vw,64px) 0 0;
  font-size:clamp(22px,2.4vw,30px);line-height:1.42;font-weight:500;
  color:var(--paper);letter-spacing:-.015em;text-wrap:pretty}
.nw-caveat{max-width:50ch;margin:26px 0 0;font-size:clamp(18px,1.9vw,22px);
  line-height:1.58;color:var(--secondary);text-wrap:pretty;
  border-left:2px solid var(--gold);padding-left:clamp(20px,3vw,30px)}

/* Contents — one hairline grid, drawn with gaps over a tinted ground. */
.nw-contents{scroll-margin-top:calc(var(--nav-h,56px) + 18px);
  margin:clamp(44px,6vw,72px) 0 0;padding:28px 0 0;
  border-top:1px solid var(--nw-rule)}
.nw-contents-label{font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px}
/* Hairlines are drawn by the cells, not by a tinted ground showing through
   1px gaps: a ragged last row would leave that ground visible as a block of
   colour where the missing cells are. */
.nw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  border-top:1px solid var(--nw-rule);border-left:1px solid var(--nw-rule)}
.nw-grid a{background:var(--canvas);padding:18px 20px;display:flex;gap:13px;
  align-items:flex-start;color:var(--paper);text-decoration:none;
  border-right:1px solid var(--nw-rule);border-bottom:1px solid var(--nw-rule)}
.nw-grid a:hover{background:var(--surface);color:var(--gold-hi)}
.nw-grid a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.nw-num{font-size:12px;font-weight:600;color:var(--gold);padding-top:3px;flex:none;
  font-variant-numeric:tabular-nums}
.nw-grid a span+span{font-size:15.5px;font-weight:500;line-height:1.4}

/* Stories — one column, held to a reading measure. */
.nw-stories{max-width:820px}
.nw-story{padding:clamp(48px,6vw,72px) 0;border-top:1px solid var(--nw-rule);
  scroll-margin-top:calc(var(--nav-h,56px) + 18px)}
.nw-story:first-child{border-top:0;padding-top:clamp(56px,7vw,88px)}
.nw-kicker{margin:0 0 16px !important;font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.nw-head{display:block;text-transform:none;margin:0;font-family:var(--display);
  font-size:clamp(30px,3.8vw,44px);line-height:1.08;font-weight:700;
  letter-spacing:-.032em;color:var(--paper);text-wrap:balance}
.nw-head::before{display:none}
.nw-stand{margin:20px 0 0 !important;font-size:clamp(18px,1.9vw,22px) !important;
  line-height:1.48 !important;font-weight:500;color:var(--secondary) !important;
  text-wrap:pretty}
.nw-body{display:flex;flex-direction:column;gap:22px;margin-top:28px}
.nw-body p{margin:0;font-size:19px;line-height:1.68;color:var(--secondary);
  text-wrap:pretty}
.nw-body p.nw-pull{font-size:21px;line-height:1.55;font-weight:500;color:var(--paper);
  border-left:2px solid var(--gold-line);padding-left:22px}
.nw-source{margin:30px 0 0 !important;padding-top:16px;border-top:1px solid var(--nw-rule);
  font-size:13.5px !important;line-height:1.6 !important;color:var(--muted) !important;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 24px}
/* Sits on the source line rather than on a row of its own: 28 stories times one
   extra row is a screen and a half of nothing on an already long page. */
.nw-totop{flex:none;color:var(--muted);text-decoration:none;white-space:nowrap;
  font-size:12.5px;letter-spacing:.06em;border-bottom:1px solid transparent}
.nw-totop:hover{color:var(--gold-hi);border-bottom-color:var(--gold-line)}
.nw-totop:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* The lead is given a front page's weight: a filled kicker and a larger head. */
.nw-lead .nw-kicker{display:inline-block;color:#17150f;background:var(--gold);
  padding:5px 11px;border-radius:3px;letter-spacing:.16em;margin-bottom:20px !important}
.nw-lead .nw-head{font-size:clamp(36px,5vw,60px);line-height:1.02;letter-spacing:-.038em}
.nw-lead .nw-stand{margin-top:24px !important;
  font-size:clamp(20px,2.1vw,25px) !important;line-height:1.45 !important;
  color:var(--gold) !important}
.nw-lead .nw-body{margin-top:30px}

.nw-footnote{max-width:66ch;margin:clamp(44px,6vw,68px) 0 0;padding-top:18px;
  border-top:1px solid var(--hairline);font-size:16.5px;line-height:1.66;
  color:var(--muted);text-wrap:pretty}
.nw-onward{margin:clamp(26px,3.4vw,36px) 0 0;display:flex;flex-wrap:wrap;gap:12px}
.nw-onward a{display:inline-block;background:var(--gold);color:#17130a;text-decoration:none;
  font-size:14px;font-weight:600;padding:11px 22px;border-radius:999px;border:1px solid var(--gold)}
.nw-onward a:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.nw-onward a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* the second way out is quieter than the first — the Handbook is the point */
.nw-onward a.nw-onward-quiet{background:transparent;color:var(--gold);border-color:var(--gold-line)}
.nw-onward a.nw-onward-quiet:hover{background:var(--gold-soft);border-color:var(--gold)}

/* ARCHIVED NEWS
   The grid is the page: a date, what kind of story it was, and a title short
   enough to scan, drawn as one hairline table rather than a run of cards, so
   ninety days of it reads as a library and not as a pile. */
.ar-head{padding:clamp(38px,5vw,64px) 0 clamp(24px,3vw,34px)}
.ar-h1{display:block;text-transform:none;margin:8px 0 0;font-family:var(--display);
  font-size:clamp(34px,5vw,58px);line-height:1.02;font-weight:700;
  letter-spacing:-.035em;color:var(--paper)}
.ar-h1::before{display:none}
.ar-lede{max-width:60ch;margin:18px 0 0;font-size:clamp(17px,1.9vw,20px);
  line-height:1.55;color:var(--secondary);text-wrap:pretty}
.ar-meta{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.ar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  border-top:1px solid var(--nw-rule);border-left:1px solid var(--nw-rule);
  margin:0 0 clamp(30px,4vw,44px)}
.ar-card{background:var(--canvas);padding:20px;display:flex;flex-direction:column;
  gap:9px;text-decoration:none;color:var(--paper);
  border-right:1px solid var(--nw-rule);border-bottom:1px solid var(--nw-rule)}
.ar-card:hover{background:var(--surface)}
.ar-card:hover .ar-title{color:var(--gold-hi)}
.ar-card:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.ar-date{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-variant-numeric:tabular-nums}
.ar-kicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.ar-title{font-size:16px;line-height:1.4;font-weight:500;text-wrap:pretty}
@media (max-width:640px){
  /* On a phone the link wraps onto its own line and the text itself is only
     21px tall — reachable, but below the ~44px a thumb expects. The hit area
     is grown with a pseudo-element rather than padding, so the target reaches
     44px while the page height does not move at all. Upward it stops at 10px,
     exactly the flex row-gap, so it never overlaps the source line above. */
  .nw-totop{position:relative}
  .nw-totop::after{content:"";position:absolute;left:-10px;right:-10px;
    top:-10px;bottom:-16px}
  .nw-standfirst{max-width:none}
  .nw-body p{font-size:17px}
  /* the picture is short at this width, so the overlay has to be leaner */
  .nw-title{font-size:clamp(30px,9vw,44px)}
  .nw-eyebrow{margin-bottom:10px;padding:5px 11px}
  .nw-eyebrow span{font-size:11px}
  .nw-meta{margin-top:12px}
  .nw-hero-in{padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .hb-js .hb-page.is-turning-out,.hb-js .hb-page.is-turning-in{transition:none;animation:none}
}
@media (max-width:700px){
  /* A phone is already A4-ish. Fill the width and let the height follow. */
  .hb-flip{--book-w:100%;--book-h:calc(100vw*1.414)}
  .hb-flip-stage{height:calc(86vh - var(--nav-h));width:100%}
  .hb-page{padding:26px 20px 74px}
  .hb-page::before{width:18px}
  /* The cover overran its own leaf by 42px here, which put Read Handbook
     below the fold of the book. Trim the ornament, keep every figure. */
  .hb-page--cover{padding:0}
  /* Open and Download together want 362px against a 327px strip on a phone,
     so they stack. The spacer would force a break on its own; hiding it and
     pushing Download right keeps them at opposite ends of whichever line each
     lands on. */
  .hb-flip-gap{display:none}
  .hb-open{margin-left:auto}
  .hb-flip-where{display:none}
}
.hb-index{list-style:none;padding:0;margin:28px 0 0}
.hb-index li{padding-left:0;margin:0;border-top:1px solid var(--hairline)}
.hb-index li::before{display:none}
.hb-index a{display:block;padding:18px 0;color:var(--paper);text-decoration:none}
.hb-index a:hover{color:var(--gold)}
.hb-index .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--gold);margin-right:12px}
.hb-index .c{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.hb-foot{margin:64px 0 0;padding:22px 0 60px;border-top:1px solid var(--hairline);
         font-size:12px;color:var(--muted)}
.hb-scroll{overflow-x:auto;margin:28px 0 0;border:1px solid var(--hairline)}
.hb-table{border-collapse:collapse;width:100%;min-width:680px;font-size:13px}
.hb-table th{background:var(--surface);color:var(--gold);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--hairline);white-space:nowrap}
.hb-table td{padding:12px 14px;color:var(--secondary);vertical-align:top;border-bottom:1px solid var(--hairline)}
.hb-table tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.hb-table td:first-child{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:600px){ h2{font-size:11px} }