/* ==========================================================================
   Interior pages

   components.css holds the homepage. This file holds what the pages behind it
   need, and only what more than the homepage needs: an editorial hero that is
   type beside photographs rather than type on top of one, the twelve column
   activity mosaic, and the two column "how it works" block.

   Everything below is inside .tg and most selectors are doubled as .tg.tg,
   because base.css sets `.tg.tg p` and `.tg.tg ul` at specificity (0,3,1) and
   a two class selector loses to it. That has cost three separate afternoons.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Editorial hero
   -------------------------------------------------------------------------- */

.tg .tg-ahero {
  border-top: 0;
  padding-block-start: calc(var(--tg-section-y) + 24px);
}

.tg .tg-ahero__grid {
  display: grid;
  gap: var(--tg-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .tg .tg-ahero__grid {
    grid-template-columns: 6fr 6fr;
    gap: var(--tg-8);
  }
}

/* Sized to the column it sits in, not to the viewport. At 3.75rem in a 460px
   column the PRD's H1 broke into four lines with "with the" alone on one. */
.tg.tg .tg-ahero__copy h1 {
  margin: var(--tg-4) 0 0;
  font-size: clamp(2.25rem, 3.6vw, 3.125rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--tg-track-tight);
}

.tg .tg-ahero__serif {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}

.tg.tg .tg-ahero__copy .tg__lead {
  margin-top: var(--tg-5);
  max-width: 46ch;
}

.tg .tg-ahero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-5);
  margin-top: var(--tg-6);
}

.tg .tg-ahero__alt {
  font-size: var(--tg-small);
  font-weight: 600;
  color: var(--tg-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--tg-line);
  padding-bottom: 2px;
  cursor: pointer;
}

@media (hover: hover) {
  .tg .tg-ahero__alt:hover {
    color: var(--tg-ink);
    border-bottom-color: currentColor;
  }
}

/* The availability line the PRD asks for, verbatim. Quiet, but present on
   both screens where somebody might be about to plan a day around this. */
.tg.tg .tg-ahero__note,
.tg.tg .tg-join__note {
  margin-top: var(--tg-5);
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}

/* Mosaic: one wide photograph with two beneath it. The wide one is first in
   the markup, so on a phone, where this stacks under the copy, the page still
   opens on the big picture rather than on two thumbnails. */
.tg .tg-ahero__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tg-3);
}

.tg .tg-ahero__tile {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tg-r-md);
  background: var(--tg-surface-2);
}

.tg .tg-ahero__tile--wide {
  grid-column: 1 / -1;
  border-radius: var(--tg-r-lg);
}

.tg .tg-ahero__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tg .tg-ahero__tile--wide img { aspect-ratio: 16 / 10; }
.tg .tg-ahero__tile--small img { aspect-ratio: 1 / 1; }

@media (min-width: 720px) {
  .tg .tg-ahero__mosaic { gap: var(--tg-4); }
  .tg .tg-ahero__tile--small img { aspect-ratio: 4 / 3; }
}


/* --------------------------------------------------------------------------
   2. The activity mosaic

   Twelve columns, and each card says how many it takes. The spans vary so the
   row rhythm changes down the page: five equal cards leave a two card row at
   the bottom that reads as something having failed to load.
   -------------------------------------------------------------------------- */

.tg .tg-acity__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-6);
}

@media (min-width: 860px) {
  .tg .tg-acity__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--tg-6) var(--tg-5);
  }

  .tg .tg-act { grid-column: span var(--span, 6); }
}

.tg .tg-act {
  display: block;
  color: inherit;
  text-decoration: none;
}

.tg a.tg-act { cursor: pointer; }

.tg .tg-act__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--tg-r-md);
  background: var(--tg-surface-2);
}

.tg .tg-act__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--op, 50% 50%);
  aspect-ratio: 4 / 3;
}

/* The wide card is a band, not a square. */
.tg .tg-act[style*="--span:12"] .tg-act__media img { aspect-ratio: 21 / 9; }

@media (max-width: 859px) {
  .tg .tg-act .tg-act__media img { aspect-ratio: 4 / 3; }
}

/* The day and time, over the photograph. This is the whole argument of the
   page: it is not "we sometimes do things", it is Wednesday at nine. */
.tg .tg-act__stamp {
  position: absolute;
  left: var(--tg-4);
  bottom: var(--tg-4);
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--tg-r-pill);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  font-size: var(--tg-eyebrow);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--tg-ink);
  white-space: nowrap;
}

.tg.tg .tg-act__name {
  margin: var(--tg-5) 0 0;
  font-size: var(--tg-h3);
  font-weight: 700;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-act__line {
  margin: var(--tg-2) 0 0;
  max-width: 42ch;
  color: var(--tg-ink-2);
}

.tg .tg-act__go {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-2);
  margin-top: var(--tg-3);
  font-size: var(--tg-small);
  font-weight: 600;
  color: var(--tg-red-ink);
}

.tg .tg-act__go svg {
  width: 16px;
  height: 16px;
  transition: transform var(--tg-dur-fast) var(--tg-ease);
}

/* No zoom on the photograph. The card lifts, the arrow moves; the picture
   stays the size it was cropped to be. */
@media (hover: hover) {
  .tg a.tg-act:hover .tg-act__go svg { transform: translateX(4px); }
  .tg a.tg-act:hover .tg-act__name { color: var(--tg-red-ink); }
}


/* --------------------------------------------------------------------------
   3. How joining works
   -------------------------------------------------------------------------- */

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

.tg .tg-join__grid {
  display: grid;
  gap: var(--tg-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .tg .tg-join__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--tg-8);
  }
}

.tg .tg-join__photo {
  margin: 0;
  align-self: start;
}

.tg .tg-join__photo img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--tg-surface);
}

.tg.tg .tg-join__photo figcaption {
  margin-top: var(--tg-3);
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}

.tg.tg .tg-join__copy h2 {
  margin: var(--tg-4) 0 0;
  font-size: var(--tg-h2);
  font-weight: 800;
  line-height: var(--tg-lh-heading);
  letter-spacing: var(--tg-track-tight);
  max-width: 14ch;
}

/* The list markers are the icons, so the numbers go. */
.tg.tg .tg-join__steps {
  list-style: none;
  margin: var(--tg-6) 0 var(--tg-6);
  padding: 0;
  max-width: none;
  counter-reset: none;
}

.tg .tg-join__step {
  display: flex;
  gap: var(--tg-4);
  padding-block: var(--tg-5);
  border-top: 1px solid var(--tg-line);
}

.tg .tg-join__step:last-child { border-bottom: 1px solid var(--tg-line); }

.tg .tg-join__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--tg-r-pill);
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
}

.tg .tg-join__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--tg-red-ink);
}

.tg.tg .tg-join__step h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.tg.tg .tg-join__step p {
  margin: var(--tg-1) 0 0;
  max-width: 46ch;
  color: var(--tg-ink-2);
}


/* --------------------------------------------------------------------------
   4. Activity detail pages

   Every one of these is somebody deciding whether to give up an evening, so
   the page opens with the four facts that decide it: which day, what time,
   where to meet, what it costs. The photograph comes after them, not before.
   -------------------------------------------------------------------------- */

.tg .tg-dhero {
  border-top: 0;
  padding-block-start: calc(var(--tg-section-y) + 16px);
}

.tg .tg-dhero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-2);
  font-size: var(--tg-small);
  font-weight: 600;
  color: var(--tg-ink-3);
  text-decoration: none;
  cursor: pointer;
}

.tg .tg-dhero__back svg { width: 16px; height: 16px; }

@media (hover: hover) {
  .tg .tg-dhero__back:hover { color: var(--tg-red-ink); }
}

.tg.tg .tg-dhero h1 {
  margin: var(--tg-5) 0 0;
  max-width: 18ch;
  font-size: clamp(2.25rem, 5.2vw, 4rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: var(--tg-track-tight);
}

/* The location, which the H1 has to carry, at a size that does not fight the
   name of the place for attention. */
.tg .tg-dhero__sub {
  display: block;
  margin-top: var(--tg-3);
  max-width: 40ch;
  font-family: var(--tg-body);
  font-size: var(--tg-lead);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--tg-ink-3);
}

.tg.tg .tg-dhero .tg__lead {
  margin-top: var(--tg-5);
  max-width: 52ch;
}

/* The four facts. A definition list, because that is what it is. */
.tg.tg .tg-dfacts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: var(--tg-7) 0 0;
  padding: 0;
  border-top: 1px solid var(--tg-line);
  max-width: none;
}

@media (min-width: 860px) {
  .tg.tg .tg-dfacts { grid-template-columns: repeat(4, 1fr); }
}

.tg .tg-dfact {
  padding: var(--tg-5) var(--tg-5) var(--tg-5) 0;
  border-bottom: 1px solid var(--tg-line);
}

@media (min-width: 860px) {
  .tg .tg-dfact + .tg-dfact {
    padding-left: var(--tg-5);
    border-left: 1px solid var(--tg-line);
  }
}

.tg.tg .tg-dfact dt {
  margin: 0;
  font-size: var(--tg-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-ink-3);
}

.tg.tg .tg-dfact dd {
  margin: var(--tg-2) 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tg-ink);
}

.tg .tg-dhero__photo {
  margin: var(--tg-7) auto 0;
}

/* A room whose photographs are portrait and small gets them beside the
   heading instead of in a band under it. */
.tg .tg-dhero__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-6);
  align-items: start;
}

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

.tg .tg-dhero__aside { margin: 0; }

.tg .tg-dhero__aside img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--tg-r-lg);
  background: var(--tg-surface-2);
}

.tg .tg-dhero__photo img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--tg-surface-2);
  object-position: var(--op, 50% 50%);
}

@media (min-width: 860px) {
  .tg .tg-dhero__photo img { aspect-ratio: 16 / 9; }
}


/* --- What happens ------------------------------------------------------- */

.tg .tg-dwhat__grid {
  display: grid;
  gap: var(--tg-7);
  align-items: start;
}

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

.tg.tg .tg-dwhat h2 {
  margin: var(--tg-4) 0 0;
  font-size: var(--tg-h2);
  font-weight: 800;
  line-height: var(--tg-lh-heading);
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-dlist {
  list-style: none;
  margin: var(--tg-6) 0 0;
  padding: 0;
  max-width: none;
}

.tg.tg .tg-dlist li {
  display: flex;
  gap: var(--tg-3);
  padding-block: var(--tg-4);
  border-bottom: 1px solid var(--tg-line);
  font-size: 1.0625rem;
  color: var(--tg-ink);
}

.tg .tg-dlist svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  stroke: var(--tg-red-ink);
}

.tg .tg-dnotes {
  display: grid;
  gap: var(--tg-4);
  margin-top: var(--tg-6);
}

/* auto-fit rather than a fixed two, so a third card joins the row instead of
   sitting alone underneath it. */
@media (min-width: 640px) {
  .tg .tg-dnotes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

.tg .tg-dnote {
  padding: var(--tg-5);
  border-radius: var(--tg-r-md);
  background: var(--tg-surface-2);
}

.tg.tg .tg-dnote h3 {
  margin: 0;
  font-size: var(--tg-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-ink-3);
}

.tg.tg .tg-dnote p {
  margin: var(--tg-2) 0 0;
  max-width: none;
  color: var(--tg-ink);
}

/* One grid cell holding one or two photographs. Two cells would put the
   column gap between them, which is 64px and reads as a mistake. */
.tg .tg-dwhat__media {
  display: grid;
  gap: var(--tg-4);
  align-content: start;
}

.tg .tg-dwhat__photo { margin: 0; }

.tg .tg-dwhat__photo img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--tg-surface-2);
}

.tg .tg-dwhat__photo--2 img {
  aspect-ratio: 4 / 3;
  border-radius: var(--tg-r-md);
}


/* --- The rest of the photographs ---------------------------------------- */

/* Bare, the strip is a continuation of the section above it and joins onto
   it. With a heading of its own it is a section, and takes its own top. */
.tg .tg-dstrip--bare { padding-block-start: 0; border-top: 0; }

.tg .tg-dstrip .tg__head { margin-block-end: var(--tg-6); }

/* --n0 / --n2 / --n are the column counts the builder works out for this many
   tiles at this many widths, and they ride in on the row's style attribute. */
.tg .tg-dstrip__row {
  display: grid;
  grid-template-columns: repeat(var(--n0, 1), 1fr);
  gap: var(--tg-4);
}

@media (min-width: 640px) {
  .tg .tg-dstrip__row { grid-template-columns: repeat(var(--n2, 2), 1fr); }
}

@media (min-width: 1024px) {
  .tg .tg-dstrip__row {
    grid-template-columns: repeat(var(--n, 2), 1fr);
    /* --max, where a page sets one, holds the row in narrower than the
       container. Two portrait tiles at half of 1112px are taller than the
       hero photograph above them. */
    max-width: var(--max, none);
    margin-inline: auto;
  }

  /* Same step as the four-photograph guest collection. Only here, where the
     row is one row: below this the tiles are already wrapping in pairs and
     stepping them just looks like a grid that went wrong. */
  .tg .tg-dstrip__row--step > :nth-child(even) {
    margin-block-start: var(--tg-6);
  }

  /* Six tiles, four columns: three across the top, then the fourth starts a
     row one column in, leaving the last cell of the first row and the first
     cell of the second empty. Auto-placement does the rest. Both rows keep a
     straight top and bottom edge, which is what stepping cannot do once the
     tiles wrap. Only from 1024, where there are four columns to offset in. */
  .tg .tg-dstrip__row--offset > :nth-child(4) { grid-column-start: 2; }
}

.tg .tg-dstrip__tile { margin: 0; }

/* The line under the two roof photographs on the activities page. Says what
   they are without giving them a heading, which would make a third thing out
   of a section that is about two. */
.tg .tg-ahome__note {
  margin-block-start: var(--tg-3);
  color: var(--tg-ink-2);
  font-size: var(--tg-small);
}

/* A strip of photographs inside a section that is not a photo strip:
   the two roof shots under the two cards, and the two under the money
   table. Without this the first one starts on the rule under the last
   table row. */
.tg .tg-ahome .tg-dstrip__row,
.tg .tg-costs .tg-dstrip__row { margin-block-start: var(--tg-6); }

/* --r is set on the row. Portrait where the photographs are portrait: four
   phone shots cropped to 4:3 are four pictures of a cave ceiling with the
   people cut off underneath. */
.tg .tg-dstrip__tile img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-md);
  aspect-ratio: var(--r, 4 / 3);
  object-fit: cover;
  /* --op is set once on the row, not per tile: a set of photographs taken the
     same way wants one crop rule, not ten. */
  object-position: var(--op, 50% 50%);
  background: var(--tg-surface-2);
}


/* --- The rail -------------------------------------------------------------
   Two rows of stills running opposite ways, full bleed. Each row holds its
   set twice and the animation translates by exactly one set, so the frame the
   loop lands on is the frame it started from. Same trick and the same
   keyframes as the homepage strip; --n is the number of tiles in a set and is
   set on the element by the builder, so CSS and markup cannot drift apart.

   The row gap has to equal the tile gap or the join between the two tracks
   shows as a wider space every time round. */

/* The rail used to sit outside the container and run to both edges of the
   window, which made it the only thing on the page not lining up with the
   heading above it. Inside the container instead, with the tiles fading out
   at both ends so it still reads as something longer than the frame.

   The frame is a child of the container rather than the container itself:
   on the container the fade covered 44px of its padding and only 28px of
   the tiles it was supposed to be fading. */
.tg .tg-nrail__frame {
  position: relative;
  margin-block-start: var(--tg-6);
}

.tg .tg-nrail__frame::before,
.tg .tg-nrail__frame::after {
  content: "";
  z-index: 1;
  position: absolute;
  inset-block: 0;
  width: 72px;
  pointer-events: none;
}

/* Same three-stop ramp as the two vertical walls: a straight fade still
   shows an edge at the point it reaches zero. */
.tg .tg-nrail__frame::before {
  left: 0;
  background: linear-gradient(to right,
    var(--tg-surface) 0%,
    rgba(255, 255, 255, .92) 26%,
    rgba(255, 255, 255, .55) 58%,
    rgba(255, 255, 255, 0) 100%);
}

.tg .tg-nrail__frame::after {
  right: 0;
  background: linear-gradient(to left,
    var(--tg-surface) 0%,
    rgba(255, 255, 255, .92) 26%,
    rgba(255, 255, 255, .55) 58%,
    rgba(255, 255, 255, 0) 100%);
}

.tg .tg-nrail {
  --card: 150px;
  --gap: 10px;
  --set: calc((var(--card) + var(--gap)) * var(--n, 4));
  display: grid;
  gap: var(--gap);
}

@media (min-width: 768px) {
  .tg .tg-nrail { --card: 240px; --gap: 14px; }
}

.tg .tg-nrail__row {
  display: flex;
  gap: var(--gap);
  overflow: hidden;
}

.tg .tg-nrail__track {
  display: flex;
  flex: none;
  gap: var(--gap);
}

/* No pause under the cursor. The homepage strip stops because its cards are
   links and a link that walks out from under the pointer cannot be clicked;
   these are photographs with nothing to click or focus, so it just runs. The
   reduced-motion scroller below is the stop-it mechanism. */
@media (prefers-reduced-motion: no-preference) {
  /* A set is 2,032px, so 70s is about 29px a second. The homepage strip runs
     at 32 and this one is behind body copy rather than being the point of the
     section, so it wants to be the slower of the two. */
  .tg .tg-nrail__track { animation: tg-marq 70s linear infinite; }

  /* The second row runs the other way. */
  .tg .tg-nrail__row--back .tg-nrail__track { animation-direction: reverse; }
}

/* Standing still, half of each row would be unreachable, so it becomes an
   ordinary scroller and the duplicate set is dropped. */
@media (prefers-reduced-motion: reduce) {
  .tg .tg-nrail__row {
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: var(--tg-gutter);
  }

  .tg .tg-nrail__row > [aria-hidden="true"] { display: none; }
}

.tg .tg-nrail__row::-webkit-scrollbar { display: none; }

.tg .tg-nrail__tile {
  flex: none;
  width: var(--card);
  margin: 0;
}

.tg .tg-nrail__tile img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-md);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--tg-surface-2);
}


/* --- The guests ---------------------------------------------------------
   Two wide over one tall. The tall one stretches to the height of the pair
   beside it, so it is cropped past its own 3:4 and the block ends square
   instead of one column running on past the other. */

.tg .tg-gset__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-4);
}

.tg .tg-gset__grid figure { margin: 0; }

.tg .tg-gset__grid img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-md);
  object-fit: cover;
  background: var(--tg-surface-2);
}

.tg .tg-gset__grid--3 .tg-gset__a img,
.tg .tg-gset__grid--3 .tg-gset__b img { aspect-ratio: 16 / 9; }

.tg .tg-gset__grid--3 .tg-gset__c img { aspect-ratio: 3 / 4; }

@media (min-width: 1024px) {
  .tg .tg-gset__grid--3 { grid-template-columns: 7fr 5fr; }

  .tg .tg-gset__grid--3 .tg-gset__a { grid-area: 1 / 1; }
  .tg .tg-gset__grid--3 .tg-gset__b { grid-area: 2 / 1; }
  .tg .tg-gset__grid--3 .tg-gset__c { grid-area: 1 / 2 / 3 / 3; display: grid; }

  .tg .tg-gset__grid--3 .tg-gset__c img {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* Four of them are four portraits. Unequal boxes would only crop them, so the
   shape comes from stepping every other one down instead. */
.tg .tg-gset__grid--4 { grid-template-columns: repeat(2, 1fr); }

.tg .tg-gset__grid--4 img { aspect-ratio: 3 / 4; }

@media (min-width: 1024px) {
  .tg .tg-gset__grid--4 { grid-template-columns: repeat(4, 1fr); }
  .tg .tg-gset__grid--4 > :nth-child(even) { margin-block-start: var(--tg-6); }
}


/* --- The other four ----------------------------------------------------- */

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

.tg .tg-dmore .tg-act__media { background: var(--tg-surface); }

.tg.tg .tg-dmore .tg__lead a {
  color: var(--tg-red-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5. FAQ page

   Seventeen questions is too many for one undifferentiated list, so they are
   grouped four ways with the group title acting as the landmark you scan for.
   The accordions themselves are the homepage's, unchanged.
   -------------------------------------------------------------------------- */

.tg .tg-fhero__photo { margin: var(--tg-7) auto 0; }

.tg .tg-fhero__photo img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--tg-surface-2);
}

@media (min-width: 860px) {
  .tg .tg-fhero__photo img { aspect-ratio: 21 / 9; }

  /* Except when the photograph has to be shown whole. */
  .tg .tg-fhero__photo--whole img { aspect-ratio: 4 / 3; }
}

.tg .tg-fbody__stack {
  display: grid;
  gap: var(--tg-8);
}

.tg.tg .tg-fgroup__title {
  display: flex;
  align-items: center;
  gap: var(--tg-3);
  margin: 0 0 var(--tg-5);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: var(--tg-track-tight);
}

.tg .tg-fgroup__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--tg-r-pill);
  background: var(--tg-red-wash);
}

.tg .tg-fgroup__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--tg-red-ink);
}

/* The group heading sticks while its own questions scroll past, so it is
   always obvious which of the four you are inside.

   Each group is its own grid. It was written as `display: contents` on the
   group with the two columns on the stack above it, which put the titles and
   the lists into one shared grid — and a sticky element sticks inside its
   containing block, so all four headings shared one and piled up on top of
   each other in the same spot. Per-group grids give each heading a block that
   ends where its questions end, which is what makes it let go.

   The offset is a plain gap, not the height of the navigation: this header
   scrolls away rather than pinning, so leaving room for it left the heading
   floating an inch below the top of the screen. */
@media (min-width: 1024px) {
  .tg .tg-fgroup {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: var(--tg-6);
    align-items: start;
  }

  .tg.tg .tg-fgroup__title {
    position: sticky;
    top: var(--tg-6);
    margin: 0;
    padding-block: var(--tg-2);
  }
}


/* --------------------------------------------------------------------------
   6. Reviews page

   The homepage steps through the five one at a time because it has a hundred
   other things to say. This page has one job, so all five are on the screen
   at once: five people, five faces, five names.
   -------------------------------------------------------------------------- */

.tg .tg-rhero__score {
  margin-top: var(--tg-7);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--tg-2);
  padding-top: var(--tg-5);
  border-top: 1px solid var(--tg-line);
}

.tg .tg-rwall { padding-block-start: var(--tg-7); }

.tg .tg-rwall__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-6);
}

@media (min-width: 860px) {
  .tg .tg-rwall__grid { grid-template-columns: repeat(2, 1fr); }

  /* The first card takes the full width. It is the longest of the five and a
     wall of five equal boxes has no way in. */
  .tg .tg-rcard[style*="--n:0"] { grid-column: 1 / -1; }
  .tg .tg-rcard[style*="--n:0"] .tg-rcard__media img { aspect-ratio: 16 / 9; }
  .tg.tg .tg-rcard[style*="--n:0"] blockquote { font-size: clamp(1.25rem, 2.2vw, 1.625rem); }
}

.tg .tg-rcard {
  margin: 0;
  padding: var(--tg-5);
  border-radius: var(--tg-r-md);
  background: var(--tg-surface-2);
}

.tg .tg-rcard__media {
  overflow: hidden;
  border-radius: var(--tg-r-sm);
  background: var(--tg-surface);
}

.tg .tg-rcard__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tg.tg .tg-rcard blockquote {
  margin: var(--tg-5) 0 0;
  max-width: 46ch;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--tg-ink);
}

.tg .tg-rcard figcaption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--tg-2) var(--tg-3);
  margin-top: var(--tg-4);
}

.tg .tg-rcard__name { font-weight: 700; }

.tg .tg-rcard__src {
  font-size: var(--tg-eyebrow);
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-ink-3);
}

.tg .tg-rwhere__inner {
  display: grid;
  gap: var(--tg-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .tg .tg-rwhere__inner { grid-template-columns: 6fr 6fr; gap: var(--tg-8); }
}

.tg.tg .tg-rwhere h2 {
  margin: var(--tg-4) 0 var(--tg-4);
  font-size: var(--tg-h2);
  font-weight: 800;
  line-height: var(--tg-lh-heading);
  letter-spacing: var(--tg-track-tight);
}


/* --------------------------------------------------------------------------
   7. Location page

   Eight places as rows rather than as big cards, because four of the eight
   are photo placeholders until the client shoots them and a wall of grey
   boxes reads as a broken page. At row size they read as what they are.
   -------------------------------------------------------------------------- */

.tg .tg-lmap { padding-block-start: var(--tg-7); }

.tg .tg-lmap__frame {
  overflow: hidden;
  border-radius: var(--tg-r-lg);
  border: 1px solid var(--tg-line);
  background: var(--tg-surface-2);
  aspect-ratio: 4 / 3;
}

@media (min-width: 860px) {
  .tg .tg-lmap__frame { aspect-ratio: 21 / 9; }
}

.tg .tg-lmap__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tg .tg-lplaces__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-5);
}

@media (min-width: 860px) {
  .tg .tg-lplaces__grid { grid-template-columns: repeat(2, 1fr); gap: var(--tg-6); }
}

.tg .tg-place {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: var(--tg-4);
  align-items: start;
  padding-bottom: var(--tg-5);
  border-bottom: 1px solid var(--tg-line);
}

@media (min-width: 640px) {
  .tg .tg-place { grid-template-columns: 200px 1fr; gap: var(--tg-5); }
}

.tg .tg-place__media {
  overflow: hidden;
  border-radius: var(--tg-r-sm);
  background: var(--tg-surface-2);
}

.tg .tg-place__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The placeholder fills the same box as a photograph would, so the row does
   not change shape when the real one lands. */
.tg .tg-place__media .tg-ph { width: 100%; }

.tg.tg .tg-place h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-place__kicker {
  margin: var(--tg-1) 0 0;
  font-size: var(--tg-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-red-ink);
}

.tg.tg .tg-place__copy p:last-child {
  margin: var(--tg-3) 0 0;
  max-width: 42ch;
  font-size: var(--tg-small);
  color: var(--tg-ink-2);
}

/* The section heading is an h2 and so is every place, so this one has to look
   like the heading of the group rather than another member of it. */
.tg.tg .tg-lplaces__h2 {
  font-size: var(--tg-h2);
  font-weight: 800;
  line-height: var(--tg-lh-heading);
  letter-spacing: var(--tg-track-tight);
}


/* --------------------------------------------------------------------------
   8. How to Find Us

   Reception is upstairs, and that is the sentence somebody needs while they
   are standing on the pavement looking at a shopfront that is not us. It gets
   its own treatment twice on the page.
   -------------------------------------------------------------------------- */

/* The red pill, exactly as it was.
   
   .tg.tg, not .tg, because base.css sets `.tg.tg p` at specificity (0,3,1)
   and this is a <p>. At (0,2,1) the margin computed to zero, which is why it
   sat flush against the button above it and against the cards below it.
   Fourth time this trap has been sprung; scripts/audit-css.mjs now catches
   it. */
.tg.tg .tg-find__shout {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-2);
  margin: var(--tg-6) 0 0;
  padding: 12px 22px;
  border-radius: var(--tg-r-pill);
  /* White on --tg-red is 3.99:1, and this is 16px on a phone. PRD 32. */
  background: var(--tg-red-ink);
  color: #fff;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Under the four pictures it is the conclusion of the sequence, so it is
   centred under the row rather than hugging the first card. */
.tg .tg-walk__end {
  display: flex;
  justify-content: center;
  margin-top: var(--tg-7);
}

.tg.tg .tg-find__shout--end { margin: 0; }

.tg .tg-froutes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-4);
}

@media (min-width: 640px) { .tg .tg-froutes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tg .tg-froutes__grid { grid-template-columns: repeat(4, 1fr); } }

.tg .tg-route {
  padding: var(--tg-5);
  border-radius: var(--tg-r-md);
  border: 1px solid var(--tg-line);
  background: var(--tg-surface);
}

.tg .tg-route__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--tg-r-pill);
  background: var(--tg-red-wash);
}

.tg .tg-route__icon svg { width: 20px; height: 20px; stroke: var(--tg-red-ink); }

.tg.tg .tg-route h2 {
  margin: var(--tg-4) 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-route p {
  margin: var(--tg-2) 0 0;
  max-width: none;
  font-size: var(--tg-small);
  color: var(--tg-ink-2);
}

.tg.tg .tg-route__gap { margin-top: var(--tg-4); }

.tg.tg .tg-walk__row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tg-4);
  margin: 0;
  padding: 0;
  max-width: none;
}

@media (min-width: 860px) {
  .tg.tg .tg-walk__row { grid-template-columns: repeat(4, 1fr); gap: var(--tg-5); }
}

.tg .tg-walk__step { position: relative; }

.tg .tg-walk__n {
  position: absolute;
  z-index: 2;
  top: var(--tg-3);
  left: var(--tg-3);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--tg-r-pill);
  background: var(--tg-ink);
  color: #fff;
  font-size: var(--tg-small);
  font-weight: 800;
}

.tg .tg-walk__step .tg-ph { width: 100%; }

.tg .tg-walk__step img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: var(--op, 50% 50%);
  border-radius: var(--tg-r-md);
  background: var(--tg-surface-2);
}

/* One word under each: street, sign, stairs, reception. The numbers alone
   say the order; these say what you are looking at, which is the question
   somebody standing outside is actually asking. */
.tg .tg-walk__cap {
  display: block;
  margin-block-start: var(--tg-2);
  font-size: var(--tg-small);
  font-weight: 600;
  color: var(--tg-ink-2);
}

.tg.tg .tg-froutes__h2 {
  font-size: var(--tg-h2);
  font-weight: 800;
  line-height: var(--tg-lh-heading);
  letter-spacing: var(--tg-track-tight);
}


/* --------------------------------------------------------------------------
   9. Telling the two location pages apart

   They were built with the same hero and the same map directly under it, and
   read as one page served at two URLs. They are not the same page: one is
   selling a neighbourhood, the other is getting somebody through a door.
   -------------------------------------------------------------------------- */

/* Location: editorial. Type, then one wide photograph of the street. */
.tg .tg-lhero {
  border-top: 0;
  padding-block-start: calc(var(--tg-section-y) + 16px);
}

.tg.tg .tg-lhero h1 {
  margin: var(--tg-5) 0 0;
  max-width: 16ch;
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-lhero .tg__lead { margin-top: var(--tg-5); max-width: 52ch; }

.tg.tg .tg-lhero__aside {
  margin: var(--tg-5) 0 0;
  max-width: 52ch;
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}

.tg.tg .tg-lhero__aside a,
.tg.tg .tg-fhero2__aside a {
  color: var(--tg-red-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tg .tg-lhero__photo { margin: var(--tg-7) auto 0; }

/* --ar and --ar-sm come from the figure, because the builder works the sizes
   attribute out from the same two numbers. They were written twice, here and
   there, and the two drifted: the hero was told 16/9 in the markup while this
   rule still drew it at 21/9, so a third of the picture was cropped away and
   every srcset candidate was chosen for the wrong box. */
.tg .tg-lhero__photo img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-lg);
  aspect-ratio: var(--ar-sm, 4 / 3);
  object-fit: cover;
  background: var(--tg-surface-2);
}

@media (min-width: 860px) {
  .tg .tg-lhero__photo img { aspect-ratio: var(--ar, 21 / 9); }
}

/* How to find us: a working block, not a headline. */
.tg .tg-fhero2 {
  border-top: 0;
  padding-block-start: calc(var(--tg-section-y) + 16px);
}

.tg .tg-fhero2__grid {
  display: grid;
  gap: var(--tg-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .tg .tg-fhero2__grid { grid-template-columns: 6fr 5fr; gap: var(--tg-8); }
}

.tg.tg .tg-fhero2 h1 {
  margin: var(--tg-5) 0 0;
  max-width: 18ch;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-fhero2 .tg__lead { margin-top: var(--tg-5); max-width: 46ch; }

.tg .tg-fhero2__card {
  padding: var(--tg-6);
  border-radius: var(--tg-r-lg);
  border: 1px solid var(--tg-line);
  background: var(--tg-surface-2);
}

.tg.tg .tg-fhero2__addr { margin: 0; max-width: none; }

.tg.tg .tg-fhero2__addr dt {
  margin: 0;
  font-size: var(--tg-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-ink-3);
}

.tg.tg .tg-fhero2__addr dd {
  margin: var(--tg-2) 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tg-ink);
}

.tg.tg .tg-fhero2__card .tg-find__shout { margin-top: var(--tg-5); }
.tg.tg .tg-fhero2__card .tg-pill { margin-top: var(--tg-5); }

.tg.tg .tg-fhero2__aside {
  margin: var(--tg-5) 0 0;
  padding-top: var(--tg-5);
  border-top: 1px solid var(--tg-line);
  max-width: none;
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}


/* --------------------------------------------------------------------------
   10. About Us

   The one page where the text is the point, so it is a reading column with
   photographs and a pull quote between the sections, not a grid of cards.
   -------------------------------------------------------------------------- */

.tg .tg-ahero2 {
  border-top: 0;
  padding-block-start: calc(var(--tg-section-y) + 16px);
}

.tg.tg .tg-ahero2 h1 {
  margin: var(--tg-5) 0 0;
  max-width: 15ch;
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-ahero2__tagline {
  margin: var(--tg-6) 0 0;
  max-width: none;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  color: var(--tg-red-ink);
}

.tg.tg .tg-ahero2 .tg__lead { margin-top: var(--tg-5); max-width: 46ch; }
.tg.tg .tg-ahero2__founded { margin-top: var(--tg-5); max-width: none; }

/* An ordinary container. The earlier version was one gutter wider so a single
   photograph could reach the container's outer edge, and everything narrower
   then had to be pushed back in to line up with the h1. Side by side, nothing
   needs to be wider than the container and none of that is necessary. */
.tg .tg-story__col {
  display: grid;
  gap: var(--tg-8);
}

/* Reading beside its photograph, the side swapping each row. One column below
   860, where two of anything is two of nothing. */
.tg .tg-story__row {
  display: grid;
  gap: var(--tg-6);
  align-items: center;
}

@media (min-width: 860px) {
  .tg .tg-story__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--tg-8);
  }

  .tg .tg-story__row--flip .tg-story__block { order: 2; }
}

/* The column is already about 524px wide, which is inside the measure, so
   this only stops the one-column phone layout running long lines. */
.tg .tg-story__block { max-width: 62ch; margin-inline: 0; }

.tg.tg .tg-story__block h2 {
  margin: 0 0 var(--tg-5);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-story__block p + p { margin-top: var(--tg-4); }

.tg .tg-story__shot { margin: 0; }

.tg .tg-story__shot img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--tg-surface-2);
}

/* A placeholder standing in for one of these photographs takes the same box.
   Not `display`: .tg-ph is a centred flex column and setting display here
   outranks it, which stacked the id, the brief and the file name into one
   run-on line. */
.tg .tg-story__shot .tg-ph {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* The ratio comes from the row, so a portrait photograph beside its text is
   not cropped into a landscape band. Below 860 every photograph is 4/3: a
   portrait one at full phone width is most of a screen. */
@media (min-width: 860px) {
  .tg .tg-story__shot img,
  .tg .tg-story__shot .tg-ph { aspect-ratio: var(--ar, 16 / 9); }
}

/* A set of photographs in the space a single one would take: the six activity
   posters, and the three rooms. --c and --s ride in on the markup because the
   builder is the only thing that knows how many there are and which one is
   wide. */
.tg .tg-story__set {
  display: grid;
  grid-template-columns: repeat(var(--c-sm, 2), 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .tg .tg-story__set { grid-template-columns: repeat(var(--c, 2), 1fr); }
}

.tg .tg-story__tile {
  margin: 0;
  grid-column: span min(var(--s, 1), var(--c-sm, 2));
}

@media (min-width: 640px) {
  .tg .tg-story__tile { grid-column: span var(--s, 1); }
}

/* After the two rules above, on purpose: .tg .tg-story__shot img pins the
   ratio to 4/3 below 860 and to the row's --ar above it, and these tiles each
   carry their own. Same specificity, so source order is what decides.

   Smaller corners as well. --tg-r-lg is 32px, which on a 161px poster is half
   its width. */
.tg .tg-story__set img {
  aspect-ratio: var(--ar, 4 / 3);
  border-radius: var(--tg-r-sm);
}

/* The hostel's own posters, pinned. Two columns on a phone and three from
   640: six of these three across a 350px screen is 105px each, which is a
   thumbnail of a poster rather than a poster. */
/* The ground matters more than the paper does. A white border on a white page
   is not a border, and the first version of this was six screenshots in a
   grid for exactly that reason. On the tinted panel the margins read as paper
   and the shadows have something to fall on. */
.tg .tg-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 14px;
  padding: 26px 20px 34px;
  border-radius: var(--tg-r-lg);
  background: var(--tg-surface-2);
}

@media (min-width: 640px) {
  .tg .tg-wall { grid-template-columns: repeat(3, 1fr); }
}

/* --r and --k come from the builder, which is the only thing that knows the
   order. The white border is the paper margin: the same device as the print
   stack at the foot of every page, and it is what stops six screenshots from
   reading as six screenshots.

   translateY before rotate on purpose. The other way round the nudge is
   applied along the rotated axis and the second column drifts sideways as
   well as down. */
.tg .tg-wall__pin {
  margin: 0;
  padding: 5px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 20, 20, .17);
  transform: translateY(var(--k, 0)) rotate(var(--r, 0deg));
}

/* The tack. Drawn rather than photographed, and small: it is a hint that
   these are on a wall, not a skeuomorphic pin. */
.tg .tg-wall__pin::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 9px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--tg-red);
  /* The white ring is what makes it visible. Half these posters are red
     or dark blue at the top and a bare red dot vanished into them. */
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(20, 20, 20, .55);
}

.tg .tg-wall__pin {
  position: relative;
}

/* Beats .tg .tg-story__shot img, which pins every photograph in this figure
   to the row ratio. Same specificity, so this has to come after it. */
.tg .tg-wall__pin img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .tg .tg-wall__pin { transform: none; }
}

/* The one row that is not two columns: the only place on the page where
   somebody other than the hostel is speaking, so it breaks the rhythm.

   62ch resolves against this figure's 16px, not the blockquote's 28px, and
   comes out at about 527px — which is roughly 33 characters of display type,
   the right measure for a pull quote. Reading the number as if it applied to
   the quote's own size is how it briefly ended up at 289px. */
.tg .tg-story__quote {
  margin: 0;
  max-width: 62ch;
  padding-left: var(--tg-6);
  border-left: 3px solid var(--tg-red);
}

.tg.tg .tg-story__quote blockquote {
  margin: 0;
  max-width: none;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--tg-ink);
}

.tg .tg-story__quote figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-2) var(--tg-3);
  align-items: baseline;
  margin-top: var(--tg-4);
}

.tg .tg-story__quote figcaption span:first-child { font-weight: 700; }

.tg .tg-story__quote figcaption span:last-child {
  font-size: var(--tg-eyebrow);
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-ink-3);
}


/* --------------------------------------------------------------------------
   11. Solo traveller landing page

   Built to be scanned: a split hero, the seven as a grid, and the week's
   board as a list of links with the times on it.
   -------------------------------------------------------------------------- */

.tg .tg-shero {
  border-top: 0;
  padding-block-start: calc(var(--tg-section-y) + 16px);
}

.tg .tg-shero__grid {
  display: grid;
  gap: var(--tg-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .tg .tg-shero__grid { grid-template-columns: 6fr 5fr; gap: var(--tg-8); }
}

.tg.tg .tg-shero h1 {
  margin: var(--tg-5) 0 0;
  max-width: 15ch;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-shero .tg__lead { margin-top: var(--tg-5); max-width: 44ch; }

.tg .tg-shero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tg-5);
  margin-top: var(--tg-6);
}

.tg .tg-shero__photo { margin: 0; }

.tg .tg-shero__photo img {
  display: block;
  width: 100%;
  border-radius: var(--tg-r-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--tg-surface-2);
}

@media (min-width: 1024px) {
  .tg .tg-shero__photo img { aspect-ratio: 4 / 5; }
}

.tg .tg-shl__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-4);
}

@media (min-width: 640px) { .tg .tg-shl__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tg .tg-shl__grid { grid-template-columns: repeat(3, 1fr); } }

/* Five cards. Equal thirds would put two on the second row with a hole beside
   them, which reads as a card that failed to load, so the first two take half
   the width each and the last three a third each. */
@media (min-width: 1024px) {
  .tg .tg-shl__grid--5 { grid-template-columns: repeat(6, 1fr); }
  .tg .tg-shl__grid--5 > :nth-child(-n + 2) { grid-column: span 3; }
  .tg .tg-shl__grid--5 > :nth-child(n + 3) { grid-column: span 2; }
}

.tg .tg-hl {
  padding: var(--tg-5);
  border-radius: var(--tg-r-md);
  border: 1px solid var(--tg-line);
  background: var(--tg-surface);
}

.tg .tg-hl__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--tg-r-pill);
  background: var(--tg-red-wash);
}

.tg .tg-hl__icon svg { width: 20px; height: 20px; stroke: var(--tg-red-ink); }

.tg.tg .tg-hl h2 {
  margin: var(--tg-4) 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-hl p {
  margin: var(--tg-2) 0 0;
  max-width: none;
  font-size: var(--tg-small);
  color: var(--tg-ink-2);
}

.tg .tg-sweek__grid {
  display: grid;
  gap: var(--tg-6);
  align-items: start;
}

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

.tg.tg .tg-sweek__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  border-top: 1px solid var(--tg-line);
}

.tg .tg-sweek__list a {
  display: flex;
  align-items: center;
  gap: var(--tg-4);
  padding-block: var(--tg-5);
  border-bottom: 1px solid var(--tg-line);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.tg .tg-sweek__name { flex: 1 1 auto; font-size: 1.125rem; font-weight: 700; }

.tg .tg-sweek__when {
  font-size: var(--tg-small);
  font-weight: 600;
  color: var(--tg-ink-3);
  text-align: right;
}

.tg .tg-sweek__list svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  stroke: var(--tg-red-ink);
  transition: transform var(--tg-dur-fast) var(--tg-ease);
}

@media (hover: hover) {
  .tg .tg-sweek__list a:hover .tg-sweek__name { color: var(--tg-red-ink); }
  .tg .tg-sweek__list a:hover svg { transform: translateX(4px); }
}

.tg.tg .tg-rwall .tg__lead a {
  color: var(--tg-red-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   12. Volunteer page
   -------------------------------------------------------------------------- */

.tg .tg-vhero {
  border-top: 0;
  padding-block-start: calc(var(--tg-section-y) + 16px);
}

.tg .tg-vhero__grid {
  display: grid;
  gap: var(--tg-7);
  align-items: center;
}

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

.tg.tg .tg-vhero h1 {
  margin: var(--tg-5) 0 0;
  max-width: 16ch;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-vhero .tg__lead { margin-top: var(--tg-5); max-width: 48ch; }

.tg .tg-vhero__form { display: inline-flex; }
.tg .tg-vhero__media .tg-ph { width: 100%; }

/* The placeholder that used to sit here carried its own rounding. The
   photograph that replaced it did not, and came out the only square-cornered
   image on the site. */
.tg .tg-vhero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tg-r-lg);
  background: var(--tg-surface-2);
}

.tg .tg-vgive__grid {
  display: grid;
  gap: var(--tg-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .tg .tg-vgive__grid { grid-template-columns: 1fr 1fr; gap: var(--tg-8); }
}

/* Addendum A2.4's visa line. Quiet, because it is a condition rather than an
   offer, but not hidden: it is the sentence that keeps this page a volunteer
   programme rather than a job advert, and it has to be readable. .tg.tg to
   outrank base.css's paragraph rule. */
.tg.tg .tg-vgive__note {
  margin-top: var(--tg-6);
  padding-top: var(--tg-5);
  border-top: 1px solid var(--tg-line);
  max-width: 52ch;
  font-size: var(--tg-small);
  color: var(--tg-ink-2);
}

.tg.tg .tg-give__list {
  margin: var(--tg-6) 0 0;
  padding: 0;
  max-width: none;
  border-top: 1px solid var(--tg-line);
}

.tg .tg-give {
  display: grid;
  gap: var(--tg-1);
  padding-block: var(--tg-5);
  border-bottom: 1px solid var(--tg-line);
}

@media (min-width: 640px) {
  .tg .tg-give { grid-template-columns: 12rem 1fr; gap: var(--tg-4); align-items: baseline; }
}

.tg.tg .tg-give dt {
  margin: 0;
  font-size: var(--tg-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-ink-3);
}

.tg.tg .tg-give dd { margin: 0; color: var(--tg-ink); }

.tg .tg-vvoice__fig {
  display: grid;
  gap: var(--tg-6);
  margin: 0;
}

/* Side by side from 860, the photograph in the narrower column. It is a
   portrait photograph and it stays one: across the page as a band it was
   four fifths thrown away and the back row's heads cut off. */
@media (min-width: 860px) {
  .tg .tg-vvoice__fig {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--tg-8);
    align-items: center;
  }
}

.tg .tg-vvoice__media {
  overflow: hidden;
  border-radius: var(--tg-r-lg);
  background: var(--tg-surface-2);
}

.tg .tg-vvoice__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.tg.tg .tg-vvoice blockquote {
  margin: 0 auto;
  max-width: 44ch;
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--tg-ink);
}

.tg .tg-vvoice figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tg-1);
  margin-top: var(--tg-5);
  text-align: center;
}

.tg .tg-vvoice figcaption span:first-child { font-weight: 700; }

.tg .tg-vvoice figcaption span:last-child {
  font-size: var(--tg-eyebrow);
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-ink-3);
}


/* --------------------------------------------------------------------------
   13. Explore Kuala Lumpur

   Four time slots, each with the activities that fit in it as chips carrying
   the day and time. Reuses the location hero, because that page and this one
   are both editorial and neither is /how-to-find-us/.
   -------------------------------------------------------------------------- */

.tg .tg-xhero {
  border-top: 0;
  padding-block-start: calc(var(--tg-section-y) + 16px);
}

.tg.tg .tg-xhero h1 {
  margin: var(--tg-5) 0 0;
  max-width: 20ch;
  font-size: clamp(2.25rem, 4.8vw, 3.75rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-xhero .tg__lead { margin-top: var(--tg-5); max-width: 52ch; }

.tg .tg-xslot__media {
  overflow: hidden;
  border-radius: var(--tg-r-sm);
  margin-bottom: var(--tg-5);
  background: var(--tg-surface-2);
}

.tg .tg-xslot__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tg .tg-xslots__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-5);
}

@media (min-width: 860px) { .tg .tg-xslots__grid { grid-template-columns: repeat(2, 1fr); } }

.tg .tg-xslot {
  display: flex;
  flex-direction: column;
  padding: var(--tg-6);
  border-radius: var(--tg-r-md);
  border: 1px solid var(--tg-line);
  background: var(--tg-surface);
}

.tg .tg-xslot__head { display: flex; gap: var(--tg-4); align-items: flex-start; }

.tg.tg .tg-xslot h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-xslot__kicker {
  margin: var(--tg-1) 0 0;
  max-width: none;
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}

.tg.tg .tg-xslot__body {
  margin: var(--tg-5) 0 0;
  max-width: none;
  color: var(--tg-ink-2);
}

.tg .tg-xslot__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-2);
  margin-top: auto;
  padding-top: var(--tg-5);
}

.tg .tg-xchip {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 14px;
  border-radius: var(--tg-r-sm);
  background: var(--tg-surface-2);
  color: var(--tg-ink);
  font-size: var(--tg-small);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.tg .tg-xchip span {
  font-size: var(--tg-eyebrow);
  font-weight: 600;
  color: var(--tg-ink-3);
}

.tg .tg-xchip--flat { cursor: default; }

@media (hover: hover) {
  .tg a.tg-xchip:hover { background: var(--tg-red-wash); color: var(--tg-red-deep); }
}

.tg .tg-xnear__inner {
  display: grid;
  gap: var(--tg-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .tg .tg-xnear__inner { grid-template-columns: 6fr 5fr; gap: var(--tg-8); }
}

.tg.tg .tg-xnear .tg-pill { margin-top: var(--tg-6); }

/* --- Getting out of Bukit Bintang -----------------------------------------
   Rows, not cards. Nothing here has hierarchy for elevation to communicate,
   only a list of facts, so a hairline does the grouping and the page keeps a
   layout family it has not used yet. */

.tg .tg-xways__list {
  margin-block-start: var(--tg-6);
  border-top: 1px solid var(--tg-line);
}

.tg .tg-xway {
  display: grid;
  gap: var(--tg-2);
  padding-block: var(--tg-5);
  border-bottom: 1px solid var(--tg-line);
}

@media (min-width: 860px) {
  .tg .tg-xway {
    grid-template-columns: 4fr 8fr;
    gap: var(--tg-6);
    align-items: baseline;
  }
}

.tg.tg .tg-xway__what {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--tg-track-tight);
  color: var(--tg-ink);
}

.tg.tg .tg-xway__how {
  margin: 0;
  max-width: 62ch;
  color: var(--tg-ink-2);
}

/* A placeholder standing in for a sight card's photograph has to fill the
   card the way the photograph will. */
.tg .tg-hl__shot .tg-ph { width: 100%; }


.tg.tg .tg-xnear__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tg-2) var(--tg-4);
  margin: 0;
  padding: 0;
  max-width: none;
}

.tg .tg-xnear__list li {
  padding-block: var(--tg-3);
  border-bottom: 1px solid var(--tg-line);
  font-weight: 700;
}

.tg.tg .tg-xslots .tg__lead a {
  color: var(--tg-red-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   14. Depth on the activity detail pages

   These sat at six sections and 2,258 characters against the homepage's
   eleven and 8,748, which is not the same website. Three sections added: the
   timeline, the three things at the destination, and what to take.
   -------------------------------------------------------------------------- */

.tg .tg-tl__grid {
  display: grid;
  gap: var(--tg-6);
  align-items: start;
}

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

.tg.tg .tg-tl__list {
  margin: 0;
  padding: 0;
  max-width: none;
  border-top: 1px solid var(--tg-line);
}

.tg .tg-tl__row {
  display: grid;
  gap: var(--tg-1);
  padding-block: var(--tg-5);
  border-bottom: 1px solid var(--tg-line);
}

@media (min-width: 640px) {
  .tg .tg-tl__row {
    grid-template-columns: 9rem 1fr;
    gap: var(--tg-5);
    align-items: baseline;
  }
}

.tg.tg .tg-tl__when {
  margin: 0;
  font-size: var(--tg-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-red-ink);
}

.tg.tg .tg-tl__what {
  margin: 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  color: var(--tg-ink);
}

.tg.tg .tg-dwhat__intro {
  margin: var(--tg-5) 0 0;
  max-width: 52ch;
  font-size: var(--tg-lead);
  color: var(--tg-ink-2);
}

.tg.tg .tg-sights h3 {
  margin: var(--tg-4) 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: var(--tg-track-tight);
}

/* A sight with a photograph of itself. The photograph runs to the card's own
   edges, so the padding moves off the card and onto the two text elements
   under it. Both of those margins have to out-rank the ones set for the
   iconned card further up this file, hence .tg.tg. */
.tg .tg-hl--shot {
  padding: 0;
  overflow: hidden;
}

.tg .tg-hl__shot { margin: 0; }

/* --sr is set on the grid by the builder: square where the photographs are
   guests and portraits, 3:2 where they are landmarks shot landscape. */
.tg .tg-hl__shot img {
  display: block;
  width: 100%;
  aspect-ratio: var(--sr, 1 / 1);
  object-fit: cover;
  object-position: var(--op, 50% 50%);
  background: var(--tg-surface-2);
}

.tg.tg .tg-hl--shot h3 { margin: var(--tg-5) var(--tg-5) 0; }

.tg.tg .tg-hl--shot p { margin: var(--tg-2) var(--tg-5) var(--tg-5); }

.tg .tg-bring { padding-block-start: 0; border-top: 0; }

/* Running on from the section above only works when it is the same colour.
   Where it is tinted, the padding comes back: a grey card starting flush
   under a grey band puts an edge across the page at the wrong place. No
   hairline with it — the change of ground is the separation. */
.tg .tg-bring--top { padding-block-start: var(--tg-section-y); }

.tg .tg-bring__inner {
  display: grid;
  gap: var(--tg-5);
  align-items: center;
  padding: var(--tg-6);
  border-radius: var(--tg-r-lg);
  background: var(--tg-surface-2);
}

@media (min-width: 1024px) {
  .tg .tg-bring__inner { grid-template-columns: 4fr 8fr; gap: var(--tg-7); }
}

.tg .tg-bring__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-2);
}

.tg .tg-bring__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-2);
  padding: 10px 16px;
  border-radius: var(--tg-r-pill);
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  font-size: var(--tg-small);
  font-weight: 600;
}

.tg .tg-bring__chip svg { width: 16px; height: 16px; stroke: var(--tg-red-ink); }


/* --------------------------------------------------------------------------
   15. The cost table, and the review tally that reuses it

   Three columns on a wide screen, stacked with the label doing the work on a
   phone. A real table element would be the pedant's answer, but these are
   two-and-a-bit columns of prose, not data anybody sorts.
   -------------------------------------------------------------------------- */

.tg .tg-cost__table { border-top: 1px solid var(--tg-line); }

.tg .tg-cost__row {
  display: grid;
  gap: var(--tg-1);
  padding-block: var(--tg-5);
  border-bottom: 1px solid var(--tg-line);
}

@media (min-width: 720px) {
  .tg .tg-cost__row {
    grid-template-columns: 15rem 16rem 1fr;
    gap: var(--tg-5);
    align-items: baseline;
  }
}

.tg .tg-cost__what { font-weight: 700; }

.tg .tg-cost__sum {
  font-size: var(--tg-small);
  font-weight: 700;
  color: var(--tg-red-ink);
}

.tg .tg-cost__note {
  font-size: var(--tg-small);
  color: var(--tg-ink-2);
}

.tg.tg .tg-cost__foot {
  margin-top: var(--tg-5);
  max-width: 62ch;
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}

.tg.tg .tg-rpolicy .tg-dlist { margin-top: 0; }

.tg .tg-rwhere__slot { display: grid; gap: var(--tg-3); justify-items: start; }


/* --------------------------------------------------------------------------
   16. Rooms

   Mostly reuses what the detail and location pages already have: the facts
   row, the chip lists, the cost table for the size comparison. What is new
   is the linked table row on the overview.
   -------------------------------------------------------------------------- */

.tg.tg .tg-room__sub {
  margin: var(--tg-6) 0 var(--tg-3);
  font-size: var(--tg-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tg-track-wide);
  text-transform: uppercase;
  color: var(--tg-ink-3);
}

.tg .tg-cost__row--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tg-dur-fast) var(--tg-ease);
}

@media (hover: hover) {
  .tg .tg-cost__row--link:hover { background: var(--tg-red-wash); }
  .tg .tg-cost__row--link:hover .tg-cost__what { color: var(--tg-red-deep); }
}

.tg .tg-dhero__photo .tg-ph,
.tg .tg-dwhat__photo .tg-ph,
.tg .tg-dstrip__tile .tg-ph { width: 100%; }


/* --------------------------------------------------------------------------
   17. Contact and the enquiry form

   The form is the only piece of the site a visitor types into, so it gets
   generous targets: 48px minimum, real focus rings, and labels above rather
   than placeholders pretending to be labels.
   -------------------------------------------------------------------------- */

.tg .tg-way__go {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-2);
  margin-top: var(--tg-3);
  font-size: var(--tg-small);
  font-weight: 700;
  color: var(--tg-red-ink);
  text-decoration: none;
  cursor: pointer;
}

.tg .tg-way__go svg {
  width: 16px;
  height: 16px;
  transition: transform var(--tg-dur-fast) var(--tg-ease);
}

@media (hover: hover) {
  .tg .tg-way__go:hover svg { transform: translateX(4px); }
}

.tg .tg-contact__gaps {
  display: grid;
  gap: var(--tg-4);
  margin-top: var(--tg-6);
}

@media (min-width: 720px) {
  .tg .tg-contact__gaps { grid-template-columns: repeat(2, 1fr); }
}

.tg .tg-formsec__grid {
  display: grid;
  gap: var(--tg-7);
  align-items: start;
}

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

.tg.tg .tg-formsec .tg-dlist { margin-top: var(--tg-6); }

.tg .tg-form {
  padding: var(--tg-6);
  border-radius: var(--tg-r-lg);
  border: 1px solid var(--tg-line);
  background: var(--tg-surface);
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are display:none and fill the ones that are not. */
.tg .tg-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tg .tg-form__grid {
  display: grid;
  gap: var(--tg-4);
}

@media (min-width: 640px) {
  .tg .tg-form__grid { grid-template-columns: repeat(2, 1fr); }
  .tg .tg-form__field--wide { grid-column: 1 / -1; }
}

.tg .tg-form__field { display: grid; gap: var(--tg-2); }

.tg.tg .tg-form__field label {
  font-size: var(--tg-small);
  font-weight: 700;
  color: var(--tg-ink);
}

.tg .tg-form__field label span { color: var(--tg-red-ink); }

.tg .tg-form__field input,
.tg .tg-form__field select,
.tg .tg-form__field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--tg-r-sm);
  border: 1px solid var(--tg-line);
  background: var(--tg-surface);
  font: inherit;
  font-size: 1rem;
  color: var(--tg-ink);
}

.tg .tg-form__field textarea { min-height: 120px; resize: vertical; }

.tg .tg-form__field input:focus-visible,
.tg .tg-form__field select:focus-visible,
.tg .tg-form__field textarea:focus-visible {
  /* The ring only. Turning the field's own border red as well drew two red
     lines two pixels apart, which reads as a rendering fault rather than as
     focus. Everything else focusable on the site shows just the ring. */
  outline: 2px solid var(--tg-red);
  outline-offset: 2px;
}

.tg .tg-form__field ::placeholder { color: var(--tg-ink-3); }

.tg .tg-form__foot {
  display: grid;
  gap: var(--tg-4);
  margin-top: var(--tg-6);
}

/* justify-self, because a grid item stretches to its column by default and a
   grid item that was inline-flex is blockified to flex. The pill therefore
   came out 545px wide with its label and arrow still grouped at the left and
   338px of empty black to the right of them. Every other pill on the site is
   the width of what is in it; this one is now too. */
.tg .tg-form__submit {
  justify-self: start;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.tg.tg .tg-form__note {
  margin: 0;
  max-width: 46ch;
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}

.tg.tg .tg-form__error {
  margin: 0 0 var(--tg-5);
  padding: var(--tg-4) var(--tg-5);
  border-radius: var(--tg-r-sm);
  border-left: 4px solid var(--tg-red);
  background: var(--tg-red-wash);
  color: var(--tg-red-deep);
  font-weight: 600;
}

.tg .tg-form__done { display: grid; gap: var(--tg-4); justify-items: start; }

.tg.tg .tg-form__done h2 {
  margin: 0;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: var(--tg-track-tight);
}

.tg.tg .tg-form__done p { margin: 0; max-width: 46ch; }

/* ------------------------------------------------------------------------
   Our Activities Gallery: three columns that scroll upward on their own.

   tg-arch, not tg-wall: tg-wall is the about page's poster wall, further up
   this file. Naming this one tg-wall too meant the later rules won and the
   posters were laid out by a grid meant for something else.


   The window is a fixed height with overflow hidden; the track inside it is
   the photographs twice over, and tg.js translates it up until it has moved
   the height of one copy, then resets to zero. The second copy is identical,
   so the reset is invisible.

   Height in vh rather than px, so a tall column on a laptop does not become
   the whole screen on a phone. Capped, because past about 800px the eye stops
   reading it as a wall and starts reading it as a page that will not end.
   ------------------------------------------------------------------------ */
.tg .tg-arch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-4);
  height: clamp(420px, 78vh, 720px);
  overflow: hidden;
}

@media (min-width: 640px) {
  .tg .tg-arch { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .tg .tg-arch { grid-template-columns: repeat(3, 1fr); }
}

/* Which columns are on screen at each width. The phone column is first in
   the markup and carries every photograph; the three thirds follow it. Only
   one arrangement is ever displayed, and the hidden one is not fetched. */
.tg .tg-arch__col { display: none; }

.tg .tg-arch__col--sm { display: block; }

@media (min-width: 640px) {
  .tg .tg-arch__col--sm { display: none; }

  .tg .tg-arch__col:nth-child(2),
  .tg .tg-arch__col:nth-child(3) { display: block; }
}

@media (min-width: 1024px) {
  .tg .tg-arch__col:nth-child(4) { display: block; }
}

.tg .tg-arch__col {
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.tg .tg-arch__track {
  display: flex;
  flex-direction: column;
  gap: var(--tg-4);
  will-change: transform;
}

.tg .tg-arch__dup {
  display: flex;
  flex-direction: column;
  gap: var(--tg-4);
}

.tg .tg-arch__tile { margin: 0; }

.tg .tg-arch__tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tg-r-md);
  background: var(--tg-surface-2);
}

/* The fade at both ends. A hard edge makes the photographs look cut off; a
   fade makes them look like they are passing. Two elements rather than a
   mask-image on the grid, because a mask promotes the whole thing to its own
   layer and twenty six photographs is a large layer to composite. */
.tg .tg-arch::before,
.tg .tg-arch::after {
  content: "";
  z-index: 1;
  position: absolute;
  inset-inline: 0;
  height: 118px;
  pointer-events: none;
}

/* Three stops, not two. A straight linear fade over a dark photograph is
   still a visible edge at the point it reaches zero; holding it opaque for
   the first quarter and easing out slowly is what makes the tiles look like
   they are passing rather than being cut.

   rgba(255,255,255,0) rather than `transparent`, which is rgba(0,0,0,0) and
   greys the middle of the ramp in browsers that interpolate unpremultiplied. */
.tg .tg-arch::before {
  top: 0;
  background: linear-gradient(to bottom,
    var(--tg-surface) 0%,
    rgba(255, 255, 255, .92) 26%,
    rgba(255, 255, 255, .55) 58%,
    rgba(255, 255, 255, 0) 100%);
}

.tg .tg-arch::after {
  bottom: 0;
  background: linear-gradient(to top,
    var(--tg-surface) 0%,
    rgba(255, 255, 255, .92) 26%,
    rgba(255, 255, 255, .55) 58%,
    rgba(255, 255, 255, 0) 100%);
}

/* Nothing moves, and the window opens up into a plain grid so the whole
   archive is still reachable rather than clipped at 720px. */
@media (prefers-reduced-motion: reduce) {
  .tg .tg-arch {
    height: auto;
    align-items: start;
  }

  .tg .tg-arch__col--sm { display: none; }

  .tg .tg-arch__col:nth-child(2),
  .tg .tg-arch__col:nth-child(3),
  .tg .tg-arch__col:nth-child(4) { display: block; }

  .tg .tg-arch__track { transform: none !important; }

  .tg .tg-arch__dup { display: none; }

  .tg .tg-arch::before,
  .tg .tg-arch::after { content: none; }
}

/* ------------------------------------------------------------------------
   Reviews: the five listings, and the wall of quotes beside a rail that
   stays put while they scroll past it.
   ------------------------------------------------------------------------ */
.tg .tg-rhero__all {
  display: block;
  margin-block-start: var(--tg-2);
  font-size: var(--tg-small);
  color: var(--tg-ink-2);
}

.tg .tg-scores__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tg-4);
}

@media (min-width: 720px) {
  .tg .tg-scores__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .tg .tg-scores__grid { grid-template-columns: repeat(5, 1fr); }
}

.tg.tg .tg-score {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--tg-5);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-r-md);
  background: var(--tg-surface);
  color: var(--tg-ink);
  text-decoration: none;
}

.tg .tg-score__head {
  display: flex;
  align-items: center;
  gap: var(--tg-2);
  margin-block-end: var(--tg-2);
}

.tg .tg-score__head img {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: contain;
}

.tg .tg-score__where {
  font-size: var(--tg-small);
  font-weight: 600;
  color: var(--tg-ink-2);
}

.tg .tg-score__n {
  font-family: var(--tg-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tg-track-tight);
  color: var(--tg-ink);
}

/* The scale, small and dim, because 8.7 and 4.6 are not the same number and
   the reader has to be able to see which is which without reading a legend. */
.tg .tg-score__of {
  font-size: 1rem;
  font-weight: 500;
  color: var(--tg-ink-3);
}

.tg .tg-score__count {
  display: flex;
  align-items: center;
  gap: var(--tg-2);
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}

/* The arrow only leans out on hover, so five of them in a row are not five
   things pointing at the reader. */
.tg .tg-score__count svg {
  width: 15px;
  height: 15px;
  transition: transform .2s ease;
}

.tg .tg-score:hover .tg-score__count svg { transform: translateX(3px); }

/* The wall. One column on a phone; from 1024 the rail takes a third and the
   quotes take the rest in two columns. */
.tg .tg-wallq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-7);
}

@media (min-width: 1024px) {
  .tg .tg-wallq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--tg-8);
    align-items: start;
  }

  /* Sticky, so the claim is still on screen while the evidence goes past it.
     top is the header height plus a gap; align-self is what stops the grid
     stretching the rail to the full column and making sticky do nothing. */
  .tg .tg-wallq__rail {
    position: sticky;
    top: calc(var(--tg-nav-h, 76px) + var(--tg-5));
    align-self: start;
  }
}

.tg .tg-wallq__note {
  margin-block-start: var(--tg-4);
  font-size: var(--tg-small);
  color: var(--tg-ink-3);
}

/* Below 720 this is a plain list and nothing moves. A wall of photographs
   drifting past is glanceable; a wall of paragraphs on a phone, one column
   wide, is something a reader is trying to finish a sentence of. The rail
   above it does not move at any width. */
.tg .tg-wallq__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tg-4);
  align-items: start;
}

.tg .tg-wallq__dup { display: none; }

@media (min-width: 720px) {
  .tg .tg-wallq__cols {
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    height: clamp(560px, 82vh, 780px);
    overflow: hidden;
  }

  .tg .tg-wallq__col {
    min-height: 0;
    overflow: hidden;
  }

  /* The second column starts lower, so the cards do not line up in pairs and
     read as a table. */
  .tg .tg-wallq__col:nth-child(2) .tg-wallq__track {
    padding-block-start: var(--tg-7);
  }

  .tg .tg-wallq__track,
  .tg .tg-wallq__dup {
    display: flex;
    flex-direction: column;
    gap: var(--tg-4);
  }

  .tg .tg-wallq__track { will-change: transform; }

  .tg .tg-wallq__dup { display: flex; }

  /* Same three-stop ramp as the gallery: a straight fade still shows an edge
     where it reaches zero. */
  .tg .tg-wallq__cols::before,
  .tg .tg-wallq__cols::after {
    content: "";
    z-index: 1;
    position: absolute;
    inset-inline: 0;
    height: 104px;
    pointer-events: none;
  }

  .tg .tg-wallq__cols::before {
    top: 0;
    background: linear-gradient(to bottom,
      var(--tg-surface) 0%,
      rgba(255, 255, 255, .92) 26%,
      rgba(255, 255, 255, .55) 58%,
      rgba(255, 255, 255, 0) 100%);
  }

  .tg .tg-wallq__cols::after {
    bottom: 0;
    background: linear-gradient(to top,
      var(--tg-surface) 0%,
      rgba(255, 255, 255, .92) 26%,
      rgba(255, 255, 255, .55) 58%,
      rgba(255, 255, 255, 0) 100%);
  }
}

.tg .tg-wallq__col {
  display: flex;
  flex-direction: column;
  gap: var(--tg-4);
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tg .tg-wallq__cols {
    height: auto;
    overflow: visible;
  }

  .tg .tg-wallq__cols::before,
  .tg .tg-wallq__cols::after { content: none; }

  .tg .tg-wallq__track { transform: none !important; }

  .tg.tg .tg-wallq__dup { display: none; }
}

.tg .tg-quote {
  margin: 0;
  padding: var(--tg-5);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-r-md);
  background: var(--tg-surface);
}

/* The first card in each column carries the quote at reading size and the
   rest at note size, which is what stops thirteen cards reading as a wall of
   identical weight. */
.tg.tg .tg-quote blockquote {
  margin: 0;
  font-size: var(--tg-small);
  line-height: 1.65;
  color: var(--tg-ink-2);
}

.tg.tg .tg-quote--lead blockquote {
  font-size: 1.0625rem;
  color: var(--tg-ink);
}

.tg .tg-quote blockquote::before { content: "\201C"; }
.tg .tg-quote blockquote::after { content: "\201D"; }

.tg .tg-quote figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--tg-3);
  margin-block-start: var(--tg-4);
  padding-block-start: var(--tg-3);
  border-top: 1px solid var(--tg-line);
  align-items: baseline;
}

.tg .tg-quote__who {
  font-size: var(--tg-small);
  font-weight: 600;
  color: var(--tg-ink);
}

.tg .tg-quote__src {
  grid-column: 1;
  font-size: 0.8125rem;
  color: var(--tg-ink-3);
}

.tg .tg-quote__score {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--tg-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tg-ink);
}

.tg .tg-quote__score span {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tg-ink-3);
}

/* .tg.tg h3.<class>, not .tg .<class>. base.css sets the margin on
   `.tg.tg h2, .tg.tg h3, ...` at (0,3,1), which beats a plain component class
   at (0,2,0): the second heading here sat with no top margin at all, hard
   against the rule under the last row of the table above it. Repeating the
   scope class and naming the element matches that specificity, and this file
   is loaded after base.css. */
/* Two real listing links above the placeholder for the other three. */
.tg .tg-rlinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-3);
  margin-block-end: var(--tg-4);
}

.tg.tg .tg-rlink {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-2);
  padding: 10px var(--tg-4);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-r-pill);
  font-size: var(--tg-small);
  font-weight: 600;
  color: var(--tg-ink);
  text-decoration: none;
}

.tg .tg-rlink svg { width: 16px; height: 16px; }

.tg .tg-rlink img {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: contain;
}

.tg.tg h3.tg-agree__h3 {
  margin-block: var(--tg-7) var(--tg-3);
  font-size: var(--tg-small);
  font-weight: 600;
  letter-spacing: var(--tg-track-wide, .04em);
  text-transform: uppercase;
  color: var(--tg-ink-3);
}