/* Rain — the window, from src/rain.css. The engine needs a piece with a height. */
/* Rain — the window fills the first screen; the picture, the drills and the glass are stacked canvases. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  --deep: #071418; --ink: #eef3f2; --ink-soft: #92a7a5; --glow: #7fd6d0; --red: #d8482e;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --sans: Onest, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--deep); }
html, body { overflow-x: clip; }
body { min-height: 100svh; color: var(--ink); font: 300 17px/1.6 var(--sans); background: var(--deep); }
button { font: inherit; color: inherit; }
.eyebrow { margin: 0 0 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); }
.corners { position: fixed; z-index: 9; top: 12px; left: 12px; display: flex; gap: 8px; white-space: nowrap; }
.corner { padding: 4px 8px; background: var(--deep); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.corner.back:hover, .corner.back:focus-visible, .corner.kit:hover, .corner.kit:focus-visible { color: var(--ink); outline: none; }
.corner.kit span { display: inline-block; transition: transform .25s; }
.corner.kit:hover span { transform: translateY(2px); }
.corner.skins { position: fixed; z-index: 9; top: 12px; right: 12px; display: flex; gap: 8px; align-items: center; }
.corner.skins button { padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; background: transparent; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; }
.corner.skins button:hover, .corner.skins button:focus-visible { color: var(--ink); outline: none; }
.corner.skins button[aria-pressed="true"] { border-color: var(--glow); color: var(--ink); }

/* ---------- the window ---------- */
.piece { position: relative; height: 100svh; min-height: 480px; overflow: hidden; background: var(--deep); touch-action: pan-y; cursor: grab; }
.piece:active { cursor: grabbing; }
.piece > img, .piece > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.piece > img { object-fit: cover; display: none; }
/* without the glass, the two pictures still show and switch */
.piece.flat #glass { display: none; }
.piece.flat[data-skin="photo"] > img { display: block; }
.piece.flat[data-skin="photo"] #drills { visibility: hidden; }
.title { position: absolute; left: clamp(18px, 4vw, 48px); bottom: clamp(20px, 4vh, 44px); z-index: 2; max-width: 520px; padding: 14px 16px 16px; background: rgba(7,20,24,.76); backdrop-filter: blur(6px); pointer-events: none; }
.title h1 { font: 300 clamp(36px, 5vw, 64px)/.95 var(--sans); letter-spacing: -.035em; }
.title .lede { margin-top: 10px; color: #d2dedc; font-size: 15px; text-wrap: pretty; }
.hint { position: absolute; right: clamp(18px, 4vw, 48px); bottom: clamp(20px, 4vh, 44px); z-index: 2; padding: 6px 10px; background: rgba(7,20,24,.76); font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); pointer-events: none; transition: opacity .6s; }
.hint.gone { opacity: 0; }

.after { width: min(100%, 1180px); margin: 0 auto; padding: 56px clamp(18px, 4vw, 48px) 10px; }
.after .lede { max-width: 680px; color: #cfdad8; text-wrap: pretty; }
.colophon { width: min(100%, 1180px); margin: 0 auto; padding: 24px clamp(18px, 4vw, 48px) 60px; }
.colophon p { max-width: 760px; font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }

@media (max-width: 700px) {
  .piece { height: 78svh; min-height: 400px; }
  .title { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  .hint { display: none; }
  .corner.skins { top: 46px; }
  .after { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hint { transition: none; }
  .piece { cursor: default; }
  .corner.kit span { transition: none; }
}

.sheet { width: min(100%, 1180px); margin: 0 auto; padding: 40px clamp(18px, 4vw, 48px) 60px; display: grid; gap: 14px; }
.sheet h1 { font: 300 clamp(28px, 4vw, 48px)/.95 var(--sans); letter-spacing: -.035em; }
.sheet p { max-width: 640px; color: #cfdad8; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 6px; }
.swatch { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; align-items: center; padding: 8px; border: 1px solid #1c3c40; }
.swatch i { display: block; width: 34px; height: 34px; background: var(--value); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.swatch b { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; }
.swatch span { display: block; font: 400 10px/1.3 var(--mono); color: var(--ink-soft); }
.specimen { display: grid; gap: 18px; }
.specimen .display { font: 300 clamp(36px, 5vw, 64px)/.95 var(--sans); letter-spacing: -.035em; }
.specimen .body { font: 300 17px/1.6 var(--sans); max-width: 560px; }
.specimen .label { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); }
.specimen .caption { font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }
a { color: var(--ink); }