/* The Outback Experience - base. Near-black ground, editorial display, book body. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-sm) + 1rem);
}

@media (min-width: 1200px) {
  html { scroll-padding-top: calc(var(--header-h) + 1rem); }
}

/* Reduced motion is a floor, not a dimmer. Killing the duration alone leaves an
   iterating animation iterating (fast, forever) and leaves a delay stalling a
   state change that now takes no time to make, so both are pinned too. The one
   piece of motion this build has - the catalogue filter's entrance - is written
   inside a `no-preference` query instead, so under reduce it does not exist at
   all rather than being raced to zero. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 380;
  font-synthesis-weight: none;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Safety net: a heading-styled div must not inherit the body's airy line-height. */
[class*="__title"], [class*="__name"], [class*="__label"],
[class*="__count"], [class*="__figure"], [class*="__value"] { line-height: 1.25; }

/* The short strings that are set like headings but are not h1-h4, so the balance
   on the heading rule below never reached them. Her 25 book-titled tour names are
   the reason this exists: at 768px "Among Giants, Ghosts & Stripes" broke as
   "Among" over "Giants, Ghosts & Stripes" and "Realm of Horns, Stripes & Gibbons"
   as "Realm" over the rest, stranding one word on the line above a title that is
   the strongest typographic asset on the site. Balance, not pretty: these are two
   or three lines, where an even split beats a full line and a stub. */
/* .lede is deliberately NOT in this list: it is prose, and at 390px the homepage
   one runs to ten lines, where Chrome's balancer gives up and silently falls
   back to normal wrapping - so balancing it would have cost it the `pretty` it
   inherits from p and bought nothing. Balance is for the short strings. */
.meta, .stat p,
.door__label, .door__note,
.dep__name, .dep__note,
.day__head, .tier__qual,
.say blockquote, .pull { text-wrap: balance; }

/* Captions run on from a block place-label, so the balancer has an anonymous box
   to work with rather than the whole string; pretty is the honest tool there. */
.plate__cap { text-wrap: pretty; }

img, picture, svg { max-width: 100%; }
img { height: auto; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 420;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}

/* Display tracking is OPTICAL, so it has to move with the size rather than be a
   single em value applied at both ends of a clamp. The brief's craft law is
   "roughly -0.01em at 28px tightening to -0.04em at 80px and above"; a fixed
   -.035em honoured the top of that and missed the bottom, so the phone h1 (35.2px,
   and 28.5px for the long homepage line) shipped at 2.5x the tracking the law
   asks for, which is the cramped-letters failure the law exists to prevent.

   calc(-0.0544em + 1.244px) is that law as one declaration: the em term scales
   with the size, the px term does not, so the pair is a straight line through
   the law's two anchors. Measured against the real rendered sizes -
     28.0px -> -0.0100em   (law: -0.010em)
     35.2px -> -0.0191em
     48.2px -> -0.0286em   (was -0.0280em, index h1 at 1440)
     63.4px -> -0.0348em   (was -0.0350em, phototours h1 at 1440)
     80.0px -> -0.0389em   (law: -0.040em)
   so every desktop value is preserved to within 0.0006em and only the small end
   moves. max() holds the -0.04em floor whatever size is thrown at it. */
h1 {
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: max(-.04em, calc(-.0544em + 1.244px));
}

h2 {
  font-size: clamp(1.75rem, 2.7vw, 2.55rem);
  line-height: 1.1;
  letter-spacing: max(-.04em, calc(-.0544em + 1.244px));
}

h3 {
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -.018em;
}

h4 {
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -.012em;
  margin-bottom: var(--s2);
}

/* Her prose is hers and cannot be re-broken by hand, so the last lines are fixed
   in CSS instead. `pretty` is the tool for a long paragraph (it reflows only the
   last few lines); `balance` is for the short ones, where an even two or three
   lines beats a full line and a stub. Measured before: her homepage standfirst
   ended on "unforgettable." alone at 114px under a 408px line, and three of the
   six door notes ended on a 74-84px stub. */
p { margin: 0 0 1.15em; max-width: var(--maxw-read); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; color: #f2f0ec; }
em, i { font-style: italic; }

a { color: inherit; }

/* A phone number never wraps, wherever it appears - in her prose, in the
   footer, on the contact page or on the floating dock. */
a[href^="tel:"] { white-space: nowrap; }

/* A hyphenated compound set at display size reads as a broken word when the
   line turns at its hyphen ("The Best Photo- / Tours on the Planet"). Her
   words are not touched; the break is moved. */
.nobr { white-space: nowrap; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Body links: turquoise is the typographic accent, underline is the affordance. */
.prose a,
.lnk {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* One grammar for every interactive state on this site, so a stranger learns it
   once: hover brightens toward the turquoise, press goes the whole way to the
   stone ink, and the one filled green action uses the palette's own two lifts.
   Nothing in it dims, tints, zooms or overlays a photograph - the plate rule
   holds on hover as well as at rest, which is why the plate's own feedback lives
   on the caption below the frame. */
.prose a:hover,
.lnk:hover { text-decoration-color: var(--accent); color: var(--accent-hover); }

.prose a:active,
.lnk:active { color: var(--ink); text-decoration-color: var(--ink); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.15rem; max-width: var(--maxw-read); }
li { margin-bottom: .4em; text-wrap: pretty; }
li::marker { color: var(--ink-faint); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s5) 0;
}

/* Every number a reader compares is set in the body face, lining and tabular.
   No price, date, currency symbol or departure figure is ever in the display face. */
.fig,
.dep__price, .dep__dates, .dep__cap,
.tariff__amount, .price__amount, .rate td:last-child,
.stat__figure {
  font-family: var(--body);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 900px; }

.sec { padding-block: var(--s6); }
.sec--tight { padding-block: var(--s5); }
.sec--wide { padding-block: var(--s7); }
.sec--lift { background: var(--ground-lift); }

.rule-top { border-top: 1px solid var(--rule); }

.eyebrow {
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 640;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s2);
  display: block;
}

.eyebrow--quiet { color: var(--ink-quiet); }

.lede {
  font-size: clamp(1.15rem, 1.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
}

.meta {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-quiet);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--action);
  color: var(--on-action);
  padding: .7rem 1.1rem;
  font-weight: 650;
  z-index: 200;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

.skip:hover { background: var(--action-hover); }
.skip:active { background: var(--action-active); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- actions */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  background: var(--action);
  color: var(--on-action);
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 680;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .18s ease;
}

.btn:hover { background: var(--action-hover); color: var(--on-action); }
.btn:active { background: var(--action-active); color: var(--on-action); }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  font-weight: 620;
}

.btn--quiet:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* A text action with a rule under it. Used where a filled button would make
   the action colour stop being scarce. */
.act {
  display: inline-block;
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 640;
  letter-spacing: .02em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  padding-bottom: .18rem;
}

.act:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
.act:active { color: var(--ink); border-bottom-color: var(--ink); }