/* #keys, #finale, #questions. Every selector is prefixed with its section's id. */

/* The one place the page goes from day to night gets a longer dusk than the other seams' strip. */
#keys>.edge-ink{height:calc(220 * var(--art-px));background-image:url('../art/edge-dusk.webp');background-size:calc(1024 * var(--art-px)) calc(220 * var(--art-px))}

/* #keys. The stage is the sticky child and the spacer after it is the runway, so a stage taller than a short screen still
   pins and releases cleanly. Without JS, or under reduced motion, the spacer is gone and this is one still drawing. */
#keys{
  --plate-w:min(140svh,92vw);
  --plate-h:calc(var(--plate-w) * 1466 / 2200);
  /* The text stops short of the point where the plate's dissolve begins. */
  --copy-w:min(34rem,calc(100vw - var(--plate-w) * .66 - max(var(--gutter),(100vw - var(--wrap)) / 2) - 16px));
}
#keys .keys-stage{position:relative;display:flex;align-items:center;min-height:100svh;padding-block:88px 56px}
html.js:not(.rm) #keys .keys-stage{position:sticky;top:0}
html.js:not(.rm) #keys .keys-spacer{height:120vh}
#keys .keys-art{position:absolute;top:calc(50svh - var(--plate-h) / 2);left:calc(100% - var(--plate-w) * .94);width:var(--plate-w);height:var(--plate-h)}
#keys .keys-plate{width:100%;height:100%;max-width:none;-webkit-mask:url('../art/vault-mask.webp') 0 0 / 100% 100% no-repeat;mask:url('../art/vault-mask.webp') 0 0 / 100% 100% no-repeat}
#keys .keys-copy{position:relative;display:flow-root}
#keys .keys-copy>*{width:var(--copy-w)}
#keys .keys-copy>h2{width:max-content;max-width:calc(100vw - 2 * var(--gutter))}
#keys .keys-copy>p{margin-top:16px}
#keys .keys-copy>h2+p{margin-top:24px}
#keys .keys-points{margin-top:clamp(16px,2.4svh,28px);border-top:1px solid var(--ink-soft)}
#keys .keys-points>div{padding-block:clamp(8px,1.3svh,14px);border-bottom:1px solid var(--ink-soft)}
#keys .keys-points dt{font-weight:600;color:var(--paper)}
#keys .keys-points dd{color:var(--paper-72);font-size:max(16px,calc(var(--size-body) * .85));line-height:1.4}
/* The key's vignette is mostly ground: the negative margins pull the text up to the drawing, and the clip, which only ever
   cuts flat Ink, stops that ground painting over the plate or the heading. */
#keys .keys-key{--k:min(30vw,28svh,440px);width:var(--k);height:var(--k);max-width:none;margin:calc(var(--k) * -.2) 0 calc(var(--k) * -.24) calc(var(--k) * -.09);clip-path:inset(24% 9% 28% 8%)}
@media (max-height:780px){
  #keys .keys-key{display:none}
}
/* The wheel: three crops of the plate, made by keys.js, which also sizes and places them: each has to land on the plate's own pixels. */
/* Hard pixels and no layer of its own: a composited layer resamples the rotated dither into a smooth grey disc, so the
   section's one motion would make its art look worse. The plate has hard pixels too, or the wheel would visibly change
   texture on the first and last moved frames. */
#keys .keys-plate{image-rendering:pixelated}
#keys .keys-crop{position:absolute;overflow:hidden;visibility:hidden}
#keys .keys-crop img{position:absolute;max-width:none;image-rendering:pixelated}
html.rm #keys .keys-crop{display:none}

/* Phones and upright tablets: the door centred on top, its bottom edge dissolving, the text below. Only the floor in front
   of the door is needed here, so the same dissolve starts higher, on this plate's own art pixel, and the text moves up. */
@media (max-width:600px),(max-width:900px) and (orientation:portrait){
  #keys{--plate-w:max(148vw,min(82svh,260vw));--copy-w:100%;--art:calc(var(--plate-w) / 1100)}
  #keys .keys-stage{display:block;padding-block:12px 40px}
  #keys .keys-art{position:relative;top:auto;left:calc(50% - var(--plate-w) * .6629)}
  #keys .keys-art::after{content:'';position:absolute;inset:calc(var(--plate-h) * .75) 0 0;background:url('../art/edge-ink.webp') repeat-x 0 0 / calc(512 * var(--art)) calc(80 * var(--art)),linear-gradient(var(--ink),var(--ink)) no-repeat 0 calc(80 * var(--art) - 2px) / 100% 100%;image-rendering:pixelated}
  #keys .keys-copy{margin-top:calc(var(--plate-h) * -.08)}
  #keys .keys-key{--k:min(50vw,260px,21svh);margin:calc(var(--k) * -.2) 0 calc(var(--k) * -.2) calc(var(--k) * -.09)}
  html.js:not(.rm) #keys .keys-spacer{height:100vh}
}
/* The vignette goes on short screens, and without it the heading needs to clear the end of the dissolve itself. */
@media (max-width:600px) and (max-height:640px),(max-width:900px) and (orientation:portrait) and (max-height:640px){
  #keys .keys-copy{margin-top:calc(var(--plate-h) * -.07)}
}

/* Upright tablets: the key and heading on the left, the sentence and the three points on the right, so the whole of it
   stays above the fold for the turn. The sentence lines up with the heading's first line. */
@media (min-width:601px) and (max-width:900px) and (orientation:portrait){
  #keys .keys-copy{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(32px,6vw,56px);align-items:start}
  #keys .keys-copy>*{width:auto}
  #keys .keys-copy>.keys-key{grid-column:1;grid-row:1;width:var(--k)}
  #keys .keys-copy>h2{grid-column:1;grid-row:2}
  #keys .keys-copy>h2+p{grid-column:2;grid-row:1;align-self:end;margin:0 0 14px;max-width:26em}
  #keys .keys-copy>.keys-points{grid-column:2;grid-row:2;margin-top:0}
  /* If the stage is still taller than the screen it pins by its bottom edge: the roof gives way, never the last point. */
  html.js:not(.rm) #keys .keys-stage{top:calc(-1 * var(--over,0px))}
}

/* Phones: the whole stage has to fit one screen, or the points only arrive after the turn has let go. The plate takes the
   height the words leave, the key vignette gives its room to the list, and a narrower plate keeps its right edge on the
   screen's edge instead of centring the door. Anything still over pins by its bottom edge and costs only roof. */
@media (max-width:600px){
  #keys{--plate-w:clamp(112vw,calc((100svh - 470px) * 1.63),190vw)}
  #keys .keys-art{left:max(calc(50% - var(--plate-w) * .6629),calc(100% - var(--plate-w)))}
  #keys .keys-key{display:none}
  #keys .keys-copy{margin-top:calc(var(--plate-h) * -.05)}
  #keys .keys-stage{padding-bottom:28px}
  html.js:not(.rm) #keys .keys-stage{top:calc(-1 * var(--over,0px))}
}

/* #finale. The sticky stage holds the copy in the sky and the plate behind it; the small spacer is the runway. The plate
   is taller than its box by the distance it rises, so it never shows a gap. Room for the strip the next section lays over
   this one's bottom is kept under the actions. */
#finale{--travel:clamp(24px,5svh,72px);--strip:calc(80 * var(--art-px));--flyout:64px}
#finale .finale-stage{position:relative;display:flex;flex-direction:column;min-height:100svh}
@media (min-height:640px){
  html.js:not(.rm) #finale .finale-stage{position:sticky;top:0}
  html.js:not(.rm) #finale .finale-spacer{height:30vh}
}
#finale .finale-copy{position:relative;z-index:1;padding-block:clamp(88px,15svh,176px) calc(var(--flyout) + var(--strip) + 24px)}
/* A section heading, not a second hero: the page has one line at hero size, and it is at the top. The sentence under it
   says what is coming and where, and keeps a little of the ground behind it where the plate's stars pass. */
#finale h2{font-size:min(var(--size-section),13.4vw)}
#finale .finale-lead{max-width:30em;margin-top:clamp(20px,2vw,28px);color:var(--fg-2);text-shadow:0 0 .2em var(--ink),0 0 .45em var(--ink),0 0 .9em rgb(27 43 65 / .7)}
#finale .cta{margin-top:clamp(28px,3vw,40px)}
#finale .finale-art{position:absolute;inset:0;z-index:0;overflow:hidden}
#finale .finale-move{position:absolute;inset:0 0 auto;height:calc(100% + var(--travel))}
#finale .finale-plate{width:100%;height:100%;max-width:none;object-fit:cover;object-position:78% 100%}
#finale .edge-cap{--cap:0px}
@media (orientation:portrait){
  #finale .finale-plate{object-position:93% 100%}
}
/* The copy keeps its width on a tall tablet or monitor, so the plate gives way or the moon lands on the full stop. */
@media (orientation:portrait) and (min-width:701px){
  #finale .finale-plate{object-position:88% 100%}
}
/* A monitor on its side: the moon is level with the buttons, so they stack clear of it. */
@media (max-aspect-ratio:3/5) and (min-width:701px){
  #finale .cta{width:min(100%,380px)}
}
/* Phones: the plate takes what the copy leaves, so the moon and the lit door are clear of the text and the buttons. It
   rises up behind the buttons rather than being cut off under them. The dissolve is set to this plate's own art pixel. */
@media (max-width:700px){
  #finale .finale-copy{padding-bottom:24px}
  #finale .finale-art{position:relative;inset:auto;flex:1 0 calc(var(--flyout) + var(--strip) + 180px);overflow:visible;clip-path:inset(-200px 0 0 0)}
  #finale .edge-cap{--art-px:.62px}
}

/* #questions. */
#questions{padding-block:clamp(72px,9vw,144px) clamp(24px,3vw,48px)}
#questions .questions-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
#questions .questions-art{position:sticky;top:max(24px,calc(50svh - 21vw));margin-top:-3vw}
#questions .questions-art img{width:100%}
#questions h2{margin-bottom:clamp(24px,3vw,40px)}
#questions details+details{border-top:1px solid var(--ink-soft)}
#questions summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding-block:clamp(14px,1.4vw,20px);font-family:var(--font-display);font-optical-sizing:auto;font-size:clamp(22px,1.95vw,30px);font-weight:400;line-height:1.15;letter-spacing:-.015em;cursor:pointer;list-style:none;transition:color var(--hover-out) var(--ease-out)}
#questions summary::-webkit-details-marker{display:none}
#questions summary .icon{width:24px;height:24px;stroke-width:1.46;transition:transform 200ms var(--ease-out)}
#questions details[open] summary .icon{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){
  #questions summary:hover{color:var(--mineral);transition-duration:var(--hover-in)}
}
/* transitions.dev's accordion (recipe 21): the height runs on grid rows, so nothing is measured. Where ::details-content is missing the answer simply appears. */
#questions details::details-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows 250ms var(--ease-drop),content-visibility 250ms allow-discrete}
#questions details[open]::details-content{grid-template-rows:1fr}
#questions .questions-answer{min-height:0;overflow:hidden;opacity:0;filter:blur(2px);transition:opacity 250ms var(--ease-drop),filter 250ms var(--ease-drop)}
#questions details[open] .questions-answer{opacity:1;filter:none}
#questions .questions-answer p{max-width:38em;padding-bottom:clamp(20px,2vw,28px);color:var(--fg-2)}
#questions .questions-answer a{color:var(--fg);white-space:nowrap}
@media (max-width:760px){
  #questions .questions-grid{display:block}
  #questions .questions-art{position:static;width:min(100%,520px);margin:-6vw auto 0}
  #questions h2{margin-top:-6vw}
}
@media (min-width:2400px){
  #questions .questions-grid{gap:160px}
  #questions summary{font-size:clamp(30px,1.25vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  #questions details::details-content,#questions .questions-answer,#questions summary .icon{transition:none}
}