@charset "UTF-8";
/* ==========================================================================
   TRAVELNEST — Cruises
   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. Four boats chartered whole, and one day on one of them printed hour
   by hour. Two rules govern the page: the "drawn to scale" device appears
   exactly once (the comparison band, nowhere else — the second contrast is
   made in words), and every figure on the page is derived from the same
   boat record, so the berths, the cheapest week and the day-shape bar
   cannot drift apart.
   --------------------------------------------------------------------------
   01. Page tokens and shared section furniture
   02. Why this is not a cruise — the comparison band
   03. Four boats, chartered whole
   04. Six ten to ten at night — one day on board
   05. Same bay, same boat, nobody came — the diptych
   06. Responsive — 1500 / 1200 / 1100 / 1000 / 760 / 430
   --------------------------------------------------------------------------
   Authored in fixed pixels at any width (only the nav and footer scale).
   ========================================================================== */

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

.page-cruise {
  --cr-panel: #17435A;
  --cr-chip: #FFFFFF;
  --cr-on-accent-rgb: 255, 255, 255;
  --cr-photo-ink: #FFFFFF;
  /* the terracotta the highlighted card, its rules and the hatching are drawn
     in — deliberately the same ink in both themes, so a hot card reads the
     same against dark paper as against white */
  --cr-terracotta-rgb: 192, 82, 27;
  --cr-hatch: repeating-linear-gradient(135deg, rgba(var(--cr-terracotta-rgb), 0.35) 0 6px, rgba(var(--cr-terracotta-rgb), 0.12) 6px 12px);
}

[data-theme="dark"] .page-cruise {
  --cr-panel: rgba(16, 16, 16, 0.72);
  --cr-chip: #EDE3D3;
  --cr-on-accent-rgb: 26, 26, 26;
}

/* on dark paper the structural ink rules soften to 45% — only the side that
   softens, never the shorthand, or the 0.22 bottom rule goes with it */
[data-theme="dark"] .pstrip,
[data-theme="dark"] .railnote--top { border-top-color: rgba(var(--ink-rgb), 0.45); }

[data-theme="dark"] .cboat { border-color: var(--ab-card-border); }
[data-theme="dark"] .crcell--hot .crcell__foot { border-top-color: rgba(var(--cr-on-accent-rgb), 0.45); }
[data-theme="dark"] .cboat--hot { border-color: var(--accent); }

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

@media (max-width: 1500px) {
  .page-cruise .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;
}

.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: 680px;
  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: 46px;
  line-height: 0.5;
  white-space: nowrap;
}

.railnote__cta {
  margin-left: auto;
  border: 0;
  background: var(--accent);
  padding: 15px 32px;
  color: var(--ab-on-accent-deep);
  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(--ink);
  color: var(--ab-on-accent);
}


/* ==========================================================================
   02. Why this is not a cruise — the comparison band
   ========================================================================== */

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

.crband {
  background: var(--cr-panel);
  color: var(--ab-panel-ink);
}

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

.crband__what {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ab-panel-accent);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
}

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

.crband__sub { opacity: 0.6; }

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

/* the one to-scale graphic on the page — see the file header */
.scalebar {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 22px 30px;
}

.scalebar__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scalebar__swatch {
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--ab-panel-accent);
}

.scalebar__ours,
.scalebar__theirs {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.scalebar__ours { color: var(--ab-panel-accent); }
.scalebar__theirs { opacity: 0.6; }

.scalebar__track {
  flex: 1 1 auto;
  display: flex;
  height: 18px;
  border: 1px solid rgba(var(--ab-panel-rgb), 0.4);
}

/* 11 of 3 000 — the sliver is the whole argument, so it is computed */
.scalebar__fill {
  width: 0.37%;
  background: var(--ab-panel-accent);
}

.scalebar__rest {
  flex: 1;
  background: rgba(var(--ab-panel-rgb), 0.1);
}

.scalebar__note {
  font-size: 17px;
  font-weight: 500;
  opacity: 0.6;
}

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

.crcell {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 28px;
  border-left: 1px solid rgba(var(--ab-panel-rgb), 0.3);
}

.crcell:first-child { border-left: 0; }

.crcell--hot {
  border-left: 0;
  background: var(--accent);
  color: var(--ab-on-accent-deep);
}

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

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

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

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

.pip {
  flex: 1;
  height: 8px;
  background: rgba(var(--ab-panel-rgb), 0.16);
}

.pip--on { background: var(--ab-panel-accent); }

.crcell__note {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.72;
  text-wrap: pretty;
}

.crcell__foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--ab-panel-rgb), 0.4);
}

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

.crcell__big {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 19px;
  font-weight: 500;
  text-align: right;
}

/* the terracotta cell carries the same furniture on its own ground */
.crcell--hot .crcell__num,
.crcell--hot .crcell__vs { opacity: 0.8; }
.crcell--hot .crcell__fig { color: inherit; }
.crcell--hot .crcell__note { opacity: 0.92; }
.crcell--hot .pip { background: rgba(var(--cr-on-accent-rgb), 0.25); }
.crcell--hot .pip--on { background: var(--ab-on-accent-deep); }
.crcell--hot .crcell__foot { border-top-color: rgba(var(--cr-on-accent-rgb), 0.55); }

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

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

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

.crband__railcta {
  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;
}

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


/* ==========================================================================
   03. Four boats, chartered whole
   ========================================================================== */

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

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

.cboat {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ab-card-border);
}

.cboat--hot {
  border: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}

.cboat__fig {
  position: relative;
  height: 430px;
  overflow: hidden;
}

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

.cboat__scrim {
  position: absolute;
  inset: 0;
  /* measured against the four real photographs: the handoff's 0.88/54% band
     left the region line — pale terracotta, the lightest ink in the caption —
     at 1.8—3.5:1 where the sea catches the light. These hold every caption
     line at 4.6:1 or better on all four boats. */
  background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.68) 36%, transparent 70%);
  pointer-events: none;
}

.cboat--hot .cboat__scrim {
  background: linear-gradient(to top, rgba(192, 82, 27, 0.94) 0%, rgba(10, 10, 10, 0.62) 42%, transparent 80%);
}

/* the head rule must stay below the bottom one: the head span carries both
   classes, and at equal specificity the later rule wins */
.cboat__scrim--head,
.cboat--hot .cboat__scrim--head {
  inset: 0 0 auto;
  height: 92px;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.84) 0%, rgba(10, 10, 10, 0.46) 55%, transparent 100%);
}

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

.cboat__num {
  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;
}

.cboat--hot .cboat__num {
  background: var(--cr-chip);
  color: var(--accent);
}

.cboat__berths {
  margin-left: auto;
  color: var(--cr-photo-ink);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
}

.cboat__cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--cr-photo-ink);
  pointer-events: none;
}

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

.cboat--hot .cboat__region { color: inherit; }

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

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

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

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

.cboat--hot .cboat__price { color: inherit; }

.cboat__from {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.cboat__nights {
  margin-left: auto;
  font-size: 17px;
  font-weight: 600;
  opacity: 0.85;
}

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

.cboat__specs {
  display: flex;
  flex-direction: column;
  margin: 0;
}

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

.cspec:last-child { border-bottom: 0; }
.cboat--hot .cspec { border-bottom-color: rgba(var(--cr-terracotta-rgb), 0.45); }

.cspec__key {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
}

.cspec__val {
  margin: 0 0 0 auto;
  font-size: 19px;
  font-weight: 600;
  text-align: right;
}

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

.cboat--hot .cwarn { border-top-color: rgba(var(--cr-terracotta-rgb), 0.5); }

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

.cwarn__text {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.8;
  text-wrap: pretty;
}

.cboat__foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
}

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

.cboat__crew {
  margin-left: auto;
  font-size: 17px;
  font-weight: 600;
  opacity: 0.55;
}


/* ==========================================================================
   04. Six ten to ten at night — one day on board
   ========================================================================== */

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

.cshape {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 var(--gutter) 24px;
}

.cshape__bar {
  display: flex;
  height: 20px;
}

.cseg { display: block; }

/* the day runs 06:10 → 22:00 = 950 min; the spans below are those minutes,
   not eyeballed widths (see the record at the top of the page source) */
.cseg--dawn { width: 21.05%; }  /* 200 min — yours, before breakfast */
.cseg--way { width: 21.05%; }   /* 200 min — under way, 3 h 20 */
.cseg--anch { width: 22.11%; }  /* 210 min — anchored, 3 h 30 */
.cseg--shore { width: 10.53%; } /* 100 min — ashore, 1 h 40 */
.cseg--night { width: 25.26%; } /* 240 min — yours, after dinner */

.cseg--dawn,
.cseg--night { background: rgba(var(--ink-rgb), 0.22); }

.cseg--way { background: var(--ink); }
.cseg--anch { background: var(--accent); }
.cseg--shore { background: var(--cr-hatch); }

.cshape__legend {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ckey {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0.55;
}

.ckey--anch {
  color: var(--accent);
  opacity: 1;
}

.ckey--free { margin-left: auto; }

.ckey__swatch {
  width: 11px;
  height: 11px;
}

.ckey--way .ckey__swatch { background: var(--ink); }
.ckey--anch .ckey__swatch { background: var(--accent); }
.ckey--shore .ckey__swatch { background: var(--cr-hatch); }
.ckey--free .ckey__swatch { background: rgba(var(--ink-rgb), 0.22); }

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

.cframe {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cframe--hot {
  background: rgba(var(--accent-rgb), 0.06);
  padding: 14px;
}

.cframe__time {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.cframe__clock {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
}

.cframe--hot .cframe__clock { color: var(--accent); }

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

.cframe__fig {
  position: relative;
  height: 340px;
  overflow: hidden;
}

.cframe--hot .cframe__fig {
  height: 400px;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

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

.cframe__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(192, 82, 27, 0.7) 0%, transparent 46%);
  pointer-events: none;
}

.cframe__scrim--head {
  inset: 0 0 auto;
  height: 76px;
  /* the OPTIONAL badge is an outlined white chip on a late-afternoon jetty */
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.42) 60%, transparent 100%);
}

.cframe__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  pointer-events: none;
}

.cframe__tag--solid {
  background: var(--cr-chip);
  padding: 4px 11px;
  color: var(--accent);
}

.cframe__tag--ghost {
  border: 2px solid var(--cr-photo-ink);
  padding: 4px 11px;
  color: var(--cr-photo-ink);
}

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

.cframe__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.05;
}

.cframe--hot .cframe__title {
  font-weight: 600;
  color: var(--accent);
}

.cframe__note {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.78;
  text-wrap: pretty;
}

.cframe__meta {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.4);
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cframe--hot .cframe__meta { border-top-color: rgba(var(--cr-terracotta-rgb), 0.5); }

.dayrail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 30px var(--gutter) 0;
  background: var(--cr-panel);
  padding: 24px 30px;
  color: var(--ab-panel-ink);
}

.dayrail__cell {
  flex: 1 1 200px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 0 26px;
  border-left: 1px solid rgba(var(--ab-panel-rgb), 0.35);
}

.dayrail__cell:first-child {
  padding-left: 0;
  border-left: 0;
}

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

.dayrail__label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}

.dayrail__cta {
  margin-left: auto;
  background: var(--ab-panel-cta);
  padding: 15px 32px;
  color: var(--ab-panel-cta-ink);
  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;
}

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


/* ==========================================================================
   05. Same bay, same boat, nobody came — the diptych
   ========================================================================== */

.cdip-sec { padding: 40px 0 52px; }

.cdip {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0 var(--gutter);
}

.cdipfig {
  position: relative;
  flex: 1 1 520px;
  min-width: min(400px, 100%);
  min-height: 620px;
  overflow: hidden;
}

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

.cdipfig__scrim {
  position: absolute;
  inset: 0;
  /* the dawn half of the diptych is the palest photograph on the page: the
     handoff's 0.66/42% left 06:10 at 2.1:1 and the FIRST LIGHT badge at 2.9:1 */
  background: linear-gradient(to top, rgba(10, 10, 10, 0.84) 0%, transparent 58%);
  pointer-events: none;
}

.cdipfig__scrim--head {
  inset: 0 0 auto;
  height: 84px;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.42) 58%, transparent 100%);
}

.cdipfig__tag {
  position: absolute;
  left: 20px;
  top: 18px;
  color: var(--cr-photo-ink);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  pointer-events: none;
}

.cdipfig__tag--ghost {
  border: 2px solid rgba(255, 255, 255, 0.8);
  padding: 4px 11px;
}

.cdipfig__tag--solid {
  background: rgba(192, 82, 27, 0.94);
  padding: 5px 12px;
}

.cdipfig__body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--cr-photo-ink);
  pointer-events: none;
}

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

.cdipfig__note {
  font-size: 20px;
  font-weight: 600;
  opacity: 0.92;
}

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

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

.cdipfig__val {
  margin-left: auto;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 24px;
  font-weight: 500;
}

.cdipcol {
  flex: 0 1 430px;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  background: var(--cr-panel);
  color: var(--ab-panel-ink);
}

.cdipcol__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-top: 4px solid var(--ab-panel-accent);
  border-bottom: 1px solid rgba(var(--ab-panel-rgb), 0.3);
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cdipcol__hours { color: var(--ab-panel-accent); }

.cdipcol__day {
  margin-left: auto;
  opacity: 0.6;
}

.cdipcol__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 28px 0;
}

.cdipcol__title {
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  font-size: 62px;
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.cdipcol__title .outline { -webkit-text-stroke: 2px var(--ab-panel-ink); }

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

.cdipcol__lead,
.cdipcol__sentence {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}

.cdipcol__lead { opacity: 0.85; }

.cdipcol__rule {
  margin: 24px 28px 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(var(--ab-panel-rgb), 0.4);
}

.cdipcol__sentence { opacity: 0.8; }

.cdipcol__quote {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px 28px 24px;
}

.cdipcol__perf {
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(var(--ab-panel-rgb), 0.5) 0 8px, transparent 8px 16px);
}

.cdipcol__words p {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.85;
  text-wrap: pretty;
}

.cdipcol__who {
  color: var(--ab-panel-accent);
  font-family: "Caramel", "Segoe Script", cursive;
  font-size: 42px;
  line-height: 0.55;
}


/* ==========================================================================
   06. Responsive — 1500 / 1200 / 1100 / 1000 / 760 / 430
   ========================================================================== */

@media (max-width: 1500px) {
  .secthead .display--about { font-size: 74px; }
}

@media (max-width: 1200px) {
  .cboats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the Caramel line drops below the heading here, and its 0.5 line-height
     would otherwise lift its ink into the heading above — the stack goes
     vertical and the script is given its own clearance */
  .secthead__stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .secthead .script--about {
    padding-top: 60px;
    padding-bottom: 0;
  }

  .crcell { flex: 1 1 260px; padding: 20px 22px; }
  .cframes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cframe--hot .cframe__fig { height: 340px; }
  .cdipcol__title { font-size: 52px; }
  .cdipcol__script { font-size: 48px; }
}

/* the diptych stacks in reading order — frame, the ink column, frame — so the
   column stays between the two photographs of the same bay, never after them */
@media (max-width: 1100px) {
  .cdipfig,
  .cdipcol {
    flex: 1 1 100%;
    min-width: 0;
  }

  .cdipfig { min-height: 460px; }
}

@media (max-width: 1000px) {
  .crband-sec { padding: 24px var(--gutter) 32px; }
  .cboat-sec,
  .cday-sec { padding-bottom: 40px; }
  .cdip-sec { padding: 28px 0 36px; }

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

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

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

  .crband__head { gap: 12px; padding: 12px 20px; font-size: 14px; }
  .crband__tag { margin-left: 0; }
  .scalebar { margin: 18px 20px; }
  .scalebar__row { flex-wrap: wrap; }
  .scalebar__track { flex: 1 1 100%; order: 3; }
  .crband__rail { gap: 14px; padding: 14px 20px; }
  .crband__railtext { font-size: 18px; max-width: none; }
  .crband__railcta { margin-left: 0; padding: 12px 22px; font-size: 15px; }

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

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

  .cboat__fig { height: 340px; }
  .cframe__fig,
  .cframe--hot .cframe__fig { height: 280px; }

  .dayrail { gap: 14px; padding: 18px 20px; }
  .dayrail__cell { padding: 0 18px; }
  .dayrail__value { font-size: 34px; }
  .dayrail__label { font-size: 15px; }

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

  .cdipcol__title { font-size: 44px; }
  .cdipcol__script { font-size: 42px; }
  .cdipcol__body { padding: 22px 20px 0; }
  .cdipcol__head { padding: 11px 20px; }
  .cdipcol__rule { margin: 18px 20px 0; }
  .cdipcol__quote { padding: 18px 20px 20px; }
}

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

  /* 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; }

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

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

  .dayrail__cell {
    flex: 1 1 100%;
    padding: 10px 0;
    border-left: 0;
    border-top: 1px solid rgba(var(--ab-panel-rgb), 0.35);
  }

  .dayrail__cell:first-child { padding-top: 0; border-top: 0; }

  .cshape__legend { gap: 6px 14px; }
  .ckey--free { margin-left: 0; }
}

@media (max-width: 430px) {
  .secthead .display--about { font-size: clamp(30px, 8.5vw, 48px); }
  .secthead .script--about { font-size: clamp(30px, 9vw, 46px); padding-top: 46px; }
  .crband__railscript { font-size: 38px; }
  .railnote__script { font-size: 38px; }
  .crcell__fig { font-size: 46px; }
  .crcell__label { font-size: 17px; }
  .cboat__name { font-size: 27px; }
  .cboat__price { font-size: 26px; }
  .cboat__foot { gap: 6px; }
  .cboat__crew { margin-left: 0; }
  .cframe__clock { font-size: 36px; }
  .cdipcol__title { font-size: clamp(30px, 9vw, 40px); }
  .cdipcol__script { font-size: clamp(30px, 9vw, 38px); }
  .cdipfig__time { font-size: 40px; }
  .cdipfig__note { font-size: 18px; }
  .scalebar__ours,
  .scalebar__theirs { font-size: 13px; }
}