/* Story listing. Metsärinne Wood, dark screen mode always (README: a site uses its brand's screen mode, no switch).
   Layout: one column on a phone (preview, form, sticky share bar); preview sticks beside the form from 860px. */

@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --surface: #0d0c0a; --surface-raised: #14120f; --line: #ede6d821; --line-strong: #ede6d84d;
  --ink: #ede6d8; --ink-2: #b0a695; --ink-3: #8b8273;
  --accent: #cfa764; --accent-hi: #e8cb8f; --on-accent: #17130c; --focus-ring: #cfa764;
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-40: 40px; --space-48: 48px;
  --radius: 2px; --control: 48px; --control-s: 44px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--surface); color: var(--ink); }
body { font: 400 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }

.page {
  max-width: 1120px; margin: 0 auto;
  padding-inline: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px));
  padding-block: calc(env(safe-area-inset-top, 0px) + var(--space-24)) calc(env(safe-area-inset-bottom, 0px) + 140px);
}
.head { display: grid; gap: var(--space-16); padding-bottom: var(--space-24); border-bottom: 1px solid var(--line); }
.head img { width: 220px; height: auto; margin-left: -14px; display: block; }
h1 { margin: 0; font: 400 clamp(2.5rem, 7vw, 3.5rem)/1 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.lead { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.work { display: grid; gap: var(--space-40); padding-top: var(--space-24); }
@media (min-width: 860px) {
  .work { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; gap: var(--space-48); }
  .stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); }
}

/* Preview */
.stage { display: grid; gap: var(--space-16); justify-items: center; min-width: 0; }
.frame { position: relative; height: min(58vh, 620px); aspect-ratio: 9 / 16; max-width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-raised); overflow: hidden; }
#story { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#story:active { cursor: grabbing; }
.badge { position: absolute; left: 10px; top: 10px; padding: 4px 8px; background: #0d0c0ae6; border: 1px solid var(--line-strong); font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-2); pointer-events: none; }
.hint { margin: 0; font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-3); text-align: center; }
.tools { display: grid; gap: var(--space-16); width: 100%; max-width: 380px; }
.row { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; }
.row > * { flex: 1 1 0; }

/* Controls (Metsärinne bundle.css: Button, Eyebrow, Field) */
.mr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--control); padding: 0 var(--space-24); border: 1px solid transparent; border-radius: var(--radius); font: 500 15px/1 var(--font-sans); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.mr-btn--primary { background: var(--accent); color: var(--on-accent); }
.mr-btn--primary:hover { background: var(--accent-hi); }
.mr-btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.mr-btn--ghost:hover { border-color: var(--accent); color: var(--accent-hi); }
.mr-btn--sm { min-height: var(--control-s); padding: 0 var(--space-16); font-size: 14px; }
.mr-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.mr-btn:focus-visible, .linkbtn:focus-visible, .check input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mr-btn[disabled] { opacity: 0.6; cursor: progress; }
.mr-eyebrow { margin: 0; font: 500 12px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

.form { display: grid; gap: var(--space-40); min-width: 0; }
.group { display: grid; gap: var(--space-24); }
.group > .mr-eyebrow { padding-bottom: var(--space-8); border-bottom: 1px solid var(--line); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-24); }
.mr-field { display: grid; align-content: start; gap: var(--space-8); min-width: 0; }
.mr-field__label { font: 500 12px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
/* 16px minimum on every input, or iOS zooms the page on focus */
.mr-field__control { width: 100%; min-height: var(--control-s); padding: var(--space-8) 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: 400 16px/1.5 var(--font-sans); transition: border-color 0.25s; }
.mr-field__control::placeholder { color: var(--ink-3); }
.mr-field__control:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.mr-field__control--select { appearance: none; -webkit-appearance: none; padding-right: var(--space-24); background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.mr-field__control--select option { background: var(--surface-raised); color: var(--ink); }
input[type="range"] { width: 100%; accent-color: var(--accent); min-height: var(--control-s); }

.check { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--control-s); font-size: 15px; color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }

.specs { display: grid; gap: var(--space-8); }
.spec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) auto; gap: var(--space-16); align-items: end; }
.spec .term { font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.spec .val { font-family: var(--font-mono); color: var(--accent); }
.linkbtn { min-height: var(--control-s); padding: 0 2px; border: 0; background: none; color: var(--ink-3); font: 400 14px/1 var(--font-sans); cursor: pointer; }
.linkbtn:hover { color: var(--accent-hi); }
.note { margin: 0; font: 400 12px/1.5 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-3); }
.end { display: grid; gap: var(--space-24); justify-items: start; padding-top: var(--space-24); border-top: 1px solid var(--line); }

/* Share bar */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 12px max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)); background: #0d0c0ae6; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
.bar-in { max-width: 1120px; margin: 0 auto; display: flex; gap: var(--space-16); align-items: center; }
.bar .mr-btn { flex: 1 1 auto; max-width: 420px; }
.bar .status { flex: 1 1 0; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 520px) { .bar-in { flex-direction: column-reverse; align-items: stretch; gap: var(--space-8); } .bar .mr-btn { max-width: none; } .bar .status:empty { display: none; } }

/* Fallback: show the image to press and hold */
.sheet { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: #0d0c0af2; }
.sheet-in { display: grid; gap: var(--space-16); justify-items: center; max-height: 100%; }
.sheet img { max-height: 70vh; width: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); -webkit-touch-callout: default; }
.sheet p { margin: 0; max-width: 34ch; text-align: center; color: var(--ink-2); }
svg.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }