/* ============================================================
   archi-pack — styles.css
   THE stylesheet. Every page on the site loads this one file
   from /assets/css/styles.css. It is organised top to bottom:

     SETTINGS      — every colour, size and spacing value
     FONTS         — where Gabarito is loaded from
     BASE          — a few plain rules the whole page relies on
     GRID          — the faint drawing-sheet background grid
     NAV           — the bar at the top of the page
     01 … 07       — one banner per content section (added stage by stage)
     FOOTER        — the title-block strip at the bottom
     GUIDE PAGES   — the long-form guide pages only
     GUIDES INDEX  — the guides index page only

   To change a colour or a size, change it in SETTINGS below,
   save this file, and refresh the browser. Nothing further down
   contains a raw colour or pixel size — everything points back
   up to this block.

   Merged 23 August 2026. Until then the checklist page, the
   guide pages and the guides index each carried their own copy
   of this file and changes had to be hand-carried between them.
   They do not any more: a change here reaches every page. That
   cuts both ways — check the other pages before changing
   anything above the GUIDE PAGES banner.
   ============================================================ */


/* ============================================================
   SETTINGS
   ============================================================ */

:root {

  /* ---------- COLOURS ---------- */

  --colour-bone: #f3f2ef;       /* background of the light sections; also the text colour on dark sections and the button label */
  --colour-ink: #231f20;        /* body text on light sections; background of the dark sections and the footer */
  --colour-brick-red: #c0504d;  /* THE MARK RED. Hairline rules, hatch, dots, drawn marks and headline emphasis — the red you look at rather than read. It is no longer the fill of any ground that carries text: bone measures 4.17:1 on it and ink 3.49:1, so it cannot hold small type either way round. That is what the 30 Aug 2026 audit measured and what --colour-brick-deep below now answers. As a text colour it is still right at large bold sizes (the headline span and the wordmark, where it already appears) — never for ordinary body-size text, and see THE DRAWN LABEL MARK at the foot of this file for what a small label does instead */
  --colour-blush: #fddbd9;      /* large soft-pink tinted panels only */

  --colour-placeholder: rgba(35, 31, 32, 0.65);  /* the example address shown inside the empty email field — 0.65 is the lightest strength that still passes the contrast rules on bone */
  /* THE TWO GRID COLOURS WERE HERE AND ARE GONE (30 Aug 2026, user
     instruction: take the grid off every page). They were
     --colour-grid-on-bone: rgba(35, 31, 32, 0.04) and
     --colour-grid-on-ink: rgba(243, 242, 239, 0.03) — the strength of
     the faint drawing-sheet lines on light and dark grounds. Nothing
     reads them now. --grid-pitch stays: it is still the measure every
     margin, bar height and page gutter is cut from, it is simply no
     longer drawn. */
  --colour-hairline-on-ink: rgba(243, 242, 239, 0.35); /* thin dividing lines on the dark sections — the border round a dark card or panel. It ruled the footer's title block too until that came out on 30 Aug 2026 */
  --colour-bone-quiet: rgba(243, 242, 239, 0.78);      /* bone stepped back, for small print on ink — the footer's disclaimer and year line. It measures 9.3:1 against ink, so it stays well clear of the 4.5:1 small text has to meet: this is a quieter voice, not a fainter one */
  --colour-rule-faint: rgba(192, 80, 77, 0.45);        /* the faint red lines above and below the spec strip — last number is the strength */

  /* ---------- TYPE ---------- */

  /* The font list: the browser tries Gabarito first, and if the font
     file is not in the fonts/ folder it falls back to the plain
     system font that follows, so the page is always readable. */
  --font-main: "Gabarito", "Century Gothic", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* The second typeface: Anton, used for headlines on the two 4A
     pages — the homepage and /about — and, since 6 September 2026,
     on /privacy, whose redesign is built on it. Nowhere else. It
     has one weight, 400, and no real lowercase to speak of, so every
     rule that calls for it sets uppercase and asks for 400 explicitly
     rather than letting a heading inherit the browser's default bold,
     which would draw a fake one. Arial Narrow is the fallback
     because it is the nearest condensed face already on most machines —
     a headline set in it is narrower than Anton but holds the shape of
     the line, where a plain sans would run far too wide.
     Added 28 August 2026 with the homepage redesign; /about joined it
     the following day, and /privacy on 6 September 2026 — see the
     PRIVACY PAGE block at the foot of this file for what it sets. */
  --font-display: "Anton", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;

  /* The type scale — seven sizes, used everywhere. The sizes are written
     in rem, the browser's own text-size unit, so the whole page grows for
     readers who have raised the text size in their browser settings.
     1rem is normally 16px — to turn a pixel size into rem, divide by 16.
     Each comment gives the pixel equivalent. A value written as
     clamp(smallest, flexible, largest) starts at the smallest size on
     a phone and grows to the largest size on a desktop by itself. */
  --size-label: clamp(0.625rem, 2.6vw, 0.75rem);    /* 10px to 12px — spec strip, FIG labels, section numbers, footer metadata — shrinks on a phone so the spec strip holds one line (checked down to a 320px screen at 10px) */
  --size-note: clamp(0.8125rem, 3.5vw, 0.875rem);   /* 13px to 14px — the credential line and the reassurance line under each form — these have to stay readable on a phone, so they never shrink below 13px */
  --size-body: 0.9375rem;                           /* 15px — ordinary paragraphs, nav links */
  --size-input: 1rem;                               /* 16px — the email field only. Never smaller: iPhones zoom the whole page in on any form field with text under 16px, which breaks the layout mid-signup */
  --size-lead: 1.1875rem;                           /* 19px — the button label and the card titles — do not go below this: at 19px the bone-on-red button label passes the contrast rules, smaller and it fails them */
  --size-emphasis: clamp(1.25rem, 2vw, 1.625rem);   /* 20px to 26px — the "dead laptop" emphasis line and the wordmark */
  --size-heading: clamp(1.375rem, 3vw, 2rem);       /* 22px to 32px — every section heading, e.g. "Twelve habits." */
  --size-headline: clamp(3.375rem, 8.25vw, 6.1875rem); /* 54px to 99px — the big hero headline only. Sized up half again on 22 Aug 2026 (live design session): the headline is the page's one big claim and now reads at full strength */

  --line-body: 1.6;      /* line spacing of paragraphs — 1.6 means each line is 1.6 times the text size tall */
  /* ============================================================
     THE LEADING ON EVERY HEADING WAS HALVED ON 2 SEPTEMBER 2026,
     at the user's request, and this token and the three below it
     carry the halving for the headings that read them.

     WHAT WAS HALVED IS THE GAP, NOT THE LEADING. The gap a reader
     sees is the line box less the ink in it, and the ink was
     measured rather than guessed: both faces put 0.891em between
     the top of an ascender and the foot of a descender (Anton's
     caps and its round-letter overshoot come to the same number as
     Gabarito's ascender-to-descender). So every heading's new
     value is 0.891 + (old - 0.891) / 2, worked out one heading at
     a time and written into each rule. 1.15 lands on 1.021, 1.05
     on 0.971, 0.96 on 0.926.

     EVERY HEADING ALSO SETS ITS LINE BOX ON A WHOLE PIXEL, with a
     round() declaration below the plain one. A line box on a
     fraction of a pixel makes the rasteriser round one line's ink
     up and the next line's down, which is what made the gaps
     between the lines of one headline come out unequal — measured
     at 5 and 7 device pixels on the /about hero before this went
     in. Browsers without round() drop that declaration and keep
     the plain ratio above it, which is what they rendered before.

     THREE HEADINGS DO NOT FOLLOW THE FORMULA: the hero, the latest
     heading and the get heading on the homepage and the 404 sat at
     or under the ink height already, so their lines touched and
     halving nothing leaves nothing. They take the value their
     counterpart on /about and /checklists lands on instead —
     0.906, and 0.926 from 900px up — which is the user's own
     instruction: those two pages should not be at zero, they
     should match the others.

     .emphasis-line reads this token too and is a paragraph, not a
     heading. It was pinned to the old 1.15 in the same move.
     ============================================================ */
  --line-heading: 1.021;  /* was 1.15 */
  --line-headline: 0.971; /* tighter still, for the hero headline only — at its new size --line-heading would leave the lines looking loose */

  --tracking-label: 0.14em;      /* the letter-spacing that gives the small capital labels their spaced-out look */
  --tracking-headline: -0.01em;  /* pulls the hero headline's letters a touch closer — very large type looks better slightly tightened */

  --headline-rule: 0.06em;      /* the thickness of the red rule drawn under "in week one." — written in em so it thickens and thins with the headline itself */
  --headline-rule-gap: 0.1em;   /* the space between the headline letters and that red rule */

  /* ---------- SPACING ---------- */

  --space-section: clamp(80px, 10vw, 120px);  /* the vertical gap above and below every numbered section */
  --space-block: 40px;                        /* the gap between separate elements inside a section, e.g. heading to paragraph group */
  --space-small: 20px;                        /* the small everyday gap — the same size as one background grid square */
  --space-hero-row: 12px;                     /* the extra-tight vertical rhythm inside the hero only — dialled in by eye in the 22 Aug 2026 live design session */
  --space-page-side: var(--grid-pitch);       /* the gap between the browser edge and the content — exactly one grid square either side, so the text starts on a grid line */

  /* ---------- LAYOUT ---------- */

  --content-max-width: 1160px;  /* how wide the content is allowed to get on a big screen before it stops growing */
  --grid-pitch: 26px;           /* the size of one square of the faint background grid — the header height, skyline strip, hatch blocks and page edges are all measured in these squares, so they scale together */

  /* ---------- BORDERS ---------- */

  --border-hairline: 1px;   /* the thickness of every thin rule and box border on the page */
  --hatch-line: 8px;        /* the thickness of each red stripe in the diagonal hatch blocks */
  --hatch-gap: 12px;        /* the space between one hatch stripe and the next */
  --hatch-strength: 0.3;    /* how strongly the hatch shows: 1 is solid red, lower numbers are fainter — the section-03 cards use half of this */
  --corner-radius: 6px;     /* how rounded the corners of the button and the email field are */
  --corner-radius-tab: 3px;  /* the tighter corner used on the small drawn tabs — the numbered step tabs in a guide. A 20px-tall tab given the full 6px reads as a pill rather than a drawn box, so the shape scale carries two values, not one. Nothing larger than a tab may use it */
  --panel-line: 2px;        /* the pen weight of the outline round the section 02 panel — deliberately heavier than the 1px hairline on the cards, so the panel reads as the box holding a whole section rather than as one more card. Drop it to 1px to make it quieter */
  --tap-minimum: 44px;      /* the smallest height the button and the email field are allowed to be — the size a thumb needs to press accurately */
  --focus-ring: 3px;        /* the thickness of the outline shown around a link or button when you reach it with the Tab key */

  /* ---------- SECTION 03 CARD PAN ---------- */

  --structure-card-width: clamp(calc(var(--grid-pitch) * 11), 44vw, calc(var(--grid-pitch) * 21)); /* how wide each section-03 card is while the sideways pan is active — 11 to 21 grid squares, so the row is always wider than the screen and has somewhere to slide to */
  --card-shadow: 4px 4px 0 rgba(35, 31, 32, 0.08); /* the hard offset shadow that lifts each card off the sheet — the two numbers are how far it falls right and down, the last number its darkness */
  --card-hover-lift: 8px;   /* how far a section-03 card rises when the mouse is over it (chosen in the 22 Aug 2026 live design session) */
  --card-hover-shadow: 12px 12px 0 rgba(35, 31, 32, 0.12); /* the deeper drawn shadow while a card is lifted — still hard-edged, never blurred */
  --card-hover-time: 0.5s;  /* how long the lift and settle take */

  /* ---------- GUIDE PAGES ---------- */
  /* REWRITTEN 30 AUGUST 2026 for the design handoff "Guide template
     redesign", direction 1b/2a — "Field manual". The group that stood
     here before described the drawing-sheet guide of 23 August: a bone
     page, a contents rail on the left, a 17px article on a 36rem
     measure. None of it survives, because none of that page does.

     THE SIZES BELOW ARE IN PIXELS, not the rem and clamp the older
     drawing-sheet blocks use. Same reason as the homepage and /about:
     the handoff states exact pixel values at two named widths (390 and
     1040) and was signed off that way, so the built page can be checked
     against the reference render line by line. The one value that is
     NOT the handoff's is the email field — see --size-input above,
     which this page uses instead of the drawn 12.5px.

     Nothing outside a guide page reads any of these. */

  /* --- the grounds and the ramp --- */
  /* The handoff's brick, ink, bone and blush-pale are the SITE's own
     four, to the digit — the designer eyedropped this site's pages to
     get them — so they are not repeated here. What is repeated below is
     only what the site did not already have. */

  --colour-paper: #faf9f6;          /* the page ground under a guide. A hair warmer and lighter than --colour-bone, which is now the SURFACE colour on this page: every drawn box, the figure hatch and the step cards are bone standing on paper. The two are a pair — one is only legible as a surface because the other is behind it */
  --colour-gd-rail-rule: rgba(35, 31, 32, 0.1);  /* the hairline between two lines of the contents rail — a tenth of ink, the faintest rule on a guide page */
  --colour-brick-deep: #a24240;     /* THE GROUND RED. Every red band that carries text: both heroes, both capture bands, the guide hero and its next-steps band, the nav pill and the buttons. Brick red stepped down one notch — near enough that the page still reads as the same red, far enough that bone measures 5.53:1 on it and blush 4.81:1, so ordinary small type clears the 4.5:1 it has to meet. Widened to this role by the 30 Aug 2026 audit; before that it was the guide's metadata strip alone, which has moved down to --colour-brick-deeper so it still reads as the underside of the hero rather than as more of it. Ink measures 2.63:1 on this and must never sit on it */
  --colour-brick-deeper: #85332f;   /* one notch below the ground red, and only the guide's metadata strip wears it — it exists so that strip still reads as the underside of the hero band now the hero is brick-deep. Bone measures 7.47:1 on it, blush-light 5.50:1 */
  --colour-bone-lit: #ffffff;       /* a bone card lifted under the mouse — the same move --hp-brick-lit and --hp-card-lit make for their own grounds. It is a state and nothing else: never a fill, a ground or a text colour. (30 Aug 2026: it was a raw #ffffff on .gd-next-card:hover, the one colour in the file that pointed at nothing) */
  --colour-brick-hover: #cd6462;    /* the signup button under the mouse — brick lifted. The one hover state on the page that changes a fill */
  --colour-blush-light: #f9c5c5;    /* the hero kicker and the metadata strip's type, on brick and on brick-deep */
  --colour-blush-mid: #eaa0a0;      /* the dot grid in the hero panel, the turn of the pull quote, the signup kicker. NOT --colour-blush-deep (#eba7a4), which is the guides index's disc colour: this is the handoff's own value, and the two pages must not be quietly merged onto one */
  --colour-link-hover: #9a3f3d;     /* an inline link under the mouse — brick red pressed harder */

  /* The neutral ramp. The handoff names eight greys; these are the
     seven the two approved artboards actually use. Every one is a TEXT
     colour on paper, on bone or on ink, so each carries its measured
     contrast — the two that fail are marked, and are flagged in
     README-SITE.md section 7 rather than quietly changed. */
  --colour-ink-soft: #332f30;       /* body copy inside the article. 12.5:1 on paper */
  --colour-ink-quiet: #403c3d;      /* the callout's paragraph, on blush. 8.4:1 */
  --colour-grey-body: #54504f;      /* the second line inside a step card, a shot card, a table cell, a next-steps card. 7.1:1 on bone */
  --colour-grey-caption: #706b69;   /* figure captions, the byline and the shot tags. The faintest grey that clears 4.5:1 on BONE, which is 4.69:1 — it was #76716f claiming 4.6:1, but that reading was taken against the guide's near-white paper and not against bone, where it is 4.30:1 and fails. Corrected by the 30 Aug 2026 audit */
  --colour-grey-faint: #94908d;     /* the placeholder wording inside an empty figure box. 2.8:1 on bone — FAILS on a light ground, and is only ever used on a placeholder that a real drawing replaces */
  --colour-grey-hint: #706b69;      /* the "Swipe" hint under the shot row on a phone. It was #aba7a4, which measures 2.27:1 on paper and was carried as drawn with FAILS written beside it. This is the same grey the captions take, 4.99:1 on paper — the hint is a phone-only instruction and someone who cannot read it does not know the row scrolls. Settled by the 30 Aug 2026 audit */
  --colour-quiet-on-ink-card: #cfccc8;  /* the sentence under the signup heading, on ink. 10.2:1 */

  --colour-gd-hairline: rgba(35, 31, 32, 0.16);  /* the rule between two rows of the comparison table. A hairline, not a structural rule — the table already has a 2px box round it */
  --colour-gd-hatch: rgba(35, 31, 32, 0.09);     /* the diagonal hatch inside an empty figure box */
  --colour-gd-dot-on-brick: rgba(247, 218, 216, 0.45); /* the dot grid where it bleeds off the hero's corner on a phone — blush at low strength, because there the dots sit on brick rather than on the bone panel */

  /* --- type --- */

  /* THE THIRD TYPEFACE: IBM Plex Mono, for labels, meta, captions,
     numbers and table headers on guide pages ONLY. The handoff asks for
     Archivo Black / Archivo / IBM Plex Mono and says outright to swap
     the families at token level if the brand names its own — so the
     first two became Gabarito and the third was kept, because the mono
     IS the "field manual" direction and no weight of Gabarito can stand
     in for it. It is always set in small capitals with the tracking
     below; it is never a paragraph face. Two weights are self-hosted,
     400 and 600, latin only, 30 KB the pair. Nothing outside a guide
     page loads it. */
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --size-gd-label: 10px;        /* the smallest mono label: the metadata strip and the hero kicker on a phone, the next-steps kicker and the signup kicker everywhere */
  --size-gd-label-plus: 10.5px; /* one step up: the contents header bar, the callout label, the table's header row, and on a phone the figure caption and the section numbers */
  --size-gd-label-wide: 11px;   /* at desktop width: the hero kicker, the metadata strip, the section numbers, the figure caption */
  --size-gd-byline: 11.5px;     /* the mono paragraph that closes the article. The only mono set as sentences, which is why it is the largest of them */

  --size-gd-title: 31px;        /* the guide's title on a phone */
  --size-gd-title-wide: 46px;
  --size-gd-standfirst: 15.5px; /* the sentence under the title, on brick */
  --size-gd-standfirst-wide: 18px;
  --size-gd-lede: 18px;         /* the opening paragraph of the article, above the first heading */
  --size-gd-lede-wide: 21px;
  --size-gd-body: 16px;         /* the article's paragraphs */
  --size-gd-body-wide: 16.5px;
  --size-gd-h2: 19px;           /* a section heading */
  --size-gd-h2-wide: 23px;
  --size-gd-h3: 15px;           /* the title of a step card */
  --size-gd-h3-wide: 15.5px;
  --size-gd-small: 14.5px;      /* the second line inside a step card, and every cell of the comparison table */
  --size-gd-smaller: 14px;      /* the second line inside a shot card and a next-steps card, and the contents links on a phone */
  --size-gd-quote: 20px;        /* the pull quote */
  --size-gd-quote-wide: 24px;
  --size-gd-signup-title: 23px; /* the signup heading. LARGER on the phone than in the sidebar, because there it is a full-width band and here it is a 268px card */
  --size-gd-signup-title-wide: 21px;
  --size-gd-next-title: 22px;   /* "What to do next" */
  --size-gd-next-title-wide: 26px;
  --size-gd-step-number: 19px;  /* the brick numeral on a step card */
  --size-gd-step-number-wide: 21px;

  --line-gd-body: 1.6;          /* the article's paragraphs on a phone */
  --line-gd-body-wide: 1.62;
  --line-gd-title: 0.966;        /* the guide's title on a phone */
  --line-gd-title-wide: 0.946;
  --line-gd-card: 1.5;          /* every second line inside a card, and every table cell */

  --tracking-gd-label: 0.14em;  /* the everyday mono label */
  --tracking-gd-meta: 0.12em;   /* the metadata strip and the hero kicker on a phone — a hair tighter, because that strip has four cells to fit across a 390px screen */
  --tracking-gd-kicker: 0.18em; /* the hero kicker at desktop width, and the callout label. The widest tracking on the page, for the two labels read as a filing reference rather than as a heading */

  /* --- the drawn structure --- */

  --gd-border: 2px;             /* the pen weight of every box on a guide page: the figure, the step cards, the table, the callout, the contents card. Deliberately heavier than the site's 1px hairline — this page is a field manual, and its boxes are ruled, not suggested */
  --gd-rule: 3px;               /* the rule under a section heading. Heavier again, so a heading reads as a division of the page and a box does not */
  --gd-gap: 44px;               /* the gap between the article and the sidebar at desktop width, and the gap between the metadata strip's cells */
  --gd-aside-width: 268px;      /* how wide the sidebar is. Fixed, not fluid: the signup card and the contents list are both drawn against this number */
  --gd-shot-width: 208px;       /* how wide one shot card is while the shot row scrolls sideways on a phone */
  --gd-hero-panel-width: 300px; /* the bone dot-grid panel beside the hero title at desktop width */
  --gd-hero-corner: 130px;      /* and what it shrinks to on a phone, where it becomes a bleed off the top-right corner instead of a panel */
  --gd-sticker-width: 160px;    /* the "free for students" sticker in the sidebar */
  --gd-sticker-tilt: 3deg;      /* and how far it is turned. The one thing on the page that is not square */

  --gd-progress-height: 3px;    /* the thickness of the red reading-progress rule pinned under the nav bar. Set it to 0 to switch the progress rule off entirely. It is NOT in the handoff — see the note beside .guide-progress in the GUIDE PAGES block */

  /* ---------- GUIDES INDEX ---------- */
  /* These apply to the guides index page. Nothing on the checklist
     landing page reads them, so changing one here can never move
     anything over there — with three exceptions, marked SHARED
     below, which the about page and the homepage tab bar also read.

     REWRITTEN 29 AUGUST 2026 for the "Guides landing page redesign"
     handoff (option 4c), which turned the page from ink-all-the-way
     to bone-all-the-way. The handoff quotes its own bone, ink and
     brick, a hair off the site's own; the site's tokens are used
     instead, because the nav above this page and the footer below
     it are painted from them and a second bone would show as a
     seam. The colours the site did NOT already have — the deeper
     blush, the warm bone shade and the ring stroke — are taken
     from the handoff exactly. */

  --colour-blush-deep: #eba7a4;      /* the decorative circles behind the words and the cards, and the reading-time line on a card. This is NOT --colour-blush (#fddbd9): that one is a panel tint, and at the 0.32–0.45 strengths these circles are drawn at it disappears against bone. On ink it measures 8.6:1, so it is safe as small type on a card */
  /* --colour-bone-shade (#e4decf) WAS HERE and is gone (30 Aug 2026).
     It was the one warm-grey decor disc, low behind the cards. The
     user's rule is that every disc on this page is blush, and that
     disc was also one of the two behind the cards, which went at the
     same time — see the three rules in the G2 block. */
  --colour-ring-on-ink: #332e2e;     /* the stroke of the concentric ring motif drawn behind the open/close glyph. A hair off ink on purpose: the rings have to be felt rather than read, and any lighter they turn into a target */
  --colour-quiet-on-card: #b5aea6;   /* the quieter second line ON AN INK CARD: a set's description, and the line under a guide's title. The handoff's own value, taken exactly. It replaced --colour-quiet-on-ink here on 29 Aug 2026 for a reason worth keeping: that token is 0.52 bone, which measures 4.93:1 on ink but only 4.47:1 once a row carries its hover wash — a hair under the 4.5:1 small text has to meet. This one is 7.4:1 hovered or not */
  --colour-body-grey: #5c5650;       /* the quieter paragraph on BONE — the line under the headline, and the two lines in the email band. 6.9:1 on bone, so it clears the contrast rules as ordinary body text. The site's other quiet greys are all for ink grounds */

  --colour-line-on-ink: rgba(243, 242, 239, 0.14);  /* SHARED — the rules between the guides inside a card, and the rules between the tabs of every tab bar on the site. Deliberately fainter than --colour-hairline-on-ink (0.35): these lines are structure, not emphasis */

  /* THE TAB BARS' TWO COLOURS. They were written inside the /about
     block and were read by nothing else; they moved up here on
     30 August 2026, when the bottom bar was asked for on every page
     and a token scoped to one page stopped being enough. The bug that
     found it is worth recording: a custom property that is not in
     scope makes the whole declaration invalid, so `color:
     var(--home-tab-quiet)` on a page that never set it did not fall
     back to anything sensible — the label inherited ink, on ink, and
     two of the four tabs were simply not there. */
  --tabbar-height: 46px;            /* SHARED — how much room the bottom bar takes off the foot of every page that carries one, so a footer's last line never hides under it. The bar measured: 44px of tap target under a 2px rule. Change it here and check .site-tabbar still measures the same */

  --colour-tab-quiet: rgba(243, 242, 239, 0.72);    /* SHARED — a tab bar link you are not on. It was 0.5, which measures 4.66:1 on ink — over the 4.5:1 this size of text has to meet, but only just, and at 10px it read as two disabled words rather than two places you could go. 0.72 measures 8.1:1 and still sits well back from the tab you are on */
  --colour-tab-selected: rgba(243, 242, 239, 0.07); /* SHARED — the ground behind the tab you are on: bone at seven hundredths, enough to read as a lit cell in the bar and not enough to read as a panel */
  --colour-panel-hover-on-ink: rgba(243, 242, 239, 0.04); /* SHARED — the wash behind one guide row while the mouse is over it */
  --colour-quiet-on-ink: rgba(243, 242, 239, 0.52);       /* SHARED — no longer read by the guides index itself (see --colour-quiet-on-card above), but the about page and the homepage tab bar both take their quiet second line from it. It lives here because this is where it was written; do not change its value without checking those two */

  --size-guides-headline: clamp(2.625rem, 8.5vw, 5.5rem); /* 42px to 88px — the headline on this page only. It does NOT use --size-headline: that one floors at 54px, which is right for the front page's hero and far too big on a phone here. The 42px floor is the handoff's own size at 390px; pick the phone value first and let it grow */
  --size-set-title: clamp(1.375rem, 3.2vw, 2.5rem);   /* 22px to 40px — the name of a set, beside the numeral. These two sizes are a pair: change one and check the head still balances */
  --size-set-number: clamp(2.75rem, 6vw, 5rem);       /* 44px to 80px — the brick-red set numeral. Far smaller than the 76–192px the old ink page used: on the redesigned card it shares a row with the name and the ring motif rather than towering over a stacked head */
  --size-set-toggle: clamp(1.375rem, 2.4vw, 2rem);    /* 22px to 32px — the + / – glyph. Bold at 22px it counts as large text, which is the only reason it is allowed to be brick red on ink */
  --size-guides-meta: 0.75rem;                        /* 12px — the "07 mins →" line at the foot of a guide row, in blush. Fixed, not a clamp: it is the smallest type on the card and the handoff sets it exactly */

  --size-guide-row-title: clamp(0.9375rem, 1.4vw, 1.1875rem); /* 15px to 19px — the title of one guide inside a card */

  --set-number-column: clamp(4rem, 8vw, 7rem);   /* 64px to 112px — the width of the numeral's column in a card head. Fixed rather than auto so all three set names start on the same line down the page, whatever the numeral does */
  --set-head-pad-y: clamp(1.375rem, 2.6vw, 2.25rem); /* 22px to 36px — the air above and below a card head */
  --set-head-pad-x: clamp(1.125rem, 2.2vw, 2rem);    /* 18px to 32px — the air either side of it, and the same gap the guide rows below keep */
  --set-row-pad: clamp(1.125rem, 2vw, 1.75rem);      /* 18px to 28px — the padding round one guide row */
  /* --set-dot-size was the little brick-red disc at the head of a guide row.
     The disc was replaced by the checklist number on 6 September 2026 — see
     .set-guide-ref — and nothing reads this value any more. */
  --set-ring-size: clamp(16.25rem, 30vw, 26.25rem); /* 260px to 420px — how wide the concentric ring motif is. The card's overflow: hidden crops it, so this is the size of the whole disc, not of what shows */
  --set-ring-pitch: 18px;   /* the gap between one ring and the next */
  --set-ring-weight: 1px;   /* the thickness of each ring */

  /* ---------- TEMPLATE PAGE ---------- */
  /* This one only applies to /feedback. Nothing on any other page
     reads it, so changing it here can never move anything elsewhere. */

  --colour-rule-quiet: rgba(35, 31, 32, 0.18); /* the hairline between two rows of the template schedule. Deliberately fainter than the ink hairline used on card borders: these rules separate rows of a list, they do not draw a box. It is a LINE colour — far too faint for words, and must never be used for them */

  --space-mark-side: 4px;      /* the sliver of pink that shows either side of a marked gap in the schedule — just enough that the highlight reads as a field rather than as a stray background. Raise it and the marks start to look like buttons */
  --space-underline-gap: 2px;  /* the gap between a link's words and the red rule drawn under it — the same breathing space the headline's under-rule has, at the small scale */
}


/* ============================================================
   FONTS
   Every face on the site is self-hosted, and every one of them is
   loaded as a .woff2 and nothing else. Gabarito's single
   variable-weight file covers every weight the page uses (Regular
   400 through Black 900). If a font file goes missing, the browser
   silently uses the fallback fonts named in --font-main above —
   nothing breaks.

   WOFF2 ONLY (settled 5 Sep 2026). Until then Gabarito and Anton
   each offered a .ttf after the .woff2, to rescue a browser too old
   to read woff2. Nothing released since about 2016 is in that
   position, so the two .ttf were 289 KB uploaded for a reader who
   does not exist. IBM Plex Mono, added with the guide redesign on
   30 August, was already set up woff2-only — this is the rest of
   the block agreeing with it. The six single-weight spares that
   came in the Gabarito download went at the same time: the
   variable file draws every one of those weights.

   IF A FONT IS EVER REPLACED, take the .woff2 from Google Fonts
   directly rather than converting a .ttf by hand. Gabarito and
   Anton are licensed under the SIL Open Font Licence (OFL.txt and
   Anton-OFL.txt), which permits self-hosting.
   ============================================================ */

/* Gabarito, every weight the site uses, out of one variable file. */
@font-face {
  font-family: "Gabarito";
  src: url("/assets/fonts/Gabarito-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 900; /* the range the variable file carries — the page asks for 400 and 700 */
  font-style: normal;
  font-display: swap; /* show text in the fallback font straight away rather than waiting */
}

/* Anton, the headline face on the two 4A pages. One weight is all the
   family has — there is no bold Anton, and asking for one only makes
   the browser draw a fake one. The licence sits beside the file as
   Anton-OFL.txt. */
@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/Anton-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono, the label face on the guide pages and nowhere else.
   Added 30 August 2026 with the guide template redesign, whose whole
   "field manual" character rests on a mono for labels, meta, captions,
   numbers and table headers.

   Two files, two weights — 400 for labels and 600 for the section
   numbers — and the LATIN SUBSET ONLY, which is why they are 15 KB
   each rather than 80. The pages set it in capitals with heavy
   tracking and never as a paragraph, so the subset is more than the
   page can spend. If a guide is ever written that needs an accented
   or Greek character in a label, take the fuller subset from Google
   Fonts and replace both files.

   There is no arrow glyph in the subset: the "Swipe" hint on the shot
   row draws its arrow from the next family in the list, which is the
   machine's own monospace. That is deliberate and costs nothing.

   IBM Plex is licensed under the SIL Open Font Licence, a copy of
   which sits beside the files as IBMPlexMono-OFL.txt. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}




/* ============================================================
   BASE
   A short set of plain starting rules — not a copied reset.
   ============================================================ */

/* makes padding and borders count inside a box's stated width, so sizes behave predictably */
* {
  box-sizing: border-box;
}

/* THIS SITE IS A LIGHT DESIGN AND SAYS SO. There is no dark version:
   the palette is four fixed colours and bone is the paper everything
   is printed on. Without this line a browser set to dark mode has to
   guess, and it guesses from its own defaults — which is why an
   untold site's email field, its submit button and its scrollbars can
   come back dark grey against the bone. Saying "light" out loud stops
   the guessing; it is not a preference for the reader, it is a fact
   about the page. Added 5 September 2026. */
:root {
  color-scheme: light;
}

/* the "Get the checklist" link in section 04 jumps down the page —
   this makes the jump glide instead of teleporting, but only for
   people whose device settings have not asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* the page itself: bone background, ink text, Gabarito (or fallback) throughout —
   the text-size-adjust line stops phones "helpfully" inflating the text when
   the screen rotates to landscape, which would break the layout's proportions */
body {
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--colour-bone);
  color: var(--colour-ink);
  font-family: var(--font-main);
  font-size: var(--size-body);
  line-height: var(--line-body);
}

/* headings: bold, tight line spacing, no built-in browser margins to fight with */
h1, h2, h3 {
  margin: 0 0 var(--space-small) 0;
  font-weight: 700;
  line-height: var(--line-heading);
  line-height: round(var(--line-heading) * 1em, 1px);
}

/* paragraphs: a single small gap below each one */
p {
  margin: 0 0 var(--space-small) 0;
}

/* images never spill out of their container, and sit flush with no stray gap underneath */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* links take the colour of the text around them unless a rule below says
   otherwise — the underline-offset line drops every underline slightly
   below the letters, so it stops cutting through their descenders */
a {
  color: inherit;
  text-underline-offset: 0.18em;
}

/* the visible outline when you move through the page with the Tab key —
   this is what makes the keyboard focus state easy to see */
:focus-visible {
  outline: var(--focus-ring) solid var(--colour-brick-red);
  outline-offset: var(--border-hairline);
}

/* ...but ON THE DARK HALF the ring turns bone instead. Brick red on
   ink measures 3.49:1, which is faint enough that the ring is easy to
   lose — and a focus ring you cannot see is not a focus ring. Bone on
   ink is 14.56:1.

   The selectors are every ground on the site that is not bone. The
   first three are the drawing-sheet world: any dark section, the
   footer (ink on every page but not a .section-dark), and the set
   cards on the guides index. That third one used to be `.guides-page`,
   the whole page, because the page was ink from top to bottom; the
   29 Aug 2026 redesign made the page bone with ink cards on it, so
   the bone ring now belongs to the cards alone and the rest of the
   page takes the site's ordinary brick-red one. The five .home ones are the 4A
   world on / and /about: the masthead and hero and the email capture
   are BRICK RED, where a brick red ring measures 1:1 and is not a
   ring at all but an invisible one; the "what you get" band and the
   tab bar are ink.

   The four .gd- ones are the guide pages, added 30 Aug 2026 with the
   guide template redesign: the hero and the closing band are brick,
   the metadata strip is a deeper brick, the signup is ink. The one
   exception inside them is the bone next-steps card, which takes the
   ordinary brick ring back — see .gd-next-card:focus-visible.

   Written for the guides index alone on 23 Aug 2026, made site-wide
   on 26 Aug 2026, extended to the 4A bands on 29 Aug 2026 when an
   audit found the redesigned pages handing out a ring on brick that
   could not be seen, and to the guide pages on 30 Aug 2026. */
.section-dark :focus-visible,
.site-footer :focus-visible,
.guide-set :focus-visible,
.home-masthead :focus-visible,
.home-hero :focus-visible,
.home-cta :focus-visible,
.cl-get :focus-visible,
.site-tabbar :focus-visible,
.site-header.section-brick :focus-visible,
.hp-masthead :focus-visible,
.hp-hero :focus-visible,
.hp-latest :focus-visible,
.hp-get :focus-visible,
.hp-footer :focus-visible,
.gd-hero :focus-visible,
.gd-meta :focus-visible,
.gd-signup :focus-visible,
.gd-next :focus-visible {
  outline-color: var(--colour-bone);
}

/* a set card is its own ink ground standing on bone, so the ring goes
   bone on the card itself rather than on the band around it */
.hp-set:focus-visible {
  outline-color: var(--colour-bone);
}

/* the colour behind text when someone selects it with the mouse —
   blush, so even highlighted text stays in the page's own palette */
::selection {
  background-color: var(--colour-blush);
  color: var(--colour-ink);
}

/* ------------------------------------------------------------
   THE SKIP LINK
   The first thing the Tab key lands on, on every page. It is
   invisible until it is focused, and then it appears top-left as
   a small bone card and jumps past the nav straight to the
   page's content.

   Who it is for: anyone moving through the page with a keyboard
   or a switch instead of a mouse, and screen-reader users. Without
   it they tab through the wordmark and all four nav links again on
   every single page before reaching a word of the writing.

   Added 26 Aug 2026. It costs sighted mouse users nothing: they
   will never see it.
   ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: calc(var(--space-small) / 2);
  left: calc(var(--space-small) / 2);
  z-index: 20; /* above the sticky nav bar, which sits at 10 */

  /* off-screen until focused — moved rather than hidden, so it is
     still in the tab order and still read out */
  transform: translateY(-200%);

  display: inline-flex;
  align-items: center;
  min-height: var(--tap-minimum);
  padding: calc(var(--space-small) / 2) var(--space-small);

  background-color: var(--colour-bone);
  color: var(--colour-ink);
  border: var(--border-hairline) solid var(--colour-ink);
  border-radius: var(--corner-radius);
  box-shadow: var(--card-shadow);
  font-size: var(--size-body);
  text-decoration: none;
}

/* the moment it is focused it slides into view. This uses :focus and
   not :focus-visible on purpose — the link is unreachable with a
   mouse, so every focus it ever gets is a keyboard focus, and the
   plain :focus keeps it working in the odd browser that decides a
   programmatic focus does not count as "visible". */
.skip-link:focus {
  transform: translateY(0);
}

/* the landing point sits clear of the sticky bar rather than
   under it — three grid squares, the same clearance the checklist
   page gives its own in-page jump */
main[id] {
  scroll-margin-top: calc(var(--grid-pitch) * 3);
}

/* hides something from view while screen readers still read it out —
   used for the form labels, which the design has no room to show */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the shared inner column: stops content growing past the max width and centres it,
   with breathing room at the page edges on a phone */
.content-column {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-page-side);
  padding-right: var(--space-page-side);
}


/* ============================================================
   GRID
   The faint 20px drawing-sheet grid, drawn entirely in CSS —
   no image file involved. Any section carrying the class
   section-light or section-dark gets the grid automatically.

   The grid runs behind the text as well — chosen on 19 Aug 2026,
   overriding the brief's original no-grid-through-type rule, with
   the grid kept very faint to compensate.
   ============================================================ */

/* light section: plain bone */
.section-light {
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}

/* dark section: plain ink */
.section-dark {
  background-color: var(--colour-ink);
  color: var(--colour-bone);
}



/* ============================================================
   NAV
   The bar across the top: wordmark on the left, three links on
   the right. On a phone the links hide behind the menu button,
   which js/main.js opens and closes.
   ============================================================ */

/* the full-width bar the nav sits in — its grid background comes from the
   section-light or section-brick class on the header in the page's HTML,
   and the red line under a bone bar sits exactly on a grid line because
   the bar is three grid squares tall.

   THE BAR IS NOT PINNED. It scrolls away with the page, and that is what
   lets it carry the colour of the band directly beneath it: a bar that
   stayed on screen would drag the hero's colour over every band below it.
   It was sticky until 30 August 2026 — see the note on .section-brick
   just below, and the list at the head of js/main.js of what went with
   the pin. */
.site-header {
  /* NO RULE UNDER THE BAR. There was a brick hairline here from the
     first build until 30 August 2026, when it was taken out at the
     user's request: with the bar already carrying the colour of the
     band beneath it, a red line across the join was the one thing
     left saying "two things", and the point of the colour match is
     that it should read as one.

     THE RULE HAS NOT SIMPLY GONE — IT HAS MOVED. On a bone page it
     was also drawing the underside of the open menu panel, which is
     bone on bone and needs an edge to read as a panel at all. It is
     now a border on the panel itself, top and bottom. See THE OPEN
     MENU below, and do not put a rule back here without taking that
     one off. */

  /* how far this bar's own box is held back from the edge of the page —
     read by the phone menu below, which has to reach past it to both
     screen edges. The shared bar is a .content-column, so it is the
     column's side padding; the two mastheads with gutters of their own
     say so on their own rules. */
  --nav-panel-inset: var(--space-page-side);
}

/* ---- THE BAR ON A BRICK PAGE ----
   The bar takes the colour of the band directly beneath it so the two
   read as one sheet, which is what was asked for on 30 August 2026.
   Three pages open on brick — the homepage, the 404 and a written guide
   — and their bar is brick with no rule under it: the rule IS the seam
   this is meant to close. The other pages open on bone and their bar was
   already bone, so nothing on them changes.

   Ink measures 2.63:1 on brick-deep and must never sit on it. Every
   colour below is bone, which measures 5.53:1, and the logo swaps to its
   bone colourway on the same rule the wordmark block explains.

   This replaces .over-ink, which did the same job for a PINNED bar
   crossing a dark band on scroll. With the bar unpinned it can no longer
   cross anything, so the class, the rules and the js that set it have all
   gone (30 Aug 2026). */
.site-header.section-brick {
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
  border-bottom: 0;
}

.site-header.section-brick .nav-links a {
  color: var(--colour-bone);
}

/* lays the wordmark and the links out on one line, pushed to opposite ends
   and centred between the top of the page and the red line — the min-height
   (two grid squares) is what sets how tall the bar is */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--grid-pitch) * 2);
}

/* the ARCHI-PACK wordmark link — now holds the logo image, but keeps the
   old red bold text styling as the fallback, so if the image ever fails
   to load the alt text still reads like the wordmark did */
.wordmark {
  display: inline-flex;   /* shrink-wraps the link to the image, no stray gap below */
  align-items: center;
  min-height: var(--tap-minimum); /* the logo image is only 22–28px tall, which is a small thing to hit with a thumb — this makes the pressable area a full 44px without moving the logo, because the bar centres it (added 26 Aug 2026) */
  color: var(--colour-brick-red);
  font-weight: 700;
  font-size: var(--size-emphasis);
  text-decoration: none;
  letter-spacing: var(--tracking-label);
}

/* the logo image itself — sized by height so it always matches the bar:
   a touch over the old text size because the dot over the i adds headroom
   above the letters; the width follows automatically from the PNG's shape */
.wordmark-logo {
  display: block;
  height: clamp(1.375rem, 3vw, 1.75rem); /* 22px to 28px — tracks --size-emphasis, slightly larger to compensate for the i-dot headroom */
  width: auto;
}

/* ---- the logo's two colourways in this bar ----
   The rule the author set on 29 August 2026 is that the mark always
   contrasts with the ground it sits on: red on bone, bone on red,
   and — decided the same day — bone on ink. This bar meets two of
   those three: it is bone on the pages that open on bone, and brick
   on the pages that open on brick, whose header carries
   `.section-brick` in the HTML.

   BOTH files are in the markup and one is switched off, rather than
   one file having its src rewritten. That is deliberate: the pair is
   decoded up front, so nothing ever fetches a colourway at the moment
   it is needed, and no JavaScript touches the logo at all. It matters
   less now the class is written into the HTML rather than added on
   scroll, but it costs nothing and it is one less thing that can
   blink.

   `display: none` also takes an element out of the accessibility
   tree, so although both images carry the real alt text, a screen
   reader is only ever offered the one on screen. Keep the alt on
   both: whichever is showing is the one that must announce, and the
   one that must show its text if the image fails to load. */
.wordmark-logo-bone {
  display: none;
}

.site-header.section-brick .wordmark-logo-red {
  display: none;
}

.site-header.section-brick .wordmark-logo-bone {
  display: block;
}

/* the list of three nav links, laid out in a row with a gap between them */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-block);
}

/* each nav link: ink text (red at this size would be too faint to pass
   contrast rules), underlined only when hovered */
.nav-links a {
  color: var(--colour-ink);
  text-decoration: none;
  font-size: var(--size-body);
}

/* shows the underline when the mouse is over a nav link */
.nav-links a:hover {
  text-decoration: underline;
}

/* the nav item for the page you are already on — a drawn red rule under
   the word, and the word itself left in the ordinary nav colour. Not red
   type: at 15px, brick red measures 4.17:1 on bone and 3.49:1 on ink, so
   it fails the contrast rules as small text on either half of the site.
   As a drawn rule it is fine on both, which is why this one rule serves
   every page. It lived in the GUIDES INDEX block until 23 August 2026,
   when /about started relying on it too — it is shared, so it belongs
   here with the rest of the bar. */
.nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--colour-brick-red);
  text-decoration-thickness: calc(var(--border-hairline) * 2);
  text-underline-offset: 0.35em;
}

/* ------------------------------------------------------------
   THE MENU BUTTON
   Two lines, not three, and it takes its colour from the bar it
   sits in — so the same mark is bone on the brick bars and ink on
   the bone ones with no per-page rule for either. This is
   /about's button, made the site's on 30 August 2026 when the
   whole of that page's menu was asked for on every page.

   The padding and the matching negative margins are a tap-target
   trick, not a spacing accident. The two bars draw a mark only
   10px tall, far too small to hit with a thumb; the padding grows
   the PRESSABLE area to a full 44px square and the margins cancel
   that growth again, so the hit area opens without the bar it
   sits in opening with it. Change the two together or not at all.
   ------------------------------------------------------------ */
.nav-toggle {
  display: none;   /* switched on below 900px, at the foot of this block */
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  width: 24px;
  padding: 17px 10px;
  margin: -17px -10px;
  border: none;
  background: none;
  color: inherit;   /* a <button> does not inherit colour on its own, and the two bars below are drawn in currentColor */
  cursor: pointer;
}

.nav-toggle-line {
  display: block;
  width: 24px;
  height: 3px;
  margin: 0;
  border-radius: 2px;   /* the rounded end of each line — the only radius in the bar */
  background-color: currentColor;
}


/* ------------------------------------------------------------
   BREAKPOINT — the phone and tablet layout for the nav.
   CSS cannot read the SETTINGS block inside a media query line,
   so the width 899px below is the one kind of number that has to
   be written where it is used. The same number appears in any
   later phone-layout rules, always with this comment beside it.

   It was 767px until 30 August 2026. It is 899px now because the
   menu below is /about's, and /about — like the homepage and the
   404 — has always handed over to its row of links at 900px. One
   menu on every page means one width at which it appears.
   ------------------------------------------------------------ */
@media (max-width: 899px) {

  .nav-toggle {
    display: flex;
  }

  /* the links live behind the button at every width the button is
     shown. Shut, they are not in the page at all — which also keeps
     the second "Main" landmark out of the accessibility tree until
     there is a menu to be in it. */
  .nav-menu {
    display: none;
  }

  /* the bar has to be able to put the panel on a row of its own,
     underneath the wordmark and the button rather than squeezed in
     between them. All three mastheads lay their contents out with
     flex, so all three wrap. */
  .site-nav,
  .home-masthead,
  .hp-masthead {
    flex-wrap: wrap;
  }

  /* ---- THE OPEN MENU ----
     A bone panel that reaches both screen edges, hangs a red rule
     across its top and stands IN THE FLOW: it pushes the page down
     rather than covering it. Set to the right, under the button
     that opened it.

     This is /about's menu, lifted out of that page's block on
     30 August 2026 and made the site's. The bar it drops out of is
     held back from the page edge by a gutter that differs from
     masthead to masthead, so the reach back past that gutter is
     read from --nav-panel-inset, which each bar sets for itself.
     Written with 100vw instead, the panel would overhang by the
     width of a desktop scrollbar and start a sideways scroll. */
  .site-header.nav-open .nav-menu {
    display: block;

    /* THE WIDTH HAS TO BE A WIDTH, NOT A FLEX-BASIS. This panel is a
       flex item, and flex-basis sets an item's main size ahead of
       width — asking for 100% there measures the bar's content box
       and lands the panel two gutters short of the right-hand edge,
       which is exactly the bug this note replaces. Left as a plain
       width, the panel asks for more room than the row it is on has,
       so it wraps onto a row of its own without being told to. */
    flex: 0 0 auto;
    width: calc(100% + (var(--nav-panel-inset) * 2));
    margin: var(--space-small) calc(var(--nav-panel-inset) * -1) 0;
    padding: var(--space-small) 0;

    /* bone paper. Solid, not tinted: it was ink at nine-tenths
       briefly on 29 Aug 2026 and read as a smoked panel rather
       than a sheet. */
    background-color: var(--colour-bone);

    /* RULED TOP AND BOTTOM. The top rule is /about's own, from the
       day this panel was drawn. The bottom one used to be the bar's
       border, which sat under the whole header and so under the
       panel with it; the bar gave that rule up on 30 August 2026 and
       the panel took it, because on a bone page this is bone paper
       on bone paper and the two red lines are the only thing that
       says where it starts and stops. */
    border-top: 2px solid var(--colour-brick-red);
    border-bottom: 2px solid var(--colour-brick-red);
    text-align: right;
  }

  /* the list inside the panel. The bar sets .nav-links out as a row
     with a wide gap for the desktop layout; stood up in a column
     that gap lands on top of the padding each link already has, so
     it is zeroed here and the padding does the spacing on its own. */
  .site-header.nav-open .nav-menu .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .site-header.nav-open .nav-links a {
    display: block;
    /* the right padding is one inset, which is what lands the right
       edge of the words on the same line as the right edge of the
       button's bars directly above them, now that the panel itself
       runs past that line to the screen edge. The left padding is
       doing nothing to the alignment; the link is full width for the
       tap target either way. */
    padding: calc(var(--space-small) / 2) var(--nav-panel-inset) calc(var(--space-small) / 2) var(--space-small);
    color: var(--colour-ink);

    /* Anton, the display face, so the menu reads with the same voice
       as the headlines rather than as body text in a box. Uppercase
       because that is how this site sets Anton everywhere — it is the
       rule in DESIGN.md, not a choice made here. Weight stays 400:
       Anton ships one weight and asking for a bolder one only gets a
       synthetic smear. */
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--size-lead);
    text-transform: uppercase;
    position: relative;   /* the dotted rule below hangs off this */
  }

  /* A thin dotted rule BETWEEN the items — never above the first, and
     deliberately not the full way across. It is a pseudo-element
     rather than a border so that it can stop short: it begins on the
     same right-hand margin the words sit on and runs left a little
     over half the panel, keeping the eye in the right-hand column
     where the list is set. A border would have run wall to wall and
     turned the panel into a table. (29 Aug 2026, at the user's
     request.) */
  .site-header.nav-open .nav-links li + li a::before {
    content: "";
    position: absolute;
    top: 0;
    right: var(--nav-panel-inset);
    width: 55%;
    border-top: var(--border-hairline) dotted var(--colour-ink);
  }

  /* THE FOCUS RING INSIDE THE PANEL GOES BACK TO RED. The brick bars
     set a bone ring on everything in them, and a bone ring on this
     bone panel would be the invisible ring that rule exists to
     prevent. Red on bone measures 4.17:1, over the 3:1 an indicator
     has to meet. If the panel ever changes colour again, check this
     with it. */
  .site-header.nav-open .nav-menu :focus-visible {
    outline-color: var(--colour-brick-red);
  }
}


/* ============================================================
   THE BOTTOM BAR WHEN NOBODY IS SCROLLING

   Every page pins a bar of quick links to the foot of the screen.
   From 30 August 2026 that bar takes itself out of the way: three
   seconds after the last scroll it slides off the bottom edge, and
   the next scroll brings it back. js/main.js job 5 does the counting
   and adds or removes .is-idle; everything you can see is here.

   OPACITY, NOT VISIBILITY. visibility: hidden would take the four
   links out of the tab order, and someone reaching the bar by
   keyboard would have no way to bring it back. Left visible to the
   browser, the bar can still be tabbed into, and main.js brings it
   back the moment it is. pointer-events is what stops a thumb
   pressing a link it cannot see.

   If main.js never loads, .is-idle is never added and the bar
   simply stays where it has always been.
   ============================================================ */

.site-tabbar {
  transition: transform 240ms ease, opacity 240ms ease;
}

/* the translateX(-50%) has to be repeated here, not just the slide:
   transform is one property, and writing translateY alone would drop
   the centring and throw the bar at the left edge on its way out */
.site-tabbar.is-idle {
  transform: translate(-50%, 110%);
  opacity: 0;
  pointer-events: none;
}

/* someone who has asked for less movement gets the bar going and
   coming without the slide — it fades, and the transform lands in
   one step */
@media (prefers-reduced-motion: reduce) {
  .site-tabbar {
    transition: opacity 120ms linear;
  }
}


/* ============================================================
   THE BOTTOM BAR
   Four quick links pinned to the foot of the screen, the way an
   app's are. It is a phone and tablet pattern and it is switched
   off at 900px, where there is room for the nav to carry the same
   places itself.

   It began on /about and the homepage; it was asked for on every
   page on 30 August 2026, and this is the shared version the other
   twelve draw. Those two keep their own — the homepage's is capped
   to the 430px column its whole phone layout is drawn in, which is
   a page fact rather than a site one — so do not fold them into
   this without checking that width first.

   It is FIXED rather than sticky. /about's is sticky because that
   page is one column with a wrapper to stick inside; this one has
   to hang off the window on pages of every shape, guide sidebars
   and holding sheets included.

   It takes itself out of the way after three seconds of stillness
   along with the other two — see THE BOTTOM BAR WHEN NOBODY IS
   SCROLLING, above, and js/main.js job 5.
   ============================================================ */

.site-tabbar {
  position: fixed;
  bottom: 0;
  z-index: 60;

  /* CENTRED, AND FULL WIDTH UNLESS A PAGE SAYS OTHERWISE. Most pages
     run to both edges of the window and the bar runs with them. A page
     whose own layout is held to a measure sets --tabbar-max and the
     bar is held to the same one, so it never overhangs the sheet it
     belongs to. /about is the only page that does — see .home in the
     640px block. The homepage did too, until its 430px cap was taken
     off on 30 August 2026. */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--tabbar-max, none);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);   /* the strip an iPhone keeps for its home indicator — without it the tabs sit under it */
  background-color: var(--colour-ink);
  border-top: 2px solid var(--colour-brick-red);
  text-align: center;
}

.site-tabbar a {
  /* the padding is carried on the link, not on the bar, so each cell
     is a full-height tap target rather than the height of the words.
     16px above and below comes to 43px, one under the 44px a thumb
     needs, so the floor makes up the pixel. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 4px;
  min-height: var(--tap-minimum);

  /* the rule between one tab and the next. Four labels of very
     different lengths in four equal cells with nothing between them
     read as words scattered along a black bar; ruled apart they read
     as four cells, which is what they are. The first has no rule
     because there is no tab to its left. */
  border-left: var(--border-hairline) solid var(--colour-line-on-ink);
  color: var(--colour-tab-quiet);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;

  /* THE BAR HAS TO BE EXACTLY --tabbar-height AT EVERY WIDTH, because
     that is the number every footer on the site reserves at its foot.
     line-height 1 is what fixes it: the label runs 10px on a phone and
     12px by the time the bar switches off at 900px, and at 1 the line
     box is the type and nothing else — so the cell is 32px of padding
     plus the type, the 44px floor catches the small end, and the bar
     measures 44 + the 2px rule at both. The site sets 1.6 on <body>,
     which is right for a paragraph and would put this bar at 50px on a
     phone and 48px on a tablet, neither of which the footer knows
     about. `normal` was no better: it drifts with the font. */
  line-height: 1;
}

.site-tabbar a:first-child {
  border-left: 0;
}

.site-tabbar a:hover {
  color: var(--colour-bone);
}

/* the tab you are on: full bone, on a cell lifted just clear of the
   bar's ink. Colour alone cannot carry this, because the tab you are
   on and the call to action would both be bright and neither would
   say which is which. Bone on the lit cell measures 12:1, against
   14.56:1 on the bar's own ink. */
.site-tabbar a[aria-current="page"] {
  color: var(--colour-bone);
  background-color: var(--colour-tab-selected);
}

/* the last tab is the call to action and is the one marked word in
   the bar. The design draws it in brick red, and brick red on ink at
   label size measures 3.49:1 against the 4.5:1 small text has to
   meet — so the word takes bone and the red becomes a rule under it.
   A rule rather than a mark beside it because a tab cell at 320px is
   80px wide and the word plus a mark would wrap.

   The `a` is carried on purpose: .site-tabbar a above sets the quiet
   colour and would outrank a lone class, which is a trap this site
   has fallen into twice — once on the /about bar and once on the
   homepage's nav pill, both recorded where they happened. */
.site-tabbar a.site-tabbar-cta {
  color: var(--colour-bone);
  text-decoration: underline;
  text-decoration-color: var(--colour-brick-red);
  text-decoration-thickness: calc(var(--border-hairline) * 2);
  text-underline-offset: 0.35em;
}

/* the footer reserves the bar's height at its foot, so its last line
   is never hidden underneath it. --tabbar-height is the bar measured:
   44px of tap target under a 2px rule. */
.site-tabbar-page .site-footer {
  padding-bottom: calc(var(--space-block) + var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
}

/* ---- and from 900px the bar goes, along with the room kept for it ---- */
@media (min-width: 900px) {
  .site-tabbar {
    display: none;
  }

  .site-tabbar-page .site-footer {
    padding-bottom: var(--space-block);
  }
}


/* ============================================================
   01 — HERO
   ============================================================ */

/* the hero band: starts one grid square under the red line (halved
   from two in the 22 Aug 2026 live session so the headline sits
   higher) — half space below, because section 02 brings the other half */
.hero {
  padding-top: var(--grid-pitch);
  padding-bottom: calc(var(--space-section) / 2);
}

/* holds every hero piece directly — headline, sheet image, credential,
   form, note and spec strip are all children of this one grid. On a
   phone they simply stack in the order they appear in index.html
   (headline first, sheet second); on desktop the breakpoint rule at
   the end of this section arranges them into two columns.
   (Layout chosen in the 22 Aug 2026 live design session.) */
.hero-layout {
  display: grid;
  gap: var(--space-hero-row);
}

/* the grid's gap does all the vertical spacing here, so each piece
   gives up its own built-in margin — and each is allowed to shrink
   with the screen, so the one-line spec strip can never push the
   page wider than the window */
.hero-layout > * {
  margin: 0;
  min-width: 0;
}

/* the big headline — near-Black straight from the variable font, which
   carries any weight from 400 to 900 (875 was dialled in by eye in the
   22 Aug 2026 live design session). text-wrap: balance asks the browser
   to even out the line lengths rather than leaving one word stranded. */
.hero-headline {
  font-size: var(--size-headline);
  font-weight: 875;
  line-height: var(--line-headline);
  line-height: round(var(--line-headline) * 1em, 1px);
  letter-spacing: var(--tracking-headline);
  text-wrap: balance;
  margin-bottom: var(--space-block);
}

/* the words inside the headline that turn brick red — now also carrying
   a drawn red rule underneath, the same pen stroke as section 04's
   emphasis line. The rule is drawn as a background stripe rather than
   an underline so it keeps its thickness, and the box-decoration lines
   make it follow the words even when they break across two lines. */
.headline-red {
  color: var(--colour-brick-red);
  background-image: linear-gradient(var(--colour-brick-red), var(--colour-brick-red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% var(--headline-rule);
  padding-bottom: var(--headline-rule-gap);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* the credential paragraph: small but always readable, kept to a readable line length */
.hero-credential {
  font-size: var(--size-note);
  max-width: 34em; /* em means "about thirty-four letters-and-spaces wide" — stops the lines getting long */
  margin-bottom: var(--space-small);
}

/* The hero's action on the checklist page: a LINK down to the one
   signup form in section 07, wearing the button's clothes. It replaced
   a second copy of the form on 28 August 2026 — one page, one capture.

   .cta-button was written for a <button>, which centres its own label;
   an <a> does not, so the text is centred here and the underline taken
   off. It carries both classes, so it keeps the button's colour, size
   and the full-width phone rule with no second copy of any of them. */
.hero-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* the label and the arrow are two flex items, and flex swallows the
     space typed between them in the HTML — this puts it back. In em, so
     it holds its proportion if the button's text size ever changes. */
  gap: 0.35em;
  text-align: center;
  text-decoration: none;
}

/* the signup form: field and button side by side, wrapping onto two lines when narrow */
.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small);
  margin-bottom: var(--space-small);
}

/* the email field — its text is one step larger than body text on purpose:
   see the --size-input note in SETTINGS (iPhones zoom in on smaller fields) */
.email-input {
  font-family: var(--font-main);
  font-size: var(--size-input);
  color: var(--colour-ink);
  caret-color: var(--colour-brick-red); /* the blinking typing line inside the field is brick red, like the rest of the page's marks */
  background-color: var(--colour-bone);
  border: var(--border-hairline) solid var(--colour-ink);
  border-radius: var(--corner-radius);
  padding: calc(var(--space-small) / 2) var(--space-small); /* half-height padding keeps the field slim */
  min-height: var(--tap-minimum); /* never shorter than a thumb needs */
  flex-grow: 1; /* lets the field stretch to fill whatever room the button leaves */
  flex-basis: calc(var(--grid-pitch) * 7); /* the width the field starts from before stretching — small enough that field and button share one line on a desktop, wide enough to type into */
  min-width: 0; /* lets the field shrink rather than shoving the button onto the next line */
}

/* the example address shown inside the field before anyone types —
   ink at reduced strength (see --colour-placeholder in SETTINGS), the
   same in every browser instead of each browser's own grey */
.email-input::placeholder {
  color: var(--colour-placeholder);
  opacity: 1; /* one browser (Firefox) fades placeholders by itself — this switches that off so the colour above is what shows */
}

/* THE button — the only solid brick red fill anywhere on the page.
   Nothing else may ever be given this background. */
.cta-button {
  font-family: var(--font-main);
  font-size: var(--size-lead);
  font-weight: 800; /* ExtraBold, matching the hero headline */
  color: var(--colour-bone);
  background-color: var(--colour-brick-deep);
  border: none;
  border-radius: var(--corner-radius);
  padding: calc(var(--space-small) / 2) var(--space-block); /* half-height padding keeps the button slim */
  min-height: var(--tap-minimum); /* never shorter than a thumb needs */
  cursor: pointer;
}

/* the button darkens slightly under the mouse, and a little more
   while pressed — the sign that pressing it is doing something.
   brightness(0.94) means "94% as bright"; no second red is needed. */
.cta-button:hover {
  filter: brightness(0.94);
}
.cta-button:active {
  filter: brightness(0.88);
}

/* the keyboard focus ring on the button is ink rather than red,
   so it stands out clearly against the red fill */
.cta-button:focus-visible {
  outline: var(--focus-ring) solid var(--colour-ink);
}

/* the small reassurance line under the form — the gap below it is owned
   by the spec strip's own top margin, so the two never fight */
.form-note {
  font-size: var(--size-note);
  max-width: 34em;
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   THE ANSWER UNDER THE FORM
   The line that appears between the form and the reassurance
   note once the address has been sent. It is written by job 7
   in main.js, which makes it the first time it is needed — it
   is never in the HTML, so there is nothing to hide on load and
   nothing to keep in step across seven copies of the form.

   It carries the drawn mark used by every small label on this
   site (see THE DRAWN LABEL MARK at the end of this file), but
   sets it here rather than joining that block's list, because
   those labels are all one line and this one wraps: the rule
   has to sit on the first line's middle, not on the middle of
   a three-line paragraph.

   The colour of the mark is the whole difference between the
   two states. A signup that worked is calm, so its rule is the
   text's own colour turned down — quiet on bone and on ink
   without needing a value for each. A signup that failed is the
   thing that matters on the page at that moment, so its rule is
   brick red, exactly as red is used everywhere else here.
   The words themselves stay full-strength in both, and neither
   state is told apart by colour alone: each says plainly what
   happened.
   ------------------------------------------------------------ */

.form-status {
  display: flex;
  align-items: flex-start; /* not centre: the message wraps to two or three lines and the rule belongs beside the first of them */
  gap: calc(var(--space-small) / 2);
  font-size: var(--size-note);
  font-weight: 700; /* a shade heavier than the note below it, so the answer reads before the small print */
  color: inherit;   /* ink on the light sections, bone on the dark ones */
  max-width: 34em;
  margin-top: 0;
  margin-bottom: var(--space-small); /* the same gap the form itself leaves, so the rhythm does not change when this line appears */
}

.form-status::before {
  content: "";
  flex: 0 0 auto;
  width: var(--grid-pitch);                   /* one grid square long, like every other drawn mark */
  height: calc(var(--border-hairline) * 3);   /* the datum line's pen weight */
  margin-top: 0.55em;                         /* drops the rule onto the middle of the first line of text */
  background-color: currentColor;             /* the text's own colour, so it needs no value for bone and another for ink */
  opacity: 0.4;                               /* turned down: a signup that worked is not the loudest thing on the page */
}

/* the failed state — see the note above on why this one is red */
.form-status-failed::before {
  background-color: var(--colour-brick-red);
  opacity: 1;
}

/* ...except on the 4A capture band, which IS brick red, where a brick
   red mark is a mark you cannot see and a failed signup ends up looking
   exactly like a successful one. There the failure takes bone at full
   strength instead, against the 0.4 the success mark is turned down to —
   so the two still read differently, just the other way round. The words
   already differ; this is the signal beside them. (29 Aug 2026, audit.) */
.home-cta .form-status-failed::before {
  background-color: var(--colour-bone);
}

/* the spec strip: the four entries spread across the full width on one
   line, with a faint red line above and below — the strip is exactly one
   grid square tall, so it sits in the grid like a drawing-sheet row */
.spec-strip {
  display: flex;
  flex-wrap: wrap; /* if the four entries ever run out of room, they flow onto a second ruled row instead of escaping past the red lines */
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--space-small) / 2);
  min-height: var(--grid-pitch);
  margin-top: var(--grid-pitch); /* one grid row of gap above — js/main.js adds a few pixels to this so the red lines sit exactly on grid lines */
  border-top: var(--border-hairline) solid var(--colour-rule-faint);
  border-bottom: var(--border-hairline) solid var(--colour-rule-faint);
  margin-bottom: 0;
}

/* one entry of the spec strip — never allowed to break in the middle of itself */
.spec-cell {
  font-size: var(--size-label);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   BREAKPOINT — the spec strip between 768px and 1023px.
   Here the desktop two-column layout is already in place, but
   the copy column is still too narrow to hold all four entries
   on one line. So in this band the strip becomes two ruled rows
   of two entries each — exactly two grid squares tall, like a
   stacked title block. This and the 1100px line below are the
   only places the page uses a width other than 767/768px, and
   they only affect these four entries.
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023px) {

  /* no extra gap between the two rows — each row's own height
     (set on the cells below) is the spacing */
  .spec-strip {
    row-gap: 0;
  }

  /* each entry claims just under half the strip's width, which is
     what makes the four entries fall into two rows of two */
  .spec-cell {
    flex-basis: 45%;
    line-height: calc(var(--grid-pitch) - var(--border-hairline)); /* each row is one grid square tall, so the strip's red rules stay on the background grid */
  }

  /* the second entry of each row sits flush against the right rule */
  .spec-cell:nth-child(even) {
    text-align: right;
  }
}

/* ------------------------------------------------------------
   BREAKPOINT — the spec strip's spaced-out lettering.
   The wide letter-spacing needs more room than the copy column
   has below 1100px, so it only switches on from 1100px up.
   Between 1024px and 1099px the strip is one plain-spaced row.
   ------------------------------------------------------------ */
@media (min-width: 1100px) {
  .spec-cell {
    letter-spacing: var(--tracking-label);
  }
}

/* the sheet image: fills its column, and the reserved shape never changes,
   so the page does not jump when the placeholder is swapped for a real file */
.hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 700; /* the image's width-to-height shape — matches the 560 × 700 file */
}

/* ------------------------------------------------------------
   BREAKPOINT — the desktop layout for the hero.
   768px is the same boundary as the 767px in the nav rules:
   767px and down is the phone layout, 768px and up is desktop.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   BREAKPOINT — the hero goes side by side from 600px, earlier
   than the page's usual 768px boundary, so landscape phones and
   small tablets get the two-column hero too. The sheet column
   sizes itself from the window — 43% of its width, never
   narrower than 240px, never wider than its natural 560px — and
   the gap between the columns flexes the same way, so every
   width in between gets a proportionate composition rather than
   a jump. (Chosen in the 22 Aug 2026 live design session.)
   ------------------------------------------------------------ */
@media (min-width: 600px) {

  /* the hero becomes a named-areas grid: the sheet image fills the
     whole left column and each copy piece takes its own row on the
     right, top to bottom. The words in quotes are a picture of the
     layout — each row of quotes is a row of the grid, and the dot
     means "leave this cell empty". To swap the image to the
     right-hand side, mirror the two words on every row. */
  .hero-layout {
    grid-template-columns: clamp(240px, 43vw, 560px) 1fr;
    grid-template-areas:
      "image headline"
      "image credential"
      "image action"
      "image note"
      "image spec"
      "image .";
    column-gap: clamp(var(--space-block), 6vw, var(--space-section));
    row-gap: var(--space-hero-row);
    align-items: start;
  }

  /* which piece goes in which named cell — the names match the
     quoted words in the picture above */
  .hero-layout .hero-headline   { grid-area: headline; }
  .hero-layout .hero-credential { grid-area: credential; }
  /* the "action" row held a copy of the signup form until 28 Aug 2026,
     and holds the link down to the single form now — hence the name,
     which is about the job the row does rather than what fills it */
  .hero-layout .hero-cta-link   { grid-area: action; justify-self: start; }
  .hero-layout .form-note       { grid-area: note; }
  .hero-layout .spec-strip      { grid-area: spec; }
  .hero-layout .hero-image      { grid-area: image; align-self: start; }
}

/* ------------------------------------------------------------
   BREAKPOINT — the phone layout for the hero.
   767px is the same boundary used everywhere else.
   ------------------------------------------------------------ */
@media (max-width: 767px) {

  /* on a phone the button runs the whole way across the screen */
  .cta-button {
    width: 100%;
  }
}


/* ============================================================
   02 — WHAT IS INSIDE
   ============================================================ */

/* the section band — half space above (the hero brings the other half),
   quarter below, because section 03 follows straight on and the two
   belong together */
.what-is-inside {
  padding-top: calc(var(--space-section) / 2);
  padding-bottom: calc(var(--space-section) / 4);
}

/* The small numbered section labels — "03 — HOW IT IS STRUCTURED"
   and the rest — were removed from every section on 22 Aug 2026 at
   the user's request: the numbers read as a second, competing set of
   headings and made the page harder to follow, not easier. The
   headings alone now carry each section. Nothing else used the style,
   so it has gone with them. (The 01/02/03 tabs on the section 03
   cards and the FIG 01/02/03 labels in section 06 are a different
   thing and stay: they number items within a section, not sections.) */

/* every section heading, e.g. "Twelve habits." */
.section-heading {
  font-size: var(--size-heading);
}

/* section 02 is one linear flow — the heading, then the text under it
   (the old two-column desktop split was removed when the section was
   distilled in the 22 Aug 2026 live design session). This rule keeps
   the paragraph lines a comfortable reading length. */
.what-is-inside-text p {
  max-width: 34em;
}

/* ------------------------------------------------------------
   THE OUTLINE PANEL — the box drawn around section 02.
   The section used to float loose on the sheet with nothing
   holding it; this gives it a drawn box to sit in. Three things
   do the work: solid bone paper, so the faint background grid
   stops at its edge and the panel reads as a sheet laid on top;
   a clean ink outline; and the same hard offset shadow the
   section 03 cards use — no blur, a draftsman's cast.
   (Added 22 Aug 2026 at the user's request. A hand-drawn wobbly
   version of this outline was built and rejected the same day —
   the clean line looked better. Do not reinstate the wobble.)
   ------------------------------------------------------------ */
.outline-panel {
  background-color: var(--colour-bone);
  border: var(--panel-line) solid var(--colour-ink);
  border-radius: var(--corner-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-block);
}

/* the heading is the first thing in the panel, so it must not push
   its own gap down from the top of the box */
.outline-panel > :first-child {
  margin-top: 0;
}

/* ------------------------------------------------------------
   BREAKPOINT — the phone layout for the outline panel.
   CSS cannot read the SETTINGS block inside a media query line,
   so the width 767px below is the one kind of number that has to
   be written where it is used.
   ------------------------------------------------------------ */
@media (max-width: 767px) {

  /* a narrow screen cannot spare 40px of padding on both sides —
     the small gap keeps the reading width usable down to a 320px phone */
  .outline-panel {
    padding: var(--space-small);
  }
}

/* ------------------------------------------------------------
   SECTION 02'S SCROLL MOMENT — "the checker's pass".
   As the section crosses the screen, a red rule draws itself
   under the heading (left to right, like a pen stroke) and the
   line of text inks in behind it. Chosen in the 22 Aug 2026
   live design session.

   Everything below only switches on in browsers that support
   scroll-driven animations AND for people who have not asked
   their device for reduced motion — everyone else sees the
   section plain and still, which is the intended fallback.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* publishes the section's journey through the screen as a
       timeline the two animations below can run along */
    .what-is-inside {
      view-timeline: --what-inside-pass block;
    }

    /* the heading makes room for the drawn rule below itself */
    .what-is-inside .section-heading {
      position: relative;
      padding-bottom: var(--space-small);
    }

    /* the rule itself: three hairlines thick (the same pen weight
       as section 04's emphasis line), drawn from the left as the
       section scrolls in */
    .what-is-inside .section-heading::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: calc(var(--border-hairline) * 3);
      background-color: var(--colour-brick-red);
      transform: scaleX(0);
      transform-origin: left;
      animation: what-inside-draw linear both;
      animation-timeline: --what-inside-pass;
      animation-range: entry 10% cover 45%;
    }

    /* the line of text fades up from faint to full as the rule draws */
    .what-is-inside .what-is-inside-text p {
      animation: what-inside-ink linear both;
      animation-timeline: --what-inside-pass;
      animation-range: entry 25% cover 55%;
    }

    @keyframes what-inside-draw {
      to { transform: scaleX(1); }
    }
    @keyframes what-inside-ink {
      from { opacity: 0.15; }
    }
  }
}


/* ============================================================
   03 — HOW IT IS STRUCTURED
   There is deliberately no heading in this section — the label
   runs straight into the three cards.
   ============================================================ */

/* the section band — quarter space above (it follows straight on
   from section 02), full space below */
.how-structured {
  padding-top: calc(var(--space-section) / 4);
  padding-bottom: var(--space-section);
}

/* the row of three cards: on a phone they sit side by side and you swipe
   across them; on desktop all three show at once (see the breakpoint below).
   The row also carries the red datum line the cards hang from — drawn by
   the ::before rule underneath, no image file involved. The padding-top
   is the room the line and the number tabs need above the cards.
   (Datum-line arrangement chosen in the 22 Aug 2026 live design session.) */
.structure-cards {
  display: flex;
  gap: var(--space-block);
  position: relative; /* the anchor the datum line positions itself against */
  padding-top: calc(var(--grid-pitch) * 2);
  overflow-x: auto; /* this is what lets the row scroll sideways on a phone */
  padding-bottom: var(--space-small); /* room for the scrollbar so it does not sit on the text */
  scroll-snap-type: x mandatory; /* a swipe on a real phone settles neatly on the next card */
  scrollbar-color: var(--colour-brick-red) transparent; /* makes the scrollbar under the row red and easy to spot */
}

/* the drawn red datum line itself: one grid square down from the top of
   the row, running the row's full width, three hairlines thick — the
   same pen weight as the emphasis line in section 04 */
.structure-cards::before {
  content: "";
  position: absolute;
  top: var(--grid-pitch);
  left: 0;
  right: 0;
  height: calc(var(--border-hairline) * 3);
  background-color: var(--colour-brick-red);
}

/* one card: a solid bone sheet hanging below the datum line, framed by
   an ink hairline all round, lifted by the drawn offset shadow — inside
   it the title and the text; the number sits above, on the line */
.structure-card {
  scroll-snap-align: start; /* each card is a snapping point for the swipe */
  flex-shrink: 0; /* stops the cards being squashed to fit — this is what makes the row scroll instead */
  width: calc(var(--grid-pitch) * 10); /* each card is 10 grid squares wide on a phone — narrow enough that the edge of the next card stays visible, so it is obvious there is more to swipe to */
  background-color: var(--colour-bone); /* solid sheet, so the background grid stops behind the card */
  border: var(--border-hairline) solid var(--colour-ink);
  border-radius: var(--corner-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-small);
  position: relative; /* the anchor the number tab positions itself against */
}

/* the card's number: a small bordered tab sitting on the datum line
   above the card, like a reference bubble on a drawing — bone behind
   it so the line visibly passes under the tab */
.card-number {
  position: absolute;
  top: calc(var(--grid-pitch) * -1.5 - var(--border-hairline)); /* lifts the tab out of the card and onto the line */
  left: var(--space-small);
  background-color: var(--colour-bone);
  border: var(--border-hairline) solid var(--colour-ink);
  padding: calc(var(--space-small) / 4) calc(var(--space-small) / 2);
  line-height: 1;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  margin: 0;
}

/* under the mouse a card rises off the sheet, its drawn shadow deepens
   and its number tab's border inks red — the sign the card is being
   read. The sizes and time live in SETTINGS (--card-hover-…).
   (Added in the 22 Aug 2026 live design session.) */
.structure-card:hover {
  translate: 0 calc(var(--card-hover-lift) * -1);
  box-shadow: var(--card-hover-shadow);
}
.structure-card:hover .card-number {
  border-color: var(--colour-brick-red);
}

/* the movement between resting and lifted is eased rather than instant —
   but only for people who have not asked their device for reduced motion
   (the lift and red border still happen for them, just without the glide) */
@media (prefers-reduced-motion: no-preference) {
  .structure-card {
    transition:
      translate var(--card-hover-time) cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow var(--card-hover-time) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .card-number {
    transition: border-color var(--card-hover-time) ease;
  }
}

/* the card's title */
.card-title {
  font-size: var(--size-lead);
}

/* the card's body text */
.card-text {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   BREAKPOINT — the desktop layouts for sections 02 and 03.
   768px is the same boundary used by the nav and the hero:
   767px and down is the phone layout, 768px and up is desktop.
   ------------------------------------------------------------ */
@media (min-width: 768px) {

  /* section 03 on desktop: all three cards share the width equally, no sideways scrolling */
  .structure-cards {
    overflow-x: visible;
    padding-bottom: 0;
  }
  .structure-card {
    flex-shrink: 1;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   SCROLL-DRIVEN PAN — section 03's cards slide sideways as the
   section travels up the screen. Nothing pins: the page keeps
   scrolling normally the whole way, so the skyline and section
   04 stay in view two grid squares below the cards instead of
   only arriving once the slide is over. (Reworked 22 Aug 2026 —
   the earlier version pinned the section full-screen while the
   cards slid, which left 03 alone on screen and held 04 back.)

   Everything below only switches on in browsers that support
   scroll-driven animations AND for people who have not asked
   their device for reduced motion — everyone else keeps the
   plain layout above (three across on desktop, swipe on a phone).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* the section publishes its journey up the screen as a timeline
       the cards animate along, and closes with the two-grid-square
       gap that keeps the skyline (and section 04 behind it) sitting
       just below the cards while they slide */
    .how-structured {
      view-timeline: --structure-pan block;
      padding-bottom: calc(var(--grid-pitch) * 2);
    }

    /* the wrapper clips the cards that slide off to the sides —
       sideways only, so the hover lift's drawn shadow can still
       fall below the row. clip rather than hidden, so the browser
       can never scroll the clipped edge back into view (for
       instance when a card is reached with the Tab key) */
    .how-structured-viewport {
      overflow-x: clip;
      overflow-y: visible;
    }

    /* makes the column a measuring container, so the keyframe below can
       use its inner width (100cqw) to know exactly how far to slide.
       The width must be said out loud here: a measuring container no
       longer sizes itself from its contents — 100% restores the normal
       width, the auto margins still centre it, and max-width still
       caps it on a big screen */
    .how-structured .content-column {
      container-type: inline-size;
      width: 100%;
    }

    /* the row: sized to its full content so the slide distance is the
       real overhang, driven by the section timeline instead of a swipe */
    .structure-cards {
      width: max-content;
      overflow: visible;
      padding-bottom: 0;
      scroll-snap-type: none;
      animation: structure-pan linear both;
      animation-timeline: --structure-pan;
      animation-range: contain 0% contain 100%; /* the slide runs from the moment the whole section has scrolled into view to the moment its top touches the top of the screen */
    }

    /* while the pan is active every card takes the pan width, on
       phones and desktop alike — the row must overflow to have
       anywhere to slide to */
    .structure-card {
      flex-shrink: 0;
      width: var(--structure-card-width);
    }

    /* start: first card on the left edge of the column.
       end: slid left by the row's full width minus one column width,
       which lands the last card's right edge on the column's right edge */
    @keyframes structure-pan {
      to {
        transform: translateX(calc(-100% + 100cqw));
      }
    }
  }
}


/* ============================================================
   SKYLINE DIVIDER
   The crenellated strip between the light half and the dark half.
   The shapes are the tile images/divider-skyline.svg, repeated
   across the page — overwrite that file to redraw the skyline.
   ============================================================ */

/* the strip itself: bone behind, with the ink skyline tile repeating along the bottom */
.skyline-divider {
  height: calc(var(--grid-pitch) * 3); /* three grid squares tall */
  background-color: var(--colour-bone);
  background-image: url("/assets/images/divider-skyline.svg");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 100%;
}


/* ============================================================
   04 — ONE FAILURE, PLAINLY
   ============================================================ */

/* the section band — full space above, half below, because section 05
   follows straight on in the same dark half */
.one-failure {
  padding-top: var(--space-section);
  padding-bottom: calc(var(--space-section) / 2);
}

/* holds the heading and the paragraphs: stacked on a phone,
   side by side on desktop (see the breakpoint below) */
.one-failure-layout {
  display: grid;
  gap: var(--space-block);
  margin-bottom: var(--space-block);
}

/* keeps the paragraph lines a comfortable reading length */
.one-failure-text p {
  max-width: 34em;
}

/* the larger emphasis line, with a red rule underneath it */
.emphasis-line {
  font-size: var(--size-emphasis);
  font-weight: 700;
  /* 1.15 WRITTEN OUT, NOT --line-heading. This is a paragraph, not a
     heading: when the heading leading was halved on 2 September 2026
     this line stayed where it was, so it holds the old value itself. */
  line-height: 1.15;
  max-width: 22em;
  width: fit-content; /* the underline stops where the words stop, not at the page edge */
  border-bottom: calc(var(--border-hairline) * 3) solid var(--colour-brick-red);
  padding-bottom: var(--space-small);
  margin-bottom: var(--space-block);
}

/* the self-test box: a thin light border around the paragraph */
.self-test-box {
  border: var(--border-hairline) solid var(--colour-hairline-on-ink);
  padding: var(--space-small);
  max-width: 34em;
  margin-bottom: var(--space-block);
}

/* the last line inside the box needs no gap below itself */
.self-test-box p:last-child {
  margin-bottom: 0;
}

/* the "Get the checklist" link inside the box: bone, underlined so it
   reads as a link — it jumps down to the form in section 07. The
   display and padding lines quietly enlarge the area a finger can
   press, without moving anything visible. The padding is half a small
   space top and bottom, which is what takes a 24px line of text up to
   the 44px minimum a thumb needs — it was a quarter, and measured 34px.
   The negative margins cancel the push on the box, so nothing visible
   moved when it grew. */
.self-test-action a {
  color: var(--colour-bone);
  text-decoration: underline;
  display: inline-block;
  padding-top: calc(var(--space-small) / 2);
  padding-bottom: calc(var(--space-small) / 2);
  margin-bottom: calc(var(--space-small) / -2); /* cancels the padding's push on the box below, so the box stays the same height */
  margin-top: calc(var(--space-small) / -2);
}

/* the one-line pointer to the InDesign template */
.template-line {
  max-width: 40em;
  margin-bottom: var(--space-block);
}

/* the link inside it: bone, underlined so it reads as a link */
.template-line a {
  color: var(--colour-bone);
  text-decoration: underline;
}

/* the full-width losses drawing — the reserved shape never changes,
   so the page does not jump when the placeholder is swapped */
.losses-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1120 / 400; /* matches the 1120 × 400 file */
}


/* ============================================================
   05 — WHO WRITES THIS
   ============================================================ */

/* the section band — half space above and below, because sections 04, 05,
   06 and 07 all run on in the same dark half */
.who-writes {
  padding-top: calc(var(--space-section) / 2);
  padding-bottom: calc(var(--space-section) / 2);
}

/* holds the text and the drawing: stacked on a phone,
   side by side on desktop (see the breakpoint below) */
.who-writes-layout {
  display: grid;
  gap: var(--space-block);
}

/* keeps the paragraph lines a comfortable reading length */
.who-writes-text p {
  max-width: 34em;
}

/* the drawing fills its column, holding its shape */
.who-writes-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 420; /* matches the 560 × 420 file */
}

/* ------------------------------------------------------------
   BREAKPOINT — the desktop layouts for sections 04 and 05.
   768px is the same boundary used everywhere else.
   ------------------------------------------------------------ */
@media (min-width: 768px) {

  /* section 04 on desktop: heading in the left half, paragraphs in the right */
  .one-failure-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-section);
    align-items: start;
  }

  /* section 05 on desktop: text on the left, drawing on the right */
  .who-writes-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-section);
    align-items: start;
  }
}


/* ============================================================
   06 — THE APPROACH
   ============================================================ */

/* the section band — half space above and below, still inside the dark half */
.the-approach {
  padding-top: calc(var(--space-section) / 2);
  padding-bottom: calc(var(--space-section) / 2);
}

/* holds the heading and the intro line: stacked on a phone,
   side by side on desktop (see the breakpoint below) */
.approach-header {
  display: grid;
  gap: var(--space-small);
  margin-bottom: var(--space-block);
}

/* the intro line, kept to a readable length */
.approach-intro {
  max-width: 30em;
  margin-bottom: 0;
}

/* the row of three FIG cards: on a phone they sit side by side and you
   swipe across them, exactly like the cards in section 03 */
.fig-cards {
  display: flex;
  gap: var(--space-block);
  overflow-x: auto; /* this is what lets the row scroll sideways on a phone */
  padding-bottom: var(--space-small); /* room for the scrollbar so it does not sit on the text */
  scroll-snap-type: x mandatory; /* a swipe on a real phone settles neatly on the next card */
  scrollbar-color: var(--colour-brick-red) transparent; /* makes the scrollbar under the row red and easy to spot */
}

/* one FIG card: the drawing, the FIG label, the title and the text */
.fig-card {
  scroll-snap-align: start; /* each card is a snapping point for the swipe */
  flex-shrink: 0; /* stops the cards being squashed to fit — this is what makes the row scroll instead */
  width: calc(var(--grid-pitch) * 10); /* each card is 10 grid squares wide on a phone — narrow enough that the edge of the next card stays visible, so it is obvious there is more to swipe to */
}

/* ------------------------------------------------------------
   BREAKPOINT — the phone layout for the swiping card rows in
   sections 03 and 06. 767px is the same boundary used everywhere.
   ------------------------------------------------------------ */
@media (max-width: 767px) {

  /* on a phone the gap between the FIG cards halves, so more of the
     next card shows at the screen edge — the hint that the row swipes.
     (The section 03 cards keep their full gap: their datum line and
     number tabs need the breathing room between cards.) */
  .fig-cards {
    gap: var(--space-small);
  }
}

/* the card's drawing: fills the card, always square, so swapping the
   placeholder for a real drawing never shifts the layout */
.fig-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--space-small);
}

/* the card's small FIG label */
.fig-label {
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-small);
}

/* the card's title */
.fig-title {
  font-size: var(--size-lead);
}

/* the card's body text */
.fig-text {
  margin-bottom: 0;
}


/* ============================================================
   07 — GET THE CHECKLIST
   ============================================================ */

/* the closing band — half space above (it follows section 06),
   full space below, down to the footer */
.get-checklist {
  padding-top: calc(var(--space-section) / 2);
  padding-bottom: var(--space-section);
  scroll-margin-top: calc(var(--grid-pitch) * 3); /* when the "Get the checklist" link in section 04 jumps here, this stops the landing point hiding under the sticky nav bar (which is a touch over two grid squares tall) */
}

/* holds the heading and the form: stacked on a phone,
   side by side on desktop (see the breakpoint below) */
.get-checklist-layout {
  display: grid;
  gap: var(--space-block);
}

/* on the dark background the button's keyboard focus ring is bone,
   not ink, so it stands out against the dark section */
.section-dark .cta-button:focus-visible {
  outline: var(--focus-ring) solid var(--colour-bone);
}

/* ------------------------------------------------------------
   BREAKPOINT — the desktop layouts for sections 06 and 07.
   768px is the same boundary used everywhere else.
   ------------------------------------------------------------ */
@media (min-width: 768px) {

  /* section 06 on desktop: heading in the left half, intro line in the right */
  .approach-header {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-section);
    align-items: start;
  }

  /* section 06 on desktop: all three cards share the width equally, no sideways scrolling */
  .fig-cards {
    overflow-x: visible;
    padding-bottom: 0;
  }
  .fig-card {
    flex-shrink: 1;
    width: 100%;
  }

  /* section 07 on desktop: heading in the left half, form in the right */
  .get-checklist-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-section);
    align-items: start;
  }
}


/* ============================================================
   FOOTER
   Two lines of small print on ink under a red rule: the ARB and
   RIBA disclaimer, then the year line.

   It used to open with a drawing-sheet title block — a ruled strip
   of ARCHI-PACK / SHEET nn / REV nn / SCALE 1:1 / archi-pack.com,
   which is what the "title block" the design notes call a signature
   element referred to. It came out on 30 Aug 2026 at the author's
   instruction; its rules, cells and wordmark went with it, and the
   spans that fed it came out of all fifteen pages at the same time.
   The band, the red rule along its top edge and the small print are
   all that remain.
   ============================================================ */

/* the footer band: ink background, bone text, thin red rule along its top edge */
.site-footer {
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  border-top: var(--border-hairline) solid var(--colour-brick-red);
  padding-top: var(--space-block);
  padding-bottom: var(--space-block);
}

/* the disclaimer paragraph: small print, now set like small print.
   At body size in full bone it was the loudest thing in the footer and
   ran to six lines on a phone; at note size in quiet bone it reads as
   the legal note it is, and still measures 9.3:1 on ink.

   The measure is written in ch — characters of the footer's own text —
   rather than as a fraction of the page. Half of 1160px came to about
   eighty characters a line, past the seventy-five a line should hold;
   62ch holds it wherever the text size lands. (30 Aug 2026) */
.footer-disclaimer {
  max-width: 62ch;
  font-size: var(--size-note);
  color: var(--colour-bone-quiet);
  margin-bottom: var(--space-small);
}

/* THE LEGAL LINE — the link to /privacy, which every page's footer
   carries. Added 6 September 2026, into the slot the footer had held
   empty since 30 August.

   It takes the year line's size and its quiet bone, because it is the
   same small print — but THE LINK INSIDE IT TAKES FULL BONE. That is
   the point of the line: /privacy is in no nav bar and no tab bar, and
   this is the only route to it, so the one word that is pressable has
   to be the one word that is not stepped back. Bone on ink measures
   14.56:1 against the quiet bone's 9.3:1.

   It is drawn as a link rather than coloured as one. Brick red on ink
   measures 3.49:1 and fails at this size, which is the site's oldest
   contrast finding and the reason no small type anywhere on it is red. */
.footer-legal {
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  color: var(--colour-bone-quiet);
  /* the link below draws a 44px row of its own; this pulls the top of
     that row back up under the disclaimer so the three lines still read
     as one block of small print rather than as three stranded ones */
  margin: -10px 0 0;
}

/* inline-flex with a minimum height, not a plain inline link: at 10 to
   12px a single word is a small thing to find with a thumb, and this is
   the one link on the site a reader may have come specifically to look
   for. The height is the link's, not a margin's, so the whole row is
   pressable and not just the word. */
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-minimum);
  color: var(--colour-bone);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* the underline presses harder, the way the article's links do. No
   colour changes hands — there is no second bone to move to */
.footer-legal a:hover {
  text-decoration-thickness: 2px;
}


/* the small line at the very bottom with the year in it. Quiet, and
   pulled up close under the disclaimer by the --space-small above, so
   the two read as one block of small print instead of two stranded
   lines with a section-sized gap between them */
.footer-year-line {
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  color: var(--colour-bone-quiet);
  margin-bottom: 0;
}


/* ============================================================
   ============================================================
   GUIDE PAGES
   Everything from here down to the GUIDES INDEX banner belongs
   to the long-form guide pages only — /guides/<slug>/ and the
   blank template in guides-template/index.html. Its settings
   live in the GUIDE PAGES group inside the :root block at the
   top of this file.

   REBUILT 30 AUGUST 2026 from the design handoff "Guide template
   redesign" (Redesigns/Guide template redesign.zip), direction
   1b desktop / 2a mobile — the one the handoff calls "FIELD
   MANUAL": brick-red hero, ink-on-paper body, hard 2px rules,
   boxed step cards, a mono for every label. It replaced the
   drawing-sheet guide that had stood since 23 August, and that
   whole block was deleted rather than left beside this one —
   both pages that used it, the worked example and the blank
   template, were rebuilt the same day, so nothing reads it.

   WHAT THE USER DECIDED, and it governs the rest:

     - THE NAV AND THE FOOTER ARE THE SITE'S, NOT THE HANDOFF'S.
       The handoff draws a brick masthead with a bone logo and an
       ink footer with the logo at 70%. Both were declined in
       favour of the ordinary .site-header and .site-footer every
       other drawing-sheet page carries — the same call made for
       the guides index on 29 August, for the same reason: a
       guide is reached from /guides and from /checklists, and a
       reader should not cross a chrome change to get here.
       Everything BETWEEN the bar and the footer is the handoff.

     - THE TYPE IS GABARITO PLUS A MONO. The handoff asks for
       Archivo Black / Archivo / IBM Plex Mono and says in as
       many words to swap the families at token level if the
       brand names its own. Display and body became Gabarito, at
       900 where the drawing says Archivo Black. IBM Plex Mono
       was KEPT and self-hosted, because the mono is not
       decoration here: it is what makes the page read as a field
       manual, and it does the work of five separate label
       treatments the old guide had to invent.

     - THE COLOURS ARE ALREADY THE SITE'S. The handoff's brick,
       ink, bone and blush are this site's own four to the digit
       — it was drawn by eyedropper off these pages. Only the
       paper ground, the deep brick, the two blushes, the hover
       red and the grey ramp are new, and those are taken from
       the handoff exactly.

   THE ONE PAGE-WIDTH DEPARTURE. The handoff draws a 1040px
   canvas with 44px gutters. This page instead uses the site's
   own .content-column — 1160px, one grid square of gutter — for
   the hero, the metadata strip, the body and the next-steps
   band, so that the guide's first word starts on the same
   vertical as the wordmark in the bar above it. At 1040 with
   44px gutters the hero copy began about 100px to the right of
   the logo, which reads as a mistake rather than as a margin.
   The article column is therefore wider than drawn; the drawn
   sidebar width (268px) and column gap (44px) are unchanged.

   LAYOUT, mobile first: one column to 900px, two columns above
   it. 900px is the handoff's own single breakpoint, and at that
   line four things happen together — the body splits, the
   contents card moves into the sidebar, the signup goes with it,
   and the hero's corner bleed becomes a full-height panel.

   NOT SETTLED, and flagged rather than quietly changed, because
   the design is signed off as drawn and reviewed separately.
   The full list is README-SITE.md section 7; the short version
   is that small text on the two brick grounds and brick-red
   small text on bone both sit under 4.5:1, and this page uses
   both in nine places. THE DRAWN LABEL MARK at the foot of this
   file is the machinery that fixes exactly that, and it is
   deliberately NOT wired to any of them yet.
   ============================================================
   ============================================================ */


/* ------------------------------------------------------------
   GD0 — THE PAGE GROUND
   A guide is the only page on the site whose ground is paper
   rather than bone: every drawn box on it is bone, and bone
   boxes on a bone page are not boxes. The class goes on <body>.
   ------------------------------------------------------------ */

.guide-page {
  background-color: var(--colour-paper);
}


/* ------------------------------------------------------------
   GD1 — THE READING-PROGRESS RULE
   Carried over from the guide page of 23 August, unchanged, and
   the one thing on this page that is NOT in the handoff. It is
   kept because it belongs to the sticky bar rather than to the
   article, and the bar was kept: it is a red hairline pinned
   under the bone bar that grows from nothing to the full width
   of the window as the page is read.

   It is pure CSS — a scroll-driven animation — and it draws
   itself only where the browser can run one and the reader has
   not asked for reduced motion. Everywhere else the element
   simply never appears. Set --gd-progress-height to 0 to switch
   it off without touching the HTML.
   ------------------------------------------------------------ */

.guide-progress {
  position: fixed;
  /* hard against the top of the window. It used to hang off the underside
     of the nav bar, at a height js/main.js measured and handed over as
     --nav-height; the bar is no longer pinned there to hang from, so both
     the offset and the job that measured it have gone (30 Aug 2026). */
  top: 0;
  left: 0;
  height: var(--gd-progress-height);
  width: 100%;
  transform-origin: 0 50%;  /* it grows from the left edge */
  transform: scaleX(0);     /* and starts at nothing */
  background-color: var(--colour-brick-red);
  z-index: 9;               /* under the nav bar, which is 10; over everything else */
  display: none;            /* switched on again only where the animation below can run */
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    .guide-progress {
      display: block;
      animation: guide-progress-grow linear;
      animation-timeline: scroll(root block); /* play this from the top of the page to the bottom */
    }

    @keyframes guide-progress-grow {
      to { transform: scaleX(1); }
    }

  }
}


/* ------------------------------------------------------------
   GD2 — THE HERO
   A brick-red band: kicker, title, standfirst on the left, and
   on a wide screen a bone panel of pink dots with the brandmark
   in it on the right. On a phone that panel becomes a 130px
   square of dots bleeding off the top-right corner — the same
   material, used as a detail instead of as a column.

   The kicker is where the guide says which check it expands.
   That thread — one guide, one checklist item, said in more
   than one place — is the thing that keeps "guide" and
   "checklist" from blurring into each other, and it is said
   again in the metadata strip, in the signup and on the first
   next-steps card.
   ------------------------------------------------------------ */

.gd-hero {
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
  position: relative;
  overflow: hidden;  /* crops the dot bleed, and the panel's over-run past the page edge on a wide screen */
}

.gd-hero-inner {
  position: relative;
  padding-top: 26px;
  padding-bottom: 22px;
}

/* the copy sits above the dot bleed on a phone, where the two overlap */
.gd-hero-copy {
  position: relative;
  z-index: 1;
}

/* the filing reference above the title: GUIDE 09 — MODEL PHOTOGRAPHY */
.gd-kicker {
  font-family: var(--font-mono);
  font-size: var(--size-gd-label);
  letter-spacing: var(--tracking-gd-meta);
  text-transform: uppercase;
  color: var(--colour-blush);   /* blush-light measures 4.08:1 on the ground red; full blush is 4.81:1 (30 Aug 2026 audit) */
  margin-bottom: 16px;
  /* the dot bleed occupies the top-right 130px of the band. The kicker
     wraps before it rather than running underneath it — the drawing's
     own kicker is short enough never to reach one, a written one is
     not guaranteed to be */
  max-width: calc(100% - var(--gd-hero-corner) + 30px);
}

/* the guide's title. Uppercase and at the heaviest weight Gabarito
   carries, which is what stands in for the drawing's Archivo Black */
.gd-title {
  font-size: var(--size-gd-title);
  font-weight: 900;
  line-height: var(--line-gd-title);
  line-height: round(var(--line-gd-title) * 1em, 1px);
  text-transform: uppercase;
  text-wrap: pretty;
  margin: 0 0 14px;
  max-width: 35ch;   /* the drawing caps the title at 560px of its own 46px type; in characters that measure travels between the two widths */
}

/* the sentence under it — the paragraph that decides whether the
   rest is read. Blush rather than bone, so it steps back from the title
   without going faint */
.gd-standfirst {
  font-size: var(--size-gd-standfirst);
  line-height: 1.5;
  color: var(--colour-blush);
  margin: 0;
  max-width: 46ch;
}

/* THE DOT PANEL. On a phone it is only the dots, square, bleeding off
   the top-right corner; the brandmark inside it is hidden because there
   is no room for it beside a 31px title. At 900px it becomes the bone
   column the drawing shows — see the breakpoint at the foot of the block */
.gd-hero-panel {
  position: absolute;
  top: 0;
  right: -20px;
  width: var(--gd-hero-corner);
  height: var(--gd-hero-corner);
  background-image: radial-gradient(var(--colour-gd-dot-on-brick) 1.4px, transparent 1.5px);
  background-size: 13px 13px;
}

.gd-hero-panel img {
  display: none;
}


/* ------------------------------------------------------------
   GD3 — THE METADATA STRIP
   Four facts in small capitals on a deeper brick: how long the
   guide takes to read, when it was last looked at, who wrote it,
   and which check of the twelve it expands. The check cell is
   pushed to the right on a wide screen and wraps onto the same
   run of cells on a phone.

   This is NOT the site's .spec-strip. That one is snapped onto
   the background grid by js/main.js (job 3) and is drawn in red
   hairlines on bone; this is a solid band and needs neither.
   ------------------------------------------------------------ */

.gd-meta {
  background-color: var(--colour-brick-deeper);
  color: var(--colour-blush-light);
  font-family: var(--font-mono);
  font-size: var(--size-gd-label);
  letter-spacing: var(--tracking-gd-meta);
  text-transform: uppercase;
  margin: 0;
}

.gd-meta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0 auto;   /* no paragraph gap, but keep the auto centring .content-column gives it — a plain margin: 0 here left the whole strip stuck to the left edge of a wide window */
}

/* the check cell. On a phone it is simply the fourth thing in the run;
   at 900px it is pushed to the far right, away from the other three */
.gd-meta-check {
  margin-left: 0;
}


/* ------------------------------------------------------------
   GD4 — THE BODY GRID
   One column on a phone, two above 900px. The order on a phone
   is contents, then article, then signup — which is not the DOM
   order, because the three sidebar things have to be one box on
   a wide screen so the whole sidebar can be sticky together.

   So the sidebar wrapper is display: contents on a phone, which
   dissolves it and hands its three children straight to this
   grid, where `order` puts them where the drawing has them.
   Above 900px the wrapper becomes a real sticky column again.

   The signup and the contents card run edge to edge on a phone,
   which is why the horizontal padding is on the article rather
   than on this grid.
   ------------------------------------------------------------ */

.gd-body {
  display: grid;
  grid-template-columns: 100%;
  background-color: var(--colour-paper);
}

.gd-aside {
  display: contents;
}

.gd-toc     { order: 1; }
.gd-article { order: 2; }
.gd-signup  { order: 3; }

/* the sidebar sticker has no place in a single column — the drawing
   puts a second one inside the next-steps band on a phone instead. The
   order is not for this layout but for the sidebar's: it is a flex item
   there, beside two children that carry an order of their own, and
   without one of its own it would sort above both of them */
.gd-sticker-side { display: none; order: 4; }


/* ------------------------------------------------------------
   GD5 — THE CONTENTS
   One line per section, in the order they appear. On a phone it
   is a full-width accordion under the metadata strip; above
   900px the same element is the first card in the sidebar.

   IT IS A <details>, SO THERE IS NO JAVASCRIPT IN IT. The
   handoff asks for a boolean open by default and a — / + glyph,
   which is what <details open> already is; the glyph is CSS
   content swapped on [open], not markup. Same call as the
   guides index made on 29 August.

   ONE DEPARTURE FROM THE DRAWING: the glyph is kept at desktop
   width too, where the drawing shows a plain header bar. A
   <details> cannot be forced open by CSS, so the bar is
   collapsible at every width — and a bar that collapses without
   saying so is worse than a glyph that was not drawn.

   The numbers are drawn by a CSS counter, so lines can be added
   and deleted without renumbering anything by hand.
   ------------------------------------------------------------ */

.gd-toc {
  background-color: var(--colour-bone);
  border-bottom: var(--gd-border) solid var(--colour-ink);
}

/* the header bar. On a phone it is ink type on bone, full width; in the
   sidebar it becomes the ink bar the drawing shows — see the breakpoint */
.gd-toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px var(--space-page-side);
  font-family: var(--font-mono);
  font-size: var(--size-gd-label-plus);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;         /* no browser triangle: the glyph below is the affordance */
  min-height: var(--tap-minimum);
}

.gd-toc > summary::-webkit-details-marker { display: none; }

/* the glyph: a plus when the list is shut, an em dash when it is open */
.gd-toc > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1;
  color: var(--colour-brick-red);
}

.gd-toc[open] > summary::after {
  content: "\2014";
}

.gd-toc-list {
  list-style: none;
  counter-reset: gd-toc;
  margin: 0;
  padding: 0 var(--space-page-side) 14px;
}

.gd-toc-list li {
  counter-increment: gd-toc;
}

.gd-toc-list a {
  display: block;
  padding: 9px 0;
  font-size: var(--size-gd-smaller);
  text-decoration: none;
  color: var(--colour-ink-quiet);
  border-top: var(--border-hairline) solid var(--colour-gd-rail-rule);
  min-height: var(--tap-minimum);   /* a rail line is a tap target like any other */
}

/* the number and the dash. Non-breaking spaces, not plain ones: a plain
   trailing space in a ::before is collapsed against the text that
   follows it, and the dash ends up welded to the first word */
.gd-toc-list a::before {
  content: counter(gd-toc, decimal-leading-zero) "\00a0\2014\00a0";
}

.gd-toc-list a:hover {
  text-decoration: underline;
}

/* the line you are reading. js/main.js (job 5) moves this class down
   the list as the page scrolls; without that file every line simply
   stays quiet and the links still work */
.gd-toc-list a.is-current {
  font-weight: 600;
  /* colour and mark: see THE DRAWN LABEL MARK at the foot of this file */
}


/* ------------------------------------------------------------
   GD6 — THE ARTICLE
   Ordinary HTML — h2, h3, p, ul, ol, a, strong — plus the seven
   drawn blocks below it. Everything in here is set from the
   article's own sizes, so the writing is the one thing on the
   page tuned for reading rather than for scanning.
   ------------------------------------------------------------ */

.gd-article {
  padding: 26px var(--space-page-side) 0;
  color: var(--colour-ink-soft);
  font-size: var(--size-gd-body);
  line-height: var(--line-gd-body);
  min-width: 0;   /* lets the shot row and the table shrink inside the grid rather than widening it */
}

.gd-article p {
  margin: 0 0 16px;
}

/* the opening paragraph, above the first heading: one size up and a
   half-weight heavier, so the article starts with a statement */
.gd-lede {
  font-size: var(--size-gd-lede);
  line-height: 1.45;
  font-weight: 500;
  color: var(--colour-ink);
  text-wrap: pretty;
  margin: 0 0 28px;
}

/* A SECTION HEADING. The number, the heading and the rule under them
   are one element: the number is a span inside the h2 and the rule is
   the h2's own bottom border, so a heading can never drift away from
   the rule that belongs to it. */
.gd-article h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: var(--gd-rule) solid var(--colour-ink);
  font-size: var(--size-gd-h2);
  font-weight: 900;
  line-height: 1.046;
  line-height: round(1.046em, 1px);
  color: var(--colour-ink);
  /* a heading jumped to from the contents lands one grid square below the
     top of the window rather than hard against it. There is nothing to
     clear any more — the bar scrolls away with the page — so this is
     breathing space and nothing else. */
  scroll-margin-top: var(--space-small);
}

.gd-h2-number {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--size-gd-label-plus);
  font-weight: 600;
  /* colour and mark: see THE DRAWN LABEL MARK at the foot of this file */
}

.gd-article h3 {
  font-size: var(--size-gd-h3);
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--colour-ink);
}

/* an inline link: ink words, a red rule under them that presses harder
   under the mouse. The words stay ink because brick red at this size
   does not pass the contrast rules — the site's rule since day one */
.gd-article a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--colour-brick-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.gd-article a:hover {
  text-decoration-color: var(--colour-link-hover);
  text-decoration-thickness: 4px;
}

.gd-article strong {
  font-weight: 700;
  color: var(--colour-ink);
}

/* Plain lists are NOT in the handoff, which writes its sequences as
   step cards and its comparisons as a table. They are here because a
   template that cannot set three bullet points is not a template. Kept
   deliberately plain, so that reaching for a drawn block stays the
   more attractive option. */
.gd-article ul,
.gd-article ol {
  margin: 0 0 20px;
  padding-left: 20px;
}

.gd-article li {
  margin-bottom: 6px;
}

.gd-article ul li::marker {
  color: var(--colour-brick-red);
}


/* --- A FILE NAME IN THE PROSE ------------------------------ */
/* Added 6 September 2026 for the file-naming guide, which is the
   first page on the site to set file names as running text.
   Nothing else on the site uses <code>, so this rule is additive
   and reaches exactly one page.

   A file name set in Gabarito inside the sentence around it stops
   looking like a file name. Mono is already loaded on every guide
   for the kicker and the metadata strip, so this costs no font.

   THE WRAP IS THE POINT, not the typeface. A thirty-five character
   name in mono is wider than the column at 320px, and underscores
   give the browser nowhere it is willing to break a line — so it
   would push the whole page sideways instead. "anywhere" lets the
   break happen inside the name.

   No tint behind it. --colour-blush is documented at the head of
   this file as large soft panels only, and an inline chip is not
   one. Full ink against body copy set in --colour-ink-soft is
   enough of a lift on its own. */
.gd-article code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--colour-ink);
  overflow-wrap: anywhere;
}

/* The same name given a line to itself — the specimen in section 01
   that the figure underneath then takes apart. A bone box standing
   on paper, ruled at the page's own pen weight, which is what every
   other drawn block on a guide is. Selector is doubled up so it
   beats .gd-article p on margin. */
.gd-article .gd-filename {
  background-color: var(--colour-bone);
  border: var(--gd-border) solid var(--colour-ink);
  padding: 14px 16px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: var(--size-gd-small);
  line-height: 1.5;
  color: var(--colour-ink);
  overflow-wrap: anywhere;
}


/* --- BLOCK: THE PULL QUOTE --------------------------------- */
/* One line lifted out of the writing and set on ink. The second
   sentence turns blush: the drawing splits the quote in two and
   gives the turn its own colour, which is what makes the block
   a quote rather than a heading in a box. */

.gd-quote {
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  padding: 20px;
  margin: 0 0 28px;
}

.gd-quote p {
  font-size: var(--size-gd-quote);
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
}

.gd-quote-turn {
  color: var(--colour-blush-mid);
}

.gd-quote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--size-gd-label-plus);
  letter-spacing: var(--tracking-gd-label);
  text-transform: uppercase;
  font-style: normal;
  color: var(--colour-quiet-on-ink-card);
}


/* --- BLOCK: A FIGURE --------------------------------------- */
/* A drawing in a hard 2px box, with a numbered caption under it.
   Where there is no drawing yet the box is filled with the
   diagonal hatch and a line of placeholder wording — that is
   what the handoff's own figures are, and it is what the blank
   template ships with. */

.gd-figure {
  margin: 0 0 24px;
}

.gd-figure-frame {
  border: var(--gd-border) solid var(--colour-ink);
  background-color: var(--colour-bone);
  background-image: repeating-linear-gradient(135deg, var(--colour-gd-hatch) 0 1px, transparent 1px 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.gd-figure-frame img {
  width: 100%;
  display: block;
}

/* the wording inside an empty frame. It is a placeholder, and the only
   place --colour-grey-faint is allowed on a light ground */
.gd-figure-empty {
  min-height: 200px;
  padding: 0 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--size-gd-label-plus);
  letter-spacing: var(--tracking-gd-label);
  text-transform: uppercase;
  color: var(--colour-grey-faint);
}

.gd-figure figcaption {
  display: flex;
  gap: 8px;
  padding-top: 9px;
  font-family: var(--font-mono);
  font-size: var(--size-gd-label-plus);
  line-height: 1.5;
  color: var(--colour-grey-caption);
}

.gd-fig-number {
  flex: 0 0 auto;
  white-space: nowrap;
  /* colour and mark: see THE DRAWN LABEL MARK at the foot of this file */
}


/* --- BLOCK: THE STEP CARDS --------------------------------- */
/* A sequence to work through, each step in its own ruled box.
   The numbers are a CSS counter, so steps can be added and
   deleted freely.

   On a phone the number sits in a 34px gutter beside the words;
   above 900px the cards pair up two to a row with the number
   above the title, and an odd last card takes the whole row —
   that last rule is why the drawing's five cards read as a
   block and not as four plus an orphan. */

.gd-steps {
  list-style: none;
  counter-reset: gd-step;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
}

.gd-steps > li {
  counter-increment: gd-step;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  border: var(--gd-border) solid var(--colour-ink);
  background-color: var(--colour-bone);
  padding: 14px 16px;
  margin: 0;
}

.gd-steps > li::before {
  content: counter(gd-step, decimal-leading-zero);
  font-weight: 900;
  font-size: var(--size-gd-step-number);
  line-height: 1;
  color: var(--colour-brick-red);
}

/* the numeral takes the 34px column and EVERYTHING ELSE takes the
   second one. Without this line a step's second element auto-places
   itself into the numeral's column on the next row and sets one word
   per line — the numeral is a grid item like any other */
.gd-steps > li > * {
  grid-column: 2;
}

.gd-steps > li p {
  font-size: var(--size-gd-small);
  line-height: var(--line-gd-card);
  color: var(--colour-grey-body);
  margin: 0;
}


/* --- BLOCK: THE SHOT ROW ----------------------------------- */
/* Three or four small figures read side by side rather than one
   after another — the drawing uses it for "the three shots", and
   it is the right block for any set of views of the same thing.

   On a phone it is a snapping sideways scroll with a written
   hint under it; above 900px it becomes an even grid and the
   hint disappears, because there is nothing left to swipe. */

.gd-shots {
  list-style: none;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin: 0 0 16px;
  padding: 0 0 6px;
}

.gd-shots > li {
  flex: 0 0 var(--gd-shot-width);
  scroll-snap-align: start;
  margin: 0;
}

.gd-shot-frame {
  position: relative;
  border: var(--gd-border) solid var(--colour-ink);
  background-color: var(--colour-bone);
  background-image: repeating-linear-gradient(135deg, var(--colour-gd-hatch) 0 1px, transparent 1px 10px);
  min-height: 128px;
  display: flex;
  align-items: flex-end;
}

.gd-shot-frame img {
  width: 100%;
  display: block;
}

/* the A / B / C tag in the corner of the frame. It carries a bone fill
   of its own so that it stays readable once a real drawing is behind it */
.gd-shot-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background-color: var(--colour-bone);
  padding: 1px 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--tracking-gd-meta);
  text-transform: uppercase;
  color: var(--colour-grey-caption);
}

.gd-shots h3 {
  font-size: var(--size-gd-smaller);
  margin: 9px 0 3px;
}

.gd-shots p {
  font-size: var(--size-gd-smaller);
  line-height: 1.45;
  color: var(--colour-grey-body);
  margin: 0;
}

/* the written hint under the row. It says the same thing the snap
   behaviour says, for anyone who cannot see the row overflow */
.gd-shots-hint {
  font-family: var(--font-mono);
  font-size: var(--size-gd-label);
  letter-spacing: var(--tracking-gd-label);
  text-transform: uppercase;
  color: var(--colour-grey-hint);
  margin: 0 0 24px;
}


/* --- BLOCK: THE COMPARISON TABLE --------------------------- */
/* "Which of these should I use." ONE table, in real table
   markup, drawn two different ways: a ruled grid above 900px,
   and on a phone a stack of bordered blocks with an ink bar
   naming each option.

   The phone form is not a second copy of the content. The
   column headings come back as CSS content from each cell's
   data-label, so a screen reader on either layout still hears
   "Good for" and "The catch" against the right words, and the
   markup stays a table for anyone navigating one. */

.gd-table-wrap {
  margin: 0 0 28px;
}

.gd-table {
  width: 100%;
  border-collapse: collapse;
}

.gd-table thead {
  /* the header row has nowhere to go in a stack — the ink bar on each
     block names the option, and each cell names its own column */
  display: none;
}

.gd-table tbody,
.gd-table tr,
.gd-table th,
.gd-table td {
  display: block;
}

.gd-table tr {
  border: var(--gd-border) solid var(--colour-ink);
  margin-bottom: 10px;
}

.gd-table tbody th {
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--size-gd-label);
  letter-spacing: var(--tracking-gd-label);
  text-transform: uppercase;
  text-align: left;
  padding: 7px 12px;
}

.gd-table td {
  font-size: var(--size-gd-small);
  line-height: var(--line-gd-card);
  color: var(--colour-ink-soft);
  padding: 12px 12px 0;
}

.gd-table td:last-child {
  color: var(--colour-grey-body);
  padding-bottom: 12px;
}

/* non-breaking spaces for the same reason as the contents counter:
   a plain trailing space here is collapsed against the cell text */
.gd-table td::before {
  content: attr(data-label) "\00a0\2014\00a0";
  font-weight: 700;
}

/* the catch is the column that costs something, so its label is the one
   thing in the block that is red */
.gd-table td:last-child::before {
  color: var(--colour-brick-red);
}


/* --- BLOCK: THE CALLOUT ------------------------------------ */
/* The boxed aside: brick rule, blush paper, a mono label saying
   what kind of aside it is — WATCH OUT, IN PRACTICE, IF YOU DO
   ONE THING. The drawing has one variant and so does this: the
   box is loud, and a second, quieter one would only be a way of
   using it more often than it should be used. */

.gd-callout {
  border: var(--gd-border) solid var(--colour-brick-red);
  background-color: var(--colour-blush);
  padding: 16px;
  margin: 0 0 30px;
}

.gd-callout-label {
  font-family: var(--font-mono);
  font-size: var(--size-gd-label);
  letter-spacing: var(--tracking-gd-kicker);
  text-transform: uppercase;
  /* colour and mark: see THE DRAWN LABEL MARK at the foot of this file */
  margin: 0 0 8px;
}

.gd-callout p:last-child {
  font-size: var(--size-gd-small);
  line-height: var(--line-gd-card);
  color: var(--colour-ink-quiet);
  margin: 0;
}


/* --- BLOCK: THE DO / DON'T PAIR ---------------------------- */
/* NOT IN THE HANDOFF. The block list in the handoff's README is
   paragraph, section header, figure, step cards, pull quote,
   table, callout and shot row — no do/don't. It is kept because
   the guide template has carried one since 23 August and the
   worked example uses it, and it is rebuilt here out of the
   handoff's own parts: the same bordered block and ink header
   bar as the phone form of the comparison table, with the
   don't bar in brick so the pair can be told apart with the
   colour off.

   The tick and the cross are written into the HTML rather than
   drawn by CSS, so they are read out as words. */

.gd-do-dont {
  display: grid;
  grid-template-columns: 100%;
  gap: 10px;
  margin: 0 0 28px;
}

.gd-do-dont > div {
  border: var(--gd-border) solid var(--colour-ink);
  background-color: var(--colour-bone);
}

.gd-do-dont .dont {
  border-color: var(--colour-brick-red);
}

.gd-do-label,
.gd-dont-label {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  font-family: var(--font-mono);
  font-size: var(--size-gd-label);
  letter-spacing: var(--tracking-gd-label);
  text-transform: uppercase;
  padding: 7px 12px;
  margin: 0;
}

.gd-dont-label {
  background-color: var(--colour-brick-deep);
}

.gd-do-dont .label-mark {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.gd-do-dont p + p {
  font-size: var(--size-gd-small);
  line-height: var(--line-gd-card);
  color: var(--colour-grey-body);
  padding: 12px;
  margin: 0;
}


/* --- THE BYLINE -------------------------------------------- */
/* The line that closes the writing: who wrote it, what they are,
   and when it was last looked at. The only mono on the page set
   as sentences rather than as a label, which is why it is the
   largest of the mono sizes and the only one not in capitals. */

.gd-byline {
  font-family: var(--font-mono);
  font-size: var(--size-gd-byline);
  line-height: 1.65;
  color: var(--colour-grey-caption);
  margin: 0 0 30px;
}


/* ------------------------------------------------------------
   GD7 — THE SIGNUP
   The one ask on the page. On a phone it is a full-width ink
   band between the article and the next-steps band; above 900px
   it is the second card in the sidebar, ink on paper.

   ONE FORM PER PAGE. The drawing shows the sidebar card and the
   phone band as two separate things; they are the same element
   moved. Every form on this site posts to Kit form 9760733, and
   two on one page is two shots at the same list.

   The field and the button are the site's shared .email-input
   and .cta-button with three things changed: the corners come
   off (the handoff is square everywhere), the widths go full,
   and the field's placeholder turns light because here it sits
   on ink rather than on bone.
   ------------------------------------------------------------ */

.gd-signup {
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  padding: 26px var(--space-page-side);
}

.gd-signup-label {
  font-family: var(--font-mono);
  font-size: var(--size-gd-label);
  letter-spacing: var(--tracking-gd-kicker);
  text-transform: uppercase;
  color: var(--colour-blush-mid);
  margin: 0 0 10px;
}

.gd-signup-title {
  font-size: var(--size-gd-signup-title);
  font-weight: 900;
  line-height: 0.986;
  line-height: round(0.986em, 1px);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.gd-signup-note {
  font-size: var(--size-gd-small);
  line-height: var(--line-gd-card);
  color: var(--colour-quiet-on-ink-card);
  margin: 0 0 16px;
}

/* the form: stacked at every width, because in the sidebar it only ever
   has 268px to work in and a field beside a button in that is two
   unusable halves */
.gd-signup .signup-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gd-signup .email-input {
  width: 100%;
  flex: 0 0 auto;   /* the shared rule gives the field a flex-basis meant for a row; in a column that basis becomes a height */
  border-radius: 0;
  background-color: var(--colour-ink-soft);
  border: var(--border-hairline) solid var(--colour-grey-body);
  color: var(--colour-bone);
  padding: 13px;
  font-family: var(--font-mono);
  /* the drawing sets 12.5px here and 13px on the phone. Both are under
     the 16px an iPhone needs before it stops zooming the whole page in
     on a tapped field, so the site's own --size-input is used instead.
     This is the one measurement on the page that is not the handoff's */
  font-size: var(--size-input);
  min-height: var(--tap-minimum);
}

.gd-signup .email-input::placeholder {
  color: var(--colour-guide-placeholder-on-ink);
}

.gd-signup .cta-button {
  width: 100%;
  border-radius: 0;
  padding: 15px;
  font-size: var(--size-gd-h3);
  font-weight: 700;
  min-height: var(--tap-minimum);
}

.gd-signup .cta-button:hover {
  background-color: var(--colour-brick-hover);
}

/* the reassurance line. NOT in the drawing, which has no small print
   under either form — added because every other form on the site
   carries one and an unsubscribe promise is not decoration */
.gd-signup .form-note {
  font-size: var(--size-gd-smaller);
  line-height: var(--line-gd-card);
  color: var(--colour-quiet-on-ink-card);
  margin: 12px 0 0;
}

/* the line js/main.js (job 7) writes under the form once it has heard
   back from Kit */
.gd-signup .form-status {
  font-size: var(--size-gd-smaller);
  line-height: var(--line-gd-card);
  color: var(--colour-bone);
  margin: 12px 0 0;
}

.gd-signup .form-status-failed {
  color: var(--colour-blush-mid);
}


/* ------------------------------------------------------------
   GD8 — WHAT TO DO NEXT
   The brick band that closes the page: two bone cards, one to
   the checklist this guide came out of, one to the honest next
   step. Two is the right number — a page of six links is a page
   nobody clicks.

   The sticker sits inside this band on a phone and in the
   sidebar above 900px. Those are two different parents, so
   there are two <img> tags and one of them is always
   display: none. A hidden image is hidden from screen readers
   too, so only one is ever announced.
   ------------------------------------------------------------ */

.gd-next {
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
  padding-top: 26px;
  padding-bottom: 26px;
}

.gd-next h2 {
  font-size: var(--size-gd-next-title);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.gd-next-cards {
  display: grid;
  grid-template-columns: 100%;
  gap: 12px;
}

.gd-next-card {
  display: block;
  background-color: var(--colour-bone);
  color: var(--colour-ink);
  padding: 16px;
  text-decoration: none;
}

.gd-next-card:hover {
  background-color: var(--colour-bone-lit);
}

.gd-next-kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--tracking-gd-kicker);
  text-transform: uppercase;
  color: var(--colour-brick-red);
  margin: 0 0 6px;
}

.gd-next-card h3 {
  font-size: var(--size-gd-h3-wide);
  font-weight: 700;
  margin: 0 0 4px;
}

.gd-next-card p {
  font-size: var(--size-gd-smaller);
  line-height: 1.45;
  color: var(--colour-grey-body);
  margin: 0;
}

/* a bone card on a brick band takes the ordinary brick focus ring, not
   the bone one the band around it hands out — see the BASE block */
.gd-next-card:focus-visible {
  outline-color: var(--colour-brick-red);
}

.gd-sticker {
  width: 150px;
  height: auto;
  transform: rotate(var(--gd-sticker-tilt));
}

.gd-sticker-foot {
  margin: 24px auto 0;
}


/* ------------------------------------------------------------
   GD9 — 900px AND UP: THE TWO-COLUMN PAGE
   The handoff's single breakpoint. Four things happen together:
   the body splits into article and sidebar, the contents card
   moves into that sidebar and becomes a ruled box with an ink
   header bar, the signup goes with it, and the hero's corner
   bleed grows into the full-height bone panel with the
   brandmark in it.

   Below this line nothing above is touched, so a tablet gets
   the phone layout in a wider column. The handoff is drawn at
   390 and 1040 and says nothing about what happens between —
   ask before inventing a tablet layout.
   ------------------------------------------------------------ */

@media (min-width: 900px) {

  /* --- the hero --- */

  .gd-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--gd-hero-panel-width);
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;   /* the panel runs to the page edge; the copy keeps the column's gutter */
  }

  .gd-hero-copy {
    padding: 46px 0 40px;
  }

  .gd-kicker {
    font-size: var(--size-gd-label-wide);
    letter-spacing: var(--tracking-gd-kicker);
    margin-bottom: 22px;
  }

  .gd-title {
    font-size: var(--size-gd-title-wide);
    line-height: var(--line-gd-title-wide);
    line-height: round(var(--line-gd-title-wide) * 1em, 1px);
    letter-spacing: -0.005em;
    margin-bottom: 20px;
  }

  .gd-standfirst {
    font-size: var(--size-gd-standfirst-wide);
  }

  /* the corner bleed becomes the bone panel. It is pulled past the right
     edge of the content column so that it reaches the edge of the window
     rather than stopping at the gutter and leaving a strip of brick
     beside it — the negative margin is the gutter plus whatever half of
     the window is left over once the column has taken its 1160px. The
     over-run is cropped by the overflow: hidden on .gd-hero */
  .gd-hero-panel {
    position: static;
    width: auto;
    height: auto;
    margin-right: calc(min(0px, (var(--content-max-width) - 100vw) / 2) - var(--space-page-side));
    background-color: var(--colour-bone);
    background-image: radial-gradient(var(--colour-blush-mid) 1.6px, transparent 1.7px);
    background-size: 15px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gd-hero-panel img {
    display: block;
    width: 150px;
  }

  /* --- the metadata strip --- */

  .gd-meta {
    font-size: var(--size-gd-label-wide);
    letter-spacing: 0.13em;
  }

  .gd-meta-inner {
    flex-wrap: nowrap;
    gap: var(--gd-gap);
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .gd-meta-check {
    margin-left: auto;
  }

  /* --- the body grid --- */

  .gd-body {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 46px var(--space-page-side) 0;
    grid-template-columns: minmax(0, 1fr) var(--gd-aside-width);
    column-gap: var(--gd-gap);
  }

  /* the wrapper comes back as a real element, and the whole sidebar
     travels down the page together */
  .gd-aside {
    display: flex;
    flex-direction: column;
    gap: 22px;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 24px;
    align-self: start;
  }

  .gd-article {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    font-size: var(--size-gd-body-wide);
    line-height: var(--line-gd-body-wide);
  }

  /* --- the contents card --- */

  .gd-toc {
    border: var(--gd-border) solid var(--colour-ink);
  }

  .gd-toc > summary {
    background-color: var(--colour-ink);
    color: var(--colour-bone);
    padding: 9px 14px;
    min-height: 0;
  }

  .gd-toc > summary::after {
    color: var(--colour-blush-mid);   /* brick on ink is 3.5:1 and disappears; the glyph is the only thing in the bar that has to be found */
  }

  .gd-toc-list {
    padding: 6px 14px 12px;
  }

  .gd-toc-list a {
    padding: 8px 0;
    font-size: 13.5px;
    border-top: 0;
    min-height: 0;   /* in the sidebar these are pointer targets, not thumb targets */
  }

  /* --- the article's own sizes --- */

  .gd-lede {
    font-size: var(--size-gd-lede-wide);
    margin-bottom: 34px;
  }

  .gd-article p {
    margin-bottom: 18px;
  }

  .gd-article h2 {
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    font-size: var(--size-gd-h2-wide);
  }

  .gd-h2-number {
    font-size: var(--size-gd-label-wide);
  }

  .gd-article h3 {
    font-size: var(--size-gd-h3-wide);
    margin-bottom: 6px;
  }

  .gd-quote {
    padding: 26px 28px;
    margin-bottom: 34px;
  }

  .gd-quote p {
    font-size: var(--size-gd-quote-wide);
    line-height: 1.18;
  }

  .gd-figure {
    margin-bottom: 28px;
  }

  .gd-figure-empty {
    min-height: 260px;
  }

  .gd-figure figcaption {
    gap: 10px;
    padding-top: 10px;
    font-size: var(--size-gd-label-wide);
  }

  /* --- the step cards pair up --- */

  .gd-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 32px;
  }

  .gd-steps > li {
    display: block;
    padding: 16px 18px;
  }

  .gd-steps > li::before {
    display: block;
    font-size: var(--size-gd-step-number-wide);
    margin-bottom: 8px;
  }

  /* an odd last card takes the whole row rather than leaving a hole */
  .gd-steps > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .gd-steps > li p {
    line-height: 1.55;
  }

  /* --- the shot row becomes a grid --- */

  .gd-shots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    overflow: visible;
    margin-bottom: 22px;
    padding-bottom: 0;
  }

  .gd-shots > li {
    flex: none;
  }

  .gd-shot-frame {
    min-height: 130px;
  }

  .gd-shot-tag {
    font-size: 10px;
  }

  .gd-shots h3 {
    margin-top: 10px;
    margin-bottom: 4px;
  }

  .gd-shots p {
    line-height: 1.5;
  }

  /* nothing left to swipe */
  .gd-shots-hint {
    display: none;
  }

  /* --- the table becomes a table --- */

  .gd-table-wrap {
    border: var(--gd-border) solid var(--colour-ink);
    margin-bottom: 34px;
  }

  .gd-table thead {
    display: table-header-group;
  }

  .gd-table tbody { display: table-row-group; }
  .gd-table tr    { display: table-row; border: 0; margin: 0; }
  .gd-table th,
  .gd-table td    { display: table-cell; vertical-align: top; }

  .gd-table thead th {
    background-color: var(--colour-ink);
    color: var(--colour-bone);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--size-gd-label-plus);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-align: left;
    padding: 9px 14px;
  }

  .gd-table thead th:first-child {
    width: 150px;
  }

  .gd-table tbody tr:not(:last-child) {
    border-bottom: var(--border-hairline) solid var(--colour-gd-hairline);
  }

  .gd-table tbody th {
    background-color: transparent;
    color: var(--colour-ink);
    font-family: var(--font-main);
    font-size: var(--size-gd-small);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    padding: 14px;
  }

  .gd-table td {
    color: var(--colour-grey-body);
    padding: 14px;
  }

  .gd-table td:last-child {
    padding-bottom: 14px;
  }

  /* the column names are in the header row again, so the cells stop
     repeating them */
  .gd-table td::before {
    content: none;
  }

  /* --- the callout --- */

  .gd-callout {
    padding: 20px 22px;
    margin-bottom: 40px;
  }

  .gd-callout-label {
    font-size: var(--size-gd-label-plus);
    margin-bottom: 9px;
  }

  .gd-callout p:last-child {
    font-size: 15px;
    line-height: 1.55;
  }

  /* --- the do / don't pair sits side by side --- */

  .gd-do-dont {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 34px;
  }

  /* --- the signup becomes a sidebar card --- */

  .gd-signup {
    padding: 20px 18px;
    border: var(--gd-border) solid var(--colour-ink);
  }

  .gd-signup-title {
    font-size: var(--size-gd-signup-title-wide);
    line-height: 0.996;
    line-height: round(0.996em, 1px);
  }

  .gd-signup-note {
    font-size: 13.5px;
    margin-bottom: 14px;
  }

  .gd-signup .cta-button {
    padding: 11px;
    font-size: var(--size-gd-smaller);
  }

  /* --- the sticker changes places --- */

  .gd-sticker-side {
    display: block;
    width: var(--gd-sticker-width);
    align-self: center;
  }

  .gd-sticker-foot {
    display: none;
  }

  /* --- the closing band --- */

  .gd-next {
    padding-top: 36px;
    padding-bottom: 36px;
    margin-top: 20px;
  }

  .gd-next h2 {
    font-size: var(--size-gd-next-title-wide);
    margin-bottom: 22px;
  }

  .gd-next-cards {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .gd-next-card {
    padding: 20px 22px;
  }

  .gd-next-kicker {
    font-size: var(--size-gd-label);
    margin-bottom: 8px;
  }

  .gd-next-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .gd-next-card p {
    line-height: 1.5;
  }

}


/* ============================================================
   ============================================================
   GUIDES INDEX
   Everything below this line belongs to the guides index page
   (/guides/) and to nothing else. Its settings live in the
   GUIDES INDEX group inside the :root block at the top. Keep
   this block last in the file.

   REWRITTEN 29 AUGUST 2026 from the design handoff "Guides
   landing page redesign" (option 4c). What changed, and why the
   old comments here no longer describe the page:

     - THE PAGE IS BONE, not ink. It was the only page on the
       site with no light half; now it is the mirror of that,
       and the nav bar is the site's ordinary bone bar with no
       `over-ink` written into the markup.
     - THE SETS ARE INK CARDS floating on that bone, over soft
       blush circles that run off the edges of the page.
     - THE SET THUMBNAILS ARE GONE. `.set-figure` and its token
       `--set-figure-width` went with them, and the head is one
       flat three-column row: numeral, words, glyph. The drawing
       files g01–g03 are still in /assets/images/ and are now
       unused by any page.
     - THE OPEN/CLOSE SIGN IS A + / – GLYPH with a disc of
       concentric rings drawn behind it, cropped by the card.
       It replaced the bone chevron centred at the foot.

   THREE THINGS TO KNOW BEFORE EDITING THIS BLOCK:

   1. IT IS WRITTEN PHONE FIRST. Everything outside a media query
      is the phone layout, and the handoff's own numbers are the
      floor of every clamp(). The wider layouts are added on top,
      in min-width queries. There is not a single max-width query
      down here, so nothing has to be un-done further down the
      file. The rest of this stylesheet, above this block, still
      works the older way round — desktop first with a
      max-width: 767px section at the end — so do not copy that
      pattern into here.

   2. THE HANDOFF IS A 390px MOBILE SCREEN and says the desktop
      variant is not in the bundle. Everything above 600px in
      this block is therefore this site's reading of it, not the
      designer's: the same anatomy, grown by clamp(), with two
      columns of guide rows from 900px because one column of
      rows in a 1160px card leaves half the card empty.

   3. THE CIRCLES AND THE RINGS ARE DECORATION and are all
      aria-hidden in the markup. Each band that holds circles
      clips them (`overflow: hidden`) so they can never make the
      page scroll sideways, and the words above them are lifted
      on `z-index: 1` so nothing is ever drawn through type.
   ============================================================
   ============================================================ */


/* ------------------------------------------------------------
   G1 — THE PAGE, AND THE BAR ON TOP OF IT
   Plain bone. It carried the site's faint drawing-sheet grid
   until 30 Aug 2026, when the grid came off every page in the
   site at the user's instruction — see the note in SETTINGS
   where its two colours used to live.
   ------------------------------------------------------------ */

.guides-page {
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}


/* ------------------------------------------------------------
   G2 — THE DECORATIVE CIRCLES

   THREE RULES GOVERN THESE, ALL SET BY THE USER ON 30 AUG 2026,
   and every number below exists to keep them true:

     1. EVERY DISC IS BLUSH. There is no second decor colour.
        (--colour-bone-shade, the one warm-grey disc the handoff
        drew low behind the cards, went with this rule.)
     2. NO DISC OVERLAPS ANOTHER. Where two share a band, one
        takes the top-right corner and the other the bottom-left,
        and their two widths together are always less than the
        column, so they cannot meet at any screen size.
     3. NO DISC IS EVER CUT OFF. Nothing is clipped, nothing
        bleeds off an edge, and nothing passes behind an opaque
        card — a disc half-hidden behind a card reads as cut off
        just as surely as one running off the page.

   RULE 3 IS WHAT SHAPES THE LAYOUT. The handoff hangs five big
   discs off the page edges and lets them crop; whole discs need
   room, and the only bone this page has room in is the header
   band and the email band. THE TWO DISCS THAT SAT BEHIND THE
   CARDS ARE THEREFORE GONE — the cards fill the column, so there
   was nowhere in that band for a whole one to stand.

   Each disc is a <span> in the markup carrying aria-hidden,
   sized from its own --disc so its offsets can be written as
   fractions of itself. They are anchored inside the content
   column, so on a wide screen they stay in company with the
   words rather than drifting to the edges of a 1600px browser.
   ------------------------------------------------------------ */

.decor-circle {
  position: absolute;
  display: block;
  width: var(--disc);
  height: var(--disc);
  border-radius: 50%;
  background-color: var(--colour-blush-deep);
  pointer-events: none;   /* never in the way of a click */
}


/* ------------------------------------------------------------
   G3 — THE HEADER
   The headline, and one paragraph under it. Nothing above the
   headline: the page opens on the claim.
   ------------------------------------------------------------ */

.guides-header {
  position: relative;
  /* SIDEWAYS ONLY. The discs inside are whole and stay inside the
     column, so there is nothing to crop — this is the guard that
     keeps any future one from starting a horizontal scroll, and it
     must never become `overflow: hidden`, which would clip the y
     axis too and cut a disc off along the band edge. */
  overflow-x: clip;
  padding-top: calc(var(--grid-pitch) * 1.5);
  padding-bottom: calc(var(--grid-pitch) * 2);
}

.guides-header-inner { position: relative; }
.guides-header-words { position: relative; z-index: 1; }

/* the larger of the two, in the top-right corner of the column.
   top: 0 is the top of the column's content box, which is already a
   band's padding below the red rule, so it never touches the bar; the
   right offset is the page gutter, so the disc stops where the words
   above it stop. FLUSH WITH THE PAGE EDGE IS NOT GOOD ENOUGH: a disc
   tangent to the edge of the screen is whole, but it reads as one that
   has been cut, which is the thing the rule is against. */
.decor-hero-a {
  --disc: clamp(7.5rem, 15vw, 12rem);   /* 120px to 192px */
  top: 0;
  right: var(--space-page-side);
  opacity: 0.45;
}

/* the smaller one, diagonally opposite. bottom: 0 is the foot of the
   content box, so the band's own bottom padding still stands between
   this disc and the first card. */
.decor-hero-b {
  --disc: clamp(4.5rem, 9vw, 8rem);   /* 72px to 128px */
  bottom: 0;
  left: var(--space-page-side);
  opacity: 0.35;
}

/* ANTON, NOT GABARITO, SINCE 2 SEPTEMBER 2026 (user request). This is
   the fifth hero headline on the site and the last one that was still
   set in the body face; it now carries the display face like the other
   four, and takes their leading with it — 0.906 here, 0.926 from 700px
   up, which is this page's own breakpoint rather than the 900 the 4A
   pages use. Anton ships one weight, so the 800 that Gabarito was
   asked for goes: see the long note on .home-display for why a faux
   bold is not an option. The tracking is the -0.02em every Anton
   headline on the site carries, not the -0.01em the body face wanted.

   The max-width came down from 10em with the face: Anton is condensed
   and sets far more characters to the em, and at 10em the headline ran
   as one long line at 88px instead of the three the design draws. */
.guides-headline {
  font-family: var(--font-display);
  font-size: var(--size-guides-headline);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.906;
  line-height: round(0.906em, 1px);
  letter-spacing: -0.02em;
  color: var(--colour-ink);
  max-width: 7em;
  margin-bottom: 0;
  text-wrap: pretty;
}

/* the red words in the headline. No drawn under-rule here: at this size,
   over three lines, the rule cut the headline into stripes — the colour
   alone carries the emphasis. */
.guides-headline .headline-red {
  color: var(--colour-brick-red);
  background-image: none;
  padding-bottom: 0;
  text-decoration: none;
}

.guides-standfirst {
  margin: var(--space-small) 0 0 0;
  color: var(--colour-body-grey);
  line-height: 1.65;
  max-width: 30em;
}


/* ------------------------------------------------------------
   G4 — A SET
   Each set is an ink card. The card is a <details> element, so
   the browser opens and closes it on its own: there is no
   JavaScript behind these, and they work with JavaScript
   switched off, on a keyboard, and in a screen reader. The
   handoff asks for independent sections, 01 open on arrival —
   which is exactly what a row of <details> elements does.
   ------------------------------------------------------------ */

.guides-sets {
  position: relative;
  /* NO DISCS IN THIS BAND — see rule 3 in G2 above. The cards fill
     the column, so a whole disc had nowhere to stand that was not
     behind one of them.

     Two grid squares under the last card, not a full --space-section:
     the handoff runs 48px here and 40px above the email band. It grows
     again at 700px in G9. */
  padding-bottom: calc(var(--grid-pitch) * 2);
}

.guides-sets-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-small), 2vw, var(--space-block));
}

/* THE TWO OVERFLOW LINES ARE NOT A DUPLICATE. The ring motif is a
   260–320px disc centred on a glyph that sits at the card's right-hand
   edge, so roughly half of it hangs outside the card and has to be
   cropped. `overflow: hidden` crops it in every browser — but it also
   makes the card a scroll container, and a scroll container that
   overflows by 105px gets scrolled sideways the moment anything calls
   scrollIntoView on something inside it. That is not theoretical: it
   shunted card 03's head 25px to the left and clipped the numeral,
   found in the browser on 29 Aug 2026. `overflow: clip` crops
   identically and creates no scroll container, so where it is
   understood it wins, and where it is not the line above still holds.
   The same pair is on .guides-header and .guides-sets, which clip the
   decorative circles for the same reason. */
.guide-set {
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  position: relative;
  overflow: hidden;
  overflow: clip;
}

/* the head of the card — the part that is always visible, and the part
   you press. It is a <summary>; the two list-style lines remove the
   browser's own little triangle, which every browser draws differently.

   One flat row at every width: the numeral, the words, the glyph. */
.set-head {
  display: grid;
  grid-template-columns: var(--set-number-column) minmax(0, 1fr) auto;
  column-gap: var(--space-small);
  align-items: start;
  padding: var(--set-head-pad-y) var(--set-head-pad-x);
  cursor: pointer;
  list-style: none;
}
.set-head::-webkit-details-marker { display: none; }

/* the set numeral, in solid brick red — one of the few things on the site
   allowed to be red and large. It is decorative and hidden from screen
   readers; the set's name is what carries the meaning.

   The z-index is not decoration: it is what keeps the ring motif behind
   this text rather than through it. */
.set-number {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--size-set-number);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--tracking-headline);
  color: var(--colour-brick-red);
  /* every digit the same width, so 01, 02 and 03 all take up the same room
     and the three set names start on the same line down the page */
  font-variant-numeric: tabular-nums;
}

.set-words {
  position: relative;
  z-index: 1;   /* same job as on .set-number above */
}

.set-title {
  margin: 0;
  font-size: var(--size-set-title);
  font-weight: 800;
  line-height: 1.021;
  line-height: round(1.021em, 1px);
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
  color: var(--colour-bone);
  text-wrap: balance;
}

/* the line under a set's name. It says what the set is for — never how
   many guides are in it, so that adding one is only ever a paste. */
.set-note {
  margin: calc(var(--space-small) / 2.5) 0 0 0;
  font-size: var(--size-note);
  line-height: 1.55;
  color: var(--colour-quiet-on-card);
  max-width: 34em;
}

/* the open/close glyph, and the disc of concentric rings behind it.

   THE RINGS ARE CENTRED ON THE GLYPH, NOT ON THE COLUMN. That is why
   there is an inner span: the rings are its ::before and the glyph is
   its ::after, so the span shrink-wraps the glyph and the ring's
   left/top 50% lands on the middle of the character. Anchoring the ring
   to the grid cell instead leaves it a few pixels off, which shows,
   because the card crops the disc and the crop makes the centre
   obvious.

   .set-toggle carries z-index: 0 so the rings stay under the numeral
   and the words, which are on z-index: 1 above. */
.set-toggle {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: flex-end;
  font-size: var(--size-set-toggle);
  font-weight: 700;
  line-height: 1;
  color: var(--colour-brick-red);
}

.set-toggle-mark {
  position: relative;
  display: inline-block;
}

.set-toggle-mark::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: var(--set-ring-size);
  height: var(--set-ring-size);
  margin-left: calc(var(--set-ring-size) / -2);
  margin-top: calc(var(--set-ring-size) / -2);
  border-radius: 50%;
  background-image: repeating-radial-gradient(
    circle,
    transparent 0 var(--set-ring-pitch),
    var(--colour-ring-on-ink) var(--set-ring-pitch) calc(var(--set-ring-pitch) + var(--set-ring-weight))
  );
}

/* the glyph itself: a plus when the card is shut, an en dash when it is
   open. It is written here rather than in the markup because it is a
   picture of the card's state, and the browser already tells a screen
   reader that state through the <details> element. */
.set-toggle-mark::after {
  content: "+";
  position: relative;
  z-index: 1;
}
.guide-set[open] .set-toggle-mark::after {
  content: "\2013";
}

.set-head:hover .set-title { color: var(--colour-brick-red); }

@media (prefers-reduced-motion: no-preference) {
  .set-title { transition: color var(--card-hover-time) ease; }
}

/* the whole head shows the keyboard focus ring, drawn just inside the
   card's edge so it is never clipped */
.set-head:focus-visible {
  outline-offset: calc(var(--focus-ring) * -1);
}


/* ------------------------------------------------------------
   G5 — WHAT IS INSIDE A SET
   One guide per row on a phone, ruled apart. The rules are drawn
   as borders on the rows themselves rather than as gaps, so a
   row with only one guide in it never leaves a floating line.

   .set-guides is positioned for a reason: it is what puts the
   rows in front of the ring motif that spills down out of the
   head above them. Take the position off and the rings are drawn
   through the first guide's title.
   ------------------------------------------------------------ */

.set-guides {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;   /* without this the browser draws its own bullets */
  margin: 0;
  padding: 0;
}

.set-guide {
  border-top: var(--border-hairline) solid var(--colour-line-on-ink);
}

/* the whole cell is the link: the checklist number, then the three lines
   beside it. `.set-guide-pending` was the non-link placeholder row and is
   kept in this selector only so the grid still describes one if it returns —
   nothing on the site carries it since 6 September 2026. See G6 below. */
.set-guide > a,
.set-guide > .set-guide-pending {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: calc(var(--space-small) * 0.6);
  align-items: start;
  padding: var(--set-row-pad);
  min-height: var(--tap-minimum);
  color: var(--colour-bone);
  text-decoration: none;
}
.set-guide > a:hover {
  background-color: var(--colour-panel-hover-on-ink);
  color: var(--colour-bone);
}

/* The checklist number at the head of the row: which of the twelve
   habits on the Project Start Checklist this guide answers, so a
   reader holding the printed sheet can find the guide for the line
   they are stuck on. Added 6 September 2026, in place of the little
   brick-red disc that sat here from 29 August.

   IT IS NOT BRICK RED, and the disc's colour cannot simply be
   carried over. The disc was decoration, which has no contrast floor
   to meet; this is small type, which does. Brick red measures 3.49:1
   on ink — the exact figure quoted in "Red is never small type",
   README-SITE.md section 9. Blush-deep measures 8.6:1, and is
   already the colour of .set-guide-time below, the row's other piece
   of metadata. Do not restyle this in red.

   Unlike the disc it replaced it is NOT aria-hidden: a number is
   meaning, not decoration. The markup puts "Checklist habit" in a
   .visually-hidden span in front of it, so a screen reader says
   "Checklist habit 01" rather than a bare digit.

   Tabular figures and a 2ch floor, the same job the same two
   properties do on .set-number: every title starts on the same line
   down the card whatever numbers the rows carry. A row for a guide
   that answers no habit drops this span entirely and the title
   closes up — the grid's first column collapses to nothing. */
.set-guide-ref {
  min-width: 2ch;
  font-size: var(--size-guide-row-title);
  font-weight: 800;
  /* the title's own line box, so the number sits on its first line
     rather than needing the disc's 0.42em nudge */
  line-height: 1.096;
  line-height: round(1.096em, 1px);
  letter-spacing: 0.02em;
  color: var(--colour-blush-deep);
  font-variant-numeric: tabular-nums;
}

.set-guide-words {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-small) / 4);
}

.set-guide-title {
  font-size: var(--size-guide-row-title);
  font-weight: 700;
  line-height: 1.096;
  line-height: round(1.096em, 1px);
}
.set-guide > a:hover .set-guide-title { color: var(--colour-brick-red); }

/* the line under a guide's title — the reason to open it, not a summary
   of what is in it */
.set-guide-note {
  font-size: var(--size-note);
  line-height: 1.5;
  color: var(--colour-quiet-on-card);
}

/* how long the guide takes, with an arrow after it. Written 07 rather
   than seven, to match the way every other number on this page is drawn.
   Blush rather than bone: it measures 8.6:1 on ink, so it reads as the
   quiet last line it is without falling under the contrast rules. The
   arrow is what says the row is a link — nothing else on it is
   underlined. */
.set-guide-time {
  display: flex;
  align-items: center;
  gap: calc(var(--space-small) / 2.5);
  margin-top: calc(var(--space-small) / 5);
  font-size: var(--size-guides-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--colour-blush-deep);
}
.set-guide-time .arrow { display: inline-block; }
.set-guide > a:hover .set-guide-time .arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: no-preference) {
  .set-guide-time .arrow { transition: transform var(--card-hover-time) ease; }
}


/* ------------------------------------------------------------
   G6 — GUIDES NOT WRITTEN YET — DELETED 6 SEPTEMBER 2026
   This block drew a dashed red frame around a row for a guide that
   did not exist yet. Set 03 held the only two such rows, and it
   came off the page whole on 6 September when the placeholders
   went, so .is-empty and .set-guide-pending now match nothing.

   If placeholder rows are ever wanted again, the rule was: a
   dashed red frame rather than tinted type — unmistakably a gap at
   a glance, and the words stay in full bone so they pass the
   contrast rules.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   G7 — THE EMAIL BAND
   The one ask on the page. NO RULE ABOVE IT: the handoff drops
   the divider on purpose and lets one blush circle spill up
   behind the last card instead, which is why this band does not
   clip its circle the way the two above it do.
   ------------------------------------------------------------ */

.guides-signup {
  position: relative;
  /* the handoff's own 40px and 32px, in grid squares — see the note on
     .guides-sets above. Both grow at 700px in G9. */
  padding-top: calc(var(--grid-pitch) * 1.5);
  padding-bottom: calc(var(--grid-pitch) * 1.5);
  /* THIS BAND MUST NOT CLIP DOWNWARDS. Its one disc is meant to spill UP
     out of the band, behind the last card — so `overflow: clip` on the
     x axis only, which is a thing `hidden` cannot do: setting
     overflow-x: hidden forces overflow-y to scroll and the spill is
     lost. This is a second line of defence only; the disc is sized in
     G7 so that it cannot reach the right-hand edge in the first place,
     which is what protects browsers too old to know `clip`. */
  overflow-x: clip;
}

.guides-signup-inner { position: relative; }
.guides-signup-words { position: relative; z-index: 1; }

/* the band's one disc, whole, in the top-right of its content box.
   It used to spill up out of the band and pass behind the last card;
   it does not any more, because a disc half-hidden behind a card reads
   as cut off — see rule 3 in G2. The band's own top padding is what
   keeps clear air between this and the card above it. */
.decor-signup {
  --disc: clamp(6rem, 12vw, 11rem);   /* 96px to 176px */
  top: 0;
  right: var(--space-page-side);
  opacity: 0.4;
}

.guides-signup-text {
  color: var(--colour-body-grey);
  line-height: 1.65;
  max-width: 34em;
}

.guides-signup .form-note {
  color: var(--colour-body-grey);
}

/* SQUARE CORNERS on this page's field and button. The handoff's radius
   is zero on everything but the discs, and the ink cards above make
   that obvious; the site's usual 6px is left alone everywhere else. */
.guides-signup .email-input,
.guides-signup .cta-button {
  border-radius: 0;
}

/* the field over the button, full width, as drawn. It becomes the
   site's ordinary one-line form at 600px in G8 below. */
.guides-signup .signup-form {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--space-small) / 2);
  max-width: 34em;
}

/* THE FIELD HAS TO BE UN-FLEXED WHILE THE FORM IS A COLUMN. The shared
   .email-input is written for a row, where its flex-grow and its
   flex-basis of seven grid squares are a WIDTH; turn the form on its
   side and the browser reads both as a HEIGHT and draws a 182px-tall
   box that grows from there. Found in the browser, 29 Aug 2026. G8
   hands the row values back at 600px. */
.guides-signup .signup-form .email-input {
  flex: 0 0 auto;
}


/* ============================================================
   G8 — 600px AND UP
   The first two things there is room for: the email form on one
   line, and a little more air above the headline.
   ============================================================ */

@media (min-width: 600px) {

  .guides-signup .signup-form {
    flex-direction: row;
    align-items: center;
    gap: var(--space-small);
  }

  /* the row is back, so the field takes its shared sizing again */
  .guides-signup .signup-form .email-input {
    flex: 1 1 calc(var(--grid-pitch) * 7);
  }
}


/* ============================================================
   G9 — 700px AND UP
   Now there is room for two columns of guides inside a card,
   and for more air round the headline.

   700px is the handoff's own number: it says the desktop variant
   — which is not in the bundle — takes over above about 700px.
   What happens here is therefore the site's reading of the
   design, not the designer's. One column of rows in a card this
   wide leaves half of it empty, so the rows pair up, ruled apart
   the way this page has always ruled them.
   ============================================================ */

@media (min-width: 700px) {

  /* the wide leading, the same one the other four heroes take above
     their own breakpoint */
  .guides-headline {
    line-height: 0.926;
    line-height: round(0.926em, 1px);
  }

  .guides-header {
    padding-top: calc(var(--grid-pitch) * 3);
    padding-bottom: var(--space-section);
  }

  .guides-sets {
    padding-bottom: calc(var(--grid-pitch) * 3);
  }

  .guides-signup {
    padding-top: calc(var(--grid-pitch) * 2.5);
    padding-bottom: var(--space-section);
  }

  .set-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* the vertical rule between the two columns */
  .set-guide:nth-child(odd) {
    border-right: var(--border-hairline) solid var(--colour-line-on-ink);
  }
}


/* ============================================================
   ============================================================
   HOLDING PAGES
   The pages that have a URL and a link pointing at them but are
   not written yet: /, /checklists, /about, and the
   guides listed on the index that do not exist. They are all
   the same page with three lines of wording changed; copy any
   one of them to make another.

   The point of this block is that a holding page must be
   IMPOSSIBLE TO MISTAKE for a finished one. It borrows the
   site's nav, footer, grid and type, and then says plainly, in
   the drawing-sheet language the rest of the site already uses,
   that this sheet has not been issued yet — and offers the
   pages that HAVE been written, so nobody reaches a dead end.

   Delete this block and the folders it styles on the day the
   last real page is written.
   ============================================================
   ============================================================ */

.holding {
  padding-top: calc(var(--grid-pitch) * 4);
  padding-bottom: var(--space-section);
}

/* the status line — the notation a drawing carries before it is issued */
.holding-status {
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin: 0 0 var(--space-small);
}

.holding-title {
  font-size: var(--size-heading);
  line-height: var(--line-heading);
  line-height: round(var(--line-heading) * 1em, 1px);
  margin: 0 0 var(--space-small);
}

.holding-note {
  font-size: var(--size-lead);
  line-height: var(--line-body);
  max-width: 34rem;
  margin: 0 0 var(--space-block);
}

/* the way out — every holding page lists the pages that do exist,
   so no click on this site can end in nothing */
.holding-ways-out {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) solid var(--colour-ink);
  max-width: 34rem;
}

.holding-ways-out li {
  border-bottom: var(--border-hairline) solid var(--colour-rule-faint);
}

.holding-ways-out a {
  display: block;
  padding: var(--space-small) 0;
  min-height: var(--tap-minimum);
  text-decoration: none;
  color: inherit;
}

.holding-ways-out a:hover .holding-way-title,
.holding-ways-out a:focus-visible .holding-way-title {
  color: var(--colour-brick-red);
}

.holding-way-title {
  display: block;
  font-size: var(--size-emphasis);
}

.holding-way-note {
  display: block;
  font-size: var(--size-note);
  color: var(--colour-placeholder);
}


/* ============================================================
   ============================================================
   THE 4A COMPONENTS
   Built 28 August 2026 from the design handoff "Archipack
   Homepage Redesign", concept 4A, for the front page, and shared
   with /about when that was rebuilt from the same handoff on
   29 August. It was called HOMEPAGE until 30 August 2026.

   IT IS NOT THE HOMEPAGE'S ANY MORE. / was rebuilt that day from
   a newer handoff, on its own .hp- components in the HOMEPAGE
   block further down, and everything it alone used was deleted
   from here — the stake, the "what you get" list, the habit
   panel, the author band, the hero's CTA row, the menu panel and
   the two solid chips, 423 lines in all. Every page was shot
   before and after and came back byte-identical.

   SO EVERY RULE BELOW DRAWS TWO PAGES: /about, and from
   2 September 2026 /checklists, which was built from the same
   handoff's landing page. Both wrappers carry class="home", which
   is why the class name has not been renamed with the banner —
   the masthead, hero, chip, dot field, email capture, tab bar and
   footer rules here are what those pages are built from. What
   each ADDS on top of them lives in its own block further down:
   ABOUT PAGE, and CHECKLISTS INDEX, which also carries the four
   bands the old front page had (the stake, what you get, the
   habit, the author) under its own prefix. If both pages are ever
   redesigned, this whole block goes with them.

   WHY IT LOOKS NOTHING LIKE THE REST OF THE SITE:
     - no background grid, no drawing-sheet framing, no spec
       strip. The page is full-height colour bands read one after
       another, the way an app onboarding is read, not a drawing
       sheet.
     - sizes here are written in px, not the rem and clamp the
       rest of the site uses. The design specifies exact pixel
       values at three named widths and was signed off that way;
       keeping them lets the built page be checked against the
       reference render line by line.
     - it carries a second typeface, Anton, for headlines only.
       The homepage is the only other page that uses it.

   The three layouts, mobile first:
     - base rules below      the phone, drawn at 390px
     - 640px and up          tablet: one column, more room
     - 900px and up          desktop: full-bleed bands, two
                             columns, tab bar swapped for
                             inline nav

   NOT SETTLED, and flagged rather than quietly changed (the
   design is signed off as drawn and is being reviewed
   separately):
     - small text on the brick red ground tops out at 4.19:1
       against the 4.5:1 the contrast rules ask for. It cannot be
       fixed by size or weight; only the ground or the palette
       would fix it.
     - the tab bar's "Get it" is brick red on ink at 9.5px
       (3.5:1). That is the exact case THE DRAWN LABEL MARK at
       the foot of this file was written to solve.
     - the email field is 13.5px on the phone. iPhones zoom the
       whole page in on any field under 16px. It is 16px from
       900px up, where phones are not looking.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   THE SETTINGS FOR THESE COMPONENTS
   Named here rather than in the settings block at the top of
   the file, because nothing outside /about reads them.
   ------------------------------------------------------------ */

.home {
  --home-gutter: 20px;          /* the side margin on every band — opens out at each breakpoint */
  --home-measure: 1200px;       /* how wide the content is allowed to get once the bands go full-bleed at 900px */
  --home-masthead-top: 18px;    /* how far the wordmark sits below the top of the red band */
  --home-masthead-height: 22px; /* the row the wordmark and the menu button sit in — the wordmark's own line box at 18px, measured against the design reference. It is the height of the WORDMARK, not of the menu button's tap target — the button reaches its 44px by hanging outside this row rather than by pushing it open, so the headline below starts exactly where the design puts it. See the note on the button itself. */
  /* --home-tabbar-height WAS HERE and is gone: the bar is the site's
     now and so is its height — see --tabbar-height in the settings
     block at the top of the file. */

  /* the pen weights and shapes this page draws with */
  --home-pill: 999px;           /* chips, the button, the desktop nav's outlined link */
  --home-rule: 2px;             /* the tab bar's top edge, the outline round the chips and the success panel, and the rule under a hovered nav link */
  --home-quiet-on-ink: rgba(243, 242, 239, 0.75);    /* the second line of each list item */
  /* --home-quiet-on-brick WAS HERE and is gone (30 Aug 2026 audit). It
     was rgba(243, 242, 239, 0.85), the small print under the button,
     and it composited to 4.46:1 on the ground red — a twentieth under
     the 4.5:1 that line has to meet at 9.5px. Stepping bone back by
     alpha on a red ground cannot reach the line without arriving at
     bone, so .home-cta-smallprint takes --colour-bone and the step
     back is made by size and weight instead. Nothing reads this. */
  /* these two are the site's now — see --colour-tab-quiet in the
     settings block at the top of the file, which is where the values
     and the reasoning for them live. The two names are kept because
     the rules below read them, and because this page's bar may yet
     want to differ from the shared one. */
  --home-tab-quiet: var(--colour-tab-quiet);
  --home-tab-selected: var(--colour-tab-selected);
  --home-dot: 8px;              /* the pitch of the dot field standing in for a halftoned photograph */
  --home-bar-radius: 2px;       /* the rounded end of each line in the menu button — the only radius on this page that is not the full pill */
  --colour-ink-pressed: #000000; /* the button on the brick band goes to true black under the mouse rather than dimming. It is the one colour on the site outside the four-colour palette, and it exists only as a pressed state — never as a fill, a ground or a text colour */
  --home-rule-on-bone: rgba(35, 31, 32, 0.3);      /* the rule between two questions on the about page — ink at three-tenths, so it separates without drawing a box */
  --home-chip-edge-on-bone: rgba(35, 31, 32, 0.4); /* the edge of an outlined chip on the light ground, the counterpart to the bone edge the hollow chip uses on the dark one */

  position: relative;   /* the masthead is positioned against this */
  background-color: var(--colour-bone);
}

/* ------------------------------------------------------------
   THE FOCUS RING ON THIS PAGE
   The site paints the keyboard focus ring brick red, and swaps it
   to bone on its dark grounds — a list of three selectors written
   when the only dark grounds were a .section-dark band, the
   footer and the guides index.

   This page introduced two grounds that list never knew about:
   the brick red hero and the brick red capture band. A brick red
   ring on a brick red ground is the same colour as the ground —
   1:1, which is not a faint ring, it is NO ring. Anyone moving
   through this page with the Tab key lost their place entirely on
   the hero's link, the menu button, the desktop nav and the email
   field: every control on the page's only route to a signup.

   Bone reads on all three of this page's grounds — 4.17:1 on
   brick red and 14.56:1 on ink, against the 3:1 a non-text mark
   has to meet. The ink band and the tab bar are listed too: their
   red ring passed at 3.49:1, but the site's own note calls that
   "faint enough that the ring is easy to lose", and one ring for
   the whole page is easier to keep true than two.
   (Found by the 29 Aug 2026 audit.)
   ------------------------------------------------------------ */

.home-masthead :focus-visible,
.home-hero :focus-visible,
.home-cta :focus-visible {
  outline-color: var(--colour-bone);
}

/* Anton sets no lowercase on this page and carries no weights but
   one, so every headline rule below leans on this. The site's own
   h1/h2/h3 rule sets 700 and a margin underneath — both are
   cleared here, because Anton has a single weight and this page
   spaces its headings itself. */
.home-display {
  font-family: var(--font-display);
  /* 400 — TRUE ANTON. The weight the family actually ships, and the
     only one it ships. **Settled 29 August 2026, and it settled the
     other way first, so read this before changing it.**

     Asking Anton for 700 gets no bold file: the browser strokes the
     400 outline thicker itself. Measured at 120px that is 20.8% more
     ink with the advance widths unchanged, so the extra weight fills
     the counters instead of opening the spacing — and this is a
     condensed face whose counters are tight to begin with. A real
     bold (Gabarito, Arial) adds 40-45% AND widens to carry it. The
     thickening is also renderer-dependent, so the biggest type on the
     site drew a little differently on every browser and OS.

     The page was built at 700 first, because the design reference
     leaves the browser's default bold on its <h1>/<h2> and never
     resets it — so the approved render is accidentally faux-bold, and
     matching the comp meant copying the accident. The handoff's own
     README says "Display — Anton, 400 (single weight)"; the drawing
     and its notes disagreed. Both weights were built and compared in
     a browser, the user chose the bold, then reversed that on the
     same day. THE NOTES WON.

     THE HEADLINES ARE LIGHTER THAN THE SIGNED-OFF COMP as a result,
     on both 4A pages. That is the trade and it was made knowingly.
     If it ever needs revisiting, the honest answer is not a weight
     value but a genuinely heavy condensed face — a brand decision,
     not a CSS one. Set this to 700 to return to the comp exactly.

     The leading below stays as it is: it was opened at the user's
     request and is not tied to the weight. */
  font-weight: 400;
  text-transform: uppercase;

  /* -0.02em, pulled in from -0.005em on 29 August 2026 at the user's
     request, in the same move that sized the hero up 15%. Both are the
     honest way to make a single-weight display face carry a page:
     bigger and tighter, rather than a synthetic bold smeared over the
     outline. It is also the value the stake numeral already used, so
     the page now tracks all of its big type the same way. */
  letter-spacing: -0.02em;

  /* THE LEADING ON EVERY ANTON HEADLINE WAS OPENED BY 0.04 ON
     29 AUGUST 2026, at the user's request — this base value from
     0.88, and each heading that
     overrides it by the same step, so the differences the design set
     between them all survive.

     It only shows where a headline wraps, which on both 4A pages is
     every wrapping headline at two lines: about four pixels at the
     102px hero. The setting is still tight and still condensed; it is
     one notch, not a loosening.

     To go back, take 0.04 off this and off .home-cta-heading,
     .home-hero-headline and .home-qa-question. (It used to name
     .home-get-heading, .home-habit-heading and .home-author-heading
     too; those three went with the old front page on 30 Aug 2026.) */
  line-height: 0.92;
  margin: 0;
}

/* a chip: the small pill labels. Two kinds — hollow on the dark
   band, solid brick on the figure band. white-space is not
   decoration: without it "No account" breaks across two lines
   inside its own pill. */

/* ---- the single-line UI text on this page sets its own leading ----
   The site gives every page a body line-height of 1.6, which is right
   for paragraphs and wrong for a one-line label sitting in a pill, a
   tab or a rule: it pads the box out several pixels taller than the
   design draws it. The design leaves all of these at the font's own
   natural leading, so they are put back to that here. Only single-line
   things belong in this list — nothing that wraps. */
.home-navlinks a,
.home-chip,
.home-cta-smallprint {
  line-height: normal;
}

.home-chip {
  display: inline-block;
  border-radius: var(--home-pill);
  padding: 6px 12px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ------------------------------------------------------------
   THE MASTHEAD
   The wordmark and the menu button, laid over the top of the red
   hero band.

   It is positioned rather than sitting in the hero's own flow for
   one reason: the skip link. The site's rule is that the first
   thing the Tab key reaches jumps PAST the navigation to the
   writing, which only works if the navigation comes before <main>
   in the HTML. So in index.html the masthead sits before <main>,
   as it does on every other page, and is drawn back up over the
   red band here. The hero reserves the room for it in its own top
   padding — change one and change the other.

   It is not sticky. This is a short landing page read in one
   scroll, and a bar pinned over a full-bleed colour band reads as
   something stuck on top of the page rather than part of it.
   ------------------------------------------------------------ */

.home-masthead {
  position: absolute;
  top: var(--home-masthead-top);
  left: var(--home-gutter);
  right: var(--home-gutter);
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-small);
  min-height: var(--home-masthead-height);

  /* the shared bar's own look, undone: no red rule beneath, no grid.
     This page's masthead is transparent over the red — which is the
     colour-matched bar the other pages now build with .section-brick,
     arrived at here first and left as it is. */
  border-bottom: 0;
  background-color: transparent;

  /* bone, so the two-bar menu button drawn in currentColor reads on
     the brick band this bar floats over */
  color: var(--colour-bone);

  /* what the shared menu panel reaches back past to make itself
     full-bleed. This bar is inset by a gutter of its own rather than
     by the content column's side padding, so it says so. */
  --nav-panel-inset: var(--home-gutter);
}

/* the wordmark — THE BONE LOGO FILE.
   ------------------------------------------------------------
   Until 29 August 2026 these two pages drew the name as live text
   (ARCH<i>I</i>-PACK, bone with a blush I) because the only logo
   file was brick red and would have vanished into the brick red
   band. There are now three colourways of the mark, and the rule
   the author set is simply: red ground takes the bone logo, bone
   ground takes the red one. These two pages are the red ground,
   so they load `logo-bone.png`; the other thirteen load
   `logo-red.png` through `.wordmark-logo` above.

   Nothing clever is left here — no mask, no filter. The bone file
   is a real bone logo, blush i-dot and all. Do not reintroduce
   live text, and do not recolour a logo in CSS: pick the file. */
.home-wordmark {
  display: inline-flex;
  align-items: center;
}

.home-wordmark img {
  display: block;
  height: 18px;   /* the line box the live text used to occupy, so the masthead row and the headline below it have not moved */
  width: auto;
}

/* THE MENU BUTTON AND THE PANEL IT OPENS ARE NO LONGER WRITTEN HERE.
   ------------------------------------------------------------
   They were this page's own until 30 August 2026, when the whole of
   this menu — the two-bar button, the full-bleed bone panel, the
   right-set Anton list and the dotted rules between its items — was
   asked for on every page. It now lives in the NAV block at the top
   of this file and every masthead on the site draws it, so there is
   nothing left to write twice. Two things about it that were this
   page's are now the site's: the button takes its colour from the
   bar with currentColor rather than being painted bone here, and the
   panel reaches past its bar's gutter using --nav-panel-inset, which
   this masthead sets to --home-gutter on its own rule above.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   THE BAR WHILE THE MENU IS OPEN

   Shut, the masthead floats over the top of the brick hero and the
   hero reserves its height in its own top padding — that is the
   design, and it is what lets the red run to the very top of the
   screen.

   Open, it stands in the document instead, so the panel beneath it
   takes real height and pushes the page down. The brick background
   keeps the top of the screen red now that the bar is no longer
   sitting on the hero, and the gutter padding replaces the left and
   right offsets it loses when it stops being positioned.

   The wrap that drops the panel onto its own row is not set here any
   more: the shared menu block wraps all three mastheads at the width
   the button appears. (29 Aug 2026, at the user's request.)
   ------------------------------------------------------------ */
.home-masthead.nav-open {
  position: static;
  padding: var(--home-masthead-top) var(--home-gutter) 0;
  background-color: var(--colour-brick-deep);
}

/* with the bar in the flow, the hero must not also reserve room for
   it — it keeps only the gap the design leaves above the headline */
.home-masthead.nav-open ~ main .home-hero {
  padding-top: 44px;
}

/* the three in-page links shown in the masthead from 900px up,
   where the tab bar and the button are both gone */
.home-navlinks {
  display: none;
  align-items: center;
  gap: 32px;
  color: var(--colour-bone);
}

.home-navlinks a {
  color: var(--colour-bone);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.home-navlinks a:hover {
  color: var(--colour-blush);
}

/* the last of the three is the page's own call to action, drawn as
   an outlined pill so it reads as the thing to press */
.home-navlinks-cta {
  border: var(--home-rule) solid var(--colour-bone);
  border-radius: var(--home-pill);
  padding: 9px 18px;
}

.home-navlinks-cta:hover {
  background-color: var(--colour-ink);
  border-color: var(--colour-ink);
  color: var(--colour-bone);
}


/* ------------------------------------------------------------
   1 — HERO
   The premise and the offer, in one screenful.
   ------------------------------------------------------------ */

.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  /* the top padding carries the masthead's own height, because the
     masthead is lifted out of the flow above — 18px above it, the
     44px row itself, then the 44px the design leaves before the
     headline */
  padding: calc(var(--home-masthead-top) + var(--home-masthead-height) + 44px) var(--home-gutter) 30px;
  display: flex;
  flex-direction: column;
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
}

/* the blush circle behind the headline. On the phone and the
   tablet it is flat brand-coloured decoration and nothing more.
   From 900px it stops being decoration and becomes the slot the
   primary photograph goes in — see the desktop rules below. */
/* 264px, where the design reference draws 330px, and the reason is
   arithmetic rather than taste. The circle has to live in the gap
   between the lede and the CTA rule. On a phone that gap runs from
   260px to 552px down the band — 292px — and it does not move,
   because the headline is two lines and the lede is capped at 250px
   at every width from 320 up. A 330px circle cannot fit in 292px,
   so at 330 it rode up over the lede and, since the lede is blush
   and so is the circle, the words that overlapped it disappeared:
   three words gone at 390px, half the sentence at 320px.

   264 is the largest circle whose top edge (620 − 92 − 264 = 264)
   clears the lede's 260, while its bottom edge stays 24px clear of
   the CTA rule. The right offset keeps the same 39% of the shape
   bleeding off the edge as the reference. The design's own note —
   that bottom:92px keeps the circle clear of the rule — is
   untouched. The tablet and desktop circles are unaffected: at 640
   and up the lede and the circle no longer share a column.
   (Found by the 29 Aug 2026 audit.) */
.home-hero-figure {
  position: absolute;
  width: 264px;
  height: 264px;
  right: -104px;
  bottom: 92px;   /* holds it clear of the CTA rule underneath */
  border-radius: 50%;
  background-color: var(--colour-blush);
}

.home-hero-body {
  position: relative;   /* above the circle */
}

.home-hero-headline {
  font-size: 73.6px;   /* 64px + 15% (29 Aug 2026) */

  /* 0.906: .home-display's 0.92 with its gap halved, and on a whole
     pixel. This is the leading every hero on the site now takes on a
     phone — the homepage and the 404 were brought to it as well, so
     the five heroes read the same. The long note at --line-heading in
     the :root block has the arithmetic and the reason for both moves. */
  line-height: 0.906;
  line-height: round(0.906em, 1px);
}

/* wraps to three lines at 390px, and is meant to — no line breaks
   are forced into it */
.home-hero-lede {
  max-width: 250px;
  margin: 20px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--colour-blush);
}


/* ------------------------------------------------------------
   2 — THE STAKE
   What actually goes wrong, so the offer has a reason to exist.
   The large empty middle is the pacing, not an oversight: the
   band is held open by its min-height and the two blocks are
   pushed to its ends.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   3 — WHAT YOU GET
   The one dark band on the page. Ink, not black.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   4 — THE HABIT
   One habit shown as a figure, as a sample of the twelve.
   ------------------------------------------------------------ */


/* the dot field stands in for a duotone, screen-printed
   photograph — two colours, high contrast, brick red on bone.
   When a real photograph exists it goes on top of this and this
   stays underneath as the ground it is printed on. */
.home-dotfield {
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background-image: radial-gradient(var(--colour-brick-red) 1.8px, transparent 2.2px);
  background-size: var(--home-dot) var(--home-dot);
}


/* ------------------------------------------------------------
   5 — WHO WRITES THIS
   Why the PDF is worth an email address.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   6 — THE CAPTURE
   The one and only email capture on this page. The hero's CTA and
   the tab bar's "Get it" both come here rather than carrying a
   second form of their own — the page the design replaced had two
   identical ones.

   The form itself is the site's shared signup: class signup-form,
   posting to the same Kit address as every other form on the
   site, with the field named email_address. js/main.js job 7
   finds it by those names and sends it in the background. The
   look below is this page's; the wiring is the site's, untouched.
   ------------------------------------------------------------ */

.home-cta {
  position: relative;
  overflow: hidden;
  min-height: 660px;
  /* the deep foot clears the tab bar pinned over it */
  padding: 64px var(--home-gutter) 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
}

.home-cta-circle {
  position: absolute;
  width: 240px;
  height: 240px;
  left: -120px;
  bottom: -160px;
  border-radius: 50%;
  background-color: var(--colour-blush);
}

.home-cta-heading {
  position: relative;
  font-size: 56px;
  line-height: 0.916;
  line-height: round(0.916em, 1px);
}

.home-cta .signup-form {
  position: relative;
  display: block;
  margin-top: 26px;
  /* the shared form carries a 20px gap and a 20px margin below for
     the pages that lay it out as a row. Here it is a stack and the
     small print sits inside it, so both are cleared — otherwise the
     band gains 20px the design does not draw. */
  margin-bottom: 0;
  gap: 0;
}

/* the field is a ruled line to write on, not a box: the site's
   bordered field would read as a form pasted onto the band */
.home-cta .email-input {
  display: block;
  width: 100%;
  min-height: var(--tap-minimum);
  padding: 0 0 10px;
  border: 0;
  border-bottom: var(--home-rule) solid var(--colour-bone);
  border-radius: 0;
  background-color: transparent;
  color: var(--colour-bone);
  caret-color: var(--colour-bone);
  /* 16px, NOT the design's 13.5px. iPhones zoom the whole page in on
     any form field whose text is under 16px, and this is the one
     field on the page — it would fire mid-signup, on the exact device
     the design was drawn for. The site has forbidden a sub-1rem input
     since the first build (see --size-input, and the Don'ts in
     DESIGN.md); the 4A build set 13.5px here and put the 16px in the
     900px block, which is the one width where no phone is looking.
     Corrected 29 Aug 2026. The field reads a little larger than the
     comp does at phone width; that is the trade, and it is the one
     the house rule already made. */
  font-size: var(--size-input);
  font-weight: 500;
}

.home-cta .email-input::placeholder {
  color: var(--colour-blush);   /* see the note on .hp-get's placeholder: 0.75 bone measures 3.83:1 on the ground red, blush 4.81:1 (30 Aug 2026 audit) */
  opacity: 1;
}

/* the line thickens to ink under the cursor rather than showing a
   ring — the focus ring itself still appears for the keyboard,
   from the site's own :focus-visible rule */
.home-cta .email-input:focus {
  border-bottom-color: var(--colour-ink);
}

/* the button is ink here, not the site's brick red: it sits ON a
   brick red ground, and red on red is not a button */
.home-cta .cta-button {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--home-pill);
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-cta .cta-button:hover {
  filter: none;   /* the shared button dims itself under the mouse; this one goes to black instead */
  background-color: var(--colour-ink-pressed);
}

.home-cta .cta-button:active {
  filter: none;
  background-color: var(--colour-ink-pressed);
}

/* the line js/main.js writes under the form once Kit has answered.
   It draws its own rule and takes the colour of the text around
   it, so it needs nothing here but the room to sit in. */
.home-cta .form-status {
  position: relative;
  margin-top: 16px;
  margin-bottom: 0;
}

.home-cta-smallprint {
  position: relative;
  margin: 12px 0 0;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* full bone, not 0.85: on the ground red that composites to 4.46:1,
     a twentieth under the 4.5:1 it has to meet at 9.5px. This is the
     same line as .hp-smallprint-on-brick on the homepage and it had to
     be fixed twice, which is the cost of the two namespaces
     (30 Aug 2026 audit) */
  color: var(--colour-bone);
}


/* ------------------------------------------------------------
   THE TAB BAR IS NO LONGER WRITTEN HERE.
   This page drew the first good one — full width, cells ruled
   apart, the tab you are on lit clear of the ink, the call to
   action bone with a red rule under it rather than red type that
   could not pass on ink. All of it became the site's .site-tabbar
   on 30 August 2026, when the bar was asked for on every page, and
   the three copies were folded into that one. It is in the NAV
   half of this file, under THE BOTTOM BAR.

   The one thing this page still says about it is its width: the
   bands here are held to 720px between 640px and 900px, so .home
   sets --tabbar-max to the same measure in the 640px block below
   and the bar is held to the sheet rather than overhanging it.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   THE FOOTER ON THIS PAGE
   The site's own footer, unchanged, carrying the ARB and RIBA
   disclaimer every page carries. The only thing this page does to
   it is reserve room at its foot, so its last line does not sit
   under the tab bar pinned over it.
   ------------------------------------------------------------ */

/* the room the footer keeps clear at its foot: a small gap, the bar's
   own height, and on a phone with a home-indicator strip the height of
   that strip too, since the bar sits above it. It was a block-sized
   gap over a bar recorded as 62px and really 46px — 102px of empty ink
   under the year line, which read as the footer having run out rather
   than having ended. (30 Aug 2026) */
/* WRITTEN HERE NO LONGER: this page now carries .site-tabbar-page on
   <body> like the other thirteen, so the shared rule in THE BOTTOM BAR
   reserves the room and — the part this one never did — gives it back
   at 900px, where the bar is not there to clear. (6 Sep 2026) */

/* ------------------------------------------------------------
   THE SITE'S BAR AND FOOTER ON A 4A PAGE
   The shared bar and the shared footer lay themselves out on the
   content column — 1160px with the drawing-sheet gutter either
   side. Every band on a 4A page is laid out on --home-gutter
   instead: 20px on a phone, 40px on a tablet, 48px from 900px.
   Left on the column the wordmark sits 6px in from the headline
   on a phone and about 30px out from it on a wide screen.

   So the bar takes the page's gutter, and tells the menu panel
   so — the panel reaches back past the bar's own inset to make
   itself full-bleed, and reads that inset from --nav-panel-inset.

   WRITTEN ONCE, HERE. /checklists and /feedback each carried
   their own copy of these three rules, with a note on the second
   saying that a third 4A page should make them shared rather
   than write them a third time. /about became that third page on
   6 Sep 2026, when its own masthead was replaced by the site's
   bar, so both copies were deleted and this is what they became.
   ------------------------------------------------------------ */
.home .site-header {
  --nav-panel-inset: var(--home-gutter);
}

.home .site-nav,
.home .site-footer .content-column {
  max-width: none;
  padding-left: var(--home-gutter);
  padding-right: var(--home-gutter);
}




/* ------------------------------------------------------------
   BREAKPOINT — TABLET, 640px and up.
   Still one column. It simply gets more room: a wider gutter, a
   wider column, and every size stepped up. CSS cannot read the
   settings block inside a media query line, so the 640 here is
   written where it is used.
   ------------------------------------------------------------ */

@media (min-width: 640px) {

  /* THE 720px SHEET CAP HAS GONE, AND SO HAS --tabbar-max.
     Until 6 Sep 2026 this wrapper was held to 720px and centred
     between 640px and 900px, which put 50px of bare body ground
     down each side of /about, /checklists and /feedback while
     every other page ran to both edges. The bar was capped to the
     same measure so it would not overhang the sheet; with no sheet
     to overhang it reads the `none` in its own var() fallback and
     runs edge to edge like every other page's. Do not reinstate
     either without reinstating both. */
  .home {
    --home-gutter: 40px;
  }

  .home-hero { min-height: 720px; }
  .home-hero-headline { font-size: 101.2px; }   /* 88px + 15% */
  .home-hero-lede { max-width: 340px; font-size: 17px; }

  
  
  

  
  
  
  

  

  

  .home-cta { min-height: 780px; }
  .home-cta-heading { font-size: 72px; }
  .home-cta .signup-form { max-width: 460px; }
}


/* ------------------------------------------------------------
   BREAKPOINT — the tablet circle, 700px and up.
   The design's big 420px circle waits 60px longer than the rest of
   the tablet layout, and this is the one number on the page that is
   NOT arbitrary and must not be rounded back to 640.

   The circle clears the lede horizontally only once the column is
   wide enough to sit them side by side: the lede ends 380px into
   the column and the circle starts at (column width − 300), so at a
   680px column their edges touch exactly. This runs from 700 to
   leave real daylight between them rather than balancing on that
   tangent. Run it from 640 instead and the circle lands back on top
   of the lede between 640 and 699 — small tablets in portrait,
   split-screen windows, and a phone held sideways — with the same
   blush-on-blush disappearing text the phone layout had.

   Below 700 the phone's 264px circle simply stays, and that one
   clears the lede vertically at any width. (Found by the 29 Aug
   2026 audit.)
   ------------------------------------------------------------ */

@media (min-width: 700px) {
  .home-hero-figure { width: 420px; height: 420px; right: -120px; bottom: 110px; }
}


/* ------------------------------------------------------------
   BREAKPOINT — DESKTOP, 900px and up.
   The column stops being a column. Every band's ground runs edge
   to edge and the content inside it is centred in a 1200px
   measure — done with padding rather than a wrapper, which is why
   there is no extra div in the HTML to switch on and off.

   Every section becomes a two-column grid, and the bands are
   sized in vh so the page reads as a sequence of screens rather
   than a stripe pattern: at most two grounds are in view at once.

   The 900 is written where it is used, as the 640 above is.
   ------------------------------------------------------------ */

@media (min-width: 900px) {

  .home {
    /* the gutter now carries the centring: 48px at the narrow end,
       growing to hold the content to 1200px on a wide screen */
    --home-gutter: max(48px, calc((100% - var(--home-measure)) / 2));
    max-width: none;
  }

  /* the bottom tab bar and the menu button are both phone patterns
     and both go; the masthead's own row carries the links instead.

     That row is not four in-page anchors any more. It used to be,
     and hiding the button alongside the tab bar then left a desktop
     reader on the front door with no route to any other page on the
     site — on the one page outreach sends people to. It now carries
     Guides and /about among its four, which is what makes hiding
     the button safe. See the note on it in index.html.

     The menu PANEL is hidden here as well as the button, and that
     is deliberate rather than belt-and-braces: the panel is the
     page's "Main" landmark below 900px, the row above is the same
     landmark from 900px up, and leaving both in the accessibility
     tree would offer two navigations called Main with no way to
     tell them apart. Hiding only the list would leave the empty
     landmark behind. (Found by the 29 Aug 2026 audit.) */
  .home-navlinks { display: flex; }
  .home-masthead .nav-toggle,
  .home-masthead .nav-menu { display: none; }

  /* and with no tab bar pinned over it, the footer needs no room
     reserved at its foot. The bar itself is switched off by the
     shared rule in the NAV half of this file, at this same width. */
  .home .site-footer { padding-bottom: var(--space-block); }

  /* ---- hero: the words left, the figure right ---- */
  .home-hero {
    min-height: min(880px, 100vh);
    /* 32px above the masthead, then the masthead's own 36px — the
       height of the outlined pill in it, which is the tallest thing
       on that row. The design's grid puts the masthead in a row of
       its own; here it is lifted out of the flow, so its height is
       carried as padding instead. */
    padding-top: calc(32px + 36px);
    padding-bottom: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    /* two rows, not the three the design names: the masthead is
       lifted out of the flow on this page, and the padding above
       carries its height instead */
    grid-template-rows: 1fr auto;
    column-gap: 64px;
    align-items: start;
  }

  .home-masthead {
    top: 32px;
  }

  /* the three in-page links and the menu button travel together at
     the right-hand end. The auto margin takes up the free space
     between them and the wordmark, so the pair stays grouped
     instead of the row spreading all three evenly apart. */
  .home-navlinks {
    margin-left: auto;
  }

  .home-hero-body {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  /* Anton needs the looser leading above about 90px, or the lines
     touch each other */
  .home-hero-headline {
    /* clamp(84px, 8vw, 124px) + 15% — all three terms scaled together,
       so the growth curve keeps its shape */
    font-size: clamp(96.6px, 9.2vw, 142.6px);
    /* 0.96 with its gap halved, on a whole pixel. The plain ratio
       stays above as the fallback for browsers without round(). */
    line-height: 0.926;
    line-height: round(0.926em, 1px);
  }

  .home-hero-lede {
    max-width: 420px;
    margin-top: 28px;
    font-size: 19px;
  }

  

  

  /* the circle stops being decoration pushed off the edge and
     becomes a figure in its own column. THIS IS THE SLOT FOR THE
     PRIMARY PHOTOGRAPH — a circular crop, or a square image with
     the circle behind it. Keep the aspect-ratio: given a height
     instead, the grid stretches it into an ellipse. */
  .home-hero-figure {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: min(100%, 460px);
    height: auto;
    aspect-ratio: 1;
    right: auto;
    bottom: auto;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
  

  

  /* ---- the capture: headline left, form right ---- */
  .home-cta {
    min-height: 100vh;
    padding: 160px var(--home-gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    column-gap: 80px;
    align-items: center;
  }

  .home-cta-heading {
    font-size: clamp(72px, 6vw, 100px);
    line-height: 0.936;
    line-height: round(0.936em, 1px);
  }

  .home-cta .signup-form {
    margin-top: 0;
  }

  /* the field is 16px everywhere now (see the base rule); this
     breakpoint only opens its underline out a little */
  .home-cta .email-input {
    padding-bottom: 14px;
  }

  .home-cta .cta-button {
    padding: 20px;
    font-size: 14px;
  }

  /* pushed further out, so it never sits under the headline */
  .home-cta-circle {
    width: 380px;
    height: 380px;
    left: -230px;
    bottom: -250px;
  }
}

/* ============================================================
   ============================================================
   ABOUT PAGE
   /about — rebuilt 29 August 2026 from the design handoff
   "Archipack About me Redesign", concept 4A, the same handoff
   the homepage was built from. It replaced the drawing-sheet
   about page that had stood at this address since 23 August.

   IT SHARES THE HOMEPAGE'S COMPONENTS RATHER THAN COPYING THEM.
   The wrapper in about/index.html carries the same class "home"
   the homepage's does, so the masthead, the hero, the chips, the
   dot field, the email capture, the tab bar and the footer all
   come from the HOMEPAGE block above, already drawn to the
   design's pixel values. The handoff asks for exactly this: its
   README says to build the shared parts once rather than
   duplicating them per page.

   So everything below is ONLY what the about page adds:

     - .home-hero-about   the hero, made compact
     - .home-qa           the three questions
     - .home-figure       the portrait band
     - .home-chip-outline the chip on a light ground

   THE DEFINING RULE OF THIS PAGE IS TWO GROUNDS, NOT FOUR. The
   homepage cycles brick, bone, ink and blush. This page uses
   brick and bone only, with ink surviving as type, the button
   and the tab bar. All three questions share ONE continuous bone
   ground and are told apart by rules, not by colour changes.
   That restraint IS the design — do not give the questions their
   own backgrounds.

   Sizes are in px here, as they are on the homepage and for the
   same reason: the design names exact pixel values at three
   named widths and was signed off that way, so the built page
   can be checked against the reference render line by line.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   THE HERO, MADE COMPACT
   The homepage's hero component with three numbers changed. The
   questions are the content on this page, not the hero, so the
   band is shorter and the blush circle tucks into the corner as
   a detail instead of floating behind the headline.
   ------------------------------------------------------------ */

.home-hero-about {
  min-height: 420px;
}

/* On the homepage the wordmark is plain text — that page IS the
   homepage, so there is nowhere for it to go. Here it is a link
   back, which makes it a thing to press, so it gets the site's
   44px tap floor. The masthead centres it, so nothing moves. */
.home-hero-about ~ * .home-wordmark,
.home-masthead a.home-wordmark {
  min-height: var(--tap-minimum);
}

.home-hero-about .home-hero-figure {
  width: 220px;
  height: 220px;
  right: -90px;
  bottom: -60px;
}

.home-hero-about .home-hero-headline {
  font-size: 64.4px;   /* 56px + 15% */
}

.home-hero-about .home-hero-lede {
  /* 200px IS NOT A ROUND NUMBER — IT IS CLEARANCE. The blush circle is
     absolutely positioned into the bottom-right corner at this width,
     and its left edge lands at x=245 on a 375px phone while this
     paragraph starts at x=20. 200px leaves a 25px gap. Widen it and the
     text runs underneath the circle, which paints over it: measured and
     seen on 30 Aug 2026, when the B4 credential paragraph replaced the
     seven words that used to be here and this was briefly set to 30em.
     The ladder below widens with the circle, not against it. */
  max-width: 200px;
}


/* ------------------------------------------------------------
   THE THREE QUESTIONS
   One bone band holding all three. Each question is a grid, so
   the number, the question and the answer can rearrange between
   the phone and the desktop without the HTML changing: on a
   phone the answer sits under the question, on a desktop it
   moves into a third column beside it.
   ------------------------------------------------------------ */

.home-qa {
  padding: 44px var(--home-gutter) 40px;
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}

/* one question. The rule above it is what separates it from the
   one before — there is no box, no card and no colour change. */
.home-qa-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  padding: 28px 0;
  border-top: var(--border-hairline) solid var(--home-rule-on-bone);
}

/* the first question needs no rule above it and no gap either —
   the band's own padding is the gap */
.home-qa-item:first-child {
  padding-top: 0;
  border-top: 0;
}

/* and the last needs no gap below it, for the same reason */
.home-qa-item:last-child {
  padding-bottom: 0;
}

/* the number: Anton, brick red, and hidden from screen readers —
   the questions are already in order, so it is decoration */
.home-qa-number {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  /* 400, and so is every Anton headline on both 4A pages since
     29 August 2026 — see the long note on .home-display. This one was
     never anything else: it is a <span>, so it never picked up the
     browser's default bold the way an <h1> or <h2> does, and the
     design reference draws it in true Anton. It is written out rather
     than left to inherit because the value is load-bearing, not
     incidental. */
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--colour-brick-red);
}

/* the question itself — a real heading, set in Anton like every
   other headline on this page */
.home-qa-question {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 30px;
  line-height: 0.941;
  line-height: round(0.941em, 1px);
}

.home-qa-answer {
  grid-column: 2;
  grid-row: 2;
  max-width: 34em;   /* about thirty-four letters-and-spaces wide */
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

/* the row of chips under the last answer only */
.home-qa-chips {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

/* the chip on a light ground — the counterpart to the hollow one
   the homepage uses on its dark band */
.home-chip-outline {
  border: var(--border-hairline) solid var(--home-chip-edge-on-bone);
  color: var(--colour-ink);
}


/* ------------------------------------------------------------
   THE PORTRAIT BAND
   The same bone ground as the questions above it — only the dot
   field marks the change. THIS BAND IS THE SLOT FOR A PORTRAIT:
   a duotone photograph, brick or ink on bone, goes on top of the
   dot field, which stays underneath as the ground it is printed
   on. Until then the dots are the picture.
   ------------------------------------------------------------ */

.home-figure {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: 0 var(--home-gutter) 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}

/* the caption sits on its own solid block of bone so it stays
   readable where it crosses the dots */
.home-figure-caption {
  position: relative;
  max-width: 26em;
  margin: 10px 0 0;
  padding: 14px;
  background-color: var(--colour-bone);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}


/* ------------------------------------------------------------
   BREAKPOINT — TABLET, 640px and up.
   The same one column with more room in it, exactly as the
   homepage does. The 640 is written where it is used because CSS
   cannot read the settings block inside a media query line.
   ------------------------------------------------------------ */

@media (min-width: 640px) {

  .home-hero-about { min-height: 520px; }
  .home-hero-about .home-hero-headline { font-size: 87.4px; }   /* 76px + 15% */
  /* the circle is still in the corner here, but a 640px column has far
     more room in front of it than a phone does. */
  .home-hero-about .home-hero-lede { max-width: 420px; }
  .home-hero-about .home-hero-figure {
    width: 300px;
    height: 300px;
    right: -110px;
    bottom: -80px;
  }

  .home-qa { padding: 64px var(--home-gutter) 56px; }
  .home-qa-number { font-size: 30px; }
  .home-qa-question { font-size: 40px; }
  .home-qa-answer { font-size: 17px; }

  .home-figure { min-height: 640px; }
  .home-figure-caption { padding: 18px; font-size: 15px; }
}


/* ------------------------------------------------------------
   BREAKPOINT — DESKTOP, 900px and up.
   Each question becomes three columns — the number, the question
   and the answer each in their own — and the answer moves up
   beside the question instead of sitting under it. The single
   bone ground and the rules between the rows carry over
   unchanged: that is the whole point of the layout.
   ------------------------------------------------------------ */

@media (min-width: 900px) {

  .home-hero-about { min-height: min(720px, 84vh); }
  .home-hero-about .home-hero-headline { font-size: clamp(96.6px, 9.2vw, 142.6px); }
  /* from here the circle is a figure in its own grid column and stops
     overlapping anything, so the paragraph can take a real reading
     measure. The hero's text cell caps it at about 566px. */
  .home-hero-about .home-hero-lede { max-width: 30em; }

  /* the circle goes back to being a figure in its own column, the
     way the homepage's does — the corner treatment above belongs
     to the phone and the tablet only. Keep the aspect-ratio:
     given a height instead, the grid stretches it to an ellipse. */
  .home-hero-about .home-hero-figure {
    width: min(100%, 420px);
    height: auto;
    right: auto;
    bottom: auto;
  }

  .home-qa { padding: 140px var(--home-gutter); }

  .home-qa-item {
    grid-template-columns: 56px 320px minmax(0, 1fr);
    column-gap: 40px;
    padding: 44px 0;
    align-items: start;
  }

  .home-qa-number { font-size: 34px; }
  .home-qa-question { font-size: 46px; }

  .home-qa-answer {
    grid-column: 3;
    grid-row: 1;
    margin-top: 6px;
    font-size: 19px;
    line-height: 1.5;
  }

  .home-qa-chips {
    grid-column: 3;
    grid-row: 2;
    margin-top: 24px;
  }

  .home-figure {
    min-height: 100vh;
    padding: 0 var(--home-gutter) 96px;
  }

  .home-figure-caption {
    max-width: 30em;
    font-size: 17px;
  }
}




/* ============================================================
   ============================================================
   CHECKLISTS INDEX
   /checklists — built 2 September 2026 from the design handoff
   "Archipack checklist landing page Redesign". That bundle is
   the concept 4A homepage prototype, byte for byte the files
   kept at .design/about-4a-reference/, so this page is the 4A
   landing page built at the checklist index's address. It
   replaced the holding page that stood there from 23 August.

   IT SHARES THE 4A COMPONENTS WITH /about RATHER THAN COPYING
   THEM. The wrapper in checklists/index.html carries class
   "home", so the hero, the chip, the dot field and the email
   capture come from THE 4A COMPONENTS block above, already
   drawn to the design's pixel values. It also carries class
   "cl", which is what every rule below hangs off.

   So everything below is ONLY what this page adds — which is,
   almost exactly, what the old front page had and /about does
   not. Those parts were deleted from the 4A block on 30 August
   2026 when / was rebuilt on its own .hp- components; they are
   redrawn here from the handoff's own stylesheet, under this
   page's prefix, so that /about and this page each own what
   only they use:

     - .cl .site-nav         the site's bar, on this page's gutter
     - .cl .site-footer      the site's footer, on the same gutter
     - .cl .home-hero        the hero with a real bar above it, and its
                             headline held to two lines at 320px
     - .cl-hero-cta          the ruled CTA row at the foot of the hero
     - .cl-stake             what goes wrong: the numeral and the claim
     - .cl-get               what you get: the one ink band
     - .cl-habit             one habit, as a figure on the dot field
     - .cl-author            who writes this
     - .cl-chip-hollow/solid the two chip colourings the 4A block lost

   THE NAV AND THE FOOTER ARE THE SITE'S. The handoff draws a
   masthead floating over the red hero and no footer; this page
   carries the shared bar in its brick colouring and the shared
   ink footer, as the guide pages do. The one thing this block
   does to the bar is put it on this page's gutter, so the
   wordmark and the headline under it start on the same line.

   Sizes are in px here, as they are in the 4A block and for the
   same reason: the design names exact pixel values at three
   named widths and was signed off that way.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   THE SETTINGS FOR THIS PAGE
   Named on the page's own hook. Nothing outside it reads them.
   ------------------------------------------------------------ */
.cl {
  --cl-rule-on-ink: rgba(243, 242, 239, 0.28);      /* the hairline between two items in the "what you get" list — bone at just over a quarter, so it separates without drawing a table */
  --cl-chip-edge-on-ink: rgba(243, 242, 239, 0.4);  /* the edge of a hollow chip on the ink band; the counterpart to --home-chip-edge-on-bone */
}


/* ------------------------------------------------------------
   THE SITE'S BAR ON THIS PAGE
   The shared bar lays itself out on the content column — 1160px
   with the drawing-sheet gutter either side. Every band on this
   page is laid out on --home-gutter instead: 20px on a phone,
   40px on a tablet, and from 900px whatever centres a 1200px
   measure. Left on the column, the wordmark would sit 6px in
   from the headline on a phone and about 20px out from it on a
   wide screen. So the bar takes the page's gutter, and tells
   the menu panel so — the panel reaches back past the bar's
   own inset to make itself full-bleed, and reads that inset
   from --nav-panel-inset.
   ------------------------------------------------------------ */
/* THESE RULES ARE THE 4A BLOCK'S NOW, on .home, where /about needs
   them too — see THE SITE'S BAR AND FOOTER ON A 4A PAGE. This page
   carries class "home" so it draws them unchanged. (6 Sep 2026) */


/* ------------------------------------------------------------
   THE HERO WITH A BAR ABOVE IT
   The 4A hero reserves its top padding for a masthead lifted out
   of the flow and drawn back over the band. On this page the
   masthead is the site's bar, a real row above the band, so the
   hero keeps only the 44px the design leaves between the
   masthead and the headline — the same figure the open-menu
   rule in the 4A block sets for the same reason.
   ------------------------------------------------------------ */
.cl .home-hero {
  padding-top: 44px;
}

/* THE HEADLINE MUST STAY ON TWO LINES, and below about 328px it
   does not on its own. "DECIDES IT." measures 282px at the 4A
   block's 73.6px, and a 320px phone has 280px between its gutters,
   so the line broke, the headline grew to three lines, and the lede
   under it ran down behind the blush circle — blush on blush, and
   the last word of the sentence gone. The circle cannot move (see
   the long note on .home-hero-figure in the 4A block), so the type
   gives instead: 22.5vw is 72px at 320, which fits with 4px to
   spare, and the min() hands back the 4A size the moment the
   screen is wide enough for it. Measured 2 Sep 2026. */
.cl .home-hero-headline {
  font-size: min(73.6px, 22.5vw);
}

/* ------------------------------------------------------------
   THE TWO SHEETS
   The project start checklist, both pages, coming out from behind
   the circle — the pile the homepage's hero carries, drawn here
   the same way (2 September 2026). The difference is what they
   hang off: the homepage anchors its pile to the band's right
   edge, but this hero's circle moves between three different
   places at three widths (see the 4A block), so the pile hangs
   off the CIRCLE instead. The 4A circle element becomes a
   transparent frame, the sheets stand inside it in percentages
   of its size, and a span drawn last is the circle itself. Move
   or resize the 4A circle and the pile goes with it.

   Same rule as the circle: never behind a line of type. Checked
   at 320, 390, 700 and 1440. If the lede grows a line, check
   again.
   ------------------------------------------------------------ */
.cl {
  --cl-sheet-shadow: rgba(35, 31, 32, 0.28);   /* the drawn shadow under each sheet — the homepage's value, ink at just over a quarter, because the ground is red and the cards' 0.08 vanishes on it */
}

/* the 4A circle, made a frame: its own fill and rounding go, and the
   span inside draws the circle instead. overflow stays visible, or
   the sheets would be cut at the frame's edge. */
.cl .home-hero-figure {
  background-color: transparent;
  border-radius: 0;
}

.cl-hero-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--colour-blush);
}

/* one sheet. Sized against the circle: 56% of the phone's 264px
   circle is 148px, a quarter larger than the homepage's 116px pile,
   asked for on 2 Sep 2026; the same fraction of the desktop circle is
   258px. Set off the circle's left edge by a little under half the
   circle, so the pile's right edge is tucked about 30px behind it on
   a phone. */
.cl-hero-sheet {
  position: absolute;
  left: -44%;
  /* 22% of the phone's circle is 58px, which lands the fanned lower
     corner of page two 36px above the CTA rule. At 10% it was 4px
     off the rule; the homepage's pile keeps about 24px. */
  bottom: 22%;
  width: 56%;
  height: auto;
  transform-origin: 100% 50%;   /* the fan opens from the edge tucked behind the circle */
  box-shadow: 4px 4px 0 var(--cl-sheet-shadow);   /* hard-edged, like every drawn shadow on the site */
}

.cl-hero-sheet-2 {
  transform: rotate(-19deg) translate(-10px, 4px);
}

.cl-hero-sheet-1 {
  transform: rotate(-5deg);
}

/* the ruled row at the foot of the hero. The whole row is the link,
   pushed to the bottom of the band by the auto margin; it goes to
   the one form on the page. The 44px floor is the site's tap
   minimum — the design draws the row at about 32px. */
.cl-hero-cta {
  position: relative;   /* above the circle */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-minimum);
  margin-top: auto;
  padding-top: 14px;
  border-top: var(--home-rule) solid var(--colour-bone);
  color: var(--colour-bone);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
}

.cl-hero-cta em {
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
}

.cl-hero-cta:hover {
  color: var(--colour-blush);
}


/* ------------------------------------------------------------
   03 — THE STAKE
   What actually goes wrong, so the offer has a reason to exist.
   The large empty middle is the pacing, not an oversight: the
   band is held open by its min-height and the two blocks are
   pushed to its ends.
   ------------------------------------------------------------ */
.cl-stake {
  min-height: 560px;
  padding: 56px var(--home-gutter) 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}

.cl-stake-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* the numeral: Anton at display size, brick red. Red type is allowed
   here and nowhere smaller — at 132px it clears the 3:1 large text
   has to meet many times over. Hidden from screen readers: the
   caption beside it carries the meaning. */
.cl-stake-number {
  font-family: var(--font-display);
  font-weight: 400;   /* true Anton — see the note on .home-display */
  font-size: 132px;
  line-height: 0.76;
  letter-spacing: -0.02em;
  color: var(--colour-brick-red);
}

.cl-stake-caption {
  margin: 0;
  padding-top: 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* the claim, under a 2px ink rule. The rule is the paragraph's own
   top edge rather than an element of its own. */
.cl-stake-claim {
  margin: 0;
  padding-top: 14px;
  border-top: var(--home-rule) solid var(--colour-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}


/* ------------------------------------------------------------
   04 — WHAT YOU GET
   The one dark band on the page. Ink, not black.
   ------------------------------------------------------------ */
.cl-get {
  min-height: 620px;
  padding: 56px var(--home-gutter) 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--colour-ink);
  color: var(--colour-bone);
}

.cl-get-heading {
  font-size: 38px;
  line-height: 0.926;   /* the design's 0.92, opened by the 0.04 the 4A pages were given on 29 Aug 2026, then gap-halved on 2 Sep 2026 */
  line-height: round(0.926em, 1px);
}

.cl-get-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: var(--border-hairline) solid var(--cl-rule-on-ink);
}

.cl-get-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: var(--border-hairline) solid var(--cl-rule-on-ink);
}

/* the item's number. The design draws it in brick red at 18px, which
   measures 3.49:1 on ink — under the 4.5:1 small text has to meet.
   So it takes THE DRAWN LABEL MARK's second form: the words in the
   ground's full-strength type and the red as a rule under them. It is
   written here rather than added to the list at the foot of the file
   because that list sets ink, and ink on this ink band would vanish. */
.cl-get-number {
  flex: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  color: var(--colour-bone);
  text-decoration: underline;
  text-decoration-color: var(--colour-brick-red);
  text-decoration-thickness: calc(var(--border-hairline) * 2);
  text-underline-offset: 0.35em;
  text-decoration-skip-ink: none;
}

/* a real heading, so the three arrive as three things however the
   page is read; the site's heading rule is undone where it shows */
.cl-get-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.071;
  line-height: round(1.071em, 1px);
}

.cl-get-note {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--home-quiet-on-ink);
}

.cl-get-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}

/* ---- the two chip colourings the 4A block lost on 30 Aug 2026 ---- */

/* hollow, on the ink band */
.cl-chip-hollow {
  border: var(--border-hairline) solid var(--cl-chip-edge-on-ink);
  color: var(--colour-bone);
}

/* solid, on the figure band. THE GROUND RED, not the mark red: this
   chip carries words, and bone on --colour-brick-red measures 4.19:1
   where it has to reach 4.5:1. On brick-deep it measures 5.53:1. See
   the 30 Aug 2026 note on the two reds in the settings block. */
.cl-chip-solid {
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
}


/* ------------------------------------------------------------
   05 — THE HABIT
   One habit shown as a figure, as a sample of the twelve, on the
   dot field the 4A block draws. The ring is decoration.
   ------------------------------------------------------------ */
.cl-habit {
  position: relative;   /* the dot field and the ring are positioned against this */
  overflow: hidden;
  min-height: 640px;
  padding: 0 var(--home-gutter) 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}

.cl-habit-ring {
  position: absolute;
  width: 150px;
  height: 150px;
  right: 24px;
  top: 44px;
  border: var(--home-rule) solid var(--colour-brick-red);
  border-radius: 50%;
}

.cl-habit-body {
  position: relative;   /* above the dots */
}

.cl-habit-heading {
  margin-top: 12px;
  font-size: 42px;
  line-height: 0.926;
  line-height: round(0.926em, 1px);
}


/* ------------------------------------------------------------
   06 — WHO WRITES THIS
   Why the PDF is worth an email address.
   ------------------------------------------------------------ */
.cl-author {
  min-height: 480px;
  padding: 56px var(--home-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}

.cl-author-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* the portrait: a dot field on ink, standing in for a photograph
   until there is one. Inverted from the figure band's — blush dots
   on ink, at a tighter pitch. */
.cl-author-portrait {
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background-color: var(--colour-ink);
  background-image: radial-gradient(var(--colour-blush) 1.6px, transparent 2px);
  background-size: 7px 7px;
}

.cl-author-heading {
  font-size: 30px;
  line-height: 0.941;   /* the design's 0.95, opened by the 4A pages' 0.04, then gap-halved */
  line-height: round(0.941em, 1px);
}

/* the credentials line. The design draws it in brick red at 9.5px;
   here it is THE DRAWN LABEL MARK, first form — ink words with the
   red rule beside them — and its selector is in that block's list
   at the foot of this file. Only the type is set here. */
.cl-author-credentials {
  margin: 6px 0 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: normal;
  text-transform: uppercase;
}

.cl-author-body {
  max-width: 34em;
  margin: 16px 0 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.55;
}


/* ------------------------------------------------------------
   BREAKPOINT — TABLET, 640px and up.
   Still one column, with more room in it, as the 4A block does
   at the same width. The 640 is written where it is used because
   CSS cannot read the settings block inside a media query line.
   ------------------------------------------------------------ */
@media (min-width: 640px) {

  .cl-stake { min-height: 680px; }
  .cl-stake-number { font-size: 180px; }
  .cl-stake-claim { max-width: 560px; font-size: 26px; }

  .cl-get { min-height: 720px; }
  .cl-get-heading,
  .cl-habit-heading { font-size: 52px; }
  .cl-get-title { font-size: 19px; }
  .cl-get-note { font-size: 15px; }

  .cl-habit { min-height: 760px; }

  .cl-author { min-height: 560px; }
}


/* ------------------------------------------------------------
   BREAKPOINT — DESKTOP, 900px and up.
   Every band's ground runs edge to edge and its content is
   centred in the 1200px measure the 4A block sets. Each band
   becomes a two-column grid, sized in vh so the page reads as a
   sequence of screens. The 900 is written where it is used, as
   the 640 above is.
   ------------------------------------------------------------ */
@media (min-width: 900px) {

  /* ---- the hero: the bar above it is a real row, so the band
     needs no room reserved for a masthead — 48px top and bottom,
     which is the design's own bottom figure ---- */
  .cl .home-hero {
    padding-top: 48px;
  }

  /* the 4A hero is a two-row grid from here — the words and the
     figure on the first row, and this on the second, under the
     words. The 4A block's own note explains why there are two rows
     and not the design's three. */
  .cl-hero-cta {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    font-size: 13px;
  }

  .cl-hero-cta em {
    font-size: 22px;
  }

  /* the pile, as the homepage draws it from here: pinned at the corner
     behind the circle, fanned a little wider, under a heavier shadow */
  .cl-hero-sheet {
    /* from here the circle is a grid item in the right-hand column
       and the words are in the left, so the pile is drawn less far
       out of the circle than on a phone: at the phone's offset it
       reached across the column gap and under the last word of the
       headline. The fan does the rest: pinned at its top-right
       corner, the lower sheet swings out well past this edge.

       AND THE OFFSET EASES WITH THE WINDOW. The two columns are
       tightest at 900px, where the lede's last line ends 13px past
       where a -22% pile begins; each 100px of window buys about
       16px back. So below 1200px the pile is pulled right by 16px
       for every 100px the window is short of 1200, and from 1200
       up the max() hands back the flat -10%. Re-measured when the
       pile grew on 2 Sep 2026: see the figures in the page's
       memory note, all over 30px clear. */
    left: max(-10%, calc(-10% + (1200px - 100vw) * 0.16));
    bottom: 10%;
    transform-origin: 100% 0;
    box-shadow: 6px 6px 0 var(--cl-sheet-shadow);
  }

  .cl-hero-sheet-2 {
    transform: rotate(-23deg) translate(-16px, 8px);
  }

  .cl-hero-sheet-1 {
    transform: rotate(-7deg);
  }

  /* ---- the stake: numeral left, claim right ---- */
  .cl-stake {
    min-height: 92vh;
    padding: 160px var(--home-gutter);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 64px;
    align-items: center;
  }

  .cl-stake-number { font-size: 260px; }

  .cl-stake-caption {
    padding-top: 24px;
    padding-right: 32px;
    font-size: 12px;
  }

  .cl-stake-claim {
    max-width: 620px;
    padding-top: 20px;
    font-size: 34px;
    line-height: 1.2;
  }

  /* ---- what you get: heading left, three columns right ---- */
  .cl-get {
    min-height: 92vh;
    padding: 160px var(--home-gutter);
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 64px;
    row-gap: 32px;
    align-items: start;
  }

  .cl-get-heading {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 64px;
  }

  .cl-get-list {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    border-top: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
  }

  /* each item stands in its own column under a 2px rule, the hairline
     between rows having gone with the rows */
  .cl-get-item {
    display: block;
    padding: 20px 0 0;
    border-bottom: 0;
    border-top: var(--home-rule) solid var(--colour-hairline-on-ink);
  }

  .cl-get-number {
    display: block;
    margin-bottom: 10px;
    font-size: 22px;
  }

  .cl-get-chips {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  /* ---- the habit: a full-bleed figure band ---- */
  .cl-habit {
    min-height: 100vh;
    padding: 0 var(--home-gutter) 96px;
  }

  .cl-habit-ring {
    width: 280px;
    height: 280px;
    right: 8%;
    top: clamp(64px, 10vh, 140px);
    border-width: 3px;
  }

  .cl-habit-heading {
    max-width: 900px;
    font-size: 84px;
    line-height: 0.936;
    line-height: round(0.936em, 1px);
  }

  /* ---- the author: portrait and name left, prose right ---- */
  .cl-author {
    min-height: 80vh;
    padding: 160px var(--home-gutter);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 64px;
    align-items: center;
  }

  .cl-author-portrait {
    width: 132px;
    height: 132px;
    background-size: 10px 10px;
  }

  .cl-author-heading { font-size: 44px; }
  .cl-author-credentials { font-size: 11px; }

  .cl-author-body {
    max-width: 620px;
    margin-top: 0;
    font-size: 19px;
    line-height: 1.5;
  }
}


/* ============================================================
   ============================================================
   HOMEPAGE
   / — the front page, built 30 August 2026 from the design
   handoff "Archipack Homepage Design". That bundle ships two
   prototypes, and both were built: a mobile one drawn at 390px
   and a desktop one drawn at 1440px, fluid down to about 900px.

   Every selector in this block starts .hp, which is the class on
   the wrapper in index.html. It replaced a front page built on
   .home- components, and those did not go away — /about was
   rebuilt from the earlier 4A handoff and still uses them, so
   they now live under the ABOUT PAGE banner further down and
   belong to that page alone. NOTHING HERE READS THEM.

   THIS PAGE IS DELIBERATELY UNLIKE THE REST OF THE SITE, and it
   is worth knowing why before "fixing" it:

     - no background grid, no drawing-sheet framing, no spec
       strip. The page is colour bands read one after another,
       the way an app onboarding is read, not a drawing sheet.
     - sizes here are written in px, not the rem the rest of the
       site uses. The handoff specifies exact pixel values at its
       two named widths and its own spec table lists them; keeping
       them lets the built page be checked against the prototype
       line by line. Where the desktop prototype uses clamp(), so
       does this.
     - it carries a second typeface, Anton, for display type
       only. /about is the only other page that does.

   THE TWO LAYOUTS:
     - base rules below      the phone, drawn at 390px
     - 900px and up          desktop: full-bleed bands, two
                             columns, tab bar swapped for an
                             inline nav

   TABLET, 600–900px, IS UNDESIGNED and the handoff says so in as
   many words. What happens there is its own instruction: the
   phone layout, in a column capped at 430px and centred. Every
   measurement the phone design makes — the hero's 176px pacing
   band, the circle hung off the right edge at -60px, the 250px
   lede — is drawn against a 390px band and stops being true the
   moment the band is allowed to grow. Ask before inventing a
   tablet layout; do not simply let the phone one stretch.

   COLOUR: the handoff names its own hexes (#B85450 brick,
   #F2F0EB bone, #1E1C1C ink, #F7DEDC pale pink). They are the
   designer's eyedropper reading of THIS SITE'S OWN PAGES — the
   bundle ships the built front page as one of its references —
   so this build takes the site's tokens instead and the page
   sits in the same palette as every other. Same for the body
   face: the handoff asks for Barlow, the site self-hosts
   Gabarito, and Gabarito is used. Anton is unchanged, and is
   the handoff's own choice.

   NOT SETTLED, and flagged rather than quietly changed on the
   day this was built:
     - small text on the two brick red grounds tops out at
       4.19:1 against the 4.5:1 the contrast rules ask for. It
       cannot be fixed by size or weight; only the ground or the
       palette would fix it. The hero eyebrow, the hero lede,
       the capture band's lede and its small print are all in
       this position, exactly as the previous front page was.
     - brick red small type appears in seven places the handoff
       draws it — the two eyebrows, the figure tag, the three
       set meta lines, the stake's 01/02/03. THE DRAWN LABEL
       MARK at the foot of this file exists precisely to solve
       that case, and is deliberately NOT applied here: the
       design is signed off as drawn and is being reviewed
       separately.
     - Anton ships one weight. Every rule below asks for 400
       explicitly rather than letting a heading inherit the
       browser's bold, which would draw a synthetic bold instead
       — so the display type reads lighter here than in the
       prototype, whose h1/h2/h3 do inherit it. That is the same
       call that was settled for /about on 29 August 2026, and
       it follows the handoff's own note: "Anton (400 only)".
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   THE SETTINGS FOR THIS PAGE
   Named here rather than in the settings block at the top of
   the file, because nothing outside the homepage reads them.
   ------------------------------------------------------------ */

.hp {
  --hp-gutter: 20px;         /* the side margin on every band — opens out on desktop */
  /* --hp-phone-max WAS HERE and is gone (30 Aug 2026, at the user's
     request). It was 430px — the handoff's ceiling on how wide the
     phone layout was allowed to get before the desktop one took over
     at 900px — and it held the page in a 430px column with bone down
     both sides of it on anything wider than a phone. The page runs to
     both edges of the window at every width now. */
  --hp-measure: 1440px;      /* how wide the desktop page is allowed to get — the width the desktop prototype is drawn at */
  /* --hp-tabbar-height WAS HERE and is gone: the bar is the site's
     now and so is its height — see --tabbar-height in the settings
     block at the top of the file. It read 52px here against the
     site bar's 46. */

  /* the pen weights and shapes this page draws with */
  --hp-pill: 999px;          /* chips and buttons. Everything else on this page has square corners, on purpose */
  --hp-rule: 1.5px;          /* the hairline this design rules with — heavier than the site's 1px, and the handoff is specific about it */
  --hp-bar-radius: 2px;      /* the rounded end of each line in the menu button — the only radius here that is not the full pill */

  /* the colours this page adds. Everything else points back at the
     four site tokens; these are the states the design names that the
     site had no value for. Each is the handoff's own offset from ITS
     brick or ink, applied to the site's. */
  --hp-brick-lit: #d1605d;      /* the brick button under the mouse — brick lifted, not dimmed */
  --hp-brick-pressed: #973b35;  /* a brick-red link under the mouse on a light ground */
  --hp-card-lit: #2f2a2b;       /* a set card under the mouse — ink lifted a shade, the same move the button makes */
  --hp-ink-pressed: #000000;    /* the ink button on the brick band goes to true black under the mouse rather than dimming. It is the one colour on the site outside the four-colour palette, and it exists only as a pressed state — never as a fill, a ground or a text colour */

  --hp-header-rule: rgba(192, 80, 77, 0.35);   /* the rule under the masthead — brick at about a third, so it reads as a hairline and not as a red line */
  --hp-quiet-on-ink: rgba(243, 242, 239, 0.72);   /* a paragraph on the ink band */
  --hp-quieter-on-ink: rgba(243, 242, 239, 0.6);  /* the second line inside a set card */
  --hp-faint-on-ink: rgba(243, 242, 239, 0.52);   /* the small print and the year line — the quietest bone this page uses. It was 0.45, which measures 4.04:1 on ink and is under the 4.5:1 both of them have to meet at 10px; 0.52 measures 4.92:1 and is still the quietest voice in the footer (30 Aug 2026 audit) */
  --hp-edge-on-ink: rgba(243, 242, 239, 0.4);     /* the edge of a chip */
  --hp-edge-card: rgba(243, 242, 239, 0.25);      /* the edge of the desktop signup card */
  --hp-rule-on-ink: rgba(243, 242, 239, 0.2);     /* the rule above the footer's link row */
  /* --hp-quiet-on-brick WAS HERE and is gone (30 Aug 2026 audit). It
     was rgba(253, 219, 217, 0.85), the eyebrow on the brick ground,
     and it composited to 3.94:1 there. The eyebrow now takes full
     --colour-blush at 4.81:1 and is stepped back from the bone small
     print beside it by HUE rather than by alpha — which is the only
     move left once a ground is this dark. Nothing reads this. */
  --hp-rule-on-brick: rgba(243, 242, 239, 0.6);   /* the hero's CTA rule */
  --hp-sheet-shadow: rgba(35, 31, 32, 0.28);      /* the drawn shadow under each checklist sheet in the hero — ink at just over a quarter, because the ground is red and the cards' 0.08 vanishes on it */
  --hp-field-rule: rgba(243, 242, 239, 0.75);     /* the line under the email field on the capture band — 3.83:1 on the ground red, over the 3:1 a control's own edge has to meet */
  --hp-footer-quiet: rgba(243, 242, 239, 0.65);   /* the footer's paragraph and its link row — 6.9:1 on ink */
  --hp-quiet-on-bone: rgba(35, 31, 32, 0.7);      /* the paragraph under the guides heading */
  --hp-credentials-on-bone: rgba(35, 31, 32, 0.65); /* the ARB · RIBA line */
  /* --hp-tab-quiet WAS HERE and is gone with the bar that read it.
     Its value — bone at 0.72, which measures 8.1:1 — was already the
     same number /about had settled on, and is now the site's
     --colour-tab-quiet. */

  /* the dot field that stands in for a halftoned photograph */
  --hp-dot-colour: var(--colour-blush-deep);
  --hp-dot-size: 1.6px;
  --hp-dot-cut: 1.7px;   /* where the dot stops and the ground starts. Always a hair over --hp-dot-size: the gap between the two is the dot's soft edge, and equal values draw a hard aliased disc */
  --hp-dot-pitch: 13px;

  /* and the inverted one used for the portrait */
  --hp-portrait-size: 62px;
  --hp-portrait-dot: 1.4px;
  --hp-portrait-cut: 1.5px;
  --hp-portrait-pitch: 7px;

  position: relative;

  /* FULL WIDTH. There was a max-width of 430px and an auto margin
     here from the first build until 30 August 2026, because the
     handoff is a 390px phone screen and 430 was its ceiling. On any
     window wider than that it drew the whole page as a narrow column
     with bone down both sides, which is what it was taken out for.
     The bands are fluid and the type is set in clamps, so the phone
     layout simply grows into the room up to the 900px breakpoint,
     where the desktop layout takes over. */
  width: 100%;
  background-color: var(--colour-bone);

  /* THE SITE'S BAR AND FOOTER ON THIS PAGE — see the matching rule
     for the 4A pages in the 4A block. Same reason: this page's bands
     are laid out on --hp-gutter, so the bar and the footer take that
     gutter too and the wordmark starts on the headline's line. Left
     on the content column the wordmark sat 22px out from it at
     1280px. (6 Sep 2026) */

  /* The room the fixed tab bar stands in is NOT reserved here any
     more. This page carries .site-tabbar-page on <body> as of
     6 Sep 2026, so the shared rule in THE BOTTOM BAR keeps the room
     at the footer's foot and takes it back at 900px. Reserving it on
     the wrapper as well left the height standing on desktop, where
     there is no bar. */
}

.hp .site-header {
  --nav-panel-inset: var(--hp-gutter);
}

.hp .site-nav,
.hp .site-footer .content-column {
  max-width: none;
  padding-left: var(--hp-gutter);
  padding-right: var(--hp-gutter);
}

/* NO overflow ON THE WRAPPER. The circles do bleed off the bands and
   they are clipped — but by the bands themselves, which is where the
   handoff puts the clip. An overflow on this element instead would
   make it a scroll container, and a sticky masthead inside a scroll
   container that never scrolls does not stick at all. */

/* a band jumped to from the nav, the tab bar or an in-page link lands
   hard against the top of the window. It used to have to clear the
   masthead, which was pinned there; it is not any more, so the offset
   this carried — and the js job that measured the bar for it — have
   both gone (30 Aug 2026). Kept at 0 rather than deleted because the
   list of bands is the useful half of the rule. */
.hp-hero,
.hp-latest,
.hp-guides,
.hp-who,
.hp-get {
  scroll-margin-top: 0;
}

/* ------------------------------------------------------------
   THE LINE SPACING RESET
   The site sets line-height 1.6 on <body>, which is right for
   paragraphs and wrong for every single-line piece of interface
   on this page. The design leaves all of them at the browser
   default, and 1.6 pads each one several pixels taller than it
   is drawn — enough that the masthead row, the chips and the
   tab bar all miss their measured heights.

   One list, so a new label only has to be added in one place.
   ------------------------------------------------------------ */
.hp-eyebrow,
.hp-display,
.hp-chip,
.hp-stake-label,
.hp-stake-index,
.hp-fig-tag,
.hp-set-meta,
.hp-who-credentials,
.hp-smallprint,
.hp-footer-year,
.hp-footer-links a,
.hp-navrow a,
.hp-hero-cta,
.hp-hero-second,
.hp-guides-all,
.hp-who-link,
.hp-button {
  line-height: normal;
}

/* ------------------------------------------------------------
   THE FOCUS RING ON THIS PAGE
   Handled up in the BASE block with the rest of the site's focus
   rules — this page's brick and ink grounds are named in the
   bone-ring list there. A brick red ring on a brick red ground
   is 1:1, which is not a faint ring, it is NO ring.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   DISPLAY TYPE
   Anton, at 400 and never bold — see the long note in the banner.
   Size, leading and tracking are set by whatever is wearing it.
   ------------------------------------------------------------ */
.hp-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}

/* the two line breaks this design switches by width. A <br> that is
   display:none does not break the line, which is the whole trick. */
.hp-break-desk,
.hp-phone-only {
  display: none;
}

@media (min-width: 900px) {
  .hp-break-phone { display: none; }
  .hp-break-desk { display: inline; }
}

.hp-phone-only { display: inline; }

@media (min-width: 900px) {
  .hp-phone-only { display: none; }
}

/* ------------------------------------------------------------
   THE TAP TARGETS
   The handoff draws type, not hit areas, and several of the links
   it draws come out well under the 44px the site's --tap-minimum
   asks for: the wordmark is 20px tall, "three fair questions" is
   14px, and the footer's links are 13px.

   Every one of them is grown the same way — padding to make the
   area, and an equal negative margin to take the space back — so
   the hit target reaches 44px WITHOUT MOVING A SINGLE DRAWN
   PIXEL. Grow them with padding alone and the masthead row opens,
   which moves the headline under it; every band's measurements
   are taken from rows that must not change height.

   Verified by shooting all six pages before and after: the
   renders came back byte-identical.
   ------------------------------------------------------------ */

.hp-wordmark {
  padding: 12px 0;
  margin: -12px 0;
}

.hp-who-link,
.hp-footer-links a {
  display: inline-block;
  padding: 16px 0;
  margin: -16px 0;
}

/* these two are already 35px of ruled row; they need nine more,
   taken back underneath so the rule stays where it is drawn */
.hp-hero-cta,
.hp-guides-all {
  padding-bottom: 9px;
  margin-bottom: -9px;
}

/* THE DESKTOP NAV ROW IS DELIBERATELY NOT IN THAT LIST. Padding it
   opened the masthead from 47px to 78px — a negative margin does not
   pull a flex line back the way it pulls a block — and that row's
   height is what every anchor on the page lands under. Those links
   are 13px tall and 38–120px wide, which is under WCAG 2.2's 24px
   minimum on its own, but they clear it under the spacing exemption:
   the gap between them is 14–34px, so no two targets' 24px circles
   meet. They are a pointer-only row; the 44px targets below 900px
   are the menu panel's, and those are full-width rows. */

/* ------------------------------------------------------------
   THE SHARED SMALL LABEL
   One eyebrow shape, three grounds. Brick red as type is the
   handoff's call and is flagged in the banner above.
   ------------------------------------------------------------ */
.hp-eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* stepped back by hue rather than by alpha: blush at 0.85 measures
   3.94:1 on the ground red, full blush 4.81:1, and against the bone
   smallprint below it still reads as the quieter of the two
   (30 Aug 2026 audit) */
.hp-eyebrow-on-brick {
  color: var(--colour-blush);
}

.hp-eyebrow-dotted {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 10.5px;
  /* The words take bone; the red stays as the dot drawn beside them.
     This is THE DRAWN LABEL MARK with the mark already in the markup,
     so no rule is added — .hp-eyebrow-dot below IS the mark. Brick red
     on ink measures 3.49:1, which is under the 4.5:1 these words have
     to meet and over the 3:1 the dot has to. (30 Aug 2026 audit) */
  color: var(--colour-bone);
}

.hp-eyebrow-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--colour-brick-red);
}

/* the small print under a signup — the same shape on both grounds */
.hp-smallprint {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-faint-on-ink);
}

.hp-smallprint-on-brick {
  color: var(--colour-bone);
}

/* ------------------------------------------------------------
   THE MASTHEAD
   ------------------------------------------------------------ */
.hp-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--hp-gutter) 12px;

  /* THE BAR IS THE TOP OF THE HERO. It carries the hero's own brick
     rather than bone, and there is no rule under it, so the two read
     as one band — asked for on 30 August 2026. It was pinned to the
     top of the window until the same day; unpinning it is what makes
     the brick possible, because a pinned brick bar would drag the
     hero's colour over every bone band below it.

     Ink measures 2.63:1 on brick-deep and must never sit on it, so
     the colour below turns everything in the bar bone: the two menu
     bars, drawn in currentColor, and the row of links at 900px. The
     wordmark swaps to its bone file in the markup.

     --hp-header-rule is now unused and is kept in the settings block
     against the bar ever going bone again. */
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
  border-bottom: 0;

  /* what the shared menu panel reaches back past to make itself
     full-bleed — this bar's own gutter, not the content column's */
  --nav-panel-inset: var(--hp-gutter);
}

.hp-wordmark {
  display: block;
  flex: 0 0 auto;
  line-height: 0;   /* an <img> is inline, and inline means a line box under it — 0 removes the four stray pixels that box adds to the masthead's height */
}

.hp-wordmark img {
  display: block;
  height: 20px;
  width: auto;
}

/* the desktop row lives here so its rules sit beside the panel's;
   it is switched on at 900px at the foot of this block */
.hp-navrow {
  display: none;
}

/* THE MENU BUTTON AND THE PANEL IT OPENS ARE NO LONGER WRITTEN HERE.
   ------------------------------------------------------------
   This page drew its own until 30 August 2026: a 26px three-bar
   button and an ink panel dropped out of the sticky bar, set left in
   24px Anton with the call to action in brick red. All of it has gone
   in favour of /about's menu, which is now the site's and is written
   in the NAV block at the top of this file — a two-bar button in
   currentColor and a bone panel, set right, standing in the flow.

   The long selectors that used to live here have gone with it. They
   existed because this masthead carries .site-header too, so the
   site's own phone rules for .nav-links landed on it unasked and had
   to be beaten on specificity. There is now one set of rules for one
   menu, so there is nothing to beat.

   THE MENU'S FIFTH ITEM WENT WITH THE INK PANEL. It was "Get it
   free", set in brick red, and it survived one day as a plain ink
   item on the bone panel — brick red at 19px measures 4.17:1 against
   the 4.5:1 text that size has to meet, which is why /about's panel
   sets every item in ink and why the red could not come with it.
   It was taken out of the markup on 30 August 2026 at the user's
   request, and .hp-menu-cta went with it, so this menu is now the
   same four places every other page's is. The row of links at 900px
   still carries its pill, and the hero's own button is untouched.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   1 — THE HERO
   ------------------------------------------------------------ */
.hp-hero {
  position: relative;
  overflow: hidden;   /* the circle is drawn past the right edge and is cut off here — see the note on the wrapper about why this clip is not on the wrapper */
  padding: 34px var(--hp-gutter) 26px;
  background-color: var(--colour-brick-deep);
}

/* Decoration, and nothing else. It sits in the empty band between the
   paragraph and the CTA rule ON PURPOSE: bone and pale pink on pale
   pink are both unreadable, so it must never travel behind a line of
   type. Check this band again at 390px if the copy ever grows. */
.hp-hero-circle {
  position: absolute;
  right: -60px;
  bottom: 92px;
  width: 164px;
  height: 164px;
  border-radius: 50%;
  background-color: var(--colour-blush);
  opacity: 0.9;
}

/* THE TWO SHEETS
   The project start checklist, both pages, coming out from behind the
   circle — layered, and fanned just enough that the second page shows
   under the first. They stand in the same empty band as the circle
   and are bound by the same rule: never behind a line of type. Like
   the circle they are anchored to the right edge, so the pile travels
   with it whatever the band's width. The markup draws them before the
   circle, so the circle paints over their upper right corner. */
.hp-hero-sheets {
  position: absolute;
  right: 118px;
  bottom: 124px;
  width: 116px;
  aspect-ratio: 595 / 842;   /* A4 — the sheets are exported at 595 × 842 */
}

.hp-hero-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  transform-origin: 100% 50%;   /* the fan opens from the edge tucked behind the circle */
  box-shadow: 4px 4px 0 var(--hp-sheet-shadow);   /* hard-edged, like every drawn shadow on the site */
}

.hp-hero-sheet-2 {
  transform: rotate(-19deg) translate(-10px, 4px);
}

.hp-hero-sheet-1 {
  transform: rotate(-5deg);
}

/* The circle a pile of sheets comes out from behind is drawn larger
   than the 404's — 220px against 164 — and pushed further off the
   right edge to pay for it, so its top still clears the lede's last
   line and its foot the CTA rule. Scoped to a circle with sheets in
   front of it in the markup, so the 404's circle, which has none, is
   left exactly as it was. Same warning as ever: if the lede grows a
   line, check this band at 390px. */
.hp-hero-sheets ~ .hp-hero-circle {
  right: -80px;
  bottom: 100px;
  width: 220px;
  height: 220px;
}

/* The band the pile stands in is 24px deeper than the 404's, so the
   rule and the link sit as far below the pile's lowest corner as the
   lede's last line sits above its top one (user request, 2 September
   2026; the corner had been touching the rule). Scoped like the
   circle, so the 404 is not moved. The pile and the circle carry the
   same 24px in their bottom offsets and stay where they were. */
.hp-hero-sheets ~ .hp-hero-body .hp-hero-space {
  height: 240px;
}

/* The circle was blush at 0.9 over the ground, and that was fine while
   nothing stood behind it. Now the sheets do, and at 0.9 their type
   ghosts through the pink. So the same colour is mixed on the ground
   instead — blush at 90% over the ground red, which is the pixel the
   0.9 was already producing (244, 204, 202) — and the circle goes
   solid. A browser without color-mix keeps the old 0.9, and the faint
   ghosting with it. */
@supports (background-color: color-mix(in srgb, red, blue)) {
  .hp-hero-sheets ~ .hp-hero-circle {
    background-color: color-mix(in srgb, var(--colour-blush) 90%, var(--colour-brick-deep));
    opacity: 1;
  }
}

/* drawn on the desktop hero only — on a phone the design puts the
   sticker down on the figure panel instead */
.hp-hero-sticker {
  display: none;
}

.hp-hero-body {
  position: relative;   /* lifts the words off the circle */
}

.hp-hero-headline {
  margin-bottom: 18px;
  font-size: 54px;
  /* 0.906, WHICH IS NOT THIS HEADLINE'S 0.88 HALVED. At 0.88 the
     lines of this hero touched — the ink is 0.891em, so there was no
     gap left to halve — and the user's instruction was that the
     homepage and the 404 should not sit at zero but match the other
     pages. So this takes the value /about and /checklists land on.
     This rule dresses the hero on both pages, so the one line moves
     both. See the long note at --line-heading for the whole system. */
  line-height: 0.906;
  line-height: round(0.906em, 1px);
  letter-spacing: 0.005em;
  color: var(--colour-bone);
  text-wrap: balance;
}

.hp-hero-lede {
  max-width: 250px;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--colour-blush);
  text-wrap: pretty;
}

/* the sub-deck is two paragraphs since 2 September 2026; this is
   the gap between them, and nothing else on the page reads it */
.hp-hero-lede + .hp-hero-lede {
  margin-top: 12px;
}

/* pacing, held open on purpose, and the room the circle stands in */
.hp-hero-space {
  height: 216px;   /* was 176px in the handoff; grown 2 September 2026 so the sheets have air above and below (user request). The 404 shares this value and stays at it — the homepage's own band is set further down, beside the sheets */
}

.hp-hero-actions {
  display: flex;
}

/* on a phone the whole width is the link, ruled along its top */
.hp-hero-cta {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: var(--hp-rule) solid var(--hp-rule-on-brick);
  padding-top: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--colour-bone);
  text-decoration: none;
}

.hp-hero-cta em {
  font-size: 17px;
  font-style: normal;
}

.hp-hero-cta:hover {
  color: var(--colour-blush);
}

/* the second, quieter way in is drawn on the desktop hero only */
.hp-hero-second {
  display: none;
}

/* ------------------------------------------------------------
   2 — WHAT THIS IS
   ------------------------------------------------------------ */
.hp-stake {
  padding: 40px var(--hp-gutter) 34px;
  background-color: var(--colour-bone);
}

.hp-stake-mark {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.hp-stake-number {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 78px;
  line-height: 0.8;
  color: var(--colour-brick-red);
}

.hp-stake-label {
  margin: 0;
  padding-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.6;   /* this one is a three-line label, so it keeps a leading rather than taking the reset above */
  text-transform: uppercase;
}

.hp-stake-claim {
  margin: 26px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.42;
  text-wrap: pretty;
}

.hp-stake-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 0 0;
  border-top: var(--hp-rule) solid var(--colour-ink);
  list-style: none;
}

.hp-stake-list li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.35;
}

.hp-stake-index {
  flex: 0 0 auto;
  padding-top: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  /* colour and mark: see THE DRAWN LABEL MARK at the foot of this file */
}

/* ------------------------------------------------------------
   3 — THE LATEST CHECKLIST
   ------------------------------------------------------------ */
.hp-latest {
  padding: 34px var(--hp-gutter) 36px;
  background-color: var(--colour-ink);
  color: var(--colour-bone);
}

.hp-latest-heading {
  margin-bottom: 14px;
  font-size: 44px;
  /* 0.906, not 0.9 halved: at 0.9 this heading's two lines touched,
     so it takes the heroes' value like the rest of this page */
  line-height: 0.906;
  line-height: round(0.906em, 1px);
  color: var(--colour-bone);
}

.hp-latest-lede {
  max-width: 290px;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--hp-quiet-on-ink);
  text-wrap: pretty;
}

.hp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.hp-chip {
  border: var(--border-hairline) solid var(--hp-edge-on-ink);
  border-radius: var(--hp-pill);
  padding: 6px 13px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* on a phone this is not a card: it is the button and the line under
   it, straight below the chips. The border, the padding and the
   heading are all drawn on desktop only. */
.hp-latest-card {
  display: grid;
  gap: 12px;
}

.hp-latest-card-heading {
  display: none;
}

/* ------------------------------------------------------------
   THE BUTTON
   One shape, two fills. It is an <a> here rather than a <button>
   because this page has exactly one form and it is further down
   the page — see the note in index.html on section 3.
   ------------------------------------------------------------ */
.hp-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--tap-minimum);
  border-radius: var(--hp-pill);
  padding: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}

.hp-button em {
  font-size: 15px;
  font-style: normal;
}

.hp-button-brick {
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
}

.hp-button-brick:hover {
  background-color: var(--hp-brick-lit);
  color: var(--colour-bone);
}

/* ------------------------------------------------------------
   4 — ONE HABIT, DRAWN
   ------------------------------------------------------------ */
.hp-fig {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: 30px var(--hp-gutter) 26px;
  background-color: var(--colour-bone);
  background-image: radial-gradient(var(--hp-dot-colour) var(--hp-dot-size), transparent var(--hp-dot-cut));
  background-size: var(--hp-dot-pitch) var(--hp-dot-pitch);
}

.hp-fig-sticker {
  display: block;
  align-self: flex-end;
  width: 168px;
  height: auto;
  margin-bottom: 34px;
  transform: rotate(-4deg);
}

.hp-fig-tag {
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 5px 9px;
  background-color: var(--colour-bone);   /* knocks a clean box out of the dot field. This is not decoration: the tag over a pink dot field is unreadable */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* colour and mark: see THE DRAWN LABEL MARK at the foot of this file */
}

/* the same knockout, made with a spread shadow rather than padding so
   that the words do not move. It is the one box-shadow on this page
   and it is not a shadow — it is a bone box six pixels wider than the
   type on every side. */
.hp-fig-heading {
  width: fit-content;
  background-color: var(--colour-bone);
  box-shadow: 0 0 0 6px var(--colour-bone);
  font-size: 30px;
  line-height: 0.921;
  line-height: round(0.921em, 1px);
  color: var(--colour-ink);
}

/* ------------------------------------------------------------
   5 — THE GUIDES
   ------------------------------------------------------------ */
.hp-guides {
  display: grid;
  padding: 40px var(--hp-gutter) 36px;
  background-color: var(--colour-bone);
}

/* the head is not a box on a phone: its two children join the band's
   own grid so that "browse all guides" can be ordered below the cards,
   which is where the mobile design puts it. On desktop the head
   becomes a real row again. */
.hp-guides-head {
  display: contents;
}

.hp-guides-words {
  order: 1;
}

.hp-set-list {
  order: 2;
}

.hp-guides-all {
  order: 3;
}

/* Gabarito, not Anton — the one mixed-case headline on the page, and
   the handoff draws it that way to mirror the guides index. */
.hp-guides-heading {
  margin: 0 0 10px;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 30px;
  line-height: 0.986;
  line-height: round(0.986em, 1px);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hp-guides-heading span {
  color: var(--colour-brick-red);
}

.hp-guides-lede {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--hp-quiet-on-bone);
  text-wrap: pretty;
}

.hp-set-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the numeral runs down the left of the whole card; the title, the
   line under it and the meta line stack in the column beside it. A
   flex row will not do this — the meta would land beside the title
   rather than under the words — so it is a two-column grid with the
   numeral spanning both rows. */
.hp-set {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  row-gap: 6px;
  padding: 20px 18px;
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  text-decoration: none;
}

.hp-set-number {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.hp-set-words {
  grid-column: 2;
  grid-row: 1;
}

.hp-set-meta {
  grid-column: 2;
  grid-row: 2;
}

.hp-set:hover {
  background-color: var(--hp-card-lit);
  color: var(--colour-bone);
}

.hp-set-number {
  font-size: 34px;
  line-height: 0.8;
  color: var(--colour-brick-red);
}

.hp-set-words {
  display: grid;
  gap: 6px;
}

.hp-set-title {
  font-size: 19px;
  line-height: 0.946;
  line-height: round(0.946em, 1px);
}

.hp-set-note {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--hp-quieter-on-ink);
  text-wrap: pretty;
}

.hp-set-meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* the words take stepped-back bone on the ink card, 8.1:1; the red
     stays as the arrow beside them, which is a mark and only has 3:1
     to meet. THE DRAWN LABEL MARK, with the mark already in the
     markup. (30 Aug 2026 audit — the whole line was brick red at
     3.49:1 on ink) */
  color: var(--hp-quiet-on-ink);
}

.hp-set-meta em {
  font-style: normal;
  color: var(--colour-brick-red);   /* the arrow is the mark, and stays red */
}

.hp-guides-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: var(--hp-rule) solid var(--colour-ink);
  margin-top: 18px;
  padding-top: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--colour-ink);
  text-decoration: none;
}

.hp-guides-all em {
  font-size: 17px;
  font-style: normal;
}

.hp-guides-all:hover {
  color: var(--hp-brick-pressed);
}

/* ------------------------------------------------------------
   6 — WHO WRITES THIS
   ------------------------------------------------------------ */
.hp-who {
  padding: 8px var(--hp-gutter) 40px;
  background-color: var(--colour-bone);
}

.hp-who-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* a stand-in, not a photograph: the dot field again, inverted and at
   a tighter pitch. Replace the two background lines with an <img>
   the day there is a picture. */
.hp-who-portrait {
  flex: 0 0 auto;
  width: var(--hp-portrait-size);
  height: var(--hp-portrait-size);
  border-radius: 50%;
  background-color: var(--colour-ink);
  background-image: radial-gradient(var(--colour-bone) var(--hp-portrait-dot), transparent var(--hp-portrait-cut));
  background-size: var(--hp-portrait-pitch) var(--hp-portrait-pitch);
}

.hp-who-name {
  display: grid;
  gap: 5px;
}

.hp-who-heading {
  font-size: 22px;
  line-height: 0.946;
  line-height: round(0.946em, 1px);
}

.hp-who-credentials {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-credentials-on-bone);
}

/* the one place on this page where brick red IS a drawn mark rather
   than type — the handoff draws it that way of its own accord */
.hp-who-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  background-color: var(--colour-brick-red);
}

.hp-who-body p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}

.hp-who-link {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* colour and mark: see THE DRAWN LABEL MARK at the foot of this file */
}

.hp-who-link em {
  font-style: normal;
}

/* under the mouse the red mark deepens rather than the words changing
   colour — the words are already ink and have nowhere darker to go */
.hp-who-link:hover {
  text-decoration-color: var(--hp-brick-pressed);
}

/* ------------------------------------------------------------
   7 — THE ONE ASK
   ------------------------------------------------------------ */
.hp-get {
  position: relative;
  overflow: hidden;
  padding: 40px var(--hp-gutter) 44px;
  background-color: var(--colour-brick-deep);
}

/* both circles are pushed mostly off-canvas so that neither can land
   behind the form, the paragraph or the small print — same rule as
   the hero. The upper one is a desktop drawing only. */
.hp-get-circle {
  position: absolute;
  border-radius: 50%;
  background-color: var(--colour-blush);
}

.hp-get-circle-low {
  left: -196px;
  bottom: -150px;
  width: 230px;
  height: 230px;
  opacity: 0.85;
}

.hp-get-circle-high {
  display: none;
}

.hp-get-sticker {
  position: absolute;
  right: 14px;
  top: 26px;
  width: 104px;
  height: auto;
  transform: rotate(7deg);
  opacity: 0.95;
}

.hp-get-words,
.hp-get-action {
  position: relative;   /* lifts the words and the form off the circles */
}

.hp-get-heading {
  max-width: 240px;
  margin-bottom: 12px;
  font-size: 48px;
  /* 0.906 rather than 0.88 halved — the lines touched at 0.88. Its
     counterpart, .cl-get-heading on /checklists, lands on 0.926 */
  line-height: 0.906;
  line-height: round(0.906em, 1px);
  color: var(--colour-bone);
}

.hp-get-lede {
  max-width: 265px;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--colour-blush);
  text-wrap: pretty;
}

/* the site's shared signup, wearing this page's clothes. The markup
   is untouched so that js/main.js job 7 still finds it — only the
   look is overridden here. */
.hp-get .signup-form {
  display: grid;
  gap: 14px;
  margin: 0;
}

.hp-get .email-input {
  width: 100%;
  border: 0;
  border-bottom: var(--hp-rule) solid var(--hp-field-rule);
  border-radius: 0;
  background: transparent;
  padding: 10px 0;
  font-size: var(--size-input);   /* 16px, and never less: iPhones zoom the whole page in on any field under it, mid-signup */
  color: var(--colour-bone);
}

/* the handoff's own placeholder colour is a dark one inherited from
   the light sections, and it names that as a gap to close: the only
   two fields in the design sit on dark grounds. Bone at 0.6 measures
   3.6:1 on brick — enough to read as an example address, and it is a
   placeholder rather than content. */
.hp-get .email-input::placeholder {
  color: var(--colour-blush);   /* blush, not stepped-back bone: on the ground red a bone placeholder has to reach 0.86 before it clears 4.5:1, by which point it is indistinguishable from an address someone has typed. Blush measures 4.81:1 and still reads as an example rather than as content. (30 Aug 2026 audit — the value here was 0.6 bone, which composites to 2.46:1; the note above claiming 3.6:1 had never been composited against the ground) */
  opacity: 1;   /* Firefox dims placeholders again on its own */
}

.hp-get .cta-button {
  width: 100%;
  min-height: var(--tap-minimum);
  border: 0;
  border-radius: var(--hp-pill);
  padding: 17px;
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: normal;
  text-transform: uppercase;
  cursor: pointer;
}

.hp-get .cta-button:hover {
  background-color: var(--hp-ink-pressed);
}

/* THE BUTTON'S OWN FOCUS RING, WHICH THE BONE GROUP DOES NOT REACH.
   .cta-button:focus-visible further up sets the whole outline
   shorthand — colour included — for the site's brick-red button,
   where an ink ring is the readable choice. This button is the other
   way round: ink fill on a brick ground. The site's ring would then
   be ink on brick, 3.5:1, which clears the 3:1 a control has to meet
   but only just. Bone measures 14.6:1 against the pill and 4.2:1
   against the ground, and is the same ring every other control on
   this page gets. */
.hp-get .cta-button:focus-visible {
  outline-color: var(--colour-bone);
}

/* the answer js/main.js writes under the form */
.hp-get .form-status {
  position: relative;
  margin-top: 16px;
  margin-bottom: 0;
  color: var(--colour-bone);
}

/* a brick red mark on a brick red ground is a mark you cannot see, and
   a failed signup would end up looking exactly like a successful one.
   Here the failure takes bone at full strength instead, against the
   0.4 the success mark is turned down to. */
.hp-get .form-status-failed::before {
  background-color: var(--colour-bone);
  opacity: 1;
}

.hp-get .hp-smallprint {
  margin-top: 12px;
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.hp-footer {
  padding: 30px var(--hp-gutter) 34px;
  background-color: var(--colour-ink);
  color: var(--hp-footer-quiet);
}

/* the wordmark is a desktop drawing only */
.hp-footer-mark {
  display: none;
}

.hp-footer-disclaimer {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}

.hp-footer-row {
  display: grid;
  gap: 16px;
}

/* NOT IN THE HANDOFF — see the note in index.html. /feedback is a real
   page and the nav this design draws has no room for it. */
.hp-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  border-top: var(--border-hairline) solid var(--hp-rule-on-ink);
  padding-top: 18px;
}

.hp-footer-links a {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-footer-quiet);
  text-decoration: none;
}

.hp-footer-links a:hover {
  color: var(--colour-blush);
}

.hp-footer-year {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-faint-on-ink);
}

/* ------------------------------------------------------------
   THE TAB BAR IS NO LONGER WRITTEN HERE.
   This page had its own until 30 August 2026: the same four tabs,
   but capped to the 430px column the whole phone layout used to sit
   in, with the call to action in brick red. It has been folded into
   the site's .site-tabbar, in the NAV half of this file, along with
   /about's — three copies of one bar was two too many.

   TWO THINGS CHANGED FOR THIS PAGE IN THE FOLD, and both are
   corrections rather than losses. The red call to action measured
   3.49:1 on ink against the 4.5:1 label-sized text has to meet; it
   is bone with a red rule under it now, which is 14.56:1 and the
   same mark the rest of the site draws. And the tab you are on now
   lights its cell, which this bar had deliberately not carried
   because the red CTA was doing the distinguishing on its own.

   The cap has gone with the column it matched — see .hp above.
   ------------------------------------------------------------ */

/* ============================================================
   BREAKPOINT — 900px and up: the desktop layout.

   The handoff's second prototype, drawn at 1440px and fluid down
   to about here. Below this line nothing in the block above is
   touched, so the phone layout is what a tablet gets.
   ============================================================ */
@media (min-width: 900px) {

  .hp {
    --hp-gutter: clamp(20px, 4.4vw, 64px);
    max-width: var(--hp-measure);
    margin: 0 auto;   /* the desktop measure is the only cap left, so the centring belongs with it */
    padding-bottom: 0;   /* no tab bar down there any more */

    /* the dot field opens out with the page */
    --hp-dot-size: 1.8px;
    --hp-dot-cut: 1.9px;
    --hp-dot-pitch: 16px;
    --hp-portrait-size: 96px;
    --hp-portrait-dot: 1.6px;
    --hp-portrait-cut: 1.7px;
    --hp-portrait-pitch: 9px;
  }

  /* ---- masthead: the button and the panel go, the row arrives ---- */

  .hp-masthead {
    gap: 40px;
    padding: 20px var(--hp-gutter);
  }

  .hp-wordmark img {
    height: 26px;
  }

  .hp-masthead .nav-toggle,
  .hp-masthead .nav-menu {
    display: none;
  }

  .hp-navrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;

    /* THE FLOOR IS 24px, NOT 14px. The row only exists from 900px up,
       and at 900px the old 14px floor was not reached — 2.4vw is
       21.6px there, and 22.8px at 950px. That matters because these
       links are 13px tall, well under the 24x24 an interactive target
       is meant to be; what excuses them is the spacing rule, which
       lets a small target pass when nothing else is within 24px of
       it. At 21.6px apart they were not, so between 900 and 1000px
       the row had neither the size nor the spacing. Raised
       5 September 2026; above 1000px nothing moves, because 2.4vw
       has already overtaken the floor. */
    gap: clamp(24px, 2.4vw, 34px);
  }

  /* THE ROW SITS ON BRICK NOW, so every colour in it has been turned
     over. It was ink on bone until 30 August 2026, when the bar took
     the hero's own colour; ink measures 2.63:1 on brick-deep and can
     no longer appear up here at all. Bone measures 5.53:1 and blush
     4.81:1, so both clear the 4.5:1 this size of text has to meet. */
  .hp-navrow a {
    /* relative so the pressable area below can hang off it */
    position: relative;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--colour-bone);
    text-decoration: none;
  }

  /* THE PRESSABLE AREA, WHICH IS BIGGER THAN THE WORDS.
     These links are 13px tall because the type is 11px, and a 13px
     target is a small thing to hit accurately even with a mouse. This
     hangs an invisible 45px-tall box off each one, 16px above and
     below, so the area that answers a click is a comfortable size
     while the row itself does not move by a pixel.

     It is done this way rather than with min-height, which is what
     .wordmark uses, for one specific reason: the current page is
     marked with a drawn rule under the word, and that rule is a
     box-shadow measured from the bottom of the link's box. Grow the
     box and the rule slides 15px down the bar, away from the word it
     belongs to. A pseudo-element leaves the box exactly as it was.

     It stretches vertically only — `inset: -16px 0`. The row's gap is
     at least 24px and this must not eat into it, or two neighbouring
     links would start answering for each other.
     Added 5 September 2026. */
  .hp-navrow a::after {
    content: "";
    position: absolute;
    inset: -16px 0;
  }

  .hp-navrow a:hover {
    color: var(--colour-blush);
  }

  /* the nav item for the page you are on. The site marks it with a
     drawn rule under the word rather than a colour, the same way
     every other page does — in blush rather than the site's red,
     because brick red on brick-deep is a mark you cannot see. */
  .hp-navrow a[aria-current="page"] {
    box-shadow: 0 var(--space-underline-gap) 0 0 var(--colour-blush);
  }

  /* the call to action, INVERTED. It was a brick pill with a bone
     label, which was the one loud thing on a bone bar; on a brick bar
     it is a brick pill on brick and disappears. Bone ground with an
     ink label measures 14.56:1 and is now the loud thing.

     The `a` is carried on purpose: .hp-navrow a above sets the row's
     colour and would otherwise outrank a lone class, which is exactly
     what had happened once before — the pill drew ink on red at
     2.63:1 while a rule here said bone. The bottom bar's own call to
     action records the same trap, in the NAV half of this file. */
  .hp-navrow a.hp-navrow-cta {
    border-radius: var(--hp-pill);
    padding: 12px 24px;
    background-color: var(--colour-bone);
    color: var(--colour-ink);
  }

  .hp-navrow a.hp-navrow-cta:hover {
    background-color: var(--colour-blush);
    color: var(--colour-ink);
  }

  /* ---- 1 — the hero ---- */

  .hp-hero {
    padding: clamp(40px, 5.3vw, 76px) var(--hp-gutter) 56px;
  }

  .hp-hero-circle {
    right: -120px;
    top: 40px;
    bottom: auto;
    width: clamp(300px, 39vw, 560px);
    height: clamp(300px, 39vw, 560px);
  }

  /* The sticker sits on the centre of the circle (2 September 2026,
     user request — the handoff's 108px / 236px left it on the centre
     of the circle's VISIBLE part at 1440px, and well below centre at
     900px). The circle's centre is 120px past the right edge and
     19.5vw down from 40px; the sticker is 18.6vw wide at 580 × 401,
     so 13.07vw is 19.5vw less half its height. The min() holds it
     still once the page reaches the measure, as the width's clamp
     does. 40px from the edge rather than the exact centre, which
     would run it into the clip at every width under 1568px. */
  .hp-hero-sticker {
    display: block;
    position: absolute;
    right: 40px;
    top: min(13.07vw + 40px, 228px);
    z-index: 2;
    width: clamp(150px, 18.6vw, 268px);
    height: auto;
    transform: rotate(-5deg);
  }

  /* the pile grows with the circle and stays tucked behind its lower
     left. The circle is 39vw wide with its centre 120px past the right
     edge, and these two lengths keep the sheets' top right corner a
     little inside it from 900px up; the min() holds them still once
     the page reaches the measure, as the circle's own clamp does */
  .hp-hero-sheets {
    right: min(30.2vw - 120px, 315px);
    top: min(14.6vw + 40px, 250px);
    bottom: auto;
    width: clamp(150px, 17vw, 245px);
  }

  /* the phone's larger circle is undone: the desktop circle is sized
     by its own clamp and the sticker is placed against it */
  .hp-hero-sheets ~ .hp-hero-circle {
    right: -120px;
    bottom: auto;
    width: clamp(300px, 39vw, 560px);
    height: clamp(300px, 39vw, 560px);
  }

  .hp-hero-sheet {
    transform-origin: 100% 0;   /* pinned at the corner behind the circle */
    box-shadow: 6px 6px 0 var(--hp-sheet-shadow);
  }

  .hp-hero-sheet-2 {
    transform: rotate(-23deg) translate(-16px, 8px);
  }

  .hp-hero-sheet-1 {
    transform: rotate(-7deg);
  }

  /* the words keep to the left of the two columns; the right one is
     empty on purpose and is the room the circle and sticker sit in */
  .hp-hero-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: clamp(24px, 4.4vw, 64px);
    row-gap: 0;   /* the handoff's gap is BETWEEN THE TWO COLUMNS. The prototype gets away with one value because its left column is a single wrapper; here the eyebrow, headline, lede, spacer and buttons are all rows of this grid, and a row gap would add 63px between every one of them */
    align-items: start;
  }

  .hp-hero-body > * {
    grid-column: 1;
  }

  .hp-hero .hp-eyebrow {
    margin-bottom: 30px;
    font-size: 12px;
    letter-spacing: 0.2em;
  }

  .hp-hero-headline {
    max-width: 15ch;
    margin-bottom: 32px;
    font-size: clamp(52px, 7.8vw, 112px);
    /* 0.926 for the same reason as the phone rule above: 0.86 had
       the lines overlapping, so this matches the other pages rather
       than halving a gap that was not there */
    line-height: 0.926;
    line-height: round(0.926em, 1px);
  }

  .hp-hero-lede {
    max-width: 560px;
    font-size: 20px;
  }

  .hp-hero-space {
    height: 84px;
  }

  /* the phone's deeper band is three classes strong and would outrank
     the one above; it is undone at the same strength */
  .hp-hero-sheets ~ .hp-hero-body .hp-hero-space {
    height: 84px;
  }

  .hp-hero-actions {
    align-items: center;
    gap: 48px;
  }

  /* the two phone tap-target margins are undone here. Their padding is
     overridden by the rules below, but a negative margin is not, and
     nine pixels of pull would survive into a layout that does not need
     it — this is a pointer layout, and both are drawn boxes now. */
  .hp-hero-cta,
  .hp-guides-all {
    margin-bottom: 0;
  }

  /* the ruled row becomes a pill */
  .hp-hero-cta {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 14px;
    border-top: 0;
    border-radius: var(--hp-pill);
    padding: 20px 34px;
    background-color: var(--colour-ink);
    font-size: 12px;
  }

  .hp-hero-cta em {
    font-size: 16px;
  }

  .hp-hero-cta:hover {
    background-color: var(--hp-ink-pressed);
    color: var(--colour-bone);
  }

  .hp-hero-second {
    display: block;
    border-bottom: var(--hp-rule) solid var(--hp-rule-on-brick);
    padding-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--colour-bone);
    text-decoration: none;
  }

  .hp-hero-second:hover {
    color: var(--colour-blush);
  }

  /* ---- 2 — what this is ---- */

  .hp-stake {
    display: grid;
    grid-template-columns: minmax(160px, 300px) minmax(0, 1fr);
    column-gap: clamp(32px, 5.5vw, 80px);
    row-gap: 0;   /* between the columns only — see the note on the hero body. The claim's own 44px bottom margin is what separates it from the rule below it */
    align-items: start;
    padding: clamp(48px, 5.8vw, 84px) var(--hp-gutter) clamp(44px, 5.3vw, 76px);
  }

  .hp-stake-mark {
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-direction: column;
    gap: 18px;
  }

  .hp-stake-claim {
    grid-column: 2;
    grid-row: 1;
    max-width: 900px;
    margin: 0 0 44px;
    font-size: clamp(20px, 2.1vw, 30px);
    line-height: 1.3;
  }

  .hp-stake-list {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 0;
    padding-top: 26px;
  }

  /* the numeral goes above the words rather than beside them */
  .hp-stake-list li {
    display: block;
    font-size: 17px;
    line-height: 1.4;
    text-wrap: pretty;
  }

  .hp-stake-number {
    font-size: clamp(88px, 11.8vw, 170px);
    line-height: 0.78;
  }

  .hp-stake-label {
    padding-top: 0;
    font-size: 12px;
    letter-spacing: 0.18em;
    line-height: 1.7;
  }

  .hp-stake-index {
    display: block;
    padding-top: 0;
    margin-bottom: 10px;
    letter-spacing: 0.16em;
  }

  /* ---- 3 — the latest checklist ---- */

  .hp-latest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
    gap: clamp(32px, 6.7vw, 96px);
    align-items: start;
    padding: clamp(48px, 5.5vw, 80px) var(--hp-gutter);
  }

  .hp-latest .hp-eyebrow-dotted {
    gap: 12px;
    margin-bottom: 24px;
    font-size: 12px;
    letter-spacing: 0.2em;
  }

  .hp-eyebrow-dot {
    width: 8px;
    height: 8px;
  }

  .hp-latest-heading {
    margin-bottom: 26px;
    font-size: clamp(48px, 6.7vw, 96px);
    line-height: 0.926;
    line-height: round(0.926em, 1px);
  }

  .hp-latest-lede {
    max-width: 560px;
    margin-bottom: 36px;
    font-size: 19px;
  }

  .hp-chips {
    gap: 10px;
    margin-bottom: 0;
  }

  .hp-chip {
    padding: 9px 18px;
    font-size: 11px;
  }

  /* here it does become a card */
  .hp-latest-card {
    gap: 18px;
    border: var(--hp-rule) solid var(--hp-edge-card);
    padding: 36px;
  }

  .hp-latest-card-heading {
    display: block;
    font-size: 26px;
    line-height: 0.946;
    line-height: round(0.946em, 1px);
    color: var(--colour-bone);
  }

  .hp-button {
    padding: 18px;
  }

  /* ---- 4 — one habit, drawn ---- */

  .hp-fig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 420px);
    gap: clamp(32px, 5.5vw, 80px);
    align-items: end;
    min-height: 0;
    padding: clamp(44px, 5vw, 72px) var(--hp-gutter);
  }

  .hp-fig-words {
    grid-column: 1;
    grid-row: 1;
  }

  .hp-fig-sticker {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    width: clamp(170px, 21vw, 300px);
    margin-bottom: 0;
    transform: rotate(5deg);
  }

  .hp-fig-tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 11px;
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .hp-fig-heading {
    box-shadow: 0 0 0 10px var(--colour-bone);
    font-size: clamp(34px, 4.7vw, 68px);
    line-height: 0.916;
    line-height: round(0.916em, 1px);
  }

  /* ---- 5 — the guides ---- */

  .hp-guides {
    padding: clamp(48px, 5.8vw, 84px) var(--hp-gutter) clamp(44px, 5.3vw, 76px);
  }

  /* the head becomes a row again, and "browse all" goes back up into it */
  .hp-guides-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 4.4vw, 64px);
    margin-bottom: 44px;
  }

  .hp-guides-heading {
    max-width: 720px;
    margin-bottom: 14px;
    font-size: clamp(32px, 4vw, 58px);
    line-height: 0.971;
    line-height: round(0.971em, 1px);
    letter-spacing: -0.02em;
  }

  .hp-guides-lede {
    max-width: 540px;
    margin-bottom: 0;
    font-size: 19px;
  }

  .hp-guides-all {
    flex: none;
    justify-content: flex-start;
    gap: 12px;
    border-top: 0;
    border-bottom: var(--hp-rule) solid var(--colour-ink);
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 8px;
    font-size: 12px;
  }

  .hp-set-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  /* the card goes from a row to a column, with the meta line pinned to
     the bottom so that all three read along one line whatever the
     titles do */
  .hp-set {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    min-height: 300px;
    padding: 34px 30px 30px;
  }

  /* one column now, so the three children go back to one row each and
     the meta line is pinned to the foot of the card */
  .hp-set-number { grid-column: 1; grid-row: 1; }
  .hp-set-words  { grid-column: 1; grid-row: 2; }
  .hp-set-meta   { grid-column: 1; grid-row: 3; align-self: end; }

  .hp-set-number {
    font-size: clamp(40px, 4.4vw, 64px);
  }

  .hp-set-words {
    gap: 12px;
    align-content: start;
  }

  .hp-set-title {
    font-size: clamp(22px, 2.1vw, 30px);
  }

  .hp-set-note {
    font-size: 16px;
    line-height: 1.4;
  }

  .hp-set-meta {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  /* ---- 6 — who writes this ---- */

  .hp-who {
    display: grid;
    grid-template-columns: minmax(220px, 380px) minmax(0, 1fr);
    gap: clamp(32px, 5.5vw, 80px);
    align-items: start;
    padding: 0 var(--hp-gutter) clamp(48px, 5.8vw, 84px);
  }

  /* ONE rule across the whole band. Drawing it on the two columns
     instead leaves a gap in it exactly as wide as the column gap, so
     it is drawn once, as a pseudo-element inset to the page gutter —
     a border on the section itself would run full-bleed. */
  .hp-who {
    position: relative;
    padding-top: 44px;
  }

  .hp-who::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--hp-gutter);
    right: var(--hp-gutter);
    height: var(--hp-rule);
    background-color: var(--colour-ink);
  }

  .hp-who-head {
    gap: 22px;
    margin-bottom: 0;
  }

  .hp-who-name {
    gap: 8px;
  }

  .hp-who-heading {
    font-size: clamp(24px, 2.2vw, 32px);
  }

  .hp-who-credentials {
    gap: 10px;
    font-size: 11px;
  }

  .hp-who-mark {
    width: 22px;
  }

  .hp-who-body p {
    max-width: 820px;
    margin-bottom: 20px;
    font-size: 22px;
  }

  .hp-who-link {
    font-size: 12px;
  }

  /* ---- 7 — the one ask ---- */

  .hp-get {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
    gap: clamp(32px, 6.7vw, 96px);
    align-items: end;
    padding: clamp(52px, 6.2vw, 90px) var(--hp-gutter);
  }

  .hp-get-circle-low {
    left: -340px;
    bottom: -300px;
    width: 460px;
    height: 460px;
  }

  .hp-get-circle-high {
    display: block;
    right: -90px;
    top: -140px;
    width: 320px;
    height: 320px;
    opacity: 0.6;
  }

  /* the desktop hero carries the sticker instead — one sticker twice
     on one screen reads as a mistake */
  .hp-get-sticker {
    display: none;
  }

  .hp-get .hp-eyebrow {
    margin-bottom: 26px;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--colour-blush);
  }

  .hp-get-heading {
    max-width: none;
    margin-bottom: 24px;
    font-size: clamp(52px, 7.8vw, 112px);
    line-height: 0.926;
    line-height: round(0.926em, 1px);
  }

  .hp-get-lede {
    max-width: 520px;
    margin-bottom: 0;
    font-size: 20px;
  }

  .hp-get .signup-form {
    gap: 18px;
  }

  .hp-get .email-input {
    padding: 14px 0;
    font-size: 18px;
  }

  .hp-get .cta-button {
    padding: 20px;
  }

  .hp-get .hp-smallprint {
    font-size: 10.5px;
    color: var(--colour-bone);
  }

  /* ---- footer ---- */

  .hp-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 720px);
    gap: clamp(32px, 6.7vw, 96px);
    align-items: start;
    padding: clamp(40px, 3.9vw, 56px) var(--hp-gutter) 48px;
  }

  .hp-footer-mark {
    display: block;
    height: 24px;
    width: auto;
    opacity: 0.9;
  }

  .hp-footer-disclaimer {
    margin-bottom: 28px;
    font-size: 15px;
    line-height: 1.55;
  }

  .hp-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border-top: var(--border-hairline) solid var(--hp-rule-on-ink);
    padding-top: 22px;
  }

  .hp-footer-links {
    border-top: 0;
    padding-top: 0;
    gap: 28px;
  }

  .hp-footer-year {
    font-size: 10.5px;
  }

  /* the tab bar goes at this width too, but the shared rule in the
     NAV half of this file does it for every page at once. */
}


/* ============================================================
   ============================================================
   404 PAGE
   /404.html — built 30 August 2026 from the design handoff
   "Archipack Homepage Design", file "Archi-Pack 404.dc.html",
   alongside the homepage that came out of the same bundle the
   same day. It is the first page that address has ever had:
   before it, a mistyped URL got Bluehost's own grey Apache
   error page.

   THIS BLOCK IS ALMOST EMPTY, AND THAT IS THE POINT. The
   handoff calls the 404 "structurally a shortened homepage",
   and it is built that way: the wrapper in 404.html carries the
   same class "hp" the homepage's does, so the masthead, the
   hero, the dot-grid figure panel, the capture band, the footer
   and the tab bar all come from the HOMEPAGE block above,
   already drawn to the design's pixel values. Four of the 404's
   five bands need no CSS at all.

   The fifth is the "where to go" band, and it is not a new
   component either. Set the two drawings side by side and they
   are the same one: a display numeral, a micro label beside it,
   a claim, then three numbered rows under a rule. That is
   .hp-stake. So the 404 uses .hp-stake and this block does one
   thing to it — turns its three rows into links.

   Everything below is therefore ONLY the link behaviour:
     - the row becomes the link, not the words inside it
     - the arrow at the right-hand end
     - a hover, and what the hover is allowed to be

   Sizes are in px here, as they are in the HOMEPAGE block and
   for the same reason: the design names exact pixel values at
   its two named widths and was signed off that way.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   THE THREE ROWS, MADE INTO LINKS

   The whole row is the link, not the words in it — the same way
   the hero's CTA row works. That is what makes the numeral and
   the arrow pressable too, which matters here more than
   anywhere else on the site: this is a page whose only job is
   to send the reader somewhere.

   The list's own gap is taken to zero and the same 12px is put
   back as padding INSIDE each link. It looks identical and it
   is not the same thing at all: a gap is dead space between two
   links, and padding is part of the link. That is what carries
   each row past the 44px a thumb needs — a single-line row
   draws only 20px of type, so without this the third row would
   be a third of a tap target.
   ------------------------------------------------------------ */

.hp-lost-list {
  gap: 0;
}

.hp-lost-list a {
  display: flex;
  align-items: flex-start;
  gap: 12px;                        /* the row's own gap, now the link's */
  min-height: var(--tap-minimum);
  padding: 6px 0;                   /* 6 + 6 draws the design's 12px between rows */
  color: inherit;                   /* ink, from the band around it */
  text-decoration: none;
}

/* the words take the free width, so the arrow is pushed to the
   right-hand end however short the line is. min-width: 0 is not
   decoration — without it a flex item refuses to wrap below the
   width of its longest word and the row overflows the band. */
.hp-lost-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* the arrow. It is typography, not an icon — it sits in the line
   like an ampersand — so it stays a character, and it is hidden
   from screen readers because the words beside it already say
   where the link goes.

   Brick red is allowed here where it would not be on words: an
   arrow is a non-text mark, and 4.17:1 on bone clears the 3:1 a
   non-text mark has to meet. See THE DRAWN LABEL MARK below for
   why the same red is not allowed on the label beside it. */
.hp-lost-arrow {
  flex: 0 0 auto;
  padding-top: 2px;
  font-style: normal;
  font-size: 14px;
  color: var(--colour-brick-red);
}

/* ---- the hover ----
   THE DESIGN ASKS FOR THE ROW TO GO BRICK RED AND IT DOES NOT.
   Brick red on bone measures 4.17:1, and these rows are 14.5px,
   so the hover would take a row that passes the contrast rules
   and hand it back failing them — the reader who most needs the
   feedback loses the words to get it. The site has forbidden
   brick red as small type since 23 August 2026.

   So the mark carries the state and the words keep their ink:
   the bold half of the row underlines, which is the site's
   ordinary idiom for a link you are about to press, and the
   arrow steps 4px towards where it is pointing. Both are
   drawn — no colour changes hands.

   :focus-visible is in the same rule because a keyboard reader
   gets the same answer as a mouse, on top of the focus ring
   itself. */
.hp-lost-list a:hover strong,
.hp-lost-list a:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hp-lost-list a:hover .hp-lost-arrow,
.hp-lost-list a:focus-visible .hp-lost-arrow {
  transform: translateX(4px);
}

/* and it eases, for anyone who has not asked for less movement */
@media (prefers-reduced-motion: no-preference) {
  .hp-lost-arrow {
    transition: transform 0.15s ease-out;
  }
}


/* ------------------------------------------------------------
   BREAKPOINT — DESKTOP, 900px and up.
   The band's list stops being a stack of ruled rows and becomes
   three columns, with each row's numeral moved ABOVE its words
   rather than beside them. That is .hp-stake's own desktop
   shape, and the rows have to go back to being blocks to let it
   happen — the flex row above is the phone's answer, not this
   one.

   The gap comes back too, and it is worth being clear about why
   it went. On a phone the gap is dead space BETWEEN two links
   and it was moved inside them as padding, so that a one-line
   row still reaches 44px. Up here the gap is between COLUMNS,
   there is no thumb, and the link is a whole block of text
   already — so the reason for the trick is gone and the design's
   40px is what should be drawn.

   The 900 is written where it is used, as it is throughout the
   HOMEPAGE block.
   ------------------------------------------------------------ */

@media (min-width: 900px) {

  .hp-lost-list {
    gap: 40px;
  }

  .hp-lost-list a {
    display: block;
    min-height: 0;
    padding: 0;
  }

  /* the arrow follows the words, there being no row left to push
     it to the end of */
  .hp-lost-arrow {
    display: inline-block;
    padding-top: 0;
    margin-left: 6px;
  }
}


/* ============================================================
   ============================================================
   THE DRAWN LABEL MARK

   Every small label on this site used to be set in brick red.
   Red type that size does not pass the contrast rules anywhere
   it was used — 4.17:1 on bone, 3.63:1 on blush, 3.49:1 on ink,
   against the 4.5:1 small text has to meet. The settings block
   at the top of this file has said so since the first build:
   brick red "only passes the contrast rules at large bold sizes
   ... never use it for ordinary body-size text", and a label is
   smaller than body.

   So the words take the full-strength ink or bone of whatever
   they sit on, and the red becomes a rule drawn beside them —
   one grid square long, the same pen weight as the datum lines
   in section 03 and on the guides index. Red stays exactly as
   visible as it was; it just stops being the thing you have to
   read.

   To give a new label the same mark, add its selector to both
   lists below. Do not set a label in brick red instead.

   THE LIST IS DOWN TO ONE SELECTOR, and that is a live question
   rather than a tidy-up. Four of the five were the old guide
   page's labels, and they went with it on 30 Aug 2026. The
   guide pages redrawn from the "Guide template redesign"
   handoff that day set NINE labels in brick red — the section
   numbers, the figure number, the callout label, the signup
   kicker, the next-steps kicker, the contents current line, the
   table's "the catch", the contents glyph on a phone and the
   step numerals — which is exactly what this block exists to
   prevent. They were built as drawn and flagged in
   README-SITE.md section 7 instead of being converted, because
   the design is signed off as drawn and is reviewed separately.
   If that review says convert them, this is the machinery:
   add the nine selectors to both lists below.
   ============================================================
   ============================================================ */

/* ---- VARIANT ONE: the mark drawn BESIDE the words ---- */

.holding-status,
.cl-author-credentials {
  display: flex;
  align-items: center;
  gap: calc(var(--space-small) / 2);
  color: inherit;   /* ink on the light sections, bone on the dark ones */
}

.holding-status::before,
.cl-author-credentials::before {
  content: "";
  flex: 0 0 auto;
  width: var(--grid-pitch);                   /* one grid square long */
  height: calc(var(--border-hairline) * 3);   /* the datum line's pen weight */
  background-color: var(--colour-brick-red);
}


/* ---- VARIANT TWO: the mark drawn UNDER the words ----

   Added 30 August 2026, when the audit above finally ran and the
   nine guide labels and the homepage's seven came back measuring
   3.49:1 to 4.44:1, exactly as this block predicted they would.

   The rule beside the words cannot be used on any of them. Every
   one is either a numeral sitting in a flex row that already has
   two items in it, a tag inside a chip 9px wide at the padding, or
   an inline link — and a one-grid-square rule added to any of those
   either wraps the row or pushes the thing it labels off its line.
   So the mark goes underneath instead, which is the same answer the
   /about tab bar's CTA reached on its own on 29 August for the same
   reason, and is now the general form rather than a one-off.

   The bargain is identical to variant one: the words take
   full-strength ink and read at 14.56:1 on bone, and the red is
   still on the page, still exactly as visible, drawn rather than
   read. An underline at 2px only has the 3:1 a mark has to meet,
   and brick red clears that on every ground here — 4.17:1 on bone,
   3.63:1 on blush.

   To give a new label the same mark, add its selector to the list
   below. Do not set a label in brick red instead. */

.hp-stake-index,
.hp-fig-tag,
.hp-who-link,
.gd-h2-number,
.gd-fig-number,
.gd-callout-label,
.gd-toc-list a.is-current {
  color: var(--colour-ink);
  text-decoration: underline;
  text-decoration-color: var(--colour-brick-red);
  text-decoration-thickness: calc(var(--border-hairline) * 2);
  text-underline-offset: 0.35em;
  text-decoration-skip-ink: none;   /* a descender must not break the mark: it is a drawn rule, not a spelling underline */
}


/* ============================================================
   ============================================================
   THE THANK-YOU PAGE — /thank-you
   Built 5 September 2026 from the design handoff "Archipack
   Thank you", concept 9A. Read by that one page and nothing
   else, which is why the whole block is prefixed .ty- and why
   its settings are named on .ty rather than in the settings
   block at the top of this file.

   ONE VIEWPORT TALL, NEVER SCROLLS. Everything below that
   looks fussy — the two short-viewport queries at the foot,
   the nowrap on the button labels, the flex spacer instead of
   a fixed offset — is there to hold that rule on a 375x667
   phone and on a 1280x720 laptop with devtools open.
   ============================================================
   ============================================================ */

.ty {
  --ty-gutter: 20px;   /* the side margin — opens out at each breakpoint, as --home-gutter does */
  --ty-pill: 999px;

  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;   /* dvh so a phone's own browser chrome cannot force a scroll */
  padding: 18px var(--ty-gutter) 26px;

  /* THE GROUND RED, not the mark red — see the note on
     --colour-brick-deep. Bone reaches 5.53:1 here; on brick
     red (#c0504d, which is what the handoff draws) it would be
     4.17:1 and the note below would fail at 13.5px. */
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);

  display: flex;
  flex-direction: column;
}

.ty-masthead {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* the same bone logo file the other fifteen pages load, at the
   same 18px line box the homepage masthead uses, so the two
   mastheads sit at the same height */
.ty-wordmark {
  display: inline-flex;
  align-items: center;
}

.ty-wordmark img {
  display: block;
  /* the same height .wordmark-logo sets on the other seventeen pages
     — 22px on a phone, 28px from 900px. It was 18px until 6 Sep 2026,
     which made this the smallest mark on the site. */
  height: clamp(1.375rem, 3vw, 1.75rem);
  width: auto;
}

/* the handoff sets this at 9.5px; it takes the site's smallest
   label size instead, which floors at 10px */
.ty-status {
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--colour-blush);   /* 4.81:1 on the ground red */
}

.ty-body {
  position: relative;
  margin-top: 62px;
}

/* Anton, and this is the THIRD page to use it — the homepage
   and /about were the two. It comes from the same 4A handoff
   family as both, and the display face is the first thing on
   the screen here, so the rule reads "the 4A pages" now rather
   than "the two 4A pages". */
.ty-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.25rem;   /* 68px */
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
}

.ty-lede {
  margin: 22px 0 0;
  max-width: 250px;
  font-size: 0.96875rem;   /* 15.5px */
  line-height: var(--line-body);
  color: var(--colour-blush);
}

/* The empty band is a flex spacer, not a fixed offset — this is
   what keeps the blush circle inside it and off the copy at any
   viewport height. Bone type on blush is about 1.1:1, so the two
   must never overlap. */
.ty-gap {
  position: relative;
  flex: 1;
  min-height: 90px;
}

.ty-circle {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: var(--colour-blush);
  right: -105px;
  top: 50%;
  transform: translateY(-50%);
}

.ty-actions {
  position: relative;
}

/* FULL-STRENGTH BONE, and the step back made by size and weight
   instead. The handoff sets the note in rgba(bone, 0.92) and the
   small print in rgba(bone, 0.85); the site settled on 30 Aug
   2026 that bone stepped back by alpha on a red ground cannot
   reach 4.5:1 without arriving back at bone — 0.85 composites to
   4.48:1, a twentieth under. Same answer as .home-cta-smallprint,
   and the reason --home-quiet-on-brick no longer exists. */
.ty-note {
  margin: 0 0 22px;
  max-width: 320px;
  font-size: 0.84375rem;   /* 13.5px */
  font-weight: 400;
  line-height: 1.55;
  color: var(--colour-bone);
}

.ty-smallprint {
  margin: 13px 0 0;
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--colour-bone);
}

/* ------------------------------------------------------------
   THE TWO BUTTONS ARE ONE PILL IN TWO COLOURS
   They differ by fill and label only: ink acts (the download),
   bone continues (the guides). Do not shrink the bone one or
   demote it to a text link.

   Labels must never wrap — two pills of different heights stop
   reading as a pair — which is why white-space is nowrap and
   the trailing glyph carries a fixed line-height of its own.
   ------------------------------------------------------------ */
.ty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: var(--ty-pill);
  padding: 18px;
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 0.84375rem;   /* 13.5px */
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ty-btn + .ty-btn {
  margin-top: 12px;
}

.ty-btn:hover {
  background-color: #000;
  color: var(--colour-bone);
}

.ty-btn-glyph {
  font-style: normal;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.15;   /* fixed, or the arrow and the caret build different line boxes and the two pills go out of step */
}

.ty-btn--bone {
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}

.ty-btn--bone .ty-btn-glyph {
  color: var(--colour-brick-red);
}

.ty-btn--bone:hover {
  background-color: var(--colour-blush);
  color: var(--colour-ink);
}

/* the focus ring the rest of the site draws, kept on a page
   whose three links are the only things to reach */
.ty-btn:focus-visible,
.ty-wordmark:focus-visible {
  outline: 2px solid var(--colour-bone);
  outline-offset: 3px;
}

/* Short phones (375x667 and the like): step everything down
   rather than let the page scroll. */
@media (max-height: 720px) and (max-width: 899px) {
  .ty-headline { font-size: 3.25rem; }          /* 52px */
  .ty-body { margin-top: 34px; }
  .ty-lede { font-size: 0.875rem; margin-top: 16px; }
  .ty-gap { min-height: 40px; }
  .ty-circle { width: 190px; height: 190px; right: -85px; }
  .ty-note { font-size: 0.78125rem; margin-bottom: 16px; }
  .ty-btn { padding: 15px; }
}

@media (min-width: 640px) {
  .ty { --ty-gutter: 40px; }
  .ty-headline { font-size: 5.75rem; }          /* 92px */
  .ty-body { margin-top: 80px; }
  .ty-lede { font-size: 1.125rem; max-width: 340px; }
  .ty-circle { width: 340px; height: 340px; right: -120px; }
  .ty-actions { max-width: 520px; }
  .ty-note { font-size: 0.9375rem; max-width: 460px; }
}

/* 900+: the homepage hero's grid. Type left, figure right, and
   the two buttons a row beneath spanning both columns — they
   need the full width to sit side by side at width: auto. */
@media (min-width: 900px) {
  .ty {
    --ty-gutter: max(48px, calc((100% - 1200px) / 2));
    padding: 32px var(--ty-gutter) 48px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 64px;
    align-items: start;
  }

  .ty-masthead { grid-column: 1 / -1; }

  .ty-body { grid-column: 1; grid-row: 2; align-self: center; margin-top: 0; }
  .ty-headline { font-size: clamp(5.25rem, 8vw, 7.75rem); line-height: 0.92; }
  .ty-lede { font-size: 1.1875rem; max-width: 420px; margin-top: 28px; }

  /* The circle stops being a decoration and becomes the figure —
     the slot for the duotone photograph, as on the homepage hero.

     THE SPACER IS NOT SWITCHED OFF HERE, it is promoted: it stops
     being a flex spacer and becomes the grid cell in column two,
     and the circle fills it. Hiding .ty-gap and placing .ty-circle
     on the grid directly does not work — display: none on the
     parent takes the child with it, whatever the child's grid
     placement says. */
  .ty-gap {
    grid-column: 2;
    grid-row: 2;
    display: block;
    flex: none;
    min-height: 0;
    align-self: center;
    justify-self: center;
    width: min(100%, 420px);
  }
  .ty-circle {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    right: auto;
    top: auto;
    transform: none;
  }

  .ty-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 14px;
  }
  .ty-note { grid-column: 1 / -1; margin: 0; font-size: 1.0625rem; max-width: 540px; }
  .ty-btn { width: auto; padding: 20px 34px; font-size: 0.875rem; }
  .ty-btn + .ty-btn { margin-top: 0; }
  .ty-smallprint { grid-column: 1 / -1; margin-top: 2px; text-align: left; }
}

/* Wide but short — 1280x720, a window with devtools open, a
   preview pane. Without this the desktop type overflows and the
   page scrolls, which this page is not allowed to do. */
@media (min-width: 900px) and (max-height: 820px) {
  .ty { padding: 24px var(--ty-gutter) 32px; }
  .ty-headline { font-size: clamp(3.5rem, 6vw, 5.25rem); }
  .ty-lede { font-size: 1rem; margin-top: 18px; }
  .ty-gap { width: min(100%, 300px); }
  .ty-note { font-size: 0.90625rem; max-width: 480px; }
  .ty-actions { gap: 12px; }
  .ty-btn { padding: 16px 26px; font-size: 0.8125rem; }
}


/* ============================================================
   ============================================================
   TEMPLATE PAGE — HAVE A SAY
   /feedback — the page that asks whether the InDesign portfolio
   template should be made at all.

   REDRAWN 6 SEPTEMBER 2026 from the "have a say webpage build"
   handoff, option 1c, REPLACING THE BLOCK THAT STOOD HERE. That
   one was written the day before and dressed /feedback as a 4A
   page: a hero with a drawing of a spread, a three-item list on
   bone, one long ink band holding all six questions at once, a
   dot field, and the shared email capture. Fifty-one selectors,
   every one of them prefixed "tp-", every one used by /feedback
   and by nothing else on the site — checked before they went,
   the same way the drawing-sheet block was checked before it.
   Nothing outside this file referred to any of them.

   THE PAGE HAS LEFT THE 4A WORLD. Its wrapper no longer carries
   "home", so it takes nothing from THE 4A COMPONENTS block: not
   the hero, not the chip, not the dot field, not the capture.
   What it borrows is only what every page borrows — the bar, the
   footer and the tab bar. That is the same shape /privacy has,
   and for the same reason: both are single-purpose pages that
   happen to live on this site rather than compositions built
   from its parts.

   ANTON NOW REACHES A FOURTH PAGE — the homepage, /about,
   /privacy and this one. It is set three times here: the six
   question headings, the step number, and the thank-you title.

   EVERY COLOUR IS A TOKEN, NOT THE HANDOFF'S HEX, exactly as on
   /privacy. The handoff draws the ground #A63D38, the pink
   #F2C7C4 and the unpicked option row #8F322E. Those are not
   this site's reds. The ground red is --colour-brick-deep
   (#a24240) and the type on it is --colour-blush-light
   (#f9c5c5), the pair the 30 August 2026 contrast audit settled
   at 4.81:1; the row one notch below the ground is
   --colour-brick-deeper (#85332f), which is what that token was
   made for and where bone measures 7.47:1. Every value is
   within a shade of the handoff, so the page looks as drawn,
   and using the tokens means /feedback cannot drift into a
   second red.

   TWO PLACES THE HANDOFF WAS NOT FOLLOWED, both written down
   rather than left to be found:

     1. IT DOES NOT LOCK TO 100vh. The handoff draws one screen
        with nothing above or below it; this page has the site's
        bar over it and the site's footer and tab bar under it,
        so a hard 100vh would either scroll anyway or crush the
        question column on a short phone. What holds the action
        row down instead is .hs-question's own min-height —
        min(60vh, 520px), the handoff's number — so the buttons
        sit at the same height on every question and nothing
        jumps when the reader moves on. That is the behaviour
        the 100vh was there to produce.

     2. THE COLUMN IS 1160px, NOT THE HANDOFF'S 1200px. 1160px is
        --content-max-width, the width .content-column is drawn
        on, which is what the bar above and the footer below are already laid
        out on. Taking the handoff's 1200 would have meant
        overriding .site-nav on this page the way /privacy has to
        override it, to stop the wordmark starting 20px outside
        the counter. Matching the site instead costs 40px nobody
        will ever measure and saves a site-wide component being
        reached into.

   THE STEPPER IS PROGRESSIVE, AND THIS BLOCK IS WRITTEN THAT
   WAY ROUND. Everything below draws a page on which all six
   questions are visible, the write-in tick boxes show, and the
   only button is "Send it". The rules that hide five questions,
   light the counter and put Back and Next on the screen all sit
   behind .hs-stepped, which job 8 adds and which no page has
   until its JavaScript has run. If main.js never loads, what is
   left is a long form that works.

   Sizes are in px here, as they are in the 4A, CHECKLISTS and
   PRIVACY blocks and for the same reason: the handoff is drawn
   to exact pixel values at two named widths, and a page that
   sits among those in rem would drift out of step with them.

   The two layouts:
     - base rules below      one column: counter, question,
                             buttons — drawn at 390px
     - 740px and up          two columns, counter left, the
                             handoff's own breakpoint
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   THE SETTINGS FOR THIS PAGE
   Named on the page's own hook. Nothing outside it reads them.
   ------------------------------------------------------------ */
.hs {
  --hs-edge: rgba(243, 242, 239, 0.4);        /* the edge of an option row nobody has picked yet — bone at four tenths, the value the old tp block used for the same job */
  --hs-track: rgba(243, 242, 239, 0.25);      /* the unfilled part of the progress rule */
  --hs-placeholder: rgba(243, 242, 239, 0.55); /* the example answer inside an empty field. It sits on brick-deep at 3.4:1, which is below the 4.5:1 body text must meet — placeholder text is allowed to be quieter than the answer typed over it, and every field on this page also carries a real label */

  background-color: var(--colour-brick-deep);
}


/* ------------------------------------------------------------
   HS1 — THE SCREEN
   The whole page, from the foot of the bar to the top of the
   footer. It carries no top padding of its own: the masthead
   above it is .section-brick, the same fill with no border under
   it, so the two read as one band and the grid's own padding is
   measured from the foot of the bar.

   overflow:hidden is doing real work. The blush circle is drawn
   larger than the corner it sits in and hung off the page's
   right edge, and this is what cuts it.
   ------------------------------------------------------------ */

.hs-screen {
  position: relative;
  overflow: hidden;
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
}

/* THE CIRCLE. Blush at just over a third over brick, which is a
   shade light enough to swallow a line of type whole — it must
   stay in the top right corner, above the counter and clear of
   the answers. Both columns are lifted over it by z-index, so a
   question that grows can pass under it and still be read, but
   nothing should be laid out INTO that corner. */
.hs-circle {
  position: absolute;

  /* THE HANDOFF'S OWN PLACEMENT IS right:-18vw top:-12vw, AND IT
     IS ONLY KEPT FROM 740px UP — see the override in HS9. On one
     column the counter is not beside the circle, it is under it:
     the number, "OF 06" and the progress rule all run to the
     right-hand edge, which is the corner the circle is hung in.
     Blush at 35% over brick mixes to about #c27776, and
     blush-light on that measures 2.15:1 — a twelfth of what
     12px bold type has to meet. Measured at 375px before this
     was changed, not guessed.

     So on a phone the circle is pushed up and out until its
     lowest point clears the counter row. It is still the same
     circle in the same corner, just less of it.

     THE -120px FLOOR IS FOR SMALL PHONES. Below about 647px the
     diameter stops shrinking — clamp() holds it at 220px — while
     -30vw keeps rising, so under 400px the circle grew back down
     over "OF 06": measured at 320px and 360px, where it crossed
     it by 14px. Holding the top at -120px puts the circle's foot
     100px into the band, about 10px above the counter row, and
     changes nothing at any width over 400px, where -30vw is
     already the lower of the two. */
  right: -28vw;
  top: min(-30vw, -120px);
  width: clamp(220px, 34vw, 520px);
  height: clamp(220px, 34vw, 520px);
  border-radius: 50%;
  background-color: var(--colour-blush);
  opacity: 0.35;
}


/* ------------------------------------------------------------
   HS2 — THE GRID
   One column on a phone, two from 740px. It is laid out on
   --content-max-width with the site's page-side gutter either side,
   so it starts on the same line as the wordmark above it and
   the footer below it.
   ------------------------------------------------------------ */

.hs-grid {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) var(--space-page-side) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}


/* ------------------------------------------------------------
   HS3 — THE COUNTER COLUMN
   The step number, the progress rule and the three lines that
   say what the reader is in for.

   THE NUMBER AND THE RULE ARE THE ONLY TWO THINGS ON THIS PAGE
   THAT NEED THE SCRIPT, so they are the only two things inside
   .hs-progress, and .hs-progress is hidden until job 8 says
   otherwise. A step counter reading "01 of 06" over a page
   showing all six questions is a lie, and this is what stops it
   being told. The three lines under it are true either way, so
   they sit outside and always show.
   ------------------------------------------------------------ */

.hs-progress {
  display: none;
}

.hs-stepped .hs-progress {
  display: block;
}

/* the number and "of 06", sitting on the same baseline with the
   whole width between them */
.hs-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

/* THE NUMBER, and the second largest type on the site after
   /privacy's title. Anton at 400: the face has one weight and
   no real lowercase, so the weight is asked for explicitly
   rather than left to the browser, which would draw a fake
   bold. */
.hs-count-number {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(96px, 16vw, 220px);
  line-height: 0.85;
  line-height: round(0.85em, 1px);
  color: var(--colour-bone);
}

.hs-count-of {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-blush-light);
}

/* the rule under it — 3px, the handoff's, and thin on purpose:
   it is a measure of how far through you are, not a component */
.hs-track {
  height: 3px;
  background-color: var(--hs-track);
}

.hs-track-fill {
  height: 100%;
  width: 16.6667%;
  background-color: var(--colour-bone);
  transition: width 240ms ease;
}

/* the promise, in three lines. It is the only place on the page
   that says there is no email field, so it is not small print
   and it is not faint — blush-light on brick-deep, 4.81:1. */
.hs-note {
  margin: 28px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--colour-blush-light);
}

/* the stepper's own margin, which only exists once there is a
   number above it to be pushed away from */
.hs-stepped .hs-note {
  margin-top: 28px;
}


/* ------------------------------------------------------------
   HS4 — THE QUESTION COLUMN
   Six fieldsets and the action row. min-height is the handoff's
   own number and is what holds the buttons at the foot: with
   margin-top:auto on the action row, every question puts its
   buttons in the same place, so nothing under the reader's
   thumb moves when they press Next.
   ------------------------------------------------------------ */

.hs-question {
  display: flex;
  flex-direction: column;
  min-height: min(60vh, 520px);
}

/* a fieldset draws a box and indents its contents in every
   browser; all three are turned off, as they are on every other
   fieldset on the site */
.hs-step {
  margin: 0 0 44px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.hs-step[hidden] {
  display: none;
}

/* THE QUESTION. Anton, uppercase, and balanced: text-wrap
   balance is what stops a six-word question breaking one word
   onto its own line, which at this size reads as a mistake. */
.hs-legend {
  display: block;
  float: left;   /* a legend cannot be given a width in Safari without this; the clear below puts the flow back */
  width: 100%;
  padding: 0;
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 0.95;
  line-height: round(0.95em, 1px);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--colour-bone);
}

.hs-legend + * {
  clear: both;
}

/* the line under a question that needs one. Blush-light, so it
   reads as the question's own aside rather than as an answer. */
.hs-sub {
  margin: -12px 0 20px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--colour-blush-light);
}


/* ------------------------------------------------------------
   HS5 — THE OPTION ROWS
   A row is a real radio or tick box with the input taken off
   the screen and the label drawn as the control. THE INPUT IS
   STILL THERE and still what the keyboard, the screen reader
   and the form itself use — it is only invisible, which is why
   the focus ring below is drawn on the face rather than on the
   box.
   ------------------------------------------------------------ */

.hs-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hs-opt {
  display: block;
  cursor: pointer;
}

/* the input, off the screen but not out of the page: display
   none would take it out of the tab order and out of the form */
.hs-opt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the row itself. Unpicked: one notch below the ground red, with
   a bone edge at four tenths. Bone measures 7.47:1 on
   brick-deeper, so the longest option is still comfortable. */
.hs-opt-face {
  display: block;
  padding: 16px 18px;
  border: 1.5px solid var(--hs-edge);
  border-radius: 14px;
  background-color: var(--colour-brick-deeper);
  color: var(--colour-bone);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* picked: the row inverts. Ink on bone is the strongest pair on
   the site and the reason a picked row cannot be mistaken for
   an unpicked one at a glance, which a border change alone
   would not manage. */
.hs-opt-input:checked + .hs-opt-face {
  background-color: var(--colour-bone);
  border-color: var(--colour-bone);
  color: var(--colour-ink);
}

.hs-opt:hover .hs-opt-face {
  border-color: var(--colour-bone);
}

/* the keyboard ring, drawn on the face because the box it
   belongs to is off the screen. Bone with a gap, so it reads on
   brick and on the bone of a picked row alike. */
.hs-opt-input:focus-visible + .hs-opt-face {
  outline: var(--focus-ring) solid var(--colour-bone);
  outline-offset: 2px;
}

/* THE WRITE-IN TICK BOX, and the one row that disappears when
   the script arrives. Google keeps the text typed on the ruled
   line below only if this box is ticked as well; job 8 ticks it
   for anyone who types, and the handoff draws no box, so once
   the stepper is running the box is redundant and goes. With no
   script there is nothing to tick it, so it stays on the screen
   and says what it is for. */
.hs-stepped .hs-opt-fallback {
  display: none;
}


/* ------------------------------------------------------------
   HS6 — THE WRITTEN ANSWERS
   A ruled line rather than a box: the handoff draws every typed
   answer as a rule under the words, which is what a form on a
   coloured ground should do — a bordered field on brick reads
   as a hole cut in the page.
   ------------------------------------------------------------ */

.hs-line,
.hs-area {
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--colour-bone);
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--font-main);
  color: var(--colour-bone);
}

.hs-line {
  font-size: 24px;
}

.hs-area {
  font-size: 20px;
  line-height: 1.45;
  resize: vertical;
}

/* the write-in under a set of tick boxes. Quieter than a
   question's own answer — a blush rule at 1.5px, and set at the
   size of the rows above it rather than the size of an answer,
   because that is what it is: one more row. */
.hs-line-other {
  margin-top: 14px;
  border-bottom-width: 1.5px;
  border-bottom-color: var(--colour-blush-light);
  padding: 10px 0;
  font-size: 17px;
}

.hs-line::placeholder,
.hs-area::placeholder {
  color: var(--hs-placeholder);
}

/* the ring on a field whose only border is under it. Offset by
   4px so it clears the rule rather than sitting on it. */
.hs-line:focus-visible,
.hs-area:focus-visible {
  outline: var(--focus-ring) solid var(--colour-bone);
  outline-offset: 4px;
}


/* ------------------------------------------------------------
   HS7 — THE ACTION ROW
   Pushed to the foot of the question column by margin-top:auto.

   BACK AND NEXT ARE NOT ON THE PAGE UNTIL THE SCRIPT PUTS THEM
   THERE. With no stepper there is nowhere to go back to and
   nothing to go next to, and a button that does nothing is
   worse than no button. "Send it" is the real submit and is on
   the page from the start — which is what makes the form work
   without JavaScript at all.
   ------------------------------------------------------------ */

.hs-actions {
  margin-top: auto;
  padding: 40px 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hs-buttons {
  display: flex;
  gap: 10px;
}

.hs-back,
.hs-next {
  display: none;
}

.hs-stepped .hs-back,
.hs-stepped .hs-next {
  display: block;
}

/* job 8 takes Back off the screen on the first question and Next
   off it on the last, and it does that with the hidden attribute.
   The rule above sets display, which would otherwise win over it
   and leave a dead button on the page — these three put the
   attribute back in charge. */
.hs-stepped .hs-back[hidden],
.hs-stepped .hs-next[hidden],
.hs-send[hidden] {
  display: none;
}

/* the two pills that leave the page, and the one that does not,
   share everything but their fill */
.hs-back,
.hs-next,
.hs-send {
  font-family: var(--font-main);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

/* Back — 64px, an arrow and nothing else. It is the only
   control on the page with no words on it, so it carries an
   aria-label in the markup. */
.hs-back {
  flex: none;
  width: 64px;
  padding: 18px 0;
  background-color: transparent;
  color: var(--colour-bone);
  border: 1.5px solid var(--colour-bone);
  font-size: 20px;
  line-height: 1;
}

.hs-back:hover {
  background-color: var(--colour-bone);
  color: var(--colour-brick-deep);
}

/* Next and Send — ink, the one dark thing on a brick page, so
   the way on is the first thing the eye lands on. Bone on ink
   is the strongest pair on the site. */
.hs-next,
.hs-send {
  flex: 1;
  padding: 18px 24px;
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  border: 1.5px solid var(--colour-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
}

.hs-next:hover,
.hs-send:hover {
  background-color: var(--colour-bone);
  color: var(--colour-ink);
  border-color: var(--colour-bone);
}

.hs-back:focus-visible,
.hs-next:focus-visible,
.hs-send:focus-visible {
  outline: var(--focus-ring) solid var(--colour-bone);
  outline-offset: 2px;
}

/* job 7 disables the button while the post is in the air */
.hs-send[disabled] {
  cursor: default;
  opacity: 0.7;
}

/* THE LINE UNDER THE BUTTONS, at full strength. The handoff sets
   it in cream rather than pink and says so twice: it is the
   sentence that tells someone what happens to what they just
   typed, and a sentence like that is never set faint. */
.hs-smallprint {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--colour-bone);
}


/* ------------------------------------------------------------
   HS8 — THE THANK-YOU STATE
   Hidden in the markup and shown by job 7 once the post has
   left the browser. It replaces the grid; it is not a second
   page and it is not /thank-you, which is Kit's delivery page
   for the checklist PDF and has nothing to do with this form.
   ------------------------------------------------------------ */

.hs-thanks {
  position: relative;
  z-index: 1;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 120px) var(--space-page-side) 48px;
}

.hs-thanks[hidden] {
  display: none;
}

.hs-thanks-kicker {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-blush-light);
}

/* the largest type on this page, and near the largest on the
   site. It takes focus when it appears — see job 7 — so that a
   reader who cannot see the screen change is put at the top of
   what replaced it rather than left at a button that has gone. */
.hs-thanks-title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(88px, 14vw, 200px);
  line-height: 0.88;
  line-height: round(0.88em, 1px);
  text-transform: uppercase;
  color: var(--colour-bone);
}

/* IT TAKES FOCUS BUT IT DOES NOT DRAW A RING. The title is not a
   control and cannot be tabbed to — job 7 moves focus here once,
   so that a reader on a screen reader is put at the top of what
   replaced the questions rather than left on a Send button that
   has gone. A ring round a heading nobody can reach reads as a
   fault, and the whole screen changing is already a stronger
   signal than an outline. */
.hs-thanks-title:focus {
  outline: none;
}

.hs-thanks-copy {
  margin: 0;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5;
  max-width: 36ch;
  text-wrap: pretty;
  color: var(--colour-blush-light);
}

.hs-thanks-buttons {
  margin-top: clamp(48px, 8vw, 96px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 640px;
}

/* both buttons are links and neither is underlined: they are
   drawn as pills, and a pill with a rule under its words reads
   as a mistake. The site's link underline is turned off here on
   purpose and nowhere else on this page. */
.hs-thanks-primary,
.hs-thanks-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color 120ms ease, color 120ms ease;
}

/* THE ONLY PLACE ON THIS PAGE AN EMAIL ADDRESS IS EVER ASKED
   FOR, and it asks on a different page. Ink, matching Send, so
   the thing to do next looks like the thing just done. */
.hs-thanks-primary {
  flex: 1 1 260px;
  padding: 20px 24px;
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  font-size: 14px;
}

.hs-thanks-primary:hover {
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}

.hs-thanks-secondary {
  flex: 1 1 220px;
  padding: 18px 24px;
  background-color: transparent;
  color: var(--colour-bone);
  border: 1.5px solid var(--colour-bone);
  font-size: 13px;
}

.hs-thanks-secondary:hover {
  background-color: var(--colour-bone);
  color: var(--colour-brick-deep);
}

.hs-thanks-primary:focus-visible,
.hs-thanks-secondary:focus-visible {
  outline: var(--focus-ring) solid var(--colour-bone);
  outline-offset: 2px;
}


/* ============================================================
   HS9 — 740px AND UP
   The handoff's own breakpoint, and the width at which two
   columns of 340px and the gutter between them finally fit.
   The counter goes to the left, the questions to the right.
   ============================================================ */

@media (min-width: 740px) {

  .hs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* the counter stops being a strip above the question and
     becomes a column beside it; the number can grow into the
     room that gives it */
  .hs-counter {
    position: sticky;
    top: 24px;
  }

  /* ============================================================
     THE CIRCLE, AND THE ONE NUMBER IN THIS BLOCK THAT IS NOT THE
     HANDOFF'S.

     The handoff hangs it at right:-18vw with a diameter of
     clamp(220px, 34vw, 520px), and says in the same breath that
     it must stay "away from the answer area". On the handoff's
     own 1200px container those two instructions very nearly
     agree. On this site's 1160px column they do not: measured
     across twelve widths from 740px to 1920px, the question
     heading ran INTO the circle at every width from 740 to about
     1400, by as much as 139px at 1200. Bone display type over
     blush-at-35%-on-brick — which mixes to about #c27776 —
     measures 2.83:1, under the 3:1 large text has to meet. The
     three pixels of clearance left at 1440px are not a margin,
     they are luck.

     SO THE CIRCLE IS AS BIG AS THE ROOM BESIDE THE COLUMN, and
     never bigger. Its left edge is 118vw minus its own diameter;
     the text edge of the column is at 100vw - 26px while the
     column still fills the screen, and at (100vw + 1160px) / 2 -
     26px once it stops growing. Capping the diameter at that
     difference, less 16px of slack so the tightest width keeps a
     gap rather than a hairline, is what holds them apart, and
     it is why the circle is a modest arc on a laptop and the
     handoff's full 520px on a wide screen — which is the same
     shape the handoff draws, drawn only as large as there is
     room for.

     It is still hung in the top right corner and it is still cut
     by the band's own overflow. Nothing else changed.
     ============================================================ */
  .hs-circle {
    right: -18vw;
    top: -12vw;
    width: min(clamp(220px, 34vw, 520px), calc(18vw + var(--space-page-side) - 16px));
    height: min(clamp(220px, 34vw, 520px), calc(18vw + var(--space-page-side) - 16px));
  }

}


/* ============================================================
   HS10 — 1160px AND UP
   The width at which the content column stops growing and the
   page gains a margin of its own. From here the room beside the
   column widens twice as fast as the screen does, so the circle
   is allowed to grow with it — up to the handoff's 520px, which
   it reaches at about 1600px.
   ============================================================ */

@media (min-width: 1160px) {

  .hs-circle {
    width: min(clamp(220px, 34vw, 520px), calc(68vw - (var(--content-max-width) / 2) + var(--space-page-side) - 16px));
    height: min(clamp(220px, 34vw, 520px), calc(68vw - (var(--content-max-width) / 2) + var(--space-page-side) - 16px));
  }

}


/* ============================================================
   ============================================================
   PRIVACY PAGE

   /privacy — written 6 September 2026 and REDRAWN the same day
   from the "Privacy webpage build" handoff. The site's first
   legal page, and the only page on it with no email capture.

   NOT ONE WORD OF THE NOTICE CHANGED. The copy in the HTML is
   the same copy, in the same order, that was set here when the
   page was written; it was checked against the handoff's own
   text line by line before this was built, and the two agree.
   What changed is only how it is presented, in the four moves
   the handoff asks for:

     1. the page opens on a brick band with an Anton title,
        where before it opened on a bone title band
     2. the eight sections are numbered 01-08 and their headings
        are Anton rather than the guide's Gabarito
     3. two of the eight get a form of their own — 03 becomes a
        dark processor block, 04 gains three pill tags
     4. a contact band closes the page

   SO THE PAGE HAS LEFT .gd-article. It carried the guide
   article's class verbatim until today, and the note that stood
   here argued that was the right coupling: one way of setting a
   paragraph, shared with the guides. The handoff asks for
   numbered Anton headings and two blocks a guide has no
   equivalent for, so the notice now has its own setting in PV4
   below. The paragraph, the heading gap, the list and the link
   are still drawn the guides' way — every value in PV4 was
   copied out of .gd-article rather than invented — but they are
   a second copy now, and a change to a guide no longer reaches
   this page. That is what the redesign cost, written down here
   rather than found later.

   ANTON NOW REACHES A THIRD PAGE. The note in the settings
   block says the display face is used on the homepage and
   /about "and nowhere else on the site". That sentence has been
   corrected where it stands, because this page sets Anton five
   times: the title, the summary figure, the eight section
   headings, the processor numbers and the contact band. It is
   the handoff's central move and the reason the page reads as a
   notice rather than as a long guide.

   EVERY COLOUR IS A TOKEN, NOT THE HANDOFF'S HEX. The handoff
   draws the red bands #A63D38 and the pink #F2C7C4. Those are
   not this site's reds: the ground red is --colour-brick-deep
   (#a24240) and the type that sits on it is --colour-blush-light
   (#f9c5c5), the pair the 30 August 2026 contrast audit settled
   on and measured at 4.81:1. The handoff's values are within a
   shade of them, so the page looks as drawn, and using the
   tokens means /privacy cannot drift into a second red.

   THE ONE PLACE THE HANDOFF WAS NOT FOLLOWED IS THE LINK. It
   sets links in red on bone, which is 4.17:1 and fails the
   4.5:1 body text has to meet. The site's rule since day one is
   ink words with a red rule under them, and PV4 keeps it. A
   privacy notice is the last page on the site that should be
   hard to read.
   ============================================================
   ============================================================ */

.pv {
  background-color: var(--colour-bone);
}


/* ------------------------------------------------------------
   PV1 — THE COLUMN
   760px, the handoff's measure, with the site's page-side
   gutter either side so the text still starts on a grid line.
   Every band on the page reads from it.

   THE MASTHEAD IS NARROWED TO MATCH, and that is the only
   site-wide component this page overrides. .site-nav is
   .content-column everywhere else, which is 1160px; left at
   that width the logo would start about 200px to the left of
   the title on a 1440px screen, and the handoff draws the two
   on one line. The override is scoped to .pv, so no other page
   can see it.
   ------------------------------------------------------------ */

.pv-column,
.pv .site-nav {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-page-side);
  padding-right: var(--space-page-side);
}


/* ------------------------------------------------------------
   PV2 — THE HERO
   The brick band the page opens on. It carries no top padding
   of its own: the masthead above it is .section-brick, the same
   fill with no border under it, so the two read as one band and
   the hero's 64px is measured from the foot of the bar.

   overflow:hidden is doing real work. The pink circle is drawn
   larger than the band and hung off its right edge, and this is
   what cuts it.
   ------------------------------------------------------------ */

.pv-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
}

/* the copy, lifted above the circle */
.pv-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 64px;
}

/* the kicker — the site's mark for what kind of page this is,
   set the way the guide hero's is */
.pv-kicker {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-blush-light);
}

/* THE TITLE, and the largest type on the site. Anton at 400:
   the face has one weight and no real lowercase, so the weight
   is asked for explicitly rather than left to the browser,
   which would draw a fake bold. The clamp is the handoff's,
   unchanged — at 22vw it still fits a 320px screen with room,
   because Anton is condensed. */
.pv-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(84px, 22vw, 168px);
  line-height: 0.88;
  line-height: round(0.88em, 1px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--colour-bone);
}

.pv-standfirst {
  margin: 28px 0 0;
  max-width: 30ch;
  font-size: clamp(18px, 4.6vw, 22px);
  line-height: 1.5;
  color: var(--colour-blush-light);
  text-wrap: pretty;
}

/* the dated line. Italic bone rather than the mono the old
   title band used: mono uppercase is this site's mark for a
   filing reference, which is the guide metadata strip's job,
   and this is a sentence.

   IT IS STILL THE ONLY DATE ON THE PAGE and still a real one.
   It changes when the notice changes and never to look fresh —
   the rule sitemap.xml's lastmod is kept under. */
.pv-updated {
  margin: 16px 0 0;
  font-size: 15px;
  font-style: italic;
  color: var(--colour-bone);
}

/* the circle. A spacer block holds the height the hero needs at
   its foot and the circle is placed against that, so the circle
   never overlaps the standfirst however the clamps land. */
.pv-hero-spacer {
  position: relative;
  height: clamp(120px, 30vw, 260px);
}

.pv-circle {
  position: absolute;
  right: clamp(-90px, -8vw, -40px);
  bottom: -40px;
  width: clamp(240px, 34vw, 420px);
  height: clamp(240px, 34vw, 420px);
  border-radius: 50%;
  background-color: var(--colour-blush-light);
}

/* the link row that closes the hero */
.pv-hero-foot {
  position: relative;
  z-index: 1;
  padding-bottom: 26px;
}

.pv-jump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1.5px solid var(--colour-bone);
  color: var(--colour-bone);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.pv-jump:hover {
  color: var(--colour-blush-light);
  border-top-color: var(--colour-blush-light);
}

.pv-jump-arrow {
  font-size: 22px;
  line-height: 1;
}


/* ------------------------------------------------------------
   PV3 — THE SUMMARY STRIP
   One big figure and three stacked labels: the whole notice
   said as a number before it is said as prose.

   THE NUMBER IS A CLAIM AND IT IS CHECKABLE. "01 piece of data
   / your email / nothing else" is true of this site for exactly
   as long as section 02 says the email address is all that is
   collected. The two are one statement and must move together.
   ------------------------------------------------------------ */

.pv-body {
  padding-top: 56px;
  padding-bottom: 72px;
}

.pv-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding-bottom: 36px;
  margin-bottom: 44px;
  border-bottom: 1.5px solid var(--colour-ink);
}

/* brick-deep and not the mark red: this sits on bone at 5.53:1
   where the mark red measures 4.17:1, and though a figure this
   size would carry the lighter red, the page has settled on one
   red and there is no reason to spend a second one here */
.pv-summary-figure {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(88px, 22vw, 132px);
  line-height: 0.85;
  color: var(--colour-brick-deep);
}

.pv-summary-lines {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--colour-ink);
}


/* ------------------------------------------------------------
   PV4 — THE NOTICE
   The prose setting that replaced .gd-article. Read the head of
   this block for why it exists at all; what follows is the
   guide's own values, moved rather than redrawn, except where a
   comment says otherwise.
   ------------------------------------------------------------ */

.pv-prose {
  font-size: 17px;
  line-height: var(--line-body);
  color: var(--colour-ink-soft);
}

/* a section jumped to from the hero lands one grid square below
   the top of the window rather than hard against it — the same
   allowance .gd-article h2 makes. The bar scrolls away with the
   page, so there is nothing to clear; this is breathing space. */
.pv-section {
  margin-bottom: 48px;
  scroll-margin-top: var(--space-small);
}

/* the last section closes tight against the contact band */
.pv-section:last-of-type {
  margin-bottom: 8px;
}

/* A SECTION HEADING. Number and heading share one baseline row.
   Unlike the guide's h2 there is no rule under them: the Anton
   heading is heavy enough to divide the page by itself, and a
   rule under every one of eight would draw the notice as a form
   to be filled rather than a thing to be read. */
.pv-h2-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

/* the number. brick-deep, not the mark red: at 13px it is small
   type and has to clear 4.5:1, which the mark red does not. */
.pv-h2-number {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--colour-brick-deep);
  border-bottom: 2px solid var(--colour-brick-deep);
  padding-bottom: 2px;
}

.pv-prose h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--colour-ink);
}

.pv-prose h3 {
  margin: 22px 0 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--colour-ink);
}

/* the h3 that follows a paragraph rather than opening a section
   wants the larger gap the handoff draws */
.pv-prose p + h3 {
  margin-top: 28px;
}

.pv-prose p {
  margin: 0 0 14px;
  text-wrap: pretty;
}

.pv-prose p:last-child {
  margin-bottom: 0;
}

/* AN INLINE LINK: ink words, a red rule under them that presses
   harder under the mouse. THE HANDOFF SETS RED WORDS HERE AND
   THIS DOES NOT FOLLOW IT — red on bone is 4.17:1 and body text
   has to clear 4.5:1. Copied from .gd-article a, which is the
   site's answer since day one. */
.pv-prose a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--colour-brick-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pv-prose a:hover {
  text-decoration-color: var(--colour-link-hover);
  text-decoration-thickness: 4px;
}

.pv-prose strong {
  font-weight: 700;
  color: var(--colour-ink);
}

/* the lists. Markers are drawn circles rather than ::marker
   because the handoff sets an 8px disc, which is larger than
   the browser's bullet and has to sit on its own baseline
   offset. The red is the mark red — a dot is something you look
   at, not something you read, which is the line the settings
   block draws between the two reds. */
.pv-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pv-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.pv-list li::before {
  content: "";
  flex: 0 0 auto;
  position: relative;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--colour-brick-red);
}


/* ---- 03, the processors, as a dark block ----
   The one place on this page where the notice names companies,
   and the only reason it is drawn rather than listed: three
   names a reader may want to look up are easier to find again
   as a block than as a paragraph. */
.pv-processors {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  background-color: var(--colour-ink);
}

.pv-processors li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  color: var(--colour-bone);
  border-bottom: var(--border-hairline) solid var(--colour-hairline-on-ink);
}

.pv-processors li:last-child {
  border-bottom: 0;
}

/* the mark red is right here and brick-deep would not be: this
   is a large display figure on ink, where the lighter red is
   the one that reads as a drawn mark */
.pv-processor-number {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--colour-brick-red);
}

.pv-processor-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--colour-bone);
}

.pv-processor-note {
  font-size: 15px;
  color: var(--colour-bone-quiet);
}


/* ---- 04, the cookie tags ----
   Three pills that say what the section says. They are labels
   and not buttons: nothing here is pressable, so they are list
   items, and the border is the only thing drawing them. */
.pv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.pv-tags li {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1.5px solid var(--colour-ink);
  border-radius: 999px;
  color: var(--colour-ink);
}


/* ------------------------------------------------------------
   PV5 — THE CONTACT BAND
   The page closes on the same brick it opened on, with the
   circle swung to the other side. This is the page's one call
   to action and it asks for an email, not an email address:
   /privacy takes no signup and this band is not a capture in
   disguise.
   ------------------------------------------------------------ */

.pv-contact {
  position: relative;
  overflow: hidden;
  background-color: var(--colour-brick-deep);
  color: var(--colour-bone);
}

.pv-contact .pv-circle {
  right: auto;
  left: -110px;
  bottom: -140px;
  width: 260px;
  height: 260px;
}

.pv-contact-inner {
  position: relative;
  z-index: 1;
  padding-top: 56px;
  padding-bottom: 64px;
}

.pv-contact .pv-kicker {
  margin-bottom: 18px;
}

.pv-contact h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 11vw, 72px);
  line-height: 0.92;
  line-height: round(0.92em, 1px);
  text-transform: uppercase;
  color: var(--colour-bone);
}

.pv-contact-copy {
  margin: 0 0 28px;
  max-width: 38ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--colour-blush-light);
  text-wrap: pretty;
}

/* the button. Ink on brick, which is the inversion of the
   site's .cta-button rather than the class itself: this one
   fills its band and carries an address instead of a verb, and
   .cta-button is the signup button's shape wherever it appears.
   Under the mouse it swaps to bone, which is the handoff's
   move and the one hover on the page that changes a fill. */
.pv-mailto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--tap-minimum);
  padding: 20px 24px;
  background-color: var(--colour-ink);
  color: var(--colour-bone);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.pv-mailto:hover {
  background-color: var(--colour-bone);
  color: var(--colour-ink);
}

.pv-mailto:focus-visible {
  outline: var(--focus-ring) solid var(--colour-bone);
  outline-offset: 3px;
}

.pv-mailto-arrow {
  font-size: 18px;
  line-height: 1;
}


/* ------------------------------------------------------------
   PV6 — BREAKPOINT, 900px AND UP
   The page is one column at every width, which is the handoff's
   instruction: the desktop simply centres what the phone shows.
   So this does almost nothing — it opens the hero out, because
   64px above a 168px title reads tight on a wide screen, and
   lets the notice breathe.
   ------------------------------------------------------------ */

@media (min-width: 900px) {

  .pv-hero-inner {
    padding-top: 88px;
  }

  .pv-body {
    padding-top: 72px;
    padding-bottom: calc(var(--grid-pitch) * 3);
  }

  .pv-section {
    margin-bottom: 56px;
  }
}