/* ==========================================================================
   Travelogue — base

   SCOPING RULE, read this before adding anything to this file:

   Our styles live inside `.tg`. Build-script pages wrap their content in
   <div class="tg"> and everything below is written as `.tg <selector>`.

   This is what makes it safe to work directly on the live site with no staging
   copy: our CSS physically cannot reach a page the client built in Avada,
   because that page has no .tg wrapper. Break the scope and we lose that
   guarantee.

   The only unscoped rules are the four global ones at the top, which are
   corrections rather than styling.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Global — corrections only
   -------------------------------------------------------------------------- */

/* Kills the grey flash on tap. Avada does not do this and it makes every
   button on mobile feel like a 2012 website. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Tailwind-era browsers no longer imply this and Avada does not set it on
   everything clickable. */
:where(a, button, summary, [role="button"], label[for]) {
  cursor: pointer;
}

/* Remove the mouse-click outline but keep the keyboard one. Removing both
   would fail PRD §32. */
:where(a, button, summary, input, select, textarea):focus:not(:focus-visible) {
  outline: none;
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--tg-red-ink);
  outline-offset: 3px;
  border-radius: var(--tg-r-sm);
}

/* The six in-page links on the homepage — this week, rooms, location, how to
   join — jumped. A jump gives no sense of how far you moved or of what you
   went past, which on this page is the whole argument: the sections between
   the link and its target are the activities.

   Native, not a script. The reduced-motion block below already turns it off
   for anyone who has asked for that, and it costs nothing per frame. It
   changes anchor clicks and scrollTo, not the feel of the wheel. */
html { scroll-behavior: smooth; }

/* Set by tg.js when the desktop inertia scroll takes over. Native smooth and
   a script easing toward the same target fight each other, and the result is
   a page that overshoots and creeps. The script handles the anchors itself
   while this class is on. */
html.tg-inertia { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   Fonts

   Self-hosted variable woff2. Both faces are OFL.
   font-display: swap so text is readable before the font lands — on a
   Malaysian mobile connection that gap is real.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   Scoped root
   -------------------------------------------------------------------------- */

.tg {
  font-family: var(--tg-body);
  font-size: var(--tg-body-size);
  line-height: var(--tg-lh-body);
  color: var(--tg-ink);
  background: var(--tg-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Breaks a section out of the theme's container to the full viewport width.

   The containment MUST live on an ancestor of .tg, never on .tg itself:
   `overflow-x: clip` on the same element that holds the bleeding child clips
   the child straight back to the container, which on mobile cut the copy off
   at the left edge. `clip` rather than `hidden` so no scroll container is
   created and position:sticky keeps working. */
body:has(.tg) {
  overflow-x: clip;
}

/* The header is sticky, so an anchor jump lands its target underneath it
   unless the browser is told to stop short. The fallback matches the header
   at its usual height; tg.js measures the real one on load and on resize. */
html:has(.tg) {
  scroll-padding-top: calc(var(--tg-nav-h, 76px) + var(--tg-4));
}

.tg .tg--bleed {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

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


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

/* Specificity note, and the reason `.tg.tg` appears throughout this file.

   Avada styles headings with `.post-content h2` (0,1,1) and ships that rule in
   its compiled stylesheet, which WordPress prints AFTER our enqueue no matter
   what priority we use. Our `.tg h2` was also (0,1,1), so Avada won on source
   order and pulled every heading back to Fraunces with text-transform:capitalize.

   Repeating the scope class raises us to (0,2,1) and settles it without a single
   !important. Anything Avada also styles by element gets the doubled scope. */

.tg.tg h1,
.tg.tg h2,
.tg.tg h3,
.tg.tg h4 {
  font-family: var(--tg-display);
  line-height: var(--tg-lh-heading);
  letter-spacing: var(--tg-track-tight);
  color: var(--tg-ink);
  margin: 0 0 var(--tg-4);
  /* Avada capitalises headings. Our copy is written in sentence case and must
     stay that way; Title Case On Every Heading is a tell. */
  text-transform: none;
  text-wrap: balance;
}

.tg.tg h1 { font-size: var(--tg-h1); font-weight: 800; }
.tg.tg h2 { font-size: var(--tg-h2); font-weight: 700; }
.tg.tg h3 { font-size: var(--tg-h3); font-weight: 600; letter-spacing: -0.01em; }
.tg.tg h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }

.tg.tg p,
.tg.tg ul,
.tg.tg ol,
.tg.tg dl {
  margin: 0 0 var(--tg-5);
  max-width: var(--tg-measure);
  text-wrap: pretty;
}

.tg p:last-child,
.tg ul:last-child,
.tg ol:last-child,
.tg dl:last-child {
  margin-bottom: 0;
}

.tg.tg .tg__lead {
  font-size: var(--tg-lead);
  line-height: 1.5;
  color: var(--tg-ink-2);
}

.tg.tg .tg__small {
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}

/* RATIONED: at most one eyebrow per three sections, hero included.

   An uppercase wide-tracked label above every section heading is the single
   most recognisable AI-built-site signature. Most sections get none; the
   heading alone carries it. build_home.py fails the build if the count goes
   over budget. */
.tg .tg__eyebrow {
  display: block;
  font-family: var(--tg-display);
  font-size: var(--tg-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-red-ink);
  margin: 0 0 var(--tg-3);
}

/* Links inside prose. --tg-red-ink, not --tg-red: see tokens.css. */
.tg p a,
.tg li a {
  color: var(--tg-red-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--tg-dur-fast) var(--tg-ease);
}

.tg p a:hover,
.tg li a:hover {
  color: var(--tg-red-deep);
  text-decoration-thickness: 2px;
}

.tg strong { font-weight: 600; }

.tg img,
.tg video,
.tg svg {
  max-width: 100%;
  height: auto;
  display: block;
}


/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.tg__section {
  padding-block: var(--tg-section-y);
  background: var(--tg-surface);
}

/* Sections are told apart by space and a hairline. Not by colour. */
.tg__section + .tg__section {
  border-top: 1px solid var(--tg-line);
}

/* Opt-out for sections that supply their own ground (hero, chalkboard,
   final CTA) — a rule on top of those reads as a seam. */
.tg__section--flush {
  border-top: 0;
}

.tg__section--alt {
  background: var(--tg-surface-2);
}

/* Every hero keeps its bottom padding, whatever it ends on.

   This carried an exception: a hero ending on a photograph dropped to zero so
   the photograph could run down into the seam. That only makes sense for a
   photograph that bleeds to the edge of the screen, and measuring all
   twenty-two pages found that none of them does — every trailing hero
   photograph is 1200px inside a 1440px section, with a 32px radius. So the
   exception was never right anywhere: it put a rounded, inset picture flush
   against the hairline on thirteen pages, which reads as a collision rather
   than as a bleed.

   If a genuinely full-bleed hero photograph is ever wanted, it needs a class
   that says so, not an inference from being last. */
.tg section[class*="hero"] { padding-block-end: var(--tg-section-y); }

.tg__container {
  width: 100%;
  max-width: var(--tg-w-content);
  margin-inline: auto;
  padding-inline: var(--tg-gutter);
}

.tg__container--text {
  max-width: calc(var(--tg-w-text) + (var(--tg-gutter) * 2));
}

.tg__container--bleed {
  max-width: var(--tg-w-bleed);
}

/* Section headers: eyebrow + h2 + optional lead. */
.tg__head {
  max-width: var(--tg-w-text);
  margin-bottom: var(--tg-7);
}

.tg__stack > * + * {
  margin-top: var(--tg-5);
}

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


/* --------------------------------------------------------------------------
   Editorial asymmetry — desktop only

   Offset images, 7/5 splits and pulled captions exist at 1024px and up.
   Below that everything is one column; a shrunken desktop grid is not a
   mobile layout.
   -------------------------------------------------------------------------- */

.tg__split {
  display: grid;
  gap: var(--tg-6);
}

@media (min-width: 1024px) {
  .tg__split {
    grid-template-columns: 7fr 5fr;
    gap: var(--tg-8);
    align-items: center;
  }

  .tg__split--reverse > :first-child {
    order: 2;
  }

  /* Nudges the media block out of the text column's rhythm. This is the
     whole of DESIGN_VARIANCE 7 — restrained, not artsy. */
  .tg__split--offset > :last-child {
    transform: translateY(var(--tg-6));
  }
}