/* ==========================================================================
   Guides — page module for guides/ (the hub, every guide, and the 404)
   Loaded after article.css (the 404 after blog.css). It carries the guide's
   own composition — the split header, the text-and-sidebar body — and the
   pieces inside the text that article.css doesn't have: the breadcrumb, the
   short answer, the contents list, tables, callouts, message templates, the
   FAQ, sources, the glossary, and the hub's grouped index.

   On a wide screen a guide uses the whole content rail, the way the homepage
   does: headline and photograph side by side, then the text on the left at a
   reading measure with the contents and a demo card holding still on the
   right. At 1000px — where the homepage hero folds too — it becomes one
   centred reading column, and the photograph and the sidebar step out of the
   way.
   ========================================================================== */

/* ---------- The page-top split ----------
   Copy on the content rail, a photograph running off the right edge. The
   first track resolves to exactly the offset .wrap gives the body below, so
   the headline, the text and the wordmark share one left edge. */
.guide-head {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--edge), calc((100% - var(--content)) / 2))
    [content-start] minmax(0, 1.14fr)
    [copy-end] clamp(40px, 4.5vw, 88px)
    [media-start] minmax(0, 0.86fr) [full-end];
  align-items: center;
  min-height: min(640px, calc(100svh - var(--nav-h)));
  border-bottom: 1px solid var(--line);
}
.guide-head-copy { grid-column: content-start / copy-end; padding-block: var(--sp-8); }
.guide-head-media { grid-column: media-start / full-end; align-self: stretch; padding-block: var(--sp-6); }
.guide-head-media .ph { height: 100%; min-height: 440px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

/* Sized against the column as well as the scale, so a long headline stays at
   three or four lines as the split narrows towards the fold. */
.guide-head h1 {
  font-weight: 300; font-size: min(var(--d-1), 4.6vw);
  line-height: 1.04; letter-spacing: -0.028em;
  max-width: 20ch; margin-bottom: var(--sp-6);
}
.guide-head h1 em { color: var(--thread); }
.guide-head .standfirst {
  font-family: var(--font-serif); font-weight: 300;
  font-size: var(--fs-xl); line-height: 1.45; color: var(--ink-soft);
  max-width: 42ch; margin-bottom: var(--sp-7);
}
.guide-head .article-meta { max-width: 44rem; }

/* The hub's version: a bigger headline, and the topics as jump links. */
.hub-head h1 { font-size: min(var(--d-0), 5.6vw); max-width: 13ch; }
.hub-head .standfirst { max-width: 36ch; }
.hub-jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hub-jump a {
  display: inline-block; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); line-height: 1.3; color: var(--ink-soft); text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hub-jump a:hover { border-color: var(--ink); color: var(--ink); }
}

/* ---------- The body: text on the left, contents holding still on the right */
.guide-body { padding-block: var(--sp-8); }
.guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 44rem) minmax(15rem, 19rem);
  justify-content: space-between;
  column-gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
/* article.css centres the text on a narrower measure; here the grid decides. */
.guide-main .prose,
.guide-main .article-foot { max-width: none; margin-inline: 0; }
/* The sidebar carries the contents on a wide screen, so the copy in the text
   stands down until the layout folds. */
.guide-grid .prose > .toc { display: none; }

.guide-aside {
  position: sticky; top: calc(var(--nav-h) + var(--sp-6));
  display: flex; flex-direction: column; gap: var(--sp-6);
  max-height: calc(100vh - var(--nav-h) - var(--sp-7));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.toc-side { border-top: 2px solid var(--ink); padding-top: var(--sp-4); }
.toc-side .toc-label {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--sp-2);
}
.toc-side ol { list-style: none; counter-reset: toc; }
.toc-side li {
  counter-increment: toc;
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr);
  font-size: var(--fs-sm); line-height: 1.45;
  padding-block: 8px; border-bottom: 1px solid var(--line);
}
.toc-side li:last-child { border-bottom: 0; }
.toc-side li::before {
  content: counter(toc, decimal-leading-zero);
  font-size: var(--fs-micro); color: var(--ink-faint); padding-top: 0.2em;
  font-variant-numeric: tabular-nums; transition: color .2s ease;
}
.toc-side a { color: var(--ink-soft); text-decoration: none; transition: color .2s ease; }
.toc-side li.is-current a { color: var(--ink); font-weight: 500; }
.toc-side li.is-current::before { color: var(--thread); }
@media (hover: hover) and (pointer: fine) {
  .toc-side a:hover { color: var(--thread); }
}

.aside-card {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: var(--sp-5);
}
.aside-card p { font-size: var(--fs-sm); line-height: 1.55; color: var(--paper-body); margin-bottom: var(--sp-4); }
.aside-card .aside-label {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--paper-faint); margin-bottom: var(--sp-3);
}
.aside-card .btn { display: block; text-align: center; background: var(--paper); border-color: var(--paper); color: var(--ink); }
.aside-card .aside-link { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--paper-body); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .aside-card .btn:hover { background: var(--thread); border-color: var(--thread); color: var(--paper); }
  .aside-card .aside-link:hover { color: var(--paper); }
}
/* The free guide, under the card: its cover, its name and the way to it. */
.aside-guide {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: var(--sp-4); align-items: center;
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-lift); color: var(--ink); text-decoration: none;
  transition: border-color .18s ease;
}
.aside-guide img {
  display: block; width: 54px; height: auto; border-radius: 2px; transform: rotate(-3deg);
  box-shadow: 0 6px 16px rgba(17, 17, 16, 0.2);
}
.aside-guide-title { display: block; font-family: var(--font-serif); font-size: var(--fs-ui); line-height: 1.25; }
.aside-guide-cta {
  display: inline-block; margin-top: 6px; padding-bottom: 1px;
  font-size: var(--fs-xs); font-weight: 500; border-bottom: 1px solid var(--thread);
}
@media (hover: hover) and (pointer: fine) {
  .aside-guide:hover { border-color: var(--ink); }
  .aside-guide:hover .aside-guide-cta { color: var(--thread); }
}

/* On a short laptop screen the whole sidebar has to fit under the menu bar to
   stay put, so the contents tighten and the card keeps only its button. */
@media (max-height: 880px) {
  .guide-aside { gap: var(--sp-5); }
  .toc-side li { padding-block: 5px; }
  .aside-card { padding: var(--sp-4); }
  .aside-card p:not(.aside-label),
  .aside-card .aside-link { display: none; }
  .aside-guide { padding: var(--sp-3); grid-template-columns: 38px minmax(0, 1fr); gap: var(--sp-3); }
  .aside-guide img { width: 38px; }
  .aside-guide-cta { display: none; }
}

/* ---------- Breadcrumb ----------
   The way back to the hub, above a guide's headline. It is navigation, so it
   is set as small plain text, not as a label: in capitals and tracked out it
   would read as a kicker over the headline. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-faint);
}
.crumbs a { color: var(--ink-faint); text-underline-offset: 3px; text-decoration-color: var(--line); }
.crumbs span { margin-inline: 0.55em; }
@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover { color: var(--thread); text-decoration-color: var(--thread); }
}

/* ---------- The short answer ----------
   The first thing under the headline on every guide: the question answered in
   a paragraph, before any of the reasoning. Readers who stop here should
   leave with the right idea. */
.prose .answer {
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-left: 3px solid var(--thread);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--hairline);
}
.prose .answer > * + * { margin-top: 0.8em; }
.prose .answer .answer-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm); letter-spacing: var(--tracking-label); text-transform: uppercase;
  line-height: 1.5; color: var(--thread-ink);
}
.prose .answer p { font-size: var(--fs-md); line-height: 1.65; }

/* ---------- In this guide ---------- */
.prose .toc {
  border-block: 1px solid var(--line);
  padding-block: var(--sp-5);
}
.prose .toc-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm); letter-spacing: var(--tracking-label); text-transform: uppercase;
  line-height: 1.5; color: var(--ink-faint);
  margin-bottom: var(--sp-3);
}
.prose .toc ol { list-style: none; padding-left: 0; counter-reset: toc; }
.prose .toc li {
  counter-increment: toc;
  font-size: var(--fs-ui); line-height: 1.45;
  margin-bottom: 0.45em;
  display: grid; grid-template-columns: 2.1em minmax(0, 1fr);
}
.prose .toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-size: var(--fs-xs); color: var(--thread-ink); padding-top: 0.2em;
  font-variant-numeric: tabular-nums;
}
.prose .toc a { color: var(--ink-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .prose .toc a:hover { color: var(--thread); }
}

/* ---------- Links and small print inside the prose ---------- */
.prose li a { color: var(--thread); text-underline-offset: 3px; }
.prose .small { font-size: var(--fs-ui); color: var(--ink-soft); }

/* ---------- Tables ----------
   Wrapped so a wide table scrolls inside the column on a phone instead of
   pushing the page sideways. */
.prose .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--ink-faint);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.5; }
.prose caption {
  caption-side: bottom; text-align: left;
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-sm);
  color: var(--ink-faint); padding-top: var(--sp-3);
}
.prose th, .prose td {
  text-align: left; vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-prose);
}
.prose thead th {
  font-weight: 500; font-size: var(--fs-sm); letter-spacing: 0.02em;
  color: var(--ink); white-space: nowrap;
}
.prose tbody th { font-weight: 500; color: var(--ink); }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; padding-left: 14px; }
.prose tr.total td, .prose tr.total th { border-bottom: 0; border-top: 1px solid var(--ink-faint); font-weight: 500; color: var(--ink); }

/* ---------- Callout ---------- */
.prose .callout {
  background: var(--paper-warm);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
}
.prose .callout > * + * { margin-top: 0.7em; }
.prose .callout p, .prose .callout li { font-size: var(--fs-base); line-height: 1.65; }
.prose .callout .callout-title {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-sm); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Message templates ----------
   Words somebody might actually send. Set like a note on a card rather than
   a quotation, because they're meant to be copied and changed. */
.prose .template {
  background: var(--paper-lift);
  border: 1px dashed var(--ink-faint);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
}
.prose .template > * + * { margin-top: 0.75em; }
.prose .template .template-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--thread-ink); line-height: 1.5;
}
.prose .template p { font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.6; color: var(--ink); }

/* ---------- Worked example: a number and what it means ---------- */
.prose .worked {
  border-left: 2px solid var(--thread);
  padding-left: var(--sp-5);
}
.prose .worked > * + * { margin-top: 0.6em; }

/* ---------- FAQ ---------- */
.prose .faq-item { border-top: 1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-5); }
.prose .faq-item > * + * { margin-top: 0.7em; }
.prose .faq-item h3 { margin-top: 0; margin-bottom: 0; font-size: var(--fs-lg); }
.prose .faq-item p { font-size: var(--fs-base); line-height: 1.7; }

/* ---------- Sources ---------- */
.prose .sources { border-top: 1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-8); }
.prose .sources h2 {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-sm); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-faint); margin-top: 0;
}
.prose .sources li { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); }
.prose .sources a { color: var(--ink-soft); word-break: break-word; }

/* ---------- Glossary ---------- */
.prose dl.glossary dt {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.01em;
  margin-top: 1.9em; margin-bottom: 0.35em;
  scroll-margin-top: calc(var(--nav-h) + var(--sp-5));
}
.prose dl.glossary dd { font-size: var(--fs-md); line-height: 1.7; color: var(--ink-prose); }
.prose dl.glossary dd a { color: var(--thread); text-underline-offset: 3px; }
.prose dl.glossary dd + dd { margin-top: 0.6em; }
.prose .glossary-index { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; padding-left: 0; }
.prose .glossary-index li { font-size: var(--fs-ui); margin: 0; }

/* ---------- Read next ----------
   Across the whole rail, in the hub's card style. The heading is an h2 for
   the outline, sized as a label. */
.read-next { border-top: 1px solid var(--line); }
/* Read next comes straight after the text and carries its own air, so the
   call to action that follows it doesn't need a margin of its own. */
.read-next + .end-cta { margin-top: 0; }
.read-next .wrap { max-width: var(--content-outer); }
.read-next .rn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7) clamp(28px, 3vw, 48px); }
.read-next h2.rn-head { font-family: var(--font-sans); font-weight: 400; }

/* ---------- The hub ---------- */
/* ---------- The free guide, featured above the groups ---------- */
.hub-feature { padding-top: var(--sp-8); }
.hub-feature-card {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 44px) clamp(24px, 4vw, 56px);
  background: var(--ink); color: var(--paper); border-radius: var(--radius-lg);
  text-decoration: none;
}
.hub-feature-cover img {
  display: block; width: 100%; height: auto; border-radius: 3px; transform: rotate(-3deg);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(244, 241, 234, 0.08);
}
.hub-feature h2 {
  font-weight: 300; font-size: var(--d-3); line-height: 1.08; letter-spacing: -0.02em;
  max-width: 24ch; margin-bottom: var(--sp-4);
}
.hub-feature h2 em { color: #d9622b; }   /* the accent as it reads on ink, as in the guide */
.hub-feature h2 .keep { white-space: nowrap; }
.hub-feature-copy > p { font-size: var(--fs-base); line-height: 1.6; color: var(--paper-body); max-width: 58ch; }
.hub-feature-cta {
  display: inline-block; margin-top: var(--sp-5); padding-bottom: 2px;
  font-size: var(--fs-ui); font-weight: 500; border-bottom: 1px solid var(--thread);
  transition: color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hub-feature-card:hover .hub-feature-cta { color: #d9622b; }
}
.hub-feature-card:focus-visible { outline: 2px solid var(--thread); outline-offset: 4px; }
@media (max-width: 620px) {
  .hub-feature-card { grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: var(--sp-5); }
  .hub-feature h2 { font-size: var(--d-4); }
  .hub-feature-copy > p { display: none; }
}

.guide-groups { padding-block: var(--sp-7) var(--section); }
/* The groups already end on a full section of air; the call to action's own
   top margin, right for the end of an article, would double it here. */
.guide-groups + .end-cta { margin-top: 0; }
.guide-group {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: var(--sp-6) clamp(32px, 5vw, 88px);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--line);
}
.guide-group:first-child { border-top: 0; }
.gg-head h2 {
  font-weight: 300; font-size: var(--d-3);
  line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.gg-head p { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); max-width: 34ch; }
.guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7) clamp(28px, 3vw, 48px);
}
/* A guide as a card: the photograph its own page opens with as the cover,
   so each one is told apart at a glance, then the title, the description,
   and the topic and reading time as a caption pinned to the foot. Cards in
   a row share a height, so the captions line up. The homepage's three
   (.g-card, home.css) are the same card. */
.guide-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--paper-lift);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .25s ease, box-shadow .3s ease;
}
.guide-card .gc-cover { display: block; aspect-ratio: 2 / 1; }
.guide-card .gc-body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
.guide-card h3 {
  font-weight: 400; font-size: var(--fs-xl);
  line-height: 1.2; letter-spacing: -0.012em;
  margin-bottom: var(--sp-3); transition: color .25s ease;
}
.guide-card p:not(.c-meta) { font-size: var(--fs-ui); line-height: 1.6; color: var(--ink-soft); }
.guide-card .c-meta { margin-top: auto; padding-top: var(--sp-4); }
.guide-card:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover { transform: translateY(-4px); border-color: var(--thread); box-shadow: var(--lift); }
  .guide-card:hover h3 { color: var(--thread); }
}

/* ---------- The 404 ---------- */
.not-found { border-bottom: 0; min-height: calc(70svh - var(--nav-h)); }
.nf-links { list-style: none; margin-top: var(--sp-7); max-width: 40rem; border-top: 1px solid var(--line); }
.nf-links li {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-4); border-bottom: 1px solid var(--line);
  font-size: var(--fs-ui); line-height: 1.5;
}
.nf-links a { color: var(--ink); font-weight: 500; text-decoration: none; }
.nf-links span { color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .nf-links a:hover { color: var(--thread); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  /* One reading column: the headline over the text on the same centred
     measure, the contents back inside the text, and no photograph — it isn't
     drawn, so it isn't downloaded either. */
  .guide-head { display: block; min-height: 0; border-bottom: 0; }
  .guide-head-copy {
    max-width: calc(var(--measure) + var(--edge) * 2);
    margin-inline: auto;
    padding: var(--sp-9) var(--edge) 0;
  }
  .guide-head h1 { font-size: var(--d-1); }
  .guide-head-media { display: none; }
  .hub-head { border-bottom: 1px solid var(--line); }
  .hub-head .guide-head-copy { max-width: var(--content-outer); padding-bottom: var(--sp-8); }
  .hub-head h1 { font-size: var(--d-0); }

  .guide-body { padding-top: var(--sp-7); }
  .guide-grid { display: block; max-width: calc(var(--measure) + var(--edge) * 2); }
  .guide-grid .prose > .toc { display: block; }
  .guide-aside { display: none; }
  .read-next .rn-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

  .guide-group { grid-template-columns: minmax(0, 1fr); }
  .gg-head p { max-width: 54ch; }
}
@media (max-width: 620px) {
  /* A table of four or more columns can't share a phone's width without
     breaking every cell into single words, so it holds a readable width and
     scrolls inside its wrapper instead. Narrower tables still fit the column. */
  .prose table:has(tr > :nth-child(4)) { min-width: 36rem; }
  /* On a phone the cards become rows, like a list in an app: a square of
     the photograph on the left, and the description held to two lines, so
     fourteen guides are a list to run down rather than a long scroll. */
  .guide-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .guide-card { flex-direction: row; border-radius: var(--radius-lg); }
  .guide-card .gc-cover { flex: 0 0 96px; aspect-ratio: auto; }
  .guide-card .gc-body { padding: 14px 16px; }
  .guide-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
  .guide-card p:not(.c-meta) {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; font-size: var(--fs-sm); line-height: 1.5;
  }
  .guide-card .c-meta { padding-top: var(--sp-2); font-size: var(--fs-xs); }
  .prose .answer,
  .prose .callout,
  .prose .template { padding: var(--sp-4) var(--sp-5); }
  .nf-links li { grid-template-columns: minmax(0, 1fr); }
}