@charset "UTF-8";
/* ==========================================================================
   TRAVELNEST — Group tours
   Loaded after style.css and destination.css: tokens, top bar, breadcrumb,
   page hero, the "Four answers" enquiry block and the footer come from those
   two. The first page that lives under Tours rather than Pages.
   Every number here is inventory: seat dots, "N of 10 left" and the strip
   totals are all rendered from one list, never authored twice.
   --------------------------------------------------------------------------
   01. Page tokens and shared section furniture
   02. How a group tour differs — the numbers band
   03. Eight seats to choose from — the departures
   04. Who will be with you — the guides
   05. What nine people look like — the mosaic
   06. Responsive — 1500 / 1200 / 1000 / 760 / 430
   --------------------------------------------------------------------------
   Authored in fixed pixels at any width (only the nav and footer scale).
   ========================================================================== */

/* ==========================================================================
   01. Page tokens and shared section furniture
   ========================================================================== */

.page-group {
  --gt-panel: #17435A;
  --gt-panel-ink: #FBF6EC;
  --gt-panel-rgb: 251, 246, 236;
  /* the paper a tag is printed on when it sits on an accent-washed photo */
  --gt-paper: #FFFFFF;
  /* the ink the terracotta cell prints in */
  --gt-on-accent-rgb: 255, 255, 255;
  /* the date block on a normal ticket */
  --gt-datechip: #17435A;
  --gt-datechip-ink: #FFFFFF;
}

[data-theme="dark"] .page-group {
  --gt-panel: rgba(16, 16, 16, 0.72);
  --gt-panel-ink: #EDE3D3;
  --gt-panel-rgb: 237, 227, 211;
  --gt-paper: #EDE3D3;
  --gt-on-accent-rgb: 26, 26, 26;
  --gt-datechip: #EDE3D3;
  --gt-datechip-ink: #1A1A1A;
  --gt-seg-off-a: 0.18;
  /* on dark the terracotta cell's own rules sit a notch softer */
  --gt-on-accent-dot-a: 0.5;
  --gt-on-accent-rule-a: 0.45;
}

/* on dark paper the structural ink rules soften to 45% */
[data-theme="dark"] .pstrip,
[data-theme="dark"] .railnote--top { border-top-color: rgba(var(--ink-rgb), 0.45); }

[data-theme="dark"] .tkt,
[data-theme="dark"] .crewcard,
[data-theme="dark"] .ledger { border-color: rgba(var(--ink-rgb), 0.45); }

[data-theme="dark"] .tkt--hot,
[data-theme="dark"] .crewcard--hot { border-color: var(--accent); }

/* the enquiry block is the Europe planner frozen at the 1920 reference */
.page-group .planner { --u: 19.2px; }

@media (max-width: 1500px) {
  .page-group .planner { --u: 1.28vw; }
}

/* every section opens the same way: heading pair, script, right-hand note */
.secthead {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
  padding: 34px 0 24px;
}

.secthead__stack {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  min-width: 0;
}

.secthead .display--about { font-size: 92px; }

.secthead .script--about {
  font-size: 66px;
  padding-top: 0;
  padding-bottom: 18px;
}

.secthead__note {
  margin: 0 0 0 auto;
  max-width: 380px;
  padding-bottom: 10px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  opacity: 0.8;
  text-wrap: pretty;
}

.pstrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 var(--gutter) 22px;
  padding: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.22);
  list-style: none;
}

.pcell2 {
  flex: 1 1 180px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 13px 20px;
  border-left: 1px solid rgba(var(--ink-rgb), 0.22);
}

.pcell2:first-child { padding-left: 0; border-left: 0; }
.pcell2:last-child { padding-right: 0; }

.pcell2__value {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
}

.pcell2__label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* the sentence + CTA that closes a section */
.railnote {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 30px var(--gutter) 0;
}

.railnote--top {
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}

.railnote__text {
  max-width: 700px;
  font-size: 21px;
  font-weight: 500;
  opacity: 0.78;
  text-wrap: pretty;
}

.railnote__script {
  color: var(--accent);
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: 48px;
  line-height: 0.5;
  white-space: nowrap;
}

.railnote__cta {
  margin-left: auto;
  border: 2px solid var(--accent);
  padding: 15px 32px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.railnote__cta:hover,
.railnote__cta:focus-visible {
  background: var(--accent);
  color: var(--cta-label);
}

.railnote__cta--solid {
  border: 0;
  background: var(--accent);
  padding: 15px 34px;
  color: var(--ab-on-accent-deep);
}

.railnote__cta--solid:hover,
.railnote__cta--solid:focus-visible {
  background: var(--ink);
  color: var(--ab-on-accent);
}

/* ==========================================================================
   02. How a group tour differs — the numbers band
   ========================================================================== */

.gtband-sec { padding: 34px var(--gutter) 46px; }

.gtband {
  background: var(--gt-panel);
  color: var(--gt-panel-ink);
}

.gtband__head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 30px;
  border-top: 4px solid var(--ab-panel-accent);
  border-bottom: 1px solid rgba(var(--gt-panel-rgb), 0.25);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gtband__place {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ab-panel-accent);
}

.gtband__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentcolor;
}

.gtband__note { opacity: 0.6; }

.gtband__tag {
  margin-left: auto;
  border: 1px solid rgba(var(--gt-panel-rgb), 0.5);
  padding: 5px 13px;
  letter-spacing: 0.16em;
}

.gtcells {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gtcell {
  flex: 1 1 230px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 24px 26px;
  border-left: 1px solid rgba(var(--gt-panel-rgb), 0.3);
}

.gtcell--wide { flex: 1 1 260px; border-left: 0; }

/* no single supplement is the one people do not believe */
.gtcell--hot {
  flex: 1 1 250px;
  background: var(--accent);
  border-left: 0;
  color: var(--ab-on-accent-deep);
}

.gtcell__top {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
}

.gtcell__figure {
  color: var(--ab-panel-accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 0.92;
  white-space: nowrap;
}

.gtcell--hot .gtcell__figure { color: inherit; }

.gtcell__index {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

.gtcell--hot .gtcell__index { opacity: 0.7; }

.gtcell__label {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* twelve dots: the seats in a group, filled for the ones taken */
.gtdots {
  display: flex;
  gap: 5px;
  padding: 3px 0;
}

.gtdot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ab-panel-accent);
}

.gtdot--free {
  background: none;
  border: 1px solid rgba(var(--gt-panel-rgb), 0.5);
}

.gtcell--hot .gtdot { background: var(--ab-on-accent-deep); }

.gtcell--hot .gtdot--free {
  background: none;
  border-color: rgba(var(--gt-on-accent-rgb), var(--gt-on-accent-dot-a, 0.6));
}

/* fourteen dates, two of them nearly full */
.gtsegs {
  display: flex;
  gap: 4px;
  padding: 3px 0;
}

.gtseg {
  flex: 1;
  height: 8px;
  background: rgba(240, 180, 138, 0.55);
}

.gtseg--hot { background: var(--accent); }

/* what you pay against what the private version costs */
.gtsplit {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 3px 0;
}

.gtsplit__paid {
  flex: 7;
  height: 8px;
  background: var(--ab-panel-accent);
}

.gtsplit__saved {
  flex: 3;
  height: 8px;
  background: repeating-linear-gradient(135deg, rgba(var(--gt-panel-rgb), 0.4) 0 5px, rgba(var(--gt-panel-rgb), 0.12) 5px 10px);
}

.gtcell__text {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.7;
  text-wrap: pretty;
}

.gtcell--hot .gtcell__text { opacity: 0.9; }

/* every figure carries the line that could disprove it */
.gtcell__proof {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--gt-panel-rgb), 0.4);
}

.gtcell--hot .gtcell__proof { border-top-color: rgba(var(--gt-on-accent-rgb), var(--gt-on-accent-rule-a, 0.5)); }

.gtcell__proof-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.gtcell--hot .gtcell__proof-label { opacity: 0.75; }

.gtcell__proof-label--hot {
  color: var(--accent);
  opacity: 1;
}

.gtcell__proof-value {
  margin-left: auto;
  color: var(--ab-panel-accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 22px;
  font-weight: 500;
}

.gtcell__proof-value--plain { color: inherit; }
.gtcell--hot .gtcell__proof-value { color: inherit; }

.gtband__foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0;
  padding: 18px 30px;
  border-top: 1px solid rgba(var(--gt-panel-rgb), 0.3);
}

.gtband__text {
  max-width: 780px;
  font-size: 20px;
  font-weight: 500;
  opacity: 0.85;
  text-wrap: pretty;
}

.gtband__script {
  color: var(--ab-panel-accent);
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: 48px;
  line-height: 0.5;
  white-space: nowrap;
}

.gtband__cta {
  margin-left: auto;
  border: 2px solid var(--ab-panel-cta);
  padding: 13px 28px;
  color: var(--ab-panel-cta);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.gtband__cta:hover,
.gtband__cta:focus-visible {
  background: var(--ab-panel-cta);
  color: var(--ab-panel-cta-ink);
}

/* ==========================================================================
   03. Eight seats to choose from — the departures
   ========================================================================== */

.tkts-sec { padding: 0 0 62px; }

.tkts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  margin: 0 var(--gutter);
  padding: 0;
  list-style: none;
}

.tkt {
  display: flex;
  border: 2px solid var(--ink);
}

/* four seats or fewer and the card says so before you read the price */
.tkt--hot {
  border: 3px solid var(--accent);
  background: rgba(192, 82, 27, 0.05);
}

.tkt__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: inherit;
}

.tkt__frame {
  position: relative;
  display: block;
  height: 260px;
  overflow: hidden;
}

.tkt__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tkt__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.86) 0%, transparent 54%);
  pointer-events: none;
}

.tkt--hot .tkt__scrim {
  background: linear-gradient(to top, rgba(192, 82, 27, 0.92) 0%, rgba(10, 10, 10, 0.25) 48%, transparent 72%);
}

.tkt__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  pointer-events: none;
}

.tkt__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--gt-datechip);
  padding: 7px 12px 8px;
  color: var(--gt-datechip-ink);
  line-height: 1;
}

.tkt--hot .tkt__date {
  background: var(--gt-paper);
  color: var(--accent);
}

.tkt__day {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 32px;
  font-weight: 600;
}

.tkt__mon {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
}

.tkt__year {
  padding-top: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.6;
}

.tkt__flags {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.tkt__seatsTag {
  background: var(--gt-paper);
  padding: 4px 11px;
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
}

.tkt__codes {
  color: #FFFFFF;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  opacity: 0.8;
}

.tkt__cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #FFFFFF;
  pointer-events: none;
}

.tkt__country {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.02;
}

.tkt__route {
  font-size: 19px;
  font-weight: 500;
  opacity: 0.9;
}

.tkt__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.5);
}

.tkt--hot .tkt__meta { border-top-color: rgba(255, 255, 255, 0.6); }

.tkt__days {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

.tkt__guide {
  margin-left: auto;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.8;
}

.tkt__note {
  display: block;
  flex: 1;
  padding: 14px 18px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.75;
  text-wrap: pretty;
}

/* the ticket stub */
.tkt__perf {
  height: 2px;
  margin: 12px 18px 0;
  background: repeating-linear-gradient(to right, rgba(var(--ink-rgb), 0.45) 0 7px, transparent 7px 14px);
}

.tkt__stub {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
  padding: 12px 18px 16px;
}

.tkt__seats {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.seatdots {
  display: flex;
  gap: 4px;
}

.seatdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.5);
}

.tkt--hot .seatdot:not(.seatdot--free) { background: var(--accent); }

.seatdot--free {
  background: none;
  border: 1px solid rgba(var(--ink-rgb), 0.4);
}

.tkt__left {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}

.tkt--hot .tkt__left {
  color: var(--accent);
  opacity: 1;
}

.tkt__price {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.tkt__amount {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.tkt__pp {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}

.tkt__link:hover .tkt__country,
.tkt__link:focus-visible .tkt__country { text-decoration: underline; }

/* ==========================================================================
   04. Who will be with you — the guides
   ========================================================================== */

.crew-sec { padding: 0 0 62px; }

.crew {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0 var(--gutter);
  padding: 0;
  list-style: none;
}

.crewcard {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
}

.crewcard--hot {
  border: 3px solid var(--accent);
  background: rgba(192, 82, 27, 0.05);
}

.crewcard__frame {
  position: relative;
  height: 420px;
  overflow: hidden;
}

.crewcard__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crewcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.86) 0%, transparent 52%);
  pointer-events: none;
}

.crewcard--hot .crewcard__scrim {
  background: linear-gradient(to top, rgba(192, 82, 27, 0.9) 0%, rgba(10, 10, 10, 0.25) 48%, transparent 72%);
}

.crewcard__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  background: rgba(192, 82, 27, 0.94);
  padding: 4px 11px;
  color: #FFFFFF;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  pointer-events: none;
}

.crewcard--hot .crewcard__tag {
  background: var(--gt-paper);
  color: var(--accent);
}

.crewcard__cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  color: #FFFFFF;
  pointer-events: none;
}

.crewcard__name {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.02;
}

.crewcard__city {
  font-size: 19px;
  font-weight: 500;
  opacity: 0.88;
}

.crewcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 18px 18px;
}

.crewcard__quote {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.78;
  text-wrap: pretty;
}

.crewcard__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 2px dotted rgba(var(--ink-rgb), 0.4);
}

.crewcard--hot .crewcard__foot { border-top-color: rgba(192, 82, 27, 0.5); }

/* the longest-serving card reads a shade brighter all through */
.crewcard--hot .crewcard__city { opacity: 0.9; }
.crewcard--hot .crewcard__quote { opacity: 0.8; }
.crewcard--hot .crewcard__season { opacity: 0.55; }
.crewcard--hot .crewcard__langs { opacity: 0.65; }

/* how much of the season this guide is already running */
.segbar {
  display: flex;
  gap: 4px;
}

.segbar__seg {
  flex: 1;
  height: 8px;
  background: var(--accent);
}

.segbar__seg--off { background: rgba(var(--ink-rgb), var(--gt-seg-off-a, 0.16)); }

.crewcard__count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.crewcard__groups {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 24px;
  font-weight: 500;
}

.crewcard__season {
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}

.crewcard__langs {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  opacity: 0.6;
}

/* ==========================================================================
   05. What nine people look like — the mosaic
   ========================================================================== */

.glife-sec { padding: 0 0 62px; }

.glife {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 var(--gutter);
  padding: 0;
  list-style: none;
}

.glframe {
  position: relative;
  overflow: hidden;
}

.glframe--wide { grid-column: span 2; }
.glframe--tall { height: 470px; }
.glframe--wide.glframe--tall { height: 470px; }
.glframe--wide:not(.glframe--tall) { height: 350px; }

.glframe--hot {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.glframe__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glframe__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.86) 0%, transparent 52%);
  pointer-events: none;
}

.glframe--wide.glframe--tall .glframe__scrim {
  background: linear-gradient(to top, rgba(10, 10, 10, 0.88) 0%, transparent 50%);
}

.glframe--hot .glframe__scrim {
  background: linear-gradient(to top, rgba(192, 82, 27, 0.9) 0%, rgba(10, 10, 10, 0.2) 48%, transparent 70%);
}

.glframe__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  pointer-events: none;
}

.glframe--wide .glframe__top { gap: 10px; padding: 16px; }

.glframe__tag {
  background: rgba(192, 82, 27, 0.94);
  padding: 4px 11px;
  color: #FFFFFF;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
}

.glframe__tag--paper {
  background: var(--gt-paper);
  color: var(--accent);
}

/* the head count is the point of the section, so it is on the photograph */
.glframe__heads {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.glframe__dots {
  display: flex;
  gap: 4px;
}

.glframe__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ab-panel-accent);
}

.glframe__count {
  padding-left: 4px;
  color: #FFFFFF;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
}

.glframe__of {
  margin-left: auto;
  color: #FFFFFF;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  opacity: 0.8;
}

.glframe__of--bright { opacity: 1; }

.glframe__cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #FFFFFF;
  pointer-events: none;
}

.glframe--wide.glframe--tall .glframe__cap { left: 20px; right: 20px; bottom: 18px; }

.glframe__cap--row {
  left: 20px;
  right: 20px;
  bottom: 16px;
  flex-direction: row;
  align-items: flex-end;
  gap: 16px;
}

.glframe__stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.glframe__where {
  color: var(--ab-panel-accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
}

.glframe__where--sm { font-size: 14px; }

.glframe__where--plain {
  color: inherit;
  font-size: 14px;
}

.glframe__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.02;
}

.glframe__title--sm {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.05;
}

.glframe__title--md {
  font-size: 30px;
  line-height: 1.05;
}

.glframe__text {
  max-width: 460px;
  font-size: 19px;
  font-weight: 500;
  opacity: 0.9;
  text-wrap: pretty;
}

.glframe__text--rule {
  max-width: none;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.5);
  font-size: 18px;
  opacity: 0.86;
}

.glframe--hot .glframe__text { max-width: none; font-size: 18px; opacity: 0.92; }

.glframe__script {
  margin-left: auto;
  color: #FFFFFF;
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: 46px;
  line-height: 0.5;
  opacity: 0.9;
  white-space: nowrap;
}

/* what the size buys you, against a coach */
.ledger {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 13px;
  border: 2px solid var(--ink);
  padding: 20px 24px 22px;
}

.ledger__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.ledger__title {
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ledger__vs {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
}

.ledger__rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ledger__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(var(--ink-rgb), 0.3);
}

.ledger__row:last-child { border-bottom: 0; }

.ledger__tick {
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}

.ledger__what {
  font-size: 20px;
  font-weight: 600;
}

.ledger__not {
  margin-left: auto;
  font-size: 17px;
  font-weight: 500;
  opacity: 0.5;
}

.ledger__foot {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: auto 0 0;
  padding-top: 13px;
  border-top: 2px dotted rgba(var(--ink-rgb), 0.4);
}

.ledger__figure {
  color: var(--accent);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 600;
}

.ledger__note {
  max-width: 420px;
  font-size: 19px;
  font-weight: 500;
  opacity: 0.75;
  text-wrap: pretty;
}

/* ==========================================================================
   06. Responsive
   ========================================================================== */

@media (max-width: 1500px) {
  .secthead .display--about { font-size: 74px; }
  .tkts,
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .tkts,
  .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glife { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glframe--tall { height: 400px; }
  .glframe--wide:not(.glframe--tall) { height: 320px; }
  .gtcell { flex: 1 1 220px; padding: 20px 22px; }
  .gtcell__figure { font-size: 46px; }
}

@media (max-width: 1000px) {
  .gtband-sec { padding: 24px var(--gutter) 32px; }
  .tkts-sec,
  .crew-sec,
  .glife-sec { padding-bottom: 40px; }

  .secthead { padding: 26px 0 20px; gap: 14px; }

  .secthead__note {
    margin-left: 0;
    padding-bottom: 0;
    text-align: left;
    font-size: 18px;
  }

  .pcell2 { flex: 1 1 150px; padding: 10px 14px; }
  .pcell2__label { font-size: 14px; }

  .gtband__head { gap: 12px; padding: 12px 20px; font-size: 14px; }
  .gtband__tag { margin-left: 0; }
  .gtcell { padding: 18px 20px; }
  .gtcell__label { font-size: 17px; }
  .gtcell__text { font-size: 16px; }

  .gtband__foot { gap: 14px; padding: 14px 20px; }
  .gtband__text { font-size: 18px; }
  .gtband__cta { margin-left: 0; padding: 12px 22px; font-size: 15px; }

  .railnote { gap: 14px; }
  .railnote__text { font-size: 18px; }

  .railnote__cta,
  .railnote__cta--solid {
    margin-left: 0;
    padding: 13px 24px;
    font-size: 16px;
  }

  .glframe__title { font-size: 28px; }
  .glframe__title--md { font-size: 26px; }
  .glframe__cap--row { flex-wrap: wrap; gap: 10px; }
  .glframe__script { margin-left: 0; font-size: 38px; }
}

@media (max-width: 760px) {
  .tkts,
  .crew,
  .glife { grid-template-columns: minmax(0, 1fr); }

  .glframe--wide,
  .ledger { grid-column: span 1; }

  .glframe--tall,
  .glframe--wide.glframe--tall { height: 320px; }

  .glframe--wide:not(.glframe--tall) { height: 280px; }

  .crewcard__frame { height: 360px; }

  /* stacked cells are divided top to bottom, never by a stray left rule */
  .pstrip { display: block; }

  .pcell2 {
    padding: 10px 0;
    border-left: 0;
    border-top: 1px solid rgba(var(--ink-rgb), 0.22);
  }

  .pcell2:first-child { border-top: 0; }

  .gtcell,
  .gtcell--wide,
  .gtcell--hot {
    flex: 1 1 100%;
    border-left: 0;
    border-top: 1px solid rgba(var(--gt-panel-rgb), 0.3);
  }

  .gtcell:first-child { border-top: 0; }
  .gtcell--hot { border-top: 0; }
}

@media (max-width: 430px) {
  .secthead .display--about { font-size: clamp(30px, 8.5vw, 48px); }
  .secthead .script--about { font-size: clamp(30px, 9vw, 46px); }
  .gtband__tag { align-self: flex-start; }
  .gtcell__figure { font-size: 40px; }
  .tkt__stub { flex-wrap: wrap; gap: 10px; }
  .tkt__price { margin-left: 0; text-align: left; }
  .ledger__row { flex-wrap: wrap; gap: 2px 12px; }
  .ledger__not { margin-left: 0; padding-left: 30px; }
  .glframe__title { font-size: 22px; }
  .glframe__title--sm,
  .glframe__title--md { font-size: 20px; }
  .glframe__text,
  .glframe__text--rule { font-size: 16px; }
}