/* ==========================================================================
   Thurloe Bancroft — styles.css

   Contents
   1.  Fonts
   2.  Tokens (colour, type, spacing)
   3.  Reset and base elements
   4.  Layout helpers (.wrap, .section, grids)
   5.  Typography (labels, headings, body, links)
   6.  Header and navigation
   7.  Hero
   8.  What We Do — three columns
   9.  The Thurloe Index — monthly figure block
   10. Coverage — region list
   11. Methodology
   12. Enquiries — contact list
   13. Footer
   14. Legal pages (title block, contents, sections, tables, callouts)
   15. The Thurloe Index page (release block, metrics, definitions)
   16. Buttons
   17. Breadcrumbs
   18. The Openings Report page (sample record)
   19. Release pages (index-releases/) and the archive
   20. Cookie consent banner (disabled by default)
   21. Motion
   22. Print

   Editing notes
   - Colours, type sizes and section spacing are all defined once in §2.
     Change them there rather than in individual rules.
   - Section dividers are 1px hairlines, not background changes. The only
     tinted panels are the Thurloe Index figure block (§9) and the removal
     -request callouts on the legal pages (§14).
   ========================================================================== */


/* ==========================================================================
   1. FONTS
   Self-hosted, latin subset, variable weight. Nothing is loaded from a CDN.
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-latin-var.woff2') format('woff2-variations'),
       url('fonts/playfair-display-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-var.woff2') format('woff2-variations'),
       url('fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   2. TOKENS
   ========================================================================== */

:root {
  /* Colour — the accent is the exact slate of the wordmark block */
  --paper:        #FDFDFC;
  --ink:          #17191B;
  --ink-muted:    #4C5256;   /* body prose on paper: contrast 8.0:1 */
  --accent:       #1D4355;   /* contrast on paper 10.1:1 */
  --accent-dark:  #16333F;   /* button hover only */
  --accent-rule:  rgba(29, 67, 85, 0.16);
  --accent-rule-strong: rgba(29, 67, 85, 0.32);
  --accent-wash:  #F1F4F5;   /* the Index panel, the only filled area */

  /* Type */
  --serif: 'Playfair Display', 'Iowan Old Style', 'Times New Roman', Times, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-body:      1.0625rem;                               /* 17px */
  --fs-lede:      1.1875rem;                               /* 19px */
  --fs-label:     0.6875rem;                               /* 11px */
  --fs-h1:        clamp(2rem, 1.25rem + 3.1vw, 3.5rem);
  --fs-h2:        clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  --fs-h3:        1.25rem;
  --fs-figure:    clamp(3.5rem, 2rem + 7vw, 6.5rem);

  --lh-body:      1.65;
  --measure:      68ch;      /* body copy stays at 65–75 characters */

  /* Space */
  --gutter:       1.5rem;
  --wrap-max:     1100px;
  --section-y:    clamp(4.5rem, 9vw, 8.5rem);
}

@media (min-width: 48em) {
  :root {
    --gutter: 2.5rem;
    --fs-body: 1.125rem;                                   /* 18px */
    --fs-lede: 1.3125rem;
    --fs-h3: 1.3125rem;
  }
}

@media (min-width: 75em) {
  :root { --gutter: 3.5rem; }
}


/* ==========================================================================
   3. RESET AND BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;   /* clears the sticky header on anchor jumps */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;           /* nothing should scroll sideways at any width */
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Focus: visible, accent, never removed */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Each section is separated by a hairline, never by a change of background. */
.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--accent-rule);
}

/* Label in a narrow left column, everything else in the reading column.
   Single column until there is room for the split. */
.section__grid { display: block; }

.section__body > * + * { margin-top: 1.5rem; }

@media (min-width: 62em) {
  .section__grid {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .section__label { padding-top: 0.55rem; }   /* optically aligns to the h2 */
}


/* ==========================================================================
   5. TYPOGRAPHY
   ========================================================================== */

/* Letter-spaced uppercase label, accent, used for every section marker */
.label {
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.75rem;
}

.section__label { margin-bottom: 1.25rem; }

h1 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: 1.14;
  letter-spacing: -0.012em;
  max-width: 21ch;
}

h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  line-height: 1.22;
  letter-spacing: -0.008em;
  max-width: 24ch;
}

h3 {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
}

.prose > * + * { margin-top: 1.25rem; }
.prose p,
.column p,
.contact__note,
.coverage__note,
.index-press { color: var(--ink-muted); max-width: var(--measure); }

/* Links in body copy: accent, hairline underline, no colour change on hover */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--accent-rule-strong);
  transition: text-decoration-color 160ms ease;
}
a:hover { text-decoration-color: var(--accent); }


/* ==========================================================================
   6. HEADER AND NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--accent-rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

@media (min-width: 48em) {
  .site-header__inner { min-height: 5.5rem; }
}

.site-header__mark { display: block; text-decoration: none; padding-block: 0.5rem; }
.site-header__mark img { width: auto; height: 2rem; }

@media (min-width: 48em) {
  .site-header__mark img { height: 2.5rem; }
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;              /* 44px tap target */
  padding: 0 0.6rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.site-nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Below 62em the header carries the wordmark and Enquiries only —
   no hamburger, no overlay, nothing to open or close. */
.site-nav__wide { display: none; }

@media (min-width: 62em) {
  .site-nav__wide { display: block; }
  .site-nav ul { gap: 1rem; }
  .site-nav a { padding: 0 0.15rem; }
}


/* ==========================================================================
   7. HERO
   A quiet band of space. No image, no button, no full-viewport height.
   ========================================================================== */

.hero {
  padding-block: clamp(4rem, 11vw, 9.5rem) clamp(4rem, 9vw, 8rem);
}

.hero .label { margin-bottom: 2rem; }

.hero__support {
  margin-top: 2rem;
  max-width: 54ch;
  color: var(--ink-muted);
  font-size: var(--fs-lede);
  line-height: 1.6;
}


/* ==========================================================================
   8. WHAT WE DO
   Three blocks divided by a hairline above each, not by cards.
   ========================================================================== */

.section__body > .columns {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
}

/* Three across only when each column can still hold a comfortable measure. */
@media (min-width: 56em) {
  .section__body > .columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

.column {
  border-top: 1px solid var(--accent-rule);
  padding-top: 1.25rem;
}

.column h3 { margin-bottom: 0.75rem; }
.column p { font-size: 1rem; }


/* ==========================================================================
   9. THE THURLOE INDEX
   The monthly figure block. Editing the numeral, label, date and
   commentary in index.html is the whole monthly update.
   ========================================================================== */

.section__body > .index-figure {
  margin: 3.5rem 0 0;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--accent-wash);
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 56em) {
  .section__body > .index-figure {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 3.5rem;
  }
}

.index-figure__number {
  font-family: var(--serif);
  font-size: var(--fs-figure);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.index-figure__label {
  margin-top: 1rem;
  max-width: 26ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}

.index-figure__date {
  margin-top: 0.75rem;
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
}

.index-figure__note { margin: 0; }
.index-figure__note p {
  color: var(--ink-muted);
  font-size: 1rem;
  max-width: 46ch;
}

@media (min-width: 56em) {
  .index-figure__note {
    border-left: 1px solid var(--accent-rule);
    padding-left: 3.5rem;
  }
}

.section__body > .index-press { font-size: 1rem; margin-top: 2rem; }


/* ==========================================================================
   10. COVERAGE
   Typographic list of authorities. Specificity is the credibility.
   ========================================================================== */

.section__body > .coverage { margin-top: 3.5rem; }

.coverage__region {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--accent-rule-strong);
}

.coverage__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
}

@media (min-width: 48em) {
  .coverage__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
  .coverage__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.coverage__list li {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--accent-rule);
  font-size: 1rem;
  color: var(--ink);
}

.coverage__note { margin-top: 1.75rem; font-size: 1rem; }


/* ==========================================================================
   11. METHODOLOGY
   ========================================================================== */

#methodology .prose { margin-top: 2rem; }


/* ==========================================================================
   12. ENQUIRIES
   One quiet call to action: an address and a number.
   ========================================================================== */

.contact {
  margin: 2.5rem 0 0;
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 48em) {
  .contact {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: start;
    column-gap: 5rem;
  }
}

.contact__row { display: block; }

.contact dt {
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.contact dd { margin: 0; }

.contact dd a {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
  line-height: 1.3;
  letter-spacing: -0.005em;
  display: inline-block;
  min-height: 2.75rem;              /* 44px tap target */
  padding-top: 0.1rem;
}

.section__body .contact__note { margin-top: 2rem; font-size: 1rem; }


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--accent-rule);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.site-footer__mark {
  display: inline-block;
  text-decoration: none;
  padding-block: 0.375rem;          /* brings the tap target to 44px */
}
.site-footer__mark img { width: auto; height: 2rem; }

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}

.site-footer__nav a,
.site-footer__nav .consent-reopen {
  display: flex;
  align-items: center;
  min-height: 2.75rem;              /* 44px tap target */
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.site-footer__nav a:hover,
.site-footer__nav .consent-reopen:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--accent-rule);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* ==========================================================================
   14. LEGAL PAGES
   Shared by privacy.html, data-protection.html, cookies.html and terms.html.
   Structure of a legal page:
     .legal            the whole document
       .legal__head    title block: label, h1, last-updated line, summary
       .legal__grid    contents list + body (two columns from 62em)
         .legal-toc    contents; sticky on desktop, a plain list on mobile
         .legal__body  the numbered sections
           .legal-section          one numbered clause with an anchor id
           .legal-callout          tinted panel, used sparingly for the
                                   removal-request instructions
           .data-table__wrap      any table; stacks on mobile, never scrolls
                                   the page sideways
       .legal-note     the "not legal advice" note at the foot
   ========================================================================== */

/* --- Title block --------------------------------------------------------- */

.legal__head {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}

.legal__head h1 {
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

.legal__updated {
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
}

.legal__intro {
  margin-top: 1.75rem;
  max-width: 58ch;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink);
}

/* --- Contents + body grid ------------------------------------------------ */

.legal__grid {
  display: block;
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.legal-toc {
  border-top: 1px solid var(--accent-rule-strong);
  padding-top: 1.25rem;
  margin-bottom: 3.5rem;
}

.legal-toc h2 { max-width: none; margin-bottom: 0.5rem; }

.legal-toc ol { counter-reset: none; }

.legal-toc a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;              /* 44px tap target */
  padding: 0.25rem 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-rule);
}

.legal-toc li:last-child a { border-bottom: 0; }
.legal-toc a:hover { color: var(--accent); }

.legal-toc__num {
  flex: 0 0 1.5rem;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 62em) {
  .legal__grid {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
  }

  /* Sticky only where there is room for it; on mobile it is simply a list
     above the text, which is the behaviour that matters most. */
  .legal-toc {
    position: sticky;
    top: 7.5rem;
    margin-bottom: 0;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
  }

  .legal-toc a { font-size: 0.875rem; min-height: 2.25rem; }
}

/* --- Sections ------------------------------------------------------------ */

.legal-section {
  border-top: 1px solid var(--accent-rule);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  scroll-margin-top: 7rem;          /* clears the sticky header on anchor jumps */
}

.legal__body > .legal-section:first-child { border-top: 0; padding-top: 0; }

.legal-section > h2 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  max-width: 26ch;
  margin-bottom: 1.5rem;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
}

.legal-section__num {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

.legal-section h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-size: var(--fs-h3);
}

.legal-section > * + *,
.legal-section .legal-block > * + * { margin-top: 1.25rem; }

.legal-section p,
.legal-section li { max-width: var(--measure); color: var(--ink-muted); }

.legal-section p strong,
.legal-section li strong { color: var(--ink); font-weight: 500; }

/* A term of art, used sparingly at first mention */
.term {
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}

/* Lists inside legal copy — hairline markers rather than bullets */
.legal-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-top: 0.75rem;
}

.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.6rem;
  height: 1px;
  background: var(--accent-rule-strong);
}

.legal-list--numbered { counter-reset: legal-item; }

.legal-list--numbered li { padding-left: 2rem; }

.legal-list--numbered li::before {
  counter-increment: legal-item;
  content: counter(legal-item) ".";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--accent);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* --- Definition rows (contact details, key facts) ------------------------ */

.legal-facts {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--accent-rule);
  padding-top: 1.5rem;
}

.legal-facts > div { display: block; }

.legal-facts dt {
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.legal-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

@media (min-width: 48em) {
  .legal-facts > div {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: baseline;
  }
  .legal-facts dt { margin-bottom: 0; }
}

/* --- Callout panel ------------------------------------------------------- */

.legal-callout {
  background: var(--accent-wash);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 2rem;
}

.legal-callout h3 { margin-top: 0; }
.legal-callout > * + * { margin-top: 1rem; }
.legal-callout p { color: var(--ink); }

/* --- Tables -------------------------------------------------------------- */

.data-table__wrap {
  margin-top: 1.75rem;
  overflow-x: auto;                 /* the table scrolls, never the page */
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
}

.data-table caption {
  text-align: left;
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.75rem;
}

.data-table th,
.data-table td {
  padding: 0.875rem 1.5rem 0.875rem 0;
  border-bottom: 1px solid var(--accent-rule);
  vertical-align: top;
}

.data-table thead th {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--accent);
  border-bottom-color: var(--accent-rule-strong);
}

.data-table tbody th {
  font-weight: 400;
  color: var(--ink);
}

.data-table td { color: var(--ink-muted); }
.data-table code {
  font-size: 0.9em;
  white-space: nowrap;   /* cookie names must never break mid-token */
}

/* Row that introduces a group of rows, e.g. a second cookie category */
.data-table__group th {
  padding-top: 2rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--ink);
  border-bottom-color: var(--accent-rule-strong);
}

/* Below 48em every table becomes a stack of labelled rows. No sideways
   scrolling, no pinching. Each cell carries its column name in data-label. */
@media (max-width: 47.99em) {
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .data-table,
  .data-table caption,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td { display: block; width: auto; }

  .data-table { width: 100%; }

  .data-table tr {
    border-top: 1px solid var(--accent-rule-strong);
    padding-block: 1.25rem;
  }

  .data-table tbody tr:first-child { border-top: 0; padding-top: 0; }

  .data-table th,
  .data-table td {
    border-bottom: 0;
    padding: 0 0 0.75rem;
  }

  .data-table tr > *:last-child { padding-bottom: 0; }

  .data-table [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.25rem;
    font-size: var(--fs-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
  }
}

/* --- Back to top, page note ---------------------------------------------- */

.back-to-top {
  margin-top: 2rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.back-to-top a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;              /* 44px tap target */
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-rule);
}

.back-to-top a:hover { border-bottom-color: var(--accent); }

/* On desktop the sticky contents list does this job, so the per-section
   links are shown only where they are useful. */
@media (min-width: 62em) {
  .back-to-top { display: none; }
}

.legal-note {
  border-top: 1px solid var(--accent-rule);
  padding-block: clamp(2rem, 4vw, 3rem);
  font-size: 0.9375rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.legal-note > * + * { margin-top: 0.75rem; }

/* Cross-links between the four legal pages */
.legal-crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.5rem;
}

.legal-crosslinks a {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-rule);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.legal-crosslinks a:hover { border-bottom-color: var(--accent); }

/* Visible placeholder for a fact that has still to be supplied */
.todo-value { font-variant-numeric: tabular-nums; }

/* Visually hidden, still read aloud */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   15. THE THURLOE INDEX PAGE
   Components used only by thurloe-index.html. The page itself is built from
   the homepage furniture (.section, .section__grid, .section__label) so that
   it reads as part of the same document; everything below is the extra
   apparatus a reference page needs.

     .dimensions   what the Index reports, one block per dimension
     .release      the sample monthly release
     .metrics      hairline-divided figures inside the release
     .share        the hairline bar in the regional table
     .definitions  the glossary
     .related      the closing set of links

   Tables on this page use the shared .data-table component in §14, which
   stacks into labelled rows below 768px.
   ========================================================================== */

/* --- What the Index reports (dimension blocks) --------------------------- */

.section__body > .dimensions,
.section__body > .detail-list { margin-top: 3rem; }

.dimensions,
.detail-list {
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 48em) {
  .dimensions,
  .detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }
}

.dimension,
.detail {
  border-top: 1px solid var(--accent-rule);
  padding-top: 1.25rem;
}

.dimension h3,
.detail h3 { margin-bottom: 0.6rem; }
.dimension p,
.detail p { color: var(--ink-muted); font-size: 1rem; max-width: 46ch; }

/* --- Sample release ------------------------------------------------------
   The whole block is switched between illustrative and real by the presence
   of the data-illustrative attribute on .release. While it is present, the
   banner and every table caption warning is shown; remove the attribute and
   all of them disappear at once. See the comments in thurloe-index.html.
   ------------------------------------------------------------------------ */

.section__body > .release { margin-top: 3rem; }

.release { border: 1px solid var(--accent-rule-strong); }

/* The illustrative banner: solid accent, so it cannot be missed and cannot
   be cropped out of a screenshot of the figures below it. */
.release__flag,
.record__flag {
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
}

.release__body {
  background: var(--accent-wash);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.release__body > * + * { margin-top: 2.5rem; }

.release__period {
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
}

.release__figure {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(3.25rem, 2rem + 6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.release__label {
  margin-top: 1rem;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

.release__change {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  font-variant-numeric: lining-nums tabular-nums;
}

.release h3 {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

/* Caption warning repeated under every table of illustrative figures */
.release__caption,
.record__caption {
  color: var(--accent);
  font-weight: 500;
}

/* The same warning as a standalone line beneath a group of figures that is
   not a table */
p.release__caption,
p.record__caption {
  margin-top: 1.25rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}

.release:not([data-illustrative]) .release__flag,
.release:not([data-illustrative]) .release__caption,
.record:not([data-illustrative]) .record__flag,
.record:not([data-illustrative]) .record__caption { display: none; }

/* Commentary line — the short written note that accompanies a release */
.release__commentary {
  border-top: 1px solid var(--accent-rule-strong);
  padding-top: 1.5rem;
}

.release__commentary p {
  color: var(--ink-muted);
  font-size: 1rem;
  max-width: 62ch;
}

.release__commentary p + p { margin-top: 0.75rem; }

/* Tables sitting inside the release panel take their rules from the tint */
.release .data-table th,
.release .data-table td { border-bottom-color: rgba(29, 67, 85, 0.14); }

/* --- Metric blocks -------------------------------------------------------- */

.metrics {
  display: grid;
  gap: 0 2.5rem;
  margin-top: 1.25rem;
}

@media (min-width: 36em) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 56em) {
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.metric {
  border-top: 1px solid var(--accent-rule-strong);
  padding: 1.1rem 0;
}

.metric__value {
  font-family: var(--serif);
  font-size: 1.875rem;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.metric__label {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink);
}

.metric__sub {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- Share-of-total bar --------------------------------------------------
   A hairline, drawn in CSS from the --share custom property set inline on
   the element. The figure is always present as text; the bar is decoration
   and is hidden from assistive technology.
   ------------------------------------------------------------------------ */

.share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.share__bar {
  position: relative;
  flex: 0 0 5rem;
  height: 2px;
  background: var(--accent-rule);
}

.share__bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--share, 0%);
  background: var(--accent);
}

/* --- Definitions ---------------------------------------------------------- */

.section__body > .definitions { margin-top: 2.5rem; }

.definitions { border-top: 1px solid var(--accent-rule-strong); }

.definitions > div {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--accent-rule);
}

.definitions dt {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.definitions dd {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

@media (min-width: 48em) {
  .definitions > div {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: baseline;
  }
  .definitions dt { margin-bottom: 0; }
}

/* --- Citation and archive ------------------------------------------------- */

.citation {
  border-left: 2px solid var(--accent);
  padding: 0.35rem 0 0.35rem 1.5rem;
  margin-top: 1.75rem;
}

.citation p {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--ink);
  max-width: none;
}

.archive {
  margin-top: 2.5rem;
  border-top: 1px solid var(--accent-rule);
  padding-top: 1.5rem;
}

.archive h3 { margin-bottom: 0.75rem; }

.archive__list li {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--accent-rule);
  font-size: 1rem;
}

/* --- Related links -------------------------------------------------------- */

.section__body > .related { margin-top: 2.5rem; }

.related { border-top: 1px solid var(--accent-rule-strong); }

.related li { border-bottom: 1px solid var(--accent-rule); }

.related a {
  display: block;
  padding: 1.25rem 0;
  min-height: 2.75rem;              /* 44px tap target */
  text-decoration: none;
  color: var(--ink);
}

.related a:hover .related__title { color: var(--accent); }

.related__title {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.3;
  transition: color 160ms ease;
}

.related__note {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  max-width: 56ch;
}

/* --- The homepage link through to this page ------------------------------- */

.index-more {
  margin-top: 2rem;
  border-top: 1px solid var(--accent-rule);
  padding-top: 1.5rem;
}

.index-more p {
  color: var(--ink-muted);
  max-width: 58ch;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;              /* 44px tap target */
  margin-top: 0.5rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-rule);
}

.link-arrow:hover { border-bottom-color: var(--accent); }

.link-arrow::after {
  content: "→";
  font-size: 0.875rem;
  letter-spacing: 0;
  transition: transform 160ms ease;
}

.link-arrow:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .link-arrow::after { transition: none; }
  .link-arrow:hover::after { transform: none; }
}


/* ==========================================================================
   16. BUTTONS
   The one filled element on the site. Used sparingly: at most one per
   section, never more than three on a page. Everything else stays a text
   link. White on the accent measures 10.4:1, which is WCAG AAA.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;                 /* 48px, comfortably above the 44px floor */
  padding: 0.75rem 2rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;                 /* the site has no rounded geometry */
  color: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.section__body > .btn { margin-top: 2rem; }

/* A button standing on its own after a paragraph */
.btn-row { margin-top: 2rem; }


/* ==========================================================================
   17. BREADCRUMBS
   Two levels only, on every page except the homepage. Sits between the
   header and the page title block. Orientation and structured data, not
   decoration — keep it quiet.
   ========================================================================== */

.breadcrumb { padding-top: 1.25rem; }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.6rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--ink-muted);
  opacity: 0.5;
  font-size: 0.8125rem;
  line-height: 1;
}

.breadcrumb a,
.breadcrumb span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;              /* 44px tap target */
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumb a:hover { border-bottom-color: var(--accent); }

.breadcrumb [aria-current="page"] { color: var(--ink-muted); }

/* The title block that follows keeps its own rhythm, tightened so the
   breadcrumb does not push the page title down the screen. */
.breadcrumb + .hero { padding-top: clamp(2.5rem, 6vw, 5.5rem); }
.breadcrumb + .legal .legal__head { padding-top: clamp(2rem, 4vw, 3.5rem); }


/* ==========================================================================
   18. THE OPENINGS REPORT PAGE
   Components used only by openings-report.html.

     .detail-list   what the Report contains, one block per field
                    (shares its styling with .dimensions in §15)
     .record        the sample record

   The illustrative banner and caption on .record share their styling with
   the sample release block in §15, so that both warnings look identical
   and cannot drift apart. Both are switched off by removing a single
   data-illustrative attribute from the block.
   ========================================================================== */

.section__body > .record { margin-top: 3rem; }

.record { border: 1px solid var(--accent-rule-strong); }

.record__body {
  background: var(--accent-wash);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.record__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.record__meta {
  margin-top: 0.5rem;
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
}

.record__fields {
  margin-top: 1.75rem;
  border-top: 1px solid var(--accent-rule-strong);
}

.record__fields > div {
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(29, 67, 85, 0.14);
}

.record__fields dt {
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.record__fields dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

@media (min-width: 36em) {
  .record__fields > div {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: baseline;
  }
  .record__fields dt { margin-bottom: 0; }
}

/* Status of a regional edition, in the coverage table */
.status-note {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}


/* ==========================================================================
   19. RELEASE PAGES
   Used by the permanent per-release pages in index-releases/ and by the
   archive on the hub. Everything else on those pages is the existing
   apparatus: .hero for the title block, .section for the body, .release for
   the figures (§15), .data-table for the archive (§14), .citation (§15).

     .release-published   the published date line beneath a release h1
     .release-permalink   the durable-link line under the hub's release block
     .release-nav         previous / next release navigation
     .archive-empty       the line shown until the first release exists
   ========================================================================== */

.release-published {
  margin-top: 1.5rem;
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The hub's release block is a copy; this line points at the permanent one.
   It is the link a journalist should take, so it is not buried. */
.release-permalink {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--accent-rule);
  font-size: 1rem;
}

.section__body > .release-permalink { margin-top: 1.5rem; }

.archive-empty { color: var(--ink-muted); font-size: 1rem; }

/* The release name is the tap target in the archive table. On mobile, where
   the table stacks into labelled rows, it has to reach 44px; on desktop the
   row itself is already comfortable and an inflated link would look odd. */
@media (max-width: 47.99em) {
  .archive-table a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* --- Previous / next release ------------------------------------------- */

.release-nav {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--accent-rule);
  padding-top: 1.5rem;
}

@media (min-width: 36em) {
  .release-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
  /* When only one of the two exists it stays in its own column, so the
     earliest and most recent releases do not look broken. */
  .release-nav__next { grid-column: 2; text-align: right; }
}

.release-nav a {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 2.75rem;              /* 44px tap target */
  padding-block: 0.25rem;
  text-decoration: none;
}

.release-nav__label {
  font-size: var(--fs-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
}

.release-nav__title {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ink);
  transition: color 160ms ease;
}

.release-nav a:hover .release-nav__title { color: var(--accent); }


/* ==========================================================================
   20. COOKIE CONSENT BANNER
   Styling for consent.js, which is DISABLED by default. Nothing in this
   section renders unless that script is loaded and its CONSENT_REQUIRED
   flag is set to true. See consent.js and the README.
   ========================================================================== */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 1px solid var(--accent-rule-strong);
  padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
}

.consent[hidden] { display: none; }

.consent__inner {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  display: grid;
  gap: 1rem;
}

.consent__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 62ch;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* Accept and Reject are deliberately identical in weight and size.
   Do not restyle one to stand out; equal prominence is a legal requirement. */
.consent__button {
  appearance: none;
  font: inherit;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-rule-strong);
  border-radius: 0;
  padding: 0 1.25rem;
  min-height: 2.75rem;              /* 44px tap target */
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.consent__button:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.consent__link {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-rule);
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.consent__link:hover { border-bottom-color: var(--accent); }

@media (min-width: 48em) {
  .consent__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 3rem;
  }
}

/* The footer link that lets a visitor change their choice. It is added by
   consent.js at runtime, so it never appears while the banner is disabled. */
.consent-reopen {
  font: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0;
  cursor: pointer;
}


/* ==========================================================================
   21. MOTION
   One fade-and-rise on section entry, 260ms. Nothing else moves.
   Applied only when scripting is available and motion is not reduced.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(10px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ==========================================================================
   22. PRINT
   The legal pages are printed and sent as PDFs, so they are set for A4:
   black text, no navigation, link addresses shown where they are useful.
   ========================================================================== */

@page {
  size: A4;
  margin: 18mm 16mm;
}

@media print {
  .site-header,
  .skip-link,
  .site-footer__nav,
  .legal-toc,
  .back-to-top,
  .consent { display: none !important; }

  html { scroll-behavior: auto; }

  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .wrap { max-width: none; padding-inline: 0; }

  /* The reveal animation must never leave text invisible on paper */
  .js .reveal,
  .js .reveal.is-visible { opacity: 1 !important; transform: none !important; }

  .section { padding-block: 1.5rem; page-break-inside: avoid; }
  .index-figure { background: none; border: 1px solid #999; }

  .legal__grid { display: block; padding-bottom: 0; }
  .legal__head { padding-block: 0 1.5rem; }

  h1, h2, h3 { color: #000; page-break-after: avoid; }
  .legal__updated, .legal-section__num, .data-table thead th, .legal-facts dt { color: #000; }

  .legal-section {
    padding-block: 1rem;
    border-top: 1px solid #999;
    page-break-inside: auto;
  }

  .legal-section p,
  .legal-section li,
  .data-table td { color: #000; max-width: none; }

  .legal-callout { background: none; border: 1px solid #999; padding: 1rem; }

  .breadcrumb,
  .release-nav { display: none; }

  /* Buttons are meaningless on paper: print them as their text, with the
     address of the link, which the rule further down already supplies. */
  .btn {
    background: none;
    color: #000;
    border: 1px solid #999;
    padding: 0.25rem 0.5rem;
    min-height: 0;
    font-weight: 700;
  }

  /* The illustrative banner and captions must survive printing */
  .release,
  .record { border: 1px solid #999; page-break-inside: avoid; }
  .release__body,
  .record__body { background: none; }
  .record__title, .record__meta, .record__fields dt, .record__fields dd { color: #000; }
  .release__flag,
  .record__flag {
    background: none;
    color: #000;
    border-bottom: 1px solid #999;
    font-weight: 700;
  }
  .release-published, .release-permalink { color: #000; }
  .release__figure, .release__period, .metric__value, .metric__label,
  .release__caption, .record__caption, .dimension p, .detail p,
  .definitions dd, .related__note, .status-note { color: #000; }
  .share__bar { display: none; }
  .citation { border-left: 2px solid #000; }

  .data-table__wrap { overflow: visible; }
  .data-table { font-size: 9.5pt; page-break-inside: auto; }
  .data-table tr { page-break-inside: avoid; }

  a { text-decoration: none; color: #000; }

  /* Expose the address of external and cross-page links, but not of the
     dozens of in-page anchor links, which would be noise on paper. */
  .legal-section a[href^="http"]::after,
  .legal-note a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
}