/* Guides: /guides and the six guide pages under it.

   This was seven byte-identical copies of the same stylesheet, one inline in
   each page. Nothing had drifted yet, which was luck rather than discipline:
   the tool pages started the same way and did drift.

   Linked by guides/index.html and the six guides, after /tokens.css.

   The palette comes from /tokens.css. Nothing here redefines a brand colour,
   and scripts/audit.js fails the build if anything does.

   Versioned in the link, the same as site.css and coach/coach.css. Bump
   guide.css?vN in all seven pages together. */

/* The marketing site draws its red hairlines softer than the app does.
   /tokens.css carries both, this one as --line-red-soft. Renaming every use
   below would be a bigger change than this one line, so the soft value is
   bound to --line-red here and the pages are untouched. */
:root{
  --line-red:rgba(192,57,43,.32);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--ink); color:var(--bone); font-family:'Barlow',system-ui,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:var(--red); color:var(--white)}
a{color:inherit; text-decoration:none}
.wrap{max-width:1140px; margin:0 auto; padding:0 clamp(20px,5vw,48px)}
.narrow{max-width:720px}
/* Intentionally in three places: site.css, tool.css and guides/guide.css each
   carry this rule and they must stay identical. There is no shared stylesheet
   that all three reach except tokens.css, and tokens.css says in its own header
   that it holds no component or layout rules, which this is. A fourth file for
   one pseudo-element would be worse than a duplicate with a note on it.
   If you change it here, change it in the other two. */
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:clamp(60px,9vw,110px) 100%; background-position:center; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent)}
/* What sits ABOVE the lines. The pseudo-element is fixed at z-index:0, so
   anything not lifted here is painted over rather than behind, and this list
   was a different set of elements in each of the three files. The breadcrumb
   was in none of them: it is a bare <div class="wrap"> between the topbar and
   the hero, so on fourteen pages the motif was drawn on top of it. Faint, but
   it is the one place on the site where the texture was in front of the words. */
header,section,article,footer,.crumb{position:relative; z-index:1}

.topbar{position:sticky; top:0; z-index:60; background:rgba(12,12,14,.88); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.logo{display:flex; align-items:center; gap:12px}
.logo .mark{width:40px; height:40px; background:linear-gradient(145deg,var(--red-hot),var(--red-deep));
  display:grid; place-items:center; clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
.logo .mark span{font-family:'Oswald'; font-weight:700; font-size:19px; color:#fff; letter-spacing:.02em}
.logo b{font-family:'Oswald'; font-weight:600; letter-spacing:.06em; font-size:17px; text-transform:uppercase; line-height:1}
.logo small{display:block; font-family:'JetBrains Mono'; font-size:8px; color:var(--grey); letter-spacing:.22em; margin-top:6px; line-height:1}
.btn{font-family:'Oswald'; font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 20px; cursor:pointer; border:1px solid transparent; display:inline-block; transition:.16s}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:var(--red-hot)}
/* Skip link. Every page starts with a logo and five nav links, so without
   this a keyboard or screen reader user tabs through the whole header on
   every single page before reaching anything they came for. Positioned off
   screen rather than display:none, because display:none also removes it from
   the tab order. */
.skip{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--red); color:#fff; padding:14px 20px; min-height:44px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
.skip:focus{left:0}
/* .btn-ghost was here and is gone, 22 August 2026. Every header "Work with DQ"
   on a guide went to btn-red on DQ's call, so nothing linking this stylesheet
   uses it. It survives in site.css, where seven pages still do.

   Worth recording that this copy and tool.css's had DRIFTED: that one carried
   `background:none` and this one did not. Neither page looked wrong, because
   the button had no background either way. One rule, two copies, two rules. */

.crumb{font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); padding-top:26px}
.crumb a:hover{color:var(--red-hot)}

.hero{padding:clamp(28px,4vw,50px) 0 clamp(26px,4vw,40px)}
.eyebrow{font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--red-hot); display:flex; align-items:center; gap:12px; margin-bottom:20px}
.eyebrow::before{content:""; width:30px; height:2px; background:var(--red); flex:none}
h1{font-family:'Oswald'; font-weight:700; text-transform:uppercase; line-height:.96;
  font-size:clamp(33px,5.6vw,60px); letter-spacing:.003em; margin-bottom:20px}
h1 .stroke{color:var(--red-hot); display:inline-block}
.lead{font-size:clamp(16px,2.1vw,19px); color:var(--bone); max-width:56ch}
.meta{font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--grey); margin-top:20px; display:flex; gap:18px; flex-wrap:wrap}

section,article{padding:clamp(34px,4.5vw,56px) 0; border-top:1px solid var(--line)}
section,header,article{scroll-margin-top:84px}

/* article body */
.body h2{font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(22px,3.2vw,30px); line-height:1.05; margin:38px 0 16px}
.body h2:first-child{margin-top:0}
.body h3{font-family:'Oswald'; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  font-size:17px; margin:26px 0 10px; color:var(--bone)}
.body p{font-size:16.5px; line-height:1.78; color:#A7A4A0; margin-bottom:17px}
.body p strong,.body li strong{color:var(--bone); font-weight:600}
.body a{color:var(--bone); border-bottom:1px solid var(--line-red)}
.body a:hover{color:var(--red-hot)}
.body ul,.body ol{margin:0 0 20px; padding-left:0; list-style:none}
.body li{position:relative; padding:8px 0 8px 22px; font-size:16px; line-height:1.65; color:#A7A4A0;
  border-top:1px solid rgba(255,255,255,.04)}
.body li:first-child{border-top:none}
.body ul li::before{content:""; position:absolute; left:0; top:16px; width:6px; height:6px;
  background:var(--red); transform:rotate(45deg)}
.body ol{counter-reset:n}
.body ol li{counter-increment:n}
.body ol li::before{content:counter(n); position:absolute; left:0; top:9px;
  font-family:'JetBrains Mono'; font-size:11px; color:var(--gold)}
/* A sources list, for the one guide that carries citations. Not a bullet
   list: these are references and they read better with room around them. */
.body ul.refs{list-style:none; padding-left:0; margin:16px 0}
.body ul.refs li{font-size:13px; line-height:1.65; color:var(--grey); padding:9px 0 9px 18px;
  position:relative; border-bottom:1px solid var(--line); margin:0}
.body ul.refs li:last-child{border-bottom:none}
.body ul.refs li::before{content:""; position:absolute; left:0; top:16px; width:5px; height:5px;
  background:var(--red); transform:rotate(45deg)}
.body ul.refs i{color:#A7A4A0}
.body blockquote{border-left:2px solid var(--red); padding:2px 0 2px 16px; margin:0 0 20px;
  font-size:17px; line-height:1.7; color:var(--bone)}

.scale{border:1px solid var(--line); margin:0 0 24px; overflow:hidden}
.scale .r{display:grid; grid-template-columns:64px 1fr; gap:14px; padding:12px 16px;
  border-top:1px solid var(--line); align-items:baseline}
.scale .r:first-child{border-top:none; background:rgba(192,57,43,.08)}
.scale .n{font-family:'Oswald'; font-weight:600; font-size:19px; color:var(--red-hot); line-height:1}
.scale .r:first-child .n{font-family:'JetBrains Mono'; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red-hot); font-weight:500}
.scale .d{font-size:14.5px; line-height:1.55; color:#A7A4A0}
.scale .r:first-child .d{font-family:'JetBrains Mono'; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red-hot)}

/* A real four column grid, because a percentage table where the headings do
   not sit over their own column is worse than no table at all. */
.pct{border:1px solid var(--line); margin:0 0 24px; overflow-x:auto}
.pct .r{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; min-width:290px;
  border-top:1px solid var(--line); align-items:baseline}
.pct .r:first-child{border-top:none; background:rgba(192,57,43,.08)}
.pct span{padding:12px 10px; font-family:'JetBrains Mono'; font-size:14px;
  color:#A7A4A0; text-align:right; font-variant-numeric:tabular-nums}
.pct span:first-child{text-align:left; font-family:'Oswald'; font-weight:600;
  font-size:18px; color:var(--red-hot); line-height:1.2}
.pct .r:first-child span{font-family:'JetBrains Mono'; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red-hot); font-weight:500}
/* When the first column is a word rather than a digit it needs the room, and
   it cannot carry the 18px display size without running into the next cell. */
.pct.named .r{grid-template-columns:1.55fr 1fr 1fr 1fr}
.pct.named span:first-child{font-size:13.5px; letter-spacing:.02em;
  text-transform:uppercase; align-self:center}

.callout{border:1px solid var(--line-red); background:linear-gradient(180deg,rgba(192,57,43,.07),rgba(192,57,43,.02));
  padding:20px 22px; margin:0 0 24px}
.callout p{margin:0; color:var(--bone); font-size:15.5px; line-height:1.7}
.callout p + p{margin-top:11px}

/* .band and .jump are gone. Both belonged to the grouped /guides hub that
   docs/backlog.md records being flattened: "/guides is squares tagged by
   discipline. Both lost their trailing call-to-action strips." No guide page
   carries either class any more. Removed rather than reweighted, because
   .band .bh h2 and .jump h2 both declare Oswald and would otherwise have been
   "fixed" into rules that still match nothing. The live equivalents are
   .gcard, below, and tool.css keeps its own .band because /tools does still
   use one. */

.cta-strip{margin-top:34px; border:1px solid var(--line-red);
  background:linear-gradient(180deg,rgba(192,57,43,.07),rgba(192,57,43,.02));
  padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.cta-strip p{margin:0; font-size:15px; color:var(--bone); max-width:52ch; line-height:1.55}
.cta-strip .btn{flex:none; padding:13px 24px}
@media(max-width:560px){.cta-strip{flex-direction:column; align-items:stretch}.cta-strip .btn{text-align:center}}

/* index cards */
.glist{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:24px}
.gcard{border:1px solid var(--line); background:linear-gradient(180deg,var(--coal2),var(--coal));
  border-top:2px solid var(--red); padding:24px 22px; display:flex; flex-direction:column; transition:.22s}
.gcard:hover{transform:translateY(-4px); border-color:var(--line-red)}
.gcard .tag{font-family:'JetBrains Mono'; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
/* Every .gcard tile on /guides uses an h2, never an h3: the h3 half of this
   selector matches nothing in the current markup, kept combined in case a
   future tile does use one. This h2 is a card heading, one tier down from a
   page's own .sec-title, and it was set to the section-title weight instead. */
.gcard h2,.gcard h3{font-family:'Oswald'; font-weight:500; text-transform:uppercase; letter-spacing:.03em;
  font-size:20px; margin:11px 0 10px; line-height:1.1}
.gcard p{font-size:14.5px; line-height:1.6; color:var(--grey)}
/* .soon went with the same flatten: no guide page carries the dashed "more
   coming" box any more, and .soon b declared Oswald. index.html's own .soon is
   a different element entirely, a chip inside .integrations, styled in
   site.css, so nothing here was reaching it. */

footer{border-top:1px solid var(--line); padding:36px 0 calc(36px + var(--safe-b))}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
footer .flink{color:var(--white); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:8px 2px}
footer .flink:hover{color:var(--red-hot)}
footer small{font-family:'JetBrains Mono'; font-size:11px; color:var(--grey)}
/* This rule was the one piece of the guide stylesheet that never made it out of
   the markup. All seven guide pages carried it as a style="" attribute on the
   div itself, which is why extracting the thirteen inline stylesheets did not
   catch it: the audit self-test looks for a <style> block coming back, and an
   attribute is neither. It is the 300 tier, a tracked sub-label, matching
   site.css and tool.css. */
footer .discs{font-family:'Oswald'; font-weight:300; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red-hot); display:flex; gap:14px; flex-wrap:wrap}
/* Bare text links sit under the 24px WCAG AA minimum, so each gets its own
   padding rather than the whole row being made taller. */
footer .discs a{display:inline-block; padding:8px 0}
@media(prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}

/* ---------- sideways rails ----------

   Anything that scrolls sideways gets a bar you can see. Measured rather than
   picked: --red-hot on a --coal2 track is 4.41:1, comfortably past the 3:1 that
   WCAG 2.1 SC 1.4.11 asks of a UI component. Brand --red on the same track is
   3.10:1, which passes and no more, so the hotter red is the one that survives
   an 8px bar on a phone.

   What was here before measured 1.75:1: a 60% red thumb over a 6% white track,
   both composited down onto a near-black section, which is a scrollbar you can
   only find if you already know it is there.

   Both syntaxes are set on purpose. scrollbar-width and scrollbar-color are
   what Firefox reads; the ::-webkit- pseudo-elements are what Chrome, Edge and
   Safari read. Set one and the other browser draws its own default, which on
   macOS is a near-invisible overlay and in Chrome is a light-scheme grey bar on
   a black page.

   Never display:none. These rails are the only affordance that there is more to
   the right, and only one of them has copy saying so. */
.pct{scrollbar-width:thin; scrollbar-color:var(--red-hot) var(--coal2)}
.pct::-webkit-scrollbar{height:8px; width:8px}
.pct::-webkit-scrollbar-track{background:var(--coal2)}
.pct::-webkit-scrollbar-thumb{background:var(--red-hot)}
.pct::-webkit-scrollbar-thumb:hover{background:var(--red)}
/* ---------- the keyboard focus ring ----------

   One ring, every interactive thing, all three stylesheets. Before this,
   site.css had no blanket rule at all, so index.html, privacy and terms gave a
   keyboard user nothing on any link or button, while tool.css and guide.css
   each had their own and the two did not match.

   --bone, and that is measurement rather than taste. The ring has to land on
   four grounds: --ink 16.16:1, --coal 15.20:1, --coal2 13.93:1, and --red
   4.50:1, which is the one that matters because every "Work with DQ" button and
   every active discipline tab is solid --red. The old --red ring measured 1.00:1
   there, and --red-hot 1.42:1. Both were invisible on exactly the controls
   somebody tabbing the page is heading for. 3:1 is what WCAG 2.1 SC 1.4.11 asks
   of a focus indicator.

   :focus-visible, not :focus, so a mouse click does not leave a ring behind.

   Text inputs are deliberately not in this list. .field input:focus already
   swaps the border to --red and adds a 16% halo, it beats this rule on
   specificity anyway, and it is a better indicator for a box you are typing in
   than an outline around it. */
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, [role="tab"]:focus-visible{
  outline:2px solid var(--bone);
  outline-offset:3px;
}

/* The skip link is the one thing that sits flush against the page edge: it
   parks at left:0 when focused, and body{overflow-x:hidden} would clip an
   outward ring off the left of the viewport. Inset instead. */
.skip:focus-visible{outline-offset:-3px}

/* ---------- the mark ----------

   The badge, the letters and the corner cut are all inside logo-mark.svg now, so
   the only thing CSS still owns is the box it sits in. Three things changed in
   the drawing: the Q tail lengthened so it clears the ring, which is the whole
   point (at header sizes the old mark read as DO); stroke weight 24 to 28 units
   so the letters hold at 32 and 40px; and a deeper corner cut.

   The letters are paths, so the header no longer waits for Oswald. On a cold
   load on gym signal it used to show two fallback-font letters in a red box.

   The gradient is kept as a SECOND background layer under the SVG, and that is
   deliberate rather than tidy. The patch as written used the background
   shorthand, which resets background-color as well as background-image, so if
   this CSS reached the edge before the SVG did the mark would not degrade to a
   red badge, it would be a transparent box with its letters already hidden by
   the rule below: a header with no logo at all. Layered, a missing SVG leaves
   exactly the badge that is live today. Found by the app lane, worth having.

   No !important anywhere. This block is appended after the rule it overrides in
   every file it goes into, so equal specificity and later position is enough,
   and an override that can itself be overridden is the kinder thing to leave. */
.logo .mark,.mark{
  background-image:url("/logo-mark.svg"),linear-gradient(145deg,var(--red-hot),var(--red-deep));
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  clip-path:polygon(0 0,100% 0,100% 58%,58% 100%,0 100%);
  display:block;
  position:relative;
}

/* The inner <span>DQ</span> is drawn inside the SVG now, so the live text node is
   duplicate content. Hidden rather than deleted: no markup changes, and it stays
   available to a screen reader that ignores background images. Kept in the flow
   at 1px rather than display:none, which some readers skip entirely. */
.logo .mark span,.mark span{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}


/* ---------- no sub-header on the marketing site ----------

   The STRENGTH & CONDITIONING line comes off. The page underneath already says
   what the business does, in a headline and then a paragraph, so a tracked
   caption under the wordmark is the third time in one screen. It also puts the
   mark and the wordmark on one line, which quietens the strip and leaves the
   mark as the only red thing in it besides the button that earns money.

   Hidden, not deleted from the markup, so this stays a CSS-only change and the
   words are still in the DOM for a crawler.

   This rule is the marketing site's alone. The portal surfaces keep their
   sub-header, in gold, naming which hub you are on, and the athlete hub's is
   deliberately 10px and bold. That is the app lane's file and their call. */
.topbar .logo small{display:none}

/* A link in prose is marked with a hairline, not with a colour. The guide links
   inside the CTA strip carry an inline color:var(--bone) inside a var(--bone)
   paragraph, with the reset suppressing the underline, so they read as plain
   text: nine of them across the six calculators and the same shape here.

   This is the third time this exact bug has been found on this site. The backlog
   already records "How that works" shipping as an <a> that inherited its
   paragraph's colour with the underline off, and the smoke sweep passes all of
   them, because legible text that is not identifiably a link is still legible
   text. Matching .src-note a and .refs a, which have always been right. */
.cta-strip p a{border-bottom:1px solid var(--line-red)}
.cta-strip p a:hover{color:var(--red-hot); border-bottom-color:var(--red-hot)}


/* ===== Discipline tabs on the guides index =====

   DQ's request, 21 August 2026: the same red discipline switch /tools carries,
   so a boxer can see the guides that are for them without reading six cards.

   THE RULES ARE COPIED FROM tool.css RATHER THAN SHARED, and that is a real
   cost worth naming rather than hiding. This site has two stylesheets by
   design, /tool.css for the calculators and this one for the guides, and
   neither imports the other. Copying is the lesser evil against a third
   stylesheet or an @import that blocks the render, but it IS the "one rule,
   six copies" problem starting, and scripts/tabpanels.js is what stops the
   BEHAVIOUR drifting even if the paint does.

   Every guide already carried a discipline tag, so the tabs are built from
   what the cards already say rather than from a list somebody maintains
   beside them.

   ONE HONEST NOTE ON THE CONTENT. The weightlifting tab has a single guide.
   That is a gap in what has been written rather than a fault in the layout,
   and padding it by filing powerlifting guides under weightlifting would make
   the tab lie. The always-visible band below carries the two that genuinely
   apply to everybody, so no tab is ever alone on the page. */
.disc-switch{display:grid; grid-template-columns:1fr 1fr 1fr; margin:0 0 22px;
  border:1px solid var(--line-red)}
/* FOUR, matching tools.css. The personal training tab, DQ's call 26 August.
   Below 760px it becomes two rows of two rather than four squeezed columns:
   the .narrow span on each button handles the label, this handles the box.

   THE TAB ORDER MATCHES /tools DELIBERATELY: Any client, S&C, Powerlifting,
   Weightlifting. A reader who learns the pattern on one page should find it
   unchanged on the other, and that is worth more than either page's own
   historic order. */
.disc-switch.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){
  .disc-switch.four{grid-template-columns:1fr 1fr}
  .disc-switch.four .ds:nth-child(3){border-left:0}
  .disc-switch.four .ds:nth-child(n+3){border-top:1px solid var(--line-red)}
}
.disc-switch .ds{display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Oswald',sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  font-size:12.5px; color:var(--grey); padding:13px 8px; min-height:44px; transition:.18s;
  background:none; border:0; cursor:pointer}
.disc-switch .ds + .ds{border-left:1px solid var(--line-red)}
.disc-switch .ds.on{background:var(--red); color:#fff; cursor:default}
.disc-switch button.ds:not(.on):hover{color:var(--bone); background:rgba(192,57,43,.07)}
.disc-switch .ds:focus-visible{outline:2px solid var(--bone); outline-offset:-3px}
/* Spelled out where there is room, abbreviated where there is not. The full
   words wrap the row and force a sideways scroll at 320px, measured on /tools
   before the same breakpoint was chosen there. */
.ds .wide{display:none}
@media(min-width:560px){ .ds .wide{display:inline} .ds .narrow{display:none} }

/* A hidden panel has to actually hide. .glist sets display:grid, which beats
   the browser's own [hidden]{display:none}, and that exact bug shipped on
   /tools once: every discipline's cards carried on rendering underneath the
   active one while element.hidden read true the whole time. */
.glist[hidden]{display:none}
html:not(.js) .glist[hidden]{display:grid}

.gband{margin-top:34px}
.gband .bh{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:6px}
.gband .bh h3{font-family:'Oswald'; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:19px; color:var(--bone)}
.gband .bh span{font-size:13.5px; color:var(--grey)}

/* FOOTER MATCHES THE HEADER. DQ, 26 August: About, Q&A, Free Tools in gold,
   Guides in red, "matching header". The header has coloured those two since it
   was built and the footer never did, so the same two links read as two
   different kinds of thing depending which end of the page you were at.

   The rule lives in three stylesheets because the footer does, which is the
   thirteen-inline-stylesheets problem this repo already carries. Written
   identically in all three ON PURPOSE and noted here, so the next person
   changing one knows there are two more. */
footer .discs a.ft-tools{color:var(--gold)}
footer .discs a.ft-tools:hover{color:#E0BC4A}
footer .discs a.ft-guides{color:var(--red-hot)}
footer .discs a.ft-guides:hover{color:#F0685A}

/* A GAP IS A HOLE SOMEBODY HAS TO FILL, AND IT MUST NOT READ AS FINISHED TEXT.
   DQ chose "I draft, you correct" with the risk stated in the option he picked.
   That is his call, and it does not extend to inventing his coaching opinions:
   the existing guides are full of first-person judgement about clients he has
   coached, and a plausible substitute would be the CLAUDE.md non-negotiable
   broken in the worst available place, on a public page, in his voice, about
   people he did or did not train.

   So the parts only he can write are left OPEN and made loud. A page that is
   mostly written with marked holes is correctable. A page that is entirely
   written with four invented opinions is approvable, and approval is what the
   review is for.

   Red rather than grey deliberately: a quiet gap gets read past, and the whole
   point is that it cannot be. */
.gap{border-left:3px solid var(--red);background:rgba(192,57,43,.07);
  padding:14px 16px;margin:22px 0;border-radius:0 6px 6px 0}
.gap-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-hot);margin:0 0 6px}
.gap p{margin:0;font-size:15px;line-height:1.6}

/* ===========================================================================
   THE FOOTER, ONE TREATMENT. 28 August 2026.

   DQ: "make that white font similar to the header font, otherwise it looks a
   bit confusing", and "a bit more synchrony throughout".

   MEASURED BEFORE IT WAS CHANGED, and the confusion was not the white row. It
   was that the SAME LINK WAS A DIFFERENT COLOUR ON DIFFERENT PAGES:

                index      guides     tools
     About      gold       red        red
     Q&A        gold       red        red
     Free tools gold       gold       gold
     Guides     red        red        red

   footer .discs is declared in three stylesheets AND THREE TIMES INSIDE
   site.css: red-hot at :401, gold at :938, then per-link overrides at :1169.
   site.css is the only file carrying the gold container rule, so About and Q&A
   went gold on the two pages that link it and stayed red on the twenty-nine
   that do not. Nobody wrote that; it is what three copies of one rule do.

   ONE TREATMENT NOW, AND IT IS THE HEADER'S: JetBrains Mono, 11px, .14em,
   uppercase, --grey, hover --bone. Identical in site.css, tool.css and
   guides/guide.css.

   GOLD IS GONE FROM THE FOOTER RATHER THAN APPLIED CONSISTENTLY. Gold means
   free in this codebase and the footer row is navigation, so colouring two of
   four links was signalling a category to somebody reading a nav. The free
   things are still gold where a reader is choosing them, in the Free tools box
   on the home page.

   IF YOU CHANGE IT HERE, CHANGE IT IN THE OTHER TWO. There is no shared
   stylesheet these three reach, and tokens.css holds no component rules by its
   own rule. Same standing note as the measure-lines motif.
   =========================================================================== */
footer .discs{font-family:'JetBrains Mono',monospace; font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
  display:flex; gap:14px; flex-wrap:wrap}
footer .discs a{display:inline-block; padding:8px 0; color:inherit}
footer .discs a:hover{color:var(--bone)}
footer .discs a.ft-tools,footer .discs a.ft-guides{color:inherit}
footer .discs a.ft-tools:hover,footer .discs a.ft-guides:hover{color:var(--bone)}
/* The white underlined row shouted louder than the nav above it. Same family,
   same colour, same hover; sentence case, because an email address is not a
   label and uppercasing one makes it harder to read. */
footer .flink{color:var(--grey); text-decoration:none;
  display:inline-block; padding:8px 2px}
footer .flink:hover{color:var(--bone)}

/* ---- SAME, ON THE GUIDE CARDS, 28 August 2026 ----------------------------- */
.gcard b,.gcard h3{font-size:clamp(18px,2.1vw,23px); line-height:1.2}
.gcard{padding:24px 22px 26px}