/* THE ATELIER · site.css
   Three looks live on html[data-look]: chalk (default), darkroom, cyanotype. Every text pairing below was checked for contrast at AA.
   The machinery (ribbon, toolbar, desk, forms, callbar) keeps the same class names as every FireForge issue.
   The structure is its own: a slim bar with an index menu, a scrolling reel of projects, a masonry work index with a
   discipline filter, full-screen picture viewer, and case studies that put the pictures before the words. */
/* Metric-matched fallbacks: Arial and Georgia resized toward the web fonts' widths and heights, so the page keeps its shape while Space Grotesk and Newsreader load. Estimated from the fonts' published metrics, not measured in a browser. */
@font-face { font-family: "Space Grotesk Fallback"; font-weight: 300 500; src: local("Arial"), local("ArialMT"); size-adjust: 104%; ascent-override: 94.6%; descent-override: 28.1%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 101%; ascent-override: 97.4%; descent-override: 28.9%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; font-weight: 300 500; src: local("Georgia"); size-adjust: 94%; ascent-override: 102%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; font-weight: 300 500; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 92%; ascent-override: 104%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; font-weight: 600 700; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 90%; ascent-override: 106%; descent-override: 31%; line-gap-override: 0%; }
:root {
  --font-head: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 0px;
  --wrap: 1240px;
  --h1: clamp(2.6rem, 7.2vw, 6.2rem);
  --h2: clamp(1.9rem, 4.2vw, 3.3rem);
  --bg: #f6f3ee; --bg2: #ece7de; --panel: #fffdf9; --line: #d2cabd;
  --ink: #1d1b19; --ink2: #54504a; --accent: #c2412d; --accent-ink: #ffffff; --link: #a8321f;
  --foot: #1d1b19; --foot-ink: #d8d3ca;
  --passage: #1d1b19; --passage-ink: #f6f3ee; --passage-soft: #c9c3b8; --passage-line: #47423c; --passage-acc: #f0866f; --passage-acc-ink: #1d1b19;
}
html[data-look="darkroom"] {
  --bg: #121212; --bg2: #1b1b1a; --panel: #222221; --line: #3c3a37;
  --ink: #efece6; --ink2: #b4afa6; --accent: #e0634b; --accent-ink: #150a07; --link: #f0917d;
  --foot: #0a0a0a; --foot-ink: #cfcac1;
  --passage: #efece6; --passage-ink: #161513; --passage-soft: #4d4943; --passage-line: #bdb7ad; --passage-acc: #b3361f; --passage-acc-ink: #ffffff;
}
html[data-look="cyanotype"] {
  --bg: #12305a; --bg2: #0e2750; --panel: #1b4274; --line: #3f679c;
  --ink: #f2f6fb; --ink2: #c1d3ea; --accent: #f2f6fb; --accent-ink: #12305a; --link: #d3e5fb;
  --foot: #0a1f3d; --foot-ink: #c9daef;
  --passage: #f2f6fb; --passage-ink: #0f2a4a; --passage-soft: #3b5478; --passage-line: #aebfd6; --passage-acc: #12305a; --passage-acc-ink: #ffffff;
}
html[data-font="newsreader"] { --font-head: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif; }
html[data-font="grotesk"] { --font-head: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
html[data-font="system"] { --font-head: 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; } }
html[data-still] { scroll-behavior: auto; }
html.menu-lock { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/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.06; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.012em; }
h1 { font-size: var(--h1); font-weight: 400; letter-spacing: -.025em; line-height: 1.02; }
h2 { font-size: var(--h2); font-weight: 400; }
h3 { font-size: 1.3rem; font-weight: 500; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.wrap.narrow { max-width: 780px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; z-index: 80; border-radius: var(--radius); }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.tiny { font-size: .85rem; color: var(--ink2); }
.lead { font-size: 1.14rem; color: var(--ink2); max-width: 37em; }
.mt { margin-top: 2.5rem; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.linkish { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.kicker, .more a, .status, .nav a, .foot-head, .pc-d, .pc-y, .pk, .dc, .chip, .viewsw button, .reel-ctl, .cap span, .meta dt, .cs-row h2, .cs-pn small, .ed, .count { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .13em; font-size: .75rem; font-weight: 500; }

/* buttons */
.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 11px 22px; font: 500 .95rem/1.1 var(--font-body); letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.06); }
.btn.big { padding: 15px 28px; font-size: 1.02rem; }
.btn.small { padding: 8px 14px; font-size: .88rem; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink2); }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.chip { display: inline-block; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin: 0 8px 8px 0; text-decoration: none; font: inherit; font-size: .92rem; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.still-chip { cursor: default; }
.chip.still-chip:hover { border-color: var(--line); }

/* ribbon (demo only) */
.ribbon { background: #fff4d6; color: #3a2a00; border-bottom: 3px solid #e2b23a; font-size: .92rem; font-family: var(--font-body); }
.ribbon .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; padding: 8px 0; }
.ribbon p { margin: 0; }
.ribbon a { color: #7a4a00; }
.yours { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.yours label { display: flex; flex-direction: column; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.yours input, .yours select { font: inherit; font-size: .95rem; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 6px 8px; border: 1px solid #b89658; border-radius: 4px; background: #fff; color: #222; min-width: 0; width: 150px; }
.yours-lead { font-weight: 600; }
.yours .btn.small { background: #7a4a00; border-color: #7a4a00; color: #fff; }
.yours .btn.small.ghost { background: transparent; color: #7a4a00; }
@media (max-width: 720px) { .yours { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: end; } .yours .yours-lead { grid-column: 1 / -1; } .yours input, .yours select { width: 100%; } }
/* language picker (from lib/i18n) */
.langpick { position: relative; }
.langpick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-size: .9rem; }
.langpick summary::-webkit-details-marker { display: none; }
.langpick .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: var(--radius); padding: 6px; display: grid; min-width: 150px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.langmenu a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: var(--radius); }
.langmenu a:hover, .langmenu a[aria-current] { 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: 999px; 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: 38px; padding: 0 10px; border-radius: 999px; 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; }
/* colophon rows (craft, key points, contact cards) */
.colophon { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px 36px; }
.colophon > div { border-top: 2px solid var(--ink); padding-top: 16px; }
.colophon h3 { font-size: 1.15rem; margin-bottom: .4em; }
.colophon p { margin: 0; color: var(--ink2); }
.colophon p + p { margin-top: .6em; }
.colophon.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.contact-cards p { color: var(--ink); }
/* questions, hours, prose */
.faq .qa { border-top: 1px solid var(--line); padding: 20px 0 8px; }
.faq h3 { margin-bottom: .3em; }
.hours { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hours th, .hours td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.hours thead th { background: var(--bg2); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
.prose h2 { font-size: 1.55rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }

/* 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: var(--radius); padding: 10px 12px; width: 100%; margin-top: 4px; }
input[type="color"] { width: 48px; height: 36px; padding: 2px; vertical-align: middle; margin-top: 0; }
.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; top: auto; width: 1px; height: 1px; overflow: hidden; }
.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); border-radius: var(--radius); padding: 18px 20px; }
.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: 12px 14px; border-radius: var(--radius); }
/* footer */
.foot { background: var(--foot); color: var(--foot-ink); padding: 48px 0 90px; }
.foot a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 40px; margin-bottom: 30px; }
.foot-brand { font: 600 1.4rem/1 var(--font-head); color: #fff; }
.foot-head { color: #fff; margin-bottom: .5em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-line { border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; font-size: .9rem; }
.foot .linkish { color: var(--foot-ink); }
.foot .tiny { color: var(--foot-ink); opacity: .85; }
.noscript { margin: 0; padding: 10px 16px; background: var(--bg2); text-align: center; font-size: .9rem; }

/* fixed call bar on phones */
.callbar { display: none; }
@media (max-width: 720px) {
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: center; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 500; letter-spacing: .04em; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .callbar[hidden] { display: none; }
  .callbar svg { width: 20px; height: 20px; fill: currentColor; }
  .top .call { display: none; }
}
html[data-demo] .callbar { bottom: 0; }

/* owner toolbar */
.owner { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--panel); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.25); z-index: 40; overflow-y: auto; padding: 0 18px 30px; font-size: .95rem; }
.owner[hidden] { display: none; }
.owner-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; position: sticky; top: 0; background: var(--panel); }
.owner-title { margin: 0; font: 600 1.1rem var(--font-head); }
.owner-title .tiny { display: block; font: .8rem var(--font-body); }
.x { background: none; border: 1px solid var(--line); color: inherit; border-radius: 50%; width: 34px; height: 34px; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.tabs button { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; 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 .lead { font-size: 1rem; }
.pane label { margin-bottom: 8px; }
.pane .row label { flex: 1 1 160px; }
.looks { display: grid; gap: 8px; margin-bottom: 12px; }
.look { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; background: var(--bg2); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius); padding: 10px; cursor: pointer; font: inherit; }
.look[aria-pressed="true"] { border-color: var(--accent); }
.look .swatch { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); }
.look small { color: var(--ink2); }
.swatch-chalk { background: linear-gradient(135deg, #f6f3ee 50%, #c2412d 50%); }
.swatch-darkroom { background: linear-gradient(135deg, #121212 50%, #e0634b 50%); }
.swatch-cyanotype { background: linear-gradient(135deg, #12305a 50%, #f2f6fb 50%); }
.sections { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sections li { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.sections li b { flex: 1; }
.sections li.off b { text-decoration: line-through; color: var(--ink2); }
.sections button { background: none; border: 1px solid var(--line); color: inherit; border-radius: var(--radius); padding: 3px 8px; cursor: pointer; font: inherit; font-size: .85rem; }
.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 12px; display: grid; gap: 4px; }
.checks li { padding: 6px 10px; border-radius: var(--radius); background: var(--bg2); border-left: 4px solid #4caf50; }
.checks li.warn { border-left-color: #e2b23a; }
.checks li.bad { border-left-color: #d13b2c; }
.ld { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; font-size: .75rem; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.ai-team { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ai-team a { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; color: var(--ink); text-decoration: none; }
.ai-team a span { display: block; font-size: .85rem; color: var(--ink2); }
.url { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; word-break: break-all; font-size: .85rem; flex: 1 1 200px; }
.answer { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 40px; }
.answer:empty { display: none; }
.nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 14px; }
.nums div { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.nums dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink2); }
.nums dd { margin: 0; font: 600 1.8rem var(--font-head); font-variant-numeric: tabular-nums; }
.steps { padding-left: 20px; }
.steps li { margin-bottom: 6px; }
body.editing [data-edit] { outline: 2px dashed var(--accent); outline-offset: 3px; cursor: text; }
[data-edit][contenteditable="true"]:focus { outline: 3px solid var(--accent); }

/* studio desk */
.desk-open { position: fixed; left: 16px; bottom: 16px; z-index: 26; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.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)); } }
.desk-panel { position: fixed; left: 16px; bottom: 16px; width: min(380px, calc(100% - 32px)); max-height: min(70vh, 560px); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.3); z-index: 41; padding: 0 14px 14px; display: flex; flex-direction: column; }
.desk-panel[hidden] { display: none; }
.desk-log { overflow-y: auto; flex: 1; display: grid; gap: 8px; margin-bottom: 10px; }
.desk-log p { margin: 0; padding: 8px 12px; border-radius: var(--radius); background: var(--bg2); max-width: 92%; }
.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 { margin: 0; font-size: .85rem; padding: 4px 10px; }
.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: 999px; 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: 50%; 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: var(--radius); 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: 6px; 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: 6px; 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: 12px; 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: 16px 16px 0 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: var(--radius); 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: var(--radius); 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: 12px; 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: 12px 12px 0 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: var(--radius); }
.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(.chip, .still, .art, .hours, .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(.chip, .still, .art, .hours, .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="newsreader"] { --font-body: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif; }
main > section[data-s-font="grotesk"] { --font-body: "Space Grotesk", "Space Grotesk 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="newsreader"] { --font-head: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif; }
main > section[data-s-hfont="grotesk"] { --font-head: "Space Grotesk", "Space Grotesk 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(17px * var(--s-k)); }
main > section[data-s-size] h1 { font-size: calc(var(--h1) * var(--s-k)); }
main > section[data-s-size] h2 { font-size: calc(var(--h2) * 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: var(--radius); 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: var(--radius); }
.cz-tab { font: 600 .85rem/1.2 var(--font-body); padding: 8px 4px; border: 0; border-radius: calc(var(--radius) - 2px); 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: var(--radius); 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; }

/* Accessibility layer (Block 2F c): 44px targets, readable placeholders, one-row header, no lone cards. */
.skip { padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; }
.brand { min-height: 44px; }
.bar { column-gap: 20px; }
.nav { column-gap: 18px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.langpick-inline a { min-height: 44px; }
.btn, .btn.small { min-height: 44px; }
#owner-open, .desk-open { min-height: 44px; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select { min-height: 44px; }
::placeholder { color: var(--ink2); opacity: 1; }
.more a { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
dt h3 a { display: inline-flex; align-items: center; min-height: 44px; }
a[href^="tel:"]:not(.btn):not(.callbar, .callbar), a[href^="mailto:"]:not(.btn) { display: inline-block; padding-block: 4px; }
p > a:is([href^="tel:"], [href^="mailto:"]):only-child { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.req { color: var(--accent); font-weight: 700; margin-left: 2px; }
@media (min-width: 600px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .callbar { min-height: 52px; } }
/* A phone number never breaks across two lines: it wraps whole or not at all. */
[data-biz="phone"] { white-space: nowrap; }

/* ================= The Atelier: structure ================= */
:root { --muted: var(--ink2); }
html[data-look="cyanotype"] body { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 32px 32px; }
html[data-still] *, html[data-still] *::before, html[data-still] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.btn { text-transform: none; letter-spacing: .02em; }
.chip { font-size: .75rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; }
.starters .chip, .owner .chip { text-transform: none; letter-spacing: 0; font-size: .85rem; min-height: 0; padding: 4px 10px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip i { font-style: normal; opacity: .8; }

/* the bar: wordmark left, language and Menu right */
.top { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; padding: 6px 0; }
.bar > * { position: relative; z-index: 2; }
.brand { order: 1; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 400 1.5rem/1 var(--font-head); letter-spacing: -.02em; min-width: 0; min-height: 44px; }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; }
.tools { order: 2; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.call b { font-weight: 600; }
.menu-btn { order: 3; display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font: 500 .75rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .13em; cursor: pointer; }
.menu-btn:hover { border-color: var(--ink); }
.menu-ico { position: relative; display: inline-block; width: 18px; height: 10px; }
.menu-ico::before, .menu-ico::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .2s; }
.menu-ico::before { top: 0; }
.menu-ico::after { bottom: 0; }
.top.menu-open .menu-ico::before { top: 4px; transform: rotate(45deg); }
.top.menu-open .menu-ico::after { bottom: 4px; transform: rotate(-45deg); }
.nav { order: 5; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 22px; border-top: 1px solid var(--line); }
.nav a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--accent); }
@media (scripting: enabled) {
  .menu-btn { display: inline-flex; }
  .top .nav { display: none; position: fixed; inset: 0; z-index: 1; flex-direction: column; flex-wrap: nowrap; align-content: stretch; gap: 0; border-top: 0; background: var(--bg); padding: 96px max(16px, calc((100% - var(--wrap)) / 2)) 40px; overflow-y: auto; counter-reset: nv; }
  .top.menu-open .nav { display: flex; }
  .top .nav a { counter-increment: nv; display: flex; align-items: baseline; gap: 18px; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 clamp(2rem, 6vw, 3.6rem)/1.1 var(--font-head); letter-spacing: -.02em; text-transform: none; }
  .top .nav a::before { content: counter(nv, decimal-leading-zero); font: 500 .75rem/1 var(--font-body); letter-spacing: .13em; color: var(--ink2); min-width: 2.2em; }
  .top .nav a:hover, .top .nav a[aria-current="page"] { color: var(--link); border-bottom-color: var(--line); }
  .top .nav a[aria-current="page"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); align-self: center; }
}
html.menu-lock .callbar, html.menu-lock .desk-open { display: none; }
.menu-btn[hidden] { display: none; }
@media (scripting: enabled) { .menu-btn[hidden] { display: inline-flex; } }
@media (max-width: 720px) { .call span b { display: none; } .brand { font-size: 1.3rem; flex: 1 1 auto; } .tools { margin-left: 0; } .langpick-inline .globe { display: none; } .langpick-inline a { min-width: 40px; } .menu-btn { padding: 0 12px; } .bar { gap: 0 10px; } }
@media (max-width: 480px) { .brand { font-size: 1.15rem; gap: 8px; } .langpick-inline a { min-width: 34px; } .menu-btn { padding: 0 10px; } .bar { gap: 0 8px; } }
@media (max-width: 720px) and (scripting: enabled) { .bar { flex-wrap: nowrap; } .menu-btn { flex: none; } .tools { flex: none; } }
@media (min-width: 721px) and (max-width: 1199px) { .call span b { display: none; } }
@media (scripting: none) {
  .nav { padding: 2px 0 4px; }
  .nav a { text-transform: uppercase; font-size: .75rem; letter-spacing: .13em; }
}

/* ===== Pictures: every photo is a block that scales with its box ===== */
.photo { display: block; }
.photo img { display: block; width: 100%; height: auto; background: var(--bg2); }

/* ===== Hero: one loud sentence, then three layered canvases ===== */
.hero { padding: clamp(36px, 6vw, 88px) 0 clamp(24px, 4vw, 48px); position: relative; }
.hero.small { padding: clamp(36px, 6vw, 84px) 0 clamp(24px, 4vw, 52px); }
.hero-in { max-width: none; }
.hero h1 { margin: 0 0 .3em; max-width: none; text-wrap: balance; }
.hero:not(.small):not(.cs-hero) h1 { font-size: clamp(2.7rem, 8.6vw, 8rem); line-height: .94; letter-spacing: -.035em; font-weight: 400; }
.hero.small h1 { font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: .98; letter-spacing: -.03em; }
.hero.cs-hero h1 { font-size: clamp(3rem, 11vw, 10rem); line-height: .9; letter-spacing: -.04em; }
.hero .kicker { color: var(--link); margin: 0 0 clamp(14px, 2vw, 24px); }
.hero .kicker a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; }
.hero .sub { font-size: clamp(1.1rem, 1.9vw, 1.4rem); color: var(--ink2); max-width: 36em; margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin: 0; }
.btn.cta, .btn.big { background: var(--ink); color: var(--bg); border-color: var(--ink); border-radius: 0; }
.btn.cta:hover, .btn.big:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.big { min-height: 56px; padding-inline: 28px; font-size: 1.05rem; }
.textlink { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.textlink:hover { color: var(--link); }
.avail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 18px 0 0; font-size: .95rem; color: var(--ink2); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 0 transparent; animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(224,99,75,.5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(224,99,75,0); } }
@media (min-width: 900px) {
  .hero:not(.small):not(.cs-hero) .hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); align-items: end; }
  .hero:not(.small):not(.cs-hero) .hero-in { grid-template-areas: "k k" "t t" "s c" "s a"; }
  .hero:not(.small):not(.cs-hero) .hero-in > .kicker { grid-area: k; }
  .hero:not(.small):not(.cs-hero) .hero-in > h1 { grid-area: t; }
  .hero:not(.small):not(.cs-hero) .hero-in > .sub { grid-area: s; align-self: end; }
  .hero:not(.small):not(.cs-hero) .hero-in > .cta-row { grid-area: c; justify-self: end; }
  .hero:not(.small):not(.cs-hero) .hero-in > .avail { grid-area: a; justify-self: end; margin-top: 8px; }
}
html[data-zone="center"] .hero-in { text-align: center; }
html[data-zone="center"] .hero .sub { margin-inline: auto; }
html[data-zone="center"] .avail, html[data-zone="center"] .cta-row { justify-content: center; }
html[data-zone="right"] .hero-in { text-align: right; }
html[data-zone="right"] .hero .sub { margin-left: auto; }
html[data-zone="right"] .avail, html[data-zone="right"] .cta-row { justify-content: flex-end; }

/* the stage: three canvases that overlap, the way a pinned wall does */
.stage { width: min(var(--wrap), 100% - 32px); margin: clamp(28px, 4vw, 56px) auto 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; grid-template-areas: "a a a a a a a a a a a a" "a a a a a a a a a a a a"; align-items: start; position: relative; padding-bottom: clamp(24px, 5vw, 64px); }
.cv { position: relative; }
.cv .photo img { width: 100%; }
.cv-a { grid-column: 1 / 10; grid-row: 1 / 3; z-index: 1; }
.cv-b { grid-column: 8 / 12; grid-row: 1 / 3; margin-top: clamp(40px, 9vw, 130px); z-index: 2; border: clamp(6px, 1vw, 12px) solid var(--bg); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.cv-c { grid-column: 10 / 13; grid-row: 2; align-self: end; margin-bottom: clamp(-40px, -3vw, -16px); margin-left: clamp(-60px, -4vw, -24px); z-index: 3; border: clamp(6px, 1vw, 12px) solid var(--bg); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
@media (max-width: 720px) {
  .stage { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "a a a a a a" "a a a a a a"; padding-bottom: 36px; }
  .cv-a { grid-column: 1 / 7; grid-row: 1; }
  .cv-a .photo img { aspect-ratio: 5 / 4; object-fit: cover; }
  .cv-b { grid-column: 3 / 7; grid-row: 2; margin-top: -60px; margin-right: 0; }
  .cv-c { grid-column: 1 / 4; grid-row: 2; align-self: end; margin: 0 0 -28px; }
}
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cv-b { animation: drift-up linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .cv-c { animation: drift-down linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes drift-up { from { transform: translateY(36px); } to { transform: translateY(-36px); } }
    @keyframes drift-down { from { transform: translateY(-20px); } to { transform: translateY(40px); } }
  }
}

/* ===== bands ===== */
.band { padding: clamp(52px, 8vw, 112px) 0; }
.band.alt { background: var(--bg2); }
.band + .band { border-top: 1px solid var(--line); }
.band-head { display: grid; grid-template-columns: 1fr; gap: 10px 56px; align-items: end; margin-bottom: clamp(28px, 4vw, 56px); }
.band-head h2 { margin: 0; font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: .98; letter-spacing: -.03em; font-weight: 400; }
.band-head .lead { margin: 0; color: var(--ink2); }
@media (min-width: 900px) { .band-head { grid-template-columns: 1.1fr 1fr; } }
.more { margin: 36px 0 0; }
.more a { color: var(--ink); }
.more a:hover { color: var(--link); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { margin: 0; }

/* ===== the work index: a typographic list, the picture arrives on hover or focus ===== */
.ix { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ink); counter-reset: none; }
.ix-row { border-top: 1px solid var(--ink); position: relative; }
.ix-link { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 104px; grid-template-areas: "n t p" "n m p" "n c p"; gap: 2px 14px; align-items: center; padding: 16px 0; color: var(--ink); text-decoration: none; min-height: 64px; }
.ix-n { grid-area: n; align-self: start; padding-top: .45em; font: 500 .75rem/1 var(--font-body); letter-spacing: .13em; color: var(--ink2); }
.ix-t { grid-area: t; font: 400 clamp(1.7rem, 7vw, 2.4rem)/1.04 var(--font-head); letter-spacing: -.025em; }
.ix-m { grid-area: m; color: var(--ink2); font-size: .92rem; }
.ix-c { grid-area: c; color: var(--ink2); font-size: .92rem; }
.ix-pic { grid-area: p; display: block; width: 104px; }
.ix-pic .photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.ix-link:hover .ix-t, .ix-link:focus-visible .ix-t { color: var(--link); }
.ix-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (min-width: 560px) and (max-width: 899px), (min-width: 900px) and (hover: none) {
  .ix-link { grid-template-columns: 3.4rem minmax(0, 1fr) 180px; padding: 20px 0; }
  .ix-pic { width: 180px; }
  .ix-t { font-size: clamp(2.2rem, 5.4vw, 3.4rem); }
}
@media (min-width: 900px) and (hover: hover) {
  .ix-link { grid-template-columns: 4rem minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .9fr); grid-template-areas: "n t m c"; gap: 0 24px; align-items: baseline; padding: 22px 0 24px; }
  .ix-n { padding-top: 0; align-self: baseline; }
  .ix-t { font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: .98; }
  .ix-pic { position: absolute; z-index: 5; right: 24%; top: 50%; width: clamp(240px, 26vw, 360px); pointer-events: none; opacity: 0; transform: translateY(-46%) rotate(-2deg); border: 8px solid var(--bg); box-shadow: 0 20px 44px rgba(0,0,0,.28); }
  .ix-row:hover .ix-pic, .ix-row:focus-within .ix-pic { opacity: 1; transform: translateY(-50%) rotate(-2deg); }
  .ix-row:nth-child(even) .ix-pic { right: 30%; transform: translateY(-46%) rotate(2deg); }
  .ix-row:nth-child(even):hover .ix-pic, .ix-row:nth-child(even):focus-within .ix-pic { transform: translateY(-50%) rotate(2deg); }
  .ix:hover .ix-row:not(:hover):not(:focus-within) .ix-link { color: var(--ink2); }
  .ix-link { transition: color .2s; }
  .ix-pic { transition: opacity .25s, transform .35s; }
}
@media (prefers-reduced-motion: reduce) { .ix-pic, .ix-link { transition: none !important; } }
.ix-group { margin-top: clamp(36px, 6vw, 80px); scroll-margin-top: 90px; }
.ix-group:first-of-type { margin-top: 0; }
.ix-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; margin-bottom: 14px; }
.ix-head h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.ix-head p { margin: 0; color: var(--ink2); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(28px, 4vw, 52px); }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: .9rem; }
.jump a:hover { background: var(--ink); color: var(--bg); }
.jump i { font-style: normal; color: var(--ink2); }
.jump a:hover i { color: inherit; }
.hero.small + .band.selected { padding-top: clamp(4px, 1.5vw, 20px); }

/* ===== disciplines: four big names ===== */
.dlist { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; counter-reset: dsc; border-bottom: 1px solid var(--line); }
.dlist li { border-top: 1px solid var(--line); counter-increment: dsc; }
.dlist a { display: grid; grid-template-columns: 1fr; gap: 4px 28px; align-items: baseline; padding: 18px 0; color: var(--ink); text-decoration: none; min-height: 44px; }
.disciplines h2 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--ink2); margin: 0; }
.dt { font: 400 clamp(2.4rem, 8.4vw, 7.4rem)/.98 var(--font-head); letter-spacing: -.035em; }
.dt::before { content: counter(dsc, decimal-leading-zero); font: 500 .75rem/1 var(--font-body); letter-spacing: .13em; color: var(--ink2); margin-right: 16px; vertical-align: .9em; }
.dl { color: var(--ink2); }
.dc { color: var(--ink2); }
.dlist a:hover .dt { color: var(--link); font-style: italic; }
@media (min-width: 860px) { .dlist a { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 6rem; grid-template-areas: "t l c"; align-items: center; padding: 14px 0; } .dlist .dt { grid-area: t; } .dlist .dl { grid-area: l; } .dlist .dc { grid-area: c; } .dc { text-align: right; } }

/* ===== method: the steps, the scale of the work, two pictures ===== */
.m-body { display: grid; grid-template-columns: 1fr; gap: 36px 64px; }
.msteps { list-style: none; margin: 0; padding: 0; counter-reset: ms; display: grid; grid-template-columns: 1fr; gap: 0; }
.msteps li { counter-increment: ms; border-top: 1px solid var(--ink); padding: 18px 0 20px; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 8px; }
.msteps li::before { content: counter(ms, decimal-leading-zero); grid-row: 1 / 3; font: 400 1.8rem/1.1 var(--font-head); color: var(--link); }
.msteps h3 { font-size: 1.5rem; margin: 0 0 .25em; letter-spacing: -.02em; }
.msteps p { color: var(--ink2); margin: 0; max-width: 40em; }
.m-fig { display: none; }
@media (min-width: 900px) {
  .m-body.has-fig { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .m-fig { display: block; position: sticky; top: 100px; padding-bottom: 80px; }
  .mf-a { width: 82%; }
  .mf-b { width: 66%; margin: -60px 0 0 auto; border: 10px solid var(--bg2); position: relative; box-shadow: 0 16px 36px rgba(0,0,0,.18); }
}
@media (min-width: 900px) { .m-body:not(.has-fig) .msteps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; } .m-body:not(.has-fig) .msteps li { display: block; padding-top: 14px; } .m-body:not(.has-fig) .msteps li::before { display: block; margin-bottom: 12px; font-size: 2.2rem; } }
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: clamp(36px, 6vw, 80px) 0 0; border-top: 2px solid var(--ink); }
.proof > div { padding: 18px 12px 20px 0; border-bottom: 1px solid var(--line); }
.proof dt { color: var(--ink2); font: 500 .75rem/1.3 var(--font-body); letter-spacing: .13em; text-transform: uppercase; margin: 0 0 6px; }
.proof dd { margin: 0; font: 400 clamp(2.8rem, 8vw, 6rem)/1 var(--font-head); letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.proof > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { .proof { grid-template-columns: repeat(5, minmax(0, 1fr)); } .proof > div { border-bottom: 0; } .proof > div:last-child:nth-child(odd) { grid-column: auto; } }

/* ===== availability: a dark passage with the dates the studio has open ===== */
.avail-band { --ink: var(--passage-ink); --ink2: var(--passage-soft); --accent: var(--passage-acc); --accent-ink: var(--passage-acc-ink); --link: var(--passage-acc); --line: var(--passage-line); background: var(--passage); color: var(--passage-ink); border-top: 0 !important; }
.avail-in { display: grid; grid-template-columns: 1fr; gap: 28px 64px; align-items: start; }
@media (min-width: 900px) { .avail-in { grid-template-columns: 1.2fr 1fr; } }
.status { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--ink); }
.avail-band h2 { margin-bottom: .3em; }
.avail-band .lead { margin-bottom: 0; }
.terms { list-style: none; margin: 0 0 24px; padding: 0; }
.terms li { border-top: 1px solid var(--line); padding: 10px 0; color: var(--ink2); }
.terms li:last-child { border-bottom: 1px solid var(--line); }
.btns { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 0; }
.btns .btn { justify-content: center; }
@media (max-width: 480px) { .btns .btn { flex: 1 1 100%; } }
.avail-band .btn.ghost { color: var(--ink); border-color: var(--ink); }
.avail-band .btn.big { background: var(--ink); color: var(--passage); border-color: var(--ink); }
.avail-band .btn.big:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.avail-band .btn.big.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.avail-band .btn.big.ghost:hover { background: var(--ink); color: var(--passage); }
.avail-in p:last-child { margin-bottom: 0; }
.avail-band .dot { background: var(--accent); }
.avail-band h2 { font-size: clamp(2.2rem, 5.6vw, 5rem); line-height: .98; letter-spacing: -.03em; font-weight: 400; }

/* ===== header: the one call to action ===== */
.top .tools .cta { min-height: 44px; padding-inline: 18px; white-space: nowrap; }
.top .tools .call { background: transparent; color: var(--ink); border-color: var(--line); border-radius: 0; }
.top .tools .call:hover { border-color: var(--ink); filter: none; }
@media (max-width: 720px) { .top .tools .cta { display: none; } .top .tools .call { display: none; } }

/* ===== prints: a row each, the picture large, the facts beside it ===== */
.prow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 6vw, 88px); }
.prow { display: grid; grid-template-columns: 1fr; gap: 20px 56px; align-items: end; }
.prow-pic .photo img { aspect-ratio: 4 / 5; object-fit: cover; padding: clamp(10px, 1.6vw, 22px); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.10); }
.pnum { margin: 0 0 8px; font: 400 clamp(3.4rem, 9vw, 8rem)/.9 var(--font-head); color: var(--link); letter-spacing: -.04em; }
.prow-tx h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); letter-spacing: -.025em; margin: 0 0 .25em; }
.prow-tx p { margin: 0 0 .5em; }
.psz { color: var(--ink); }
.ed { color: var(--ink2); }
@media (min-width: 860px) {
  .prow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .prow:nth-child(even) .prow-pic { order: 2; }
  .prow-pic { max-width: 520px; }
  .prow:nth-child(even) .prow-pic { justify-self: end; }
  .prow:nth-child(even) .prow-tx { text-align: left; }
}
.prints-teaser { background: var(--bg2); }
.pt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; align-items: start; }
.pt-list figure { margin: 0; }
.pt-list .photo img { aspect-ratio: 4 / 5; object-fit: cover; padding: clamp(6px, 1vw, 14px); background: var(--panel); border: 1px solid var(--line); }
.pt-list figcaption { display: grid; gap: 2px; padding-top: 10px; }
.pt-list figcaption b { font: 400 1.2rem/1.2 var(--font-head); letter-spacing: -.01em; }
.pt-list figcaption span { color: var(--ink2); font-size: .9rem; }
.pt-list li:nth-child(even) { padding-top: 36px; }
@media (min-width: 860px) {
  .pt-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .pt-list li:nth-child(even) { padding-top: 64px; }
  .pt-list li:nth-child(3) { padding-top: 24px; }
}

/* ===== press: years as the big numbers ===== */
.pyear { display: grid; grid-template-columns: 1fr; gap: 6px 40px; padding: 22px 0; border-top: 1px solid var(--ink); }
.pyear:last-of-type { border-bottom: 1px solid var(--ink); }
.pyear h3 { font: 400 clamp(2.4rem, 6vw, 5rem)/.95 var(--font-head); letter-spacing: -.035em; margin: 0; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.plist li { display: grid; grid-template-columns: 1fr; gap: 2px 20px; align-items: baseline; }
.pk { color: var(--ink2); }
.pt { font: 400 1.3rem/1.25 var(--font-head); letter-spacing: -.01em; }
.pv, .pn { color: var(--ink2); }
@media (min-width: 860px) {
  .pyear { grid-template-columns: 220px 1fr; }
  .plist li { grid-template-columns: 120px minmax(0, 1.8fr) minmax(0, 1.2fr) minmax(0, 1.6fr); }
  .plist li:not(:has(.pn)) { grid-template-columns: 120px minmax(0, 1.8fr) minmax(0, 1.2fr); }
}

/* ===== the commission form ===== */
.quote-band { background: var(--bg2); }
.inquire h2 { margin-bottom: .3em; }
.commission .req-note { margin-bottom: 18px; }
select { appearance: auto; }
.commission select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-color: var(--panel); background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.commission select { background-color: transparent; padding-right: 30px; background-position: calc(100% - 8px) calc(50% + 1px), calc(100% - 2px) calc(50% + 1px); }
.inquire-in { display: grid; grid-template-columns: 1fr; gap: 24px 64px; align-items: start; }
@media (min-width: 900px) { .inquire-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); } .inquire-head { position: sticky; top: 96px; } }
.inquire-head h2, .inquire-head .lead { margin-top: 0; }
.inquire-form .commission { margin: 0; border-top: 0; padding-top: 0; }
.commission .req-note { margin-top: 0; }
textarea { min-height: 150px; resize: vertical; }
.fallback { margin-top: 18px; }

/* ===== faq and studio ===== */
.faq-band .wrap.narrow { max-width: 820px; }
p, .lead, li { text-wrap: pretty; }
.hero .sub { text-wrap: balance; }
.story-in { display: grid; grid-template-columns: 1fr; gap: 32px 64px; align-items: start; }
@media (min-width: 900px) { .story-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); } }
.story-text h2 { margin-top: 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--ink2); }
.story-text p { font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.25 var(--font-head); letter-spacing: -.015em; max-width: 24em; margin: 0; }
.studio-fig { margin: 0; }
.studio-art { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.studio-fig figcaption { margin-top: 14px; color: var(--ink2); max-width: 34em; }
.studio-fig .ph { display: block; margin-top: 8px; font: 500 .75rem/1.4 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.studio-fig.layered { position: relative; padding-bottom: clamp(30px, 8vw, 90px); }
.studio-fig.layered .sf-a { width: 88%; }
.studio-fig.layered .sf-b { position: absolute; right: 0; bottom: clamp(48px, 9vw, 110px); width: 36%; border: clamp(6px, 1vw, 12px) solid var(--bg2); box-shadow: 0 16px 36px rgba(0,0,0,.2); }
.studio-fig.layered figcaption { margin-top: 14px; max-width: 58%; position: relative; z-index: 0; }
.sa-bg { fill: var(--panel); } .sa-floor { fill: var(--bg2); } .sa-beam { fill: var(--accent); opacity: .14; }
.sa-win { fill: var(--bg); stroke: var(--ink2); stroke-width: 3; }
.sa-line { fill: none; stroke: var(--ink2); stroke-width: 2; }
.sa-pin.sa-p1 { fill: var(--accent); } .sa-pin.sa-p2 { fill: var(--ink); } .sa-pin.sa-p3 { fill: var(--line); }
.sa-lamp, .sa-table { fill: var(--ink); } .sa-leg { stroke: var(--ink); stroke-width: 6; fill: none; }
.sa-pot { fill: var(--ink2); } .sa-leaf { fill: var(--link); }
.colophon > div { border-top: 1px solid var(--ink); }
.credits { list-style: none; margin: 0; padding: 0; }
.credits li { padding: 4px 0; color: var(--ink2); }

/* ===== a case study: the lead picture full width, the narrative, then the plates ===== */
.hero.cs-hero { padding-bottom: clamp(20px, 3vw, 36px); }
.cs-hero .hero-in { text-align: left; }
.cs-hero .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 28px; margin: clamp(24px, 4vw, 44px) 0 0; }
.cs-hero .meta > div { border-top: 1px solid var(--ink); padding-top: 10px; }
.meta dt { color: var(--ink2); margin-bottom: 4px; }
.meta dd { margin: 0; font: 400 1.2rem/1.3 var(--font-head); }
.cs-main { width: min(1560px, 100% - 32px); margin: 0 auto; }
.cs-main .photo img { width: 100%; }
.cs-text { padding: clamp(36px, 6vw, 88px) 0 clamp(16px, 3vw, 40px); }
.cs-row { display: grid; grid-template-columns: 1fr; gap: 8px 40px; padding: 22px 0; border-top: 1px solid var(--ink); }
.cs-row h2 { margin: 0; color: var(--ink2); }
.cs-row p { margin: 0; font: 400 clamp(1.25rem, 2vw, 1.7rem)/1.4 var(--font-head); letter-spacing: -.01em; max-width: 36em; }
.cs-row.big p { font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -.025em; max-width: 22em; }
@media (min-width: 800px) { .cs-row { grid-template-columns: 200px minmax(0, 1fr); } }
.cs-gal { width: min(var(--wrap), 100% - 32px); margin: clamp(24px, 4vw, 56px) auto; display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 24px); align-items: start; }
.cs-gal .photo img { width: 100%; }
@media (min-width: 800px) {
  .cs-gal { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cs-gal .cg-a { grid-column: 1 / 6; margin-top: clamp(40px, 8vw, 120px); }
  .cs-gal .cg-b { grid-column: 6 / 13; }
  .cs-gal.one .cg-a, .cs-gal.one .cg-b { grid-column: 3 / 11; margin-top: 0; }
}
.cs-out { padding: clamp(8px, 2vw, 24px) 0 clamp(36px, 6vw, 72px); }
.cs-pn { border-top: 1px solid var(--ink); }
.cs-pn .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; }
.cs-pn a { display: grid; gap: 4px; padding: 26px 0; min-height: 44px; color: var(--ink); text-decoration: none; }
.cs-pn a span { font: 400 clamp(1.8rem, 5vw, 4rem)/1.05 var(--font-head); letter-spacing: -.03em; }
.cs-pn small { color: var(--ink2); }
.cs-pn a:hover span { color: var(--link); font-style: italic; }
.cs-pn .next { text-align: right; margin-left: auto; }

/* ===== footer ===== */
.foot { padding: 56px 0 100px; }
.foot-brand { font: 400 1.8rem/1 var(--font-head); letter-spacing: -.02em; }
.foot-grid { gap: 28px 48px; margin-bottom: 36px; }

/* ===== reveal: transform only, gated by the script-set .js class, off when motion is reduced ===== */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { transform: translateY(26px); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
  .js .rv.in { transform: none; }
  .js .ix-row.rv { transform: none; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
}

/* five steps, four prints and a last row */
@media (min-width: 640px) and (max-width: 1139px) { .m-body:not(.has-fig) .msteps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } .m-body:not(.has-fig) .msteps li:last-child { grid-column: 1 / -1; } }

/* ===== Lower half, redesigned: the index, the brief, the one-line colophon ===== */

/* FAQ as an index: numbered rows, number | question | answer */
.faq-band .wrap { max-width: var(--wrap); }
.faq-band h2 { margin-bottom: clamp(18px, 3vw, 36px); }
.faq.index { counter-reset: ix; border-top: 2px solid var(--ink); }
.faq.index .qa { counter-increment: ix; display: grid; grid-template-columns: 1fr; gap: 6px 0; padding: 22px 0 24px; border-top: 0; border-bottom: 1px solid var(--line); }
.faq.index .qa::before { content: counter(ix, decimal-leading-zero); font: 400 1.05rem/1.2 var(--font-body); letter-spacing: .1em; color: var(--link); font-variant-numeric: tabular-nums; }
.faq.index h3 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15; font-weight: 400; letter-spacing: -.01em; }
.faq.index p { margin: 0; color: var(--ink2); max-width: 38em; }
@media (min-width: 900px) {
  .faq.index .qa { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 40px; align-items: baseline; padding: 28px 0 30px; }
}

/* the brief: underline fields on a sheet, one column, a full-width ink bar to send */
.commission { counter-reset: br; }
.commission .grid2 { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
.commission label { margin: 0; padding: 16px 0 6px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.commission label.hp { padding: 0; }
.commission input, .commission select, .commission textarea { background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding: 10px 0 8px; margin-top: 6px; font: 400 1.25rem/1.3 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--ink); }
.commission select { background-color: transparent; padding-right: 30px; background-position: calc(100% - 8px) calc(50% + 1px), calc(100% - 2px) calc(50% + 1px); }
.commission textarea { border: 2px solid var(--ink); padding: 12px 14px; min-height: 170px; margin-top: 8px; }
.commission input:focus-visible, .commission select:focus-visible, .commission textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.commission .row { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 0; }
.commission .row .btn { width: 100%; justify-content: center; min-height: 58px; border-radius: 0; background: var(--ink); color: var(--bg); border: 0; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; }
.commission .row .btn:hover { background: var(--accent); color: var(--accent-ink); }
.commission .req-note { text-align: right; }
@media (min-width: 600px) { .commission .grid2 { grid-template-columns: 1fr; } }

/* signup: one large serif line to write on, the button beside it as plain words */
.signup.signup-rule { border-top: 2px solid var(--ink); }
.signup-rule .wrap { display: grid; grid-template-columns: 1fr; gap: 6px 64px; }
.signup-rule h2 { font-style: italic; font-weight: 400; margin: 0 0 .15em; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; }
.signup-rule p { margin: 0; color: var(--ink2); max-width: 32em; }
.signup-rule .signup-form { margin-top: 22px; flex-wrap: nowrap; align-items: stretch; border-bottom: 2px solid var(--ink); gap: 0; }
.signup-rule .signup-form input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; border-radius: 0; font: 400 clamp(1.2rem, 2.6vw, 1.7rem)/1.2 var(--font-head); padding: 14px 0; }
.signup-rule .signup-form input:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.signup-rule .signup-form .btn { flex: 0 0 auto; background: transparent; color: var(--ink); border: 0; border-radius: 0; padding: 0 0 0 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.signup-rule .signup-form .btn::after { content: "\2192"; margin-left: .55em; text-decoration: none; display: inline-block; }
.signup-rule .signup-form .btn:hover { color: var(--link); }
@media (min-width: 900px) {
  .signup-rule .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: end; }
  .signup-rule .signup-write .signup-form { margin-top: 0; }
}
@media (max-width: 460px) {
  .signup-rule .signup-form { flex-wrap: wrap; border-bottom: 0; }
  .signup-rule .signup-form input { flex: 1 1 100%; border-bottom: 2px solid var(--ink); }
  .signup-rule .signup-form .btn { padding: 8px 0 0; min-height: 52px; }
}

/* footer: a light one-line colophon */
.foot.foot-line1 { background: var(--bg); color: var(--ink2); padding: 22px 0 24px; border-top: 2px solid var(--ink); }
.foot-line1 a, .foot-line1 .linkish { color: var(--ink); }
.foot-line1 .tiny { color: var(--ink2); opacity: 1; }
.foot-line1 .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 36px; font-size: .88rem; }
.foot-line1 .foot-grid { display: contents; }
.foot-line1 .foot-grid > div { display: contents; }
.foot-line1 .foot-grid > div:nth-child(2) { display: none; }
.foot-line1 .foot-brand { font: 400 1.5rem/1 var(--font-head); color: var(--ink); margin: 0; order: 1; }
.foot-line1 .foot-grid > div:first-child > p:nth-child(2) { order: 2; margin: 0; flex: 1 1 320px; }
.foot-line1 .foot-grid > div:first-child > p.tiny { display: none; }
.foot-line1 .fsep { color: var(--ink2); }
.foot-line1 .foot-head { display: none; }
.foot-line1 .foot-links { order: 3; margin: 0; gap: 0 18px; }
.foot-line1 .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-line1 .foot-line { order: 4; flex: 1 1 100%; border-top: 1px solid var(--line); margin: 6px 0 0; padding-top: 12px; font-size: .8rem; color: var(--ink2); }
.foot-line1 .foot-line .linkish { text-decoration: underline; }
@media (max-width: 720px) {
  .foot-line1 .foot-brand, .foot-line1 .foot-grid > div:first-child > p:nth-child(2), .foot-line1 .foot-links { flex: 1 1 100%; }
}

/* phones: a quiet paper bar carries the call alone; the studio desk hangs from the header as the same ink ribbon as on wide screens */
@media (max-width: 720px) {
  .callbar { gap: 10px; background: var(--panel); color: var(--ink); border-top: 2px solid var(--ink); padding: 0 16px; min-height: 58px; font: 400 1.05rem/1.1 var(--font-head); letter-spacing: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .callbar svg { width: 18px; height: 18px; }
  .desk-open { left: auto; right: 16px; top: var(--ribbon-top, 62px); bottom: auto; min-height: 0; padding: 10px 14px 20px; border-radius: 0; box-shadow: none; background: var(--ink); color: var(--bg); border: 0; font: italic 400 1rem/1 var(--font-head); letter-spacing: .01em; text-transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%); }
  body:has(.desk-open:not([hidden])) .foot { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 721px) {
  .desk-open { border-radius: 0; background: var(--ink); color: var(--bg); box-shadow: none; border: 0; font: 500 .75rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
}
@media (min-width: 721px) { .foot.foot-line1 { padding-bottom: 84px; } }
.signup-rule .signup-write .form-status { margin: 6px 0 0; }

/* The Ask ribbon waits until the hero is behind you, so it never sits on the opening picture or buttons. */
body:not([data-past-hero]) .desk-open { visibility: hidden; opacity: 0; pointer-events: none; }
.desk-open { transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .desk-open { transition: none; } }

/* the spam trap stays off-screen but keeps a full-size field, so it never reads as a tiny tap target */
label.hp input { width: 12rem; min-height: 24px; }

/* 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; } }

/* Ask button, wide screens: a bookmark ribbon hung from the underside of the header at the top right, set in the italic display face; the left margin carries the project numbers */
@media (min-width: 721px) {
  .desk-open { left: auto; right: 32px; top: var(--ribbon-top, 62px); bottom: auto; min-height: 0; min-width: 0; padding: 12px 18px 22px; font: italic 400 1.1rem/1 var(--font-head); letter-spacing: .01em; text-transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); }
  .desk-open:hover { transform: none; padding-bottom: 26px; }
  .desk-panel { left: auto; right: 32px; top: calc(var(--ribbon-top, 62px) + 64px); bottom: auto; transform: none; border-radius: 0; }
}

/* 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; }