/**
 * Trip Kailash homepage
 *
 * Loaded on the front page only. Section-specific rules live here; anything
 * reusable belongs in components.css.
 *
 * The running order is in front-page.php. Section rhythm is set once, at the
 * top of this file, rather than per section, because inconsistent vertical
 * spacing between sections is the single most common way a page stops looking
 * designed.
 */

/* ======================================================================
   RHYTHM AND CONTAINER
   ====================================================================== */

.tk-home { display: block; }

.tk-wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.tk-section { padding-block: 88px; }

@media (min-width: 900px) {
  .tk-section { padding-block: 128px; }
}

/* ======================================================================
   SECTION HEADING
   Eyebrow, display heading, brass rule. The rule is the one ornament in
   the system and it draws itself; the motion lives in motion.css.
   ====================================================================== */

.tk-sechead { margin-bottom: 44px; }

.tk-sechead--center {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

.tk-sechead--center .tk-rule {
  max-width: 120px;
  margin-inline: auto;
}

.tk-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass-600);
  margin: 0 0 14px;
}

.tk-deep .tk-eyebrow { color: var(--brass-300); }

.tk-sechead__title {
  font-size: var(--text-2xl);
  max-width: 22ch;
  margin: 0;
}

.tk-sechead--center .tk-sechead__title {
  max-width: none;
  margin-inline: auto;
}

/* ======================================================================
   BUTTONS
   Vermilion is the booking action and nothing else. Everything else that
   is clickable and not booking takes the ghost.
   ====================================================================== */

.tk-btn,
.tk-btn-ghost {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.tk-btn {
  background: var(--action);
  color: var(--action-text);
  border: 1px solid var(--action);
  padding: 15px 34px;
}

.tk-btn:hover { background: var(--action-hover); border-color: var(--action-hover); }
.tk-btn:active { background: var(--action-press); border-color: var(--action-press); }

.tk-btn-ghost {
  background: transparent;
  color: var(--text-body);
  border: 1px solid var(--solid);
  padding: 14px 28px;
}

.tk-btn-ghost:hover { border-color: var(--brass-500); color: var(--brass-600); }

.tk-deep .tk-btn-ghost {
  color: var(--brass-300);
  border-color: rgba(224, 196, 137, .5);
}

.tk-deep .tk-btn-ghost:hover { border-color: var(--brass-300); color: #fff; }

.tk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* ======================================================================
   THE HERO

   The photograph carries it. Words and one action sit low on the left, the
   tour finder floats high on the right, barely there against the sky.

   Every colour comes from the four brand tones: sandal for the words, brass
   for the action, bark for the glass. The hero is where a palette either
   holds or stops being one, so nothing here introduces a fifth.
   ====================================================================== */

.tk-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--bark-900);
}

.tk-hero__media { position: absolute; inset: 0; }

/* Tuned to where the peak actually sits in the bundled photograph: about
   62% across, its lit face spanning roughly 31% to 50% down. Anchoring the
   crop there keeps the summit in frame instead of a generic "center", which
   would cut the top off on a short window and lose the light entirely.
   A different photograph needs this re-tuned to its own subject. */
.tk-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 40%;
}

/* Warm, never neutral. A grey veil over a sunset kills the sunset. Weighted
   to the bottom because that is where the words are, with just enough at the
   top to hold the finder and the navigation. */
.tk-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(30, 16, 6, .5) 0%, rgba(30, 16, 6, 0) 30%),
    linear-gradient(0deg, rgba(30, 16, 6, .9) 0%, rgba(30, 16, 6, .38) 40%, rgba(30, 16, 6, 0) 66%);
}

/* Two columns, both sitting on the vertical centre. The words take the wider
   side and the finder holds a fixed track, so the headline reflows on a
   narrow laptop while the search bar keeps the width it needs to be usable. */
.tk-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 440px);
  gap: 72px;
  align-items: center;
  width: 100%;
  padding-block: 15vh 12vh;
}

.tk-hero__lede { min-width: 0; }

.tk-hero__title {
  margin: 0;
  max-width: 21ch;
  font-family: var(--font-display);
  font-weight: 700;
  /* Deliberately the h2 step, not the hero step. It is still the h1 in the
     markup, because it is still the page's one heading; it just stops
     shouting. At the 4xl size a sentence this long ran to four lines and
     pushed everything else off the fold. */
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--sand-50);
  /* A shadow the eye never reads as a shadow, only as the letters holding
     their edge against the sky. */
  text-shadow: 0 2px 28px rgba(30, 16, 6, .58), 0 1px 3px rgba(30, 16, 6, .42);
}

.tk-hero__sub {
  margin: 22px 0 0;
  max-width: 60ch;
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
  line-height: 1.62;
  color: rgba(251, 246, 236, .9);
  text-shadow: 0 1px 14px rgba(30, 16, 6, .55);
}

.tk-hero__actions { margin: 32px 0 0; }

.tk-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 36px;
  border-radius: 12px;
  background: var(--brass-500);
  color: var(--bark-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--brass-400);
  transition: background var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.tk-hero__cta:hover {
  background: var(--brass-400);
  transform: translateY(-2px);
}

.tk-hero__cta:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ---- quick tour finder ------------------------------------------------
   Top right, and barely there. It is a convenience, not the offer, so it
   sits on the sky as a pane of tinted glass rather than a control panel:
   almost no fill, a hairline edge, and the blur doing most of the work.

   It firms up on hover and focus. Until then the photograph wins, which is
   the whole point of putting it up there instead of beside the button.
   ---------------------------------------------------------------------- */

.tk-finder {
  width: 100%;
  padding: 26px 26px 28px;
  /* Generous, not the 4px the rest of the system uses. A search field is a
     soft object you type into; cut-stone corners on it read as unfinished
     rather than as restraint. */
  border-radius: 20px;
  background: rgba(30, 16, 6, .22);
  border: 1px solid rgba(251, 246, 236, .16);
  backdrop-filter: blur(16px) saturate(1.15);
  transition: background var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
}

.tk-finder:hover,
.tk-finder:focus-within {
  background: rgba(30, 16, 6, .42);
  border-color: rgba(224, 196, 137, .38);
}

.tk-finder__label {
  display: block;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(251, 246, 236, .82);
  text-shadow: 0 1px 10px rgba(30, 16, 6, .55);
}

.tk-finder:hover .tk-finder__label,
.tk-finder:focus-within .tk-finder__label { color: var(--brass-300); }

.tk-finder__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  background: rgba(30, 16, 6, .34);
  border: 1px solid rgba(251, 246, 236, .16);
  border-radius: 14px;
  transition: border-color var(--dur-base) var(--ease);
}

.tk-finder__bar:focus-within { border-color: var(--brass-500); }

.tk-finder__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 6px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  /* Never below 16px, or iOS zooms the page when the field takes focus. */
  font-size: 17px;
  color: var(--sand-50);
}

.tk-finder__input::placeholder { color: rgba(251, 246, 236, .55); }
.tk-finder__input:focus { outline: none; }

/* WebKit puts a clear button inside search inputs; against the brass it
   reads as a second control. */
.tk-finder__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.tk-finder__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 0;
  border-radius: 10px;
  background: var(--brass-500);
  color: var(--bark-900);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}

.tk-finder__go:hover { background: var(--brass-400); }
.tk-finder__go:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ---- currently viewing ------------------------------------------------ */

.tk-hero__viewing {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 38px 0 0;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(224, 196, 137, .86);
  text-shadow: 0 1px 10px rgba(30, 16, 6, .6);
}

/* The only terracotta on the hero. The accent doing what an accent is for:
   marking one live detail, not decorating. */
.tk-hero__viewing-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--verm-500);
}

@media (max-width: 980px) {
  .tk-hero { min-height: auto; }

  /* One column. The words keep the top, the finder follows them, because on
     a phone the offer has to land before the utility does. */
  .tk-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: 17vh 10vh;
  }
}

@media (max-width: 620px) {
  .tk-hero__cta { width: 100%; }
  .tk-finder { padding: 22px 20px 24px; }
  .tk-hero__viewing { margin-top: 28px; }
}


/* ======================================================================
   THE TRADITION DOORS
   ====================================================================== */

.tk-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 22px;
}

.tk-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 38px 30px 30px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}

.tk-door:hover {
  border-color: var(--brassline);
  background: rgba(255, 255, 255, .86);
  transform: translateY(-4px);
}

.tk-door__mark { display: block; margin-bottom: 22px; }

.tk-door__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-heading);
}

.tk-door__deva {
  font-family: var(--font-deva);
  font-weight: 700;
  font-size: 17px;
  color: var(--brass-600);
  margin-top: 6px;
}

.tk-door__blurb {
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 14px;
  /* Reserved so the counts sit on one line across the row whatever the blurb
     length. A ragged row of counts is the tell that these were not designed
     together. */
  min-height: 4.6em;
}

.tk-door__count {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-600);
}

/* ---- The drawn marks --------------------------------------------------
   Each figure draws its own stroke on scroll: the outer line first, the
   inner one behind it, so the mark assembles rather than appearing. The
   dash length is generous on purpose, since one value has to cover four
   different path lengths.
   ---------------------------------------------------------------------- */

.tk-mark { overflow: visible; }

.tk-mark__a,
.tk-mark__b {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1100ms var(--ease-out);
}

.tk-mark__a { stroke: var(--brass-500); stroke-width: 2; }
.tk-mark__b { stroke: var(--sand-300); stroke-width: 1; transition-delay: 90ms; }

.tk-mark__dot {
  fill: var(--verm-500);
  opacity: 0;
  transform-origin: center;
  transition: opacity 420ms var(--ease) 520ms;
}

.tk-door.is-in .tk-mark__a,
.tk-door.is-in .tk-mark__b { stroke-dashoffset: 0; }

.tk-door.is-in .tk-mark__dot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tk-mark__a,
  .tk-mark__b { stroke-dashoffset: 0; }
  .tk-mark__dot { opacity: 1; }
}

/* ======================================================================
   THE PARIKRAMA
   Night ground, pinned horizontal scroll, the signature section.

   It fades in and out THROUGH the sand rather than butting against it. A
   hard edge between the day ground and the night ground reads as a stripe,
   which is exactly what makes a page look like stacked sections.
   ====================================================================== */

.tk-parikrama {
  position: relative;
  background: var(--night-900);
  color: var(--text-on-deep);
}

.tk-parikrama::before,
.tk-parikrama::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 130px;
  z-index: 4;
  pointer-events: none;
}

.tk-parikrama::before {
  top: 0;
  background: linear-gradient(180deg, var(--sand-50), rgba(14, 9, 4, 0));
}

.tk-parikrama::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--sand-50), rgba(14, 9, 4, 0));
}

.tk-parikrama__head {
  position: relative;
  z-index: 5;
  padding-top: 130px;
}

.tk-parikrama__head .tk-sechead__title { color: #fff; }

.tk-parikrama__foot {
  position: relative;
  z-index: 5;
  padding-bottom: 130px;
  text-align: center;
}

/* 520vh of pinned scroll, which gives each of five temples room to arrive,
   hold and leave without any of them flashing past. */
.tk-parikrama__pin { position: relative; height: 520vh; }

.tk-parikrama__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tk-parikrama__track {
  display: flex;
  gap: 44px;
  padding-inline: 6vw;
  margin: 0;
  list-style: none;
  will-change: transform;
}

.tk-temple {
  flex: 0 0 clamp(260px, 32vw, 420px);
  /* Written by JS per frame; declared here so the first paint is not a jump */
  filter: blur(0);
  opacity: 1;
  transition: filter 350ms var(--ease),
              opacity 350ms var(--ease),
              transform 350ms var(--ease);
}

.tk-temple__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tk-temple__frame {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(224, 196, 137, .22);
  background: var(--night-700);
}

.tk-temple__img,
.tk-temple__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tk-temple__placeholder {
  background:
    repeating-linear-gradient(108deg, rgba(224, 196, 137, .08) 0 2px, transparent 2px 16px),
    var(--night-700);
}

.tk-temple__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 22px;
}

.tk-temple__traditions {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-300);
  margin-top: 10px;
}

/* The meaning and the facts belong to the active temple only. Collapsed by
   max-height rather than display, so the reveal can ease. */
.tk-temple__meaning {
  display: block;
  font-size: 16px;
  color: rgba(245, 237, 223, .82);
  margin-top: 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 450ms var(--ease), opacity 350ms var(--ease);
}

.tk-temple__facts {
  display: flex;
  gap: 18px;
  font-size: 14px;
  color: rgba(245, 237, 223, .6);
  margin-top: 14px;
  opacity: 0;
  transition: opacity 350ms var(--ease);
}

.tk-temple.is-active .tk-temple__meaning { max-height: 14em; opacity: 1; }
.tk-temple.is-active .tk-temple__facts { opacity: 1; }

/* ---- Phones and reduced motion ----------------------------------------

   Below 900px the pinning is switched off ENTIRELY and the track becomes a
   native horizontal swipe with scroll-snap. Pinned scroll-jacking on a phone
   is reliably awful, and most of this traffic is phones.

   The active-temple maths is unchanged: the same centre-proximity function
   serves both modes, because whichever card is nearest the middle of the
   screen is the one being looked at either way.
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .tk-parikrama__pin { height: auto; }

  .tk-parikrama__stage {
    position: static;
    height: auto;
    padding-block: 40px;
    overflow: visible;
  }

  .tk-parikrama__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    padding-inline: 24px;
    transform: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tk-parikrama__track::-webkit-scrollbar { display: none; }

  .tk-temple {
    flex-basis: 78vw;
    scroll-snap-align: center;
  }

  .tk-parikrama__head { padding-top: 90px; }
  .tk-parikrama__foot { padding-bottom: 90px; }
}

/* Reduced motion gets a plain scrollable row with every temple expanded and
   nothing blurred. Nobody has to move a mouse or a finger to read it. */
@media (prefers-reduced-motion: reduce) {
  .tk-parikrama__pin { height: auto; }

  .tk-parikrama__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: 40px;
  }

  .tk-parikrama__track {
    overflow-x: auto;
    transform: none !important;
  }

  .tk-temple {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }

  .tk-temple__meaning { max-height: 14em; opacity: 1; }
  .tk-temple__facts { opacity: 1; }
}

/* ======================================================================
   THE KORA RING
   The one interactive moment. Brass, and quiet until it is touched.
   ====================================================================== */

.tk-kora {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: 8px;
}

.tk-kora__control {
  position: relative;
  display: block;
  width: min(240px, 62vw);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* A hold must not select text or start a scroll gesture underneath it. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.tk-kora__ring { display: block; width: 100%; height: 100%; }

.tk-kora__groove {
  fill: none;
  stroke: var(--hair);
  stroke-width: 2;
}

.tk-kora__path {
  fill: none;
  stroke: var(--brass-500);
  stroke-width: 3;
  stroke-linecap: round;
  /* Starts at the top and travels clockwise, the direction the kora is walked
     in every tradition but Bon. */
  transform: rotate(-90deg);
  transform-origin: center;
}

.tk-kora__mark {
  fill: var(--sand-200);
  stroke: var(--hair);
  transition: fill var(--dur-base) var(--ease), r var(--dur-base) var(--ease);
}

.tk-kora__mark.is-lit { fill: var(--brass-500); stroke: var(--brass-500); }

.tk-kora__centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.tk-kora__alt {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1;
  color: var(--text-heading);
}

.tk-kora__unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-600);
}

.tk-kora__place {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.tk-kora__readout {
  margin: 0;
  min-height: 3.4em;
  max-width: 42ch;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease);
}

.tk-kora.is-complete .tk-kora__readout {
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}

.tk-kora__control:focus-visible {
  outline: none;
  border-radius: 50%;
  box-shadow: var(--ring-focus);
}

/* ======================================================================
   DEPARTURES
   Asymmetric two-column band. Not equal columns: the left one carries the
   argument, the right one carries the practicalities, and giving them the
   same width would say they are the same kind of thing.
   ====================================================================== */

.tk-departures__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
}

@media (max-width: 860px) {
  .tk-departures__grid { grid-template-columns: 1fr; gap: 40px; }
}

.tk-departures__col { border-left: 2px solid var(--brass-500); padding-left: 24px; }

.tk-departures__title { font-size: var(--text-xl); margin: 0 0 14px; }

.tk-departures__col p { margin: 0 0 14px; max-width: 46ch; }

/* The time-boxed band. Vermilion, because this is the one moment on the page
   that is genuinely an act-now, and the accent means nothing if it is
   everywhere. */
.tk-urgency {
  margin: 0 0 44px;
  padding: 18px 22px;
  max-width: var(--measure);
  background: var(--bg-inset);
  border-left: 3px solid var(--verm-500);
  border-radius: var(--r);
  font-size: 16px;
  color: var(--text-heading);
}

/* ======================================================================
   HOW A PLACE IS CONFIRMED
   ====================================================================== */

.tk-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 34px;
  counter-reset: tk-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tk-step { counter-increment: tk-step; }

.tk-step::before {
  content: counter(tk-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 1px solid var(--brassline);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--brass-600);
}

.tk-step__title { font-size: var(--text-lg); margin: 0 0 6px; }
.tk-step__body { margin: 0; color: var(--text-muted); max-width: 34ch; }

/* ======================================================================
   WHO TAKES YOU
   ====================================================================== */

.tk-lineage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 60px;
  align-items: center;
}

@media (max-width: 860px) {
  .tk-lineage__grid { grid-template-columns: 1fr; gap: 36px; }
}

.tk-lineage__img,
.tk-lineage__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair);
}

.tk-lineage__placeholder { background: var(--bg-inset); }

.tk-lineage__quote { margin: 0 0 22px; }

.tk-lineage__quote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  line-height: 1.32;
  color: var(--text-heading);
  margin: 0;
}

.tk-lineage__cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.tk-lineage__body p { color: var(--text-muted); max-width: 52ch; }

.tk-lineage__link { color: var(--verm-500); font-weight: 500; }

.tk-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin: 32px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
}

.tk-creds__item { margin: 0; }

.tk-creds__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 27px;
  color: var(--text-heading);
  margin: 0;
}

.tk-creds__label {
  margin: 0;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text-muted);
}

/* ======================================================================
   BEFORE YOU GO
   ====================================================================== */

.tk-guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 20px;
}

.tk-guide-card {
  display: block;
  padding: 26px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  transition: border-color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}

.tk-guide-card:hover {
  border-color: var(--brassline);
  background: rgba(255, 255, 255, .84);
}

.tk-guide-card__title { font-size: var(--text-lg); margin: 0 0 8px; }
.tk-guide-card__body { margin: 0; font-size: 15px; color: var(--text-muted); }

/* ======================================================================
   CHECK US BEFORE YOU PAY US

   Deliberately the plainest section on the page. Every other section is
   trying to move someone; this one is trying to be checked, and anything
   decorative here would undercut it. It reads like a document because it is
   meant to be treated as one.
   ====================================================================== */

.tk-verify { background: var(--bg-raised); }

.tk-verify__lede p {
  max-width: var(--measure);
  margin: 0 0 14px;
}

.tk-verify__list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--hair);
  max-width: 880px;
}

.tk-verify__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}

@media (max-width: 720px) {
  .tk-verify__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.tk-verify__what {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-heading);
}

.tk-verify__value {
  font-size: 17px;
  color: var(--text-heading);
  letter-spacing: .02em;
}

.tk-verify__where { font-size: 15px; color: var(--text-muted); }
.tk-verify__where a { color: var(--brass-600); }

.tk-verify__office {
  margin: 26px 0 0;
  max-width: var(--measure);
  color: var(--text-muted);
}

.tk-verify__office strong { color: var(--text-heading); }

/* The closing line is the whole section in one sentence, so it carries the
   display face and sits alone. */
.tk-verify__close {
  margin: 34px 0 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.35;
  color: var(--text-heading);
}

/* ======================================================================
   THE PARIKRAMA LINE

   The signature element. One brass hairline the length of the page, drawn
   by scroll, with a step marker at each section. It is what makes the
   homepage read as one continuous walk instead of stacked sections, and it
   is the system's one ornament doing real work: every marker is a link.

   Wide screens only. On anything narrower the gutter belongs to the
   content, and an ornament that crowds the text is not an ornament.
   ====================================================================== */

.tk-line {
  position: fixed;
  left: 28px;
  top: 14vh;
  bottom: 14vh;
  width: 12px;
  z-index: 20;
  pointer-events: none;
}

.tk-line[hidden] { display: none; }

.tk-line__track,
.tk-line__drawn {
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
}

.tk-line__track { background: var(--hair); }

.tk-line__drawn {
  background: var(--brass-500);
  transform-origin: top center;
  transform: scaleY(0);
}

/* The step marker: the rotated square from the brass rule, now walking down
   the page. Pointer events come back on for the links themselves. */
.tk-line__mark {
  position: absolute;
  left: 0;
  display: block;
  width: 11px;
  height: 11px;
  margin-top: -5px;
  pointer-events: auto;
  text-decoration: none;
}

.tk-line__dot {
  display: block;
  width: 7px;
  height: 7px;
  margin: 2px;
  background: var(--bg-page);
  border: 1px solid var(--brassline);
  transform: rotate(45deg);
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.tk-line__mark:hover .tk-line__dot,
.tk-line__mark.is-here .tk-line__dot {
  background: var(--brass-500);
  border-color: var(--brass-500);
  transform: rotate(45deg) scale(1.25);
}

/* The label rides out on hover and focus only, so the rail stays a hairline
   until someone asks it a question. */
.tk-line__name {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-600);
  background: var(--bg-page);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.tk-line__mark:hover .tk-line__name,
.tk-line__mark:focus-visible .tk-line__name {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.tk-line__mark:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}

/* The rail sits over the night sections, where sand-coloured chrome would
   disappear. */
.tk-line__mark .tk-line__dot { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .tk-line__drawn { transform: scaleY(1); }
  .tk-line__dot,
  .tk-line__name { transition: none; }
}