/* ============================================================================
   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;
  /* The masthead's one-row height. A token because scroll-padding-top has to
     know it: an in-page anchor that lands under a sticky bar is the oldest
     bug on the web, and the fix is one number that cannot drift from the bar. */
  --masthead:60px;
  --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; --container:1120px;
  /* The width data gets: the container, inside the page's own gutters. */
  --wide:calc(min(var(--container),100vw) - var(--s4) * 2);

  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}
/* Every #anchor on the site clears the masthead — the rules index's five
   country sections and the home page's two hero links alike. One declaration,
   rather than an offset re-derived at each link. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--masthead) + var(--s3))}
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:var(--container);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)}

/* The eyebrow register: the smallest, quietest label the site has. The related
   block's group heads share it, because they do the same job — naming what
   follows without competing with the prose heading above it. */
.eyebrow,.related h3{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)}
/* Running type, so the 24px floor .doormat-list explains, on both axes. At
   --t-small the font's own box is 21px, three short, while the line box it
   already sits in is 25: the floor costs no layout, it only makes the box
   match the row the reader is aiming at. */
.section .note a{display:inline-flex;align-items:center;
                 min-height:24px;min-width:24px}
.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}
/* Sticky only where the masthead is one row. Below the sheet's phone
   breakpoint the row has wrapped to three and stands 173px tall — a fifth of a
   390x844 viewport, travelling with the reader. NN/g's sticky-header finding is
   about SMALL headers; at that height it stops being chrome and becomes a
   second page. Relative rather than static, because the Cities panel is
   absolutely positioned against this box and needs it to stay a containing
   block. */
@media (max-width:640px){
  .masthead{position:relative}
}
/* The band where the masthead is BOTH sticky and wrapped to two rows, so
   --masthead's 60px is not what an anchor has to clear.

   The band ends EXACTLY where the row stops wrapping, and it has to: the token
   has two consumers, scroll-padding-top above and .masthead > .wrap's own
   min-height below. Rounding the ceiling up for safety therefore does not
   merely overshoot the scroll offset — it inflates the bar itself, to 109px of
   chrome holding one 44px row. Measured 11 September 2026: the row wraps up to
   766px in English and 779px in French, and stands one row from 780px in both.
   779 is the later of the two, so one breakpoint serves both and English
   carries a padded bar across the 13px between 767 and 779 —
   the alternative is a second query keyed on :lang, which is more machinery
   than thirteen pixels is worth. responsive_test pins the height at 700, 800
   and 1280 so the band cannot drift back out. */
@media (min-width:641px) and (max-width:779px){
  :root{--masthead:109px}
}
/* > .wrap, not .wrap: the Cities panel carries a container of its own, and it
   is a document column, not a second masthead row. */
.masthead > .wrap{display:flex;align-items:center;gap:var(--s4);
                min-height:var(--masthead);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}
/* > a: the Cities panel hangs inside this nav and its ten cards are links of
   their own, which are cards and not masthead items. */
.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)}
/* The section being read carries a rule under it as well as the accent, because
   nothing on this site is said by colour alone. */
.masthead nav > a[aria-current],.cities-menu summary[aria-current]{
     box-shadow:inset 0 -2px var(--accent)}
/* Below 360px — the narrowest phone in common use — the French row of four
   wants 307px and has 280px, and a wrapping flex row would drop "Guides" onto
   a line of its own. Two lanes of two instead: every link keeps a lane, and
   the details is a grid item like the other three. The threshold is a measured
   literal because a media condition cannot read a custom property: the four
   French items need a 347px viewport, so 360 is the first round width that
   holds them. */
@media (max-width:359px){
  .masthead nav{display:grid;grid-template-columns:1fr 1fr}
}
.masthead .spacer{margin-left:auto}
.masthead-tools{display:flex;align-items:center;gap:var(--s3)}

/* The Cities panel: a native <details> whose summary is a 44px masthead item
   and whose panel is a band across the foot of the masthead.

   The band is anchored to the masthead rather than laid out inside the nav,
   and it takes no coordinates to do it: the masthead is the containing block
   (it is already sticky), so top:100% is "under the row" whatever height the
   row has wrapped to, and left/right:0 is "as wide as the site". Laying it out
   in flow instead would mean flattening the nav's own box, and then the four
   links wrap one at a time on a phone instead of as a row. */
.cities-menu{display:flex;align-items:center}
.cities-menu summary{display:inline-flex;align-items:center;gap:var(--s1);
                     min-height:44px;cursor:pointer;list-style:none;
                     color:var(--ink-soft);font-size:var(--t-small);font-weight:600}
.cities-menu summary::-webkit-details-marker{display:none}
.cities-menu summary:hover,.cities-menu summary[aria-current="page"],
.cities-menu[open] summary{color:var(--accent)}
/* The masthead travels with the reader, so the panel has to fit under it on
   its own — hence the scroll, which is the panel's and not the page's. */
.cities-panel{position:absolute;left:0;right:0;top:100%;
              max-height:calc(100dvh - 100%);overflow-y:auto;
              overscroll-behavior:contain;
              padding:var(--s4) 0 var(--s5);background:var(--ground);
              border-top:1px solid var(--rule-soft);
              border-bottom:1px solid var(--rule)}
.cities-panel .cities{margin-top:var(--s3)}
.cities-panel .note a{display:inline-flex;align-items:center;min-height:44px}

.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,.footer-links [aria-current]{display:inline-flex;align-items:center;
                min-height:24px}

/* The doormat: the four masthead sections spelled out at the foot of every
   page, so no page of the site is more than two clicks from any other. Bold
   group heads, and every link a 24px running-text target with real
   spacing between them — WCAG 2.5.8's AA floor, which is the right one here:
   these are set in running type, and 44px each would make the footer taller
   than the page it serves.

   An auto-fit grid, not a wrapping flex row: the groups collapse to one column
   at phone widths and keep their order, and no group ever lands on a centred
   line of its own. */
/* rem tracks, not px: the doormat and the site map are lists of words, so their
   columns should widen with the reader's font size the way the words do. The
   px minmax()s elsewhere on this sheet size around cards and tables, which do
   not. 9rem is two columns at 390 and four above 800. */
.doormat{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
         gap:var(--s5);margin-bottom:var(--s5)}
/* h3 as well as h2: the home page's rules block is a doormat too, and there
   the section's own h2 sits above the groups, so the group heads are h3s.
   Same job, same type — the level follows the outline, not the look. */
.doormat h2,.doormat h3{font-size:var(--t-small);font-weight:700;color:var(--ink-soft);
            margin:0 0 var(--s2)}
.doormat-list{list-style:none;margin:0;padding:0}
/* min-width as well as min-height: "Bali" sets 23.6px wide at --t-small, which
   is under WCAG 2.5.8's floor on the axis nobody thinks to measure. */
.doormat-list a,.doormat-list [aria-current]{display:inline-flex;align-items:center;
           min-width:24px;min-height:24px;padding:var(--s1) 0}

/* 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}
/* A <button> takes the browser's own line-height and stood 45px beside a 49px
   link wearing the same class. One control, one height, whichever element. */
button.btn{line-height:inherit}
.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)}
/* A fixed set of three rather than a deck that grows with the data, so it takes
   explicit lanes rather than auto-fill's. auto-fill sizes tracks to the ten
   cities it was written for: at 1120 it lays four 261px tracks and the three
   start-here cards fill three of them, stopping 274px short of the container
   with an empty lane beside them; between 500 and 670 it lays two and the third
   card drops onto a row of its own. Three lanes, one below the phone
   breakpoint, and every card keeps its lane at every width. */
.cities.trio{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){
  .cities.trio{grid-template-columns:1fr}
}
.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.
   ============================================================ */
/* A table is data, not prose: it takes the width the data needs rather than
   the reading measure, centred on the column it breaks out of. Without this
   the 620px floor below sat inside a narrower column and 300 of the 314
   tables on the site scrolled sideways on a desktop for no reason. */
.doc .tbox,.legal .tbox{position:relative;left:50%;translate:-50%;
                        width:max-content;min-width:100%;max-width:var(--wide)}
.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)}
/* A row header that names a page links to it. Ink, not jade: it is a heading
   first, and ten jade names down a data column would read as the table's
   subject changing colour. The underline is the affordance, so nothing is
   said by colour alone. Running type inside a table row, hence WCAG 2.5.8's
   24px rather than Apple's 44 — a 44px row header would set the height of
   every row beside it. */
th.band a{display:inline-flex;align-items:center;min-height:24px;min-width:24px;
          color:inherit;text-decoration:underline;text-underline-offset:.15em}

/* ============================================================
   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)}
/* The name links to the page that sells the thing — see the linked-heading
   rule under THE SITE MAP, which this shares. */
.price-card h2,.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)}
/* The buy control is a form, because it POSTs, and a form is a box: left alone
   it shrink-wraps its button while the link in the next card fills the lane.
   display:contents takes the box away, so the button is the card's own flex
   item and lines up with the controls beside it. */
.price-card form.button_to{display:contents}

/* ============================================================
   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. */
/* The measure is 66ch of the sans this element inherits, but the column sets
   17px serif, whose ch is wider — so 66ch of sans rendered 60 characters of
   serif, a column narrower than the 45–75 range asks for and narrower than
   every table in it. Four gutter steps put it back at 66 characters. */
.doc,.legal{max-width:calc(var(--measure) + var(--s5) * 4);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 — the answer paragraph — opens the prose column.
   It has to restate .lede's type, because `.doc .prose p` above is a class more
   specific than the bare `.lede` and was quietly winning the font-size. The
   margin here was the giveaway: the rule existed, so the lede was meant to be
   distinguished, and on 186 article pages it rendered at body size anyway.
   The content brief calls this block "the single most important on the page". */
.doc .prose > .lede:first-child{font-size:20px;line-height:1.5;
                                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}

/* The two city cards a comparison opens with, above its own prose. Both
   verdicts are on screen before the argument starts, and the pair keeps its
   two lanes at every width rather than dropping one onto a centred line. */
.pair{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:var(--s5) 0 var(--s6)}
.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,.read-on [aria-current]{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 page being read: listed, but not a link. shared/_link_list renders it as
   a span, the same move .breadcrumbs makes with its last crumb, and the colour
   says so without changing the row's height or its place in the list. */
.read-on [aria-current],.doormat-list [aria-current],
.footer-links [aria-current]{color:var(--ink-faint)}

/* RELATED — the computed neighbours, directly under the article.
   Nothing between the prose and these links: NN/g measured anything in between
   as halving their use, which is why the shell renders this before the pager
   and the offer rather than after them. It is .read-on lists under group
   headings, so every link is already a 44px control.

   The block takes no margin of its own: its section heading is visually
   hidden and out of flow, so the first h3's own --s5 is what separates it
   from the prose, and a second margin here would only be added to that.
   Type comes from the .eyebrow rule above; only the rhythm is set here. */
.related h3{margin:var(--s5) 0 0}
/* Every .read-on, not only the ones inside .related and .doormat: the hairline
   between rows separates rows, and after the last one there is no next row to
   separate it from. What follows instead draws its own boundary — a group
   heading, the pager's top rule, the edition note's — so the closing hairline
   is a second line in the same gap, and two lines with empty space between
   them read as a mistake rather than as a boundary.

   This was scoped to .related and .doormat and left the bare lists — /compare,
   /rules, /sitemap, the hub's sections — drawing both. The home page's rules
   doormat made the cost plainest: five groups of five different lengths, so
   the hairlines ended at five different heights across one row. */
.read-on li:last-child{border-bottom:0}

/* ============================================================
   THE SITE MAP — every page of the site, on one page
   ============================================================ */
/* Ten city columns on their accent rails — the data encoding the design system
   reserves for cities — then the three other sections. Static and
   multi-column: NN/g measured dynamic site maps as failures, and a reader who
   opens a site map has already given up on the chrome.

   The columns are an explicit auto-fill grid, so every city keeps its lane at
   every width rather than one dropping onto a centred line of its own. */
/* rem tracks again, for the same reason as .doormat: these are lists of words. */
.sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--s5)}
/* > section, not .section: a city column is a grid item, not a page section, so
   it does not want .section's 52px of rhythm above it and should not have to
   out-order a rule that sets one. The rail sets the rhythm here. */
.sitemap > section{border-left:4px solid var(--rail);padding-left:var(--s4)}
.sitemap h2{font-size:var(--t-h3);margin:0}
/* A heading that names a page links to it — the city column to its hub, the
   section head to its index, the price card to the page that sells the thing.
   Ink rather than jade, because it is a heading first, so the affordance has to
   come from somewhere else: a quiet rule-weight underline at rest, the
   heading's own colour on hover. Nothing here is said by colour alone, and
   nothing waits for a hover that a phone never sends.

   44px in both axes because it is a standalone control, and target_size_test
   measures these selectors wherever a linked heading appears. */
.sitemap h2 a,.sec-head h2 a,.price-card h3 a{color:var(--ink);
          text-decoration:underline;text-decoration-color:var(--rule);
          text-underline-offset:.2em;
          display:inline-flex;align-items:center;min-width:44px;min-height:44px}
/* A city column's head is the whole row, not the four letters of "Bali". */
.sitemap h2 a{display:flex}
.sitemap h2 a:hover,.sec-head h2 a:hover,
.price-card h3 a:hover{text-decoration-color:currentColor}
/* One column inside a column: .read-on columnises at 24rem, which is wider than
   either the site map's lane or the reading measure the related block sits in. */
.sitemap .read-on,.related .read-on{column-width:auto}
.sitemap .read-on{margin-top:var(--s2)}

/* ============================================================
   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)}
/* One lane for every book that holds the page's answer, at equal weight. An
   explicit grid, so two lanes sit side by side where there is room and stack
   where there is not, and neither drops to a line of its own half-width. */
.lanes{display:grid;column-gap:var(--s5);row-gap:var(--s2);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
/* Each lane borrows the card's rows, so the two titles share a line, and the
   two prices, and the two buttons, whatever either lane holds above them.
   Align text and buttons to show how information is related (Apple). */
.lane{display:grid;grid-template-rows:subgrid;grid-row:span 7}
.lane .covers{grid-row:1;align-self:end}
.lane h2{grid-row:2}
.lane .amount{grid-row:3}
.lane .includes{grid-row:4}
.lane .arithmetic{grid-row:5}
.lane .terms,.lane .note{grid-row:6}
.lane .btn{grid-row:7;margin-top:var(--s2)}
/* In the document column the card sits between two blocks of prose, and a
   card narrower than the handoff above it and the paragraph below it reads as
   a mistake. It fills the column, as they do. On a .spread page the column is
   the full container, so there the card keeps its own width. */
.doc .offer,.offer:has(.lane + .lane){max-width:none}
/* Kept to the measure like any other text; `pretty` stops the last word of
   the refund link landing on a line by itself. */
.offer .terms{font-size:var(--t-micro);color:var(--ink-faint);margin:0;text-wrap:pretty}
.offer .terms a{color:inherit}
/* Everything, below the lanes and quieter than them: a rule above it, a ghost
   button inside it. It is the dearest thing on the card, so it may be. */
.upgrade{display:flex;flex-direction:column;gap:var(--s2);
         margin-top:var(--s3);padding-top:var(--s4);border-top:1px solid var(--rule)}
.upgrade h3{margin:0;font-size:var(--t-body)}
.upgrade .btn{align-self:flex-start}
/* Eleven books on one shelf: eleven equal lanes, so none wraps alone. */
.upgrade .covers.is-many{grid-template-columns:repeat(11,minmax(0,var(--s6)))}
/* Two lanes need 15rem each and the gap between them. Below that they stack,
   and a stacked lane is separated from the button above it the way the
   upgrade is: a rule and the same space. The card measures itself, so this
   holds wherever the card is placed. */
.offer{container-type:inline-size}
@container (width < 32rem){
  .lane + .lane{margin-top:var(--s3);padding-top:var(--s4);border-top:1px solid var(--rule)}
}
/* The covers of what the card sells. An explicit grid, so eleven covers keep
   their lanes at every width instead of wrapping one onto a line of its own.
   One or two books get the larger lane; a bundle gets the smaller. */
.covers{display:grid;grid-template-columns:repeat(auto-fill,var(--s7));
        gap:var(--s2);margin-bottom:var(--s2)}
/* Six to a row, always: the Thai pack is six and fits one row at any width,
   the library is eleven and breaks six and five. auto-fill put five on a
   phone's row and left the sixth alone on the next. */
.covers.is-many{grid-template-columns:repeat(6,minmax(0,var(--s6)))}
.covers img{display:block;width:100%;height:auto;border-radius:var(--s1);
            border:1px solid var(--rule)}

/* ============================================================
   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}