@charset "UTF-8";
/**
 * BaliBetween — art-direction layer.
 *
 * WHY A SECOND STYLESHEET
 * -----------------------
 * `site.css` is the layout skeleton: container, type scale, header, footer, buttons,
 * the plain section grammar. This file is the editorial composition layer added by the
 * Visual V2 pass — full-bleed photography, asymmetric splits, graphic canvases, pair
 * grids and the ink statement band.
 *
 * They are separate because they answer different questions. `site.css` says how a
 * BaliBetween page is built; this file says how a BaliBetween page is *edited*, and it
 * is the layer that is expected to keep changing as more photography lands. Keeping it
 * separate also means the monotony fix is auditable in one file: the plain two-column
 * section grammar lives in `site.css`, and this file is what adds the other five.
 *
 * Loaded after `site.css`, so it can override where the two touch.
 *
 * NO JAVASCRIPT. Every effect here is CSS.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * 1. Page rhythm
 *
 * Each band owns its vertical rhythm and a hairline rule above it. The rule is what
 * makes a page read as a sequence of edited spreads rather than one long column.
 * Bands that carry a photograph or an ink surface drop the rule: they are their own
 * division, and a hairline against a full-bleed image is noise.
 * ═════════════════════════════════════════════════════════════════════════════ */

.page {
  padding-bottom: 0;
}

.band {
  padding-block: var(--section-y-phone);
  border-top: 1px solid var(--border-soft);
}

@media (min-width: 700px) {
  .band {
    padding-block: var(--section-y-tablet);
  }
}

@media (min-width: 1000px) {
  .band {
    padding-block: var(--section-y-desktop);
  }
}

.band--bleed,
.band--ink {
  border-top: 0;
}

/* The masthead opens the page, so the first band does not need a rule above it. */
.masthead + .band,
.page > .hero + .band {
  border-top: 0;
}

.masthead {
  padding-top: var(--space-8);
}

.page--composed .masthead {
  padding-top: 0;
}

/* The plain section grammar itself is scoped in `site.css`, where the rule lives.
   Duplicating it here would create two places to keep in step. */

/* A band head that runs the full measure — used where a wide photograph follows and a
   narrow heading rail would look starved beside it. */
.band-title--wide {
  max-width: 30ch;
}

.band-head {
  margin-bottom: var(--space-8);
}

.band-head .band-title {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2. Photography
 *
 * Every image box has an explicit ratio from CSS, so the browser reserves the space
 * before the bytes arrive and the page cannot shift as photographs land. `object-fit`
 * does the cropping, which is what lets the composition change between phone and
 * desktop without shipping a second file.
 * ═════════════════════════════════════════════════════════════════════════════ */

.bb-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bb-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--surface-warm);
}

/* The frame is where the ratio lives. It is always full-bleed against the band, and
   never inset: an image pulled to the viewport edge reads as page structure, while an
   image sitting inside the text column reads as an illustration of the copy. */
.bleed-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  background: var(--surface-warm);
}

@media (min-width: 900px) {
  .bleed-media {
    aspect-ratio: var(--ratio-wide, 21 / 9);
  }
}

.media-caption {
  margin: var(--space-4) 0 0;
  max-width: 62ch;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Editorial figure with an optional caption, used inside splits and pair grids. */
.bb-editorial {
  margin: 0;
}

.bb-editorial__frame {
  position: relative;
  aspect-ratio: var(--ratio, 3 / 2);
  overflow: hidden;
  background: var(--surface-warm);
}

.bb-figure__caption {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 3. The hero
 *
 * Composition, not decoration. The photograph runs to the viewport edge as a 21:9
 * editorial field, and the proposition sits BELOW it on paper rather than on top of
 * it — the field carries the art direction and the typography carries the argument,
 * so neither has to fight the other. This is the arrangement the design system's own
 * homepage prototype chose, and it is the reason the earlier build read as text-only:
 * there was no field at all.
 * ═════════════════════════════════════════════════════════════════════════════ */

.hero {
  margin-top: var(--space-6);
}

.hero-field {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-warm);
}

@media (min-width: 760px) {
  .hero-field {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1100px) {
  .hero-field {
    aspect-ratio: 21 / 9;
  }
}

.hero-body {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.hero-title {
  margin: 0;
  max-width: 18ch;
}

.hero-lede {
  margin: 0;
  max-width: 48ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 1080px) {
  .hero-body {
    grid-template-columns: minmax(0, 34ch) minmax(0, 1fr);
    column-gap: var(--space-12);
    align-items: start;
    margin-top: var(--space-10);
  }

  .hero-title {
    grid-column: 1;
    font-size: var(--text-4xl);
  }

  .hero-prose {
    grid-column: 2;
    padding-top: var(--space-2);
  }
}

.hero-prose > p {
  margin: 0 0 var(--space-4);
  max-width: 52ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg-2);
}

.hero-prose > p:last-of-type {
  margin-bottom: var(--space-6);
}

/*
 * The three-facts-row that used to live here (`.hero-facts` / `.hero-fact`) is GONE,
 * and the reason is worth recording rather than leaving a reader to guess.
 *
 * It was the hero's compact labelled fact row: 24px glyph plus a strong-led paragraph,
 * 1px hairline above, three across at >=760px. The homepage rebuild moved that row out
 * of the hero and into its own band (`band--facts` in `site.css`), because four short
 * facts belong after the discovery index rather than competing with the search act in
 * the first viewport.
 *
 * The rules were not copied — they were MOVED. `.fact-strip` / `.fact-strip__item` in
 * `site.css` is now the single owner of that pattern, so there is one place to change
 * it and no second, stale copy here. Nothing else referenced `.hero-facts`: the other
 * two hero compositions on the site (`/`-area pages and `/bali`) use `.hero-field`,
 * `.hero-body`, `.hero-title`, `.hero-prose` and `.hero-actions`, all of which remain
 * below and above this comment.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * 4. Split band — asymmetric photograph and text
 * ═════════════════════════════════════════════════════════════════════════════ */

.split-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-12);
  }

  /* Deliberately off-centre. A 1:1 row is the least authored arrangement available,
     so the image side takes more or less than half depending on what the section is
     arguing. */
  .band--wimage .split-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .band--wtext .split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .band--flip .split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .band--flip.band--wtext .split-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .band--flip .split-media {
    order: 2;
  }

  .band--flip .split-text {
    order: 1;
  }
}

.split-text .band-title {
  margin-top: 0;
}

.split-text > p:not(.eyebrow) {
  max-width: 58ch;
  color: var(--fg-2);
}

.split-text > p:last-child {
  margin-bottom: 0;
}

/* On the phone the photograph keeps a taller crop; a 16:9 strip above a paragraph
   gives the eye almost nothing to land on. */
.split-media .bb-editorial__frame {
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .split-media .bb-editorial__frame {
    aspect-ratio: 4 / 5;
  }

  .band--wtext .split-media .bb-editorial__frame,
  .band--wide .split-media .bb-editorial__frame {
    aspect-ratio: 3 / 4;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 5. Graphic canvas
 *
 * The band that carries a figure from the figure library. It sits on the warm surface
 * so a graphic never has to compete with the paper behind it, and it is the main
 * rhythm change on a long page.
 * ═════════════════════════════════════════════════════════════════════════════ */

.band--canvas.band--warm {
  background: var(--surface-warm);
}

.canvas-head {
  margin-bottom: var(--space-8);
}

.canvas-head .band-title {
  margin-bottom: var(--space-4);
  max-width: 30ch;
}

.canvas-head .lede {
  margin-top: 0;
  max-width: 56ch;
}

.canvas-figure {
  margin-bottom: var(--space-6);
}

.canvas-body {
  max-width: 62ch;
  color: var(--fg-2);
}

.canvas-body > p {
  margin: 0 0 var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 6. Statement band — deep ink
 *
 * The strongest contrast the system has, used once per page where the argument
 * matters most. Ink bands invert the surface tokens rather than restating colours, so
 * anything placed inside inherits correct contrast instead of being repainted.
 * ═════════════════════════════════════════════════════════════════════════════ */

.band--ink {
  background: var(--fg);
  color: var(--bg);
}

.band--ink .eyebrow {
  color: color-mix(in srgb, var(--bg) 62%, transparent);
  margin-top: 0;
}

.statement-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 1080px) {
  .statement-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: var(--space-12);
    align-items: start;
  }
}

.statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw + 1rem, var(--text-3xl));
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: var(--tracking-display);
  max-width: 22ch;
  color: var(--bg);
}

.statement-body > p {
  margin: 0 0 var(--space-4);
  max-width: 54ch;
  color: color-mix(in srgb, var(--bg) 82%, transparent);
}

.statement-body > p:last-child {
  margin-bottom: 0;
}

/* The three truth modules inside the ink band. Hairlines rather than cards: the
   doctrine rejects the rounded icon-tile language, and a card on ink reads as a
   dashboard widget. */
.truth-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

.truth-item {
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--bg) 22%, transparent);
}

.truth-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.truth-item h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--bg);
}

.truth-item p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: color-mix(in srgb, var(--bg) 78%, transparent);
}

.band--ink a {
  color: var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 7. Pair band — two places, two photographs
 * ═════════════════════════════════════════════════════════════════════════════ */

.pair-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 820px) {
  .pair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
  }
}

.pair-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: var(--space-5);
  background: var(--surface-warm);
}

.pair-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
}

.pair-title a {
  text-decoration: none;
  color: var(--fg);
}

.pair-title a:hover {
  text-decoration: underline;
}

.pair-body {
  margin: 0;
  max-width: 46ch;
  color: var(--fg-2);
}

.pair-link {
  margin: var(--space-4) 0 0;
  font-weight: 500;
}

.pair-link a {
  display: inline-block;
  padding-block: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 8. Closing band
 * ═════════════════════════════════════════════════════════════════════════════ */

.band--close {
  padding-bottom: 0;
}

.close-body {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-8) 0;
}

@media (min-width: 900px) {
  .close-body {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-12);
    align-items: center;
  }
}

.close-copy > p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg-2);
}

.close-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.close-action .cta-note {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9. Reduced motion and forced colours
 * ═════════════════════════════════════════════════════════════════════════════ */

@media (forced-colors: active) {
  .band--ink {
    border: 1px solid CanvasText;
  }

  .bleed-media,
  .hero-field,
  .pair-media,
  .bb-editorial__frame {
    border: 1px solid CanvasText;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 10. The contrast device
 *
 * The homepage's argument is a comparison — a time the venue was never asked about
 * versus a time a venue has agreed to hold. Showing that as two rows is the honest
 * way to make the point; the alternative, a mock-up of a competitor's screen, would
 * be a fabricated artefact. The confirmed row earns the accent rule because it is
 * the state the deterministic system has actually reached, which is the only thing
 * green is allowed to mean.
 * ═════════════════════════════════════════════════════════════════════════════ */

.contrast {
  margin: var(--space-6) 0;
  border-top: 1px solid var(--border-soft);
}

.contrast-row {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}

.contrast-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-4);
  bottom: var(--space-4);
  width: 1px;
  background: var(--border);
}

.contrast-row--confirmed::before {
  width: 2px;
  background: var(--accent);
}

.contrast-key {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.contrast-val {
  margin: 0;
  max-width: 46ch;
  color: var(--fg-2);
}

.contrast-row--other .contrast-val {
  color: var(--muted);
}

.contrast-row--confirmed .contrast-val {
  color: var(--fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 11. Small type utilities the composition needs
 * ═════════════════════════════════════════════════════════════════════════════ */

/* In the hero the eyebrow opens the prose column, so it must not carry the
   standalone top margin `.eyebrow` uses when it heads a band. */
.hero-prose .eyebrow {
  margin: 0 0 var(--space-4);
}

.split-text > .eyebrow,
.canvas-head > .eyebrow,
.statement-lead > .eyebrow {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.link-quiet {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--fg-2);
  text-underline-offset: 3px;
}

.link-quiet:hover {
  color: var(--fg);
}

/* The service lines inside a split band sit under prose, not beside a heading, so
   they tighten up rather than taking the band's own list spacing. */
.split-text .tick-list {
  margin-top: var(--space-5);
  max-width: 58ch;
}

.split-text .tick-list li {
  color: var(--fg-2);
}

.split-text .tick-list strong {
  color: var(--fg);
}

/* A figure placed inside the ink band needs a surface that survives inversion. */
.band--ink .bb-figure,
.band--ink .bb-verify-list,
.band--ink .bb-tax-list {
  color: color-mix(in srgb, var(--bg) 88%, transparent);
}

.band--ink .band-more a {
  color: var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 12. Ratio and crop vocabulary
 *
 * These are classes rather than inline `style` attributes because the site's CSP is
 * `style-src 'self'` with no `unsafe-inline`. An inline ratio is not a style
 * preference the browser might ignore — it is refused outright, and the element then
 * falls back to its intrinsic size, which is what produced a visibly wrong hero in
 * the first build of this pass.
 * ═════════════════════════════════════════════════════════════════════════════ */

.ar-21x9 { aspect-ratio: 21 / 9; }
.ar-16x9 { aspect-ratio: 16 / 9; }
.ar-3x2  { aspect-ratio: 3 / 2; }
.ar-4x3  { aspect-ratio: 4 / 3; }
.ar-1x1  { aspect-ratio: 1 / 1; }
.ar-4x5  { aspect-ratio: 4 / 5; }
.ar-3x4  { aspect-ratio: 3 / 4; }
.ar-2x3  { aspect-ratio: 2 / 3; }

/* The wide photographic bands: a taller crop on a phone, a cinematic strip above
   tablet. A 21:9 strip on a 390px phone is a 167px letterbox — too thin to read as a
   photograph, which is why the narrow crop is the one that changes. */
.ar-bleed {
  aspect-ratio: 4 / 3;
}

@media (min-width: 760px) {
  .ar-bleed {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1100px) {
  .ar-bleed {
    aspect-ratio: 21 / 9;
  }
}

.ar-close {
  aspect-ratio: 4 / 3;
}

@media (min-width: 760px) {
  .ar-close {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1100px) {
  .ar-close {
    aspect-ratio: 21 / 9;
  }
}

/* Crop position. `center` is the default and needs no class. */
.op-top    { object-position: 50% 28%; }
.op-mid    { object-position: 50% 46%; }
.op-bottom { object-position: 50% 72%; }

/* The split band's own frame ratio is set by `.split-media .bb-editorial__frame`,
   so an explicit `ratio` on a split image would fight it. This lets a caller put a
   ratio on a split image deliberately, at higher specificity than the band rule. */
.split-media .bb-editorial__frame.ar-1x1,
.split-media .bb-editorial__frame.ar-4x5,
.split-media .bb-editorial__frame.ar-3x4,
.split-media .bb-editorial__frame.ar-2x3,
.split-media .bb-editorial__frame.ar-3x2,
.split-media .bb-editorial__frame.ar-16x9,
.split-media .bb-editorial__frame.ar-21x9 {
  aspect-ratio: inherit;
}

.split-media .bb-editorial__frame.ar-1x1  { aspect-ratio: 1 / 1; }
.split-media .bb-editorial__frame.ar-4x5  { aspect-ratio: 4 / 5; }
.split-media .bb-editorial__frame.ar-3x4  { aspect-ratio: 3 / 4; }
.split-media .bb-editorial__frame.ar-2x3  { aspect-ratio: 2 / 3; }
.split-media .bb-editorial__frame.ar-3x2  { aspect-ratio: 3 / 2; }
.split-media .bb-editorial__frame.ar-16x9 { aspect-ratio: 16 / 9; }
.split-media .bb-editorial__frame.ar-21x9 { aspect-ratio: 21 / 9; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 13. Figure library surface
 *
 * The figures carry their own geometry and colour as presentation attributes so they
 * render correctly with no stylesheet at all. These rules only take over the things a
 * stylesheet should own — surface, spacing, and the accent role — and they must not
 * set a type scale, because the figures inherit the page's type on purpose.
 * ═════════════════════════════════════════════════════════════════════════════ */

.bb-figure {
  margin: 0;
  color: var(--fg);
}

.bb-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The wayfinding figure is a drawing, not a diagram with a reading order: it can be
   displayed large and centred without further treatment. */
.split-media > .bb-figure {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 14. Figures beside an ink surface
 *
 * A blanket "repaint every stroke light" rule was tried here and removed: it also
 * repainted the accent nodes that mark reached progress and the icon glyphs, which is
 * a truth defect, not a styling one. The figures are authored to carry their own
 * colour, so the composition places them on the warm surface where that colour is
 * already correct, rather than overriding geometry it cannot see.
 *
 * What this rule does is the one thing safe to do: keep the figure on paper while it
 * sits adjacent to an ink band.
 * ═════════════════════════════════════════════════════════════════════════════ */

.canvas-figure .bb-figure {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 15. Area index and readiness
 *
 * The readiness state is the most consequential thing on an area page, so it is set as
 * a labelled status line rather than a badge. `GRAPHICS.md` rejects the badge
 * vocabulary — no shield, no rosette, no "COMING SOON" — and the doctrine forbids
 * urgency and scarcity language, so the state is stated plainly and the colour is a
 * quiet supporting signal rather than the message itself.
 *
 * Colour is never the only carrier: every state also has its words. Only a state that
 * has actually earned progress may take the accent, which is why three of the four are
 * neutral and only the bookable one is green — and why the graphic is designed to look
 * correct with no green at all, which is the state that actually ships today.
 * ═════════════════════════════════════════════════════════════════════════════ */

.area-status {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-5) 0 0;
  padding-left: var(--space-5);
  position: relative;
  max-width: 52ch;
}

.area-status::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 1px;
  background: var(--border);
}

.area-status strong {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.area-status span {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-2);
}

/* Earned progress only. */
.area-status--bookable::before {
  width: 2px;
  background: var(--accent);
}

.area-status--bookable strong {
  color: var(--accent);
}

/* The area index, grouped by region. Not a grid of identical cards: the region
   heading gives the list hierarchy and the readiness line makes every entry
   genuinely different from its neighbours. */
.area-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 760px) {
  .area-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-10);
  }
}

@media (min-width: 1100px) {
  .area-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.area-index__group > .eyebrow {
  margin: 0 0 var(--space-4);
}

.area-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-soft);
}

.area-index__item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-soft);
}

.area-index__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracking-display);
}

.area-index__name a {
  text-decoration: none;
  color: var(--fg);
}

.area-index__name a:hover {
  text-decoration: underline;
}

.area-index__state {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.area-index__state.area-status--bookable {
  color: var(--accent);
}

.area-index__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-2);
}

/* The readiness glossary on the Bali overview. */
.readiness-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 760px) {
  .readiness-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-10);
  }
}

.readiness-item {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.readiness-item h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
}

.readiness-item p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-2);
}

.band--region {
  padding-block: var(--space-8);
}


/* ── provider pre-launch notice ───────────────────────────────────────────────
   The venue portal does not exist yet, so /for-partners says so plainly. The note is
   marked with a left rule rather than a filled callout box: it is an aside on a page a
   venue owner reads carefully, not an alert competing with the page's own argument. */
.pre-launch-note {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
  margin-bottom: var(--space-4);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94em;
  color: var(--fg-2);
}