/* ==========================================================================
   Components. Square blocks, heavy rules, no pills and no shadows anywhere.
   ========================================================================== */

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: var(--control-h);
  padding: 0 26px;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: var(--coral);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--d-press) var(--ease-out),
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}

/* Feedback on pointer-down, not on release. */
.btn:active { transform: scale(.98); }
.btn:hover { background: var(--ink); color: var(--paper); }

.btn-primary { background: var(--coral); }
.btn-primary:hover { background: var(--coral-deep); border-color: var(--coral-deep); color: var(--paper); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--coral); color: var(--ink); border-color: var(--ink); }

.btn-out { background: none; }

.btn-inverse {
  background: none;
  border-color: var(--paper);
  color: var(--paper);
}
.btn-inverse:hover { background: var(--paper); color: var(--ink); }

.btn-auto { width: auto; }
.btn-sm { min-height: var(--control-h-s); padding: 0 20px; font-size: 11px; }

.btn-arrow { flex: none; transition: transform 220ms var(--ease-out); }

/* Text link that reads as an action. */
.lnk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding-block: 15px;
  border-bottom: var(--border) solid currentColor;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lnk svg { flex: none; transition: transform 220ms var(--ease-out); }

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

.hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
}

.hdr::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: var(--border);
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 480ms var(--ease-out);
}

.hdr.is-stuck::after { transform: scaleX(1); }

.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}

/* Their mark stacks three lines of type, so it needs height to stay legible.
   Header is 60px tall on a phone, 74px above 1100px - this fits both. */
.hdr-logo img { height: 34px; width: auto; }

.hdr-right { display: flex; align-items: center; gap: 2px; }

.icon-btn {
  width: var(--tap-min);
  height: var(--tap-min);
  display: grid;
  place-items: center;
  color: var(--ink);
  flex: none;
}

.hdr .btn { display: none; }
.hdr-tel { display: none; }

/* --- primary navigation -------------------------------------------------- */

.nav-primary { display: none; }

.nav-primary ul { list-style: none; display: flex; gap: 30px; }

.nav-primary a {
  position: relative;
  display: block;
  padding-block: 10px;
  min-height: var(--tap-min);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.nav-primary a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--border);
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}

.nav-primary [aria-current="page"]::after { transform: scaleX(1); }

/* Keyboard users get the same answer the mouse gets. Outside the hover gate
   below, because :focus-visible never fires from a tap. */
.nav-primary a:focus-visible::after { transform: scaleX(1); }

/* --- desktop dropdown ---------------------------------------------------- */

/* The walker emits a second level as <ul class="submenu">. Without the rules
   below, ".nav-primary ul" above catches that nested list too and lays the
   children out as a flex row inside the bar - every island name printed next
   to its parent instead of hanging under it. */

.nav-primary li { position: relative; }

.nav-primary .submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: -18px;
  z-index: 1;
  display: grid;
  gap: 0;
  min-width: max(212px, 100%);
  padding-block: 8px;
  background: var(--paper);
  border: var(--border) solid var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transform-origin: top left;
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    visibility 180ms;
}

.nav-primary .submenu a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 10px 18px;
  white-space: nowrap;
  transition: background-color var(--d-ui) var(--ease-out);
}

/* The underline belongs to the top level. Inside a panel it reads as a rule
   across the item rather than as an indicator. */
.nav-primary .submenu a::after { content: none; }

.nav-primary .submenu a:hover,
.nav-primary .submenu a:focus-visible { background: var(--paper-2); }

/* Keyboard opens it too, and this half is deliberately outside the hover gate:
   :focus-within never fires from a tap, and a touchscreen laptop still has to
   be able to reach these links. */
.nav-primary li:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* A parent that hides six links should say so. Drawn with borders rather than
   an SVG so it inherits currentColor and needs no colour of its own. */
.nav-primary li:has(> .submenu) > a { padding-right: 15px; }

.nav-primary li:has(> .submenu) > a::before {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 4px);
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* --- mobile menu --------------------------------------------------------- */

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: var(--dusk);
  color: var(--paper);
  padding: 20px var(--pad) 40px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-out);
}

.menu-panel.is-open { opacity: 1; pointer-events: auto; }

.menu-panel .icon-btn { color: var(--paper); }

.menu-panel ul { list-style: none; margin-top: 32px; }

.menu-panel li + li { border-top: 1px solid var(--rule-i); }

.menu-panel a {
  display: block;
  padding-block: 18px;
  min-height: var(--tap-min);
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.03em;
}

.menu-panel .submenu { margin: 0 0 14px 16px; }
.menu-panel .submenu a { font-size: 17px; font-weight: 600; font-family: var(--ui); letter-spacing: 0; padding-block: 12px; }
.menu-panel .submenu li + li { border-top: 0; }

.menu-foot { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }

/* --- ticker: the offer, in constant motion ------------------------------- */

.ticker {
  background: var(--coral);
  border-block: var(--border) solid var(--ink);
  overflow: hidden;
  padding-block: 13px;
}

.ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: lhp-slide 34s linear infinite;
}

.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-inline: 18px;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: -.02em;
}

@keyframes lhp-slide { to { transform: translateX(-50%); } }

/* --- reveal on scroll ---------------------------------------------------- */

.rv {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--d-reveal) var(--ease-out),
    transform var(--d-reveal) var(--ease-out);
}

.rv.is-in { opacity: 1; transform: none; }

.rv-kids > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out);
}

.rv-kids.is-in > * { opacity: 1; transform: none; }
.rv-kids.is-in > :nth-child(2) { transition-delay: 55ms; }
.rv-kids.is-in > :nth-child(3) { transition-delay: 110ms; }
.rv-kids.is-in > :nth-child(4) { transition-delay: 165ms; }
.rv-kids.is-in > :nth-child(5) { transition-delay: 220ms; }
.rv-kids.is-in > :nth-child(6) { transition-delay: 275ms; }

/* --- forms --------------------------------------------------------------- */

.form { display: grid; gap: 18px; }

.form-row { display: grid; gap: 18px; }

.field { display: grid; gap: 9px; }

.field label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

.field input,
.field textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 15px 16px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
}

.field textarea { min-height: 140px; resize: vertical; }

.field input:focus,
.field textarea:focus {
  outline: 3px solid var(--coral);
  outline-offset: 1px;
  border-color: transparent;
}

.form-note { font-size: 12.5px; color: var(--ink-2); }

.form-msg {
  padding: 16px 18px;
  border-left: 4px solid var(--coral);
  background: var(--paper-2);
  font-size: 14.5px;
}

.form-msg.is-ok { border-left-color: var(--surf); }

.form[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Honeypot. Positioned off-screen rather than display:none, which bots skip. */
.lhp-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.cf-turnstile { grid-column: 1 / -1; }

/* --- chips (booking router) ---------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  min-height: var(--control-h-s);
  padding: 0 16px;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease;
}

.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* --- sticky booking bar (mobile only) ------------------------------------ */

.bookbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: var(--border) solid var(--ink);
  transform: translateY(120%);
  will-change: transform;
  transition: transform 300ms var(--ease-out);
}

.bookbar.is-on { transform: translateY(0); }

.bookbar-text { flex: 1; min-width: 0; }

.bookbar-text b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.bookbar-text .k { display: block; font-size: 9.5px; margin-top: 3px; }

.bookbar .btn {
  width: auto;
  min-width: 0;
  min-height: var(--control-h-s);
  padding: 0 20px;
  flex: none;
}

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

.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(20, 12, 16, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}

.sheet-scrim.is-on { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sheet);
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: var(--border) solid var(--ink);
  transform: translateY(100%);
  will-change: transform;
  pointer-events: none;
  /* A transition, not keyframes, so a fast re-open retargets from where it is. */
  transition: transform var(--d-drawer) var(--ease-drawer);
}

.sheet.is-on { transform: translateY(0); pointer-events: auto; }

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--pad) 0;
}

.sheet-head .d { font-size: clamp(27px, 7vw, 32px); margin-top: 9px; }

.sheet-body { padding: 28px var(--pad) 0; display: grid; gap: 22px; }

.sheet-foot {
  position: sticky;
  bottom: 0;
  padding: 24px var(--pad) 0;
  background: linear-gradient(to top, var(--paper) 68%, rgba(255, 246, 239, 0));
}

.summary { border-top: var(--border) solid var(--ink); }

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-2);
}

.summary-row:last-child { color: var(--ink); font-weight: 600; }

.handoff { font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

/* --- media cards --------------------------------------------------------- */

.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  border: var(--border) solid var(--ink);
  color: var(--paper);
}

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 700ms var(--ease-out);
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 10, 14, .78), rgba(20, 10, 14, 0) 58%);
}

.tile .d { display: block; font-size: clamp(24px, 5vw, 30px); line-height: .92; }
.tile .k { display: block; margin-top: 7px; font-size: 10px; color: rgba(255, 246, 239, .74); }

.shot { margin: 0; }
.shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.shot figcaption {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.plane-ink .shot figcaption { color: rgba(255, 246, 239, .5); }

/* The rail hides its scrollbar, so nothing tells you eight frames are in there
   rather than the three you can see. Each photo settles as it enters, tied to
   the scroll position itself rather than to a timer - the motion IS the
   affordance, and it reverses when you scroll back.

   linear is correct here: the scroll position is the progress, and an easing
   curve on top of it would break the link between finger and frame. Opacity
   and translateY only - a scale would nudge the snap points on the inline
   axis. Runs off the main thread; no JavaScript at all. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rail .shot {
      animation: shot-settle linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% entry 55%;
    }

    @keyframes shot-settle {
      from { opacity: .3; transform: translateY(18px); }
      to   { opacity: 1;  transform: none; }
    }
  }
}

/* --- pull quotes --------------------------------------------------------- */

.quote { padding-block: 30px; border-bottom: 1px solid var(--rule); }

.quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 5.4vw, 26px);
  line-height: 1.16;
  letter-spacing: -.028em;
}

.quote blockquote::before { content: open-quote; color: var(--coral); }
.quote blockquote { quotes: "\201C" "\201D"; }

.quote-by { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; align-items: baseline; }
.quote-by b { font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }

/* --- stats --------------------------------------------------------------- */

.figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-block: 28px;
  border-block: var(--border) solid var(--ink);
}

.fig b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  /* Digits keep one width, so a figure counting up to 2,000 does not jitter
     as it passes 9 -> 10 -> 100. */
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 9vw, 56px);
  line-height: .86;
  letter-spacing: -.05em;
}

.fig span {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.4;
}

/* --- placeholder marker for facts the studio still has to supply --------- */

.ph { padding: 1px 7px; background: var(--sun); color: var(--ink); font-weight: 600; white-space: nowrap; }

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

.site-footer { background: var(--ink); color: var(--paper); padding-block: 52px 120px; }

.footer-logo { display: inline-block; background: var(--paper); padding: 12px 16px; margin-bottom: 22px; }
.footer-logo img { height: 32px; width: auto; }

.footer-about { font-size: 14px; color: rgba(255, 246, 239, .66); max-width: 40ch; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
  margin-top: 44px;
}

.footer-cols h2 {
  font-family: var(--ui);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 246, 239, .62);
  margin-bottom: 10px;
}

.footer-cols ul { list-style: none; }

.footer-cols a {
  display: block;
  padding-block: 8px;
  min-height: var(--tap-min);
  font-size: 14px;
  color: rgba(255, 246, 239, .72);
  transition: color 180ms ease;
}

.footer-cols a:hover { color: var(--coral); }

.footer-bottom {
  margin-top: 46px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-i);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 760px) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { width: auto; min-width: 240px; }
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Above this width the sheet becomes a centred modal. A modal is not
     anchored to a trigger, so its transform origin stays centred. */
  .sheet {
    inset-inline: auto;
    left: 50%;
    bottom: auto;
    top: 50%;
    width: min(540px, 92vw);
    max-height: 88svh;
    border: var(--border) solid var(--ink);
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
    transition: transform var(--d-ui) var(--ease-out), opacity 200ms var(--ease-out);
  }

  .sheet.is-on { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@media (min-width: 1100px) {
  .hdr-in { min-height: 74px; }
  .hdr-logo img { height: 40px; }

  .hdr .btn {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: var(--tap-min);
    padding: 0 20px;
    font-size: 11px;
    margin-left: 12px;
  }

  .hdr-tel { display: inline-flex; }
  .hdr .icon-btn { display: none; }
  .nav-primary { display: block; }
  .bookbar { display: none; }
  .figs { gap: 40px; }

  .quote { border-bottom: 0; border-left: 1px solid var(--rule); padding: 36px 32px 0; }
  .quote:first-child { border-left: 0; padding-left: 0; }
}

/* Touch fires a false :hover on tap, so every hover that moves is gated. */
@media (hover: hover) and (pointer: fine) {
  .tile:hover img { transform: scale(1.04); }
  .lnk:hover svg,
  .btn:hover .btn-arrow { transform: translateX(4px); }
  .nav-primary a:hover::after { transform: scaleX(1); }

  .nav-primary li:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* Reduced motion: colour and opacity stay, travel goes. */
@media (prefers-reduced-motion: reduce) {
  .rv,
  .rv-kids > * { transform: none; }
  .rv-kids.is-in > * { transition-delay: 0ms; }

  .btn:active,
  .tile:hover img,
  .lnk:hover svg { transform: none; }

  .ticker-track { animation: none; }
  .hdr::after { transition-duration: 0ms; }

  /* The dropdown still fades - that reads as "this opened". The travel goes. */
  .nav-primary .submenu {
    transform: none;
    transition: opacity 120ms var(--ease-out), visibility 120ms;
  }

  .bookbar,
  .sheet,
  .sheet-scrim { transition-duration: 160ms; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 759px) {
  .sheet { transform: none; opacity: 0; transition: opacity 180ms ease; }
  .sheet.is-on { opacity: 1; }
}

/* ==========================================================================
   Page furniture shared by home, island and the content templates.
   These were briefly in templates/home.css, which only loads on the home page,
   so every other template using them rendered unstyled.
   ========================================================================== */
/* --- hero: full-bleed frame, then a paper slab punching up into it -------- */

.hero-fig { margin: 0; overflow: hidden; }

.hero-fig img {
  width: 100%;
  height: 56svh;
  min-height: 300px;
  object-fit: cover;
  object-position: 50% 30%;
}

.hero-slab {
  position: relative;
  z-index: 2;
  margin-top: -56px;
  margin-right: 34px;
  padding-top: 26px;
  background: var(--paper);
}

.hero-slab h1 { font-size: var(--t-display-xl); }
.hero-slab .k { display: block; margin-bottom: 12px; }

.hero-body { padding-block: 26px 44px; }

.hero-cta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-top: 30px; }

/* --- process ------------------------------------------------------------- */

.steps { list-style: none; margin-top: 8px; }

.step { padding-block: 26px; border-bottom: 1px solid var(--rule-i); }

.step-n {
  display: block;
  margin-bottom: 14px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 9vw, 66px);
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--coral);
}

.step h3 { margin-bottom: 9px; }
.step p { font-size: var(--t-body-s); max-width: 44ch; }
.step .k { display: block; margin-top: 13px; color: var(--sun); }

/* --- pricing ------------------------------------------------------------- */

.price-figure {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(96px, 30vw, 190px);
  line-height: .74;
  letter-spacing: -.06em;
}

.price-figure sup { font-size: .26em; vertical-align: super; }

.plist { list-style: none; margin-top: 30px; }

.plist li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding-block: 17px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-body-s);
  color: var(--ink-2);
}

.plist li:last-child { border-bottom: 1px solid var(--rule); }

.plist i {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-3);
}

/* The list is used inside the dark section on island pages, where --ink-2,
   --ink-3 and --rule are all near-invisible: they are the paper palette. The
   numbers were grey on aubergine and the rules had vanished. */
.plane-dusk .plist li,
.plane-ink .plist li {
  color: rgba(255, 246, 239, .82);
  border-top-color: var(--rule-i);
}

.plane-dusk .plist li:last-child,
.plane-ink .plist li:last-child { border-bottom-color: var(--rule-i); }

.plane-dusk .plist i,
.plane-ink .plist i { color: rgba(255, 246, 239, .55); }

/* --- faq ----------------------------------------------------------------- */

.faq-list details { border-bottom: 1px solid var(--rule); }

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding-block: 21px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 20px);
  letter-spacing: -.022em;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { flex: none; color: var(--coral); transition: transform 240ms var(--ease-out); }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { padding-bottom: 22px; color: var(--ink-2); font-size: var(--t-body-s); max-width: 62ch; }

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .faq-list details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size 240ms var(--ease-out),
      content-visibility 240ms allow-discrete,
      opacity 180ms ease;
  }

  .faq-list details[open]::details-content { block-size: auto; opacity: 1; }
}

/* --- breakpoints --------------------------------------------------------- */

@media (min-width: 760px) {
  .hero-fig img { height: 64svh; }
  .hero-slab { margin-top: -74px; margin-right: 22%; padding-top: 32px; }
  .hero-body { padding-block: 30px 58px; }
  .hero-cta { flex-direction: row; align-items: center; gap: 26px; }
  .isl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .isl-grid .tile:nth-child(even) { margin-top: 56px; }
}

@media (max-width: 759px) {
  .isl-grid .tile:nth-child(even) { margin-top: 40px; aspect-ratio: 4 / 5; }
}

@media (min-width: 1100px) {
  .hero-fig img { height: 80svh; }
  .hero-slab { margin-top: -110px; margin-right: 38%; padding-top: 40px; }
  .hero-body { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; padding-block: 38px 84px; }
  .hero-cta { margin-top: 0; }

  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { border-bottom: 0; border-left: 1px solid var(--rule-i); padding: 34px 34px 0; }
  .step:first-child { border-left: 0; padding-left: 0; }

  .faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 76px; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-list summary svg { transition-duration: 0ms; }
}

/* ==========================================================================
   Editor content, listings and the remaining page furniture.
   ========================================================================== */

/* --- content from the editor -------------------------------------------- */

.entry { font-size: var(--t-body-l); line-height: 1.6; color: var(--ink-2); }
.entry h2 { font-size: var(--t-display-s); margin-top: 1.6em; color: var(--ink); }
.entry h3 { margin-top: 1.4em; color: var(--ink); }
.entry a { color: var(--coral-deep); border-bottom: 1px solid currentColor; }
.entry ul, .entry ol { padding-left: 1.2em; }
.entry li + li { margin-top: .4em; }
.entry img { margin-block: 1.4em; }
.entry blockquote {
  margin: 1.6em 0;
  padding-left: 20px;
  border-left: 4px solid var(--coral);
  font-family: var(--display);
  font-size: clamp(19px, 3vw, 23px);
  line-height: 1.3;
  color: var(--ink);
}
.entry code { background: var(--paper-2); padding: 2px 6px; }

/* --- long-form body copy ------------------------------------------------- */

/* A page of SEO copy is still a page of copy, and the things that make it read
   as written rather than assembled are all typographic: a measure the eye can
   track, headings that sit closer to what they introduce than to what came
   before, and list markers that are part of the type rather than browser
   defaults. */

.entry-long { max-width: 68ch; }

.entry-long > * + * { margin-top: 1.15em; }

.entry-long h2,
.entry-long h3 {
  /* Close to the paragraph it owns, far from the one it follows. Default
     margins put a heading equidistant between the two, which reads as a wall. */
  margin-top: 2.2em;
  margin-bottom: .55em;
  max-width: 26ch;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.entry-long h2 + *,
.entry-long h3 + * { margin-top: 0; }

.entry-long ul { list-style: none; padding-left: 0; }

.entry-long ul > li {
  position: relative;
  padding-left: 26px;
}

/* A rule, not a disc: the same mark the rest of the page uses. */
.entry-long ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 13px;
  height: var(--border);
  background: var(--coral);
}

.entry-long ol { padding-left: 1.4em; }
.entry-long ol::marker,
.entry-long li::marker { color: var(--ink-3); }

.entry-long li + li { margin-top: .5em; }

.entry-long strong { color: var(--ink); font-weight: 600; }

.plane-dusk .entry,
.plane-ink .entry { color: rgba(255, 246, 239, .78); }
.plane-dusk .entry h2,
.plane-dusk .entry h3,
.plane-ink .entry h2,
.plane-ink .entry h3 { color: var(--paper); }

.legal-body { font-size: var(--t-body); }

/* --- islands grid base --------------------------------------------------- */

.isl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

/* --- post listings ------------------------------------------------------- */

.post-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 34px; }

.post-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post-card h2 { font-size: clamp(21px, 3.2vw, 26px); }
.post-card p { font-size: var(--t-body-s); }

.single-hero { margin: 0; }
.single-hero img { width: 100%; max-height: 70svh; object-fit: cover; }

.post-nav { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.pagination { margin-top: 48px; display: flex; justify-content: center; }

.pagination .nav-links,
.pagination > * { display: flex; flex-wrap: wrap; gap: 8px; }

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  font-size: 14px;
  font-weight: 600;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- misc ---------------------------------------------------------------- */

.contact-form h2 { font-size: var(--t-display-s); }
.contact-form .form { margin-top: 28px; }

.no-results { text-align: center; }

.review-embed { margin-top: 30px; }

.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }
.search-form input[type="search"] {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 16px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  font-size: 16px;
}
.search-form input[type="submit"] {
  min-height: var(--control-h);
  padding: 0 22px;
  border: var(--border) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (min-width: 760px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Collection cards.
   ========================================================================== */

.pkg-grid { display: grid; gap: 2px; }

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  border: var(--border) solid var(--ink);
  background: var(--paper);
}

.pkg.is-flagged { background: var(--paper-2); }

.pkg-flag {
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  padding: 6px 12px;
  background: var(--coral);
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.pkg.is-flagged h3 { margin-top: 18px; }

.pkg h3 { font-size: clamp(19px, 2.6vw, 23px); }

.pkg-price {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 7vw, 52px);
  line-height: .9;
  letter-spacing: -.045em;
}

.pkg-summary { margin-top: 14px; font-size: var(--t-body-s); color: var(--ink-2); }

.pkg-items { list-style: none; margin-top: 20px; }

.pkg-items li {
  padding-block: 9px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-body-s);
  color: var(--ink-2);
}

.pkg-always {
  margin-top: auto;
  padding-top: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-3);
}

.pkg.is-compact .pkg-items li:nth-child(n + 4) { display: none; }

.pkg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
}

@media (min-width: 760px) {
  .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .grid-3.pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   "After the shoot" facts. Deliberately quiet: the home page sells the free
   session, not the collections, so the numbers sit in a definition list rather
   than in price cards.
   ========================================================================== */

.after-facts dl { margin: 0; }

.after-facts dl > div {
  display: grid;
  gap: 4px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}

.after-facts dl > div:last-child { border-bottom: 1px solid var(--rule); }

.after-facts dt { margin: 0; }

.after-facts dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 21px);
  letter-spacing: -.02em;
}