/* ---- flyloft (Flyloft — Scenic art 35) — unbleached canvas, one theatrical
   purple. THE STRUCTURAL MOVE: a small centred title band announces each of the
   three blocks below the welcome, so the page reads as chapters and the nav
   doubles as a table of contents. Purple appears in exactly three places — the
   rule above each title band, the nav underline (via --brand) and the closing
   button — so the CTA band is stripped back to canvas rather than filled.
   The zebra tint is switched off on purpose: separate announced blocks on one
   continuous ground, never alternating stripes. ---- */
body.t-flyloft.ws-body { --bg: #f0e9dc; --fg: #4d473d; --heading: #211e1a; --text: #4d473d; --muted: #8a8175; }
body.t-flyloft .ws-nav { background: #f0e9dc; border-bottom: 1px solid #ddd4c2; }
body.t-flyloft .ws-brand { text-transform: uppercase; letter-spacing: 0.24em; font-size: 15px; font-weight: 700; }
/* the hero is the only edge-to-edge block on the page; copy sits bottom-left */
body.t-flyloft .ws-hero { min-height: 100vh; align-items: flex-end; }
body.t-flyloft .ws-section { padding: 92px 0; }
body.t-flyloft .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
/* the welcome statement: headingless richtext, narrow measure, nothing beside it */
body.t-flyloft .ws-richtext:not(:has(.ws-h2)) { padding: 118px 0 96px; }
body.t-flyloft .ws-richtext:not(:has(.ws-h2)) p { max-width: 48ch; margin: 0 auto 20px; text-align: center; color: var(--text); font-size: 18.5px; line-height: 1.85; }
/* the title band + the block it announces are one unit, hence the sibling rule */
body.t-flyloft .ws-titleblock { padding: 104px 0 0; }
body.t-flyloft .ws-titleblock + .ws-section { padding-top: 34px; }
body.t-flyloft .ws-title-h { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.26em; }
body.t-flyloft .ws-title-h::before { content: ''; display: block; width: 56px; height: 2px; background: #6b2d8f; margin: 0 auto 26px; }
body.t-flyloft .ws-title-sub { max-width: 46ch; margin: 16px auto 0; font-size: 16px; color: var(--muted); line-height: 1.6; }
body.t-flyloft .ws-sub { color: var(--muted); max-width: 46ch; }
/* four captioned tiles, one full row — the caption sits UNDER the image */
body.t-flyloft .ws-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
body.t-flyloft .ws-gallery-item img { border-radius: 0; aspect-ratio: 3 / 4; }
body.t-flyloft .ws-gallery-cap strong { display: block; font-size: 16px; font-weight: 700; color: var(--heading); margin-bottom: 5px; }
/* credits: plain numbered text on hairlines, no card chrome anywhere */
body.t-flyloft .ws-list-number { padding-left: 0; list-style-position: inside; border-top: 1px solid #ddd4c2; }
body.t-flyloft .ws-list-number li { border-bottom: 1px solid #ddd4c2; padding: 15px 2px; margin: 0; font-size: 16px; }
/* the closing ask is quiet: canvas ground, one purple slab, no colour block */
body.t-flyloft .ws-cta { background: transparent; color: var(--text); padding: 96px 0 24px; }
body.t-flyloft .ws-cta-inner h2 { color: var(--heading); }
body.t-flyloft.ws-body .ws-cta .btn.brand, body.t-flyloft.ws-body .btn.brand { background: #6b2d8f; color: #f0e9dc; }
/* the second ask, deliberately undersized */
body.t-flyloft .ws-form { max-width: 400px; }
body.t-flyloft .ws-field input { border-radius: 0; background: transparent; border-color: #c9bfa9; }
@media (max-width: 760px) { body.t-flyloft .ws-gallery-grid { grid-template-columns: repeat(2, 1fr); } body.t-flyloft .ws-hero { min-height: 82vh; } }

/* flyloft night — canvas becomes the black of a lit stage; the purple lifts to
   a lamp gel so the three title rules and the closing slab stay legible */
html[data-theme="dark"] body.t-flyloft.ws-body { --bg: #191712; --fg: #c4bcac; --heading: #f0e9dc; --text: #c4bcac; --muted: #8f8879; }
html[data-theme="dark"] body.t-flyloft { background: #191712; }
html[data-theme="dark"] body.t-flyloft .ws-nav { background: #191712; border-bottom-color: #2f2a20; }
html[data-theme="dark"] body.t-flyloft .ws-title-h::before { background: #b07ad0; }
html[data-theme="dark"] body.t-flyloft .ws-list-number,
html[data-theme="dark"] body.t-flyloft .ws-list-number li { border-color: #2f2a20; }
html[data-theme="dark"] body.t-flyloft .ws-field input { border-color: #3a3428; }
html[data-theme="dark"] body.t-flyloft.ws-body .ws-cta .btn.brand,
html[data-theme="dark"] body.t-flyloft.ws-body .btn.brand { background: #b07ad0; color: #191712; }