/* The long-form guide post.
   ─────────────────────────────────────────────────────────────────────────
   Every other post on this site was migrated from Squarespace and renders
   through .bp in activity.css, which is one 720px column and nothing else.
   That is the right shape for a thousand words of reflection and the wrong
   shape for this one: a guide somebody reads in pieces, comes back to, and
   needs to navigate rather than scroll.

   So this file adds a second layout for exactly one kind of page. It keeps
   the site's tokens, type and nav, and changes only what a reference
   document needs that an essay does not:

     - a contents rail that stays put and marks where you are
     - room for full-width screenshots, since half the answers here are a
       picture of the actual screen
     - callouts, a table, and headings that are link targets

   The rail is a real <nav> of anchors. It works with JavaScript switched
   off, degrades to a plain list on a narrow screen, and the highlighting is
   the only part that needs script. */

.gp {
  background: var(--bg);
  padding: calc(var(--nh) + 40px) 0 0;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.gp-head { max-width: 820px; margin: 0 auto 8px; }
.gp-crumb { font-size: 13px; color: var(--text-3); margin-bottom: 26px; }
.gp-crumb a { color: var(--text-3); text-decoration: none; }
.gp-crumb a:hover { color: var(--text); }
.gp-crumb-sep { color: #D8D9E4; margin: 0 8px; }

.gp-kicker {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-dark); background: var(--teal-light);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
}
.gp-h {
  font-family: var(--fh); font-size: clamp(32px, 4.4vw, 52px); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.02em; color: var(--text); margin: 0 0 20px;
}
.gp-standfirst {
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: var(--text-2);
  margin: 0 0 26px; max-width: 40em;
}
.gp-meta {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  font-size: 13px; color: var(--text-3);
  padding-bottom: 34px; border-bottom: 1px solid #EDEEF4; margin-bottom: 0;
}
.gp-meta b { color: var(--text-2); font-weight: 600; }

/* ── The opener ────────────────────────────────────────────────────────── */

/* The life update, which is not one of the numbered sections and should not
   read as one. It sits above the contents rail on the same measure as the
   standfirst, so the guide proper starts at "1. Why we left". */
.gp-intro { max-width: 820px; margin: 0 auto; padding: 34px 0 4px; }
.gp-intro p {
  font-size: 16.5px; line-height: 1.78; color: #3F4152; margin: 0 0 20px; max-width: 44em;
}

/* ── Two columns: rail, then article ───────────────────────────────────── */

.gp-cols {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px; align-items: start; padding: 44px 0 96px;
}

.gp-rail { position: sticky; top: calc(var(--nh) + 24px); }
.gp-rail-h {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 14px;
}
.gp-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: gp; }
.gp-rail li { counter-increment: gp; }
.gp-rail a {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline;
  padding: 7px 0 7px 12px; font-size: 13.5px; line-height: 1.4;
  color: var(--text-3); text-decoration: none;
  border-left: 2px solid #EDEEF4; transition: color .15s, border-color .15s;
}
.gp-rail a::before { content: counter(gp) '.'; font-variant-numeric: tabular-nums; }
.gp-rail a:hover { color: var(--text); }
/* Set by guide.js as the reader moves. Not a :target rule, because a heading
   scrolled past is still the section you are in and :target would disagree. */
.gp-rail a.is-here { color: var(--text); font-weight: 600; border-left-color: var(--teal); }

.gp-body { max-width: 760px; min-width: 0; }

/* ── Prose ─────────────────────────────────────────────────────────────── */

/* Section openings.
   The number was set inline as "1. Why we left", which is how a manual is
   numbered rather than how an article is. It is its own element now, big and
   light behind the title, so a section reads as a chapter opening and the eye
   has somewhere to land when scrolling. */
.gp-body h2 {
  font-family: var(--fh); font-size: clamp(25px, 2.7vw, 33px); font-weight: 700;
  letter-spacing: -0.02em; color: var(--text); line-height: 1.2;
  margin: 0 0 22px; scroll-margin-top: calc(var(--nh) + 24px);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px;
}
.gp-num {
  font-family: var(--fh); font-size: clamp(30px, 3.4vw, 42px); font-weight: 800;
  line-height: 1; color: var(--teal); opacity: .5;
  font-variant-numeric: tabular-nums;
  padding-right: 16px; border-right: 2px solid var(--teal-light);
}

/* Between sections. A plain hairline all the way across read as a page break
   in a spec. This is a short rule with the house mark centred on it. */
.gp-sec + .gp-sec { margin-top: 60px; padding-top: 56px; position: relative; }
.gp-sec + .gp-sec::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%;
  height: 1px; background: #EDEEF4;
}
.gp-sec + .gp-sec::after {
  content: ''; position: absolute; top: -4px; left: 50%; margin-left: -4px;
  width: 8px; height: 8px; background: var(--teal); border-radius: 2px;
  transform: rotate(45deg); box-shadow: 0 0 0 5px var(--bg);
}
.gp-body h3 {
  font-family: var(--fh); font-size: 18px; font-weight: 700; color: var(--text);
  margin: 40px 0 12px; scroll-margin-top: calc(var(--nh) + 24px);
}
.gp-body p, .gp-body li {
  font-size: 16.5px; line-height: 1.78; color: #3F4152; margin: 0 0 20px;
}
.gp-body ul { margin: 0 0 20px; padding-left: 22px; }
.gp-body li { margin-bottom: 9px; list-style: disc; }
.gp-body strong { color: var(--text); font-weight: 650; }
.gp-body a { color: var(--teal-dark); text-decoration: none; border-bottom: 1px solid rgba(20,199,176,.4); }
.gp-body a:hover { border-bottom-color: var(--teal-dark); }
.gp-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em;
  background: var(--card-2); border: 1px solid #EDEEF4; border-radius: 5px; padding: 1px 6px;
}
.gp-body code a { border-bottom: none; }

/* ── Screenshots ───────────────────────────────────────────────────────── */

/* Deliberately allowed past the 760px measure. A screenshot of a whole page
   shrunk into a column of body text is a picture of a page, not a picture of
   where the button is.

   Each one sits on a tinted mat rather than floating on the page background.
   Thirteen white screenshots on white, separated only by a hairline, was most
   of why the post read as a wall: nothing marked where the prose stopped and
   the evidence started. */
.gp-fig {
  margin: 34px 0 36px; padding: 18px; border-radius: 16px;
  background: linear-gradient(160deg, var(--teal-light) 0%, var(--card-2) 65%);
  border: 1px solid #EDEEF4;
}
.gp-fig img {
  display: block; width: 100%; height: auto; border-radius: 9px;
  border: 1px solid rgba(20,32,60,.09); box-shadow: var(--neu-md); background: #fff;
}
.gp-fig figcaption {
  font-size: 13px; line-height: 1.6; color: var(--text-2); margin-top: 14px;
  padding-left: 20px; position: relative;
}
/* The label on a screenshot that is still a render rather than a real one.
   Its own line under the caption, quiet but not hidden: the point is that
   nobody reads Ocho The Octopus's invented bookings as real numbers. Added
   and removed by scripts/guide-images.mjs, never by hand. */
.gp-genmark {
  display: block; margin-top: 5px; font-size: 12px; line-height: 1.5;
  color: var(--text-3); font-style: italic;
}

/* A small mark rather than an italic, which at 13px just looks like a mistake. */
.gp-fig figcaption::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 8px; height: 2px; border-radius: 1px; background: var(--teal);
}
/* A post whose pictures are screenshots somebody took on their phone.
 *
 * .gp-fig img above is width:100%, which is right for the rendered 1600x1056
 * images the system guide uses and wrong for anything portrait. A screenshot
 * off a phone is captured at two or three times its logical size, so a normal
 * 390pt screen arrives as a 780px wide, 2226px tall file. Stretched to the
 * 760px column that is a picture over two thousand pixels tall, which is not a
 * layout problem so much as a page somebody gives up scrolling through.
 *
 * Capped by height rather than width, because height is the thing that runs
 * away and because it only binds on the tall ones: a laptop screenshot is
 * nowhere near the cap and fills the column exactly as it does today. Width
 * follows, so a phone shot lands at about phone size and centres.
 *
 * Scoped rather than applied to .gp-fig everywhere. The system guide's pictures
 * are already sized for that column and some of them are real screenshots whose
 * dimensions are whatever somebody uploaded, so changing the rule underneath a
 * published post is a change nobody would be looking at. */
.gp-shots .gp-fig img {
  width: auto; max-width: 100%; max-height: 760px;
  margin-left: auto; margin-right: auto;
}

/* The same control shown on a laptop and on a phone.
   These were side by side to begin with, which was wrong twice over: the
   desktop bar is a wide thin strip that becomes unreadable at half width,
   and the phone shot is tall enough to set the row height and leave the
   other column mostly empty. Stacked, each one gets the shape it wants. */
.gp-fig--two img + img { margin-top: 16px; }
.gp-fig--two img.is-phone {
  max-width: 300px; max-height: 470px; width: auto;
  margin-left: auto; margin-right: auto;
}

/* ── Read progress ─────────────────────────────────────────────────────── */

/* A long post with no sense of its own length is a scrollbar and a guess.
   Sits under the nav rather than at the very top, so it never competes with
   the bar for the same two pixels. */
.gp-progress {
  position: fixed; top: var(--nh); left: 0; height: 3px; width: 100%;
  z-index: 60; pointer-events: none; background: transparent;
}
.gp-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
  transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce) {
  .gp-progress span { transition: none; }
}

/* ── The opener's first line ───────────────────────────────────────────── */

/* The first paragraph set larger, as a lede.
   This was a drop cap, which was the wrong ornament for this sentence: it
   opens on "It's", and a capital I as a drop cap in a sans face is a plain
   vertical stroke. It read as a stray rule rather than as a letter. Size
   does the same job here and does not depend on which letter comes first. */
.gp-intro > p:first-child {
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.62;
  color: var(--text-2); margin-bottom: 24px;
}

/* ── Before and after, on the money ────────────────────────────────────── */

/* The cost is the most quoted thing in the post and it was three figures
   buried in a paragraph. Same numbers, arranged so they can be taken in at
   a glance and screenshotted by somebody else. */
.gp-cost {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch;
  margin: 32px 0 34px;
}
.gp-cost-col {
  border: 1px solid #EDEEF4; border-radius: 14px; padding: 22px 24px; background: var(--card-2);
}
.gp-cost-col--after {
  background: var(--teal-light); border-color: rgba(20,199,176,.3);
}
.gp-cost-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.gp-cost-col--after .gp-cost-lbl { color: var(--teal-dark); }
.gp-cost-fig {
  font-family: var(--fh); font-size: clamp(30px, 3.6vw, 40px); font-weight: 800;
  line-height: 1; letter-spacing: -0.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.gp-cost-sub { font-size: 13px; color: var(--text-3); margin-top: 6px; }

/* Two years inside the left card, because the number was still climbing and
   one figure hid that. The arrow between them is the same mark as the one
   between the cards, one scale down: this is the trend, that is the outcome. */
.gp-cost-years {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start;
}
/* start, not center: the 2026 column is taller because it is labelled as a
   projection, and centring both dropped the 2025 heading below the 2026 one. */
.gp-cost-to { align-self: center; }
.gp-cost-yr {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-3);
  margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
/* Smaller than a lone figure. Two of these side by side in a half-width card
   at the full size wrap mid-number. */
.gp-cost-years .gp-cost-fig { font-size: clamp(23px, 2.5vw, 29px); }
.gp-cost-years .gp-cost-sub { font-size: 11px; margin-top: 4px; }
.gp-cost-to { color: var(--teal); font-size: 16px; font-weight: 700; }

.gp-cost-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(20,32,60,.08);
}
/* The eyebrow now draws the rule that used to sit on the list. Scoped to
   .gp-cost so it outranks `.gp-cost ul`, which is the same specificity and
   is declared later, so it was winning and drawing a second rule. */
.gp-cost .gp-cost-eyebrow + ul { margin-top: 10px; padding-top: 0; border-top: none; }
.gp-cost ul { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(20,32,60,.08); }
.gp-cost li {
  list-style: none; margin: 0 0 7px; padding: 0; display: flex; justify-content: space-between;
  gap: 14px; font-size: 14px; line-height: 1.5; color: var(--text-2);
}
.gp-cost li b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-cost-arrow {
  align-self: center; font-size: 22px; color: var(--teal); font-weight: 700;
}

/* ── The three ways to pay ─────────────────────────────────────────────── */

/* Three parallel options read as three parallel things. As stacked
   paragraphs the third one looked like a consequence of the second.

   Rows, not columns. Three columns inside a 760px measure gave each option
   about 230px, which set the prose ten words to a line and made the credits
   card, which has two paragraphs, twice the height of the other two with the
   dead space to prove it. A row per option lets each one be as long as it is. */
.gp-ways { display: grid; gap: 14px; margin: 28px 0 32px; counter-reset: way; }
.gp-way {
  counter-increment: way;
  display: grid; grid-template-columns: 190px 1fr; gap: 0 26px; align-items: start;
  border: 1px solid #EDEEF4; border-radius: 14px; padding: 22px 24px; background: var(--card-2);
}
.gp-way-h {
  font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--text);
  line-height: 1.35; margin: 0; padding-left: 30px; position: relative;
}
.gp-way-h::before {
  content: counter(way); position: absolute; left: 0; top: -1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--teal); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 21px; text-align: center;
}
/* Every paragraph belongs in the second column. Without this, auto-placement
   drops the second paragraph of a two-paragraph option back under the title,
   because the title only occupies the first cell of the first row. */
.gp-way > p { grid-column: 2; }
.gp-way p { font-size: 15.5px; line-height: 1.7; margin: 0 0 12px; }
.gp-way p:last-child { margin-bottom: 0; }

/* ── Callout ───────────────────────────────────────────────────────────── */

.gp-note {
  background: var(--card-2); border: 1px solid #EDEEF4; border-left: 3px solid var(--teal);
  border-radius: 10px; padding: 18px 22px; margin: 28px 0;
}
.gp-note p:last-child { margin-bottom: 0; }
.gp-note-h {
  font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--text);
  margin: 0 0 8px;
}

/* ── Table ─────────────────────────────────────────────────────────────── */

/* Its own scroller. Four columns of policy do not fit a phone, and a page
   that scrolls sideways as a whole is worse than a table that does. */
.gp-tablewrap { overflow-x: auto; margin: 26px 0 30px; -webkit-overflow-scrolling: touch; }
.gp-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.gp-table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 16px 10px 0; border-bottom: 1px solid #E7E8F0;
}
.gp-table td {
  padding: 14px 16px 14px 0; border-bottom: 1px solid #F1F2F7;
  color: #3F4152; line-height: 1.6; vertical-align: top;
}
.gp-table tr:last-child td { border-bottom: none; }
.gp-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }

/* ── Foot of the article ───────────────────────────────────────────────── */

.gp-end {
  margin-top: 72px; padding: 30px 32px; border-radius: 14px;
  background: var(--teal-light); border: 1px solid rgba(20,199,176,.25);
}
.gp-end h2 { font-size: 21px; margin-bottom: 10px; }
.gp-end p { margin-bottom: 18px; }
.gp-end .btn-dark {
  display: inline-block; background: var(--text); color: #fff; font-size: 14px;
  font-weight: 600; padding: 12px 22px; border-radius: 9px; text-decoration: none;
  border-bottom: none;
}
.gp-end .btn-dark:hover { background: #000; border-bottom: none; }

/* Into the shop, from the top of the post and again at the end.
 *
 * This post is an advert for a shop and the only way into it from here was a
 * link inside a sentence in the standfirst. Somebody sold by the first
 * paragraph had to go back up to the nav and find it themselves.
 *
 * Two of them rather than one, because readers split into the ones who are
 * already convinced and the ones who read the whole thing first, and a button
 * in either position alone only catches one of those.
 *
 * A flex row so a second, quieter button can sit beside the first and wrap
 * under it on a phone instead of being squeezed. The border-bottom reset is
 * for .gp-body a, which underlines prose links and would otherwise draw a line
 * under a pill. */
.gp-go {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 26px;
}
/* .gp-body a above paints prose links teal and underlines them, and it
   out-specifies .btn-primary's own white, so a button dropped inside the
   article came out teal text on a teal pill. Two classes here to win that,
   rather than !important. */
.gp-go .btn, .gp-go .btn-dark,
.gp-go .btn:hover, .gp-go .btn-dark:hover { color: #fff; border-bottom: none; }
.gp-end .gp-go { margin-top: 18px; }

/* ── Narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .gp-cols { grid-template-columns: 1fr; gap: 0; padding-top: 32px; }
  /* Unstuck and folded shut. A contents list that pins itself to the top of a
     phone screen is a contents list sitting on top of the thing it indexes. */
  .gp-rail {
    position: static; margin-bottom: 40px;
    border: 1px solid #EDEEF4; border-radius: 12px; padding: 18px 20px;
    background: var(--card-2);
  }
  .gp-rail a { border-left: none; padding-left: 0; }
  .gp-rail a.is-here { border-left: none; }
}

@media (max-width: 820px) {
  /* Before and after stack, and the arrow turns to point down the page
     rather than across a row that no longer exists. */
  .gp-cost { grid-template-columns: 1fr; gap: 14px; }
  /* The two years stay side by side even here: they are short, and
     stacking them loses the comparison that is the whole point. */
  .gp-cost-years { gap: 8px; }
  .gp-cost-arrow { transform: rotate(90deg); justify-self: center; }
  /* The title column collapses onto its own line rather than squeezing
     a three-word heading into 190px that is no longer there. */
  .gp-way { grid-template-columns: 1fr; gap: 12px; }
  .gp-way > p { grid-column: 1; }
}

@media (max-width: 640px) {
  .gp { padding-top: calc(var(--nh) + 22px); }
  .gp-fig { padding: 12px; border-radius: 13px; }
  /* The number stops being a column beside the title and becomes a line
     above it, so a long heading is not squeezed into what is left. */
  .gp-body h2 { grid-template-columns: 1fr; gap: 10px; }
  .gp-num {
    border-right: none; padding-right: 0; padding-bottom: 8px;
    border-bottom: 2px solid var(--teal-light); justify-self: start; min-width: 44px;
  }
  .gp-body p, .gp-body li { font-size: 16px; }
  .gp-sec + .gp-sec { margin-top: 48px; padding-top: 42px; }
  /* Nothing left to cap on a phone: the shot is already the width of the
     screen it is a picture of. */
  .gp-fig--two img.is-phone { max-width: 100%; }
  .gp-end { padding: 24px 22px; }
}