/* Self-hosted so the site makes no third-party font requests. Built by tools/build-web-fonts.py; licences sit
   beside the files in assets/fonts/. Averia is the unmodified app file because its licence reserves the name. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-semibold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("fonts/inter-bold.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-display: swap; src: url("fonts/fraunces-regular.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-display: swap; src: url("fonts/fraunces-medium.woff2") format("woff2"); }
@font-face { font-family: "Averia Sans Libre"; font-weight: 400; font-display: swap; src: url("fonts/averia-sans-libre-regular.ttf") format("truetype"); }
@font-face { font-family: "Averia Sans Libre"; font-weight: 700; font-display: swap; src: url("fonts/averia-sans-libre-bold.ttf") format("truetype"); }

:root {
  color-scheme: light;
  --room: #e9e29b;
  --room-raised: #bbca6f;
  --surface: #f2cfbb;
  --surface-soft: #f1b4af;
  --paper: #fff9e8;
  --ink: #27270f;
  --ink-soft: #6a452f;
  --primary: #8e9546;
  --accent: #f28892;
  --border: 2px solid var(--ink);
  --shadow: 6px 7px 0 var(--ink);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--room);
  color: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  background: var(--room);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  background:
    linear-gradient(rgba(39, 39, 15, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 39, 15, 0.035) 1px, transparent 1px),
    var(--room);
  background-size: 28px 28px;
  color: var(--ink);
  line-height: 1.6;
}

a { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 4px solid #fff9e8;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px var(--ink);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border: var(--border);
  border-radius: 10px;
  background: var(--paper);
  font-weight: 800;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }
.skip-link:not(:focus) { clip-path: inset(100%); }

.site-header,
main,
footer {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

main,
main > section,
.hero-copy { min-width: 0; }

.site-header > *,
main > *,
main > section > *,
.step-grid > *,
.journey-panels > *,
.fold-lab > *,
.fold-demo > *,
.about-card > *,
.note-links > *,
.note-links a > *,
.download-card > *,
footer > * { min-width: 0; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: "Trebuchet MS", ui-rounded, sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.brand img {
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
}

nav,
footer div {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.94rem;
  font-weight: 750;
}

nav a,
footer a,
.text-link {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.hero {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
  min-height: calc(100vh - 88px);
  padding: 64px 0 92px;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8vw;
  bottom: 12%;
  width: clamp(170px, 28vw, 350px);
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 43% 57% 62% 38% / 48% 37% 63% 52%;
  background: var(--surface-soft);
  opacity: 0.72;
  transform: rotate(13deg);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin-top: 0;
  font-family: "Trebuchet MS", ui-rounded, sans-serif;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

h1 {
  max-width: 700px;
  margin-bottom: 24px;
  font-size: clamp(3.4rem, 8vw, 6.7rem);
}

h1 > span { display: block; }

h2 {
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 5vw, 4rem);
}

h3 {
  margin-bottom: 12px;
  font-size: 1.35rem;
}

.lede {
  max-width: 660px;
  margin: 0 0 30px;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: var(--border);
  border-radius: 999px;
  box-shadow: 4px 5px 0 var(--ink);
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}


.primary { background: var(--primary); }
.secondary { background: var(--surface); }

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 18px;
  padding: 0;
  list-style: none;
}

.trust-list li {
  padding: 5px 11px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 249, 232, 0.55);
  font-size: 0.82rem;
  font-weight: 750;
}

.trust-list li::before {
  content: "✓";
  margin-right: 6px;
  font-weight: 900;
}

.beta-note {
  max-width: 650px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.beta-note a { font-weight: 800; text-underline-offset: 3px; }

.paper-story {
  position: relative;
  width: min(100%, 420px);
  justify-self: center;
  margin: 0;
  padding: 36px 28px 28px;
  border: 3px solid var(--ink);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 11px 13px 0 var(--ink);
  transform: rotate(1.5deg);
}

.paper-story::after {
  content: "✶";
  position: absolute;
  right: -34px;
  top: -58px;
  color: var(--ink-soft);
  font-size: 4.2rem;
  line-height: 1;
  transform: rotate(13deg);
}

.paper-story-sheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  aspect-ratio: 1.42;
  border: 2px solid var(--ink);
  background: #fffdf5;
}

.paper-story-sheet span {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(39, 39, 15, 0.52);
  color: var(--ink-soft);
  font-family: Georgia, serif;
  font-size: clamp(1.1rem, 4vw, 1.75rem);
  font-weight: 700;
}

.paper-story-sheet span:nth-child(-n + 4) { transform: rotate(180deg); }
.paper-story figcaption { margin: 22px 0 0; text-align: center; }

.gallery-section {
  position: relative;
  z-index: 0;
  padding: 100px 0 120px;
}

.gallery-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 52px;
  bottom: 58px;
  left: 50%;
  width: 100vw;
  border-block: 2px solid var(--ink);
  background: rgba(242, 207, 187, 0.72);
  clip-path: polygon(0 3%, 8% 0, 17% 2%, 28% 0, 39% 3%, 51% 1%, 63% 2%, 74% 0, 86% 3%, 100% 1%, 100% 97%, 89% 100%, 77% 98%, 65% 100%, 52% 97%, 39% 99%, 27% 97%, 15% 100%, 0 98%);
  transform: translateX(-50%);
}

.section-heading h2 {
  position: relative;
  display: inline;
}

.section-heading h2::after {
  content: "";
  display: block;
  width: min(76%, 380px);
  height: 9px;
  margin: 12px 0 18px;
  background: var(--accent);
  clip-path: polygon(0 35%, 23% 10%, 45% 45%, 69% 16%, 100% 38%, 98% 78%, 72% 66%, 48% 93%, 24% 62%, 1% 84%);
  transform: rotate(-1deg);
}
.section-heading > p:last-child { max-width: 700px; color: var(--ink-soft); }

.journey-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 38px);
  align-items: start;
}

.journey-panel {
  position: relative;
  margin: 0;
  padding: 14px 14px 20px;
  border: var(--border);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.journey-tape {
  position: absolute;
  z-index: 2;
  top: -15px;
  left: 50%;
  width: 82px;
  height: 28px;
  background: rgba(246, 178, 44, 0.72);
  transform: translateX(-50%) rotate(-2deg);
}

.journey-panel:nth-child(2) .journey-tape {
  left: 17%;
  background: rgba(242, 136, 146, 0.62);
  transform: rotate(3deg);
}

.journey-panel:nth-child(3) .journey-tape {
  left: auto;
  right: 12%;
  background: rgba(187, 202, 111, 0.8);
  transform: rotate(-4deg);
}

.journey-panel:nth-child(2) { transform: translateY(26px) rotate(-0.8deg); }
.journey-panel:nth-child(3) { transform: rotate(0.8deg); }

.journey-visual { position: relative; }

.mockup-frame {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--room);
}

.mockup-frame img { display: block; width: 100%; height: auto; }
.journey-panel figcaption { padding: 18px 8px 2px; color: var(--ink-soft); }
.journey-panel figcaption strong { display: block; margin-bottom: 4px; color: var(--ink); }

.tape {
  position: absolute;
  z-index: 1;
  top: -18px;
  left: 50%;
  width: 112px;
  height: 36px;
  background: rgba(246, 178, 44, 0.72);
  transform: translateX(-50%) rotate(-2deg);
}

.steps {
  position: relative;
  padding: 100px 0 120px;
}

.steps::after {
  content: "";
  position: absolute;
  right: 1%;
  bottom: 52px;
  width: 120px;
  height: 44px;
  border-block: 3px solid var(--ink-soft);
  background: repeating-linear-gradient(-18deg, transparent 0 10px, rgba(106, 69, 47, 0.24) 10px 13px);
  transform: rotate(-5deg);
}

.section-heading {
  max-width: 730px;
  margin-bottom: 44px;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-grid li {
  padding: 28px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.step-grid li:nth-child(2) {
  background: var(--surface);
  transform: translateY(18px) rotate(-1deg);
}

.step-grid li:nth-child(3) { background: var(--room-raised); }

.step-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  font-weight: 900;
}

.step-grid p,
.privacy-card p,
.download-card p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.privacy-card,
.about-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  margin-bottom: 90px;
  padding: clamp(28px, 6vw, 64px);
  border: 3px solid var(--ink);
  border-radius: 34px;
  background: var(--surface-soft);
  box-shadow: 10px 12px 0 var(--ink);
}

.about-card::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -24px;
  width: 112px;
  height: 43px;
  background: rgba(246, 178, 44, 0.68);
  transform: rotate(-3deg);
}

.privacy-mark,
.about-mark {
  display: grid;
  width: clamp(110px, 17vw, 180px);
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 38% 62% 42% 58%;
  background: var(--primary);
  box-shadow: 6px 7px 0 var(--ink);
  font-family: "Trebuchet MS", ui-rounded, sans-serif;
  font-size: clamp(4rem, 9vw, 7.5rem);
  font-weight: 950;
  line-height: 1;
  transform: rotate(-5deg);
}

.privacy-card p,
.about-card p { max-width: 680px; }

.about-card h3 {
  margin: 28px 0 8px;
  font-family: "Trebuchet MS", ui-rounded, sans-serif;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

/* A paper instruction deck. The complete ordered guide is the no-JS fallback. */
.fold-guide {
  padding: 68px clamp(20px, 4vw, 48px);
  margin-bottom: 110px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px 28px 12px 20px;
  box-shadow: 8px 10px 0 var(--ink);
}
.fold-key { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .88rem; color: var(--ink-soft); }
.fold-instructions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding: 0;
  margin: 40px 0;
  list-style: none;
}
.fold-card { flex: 1 1 360px; max-width: 700px; min-width: 0; padding: 24px; border: 2px solid var(--ink); border-radius: 5px 20px 8px 14px; background: #fffdf5; box-shadow: 4px 5px 0 var(--ink); }
.fold-card h3 { display: flex; align-items: baseline; gap: 10px; font-size: 1.35rem; line-height: 1.2; }
.fold-number { flex: 0 0 auto; font-family: Georgia, serif; font-style: italic; color: var(--ink-soft); }
.fold-card svg { display: block; width: 100%; height: 260px; stroke-linejoin: round; stroke-linecap: round; }
.fold-card .sheet { fill: #fffdf5; stroke: var(--ink); stroke-width: 2.5; }
.fold-card .moving-paper { fill: var(--surface); }
.fold-card .crease-line { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 5; }
.fold-card .fold-edge { fill: none; stroke: var(--ink); stroke-width: 5; }
.fold-card .direction { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.fold-card .cut-mark { fill: none; stroke: #a42b40; stroke-width: 4; }
.fold-card .stop-dot { fill: #a42b40; }
.fold-card svg text { fill: var(--ink); font: italic 14px Georgia, serif; }
.fold-card p { margin: 12px 0 18px; color: var(--ink-soft); }
.fold-card p span { display: block; }
.fold-card:last-child { flex: 0 1 700px; background: var(--room-raised); text-align: center; }
.fold-card:last-child h3 { justify-content: center; }
.fold-focused .fold-instructions { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 840px; margin-inline: auto; }
.fold-focused .fold-card { grid-area: 1 / 1; width: 100%; max-width: none; display: grid; grid-template-rows: minmax(3rem, auto) 260px 1fr; }
.fold-focused .fold-inactive { visibility: hidden; pointer-events: none; }
.fold-focused .fold-card p { min-height: 4.8em; }
.fold-controls, .fold-navigation, .fold-playback { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; }
.fold-controls { margin-top: 28px; }
.fold-picker { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 750; max-width: 100%; }
.fold-picker select { font: inherit; color: var(--ink); background: var(--paper); border: var(--border); padding: 10px; min-height: 48px; max-width: 100%; border-radius: 8px; }
.fold-controls button, .fold-playback button { font: inherit; font-weight: 750; cursor: pointer; }
.fold-playback { max-width: 840px; margin-inline: auto; }
.fold-playback button { min-width: 190px; }
.fold-playback p { flex-basis: 100%; min-height: 3.2em; margin: 4px 0 0; color: var(--ink-soft); text-align: center; }
.button:disabled { cursor: default; box-shadow: none; border-style: dashed; background: var(--paper); color: var(--ink-soft); }
[hidden] { display: none !important; }
select:focus-visible,
input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.fold-finish { font-family: Georgia, serif; font-size: clamp(1.4rem, 3vw, 2rem); font-style: italic; text-align: center; }
.button.quiet { background: var(--paper); color: var(--ink); }
.direction-button { font: inherit; font-weight: 750; font-size: .9rem; cursor: pointer; }
.direction-button[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .button, .note-links a { transition: translate 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
  nav a, .text-link { transition: text-underline-offset 180ms ease; }
  nav a:hover, .text-link:hover { text-underline-offset: 7px; }
  @media (hover: hover) and (pointer: fine) {
    .button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 4px 7px 0 var(--ink); }
    .note-links a:hover { translate: 0 -3px; }
  }
  .button:not(:disabled):active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); }
}
.button:focus-visible, .note-links a:focus-visible { box-shadow: 0 0 0 7px var(--ink); }
@media (max-width: 600px) {
  .fold-instructions { gap: 28px; }
  .fold-card { padding: 16px; }
  .fold-card svg { height: 210px; margin-inline: auto; }
  .fold-focused .fold-card { grid-template-rows: minmax(3rem, auto) 210px 1fr; }
  .fold-navigation { width: 100%; }
  .fold-picker { order: -1; width: 100%; }
  .fold-navigation .button { flex: 1 1 6rem; width: auto; min-width: min(100%, 9rem); }
}

.project-notes { padding: 12px 0 110px; }

.note-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.note-links a {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.note-links a:nth-child(2) { background: var(--room-raised); transform: rotate(-0.6deg); }
.note-links strong { font-family: "Trebuchet MS", ui-rounded, sans-serif; font-size: 1.75rem; }
.note-links span { color: var(--ink-soft); }

.text-link {
  display: inline-block;
  margin-top: 22px;
  font-weight: 850;
}

.download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 110px;
  padding: clamp(28px, 5vw, 54px);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.download-card h2 { font-size: clamp(2rem, 4vw, 3.4rem); }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px 0 44px;
  border-top: 2px solid var(--ink);
  font-size: 0.9rem;
}

footer p { margin: 0; }

.policy-layout {
  width: min(900px, calc(100% - 40px));
  padding: 70px 0 110px;
}

.policy {
  position: relative;
  padding: clamp(26px, 6vw, 70px);
  border: 3px solid var(--ink);
  border-radius: 30px;
  background: var(--paper);
  box-shadow: 10px 12px 0 var(--ink);
}

.policy::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 108px;
  height: 35px;
  background: rgba(246, 178, 44, 0.72);
  transform: translateX(-50%) rotate(-2deg);
}

.policy h1 { font-size: clamp(3rem, 8vw, 5.4rem); }
.policy h2 { margin-top: 54px; font-size: clamp(1.7rem, 4vw, 2.3rem); }
.policy p,
.policy li { color: var(--ink-soft); }
.policy strong,
.policy th { color: var(--ink); }
.policy-intro { max-width: 670px; font-size: 1.18rem; }
.policy-date { font-size: 0.9rem; font-weight: 750; }

.policy-summary,
.notice {
  padding: 22px 24px;
  border: var(--border);
  border-radius: 16px;
  background: var(--room-raised);
  box-shadow: 4px 5px 0 var(--ink);
}

.policy-summary h2 { font-size: 1.4rem; }
.policy-summary p:last-child { margin-bottom: 0; }
.policy li + li { margin-top: 10px; }
.policy a { overflow-wrap: anywhere; font-weight: 750; text-underline-offset: 3px; }

.policy blockquote {
  margin: 24px 0;
  padding: 18px 22px;
  border: var(--border);
  border-radius: 16px;
  background: var(--room-raised);
  box-shadow: 4px 5px 0 var(--ink);
}

.policy blockquote p { margin: 0; }

.policy hr {
  margin: 54px 0;
  border: 0;
  border-top: 2px dashed var(--ink);
}

.table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border: 2px solid var(--ink);
  border-radius: 14px;
}

table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  background: #fffdf5;
  font-size: 0.9rem;
}

.policy table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

th,
td {
  padding: 14px;
  border-bottom: 1px solid rgba(39, 39, 15, 0.35);
  text-align: left;
  vertical-align: top;
}

thead { background: var(--surface); }
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }
th span { color: var(--ink-soft); font-size: 0.78rem; font-weight: 650; }
code { font-size: 0.9em; }
.notice { margin-top: 24px; color: var(--ink-soft); }

.release-entry {
  position: relative;
  margin-top: 54px;
  padding: 30px;
  border: var(--border);
  border-radius: 18px;
  background: #fffdf5;
  box-shadow: 4px 5px 0 var(--ink);
}

.release-entry:nth-of-type(even) { background: var(--surface); }
.release-entry:nth-of-type(odd) { transform: rotate(0.25deg); }
.release-entry:nth-of-type(even) { transform: rotate(-0.25deg); }
.release-entry h2 { margin: 0 0 7px; font-size: clamp(1.7rem, 4vw, 2.35rem); }
.release-entry ul { margin-bottom: 0; }
.release-channel {
  display: inline-block;
  margin: 0 0 14px;
  padding: 3px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.release-date { margin: 0 0 8px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.release-theme { margin: 0 0 18px; color: var(--ink); font-family: Georgia, serif; font-size: 1.08rem; font-weight: 700; }

.roadmap-layout { width: min(1100px, calc(100% - 40px)); }
.roadmap-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 50px; }
.roadmap-group {
  padding: 24px;
  border: var(--border);
  border-radius: 18px;
  background: #fffdf5;
  box-shadow: 4px 5px 0 var(--ink);
}
.roadmap-group.exploring { background: var(--surface); }
.roadmap-group.uncommitted { background: var(--room-raised); }
.roadmap-group:nth-child(1) { transform: rotate(-0.35deg); }
.roadmap-group:nth-child(2) { transform: translateY(16px) rotate(0.45deg); }
.roadmap-group:nth-child(3) { transform: rotate(-0.2deg); }
.roadmap-group h2 { margin-top: 0; font-size: 1.6rem; }
.roadmap-group ul { margin: 0; padding-left: 1.2rem; }
.roadmap-group li + li { margin-top: 12px; }
.status-label {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 9px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .hero-copy { text-align: center; }
  .lede,
  .beta-note { margin-inline: auto; }
  .actions,
  .trust-list { justify-content: center; }
  .step-grid { grid-template-columns: minmax(0, 1fr); }
  .journey-panels { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
  .journey-panel:nth-child(2),
  .journey-panel:nth-child(3) { transform: none; }
  .demo-zine-grid { margin-top: 30px; }
  .demo-screen { min-height: 560px; }
  .step-grid li:nth-child(2) { transform: none; }
  .privacy-card,
  .about-card { grid-template-columns: 1fr; text-align: center; }
  .privacy-mark,
  .about-mark { margin-inline: auto; }
  .download-card { align-items: flex-start; flex-direction: column; }
  .roadmap-groups { grid-template-columns: minmax(0, 1fr); }
  .roadmap-group:nth-child(1),
  .roadmap-group:nth-child(2),
  .roadmap-group:nth-child(3) { transform: none; }
}

@media (max-width: 560px) {
  .site-header {
    align-items: center;
    flex-direction: column;
    gap: 14px;
    padding: 20px 0 8px;
  }
  .site-header nav {
    width: 100%;
    justify-content: center;
    gap: 10px 16px;
    font-size: 0.82rem;
  }
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hero { padding-top: 44px; }
  .hero-copy {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    justify-self: center;
  }
  h1 { max-width: 100%; font-size: clamp(3rem, 15vw, 3.75rem); }
  .lede,
  .beta-note { max-width: 100%; }
  .actions { flex-direction: column; }
  .button { width: 100%; }
  .steps { padding-top: 80px; }
  .privacy-card { box-shadow: 6px 8px 0 var(--ink); }
  .about-card { box-shadow: 6px 8px 0 var(--ink); }
  .note-links { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; }
  .policy-layout { padding-top: 42px; }
  .policy { box-shadow: 6px 8px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
  .direction-button { display: none; }
}

/* The public homepage is a small paper desk. State never depends on motion. */
.home-page .hero { min-height: min(780px, calc(100svh - 88px)); padding-block: 60px 88px; }
.home-page .hero::before { width: 240px; bottom: 8%; right: -2%; opacity: .5; }
.home-page h2 { text-wrap: balance; }
.home-page h3 { line-height: 1.15; }
.home-page .lede { margin-bottom: 12px; }
.margin-note { margin: 0 0 30px; color: var(--ink-soft); font: italic 1.15rem/1.45 Georgia, serif; }
.home-page .paper-story { border-radius: 5px 12px 6px 8px; box-shadow: 5px 6px 0 var(--paper), 7px 8px 0 var(--ink), 12px 14px 0 rgba(39,39,15,.18); }
.paper-note { border-top: 1px dashed var(--ink-soft); margin-top: 18px; text-align: center; }
.paper-note summary, .footer-secret summary { cursor: pointer; padding: 12px 4px; min-height: 48px; font-weight: 750; text-underline-offset: 4px; }
.paper-note summary { font-size: .9rem; }
.paper-note summary:hover, .footer-secret summary:hover { text-decoration: underline; }
.paper-note p { margin: 0 0 4px; color: var(--ink-soft); font: italic 1.05rem/1.5 Georgia, serif; }
summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.home-page .journey-panel { border-radius: 8px; box-shadow: 3px 4px 0 var(--ink); }
.home-page .mockup-frame { border-radius: 12px; }
.home-page .step-grid li { border-radius: 6px 18px 8px 6px; box-shadow: 4px 5px 0 var(--ink); }
.home-page .steps::after { display: none; }
.home-page .steps { padding-bottom: 80px; }
.page-lab { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 64px); margin-top: 76px; padding: clamp(24px, 4vw, 44px); border: var(--border); border-radius: 6px; background: var(--paper); box-shadow: 5px 6px 0 var(--ink); }
.page-lab h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.page-lab-copy > p:not(.eyebrow) { color: var(--ink-soft); }
.page-lab .button { font: inherit; font-weight: 750; cursor: pointer; }
.page-lab .button[aria-pressed="true"] { background: var(--room-raised); }
.lab-note { font-size: .9rem; min-height: 6.4em; margin-bottom: 0; }
.page-order-demo { min-width: 0; }
.page-order-sheet { position: relative; width: 100%; aspect-ratio: 1.42; background: #fffdf5; outline: 2px solid var(--ink); }
.page-order-sheet > span { position: absolute; left: 0; top: 0; width: 25%; height: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--ink-soft); background: #fffdf5; transform: translate(calc(var(--read-x) * 100%), calc(var(--read-y) * 100%)); }
.page-order-sheet > span:first-child { background: var(--surface-soft); }
.page-order-sheet > span:last-child { background: var(--room-raised); }
.page-order-sheet b { font: bold clamp(1.3rem, 4vw, 2.5rem)/1.2 Georgia, serif; }
.page-order-sheet small { font-size: .7rem; }
.page-order-sheet.is-print > span { transform: translate(calc(var(--print-x) * 100%), calc(var(--print-y) * 100%)) rotate(var(--turn)); }
.sheet-caption { color: var(--ink-soft); font: italic .95rem/1.5 Georgia, serif; margin-bottom: 0; }
.fold-position { max-width: 840px; margin: 30px auto 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 18px; font-size: .9rem; }
.fold-position > span { font-weight: 800; }
.fold-position-track { height: 8px; border: 1px solid var(--ink); background: var(--surface); overflow: hidden; }
.fold-position-track > span { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(var(--position, .1)); transform-origin: left; }
.fold-position p { grid-column: 1 / -1; margin: 0; min-height: 3.2em; color: var(--ink-soft); }
.maker-aside { font: italic clamp(1.35rem, 3vw, 1.9rem)/1.4 Georgia, serif; }
.home-page .about-card { border-radius: 8px 24px 10px 6px; }
.home-page .about-mark { align-self: start; }
.home-page .download-card { align-items: start; }
.home-page .download-card > .button { flex: 0 0 auto; }
.idea-slip { margin-top: 30px; padding: 22px 0 0; border-top: 1px dashed var(--ink-soft); }
.idea-slip .eyebrow { color: var(--ink-soft); }
.idea-slip #zine-idea { min-height: 3.2em; margin-top: 8px; font: italic 1.15rem/1.6 Georgia, serif; }
.text-button { border: 0; border-radius: 3px; background: transparent; color: var(--ink); padding: 10px 0; min-height: 48px; text-align: left; text-decoration: underline; text-underline-offset: 4px; font: inherit; font-weight: 750; cursor: pointer; }

/* Story order: what, why, what you can make, how, what is different, try it, where it is going. */
.lede-small { max-width: 620px; margin: 0 0 18px; color: var(--ink-soft); }
.why-paper, .make-section, .different { padding: 90px 0 20px; }
.why-grid, .different-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.why-grid li, .different-card { padding: 26px; border: var(--border); border-radius: 6px 18px 8px 6px; background: var(--paper); box-shadow: 4px 5px 0 var(--ink); }
.why-grid li:nth-child(2), .different-card:nth-child(2) { background: var(--surface); transform: rotate(-0.6deg); }
.why-grid li:nth-child(3), .different-card:nth-child(3) { background: var(--room-raised); }
.why-grid p, .different-card li { color: var(--ink-soft); }
.why-grid p { margin-bottom: 0; }
.different-card ul { margin: 0; padding-left: 1.1rem; }
.different-card li + li { margin-top: 10px; }
.make-desk { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: clamp(24px, 5vw, 56px); }
.make-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.make-list li { padding: 10px 16px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fffdf5; box-shadow: 2px 3px 0 var(--ink); font: italic 1.05rem/1.4 Georgia, serif; }
.make-list li:nth-child(3n + 2) { transform: rotate(-1deg); background: var(--surface); }
.make-list li:nth-child(3n) { transform: rotate(0.8deg); }
.make-desk .idea-slip { margin: 0; padding: 22px 24px 12px; border: 1.5px dashed var(--ink); background: var(--paper); transform: rotate(1deg); }
.press-status { padding: 10px 0 20px; }
.press-status h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.press-status table { min-width: 0; }
.press-status tbody th { font-family: "Trebuchet MS", ui-rounded, sans-serif; font-size: 1.1rem; white-space: nowrap; }
.press-status-note { color: var(--ink-soft); }
.status-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
/* One status per line: a chip never starts in the middle of the previous status's sentence. */
.status-line { display: block; }
.status-line + .status-line { margin-top: 8px; }
.status-chip.available { background: var(--primary); }
.status-chip.development { background: #f6b22c; }
.status-chip.planned { background: var(--surface-soft); }
.download-direct { font-size: 0.92rem; color: var(--ink-soft); }
.download-direct a { font-weight: 800; text-underline-offset: 3px; }
.whats-new { margin: 20px 0 16px; padding: 14px 18px; border: 1.5px dashed var(--ink); border-radius: 12px; background: transparent; }
.whats-new h3 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.25; }
.whats-new ul { margin: 0 0 10px; padding-left: 1.2em; color: var(--ink-soft); }
.whats-new li + li { margin-top: 4px; }
.whats-new p { font-size: 0.92rem; }
@media (max-width: 820px) {
  .why-grid, .different-grid, .make-desk { grid-template-columns: minmax(0, 1fr); }
  .why-grid li:nth-child(2), .different-card:nth-child(2), .make-desk .idea-slip { transform: none; }
}
@media (max-width: 640px) {
  .press-status table, .press-status tbody, .press-status tr, .press-status th, .press-status td { display: block; }
  .press-status thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .press-status tr { border-bottom: 1px solid rgba(39, 39, 15, 0.35); }
  .press-status tbody tr:last-child { border-bottom: 0; }
  .press-status td { border: 0; padding-top: 0; }
  .press-status td:nth-child(2)::before { content: "Today: "; font-weight: 800; color: var(--ink); }
  .press-status td:nth-child(3)::before { content: "Direction (not a promise): "; font-weight: 800; color: var(--ink); }
}
footer .footer-colophon { display: block; flex: 1 1 44%; font-weight: 400; }
.footer-secret { margin-top: 8px; }
.footer-secret p { max-width: 32ch; font: italic 1rem/1.5 Georgia, serif; }
.home-page footer nav { flex: 1 1 50%; }
/* Every page: a finger-sized target for the header and footer links, not only on the homepage. */
.site-header nav a, footer nav a { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: no-preference) {
  .home-page .paper-story { transform: perspective(900px) rotateX(var(--paper-x, 0deg)) rotateY(var(--paper-y, 0deg)) rotate(1.5deg); transition: transform 180ms ease-out; }
  .page-order-sheet > span { transition: transform 480ms cubic-bezier(.2,.7,.2,1); }
  .fold-position-track > span { transition: transform 200ms ease; }
  @media (hover: hover) and (pointer: fine) {
    .home-page .journey-visual { transition: translate 180ms ease; }
    .home-page .journey-visual:hover { translate: 0 -5px; }
  }
}
@media (max-width: 820px) {
  .home-page .hero { min-height: auto; }
  .home-page .paper-story { transform: none; }
  .page-lab { grid-template-columns: minmax(0, 1fr); }
  .page-order-demo { width: min(100%, 420px); justify-self: center; }
  .lab-note { min-height: 0; }
  .home-page .about-card { text-align: left; }
  .home-page .about-mark { margin-inline: 0; width: 90px; font-size: 3.6rem; }
}
@media (max-width: 560px) {
  .home-page .brand span { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .home-page .hero { padding-top: 32px; }
  .home-page .hero::before { right: 0; width: 42vw; transform: rotate(6deg); }
  .home-page .paper-story { padding-inline: 20px; }
  .home-page .paper-story::after { right: 0; font-size: 3rem; top: -42px; }
  .home-page .gallery-section::before { transform: translateX(-50%); }
  .page-lab { margin-top: 44px; padding: 20px; }
  .home-page footer nav { flex-basis: auto; }
  .home-page .download-card > .button { width: 100%; }
}

@media print {
  .site-header,
  footer,
  .skip-link { display: none; }
  body { background: white; }
  .policy-layout { width: 100%; padding: 0; }
  .policy { border: 0; box-shadow: none; }
  .fold-controls, .fold-playback { display: none !important; }
  .fold-position, #page-order-toggle, #another-idea { display: none !important; }
  .fold-focused .fold-instructions { display: block; }
  .fold-focused .fold-inactive { visibility: visible; }
  .fold-card { break-inside: avoid; margin: 20px auto; box-shadow: none; }
}

/* Interactive desk: a faithful, lightweight translation of the frozen V2.1 app mockups. */
.desk-demo {
  --demo-phone-width: 390px;
  --app-paper: #fff6e8;
  --app-paper-edge: #efdfc6;
  --app-room: #e9e29b;
  --app-room-raised: #bbca6f;
  --app-surface: #f2cfbb;
  --app-surface-soft: #f1b4af;
  --app-ink: #27270f;
  --app-ink-soft: #6a452f;
  --app-primary: #8e9546;
  --app-accent: #f28892;
  --app-shadow: 4px 4px 0 var(--app-ink);
  --app-voice: "Averia Sans Libre", "Fraunces", Georgia, serif;
  --app-serif: "Fraunces", Georgia, serif;
  --app-sans: "Inter", system-ui, sans-serif;
  --app-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  color: var(--app-ink);
  font-family: var(--app-sans);
  /* No Fraunces italic is bundled with the app, so the demo's few italic notes lean the upright face. */
  font-synthesis: style;
  position: relative;
  width: 100%;
}
.z-material-paper { background-color: var(--app-paper, var(--paper)); color: var(--app-ink, var(--ink)); }
.z-material-desk { background-color: var(--app-room, var(--room)); }
.z-material-tape { background-color: rgba(246,178,44,.58); mix-blend-mode: multiply; }
.z-material-stamp { border: 1.5px solid rgba(39,39,15,.22); letter-spacing: .04em; text-transform: uppercase; }
.z-material-label { border: 1.5px dashed rgba(39,39,15,.2); }
.z-material-proof { border: 1.5px solid var(--app-ink, var(--ink)); box-shadow: var(--app-shadow, 4px 4px 0 var(--ink)); }
.z-material-tray { background: var(--app-surface, var(--surface)); border-top: 2px solid var(--app-ink, var(--ink)); }
.z-material-annotation { color: var(--app-ink-soft, var(--ink-soft)); font-family: Georgia, serif; font-style: italic; }
.z-material-pin { width: 12px; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); box-shadow: 1px 2px 0 var(--ink); }

/* Phase 2 shared workbench story. These are deliberately small material
   primitives, not a second component framework. */
.workbench-step { position: relative; overflow: hidden; }
.workbench-visual {
  position: relative;
  height: 190px;
  margin: -28px -28px 24px;
  overflow: hidden;
  border-bottom: var(--border);
  background-image:
    linear-gradient(rgba(39,39,15,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,39,15,.045) 1px, transparent 1px);
  background-size: 18px 18px;
}
.workbench-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 70% 12%, rgba(255,255,255,.42), transparent 34%);
}
.workbench-photo,
.workbench-note,
.workbench-page,
.workbench-sheet,
.workbench-book {
  position: absolute;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 5px 0 rgba(39,39,15,.82);
}
.workbench-photo { left: 30px; top: 35px; width: 112px; height: 126px; transform: rotate(-5deg); background: linear-gradient(145deg, #68894c 0 53%, #f0b32c 54% 68%, #f8dfb0 69%); }
.workbench-note { right: 26px; top: 53px; min-width: 106px; padding: 24px 12px 18px; transform: rotate(4deg); font-family: Georgia, serif; font-style: italic; text-align: center; line-height: 1.2; }
.workbench-tape { position: absolute; left: 61px; top: 23px; width: 56px; height: 18px; background: rgba(246,178,44,.65); transform: rotate(2deg); z-index: 2; }
.workbench-flower { position: absolute; right: 119px; bottom: 17px; z-index: 2; color: var(--primary); font-size: 2.5rem; transform: rotate(-12deg); }
.workbench-page { inset: 22px 58px 20px; transform: rotate(-1deg); }
.workbench-page i { position: absolute; left: 18px; right: 18px; top: 22px; height: 70px; background: linear-gradient(140deg, var(--surface-soft), var(--accent)); border: 1.5px solid var(--ink); }
.workbench-page b { position: absolute; left: 18px; bottom: 11px; font-size: .84rem; }
.workbench-page em { position: absolute; right: 16px; bottom: 12px; color: var(--primary); font-size: 2rem; }
.workbench-pin { position: absolute; top: 13px; left: calc(50% - 6px); z-index: 2; }
.workbench-sheet { left: 24px; top: 29px; display: grid; grid-template-columns: repeat(4, 32px); grid-template-rows: repeat(2, 45px); transform: rotate(-4deg); }
.workbench-sheet i { display: grid; place-items: center; border: 1px dashed rgba(39,39,15,.45); font: italic .72rem Georgia, serif; }
.workbench-sheet i:nth-child(-n+4) { transform: rotate(180deg); }
.workbench-book { right: 31px; top: 48px; width: 87px; height: 111px; padding: 29px 10px; transform: rotate(5deg); background: var(--surface-soft); font-family: Georgia, serif; text-align: center; line-height: 1.05; }
.workbench-cut { position: absolute; left: 31px; bottom: 14px; padding: 3px 8px; border: 1.5px dashed var(--ink-soft); background: var(--paper); font-size: .68rem; font-weight: 800; transform: rotate(2deg); }

/* One physical folding desk. The complete card list remains the no-JS and print fallback. */
.fold-focused { position: relative; overflow: hidden; }
.fold-focused::before {
  content: "folding desk";
  position: absolute;
  right: 32px;
  top: 28px;
  padding: 4px 9px;
  border: 1.5px dashed var(--ink-soft);
  color: var(--ink-soft);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(3deg);
}
.fold-focused .fold-instructions {
  position: relative;
  max-width: 860px;
  min-height: 520px;
  padding: clamp(18px, 4vw, 46px);
  border: var(--border);
  border-radius: 8px;
  background:
    linear-gradient(rgba(39,39,15,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,39,15,.035) 1px, transparent 1px),
    #f4e8cc;
  background-size: 22px 22px;
  box-shadow: inset 0 0 0 8px rgba(255,249,232,.42), 5px 6px 0 var(--ink);
}
.fold-focused .fold-card {
  align-self: stretch;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 4px 18px 7px 11px;
  background: var(--paper);
  box-shadow: 5px 7px 0 rgba(39,39,15,.82);
}
.fold-focused .fold-card::before { content: ""; position: absolute; top: -10px; left: calc(50% - 35px); width: 70px; height: 20px; background: rgba(246,178,44,.58); transform: rotate(-1deg); }
.fold-focused .fold-card { position: relative; }
.fold-focused .fold-card svg[role="button"] { cursor: pointer; border-radius: 12px; }
.fold-focused .fold-card svg[role="button"]:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }
.fold-navigation { width: min(100%, 860px); }
.fold-picker {
  flex: 1 1 280px;
  align-items: stretch;
  padding: 7px 12px 9px;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 5px 11px 6px 8px;
  background: rgba(255,249,232,.74);
  box-shadow: 2px 3px 0 rgba(39,39,15,.18);
}
.fold-picker span { align-self: center; margin-top: -17px; padding: 3px 9px; border: 1px solid var(--ink-soft); background: var(--paper); font-size: .75rem; letter-spacing: .03em; text-align: center; transform: rotate(-1deg); }
.fold-picker input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.fold-picker input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(39,39,15,.2) 31px 32px),
    linear-gradient(to right,var(--primary) 0 var(--fold-progress,0%),var(--paper) var(--fold-progress,0%) 100%);
}
.fold-picker input[type="range"]::-moz-range-track {
  height: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(39,39,15,.2) 31px 32px),
    linear-gradient(to right,var(--primary) 0 var(--fold-progress,0%),var(--paper) var(--fold-progress,0%) 100%);
}
.fold-picker input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 20px;
  margin-top: -7px;
  appearance: none;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(90deg,var(--accent) 0 68%,var(--surface-soft) 68%);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(2deg);
}
.fold-picker input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(90deg,var(--accent) 0 68%,var(--surface-soft) 68%);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(2deg);
}
.fold-card .book-page { fill: #fffdf5; stroke: var(--ink); stroke-width: 2; }
.fold-card .book-page-edge { fill: #e9dfc6; stroke: var(--ink); stroke-width: 1.8; }
.fold-card .book-cover { fill: var(--surface-soft); stroke: var(--ink); stroke-width: 2.5; }
.fold-card .book-spine { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 3 3; }
.fold-card .book-mark { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fold-card .book-title-label rect { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1; }
.fold-card .book-title-label text { font-size: 11px; }
.fold-position { max-width: 860px; margin: 12px auto 0; text-align: center; }
.fold-focused .fold-position > #fold-position-label { display: none; }
.fold-position-track { display: none; }
.fold-position p { margin: 4px 0 0; color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  .workbench-step .workbench-photo,
  .workbench-step .workbench-note,
  .workbench-step .workbench-page,
  .workbench-step .workbench-sheet,
  .workbench-step .workbench-book { transition: transform 180ms ease, translate 180ms ease; }
  @media (hover: hover) and (pointer: fine) {
    .workbench-step:hover .workbench-photo { transform: rotate(-7deg) translateY(-3px); }
    .workbench-step:hover .workbench-note { transform: rotate(2deg) translateY(-4px); }
    .workbench-step:hover .workbench-page { transform: rotate(1deg) translateY(-3px); }
    .workbench-step:hover .workbench-sheet { transform: rotate(-6deg) translateY(-3px); }
    .workbench-step:hover .workbench-book { transform: rotate(3deg) translateY(-4px); }
  }
  .fold-focused .fold-active svg { animation: z-fold-state 260ms cubic-bezier(.2,.75,.25,1) both; transform-origin: center; }
}

@keyframes z-fold-state {
  from { opacity: .35; transform: translateY(-5px) rotate(-.6deg) scale(.975); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .workbench-visual { height: 170px; margin-inline: -28px; }
  .fold-focused::before { display: none; }
  .fold-focused .fold-instructions { min-height: 470px; padding: 14px; }
  .fold-focused .fold-card { grid-template-rows: minmax(3rem, auto) 210px 1fr; }
  .fold-picker { flex-basis: 100%; }
}

/* Folding studio: one persistent sheet on a small printmaker's workbench. */
.fold-studio { margin-top: 22px; }
.fold-focused .fold-instructions { display: none; }
.fold-studio .fold-controls { margin-top: 0; }
.fold-stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 980px);
  min-height: 570px;
  margin: 24px auto 28px;
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vw, 72px);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 7px 22px 10px 15px;
  background:
    radial-gradient(circle at 15% 18%, rgba(242,136,146,.12) 0 58px, transparent 59px),
    linear-gradient(rgba(39,39,15,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,39,15,.045) 1px, transparent 1px),
    #e8ddb8;
  background-size: auto, 22px 22px, 22px 22px, auto;
  box-shadow: 7px 9px 0 var(--ink);
}
.fold-stage::before,
.fold-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.fold-stage::before {
  inset: 18px;
  border: 1px solid rgba(39,39,15,.18);
}
.fold-stage::after {
  right: -38px;
  bottom: 46px;
  width: 138px;
  height: 92px;
  border: 2px solid var(--ink);
  background: var(--surface-soft);
  transform: rotate(8deg);
  box-shadow: 4px 5px 0 rgba(39,39,15,.55);
}
.fold-stage__paper {
  position: relative;
  width: min(690px, 100%);
  min-height: 410px;
  display: grid;
  grid-template: auto auto minmax(220px, 1fr) auto / 1fr;
  align-items: center;
  padding: clamp(22px, 4vw, 42px);
  border: 2px solid var(--ink);
  border-radius: 4px 17px 7px 10px;
  background:
    radial-gradient(rgba(39,39,15,.035) .7px, transparent .8px),
    #fffaf0;
  background-size: 7px 7px;
  box-shadow: 7px 8px 0 rgba(39,39,15,.84);
  transform: rotate(-.25deg);
}
.fold-stage__paper::before {
  content: "";
  position: absolute;
  top: -11px;
  left: calc(50% - 39px);
  width: 78px;
  height: 22px;
  background: rgba(246,178,44,.62);
  transform: rotate(1.5deg);
}
.fold-stage__step {
  position: absolute;
  top: 18px;
  right: 20px;
  margin: 0;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fold-stage__paper h3 {
  grid-column: 1;
  margin: 0 auto;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  text-align: center;
}
.fold-stage__paper h3::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin: 9px auto 0;
  background: var(--accent);
  clip-path: polygon(0 35%, 18% 15%, 41% 42%, 67% 20%, 100% 42%, 98% 72%, 70% 55%, 42% 78%, 17% 55%, 2% 70%);
}
#fold-live-picture {
  grid-column: 1;
  display: block;
  width: min(100%, 470px);
  height: 250px;
  margin: 4px auto;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#fold-live-picture[role="button"] { cursor: pointer; border-radius: 12px; }
#fold-live-picture[role="button"]:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
#fold-live-picture .sheet { fill: #fffdf5; stroke: var(--ink); stroke-width: 2.5; }
#fold-live-picture .moving-paper { fill: var(--surface); }
#fold-live-picture .crease-line { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 5; }
#fold-live-picture .fold-edge { fill: none; stroke: var(--ink); stroke-width: 5; }
#fold-live-picture .direction { fill: none; stroke: var(--ink); stroke-width: 2.5; }
#fold-live-picture .cut-mark { fill: none; stroke: #a42b40; stroke-width: 4; }
#fold-live-picture .stop-dot { fill: #a42b40; }
#fold-live-picture text { fill: var(--ink); font: italic 14px Georgia, serif; }
#fold-live-picture .book-shadow { fill: rgba(39,39,15,.15); stroke: none; }
#fold-live-picture .book-page { fill: #fffdf5; stroke: var(--ink); stroke-width: 2; }
#fold-live-picture .book-page-edge { fill: #e9dfc6; stroke: var(--ink); stroke-width: 1.8; }
#fold-live-picture .book-cover { fill: var(--surface-soft); stroke: var(--ink); stroke-width: 2.5; }
#fold-live-picture .book-spine { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 3 3; }
#fold-live-picture .book-page-lines { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; }
#fold-live-picture .book-mark { fill: none; stroke: var(--primary); stroke-width: 2.5; }
#fold-live-picture .book-title-label rect { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1; }
#fold-live-picture .book-title-label text { font-size: 11px; }
#fold-live-picture .book-page-number { font: 700 8px system-ui, sans-serif; }
.fold-stage__copy { grid-column: 1; margin: 0; color: var(--ink-soft); text-align: center; line-height: 1.55; }
.fold-stage__tape {
  position: absolute;
  z-index: 3;
  left: clamp(26px, 7vw, 82px);
  top: 54px;
  width: 86px;
  height: 24px;
  background: rgba(242,136,146,.62);
  transform: rotate(-7deg);
}
.fold-stage__proof {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 5vw, 64px);
  top: 4px;
  padding: 10px 14px;
  border: 1.5px dashed var(--ink-soft);
  background: var(--paper);
  font: italic .78rem/1.2 Georgia, serif;
  text-align: center;
  transform: rotate(2deg);
}
.fold-stage__proof strong { font-family: system-ui, sans-serif; font-style: normal; }
.fold-stage__pencil {
  position: absolute;
  z-index: 2;
  left: 30px;
  bottom: 52px;
  width: 150px;
  height: 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px 3px 3px 999px;
  background: linear-gradient(90deg, #e3a92b 0 82%, #e98b93 82% 92%, #f4dfbd 92%);
  transform: rotate(-34deg);
  transform-origin: left center;
}
.fold-focused::before { content: "folding desk · no rush"; }
.fold-studio .fold-playback { margin-top: 0; }
.fold-studio .fold-finish { max-width: 840px; margin-inline: auto; }

@media (prefers-reduced-motion: no-preference) {
  .fold-stage[data-step] .fold-stage__paper { animation: z-set-down 220ms cubic-bezier(.2,.75,.25,1) both; }
  #fold-live-picture { transition: opacity 160ms ease; }
}
@keyframes z-set-down {
  from { opacity: .55; transform: translateY(-5px) rotate(-.7deg) scale(.99); }
  to { opacity: 1; transform: rotate(-.25deg); }
}

@media (max-width: 600px) {
  .fold-stage { min-height: 500px; margin-inline: 0; padding: 34px 14px 28px; border-radius: 6px 16px 8px 11px; box-shadow: 5px 7px 0 var(--ink); }
  .fold-stage::before { inset: 10px; }
  .fold-stage::after,
  .fold-stage__proof,
  .fold-stage__pencil,
  .fold-stage__tape { display: none; }
  .fold-stage__paper { min-height: 430px; padding: 24px 18px; grid-template-rows: auto minmax(210px, 1fr) auto; }
  .fold-stage__step { top: 15px; right: 15px; }
  .fold-stage__paper h3 { padding-inline: 42px; }
  #fold-live-picture { height: 225px; }
  .fold-stage__copy { font-size: .96rem; }
}

@media print {
  .fold-studio { display: none !important; }
  .fold-focused .fold-instructions { display: block; }
}
.desk-journey.is-enhanced {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.desk-demo[hidden],
.journey-fallback[hidden],
.demo-screen[hidden] { display: none !important; }
.demo-topline {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(100%, var(--demo-phone-width));
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin: 0 auto 12px;
}
.demo-topline strong { font: 700 1.05rem/1 var(--app-voice); }
.demo-topline > p { max-width: 260px; margin: 0; color: var(--ink-soft); font-size: .78rem; text-align: right; }
.demo-screen {
  position: relative;
  display: flex;
  z-index: 2;
  width: min(100%, var(--demo-phone-width));
  min-height: 0;
  aspect-ratio: 390 / 812;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--app-room-raised);
  border-radius: 34px;
  background: var(--app-room);
  box-shadow: 0 24px 48px -22px rgba(39,39,15,.45), 0 3px 8px -4px rgba(39,39,15,.3);
  isolation: isolate;
}
.demo-desk-props { display: none; }
.demo-screen::after {
  content: "";
  position: absolute;
  z-index: 80;
  inset: 0;
  background-image: var(--app-grain);
  background-size: 120px 120px;
  mix-blend-mode: soft-light;
  opacity: .42;
  pointer-events: none;
}
.demo-screen button { color: inherit; font-family: var(--app-sans); cursor: pointer; }
.demo-screen button:disabled { opacity: .38; cursor: default; }
.demo-screen button:active:not(:disabled) { transform: translate(2px,2px); }
.demo-screen h3:focus { outline: none; }
.desk-demo button:focus-visible { outline: 2px solid var(--app-ink); outline-offset: 3px; box-shadow: none; }

/* Shelf */
.demo-shelf { display: block; }
.demo-shelf-scroll { position: absolute; inset: 0; overflow: auto; padding: 24px 16px 148px; }
.demo-shelf-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.demo-shelf-header h3 { margin: 0; font: 700 2rem/1.05 var(--app-voice); letter-spacing: -.005em; }
.demo-swipe { display: block; width: 124px; height: 8px; margin-top: 3px; border-top: 3px solid var(--app-ink); border-radius: 50%; transform: rotate(-1deg); }
.demo-count { padding: 4px 12px; border-radius: 999px; background: var(--app-room); font-size: .78rem; font-weight: 600; transform: rotate(1.5deg); }
.demo-zine-grid { display: grid; max-width: none; margin: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
.demo-zine-card {
  display: flex;
  min-height: 0;
  padding: 0;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  text-align: left;
  transform: none !important;
}
.demo-zine-card:hover { translate: 0; }
.demo-cover {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 3 / 4;
  place-items: center;
  border: 1.5px solid var(--app-ink);
  border-radius: 4px 14px 14px 4px;
  background: var(--app-paper);
  box-shadow: var(--app-shadow);
  color: rgba(255,246,232,.92);
  transform: rotate(-1deg);
}
.demo-zine-card:nth-child(2n) .demo-cover { transform: rotate(1deg); }
.demo-zine-card:nth-child(3n) .demo-cover { transform: rotate(-.5deg); }
.demo-zine-card.market .demo-cover {
  background:
    linear-gradient(90deg,transparent 0 12%,rgba(255,246,232,.18) 12% 13%,transparent 13% 100%),
    linear-gradient(0deg,transparent 0 18%,rgba(255,246,232,.12) 18% 19%,transparent 19% 100%),
    #3e5e3a;
}
.demo-zine-card.letters .demo-cover {
  background:
    linear-gradient(rgba(106,69,47,.12) 1px,transparent 1px) 0 34% / 100% 18px,
    #fff6e8;
  color: #6a452f;
}
.demo-zine-card.riso .demo-cover {
  background:
    radial-gradient(circle at 36% 43%,transparent 0 19%,rgba(255,246,232,.88) 20% 23%,transparent 24%),
    radial-gradient(circle at 64% 59%,transparent 0 19%,rgba(255,246,232,.88) 20% 23%,transparent 24%),
    radial-gradient(rgba(39,39,15,.15) .7px,transparent .8px) 0 0 / 5px 5px,
    #e27f89;
}
.demo-zine-card.garden .demo-cover {
  background:
    radial-gradient(circle at 78% 18%,#e7b53c 0 8%,transparent 8.5%),
    linear-gradient(158deg,transparent 0 61%,rgba(142,149,70,.2) 61% 66%,transparent 66%),
    #fff0cf;
  color: #6a452f;
}
.demo-zine-card.letters .demo-cover::after { content: "POST"; position: absolute; top: 15px; right: 13px; padding: 4px; border: 1px dashed currentColor; font: 700 .48rem/1 var(--app-sans); letter-spacing: .08em; transform: rotate(5deg); }
.demo-zine-card.market .demo-cover::after { content: "07:12"; position: absolute; right: 11px; bottom: 12px; font: 700 .48rem/1 var(--app-sans); letter-spacing: .08em; opacity: .78; }
.demo-cover svg { width: 44%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-cover i { position: absolute; right: -7px; bottom: -8px; padding: 2px 8px; border: 1.5px solid #27270f; border-radius: 999px; background: #fff6e8; box-shadow: 2px 2px 0 #27270f; color: #6a452f; font: 700 .59rem/1.2 var(--app-sans); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-3deg); }
.demo-spine { position: absolute; top: 7px; bottom: 7px; left: 6px; width: 1px; background: rgba(0,0,0,.18); }
.demo-tape { position: absolute; z-index: 2; top: -10px; left: 50%; width: 56px; height: 18px; background: rgba(246,178,44,.58); transform: translateX(-50%) rotate(-4deg); }
.demo-zine-card:nth-child(2n) .demo-tape { left: 38%; transform: translateX(-50%) rotate(5deg); }
.demo-zine-caption { display: block; position: relative; padding: 9px 30px 0 2px; }
.demo-zine-caption::after { content: "\2022\A\2022\A\2022"; position: absolute; top: 8px; right: 6px; white-space: pre; font-size: .5rem; line-height: .48rem; }
.demo-zine-caption strong { display: block; font: 700 1rem/1.15 var(--app-voice); }
.demo-zine-caption small { display: block; margin-top: 2px; color: var(--app-ink-soft); font: 500 .74rem/1.2 var(--app-sans); }
.demo-shelf-dock { position: absolute; z-index: 40; right: 0; bottom: 0; left: 0; display: flex; padding: 18px 16px 24px; align-items: center; flex-direction: column; gap: 10px; background: linear-gradient(to top,var(--app-room) 62%,rgba(233,226,155,0)); }
.demo-shelf-dock > div { display: flex; gap: 34px; color: var(--app-ink-soft); font-size: .82rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(106,69,47,.28); text-underline-offset: 4px; }
.demo-primary { border: 1.5px solid var(--app-ink); border-radius: 999px; background: var(--app-primary); color: var(--app-ink); font-weight: 700; box-shadow: var(--app-shadow), 0 0 0 5px var(--app-room); }
.demo-make-button { min-height: 52px; padding: 14px 24px; font-size: 1rem; }
.demo-make-button span { margin-right: 7px; font: 700 1.15rem/1 var(--app-voice); }

/* Bench */
.demo-bench-status { position: relative; z-index: 2; display: flex; min-height: 58px; padding: 16px 16px 4px; align-items: center; justify-content: space-between; color: var(--app-ink-soft); font-size: .7rem; font-weight: 600; }
.demo-bench-back { display: grid; width: 44px; height: 44px; margin: -5px; padding: 0; place-items: center; border: 0; border-radius: 999px; background: transparent; }
.demo-bench-back svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-clock { margin-right: auto; }
.demo-saved { display: inline-flex; padding: 4px 9px; align-items: center; gap: 4px; border: 1.5px solid rgba(39,39,15,.16); border-radius: 999px; background: var(--app-room-raised); color: var(--app-ink); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-1deg); }
.demo-saved svg { width: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.demo-workspace { display: grid; min-height: 0; padding: 12px 24px; flex: 1; place-items: center; }
.demo-page {
  position: relative;
  display: block;
  width: min(100%,266px);
  aspect-ratio: 3 / 4;
  padding: 18px;
  overflow: hidden;
  border: 1.5px solid #27270f;
  border-radius: 4px 14px 14px 4px;
  background: var(--app-paper);
  box-shadow: var(--app-shadow);
  color: #27270f;
}
.demo-page::before { content: ""; position: absolute; z-index: 0; inset: 0; background-image: var(--app-grain); background-size: 92px; mix-blend-mode: multiply; opacity: .055; pointer-events: none; }
.demo-page[data-zine="market"] { background-color: #fff3d7; }
.demo-page[data-zine="garden"] { background-color: #fff6e8; }
.demo-page[data-zine="riso"] { background-color: #fff0df; }
.demo-page[data-zine="letters"] { background: repeating-linear-gradient(0deg,transparent 0 22px,rgba(106,69,47,.08) 22px 23px),#fff6e8; }
.demo-page[data-zine="blank"] { background: radial-gradient(rgba(106,69,47,.13) .65px,transparent .75px) 0 0 / 9px 9px,#fff6e8; }
.demo-composed-item { position: absolute; z-index: 1; left: var(--item-x); top: var(--item-y); width: var(--item-w); transform: rotate(var(--item-rotate)); transform-origin: center; }
.demo-page-text { max-width: none; margin: 0; color: #6a452f; font: 400 .79rem/1.45 var(--app-serif); text-align: left; overflow-wrap: anywhere; }
.demo-page-text.is-heading { color: #27270f; font: 700 1.2rem/1.08 var(--app-voice); }
.demo-page-text.is-body { padding: 5px 7px; background: color-mix(in srgb,var(--app-paper) 76%,transparent); }
.demo-page-text.is-layered { padding: 6px 8px; border: 1px solid rgba(39,39,15,.38); border-radius: 3px; background: color-mix(in srgb,var(--app-paper) 94%,transparent); box-shadow: 2px 3px 0 rgba(39,39,15,.14); }
.demo-page-photo { height: var(--item-h); min-height: 0; border: 1.5px solid #27270f; border-radius: 8px; background: #f1b4af; box-shadow: 3px 3px 0 rgba(39,39,15,.14); }
.demo-page-photo.is-layered { border-radius: 3px 11px 6px 4px; box-shadow: 4px 5px 0 rgba(39,39,15,.16); }
.demo-page-photo.is-layered::before { content: ""; position: absolute; z-index: 3; top: -7px; left: calc(50% - 20px); width: 40px; height: 12px; background: rgba(246,178,44,.62); transform: rotate(-2deg); }
.demo-page-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--app-grain); background-size: 78px; mix-blend-mode: soft-light; opacity: .42; }
.demo-page-photo[data-photo="flowers"] { background: radial-gradient(circle at 25% 60%,#e7b53c 0 5%,#fff6e8 5.5% 8%,transparent 8.5%),radial-gradient(circle at 62% 35%,#e27f89 0 7%,#fff6e8 7.5% 10%,transparent 10.5%),radial-gradient(circle at 73% 72%,#f28892 0 6%,#fff6e8 6.5% 9%,transparent 9.5%),linear-gradient(145deg,#bbca6f,#3e5e3a); }
.demo-page-photo[data-photo="tomatoes"] { background: radial-gradient(circle at 23% 45%,#b0503f 0 14%,transparent 14.5%),radial-gradient(circle at 54% 62%,#e27f89 0 16%,transparent 16.5%),radial-gradient(circle at 78% 35%,#d19a3c 0 13%,transparent 13.5%),linear-gradient(25deg,#bbca6f 0 17%,#f2cfbb 17% 100%); }
.demo-page-photo[data-photo="shadows"] { background: linear-gradient(120deg,transparent 0 42%,rgba(39,39,15,.46) 42% 51%,transparent 51%),linear-gradient(62deg,#f2cfbb 0 45%,#e9e29b 45%); }
.demo-page-photo[data-photo="pink-ink"] { background: linear-gradient(7deg,transparent 0 17%,rgba(226,127,137,.83) 17% 74%,transparent 74%),radial-gradient(rgba(39,39,15,.17) .7px,transparent .8px) 0 0 / 5px 5px,#fff6e8; }
.demo-page-photo[data-photo="green-ink"] { background: linear-gradient(-6deg,transparent 0 20%,rgba(62,94,58,.82) 20% 78%,transparent 78%),radial-gradient(rgba(39,39,15,.17) .7px,transparent .8px) 0 0 / 5px 5px,#fff6e8; }
.demo-page[data-zine="market"] .demo-page-photo::before { content: "$2 / bunch"; position: absolute; z-index: 2; right: -5px; bottom: 7px; padding: 3px 6px; border: 1px solid #27270f; background: #fff6e8; color: #6a452f; font: 700 .48rem/1 var(--app-sans); letter-spacing: .04em; transform: rotate(-3deg); }
.demo-page[data-zine="market"] .demo-page-art { stroke: #b0503f; }
.demo-page[data-zine="letters"] .demo-page-text.is-body { padding-left: 0; background: transparent; font-style: italic; }
.demo-page[data-zine="letters"] .demo-page-photo { padding: 7px 7px 18px; border-radius: 2px; background-clip: content-box; box-shadow: 3px 4px 0 rgba(39,39,15,.17); }
.demo-page[data-zine="letters"] .demo-page-art { stroke: #6a452f; }
.demo-page[data-zine="riso"] .demo-page-photo { border-color: #27270f; box-shadow: -4px 2px 0 rgba(226,127,137,.48),4px -2px 0 rgba(62,94,58,.42); }
.demo-page[data-zine="riso"] .demo-page-art { stroke: #e27f89; stroke-width: 2.2; filter: drop-shadow(2px 1px 0 rgba(62,94,58,.7)); }
.demo-page[data-zine="garden"] .demo-page-art { stroke: #3e5e3a; }
.demo-page[data-zine="garden"] .demo-page-text.is-body { border-left: 2px solid rgba(142,149,70,.55); }
.demo-page-art { height: var(--item-h); margin: 0; fill: none; stroke: #8e9546; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-page[data-page="1"] .demo-page-text.is-heading { font-size: 1.42rem; text-align: center; }
.demo-empty-page { position: absolute; top: 50%; left: 50%; width: min(76%,190px); margin: 0; color: #6a452f; font: italic .9rem/1.45 var(--app-serif); text-align: center; transform: translate(-50%,-50%) rotate(-1deg); }
.demo-page-number { position: absolute; z-index: 2; right: 9px; bottom: 6px; color: #6a452f; font: 700 .6rem/1 var(--app-sans); }
.demo-nav-row { display: flex; min-height: 50px; padding: 8px 12px 4px; align-items: center; gap: 8px; background: var(--app-room); }
.demo-grid-mark { display: grid; width: 38px; height: 38px; padding: 10px; flex: none; grid-template-columns: 1fr 1fr; gap: 3px; border: 1.5px solid var(--app-ink); border-radius: 8px; background: var(--app-surface); box-shadow: 2px 2px 0 var(--app-ink); }
.demo-grid-mark i { border: 1px solid currentColor; border-radius: 1px; }
.demo-page-nav { display: flex; min-width: 0; padding: 0 4px 3px 0; overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap; gap: 4px; }
.demo-page-nav { scrollbar-width: none; }
.demo-page-nav::-webkit-scrollbar { display: none; }
.demo-page-nav button { position: relative; width: 35px; min-width: 35px; min-height: 44px; padding: 0; border: 1.5px solid var(--app-ink); border-radius: 4px; background: var(--app-paper); color: transparent; }
.demo-page-nav button[data-has-content="true"]::after { content: ""; position: absolute; inset: 7px 6px; border-top: 5px solid var(--app-surface-soft); border-bottom: 2px solid var(--app-ink-soft); opacity: .75; }
.demo-page-nav button[aria-selected="true"] { background: var(--app-paper); box-shadow: 0 0 0 3px var(--app-accent); transform: none; }
.demo-tool-row { display: flex; min-height: 70px; max-width: none; margin: 0; padding: 8px 16px 16px; align-items: center; gap: 8px; background: var(--app-room); }
.demo-tool-row button { display: grid; width: 44px; height: 44px; min-height: 44px; padding: 0; place-items: center; flex: none; border: 1.5px solid var(--app-ink); border-radius: 999px; background: var(--app-surface); box-shadow: 2px 2px 0 var(--app-ink); }
.demo-tool-row button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.demo-tool-row .demo-add { display: flex; width: auto; min-width: 0; height: 48px; margin: 0 2px; flex: 1; gap: 5px; border-width: 2px; border-radius: 17px; background: var(--app-surface-soft); box-shadow: 4px 5px 0 var(--app-ink); font: 700 .9rem/1 var(--app-voice); white-space: nowrap; }
.demo-tool-row .demo-add span { min-width: 0; white-space: nowrap; }
.demo-tool-row .demo-add svg { width: 18px; flex: none; }
.demo-tool-row .demo-add:hover { background: color-mix(in srgb,var(--app-surface-soft) 82%,var(--app-paper)); }
.demo-tool-row .demo-add:active { transform: translate(3px,3px); box-shadow: 1px 2px 0 var(--app-ink); }

/* Proof */
.demo-proof-header { display: flex; min-height: 68px; padding: 16px 12px 8px; align-items: center; justify-content: space-between; gap: 8px; }
.demo-proof-header button,
.demo-fold-mark { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1.5px solid var(--app-ink); border-radius: 999px; background: var(--app-surface); box-shadow: 2px 2px 0 var(--app-ink); }
.demo-proof-header svg,
.demo-fold-mark svg,
.demo-page-arrow svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.demo-proof-count { padding: 4px 12px; border: 1.5px dashed rgba(39,39,15,.16); border-radius: 999px; background: var(--app-surface-soft); color: var(--app-ink-soft); font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; transform: rotate(-1.5deg); }
.demo-proof-stage { position: relative; display: grid; max-width: none; min-height: 0; margin: 0; padding: 4px 24px 12px; flex: 1; grid-template-columns: 1fr; place-items: center; }
.demo-proof-page { width: min(100%,244px); transform: rotate(-.9deg); box-shadow: var(--app-shadow), 7px 0 0 -2px var(--app-paper-edge); }
.demo-page-arrow { position: absolute; z-index: 4; top: 50%; display: grid; width: 44px; height: 72px; padding: 0; place-items: center; border: 0; background: transparent; color: var(--app-primary) !important; box-shadow: none !important; transform: translateY(-50%); }
.demo-page-arrow.previous { left: 5px; }
.demo-page-arrow.next { right: 5px; }
.demo-page-arrow:active:not(:disabled) { transform: translate(2px,calc(-50% + 2px)); }
.demo-export-card { position: relative; display: block; max-width: none; margin: 0 12px 12px; padding: 12px 12px 16px; border: 1.5px solid var(--app-ink); border-radius: 22px; background: var(--app-surface); box-shadow: 4px -4px 0 var(--app-ink); }
.demo-band-tape { position: absolute; top: -11px; left: 50%; width: 74px; height: 20px; background: rgba(246,178,44,.58); transform: translateX(-50%) rotate(-2.5deg); }
.demo-ready-row { display: flex; padding: 2px 2px 12px; align-items: center; gap: 12px; border-bottom: 1.5px dashed rgba(39,39,15,.16); }
.demo-export-card .demo-ready-tick { display: grid; width: 30px; height: 30px; place-items: center; flex: none; border-radius: 999px; background: var(--app-primary); box-shadow: 2px 2px 0 var(--app-ink); transform: rotate(-6deg); }
.demo-ready-tick svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-ready-row > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.demo-ready-row strong { font: 700 1.02rem/1.15 var(--app-voice); }
.demo-ready-row strong:focus { outline: none; }
.demo-ready-row small { color: var(--app-ink-soft); font-size: .72rem; font-weight: 500; }
.demo-ready-row i { color: var(--app-ink-soft); font: 400 1.4rem/1 var(--app-sans); }
.demo-export-actions { display: flex; margin-top: 12px; gap: 8px; }
.demo-export-actions button { display: flex; min-height: 54px; padding: 9px 14px; align-items: center; justify-content: center; gap: 7px; border: 1.5px solid var(--app-ink); border-radius: 999px; background: var(--app-surface); box-shadow: var(--app-shadow); font-weight: 600; }
.demo-export-actions .demo-primary { flex: 1; flex-direction: column; gap: 2px; }
.demo-export-actions button > span { display: flex; align-items: center; gap: 7px; }
.demo-export-actions svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.demo-export-actions small { font-size: .66rem; font-weight: 500; }
.demo-save-note { margin: 10px 3px 0; color: var(--app-ink-soft); font-size: .72rem; line-height: 1.35; }

/* Add sheet */
.demo-add-dialog { position: absolute; z-index: 90; inset: auto 0 0; width: 100%; max-width: none; max-height: 68%; margin: 0; padding: 0; overflow: hidden auto; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 28px 28px 0 0; color: var(--app-ink); font-family: var(--app-sans); box-shadow: 0 -7px 0 rgba(39,39,15,.09),0 -22px 44px -24px rgba(39,39,15,.48); }
.demo-dialog-paper { padding: 0 16px 18px; background: var(--app-surface); }
.demo-dialog-grip { display: block; width: 44px; height: 5px; margin: 10px auto 8px; border-radius: 999px; background: var(--app-primary); opacity: .58; }
.demo-tray-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.demo-tray-heading h3 { margin: 2px 0 0; font: 700 1.2rem/1.1 var(--app-voice); }
.demo-stamp { margin: 0; color: var(--app-ink-soft); font: 700 .6rem/1 var(--app-sans); letter-spacing: .12em; text-transform: uppercase; }
.demo-tray-close { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; flex: none; border: 1.5px solid var(--app-ink); border-radius: 999px; background: var(--app-paper); box-shadow: 2px 2px 0 var(--app-ink); }
.demo-tray-close svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.demo-add-choices { display: flex; margin: 0 0 10px; flex-direction: column; gap: 8px; }
.demo-add-choices button { display: flex; min-height: 62px; padding: 9px 11px; align-items: center; gap: 11px; border: 1.5px solid var(--app-ink); border-radius: 12px; background: var(--app-paper); box-shadow: 3px 3px 0 var(--app-ink); color: var(--app-ink); text-align: left; }
.demo-add-choices button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--app-ink); }
.demo-add-choices button > span:first-child { display: grid; width: 40px; height: 40px; margin: 0; place-items: center; flex: none; border: 1.5px solid var(--app-ink); border-radius: 8px; background: var(--app-surface-soft); font: 700 1rem/1 var(--app-voice); }
.demo-add-choices button:nth-child(2) > span:first-child { background: var(--app-room-raised); }
.demo-add-choices button:nth-child(3) > span:first-child { background: var(--app-room); }
.demo-add-choices button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo-add-choices button > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.demo-add-choices strong { font: 700 1rem/1.1 var(--app-voice); }
.demo-add-choices small { color: var(--app-ink-soft); font-size: .73rem; }
.demo-tray-note { margin: 0 4px; color: var(--app-ink-soft); font: italic .72rem/1.35 var(--app-serif); }
.demo-bench.is-tray-open .demo-page { filter: saturate(.82) brightness(.98); }

@media (min-width: 900px) {
  .gallery-section:has(.desk-journey.is-enhanced) {
    display: grid;
    grid-template-columns: minmax(300px,.82fr) minmax(500px,1.18fr);
    align-items: start;
    column-gap: clamp(42px,6vw,82px);
  }
  .gallery-section:has(.desk-journey.is-enhanced) > .section-heading {
    position: sticky;
    top: 112px;
    margin: clamp(90px,15vh,150px) 0 0;
  }
  .desk-journey.is-enhanced {
    min-height: 760px;
  }
  .desk-demo {
    --demo-phone-width: 390px;
    min-height: 760px;
    padding: 34px clamp(54px,7vw,92px) 42px;
    border: 1.5px solid rgba(39,39,15,.2);
    background:
      linear-gradient(90deg,rgba(106,69,47,.055) 1px,transparent 1px) 0 0 / 28px 28px,
      linear-gradient(rgba(106,69,47,.055) 1px,transparent 1px) 0 0 / 28px 28px,
      rgba(255,246,232,.44);
    box-shadow: 8px 10px 0 rgba(39,39,15,.16);
    clip-path: polygon(.8% 1.1%,99.2% 0,100% 98.7%,98.7% 100%,1% 99.2%,0 2.2%);
  }
  .demo-desk-props { position: absolute; z-index: 1; inset: 0; display: block; overflow: hidden; pointer-events: none; }
  .demo-prop-note { position: absolute; top: 12%; left: 1.5%; display: flex; width: 112px; min-height: 94px; padding: 22px 12px 12px; align-items: center; flex-direction: column; border: 1.5px solid var(--app-ink); background: #fff6e8; box-shadow: 4px 4px 0 rgba(39,39,15,.7); color: var(--app-ink-soft); transform: rotate(-5deg); }
  .demo-prop-note::before { content: ""; position: absolute; top: -9px; left: 31px; width: 50px; height: 18px; background: rgba(246,178,44,.6); transform: rotate(3deg); }
  .demo-prop-note b { color: var(--app-ink); font: 700 1.08rem/1 var(--app-voice); }
  .demo-prop-note small { margin-top: 6px; font: italic .74rem/1.2 var(--app-serif); }
  .demo-prop-swatch { position: absolute; right: 3%; bottom: 18%; width: 92px; height: 124px; border: 1.5px solid var(--app-ink); background: linear-gradient(138deg,transparent 0 47%,rgba(255,246,232,.65) 47% 54%,transparent 54%),#e27f89; box-shadow: 4px 4px 0 rgba(39,39,15,.7); transform: rotate(7deg); }
  .demo-prop-swatch::before { content: "INK TEST"; position: absolute; right: 8px; bottom: 9px; color: #fff6e8; font: 700 .55rem/1 var(--app-sans); letter-spacing: .08em; writing-mode: vertical-rl; }
  .demo-prop-print { position: absolute; right: 0; top: 9%; display: grid; width: 104px; height: 130px; padding: 14px; border: 1.5px solid var(--app-ink); background: #f2cfbb; box-shadow: 4px 4px 0 rgba(39,39,15,.7); transform: rotate(5deg); grid-template-columns: repeat(2,1fr); gap: 5px; }
  .demo-prop-print i { border: 1px dashed var(--app-ink-soft); background: #fff6e8; }
  .demo-prop-print i:last-child { grid-column: 1 / -1; }
  .demo-prop-pencil { position: absolute; bottom: 7%; left: 3%; width: 14px; height: 170px; border: 1.5px solid var(--app-ink); border-radius: 8px 8px 3px 3px; background: linear-gradient(90deg,#d19a3c 0 42%,#e7b53c 42% 68%,#d19a3c 68%); box-shadow: 3px 3px 0 rgba(39,39,15,.5); transform: rotate(48deg); transform-origin: center; }
}

@media (min-width: 900px) and (max-height: 820px) {
  .desk-demo { --demo-phone-width: 320px; min-height: 710px; padding-top: 24px; padding-bottom: 30px; }
  .desk-journey.is-enhanced { min-height: 710px; }
  .gallery-section:has(.desk-journey.is-enhanced) > .section-heading { top: 72px; margin-top: 92px; }
  .demo-shelf-scroll { padding: 18px 14px 112px; }
  .demo-shelf-header { margin-bottom: 14px; }
  .demo-shelf-header h3 { font-size: 1.7rem; }
  .demo-swipe { width: 104px; }
  .demo-zine-grid { gap: 14px 12px; }
  .demo-zine-caption { padding-top: 5px; }
  .demo-zine-caption strong { font-size: .86rem; }
  .demo-zine-caption small { font-size: .66rem; }
  .demo-shelf-dock { padding: 10px 14px 14px; gap: 7px; background: linear-gradient(to top,var(--app-room) 72%,rgba(233,226,155,0)); }
  .demo-make-button { min-height: 46px; padding: 10px 20px; font-size: .9rem; }
  .demo-prop-note { left: 0; transform: rotate(-5deg) scale(.88); }
  .demo-prop-print { right: -12px; transform: rotate(5deg) scale(.86); }
  .demo-prop-swatch { right: 0; transform: rotate(7deg) scale(.88); }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .demo-zine-card .demo-cover { transition: translate 180ms ease, rotate 180ms ease, box-shadow 180ms ease; }
  .demo-zine-card:hover .demo-cover { translate: 0 -5px; rotate: -.8deg; box-shadow: 5px 7px 0 var(--app-ink); }
  .demo-zine-card:nth-child(2n):hover .demo-cover { rotate: .8deg; }
  .demo-page-photo { transition: transform 180ms ease, box-shadow 180ms ease; }
  .demo-page:hover .demo-page-photo { transform: translateY(-1px) rotate(calc(var(--item-rotate) + .35deg)); box-shadow: 4px 5px 0 rgba(39,39,15,.16); }
}

/* Physical motion vocabulary: set down, pick up, slide a tray, stamp, fold. */
@keyframes z-set-down {
  from { opacity: .45; transform: translateY(-10px) rotate(var(--item-rotate)) scale(.96); }
  to { opacity: 1; transform: translateY(0) rotate(var(--item-rotate)) scale(1); }
}
@keyframes z-slide-tray-in {
  from { transform: translateY(102%); }
  to { transform: translateY(0); }
}
@keyframes z-slide-tray-out {
  from { transform: translateY(0); }
  to { transform: translateY(102%); }
}
@keyframes z-stamp {
  0% { transform: translateY(-3px) scale(1.06); }
  70% { transform: translateY(1px) scale(.97); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .demo-add-dialog[open] { animation: z-slide-tray-in 220ms cubic-bezier(.05,.7,.1,1) both; }
  .demo-add-dialog[open].is-closing { animation: z-slide-tray-out 160ms ease-in both; }
  .demo-composed-item.is-set-down { animation: z-set-down 300ms cubic-bezier(.05,.7,.1,1) both; }
  .demo-add-choices button:active > span:first-child { animation: z-stamp 160ms ease-out; }
}

@media (max-width: 560px) {
  .desk-journey.is-enhanced { width: 100%; padding: 0; border-radius: 0; box-shadow: none; }
  .demo-topline { align-items: baseline; flex-direction: row; }
  .demo-topline > p { max-width: 230px; text-align: right; }
  .demo-screen { width: 100%; min-height: 0; padding: 0; border-radius: clamp(22px,8vw,34px); }
  .demo-zine-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demo-zine-card { min-height: 0; }
  .demo-workspace { padding: 8px 22px; }
  .demo-tool-row { display: flex; grid-template-columns: none; }
  .demo-tool-row button { width: 44px; }
  .demo-tool-row .demo-add { width: auto; }
  .demo-proof-stage { display: grid; grid-template-columns: 1fr; gap: 0; }
  .demo-proof-page { grid-column: auto; grid-row: auto; }
  .demo-export-card { display: block; grid-template-columns: none; }
  .demo-add-choices { display: flex; grid-template-columns: none; }
  .demo-add-choices button { min-height: 68px; }
  .demo-add-choices button > span:first-child { display: grid; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-zine-card,
  .demo-screen button,
  .demo-composed-item,
  .demo-add-dialog { transition: none !important; animation: none !important; }
}

@media print {
  .demo-add-dialog { display: none !important; }
}

/* Download page: facts first, then literal install steps. */
.release-card { margin: 34px 0 10px; padding: clamp(20px, 4vw, 30px); border: var(--border); border-radius: 6px 18px 8px 6px; background: var(--surface); box-shadow: 4px 5px 0 var(--ink); }
.release-card h2 { margin-top: 0; }
.release-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 14px 22px; margin: 0 0 22px; }
.release-facts dt, .other-ways dt { color: var(--ink-soft); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.release-facts dd { margin: 2px 0 0; color: var(--ink); font-weight: 750; }
.release-card-note { margin-bottom: 0; font-size: 0.92rem; }
.install-steps li { padding-left: 4px; }
.checksum code { display: block; padding: 12px 14px; border: 1.5px dashed var(--ink); background: #fffdf5; color: var(--ink); overflow-wrap: anywhere; }
.other-ways { display: grid; gap: 18px; margin: 0; }
.other-ways dd { margin: 4px 0 0; color: var(--ink-soft); }
.policy .button { color: var(--ink); }