:root {
  --brand: #175C4C;
  --accent: #B98A1E;
  --bg: #FBFAF7;
  --ink: #17211E;
  --muted: #52605B;
  --radius: 0px;
  --font-display: Playfair Display, Georgia, serif;
  --font-body: Source Sans 3, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #175C4C;
    --accent: #B98A1E;
    --bg: #FBFAF7;
    --ink: #17211E;
    --muted: #52605B;
  }
}
* { box-sizing: border-box; }
/* Scroll targets for the hero button. Empty and inline, so they add a landing
   point without taking part in the layout; the offset keeps the heading clear
   of the top edge when you arrive. */
.block-anchor { display: block; height: 0; scroll-margin-top: 16px; }
/* The account page lays its cards out with a 20px flex gap, and every flex
   item — a zero-height anchor included — claims a slot. Each anchor's
   negative margin swallows exactly the extra gap, so a block that renders
   nothing (a retired type) leaves no hole, and one that renders sits one
   normal gap from its neighbour. */
.account-page > .block-anchor { margin-top: -20px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.55; }
a { color: var(--brand); }
h1, h2, h3, .display { font-family: var(--font-display); }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
/* gap matters even with space-between: Journal centers the masthead, and
   without it the brand and the nav render flush together ("JOURNAL TESTSign in"). */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 20px 24px; }
.masthead .site-name { font-family: var(--font-display); font-weight: 700; font-size: 26px; }
.masthead nav { display: flex; align-items: center; gap: 20px; }
/* Language switcher: a <details> dropdown so the masthead stays one word wide
   however many languages the site publishes. The panel paints its own ground,
   so its colors are fixed here at higher specificity than any template's
   masthead recoloring (e.g. Metro's light-on-dark nav links). */
.masthead details.language-switch { position: relative; font-size: 14px; }
.masthead details.language-switch summary { cursor: pointer; list-style: none; white-space: nowrap; color: var(--muted); }
.masthead details.language-switch summary::-webkit-details-marker { display: none; }
.masthead details.language-switch summary::after { content: ' \25BE'; font-size: 11px; }
.template-metro .masthead details.language-switch summary { color: var(--bg); }
.masthead details.language-switch nav { position: absolute; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); border-radius: var(--radius); padding: 6px 0; min-width: 150px; box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 14%, transparent); z-index: 30; }
.masthead details.language-switch nav a, .masthead details.language-switch nav span { display: block; padding: 7px 14px; white-space: nowrap; color: var(--ink); text-align: left; }
.masthead details.language-switch nav span[aria-current] { font-weight: 700; }
.masthead details.language-switch nav a:hover { background: color-mix(in srgb, var(--muted) 14%, transparent); }
.btn { display: inline-block; border: none; cursor: pointer; text-decoration: none; text-align: center; font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 12px 26px; border-radius: var(--radius); }
.btn-primary { background: var(--brand); color: var(--bg); }
.btn-outline { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 64px 24px 48px; }
.hero h1 { font-size: 46px; line-height: 1.12; margin: 0; max-width: 720px; text-wrap: balance; }
.hero .subhead { font-size: 18px; color: var(--muted); max-width: 540px; margin: 0; }
.hero .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
/* min(240px, 100%) rather than a bare 240px: a track with a hard minimum
   cannot shrink below it, so inside a narrow parent the grid grows past the
   viewport instead of dropping to one column. That is what happened to the
   plans on checkout, where they sit inside .form-card — a flex column whose
   items default to min-width:auto — and pushed the page 196px wide at 390. */
.currency-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 auto 12px;
  max-width: 1100px;
  padding: 0 20px;
  font-size: 13px;
  color: var(--muted);
}
.currency-switch select {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--muted);
  border-radius: 6px;
  padding: 4px 8px;
}
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px; padding: 24px 24px 56px; max-width: 1080px; margin: 0 auto; min-width: 0; width: 100%; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,0.75); border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-radius: var(--radius); padding: 28px 26px; }
.plan.popular { border: 2px solid var(--brand); }
.plan .plan-name { font-weight: 700; font-size: 15px; }
.plan .plan-price { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: var(--brand); }
.plan .plan-price small { font-size: 15px; color: var(--muted); font-family: var(--font-body); font-weight: 400; }
.plan .plan-term-options { display: flex; flex-wrap: wrap; gap: 6px; }
.plan .term-chip { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent); background: transparent; color: var(--ink); cursor: pointer; }
.plan .term-chip.active { background: var(--brand); border-color: var(--brand); color: var(--bg); }
.plan .term-chip:disabled { opacity: 0.45; cursor: default; }
.plan .plan-desc { font-size: 15px; color: var(--muted); flex: 1; margin: 0; }
.plan .plan-renewal { font-size: 12.5px; color: var(--muted); border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); padding-top: 10px; margin: 0; }
/* On --ink rather than --accent: the flag is 11px bold uppercase, so it needs
   4.5:1, and an accent chosen to look good as a rule or a highlight is not
   chosen to carry small text. Broadsheet's gold measured 3.0 and Coast's 3.58.
   --ink over --bg is the page's own body pair, so it contrasts by construction
   whatever a publisher picks. */
.plan .popular-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--bg); background: var(--ink); border-radius: 999px; padding: 4px 14px; }
.plan-covers { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.plan-covers .cover { width: 64px; height: auto; border-radius: calc(var(--radius) / 2); box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 20%, transparent); }
.covers-showcase { padding: 40px 24px; max-width: 1080px; margin: 0 auto; text-align: center; }
.covers-showcase h2 { font-size: 26px; margin: 0 0 20px; }
.cover-wall { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.cover-wall .cover { width: 132px; height: auto; border-radius: calc(var(--radius) / 2); box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 22%, transparent); }
.testimonial { text-align: center; padding: 40px 24px; font-family: var(--font-display); font-size: 22px; }
.testimonial .attribution { font-family: var(--font-body); font-size: 14px; color: var(--muted); margin-top: 8px; }
.faq { max-width: 720px; margin: 0 auto; padding: 24px 24px 56px; }
.faq h2 { font-size: 26px; }
.faq dt { font-weight: 700; margin-top: 18px; }
.faq dd { margin: 6px 0 0; color: var(--muted); }
.form-card { max-width: 460px; margin: 40px auto 64px; background: rgba(255,255,255,0.8); border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-radius: var(--radius); padding: 30px 32px; display: flex; flex-direction: column; gap: 16px; }
/* Checkout: the chosen plan card, promoted to the top of the form by the
   runtime. The card is the SAME element the plans block rendered; these rules
   only restyle it for its new position. */
#checkout-chosen .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
#checkout-chosen .plan.chosen { border: 2px solid var(--ink); }
/* The Before-you-pay disclosure as the chosen card's footer: bleeds to the
   card's edges so plan and terms read as one block. */
.plan .plan-terms { margin: 8px -26px -28px; border: none; border-top: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); border-radius: 0 0 var(--radius) var(--radius); padding: 14px 26px 16px; }
#checkout-chosen .plan.chosen .plan-terms { border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); }
/* "Want a different plan?" divider and the demoted, compact plan cards. */
.switch-rule { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; }
.switch-rule::before, .switch-rule::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.form-card .plans { display: flex; flex-direction: column; padding: 0; gap: 14px; max-width: none; }
.plan.plan-other { padding: 18px 20px; }
.plan.plan-other .plan-price { font-size: 24px; }
.plan.plan-other .plan-renewal { display: none; }
.form-card h1 { font-size: 26px; margin: 0; }
/* The form itself carried no layout, so its rows stacked on whatever margins
   the browser gave them — the fields were held apart by their label line boxes
   rather than by anything deliberate. */
.form-card form { display: flex; flex-direction: column; gap: 16px; }
/* A little more air where the fields end and the decision begins: signing in,
   agreeing to terms, or paying should not read as one more input. */
.form-card .field + .btn,
.form-card .field + .consent-block,
.form-card .consent-block + .btn { margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input { border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); border-radius: calc(var(--radius) / 2); padding: 12px 14px; font-size: 15px; font-family: var(--font-body); background: transparent; color: var(--ink); }
.consent-block { display: flex; flex-direction: column; gap: 10px; }
.consent-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.consent-row input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; }
.disclosure { border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); background: color-mix(in srgb, var(--brand) 7%, var(--bg)); border-radius: var(--radius); padding: 14px 16px; font-size: 13.5px; }
.disclosure .disclosure-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.site-footer { padding: 32px 24px; display: flex; flex-direction: column; gap: 14px; }
.site-footer .links { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; font-size: 13px; }
.site-footer .links a { color: var(--muted); text-decoration: none; }
.site-footer .colophon { text-align: center; font-size: 12.5px; color: var(--muted); }
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ink); color: var(--bg); padding: 16px 24px; display: none; align-items: center; gap: 22px; }
.cookie-banner.visible { display: flex; }
.cookie-banner p { flex: 1; margin: 0; font-size: 13.5px; }
.cookie-banner .cookie-actions { display: flex; gap: 12px; flex-shrink: 0; }
/* Deliberately equal weight: accepting must never be more prominent than declining. */
.cookie-banner button { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--bg); border: none; border-radius: calc(var(--radius) / 2); padding: 9px 16px; cursor: pointer; }
.account-section { max-width: 640px; margin: 40px auto 64px; padding: 0 24px; display: flex; flex-direction: column; gap: 18px; }
.account-block h2 { font-size: 18px; margin: 0 0 10px; }

/* ---- Your account (rebuilt 2026-08-31) ------------------------------------
   Everything themes from the same tokens every template defines. Two hues are
   deliberately FIXED, never the theme accent: the danger red (Delete must not
   turn brand-green on Broadsheet) and the expiry ambers/reds. */
.account-page { max-width: 720px; margin: 36px auto 48px; padding: 0 16px; display: flex; flex-direction: column; gap: 20px; }
/* The contact card as a standalone block: same centred column the account
   page gives it, since a bare section would run edge-to-edge. */
.contact-block { max-width: 720px; margin: 36px auto; padding: 0 16px; }
.account-page h1 { font-family: var(--font-display); font-size: 30px; margin: 0; }
.account-card { background: rgba(255,255,255,0.8); border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-radius: var(--radius); padding: 24px 26px; }
.account-card h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 14px; }
.group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 2px 0 10px; }
.group-label-divided { margin-top: 20px; border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); padding-top: 16px; }

/* Library: cover grid */
.read-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
.read-item { text-decoration: none; color: var(--ink); display: block; }
.read-cover { aspect-ratio: 3 / 4; background: color-mix(in srgb, var(--muted) 18%, transparent); border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-radius: calc(var(--radius) / 2); box-shadow: 0 2px 6px rgba(0,0,0,0.12); overflow: hidden; display: flex; align-items: flex-end; }
.read-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.read-item .read-label { font-size: 12.5px; font-weight: 600; margin-top: 7px; line-height: 1.3; }
.read-item .read-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; padding: 1px 7px; margin-top: 5px; }
.badge-unavail { color: #8a5a00; border-color: #d9a021; background: #fdf6e3; }
.read-item.unavail { cursor: default; position: relative; }
.read-item.unavail .read-cover { filter: grayscale(1); opacity: 0.55; }
.unavail-tip { display: none; position: absolute; left: 50%; bottom: calc(100% - 8px); transform: translateX(-50%); width: 210px; background: var(--ink); color: var(--bg); font-size: 11.5px; line-height: 1.45; padding: 10px 12px; border-radius: 6px; z-index: 20; box-shadow: 0 4px 14px rgba(0,0,0,0.25); text-align: left; }
.unavail-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); }
.unavail-tip a { color: #ffd9a0; font-weight: 600; }
.read-item.unavail:hover .unavail-tip, .read-item.unavail.tip-open .unavail-tip { display: block; }

/* Credits: pots */
.pot { border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.pot-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.pot-n { display: flex; flex-direction: column; align-items: center; min-width: 48px; text-align: center; }
.pot-n .pot-count { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--brand); line-height: 1; }
.pot-n small { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.pot-what { flex: 1; min-width: 0; }
.pot-what b { font-size: 14px; }
.pot-scope { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pot.expired-pot { background: color-mix(in srgb, var(--muted) 8%, transparent); opacity: 0.88; }
.pot.expired-pot .pot-count { color: var(--muted); text-decoration: line-through; }
.expiry-pill { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; margin-top: 5px; color: var(--muted); border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); }
.expiry-pill.soon { color: #8a5a00; border-color: #d9a021; background: #fdf6e3; }
.expiry-pill.urgent { color: #a4260f; border-color: #c0392b; background: #fdecea; }
.expiry-pill.gone { color: #a4260f; border-color: #c0392b; }

.pot-panel { border-top: 1px dashed color-mix(in srgb, var(--muted) 30%, transparent); padding: 16px; display: none; }
.pot-panel.open { display: block; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.picker-head b { font-family: var(--font-display); font-size: 16px; }
.goto-date { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.goto-date input { border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); padding: 7px 9px; font-size: 13px; background: var(--bg); color: var(--ink); font-family: var(--font-body); border-radius: calc(var(--radius) / 2); }
.remaining { font-size: 12.5px; color: var(--muted); }
.back-latest { background: none; border: none; color: var(--brand); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0 0 12px; display: none; }
.back-latest.visible { display: block; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px; }
.pick { border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-radius: calc(var(--radius) / 2); padding: 10px; }
.pick .read-cover { margin-bottom: 8px; }
.pick .pick-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.pick .pick-date { font-size: 11.5px; color: var(--muted); margin: 2px 0 8px; }
.pick .btn { width: 100%; padding: 8px 0; font-size: 12.5px; }
.load-more { display: block; margin: 18px auto 0; background: none; border: 1.5px solid color-mix(in srgb, var(--muted) 35%, transparent); color: var(--muted); padding: 9px 22px; font-size: 13px; cursor: pointer; border-radius: calc(var(--radius) / 2); }

/* Ledgers and payment histories */
.hline { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.hline a { color: var(--brand); }
.hline .when { color: var(--muted); white-space: nowrap; }
.hline.buy span:first-child { font-weight: 600; }
.hline.lossline span:first-child { color: #a4260f; font-weight: 600; }
.more-list { max-height: 180px; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); border-radius: calc(var(--radius) / 2); padding: 4px 10px; margin-top: 6px; display: none; }
.more-list.open { display: block; }
.show-all { background: none; border: none; color: var(--brand); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 0 0; text-align: left; white-space: nowrap; }

/* Subscription cards */
.sub-card { border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; }
.sub-card .sub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sub-card .sub-head b { font-size: 15px; }
.sub-pill { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; }
.sub-pill.active { color: var(--brand); border: 1px solid var(--brand); }
.sub-pill.cancelled { color: #a3591e; border: 1px solid #a3591e; }
.sub-pill.expired-pill { color: var(--muted); border: 1px solid var(--muted); }
.sub-pill.expires { color: #8a5a00; border: 1px solid #d9a021; background: #fdf6e3; }
.sub-card.past { background: color-mix(in srgb, var(--muted) 8%, transparent); opacity: 0.85; }
.sub-card .sub-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.sub-card .sub-actions { margin-top: 10px; }
.sub-history { border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); margin-top: 12px; padding-top: 10px; }

/* Settings */
.setting { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
.setting:last-of-type { border-bottom: none; }
.setting .what { flex: 1; min-width: 0; }
.setting .what b { font-size: 14px; }
.setting-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.setting-form { display: none; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--muted) 35%, transparent); border-radius: calc(var(--radius) / 2); margin: 0 0 12px; }
.setting-form.open { display: block; }
.setting-form label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 5px; }
.setting-form label:first-child { margin-top: 0; }
.setting-form input { width: 100%; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); padding: 10px 11px; font-size: 14px; background: var(--bg); color: var(--ink); border-radius: calc(var(--radius) / 2); }
.setting-form .btn { margin-top: 12px; }
.setting-form-danger { border-color: #c0392b; }
.switch { position: relative; width: 42px; height: 24px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 999px; transition: background 0.15s; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* Danger: a FIXED blood red on every template, deeper than any brand red. */
.danger-text { color: #a4260f; }
.btn.danger { background: #8f1f10; color: #fff; border: none; }
.btn.danger:hover { background: #6d1607; }

/* Contact us */
.contact-grid { display: flex; flex-direction: column; }
.contact-cell { display: flex; gap: 16px; align-items: baseline; font-size: 13.5px; line-height: 1.55; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
.contact-cell:last-child { border-bottom: none; }
.contact-cell b { flex: none; width: 96px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.contact-cell .val { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.contact-cell a { color: var(--brand); font-weight: 600; }
.access-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.access-list li { border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); padding: 11px 2px; font-size: 15px; }
.access-list li:first-child { border-top: none; }
.access-list a { color: var(--brand); text-decoration: none; font-weight: 600; }
.access-list a:hover { text-decoration: underline; }
.notice { text-align: center; color: var(--muted); font-size: 14px; padding: 8px 24px; }
/* Failure notices sit at the TOP of their form and must be unmissable. The
   red is a fixed error hue, not the theme accent — an error must not turn
   brand-green on Broadsheet — mixed with the theme's own ground so it holds
   in dark mode too. */
.notice-error { text-align: left; color: var(--ink); font-size: 14px; font-weight: 600; background: color-mix(in srgb, #c0392b 12%, var(--bg)); border: 1px solid color-mix(in srgb, #c0392b 50%, transparent); border-left: 4px solid #c0392b; border-radius: var(--radius); padding: 12px 14px; margin: 0 0 4px; }

/* ---- Template treatments ---- */
.template-broadsheet .masthead { border-bottom: 3px double var(--brand); }
.template-broadsheet .site-name { font-weight: 900; }
.template-metro .masthead { background: var(--ink); color: var(--bg); }
/* The nav links keep .masthead nav a's --muted otherwise, which is a mid grey
   meant for a light ground — 2.39:1 against Metro's near-black masthead. */
.template-metro .masthead nav a { color: var(--bg); }
.template-metro .masthead .site-name { color: var(--bg); text-transform: uppercase; letter-spacing: 0.02em; font-family: var(--font-body); font-weight: 800; }
.template-metro .hero h1 { font-family: var(--font-body); font-weight: 800; }
.template-metro .plan { border-radius: 0; border-top-width: 3px; border-top-color: var(--ink); }
.template-metro .plan.popular { border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); border-top: 3px solid var(--brand); }
/* Journal's masthead is a centred wordmark — but the WORDMARK, not the whole
   row: with the nav in the same flex line, brand + Sign in + Subscribe +
   language clumped together mid-header. The nav floats to the right edge,
   leaving the name alone in the centre; on narrow screens, where the two
   would collide, it falls back to the standard left/right split. */
.template-journal .masthead { position: relative; justify-content: center; border-bottom: 1px solid var(--ink); }
.template-journal .masthead > nav { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .template-journal .masthead { justify-content: space-between; }
  .template-journal .masthead > nav { position: static; transform: none; }
}
.template-journal .site-name { font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; }
.template-journal .plan { border: none; border-top: 1px solid color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 0; background: transparent; }
.template-journal .plan.popular { border: none; border-top: 2px solid var(--ink); }
.template-coast .plan { box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 8%, transparent); border: none; }
.template-coast .plan.popular { background: var(--brand); }
/* Coast inverts the popular plan onto the brand colour, so everything on it
   has to be re-coloured — including the <small> inside the price, which keeps
   var(--muted) otherwise and lands at about 1.3:1 against the dark green. That
   is the billing period, the qualifier that says whether £16.99 is a month or a
   year, rendered all but invisible. */
.template-coast .plan.popular .plan-name, .template-coast .plan.popular .plan-price, .template-coast .plan.popular .plan-price small, .template-coast .plan.popular .plan-desc, .template-coast .plan.popular .plan-renewal { color: var(--bg); }

/* ---- Narrow screens ----
   The stylesheet had no width breakpoints at all, so a phone got the desktop
   rules at a third of the width: a masthead whose wordmark broke across three
   lines with "Sign in" split in two beside it, and a cookie banner that kept
   its row layout, squeezing the notice into a column a few words wide next to
   the buttons. Everything else was already fluid and needed nothing. */
@media (max-width: 640px) {
  .masthead { padding: 14px 16px; gap: 12px; }
  /* The wordmark wraps onto a second line rather than being cut short: a
     masthead reading "JAMIE DEMO..." looks broken in a way two tidy lines do
     not, and it is the publisher's name. What must NOT wrap is the nav beside
     it — "Sign in" splitting across two lines was half the original mess. */
  .masthead .site-name { font-size: 19px; line-height: 1.15; min-width: 0; }
  .masthead nav { gap: 12px; flex-shrink: 0; }
  .masthead nav a, .masthead nav .btn { white-space: nowrap; }

  .hero { padding: 40px 20px 32px; }
  .hero h1 { font-size: 32px; }
  .hero .subhead { font-size: 16px; }

  .plans { padding: 0 16px 32px; }
  .form-card { margin: 24px 16px 48px; padding: 22px 20px; }
  .form-card h1 { font-size: 22px; }
  .account-section { margin: 24px auto 48px; padding: 0 16px; }
  .testimonial { font-size: 19px; padding: 32px 20px; }
  .covers-showcase { padding: 32px 16px; }
  .faq { padding: 20px 16px 40px; }

  .site-footer { padding: 28px 16px; }
  .site-footer .links { gap: 12px 18px; }

  /* Stacked, so the notice reads as a sentence and the buttons sit under it
     at a full tap target rather than being crushed against it. */
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .cookie-banner .cookie-actions { display: flex; gap: 10px; }
  .cookie-banner button { flex: 1; padding: 11px 14px; }
}