/* Paper Dapple shared UI. Generated by production/tools/materialize_brand.py.
   Edit library-master/brand/ui sources, then materialize; no CSS imports. */
@font-face { font-family: "Jost"; src: url("../brand/fonts/jost-variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../brand/fonts/inter-variable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }

/* Shared website and tool identity. Printable renderers never import this file. */
:root {
  --ink: #203645;
  --muted: #52636f;
  --paper: #fbf8f3;
  --surface: #ffffff;
  --white: #ffffff;
  --card: #ffffff;
  --line: #d9dedc;
  --line-strong: #6d808b;
  --coral: #eba69b;
  --gold: #e8b35f;
  --teal: #8fafa5;
  --blue: #7395b9;
  --soft-coral: #f8e6e0;
  --soft-gold: #fbf0dc;
  --soft-teal: #e8f0ec;
  --soft-blue: #e8eef5;
  --soft: #f3efe8;
  --tint: #e8eef5;
  --mint: #e8f0ec;
  --accent: #25495e;
  --accent-strong: #203645;
  --focus: #245f87;
  --error: #9f3434;
  --success: #2f6352;
  --rust: #8b473b;
  --font-display: "Jost", "Century Gothic", "Avenir Next", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px;
  --radius-small: 8px;
  --radius-large: 24px;
  --shadow-paper: 0 14px 30px #20364512, 0 2px 5px #2036450a;
  --measure: 1320px;
  --gutter: clamp(18px, 4vw, 56px);
  color-scheme: light;
}

/* Interface primitives. Fonts intentionally target HTML, not SVG text or canvas. */
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--font-ui); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(36px, 4.5vw, 64px); }
h2 { font-size: clamp(24px, 2.7vw, 38px); }
h3 { font-size: 23px; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: .2em; }
img { max-width: 100%; height: auto; }
:where(button, input, select, textarea) { font: inherit; color: var(--ink); }
:where(button, a, input, select, summary) { touch-action: manipulation; }
:where(button, .button, .filebtn) {
  min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-small);
  padding: 10px 17px; background: var(--surface); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none;
}
:where(button, .button):hover { background: var(--soft-blue); border-color: var(--accent); }
:where(button, .button):disabled { cursor: not-allowed; opacity: .6; }
:where(.primary, .button.primary, button.primary) { background: var(--accent); border-color: var(--accent); color: white; }
:where(.primary, .button.primary, button.primary):hover { background: var(--ink); color: white; }
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  min-height: 44px; max-width: 100%; min-width: 0; padding: 11px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: white;
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
:where(label) { font-size: 13px; font-weight: 600; }
:where(summary) { min-height: 44px; display: list-item; align-content: center; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.filebtn:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip, .skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; padding: 12px 18px; background: var(--ink); color: white; }
.skip:focus, .skip-link:focus { top: 12px; }
::selection { background: var(--soft-gold); color: var(--ink); }
:where(main, section, article, aside, fieldset, .layout, .workspace, .grid, .tool-edit-panel, .tool-preview-panel) { min-width: 0; }
:where(pre, code, [role=status], [role=alert]) { overflow-wrap: anywhere; }
dialog { max-width: calc(100vw - 32px); max-height: 88dvh; overflow: auto; overscroll-behavior: contain; }
dialog::backdrop { background: #20364588; }
/* Shared editor controls work in a direct page and in the persistent workspace. */
.tool-actionbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tool-actionbar [role=status] { flex: 1 1 240px; font-size: 13px; color: var(--muted); }
.editor-panel-nav { display: none; }
.transfer-receipt { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: min(440px,calc(100vw - 32px)); max-height: 50dvh; overflow: auto; padding: 18px 20px; border: 1px solid var(--teal); border-left: 5px solid var(--teal); border-radius: 10px; background: var(--soft-teal); margin: 0; box-shadow: 0 8px 28px #20364522; }
.transfer-receipt h2, .transfer-receipt h3 { margin-top: 0; font-size: 23px; }
.transfer-receipt p { font-size: 14px; }
.transfer-receipt .actions { margin-bottom: 0; }
.preview-state { padding: 12px 15px; margin-block: 14px; border-radius: 8px; background: var(--soft-blue); color: var(--ink); font-size: 13px; }
.preview-state[data-state=stale] { background: var(--soft-gold); border-left: 4px solid var(--gold); }
.preview-state[data-state=error] { background: var(--soft-coral); border-left: 4px solid var(--error); }
.preview-state[data-state=ready] { background: var(--soft-teal); }
.advanced-options { border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; margin-block: 18px; background: var(--surface); }
.advanced-options > summary { font-size: 14px; font-weight: 600; }
html[data-embedded=true] body > header,
html[data-embedded=true] main > header,
html[data-embedded=true] main > .intro { display: none; }
html[data-embedded=true] main { padding-top: 4px; }
html[data-embedded=true], html[data-embedded=true] body,
html[data-embedded=true] main { min-height: 0; }
@media (max-width: 800px) {
  :where(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
  .editor-panel-nav { display: flex; gap: 4px; position: sticky; top: 0; z-index: 15; padding: 6px; margin-block: 12px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
  .editor-panel-nav button { flex: 1; border: 0; background: transparent; }
  .editor-panel-nav button[aria-selected=true], .editor-panel-nav button[aria-pressed=true] { background: var(--ink); color: white; }
  html[data-editor-panel=edit] .tool-preview-panel { display: none; }
  html[data-editor-panel=preview] .tool-edit-panel,
  html[data-editor-panel=preview] .tool-edit-settings { display: none; }
  .tool-actionbar { gap: 8px; }
  .tool-actionbar [role=status] { flex-basis: 100%; }
  .transfer-receipt { right: 16px; bottom: 16px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  :where(button, .button, input, select, textarea, .card, .preview-state, .transfer-receipt) { border: 1px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
  :where([aria-current=page], [aria-selected=true], [aria-pressed=true]) { outline: 2px solid Highlight; outline-offset: -3px; }
}

/* Public library: editorial discovery, exact-file selection, and practical guidance. */
.wrap { width: 100%; max-width: var(--measure); padding-inline: var(--gutter); margin-inline: auto; }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 32px; min-height: 94px; padding-block: 16px; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; }
.brand img { display: block; width: 220px; height: auto; }
.primary-nav { display: flex; flex: 1; justify-content: flex-end; align-items: center; gap: 22px; }
.primary-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.primary-nav a:hover, .primary-nav a[aria-current=page] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-search, .menu-toggle { width: 44px; padding: 10px; border-color: transparent; background: transparent; }
.header-search svg, .menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle { display: none; }
.review-banner { padding: 7px var(--gutter); background: var(--soft-gold); color: var(--ink); text-align: center; font-size: 13px; }
.review-banner a { color: inherit; }
.hero { padding-block: 32px 24px; }
.hero + .section { padding-top: 16px; }
.home-hero, .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 54px; }
.home-hero { padding-block: 48px 42px; grid-template-areas: "copy art" "discovery discovery"; row-gap: 28px; }
.home-hero > .hero-copy { grid-area: copy; }
.home-hero > .paper-composition { grid-area: art; }
.home-hero > .home-discovery { grid-area: discovery; padding-bottom: 0; }
.hero-copy { min-width: 0; position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: 0 0 auto; }
.hero h1, .home-hero h1 { font-size: clamp(40px,5.3vw,70px); font-weight: 400; line-height: 1.05; letter-spacing: -.037em; max-width: 17ch; margin: 0 0 22px; }
.hero h1 { max-width: 25ch; font-size: clamp(34px,3.4vw,48px); margin-bottom: 16px; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 77%,var(--soft-gold) 77%,var(--soft-gold) 95%,transparent 95%); }
.hero .intro, .hero-copy > p:not(.eyebrow), .lead { max-width: 48ch; font-size: 17px; line-height: 1.7; color: var(--muted); }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-block: 24px; }
.button { min-height: 46px; padding: 12px 20px; }
.button.primary, a.download { color: white; background: var(--accent); border-color: var(--accent); }
.button.primary:hover, a.download:hover { background: var(--ink); }
.button.secondary, .button.quiet { background: transparent; border-color: transparent; color: var(--ink); }
.button.secondary:hover, .button.quiet:hover { background: var(--soft-blue); }
.hero-search, .wide-search { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; max-width: 570px; margin-top: 24px; }
.hero-search input, .wide-search input { border: 0; min-width: 0; flex: 1; width: 100%; background: transparent; }
.hero-search button, .wide-search button { background: var(--soft-gold); border-color: transparent; }
.hero-note, .hero-assurance { font-size: 13px; color: var(--muted); margin-top: 13px; }
.paper-composition { position: relative; min-width: 0; height: 435px; isolation: isolate; }
.paper-composition::before { content: ''; position: absolute; inset: 42px 12px 28px 20px; border-radius: 50%; background: var(--soft-gold); z-index: -1; }
.paper-piece { position: absolute; display: block; width: 45%; color: var(--ink); text-decoration: none; transition: transform .18s ease; }
.paper-piece img { display: block; width: 100%; height: auto; max-height: 330px; object-fit: contain; background: white; box-shadow: var(--shadow-paper); }
.paper-piece-1 { left: 0; top: 35px; transform: rotate(-9deg); }
.paper-piece-2 { left: 30%; top: 8px; transform: rotate(5deg); z-index: 2; }
.paper-piece-3 { right: 0; top: 102px; transform: rotate(-4deg); z-index: 3; }
.paper-piece-3 img { max-height: 255px; }
.paper-piece:hover, .paper-piece:focus-visible { transform: translateY(-7px) rotate(0); z-index: 5; }
.paper-piece span, .paper-piece figcaption { display: block; width: fit-content; padding: 6px 10px; margin-top: 10px; border-radius: 5px; background: white; font-size: 13px; box-shadow: 0 2px 8px #2036450a; }
.paper-composition .shape, .paper-composition .composition-shape { position: absolute; z-index: -1; }
.composition-shape.shape-circle { left: 2%; top: 8px; }
.composition-shape.shape-square { right: 3%; top: 6px; }
.composition-shape.shape-hexagon { left: 4%; bottom: 12px; }
.shape-circle { width: 38px; height: 38px; border-radius: 50%; background: var(--coral); }
.shape-square { width: 30px; height: 30px; background: var(--gold); transform: rotate(12deg); }
.shape-triangle { width: 36px; height: 34px; background: var(--teal); clip-path: polygon(50% 0,100% 100%,0 100%); }
.shape-hexagon { width: 34px; height: 30px; background: var(--blue); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.kicker { display: flex; gap: 24px; flex-wrap: wrap; border-block: 1px solid var(--line); padding-block: 15px; font-size: 13px; }
.section { padding-block: 42px; }
.section-head, .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 25px; }
.section-head h2, .section-heading h2 { margin: 0; font-size: clamp(28px,3vw,40px); font-weight: 400; }
.section-head p, .section-heading p { margin-bottom: 0; color: var(--muted); }
.section-head > a, .section-heading > a { min-height: 44px; display: inline-flex; align-items: center; flex: 0 0 auto; font-size: 13px; font-weight: 600; }
.group-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.group-link { display: flex; align-items: center; gap: 13px; min-height: 82px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: white; text-decoration: none; color: var(--ink); font-size: 14px; line-height: 1.4; }
.group-link:hover { border-color: var(--accent); background: var(--soft-gold); }
.group-link small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.group-link svg, .group-icon { width: 36px; height: 36px; padding: 8px; border-radius: 9px; background: var(--soft-coral); flex: 0 0 auto; }
.group-link:nth-child(4n+2) svg, .group-link:nth-child(4n+2) .group-icon { background: var(--soft-gold); }
.group-link:nth-child(4n+3) svg, .group-link:nth-child(4n+3) .group-icon { background: var(--soft-teal); }
.group-link:nth-child(4n) svg, .group-link:nth-child(4n) .group-icon { background: var(--soft-blue); }
.grid, .resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 24px; }
.grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.card, .resource-card { min-width: 0; background: transparent; }
.card-visual { display: block; background: var(--soft-coral); padding: 22px 26px; border-radius: 14px; position: relative; overflow: hidden; }
.card:nth-child(4n+2) .card-visual { background: var(--soft-gold); }
.card:nth-child(4n+3) .card-visual { background: var(--soft-blue); }
.card:nth-child(4n) .card-visual { background: var(--soft-teal); }
.card-visual img, .card > a > img { width: 100%; height: 248px; object-fit: contain; display: block; filter: drop-shadow(0 5px 7px #20364515); transition: transform .18s ease; }
.card-visual:hover img { transform: translateY(-4px); }
.card-body { padding: 17px 2px 0; }
.card-body h2, .card-body h3 { margin: 5px 0 9px; font-size: 23px; font-weight: 400; line-height: 1.25; }
.card a { color: var(--ink); text-decoration: none; }
.card a:hover { text-decoration: underline; text-underline-offset: .2em; }
.card p { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.card small, .card-meta { display: block; font-size: 13px; color: var(--muted); }
.card-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-badge, .pill { display: inline-flex; gap: 5px; padding: 4px 8px; border-radius: 5px; background: white; font-size: 13px; font-weight: 600; line-height: 1.5; }
.card-visual .card-badge { position: absolute; left: 12px; bottom: 12px; }
.save-button, .card-save { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; min-height: 44px; padding: 10px; border-radius: 50%; background: white; border-color: transparent; }
.project-feature { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 45px; align-items: center; border-radius: 22px; padding: 40px; background: var(--soft-teal); }
.project-feature h2 { font-size: clamp(32px,3.5vw,46px); font-weight: 400; margin: 0 0 18px; }
.project-feature p { color: var(--muted); font-size: 15px; }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; align-items: start; }
.project-card { display: block; color: var(--ink); text-decoration: none; font-size: 13px; }
.project-card img { display: block; width: 100%; height: 220px; object-fit: contain; margin-bottom: 12px; filter: drop-shadow(0 8px 10px #20364516); }
.project-card:nth-child(2) { padding-top: 0; }
.tool-grid, .tools-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.tool-grid:has(> .tool-card:nth-child(4)) { grid-template-columns: repeat(4,minmax(0,1fr)); }
.tool-card { display: flex; flex-direction: column; align-items: start; min-width: 0; padding: 26px; background: white; border: 1px solid var(--line); border-radius: 16px; }
.tool-card h2, .tool-card h3 { margin: 18px 0 12px; font-size: 27px; font-weight: 400; }
.tool-card p { font-size: 14px; color: var(--muted); }
.tool-card .button, .tool-card > a:last-child { margin-top: auto; }
.tool-card svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--soft-blue); }
.tool-visual { display: flex; align-items: center; justify-content: center; width: 100%; height: 220px; padding: 24px; margin-bottom: 24px; border-radius: 10px; background: var(--soft-blue); }
.tool-visual img { width: auto; max-width: 70%; height: 172px; object-fit: contain; filter: drop-shadow(0 5px 6px #20364520); }
.tool-visual img:not(:only-child) { width: 40%; max-width: 40%; flex: 0 0 40%; }
.tool-visual img + img { margin-left: -10%; }
.tool-visual img:first-child:not(:only-child) { transform: rotate(-8deg); }
.tool-visual img:last-child:not(:only-child) { transform: rotate(7deg); }
.tool-studio .tool-visual { background: var(--soft-gold); }
.tool-sets .tool-visual { background: var(--soft-coral); }
.tool-tray .tool-visual { background: var(--soft-teal); }
.edition-choice { min-width: 0; padding: 0; margin: 0 0 20px; border: 0; }
.edition-choice legend { padding: 0 0 9px; font-size: 13px; font-weight: 600; }
.variant-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.variant-option { display: flex; flex-direction: column; justify-content: start; padding: 10px; gap: 8px; font-size: 13px; line-height: 1.4; }
.variant-option img { width: 100%; height: 83px; object-fit: contain; }
.variant-option span { overflow-wrap: anywhere; }
.variant-option[aria-pressed=true], .paper-options button[aria-pressed=true], .format-options button[aria-pressed=true] { border-color: var(--accent); background: var(--soft-blue); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.variant-search { display: block; }
.variant-search label { display: block; margin-block: 10px 6px; }
.variant-search input, .variant-search select { width: 100%; }
.variant-search select { padding: 6px; }
.variant-search option { padding: 9px 8px; min-height: 36px; }
.variant-search .fine { margin: 8px 0 0; }
.paper-options, .format-options { display: flex; gap: 8px; flex-wrap: wrap; }
.paper-options button, .format-options button { flex: 1 1 90px; font-size: 13px; }
.choice-status:empty { display: none; }
.page-head { padding-block: 34px 32px; max-width: 900px; }
.page-head h1 { font-size: clamp(36px,4vw,54px); font-weight: 400; margin: 0 0 16px; }
.breadcrumbs, .crumbs { padding-top: 20px; font-size: 13px; overflow-wrap: anywhere; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 5px 9px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: flex; gap: 9px; min-width: 0; }
.breadcrumbs li + li::before { content: '/'; }
.breadcrumbs [aria-current=page] { color: var(--ink); }
.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 6px 25px; }
.category-tabs a { min-height: 44px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; background: white; color: var(--ink); font-size: 13px; }
.category-tabs [aria-current=page] { background: var(--ink); color: white; border-color: var(--ink); }
.catalog-layout { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 34px; align-items: start; padding-bottom: 45px; }
.search-shell { display: block; padding-bottom: 26px; }
.filter-rail { border-top: 3px solid var(--gold); padding: 18px 0; }
.filter-rail h2, .filter-rail h3 { font-family: var(--font-ui); font-size: 14px; font-weight: 600; margin: 0 0 18px; }
.filter-rail label { display: block; margin-bottom: 15px; }
.filter-rail input, .filter-rail select { display: block; width: 100%; margin-top: 7px; }
.filter-rail .filters { display: block; }
.filters { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 0 0 24px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.filters label { min-width: 0; }
.filters input, .filters select { width: 100%; display: block; margin-top: 8px; }
.search-results { min-width: 0; }
.search-results .grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 18px; }
.search-results .card-visual { padding: 20px; }
.search-results .card-visual img { height: 218px; }
.search-results .card h3 { font-size: 21px; }
.results-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 20px; }
.status, #find-status { min-height: 1.7em; font-size: 13px; color: var(--muted); scroll-margin-top: 20px; }
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-block: 36px 12px; }
.pagination .page-number { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 7px; padding: 7px 12px; text-decoration: none; background: white; font-size: 13px; }
.pagination [aria-current=page] { background: var(--ink); color: white; border-color: var(--ink); font-weight: 600; }
.resource-layout, .resource-detail { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: 40px; align-items: start; }
.preview, .preview-stage, .full-preview { background: var(--soft-blue); border: 1px solid var(--line); border-radius: 16px; padding: 28px; min-width: 0; }
.preview img, .preview-stage img, .full-preview > img { display: block; width: 100%; height: auto; max-height: 760px; object-fit: contain; filter: drop-shadow(0 7px 12px #20364518); }
.preview-controls, .controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.preview-controls button, .controls button { font-size: 13px; }
.caption { font-size: 13px; color: var(--muted); margin-top: 14px; }
.download-panel { padding: 28px; border-top: 4px solid var(--coral); background: white; border-radius: 0 0 14px 14px; }
.download-panel h2 { margin: 0 0 14px; font-size: 30px; font-weight: 400; }
.download-panel label { display: block; font-size: 13px; }
.download-panel select { width: 100%; display: block; margin-block: 8px 18px; }
.download-panel .actions { margin-block: 20px 12px; }
.download-panel .download, .download-panel .button.primary { flex: 1; }
.download-panel .availability { font-size: 13px; color: var(--muted); }
.edition-controls { display: grid; gap: 12px; }
.variant-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-block: 12px 20px; }
.variant-grid button { justify-content: start; text-align: left; font-size: 13px; }
.variant-grid [aria-pressed=true], .variant-grid [aria-selected=true] { border: 2px solid var(--accent); background: var(--soft-blue); }
.facts, .edition-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; margin: 16px 0 22px; }
.facts > div, .edition-facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.facts dt, .edition-facts dt { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.facts dd, .edition-facts dd { font-size: 14px; font-weight: 500; margin: 4px 0 0; overflow-wrap: anywhere; }
.sticky-download { position: sticky; top: 24px; }
.resource-copy { margin-top: 42px; padding-top: 32px; border-top: 1px solid var(--line); }
.prose { max-width: 780px; }
.prose p, .prose li { max-width: 72ch; }
.prose h2, .resource-copy h2 { margin: 30px 0 16px; font-size: 30px; font-weight: 400; }
.prose h3 { margin: 24px 0 12px; }
.prose ol, .prose ul { padding-left: 24px; }
.prose li { margin-block: 8px; }
.prose .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.prose .grid figure { margin: 0; min-width: 0; }
.prose .grid figure img { display: block; width: 100%; height: auto; object-fit: contain; }
.prose figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.callout, .limits { padding: 18px 22px; border-left: 4px solid var(--teal); background: var(--soft-teal); border-radius: 0 10px 10px 0; margin-block: 22px; font-size: 14px; }
.caution { background: var(--soft-gold); border-color: var(--gold); }
.steps { counter-reset: flow; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.step { padding: 26px; background: var(--soft-gold); border-radius: 14px; }
.step::before { counter-increment: flow; content: '0' counter(flow); font: 400 32px/1 var(--font-display); }
.step h3 { margin: 14px 0; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.choice-grid > div { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.empty { padding: 30px; border: 1px dashed var(--line-strong); border-radius: 14px; background: white; }
details { border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; margin-block: 16px; background: white; }
summary { font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-wrap { overflow-x: auto; }
code { padding: 2px 5px; background: var(--soft); }
pre { white-space: pre-wrap; padding: 20px; background: var(--soft); }
.fine, .contact-reference { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.workspace-frame { display: block; width: 100%; min-height: 900px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.site-footer { margin-top: 58px; border-top: 1px solid var(--line); padding-block: 40px 24px; background: var(--soft-blue); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 35px; }
.site-footer a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; font-size: 13px; color: var(--ink); }
.site-footer strong { font-family: var(--font-display); font-size: 23px; font-weight: 500; }
.footer-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.ui-icon { flex: 0 0 auto; vertical-align: middle; }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link .ui-icon { width: 19px; height: 19px; }
.text-button { min-height: 44px; background: transparent; border-color: transparent; padding-inline: 0; text-decoration: underline; }
.header-utilities { display: flex; align-items: center; gap: 5px; }
.utility-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 8px; text-decoration: none; color: var(--ink); font-size: 13px; }
.utility-link span { display: none; }
.utility-link:hover { background: var(--soft-gold); border-radius: 8px; }
.brand-shape { display: inline-block; flex: 0 0 auto; }
.group-link > .brand-shape { width: 24px; height: 24px; }
.group-link > span:not(.brand-shape) { flex: 1; }
.group-link > .ui-icon { width: 18px; height: 18px; background: transparent; padding: 0; }
.group-link strong { font-weight: 500; }
.home-discovery { padding-bottom: 18px; }
.home-discovery .search-shell { max-width: 100%; margin-bottom: 22px; }
.search-bar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; }
.search-bar input { flex: 1; width: 100%; border: 0; background: transparent; min-width: 0; }
.search-bar button { background: var(--accent); color: white; border-color: var(--accent); font-size: 13px; }
.search-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.search-options label { display: block; }
.search-options select { display: block; width: 100%; margin-top: 7px; }
.filter-panel { margin-bottom: 8px; }
.filter-panel .filters { border: 0; padding: 14px 0 0; margin: 0; grid-template-columns: repeat(4,minmax(0,1fr)); }
#search-content { padding-top: 20px; }
.save-control { padding: 10px; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; margin-top: -10px; }
.save-control[aria-pressed=true] { background: var(--soft-gold); }
.save-control[aria-pressed=true] svg { fill: var(--gold); }
.card .eyebrow { font-size: 13px; letter-spacing: .09em; margin-bottom: 9px; }
.card .eyebrow::before { display: none; }
.card-meta { align-items: center; }
.project-card { font-size: 14px; }
.project-visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 24px 20px; height: 230px; border-radius: 14px; background: var(--soft-coral); overflow: hidden; }
.project-color-1 .project-visual { background: var(--soft-gold); }
.project-color-2 .project-visual { background: var(--soft-blue); }
.project-color-3 .project-visual { background: var(--soft-teal); }
.project-visual img { width: 47%; height: 170px; object-fit: contain; margin: 0 -9%; filter: drop-shadow(0 5px 8px #20364520); }
.project-visual img:nth-child(1) { transform: rotate(-10deg) translateY(8px); }
.project-visual img:nth-child(2) { transform: rotate(4deg) translateY(-10px); z-index: 1; }
.project-visual img:nth-child(3) { transform: rotate(11deg) translateY(14px); }
.project-copy { padding: 20px 2px; }
.project-copy h2 { font-size: 27px; font-weight: 400; margin: 0 0 12px; }
.project-copy h2 a { color: var(--ink); text-decoration: none; }
.project-copy h2 a:hover { text-decoration: underline; }
.project-copy p:not(.eyebrow) { font-size: 13px; color: var(--muted); }
.project-copy .eyebrow { font-size: 13px; margin-bottom: 10px; }
.project-copy .eyebrow::before { display: none; }
.creative-feature { padding-block: 46px; background: var(--soft-teal); margin-block: 15px; }
.tool-card > .brand-shape { width: 31px; height: 31px; margin-bottom: 25px; }
.tool-card .eyebrow { font-size: 13px; margin: 0; }
.tool-card .eyebrow::before { display: none; }
.tool-card > .text-link { margin-top: auto; }
.tool-card .text-link .ui-icon { width: 19px; height: 19px; padding: 0; background: none; border-radius: 0; }
.print-help-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.print-help-feature > div { min-width: 0; }
.print-help-feature .brand-shape { margin-bottom: 20px; width: 26px; height: 26px; }
.print-help-feature h2 { margin-top: 0; font-size: 37px; font-weight: 400; }
.print-help-feature p:not(.eyebrow) { max-width: 45ch; color: var(--muted); font-size: 15px; }
.help-links { display: grid; gap: 0; }
.help-links a { display: flex; justify-content: space-between; gap: 12px; min-height: 52px; padding-block: 15px; border-bottom: 1px solid var(--line-strong); text-decoration: none; color: var(--ink); font-size: 14px; }
.help-links a:hover { text-decoration: underline; }
.footer-brand img { width: 230px; display: block; margin-bottom: 18px; }
.footer-brand p { font-family: var(--font-display); font-size: 26px; line-height: 1.25; }
.site-footer h2 { font-family: var(--font-ui); font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.footer-note { display: flex; justify-content: space-between; gap: 15px; font-size: 13px; color: var(--muted); }
.resource-heading { padding-block: 32px; }
.resource-heading h1 { font-weight: 400; font-size: clamp(35px,4vw,53px); margin: 0 0 15px; }
.resource-heading .intro { max-width: 76ch; color: var(--muted); margin: 0; font-size: 16px; }
.preview-open { display: block; width: 100%; padding: 0; background: transparent; border: 0; }
.preview-open:hover { background: transparent; }
.preview-open span { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--ink); }
.preview-open img { width: 100%; }
.download-button { width: 100%; min-height: 50px; }
.download-note { font-size: 13px; margin: 12px 0 18px; text-align: center; color: var(--muted); }
.print-note { font-size: 13px; line-height: 1.6; background: var(--soft-gold); padding: 14px; border-radius: 8px; }
.resource-tool-actions { display: grid; gap: 8px; margin-top: 20px; }
.resource-tool-actions .quiet { border-color: var(--line); background: white; justify-content: start; }
.resource-tool-actions .quiet:hover { background: var(--soft-blue); }
.exact-editions { background: var(--paper); padding: 10px 14px; }
.exact-editions summary { font-size: 13px; }
.exact-editions select { font-size: 13px; }
.resource-story { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); gap: 40px; }
.resource-story .resource-copy { margin: 0; padding: 0; border: 0; }
.edition-details { min-width: 0; background: white; border-radius: 14px; padding: 26px; font-size: 14px; }
.edition-details h2 { font-size: 28px; margin: 0 0 18px; font-weight: 400; }
.edition-details h3 { font-size: 23px; }
.edition-details ol { padding-left: 21px; }
.edition-details li { margin-block: 8px; }
.edition-details .facts dd { font-size: 13px; }
.review-note { background: var(--soft-gold); font-size: 13px; padding: 14px; border-radius: 8px; }
.preview-dialog { width: min(1100px,calc(100vw - 32px)); max-height: 94dvh; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.preview-dialog-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 18px; }
.preview-dialog-toolbar h2 { flex: 1 1 240px; margin: 0; font-size: 26px; }
.preview-dialog-canvas { max-height: 69dvh; overflow: auto; background: var(--soft-blue); padding: 20px; text-align: center; }
.preview-dialog-canvas img { width: auto; height: auto; max-height: 64dvh; max-width: 100%; display: block; margin: auto; }
.preview-dialog-canvas.zoomed img, .preview-dialog[data-zoom=true] .preview-dialog-canvas img, #large-preview.full-resolution { max-width: none; max-height: none; width: auto; }
.start-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.start-choice { display: block; padding: 28px; background: white; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); }
.start-choice h2 { font-size: 28px; font-weight: 400; margin: 22px 0 14px; }
.start-choice p { color: var(--muted); font-size: 14px; }
.start-choice > .ui-icon { display: block; margin-top: 20px; }
.alphabet { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 28px; }
.alphabet a { display: grid; place-items: center; width: 44px; height: 44px; background: white; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; }
.directory > section { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 25px; border-top: 1px solid var(--line); padding-block: 25px; }
.directory h2 { font-size: 36px; margin: 0; }
.directory ul { columns: 3; column-gap: 30px; list-style: none; margin: 0; padding: 0; }
.directory li { break-inside: avoid; font-size: 13px; }
.directory li a, .tool-guide-groups li a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
.project-intro { max-width: 850px; padding-top: 0; font-size: 17px; }
.project-step { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; padding-block: 30px; border-top: 1px solid var(--line); align-items: center; }
.project-step-note h2 { font-size: 32px; margin: 17px 0; font-weight: 400; }
.project-step-note p { max-width: 44ch; color: var(--muted); }
.step-number { font: 400 34px/1 var(--font-display); color: var(--muted); }
.project-step .card { max-width: 470px; }
.packet-choice { background: white; border: 1px solid var(--line); border-top: 4px solid var(--gold); padding: 24px; border-radius: 0 0 12px 12px; }
.packet-choice h3 { margin-top: 0; }
.packet-choice .text-link { display: flex; margin-top: 12px; }
.project-help { border-top: 1px solid var(--line); }
.tool-guide-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 40px; }
.tool-guide-groups section { border-top: 3px solid var(--gold); padding-top: 20px; }
.tool-guide-groups h3 { font-size: 27px; font-weight: 400; margin: 0 0 18px; }
.tool-guide-groups ul { list-style: none; padding: 0; }
.tool-guide-groups li { padding-block: 7px; font-size: 14px; }
.saved-empty { text-align: center; padding-block: 45px; }
.saved-empty .brand-shape { margin-bottom: 20px; }
@media (max-width: 1100px) {
  .header-row { gap: 18px; }
  .primary-nav { gap: 16px; }
  .brand img { width: 195px; }
  .home-hero, .hero-grid { gap: 28px; }
  .paper-composition { height: 370px; }
  .paper-piece img { max-height: 260px; }
  .paper-piece-3 { top: 90px; }
  .paper-piece-3 img { max-height: 210px; }
  .group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-layout { grid-template-columns: 210px minmax(0,1fr); gap: 24px; }
  .search-results .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-feature { padding: 30px; gap: 28px; }
  .tool-grid:has(> .tool-card:nth-child(4)) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .header-row { flex-wrap: wrap; gap: 6px 18px; padding-block: 12px; min-height: 0; }
  .brand { margin-right: auto; }
  .brand img { width: 190px; }
  .primary-nav { order: 3; justify-content: start; flex-basis: 100%; gap: 20px; overflow-x: auto; padding-bottom: 2px; }
  .primary-nav a { flex: 0 0 auto; font-size: 13px; }
  .hero { padding-block: 26px 18px; }
  .home-hero { padding-block: 34px 28px; }
  .home-hero h1 { font-size: clamp(39px,6.6vw,55px); }
  .home-hero, .hero-grid { gap: 18px; }
  .paper-composition { height: 340px; }
  .paper-piece img { max-height: 230px; }
  .paper-piece-3 { top: 85px; }
  .paper-piece-3 img { max-height: 180px; }
  .paper-piece span { font-size: 13px; }
  .hero .intro, .hero-copy > p:not(.eyebrow) { font-size: 15px; }
  .hero-search { margin-top: 18px; }
  .hero-copy .actions { gap: 4px; }
  .hero-copy .button { padding-inline: 13px; font-size: 13px; }
  .grid, .resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 18px; }
  .card-visual { padding: 20px; }
  .card-visual img { height: 230px; }
  .project-feature { grid-template-columns: 1fr; }
  .project-grid { max-width: 650px; }
  .tool-grid, .tools-grid { grid-template-columns: 1fr; }
  .tool-grid:has(> .tool-card:nth-child(4)) { grid-template-columns: 1fr; }
  .tool-card { padding: 24px; }
  .catalog-layout { grid-template-columns: 1fr; gap: 12px; }
  .filter-rail { padding: 12px 0; }
  .filter-rail .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .resource-detail, .resource-layout { gap: 24px; }
  .download-panel { padding: 20px; }
  .preview, .preview-stage, .full-preview { padding: 18px; }
  .facts, .edition-facts { gap: 0 12px; }
  .header-utilities { margin-left: auto; }
  .js .menu-toggle { display: inline-flex; }
  .js .primary-nav { display: none; }
  .js .primary-nav[data-open=true] { display: flex; }
  .filter-panel .filters { grid-template-columns: 1fr 1fr; }
  .resource-story { gap: 25px; }
  .edition-details { padding: 20px; }
  .project-grid { gap: 18px; }
  .project-visual { height: 190px; padding: 18px 12px; }
  .project-visual img { height: 145px; }
  .project-copy h2 { font-size: 23px; }
  .print-help-feature { gap: 25px; }
  .directory ul { columns: 2; }
}
@media (max-width: 600px) {
  .home-hero, .hero-grid { grid-template-columns: 1fr; }
  .home-hero { grid-template-areas: "copy" "discovery" "art"; gap: 22px; }
  .home-hero h1 { max-width: 17ch; font-size: clamp(38px,10.3vw,52px); }
  .hero h1 { max-width: 24ch; font-size: 36px; }
  .hero-copy .actions { gap: 8px; margin-block: 20px; }
  .hero-copy .button { padding-inline: 16px; }
  .paper-composition { height: 290px; width: min(100%,410px); margin: 6px auto 0; }
  .paper-piece { width: 39%; }
  .paper-piece-1 { left: 4%; top: 30px; }
  .paper-piece-2 { left: 32%; top: 2px; }
  .paper-piece-3 { right: 1%; top: 65px; }
  .paper-piece img { max-height: 230px; }
  .paper-piece-3 img { max-height: 180px; }
  .paper-composition::before { inset: 25px 18px 20px; }
  .section { padding-block: 30px; }
  .section-head, .section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .section-head h2, .section-heading h2 { font-size: 31px; }
  .section-head > a, .section-heading > a { min-height: 44px; }
  .group-grid { gap: 9px; }
  .group-link { min-height: 82px; padding: 13px; gap: 9px; font-size: 13px; }
  .group-link small { font-size: 13px; }
  .group-link svg, .group-icon { width: 30px; height: 30px; padding: 6px; }
  .card-body h2, .card-body h3 { font-size: 21px; }
  .card-visual { padding: 14px; }
  .card-visual img, .search-results .card-visual img { height: 190px; }
  .card p { font-size: 13px; }
  .card-meta { font-size: 13px; }
  .project-feature { padding: 24px 20px; gap: 24px; }
  .project-grid { gap: 20px; grid-template-columns: 1fr; }
  .project-visual { height: 240px; padding: 25px; }
  .project-visual img { height: 190px; }
  .project-card { font-size: 14px; }
  .resource-detail, .resource-layout, .grid.two, .steps, .choice-grid, .footer-grid { grid-template-columns: 1fr; }
  .resource-detail > .preview, .resource-detail > .preview-stage { order: 0; }
  .download-panel, .sticky-download { position: static; }
  .page-head { padding-block: 26px; }
  .filters { grid-template-columns: 1fr; padding: 16px; }
  .filter-rail .filters { grid-template-columns: 1fr; }
  .footer-grid { gap: 22px; }
  .site-footer { margin-top: 38px; }
  .prose .grid { grid-template-columns: 1fr; }
  .review-banner { font-size: 13px; text-align: left; }
  .header-row { gap: 8px; }
  .brand img { width: 174px; }
  .header-utilities { gap: 0; }
  .utility-link { width: 44px; min-width: 44px; padding: 10px; }
  .menu-toggle { width: 44px; padding: 10px; }
  .search-bar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .search-bar input { flex-basis: calc(100% - 50px); width: calc(100% - 50px); }
  .search-bar button { width: 100%; }
  .search-options, .filter-panel .filters { grid-template-columns: 1fr; }
  .resource-story, .print-help-feature, .start-grid, .tool-guide-groups { grid-template-columns: 1fr; }
  .resource-heading { padding-block: 26px; }
  .resource-heading .intro { font-size: 15px; }
  .download-panel { border-top-width: 4px; }
  .variant-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .preview-stage img { max-height: 340px; }
  .footer-note { flex-direction: column; }
  .directory > section { grid-template-columns: 1fr; gap: 12px; }
  .directory ul { columns: 1; }
  .project-step { grid-template-columns: 1fr; gap: 22px; }
  .project-step-note p { font-size: 14px; }
  .preview-dialog { padding: 16px; }
}
@media (max-width: 370px) {
  .grid, .resource-grid, .search-results .grid { grid-template-columns: 1fr; }
  .group-link { flex-direction: column; align-items: start; gap: 8px; }
  .card-visual img, .search-results .card-visual img { height: 260px; }
  .paper-composition { height: 250px; }
  .paper-piece img { max-height: 195px; }
  .hero-copy .button { width: 100%; }
  .hero .intro { font-size: 15px; }
  .brand img { width: 145px; }
  .header-utilities { margin-left: 0; }
  .header-row { gap: 4px; }
}
@media print {
  .site-header, .site-footer, .review-banner, .actions, button, .controls, select, .filters { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .hero { padding: 12px 0; }
  .hero h1 { font-size: 28pt; }
  .resource-layout, .resource-detail { display: block; }
  .preview { break-after: page; }
  .download-panel { border: 0; }
  a { color: inherit; }
  .prose { max-width: none; }
  .card, .callout { break-inside: avoid; }
}
/* Project journeys and exact public-file selection. */
.journey-hero{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding-block:3.5rem}
.journey-hero h1{font-size:clamp(2.5rem,4.2vw,4.3rem);line-height:1.06;margin-block:.7rem 1.3rem}
.journey-example{position:relative;display:flex;gap:1rem;align-items:center;justify-content:center;background:var(--gold-soft,#fbefd9);border-radius:48% 48% 15% 35%;padding:2rem 1.2rem 3.5rem;min-height:330px}
.journey-example figure{margin:0;min-width:0;flex:1;max-width:200px;transform:rotate(-5deg)}
.journey-example figure:nth-child(2){transform:rotate(5deg) translateY(1rem)}
.journey-example img{display:block;width:100%;height:auto;background:white;box-shadow:0 8px 20px #20364514}
.journey-example figcaption{font-size:.8rem;line-height:1.4;background:white;padding:.5rem .7rem;margin-top:.6rem}
.journey-example>.fine{position:absolute;bottom:.5rem;left:1rem;right:1rem;text-align:center;font-size:.7rem}
.journey-a-clearer-week .journey-example{background:#e7eeeb;border-radius:12px}
.journey-nature-observation-notebook .journey-example{background:#e9eef5;border-radius:50% 12% 45% 10%}
.journey-preparation{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;border-top:1px solid var(--line)}
.journey-preparation li{padding-left:.3rem;margin-block:.7rem}
.journey-preparation aside{background:var(--surface,white);padding:1.5rem 2rem;border-radius:10px}
.journey-builder{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.5rem;align-items:start;scroll-margin-top:2rem}
.journey-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.journey-paper{max-width:20rem;margin:1.2rem 0 1.7rem}.journey-paper label{display:block;margin-bottom:.4rem}.journey-paper select{width:100%}
.journey-choice{border:1px solid var(--line-strong);border-radius:10px;background:white;padding:1.3rem;min-width:0}
.journey-choice:has(input:checked){border-color:var(--ink);box-shadow:inset 0 3px 0 var(--sage)}
.piece-label{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer}.piece-label input{flex:0 0 auto;margin-top:.4rem}
.piece-label span{min-width:0}.piece-label strong{display:block}.piece-label small{display:block;color:var(--muted);margin-top:.3rem}
.journey-choice>p{font-size:.9rem}.piece-edition{margin-top:1rem}.journey-review{position:static;border-top:5px solid var(--coral);background:#f5ede7;padding:1.6rem;border-radius:8px}
.journey-review button{width:100%;margin-top:.8rem}.journey-review li{font-size:.9rem;margin-block:.5rem}.journey-review h2{font-size:1.8rem}
.exact-choice{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem;min-width:0}.exact-choice img{width:100%;max-height:240px;object-fit:contain;background:#f7f7f5}
.exact-choice label{display:block;min-width:0;font-size:.85rem}.exact-choice select{width:100%;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}.exact-choice .fine{margin:0}
.selection-review{max-width:640px;width:calc(100% - 2rem);max-height:85dvh;padding:2rem;border:1px solid var(--line-strong);border-radius:12px;color:var(--ink)}
.selection-review::backdrop{background:#20364566}.selection-review h2{font-size:2rem}.selection-review li{margin-block:.7rem}.selection-review>button{margin:.5rem .5rem 0 0}
.saved-packet{border-top:1px solid var(--line)}.saved-packet-choice{display:flex;gap:.6rem;align-items:center;padding:1rem;border-top:1px solid var(--line);font-size:.9rem;cursor:pointer}
#saved-editions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.saved-edition-row{padding:1.2rem;border:1px solid var(--line-strong);border-radius:8px;background:white;min-width:0}.saved-edition-row h3{font-size:1.3rem}.bookmark-import{font-size:.85rem;max-width:260px}.bookmark-import input{max-width:100%;font-size:.8rem}.match-reason{font-weight:600;color:var(--ink);font-size:.85rem}.matched-editions{display:flex;gap:1rem;flex-wrap:wrap}
@media(max-width:900px){.journey-hero{gap:2rem}.journey-builder{grid-template-columns:minmax(0,1fr) 280px;gap:1.5rem}.journey-options{grid-template-columns:1fr}.journey-preparation{gap:2rem}#saved-editions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.journey-hero{grid-template-columns:1fr;padding-block:2rem}.journey-example{min-height:280px}.journey-preparation{grid-template-columns:1fr;gap:1rem}.journey-builder{display:flex;flex-direction:column;gap:1.5rem}.journey-builder>div,.journey-review{width:100%}.journey-review{position:static}.journey-options{grid-template-columns:1fr}#saved-editions{grid-template-columns:1fr}.selection-review{padding:1.3rem}.saved-packet .section-head{display:block}}

/* Keep the review before optional choices in both reading and focus order. */
.journey-builder-heading{grid-column:1/-1}
.journey-recommended,.journey-more{grid-column:1;min-width:0}
.journey-review{grid-column:2;grid-row:2;scroll-margin-block:1rem}
.journey-more{border:1px solid var(--line-strong);border-radius:10px;padding:1.2rem;background:white}
.journey-more>summary{font-weight:600;cursor:pointer;padding:.3rem}
.journey-compact{background:var(--sage-soft,#e7eeeb);border-radius:8px;padding:.8rem 1rem;display:none}
.journey-review #project-selected button{width:auto;text-align:left;margin:0;font-size:inherit;min-height:44px}
.journey-recommended>h3{margin-top:0}
.page-map{margin-block:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:8px;background:var(--paper,#fff)}
.page-map>summary,.file-page-map>summary{cursor:pointer;font-weight:600;min-height:32px;overflow-wrap:anywhere}
.page-map ul,.file-page-map ul{padding-left:1.2rem;font-size:.85rem;line-height:1.6;overflow-wrap:anywhere}
.page-map .fine{margin-bottom:0}.file-page-map{margin:.35rem 0 .9rem}
@media(max-width:640px){.journey-compact:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem}.journey-compact a{display:inline-flex;align-items:center;min-height:44px}.journey-builder>details{width:100%}.journey-review{padding:1.2rem}.journey-review h2{font-size:1.5rem}}