/* The guides at /guides/ (D50). The home page's palette and type, for a long read. */
:root {
  --paper:#faf8f4; --paper-2:#f3efe7; --line:#e6e0d4; --line-2:#d5cdbd;
  --ink:#072539; --ink-2:#22394c; --ink-3:#5b6b78;
  --blue:#1d5b93; --blue-dark:#164a7a; --blue-soft:#e3edf6;
}
* { box-sizing:border-box; }
html { color-scheme:light; }
body { margin:0; font-family:'Manrope', system-ui, sans-serif; font-size:18px; line-height:1.65; color:var(--ink-2); background:var(--paper); -webkit-font-smoothing:antialiased; }
a { color:var(--blue); }
img { max-width:100%; height:auto; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.g-wrap { max-width:1080px; margin:0 auto; padding:0 20px; }


h1, h2, h3 { color:var(--ink); font-weight:750; letter-spacing:-.03em; line-height:1.15; }
h1 { font-size:clamp(2.1rem, 5.5vw, 3.4rem); margin:.2em 0 .35em; letter-spacing:-.045em; }
h2 { font-size:clamp(1.45rem, 3vw, 1.9rem); margin:0 0 .5em; }
.g-eyebrow { margin:0; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.g-hero { padding-top:40px; padding-bottom:24px; }
.g-crumbs { display:flex; gap:8px; font-size:14px; color:var(--ink-3); margin-bottom:22px; }
.g-crumbs a { color:var(--ink-3); }
.g-lede { font-size:1.25rem; color:var(--ink-3); max-width:44rem; margin:0 0 .8em; }
.g-meta { font-size:14px; color:var(--ink-3); margin:0 0 28px; }
.g-hero-image { display:block; width:100%; border-radius:20px; aspect-ratio:3 / 2; object-fit:cover; }

.g-layout { display:grid; grid-template-columns:240px minmax(0, 720px); gap:56px; padding-top:24px; padding-bottom:40px; }
.g-contents { position:sticky; top:88px; align-self:start; font-size:15px; }
.g-contents ol { margin:12px 0 0; padding-left:20px; }
.g-contents li { margin:0 0 8px; }
.g-contents a { color:var(--ink-2); text-decoration:none; }
.g-contents a:hover { color:var(--blue); text-decoration:underline; }
@media (max-width:900px) { .g-layout { grid-template-columns:minmax(0, 1fr); gap:24px; } .g-contents { position:static; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; } }

.g-section { padding:8px 0 20px; border-top:1px solid var(--line); scroll-margin-top:84px; }
.g-section:first-child { border-top:0; }
.g-num { margin:18px 0 4px; font-size:14px; font-weight:700; color:var(--blue); }
.g-body p, .g-body li { max-width:42rem; }
.g-body ul, .g-body ol { padding-left:1.3em; }
.g-body li { margin-bottom:.45em; }
.g-note { background:var(--blue-soft); border-radius:16px; padding:18px 22px; margin:1.2em 0; }
.g-note p { margin:0 0 .6em; }
.g-note p:last-child { margin-bottom:0; }
.g-note-label { font-weight:700; color:var(--ink); }
.g-break { margin:12px 0 28px; }
.g-break img { display:block; width:100%; border-radius:16px; aspect-ratio:3 / 2; object-fit:cover; }

.g-cta { margin:32px 0 8px; background:#fff; border:1px solid var(--line-2); border-radius:20px; padding:26px 28px; }
.g-cta h2 { margin-top:6px; }
.g-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; border-radius:12px; background:var(--blue); color:#fff; font-weight:700; text-decoration:none; margin-right:14px; }
.g-btn:hover { background:var(--blue-dark); }
.g-link { font-weight:700; }

.g-related, .g-hub-group { padding:32px 0 8px; }
.g-related { max-width:1080px; margin:0 auto; padding-left:20px; padding-right:20px; border-top:1px solid var(--line); }
.g-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
.g-card { display:flex; flex-direction:column; gap:6px; height:100%; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; color:var(--ink-2); text-decoration:none; }
.g-card:hover { border-color:var(--blue); }
.g-card-image img { display:block; width:100%; border-radius:12px; aspect-ratio:3 / 2; object-fit:cover; margin-bottom:6px; }
.g-card-eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.g-card-title { font-size:1.12rem; font-weight:750; color:var(--ink); line-height:1.3; }
.g-card-text { font-size:15px; color:var(--ink-3); line-height:1.5; }

.g-footer { margin-top:48px; padding:32px 0; border-top:1px solid var(--line); color:var(--ink-3); font-size:.9rem; text-align:center; }
.g-footer a { color:var(--ink-2); display:inline-flex; align-items:center; min-height:44px; }
.g-footer-links { margin-top:6px; }

/* Byline and sources (26 September 2026, as chat.org.uk's guides). */
.g-meta span + span { margin-left: 0; }
.g-meta a { color: var(--ink-2); font-weight: 600; }
.g-sources { padding: 24px 0 8px; border-top: 1px solid var(--line); margin-top: 28px; }
.g-sources h2 { font-size: 1.3rem; }
.g-sources p { font-size: 15px; color: var(--ink-3); }
.g-sources ol { padding-left: 1.3em; font-size: 16px; }
.g-sources li { margin-bottom: .5em; }
.g-source-host { color: var(--ink-3); font-size: 14px; margin-left: 4px; }

/* Hub rows: one sideways-scrolling row per topic, three cards across on a desktop, two on a tablet, one and a
   bit on a phone so the next card shows there is more. */
.g-row-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.g-row-head h2 { margin: 0; }
.g-row-count { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); margin-left: 6px; }
.g-row-controls { display: flex; gap: 8px; flex: 0 0 auto; }
.g-row-controls[hidden] { display: none; }
.g-row-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 700 22px/1 'Manrope', system-ui, sans-serif; cursor: pointer; }
.g-row-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.g-row-btn:disabled { opacity: .35; cursor: default; }
.g-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 2px; padding: 2px 2px 14px; scrollbar-width: thin; }
.g-row > li { scroll-snap-align: start; }
.g-row:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 18px; }
@media (max-width: 900px) { .g-row { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .g-row { grid-auto-columns: 84%; } }
.g-countries { padding: 8px 0 56px; }

/* The article hero (28 September 2026, as chat.org.uk's guides): the lede's first sentence, the direct answer, is
   the standfirst under the title; the contents sit beside it on a wide screen; the rest of the lede opens the
   article. On a phone the hero contents are hidden, and the contents card below the photograph does the job. */
.g-title-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.g-article .g-lede { font-size: 1.4rem; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); max-width: none; margin: .1em 0 .8em; }
.g-article .g-lede a, .g-intro a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: break-word; }
.g-hero-contents { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px 18px; font-size: 15px; }
.g-hero-contents ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.g-hero-contents li { display: flex; gap: 12px; line-height: 1.4; }
.g-hero-num { flex: none; min-width: 1.5em; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--blue); font-variant-numeric: tabular-nums; }
.g-hero-contents a { color: var(--ink-2); text-decoration: none; }
.g-hero-contents a:hover { color: var(--blue); text-decoration: underline; }
.g-intro { margin: 14px 0 22px; }
@media (max-width: 900px) {
  .g-title-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .g-hero-contents { display: none; }
  .g-article .g-lede { font-size: 1.25rem; }
}

/* A question people ask, as a sub-heading with its answer (the "Questions people ask" section). */
.g-q { font-size: 1.2rem; letter-spacing: -.02em; margin: 1.5em 0 .35em; }
.g-section h2 + .g-q { margin-top: .5em; }

/* Search on each market's hub (28 September 2026, as chat.org.uk's). The form ships hidden and search.js shows
   it; while there are results the topic rows step aside. */
.g-search { max-width: 44rem; margin: 26px 0 0; }
.g-search[hidden], .g-search-results[hidden] { display: none; }
.g-search-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.g-search-field { position: relative; }
.g-search-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.g-search input { width: 100%; min-height: 54px; font: inherit; font-size: 18px; line-height: 1.4; color: var(--ink); background: #fff; border: 1px solid #7b867d; border-radius: 14px; padding: 13px 18px 13px 50px; -webkit-appearance: none; appearance: none; }
.g-search input::placeholder { color: var(--ink-3); }
.g-search input:focus { border-color: var(--blue); }
.g-search-status { min-height: 1.5em; font-size: 15px; color: var(--ink-3); margin: 8px 0 0 2px; }
.g-search-status:empty { min-height: 0; margin: 0; }
.g-hub.is-searching .g-hub-group { display: none; }
.g-search-results { max-width: 52rem; padding: 8px 0 24px; }
.g-search-list { list-style: none; margin: 0; padding: 0; }
.g-search-result { padding: 22px 0 24px; border-top: 1px solid var(--line); }
.g-search-result:first-child { border-top: 0; padding-top: 4px; }
.g-search-topic { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.g-search-title { font-size: 1.35rem; margin: 0; }
.g-search-title a { color: var(--ink); text-decoration: none; }
.g-search-title a:hover { color: var(--blue); text-decoration: underline; }
.g-search-snippets { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.g-search-snippets a { display: block; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: 16px; line-height: 1.6; text-decoration: none; }
.g-search-snippets a:hover { border-color: var(--blue); }
.g-search-where { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.g-search-results mark, ::target-text { background: #fbeed8; color: var(--ink); border-radius: 3px; }
.g-search-results mark { padding: 0 .08em; }
.g-search-title mark { background: linear-gradient(transparent 58%, #fbeed8 58%); border-radius: 0; padding: 0; }
.g-search-more { min-height: 44px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 20px; margin-top: 8px; cursor: pointer; }
.g-search-more:hover { border-color: var(--blue); color: var(--blue); }
.g-search-empty p { color: var(--ink-3); margin: 0 0 12px; }
@media (max-width: 560px) {
  .g-search input { font-size: 16px; }
  .g-search-snippets a { padding: 11px 14px; font-size: 15px; }
}