/* ==========================================================================
   Jamesha Travel Agency — site styles

   Self-contained by design: does not import the other stylesheets in this
   directory, so it cannot be broken by changes to them.

   Some rules below suppress default affordances (cursors, outlines, select
   behaviour) on purpose. They are not omissions; leave them alone.
   ========================================================================== */

:root {
  --tv-paper:      #fbf7f0;
  --tv-paper-2:    #f4ede1;
  --tv-card:       #ffffff;
  --tv-ink:        #23303a;
  --tv-ink-soft:   #55636e;
  --tv-ink-faint:  #5f6c76;   /* 4.5:1 on paper, alt and card - do not lighten */
  --tv-rule:       #e2d9ca;

  --tv-sea:        #1f6f8b;   /* headline blue */
  --tv-sea-deep:   #164f63;
  --tv-sun:        #e08a3c;   /* warm accent */
  --tv-sun-soft:   #f2c185;
  --tv-leaf:       #4b7f5e;

  --tv-sans: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  --tv-body: ui-serif, Georgia, "Times New Roman", serif;

  --tv-shadow: 0 2px 4px rgba(35, 48, 58, .05), 0 8px 24px rgba(35, 48, 58, .07);
  --tv-radius: 10px;
  --tv-max: 1120px;
}

/* --------------------------------------------------------------- base --- */

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

html { -webkit-text-size-adjust: 100%; }

body.tv {
  margin: 0;
  background: var(--tv-paper);
  color: var(--tv-ink);
  font-family: var(--tv-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Base defaults are wrapped in :where() so they carry ZERO specificity.
   Written plainly as `body.tv a` they score (0,1,2) and silently beat every
   single-class component rule — .tv-btn-primary, .tv-dest, .tv-footer a and
   the rest all lost their own colour to this and rendered blue-on-blue.
   Keep the :where(). It is what makes these overridable defaults instead of
   near-unbeatable rules. */
:where(body.tv img) { max-width: 100%; height: auto; display: block; }

:where(body.tv a) { color: var(--tv-sea); }
:where(body.tv a:hover) { color: var(--tv-sea-deep); }

.tv-wrap {
  width: 100%;
  max-width: var(--tv-max);
  margin: 0 auto;
  padding: 0 20px;
}

.tv-skip {
  position: absolute; left: -9999px;
  background: var(--tv-sea); color: #fff;
  padding: 10px 16px; z-index: 200; text-decoration: none;
}
.tv-skip:focus { left: 12px; top: 12px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--tv-sun);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- header --- */

.tv-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 240, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tv-rule);
}
.tv-header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 68px;
}

/* Same mobile long-press pattern as terminal.html .logo (script.js setupShieldLongPress):
   touch-action:none + touch-callout/user-drag none. Do NOT set pointer-events:none on the
   img — the working fix listens for touchstart on the image and preventDefaults it. */
.tv-brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
  margin-right: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  touch-action: none;
}
.tv-brand img {
  width: 38px;
  height: 38px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.tv-brand.brand-holding img {
  filter: drop-shadow(0 0 10px rgba(31, 111, 139, 0.55));
}
.tv-brand-name {
  font-family: var(--tv-sans);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .06em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tv-sea-deep);
}
.tv-brand-sub {
  font-family: var(--tv-sans);
  font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tv-ink-faint);
}

.tv-nav { display: flex; gap: 4px; align-items: center; }
.tv-nav a {
  font-family: var(--tv-sans);
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--tv-ink-soft);
  padding: 10px 12px; border-radius: 6px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.tv-nav a:hover { background: var(--tv-paper-2); color: var(--tv-sea-deep); }
.tv-nav a.tv-cta {
  background: var(--tv-sun); color: #3a2408; font-weight: 600;
}
.tv-nav a.tv-cta:hover { background: #d17f33; color: #2a1a05; }

/* Phones previously lost every nav link except BOOK, which left a visitor
   with no way to reach Pet Travel or Contact except guessing how far to
   scroll. The links stay; the row becomes a horizontal scroller and BOOK is
   pinned to the right so it never scrolls out of reach. */
@media (max-width: 720px) {
  .tv-header-inner { flex-wrap: wrap; gap: 8px 12px; padding-bottom: 6px; }
  .tv-brand-sub { display: none; }
  .tv-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding-left: max(0px, env(safe-area-inset-left));
  }
  .tv-nav::-webkit-scrollbar { display: none; }
  .tv-nav a {
    flex: 0 0 auto;
    font-size: 14px;
    padding: 10px 10px;
    white-space: nowrap;
  }
  .tv-nav a.tv-cta { position: sticky; right: 0; }
}

@media (max-width: 400px) {
  .tv-wrap { padding: 0 14px; }
  .tv-nav a { font-size: 13px; letter-spacing: .06em; padding: 10px 8px; }
}

/* --------------------------------------------------------------- hero --- */

.tv-hero {
  position: relative;
  padding: 68px 0 60px;
  background:
    radial-gradient(1000px 400px at 72% -8%, rgba(242,193,133,.42), transparent 62%),
    linear-gradient(180deg, var(--tv-paper) 0%, var(--tv-paper-2) 100%);
  border-bottom: 1px solid var(--tv-rule);
  overflow: hidden;
}
.tv-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 44px; align-items: center;
}
.tv-kicker {
  font-family: var(--tv-sans);
  font-size: 13px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--tv-sun); font-weight: 600; margin: 0 0 14px;
}
.tv-hero h1 {
  font-family: var(--tv-sans);
  font-weight: 700; font-size: clamp(38px, 6vw, 62px);
  line-height: 1.02; letter-spacing: .01em;
  margin: 0 0 18px; color: var(--tv-sea-deep);
  text-transform: uppercase;
}

/* Verb spans are addressed by script. Keep them. */
.tv-motto {
  font-family: var(--tv-sans);
  font-size: clamp(19px, 2.4vw, 25px);
  letter-spacing: .05em;
  color: var(--tv-ink-soft);
  margin: 0 0 22px;
}
.tv-motto .tv-verb { color: var(--tv-sea); font-weight: 600; }

.tv-hero p.tv-lede { margin: 0 0 26px; max-width: 46ch; color: var(--tv-ink-soft); }

.tv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  font-family: var(--tv-sans); font-size: 16px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  border-radius: 8px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
}
.tv-btn-primary { background: var(--tv-sea); color: #fff; }
.tv-btn-primary:hover { background: var(--tv-sea-deep); color: #fff; }
.tv-btn-ghost {
  background: transparent; color: var(--tv-sea-deep);
  border-color: var(--tv-sea);
}
.tv-btn-ghost:hover { background: rgba(31,111,139,.08); }
.tv-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero stamp — a luggage tag, not a classification stamp. */
.tv-stamp {
  justify-self: center;
  width: min(300px, 100%);
  background: var(--tv-card);
  border: 1px solid var(--tv-rule);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow);
  padding: 22px;
  transform: rotate(-2deg);
}
.tv-stamp h2 {
  font-family: var(--tv-sans); font-size: 15px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tv-ink-faint);
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--tv-rule);
}
.tv-stamp dl { margin: 0; font-size: 15px; }
.tv-stamp dt {
  font-family: var(--tv-sans); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tv-ink-faint); margin-top: 10px;
}
.tv-stamp dd { margin: 0; color: var(--tv-ink); }

@media (max-width: 860px) {
  .tv-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .tv-hero { padding: 44px 0 40px; }
}

/* ----------------------------------------------------------- sections --- */

.tv-section { padding: 66px 0; }
.tv-section + .tv-section { border-top: 1px solid var(--tv-rule); }
.tv-section-alt { background: var(--tv-paper-2); }

.tv-section-head { max-width: 58ch; margin: 0 0 34px; }
.tv-section-head h2 {
  font-family: var(--tv-sans); font-weight: 700;
  font-size: clamp(27px, 3.6vw, 38px); text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.1;
  margin: 0 0 10px; color: var(--tv-sea-deep);
}
.tv-section-head p { margin: 0; color: var(--tv-ink-soft); }

/* ------------------------------------------------------- destinations --- */

.tv-dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 22px;
}

.tv-dest {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 340px;
  border-radius: var(--tv-radius);
  overflow: hidden;
  border: 1px solid var(--tv-rule);
  box-shadow: var(--tv-shadow);
  text-decoration: none;
  color: #fff;
  background: var(--tv-sea-deep);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tv-dest:hover, .tv-dest:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(35,48,58,.18);
  color: #fff;
}

/* Poster art is drawn, not photographed — consistent across all four, and
   no asset hunt for the destinations we have no scenery for. */
.tv-dest-art { position: absolute; inset: 0; }
.tv-dest-art svg { width: 100%; height: 100%; display: block; }

.tv-dest-body {
  position: relative; z-index: 2;
  margin-top: auto;
  padding: 20px 18px 18px;
  background: linear-gradient(180deg, transparent, rgba(12,24,32,.82) 42%);
}
.tv-dest-name {
  font-family: var(--tv-sans); font-weight: 700;
  font-size: 25px; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.05; margin: 0 0 4px;
}
.tv-dest-tag {
  font-family: var(--tv-sans); font-size: 13.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.82); margin: 0 0 10px;
}
.tv-dest-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--tv-sans); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.22); padding-top: 9px;
}
.tv-dest-price { color: var(--tv-sun-soft); font-weight: 600; }

/* ---------------------------------------------------------- pet travel --- */

.tv-paws {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
@media (max-width: 860px) { .tv-paws { grid-template-columns: 1fr; gap: 26px; } }

.tv-paws-list { margin: 18px 0 0; padding: 0; list-style: none; }
.tv-paws-cta { margin: 22px 0 0; }
.tv-paws-cta .tv-btn { gap: 0.4rem; }
.tv-paws-cta .tv-ext { font-size: 0.95em; opacity: 0.85; }
.tv-paws-cta-note {
  margin: 10px 0 0;
  font-size: 0.92rem;
  color: var(--tv-ink-soft);
}
.tv-paws-cta-note a { color: var(--tv-sea); }
.tv-paws-list li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  color: var(--tv-ink-soft);
}
.tv-paws-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tv-leaf);
}

.tv-staff { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tv-staff figure {
  margin: 0; background: var(--tv-card);
  border: 1px solid var(--tv-rule); border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow); overflow: hidden;
}
.tv-staff picture { display: block; }
.tv-staff img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.tv-staff figcaption { padding: 11px 13px 13px; }
.tv-staff-name {
  font-family: var(--tv-sans); font-weight: 600; font-size: 17px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tv-sea-deep);
}
.tv-staff-role {
  font-family: var(--tv-sans); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tv-ink-faint);
}

/* ------------------------------------------------------------ gallery --- */

.tv-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 14px;
}
.tv-gallery figure {
  margin: 0; background: var(--tv-card); padding: 9px 9px 0;
  border: 1px solid var(--tv-rule); border-radius: 6px;
  box-shadow: var(--tv-shadow);
}
.tv-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; background: var(--tv-paper-2);
}
.tv-gallery figcaption {
  font-family: var(--tv-sans); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tv-ink-faint);
  padding: 9px 2px 10px; text-align: center;
}

/* ------------------------------------------------------- testimonials --- */

.tv-quotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
}
.tv-quote {
  background: var(--tv-card); border: 1px solid var(--tv-rule);
  border-left: 4px solid var(--tv-sun);
  border-radius: var(--tv-radius); padding: 22px 22px 18px;
  box-shadow: var(--tv-shadow); margin: 0;
}
.tv-quote p { margin: 0 0 14px; font-style: italic; color: var(--tv-ink); }
.tv-quote figcaption {
  font-family: var(--tv-sans); font-size: 13.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tv-ink-faint);
}

/* Plain emphasis only: no cursor change, no hover state. */
.tv-sig-mark { font-weight: 600; color: var(--tv-ink-soft); }

/* ---------------------------------------------------------- booking ----- */

.tv-book {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: start;
}
/* minmax(0, 1fr), not 1fr. A bare `1fr` is `minmax(auto, 1fr)`, and that auto
   floor is the FORM's min-content width - which the two-up .tv-field-row below
   pushes to ~404px. On a 375px phone the column refused to shrink past that and
   the whole cover picked up a horizontal scroll. minmax(0, ...) lets it. */
@media (max-width: 860px) { .tv-book { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.tv-form {
  background: var(--tv-card); border: 1px solid var(--tv-rule);
  border-radius: var(--tv-radius); box-shadow: var(--tv-shadow);
  padding: 26px;
}
.tv-field { margin-bottom: 17px; }
.tv-field label {
  display: block; margin-bottom: 6px;
  font-family: var(--tv-sans); font-size: 13px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--tv-ink-soft);
}
.tv-field input, .tv-field select, .tv-field textarea {
  width: 100%; min-height: 46px;
  padding: 11px 13px;
  font-family: var(--tv-body); font-size: 16px; /* 16px: iOS won't zoom */
  color: var(--tv-ink);
  background: var(--tv-paper);
  border: 1px solid var(--tv-rule); border-radius: 7px;
}
.tv-field textarea { min-height: 96px; resize: vertical; }
.tv-field input:focus, .tv-field select:focus, .tv-field textarea:focus {
  border-color: var(--tv-sea); background: #fff;
}
/* Same minmax(0, ...) reasoning as .tv-book: an <input> has an intrinsic
   min-content width of roughly its `size`, so two of them side by side set a
   floor the column cannot go under. Below 480px they stack instead - two
   inputs sharing a phone width is cramped even when it does fit. */
.tv-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 480px) {
  .tv-field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.tv-form .tv-btn { width: 100%; margin-top: 6px; }
.tv-form-note {
  margin: 14px 0 0; font-size: 13.5px; color: var(--tv-ink-faint);
  text-align: center;
}

.tv-confirm {
  margin-top: 16px; padding: 14px 16px;
  background: rgba(75,127,94,.1);
  border: 1px solid rgba(75,127,94,.4);
  border-radius: 7px; color: #2f5c45; font-size: 15px;
}
.tv-confirm[hidden] { display: none; }

/* ------------------------------------------------------------ contact --- */

.tv-contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.tv-contact-block h3 {
  font-family: var(--tv-sans); font-size: 14px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tv-ink-faint);
  margin: 0 0 8px;
}
.tv-contact-block p { margin: 0; color: var(--tv-ink-soft); }

/* Contact phone — normal typesetting. Tap opens the payphone keypad. */
.tv-phone {
  font-family: var(--tv-sans);
  font-size: 21px; letter-spacing: .04em;
  color: var(--tv-ink); white-space: nowrap;
  margin: 0;
}
.tv-phone-open {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0; padding: 4px 0;
  font: inherit; color: inherit; letter-spacing: inherit;
  cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tv-ink) 28%, transparent);
  text-underline-offset: 3px;
}
.tv-phone-open:hover,
.tv-phone-open:focus-visible {
  text-decoration-color: var(--tv-ink);
}
.tv-phone-open:focus { outline: none; }
.tv-phone-open:focus-visible {
  outline: 2px solid var(--tv-rule); outline-offset: 3px;
}

/* ----------------------------------------------------------- payphone --- */
.payphone[hidden] { display: none !important; }
.payphone {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.payphone-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 28, 38, .55);
  backdrop-filter: blur(2px);
}
.payphone-panel {
  position: relative; z-index: 1;
  width: min(320px, 100%);
  background: linear-gradient(180deg, #2a3340 0%, #1a222c 100%);
  color: #e8eef4;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 22px 18px 18px;
  font-family: var(--tv-sans);
}
.payphone-x {
  position: absolute; top: 8px; right: 10px;
  appearance: none; background: none; border: 0;
  color: rgba(255,255,255,.55); font-size: 28px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
}
.payphone-x:hover { color: #fff; }
.payphone-title {
  margin: 0 0 12px; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  text-align: center;
}
.payphone-lcd {
  background: #0c1218;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  min-height: 48px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 22px; letter-spacing: .12em;
  color: #9dffb0;
  margin-bottom: 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
}
.payphone-lcd.is-fail { color: #ff8f8f; letter-spacing: .08em; font-size: 18px; }
.payphone-pad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.payphone-key {
  appearance: none; -webkit-appearance: none;
  min-height: 52px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: linear-gradient(180deg, #3a4554, #2b3440);
  color: #f4f7fa;
  font: inherit; font-size: 22px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.payphone-key:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.payphone-actions {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
}
.payphone-clr,
.payphone-call {
  appearance: none; -webkit-appearance: none;
  min-height: 48px; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: .12em; cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.payphone-clr {
  border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.75);
}
.payphone-call {
  border: 0;
  background: linear-gradient(180deg, #4ad48a, #2a9f5c);
  color: #0a1a10;
  box-shadow: 0 2px 0 #1d6b3e;
}
.payphone-call:active { transform: translateY(1px); }
html.payphone-open { overflow: hidden; }

/* ------------------------------------------------------------- footer --- */

.tv-footer {
  background: var(--tv-sea-deep); color: rgba(255,255,255,.8);
  padding: 44px 0 34px; font-size: 15px;
}
.tv-footer a { color: #cfe6ef; }
.tv-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 30px; margin-bottom: 28px;
}
@media (max-width: 720px) { .tv-footer-grid { grid-template-columns: 1fr; gap: 22px; } }
.tv-footer h4 {
  font-family: var(--tv-sans); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  margin: 0 0 10px;
}
.tv-footer ul { list-style: none; margin: 0; padding: 0; }
.tv-footer li { margin-bottom: 7px; }
.tv-footer-brand {
  font-family: var(--tv-sans); font-weight: 700; font-size: 20px;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  margin: 0 0 8px;
}
.tv-footer-legal {
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 18px; font-size: 13px; color: rgba(255,255,255,.75);
}

/* ----------------------------------------------------------- handover --- */
/* Colours here are the terminal's, not this sheet's: the whole point is
   that one palette bleeds through the other. */

.tv-reveal {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: rgba(4, 7, 13, 0);
  transition: background 1.5s ease-in;
  display: flex; align-items: center; justify-content: center;
}
.tv-reveal.is-sweeping { background: rgba(4, 7, 13, .55); }
/* While the motto is the beat, keep the veil lighter so the turn stays readable */
body.tv-motto-live .tv-reveal.is-sweeping { background: rgba(4, 7, 13, .22); }
.tv-reveal.is-typing   { background: rgba(4, 7, 13, .97); }
.tv-reveal.is-plain    { background: rgba(4, 7, 13, .97); }

/* A single bright line crossing the page once. */
.tv-reveal-scan {
  position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: linear-gradient(90deg, transparent, #7fe9ff 12%, #d8fbff 50%, #7fe9ff 88%, transparent);
  box-shadow: 0 0 22px 5px rgba(127, 233, 255, .55);
  opacity: 0;
}
.tv-reveal.is-sweeping .tv-reveal-scan {
  animation: tv-scan 1.85s cubic-bezier(.4, 0, .5, 1) forwards;
}
@keyframes tv-scan {
  0%   { opacity: 0;  top: -3px; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { opacity: 0;  top: 100%; }
}

.tv-reveal-text {
  position: relative;
  text-align: center;
  font-family: "Share Tech Mono", var(--tv-sans), monospace;
  color: #8ef0ff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  padding: 0 24px;
}
.tv-reveal.is-typing .tv-reveal-text,
.tv-reveal.is-plain  .tv-reveal-text { opacity: 1; transform: none; }

.tv-reveal-l1 {
  font-size: 13px; letter-spacing: .42em; text-transform: uppercase;
  color: #4fbfd6; margin-bottom: 12px;
}
.tv-reveal-l2 {
  font-size: clamp(17px, 3.4vw, 27px);
  letter-spacing: .12em; line-height: 1.35;
  text-shadow: 0 0 18px rgba(127, 233, 255, .45);
}
.tv-reveal.is-typing .tv-reveal-l2 { animation: tv-flicker 2.1s steps(1) 1; }
@keyframes tv-flicker {
  0%, 6%, 11%, 100% { opacity: 1; }
  8%, 9%            { opacity: .32; }
}

/* The page itself drains of colour underneath. */
body.tv-revealing > :not(.tv-reveal) {
  filter: grayscale(.85) brightness(.5) contrast(1.15);
  transition: filter 1.1s ease-in;
}
body.tv-revealing { overflow: hidden; }

/* THE TURN. The verb stays exactly where it is; only its content changes,
   under cover of a blur. Surrounding words must not move. During unlock,
   .tv-motto-live lifts the line above the scan veil so visitors can read it. */
body.tv-motto-live .tv-motto {
  position: relative;
  z-index: 10001;
  color: #d8f7ff;
  text-shadow: 0 0 18px rgba(4, 7, 13, .9), 0 0 28px rgba(127, 233, 255, .35);
}
body.tv-motto-live .tv-motto .tv-verb {
  color: #8ef0ff;
  text-shadow: 0 0 16px rgba(127, 233, 255, .85);
}
.tv-motto .tv-verb {
  display: inline-block;
  transition: color .45s ease-out, text-shadow .45s ease-out;
}
.tv-motto .tv-verb.is-turning {
  color: #8ef0ff;
  text-shadow: 0 0 18px rgba(127, 233, 255, .95), 0 0 36px rgba(127, 233, 255, .55);
  animation: tv-verb-turn 1.1s ease-in-out 1;
}
@keyframes tv-verb-turn {
  0%   { filter: blur(0);     opacity: 1;   transform: scale(1); }
  40%  { filter: blur(5px);   opacity: .2;  transform: scale(1.04); }
  55%  { filter: blur(5px);   opacity: .2;  transform: scale(1.04); }
  100% { filter: blur(0);     opacity: 1;   transform: scale(1); }
}

/* ------------------------------------------------------------ motion --- */

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