/* seletar.css: /airport-transfers/seletar/ (P2, 02/11/2026).
 * After the split stage: how a pickup works (day, the drive times as large tiles), JetQuay (a night statement with the
 * before and now drawing), the handling agents (celadon, an index list), questions (day). Tokens and roles only. */

/* ============================== the split stage ============================== */
/* frame.css pins the photograph while the panel scrolls past it and tightens the panel on short windows, so the whole
 * car (left) and the jet's nose (right) stay in frame (MANIFEST). Nothing page-level is needed here. */

/* ============================== how a Seletar pickup works (porcelain) ============================== */
.aj-site .xsp-how .pt-v { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); }
/* the address is a line to read, not a figure: set at statement size and kept to the tile */
.aj-site .xsp-how .pt:last-child .pt-v { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; max-width: 22ch; }
.xsp-how .pt-k { font-size: var(--fs-small); }
.xsp-how .source-line { margin-top: clamp(32px, 1.5rem + 1vw, 48px); }

/* ============================== JetQuay (graphite statement) ============================== */
.jq-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: clamp(64px, 3rem + 5vw, 144px); }
.aj-site .jq-title {
  margin: 0; max-width: 16ch; font-size: clamp(2.5rem, 1rem + 5.4vw, 6.25rem); font-weight: 400; line-height: 1;
  letter-spacing: -0.045em; color: var(--mist); text-wrap: balance;
}
.aj-site .jq-lede { color: var(--mist-2); max-width: 34ch; }
@media (min-width: 1024px) {
  .jq-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .jq-title { grid-column: 1 / span 8; }
  .jq-lede { grid-column: 9 / -1; padding-bottom: 0.4em; }
}

/* the drawing: the closed building, a dashed line drawn across, the place the car waits now */
.jq-map { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.jq-node { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 1rem + 2vw, 48px); min-width: 0; }
.jq-node.is-old { border: 1px dashed var(--field-d); color: var(--mist-2); }
.jq-node.is-new { background: var(--green-raised); border: 1px solid var(--mist); color: var(--mist); }
.jq-k { font-size: var(--fs-small); font-weight: 500; color: var(--mist-2); }
.jq-node.is-new .jq-k { color: var(--mist); }
.jq-v { margin-top: clamp(24px, 1rem + 2vw, 56px); font-size: var(--fs-statement); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
.jq-node.is-old .jq-v { color: var(--mist-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.jq-node.is-new .jq-v { color: var(--mist); }
.jq-s { font-size: var(--fs-small); color: var(--mist-2); }
.jq-node.is-new .jq-s { color: var(--mist); }
/* the line: vertical on phones, across from 1024; an arrowhead drawn from two 1px strokes */
.jq-line { position: relative; justify-self: start; width: 1px; height: 72px; margin-left: clamp(24px, 1rem + 2vw, 48px); }
.jq-line-in { position: absolute; inset: 0; border-left: 1px dashed var(--mist-2); transform-origin: 50% 0; }
.jq-line::after { content: ""; position: absolute; left: -5px; bottom: 1px; width: 10px; height: 10px; border-right: 1px solid var(--mist-2); border-bottom: 1px solid var(--mist-2); transform: rotate(45deg); }
html.mo .jq-line-in[data-reveal="draw"]:not(.is-in) { scale: 1 0; transform-origin: 50% 0; }
.jq-map figcaption { margin-top: 28px; font-size: var(--fs-meta); color: var(--mist-2); }
.jq-map figcaption a { color: var(--mist); }
@media (min-width: 1024px) {
  .jq-map { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr); align-items: center; }
  .jq-node { min-height: clamp(260px, 12rem + 6vw, 340px); }
  .jq-line { justify-self: stretch; width: auto; height: 1px; margin: 0 clamp(16px, 1.5vw, 28px); }
  .jq-line-in { border-left: 0; border-top: 1px dashed var(--mist-2); }
  .jq-line::after { left: auto; right: 1px; top: -5px; bottom: auto; transform: rotate(-45deg); }
  html.mo .jq-line-in[data-reveal="draw"]:not(.is-in) { scale: 0 1; transform-origin: 0 50%; }
  .jq-map figcaption { grid-column: 1 / -1; }
}

/* ============================== the handling agents (celadon index list) ============================== */
/* rows without a link: the counter, the name large, the line, a plain 20px plane where the arrow would be */
.aj-site .xsp-fbo-list .index-row.is-static { cursor: default; }
.aj-site .xsp-fbo-list .index-row.is-static::after { content: none; }
.aj-site .xsp-fbo-list .index-row.is-static .t-h3 { transform: none; }
.aj-site .xsp-fbo-list .index-row.is-static > i[data-icon] { width: 56px; height: 56px; border-color: transparent; color: var(--text-2); }
.aj-site .xsp-fbo-list .index-row.is-static > i[data-icon]::before { content: none; }
.aj-site .xsp-fbo-list .index-row.is-static .index-fact { font-size: var(--fs-lede); }
.xsp-fbo .source-line { margin-top: clamp(32px, 1.5rem + 1vw, 48px); }

/* ============================== questions (porcelain) ============================== */
.xsp-questions .qa-split-head .t-h2 { max-width: 12ch; }

/* ============================== the stage on phones and tablets ============================== */
/* under 1024 the H1 and the lede sit in the middle of the photograph, where the stage's own scrim is clear; over this
   page's bright photograph they lost contrast. A one-colour pine wash that deepens towards the sheet keeps them on pine. */
@media (max-width: 1023px) {
  .aj-site.page-seletar .mh.has-booking .mh-scrim {
    background: linear-gradient(to bottom, var(--scrim-t) 0, color-mix(in srgb, var(--pine) 50%, transparent) 28%, color-mix(in srgb, var(--pine) 70%, transparent) 60%, var(--scrim-b) 82%, var(--pine) 100%);
  }
}