@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/bodoni-moda.e3d1b6d7.woff2') format('woff2-variations')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/bodoni-moda-italic.07fcb751.woff2') format('woff2-variations')}
@font-face{font-family:Chivo;font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/chivo.a3ed33fd.woff2') format('woff2-variations')}
html{scroll-behavior:smooth}
body{margin:0;background:#F4F1E8;color:#0C0C0B;font-family:Chivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#C4271E;text-decoration:none}
a:hover{color:#0C0C0B}
h1,h2{text-wrap:balance}
p,li,div{text-wrap:pretty}
#doc{container-type:inline-size;margin:0 auto}
.wrap{max-width:760px;margin:0 auto;padding:0 40px}
h2{font-family:'Bodoni Moda',Didot,Georgia,serif;font-weight:400;font-size:44px;line-height:1;letter-spacing:-.02em;margin:0}
h3{font-family:'Bodoni Moda',Didot,Georgia,serif;font-weight:400;font-size:23px;line-height:1.15;margin:38px 0 0}
p{font:400 16.5px/1.68 Chivo,system-ui,sans-serif;color:#3A3833;margin:12px 0 0}
ul{margin:12px 0 0;padding-left:20px;font:400 16.5px/1.72 Chivo,system-ui,sans-serif;color:#3A3833}
li{margin-bottom:6px}
.eyebrow{font:700 10.5px/1 Chivo,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#C4271E;border-top:2px solid #E63329;display:inline-block;padding-top:7px}
.dim{color:#5A574F}
.sect{padding:74px 0 0;margin-top:74px;border-top:2px solid #0C0C0B;scroll-margin-top:54px}
.fill{background:rgba(230,51,41,.1);border-bottom:1px solid rgba(196,39,30,.5);padding:0 3px;font-weight:600;font-size:15px}
@container (max-width:700px){.wrap{padding:0 22px}h2{font-size:33px}h1{font-size:40px!important}.sect{padding-top:52px;margin-top:52px}}

/* The palette, named once. Every colour in the design file is a var() now, so a
   value exists in exactly one place and a new one cannot be typed in by accident.
   The first six are the guide's own tokens (tools/_guide_styles.css) at the same
   values, so the two halves of the site finally share a definition rather than two
   lists that had drifted to 37 values between them.
   tools/palette_check.py fails the build on a raw hex that is not one of these. */
:root {
  --paper: #F4F1E8;   --ink: #0C0C0B;      --body: #3A3833;
  --muted: #5A574F;   --red: #C4271E;      --rule-red: #E63329;
  --white: #FFFFFF;
  /* Surfaces above paper, and the phone in its dark state. */
  --cream: #FBF9F4;   --sand: #E5DDD5;
  --dark: #1A1917;
  /* The app's recessive mark: the share step's page dots. */
  --stone: #D9D2C2;
  /* Small text and hairlines between muted and paper. */
  --gray: #6E6B64;    --line: #C4BFB6;
  /* Red held down, and red on a dark ground. */
  --red-pressed: #A81F18;                  --coral: #FF7A6D;
  /* Text that sits on a photograph. */
  --slate: #5F6D70;   --moss: #4F6153;
  /* WhatsApp, for the one mockup showing a message in it. Their brand, not ours. */
  --wa-green: #075E54; --wa-bubble: #DCF8C6; --wa-bubble-2: #D2F0B8;
  /* The guide's category colours, its one cross-guide axis, at the values
     tools/_guide_styles.css already defines (.chip.cat-*). The filter chips are
     the guide's real navigation, so the homepage's mockup of them needs the same
     eight. Named here rather than typed in, like everything else. */
  --cat-eat: #C4271E;    --cat-drink: #6F3448;   --cat-art: #34526F;
  --cat-wander: #346F4A; --cat-shop: #6F5934;    --cat-stay: #346F6B;
  --cat-daytrip: #344A6F; --cat-weekend: #3A3833;
}

/* Hoisted classes are author-origin and outrank the UA's [hidden] rule, so the
   phone screens and the sent/unsent form states need this said explicitly. */
[hidden] { display: none !important; }

/* Keyboard focus. The design described hover only. */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* Thumb-sized hit areas for the small uppercase links, using the same overlay
   trick the guide uses: absolutely positioned, so not one pixel of layout
   moves. The insets were chosen against the measured gaps between these links
   (24px in the header, 28px in the footer) so no two targets can overlap,
   which would be worse than leaving them small. */
header nav a, footer a, a.link, .credit a { position: relative; }
header nav a::after, footer a::after, a.link::after, .credit a::after {
  content: ""; position: absolute;
  left: -4px; right: -4px; top: -9px; bottom: -6px;
}

/* These stack in a column only 9px apart, so they get just enough to clear
   24px and no more. */
a.olink { position: relative; }
a.olink::after {
  content: ""; position: absolute;
  left: -4px; right: -4px; top: -3px; bottom: -3px;
}

/* House style: no orphaned text. `text-wrap: pretty` stops a single word being
   left alone on the last line of any flowing text; `balance` evens out short
   headings. Fixed-width UI (a phone-mockup nav title, a chip) is handled per
   element, since wrap cannot help inside a locked width. */
h1, h2, h3, h4, h5, h6, .display { text-wrap: balance; }
p, li, figcaption, blockquote, dd, dt { text-wrap: pretty; }
#page div, #app div { text-wrap: pretty; }


.s0{font-family:'Bodoni Moda',Didot,Georgia,serif;font-size:20px;letter-spacing:-.01em;color:#0C0C0B;white-space:nowrap;flex-shrink:0}
.s1{text-decoration:none}
.s2{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px clamp(12px,3vw,22px);min-width:0;font:700 10.5px/1 Chivo,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-wrap:pretty}
.s3{width:100%;padding:0 clamp(16px,3vw,44px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.s4{position:sticky;top:0;z-index:20;background:#F4F1E8;border-bottom:2px solid #0C0C0B;box-sizing:border-box;height:56px;display:flex;align-items:center;text-wrap:pretty}
.s5{font-family:'Bodoni Moda',Didot,Georgia,serif;font-weight:400;font-size:56px;line-height:.98;letter-spacing:-.022em;margin:20px 0 0}
.s6{font-size:18px;max-width:58ch}
.s7{padding-top:78px}
.s8{font-family:'Bodoni Moda',Didot,Georgia,serif;font-size:20px}
.s9{font-size:14px;color:#5A574F;margin-top:8px}
.s10{color:#0C0C0B;text-decoration:none;border-bottom:2px solid transparent;padding-bottom:3px;transition:color .16s ease,border-color .16s ease}
.s11{font-weight:400}
.s12{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;font:700 10.5px/1 Chivo,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5A574F}
.s13{padding-top:70px;padding-bottom:80px;margin-top:70px;border-top:2px solid #0C0C0B;display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;text-wrap:pretty}

.h0:hover,.h0:focus-visible{color:#C4271E;border-bottom-color:#E63329}