/* Adventure pages v2 -- the sections Kristin arranges (trips_v2.py).
   Colours come from theme.css tokens only, so light/dark and any future look
   she picks carry through without touching this file. */

.trip-v2 { overflow-x: clip; }
.trip-v2 .ts { padding: clamp(3.2rem, 8vw, 6rem) 0 0; }
.trip-v2 .ts-head { width: min(1120px, 92vw); margin: 0 auto 1.6rem; }
.trip-v2 .ts-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.trip-v2 .ts-head .eyebrow { margin-bottom: .6rem; }
.trip-v2 p { max-width: 68ch; }
.narrow2 { width: min(780px, 92vw); margin: 0 max(4vw, calc((100vw - 1120px) / 2)); }
/* 29 Sept (Alex: "can that banner appear behind the dock and let's make it look construction tape like but on brand"):
   her gold and navy in diagonal stripes, the words on a small navy label, sitting under the dock (the dock is z 70). */
.pv-band { position: sticky; top: 0; z-index: 60; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  background: repeating-linear-gradient(-45deg, #d9b560 0 18px, #050247 18px 36px);
  box-shadow: 0 2px 0 rgba(5,2,71,.35), 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.3);
  font: 700 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #F5F1E6; }
.pv-band > span { background: #050247; padding: 6px 12px; border-radius: 99px; box-shadow: 0 0 0 2px #d9b560; white-space: nowrap; }
@media (max-width: 900px) { .pv-band > span + span { display: none; } }
@media (max-width: 560px) { .pv-band { top: auto; bottom: 0; position: fixed; left: 0; right: 0; } .pv-band > span { letter-spacing: .14em; font-size: 9.5px; } }

/* ---------------------------------------------------------------- hero */
.ts-hero { padding: 0 !important; position: relative; }
.ts-hero .th-media { position: relative; overflow: hidden; background: var(--hero-bg); }
.ts-hero .th-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-hero .th-none { background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--sage) 40%, transparent), transparent 60%), var(--navy); }
.ts-hero h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: 1.02; margin: .5rem 0 .6rem; }
.ts-hero .th-tag { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin: 0 0 .7rem; }
.ts-hero .th-meta { font: 500 .85rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin: 0; }
.ts-hero .th-teaser { margin-top: 1rem; font-size: 1.06rem; }
.ts-hero .th-cta { margin: 1.6rem 0 0; }
/* the title big, the tagline on its own line under it (30 Sept, Alex: "The Return
   to Water" is a tagline of "Mexico", not half of a heading that wraps) */
.ts-hero h1.th-h1 { text-wrap: balance; }
.ts-hero .th-t { display: block; }
.ts-hero .th-sub { display: block; font: italic 500 clamp(1.5rem, 3.8vw, 2.4rem)/1.12 var(--serif); letter-spacing: 0;
  margin: .45rem 0 0; max-width: 24ch; text-wrap: balance; opacity: .96; }
.ts-hero.t-full .th-sub { color: #F5F1E6; }
.ts-hero.t-framed .th-sub { margin-left: auto; margin-right: auto; }
.ts-hero .th-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ts-hero .th-h1 + .th-tag { margin-top: .9rem; opacity: .88; }
/* 30 Sept review: a long title (over 24 letters, th-lt) or tagline (over 40, th-lg) is a size
   smaller, and the tagline runs wider on a computer, so a 90-letter one is two or three lines,
   not five. */
.ts-hero h1.th-lt { font-size: clamp(2.2rem, 6.2vw, 4.2rem); }
.ts-hero .th-sub.th-lg { font-size: clamp(1.25rem, 2.9vw, 1.85rem); max-width: 34ch; }
@media (min-width: 1000px) { .ts-hero .th-sub { max-width: 28ch; } .ts-hero .th-sub.th-lg { max-width: 40ch; } }

/* full: the photograph is the whole first screen, words sit on it */
.ts-hero.t-full { min-height: 100svh; display: grid; }
.ts-hero.t-full .th-media { grid-area: 1/1; min-height: 100svh; }
.ts-hero.t-full .th-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,2,71,.08) 18%, rgba(5,2,71,.35) 50%, rgba(5,2,71,.82) 100%); }
.ts-hero.t-full .th-words { grid-area: 1/1; align-self: end; z-index: 2; color: #F5F1E6;
  width: min(1120px, 92vw); margin: 0 auto; padding: 0 0 10.5rem;
  text-shadow: 0 1px 18px rgba(5,2,71,calc(.35 + var(--shade,.35) * .35)), 0 0 3px rgba(5,2,71,calc(var(--shade,.35) * .45)); }
/* Words over a photograph (Alex, 24 Sept): "if she were to upload something
   bright it'll be hard to read." The page measures each hero photo where the
   words sit and sets --shade from 0.15 (a dark photo, barely touched) to 1 (a
   bright one, shaded well down). Without JS it sits at a safe middle. */
.ts-hero.t-full .th-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,2,71,.2) 0%, rgba(5,2,71,.5) 40%, rgba(5,2,71,.72) 100%);
  opacity: var(--shade, .35); transition: opacity .6s ease; }
.ts-hero.t-full .th-media::after { z-index: 1; }
.ts-hero.t-full .eyebrow { color: #CFE3C2; }
@media (min-width: 1000px) { .ts-hero.t-full .th-words { padding-bottom: 4.5rem; } }
/* 30 Sept review: the words of a full-photo top never go up under the nav bar or the Coming soon
   badge, however long her title and tagline (only a top taller than the screen is moved). */
.ts-hero.t-full .th-words { padding-top: calc(env(safe-area-inset-top, 0px) + 128px); }

/* split: words one side, photograph the other */
.ts-hero.t-split { display: grid; grid-template-columns: 1fr; }
.ts-hero.t-split .th-media { aspect-ratio: 4/5; max-height: 72svh; }
.ts-hero.t-split .th-words { width: min(1120px, 92vw); margin: 0 auto; padding: 2rem 0 0; }
@media (min-width: 1000px) {
  .ts-hero.t-split { grid-template-columns: 1fr 1fr; min-height: 100svh; align-items: center; }
  .ts-hero.t-split .th-media { order: 2; aspect-ratio: auto; height: 100svh; max-height: none; }
  .ts-hero.t-split .th-words { width: auto; padding: 6rem 3.5rem 3rem max(4vw, calc((100vw - 1120px) / 2)); }
}

/* framed: the photograph in a frame, words beneath */
.ts-hero.t-framed { padding-top: clamp(5.5rem, 12vh, 7.5rem) !important; }
.ts-hero.t-framed .th-media { width: min(1180px, 92vw); margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--r-img, 6px); box-shadow: var(--shadow); }
.ts-hero.t-framed .th-words { width: min(1120px, 92vw); margin: 0 auto; padding-top: 2rem; text-align: center; }
.ts-hero.t-framed .th-words p { margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .ts-hero.t-framed .th-media { aspect-ratio: 4/5; } }

/* ---------------------------------------------------------------- overview */
.ov { display: grid; gap: 2.4rem; }
.t-lede .ov-body { font-family: var(--serif); font-size: clamp(1.35rem, 2.8vw, 1.85rem); line-height: 1.4; text-align: center; margin: 0 auto; max-width: 30em; }
.t-lede .ov-body p { max-width: none; }
.t-columns .ov-body { font-size: 1.1rem; }
.ov-lists { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.ov-lists h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-bottom: .8rem; }
@media (min-width: 800px) { .t-columns .ov { grid-template-columns: 1.3fr 1fr; align-items: start; } }
ul.dashes { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
ul.dashes li { padding-left: 1.6rem; position: relative; color: var(--ink-soft); }
ul.dashes li::before { content: "×"; position: absolute; left: 0; color: var(--ink-soft); opacity: .6; }

/* ---------------------------------------------------------------- rails (side-scroll) */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(4vw, calc((100vw - 1120px) / 2));
  padding: .4rem max(4vw, calc((100vw - 1120px) / 2)) 1.2rem; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail { align-items: start; }
.rail:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

/* ---------------------------------------------------------------- highlights */
.hl { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card, 4px); overflow: hidden; box-shadow: var(--shadow); }
.hl-img { aspect-ratio: 4/3; overflow: hidden; }
.hl-img img, .act-img img, .host-img img, .stay-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-w { padding: 1.1rem 1.2rem 1.3rem; }
.hl-w h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.hl-w p { margin: 0; color: var(--ink-soft); }
.t-cards .hl-set { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.t-alternating .hl-set { display: grid; gap: 2.6rem; }
.t-alternating .hl { display: grid; background: none; border: 0; box-shadow: none; gap: 1.2rem; }
@media (min-width: 800px) {
  .t-alternating .hl { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 2.6rem; }
  .t-alternating .hl:nth-child(even) .hl-img { order: 2; }
  .t-alternating .hl-w h3 { font-size: 1.9rem; }
}
.t-alternating .hl-img { border-radius: var(--r-img, 4px); aspect-ratio: 3/2; }
.t-alternating .hl-w { padding: 0; }

/* ---------------------------------------------------------------- itinerary */
.timeline { list-style: none; padding: 0; margin-top: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 22px; top: .4rem; bottom: .4rem; width: 1px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; padding: 0 0 1.8rem; position: relative; }
.timeline .dn { width: 45px; height: 45px; border-radius: 50%; background: var(--ground); border: 1px solid var(--brass);
  color: var(--brass); display: grid; place-items: center; font: 500 1.15rem/1 var(--serif); position: relative; z-index: 1; }
.timeline h3 { font-size: 1.35rem; margin: .55rem 0 .3rem; }
.timeline p { margin: 0 0 .5rem; color: var(--ink-soft); }
details.day, details.faq-q { border-top: 1px solid var(--line); padding: 0; }
details.day:last-child, details.faq-q:last-child { border-bottom: 1px solid var(--line); }
details.day summary, details.faq-q summary { list-style: none; cursor: pointer; padding: 1.1rem 2.2rem 1.1rem 0; position: relative;
  display: flex; gap: 1rem; align-items: baseline; font: 500 1.2rem/1.3 var(--serif); min-height: 44px; }
details.day summary::-webkit-details-marker, details.faq-q summary::-webkit-details-marker { display: none; }
details.day summary::after, details.faq-q summary::after { content: "+"; position: absolute; right: .2rem; top: 1rem; font: 300 1.5rem/1 var(--sans); color: var(--brass); transition: transform .25s ease; }
details[open].day summary::after, details[open].faq-q summary::after { transform: rotate(45deg); }
details.day .dn { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); flex: none; width: 3.6rem; }
details.day > p, details.faq-q > p { margin: 0 0 1.1rem; color: var(--ink-soft); }
details.day > p { padding-left: 4.6rem; }
@media (max-width: 600px) { details.day > p { padding-left: 0; } }
.day-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card, 4px); padding: 1.3rem 1.3rem 1.1rem; box-shadow: var(--shadow); }
.day-card .dn { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0 0 .7rem; }
.day-card h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.day-card p { color: var(--ink-soft); margin: 0 0 .5rem; }

/* ---------------------------------------------------------------- stay */
.stay { display: grid; gap: 1.6rem; }
.stay-w h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .6rem; }
.stay-w p { color: var(--ink-soft); }
.stay-img { overflow: hidden; border-radius: var(--r-img, 4px); aspect-ratio: 3/2; }
@media (min-width: 800px) { .t-split .stay { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3rem; } }
.t-banner .stay { position: relative; }
.t-banner .stay-img { border-radius: 0; aspect-ratio: auto; height: min(78svh, 720px); }
.t-banner .stay-w { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--r-card, 4px);
  padding: 1.6rem 1.6rem 1.2rem; width: min(560px, 88vw); margin: -5rem auto 0; position: relative; z-index: 2; }
@media (min-width: 900px) { .t-banner .stay-w { position: absolute; left: max(4vw, calc((100vw - 1120px) / 2)); bottom: 3rem; margin: 0; } }

/* ---------------------------------------------------------------- activities */
.act { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card, 4px); overflow: hidden; box-shadow: var(--shadow); padding-bottom: 1.1rem; }
.act-img { aspect-ratio: 4/5; overflow: hidden; margin-bottom: 1rem; }
.act h3 { font-size: 1.3rem; padding: 0 1.2rem; margin-bottom: .3rem; }
.act:not(:has(.act-img)) h3 { padding-top: 1.2rem; }
.act p { color: var(--ink-soft); margin: 0; padding: 0 1.2rem; }
.act-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.act-grid .act-img { aspect-ratio: 4/3; }

/* ---------------------------------------------------------------- hosts */
.hosts { display: grid; gap: 2.4rem; }
.host-img { overflow: hidden; border-radius: var(--r-img, 4px); aspect-ratio: 4/5; }
.host h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.host-role { font: 600 .74rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin: .4rem 0 1rem; }
.host-w p { color: var(--ink-soft); }
@media (min-width: 800px) { .t-portrait .host { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 3rem; align-items: center; } }
.t-portrait .host { display: grid; gap: 1.4rem; }
.t-cards .hosts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.4rem; }
.t-cards .host { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card, 4px); overflow: hidden; box-shadow: var(--shadow); }
.t-cards .host-img { border-radius: 0; aspect-ratio: 1; }
.t-cards .host-w { padding: 1.1rem 1.2rem 1.2rem; }
.t-cards .host h3 { font-size: 1.4rem; }

/* ---------------------------------------------------------------- gallery */
.masonry { columns: 2 160px; column-gap: .7rem; }
@media (min-width: 900px) { .masonry { columns: 3 240px; column-gap: 1rem; } }
.masonry figure { margin: 0 0 .7rem; break-inside: avoid; overflow: hidden; border-radius: var(--r-img, 3px); }
@media (min-width: 900px) { .masonry figure { margin-bottom: 1rem; } }
.masonry img, .film img, .gal-track img { width: 100%; display: block; }
.film { grid-auto-columns: min(70vw, 460px); }
.film figure { margin: 0; overflow: hidden; border-radius: var(--r-img, 3px); aspect-ratio: 4/3; }
.film img { height: 100%; object-fit: cover; }
.gal-car { position: relative; width: min(1120px, 92vw); margin: 0 auto; }
.gal-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-img, 3px); }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track figure { margin: 0; scroll-snap-align: center; aspect-ratio: 3/2; overflow: hidden; }
.gal-track img { height: 100%; object-fit: cover; }
.gal-prev, .gal-next { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: rgba(5,2,71,.45); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gal-prev { left: .8rem; } .gal-next { right: .8rem; }

/* ---------------------------------------------------------------- rooms */
.rooms { display: grid; gap: 1.6rem; }
.rooms-when { font: 500 .85rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.rooms-p { max-width: 560px; width: 100%; }
.rooms-w h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .8rem; }
.rooms-facts { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .5rem; }
.rooms-facts li { color: var(--ink-soft); }
.rooms-facts b { color: var(--ink); font-weight: 600; }
.tier .price { white-space: nowrap; }
@media (min-width: 900px) { .rooms { grid-template-columns: 1fr 460px; align-items: start; } }
.tiers-list .tier { padding: .7rem .9rem; margin-bottom: .4rem; }
.tiers-list .tier .muted { display: none; }
.rooms-p .dep { margin-top: .6rem; }
.rooms-p .btn { margin-top: 1rem; }

/* ---------------------------------------------------------------- pack */
.checklist { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: .7rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist li { padding-left: 2rem; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.05rem; height: 1.05rem; border: 1.5px solid var(--brass); border-radius: 3px; }
.checklist li::after { content: ""; position: absolute; left: .34rem; top: .34rem; width: .35rem; height: .6rem; border: solid var(--brass); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.chips li { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: .55rem 1rem; font-size: .95rem; }

/* ---------------------------------------------------------------- faq */
.faq-cols { display: grid; gap: 1.6rem 3rem; grid-template-columns: 1fr; margin: 0 auto; }
@media (min-width: 800px) { .faq-cols { grid-template-columns: 1fr 1fr; } }
.faq-cols dt { font: 500 1.25rem/1.3 var(--serif); margin-bottom: .4rem; }
.faq-cols dd { margin: 0; color: var(--ink-soft); }
.ts-faq { padding-bottom: 1rem; }

/* ================================================================ motions
   Everything starts complete. Only with JS running (html.js) and motion
   allowed does a section hold back until it arrives. */
@media (prefers-reduced-motion: no-preference) {
  html.js .ts[data-motion="fade"]:not(.in) [data-m],
  html.js .ts[data-motion="fade"]:not(.in) .ts-head { opacity: 0; transform: translateY(26px); }
  html.js .ts[data-motion="fade"] [data-m], html.js .ts[data-motion="fade"] .ts-head { transition: opacity .9s cubic-bezier(.22,.94,.2,1), transform .9s cubic-bezier(.22,.94,.2,1); }

  html.js .ts[data-motion="stagger"]:not(.in) [data-m],
  html.js .ts[data-motion="stagger"]:not(.in) .ts-head { opacity: 0; transform: translateY(30px); }
  html.js .ts[data-motion="stagger"] [data-m], html.js .ts[data-motion="stagger"] .ts-head { transition: opacity .8s cubic-bezier(.22,.94,.2,1), transform .8s cubic-bezier(.22,.94,.2,1);
    transition-delay: calc(min(var(--i, 0), 8) * 90ms + 60ms); }

  html.js .ts[data-motion="slide"]:not(.in) [data-m] { opacity: 0; transform: translateX(-46px); }
  html.js .ts[data-motion="slide"]:not(.in) [data-m]:nth-child(even) { transform: translateX(46px); }
  html.js .ts[data-motion="slide"]:not(.in) .ts-head { opacity: 0; }
  html.js .ts[data-motion="slide"] [data-m], html.js .ts[data-motion="slide"] .ts-head { transition: opacity .9s ease, transform 1s cubic-bezier(.22,.94,.2,1);
    transition-delay: calc(min(var(--i, 0), 8) * 70ms); }

  html.js .ts[data-motion="zoom"] [data-media] img { transition: transform 2.4s cubic-bezier(.16,.84,.3,1); }
  html.js .ts[data-motion="zoom"]:not(.in) [data-media] img { transform: scale(1.14); }
  html.js .ts[data-motion="zoom"]:not(.in) [data-m], html.js .ts[data-motion="zoom"]:not(.in) .ts-head { opacity: 0; }
  html.js .ts[data-motion="zoom"] [data-m], html.js .ts[data-motion="zoom"] .ts-head { transition: opacity 1.1s ease .25s; }

  .ts[data-motion="parallax"] [data-media] { overflow: hidden; }
  .ts[data-motion="parallax"] [data-media] img { transform: scale(1.18); will-change: transform; }
  @supports (animation-timeline: view()) {
    .ts[data-motion="parallax"] [data-media] img { animation: t-par linear both; animation-timeline: view(); }
    @keyframes t-par { from { transform: translate3d(0, -9%, 0) scale(1.18); } to { transform: translate3d(0, 9%, 0) scale(1.18); } }
  }
  html.js .ts[data-motion="parallax"]:not(.in) [data-m] { opacity: 0; transform: translateY(20px); }
  html.js .ts[data-motion="parallax"] [data-m] { transition: opacity .9s ease, transform .9s cubic-bezier(.22,.94,.2,1); }
}

/* hero photos taking turns (her starred heroes, 23 Sept) */
.ts-hero .th-car img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.ts-hero .th-car img.on { opacity: 1; }
.ts-hero.t-split .th-car, .ts-hero.t-framed .th-car { position: relative; }

/* how intense it is (27 Sept, Alex chose the leaf ring) */
.ts-hero .th-int { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: .9rem 0 0; color: inherit; text-decoration: none; }
.ts-hero .th-int .thi { display: inline-flex; align-items: center; gap: .45rem; font: 600 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.ts-hero .th-int .dial { display: block; }
.ts-hero .th-int .ring .slot.ghost .leaf { fill: rgba(245,241,230,.28); opacity: 1; }
.int-full { grid-column: 1 / -1; margin-top: 2rem; padding: 1.4rem 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.int-full h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0 0 1.1rem; }
.int-full .int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; text-align: center; }
.int-full .dial { display: grid; justify-items: center; }
.int-full .dial .dn { margin: .5rem auto 0; }
.int-full .int-key { margin: 1.1rem 0 0; font-size: .85rem; color: var(--ink-soft); text-align: center; }

/* ================================================================ the Studio look (27 Sept 2026)
   Adventure Studio's journey page: sections as cards on the paper, field notes,
   postcards, a strip that slides sideways, and three ways to show the days.
   Colours from theme.css tokens, plus a handful of its own below. */
:root { --sd-deep: #050247; --sd-deep-ink: #F4F1E8; --sd-heart: #B8584B; --sd-pace: #B8860B; --sd-stamp: #7A3E2E;
  --sd-soft2: #6B6890; --sd-dash: #D8D2C0; --sd-pc: #FFFFFF; }
:root[data-theme="dark"] { --sd-deep: #07062A; --sd-heart: #E0987F; --sd-pace: #D9A83A; --sd-stamp: #E0987F; --sd-soft2: #B7B5D6; --sd-dash: #3A3978; --sd-pc: #F4F1E8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sd-deep: #07062A; --sd-heart: #E0987F; --sd-pace: #D9A83A; --sd-stamp: #E0987F; --sd-soft2: #B7B5D6; --sd-dash: #3A3978; --sd-pc: #F4F1E8; } }

.trip-v2 .ts.sd { padding: clamp(10px, 1.6vw, 18px) 0 0; }
.sd-in { width: min(1180px, calc(100vw - 24px)); margin: 0 auto; position: relative; }
.sd-card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 20px 50px rgba(5,2,71,.06); padding: clamp(26px, 5vw, 64px); }
.sd-bare { padding: clamp(30px, 5vw, 64px) clamp(12px, 4vw, 64px); }
.sd-deep { background: var(--sd-deep); color: var(--sd-deep-ink); border-radius: 26px; padding: clamp(26px, 5vw, 64px); overflow: clip; }
.sd-deep.flush { padding: 0; }
.sd-deep h2, .sd-deep h3 { color: var(--sd-deep-ink); }
.sd-kick { font: 600 .72rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0 0 .7rem; }
.sd-deep .sd-kick { color: var(--sage); }
.sd-sh { margin-bottom: 1.8rem; }
.sd-sh h2, .sd-ov h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1; margin: 0; text-wrap: balance; }
.sd-ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sd-btn { display: inline-flex; align-items: center; gap: .6rem; background: var(--sage); color: #050247 !important; border-radius: 999px; padding: .9rem 1.5rem;
  font: 700 1rem/1 var(--sans); text-decoration: none !important; box-shadow: 0 10px 30px rgba(0,0,0,.2); transition: transform .2s, box-shadow .2s; }
.sd-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.28); }
.sd-btn:hover .sd-ic { transform: translateX(3px); }
.sd-btn2 { display: inline-flex; align-items: center; border: 1.5px solid rgba(244,241,232,.55); background: rgba(244,241,232,.08); color: #F4F1E8 !important;
  border-radius: 999px; padding: .85rem 1.4rem; font: 600 .95rem/1 var(--sans); text-decoration: none !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sd-btn2:hover { background: rgba(244,241,232,.18); }
.sd-endk { font: italic 500 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--serif); margin: 0; max-width: 18ch; }

/* ---- top of the page */
.ts-hero.t-studio h1 { font-size: clamp(3.4rem, 10vw, 7.4rem); line-height: .92; letter-spacing: -.01em; }
.ts-hero.t-studio .th-sub { font-size: clamp(1.75rem, 4.6vw, 3.1rem); margin-top: .7rem; }
.ts-hero.t-studio h1.th-lt { font-size: clamp(2.5rem, 6.8vw, 5.2rem); line-height: .98; }
.ts-hero.t-studio .th-sub.th-lg { font-size: clamp(1.4rem, 3.3vw, 2.2rem); }
.sd-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; max-width: none; }
.sd-chips span { background: rgba(244,241,232,.14); border: 1px solid rgba(244,241,232,.3); border-radius: 999px; padding: .35rem .8rem; font: 500 .88rem/1.2 var(--sans); text-shadow: none; }
.sd-hcta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; }
.sd-hcta .sd-btn { text-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .t-studio h1 { animation: sdTitle 1.1s cubic-bezier(.2,.8,.2,1) both; }
  .t-studio .sd-chips span, .t-studio .sd-hcta > * { animation: sdPill .7s cubic-bezier(.2,.8,.2,1) both; }
  .t-studio .sd-chips span:nth-child(2) { animation-delay: .08s; } .t-studio .sd-chips span:nth-child(3) { animation-delay: .16s; } .t-studio .sd-chips span:nth-child(4) { animation-delay: .24s; }
  .t-studio .sd-hcta > *:nth-child(1) { animation-delay: .4s; } .t-studio .sd-hcta > *:nth-child(2) { animation-delay: .5s; }
}
@keyframes sdPill { from { opacity: 0; transform: translateY(14px); } }
@keyframes sdTitle { from { opacity: 0; transform: translateY(30px); letter-spacing: .04em; } }
.sd-stick { position: sticky; top: calc(100vh - 110px); top: calc(100svh - 110px); height: 0; z-index: 40; display: flex; justify-content: flex-end; align-items: flex-start;
  padding-right: max(16px, calc((100vw - 1180px) / 2)); pointer-events: none; }
.sd-stickb { pointer-events: auto; display: inline-flex; align-items: center; gap: .75rem; background: var(--navy); color: #F4F1E8 !important; border-radius: 999px;
  padding: .6rem .75rem .6rem 1.2rem; font: 600 .9rem/1 var(--sans); text-decoration: none !important; box-shadow: 0 14px 34px rgba(5,2,71,.35);
  opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .35s, transform .35s cubic-bezier(.3,1.3,.4,1); }
.sd-stickb b { background: var(--sage); color: #050247; border-radius: 999px; padding: .4rem .75rem; }
.sd-stick.on .sd-stickb { opacity: 1; transform: none; }
.sd-stick:not(.on) .sd-stickb { pointer-events: none; }
:root[data-theme="dark"] .sd-stickb { background: var(--cream); color: #050247 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sd-stickb { background: var(--cream); color: #050247 !important; } }
@media (max-width: 600px) { .sd-stickb span { display: none; } .sd-stick { padding-right: 16px; } }
/* 29 Sept pm (Alex): on phones the floating price pill sat over the words. The dock already carries Reserve a spot there. */
@media (max-width: 899px) { .sd-stick { display: none; } }

/* ---- about: the story and the field notes */
.sd-ov { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .sd-ov { grid-template-columns: 1fr; } }
/* 30 Sept (Alex): a tall photo with the story ("one that will fit well here in vertical
   orientation"). Always a true portrait, 4:5. On a phone it follows the words. On a
   computer the page (SD_JS, ovFit) sets it beside a paragraph, its top level with the
   paragraph's, words on the left all the way down it, as big as leaves the words a
   comfortable width; when that is small, it sits under the words, centred. Never under
   280 px wide on a computer. Without the script it floats at the right under the words. */
.ov-ph { position: relative; margin: 1.8rem 0 0; overflow: hidden; border-radius: 18px; background: var(--line);
  box-shadow: 0 20px 44px -22px rgba(5,2,71,.45); aspect-ratio: 4 / 5; }
.ov-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
@media (min-width: 861px) {
  .sd-ov.has-ph .ov-story { display: flow-root; }
  .sd-ov.has-ph .ov-ph { float: right; clear: right; width: 46%; margin: .4rem 0 .9rem 28px; }
  .sd-ov.has-ph .ov-ph.ov-blk { float: none; margin: 1.8rem auto 0; }
}
.ov-lede { font: italic 500 clamp(1.45rem, 2.8vw, 1.95rem)/1.3 var(--serif); margin: .8rem 0 1.4rem; max-width: 30ch; text-wrap: balance; }
.sd-body p { font-size: 1.06rem; line-height: 1.75; margin: 0 0 1.1em; max-width: 62ch; color: var(--ink-soft); }
.dropcap p:first-child::first-letter, .dropcap > .ov-ph:first-child + p::first-letter { float: left; font: 600 4.2em/.82 var(--serif); color: var(--brass); margin: .06em .1em 0 0; }
.ov-notes { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 22px 22px 18px;
  box-shadow: 0 18px 40px rgba(5,2,71,.08); transform: rotate(.4deg); container-type: inline-size; }
.sd-card .ov-notes { background: var(--ground); }
.ov-notes::before { content: ""; position: absolute; inset: 6px; border: 1px dashed var(--sd-dash); border-radius: 3px; pointer-events: none; }
.on-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.on-h > span:first-child { white-space: nowrap; font: 600 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.on-stamp { font: 700 .66rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sd-stamp); border: 1.5px solid var(--sd-stamp); border-radius: 4px;
  padding: 3px 7px; transform: rotate(-4deg); opacity: .85; transition: transform .3s cubic-bezier(.3,1.6,.4,1); }
.ov-notes .on-stamp:hover { transform: rotate(3deg) scale(1.08) !important; }
.on-feel { display: grid; gap: 14px; }
.nf { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; align-items: start; border-radius: 10px; transition: transform .35s ease, background .35s ease; }
.nf:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--sage) 12%, transparent); }
.la { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; overflow: visible; }
.la .dot { fill: var(--ink); stroke: none; }
.nf-t b { font: 600 1.2rem var(--serif); display: flex; align-items: center; gap: .4rem; }
.nf-t > span { font-size: .85rem; color: var(--ink-soft); }
.nf-scale { display: flex; align-items: center; gap: 6px; margin: 3px 0 2px; }
.nf-scale i { font: italic 500 .88rem var(--serif); color: var(--sd-soft2); }
.leaves { width: 80px; height: 16px; flex: none; --lc: var(--brass); }
.lv-heart { --lc: var(--sd-heart); } .lv-pace { --lc: var(--sd-pace); }
.leaves .lf { fill: none; stroke: var(--lc); stroke-width: 1.1; transform-box: fill-box; transform-origin: 50% 100%; }
.leaves .lf.on { fill: var(--lc); }
.sd-tip { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--sd-soft2); color: var(--sd-soft2);
  font: 600 10px/1 var(--sans); cursor: help; }
.sd-tip > span { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); width: 220px; background: var(--navy); color: #F4F1E8;
  font: 400 .8rem/1.45 var(--sans); padding: .6rem .75rem; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 5; text-align: left; }
.sd-tip:hover > span, .sd-tip:focus > span { opacity: 1; transform: translateX(-50%); }
.perf { height: 0; border-top: 2px dotted var(--sd-dash); margin: 18px -6px 16px; }
.on-list h4 { font: 600 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0 0 8px; }
.on-list + .on-list { margin-top: 14px; }
.on-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.on-list li { position: relative; padding-left: 22px; font: 500 1.08rem/1.35 var(--serif); transition: padding-left .35s ease; }
.on-list li:hover { padding-left: 28px; }
.on-list ul.yes li::before { content: ""; position: absolute; left: 0; top: .3em; width: 13px; height: 13px; background: var(--brass); transition: transform .5s cubic-bezier(.3,1.5,.4,1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-7 -7 14 14'%3E%3Cpath transform='rotate(40)' d='M0 -6 C 4 -3.5, 4 2.5, 0 6 C -4 2.5, -4 -3.5, 0 -6 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-7 -7 14 14'%3E%3Cpath transform='rotate(40)' d='M0 -6 C 4 -3.5, 4 2.5, 0 6 C -4 2.5, -4 -3.5, 0 -6 Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.on-list ul.yes li:hover::before { animation: none !important; transform: rotate(200deg) scale(1.25); }
.on-list ul.no li { color: var(--sd-soft2); font-style: italic; }
.on-list ul.no li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 9px; height: 1.5px; background: var(--sd-dash); }
@container (min-width: 540px) {
  .on-feel { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; align-items: start; }
  .on-feel .nf { grid-template-columns: 1fr; gap: 8px; padding: 4px 16px 6px; border-left: 1px dotted var(--sd-dash); align-content: start; }
  .on-feel .nf:first-child { border-left: 0; padding-left: 4px; }
  .on-feel .la { width: 34px; height: 34px; }
  .on-feel .leaves { width: 66px; height: 13px; }
  .on-feel .nf-scale { gap: 5px; }
  .on-lists { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 28px; }
  .on-lists .on-list + .on-list { margin-top: 0; padding-left: 24px; border-left: 1px dotted var(--sd-dash); }
}

/* ---- highlights: postcards */
.postcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 26px; padding-top: 6px; }
.pc { background: var(--sd-pc); color: #050247; padding: 12px 12px 18px; border-radius: 6px; box-shadow: 0 18px 40px rgba(5,2,71,.13), 0 2px 6px rgba(5,2,71,.06);
  transform: rotate(var(--r)); transition: transform .45s cubic-bezier(.3,1.3,.4,1), box-shadow .45s, opacity .9s ease; }
.pc:hover { transform: rotate(0deg) translateY(-6px) !important; box-shadow: 0 28px 60px rgba(5,2,71,.18); }
.pc img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; display: block; }
.pc-t { padding: 12px 6px 0; }
.pc h3 { font: 600 1.6rem/1.1 var(--serif); color: #050247; margin: 0 0 6px; }
.pc p { margin: 0; font: italic 500 1.12rem/1.35 var(--serif); color: #4A4870; }

/* ---- day by day: shared */
.trip-v2 .when { font: 600 .7rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 6px; }
.hday-c h3, .tcard h3, .dcard h3 { font: 600 1.75rem/1.1 var(--serif); margin: 0; }
.hday-c p, .tcard p, .dcard p { margin: .5em 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

/* sideways strips (the gallery, and the sideways timeline) */
.hs { position: relative; }
.hs-stick { position: sticky; top: max(90px, calc(50vh - min(33vh, 280px))); height: min(66vh, 560px); overflow: hidden; margin: 0 calc(-1 * clamp(26px, 5vw, 64px)); }
.hs-track { display: flex; gap: 18px; height: 100%; padding: 0 clamp(26px, 5vw, 64px); align-items: center; will-change: transform; width: max-content; }
.hs-f { margin: 0; height: 78%; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; flex: none; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.hs-f.tall { height: 96%; aspect-ratio: 3/4; }
.hs-f img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.15); }
.hs-end { flex: none; width: 360px; padding: 0 40px 0 20px; display: grid; gap: 14px; align-content: center; justify-items: start; }
.hs-bar { position: absolute; left: clamp(26px, 5vw, 64px); right: clamp(26px, 5vw, 64px); bottom: 10px; height: 2px; background: rgba(244,241,232,.15); border-radius: 2px; overflow: hidden; }
.hs-bar i { position: absolute; inset: 0; background: var(--sage); transform-origin: left; transform: scaleX(0); }
.hs.flat .hs-stick { position: relative; top: auto; height: auto; overflow-x: auto; margin: 0; scrollbar-width: none; }
.hs.flat .hs-track { padding: 0 0 6px; height: auto; transform: none !important; }
.hs.flat .hs-f, .hs.flat .hs-f.tall { height: 260px; }
.hs.flat .hs-f img { transform: none !important; }
.hs.flat .hs-bar { display: none; }
.hs.flat .hs-end { width: 260px; }
/* 29 Sept pm (Alex: "too much dead space ... let the user scroll if they want to"): the gallery is a plain swipeable strip */
.hs-gal.flat .hs-stick { margin: 0 calc(-1 * clamp(26px, 5vw, 64px)); padding: 4px clamp(26px, 5vw, 64px) 14px; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(26px, 5vw, 64px); overscroll-behavior-x: contain; }
.hs-gal.flat .hs-track { padding: 0; width: auto; }   /* 30 Sept (Alex: "this shouldn't let me scroll so far"): Safari 27 sized a max-content strip of 4:3 photos about 700 px too wide, so it scrolled into empty space past the end card; the photos now set the scroll length */
.hs-gal.flat .hs-f, .hs-gal.flat .hs-f.tall { height: clamp(240px, 58vw, 420px); scroll-snap-align: start; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.hs-gal.flat .hs-end { scroll-snap-align: start; }
/* sideways timeline */
.hs-days .hs-stick { height: min(78vh, 620px); top: max(80px, calc(50vh - min(39vh, 310px))); margin: 0 calc(-1 * clamp(12px, 4vw, 64px)); }
.hs-days .hs-track { position: relative; align-items: stretch; padding: 0 clamp(40px, 8vw, 120px); }
.hs-days .hs-bar { background: var(--line); }
.hroute { position: absolute; left: 0; width: 0; top: 50%; margin-top: -1px; height: 2px; background: var(--line); }
.hroute i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--brass); transition: width .25s ease-out; }
.hday { position: relative; flex: none; width: 210px; height: 100%; }
.hdot { position: absolute; left: 0; top: 50%; margin-top: -21px; width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 2px solid var(--line);
  display: grid; place-items: center; font: 600 1.05rem var(--serif); color: var(--sd-soft2); z-index: 1; transition: all .45s cubic-bezier(.3,1.4,.4,1); }
.hday.passed .hdot { background: var(--brass); border-color: var(--brass); color: var(--ground); transform: scale(1.1); }
.hday .stem { position: absolute; left: 20px; width: 0; border-left: 1.5px dashed var(--sd-dash); height: 34px; }
.hday.up .stem { bottom: calc(50% + 21px); } .hday.dn .stem { top: calc(50% + 21px); }
.hday-c { position: absolute; left: -30px; width: 320px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; opacity: .7;
  transform: rotate(var(--tilt)); transition: box-shadow .5s, opacity .5s; }
.hday.up .hday-c { bottom: calc(50% + 54px); } .hday.dn .hday-c { top: calc(50% + 54px); }
.hday.passed .hday-c { opacity: 1; box-shadow: 0 24px 50px rgba(5,2,71,.12); }
@media (prefers-reduced-motion: no-preference) { .hday-c { animation: sdBob 7s ease-in-out infinite; animation-delay: var(--fd); } }
@keyframes sdBob { 0%, 100% { transform: rotate(var(--tilt)) translateY(0); } 50% { transform: rotate(calc(var(--tilt) * -.6)) translateY(-8px); } }
.hs-days .hs-end { align-self: center; }
.hs-days.flat .hs-track { padding: 0 0 8px; align-items: flex-start; gap: 16px; }
.hs-days.flat .hday { height: auto; width: 280px; display: grid; gap: 12px; }
.hs-days.flat .hdot, .hs-days.flat .hday-c { position: relative; left: auto; top: auto; bottom: auto; margin: 0; width: auto; opacity: 1; animation: none; transform: none; }
.hs-days.flat .stem, .hs-days.flat .hroute { display: none; }
/* trail */
.trail { position: relative; max-width: 980px; margin: 10px auto 0; display: grid; gap: 26px; padding-bottom: 10px; }
.tr-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.tr-bg { fill: none; stroke: var(--sd-dash); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.tr-go { fill: none; stroke: var(--brass); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.tstop { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr); align-items: center; min-height: 190px; }
.tdot { grid-column: 2; grid-row: 1; justify-self: center; translate: var(--wx, 0) 0; width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 2px solid var(--sd-dash);
  display: grid; place-items: center; font: 600 1.1rem var(--serif); color: var(--sd-soft2); position: relative; z-index: 1; transition: all .5s cubic-bezier(.3,1.5,.4,1); }
.tstop.passed .tdot { background: var(--brass); border-color: var(--brass); color: var(--ground); transform: scale(1.12); box-shadow: 0 0 0 8px color-mix(in srgb, var(--sage) 25%, transparent); }
.tcard { grid-row: 1; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; box-shadow: 0 22px 50px rgba(5,2,71,.10); max-width: 400px;
  transform: translateY(var(--fy, 0)) rotate(var(--tilt)); transition: transform .25s linear, opacity .8s ease, translate 1s cubic-bezier(.2,.8,.2,1); }
.tstop.l .tcard { grid-column: 1; justify-self: end; } .tstop.r .tcard { grid-column: 3; justify-self: start; }
.tr-end { display: grid; justify-items: center; gap: 14px; text-align: center; padding-top: 40px; position: relative; z-index: 1; }
@media (max-width: 700px) { .tstop { grid-template-columns: 44px minmax(0,1fr); gap: 14px; min-height: 0; } .tdot { grid-column: 1; translate: none; }
  .tstop.l .tcard, .tstop.r .tcard { grid-column: 2; justify-self: stretch; } }
/* stack */
.dstack { position: relative; }
.ds-stick { position: sticky; top: max(80px, calc(50vh - 260px)); height: min(520px, 72vh); display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: clamp(24px, 5vw, 70px); align-items: center; overflow-x: clip; overflow-y: visible; margin-inline: -40px; padding-inline: 40px; }
.ds-side { display: grid; gap: 10px; align-content: center; justify-items: start; }
.ds-side .sd-sh { margin-bottom: .4rem; }
.ds-count { display: flex; align-items: baseline; gap: 10px; }
.ds-count b { font: 600 6rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--brass); display: inline-block; }
.ds-count b.tick { animation: sdTick .5s cubic-bezier(.3,1.5,.4,1); }
@keyframes sdTick { from { transform: translateY(24px); opacity: 0; } }
.ds-count span { font: italic 500 1.6rem var(--serif); color: var(--sd-soft2); }
.ds-ticks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ds-ticks i { width: 22px; height: 3px; border-radius: 2px; background: var(--sd-dash); transition: background .4s; }
.ds-ticks i.on { background: var(--brass); }
.ds-pile { position: relative; height: 100%; display: grid; place-items: center; }
.dcard { grid-area: 1/1; position: relative; width: min(440px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px 30px 30px;
  box-shadow: 0 26px 60px rgba(5,2,71,.14); z-index: calc(1 + var(--i)); will-change: transform; transition: filter .4s ease; }
.dcard.behind { filter: saturate(.7) brightness(.97); }
.dcard::before { content: ""; position: absolute; right: 18px; top: 16px; width: 38px; height: 38px; border: 1.5px solid var(--sd-stamp); border-radius: 50%; opacity: .35; transform: rotate(-12deg); }
.dstack:not(.flat) .dcard:not(:first-child) { opacity: 0; }
html:not(.sd-js) .dstack .ds-stick, .dstack.flat .ds-stick { position: relative; top: auto; height: auto; grid-template-columns: 1fr; overflow: visible; }
html:not(.sd-js) .dstack .ds-count, html:not(.sd-js) .dstack .ds-ticks, .dstack.flat .ds-count, .dstack.flat .ds-ticks { display: none; }
html:not(.sd-js) .dstack .ds-pile, .dstack.flat .ds-pile { display: grid; gap: 16px; place-items: stretch; }
html:not(.sd-js) .dstack .dcard, .dstack.flat .dcard { grid-area: auto; width: auto; transform: rotate(var(--tilt)) !important; opacity: 1 !important; }
.dstack.flat { height: auto !important; }
@media (max-width: 700px) { .ds-stick { grid-template-columns: 1fr; } }

/* ---- where you stay */
.sd-stay { position: relative; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); min-height: 460px; }
.sd-stay.nophoto { grid-template-columns: 1fr; min-height: 0; padding: clamp(20px, 4vw, 40px); }
.sd-stay.nophoto .stay-c { margin: 0; }
@media (max-width: 760px) { .sd-stay { grid-template-columns: 1fr; } }
.sd-stay .stay-img { position: relative; overflow: hidden; min-height: 320px; border-radius: 0; aspect-ratio: auto; }
.sd-stay .stay-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stay-c { align-self: center; margin: 28px 28px 28px -60px; position: relative; z-index: 1; background: var(--card); color: var(--ink); border-radius: 20px; padding: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); }
@media (max-width: 760px) { .stay-c { margin: -50px 16px 16px; } }
.stay-c h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); color: var(--ink) !important; margin: 0 0 12px; }
.stay-c .sd-kick { color: var(--brass) !important; }
.stay-c p { margin: 0 0 .8em; font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); }

/* ---- hosts */
.sd-hostrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px; }
.sd-host { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 24px; align-items: center; }
@media (max-width: 520px) { .sd-host { grid-template-columns: 1fr; } }
.sd-host .pf { position: relative; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--sage) 25%, var(--card));
  display: grid; place-items: center; box-shadow: 0 0 0 6px var(--card), 0 0 0 7px var(--line); transition: transform 1s cubic-bezier(.3,1.3,.4,1) .2s; }
.sd-host .pf img { width: 100%; height: 100%; object-fit: cover; }
.sd-host .pf span { font: 600 3rem var(--serif); color: var(--brass); }
.sd-host .role { font: 600 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0; }
.sd-host h3 { font: 600 2.1rem/1.05 var(--serif); margin: 4px 0 8px; }
.sd-host p { margin: 0 0 .5em; font: italic 500 1.2rem/1.45 var(--serif); color: var(--ink-soft); }

/* ---- the reveal (only with the script running and motion allowed) */
html.sd-move .ts.sd:not([data-motion="still"]) [data-rv]:not(.in),
html.sd-move .ts.sd:not([data-motion="still"]) .ov-notes:not(.in) { opacity: 0; transform: translateY(28px); }
html.sd-move .ts.sd [data-rv], html.sd-move .ts.sd .ov-notes { transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
html.sd-move .ts.sd .ov-notes.in { transform: rotate(.4deg); }
html.sd-move .ts.sd:not([data-motion="still"]) .sd-sh:not(.in) h2 { clip-path: inset(0 0 100% 0); transform: translateY(24px); }
html.sd-move .ts.sd .sd-sh h2 { transition: clip-path 1s cubic-bezier(.2,.8,.2,1) .1s, transform 1s cubic-bezier(.2,.8,.2,1) .1s; }
html.sd-move .ts.sd:not([data-motion="still"]) .pc:not(.in):nth-child(odd) { transform: translate(-70px, 30px) rotate(-9deg); }
html.sd-move .ts.sd:not([data-motion="still"]) .pc:not(.in):nth-child(even) { transform: translate(70px, 30px) rotate(9deg); }
html.sd-move .ts.sd .pc.in { transform: rotate(var(--r)); }
html.sd-move .ts.sd:not([data-motion="still"]) .tstop:not(.in) .tcard { opacity: 0; }
html.sd-move .ts.sd:not([data-motion="still"]) .tstop.l:not(.in) .tcard { translate: -60px 0; }
html.sd-move .ts.sd:not([data-motion="still"]) .tstop.r:not(.in) .tcard { translate: 60px 0; }
html.sd-move .ts.sd:not([data-motion="still"]) .sd-stay .stay-img { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.6,0,.2,1); }
html.sd-move .ts.sd .sd-stay.in .stay-img { clip-path: inset(0 0 0 0); }
html.sd-move .ts.sd:not([data-motion="still"]) .stay-c:not(.in) { transform: translateX(80px); }
html.sd-move .ts.sd:not([data-motion="still"]) .sd-host:not(.in) .pf { transform: scale(.85); }
@media (max-width: 700px) { html.sd-move .ts.sd .tstop.l:not(.in) .tcard { translate: 40px 0; } }
/* field notes, once they land */
html.sd-move .ov-notes .la path, html.sd-move .ov-notes .la circle { stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset 1.4s ease .3s; }
html.sd-move .ov-notes.in .la path, html.sd-move .ov-notes.in .la circle { stroke-dashoffset: 0; }
html.sd-move .ov-notes .lf { opacity: 0; transform: translateY(5px) scale(.4) rotate(-25deg); transition: opacity .5s ease calc(var(--ld) + var(--row, 0ms) + .5s), transform .7s cubic-bezier(.3,1.6,.5,1) calc(var(--ld) + var(--row, 0ms) + .5s); }
html.sd-move .ov-notes.in .lf { opacity: 1; transform: none; }
html.sd-move .ov-notes .lf.on { fill: transparent; transition: opacity .5s ease calc(var(--ld) + var(--row, 0ms) + .5s), transform .7s cubic-bezier(.3,1.6,.5,1) calc(var(--ld) + var(--row, 0ms) + .5s), fill .5s ease calc(var(--ld) + var(--row, 0ms) + .9s); }
html.sd-move .ov-notes.in .lf.on { fill: var(--lc); }
.ov-notes .nf:nth-child(2) { --row: 350ms; } .ov-notes .nf:nth-child(3) { --row: 700ms; }
html.sd-move .ov-notes .on-stamp { opacity: 0; transform: rotate(-14deg) scale(1.9); }
html.sd-move .ov-notes.in .on-stamp { animation: sdThump .55s cubic-bezier(.5,0,.6,1.4) 1.9s forwards; }
@keyframes sdThump { 0% { opacity: 0; transform: rotate(-14deg) scale(1.9); } 70% { opacity: .95; transform: rotate(-3deg) scale(.94); } 100% { opacity: .85; transform: rotate(-4deg) scale(1); } }
html.sd-move .ov-notes .perf { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s ease 1s; }
html.sd-move .ov-notes.in .perf { clip-path: inset(0 0 0 0); }
html.sd-move .ov-notes .on-h > span:first-child { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .9s ease .4s; }
html.sd-move .ov-notes.in .on-h > span:first-child { background-size: 100% 1px; }
html.sd-move .ov-notes .on-list li { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease, padding-left .35s ease; }
html.sd-move .ov-notes.in .on-list li { opacity: 1; transform: none; }
.ov-notes .on-list li:nth-child(1) { transition-delay: 1.2s; } .ov-notes .on-list li:nth-child(2) { transition-delay: 1.3s; } .ov-notes .on-list li:nth-child(3) { transition-delay: 1.4s; }
.ov-notes .on-list li:nth-child(4) { transition-delay: 1.5s; } .ov-notes .on-list li:nth-child(5) { transition-delay: 1.6s; } .ov-notes .on-list li:nth-child(n+6) { transition-delay: 1.7s; }
.la .climb { transform-box: view-box; opacity: 0; }
.la.ax-heart { transform-origin: 50% 60%; }
.la.ax-pace path:last-child { transform-origin: 12px 10px; transform-box: view-box; }
.la.ax-pace .dot:first-of-type { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .ov-notes.in .ax-body .climb { animation: sdClimb 5.5s ease-in-out 2.4s infinite; }
  .ov-notes.in .la.ax-heart { animation: sdBeat 3.4s ease-in-out 2.6s infinite; }
  .ov-notes.in .la.ax-pace path:last-child { animation: sdRays 4s ease-in-out 2.8s infinite; }
  .ov-notes.in .la.ax-pace .dot:first-of-type { animation: sdRise 4s ease-in-out 2.8s infinite; }
  .ov-notes.in .leaves .lf { animation: sdWind 5s ease-in-out calc(3s + var(--ld)) infinite; }
  .ov-notes.in .on-list ul.yes li::before { animation: sdSway 6s ease-in-out calc(2.5s + var(--li, 0) * .18s) infinite; }
  .ov-notes .nf:hover .la { animation: sdNod 1.2s ease-in-out; }
}
@keyframes sdClimb { 0% { transform: translate(4px, 19px); opacity: 0; } 8% { opacity: 1; } 45%, 55% { transform: translate(9px, 9.5px); opacity: 1; } 70% { opacity: 0; transform: translate(9px, 9.5px); } 100% { opacity: 0; transform: translate(4px, 19px); } }
@keyframes sdBeat { 0%, 60%, 100% { transform: scale(1); } 66% { transform: scale(1.16); } 72% { transform: scale(.97); } 78% { transform: scale(1.1); } 86% { transform: scale(1); } }
@keyframes sdRays { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.12); } }
@keyframes sdRise { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-1.5px); } }
@keyframes sdWind { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: -14deg; } 86% { rotate: 8deg; } 93% { rotate: -3deg; } }
@keyframes sdSway { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-22deg); } 93% { transform: rotate(10deg); } }
@keyframes sdNod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 65% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .trip-v2 .sd *, .t-studio * { animation: none !important; } }

/* 29 Sept 08:35 (Alex: the floating button "needs to be lower ... I like the contrast but I don't like the button in
   button thing"). One solid pill: navy with cream words in light mode (cream with navy words in dark), the arrow in
   sage, sitting lower, just above the browser's own bar. */
.sd-stick { top: calc(100vh - 76px); top: calc(100svh - 72px); }
.sd-stickb { gap: .55rem; padding: .78rem 1.1rem .78rem 1.25rem; }
.sd-stickb b { background: none; color: inherit; padding: 0; border-radius: 0; font-weight: 700; }
.sd-stickb span { opacity: .75; font-weight: 500; }
.sd-stickb .sd-ic { width: 18px; height: 18px; stroke: var(--sage); fill: none; stroke-width: 2.2; }
:root[data-theme="dark"] .sd-stickb .sd-ic { stroke: #4E7040; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sd-stickb .sd-ic { stroke: #4E7040; } }

/* 29 Sept: the sideways day-by-day on a phone: one day at a time, cards above and below the line */
@media (max-width: 699px) {
  .hs-days:not(.flat) .hs-stick { height: min(76vh, 600px); top: max(84px, calc(50vh - min(38vh, 300px))); margin: 0 -16px; }
  .hs-days:not(.flat) .hs-track { padding: 0 24px 0 44px; }
  .hs-days:not(.flat) .hday { width: 76vw; }
  .hs-days:not(.flat) .hday-c { width: 72vw; left: -10px; padding: 16px 18px; }
  .hs-days:not(.flat) .hday-c h3 { font-size: 1.35rem; }
  .hs-days:not(.flat) .hday.up .hday-c { bottom: calc(50% + 48px); } .hs-days:not(.flat) .hday.dn .hday-c { top: calc(50% + 48px); }
}

/* 29 Sept: the sideways strips are carried down their section by a scroll-driven animation (no sticky, so no Safari bars) */
@supports (animation-timeline: view()) {
  .hs:not(.flat) { view-timeline: --hs block; }
  .hs:not(.flat) .hs-stick { position: absolute; left: 0; right: 0; top: var(--ht, 90px); animation: hs-pin linear both; animation-timeline: --hs; animation-range: contain 0% contain 100%; }
  @keyframes hs-pin { from { translate: 0 0; } to { translate: 0 var(--hpin, 0px); } }
}

/* 29 Sept: where you'll stay, one card per place, each with its own photo carousel and a link to the place */
.hx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 8px; }
.hx { background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 40px -26px rgba(5,2,71,.35); }
.hx-car { position: relative; aspect-ratio: 4 / 3; background: var(--line); min-height: 0; overflow: hidden; flex: none; }
/* 30 Sept: the track fills the frame instead of sizing it, so a tall photo can no longer stretch its card */
.hx-track { position: absolute; inset: 0; display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hx-track::-webkit-scrollbar { display: none; }
.hx-f { flex: 0 0 100%; margin: 0; scroll-snap-align: center; height: 100%; }
.hx-f img, .hx-f picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-nav { position: absolute; top: 50%; margin-top: -19px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(245,241,230,.88); color: #050247;
  font: 500 1.5rem/1 var(--serif); cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(5,2,71,.2); opacity: 0; transition: opacity .25s; }
.hx-car:hover .hx-nav, .hx-nav:focus-visible { opacity: 1; }
@media (hover: none) { .hx-nav { display: none; } }
.hx-nav.prev { left: 10px; } .hx-nav.next { right: 10px; }
.hx-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.hx-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(245,241,230,.55); transition: width .25s, background .25s; }
.hx-dots i.on { width: 16px; border-radius: 4px; background: #F5F1E6; }
.hx-empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 12px); }
.hx-empty p { margin: 0; font: italic 500 1.05rem var(--serif); color: var(--sd-soft2, var(--ink)); opacity: .8; padding: 0 20px; text-align: center; }
.hx-b { padding: 18px 20px 20px; display: grid; gap: 6px; flex: 1; align-content: start; }
.hx-k { margin: 0; font: 700 .68rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.hx h3 { margin: 0; font: 600 1.55rem/1.1 var(--serif); color: var(--ink); }
.hx-b p { margin: 0; }
.hx-link { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font: 600 .9rem var(--sans); color: var(--brass) !important; text-decoration: none; }
.hx-link .sd-ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.hx-link:hover { text-decoration: underline; }
/* 30 Sept: several places to stay. Two or four sit two by two, so none is left alone on a row. */
@media (min-width: 700px) { .hx-row.hx-2, .hx-row.hx-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hx-row.hx-2 { max-width: 920px; margin-left: auto; margin-right: auto; }
.stay-m { margin: -4px 0 12px !important; font: 700 .7rem/1.4 var(--sans) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--brass) !important; }
.stay-c .hx-link { margin-top: 2px; }

/* 29 Sept: the photo strip on a phone, carried sideways as you scroll down */
@media (max-width: 699px) {
  .hs-gal:not(.flat) .hs-stick { height: min(62vh, 520px); margin: 0 -16px; }
  .hs-gal:not(.flat) .hs-track { padding: 0 24px; gap: 12px; }
  .hs-gal:not(.flat) .hs-f { height: auto; width: 80vw; aspect-ratio: 4/3; align-self: center; } .hs-gal:not(.flat) .hs-f.tall { width: 60vw; aspect-ratio: 3/4; }
}
.sd-stickb { box-shadow: 0 0 0 1px rgba(245,241,230,.28), 0 14px 34px rgba(5,2,71,.35); }   /* 29 Sept: still visible over the navy gallery */

/* 29 Sept (Alex: "if we can find any photos that represent one of the days in the itinerary, that should be with
   that day, to the left of its day card, since you left a blank spot there anyway"). A day with a photo (Kristin's
   own, set per day as itinerary[n].image) gets a small print in the gap to the left of its card, on the same side
   of the line. The days are spaced a little wider when any day has one, so the gap fits it. */
.hs-days.has-ph:not(.flat) .hday { width: 300px; }
.hs-days:not(.flat) .hday.dph0 { margin-left: 290px; }
.hday-ph { position: absolute; left: -290px; width: 240px; margin: 0; padding: 8px 8px 10px; background: #fbf8f1; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(5,2,71,.08), 0 18px 34px -14px rgba(5,2,71,.35); transform: rotate(var(--pt)); opacity: .75; transition: opacity .5s; }
.hday-ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.hday.up .hday-ph { bottom: calc(50% + 54px); } .hday.dn .hday-ph { top: calc(50% + 54px); }
.hday.passed .hday-ph { opacity: 1; }
.hs-days.flat .hday-ph { position: relative; left: auto; top: auto; bottom: auto; width: auto; opacity: 1; transform: none; }
.hs-days.flat .hday.dph0 { margin-left: 0; }
@media (max-width: 699px) {
  .hs-days:not(.flat) .hday-ph { width: 58vw; left: calc(-22px - 58vw); padding: 6px 6px 8px; }
  .hs-days:not(.flat) .hday.up .hday-ph { bottom: calc(50% + 48px); } .hs-days:not(.flat) .hday.dn .hday-ph { top: calc(50% + 48px); }
  .hs-days.has-ph:not(.flat) .hday { width: 76vw; }
  .hs-days:not(.flat) .hday.dph0 { margin-left: 62vw; }
}

/* 30 Sept (Alex: "the host card looks really bad"): one host no longer sits in a narrow 320px column with the bio
   squeezed beside a floating circle. Each host is a card: portrait at the top left, name and role beside it, the bio
   underneath at a readable width. One host takes the full row. */
.sd-hostrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 22px; }
.sd-host { grid-template-columns: 132px minmax(0, 1fr); column-gap: 26px; row-gap: 18px; align-items: center;
  background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 3vw, 34px); }
.sd-host .pf { width: 132px; height: 132px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--sage) 18%, transparent); }
.sd-host .hd h3 { margin: 4px 0 0; font-size: clamp(1.8rem, 3.2vw, 2.4rem); text-wrap: balance; }
.sd-host .bio { grid-column: 1 / -1; max-width: 64ch; }
.sd-host .bio p { font: 400 1.06rem/1.65 var(--sans); color: var(--ink-soft); margin: 0 0 .7em; }
.sd-host .bio p:first-child { font: italic 500 1.3rem/1.45 var(--serif); color: var(--ink); }
.sd-host .bio:empty { display: none; }
@media (max-width: 520px) { .sd-host { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; }
  .sd-host .pf { width: 88px; height: 88px; } .sd-host .pf span { font-size: 2rem; } }
@media (min-width: 900px) {
  .sd-hostrow > .sd-host:only-child { grid-template-columns: 150px minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 32px; }
  .sd-hostrow > .sd-host:only-child .pf { width: 150px; height: 150px; }
  .sd-hostrow > .sd-host:only-child .bio { grid-column: auto; padding-left: 32px; border-left: 1px solid var(--line); }
}