/* KIOS lookbook. The herbarium folio system shared with the chapter pages. Single light theme on purpose. */
:root {
  --paper: #EFE6D2; --leaf: #E6DAC0; --rule: #CDBC9A; --sepia: #3B2A20; --faded: #6E5A48;
  --indigo: #2F4A7A; --mengkudu: #A8432E;
  --fell: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --caslon: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--sepia); font: 17px/1.65 var(--caslon); padding-inline: var(--gutter); -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mengkudu); }
:focus-visible { outline: 2px solid var(--mengkudu); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; }
.label { font: 400 13px/1.4 var(--type); letter-spacing: .06em; color: var(--faded); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--sepia); color: var(--paper); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons */
.btn { display: inline-block; font: 400 15px/1 var(--type); letter-spacing: .04em; text-decoration: none; color: var(--paper); background: var(--sepia); border: 1px solid var(--sepia); padding: 14px 20px; cursor: pointer; }
.btn:hover { background: var(--mengkudu); border-color: var(--mengkudu); color: var(--paper); }
.btn.quiet { background: transparent; color: var(--sepia); }
.btn.quiet:hover { background: var(--leaf); color: var(--sepia); border-color: var(--sepia); }

/* Masthead */
.mast { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px 14px; border-bottom: 3px double var(--sepia); }
.kios { font: 700 22px/1 var(--caslon); letter-spacing: .32em; margin-right: -.32em; text-decoration: none; }
.house { display: flex; align-items: center; gap: 10px; }
.house img { width: 26px; height: 26px; }
.mast nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.mast nav a { font: 400 13px/1.4 var(--type); letter-spacing: .05em; text-decoration: none; }
.mast nav a:hover { text-decoration: underline; }

/* Opening */
.opening { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(32px, 6vw, 80px); }
.opening .kicker { font: italic 400 20px/1.3 var(--fell); color: var(--faded); margin: 0; }
.opening h1 { font: 400 clamp(46px, 7.4vw, 104px)/.98 var(--fell); margin: 10px 0 24px; letter-spacing: -.01em; text-wrap: balance; }
.opening p { max-width: 54ch; margin: 0 0 16px; }
.opening .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.stack { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.stack figure { margin: 0; background: var(--leaf); border: 1px solid var(--rule); padding: clamp(6px, 1vw, 12px); box-shadow: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(59, 42, 32, .55); }
.stack .back { grid-column: 1 / span 7; grid-row: 1; margin-top: 16%; }
.stack .front { grid-column: 6 / span 7; grid-row: 1; }

/* Contents */
.contents { border-top: 1px solid var(--rule); padding-block: 26px 40px; }
.contents h2 { font: italic 400 22px/1.2 var(--fell); margin: 0 0 12px; }
.contents ol { list-style: none; margin: 0; padding: 0; columns: 2 320px; column-gap: 56px; }
.contents li { break-inside: avoid; }
.contents a { display: flex; align-items: baseline; gap: 12px; padding-block: 8px; text-decoration: none; border-bottom: 1px dotted var(--rule); }
.contents .n { font: 400 13px/1 var(--type); color: var(--faded); min-width: 2.2em; }
.contents .t { font: 400 22px/1.2 var(--fell); }
.contents .p { margin-left: auto; font: 400 13px/1.3 var(--type); color: var(--faded); text-align: right; }

/* Section heads */
.part { border-top: 3px double var(--sepia); padding-block: clamp(36px, 6vw, 72px); }
.part-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(24px, 4vw, 44px); }
.part-head h2 { font: 400 clamp(36px, 5vw, 62px)/1 var(--fell); margin: 6px 0 0; }
.part-head p { margin: 0; max-width: 60ch; }

/* The Archive */
.archive { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.archive figure { margin: 0; }
.archive .photo img { border: 1px solid var(--rule); }
.archive figcaption, .sheet figcaption { font: 400 13px/1.45 var(--type); color: var(--faded); margin-top: 8px; }
.sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sheet li:first-child { grid-column: 1 / -1; }
.sheet img { border: 1px solid var(--rule); mix-blend-mode: multiply; }

/* Chapter spreads */
.chapter { border-top: 3px double var(--sepia); padding-block: clamp(40px, 7vw, 96px); scroll-margin-top: 12px; }
.spread { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 80px); align-items: center; }
.chapter:nth-of-type(even) .spread .plate { order: 2; }
.plate { margin: 0; }
.plate .frame { background: var(--leaf); border: 1px solid var(--rule); padding: clamp(8px, 1.2vw, 16px); }
.plate figcaption { font: 400 13px/1.45 var(--type); color: var(--faded); margin-top: 10px; }
/* A chapter opens on a photograph of its place, not on the artwork plate. The photograph needs no
   mount, and being landscape it takes the wider share of the spread. The plate's credits stay in
   the caption, because the prints are still after Haeckel, Rumphius and the rest. */
.plate.hero .frame { background: none; border: 0; padding: 0; }
.plate.hero img { width: 100%; }
.spread:has(.plate.hero) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
/* Even chapters put the photograph second, so the wide column has to move with it. */
.chapter:nth-of-type(even) .spread:has(.plate.hero) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.chapter-no { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.chapter-no b { font: 400 clamp(56px, 8.5vw, 116px)/.8 var(--caslon); font-variant-numeric: lining-nums; letter-spacing: -.02em; color: #8F7A5E; }
.chapter h2 { font: 400 clamp(44px, 6.4vw, 88px)/1 var(--fell); margin: 14px 0 16px; text-wrap: balance; }
.lockup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 22px; }
.lockup .k { font: 700 16px/1 var(--caslon); letter-spacing: .3em; }
.lockup .x { font-family: var(--type); color: var(--faded); }
.lockup .typed { font: 700 13px/1 var(--caslon); letter-spacing: .22em; }
.lockup .chip { display: flex; align-items: center; gap: 9px; padding: 6px 10px; }
.lockup .cb { display: flex; align-items: center; gap: 8px; font: 700 16px/1 var(--caslon); }
.lockup .cb img { width: 24px; height: 24px; }
.lockup .gaia { background: #14131a; }
.lockup .gaia img { height: 28px; width: auto; }
.lockup .seascapes { background: #22404D; color: #EBE0CD; }
.lockup .seascapes svg { height: 16px; width: auto; }
.lockup .seascapes span { display: grid; line-height: 1.05; }
.lockup .seascapes b { font: 700 12px/1 var(--caslon); letter-spacing: .2em; }
.lockup .seascapes small { font: 400 8px/1.2 var(--caslon); letter-spacing: .24em; }
.lockup .mb { background: var(--indigo); padding: 7px 9px; }
.lockup .mb img { height: 18px; width: auto; image-rendering: pixelated; }
.chapter .words p { max-width: 52ch; margin: 0 0 14px; }
.drop { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.status-line { font: 400 14px/1.3 var(--type); letter-spacing: .05em; display: inline-flex; align-items: center; gap: 10px; }
.status-line::before { content: ""; width: 10px; height: 10px; border: 1.5px solid var(--mengkudu); border-radius: 50%; }

/* Pieces: an editorial arrangement, one large figure and its companions */
.pieces { display: grid; gap: clamp(12px, 2vw, 24px); margin: clamp(32px, 5vw, 64px) 0 0; padding: 0; list-style: none; grid-auto-flow: dense; }
.pieces[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Four tiles sit in one even row, so the first does not take the double cell the other counts give it. */
.pieces[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pieces[data-count="4"] li:first-child, .chapter:nth-of-type(even) .pieces[data-count="4"] li:first-child { grid-column: auto; grid-row: auto; }
.pieces[data-count="4"] li:first-child .frame { aspect-ratio: 4 / 5; flex: none; }
.pieces[data-count="4"] li:first-child .name { font-size: 21px; }
.pieces[data-count="5"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pieces[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pieces li:first-child { grid-column: span 2; grid-row: span 2; }
/* Fig. 1 always opens the sheet on the left, so the figures read in order; the spreads above still alternate. */
.pieces figure { margin: 0; height: 100%; display: flex; flex-direction: column; }
/* Tiles are photographs of the pieces worn, all one 4:5 shape, filled edge to edge. */
.pieces .frame { border: 1px solid var(--rule); aspect-ratio: 4 / 5; overflow: hidden; }
.pieces .frame img { width: 100%; height: 100%; object-fit: cover; }
.pieces li:first-child .frame { aspect-ratio: auto; flex: 1; }
.pieces figcaption { padding-top: 8px; }
.pieces .fig { font: 400 12px/1.3 var(--type); color: var(--faded); }
.pieces .name { display: block; font: italic 400 21px/1.2 var(--fell); }
.pieces li:first-child .name { font-size: 26px; }
.pieces .spec { display: block; font: 400 12px/1.45 var(--type); color: var(--faded); }
/* Chapter 05 has eight pieces, and its stills are 4:5 rather than square. The glow overshirt
   has no plate yet, so its frame carries a line of type where the picture would be. */
.pieces[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#kios-night .pending { font: 400 13px/1.5 var(--type); color: var(--faded); text-align: center; padding: 0 12%; }
.rule-note { margin: 18px 0 0; max-width: 72ch; font-size: 15px; border-left: 2px solid var(--mengkudu); padding-left: 12px; }

/* How a drop works */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--rule); }
.steps li { padding: 22px clamp(12px, 2vw, 26px) 26px; border-right: 1px solid var(--rule); }
.steps li:first-child { padding-left: 0; }
.steps li:last-child { border-right: 0; }
.steps .roman { display: block; font: 400 52px/1 var(--fell); color: var(--mengkudu); }
.steps h3 { font: italic 400 24px/1.2 var(--fell); margin: 12px 0 8px; }
.steps p { margin: 0; font-size: 16px; }
.made { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-top: 12px; padding-top: 22px; border-top: 3px double var(--sepia); }
.made strong { font: 400 clamp(26px, 3.4vw, 40px)/1.15 var(--fell); }

/* Early access */
.signup h2 { font: 400 clamp(36px, 5vw, 62px)/1 var(--fell); margin: 6px 0 18px; }
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.signup form { background: var(--leaf); border: 1px solid var(--rule); padding: clamp(18px, 3vw, 34px); }
.field { display: grid; gap: 6px; margin-bottom: 22px; }
.field label, fieldset legend { font: 400 13px/1.4 var(--type); letter-spacing: .06em; color: var(--sepia); }
input[type="email"] { font: 400 18px/1.3 var(--caslon); color: var(--sepia); background: var(--paper); border: 1px solid var(--sepia); border-radius: 0; padding: 12px 14px; width: 100%; }
fieldset { border: 0; margin: 0 0 22px; padding: 0; }
fieldset legend { margin-bottom: 8px; padding: 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.checks label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--rule); cursor: pointer; font-size: 16px; }
.checks label:has(input:checked) { border-color: var(--sepia); box-shadow: inset 0 -2px 0 var(--sepia); }
.checks input { width: 18px; height: 18px; accent-color: var(--sepia); margin: 0; flex: none; }
.checks small { font: 400 12px/1 var(--type); color: var(--faded); margin-left: auto; }
/* Piece picker. Revealed one chapter at a time, so it reads as a short follow-up question rather
   than a second form. Indented and ruled on the left to show it belongs to the chapter above it. */
.pieces-pick { margin: 0 0 18px; padding: 14px 0 2px 14px; border-left: 1px solid var(--rule); }
.pieces-pick[hidden] { display: none; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.picks li { display: flex; align-items: center; gap: 10px; }
.picks label { display: flex; align-items: baseline; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; font-size: 16px; }
.picks input { width: 18px; height: 18px; accent-color: var(--sepia); margin: 0; flex: none; align-self: center; }
.pick-name { flex: none; }
/* The spec is context, not a label: it stays quiet, and is the first thing to go on a phone. */
.pick-spec { font: 400 12px/1.4 var(--type); color: var(--faded); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picks select { font: inherit; font-size: 14px; padding: 4px 6px; background: var(--paper); border: 1px solid var(--rule); color: inherit; flex: none; }
.picks select:disabled { opacity: .4; }
.one-size { font: 400 12px/1 var(--type); color: var(--faded); flex: none; }
.pick-note { margin-top: 0; margin-bottom: 18px; }
@media (max-width: 560px) {
  .pick-spec { display: none; }
}

.form-status { margin-top: 16px; font-size: 16px; min-height: 1.6em; }
.form-status.ok { border-left: 3px solid var(--indigo); padding-left: 12px; }
.form-status.err { border-left: 3px solid var(--mengkudu); padding-left: 12px; }
.fine { font: 400 13px/1.5 var(--type); color: var(--faded); margin: 14px 0 0; }

/* Footer */
.foot { border-top: 3px double var(--sepia); padding-block: 30px 44px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 56px; font-size: 15px; }
.foot h2 { font: 400 13px/1.4 var(--type); letter-spacing: .06em; color: var(--faded); margin: 0 0 8px; font-weight: 400; }
.foot p { margin: 0 0 10px; max-width: 70ch; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.foot .colophon { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--rule); }

/* Subtle arrival for figures, CSS only; off when the reader prefers less motion */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes arrive { from { opacity: .2; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Narrow screens */
@media (max-width: 900px) {
  .opening, .spread, .archive, .signup, .part-head, .foot { grid-template-columns: minmax(0, 1fr); }
  /* :has() outranks the line above, so the scene-led spread needs telling twice to go single column. */
  .spread:has(.plate.hero), .chapter:nth-of-type(even) .spread:has(.plate.hero) { grid-template-columns: minmax(0, 1fr); }
  .chapter:nth-of-type(even) .spread .plate { order: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--rule); }
  .steps li:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--rule); }
  .steps li:nth-child(even) { padding-left: 18px; }
  .pieces[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pieces li:first-child .frame { aspect-ratio: 4 / 5; flex: none; }
  .pieces li:first-child, .chapter:nth-of-type(even) .pieces li:first-child { grid-column: 1 / -1; grid-row: auto; }
  .pieces[data-count="6"] li:last-child { grid-column: 1 / -1; }
  .pieces[data-count="6"] li:last-child .frame { max-width: calc(50% - 8px); }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .mast nav { width: 100%; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li, .steps li:nth-child(odd), .steps li:nth-child(even) { padding: 18px 0; border-right: 0; }
  .contents .p { display: none; }
}
.form-done { display: grid; gap: 12px; }
.form-done-head { font: 400 30px/1.2 var(--fell); margin: 0; }

/* ---- 2026-10-20 jury round: motion, placeholders, phone menu ---- */
/* Page to page: a short cross-fade, the masthead held still. No script. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: kios-out .3s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: kios-in .55s cubic-bezier(.22, 1, .36, 1) .08s both; }
  @keyframes kios-out { to { opacity: 0; } }
  @keyframes kios-in { from { opacity: 0; transform: translateY(14px); } }
}
/* An image that has not arrived yet shows the plate's paper, not an empty frame. */
.frame img, .stack img, .archive img, .sheet img { background: var(--leaf); }
.plate.hero .frame { background: var(--leaf); }
/* The button: mengkudu sweeps in from the left. */
.btn { background: linear-gradient(var(--mengkudu), var(--mengkudu)) left / 0 100% no-repeat, var(--sepia);
  transition: background-size .4s cubic-bezier(.22, 1, .36, 1), border-color .4s; }
.btn:hover { background: linear-gradient(var(--mengkudu), var(--mengkudu)) left / 100% 100% no-repeat, var(--sepia); }
.btn.quiet { background: linear-gradient(var(--leaf), var(--leaf)) left / 0 100% no-repeat, transparent; }
.btn.quiet:hover { background: linear-gradient(var(--leaf), var(--leaf)) left / 100% 100% no-repeat, transparent; }
/* Contents rows: an arrow slides in and the row takes a leaf wash. */
.contents a { transition: background-color .25s, padding-left .3s cubic-bezier(.22, 1, .36, 1); }
.contents a::after { content: "\2192" / ""; font: 400 18px/1 var(--type); opacity: 0; transform: translateX(-8px);
  transition: opacity .25s, transform .3s cubic-bezier(.22, 1, .36, 1); }
.contents a:hover { background: var(--leaf); padding-left: 8px; color: var(--sepia); }
.contents a:hover::after { opacity: 1; transform: none; }
/* Pieces and photographs ease in under the pointer. */
.pieces .frame img, .archive .photo img, .sheet img { transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.pieces li:hover .frame img, .archive .photo:hover img, .sheet li:hover img { transform: scale(1.04); }
.archive .photo, .sheet figure { overflow: hidden; }
.mast nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .3s cubic-bezier(.22, 1, .36, 1); }
.mast nav a:hover { text-decoration: none; background-size: 100% 1px; }
/* Phone: KIOS, Shop and a Menu button (native <details>) instead of three wrapped lines of 14px links. */
.menu { display: none; }
@media (max-width: 560px) {
  .mast { flex-wrap: nowrap; position: relative; }
  .mast > nav, .mast .house .label { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu summary { list-style: none; cursor: pointer; min-height: 44px; padding: 0 14px; display: flex; align-items: center;
    font: 400 14px/1 var(--type); letter-spacing: .05em; border: 1px solid var(--sepia); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { background: var(--sepia); color: var(--paper); }
  .menu ul { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 0; padding: 4px 0 12px; list-style: none;
    background: var(--paper); border-bottom: 3px double var(--sepia); box-shadow: 0 18px 30px -22px rgba(59, 42, 32, .5); }
  .menu a { display: block; font: 400 17px/48px var(--caslon); text-decoration: none; border-top: 1px dotted var(--rule); }
}
/* 24px minimum hit areas for the small links */
.form-note a { display: inline-block; padding-block: 4px; }
.kios, .cta .label, .foot a, .colophon a, .fine a { display: inline-block; padding-block: 4px; }
/* the remaining colour-only links get the nav's underline wipe */
a.label, .kios, .contents h2 + ol a .t { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-size: 0 1px; background-repeat: no-repeat;
  text-decoration: none; transition: background-size .3s cubic-bezier(.22, 1, .36, 1), color .2s; }
a.label:hover, .kios:hover { background-size: 100% 1px; }
.mast nav a { display: inline-block; padding-block: 5px; }