/* Volume 016. Shared chapter spacing and a compact mobile editing surface. */
:root { --chapter-gutter:36px; }
.scene-chapters { display:flex; flex-wrap:wrap; column-gap:24px; margin-top:8px; }
.scene-title .scene-chapters .scene-fold-link { margin-top:0; gap:7px; font-size:11px; }
.scene-chapters .scene-fold-link small { font-size:8px; }
.header-nav { gap:26px; margin-left:28px; align-items:center; }
.header-nav a { display:flex; align-items:center; min-height:44px; white-space:nowrap; }
.inspect-label-short { display:none; }
.inspect-launch .inspect-label-full { font:inherit; }
.preview-live { min-width:0; --preview-sticky-eligible:0; }
html:has(.builder-layout) { scroll-padding-top:var(--preview-clearance, 0px); }
.builder-layout[data-preview-sticky="off"] .preview-live { position:static; }
.design-controls :is(input,button,a), .saved-designs :is(input,button,a) { scroll-margin-block:10px; }
.storage-notice { margin:0 40px 24px; padding:14px 16px; border-left:3px solid var(--green); background:#e6e9df; font-size:14px; line-height:1.5; }
.checkout-main>.storage-notice { margin-left:0; margin-right:0; }
.prototype-notes { margin:16px 0 20px; color:var(--muted); font-size:13px; line-height:1.5; max-width:480px; }
.prototype-notes summary { cursor:pointer; color:var(--ink); padding:12px 0; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.prototype-notes summary:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.prototype-notes p { margin:8px 0 14px; }

@media (max-width:1100px) and (min-width:761px) {
  .header-note { display:none; }
  .header-nav { margin-left:auto; gap:24px; }
}
@media (max-width:760px) {
  :root { --chapter-gutter:20px; }
  .scene-chapters { flex-wrap:nowrap; justify-content:space-between; gap:12px; max-width:350px; }
  .scene-title .scene-chapters .scene-fold-link { display:grid; grid-template-columns:auto auto; gap:3px 9px; padding:8px 0; min-height:48px; font-size:12px; }
  .scene-chapters .scene-fold-link small { grid-row:2; grid-column:1; }
  .scene-chapters .scene-fold-link>span:last-child { grid-column:2; grid-row:1/3; }
  .site-header { gap:14px; padding-top:18px; padding-bottom:16px; }
  .site-header .brand { display:none; }
  .header-nav { display:flex; flex-wrap:wrap; width:100%; margin:0; gap:0 20px; justify-content:flex-start; font-size:9px; }
  .header-nav .nav-build { margin-left:auto; }
  .junior-intro__layout { padding-top:28px; padding-bottom:18px; gap:24px; }
  .junior-kicker { margin-bottom:20px; }
  .junior-tagline { font-size:25px; margin-top:20px; margin-bottom:30px; }
  .junior-pocket-copy { margin-bottom:22px; }
  .comparison-heading { gap:22px; }
  .compare-figure figcaption { gap:9px; padding-top:14px; }
  .statement { padding-top:24px; padding-bottom:38px; }
  .statement__layout { margin-top:28px; gap:24px; }
  .statement__copy { padding-left:0; }
  .statement__copy .brand-attitude { margin:24px 0; }
  .construction-heading { margin:28px 0 24px; }
  .construction-heading p { margin-top:16px; }
  .part-description { padding-top:24px; }
  .part-description h3 { font-size:38px; margin:16px 0; }
  .part-description>p { margin-bottom:18px; }
  .part-notes { margin-bottom:22px; }
  .part-notes div { padding:12px 0; }
  .material-story { padding-top:30px; padding-bottom:32px; }
  .material-heading { gap:20px; margin:28px 0 24px; }
  .material-heading>div { margin-left:0; }
  .material-heading p { margin-bottom:18px; }
  .material-reference-grid { row-gap:22px; }
  .material-reference h3 { margin:10px 0 8px; }
  .wuollet-fold { padding-left:var(--chapter-gutter); padding-right:var(--chapter-gutter); }
  .wf-option-note { min-height:0; }
  .wf-controls { gap:16px; }
  .storage-notice { margin-left:20px; margin-right:20px; }
  .studio-intro { grid-template-columns:minmax(0,1fr); padding-top:22px; padding-bottom:26px; gap:18px; }
  .studio-intro h1 { min-width:0; overflow-wrap:anywhere; font-size:76px; }
  .studio-intro .eyebrow { min-width:0; flex-wrap:wrap; }
  .studio-intro>p { min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .build-finish h2, .versions-heading h2 { overflow-wrap:anywhere; }
}

/* The existing preview stays beside the work on desktop and above it on phones.
   Notes remain in document flow; the object and controls form the sticky area. */
@media (max-width:760px) and (min-height:551px) {
  .design-preview { display:contents; }
  .preview-live { --preview-sticky-eligible:1; display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; position:sticky; top:0; z-index:5; padding:12px 20px 10px; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 6px 12px #191b1808; }
  .preview-live .preview-top { flex:0 0 100%; flex-wrap:wrap; gap:4px 12px; font-size:10px; }
  .preview-live .preview-scene { flex:0 0 100%; width:100%; height:clamp(124px,20svh,160px); aspect-ratio:auto; }
  .preview-live .config-wallet { position:absolute; display:grid; place-items:center; height:100%; width:auto; aspect-ratio:1000/760; max-width:100%; }
  .preview-live .preview-controls { flex:1 1 170px; flex-wrap:wrap; justify-content:flex-start; gap:4px; }
  .preview-live .preview-controls button { flex:1 0 auto; font-size:11px; padding:8px 6px; border-radius:0; }
  .preview-live .inspect-launch { flex:0 1 auto; max-width:100%; width:auto; padding:8px 6px; gap:5px; margin:0; min-height:44px; font-size:11px; }
  .preview-live .inspect-label-full { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .preview-live .inspect-label-short { display:inline; font:inherit; }
  .preview-live .inspect-launch>span:last-child { font-size:14px; }
  .preview-live .config-wallet[data-selected-size="junior"] :is(svg,.wallet3d-canvas) { transform:scale(1.02); }
  .preview-live .preview-orbit { width:68%; height:80%; }
  .preview-context { padding:0 20px 22px; min-width:0; }
  .preview-context .preview-caption { margin-top:18px; }
  .config-section { scroll-margin-top:0; }
}
@media (max-width:359px) {
  .header-nav { column-gap:17px; }
  .header-nav .nav-build { margin-left:0; }
  .studio-intro h1 { font-size:68px; }
  .preview-live .preview-controls button { padding-left:5px; padding-right:5px; }
  .preview-live .inspect-launch { margin-left:0; padding:8px 5px; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-chapters a { transition:none; }
}

/* Volume 018. Legible specimen captions and a practical carry comparison. */
:root { --specimen-ink:#53574e; }
.scene-kicker,.scene-figure,.scene-image-note,.scene-scroll-cue { color:var(--specimen-ink); }
.scene-title .scene-chapters .scene-fold-link { color:var(--specimen-ink); }
.scene-chapters .scene-fold-link small { font-size:10px; }
.scene-figure,.scene-image-note { font-size:11px; line-height:1.5; }
.comparison-stage { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:20px 24px 24px; }
.compare-figure--junior .compare-render { width:50%; margin-left:auto; margin-right:auto; }
.compare-figure figcaption { margin-left:0; padding:18px 0 0; gap:10px; }
.compare-direction { font-size:16px; line-height:1.35; letter-spacing:-.015em; }
.carry-cards { display:grid; grid-template-columns:repeat(6,17px); gap:4px; min-height:28px; align-content:start; }
.carry-cards i { display:block; width:17px; height:11px; border:1px solid #53664c; border-radius:2px; background:#d4ddc9; }
.compare-figure figcaption a { min-height:44px; display:flex; align-items:center; }
.capacity-comparison-note small { max-width:760px; line-height:1.5; }
.material-credit,.study-disclaimer { color:var(--specimen-ink); }
.construction-figure,.construction-legend { color:#414b39; }
.wf-figure-caption,.wf-figure-caption span:last-child,.wf-concept-note { font-size:11px; color:#4c5944; }
@media(max-width:760px) {
 .scene-kicker,.scene-figure,.scene-image-note,.scene-scroll-cue { font-size:11px; letter-spacing:.025em; }
 .scene-actions button { font-size:10px; }
 .scene-footer,.scene-instruction { font-size:10px; }
 .scene-detail p { font-size:14px; line-height:1.45; }
 .header-nav { font-size:11px; gap:0 18px; }
 .section-label { font-size:11px; gap:14px; line-height:1.55; }
 .comparison-stage { gap:18px; padding:16px 20px 20px; }
 .compare-name { font-size:29px; gap:6px 10px; }
 .compare-dimension { font-size:21px; }
 .compare-direction { font-size:14px; min-height:3.9em; }
 .compare-capacity { font-size:12px; line-height:1.5; }
 .compare-figure figcaption a { font-size:11px; }
 .carry-cards { grid-template-columns:repeat(6,14px); gap:3px; min-height:23px; }
 .carry-cards i { width:14px; height:10px; }
 .study__top,.study__bottom .mono,.study-disclaimer,.material-credit { font-size:11px; line-height:1.5; }
 .construction-heading { margin:24px 0 20px; }
 .construction-heading h2 { font-size:clamp(42px,10.5vw,64px); }
 .construction-heading p,.construction-figure,.construction-legend { font-size:11px; line-height:1.5; }
 .construction-hotspots { padding-bottom:14px; }
 .hotspot { min-height:44px; }
 .part-description { padding-top:20px; }
 .part-description h3 { margin:12px 0 16px; font-size:34px; }
 .part-description>p { font-size:15px; line-height:1.5; margin-bottom:16px; }
 .part-notes div { padding:10px 0; }
 .part-notes dt { font-size:11px; margin-bottom:5px; }
 .part-notes { margin-bottom:16px; }
 .prototype-notes,.field-note { line-height:1.55; }
 .capacity-choice small { font-size:11px; line-height:1.45; }
 .preview-caption>span,.summary-strip,.material-info>span,.detail-kicker,.detail-stage-label,.detail-stage-scale { font-size:11px; }
 .material-choice small { font-size:11px; line-height:1.45; }
 .studio-header nav a { min-height:44px; }
}
@media(max-width:359px) {
 .comparison-controls { gap:5px; }
 .comparison-controls button { font-size:10px; padding-left:8px; padding-right:8px; }
 .compare-figure figcaption { gap:9px; }
 .compare-name .mono { font-size:10px; }
}

/* 018: one current wallet, quiet colour bubbles and optional personal details. */
.color-options:not(.stitch-options){display:flex;flex-wrap:wrap;gap:9px 11px}
.color-options:not(.stitch-options) .swatch-choice{flex:0 0 62px;min-width:0}
.color-options:not(.stitch-options) .choice-body{border:0;border-radius:0;background:none;padding:7px 3px;min-height:75px}
.color-options:not(.stitch-options) input:checked+.choice-body{padding:7px 3px;background:none}
.color-options:not(.stitch-options) .color-dot{width:28px;height:28px;margin:4px auto 13px;outline:1px solid #7b807466;outline-offset:0;box-shadow:inset 0 1px 2px #ffffff20}
.color-options:not(.stitch-options) input:checked+.choice-body .color-dot{outline:2px solid var(--green);outline-offset:4px}
.color-options:not(.stitch-options) input:checked+.choice-body strong{color:var(--green);font-weight:700}
.pin-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pin-options .choice-body{min-height:62px;display:flex;align-items:center}
.pin-options strong{font-size:18px}
.engraving-options{display:flex;flex-wrap:wrap;gap:9px}
.engraving-options .choice{max-width:100%}
.engraving-options .choice-body{display:flex;align-items:center;min-height:46px;padding:12px 15px;border-radius:3px}
.engraving-options input:checked+.choice-body{padding:11px 14px}
.engraving-options strong{font:11px/1.5 var(--mono);letter-spacing:.025em;overflow-wrap:anywhere}
.engraving-custom{padding-top:25px}
.engraving-custom>label{display:block;font:11px/1.5 var(--mono);letter-spacing:.045em;margin-bottom:10px}
.engraving-custom input{width:100%;min-height:52px;border:1px solid var(--line);border-radius:0;padding:14px;background:transparent;color:var(--ink);font-size:16px}
.engraving-custom input:focus{border-color:var(--green)}
.engraving-custom .input-note{font-size:12px;line-height:1.5}
.design-summary dd,.version-summary dd,.completion-record p,.detail-description p,[data-current-design],[data-completion-description]{overflow-wrap:anywhere}
@media(max-width:400px){
 .color-options:not(.stitch-options){gap:5px 3px}
 .color-options:not(.stitch-options) .swatch-choice{flex-basis:calc((100% - 12px)/5)}
 .pin-options .choice-body{padding:15px 12px}
 .pin-options input:checked+.choice-body{padding:14px 11px}
 .pin-options strong{font-size:16px}
}
@media(forced-colors:active){
 .color-options:not(.stitch-options) input:checked+.choice-body{outline:2px solid Highlight;outline-offset:0}
}