/* THE SHELF: stylesheet. Fraunces for headings, Public Sans for reading, IBM Plex Mono for file names and sizes. Three looks: index, slate, midnight. */
/* Fallbacks sized to sit close to the web faces while those load (approximate; the page keeps its shape either way). */
@font-face { font-family: "Fraunces Fallback"; font-weight: 400 600; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; font-weight: 700 900; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Public Sans Fallback"; font-weight: 400 500; src: local("Arial"), local("ArialMT"); size-adjust: 104%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Public Sans Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 102%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; font-weight: 400 500; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }
:root {
  --font-head: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", "Public Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 0px;
  --wrap: 1180px;
  --rail-w: 0px;
  --bg: #f6f1e7; --bg2: #ebe3d1; --panel: #fffcf5; --line: #cfc4ad;
  --ink: #17181d; --ink2: #494b54;
  --accent: #2646c9; --accent-ink: #ffffff; --link: #2646c9; --flag: #b92f12;
  --rail: #17181d; --rail-ink: #f6f1e7; --rail-dim: #cbc4b3; --rail-line: rgba(246,241,231,.22);
  --hero-a: #f6f1e7; --hero-b: #ebe3d1; --hero-ink: #17181d;
  --mote: rgba(38,70,201,.26); --lamp: rgba(38,70,201,.12); --grain: rgba(23,24,29,.05);
  --foot: #17181d; --foot-ink: #d9d1bf;
  --ok: #1f6a3f; --warn: #a8741a; --bad: #b92f12;
  --saffron: #eaa51f; --saffron-t: #f3d27a; --sky: #c9d8f5; --sage: #cfdcc8; --blush: #f0cdbf; --lilac: #d8d2ec; --forest: #17402f;
  --shadow: 0 1px 2px rgba(23,24,29,.22), 0 16px 30px -14px rgba(23,24,29,.4);
}
html[data-look="slate"] {
  --bg: #eef0f2; --bg2: #e0e5ea; --panel: #ffffff; --line: #c3ccd4; --ink: #16212b; --ink2: #44525f;
  --accent: #0b6b6a; --accent-ink: #ffffff; --link: #0a5f5e; --flag: #a8321a;
  --rail: #16212b; --rail-ink: #eef0f2; --rail-dim: #b4c0cb;
  --hero-a: #eef0f2; --hero-b: #e0e5ea; --hero-ink: #16212b; --mote: rgba(14,124,123,.3); --lamp: rgba(14,124,123,.12); --grain: rgba(22,33,43,.05);
  --foot: #101922; --foot-ink: #c3ccd5;
}
html[data-look="midnight"] {
  --bg: #12161f; --bg2: #1a1f2b; --panel: #1b212d; --line: #36405a; --ink: #f1ede4; --ink2: #bcc1cd;
  --accent: #e0a32e; --accent-ink: #1a1406; --link: #f0bf5c; --flag: #ff9a8a;
  --rail: #0c0f15; --rail-ink: #f1ede4; --rail-dim: #aeb4c0; --rail-line: rgba(255,255,255,.14);
  --hero-a: #12161f; --hero-b: #1a1f2b; --hero-ink: #f1ede4; --mote: rgba(224,163,46,.4); --lamp: rgba(224,163,46,.14); --grain: rgba(255,255,255,.04);
  --foot: #0c0f15; --foot-ink: #aeb4c0;
  --ok: #7ad39a; --bad: #ff9a8a;
}
html[data-font="fraunces"] { --font-head: "Fraunces", "Fraunces Fallback", Georgia, serif; }
html[data-font="public"] { --font-head: "Public Sans", "Public Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
html[data-font="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-corners="round"] { --radius: 14px; }
html[data-corners="sharp"] { --radius: 0px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16.5px/1.6 var(--font-body); }
img, svg { max-width: 100%; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.14; margin: 0 0 .5em; text-wrap: balance; font-weight: 500; font-optical-sizing: auto; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
h3 { font-size: 1.18rem; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; z-index: 50; border-radius: 0; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tiny { font-size: .85rem; color: var(--ink2); }
.lead { font-size: 1.08rem; color: var(--ink2); max-width: 38em; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.mono, .kicker, .when, .badge, .meta, .rowprice, .chip b, .ct, .no, .fname, .fext, .fkb, .spec { font-family: var(--font-mono); }
.kicker, .when, .badge, .foot-head, .rail-head { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 500; }

/* Buttons and chips */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 1.5px solid var(--accent); border-radius: 0; padding: 11px 20px; font: 600 .94rem/1.1 var(--font-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; }
.btn.big { padding: 15px 26px; font-size: 1rem; }
.btn.small { padding: 8px 14px; font-size: .86rem; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink2); }
.hero .btn.ghost { color: var(--hero-ink); border-color: var(--hero-ink); }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.btn[disabled], .btn.soldout { opacity: .55; cursor: not-allowed; }
.btn.soldout { background: var(--ink2); border-color: var(--ink2); color: #fff; }
.chip { display: inline-block; background: var(--bg2); border: 1px solid var(--line); border-radius: 0; padding: 4px 12px; font: 500 .82rem/1.3 var(--font-body); color: var(--ink); cursor: pointer; }

/* Notice line (free shipping) and the demo ribbon */
.ribbon { background: #fff4d6; color: #3a2a00; border-bottom: 3px solid #e2b23a; font-size: .92rem; }
.ribbon .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 8px 0; }
.ribbon p { margin: 0; }
.ribbon a { color: #7a4a00; }
.yours { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 0; }
.yours label { display: flex; flex-direction: column; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #3a2a00; }
.yours input, .yours select { width: 150px; border: 1px solid #b89658; background: #fff; color: #222; border-radius: 0; padding: 6px 8px; margin: 2px 0 0; font: inherit; font-size: .9rem; }
.yours .btn.small { background: #7a4a00; border-color: #7a4a00; color: #fff; }
.yours .btn.small.ghost { background: transparent; color: #7a4a00; }
.yours .yours-lead { margin: 0; flex: 1 1 100%; }
@media (max-width: 720px) { .yours { display: grid; grid-template-columns: 1fr 1fr; } .yours .yours-lead { grid-column: 1 / -1; } .yours input, .yours select { width: 100%; } }

/* Language picker */
.langpick { position: relative; }
.langpick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 0; border: 1px solid var(--line); font-size: .85rem; }
.langpick summary::-webkit-details-marker { display: none; }
.globe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langmenu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; min-width: 160px; z-index: 30; list-style: none; margin: 0; }
.langmenu a { display: block; padding: 6px 10px; text-decoration: none; color: var(--ink); border-radius: 0; white-space: nowrap; }
.langmenu a:hover, .langmenu a[aria-current="true"] { background: var(--bg2); }

/* the language switch: EN and ES are plain buttons in the top bar, always visible, the current one filled in */
.langpick-inline { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.langpick-inline .globe { width: 16px; height: 16px; margin: 0 2px 0 8px; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--ink2); flex: none; }
.langpick-inline a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 0; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; color: var(--ink2); }
.langpick-inline a:hover { color: var(--ink); background: var(--bg2); }
.langpick-inline a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.langpick-inline a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Forms */
label { display: block; font-weight: 500; font-size: .95rem; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; width: 100%; margin-top: 4px; }
input[type="color"] { width: 48px; height: 36px; padding: 2px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.block { margin-bottom: 14px; }
.hp { position: absolute; left: -9999px; }
label.hp input { width: 12rem; }
.form-status { min-height: 1.4em; font-weight: 500; }
.quote { border-top: 1px solid var(--line); padding-top: 24px; }
.receipt { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 18px 20px; border-radius: 0; }
.signup { border-top: 1px solid var(--line); }
.signup-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.signup-form input { flex: 1 1 240px; margin: 0; }
.fallback { background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; border-radius: 0; }

/* Owner panel */
.owner { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.22); z-index: 40; overflow-y: auto; padding: 0 18px 30px; font-size: .95rem; }
.owner[hidden] { display: none; }
.owner-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.owner-title { font: 600 1.1rem var(--font-head); }
.owner-title .tiny { display: block; font: .8rem var(--font-body); }
.x { width: 34px; height: 34px; border-radius: 0; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font-size: 1.1rem; cursor: pointer; flex: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; }
.tabs button { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 6px 11px; font: 500 .8rem var(--font-body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pane[hidden] { display: none; }
.pane .lead { font-size: 1rem; }
.pane label { margin-bottom: 8px; }
.pane .row label { flex: 1 1 160px; }
.looks { display: grid; gap: 8px; margin: 0 0 14px; }
.look { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; text-align: left; background: var(--bg2); color: var(--ink); border: 2px solid var(--line); border-radius: 0; padding: 10px; font: inherit; cursor: pointer; }
.look[aria-pressed="true"] { border-color: var(--accent); }
.look small { display: block; color: var(--ink2); }
.swatch { width: 34px; height: 34px; border-radius: 0; border: 1px solid rgba(0,0,0,.15); }
.sections { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sections li { display: flex; align-items: center; gap: 8px; background: var(--bg2); padding: 8px 10px; border-radius: 0; }
.sections li b { flex: 1; font-weight: 500; }
.sections li.off b { text-decoration: line-through; color: var(--ink2); }
.sections button { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 0; padding: 4px 8px; font: .8rem var(--font-body); cursor: pointer; }
.sections select { font: inherit; font-size: .85rem; max-width: 40%; }
.sections li[data-sec] { flex-wrap: wrap; }
.sections li small[data-diff] { flex-basis: 100%; font-size: .8rem; color: var(--ink2); }
.checks { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.checks li { padding: 8px 10px; background: var(--bg2); border-left: 4px solid var(--ok); border-radius: 0; }
.checks li.warn { border-left-color: var(--warn); }
.checks li.bad { border-left-color: var(--bad); }
.ld { background: var(--bg2); padding: 10px; font-size: .75rem; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.ai-team { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ai-team li { background: var(--bg2); padding: 8px 10px; border-radius: 0; }
.ai-team a { display: block; }
.url { display: block; background: var(--bg2); padding: 8px 10px; word-break: break-all; font-size: .85rem; margin: 6px 0 10px; }
.benches span { display: block; color: var(--ink2); font-size: .88rem; }
.answer { white-space: pre-wrap; background: var(--bg2); padding: 10px 12px; border-radius: 0; }
.answer:empty { display: none; }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.nums div { background: var(--bg2); padding: 10px 12px; border-radius: 0; }
.nums dt { color: var(--ink2); font-size: .8rem; }
.nums dd { margin: 0; font: 600 1.8rem var(--font-head); font-variant-numeric: tabular-nums; }
body.editing [data-edit] { outline: 2px dashed var(--accent); outline-offset: 3px; }
[data-edit][contenteditable="true"]:focus { outline: 3px solid var(--accent); }

/* Front desk */
.desk-open { position: fixed; left: 16px; bottom: 16px; z-index: 26; border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.desk-open[hidden] { display: none; }
@media (max-width: 720px) { .desk-open { bottom: 76px; } }
/* the floating desk button sits above the call bar on phones; the footer ends clear of both so the Owner link stays tappable */
@media (max-width: 720px) { body:has(.desk-open:not([hidden])) .foot { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 721px) { body:has(.desk-open:not([hidden])) .foot { padding-bottom: 96px; } }
.desk-panel { position: fixed; left: 16px; bottom: 16px; width: min(380px, calc(100% - 32px)); max-height: min(70vh, 560px); background: var(--panel); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 12px 40px rgba(0,0,0,.25); z-index: 41; padding: 0 14px 14px; display: flex; flex-direction: column; }
.desk-panel[hidden] { display: none; }
.desk-panel .owner-head { padding: 12px 0 8px; }
.desk-log { overflow-y: auto; flex: 1; display: grid; gap: 8px; margin: 10px 0; align-content: start; }
.desk-log p { margin: 0; padding: 8px 12px; background: var(--bg2); border-radius: 0; max-width: 92%; font-size: .94rem; }
.desk-log p.you { background: var(--accent); color: var(--accent-ink); margin-left: auto; }
.starters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.starters .chip { border: 0; }
.desk-form { display: flex; gap: 6px; }
.desk-form input { margin: 0; }

/* The look peek in the demo ribbon: three swatch buttons, each a whole look, pressed one outlined */
.peek { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.peek-cap { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; }
.peek-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #3a2a00; border: 2px solid #d9c08a; border-radius: 0; padding: 4px 12px 4px 5px; font-size: .82rem; font-weight: 600; line-height: 1.2; font-family: inherit; cursor: pointer; }
.peek-btn .swatch { width: 18px; height: 18px; border-radius: 0; border: 1px solid rgba(0,0,0,.2); }
.peek-btn:hover { border-color: #7a4a00; }
.peek-btn[aria-pressed="true"] { border-color: #3a2a00; background: #3a2a00; color: #fff; }
/* On phones the caption takes its own line, so the three buttons wrap the same before and after the web font loads */
@media (max-width: 720px) { .peek { grid-column: 1 / -1; } .peek-cap { flex-basis: 100%; } }

/* ---------- v6.6 Point and change: the Customize button and the editor ---------- */
.q-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.q-cz { display: grid; gap: 2px; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; font: inherit; cursor: pointer; }
.q-cz b { font: 600 .95rem var(--font-head); }
.q-cz small { font-size: .78rem; color: var(--ink2); line-height: 1.3; }
.q-cz[aria-pressed="true"] { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.q-cz:focus-visible { outline: 2px solid #1D67CD; outline-offset: 2px; }
#cz { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.cz-box, .cz-sec-box { position: fixed; border-radius: 0; pointer-events: none; transition: all .08s ease-out; }
.cz-box { outline: 3px solid #1D67CD; outline-offset: 2px; background: rgba(29,103,205,.08); }
.cz-sec-box { outline: 2px dashed rgba(29,103,205,.75); outline-offset: -2px; }
.cz-sec-box.whole { outline-style: solid; outline-width: 3px; background: rgba(29,103,205,.06); }
.cz-chip { position: absolute; left: 0; top: -30px; background: #1D67CD; color: #fff; font: 600 .78rem/1 var(--font-body); padding: 7px 10px; border-radius: 0; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.cz-sec-chip { top: 6px; left: 6px; background: rgba(20,40,90,.88); }
.cz-box[hidden], .cz-sec-box[hidden] { display: none; }
.cz-pop { position: fixed; z-index: 48; width: min(380px, calc(100vw - 24px)); max-height: min(78vh, 620px); overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 18px 50px rgba(10,20,50,.3); padding: 12px 16px 16px; font-size: .95rem; }
.cz-pop[hidden] { display: none; }
.cz-pop.sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-height: 82vh; max-height: 82dvh; border-radius: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.cz-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cz-pop-head h2 { margin: 0; font: 600 1.05rem var(--font-head); outline: none; }
.cz-pop label { display: block; font-weight: 600; font-size: .88rem; margin: 10px 0 4px; }
.cz-pop textarea { min-height: 90px; }
.cz-acts { display: grid; gap: 6px; }
.cz-act { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; font: inherit; cursor: pointer; }
.cz-act b { font-size: .95rem; }
.cz-act small { font-size: .8rem; color: var(--ink2); line-height: 1.3; }
.cz-act:hover, .cz-act:focus-visible { border-color: #1D67CD; box-shadow: inset 0 0 0 1px #1D67CD; }
.cz-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.cz-hint { font-size: .82rem; color: var(--ink2); margin: 6px 0 0; }
.cz-msg { font-size: .88rem; margin: 8px 0 0; min-height: 0; }
.cz-msg:empty, .cz-answer:empty { display: none; }
.cz-answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; font-size: .88rem; margin: 10px 0 0; max-height: 240px; overflow: auto; }
.cz-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 46; width: min(620px, calc(100vw - 24px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 12px 36px rgba(10,20,50,.28); padding: 10px 14px; font-size: .92rem; }
.cz-bar[hidden] { display: none; }
.cz-bar p { margin: 0; }
.cz-bar .cz-note:empty { display: none; }
.cz-bar .cz-note { margin-top: 4px; font-size: .85rem; color: var(--ink2); }
.cz-bar .cz-row { margin-top: 8px; }
@media (max-width: 720px) { .cz-bar { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
body.customizing main * { cursor: pointer; }
@media (max-width: 720px) { body.customizing .callbar { display: none; } }
.cz-added { margin-top: 18px; }
.cz-added.cz-text p { max-width: 42rem; }
.cz-pic { display: block; max-width: 100%; height: auto; border-radius: 0; }
.cz-sec .wrap > :first-child { margin-top: 0; }
.cz-sec .wrap > h2 + p { margin-inline: auto; text-align: center; max-width: 42rem; }
[data-layout="center"] { text-align: center; }
[data-layout="center"] .cz-pic { margin-inline: auto; }
[data-layout="narrow"] > .wrap { max-width: 760px; }
[data-layout="shade"] { background: var(--bg2); }
.cz-flash { animation: cz-flash 1.2s ease-out; }
@keyframes cz-flash { 0% { box-shadow: inset 0 0 0 4px #1D67CD, 0 0 0 4px rgba(29,103,205,.35); } 100% { box-shadow: inset 0 0 0 4px rgba(29,103,205,0), 0 0 0 4px rgba(29,103,205,0); } }
@media (prefers-reduced-motion: reduce) { .cz-flash { animation: none; box-shadow: inset 0 0 0 4px #1D67CD; } }
.cz-peek { box-shadow: inset 0 0 0 4px rgba(29,103,205,.7); }

/* A section's own look, set in Customize, whole section, Look (lib/added.cjs look() writes the --s-* values).
   Panels inside the section (cards, forms, tables) keep the site's own ink, so words on white stay dark. */
html { --pink: var(--ink); --pink2: var(--ink2); --pmuted: var(--muted); }
main > section[data-s-fg] { color: var(--s-fg); --ink: var(--s-fg); --ink2: var(--s-fg); --muted: var(--s-fg); --hero-ink: var(--s-fg); }
main > section[data-s-fg] :is(.sub, .kicker, .lead, .tiny, .btn.ghost) { color: var(--s-fg); }
main > section[data-s-fg] .btn.ghost { border-color: var(--s-fg); }
main > section[data-s-fg] :is(.still, .cover, .hero-in, .item, .lic, .bundle, .files, .receipt, .fallback, .cz-card:not([data-s-card]), input, select, textarea) { --ink: var(--pink); --ink2: var(--pink2); --muted: var(--pmuted); color: var(--pink); }
main > section[data-s-head] :is(h1, h2, h3):not(:is(.still, .cover, .hero-in, .item, .lic, .bundle, .files, .receipt, .fallback, .cz-card) *) { color: var(--s-head); }
main > section[data-s-bg]:not([data-s-pic]) { background: var(--s-bg); }
main > section[data-s-bg]:not([data-s-pic])::before, main > section[data-s-pic]::before { display: none; }
main > section[data-s-pic] { background-image: linear-gradient(rgba(16,20,26,.62), rgba(16,20,26,.72)), var(--hero-photo); background-size: cover; background-position: center; }
main > section[data-s-pic][data-s-bg] { background-image: linear-gradient(color-mix(in srgb, var(--s-bg) 72%, transparent), color-mix(in srgb, var(--s-bg) 80%, transparent)), var(--hero-photo); }
main > section[data-s-pic] :is(h1, h2, .sub, .lead) { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
main > section[data-s-pic][data-s-bg] :is(h1, h2, .sub, .lead) { text-shadow: none; }
main > section[data-s-pic]:not(#_) { background-size: cover; background-position: center; background-repeat: no-repeat; }
main > section[data-s-btn] { --accent: var(--s-btn); --accent-ink: var(--s-btn-ink); }
main > section[data-s-font="fraunces"] { --font-body: "Fraunces", "Fraunces Fallback", Georgia, serif; }
main > section[data-s-font="public"] { --font-body: "Public Sans", "Public Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
main > section[data-s-font="serif"] { --font-body: Georgia, "Times New Roman", serif; }
main > section[data-s-font="system"] { --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-font] { font-family: var(--font-body); }
main > section[data-s-hfont="fraunces"] { --font-head: "Fraunces", "Fraunces Fallback", Georgia, serif; }
main > section[data-s-hfont="public"] { --font-head: "Public Sans", "Public Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
main > section[data-s-hfont="serif"] { --font-head: Georgia, "Times New Roman", serif; }
main > section[data-s-hfont="system"] { --font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main > section[data-s-size="s"] { --s-k: .88; }
main > section[data-s-size="l"] { --s-k: 1.14; }
main > section[data-s-size="xl"] { --s-k: 1.3; }
main > section[data-s-size] { font-size: calc(16.5px * var(--s-k)); }
main > section[data-s-size] h1 { font-size: calc(clamp(2.3rem, 6vw, 4.3rem) * var(--s-k)); }
main > section[data-s-size] h2 { font-size: calc(clamp(1.7rem, 3.6vw, 2.5rem) * var(--s-k)); }
main > section[data-s-size] :is(h3, h2.h3) { font-size: calc(1.25rem * var(--s-k)); }
main > section[data-s-size] :is(.lead, .sub) { font-size: calc(1.1rem * var(--s-k)); }
main > section[data-s-space="tight"] { padding-block: clamp(24px, 3.5vw, 44px); }
main > section[data-s-space="roomy"] { padding-block: clamp(72px, 11vw, 150px); }
main > section[data-s-align="left"], main > section[data-s-align="left"] :is(h1, h2, .hero-in, .lead, .sub, p.center) { text-align: left; }
main > section[data-s-align="left"] :is(.lead, .sub) { margin-inline: 0; }
main > section[data-s-align="left"] .hero .ctas, main > section[data-s-align="left"].hero .ctas { justify-content: flex-start; }
main > section[data-s-align="center"], main > section[data-s-align="center"] :is(h1, h2, h3, p, .hero-in) { text-align: center; }
main > section[data-s-align="center"] :is(.lead, .sub, .cz-pic) { margin-inline: auto; }

/* Boxes the owner added: side by side cards, each with its own color if chosen */
.cz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; margin-top: 18px; }
.cz-cards > .cz-card { margin: 0; }
.cz-card { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 22px 22px 14px; }
.cz-card h3 { color: inherit; }
.cz-card[data-s-card] { background: var(--s-card); color: var(--s-card-ink); border-color: transparent; --ink: var(--s-card-ink); --ink2: var(--s-card-ink); }
.cz-picture[data-size="s"] .cz-pic { max-width: min(320px, 100%); }
.cz-picture[data-size="l"] .cz-pic { width: 100%; }

/* The whole-section editor: tabs, the parts list and color rows */
.cz-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 0 10px; padding: 3px; background: var(--bg2); border-radius: 0; }
.cz-tab { font: 600 .85rem/1.2 var(--font-body); padding: 8px 4px; border: 0; border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; }
.cz-tab[aria-selected="true"] { background: var(--panel); color: #1D67CD; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.cz-tab:focus-visible { outline: 2px solid #1D67CD; outline-offset: 1px; }
.cz-parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cz-part { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 0; font-size: .85rem; line-height: 1.35; }
.cz-part b { font-weight: 700; }
.cz-part.gone { opacity: .7; border-style: dashed; }
.cz-part-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-part-btns .btn.small { padding: 5px 10px; font-size: .8rem; }
.cz-color-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.cz-pop .cz-color-row label { margin: 0; flex: 1; }
.cz-pop .cz-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.cz-check input { width: auto; margin: 0; }


/* ===== THE SHELF: a paper catalogue. Book serif + sharp sans, cobalt on paper, square corners ===== */
h1, h2, h3 { font-weight: 600; letter-spacing: -.012em; }
.callbar { display: none !important; }
.noscript { padding: 10px 16px; background: var(--bg2); text-align: center; font-size: .9rem; margin: 0; }
.kicker { color: var(--flag); }
.mono, .badge, .meta, .rowprice, .chip b, .ct, .fname, .fext, .fkb, .spec, .when { font-feature-settings: "zero" 1; }

/* masthead: the name large, tools to the right, one ruled strip of five links under it */
.top { background: var(--bg); }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools" "nav nav"; align-items: end; column-gap: 24px; padding-top: 20px; }
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 600 clamp(1.55rem, 3.2vw, 2.3rem)/1 var(--font-head); letter-spacing: -.02em; padding-bottom: 16px; justify-self: start; }
.brand .mark { width: 38px; height: 38px; flex: none; }
.mark path { fill: var(--accent); stroke: none; }
.mark path:nth-child(2) { fill: var(--saffron); }
.mark path:nth-child(3) { fill: var(--flag); }
.mark path:nth-child(4) { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.mark .mark-cut { fill: none; stroke: var(--bg); stroke-width: 1.6; }
.tools { grid-area: tools; display: flex; align-items: center; gap: 14px; padding-bottom: 12px; }
.tools .btn.call { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 8px 14px; font: 500 .8rem/1 var(--font-mono); letter-spacing: .02em; }
.tools .btn.call:hover { background: var(--ink); color: var(--bg); }
.nav { grid-area: nav; display: flex; flex-wrap: wrap; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px 0 0; margin-right: 22px; color: var(--ink); text-decoration: none; font: 600 .84rem/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; position: relative; }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 22px; bottom: -1px; height: 4px; background: var(--accent); }
.nav a:not(:last-child)::before { content: ""; position: absolute; right: 0; top: 17px; width: 5px; height: 14px; background: var(--saffron); }
.langpick-inline { border-radius: 0; border: 1.5px solid var(--ink); background: transparent; }
.langpick-inline a { border-radius: 0; min-height: 44px; min-width: 44px; font-family: var(--font-mono); }
.langpick-inline a[aria-current="true"] { background: var(--ink); color: var(--bg); }
@media (max-width: 640px) {
  .bar { padding-top: 14px; column-gap: 10px; }
  .brand { font-size: 1.4rem; gap: 9px; padding-bottom: 12px; }
  .brand .mark { width: 30px; height: 30px; }
  .tools .btn.call { display: none; }
  .nav { flex-wrap: wrap; }
  .nav a { flex: none; min-height: 44px; padding-right: 9px; margin-right: 9px; font-size: .7rem; letter-spacing: .03em; }
  .nav a:not(:last-child)::before { top: 15px; }
  .nav a[aria-current="page"]::after { right: 9px; }
  .hero .still { position: static; display: block; margin: 12px 0 0 auto; }
}

/* buttons: square, mono-sharp */
.btn { border-radius: 0; border-width: 2px; padding: 12px 22px; font-weight: 600; transition: background .15s, color .15s, transform .15s; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn.big { padding: 16px 28px; font-size: 1.02rem; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* HERO: copy left, a stack of real pages on a flat saffron slab right */
.hero { color: var(--ink); }
.hero.home .hero-in { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(36px, 5vw, 64px) 0 clamp(30px, 4vw, 48px); }
.hero.home h1 { font-size: clamp(2.7rem, 5.9vw, 5.1rem); line-height: 1; letter-spacing: -.028em; margin: 14px 0 22px; text-wrap: balance; }
.hero .sub { font-size: 1.16rem; color: var(--ink2); max-width: 30em; margin: 0 0 26px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hero .kicker { margin: 0; }
.hero .kicker::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--saffron); margin-right: 10px; vertical-align: -2px; }
.hero { position: relative; }
.still { position: absolute; right: max(16px, calc((100% - var(--wrap)) / 2)); top: 10px; z-index: 5; min-height: 32px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font: 500 .72rem/1 var(--font-mono); letter-spacing: .04em; padding: 8px 10px; }
.collage { position: relative; background: var(--saffron); aspect-ratio: 1 / .9; box-shadow: 14px 14px 0 var(--ink); }
.collage .c { position: absolute; margin: 0; }
.collage .c-b { left: 6%; top: 9%; width: 43%; z-index: 2; }
.collage .c-c { left: 39%; top: 22%; width: 38%; z-index: 3; }
.collage .c-a { right: 5%; bottom: 8%; width: 30%; z-index: 4; }
.collage .c-a .cover { display: block; width: 100%; height: auto; box-shadow: var(--shadow); }
.collage .pv { width: 100%; }
.collage::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 6%; height: 0; border-top: 3px solid var(--ink); opacity: .0; }

.hero.small .hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 80px); align-items: end; padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 36px); }
.hero.small .hero-copy { display: contents; }
.hero.small .kicker { grid-column: 1 / -1; margin-bottom: 14px; }
.hero.small h1 { font-size: clamp(2.3rem, 4.8vw, 4rem); line-height: 1.02; margin: 0; letter-spacing: -.025em; }
.hero.small .sub { margin: 0; padding-bottom: 6px; font-size: 1.1rem; }
.hero.small { border-bottom: 1px solid var(--ink); }

/* the format index: one ruled strip of seven cells */
.index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.index li { border-left: 1px solid var(--ink); }
.index li:first-child { border-left: 0; }
.index a { display: grid; gap: 2px; padding: 14px 14px 16px; min-height: 92px; color: var(--ink); text-decoration: none; align-content: start; height: 100%; transition: background .15s; }
.index a:hover { background: var(--saffron-t); }
.index .no { font: 500 .7rem var(--font-mono); color: var(--flag); letter-spacing: .1em; }
.index .nm { font: 600 1.18rem/1.1 var(--font-head); }
.index .ct { font-size: .74rem; color: var(--ink2); }
@media (max-width: 1000px) { .index { grid-template-columns: repeat(4, minmax(0, 1fr)); } .index li { border-top: 1px solid var(--ink); } .index li:nth-child(-n+4) { border-top: 0; } .index li:nth-child(4n+1) { border-left: 0; } }
@media (max-width: 640px) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .index li { border-left: 1px solid var(--ink); } .index li:nth-child(odd) { border-left: 0; } .index li:nth-child(-n+4) { border-top: 1px solid var(--ink); } .index li:nth-child(-n+2) { border-top: 0; } .index li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .hero.home .hero-in { grid-template-columns: 1fr; }
  .collage { box-shadow: 8px 8px 0 var(--ink); margin-right: 8px; }
  .hero.small .hero-in { grid-template-columns: 1fr; row-gap: 14px; }
}


/* bands */
.band { padding: clamp(44px, 6vw, 84px) 0; }
.band.alt { background: var(--bg2); }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); border-top: 3px solid var(--ink); padding-top: 14px; }
.band-head h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.02; letter-spacing: -.022em; }
.band-head .lead { margin: 0; }
.more { margin: 28px 0 0; }
.more a { display: inline-flex; align-items: center; min-height: 44px; font: 600 .86rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 2px solid currentColor; }
.more a::after { content: "\2192"; margin-left: 10px; }
@media (max-width: 900px) { .band-head { grid-template-columns: 1fr; } }

/* product tints, matched to the covers */
.t-quiet-year { --tint: #cfdcf3; }
.t-field-notes { --tint: #d3dfc9; }
.t-small-studio { --tint: #a9c7b6; }
.t-wren-stitch { --tint: #f1cfc0; }
.t-warm-film { --tint: #ecd7a6; }
.t-price-it { --tint: #b9c7e4; }
.t-lantern-hours { --tint: #bdb8dc; }
.t-invoice-kit { --tint: #efe6c8; }

/* the art block: a cover and a real page standing on a plank */
.tile-art, .art { --h: 200px; position: relative; display: flex; align-items: flex-end; justify-content: safe center; background: var(--tint, var(--bg2)); height: var(--h); padding: 0 12px; border-bottom: 6px solid var(--ink); overflow: hidden; margin: 0; }
.tile-art { --h: clamp(250px, 27vw, 350px); padding: 0 clamp(14px, 2vw, 28px); }
.tile-art .cover, .art .cover { display: block; flex: none; height: calc(var(--h) * .8); width: calc(var(--h) * .64); object-fit: cover; box-shadow: var(--shadow); position: relative; z-index: 2; }
.tile-art .pv, .art .pv { flex: none; width: calc(var(--h) * .56); margin-left: calc(var(--h) * -.06); margin-bottom: calc(var(--h) * .05); position: relative; z-index: 1; }
.pv-s, .pv-m, .pv-l { }

/* mosaic: an editorial grid with two big tiles and two lesser ones */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.tile { display: flex; flex-direction: column; background: var(--panel); border: 1.5px solid var(--ink); grid-column: span 6; min-width: 0; }
.tile.n1 { grid-column: span 7; }
.tile.n2 { grid-column: span 5; }
.tile.n3 { grid-column: span 5; }
.tile.n4 { grid-column: span 7; }
.tile.n2 .tile-art, .tile.n3 .tile-art { --h: clamp(230px, 24vw, 310px); }
.tile-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.tile-body h3 { margin: 0; font-size: clamp(1.4rem, 2.3vw, 1.95rem); line-height: 1.08; letter-spacing: -.02em; }
.tile-body h3 a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.tile-body h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.short { margin: 0; color: var(--ink2); }
.badge { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--accent); }
.flag { display: inline-block; background: var(--flag); color: #fff; padding: 3px 7px; font: 500 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
h1 .flag { font-size: .8rem; margin-left: 10px; position: relative; top: -.4em; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; font-size: .76rem; color: var(--ink2); }
.meta > span { white-space: nowrap; }
.meta > span:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: .9em; background: var(--ink2); margin: 0 10px; vertical-align: -.1em; opacity: .5; }
.rowprice { margin: 0; font-size: .9rem; display: flex; align-items: baseline; gap: 8px; }
.rowprice .from { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink2); }
.rowprice .amount { font: 600 1.9rem/1 var(--font-head); color: var(--ink); letter-spacing: -.02em; }
.tile .rowprice { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .tile, .tile.n1, .tile.n2, .tile.n3, .tile.n4 { grid-column: 1 / -1; } .tile.n2 .tile-art, .tile.n3 .tile-art { --h: 270px; } .tile-art { --h: 270px; } }

/* shelf page: tab-strip filter and ruled rows */
.formats-band { padding: 26px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--ink); background: var(--panel); }
.chip { border-radius: 0; border: 0; border-right: 1px solid var(--ink); background: transparent; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font: 600 .9rem var(--font-body); color: var(--ink); text-decoration: none; flex: 1 1 auto; justify-content: center; }
.chip:last-of-type { border-right: 0; }
.chip b { font-size: .72rem; font-weight: 500; color: var(--ink2); }
.chip:hover { background: var(--saffron-t); }
.chip[aria-current="true"], .chip[aria-current="page"], .chip:target { background: var(--ink); color: var(--bg); }
.chip[aria-current="true"] b { color: var(--rail-dim); }
.filter-note { margin: 10px 0 0; min-height: 1.4em; }
.shelf-band { padding-top: 20px; }
.sample-line { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 0 0 32px; padding: 12px 16px; background: var(--saffron-t); border-left: 6px solid var(--saffron); font-size: .95rem; }
.sample-line a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.groups { display: block; }
.groups:has(.kind-group:target) .kind-group:not(:target) { display: none; }
.kind-group { margin-bottom: 48px; scroll-margin-top: 20px; }
.group-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 40px; align-items: baseline; border-top: 3px solid var(--ink); padding-top: 12px; margin-bottom: 10px; }
.group-head h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.022em; }
.group-head .lead { margin: 0; font-size: 1rem; }
.items { display: grid; grid-template-columns: 1fr; }
.item { display: grid; grid-template-columns: 210px minmax(0, 1fr) 170px; gap: 8px 28px; align-items: center; padding: 22px 0; grid-template-areas: "art body buy"; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item > .art { grid-area: art; }
.item-body { grid-area: body; }
.item-buy { grid-area: buy; }
.item .art { --h: 172px; padding: 0 8px; align-self: start; }
.item-body { display: grid; gap: 8px; align-content: center; }
.item-body h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.8rem); letter-spacing: -.018em; line-height: 1.1; }
.item-body h3 a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.item-body h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.fmts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fmts li { font: 500 .68rem var(--font-mono); letter-spacing: .1em; border: 1px solid var(--ink2); padding: 3px 7px; color: var(--ink2); text-transform: uppercase; }
.item-buy { display: grid; gap: 12px; justify-items: start; align-content: center; padding-left: 24px; border-left: 1px solid var(--line); }
.look { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; font: 600 .78rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.look:hover { background: var(--ink); color: var(--bg); }
.shelf-note { margin-top: 8px; }
@media (max-width: 900px) {
  .item { grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "art body" "buy buy"; }
  .item .art { --h: 124px; padding: 0 6px; }
  .item-buy { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: space-between; align-items: center; padding: 0; border: 0; }
  .group-head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .item { grid-template-columns: 1fr; grid-template-areas: "art" "body" "buy"; }
  .item .art { --h: 230px; }
  .chip { flex: 1 1 40%; }
  .chip { border-bottom: 1px solid var(--ink); }
}


/* product page */
.product-band { padding: clamp(24px, 4vw, 52px) 0 clamp(36px, 5vw, 64px); }
.product-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cover-big { position: sticky; top: 16px; background: var(--tint, var(--bg2)); padding: clamp(28px, 5vw, 64px); border-bottom: 8px solid var(--ink); display: flex; justify-content: center; margin: 0; }
.cover-big .cover { display: block; width: min(100%, 380px); height: auto; box-shadow: var(--shadow); }
.product-copy > * { max-width: 40rem; }
.product-copy .kicker { margin: 0 0 14px; font-size: .74rem; }
.product-copy .kicker a { color: var(--flag); }
.product-copy h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -.026em; margin: 0 0 14px; }
.product-copy .lead { font-size: 1.15rem; color: var(--ink); margin: 0 0 18px; }
.spec { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 22px; padding: 10px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: .78rem; }
.spec > span + span::before { content: ""; display: inline-block; width: 1px; height: .9em; background: var(--ink); margin: 0 12px; vertical-align: -.1em; opacity: .5; }
.tierpick { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.tierpick legend { font: 600 .74rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 0; margin-bottom: 8px; color: var(--ink2); }
.tier { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "radio name price" "radio sum price"; gap: 0 14px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--ink); background: var(--panel); cursor: pointer; margin: 0; }
.tier input { grid-area: radio; width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--accent); }
.tier .t-name { grid-area: name; font: 600 1.08rem var(--font-head); }
.tier .t-sum { grid-area: sum; font-size: .88rem; color: var(--ink2); font-weight: 400; }
.tier .t-price { grid-area: price; font: 600 1.7rem/1 var(--font-head); letter-spacing: -.02em; }
.tier:has(input:checked) { background: var(--saffron-t); box-shadow: 5px 5px 0 var(--ink); }
.tier:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.price.big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 14px; }
.price .amount { font: 600 clamp(2.6rem, 5vw, 3.6rem)/1 var(--font-head); letter-spacing: -.03em; }
.price .lic-now { font: 500 .8rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); }
.price s.was { font: 500 1.1rem var(--font-mono); color: var(--ink2); text-decoration-thickness: 2px; text-decoration-color: var(--flag); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.pay-note { margin: 0 0 22px; max-width: 34rem; }
.bundle-offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; padding: 12px 16px; background: var(--sky); border-left: 6px solid var(--accent); font-size: .95rem; }
.bundle-offer .bo-l { font: 600 .72rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.bundle-offer a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.bundle-offer .bo-p { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; }
.bundle-offer s { color: var(--ink2); text-decoration-color: var(--flag); text-decoration-thickness: 2px; }
.bundle-offer .save { font: 600 .72rem var(--font-mono); background: var(--flag); color: #fff; padding: 3px 7px; text-transform: uppercase; letter-spacing: .06em; }
.facts { margin: 22px 0; border-top: 3px solid var(--ink); }
.facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 600 .72rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--flag); padding-top: 3px; }
.facts dd { margin: 0; }
.facts dd a { display: inline-block; padding-block: 2px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 4px; }
.steps li { counter-increment: st; display: flex; gap: 12px; align-items: baseline; }
.steps li::before { content: counter(st); font: 600 .78rem var(--font-mono); color: var(--accent); min-width: 1.2em; }
@media (max-width: 900px) { .product-in { grid-template-columns: 1fr; } .cover-big { position: static; } .facts > div { grid-template-columns: 1fr; gap: 4px; } }

/* inside: the actual pages and the actual files */
.inside-band { background: var(--sky); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.inside-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.inside-pages { display: flex; justify-content: center; margin: 0; }
.inside-pages .pv { width: min(100%, 420px); box-shadow: 12px 12px 0 var(--ink); }
.inside-text h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); letter-spacing: -.024em; line-height: 1.02; margin: 0 0 12px; }
.files { list-style: none; margin: 22px 0; padding: 0; background: var(--panel); border: 1.5px solid var(--ink); }
.files li { display: grid; grid-template-columns: minmax(0, 1fr) 54px 74px; gap: 12px; align-items: baseline; padding: 11px 16px; border-top: 1px solid var(--line); font-size: .82rem; }
.files li:first-child { border-top: 0; }
.fname { overflow-wrap: anywhere; }
.fext { color: var(--accent); font-weight: 500; }
.fkb { text-align: right; color: var(--ink2); }
.files .ftotal { background: var(--ink); color: var(--bg); font-weight: 500; }
.files .ftotal .fkb { color: var(--saffron); }
.files .ftotal .fname { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }
.inside-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.inside-grid h3 { font: 600 .74rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #9a2a12; margin-bottom: 8px; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 5px 0 5px 20px; position: relative; }
.plain li::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 8px; background: var(--saffron); }
@media (max-width: 900px) { .inside-split { grid-template-columns: 1fr; } .inside-grid { grid-template-columns: 1fr; } .inside-pages .pv { width: min(100%, 340px); box-shadow: 8px 8px 0 var(--ink); } }

/* licenses */
.lic-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.lic { background: var(--panel); border: 1.5px solid var(--ink); border-top: 8px solid var(--accent); padding: 22px 24px 26px; }
.lic:nth-child(2) { border-top-color: var(--flag); }
.lic h2, .lic h3 { margin: 0 0 6px; letter-spacing: -.02em; }
.lic h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.lic h3 .mono { font-size: 1.2rem; color: var(--accent); margin-left: 6px; }
.lic h3 { font-size: 1.5rem; display: flex; align-items: baseline; justify-content: space-between; }
.lic .lead { margin: 0 0 14px; font-size: 1rem; }
.lic .yes, .lic .no { list-style: none; margin: 0 0 10px; padding: 0; }
.lic .yes li, .lic .no li { padding: 7px 0 7px 28px; position: relative; border-top: 1px solid var(--line); }
.lic .yes li::before { content: "+"; position: absolute; left: 0; font: 700 1.05rem var(--font-mono); color: var(--ok); }
.lic .no li::before { content: "\2013"; position: absolute; left: 0; font: 700 1.05rem var(--font-mono); color: var(--bad); }
.lic > h3:not(:first-child) { font: 600 .74rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-top: 18px; display: block; }
.lic .no { font-family: var(--font-body); }
.licenses-band .tiny { margin-top: 22px; max-width: 46rem; }
@media (max-width: 800px) { .lic-cols { grid-template-columns: 1fr; } }
.related-band { border-top: 1.5px solid var(--ink); }
.related-band h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.related-band .item { grid-template-columns: 170px minmax(0, 1fr) 160px; }
.related-band .item .art { --h: 180px; }
@media (max-width: 900px) { .related-band .item { grid-template-columns: 130px minmax(0, 1fr); } .related-band .item .art { --h: 150px; } }
@media (max-width: 560px) { .related-band .item { grid-template-columns: 1fr; } .related-band .item .art { --h: 220px; } }

/* bundles */
.bundles { display: grid; gap: clamp(28px, 4vw, 48px); }
.bundle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--panel); border: 1.5px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.stack { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 36px 28px 0; background: var(--saffron-t); border-bottom: 6px solid var(--ink); min-height: 300px; }
.stack .cover { width: 36%; height: auto; flex: none; box-shadow: var(--shadow); margin-left: -7%; position: relative; }
.stack .cover:first-child { margin-left: 0; z-index: 1; margin-bottom: 0; }
.stack .cover:nth-child(2) { z-index: 3; margin-bottom: 0; transform: translateY(-18px); }
.stack .cover:nth-child(3) { z-index: 2; }
.bundle:nth-child(2) .stack { background: var(--blush); }
.bundle-body { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 4px; }
.bundle-body h2, .bundle-body h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.022em; margin: 0 0 4px; line-height: 1.04; }
.bundle-body .lead { margin: 0 0 12px; font-size: 1.02rem; }
.bundle .plain { margin-bottom: 14px; }
.bundle .plain li { display: flex; justify-content: space-between; gap: 16px; border-top: 1px dotted var(--ink2); padding-left: 0; }
.bundle .plain li::before { display: none; }
.bundle .plain a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
.bundle .price.big { margin: 6px 0 14px; }
.bundle .price .amount { font-size: clamp(2.8rem, 5vw, 4rem); color: var(--accent); }
.bundle .price s.was { font-size: 1.3rem; }
.bundle .price .lic-now { flex-basis: 100%; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--ok); }
.bundles-band.teaser .bundles { grid-template-columns: 1fr 1fr; align-items: stretch; }
.bundles-band.teaser .bundle { grid-template-columns: 1fr; box-shadow: 8px 8px 0 var(--ink); }
.bundles-band.teaser .stack { min-height: 250px; }
@media (max-width: 900px) { .bundle, .bundles-band.teaser .bundles { grid-template-columns: 1fr; } .bundle { box-shadow: 6px 6px 0 var(--ink); } .stack { min-height: 240px; } }


/* page previews: real typeset pages, sized in container units so they scale from tile to hero */
.pv > * { font-size: 3.1cqw; }
.pv { container-type: inline-size; aspect-ratio: 17 / 22; background: #fffdf7; color: #1d1e24; margin: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; font-family: var(--font-body); line-height: 1.3; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.pv > * { margin: 0 7cqw; flex: none; }
.pv .pv-top { display: flex; justify-content: space-between; margin-top: 6cqw; padding-bottom: 2cqw; border-bottom: .35cqw solid #1d1e24; font: 500 2.5cqw var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: #55565e; }
.pv .pv-h { font: 600 8.6cqw/1.02 var(--font-head); letter-spacing: -.02em; margin-top: 5cqw; }
.pv .pv-kick { font: 500 2.5cqw var(--font-mono); text-transform: uppercase; letter-spacing: .09em; color: #b92f12; margin-top: 2cqw; }
.pv .pv-sub { font: 600 4.3cqw var(--font-head); margin-top: 4cqw; border-top: .35cqw solid #1d1e24; padding-top: 2cqw; }
.pv .pv-ol { padding: 0; margin-top: 1.4cqw; margin-left: 11cqw; font-size: 3.2cqw; }
.pv .pv-ol li { margin-top: .8cqw; }
.pv .pv-folio { margin-top: auto; margin-bottom: 5cqw; text-align: center; font: 500 2.6cqw var(--font-mono); color: #55565e; }
.pv .body { font: 400 3.3cqw/1.5 var(--font-head); margin-top: 3cqw; hyphens: auto; }
.pv .body.small { font-size: 2.8cqw; margin-top: auto; margin-bottom: 6cqw; color: #55565e; font-family: var(--font-body); }
.pv .drop span { float: left; font: 600 14cqw/.8 var(--font-head); margin: 1cqw 1.5cqw 0 0; color: #2646c9; }

/* quiet year: a month grid */
.pv-quiet-year { background: #fffdf7; }
.pv .cal { display: grid; grid-template-columns: repeat(7, 1fr); border-top: .35cqw solid #1d1e24; border-left: .2cqw solid #cfc4ad; margin-top: 3cqw; }
.pv .cal > span { aspect-ratio: 1 / 1.08; border-right: .2cqw solid #cfc4ad; border-bottom: .2cqw solid #cfc4ad; padding: .8cqw 1cqw; font-size: 2cqw; line-height: 1.1; overflow: hidden; }
.pv .cal .dow { aspect-ratio: auto; font: 600 2.2cqw var(--font-mono); text-align: center; background: #17181d; color: #fffdf7; padding: .8cqw 0; border-color: #17181d; }
.pv .cal b { display: block; font: 500 2.4cqw var(--font-mono); color: #494b54; }
.pv .cal em { display: block; font-style: normal; font-weight: 700; font-size: 1.8cqw; margin-top: .4cqw; }
.pv .cal .on { background: #f3d27a; }
.pv .cal .on b { color: #17181d; }
.pv .cal .off { background: #f2ecdd; }

/* field notes: lined log page */
.pv .ruled { margin-top: 4cqw; background: repeating-linear-gradient(to bottom, transparent 0 5.4cqw, #b8c8e6 5.4cqw 5.7cqw); padding: 0; }
.pv .typed { font: 400 3.6cqw/5.7cqw "IBM Plex Mono", monospace; color: #1b2e8a; margin: 0; }
.pv .fill { margin-top: 5cqw; display: grid; gap: 3cqw; }
.pv .fill p { display: flex; align-items: flex-end; gap: 2cqw; margin: 0; }
.pv .fill span { font: 600 2.6cqw var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.pv .fill i { flex: 1; border-bottom: .3cqw solid #1d1e24; height: 3.4cqw; }

/* studio handbook: contents + chapter */
.pv .toc, .pv .trk { list-style: none; padding: 0; margin-top: 3cqw; }
.pv .toc li, .pv .trk li { display: grid; grid-template-columns: 8cqw 1fr auto; align-items: baseline; padding: 1.8cqw 0; border-top: .2cqw solid #cfc4ad; font-size: 3.5cqw; }
.pv .toc .n, .pv .trk .n { font: 500 2.6cqw var(--font-mono); color: #b92f12; }
.pv .toc .t { font: 600 3.7cqw var(--font-head); }
.pv .toc li { padding: 1.25cqw 0; }
.pv .toc .t { line-height: 1.15; }
.pv .toc b, .pv .trk b { font: 500 2.7cqw var(--font-mono); color: #494b54; }
.pv .ch-no { font: 600 26cqw/.9 var(--font-head); color: #9a6a10; margin-top: 4cqw; letter-spacing: -.04em; }
.pv-small-studio-2 .pv-h { margin-top: 1cqw; }

/* warm film: preset sheet */
.pv .ptab { width: calc(100% - 14cqw); border-collapse: collapse; margin-top: 3cqw; font-size: 2.7cqw; }
.pv .ptab th { text-align: left; font: 600 2.2cqw var(--font-mono); text-transform: uppercase; letter-spacing: .06em; border-bottom: .35cqw solid #1d1e24; padding: 1cqw .6cqw; color: #494b54; }
.pv .ptab td { padding: 1.35cqw .6cqw; border-bottom: .2cqw solid #cfc4ad; font-family: var(--font-mono); font-size: 2.4cqw; white-space: nowrap; }
.pv .ptab td:first-child { font: 600 2.9cqw var(--font-body); }
.pv .ptab .sw { display: inline-block; width: 3.2cqw; height: 3.2cqw; margin-right: 1.8cqw; vertical-align: -.5cqw; border: .25cqw solid #1d1e24; }
.pv .ptab th:not(:first-child), .pv .ptab td:not(:first-child) { text-align: right; }

/* wren chart */
.pv .chart { display: block; width: calc(100% - 14cqw); height: auto; margin-top: 3cqw; border: .25cqw solid #1d1e24; background: #fff; }
.pv .key { list-style: none; padding: 0; margin-top: 3cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 3cqw; font-size: 2.6cqw; }
.pv .key li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pv .key li { display: flex; align-items: center; gap: 1.6cqw; }
.pv .key .ks { width: 4.4cqw; height: 4.4cqw; display: inline-grid; place-items: center; font: 600 2.6cqw var(--font-mono); flex: none; border: .25cqw solid #1d1e24; }
.pv .key b { font-family: var(--font-mono); font-weight: 600; }

/* price it: workbook */
.pv .sum { list-style: none; padding: 0; margin-top: 3cqw; }
.pv .sum li { display: flex; align-items: baseline; gap: 1.5cqw; padding: 1.6cqw 0; font-size: 3.3cqw; }
.pv .sum i { flex: 1; border-bottom: .3cqw dotted #494b54; transform: translateY(-.8cqw); }
.pv .sum b { font: 600 3.3cqw var(--font-mono); }
.pv .sum .tot { border-top: .35cqw solid #1d1e24; font-weight: 700; margin-top: 1cqw; }
.pv .line2 { display: flex; justify-content: space-between; margin-top: 3cqw; font-size: 3.3cqw; }
.pv .line2 b { font-family: var(--font-mono); }
.pv .answer { margin-top: 4.5cqw; background: #2646c9; color: #fff; padding: 3.5cqw 4cqw; display: flex; flex-direction: column; gap: 1cqw; }
.pv .answer span { font: 500 2.6cqw var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.pv .answer b { font: 600 7.6cqw/1 var(--font-head); letter-spacing: -.02em; }

/* lantern hours: track list */
.pv .trk li { grid-template-columns: 8cqw 1fr auto; padding: 1.55cqw 0; }
.pv .trk .t { font: 500 3.4cqw var(--font-body); }
.pv .wave { display: block; width: calc(100% - 14cqw); height: 11cqw; margin-top: 4cqw; fill: #4d4a8a; }
.pv-lantern-hours { background: #fbf7ec; }

/* invoice */
.pv .inv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin-top: 4cqw; }
.pv .inv-meta p { margin: 0; font-size: 3.3cqw; font-weight: 600; }
.pv .inv-meta span { display: block; font: 500 2.3cqw var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: #b92f12; }
.pv .inv td:nth-child(2), .pv .inv th:nth-child(2) { text-align: center; }
.pv .inv td:last-child { text-align: right; }
.pv .inv td { font-size: 2.9cqw; white-space: normal; }
.pv .inv tfoot td { font: 700 3.6cqw var(--font-head); border-top: .35cqw solid #1d1e24; border-bottom: 0; padding-top: 2cqw; }
.pv .inv tfoot td:first-child { font-family: var(--font-body); }


/* free sample: a cobalt band with real pages fanned over a photograph */
.sample-band { background: var(--accent); color: #fff; padding-block: clamp(40px, 6vw, 84px); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); --link: #fff; }
.sample-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "copy art" "act art"; grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 80px); align-items: start; }
.sample-copy { grid-area: copy; } .sample-act { grid-area: act; } .sample-art { grid-area: art; align-self: center; }
.sample-copy h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.02; letter-spacing: -.026em; margin: 0 0 14px; color: #fff; }
.sample-copy p { margin: 0 0 16px; max-width: 34rem; font-size: 1.08rem; }
.sample-act .signup-form { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; margin: 0; }
.sample-act .signup-form input { flex: 1 1 220px; margin: 0; border: 2px solid #fff; background: #fff; color: var(--ink); min-height: 52px; }
.sample-act .signup-form .btn { background: var(--ink); border-color: var(--ink); color: #fff; min-height: 52px; }
.sample-act .signup-form .btn:hover { background: var(--saffron); color: var(--ink); border-color: var(--saffron); }
.sample-act .form-status { margin: 8px 0 0; color: #fff; }
.sample-act .tiny, .sample-copy .tiny { color: #e4e9fb; margin: 10px 0 0; }
.sample-act .fallback { background: #fff; color: var(--ink); margin-top: 10px; }
.sample-art { position: relative; margin: 0; }
.sample-photo { display: block; border: 1.5px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); }
.sample-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sheets { position: absolute; inset: auto 0 -26px 0; pointer-events: none; }
.sheet { position: absolute; width: 36%; bottom: 0; box-shadow: 6px 6px 0 var(--ink); border: 1.5px solid var(--ink); }
.sheet-a { left: -6%; bottom: 10%; transform: rotate(-4deg); }
.sheet-b { right: -3%; bottom: 4%; transform: rotate(3deg); }
@media (max-width: 900px) { .sample-split { grid-template-columns: 1fr; grid-template-areas: "copy" "act" "art"; grid-template-rows: auto; row-gap: 12px; } .sample-art { margin-bottom: 22px; } .sheet { width: 32%; } .sheet-a { left: 2%; } .sheet-b { right: 3%; } }

/* why buy here */
.why-band { background: var(--panel); }
.why-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.why-photo { margin: 0; }
.why-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1.5px solid var(--ink); box-shadow: -12px 12px 0 var(--saffron); }
.why-copy h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.02; letter-spacing: -.024em; margin: 0 0 18px; }
.why-list { list-style: none; margin: 0; padding: 0; counter-reset: wy; border-top: 3px solid var(--ink); }
.why-list li { counter-increment: wy; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.why-list li::before { content: counter(wy, decimal-leading-zero); grid-row: 1 / span 2; font: 600 1.7rem/1 var(--font-head); color: var(--flag); }
.why-list h3 { font-size: 1.25rem; margin: 0 0 4px; letter-spacing: -.01em; }
.why-list p { margin: 0; color: var(--ink2); }
.studio-line { margin: 18px 0 0; font: 600 .78rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); }
@media (max-width: 900px) { .why-split { grid-template-columns: 1fr; } .why-photo img { aspect-ratio: 4 / 3; box-shadow: -8px 8px 0 var(--saffron); } }

/* how downloads work */
.timeline { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border-top: 3px solid var(--ink); counter-reset: tl; }
.timeline li { counter-increment: tl; padding: 18px 22px 22px 0; border-bottom: 1px solid var(--line); position: relative; }
.timeline li::before { content: counter(tl); display: block; font: 600 3.4rem/1 var(--font-head); color: var(--saffron); -webkit-text-stroke: 1.5px var(--ink); margin-bottom: 10px; }
.when { display: block; color: var(--flag); margin-bottom: 4px; }
.timeline h3 { font-size: 1.3rem; margin: 0 0 6px; }
.timeline p { margin: 0; color: var(--ink2); max-width: 20rem; }
.refunds { background: var(--panel); border: 1.5px solid var(--ink); border-left: 8px solid var(--flag); padding: 18px 22px; max-width: 46rem; }
.refunds h3 { font-size: 1.15rem; margin: 0 0 6px; }
.refunds p { margin: 0; }

/* FAQ */
.faq-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq-band h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.02; letter-spacing: -.024em; margin: 0; position: sticky; top: 16px; }
.specs { counter-reset: q; margin: 0; border-top: 3px solid var(--ink); }
.specs .qa { counter-increment: q; border-bottom: 1px solid var(--line); padding: 18px 0; display: grid; gap: 6px; }
.specs dt { margin: 0; font: 600 1.2rem/1.3 var(--font-head); letter-spacing: -.01em; }
.specs dt::before { content: "Q" counter(q, decimal-leading-zero); display: block; font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; color: var(--flag); margin-bottom: 6px; }
.specs dd { margin: 0; color: var(--ink2); max-width: 36rem; }
@media (max-width: 900px) { .faq-split { grid-template-columns: 1fr; } .faq-band h2 { position: static; margin-bottom: 16px; } }

/* ask */
.ask-band .quote { background: var(--panel); border: 1.5px solid var(--ink); border-top: 8px solid var(--accent); padding: 26px 22px 22px; max-width: 46rem; box-shadow: 10px 10px 0 var(--ink); }
.ask-band .quote .grid2 { grid-template-columns: 1fr; }
.ask-band .quote label { font: 500 .74rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ask-band .quote input:not(.hp input), .ask-band .quote select, .ask-band .quote textarea { border: 2px solid var(--ink); background: var(--bg); font: 400 1rem var(--font-body); letter-spacing: 0; text-transform: none; }
.ask-band .quote input:focus, .ask-band .quote select:focus, .ask-band .quote textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.ask-band .quote .row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 0; }
.ask-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -.022em; }
@media (min-width: 720px) { .ask-band .quote { padding: 32px 36px 28px; } }
.receipt { border-left-width: 8px; }

/* prose, hours, more list */
main .wrap.narrow { max-width: 720px; }
.prose p { max-width: 38rem; font-size: 1.05rem; line-height: 1.65; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.prose h2:not(:first-child) { margin-top: 1.6em; }
.prose .plain li { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--line); }
.prose .plain li::before { top: 1.25em; }
.hours-band .plain strong { display: inline-block; min-width: 9em; }
.hours-band .plain .mono { color: var(--ink2); }
.morelist { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.morelist a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; padding: 20px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 44px; }
.morelist strong { font: 600 clamp(1.4rem, 2.6vw, 2rem) var(--font-head); letter-spacing: -.02em; transition: transform .25s ease; }
.morelist a:hover strong { transform: translateX(8px); color: var(--accent); }
.morelist span { color: var(--ink2); font-size: .95rem; }
.form-status:empty { height: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.wrap.narrow > :last-child { margin-bottom: 0; }

/* footer: ink, with numbered links */
.foot { background: var(--foot); color: var(--foot-ink); border-top: 8px solid var(--saffron); padding: 52px 0 92px; }
.foot .wrap { width: auto; max-width: 1240px; margin-inline: clamp(18px, 4vw, 56px); }
.foot a, .foot-brand, .foot-head { color: #fff; }
.foot a { min-height: 24px; line-height: 24px; }
.foot-brand { font: 600 1.7rem/1.1 var(--font-head); letter-spacing: -.02em; margin: 0 0 10px; }
.foot-head { font: 500 .72rem var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--saffron); margin: 0 0 10px; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 28px 48px; margin-bottom: 30px; }
.foot-grid p { margin: 0 0 8px; }
.foot .linkish, .foot .tiny { color: var(--foot-ink); }
.foot-links { counter-reset: fl; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.foot-links a { counter-increment: fl; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; text-decoration-thickness: 1px; }
.foot-links a::before { content: counter(fl, decimal-leading-zero); font: 500 .66rem var(--font-mono); color: var(--saffron); }
.foot-line { border-top: 1px solid rgba(255,255,255,.2); padding-top: 18px; font-size: .88rem; margin: 0; }
.foot .linkish { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1.3fr; } }

/* floating ask button: shown once the hero is behind you */
body:not([data-past-hero]) .desk-open { visibility: hidden; opacity: 0; pointer-events: none; }
.desk-open { transition: opacity .2s; }
.btn.desk-open { font: 500 .76rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 5px 5px 0 var(--ink); }
@media (max-width: 720px) { .btn.desk-open { left: 16px; bottom: 16px; } .foot { padding-bottom: 84px; } }

/* touch targets, focus, motion */
.skip { min-height: 44px; display: inline-flex; align-items: center; }
a[href^="tel:"]:not(.btn):not(.callbar) { display: inline-block; min-height: 24px; line-height: 24px; }
.btn, select, input:not([type=checkbox]):not([type=radio]) { min-height: 44px; }
.more a { display: inline-flex; align-items: center; min-height: 44px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sample-band :focus-visible, .foot :focus-visible { outline-color: var(--saffron); }
html[data-still] *, html[data-still] *::before, html[data-still] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* look swatches */
.swatch-index { background: linear-gradient(135deg, #f6f1e7 50%, #2646c9 50%); }
.swatch-slate { background: linear-gradient(135deg, #e9edf2 50%, #1d4f8f 50%); }
.swatch-midnight { background: linear-gradient(135deg, #0c0f15 50%, #7aa2ff 50%); }

/* ribbon fold (demo only) */
/* ribbon fold (demo only): one slim line on the first screen; the form unfolds below it */
.ribbon { font-size: .85rem; border-bottom-width: 1px; }
.ribbon .wrap.ribbon-line { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 8px; padding: 3px 0; }
.ribbon-fold { flex: 1 1 auto; min-width: 0; }
.ribbon-fold > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; list-style: none; }
.ribbon-fold > summary::-webkit-details-marker { display: none; }
.ribbon-fold > summary::after { content: "\25BE"; font-size: .8em; transition: transform .15s; }
.ribbon-fold[open] > summary::after { transform: rotate(180deg); }
.ribbon-cta { text-decoration: underline; text-underline-offset: 3px; }
.ribbon-note { margin: 4px 0 8px; }
.ribbon-fold .yours { padding-bottom: 8px; }
.ribbon-back { display: inline-flex; align-items: center; min-height: 28px; }
@media (prefers-reduced-motion: reduce) { .ribbon-fold > summary::after { transition: none; } }
/* The demo ribbon is FireForge chrome, not the demo design: set in the system font so it never rewraps when the web font arrives (phone CLS). */
.ribbon { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Builder M13: advanced typography and theme. Every rule hangs off a data- attribute on <html> that the owner's
   theme sets (served page and preview alike), so an absent key leaves the model's own style untouched. Heading
   rules reach every h1, h2 and h3 on the page, small label headings included. */
html[data-hweight="light"] :is(h1, h2, h3) { font-weight: 300; }
html[data-hweight="normal"] :is(h1, h2, h3) { font-weight: 400; }
html[data-hweight="bold"] :is(h1, h2, h3) { font-weight: 700; }
html[data-hweight="black"] :is(h1, h2, h3) { font-weight: 800; }
html[data-hcase="upper"] :is(h1, h2, h3) { text-transform: uppercase; }
html[data-hcase="caps"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: small-caps; }
html[data-hcase="normal"] :is(h1, h2, h3) { text-transform: none; font-variant-caps: normal; }
html[data-htrack="tight"] :is(h1, h2, h3) { letter-spacing: -.03em; }
html[data-htrack="normal"] :is(h1, h2, h3) { letter-spacing: 0; }
html[data-htrack="wide"] :is(h1, h2, h3) { letter-spacing: .08em; }
html[data-lead="snug"] body { line-height: 1.4; }
html[data-lead="normal"] body { line-height: 1.6; }
html[data-lead="airy"] body { line-height: 1.85; }
html[data-btnshape="pill"] .btn { border-radius: 999px; }
html[data-btnshape="square"] .btn { border-radius: 0; }
html[data-btnshape="soft"] .btn { border-radius: 8px; }
html[data-links="underline"] main a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
html[data-links="plain"] main a:not(.btn) { text-decoration: none; }

/* Composed sections (lib/compose.cjs): a 12 column grid; every part spans 1 to 12 columns and 1 to 6 rows */
.fc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(48px, auto); gap: 24px; align-items: start; }
.fc-grid[data-gap="s"] { gap: 12px; }
.fc-grid[data-gap="l"] { gap: 40px; }
.fc-sec[data-pad="s"] { padding-block: clamp(20px, 3vw, 36px); }
.fc-sec[data-pad="l"] { padding-block: clamp(72px, 10vw, 140px); }
.fc-b { --fc-c: var(--fc-span, 12); --fc-r: var(--fc-rows, 1); grid-column: span var(--fc-c); grid-row: span var(--fc-r); min-width: 0; }
.fc-b[data-fc-bg] { background: var(--fc-bg); padding: 18px; border-radius: var(--radius); }
.fc-b[data-fc-fg] { color: var(--fc-fg); --ink: var(--fc-fg); }
.fc-b[data-fc-fg] :is(h2, h3, p) { color: var(--fc-fg); }
.fc-b[data-fc-dayoff] { display: none; }
body.customizing .fc-b[data-fc-dayoff] { display: block; opacity: .4; }
.fc-b > :first-child { margin-top: 0; }
.fc-b > :last-child { margin-bottom: 0; }
.fc-box { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.fc-box[data-fc-bg] { background: var(--fc-bg); border-color: transparent; }
.fc-inner { margin-top: 16px; grid-auto-rows: minmax(32px, auto); }
.fc-inner .fc-image img { min-height: calc(var(--fc-r, 1) * 56px); }
.fc-image { align-self: stretch; }
.fc-image img { display: block; width: 100%; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); object-fit: cover; border-radius: var(--radius); }
.fc-image img[data-fc-fit="contain"] { object-fit: contain; }
.fc-empty { display: none; }
body.customizing .fc-empty { display: grid; place-items: center; height: 100%; min-height: calc(var(--fc-r, 1) * 72px); border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: .95rem; }
.fc-pic { display: block; height: 100%; }
.fc-cap { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
.fc-video { align-self: stretch; }
.fc-mail, .fc-form .receipt { max-width: 44rem; }
.fc-mail { display: grid; gap: 12px; }
.fc-mail label { display: grid; gap: 4px; font-weight: 600; }
.fc-mail input, .fc-mail select, .fc-mail textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-mail p { margin: 0; }
.fc-mail .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-mail .form-status:empty { display: none; }
.fc-form [hidden] { display: none !important; }
.fc-joinform { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; max-width: 36rem; }
.fc-joinform label { display: grid; gap: 4px; font-weight: 600; flex: 1 1 14rem; min-width: 0; }
.fc-joinform input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); background: var(--panel, #fff); color: var(--ink, inherit); }
.fc-joinform p { margin: 0; }
.fc-joinform .form-status, .fc-joinform .fallback { flex-basis: 100%; }
.fc-joinform .form-status:empty { display: none; }
.fc-joinform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-join [hidden] { display: none !important; }
.fc-joined { font-weight: 600; margin: 0; }
.fc-form .receipt { padding: 16px; border: 1px solid var(--line, #c9c9c9); border-radius: var(--radius, 6px); }
.fc-frame { position: relative; aspect-ratio: 16 / 9; min-width: 0; max-width: 100%; min-height: calc(var(--fc-r, 1) * 72px); border-radius: var(--radius); overflow: hidden; background: #000; }
.fc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fc-clip { display: block; width: 100%; max-height: 100%; border-radius: var(--radius); background: #000; }
.fc-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fc-pics[data-fc-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-pics[data-fc-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fc-pics img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--panel, #fff); }
.fc-pics[data-fc-fit="contain"] img { object-fit: contain; }
.fc-pics[data-fc-mode="slide"] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.fc-pics[data-fc-mode="slide"] img { flex: 0 0 min(100%, 420px); scroll-snap-align: start; }
.fc-pics[data-fc-mode="slide"][data-fc-cols="2"] img { flex-basis: min(100%, 560px); }
.fc-pics[data-fc-mode="slide"][data-fc-cols="4"] img { flex-basis: min(100%, 300px); }
.fc-space[data-fc-h="s"] { height: 16px; }
.fc-space[data-fc-h="m"] { height: 40px; }
.fc-space[data-fc-h="l"] { height: 88px; }
[data-fc-w="400"] { font-weight: 400; } [data-fc-w="500"] { font-weight: 500; } [data-fc-w="600"] { font-weight: 600; } [data-fc-w="700"] { font-weight: 700; } [data-fc-w="800"] { font-weight: 800; }
[data-fc-hw="400"] :is(h1, h2, h3) { font-weight: 400; } [data-fc-hw="500"] :is(h1, h2, h3) { font-weight: 500; } [data-fc-hw="600"] :is(h1, h2, h3) { font-weight: 600; } [data-fc-hw="700"] :is(h1, h2, h3) { font-weight: 700; } [data-fc-hw="800"] :is(h1, h2, h3) { font-weight: 800; }
[data-fc-w] :is(p, .lead, .sub) { font-weight: inherit; }
.fc-b[data-fc-size="s"] { font-size: .88em; } .fc-b[data-fc-size="l"] { font-size: 1.14em; } .fc-b[data-fc-size="xl"] { font-size: 1.3em; }
[data-fc-align="left"] { text-align: left; } [data-fc-align="center"] { text-align: center; } [data-fc-align="right"] { text-align: right; }
/* Tablets (721 to 1024px): a part's tablet size wins over its desk size; a tablet-hidden part goes. */
@media (min-width: 721px) and (max-width: 1024px) {
  .fc-b { --fc-c: var(--fc-tspan, var(--fc-span, 12)); --fc-r: var(--fc-trows, var(--fc-rows, 1)); }
  .fc-sec[data-tpad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-tpad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-tpad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-tgap="s"] { gap: 12px; } .fc-grid[data-tgap="m"] { gap: 24px; } .fc-grid[data-tgap="l"] { gap: 40px; }
  [data-fc-thide] { display: none; }
  body.customizing [data-fc-thide] { display: block; opacity: .4; }
}
/* Phones (up to 720px): the grid keeps its 12 columns so a phone size can be set; a part with no phone
   size takes the full width, which is the stacked look the page had before phone sizes existed. */
@media (max-width: 720px) {
  .fc-b { --fc-c: var(--fc-pspan, 12); --fc-r: var(--fc-prows, var(--fc-rows, 1)); }
  .fc-sec[data-ppad="s"] { padding-block: clamp(20px, 3vw, 36px); } .fc-sec[data-ppad="m"] { padding-block: calc(clamp(44px, 6vw, 80px) * var(--space, 1)); } .fc-sec[data-ppad="l"] { padding-block: clamp(72px, 10vw, 140px); }
  .fc-grid[data-pgap="s"] { gap: 12px; } .fc-grid[data-pgap="m"] { gap: 24px; } .fc-grid[data-pgap="l"] { gap: 40px; }
  [data-fc-phide] { display: none; }
  body.customizing [data-fc-phide] { display: block; opacity: .4; }
  .fc-pics[data-fc-mode="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Motion (builder M9). Entrances ride the scroll itself: a part fades, rises, slides or zooms in over the
   stretch where it enters the screen, with no script. Browsers without scroll-driven animations skip
   the @supports block and show every part at rest. */
@supports (animation-timeline: view()) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in] { animation: fc-fade linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
  [data-fx-in="rise"] { animation-name: fc-rise; } [data-fx-in="slide"] { animation-name: fc-slide; } [data-fx-in="zoom"] { animation-name: fc-zoom; }
  [data-fx-in][data-fx-speed="slow"] { animation-range: entry 5% entry 95%; } [data-fx-in][data-fx-speed="fast"] { animation-range: entry 5% entry 30%; }
  .fc-image[data-fx-scroll="drift"] .fc-shot { display: block; height: 100%; overflow: hidden; border-radius: var(--radius); }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: 1.18; animation: fc-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; border-radius: 0; }
}
@keyframes fc-fade { from { opacity: 0; } }
@keyframes fc-rise { from { opacity: 0; translate: 0 32px; } }
@keyframes fc-slide { from { opacity: 0; translate: -32px 0; } }
@keyframes fc-zoom { from { opacity: 0; scale: .92; } }
@keyframes fc-drift { from { translate: 0 -8%; } to { translate: 0 8%; } }
/* Hover answers only a real pointer; a finger on a phone gets no half-state. */
@media (hover: hover) {
  .fc-b[data-fx-hover] { transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
  .fc-b[data-fx-hover][data-fx-speed="slow"] { transition-duration: .5s; } .fc-b[data-fx-hover][data-fx-speed="fast"] { transition-duration: .12s; }
  .fc-b[data-fx-hover="lift"]:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .35); }
  .fc-b[data-fx-hover="grow"]:hover { transform: scale(1.03); }
  .fc-b[data-fx-hover="glow"]:hover { box-shadow: 0 0 0 3px var(--accent, #8ab4f8), 0 10px 30px -10px var(--accent, #8ab4f8); }
  .fc-b[data-fx-hover="dim"]:hover { opacity: .75; }
}
/* At rest: a visitor who asks their device for less motion, or the design's Still switch, sees no motion at all. */
@media (prefers-reduced-motion: reduce) {
  .fc-b[data-fx-in], .fc-sec[data-fx-in], .fc-image[data-fx-scroll] img { animation: none; }
  .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
  .fc-b[data-fx-hover] { transition: none; } .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
}
html[data-still] .fc-b[data-fx-in], html[data-still] .fc-sec[data-fx-in], html[data-still] .fc-image[data-fx-scroll] img { animation: none; }
html[data-still] .fc-image[data-fx-scroll="drift"] .fc-shot img { scale: none; }
html[data-still] .fc-b[data-fx-hover] { transition: none; } html[data-still] .fc-b[data-fx-hover]:hover { transform: none; box-shadow: none; opacity: 1; }
/* Builder M11: the header and footer as the owner set them (compose.chrome). */
[data-chrome-hid] { display: none !important; }
img.mark[data-chrome-logo] { width: auto; max-width: 180px; height: 36px; object-fit: contain; }
.top[data-chrome-static] { position: static; }
.top[data-chrome-layout="center"] .bar { flex-direction: column; justify-content: center; text-align: center; }
.top[data-chrome-layout="center"] .tools { margin-left: 0; }
.foot[data-chrome-layout="center"] .foot-grid { grid-template-columns: 1fr; text-align: center; }
.foot[data-chrome-layout="center"] .foot-links { justify-content: center; }
.foot[data-chrome-hide] { padding-top: 10px; } .foot[data-chrome-hide] .foot-line { border: 0; padding-top: 0; }