/* Bali Luxury Life. One stylesheet, no third-party requests.
   Quiet opulence: antique gold, ivory and ink. Light theme only.
   The rules behind every value here are in docs/BRAND.md. */

@font-face {
  font-family: "Gloock";
  src: url("/fonts/gloock.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light only;
  --ivory: #fdfcf9;
  --ivory-2: #f6f1e6;
  --sand-line: #e6dcc6;
  --ink: #0b0b0b;
  --ink-body: #2a2721;
  --ink-soft: #4a463e;
  --ink-meta: #6b6457;   /* meta text: #8a8273 darkened to pass 4.5:1 on ivory */
  --ink-mute: #8a8273;   /* decorative only, never body text */
  --gold-line: #a88a55;
  --gold-deep: #7a5c28;
  --gold-mid: #8a6a32;
  --gold-mark: #8f6f36;
  --gold-grad: linear-gradient(100deg, #6b4e1c 0%, #94743a 28%, #c8a96e 50%, #9c7b3e 70%, #6b4e1c 100%);
  /* Small labels on ink: the same gold with lighter ends, so the darkest edge stays above 4.5:1 */
  --gold-grad-ink: linear-gradient(100deg, #9c7b3e 0%, #b8995e 30%, #c8a96e 50%, #b8995e 70%, #9c7b3e 100%);
  --on-ink: #e9e3d4;
  --on-ink-soft: #d9d3c4;
  --on-ink-meta: #b5ad9b;

  --display: "Gloock", "Iowan Old Style", Georgia, serif;
  --text: "Jost", "Futura", "Avenir Next", "Century Gothic", sans-serif;

  --pad: clamp(20px, 4vw, 56px);
  --max: 1640px;
  --measure: 40rem;
  --band: clamp(80px, 10vw, 160px);
  --track: 0.32em;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
  background: var(--ivory);
}
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }
main { display: block; outline: none; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
em { font-style: italic; }
p { text-wrap: pretty; }
strong, b { font-weight: 500; }
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease), filter 0.25s var(--ease);
}
a:hover { color: var(--gold-mid); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
::selection { background: var(--ivory-2); color: var(--ink); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--pad); top: -4rem;
  background: var(--ink); color: var(--ivory);
  padding: 0.7rem 1.1rem; z-index: 10;
  font-size: 0.75rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase;
}
.skip:focus { top: 0.75rem; color: var(--ivory); }

/* ---------- Gold ---------- */
.gold-text, .gold-on-ink {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.gold-on-ink { background-image: var(--gold-grad-ink); }
em.gold-text { padding: 0 0.06em; }
.frame { padding: 3px; background: var(--gold-grad); }
.frame-inner { outline: 1px solid var(--gold-line); outline-offset: -12px; }

/* ---------- Small type ---------- */
.eyebrow, .kicker, .small-head, .meta-label {
  font-family: var(--text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--gold-deep);
  margin: 0;
}
.kicker { margin: 0 0 0.9rem; font-size: 0.625rem; }
.kicker:empty { display: none; }
.kicker a:hover { color: var(--ink); }
.small-head { color: var(--ink-soft); margin-bottom: 1rem; }
.meta {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-meta);
  margin: 0.6rem 0 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.label {
  display: inline-block;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem 0.2rem;
  border: 1px solid currentColor;
  vertical-align: 0.15em;
  margin-left: 0.5rem;
  line-height: 1.3;
}
.label-paid { color: var(--ink); }
.label-draft { color: var(--gold-deep); background: var(--ivory-2); border-color: var(--gold-line); }
.count {
  font-family: var(--display);
  font-size: 0.45em;
  color: var(--gold-mid);
  letter-spacing: 0;
  vertical-align: 0.9em;
  margin-left: 0.2rem;
}
.empty {
  color: var(--ink-soft);
  max-width: var(--measure);
  border-left: 1px solid var(--gold-line);
  padding-left: 1.25rem;
}
.text-link, .more {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 8px;
  white-space: nowrap;
}
.text-link:hover, .more:hover { color: var(--gold-mid); border-bottom-color: var(--gold-mid); }
.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 19px 34px;
  border: 0;
  cursor: pointer;
}
.btn-gold { background: var(--gold-grad); color: var(--ink); }
.btn-gold:hover { color: var(--ink); filter: brightness(1.08); }
.btn-line { border: 1px solid var(--ink); padding: 18px 33px; font-weight: 500; }

/* ---------- Masthead ---------- */
.masthead {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px) var(--pad) 0;
}
.masthead-row { display: flex; justify-content: center; }
.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--ink);
}
.lockup:hover { color: var(--ink); }
.lockup:hover .mark { filter: brightness(1.12); }
.mark { display: block; flex: none; transition: filter 0.25s var(--ease); }
.lockup .mark { width: clamp(46px, 4vw, 58px); height: auto; }
.lockup-bali {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  line-height: 1;
}
.lockup-life {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding-left: var(--track);
  line-height: 1;
}
.lockup-rule { width: 28px; height: 1px; background: var(--gold-grad); }
.nav {
  margin-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--sand-line);
  border-bottom: 1px solid var(--sand-line);
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: clamp(18px, 3.6vw, 56px);
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.nav li { flex: none; }
.nav a {
  display: inline-block;
  padding: 16px 0 15px;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.nav a[aria-current="page"] { color: var(--gold-deep); border-bottom-color: var(--gold-line); }
.nav-sep { position: relative; }
@media (max-width: 40rem) {
  .nav ul { column-gap: 20px; letter-spacing: 0.22em; font-size: 0.6875rem; padding: 6px 0; }
  .nav a { padding: 9px 0; }
}

.build-note {
  background: var(--ivory-2);
  color: var(--gold-deep);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--gold-line);
}

/* ---------- Breadcrumbs ---------- */
.crumbs { padding-top: 1.5rem; }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0;
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-meta);
}
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "\2726"; margin: 0 0.75rem; color: var(--gold-line); font-size: 0.7em; letter-spacing: 0; }
.crumbs a { display: inline-block; padding-block: 0.4rem; color: var(--ink-soft); }
.crumbs a:hover { color: var(--gold-mid); }
.crumbs [aria-current] { display: inline-block; padding-block: 0.4rem; max-width: min(32ch, 60vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Home: hero ---------- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 104px) var(--pad) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.display {
  margin: 0;
  font-size: clamp(60px, 11vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.035em;
}
.hero-title {
  font-size: clamp(44px, 8.2vw, 148px);
  line-height: 0.92;
  max-width: 14ch;
}
.hero-title em { display: block; }
.hero-lede {
  margin: 0;
  max-width: 600px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  color: #36332d;
}
.hero-frame { margin: clamp(40px, 5vw, 72px) var(--pad) 0; }
.hero-plate { position: relative; aspect-ratio: 21 / 9; min-height: 320px; background: var(--ivory-2); overflow: hidden; }
.hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Home: stat band ---------- */
.stats {
  list-style: none;
  margin: clamp(48px, 6vw, 88px) var(--pad) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.stat {
  padding: clamp(28px, 3.5vw, 48px) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.stat + .stat { border-left: 1px solid var(--sand-line); }
@media (max-width: 47.9rem) {
  .stat + .stat { border-left: 0; border-top: 1px solid var(--sand-line); }
}
.stat-n {
  font-family: var(--display);
  font-size: clamp(64px, 7vw, 112px);
  line-height: 0.9;
  padding: 0 0.05em;
  font-variant-numeric: lining-nums;
}
.stat-label {
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
}

/* ---------- Bands (home sections) ---------- */
.band { padding-top: var(--band); }
.band-head { display: flex; gap: 20px; margin-bottom: clamp(36px, 4vw, 52px); }
.band-head-center { flex-direction: column; align-items: center; text-align: center; }
.band-head-split { justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.h2 {
  margin: 0;
  font-size: clamp(46px, 6.4vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.band-lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 520px; }
.band-more { display: flex; justify-content: center; margin: 40px 0 0; }

/* Price ledger: the home sample of the index */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger-head {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 2.4fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  padding: 14px 0 12px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--sand-line);
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep);
}
@media (max-width: 47.9rem) {
  .ledger-head { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 14px; }
  .ledger-head span:nth-child(n+3) { display: none; }
}
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 2.4fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  padding: 28px 14px;
  margin: 0 -14px;
  border-bottom: 1px solid var(--sand-line);
  align-items: baseline;
  transition: background-color 0.25s var(--ease);
}
.ledger-row:hover { background: var(--ivory-2); }
.ledger-row p { margin: 0; }
.ledger-no { font-family: var(--display); font-size: 18px; color: var(--gold-mid); }
.ledger-what { font-size: 18px; font-weight: 400; line-height: 1.4; }
.ledger-who {
  font-size: 0.625rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--gold-deep); margin-top: 8px !important;
}
.ledger-who a:hover { color: var(--ink); }
.ledger-price { font-family: var(--display); font-size: clamp(20px, 2vw, 30px); line-height: 1.15; font-variant-numeric: lining-nums; }
.ledger-price .amount { display: block; }
.ledger-price .amount-alt { font-family: var(--text); font-size: 13px; color: var(--ink-meta); margin-top: 4px; }
.ledger-src { font-size: 13px; line-height: 1.6; color: #5f5a50; overflow-wrap: anywhere; font-weight: 400; }
.ledger-src a { border-bottom: 1px solid var(--sand-line); }
@media (max-width: 47.9rem) {
  .ledger-row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 10px 14px;
    padding: 24px 0;
    margin: 0;
  }
  .ledger-row:hover { background: transparent; }
  .ledger-item, .ledger-price, .ledger-src { grid-column: 2; }
  .ledger-price { font-size: 26px; margin-top: 4px !important; }
}

/* Featured guide: ink panel */
.feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(28px, 4vw, 72px);
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid var(--gold-line);
  padding: clamp(32px, 4.5vw, 72px);
}
.feature-lead { display: flex; flex-direction: column; gap: clamp(22px, 2.5vw, 36px); }
.feature-eyebrow { font-size: 0.65625rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; margin: 0; }
.feature-eyebrow .label { -webkit-text-fill-color: var(--on-ink); color: var(--on-ink); }
.feature-title { margin: 0; font-size: clamp(34px, 3.8vw, 62px); line-height: 1; letter-spacing: -0.02em; color: var(--ivory); }
.feature-title a:hover { color: #d8c49a; }
.feature-body { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; }
.feature-dek { margin: 0; font-size: 18px; line-height: 1.6; color: var(--on-ink-soft); }
.feature-meta { margin: 0; font-size: 13px; letter-spacing: 0.06em; color: var(--gold-line); font-weight: 400; }

/* Guide cards: no boxes, hairlines between */
.guide-list { display: grid; border-top: 1px solid var(--gold-line); }
.feature + .guide-list { border-top: 0; }
.guide-item { padding: 38px 0; border-bottom: 1px solid var(--sand-line); display: flex; flex-direction: column; }
.guide-item .kicker { margin-bottom: 14px; }
.guide-item-title { font-size: clamp(26px, 2.2vw, 30px); line-height: 1.08; margin: 0 0 14px; }
.guide-item-title a:hover { color: var(--gold-mid); }
.guide-item-answer { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 44rem; }
.guide-list-home { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); column-gap: clamp(24px, 3vw, 56px); }

/* Desk index */
.desk-index-head { margin-bottom: 28px; text-align: center; }
.desk-index { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--gold-line); }
.desk-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 16px 40px;
  align-items: center;
  padding: clamp(18px, 2vw, 30px) 0;
  border-top: 1px solid var(--gold-line);
}
.desk-row { margin: 0; font-size: inherit; line-height: 1; letter-spacing: 0; }
.desk-row a { display: grid; grid-template-columns: minmax(0, 90px) minmax(0, 1fr); gap: 24px; align-items: center; }
.desk-row a:hover { color: var(--gold-mid); }
.desk-no { font-family: var(--display); font-size: 22px; justify-self: start; }
.desk-name { font-family: var(--display); font-size: clamp(44px, 8vw, 140px); line-height: 1; letter-spacing: -0.035em; }
.desk-side { text-align: right; }
.desk-desc {
  margin: 0;
  font-size: 0.65625rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; line-height: 1.8;
}
.desk-guides { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; line-height: 1.45; font-weight: 400; }
.desk-guides li { padding: 6px 0; }
.desk-guides a { color: var(--ink-soft); }
.desk-guides a:hover { color: var(--gold-mid); }
.desk-side .meta { margin-top: 10px; }
@media (max-width: 47.9rem) {
  .desk-entry { grid-template-columns: 1fr; }
  .desk-row a { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .desk-side { text-align: left; padding-left: calc(2.75rem + 12px); }
}

/* How we work: the signature frame */
.work { margin: var(--band) var(--pad) 0; }
.work-inner {
  background: var(--ivory);
  padding: clamp(56px, 7vw, 112px) clamp(28px, 5vw, 88px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px);
}
.work-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.h2-work { font-size: clamp(44px, 5.6vw, 92px); line-height: 0.94; }
.principles {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 44px;
}
.principles li { border-top: 1px solid var(--gold-line); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.principles h3 { margin: 0; font-size: 26px; line-height: 1.1; }
.principles p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* Letter */
.letter {
  padding: var(--band) var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
}
.h2-letter { font-size: clamp(44px, 6vw, 100px); line-height: 0.94; max-width: 1100px; }
.letter-lede { margin: 0; max-width: 600px; font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-soft); }
.letter .meta { margin: 0; letter-spacing: 0.02em; }

/* ---------- Inner pages: shared heads and sections ---------- */
.page-head { padding-block: clamp(40px, 6vw, 96px) clamp(28px, 3vw, 48px); max-width: 64rem; }
.page-head .kicker { margin-bottom: 1.25rem; }
.page-title, .guide-title, .company-title {
  font-size: clamp(44px, 7vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
}
.guide-title { font-size: clamp(40px, 5.6vw, 96px); max-width: 18ch; }
.company-title { font-size: clamp(36px, 6vw, 104px); hyphens: auto; }
.page-lede { font-size: clamp(17px, 1.35vw, 20px); color: #36332d; margin: 0; max-width: 40rem; }

.section { padding-block: clamp(56px, 7vw, 112px) 0; }
.section-tight { padding-block: clamp(36px, 4vw, 64px) 0; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.section-head .section-title { margin: 0; }
.section-title {
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
}
.section-title a:hover { color: var(--gold-mid); }
.section-note { font-size: 1rem; color: var(--ink-soft); margin: -0.5rem 0 1.5rem; max-width: 44rem; }

.jump { margin: 0 0 1.5rem; }
.jump ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
}
.jump a { display: inline-block; padding: 10px 14px; border: 1px solid var(--sand-line); }
.jump a:hover { border-color: var(--gold-line); color: var(--gold-mid); background: var(--ivory-2); }

/* ---------- Price tables ---------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-top: 2px solid var(--ink);
}
.table-scroll:focus-visible { outline-offset: 2px; }
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 400;
}
th, td {
  text-align: left;
  vertical-align: baseline;
  padding: 1.1rem 1.25rem 1.1rem 0;
  border-bottom: 1px solid var(--sand-line);
}
thead th {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 0.9rem;
  padding-bottom: 0.8rem;
  white-space: nowrap;
}
tbody tr { transition: background-color 0.25s var(--ease); }
tbody tr:hover > * { background: var(--ivory-2); }
table.prices { min-width: 56rem; }
.prices tbody th { font-weight: 400; font-size: 1rem; line-height: 1.4; color: var(--ink); width: 26%; min-width: 12rem; }
.prices .c-provider { width: 14%; min-width: 9rem; }
.prices .c-provider a { border-bottom: 1px solid var(--sand-line); }
.prices .c-price { text-align: right; width: 1%; min-width: 10rem; padding-right: 2rem; }
.prices thead .c-price { text-align: right; }
.prices .amount {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.15;
  white-space: nowrap;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.prices .amount-alt { font-family: var(--text); font-size: 0.8125rem; color: var(--ink-meta); margin-top: 0.25rem; }
.prices .amount-text { white-space: normal; font-size: 1.125rem; line-height: 1.25; max-width: 11rem; margin-left: auto; }
.item-provider {
  display: block; margin-top: 0.5rem;
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep);
}
table.prices.prices-compact { min-width: 34rem; }
.prices-compact tbody th { width: auto; }
.prices .c-includes { width: 28%; min-width: 16rem; }
.prices td.c-includes { color: var(--ink-soft); font-weight: 300; }
.prices .c-how { width: 1%; }
.prices .how {
  display: inline-block; white-space: nowrap;
  font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-meta);
}
.prices .c-source { width: 1%; white-space: nowrap; padding-right: 0; }
.prices td.c-source { color: #5f5a50; font-size: 0.8125rem; }
.prices .c-source a:not(.row-link) { color: var(--ink); border-bottom: 1px solid var(--sand-line); }
.prices .c-source time { display: block; font-size: 0.8125rem; color: #5f5a50; margin-top: 0.2rem; }
.prices tbody tr { scroll-margin-top: 1rem; }
.prices tbody tr:target > * { background: var(--ivory-2); }
.row-link { display: inline-block; margin-top: 0.15rem; padding: 0.3rem 0.5rem 0.3rem 0; font-size: 0.875rem; font-weight: 500; color: var(--gold-mid); }
.row-link:hover { color: var(--ink); }
.table-note { font-size: 0.8125rem; color: var(--ink-meta); margin: 1.1rem 0 0; font-weight: 400; max-width: 60rem; }
.table-note a { color: var(--ink); border-bottom: 1px solid var(--gold-line); }

/* Phones: each price row becomes a stacked entry, no sideways scrolling */
@media (max-width: 47.9rem) {
  .price-scroll { overflow: visible; }
  table.prices, table.prices.prices-compact { min-width: 0; }
  .prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prices, .prices tbody, .prices tr, .prices th, .prices td { display: block; width: auto !important; min-width: 0 !important; max-width: none; }
  .prices tr { padding: 22px 0 20px; border-bottom: 1px solid var(--sand-line); }
  .prices tbody tr:hover > * { background: transparent; }
  .prices th, .prices td { border: 0; padding: 0; text-align: left !important; white-space: normal !important; }
  .prices tbody th { font-size: 1.0625rem; padding-bottom: 10px; }
  .prices .c-price { padding: 0 0 12px; }
  .prices .amount { font-size: 1.75rem; white-space: normal; }
  .prices .amount-text { margin-left: 0; max-width: none; font-size: 1.25rem; }
  .prices td[data-label] { position: relative; padding: 6px 0 6px calc(6.5rem + 12px); font-size: 0.875rem; }
  .prices td.c-price[data-label] { padding: 0 0 10px; }
  .prices td[data-label]::before {
    content: attr(data-label);
    position: absolute; left: 0; top: 6px; width: 6.5rem;
    font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.5;
    color: var(--gold-deep); padding-top: 0.35em;
  }
  .prices td.c-price::before { display: none; }
  .prices .c-source { white-space: normal; overflow-wrap: anywhere; }
  .prices .c-source time { display: inline; margin-left: 0.4rem; }
  .prices .row-link { margin-left: 0.4rem; }
  .prices tbody tr:target { background: var(--ivory-2); }
}

/* ---------- Guide ---------- */
.guide-head { padding-top: clamp(40px, 6vw, 96px); }
.guide-head .meta { font-size: 0.8125rem; }
.paid-note { font-size: 0.875rem; color: var(--ink-soft); border-left: 1px solid var(--gold-line); padding-left: 1rem; max-width: 40rem; }
.answer {
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: clamp(32px, 4.5vw, 64px) clamp(24px, 4.5vw, 72px);
  background: var(--ink);
  border: 1px solid var(--gold-line);
  max-width: 72rem;
}
.answer-label {
  font-family: var(--text);
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: var(--track);
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  background: var(--gold-grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.answer-text {
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.2vw, 2.125rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ivory);
  font-variant-numeric: lining-nums;
  max-width: 52rem;
}
.guide-prices { padding-top: clamp(56px, 7vw, 112px); }
.protected-note {
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-deep);
  margin: 2rem 0 0;
  padding: 12px 16px;
  border: 1px solid var(--gold-line);
  display: inline-block;
}
.guide-body { display: grid; gap: 2.5rem; padding-top: clamp(48px, 6vw, 96px); padding-bottom: 1rem; }
@media (min-width: 64rem) {
  .guide-body { grid-template-columns: 15rem minmax(0, var(--measure)); gap: clamp(48px, 6vw, 112px); }
  .guide-body > .prose:only-child { grid-column: 2; }
  .toc { position: sticky; top: 1.5rem; align-self: start; }
}
.toc { border-top: 1px solid var(--gold-line); padding-top: 1.1rem; font-size: 0.875rem; }
.toc-head { font-family: var(--text); font-size: 0.625rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--gold-deep); margin: 0 0 1rem; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); padding: 0.45rem 0; border-bottom: 1px solid var(--sand-line); line-height: 1.35; font-weight: 400; }
.toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--display); color: var(--gold-mid); font-size: 0.8125rem; }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--gold-mid); }
.companies-block { margin-top: 1rem; }
.guide-foot { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); font-size: 0.9375rem; color: var(--ink-soft); }
.guide-foot a { color: var(--ink); border-bottom: 1px solid var(--gold-line); }
.draft-banner {
  background: var(--ivory-2);
  color: var(--gold-deep);
  border: 1px solid var(--gold-line);
  font-size: 0.875rem;
  padding: 0.9rem 1.1rem;
  margin: 0 0 2rem;
  max-width: 52rem;
}

/* ---------- Long-form prose ---------- */
.prose { max-width: var(--measure); min-width: 0; color: var(--ink-body); font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 48rem) { .prose { font-size: 1.1875rem; } }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.02; letter-spacing: -0.02em; margin: 3.25rem 0 1.1rem; padding-top: 1.5rem; border-top: 1px solid var(--sand-line); }
.prose > h2:first-child { border-top: 0; padding-top: 0; }
.prose h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.1; margin: 2.25rem 0 0.75rem; }
.prose h4 { font-family: var(--text); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--gold-deep); margin: 1.75rem 0 0.6rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.2em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.5em; padding-left: 0.2em; }
.prose ul li::marker { color: var(--gold-line); content: "\2726  "; font-size: 0.7em; }
.prose ol li::marker { color: var(--gold-mid); font-family: var(--display); }
.prose a { color: var(--ink); border-bottom: 1px solid var(--gold-line); }
.prose a:hover { color: var(--gold-mid); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose blockquote {
  margin: 2.25rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 1px solid var(--gold-line);
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--ink);
}
.prose blockquote p { margin: 0; }
.prose hr { border: 0; height: 1px; background: var(--gold-line); width: 80px; margin: 3rem 0; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; background: var(--ivory-2); padding: 0.1em 0.35em; }
.prose .table-scroll { margin: 1.75rem 0 2rem; }
.prose table { min-width: 30rem; font-size: 0.9375rem; }
.prose table th { font-weight: 500; }
.prose thead th { font-weight: 600; }
.prose h2#sources { font-family: var(--text); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--gold-deep); line-height: 1.6; }
.prose h2#sources + ol { font-size: 0.875rem; color: var(--ink-soft); overflow-wrap: anywhere; font-weight: 400; }

/* ---------- Companies ---------- */
.company-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  column-gap: clamp(24px, 3vw, 56px);
  border-top: 1px solid var(--gold-line);
}
.company-item { padding: 26px 0 28px; border-bottom: 1px solid var(--sand-line); }
.company-name { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.1; margin: 0 0 0.5rem; }
.company-name a:hover { color: var(--gold-mid); }
.company-areas { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 0.75rem; }
.company-summary { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.company-web { font-size: 0.8125rem; margin: 0; font-weight: 400; }
.company-web a { border-bottom: 1px solid var(--sand-line); }

.company { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
.company-head .kicker a:hover { color: var(--ink); }
.company-meta {
  display: flex; flex-wrap: wrap; gap: 1rem 3rem;
  margin: 0; padding: 1.25rem 0; font-size: 0.9375rem; font-weight: 400;
  border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--sand-line);
}
.company-meta dt { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); }
.company-meta dd { margin: 0.3rem 0 0; }
.company-meta a { border-bottom: 1px solid var(--gold-line); }
.notice {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  background: var(--ivory-2);
  border-left: 1px solid var(--gold-line);
  padding: 1rem 1.25rem;
  margin: 2rem 0 0;
  max-width: 44rem;
}
.company-lede { font-family: var(--display); font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.3; max-width: 46rem; margin: 2.25rem 0 0.5rem; }
.facts { list-style: none; margin: 0; padding: 0; max-width: 52rem; border-top: 2px solid var(--ink); }
.facts li { padding: 1.25rem 0; border-bottom: 1px solid var(--sand-line); }
.fact { margin: 0 0 0.4rem; font-weight: 400; }
.fact-source { margin: 0; font-size: 0.8125rem; color: #5f5a50; font-variant-numeric: tabular-nums; font-weight: 400; }
.fact-source a { color: var(--ink); border-bottom: 1px solid var(--sand-line); }
.company-foot { margin-top: 3rem; max-width: 44rem; }
.plain-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gold-line); }
.plain-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--sand-line); font-family: var(--display); font-size: 1.25rem; line-height: 1.25; }
.plain-list a:hover { color: var(--gold-mid); }
.plain-list .meta { margin-left: 0.75rem; display: inline; font-family: var(--text); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); }
.plain-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
.plain-inline a { border-bottom: 1px solid var(--gold-line); padding-bottom: 6px; }

/* ---------- Standing pages, desks, 404 ---------- */
.standing { padding-bottom: clamp(56px, 7vw, 112px); }
.standing .prose { margin-top: 1rem; }
.notfound { padding-block: clamp(56px, 8vw, 140px); text-align: center; }
.notfound .page-title, .notfound .page-lede { margin-inline: auto; }
.notfound p:last-child { margin-top: 2.5rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; }
.notfound p:last-child a { border-bottom: 1px solid var(--gold-line); padding-bottom: 6px; }
.desk-other { margin: clamp(48px, 6vw, 96px) 0 clamp(56px, 7vw, 112px); padding-top: 1.5rem; border-top: 1px solid var(--gold-line); }

/* ---------- Price Index page ---------- */
.how-to-read {
  border: 1px solid var(--gold-line);
  outline: 1px solid var(--sand-line);
  outline-offset: -8px;
  padding: clamp(24px, 3.5vw, 48px);
  margin: 0 0 2.5rem;
  font-size: 1rem;
}
.how-to-read dl { margin: 0; display: grid; gap: 1.5rem clamp(24px, 3vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.how-to-read dl > div { border-top: 1px solid var(--gold-line); padding-top: 1rem; }
.how-to-read dt { font-family: var(--display); font-size: 1.375rem; line-height: 1.15; margin-bottom: 0.5rem; }
.how-to-read dd { margin: 0; color: var(--ink-soft); }
.how-to-read > p { margin: 1.75rem 0 0; }
.how-to-read > p a { font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; border-bottom: 1px solid var(--gold-line); padding-bottom: 6px; }
.data-use {
  font-size: 0.9375rem; color: var(--ink-soft);
  border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--sand-line);
  padding: 1.5rem 0; margin: 0 0 2.5rem; max-width: 64rem;
}
.data-use p { margin: 0 0 0.75rem; }
.data-use p:last-child { margin-bottom: 0; }
.data-use a { color: var(--ink); border-bottom: 1px solid var(--gold-line); }
.data-use strong { color: var(--ink); }
.cite { font-size: 0.8125rem; color: var(--ink-meta); margin: 1rem 0 0; max-width: 48rem; font-weight: 400; }
.cite-label { font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.5625rem; margin-right: 0.5rem; color: var(--gold-deep); }
.cite-url { overflow-wrap: anywhere; }
.filter { display: grid; gap: 0.6rem; margin: 0 0 1.75rem; max-width: 620px; }
.filter[hidden] { display: none; }
.filter label { font-size: 0.625rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--gold-deep); }
.filter input {
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 17px 20px;
  width: 100%;
}
.filter input::placeholder { color: var(--ink-meta); opacity: 1; }
.filter input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.filter-status { margin: 0; font-size: 0.8125rem; color: var(--ink-meta); font-variant-numeric: tabular-nums; font-weight: 400; }
.index-section[hidden] { display: none; }
.index-section { padding-bottom: 1.5rem; }

/* ---------- Related guides ---------- */
.related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); column-gap: clamp(24px, 3vw, 56px); border-top: 1px solid var(--gold-line); }
.related-list li { padding: 26px 0; border-bottom: 1px solid var(--sand-line); }
.related-list .kicker { margin-bottom: 0.6rem; }
.related-title { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.12; margin: 0; }
.related-title a:hover { color: var(--gold-mid); }

/* ---------- Footer ---------- */
.footer {
  margin-top: clamp(64px, 8vw, 128px);
  background: var(--ink);
  color: var(--on-ink);
  border-top: 3px solid var(--gold-line);
  padding: clamp(56px, 7vw, 96px) var(--pad) 32px;
  font-size: 0.9375rem;
}
.home .footer { margin-top: 0; }
.footer a:hover { color: #d8c49a; }
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 40px;
}
.footer-about { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 40rem) { .footer-about { grid-column: span 2; } }
.footer-mark { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-bali {
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 76px);
  line-height: 0.9;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  align-self: flex-start;
  background-image: var(--gold-grad-ink);
}
.footer-life { font-size: 0.65625rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--gold-line); }
.footer-promise { font-size: 15px; line-height: 1.6; margin: 0; max-width: 380px; }
.footer-feeds { margin: 0; font-size: 0.8125rem; color: var(--on-ink-meta); }
.footer-feeds a { border-bottom: 1px solid #3a3326; }
.footer-head { font-family: var(--text); font-size: 0.625rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--gold-line); margin: 0 0 18px; line-height: 1.6; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-nav a { display: inline-block; padding: 2px 0; }
.footer-base {
  max-width: var(--max);
  margin: 56px auto 0;
  padding-top: 22px;
  border-top: 1px solid #3a3326;
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--on-ink-meta);
  line-height: 1.6;
}
.footer-base p { margin: 0; }

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .nav, .filter, .jump, .toc, .footer, .crumbs, .row-link, .related { display: none; }
  body, html { background: #fff; color: #000; }
  .gold-text, .gold-on-ink { -webkit-text-fill-color: #7a5c28; color: #7a5c28; background: none; }
  .answer, .feature { background: #fff; border: 1px solid #7a5c28; }
  .answer-text, .feature-title, .feature-dek { color: #000; }
  .table-scroll { overflow: visible; }
}