/* ============================================================================
   cityhonestly design system
   ----------------------------------------------------------------------------
   Token values are ported verbatim from references/design-system.html, which
   the written specification names as the source of truth: "Where this file and
   the written specification differ, this file wins."

   One file on purpose. `stylesheet_link_tag :app` emits a <link> per top-level
   stylesheet in alphabetical order, so splitting this would make the cascade
   depend on filenames. fonts.css stays separate because @font-face is
   order-independent.
   ============================================================================ */

/* ============================================================
   TOKENS — light is the base. Every token defined here first.
   A colour whose only definition lives inside a media query is
   the classic unreadable-page bug.
   ============================================================ */
:root{
  /* grounds and ink */
  --ground:#FBFCFB; --surface:#FFFFFF; --surface-2:#EFF4F1; --surface-3:#E4ECE8;
  --ink:#0F231E; --ink-soft:#465C56; --ink-faint:#5A716B;
  --rule:#D9E4DF; --rule-soft:#E9F0ED;

  /* accent — jade. the only interface colour. */
  --accent:#12463C; --accent-hover:#0B2E28; --accent-on:#FFFFFF;
  --accent-tint:#E6EFEB;

  /* secondary — turmeric. marks disclosure, never action. */
  --gold:#8A5D0F; --gold-tint:#FBF3E1; --gold-line:#E8D5A6;

  /* clay — the books' second aside colour, ported from
     references/.../source/build/style.css so a box lifted out of a guide
     looks the same on the site as it does on the page it came from. */
  --clay:#A8503A; --clay-tint:#F8EAE6; --clay-line:#E8C4B8;

  /* semantic — separate from accent, by design */
  --ok:#1E6B4F;  --ok-tint:#E4F1EA;
  --warn:#9C6A0E; --warn-tint:#FBF3E1;
  --stale:#6B5F77; --stale-tint:#EFEBF3;

  /* the ten city accents — DATA ENCODING, not decoration */
  --c-bangkok:#C8871B; --c-chiang-mai:#9A5B2E; --c-singapore:#A8478A;
  --c-kuala-lumpur:#B8912E; --c-ho-chi-minh:#B03A2E; --c-bali:#C9683F;
  --c-phuket:#1F7A8C; --c-pattaya:#7A4FA3; --c-hua-hin:#6E8B3D;
  --c-koh-samui:#12A08C;

  /* type */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* scale — wide contrast on purpose */
  --t-display:clamp(40px,6.2vw,68px);
  --t-h1:clamp(30px,4vw,44px);
  --t-h2:26px; --t-h3:19px;
  --t-body:18px; --t-small:15px; --t-micro:12.5px;

  /* space, radius, shadow */
  --s1:4px; --s2:8px; --s3:12px; --s4:20px; --s5:32px; --s6:52px; --s7:84px;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(15,35,30,.05),0 10px 28px -14px rgba(15,35,30,.16);
  --measure:66ch;

  color-scheme:light;
}

/* The dark palette, defined once and applied to both dark states below. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B1512; --surface:#111F1B; --surface-2:#182B26; --surface-3:#20372F;
    --ink:#E7F0EC; --ink-soft:#A5BBB4; --ink-faint:#7A928B;
    --rule:#26403A; --rule-soft:#1C302B;
    --accent:#7FCBB6; --accent-hover:#9FE0CC; --accent-on:#08120F;
    --accent-tint:#16302A;
    --gold:#EFC178; --gold-tint:#2A2113; --gold-line:#4A3A1D;
    --clay:#D98166; --clay-tint:#2A1A15; --clay-line:#4A2E24;
    --ok:#63C79C; --ok-tint:#122A21;
    --warn:#EFC178; --warn-tint:#2A2113;
    --stale:#B0A3C4; --stale-tint:#241F2B;
    --c-bangkok:#E2AC55; --c-chiang-mai:#C79463; --c-singapore:#D08FBB;
    --c-kuala-lumpur:#DDBB63; --c-ho-chi-minh:#DD8272; --c-bali:#E59B79;
    --c-phuket:#6FB5C4; --c-pattaya:#B98FD4; --c-hua-hin:#A9C46E;
    --c-koh-samui:#66D3C2;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0B1512; --surface:#111F1B; --surface-2:#182B26; --surface-3:#20372F;
  --ink:#E7F0EC; --ink-soft:#A5BBB4; --ink-faint:#7A928B;
  --rule:#26403A; --rule-soft:#1C302B;
  --accent:#7FCBB6; --accent-hover:#9FE0CC; --accent-on:#08120F;
  --accent-tint:#16302A;
  --gold:#EFC178; --gold-tint:#2A2113; --gold-line:#4A3A1D;
  --clay:#D98166; --clay-tint:#2A1A15; --clay-line:#4A2E24;
  --ok:#63C79C; --ok-tint:#122A21;
  --warn:#EFC178; --warn-tint:#2A2113;
  --stale:#B0A3C4; --stale-tint:#241F2B;
  --c-bangkok:#E2AC55; --c-chiang-mai:#C79463; --c-singapore:#D08FBB;
  --c-kuala-lumpur:#DDBB63; --c-ho-chi-minh:#DD8272; --c-bali:#E59B79;
  --c-phuket:#6FB5C4; --c-pattaya:#B98FD4; --c-hua-hin:#A9C46E;
  --c-koh-samui:#66D3C2;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
     font-family:var(--sans);font-size:var(--t-body);line-height:1.65;
     -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--sans);line-height:1.14;letter-spacing:-.015em;
            text-wrap:balance;margin:0}
p{max-width:var(--measure)}
a{color:var(--accent);text-underline-offset:3px}
img{max-width:100%;height:auto}

/* Every interactive element has a designed focus state, not the browser default. */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}

/* prefers-reduced-motion DISABLES motion. Not reduces — disables. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
           background:var(--accent);color:var(--accent-on);
           padding:var(--s3) var(--s4);border-radius:0 0 var(--r-sm) 0;
           font-size:var(--t-small);font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
                 overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   LAYOUT — section, don't compress
   ============================================================ */
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
.section{padding-top:var(--s7)}
.section:last-child{padding-bottom:var(--s7)}

.sec-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4);
          padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
/* Structural numbering. The eleven book sections are a fixed sequence every
   guide shares, so the numbers are true, not decorative. */
.sec-num{font-family:var(--mono);font-size:var(--t-small);font-weight:600;
         color:var(--accent);font-variant-numeric:tabular-nums}
.sec-head h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);margin:var(--s5) 0 var(--s3)}

.eyebrow{font-size:var(--t-micro);font-weight:700;letter-spacing:.15em;
         text-transform:uppercase;color:var(--ink-faint)}
.lede{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink-soft);
      max-width:var(--measure);margin:0}
.note{font-size:var(--t-small);color:var(--ink-soft);max-width:var(--measure)}
.prose{font-family:var(--serif);max-width:var(--measure)}

/* Full-bleed alternating ground. Each block gets one job and its own ground. */
.bleed{background:var(--surface-2);border-block:1px solid var(--rule);
       margin-top:var(--s7);padding:var(--s6) 0}
.bleed .wrap{padding-inline:var(--s4)}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}

/* ============================================================
   SITE HEADER / FOOTER
   ============================================================ */
.masthead{border-bottom:1px solid var(--rule);background:var(--ground);
          position:sticky;top:0;z-index:40}
.masthead .wrap{display:flex;align-items:center;gap:var(--s4);
                min-height:60px;flex-wrap:wrap}
/* Everything in the masthead is a 44px control on one row: the wordmark, the
   links, both switches. The height is shared even where the visual weight is
   not, which is what keeps the row balanced. */
.masthead .wrap > *,.masthead nav a{min-height:44px}
.wordmark,.masthead nav{display:flex;align-items:center}
.masthead nav{gap:var(--s4);flex-wrap:wrap}
.wordmark{font-weight:700;font-size:17px;letter-spacing:-.02em;
          color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark em{font-style:normal;color:var(--accent)}
.masthead nav{display:flex;gap:var(--s4);flex-wrap:wrap;
              font-size:var(--t-small);font-weight:600}
.masthead nav a{display:inline-flex;align-items:center;
                color:var(--ink-soft);text-decoration:none}
.masthead nav a:hover,.masthead nav a[aria-current="page"]{color:var(--accent)}
.masthead .spacer{margin-left:auto}
.masthead-tools{display:flex;align-items:center;gap:var(--s3)}

.site-footer{margin-top:var(--s7);border-top:1px solid var(--rule);
             padding:var(--s5) 0 var(--s6);
             font-size:var(--t-small);color:var(--ink-faint)}
.site-footer p{max-width:none}
.site-footer a{color:var(--ink-soft)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);
              margin-bottom:var(--s3);padding:0;list-style:none}
.footer-links a{display:inline-flex;align-items:center;min-height:24px}

/* Language switcher — visible on every page, resolves to the equivalent page. */
.lang-switch{display:flex;align-items:center;border-radius:999px;
             box-shadow:inset 0 0 0 1px var(--rule);
             background:var(--surface);overflow:hidden}
.lang-switch a,.lang-switch span{display:inline-flex;align-items:center;
             justify-content:center;min-height:44px;min-width:44px;
             font-size:var(--t-micro);font-weight:700;
             letter-spacing:.06em;text-transform:uppercase;
             padding:0 var(--s3);border-radius:999px;text-decoration:none;
             color:var(--ink-soft);white-space:nowrap}
.lang-switch [aria-current="true"]{background:var(--accent);color:var(--accent-on)}

/* Theme toggle — three states: explicit light, explicit dark, system default. */
.theme-toggle{display:flex;background:var(--surface);border-radius:999px;
              box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden}
.theme-toggle button{min-height:44px;font-family:var(--sans);font-size:var(--t-micro);
              font-weight:600;border:0;background:transparent;color:var(--ink-soft);
              padding:0 var(--s3);border-radius:999px;cursor:pointer;line-height:1.4}
.theme-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--accent-on)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:var(--s7) 0 var(--s6)}
.display{font-size:var(--t-display);font-weight:700;margin:var(--s4) 0 var(--s4);
         line-height:1.05;letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
.display em{font-style:normal;color:var(--accent)}
.hero .lede{font-size:21px}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
              margin-top:var(--s5)}

/* ============================================================
   BUTTONS — jade marks what you can act on, and nothing else
   ============================================================ */
.btn{display:inline-block;font-family:var(--sans);font-size:var(--t-small);font-weight:600;
     padding:11px 22px;border-radius:var(--r-sm);border:1px solid transparent;
     cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;
     text-align:center}
.btn-primary{background:var(--accent);color:var(--accent-on)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--accent)}

/* ============================================================
   THE CHECK CHIP — the most important component on the site.
   Deliberate disclosure, never a warning. Never red, never an
   alert icon, never apologetic. Always paired with its word,
   so nothing is conveyed by colour alone.
   ============================================================ */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);
      font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
      padding:4px 10px;border-radius:999px;border:1px solid transparent;
      white-space:nowrap}
.chip-check{background:var(--gold-tint);color:var(--gold);border-color:var(--gold-line)}
.chip-ok{background:var(--ok-tint);color:var(--ok);border-color:currentColor}
.chip-stale{background:var(--stale-tint);color:var(--stale);border-color:currentColor}

/* ============================================================
   THE FACT LINE — no figure appears on the site without a date
   ============================================================ */
.fact{border-left:3px solid var(--accent);background:var(--surface);
      padding:var(--s3) var(--s4);border-radius:0 var(--r) var(--r) 0;
      margin-bottom:var(--s3);max-width:var(--measure)}
.fact .claim{font-family:var(--serif);font-size:17px;line-height:1.5}
.fact .val{font-family:var(--mono);font-weight:600;color:var(--ink);
           font-variant-numeric:tabular-nums}
.fact .meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:var(--s2);
            font-size:var(--t-micro);color:var(--ink-faint);align-items:center}
.fact .meta a{color:var(--ink-faint)}

/* ============================================================
   CITY CARDS — the accent is a rail, never a background fill.
   Ten background colours on one page is chaos; ten 4px rails
   is a system.
   ============================================================ */
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}
.city{background:var(--surface);border:1px solid var(--rule);
      border-left:4px solid var(--rail);border-radius:var(--r);
      padding:var(--s3) var(--s4);text-decoration:none;color:inherit;display:block;
      transition:border-color .15s}
a.city:hover{border-color:var(--rule);border-left-color:var(--rail);box-shadow:var(--shadow)}
.city b{display:block;font-size:17px;font-weight:700}
.city span{display:block;font-family:var(--mono);font-size:var(--t-micro);
           color:var(--rail);font-weight:600;margin-top:2px}
.city em{display:block;font-style:normal;font-size:var(--t-small);
         color:var(--ink-soft);margin-top:var(--s2)}

/* ============================================================
   THE BAND TABLE — scrolls inside its own container so the page
   body never scrolls sideways. Tabular numerals throughout.
   ============================================================ */
.tbox{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);
      background:var(--surface);box-shadow:var(--shadow);
      -webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--t-small);min-width:620px;
      font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:var(--t-small);color:var(--ink-soft);
        padding:var(--s3) var(--s3) 0}
thead th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
         font-weight:700;color:var(--ink-soft);background:var(--surface-2);
         padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule);white-space:nowrap}
tbody td,tbody th{padding:var(--s3);border-bottom:1px solid var(--rule-soft);
                  vertical-align:top;text-align:left}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.num,th.num{font-family:var(--mono);white-space:nowrap}
/* Band colour as a left rail rather than a filled cell. */
th.band,td.band{white-space:nowrap;font-weight:600;
                border-left:4px solid var(--rail);padding-left:var(--s3)}

/* ============================================================
   PRICING
   ============================================================ */
.price-card{background:var(--surface);border:1px solid var(--rule);
            border-radius:var(--r);padding:var(--s4);display:flex;
            flex-direction:column;gap:var(--s2)}
.price-card.is-feature{border-color:var(--accent);box-shadow:var(--shadow)}
.price-card h3{margin:0;font-size:var(--t-h3)}
.price-card .amount{font-family:var(--mono);font-size:28px;font-weight:600;
                    letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-card .amount small{font-size:var(--t-micro);font-weight:400;
                          color:var(--ink-faint);letter-spacing:0}
.price-card p{font-size:var(--t-small);color:var(--ink-soft);margin:0;flex:1}
.price-card .btn{margin-top:var(--s3)}

/* ============================================================
   MOTION — restrained to the point of near-invisibility, and
   always from a VISIBLE resting state so first paint and the
   page thumbnail are never blank.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:reveal linear both;animation-timeline:view();
            animation-range:entry 0% entry 40%}
    @keyframes reveal{from{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:none}}
  }
}

/* ============================================================
   FRENCH — every component is tested at French string lengths,
   which run 15–20% longer than English.
   ============================================================ */
:lang(fr) .display{max-width:18ch}

/* ============================================================
   STYLEGUIDE — only used by the /design-system page
   ============================================================ */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.sw{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.sw i{display:block;height:56px}
.sw b{display:block;font-size:var(--t-micro);font-weight:600;padding:var(--s2) var(--s3) 0}
.sw code{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-faint);
         padding:0 var(--s3) var(--s2)}

.spec{border-left:3px solid var(--rule);padding-left:var(--s4);margin-bottom:var(--s5)}
.spec .label{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
             color:var(--ink-faint);font-weight:700;margin-bottom:var(--s2)}
.serif-demo{font-family:var(--serif);font-size:var(--t-body);max-width:var(--measure)}

/* ============================================================
   DOCUMENT PAGES — long prose, read rather than scanned
   ============================================================ */
/* A document, not a dashboard: one reading column centred in the viewport.
   The rest of the site is left-aligned because grids, tables and card decks
   fill the width. A page that is nothing but prose has nothing to fill it
   with, so constraining the text inside a 1120px container just pins it to
   the left edge with half the screen empty. Here the CONTAINER is the
   measure, and everything inside fills it.

   .doc is every article page — city hubs, cluster pages, breakouts, country
   rules, comparisons, the guide pages. .legal is the same column with the
   extra furniture the three legal notices need. They share these rules
   because they are the same kind of page, and the article pages were written
   without them, which pinned 218 pages to the left edge of the viewport. */
.doc,.legal{max-width:calc(var(--measure) + var(--s5) * 2);margin-inline:auto}
.doc .prose,.legal .prose,
.doc .prose p,.legal .prose p,
.doc .prose li,.legal .prose li,
.doc .prose ul,.legal .prose ul,
.doc .prose ol,
.doc .lede,.legal .lede,
.doc .note,
.legal .legal-summary,
.doc dl,.legal dl{max-width:none}

.doc .prose h2,.legal .prose h2{font-family:var(--sans);font-size:var(--t-h3);
                 margin:var(--s6) 0 var(--s3)}
.doc .prose h3,.legal .prose h3{font-size:17px;margin:var(--s5) 0 var(--s2)}
.doc .prose p,.legal .prose p,
.doc .prose li,.legal .prose li{font-family:var(--serif);font-size:17px;
                                 line-height:1.65}
.doc .prose ul,.legal .prose ul,
.doc .prose ol{padding-left:var(--s4)}
.doc .prose li{margin-bottom:var(--s2)}
/* The article's own lede, lifted out of the book, opens the prose column. */
.doc .prose > .lede:first-child{margin-bottom:var(--s4)}

/* .spread is the other kind of content page: grids, card decks and lists that
   fill the 1120px container, the way the landing page does. It exists as a
   sibling of .doc so both kinds of content page share the rhythm below. */

/* A content page opens straight into its subject. Only the landing page earns a
   full-height hero — 84px of empty above a breadcrumb reads as a page that has
   not started yet. */
.doc .hero,.spread .hero{padding-top:var(--s5);padding-bottom:var(--s4)}
.doc .section,.spread .section{padding-top:var(--s6)}
.spread .section:last-of-type{padding-bottom:0}

/* The masthead stays full width; only the document column narrows. */
.doc .hero,.legal .hero{padding-bottom:0}
.doc .display,.legal .display{max-width:none}
/* A content-page title is a sentence, not a headline. --t-display is poster
   type for the landing page; it has to hold "Bangkok vs Chiang Mai: which
   should you move to?" without running to three lines. */
.doc .display,.spread .display{font-size:var(--t-h1);max-width:30ch}
/* French runs 15-20% longer, so it gets the same two lines at more characters —
   the same allowance the landing page's headline already makes. */
:lang(fr) .doc .display,:lang(fr) .spread .display{max-width:34ch}
/* The summary box already separates the title from the body; the first
   heading does not need another 52px on top of it. */
.legal .prose > h2:first-child{margin-top:var(--s5)}
.legal .prose li{margin-bottom:var(--s2)}
.doc .prose strong,.legal .prose strong{font-weight:600}
.legal dl{margin:var(--s4) 0}
.legal dt{font-family:var(--sans);font-size:var(--t-small);font-weight:700;
          letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);
          margin-top:var(--s3)}
.legal dd{font-family:var(--serif);font-size:17px;margin:2px 0 0}

/* An unconfirmed company detail must be impossible to miss in review. */
.pending{background:var(--gold-tint);color:var(--gold);
         border:1px dashed var(--gold-line);border-radius:var(--r-sm);
         padding:1px 6px;font-family:var(--mono);font-size:13px;font-weight:600}

/* The summary that opens each legal page: the honest one-paragraph version. */
.legal-summary{border-left:3px solid var(--accent);background:var(--surface);
               padding:var(--s4);border-radius:0 var(--r) var(--r) 0;
               margin:var(--s5) 0}
.legal-summary p{font-family:var(--sans);font-size:var(--t-small);margin:0}
.legal-summary p + p{margin-top:var(--s2)}

/* ============================================================
   BREADCRUMBS — every content page, per the definition of done
   ============================================================ */
/* The trail is small, quiet furniture. The last crumb is the current page and
   is deliberately NOT a link: a control that looks clickable and goes nowhere
   is the species of small dishonesty this brand cannot afford. */
.breadcrumbs{margin-bottom:var(--s4)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);
                list-style:none;margin:0;padding:0;
                font-size:var(--t-micro);letter-spacing:.04em}
.breadcrumbs li{display:flex;align-items:center;gap:var(--s2);color:var(--ink-faint)}
.breadcrumbs li + li::before{content:"/";color:var(--ink-faint);opacity:.6}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:24px;
               color:var(--ink-soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--accent);text-decoration:underline}
.breadcrumbs [aria-current="page"]{color:var(--ink-faint)}

/* ============================================================
   THE VERDICT LINE — a hub's one-sentence answer, up front
   ============================================================ */
/* Every guide ends with "So, honestly?" and commits to an answer. The hub
   leads with that answer instead of making the reader earn it. */
.verdict{font-family:var(--sans);font-size:var(--t-h3);font-weight:600;
         line-height:1.35;color:var(--ink);max-width:var(--measure);
         margin:var(--s4) 0 var(--s3);
         border-left:3px solid var(--accent);padding-left:var(--s4)}

/* ============================================================
   THE FACT GRID — the headline numbers, labelled and dated
   ============================================================ */
/* A definition list because that is what it is: term and value. Values are
   mono and tabular so the figures line up down the column, which is the whole
   reason a reader scans this rather than reads it. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
       gap:var(--s4);margin:var(--s5) 0 0;padding:var(--s4);
       background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.facts div{min-width:0}
.facts dt{font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;
          text-transform:uppercase;color:var(--ink-faint)}
.facts dd{font-family:var(--mono);font-size:17px;font-weight:600;
          font-variant-numeric:tabular-nums;color:var(--ink);
          margin:2px 0 0;overflow-wrap:anywhere}

/* ============================================================
   BOOK BOXES — the asides, lifted out of the guides
   ============================================================ */
/* Ported from references/.../source/build/style.css into site tokens, so an
   aside reads the same on the page as in the PDF it came from. Left rail and
   tint, never a filled block — the same rule the city cards follow. */
.box{border:1px solid var(--rule);border-left:4px solid var(--accent);
     background:var(--surface);border-radius:0 var(--r) var(--r) 0;
     padding:var(--s4);margin:var(--s5) 0;max-width:none}
.box > :last-child{margin-bottom:0}
.box p{font-size:var(--t-small);max-width:none}
.lbl{display:block;font-family:var(--sans);font-size:var(--t-micro);font-weight:700;
     letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
     margin-bottom:var(--s2)}
.box.gold{border-left-color:var(--gold);background:var(--gold-tint);
          border-color:var(--gold-line)}
.box.gold .lbl{color:var(--gold)}
.box.clay{border-left-color:var(--clay);background:var(--clay-tint);
          border-color:var(--clay-line)}
.box.clay .lbl{color:var(--clay)}
.box.us{border-left-color:var(--c-phuket);background:var(--surface-2);
        border-color:var(--rule)}
.box.us .lbl{color:var(--c-phuket)}

/* ============================================================
   NAME LIST — the neighbourhoods a guide names
   ============================================================ */
/* Proper nouns, not prose: they are scanned for recognition, so they set in
   sans and flow into columns rather than running the full measure. */
.namelist{column-width:19rem;column-gap:var(--s5);list-style:none;
          margin:var(--s4) 0;padding:0}
.namelist li{break-inside:avoid;font-size:var(--t-small);color:var(--ink-soft);
             padding:var(--s2) 0;border-bottom:1px solid var(--rule-soft)}

/* The neighbourhood section of a city hub. The hub names where people live and
   sends the reader to the cluster page for what each one costs. */
.neighborhoods .note{margin-top:var(--s4)}

/* ============================================================
   THE EDITION STAMP — a visible date on every content page
   ============================================================ */
/* "Title under 60 characters, meta description 140-155, visible edition date."
   Quiet, but present on the page rather than only in schema. */
.edition{margin-top:var(--s5);padding-top:var(--s3);
         border-top:1px solid var(--rule-soft);color:var(--ink-faint);
         font-size:var(--t-micro)}

/* ============================================================
   READ ON — the onward links out of a hub
   ============================================================ */
.read-on{list-style:none;margin:var(--s4) 0 0;padding:0;
         column-width:24rem;column-gap:var(--s5)}
.read-on li{break-inside:avoid}
.read-on li{border-bottom:1px solid var(--rule-soft)}
.read-on a{display:block;padding:var(--s3) 0;font-size:var(--t-small);
           font-weight:600;text-decoration:none;color:var(--accent)}
.read-on a:hover{text-decoration:underline}

/* ============================================================
   THE OFFER — the Coming soon state, on the pages that sell
   ============================================================ */
/* A price card at the foot of the page, after the page has done its work.
   It reuses .price-card because that is what it is; .offer only positions it
   and marks it as the page's one call to action. */
.offer{margin-top:var(--s6);max-width:34rem;
       border-color:var(--accent);box-shadow:var(--shadow)}
/* An h2, not an h3, because in a document outline this is a top-level section
   of the page — .price-card only ever styled the h3 the landing page uses. */
.offer h2{margin:0;font-size:var(--t-h3)}
.offer .includes{font-size:var(--t-small);color:var(--ink-soft);margin:0}
.offer .arithmetic{font-family:var(--mono);font-size:var(--t-small);
                   color:var(--ink-soft);font-variant-numeric:tabular-nums}
.offer .note em{font-style:normal;font-weight:600;color:var(--gold)}

/* ============================================================
   THE PAGER — the way onward, and the way back
   ============================================================ */
/* Breadcrumbs sit above the fold and are easy to miss once a reader has
   scrolled a long article, which is exactly the moment they want out. So the
   foot of every leaf page carries the same moves: the page above, then the
   previous and next sections side by side.

   An EXPLICIT GRID, not a wrapping flex row. "Align text, images, and buttons
   to show users how information is related" — a flex row that drops one card
   onto its own centred line is misalignment, not responsiveness. Here previous
   holds column one and next holds column two whether or not the other exists,
   so the arrangement is the same on every page.

   Every target clears 44x44, Apple's figure and WCAG 2.5.5. */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);
       margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule)}

.pager a{display:flex;min-height:44px;text-decoration:none;
         transition:border-color .15s,color .15s}

/* The way up is one line of text, not a third card competing with the two that
   carry the sequence. */
.pager-up{grid-column:1 / -1;align-items:center;gap:var(--s2);
          font-size:var(--t-small);font-weight:600;color:var(--ink-soft)}
.pager-up:hover{color:var(--accent)}

.pager-prev,.pager-next{flex-direction:column;justify-content:center;gap:2px;
                        padding:var(--s3) var(--s4);background:var(--surface);
                        border:1px solid var(--rule);border-radius:var(--r)}
.pager-prev:hover,.pager-next:hover{border-color:var(--accent)}
.pager-prev{grid-column:1;align-items:flex-start;text-align:left}
.pager-next{grid-column:2;align-items:flex-end;text-align:right}

.pager-dir{font-family:var(--sans);font-size:var(--t-micro);font-weight:700;
           letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.pager-title{font-size:var(--t-small);font-weight:600;color:var(--accent);line-height:1.3}

/* One column on a phone, and next stops being right-aligned the moment it is no
   longer opposite anything. */
@media (max-width:640px){
  .pager{grid-template-columns:1fr}
  .pager-prev,.pager-next{grid-column:1;align-items:flex-start;text-align:left}
}

/* ============================================================
   THE HANDOFF — what this page does not cover
   ============================================================ */
/* Every cluster page ends by naming, specifically and countably, what the book
   holds that the page does not. It reads as a table of contents rather than a
   pitch, which is the entire reason it works: a reader who has just been given
   something real and told plainly what else exists does not need persuading.

   Deliberately quiet. It is the most persuasive block on the page and it must
   not look like an advertisement. */
.handoff{margin:var(--s6) 0;padding:var(--s5);background:var(--surface-2);
         border:1px solid var(--rule);border-radius:var(--r)}
/* Specificity: .doc .prose h2 carries a 52px section margin and outranks a
   bare .handoff h2, which left the heading floating inside its own box. */
.handoff h2,.doc .prose .handoff h2,.legal .prose .handoff h2{
     font-family:var(--sans);font-size:var(--t-h3);margin:0 0 var(--s3)}
.handoff ul{margin:0;padding-left:var(--s4)}
.handoff li{font-size:var(--t-small);color:var(--ink-soft);margin-bottom:var(--s2);
            max-width:none}
.handoff p{font-size:var(--t-small);margin:var(--s4) 0 0;max-width:none}
.handoff > :last-child{margin-bottom:0}