/* Rift Line — design system for self_travel-19 ("The Divide")
   New Zealand's two islands, built around the country's own volcanic/glacial
   geology: pounamu-jade ink, warm cream ground, a geothermal-orange North
   Island accent, a fjord-blue South Island accent. Structural signature is
   The Leaning Compass — five independently-clickable North/South preference
   cards, always all visible at once (not a sequential quiz), summing live
   into a single continuous 2-way percentage bar. Distinct from every prior
   mechanic: not a single-axis slider-to-lookup (-13), not a single discrete
   input allocated by formula across two categories (-14), not an exactly-2
   picker (-16), not a circular reorder (-17), not a 2-axis scatter (-18),
   and not a sequential branching quiz recommending 1-of-N (-15) — this is
   simultaneous multi-input summation into a continuous split, all inputs
   visible and re-toggleable at any time. Type pairing (Big Shoulders
   Display + Instrument Sans + Ubuntu Mono) and prefix (rl-) unused
   elsewhere in the series. */

:root {
  /* Stonefield redesign 2026-09-18 — warm volcanic-pumice stone ground
     (#e8e1d6), distinct from every other site's cream/ivory/white/sage/
     gold-cream/slate. Newsreader (editorial serif) + Inter (clean grotesque)
     + Fragment Mono — a fresh trio unused elsewhere. Corners are chamfered
     (clip-path cut, not border-radius) — a genuinely different geometry
     mechanism from every prior site's radius approach. */
  --rl-paper: #e8e1d6;
  --rl-paper-deep: #d9cebb;
  --rl-white: #fffdf9;
  --rl-ink: #211f1c;
  --rl-ink-soft: #5b564c;
  --rl-north: #d97b3f;
  --rl-north-deep: #ab5a28;
  --rl-south: #2f5f73;
  --rl-south-deep: #204553;
  --rl-hairline: rgba(33, 31, 28, .16);
  --rl-hairline-strong: rgba(33, 31, 28, .32);
  --rl-shadow-sm: 0 8px 20px rgba(33, 31, 28, .12);

  --rl-font-display: 'Newsreader', Georgia, serif;
  --rl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rl-font-mono: 'Fragment Mono', ui-monospace, Menlo, monospace;

  --rl-radius: 0px;
  --rl-radius-lg: 0px;
  --rl-chamfer: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --rl-shell: min(100% - 32px, 1180px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--rl-ink); background: var(--rl-paper); font-family: var(--rl-font-body); line-height: 1.58; font-size: 16px; }
h1, h2, h3 { font-family: var(--rl-font-display); font-weight: 500; font-style: italic; line-height: 1.08; margin: 0; letter-spacing: 0; }
.rl-photo, .rl-island, .rl-compass, .rl-dest, .rl-table-wrap, .rl-fact, .rl-itin__item, .rl-fault__card, .rl-lean, .rl-compass__bar, .rl-field input, .rl-field textarea, .rl-btn, .rl-cookie__accept { clip-path: var(--rl-chamfer); }
img { max-width: 100%; display: block; }
.rl-wrap { width: var(--rl-shell); margin-inline: auto; padding: 0 16px; }
a { color: var(--rl-south-deep); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--rl-south); }

.rl-eyebrow { margin: 0 0 .6rem; color: var(--rl-south-deep); font-family: var(--rl-font-mono); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }

/* ---------- photo slots — object-fit baked in from the first draft ---------- */
.rl-photo {
  position: relative;
  border: 1.5px dashed var(--rl-hairline-strong);
  border-radius: var(--rl-radius-lg);
  background: repeating-linear-gradient(135deg, rgba(27,51,40,.06) 0 1px, transparent 1px 16px), var(--rl-white);
  aspect-ratio: var(--ar, 4/3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rl-photo__inner { text-align: center; padding: 16px; max-width: 30ch; }
.rl-photo__label { font-family: var(--rl-font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rl-ink-soft); display: block; margin-bottom: 6px; }
.rl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- header ---------- */
.rl-header { position: static; background: var(--rl-paper); border: none; padding-top: 8px; }
.rl-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 20px; gap: 16px; }
.rl-brand { display: flex; align-items: center; gap: 9px; font-family: var(--rl-font-display); font-weight: 500; font-style: italic; font-size: 1.55rem; color: var(--rl-ink); text-decoration: none; }
.rl-brand__mark { width: 26px; height: 26px; flex: none; }
.rl-nav { display: none; gap: 20px; font-size: .9rem; }
.rl-nav a { color: var(--rl-ink); text-decoration: none; }
.rl-nav a:hover { color: var(--rl-south-deep); }
.rl-menu-toggle { background: none; border: none; color: var(--rl-ink); padding: 6px; cursor: pointer; }
.rl-menu-toggle svg { width: 24px; height: 24px; }
.rl-mobile-nav { display: none; flex-direction: column; padding: 6px 0 18px; gap: 4px; }
.rl-mobile-nav.is-open { display: flex; }
.rl-mobile-nav a { padding: 10px 4px; font-size: .95rem; border-top: 1px solid var(--rl-hairline); color: var(--rl-ink); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.rl-mobile-nav a:first-child { border-top: none; }

@media (min-width: 860px) {
  .rl-nav { display: flex; }
  .rl-menu-toggle { display: none; }
}

/* ---------- hero ---------- */
.rl-hero { padding: 36px 0 44px; }
.rl-hero h1 { font-size: clamp(2.1rem, 5.8vw, 3.2rem); margin: 0; }
.rl-hero__lede { font-size: 1.04rem; color: var(--rl-ink-soft); max-width: 58ch; margin: 16px auto 0; }

/* ---------- hero: Fault Line — Cook Strait as a literal jagged tear ---------- */
.rl-fault { position: relative; margin-top: 18px; }
.rl-fault__half { overflow: hidden; position: relative; }
.rl-fault__half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-fault__half--north {
  aspect-ratio: 16 / 6.4;
  clip-path: polygon(0 0, 100% 0, 100% 84%, 92% 96%, 84% 82%, 76% 96%, 68% 82%, 60% 96%, 52% 82%, 44% 96%, 36% 82%, 28% 96%, 20% 82%, 12% 96%, 4% 82%, 0 90%);
}
.rl-fault__half--north img { object-position: left; }
.rl-fault__half--south {
  aspect-ratio: 16 / 6.4;
  clip-path: polygon(0 14%, 4% 4%, 12% 18%, 20% 4%, 28% 18%, 36% 4%, 44% 18%, 52% 4%, 60% 18%, 68% 4%, 76% 18%, 84% 4%, 92% 18%, 100% 6%, 100% 100%, 0 100%);
}
.rl-fault__half--south img { object-position: right; }
.rl-fault__seam { display: flex; justify-content: center; position: relative; z-index: 2; margin: -30px 0; padding: 0 10px; }
.rl-fault__card {
  background: var(--rl-white); border: 1.5px solid var(--rl-hairline-strong); border-radius: var(--rl-radius-lg);
  padding: 22px 26px; max-width: 640px; text-align: center; box-shadow: 0 14px 32px rgba(27,51,40,.18);
}

.rl-hero__strip { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 26px; font-size: .86rem; color: var(--rl-ink-soft); }
.rl-hero__strip strong { color: var(--rl-ink); font-family: var(--rl-font-display); font-size: 1rem; margin-right: 4px; }

/* ---------- generic section scaffolding ---------- */
.rl-section { padding: 54px 0; }
.rl-section--sunk { background: var(--rl-paper-deep); }
.rl-section--dark { background: var(--rl-ink); color: var(--rl-paper); }
.rl-section--dark .rl-eyebrow { color: #e7a97a; }
.rl-section--dark h2, .rl-section--dark h3 { color: var(--rl-white); }
.rl-section--dark .rl-section__lead { color: rgba(246,241,228,.8); }
.rl-section__head { max-width: 68ch; margin-bottom: 30px; }
.rl-section__head h2 { font-size: clamp(1.6rem, 3.9vw, 2.2rem); }
.rl-section__lead { color: var(--rl-ink-soft); font-size: 1.01rem; margin-top: .6rem; }

/* ---------- SPLIT PROFILE — persistent side-by-side island cards ---------- */
/* Both islands are always shown together, never hidden behind a toggle
   (unlike -6's sitewide swap) — the "binary-choice structural architecture"
   is expressed as a permanent split layout, not a show/hide mechanism. */
.rl-split { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .rl-split { grid-template-columns: 1fr 1fr; } }
.rl-island { border-radius: var(--rl-radius-lg); overflow: hidden; border: 1.5px solid var(--rl-hairline-strong); background: var(--rl-white); }
.rl-island__band { padding: 4px 16px; font-family: var(--rl-font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rl-white); }
.rl-island--north .rl-island__band { background: var(--rl-north); }
.rl-island--south .rl-island__band { background: var(--rl-south); }
.rl-island__body { padding: 20px; }
.rl-island__body h3 { font-size: 1.5rem; margin-bottom: 8px; }
.rl-island--north .rl-island__body h3 { color: var(--rl-north-deep); }
.rl-island--south .rl-island__body h3 { color: var(--rl-south-deep); }
.rl-island__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.rl-island__list li { padding-left: 20px; position: relative; font-size: .95rem; }
.rl-island__list li::before { content: '\2022'; position: absolute; left: 4px; font-weight: 700; }
.rl-island--north .rl-island__list li::before { color: var(--rl-north); }
.rl-island--south .rl-island__list li::before { color: var(--rl-south); }

/* ---------- THE LEANING COMPASS — structural signature ---------- */
/* Five independently-toggleable preference cards, all visible at once, each
   voting North or South; JS sums the answered votes live into a continuous
   two-colour percentage bar plus a verdict line. Re-toggleable at any time,
   no sequential steps, no persistence across visits (deliberately — this is
   a one-session planning tool, not a saved profile). */
.rl-compass { border: 1.5px solid var(--rl-hairline-strong); border-radius: var(--rl-radius-lg); background: var(--rl-white); padding: 22px; box-shadow: var(--rl-shadow-sm); }
.rl-compass__rows { display: grid; gap: 12px; margin-bottom: 22px; }
.rl-lean { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; border: 1.5px solid var(--rl-hairline); border-radius: var(--rl-radius); overflow: hidden; }
.rl-lean__opt { border: none; background: var(--rl-paper); color: var(--rl-ink); font-family: var(--rl-font-body); font-size: .88rem; text-align: left; padding: 14px 14px; cursor: pointer; min-height: 44px; line-height: 1.35; transition: background .15s, color .15s; }
.rl-lean__opt--north:hover { background: rgba(217,123,63,.14); }
.rl-lean__opt--south:hover { background: rgba(47,95,115,.14); }
.rl-lean__opt--north.is-active { background: var(--rl-north); color: var(--rl-white); }
.rl-lean__opt--south.is-active { background: var(--rl-south); color: var(--rl-white); }
.rl-lean__opt--south { text-align: right; border-left: 1px solid var(--rl-hairline); }

.rl-compass__result { border-top: 1.5px solid var(--rl-hairline); padding-top: 18px; }
.rl-compass__bar { height: 26px; border-radius: 999px; overflow: hidden; display: flex; border: 1.5px solid var(--rl-hairline-strong); background: var(--rl-paper-deep); }
.rl-compass__bar-fill--north { background: var(--rl-north); transition: width .25s ease; }
.rl-compass__bar-fill--south { background: var(--rl-south); transition: width .25s ease; }
.rl-compass__labels { display: flex; justify-content: space-between; font-family: var(--rl-font-mono); font-size: .78rem; margin-top: 8px; color: var(--rl-ink-soft); }
.rl-compass__verdict { margin-top: 14px; font-size: 1.05rem; font-weight: 600; }
.rl-compass__reset { margin-top: 10px; background: none; border: 1.5px solid var(--rl-hairline-strong); border-radius: var(--rl-radius); padding: 8px 14px; font-size: .82rem; cursor: pointer; color: var(--rl-ink-soft); min-height: 44px; }
.rl-compass__reset:hover { border-color: var(--rl-ink-soft); color: var(--rl-ink); }

/* ---------- destination cards ---------- */
.rl-destinations { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rl-destinations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rl-destinations { grid-template-columns: repeat(4, 1fr); } }
.rl-dest { display: block; text-decoration: none; color: inherit; border: 1.5px solid var(--rl-hairline-strong); border-radius: var(--rl-radius-lg); overflow: hidden; background: var(--rl-white); transition: transform .15s, box-shadow .15s; }
.rl-dest:hover { transform: translateY(-3px); box-shadow: var(--rl-shadow-sm); }
.rl-dest__body { padding: 16px; }
.rl-dest__tag { font-family: var(--rl-font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.rl-dest--north .rl-dest__tag { color: var(--rl-north-deep); }
.rl-dest--south .rl-dest__tag { color: var(--rl-south-deep); }
.rl-dest__body h3 { font-size: 1.2rem; margin: 6px 0 6px; }
.rl-dest__body p { font-size: .9rem; color: var(--rl-ink-soft); margin: 0; }

/* ---------- comparison table ---------- */
.rl-table-wrap { overflow-x: auto; border: 1.5px solid var(--rl-hairline-strong); border-radius: var(--rl-radius-lg); }
.rl-table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--rl-white); }
.rl-table th, .rl-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--rl-hairline); font-size: .92rem; }
.rl-table thead th { font-family: var(--rl-font-mono); text-transform: uppercase; font-size: .7rem; letter-spacing: .07em; background: var(--rl-paper-deep); }
.rl-table tbody tr:last-child td { border-bottom: none; }
.rl-table td:first-child, .rl-table th:first-child { font-weight: 600; }

/* ---------- facts strip ---------- */
.rl-facts { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .rl-facts { grid-template-columns: repeat(3, 1fr); } }
.rl-fact { border: 1.5px solid var(--rl-hairline-strong); border-radius: var(--rl-radius); padding: 14px 16px; background: var(--rl-white); }
.rl-fact strong { display: block; font-family: var(--rl-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rl-south-deep); margin-bottom: 4px; }

/* ---------- itinerary strip ---------- */
.rl-itin { display: grid; gap: 16px; }
.rl-itin__item { border: 1.5px solid var(--rl-hairline-strong); border-left-width: 5px; border-radius: var(--rl-radius); padding: 16px 18px; background: var(--rl-white); }
.rl-itin__item--north { border-left-color: var(--rl-north); }
.rl-itin__item--south { border-left-color: var(--rl-south); }
.rl-itin__item--split { border-left-color: var(--rl-ink); }
.rl-itin__item h3 { font-size: 1.1rem; margin-bottom: 6px; }
.rl-itin__item p { margin: 0; color: var(--rl-ink-soft); font-size: .92rem; }

/* ---------- callout ---------- */
.rl-callout { display: flex; gap: 16px; align-items: flex-start; }
.rl-callout svg { width: 32px; height: 32px; flex: none; color: var(--rl-north); }
.rl-callout strong { display: block; font-size: 1.1rem; margin-bottom: 6px; }

/* ---------- content prose (legal + detail pages) ---------- */
.rl-content { max-width: 74ch; }
.rl-content h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.rl-content h2:first-child { margin-top: 0; }
.rl-content h3 { font-size: 1.12rem; margin-top: 1.6rem; }
.rl-content p { margin: .8rem 0; }
.rl-legal__back { margin-bottom: 18px; font-size: .9rem; }
.rl-legal__updated { color: var(--rl-ink-soft); font-size: .88rem; margin: 6px 0 26px; }
.rl-page-hero { padding: 36px 0 30px; background: var(--rl-paper-deep); }
.rl-page-hero h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 10px 0 12px; }
.rl-page-hero p { color: var(--rl-ink-soft); max-width: 62ch; }

/* ---------- form ---------- */
.rl-form { display: grid; gap: 16px; max-width: 560px; }
.rl-field { display: grid; gap: 6px; }
.rl-field label { font-size: .88rem; font-weight: 600; }
.rl-field input, .rl-field textarea { border: 1.5px solid var(--rl-hairline-strong); border-radius: var(--rl-radius); padding: 11px 12px; font-family: inherit; font-size: 1rem; background: var(--rl-white); color: var(--rl-ink); min-height: 44px; }
.rl-field textarea { min-height: 130px; resize: vertical; }
.rl-btn { background: transparent; color: var(--rl-ink); border: 2px solid var(--rl-ink); border-radius: 0; padding: 12px 22px; font-size: .96rem; font-weight: 600; font-family: var(--rl-font-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; min-height: 44px; width: fit-content; transition: background .15s, color .15s; }
.rl-btn:hover { background: var(--rl-ink); color: var(--rl-white); }
.rl-form__note { font-size: .84rem; color: var(--rl-ink-soft); margin: 0; }

/* ---------- footer ---------- */
.rl-footer { background: var(--rl-paper-deep); color: var(--rl-ink); padding: 70px 0 26px; margin-top: 20px; }
.rl-footer a { color: var(--rl-ink); }
.rl-footer a:hover { color: var(--rl-south-deep); }
.rl-footer__grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.rl-footer::before { content: 'THE DIVIDE'; display: block; font-family: var(--rl-font-display); font-style: italic; font-weight: 500; font-size: clamp(2.6rem, 9vw, 5.2rem); line-height: 1; margin-bottom: 40px; color: var(--rl-ink); }
@media (min-width: 760px) { .rl-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.rl-footer h4 { font-family: var(--rl-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rl-ink-soft); margin: 0 0 12px; }
.rl-footer__grid a { display: block; padding: 5px 0; text-decoration: none; font-size: .92rem; }
.rl-footer__bottom { border-top: 1px solid var(--rl-hairline-strong); margin-top: 30px; padding-top: 18px; font-size: .82rem; color: var(--rl-ink-soft); }

/* ---------- cookie banner ---------- */
.rl-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--rl-ink); color: var(--rl-paper); padding: 14px 0; }
.rl-cookie__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.rl-cookie__inner p { margin: 0; font-size: .86rem; max-width: 70ch; }
.rl-cookie__inner a { color: #e7a97a; }
.rl-cookie__accept { background: var(--rl-north); color: var(--rl-white); border: none; border-radius: var(--rl-radius); padding: 10px 18px; font-weight: 600; cursor: pointer; min-height: 44px; }

/* ---------- Boundary Flag (detail-page template, replaces generic eyebrow/H1/lede/photo skeleton) ---------- */
.rl-flag { display: inline-flex; align-items: center; padding: 7px 16px 7px 12px; margin-bottom: .55rem; font-family: var(--rl-font-mono); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; clip-path: polygon(0 0, 100% 0, 91% 50%, 100% 100%, 0 100%); }
.rl-flag--north { background: var(--rl-north); }
.rl-flag--south { background: var(--rl-south); }
.rl-page-hero__sub { display: block; color: var(--rl-ink-soft); font-family: var(--rl-font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .6rem; }
.rl-page-hero--north { border-left: 6px solid var(--rl-north); }
.rl-page-hero--south { border-left: 6px solid var(--rl-south); }
.rl-page-hero--north, .rl-page-hero--south { padding-left: 22px; }
@media (min-width: 700px) { .rl-page-hero--north, .rl-page-hero--south { padding-left: 30px; } }