/* Furloom. Art direction: a bright gift shop where the paintings carry the color. White and warm-gray
   grounds, near-black type, one vermilion for actions. Gilt frames stay on the artwork only. Display face:
   Archivo (SIL OFL 1.1, license in /assets/fonts/OFL-Archivo.txt), self-hosted. Body: the system sans. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/archivo-latin-800-normal.woff2) format("woff2")}

:root{
  --wall:#ffffff;--wall-deep:#f1f0ed;--wall-line:#e0ddd8;
  --on-wall:#151413;--on-wall-muted:#5d5a55;
  --brass:#d83a1f;--brass-ink:#ffffff;
  --paper:#ffffff;--paper-2:#f6f5f2;--paper-line:#dcd8d1;--ink:#151413;--ink-muted:#5d5a55;--green:#151413;
  --err:#b3261e;--err-on-wall:#b3261e;
  --serif:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --focus:var(--brass);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:66px}
body{margin:0;background:var(--wall);color:var(--on-wall);font:16px/1.55 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:var(--brass);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.wrap{width:min(1120px,100%);margin:0 auto;padding:0 16px}
.wrap.narrow{max-width:720px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--brass);color:var(--brass-ink);padding:8px 12px;z-index:50}
.skip:focus{left:8px}
/* one hidden file input for the whole page; every "Upload a photo" is a <label for="file"> so one tap opens the picker */
.file-input{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
label.btn{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,.opt .p,.price-table td,#total{font-variant-numeric:lining-nums}
h1,h2,h3{font-family:var(--serif);font-weight:800;line-height:1;margin:0 0 .4em;letter-spacing:-.025em}
h1{font-size:clamp(1.6rem,8.2vw,4.6rem)}
h2{font-size:clamp(1.8rem,6.6vw,2.8rem)}
h3{font-size:1.6rem}
p{margin:0 0 1em}
.fine{font-size:.86rem;color:var(--on-wall-muted);margin:0}
.note{font-size:.84rem;color:var(--ink-muted)}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--wall) 94%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--wall-line)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:54px}
.brand{font-family:var(--serif);font-weight:800;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--on-wall);text-decoration:none;margin-right:auto;white-space:nowrap}

/* buttons: rectangular, brass on the wall, green on paper */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--brass);cursor:pointer;background:var(--brass);color:var(--brass-ink);font:650 1.02rem/1 var(--sans);padding:0 26px;min-height:52px;border-radius:2px;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.btn:hover{background:#bd2f17;border-color:#bd2f17}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{min-height:40px;padding:0 16px;font-size:.92rem}
.btn.line{background:transparent;color:var(--brass)}
.btn.line:hover{background:color-mix(in srgb,var(--brass) 14%,transparent)}
.btn.wide{width:100%}
.link{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* frames */
.frame{position:relative;padding:11px;background:linear-gradient(140deg,#6e501d 0%,#d6b267 20%,#9a7531 42%,#e6c983 64%,#7d5d25 100%);box-shadow:inset 0 0 0 1px #4a3511,inset 2px 2px 0 1px rgba(255,236,190,.45),inset -2px -2px 0 1px rgba(40,26,6,.45),0 18px 30px -12px rgba(0,0,0,.38),0 2px 4px rgba(0,0,0,.18)}
.frame::before{content:"";position:absolute;inset:5px;border:1px solid rgba(70,48,14,.55);pointer-events:none}
.frame::after{content:"";position:absolute;inset:11px;box-shadow:inset 0 0 0 2px #1d140a,inset 0 0 14px rgba(0,0,0,.45);pointer-events:none}
.frame img{width:100%;aspect-ratio:3/4;object-fit:cover}
.frame.black{padding:7px;background:#121212;box-shadow:inset 0 0 0 1px #2c2c2c,0 18px 30px -12px rgba(0,0,0,.38)}
.frame.black::before{display:none}
.frame.black::after{inset:7px;box-shadow:inset 0 0 0 1px #000}
.frame.mat{padding:7px;background:#121212;box-shadow:inset 0 0 0 1px #2c2c2c,0 18px 30px -12px rgba(0,0,0,.38)}
.frame.mat::before,.frame.mat::after{display:none}
.frame.mat .matboard{background:#f6f3ec;padding:13%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.placard{display:block;margin-top:14px;font:400 .82rem/1.4 var(--sans);color:var(--on-wall-muted)}
.placard b{display:block;color:var(--on-wall);font-weight:600;font-size:.92rem}

/* hero */
.hero{padding:22px 0 46px;background:var(--wall)}
.hero-grid{display:grid;gap:18px;grid-template-areas:"h" "art" "copy"}
.hero h1{grid-area:h;margin:0}
.hero-art{grid-area:art;margin:0;display:grid;grid-template-columns:30% 1fr;gap:16px;align-items:end}
.hero-copy{grid-area:copy}
.snap{position:relative;background:#fff;padding:4px;box-shadow:0 8px 18px -6px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.06);margin-bottom:52px}
.snap img{aspect-ratio:3/4;object-fit:cover;width:100%}
.snap span{position:absolute;left:0;right:0;top:calc(100% + 8px);font-size:.8rem;color:var(--on-wall-muted);text-align:center}
.hang .placard{margin-top:12px}
.sub{font-size:1.12rem;color:var(--on-wall);max-width:30em;margin:0 0 16px;text-wrap:balance}
.cta{margin:0 0 12px}
.cta .btn{width:100%}

/* sections */
section{padding:56px 0}
.sec-head{max-width:760px;margin-bottom:28px}
.sec-head p{color:var(--on-wall-muted);margin:0}
.gallery-sec{border-top:1px solid var(--wall-line)}

/* gallery: hung in a row, scrolls on phones */
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:64%;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 26px;margin:0 -16px 10px;scrollbar-width:thin;scrollbar-color:var(--wall-line) transparent}
.work{scroll-snap-align:center;margin:0;display:flex;flex-direction:column}
.work .frame{margin-top:auto}
.work .placard{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start}
.work .placard img{width:44px;height:58px;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px var(--wall-line)}

/* rooms */
.walls{background:var(--wall-deep)}
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.room{margin:0}
.room.wide{grid-column:1/-1}
.room img{width:100%;aspect-ratio:4/5;object-fit:cover}
.room.wide img{aspect-ratio:4/3;object-position:50% 40%}
.room figcaption{font-size:.82rem;color:var(--on-wall-muted);padding-top:8px}
.room.edge{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.room.edge figcaption{padding:0 0 4px}
.walls > .wrap > .fine{margin-top:16px}

/* sizes */
.sizes{display:grid;gap:26px;margin-top:52px;padding-top:40px;border-top:1px solid var(--wall-line)}
.size-viz svg{width:100%;height:auto;display:block}
.size-viz .sofa{fill:none;stroke:var(--on-wall-muted);stroke-width:.35}
.size-viz .cv{fill:none;stroke:var(--on-wall-muted);stroke-width:.3;stroke-dasharray:1 .8}
.size-viz .cv.on{stroke:var(--brass);stroke-width:.55;stroke-dasharray:none;fill:color-mix(in srgb,var(--brass) 22%,transparent)}
.size-viz .lead{stroke:var(--on-wall-muted);stroke-width:.15}
.size-viz text{font:600 3.8px var(--sans);fill:var(--on-wall-muted)}
.size-viz text.on{fill:var(--brass)}
.size-viz .dim{font-weight:400}
.price-table{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:1rem}
.price-table td{padding:12px 0;border-bottom:1px solid var(--wall-line)}
.price-table tr:first-child td{border-top:1px solid var(--wall-line)}
.price-table td:last-child{text-align:right;font-family:var(--serif);font-weight:800;font-size:1.11rem;letter-spacing:-.01em}
.price-table td:first-child:has(button){padding:0}
.price-table button{all:unset;cursor:pointer;display:flex;align-items:center;min-height:48px;width:100%;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px}
.price-table button:focus-visible{outline:3px solid var(--focus,currentColor);outline-offset:2px}
.promise a{display:inline-block;padding:12px 0;margin:-12px 0}
.price-table tr.on td:first-child{color:var(--brass)}
.price-table small{display:block;color:var(--on-wall-muted);font-size:.8rem}
.shared{font-size:.92rem;color:var(--on-wall-muted);margin:0}

/* the tool, on paper */
.make{padding-top:40px;background:var(--wall-deep)}
.paper{background:var(--paper);color:var(--ink);--focus:var(--green);color-scheme:light}
.paper a{color:var(--green)}
.paper .btn{background:var(--brass);border-color:var(--brass);color:#fff}
.paper .btn:hover{background:#bd2f17;border-color:#bd2f17}
.paper .btn.line{background:transparent;color:var(--green)}
.paper .btn.line:hover{background:color-mix(in srgb,var(--green) 8%,transparent)}
.app{padding:24px 18px 26px;max-width:880px;margin:0 auto;box-shadow:0 0 0 1px var(--paper-line),0 24px 40px -24px rgba(0,0,0,.25)}
.app-head{display:grid;gap:12px;margin-bottom:22px}
.app h2{margin:0;font-size:clamp(1.9rem,7vw,2.6rem)}
.steps{display:flex;list-style:none;padding:0;margin:0;font-size:.8rem;color:var(--ink-muted);counter-reset:s}
.steps li{flex:1;border-top:2px solid var(--paper-line);padding-top:6px;counter-increment:s}
.steps li::before{content:counter(s) ". "}
.steps li.on{border-color:var(--green);color:var(--ink);font-weight:600}
.drop{position:relative;display:grid;justify-items:center;text-align:center;gap:12px;padding:34px 18px;border:1px dashed #bdb8b0;background:var(--paper-2);cursor:pointer}
.drop:hover,.drop.over{border-color:var(--green);border-style:solid}
.drop strong{font-family:var(--serif);font-weight:800;font-size:1.31rem;letter-spacing:-.01em;line-height:1.1}
.drop span:not(.btn){font-size:.92rem;color:var(--ink-muted)}
.drop:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.drop .spin{display:none}
.drop.busy{cursor:progress}
.drop.busy .spin{display:block}
.drop.busy .btn,.drop.busy .drop-hint,.drop.busy .note{display:none}
@media(hover:none){.drop-only{display:none}}
.err{color:var(--err);font-weight:600;margin:10px 0 0}
.err:empty{display:none}
.photo-row{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.photo-row img{width:76px;height:76px;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.photo-row b{display:block;font-family:var(--serif);font-weight:800;font-size:1.15rem;line-height:1.1;margin-bottom:4px}
.photo-row .link{font-size:.9rem;color:var(--ink-muted)}
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px;padding:0;border:0}
.style{position:relative;cursor:pointer;display:block}
.style input{position:absolute;opacity:0}
.style img{aspect-ratio:1/1;width:100%;object-fit:cover;border:3px solid transparent;outline:1px solid var(--paper-line)}
.style span{display:block;padding:6px 0 0;font-size:.82rem;font-weight:600;line-height:1.25}
.style small{display:block;font-weight:400;color:var(--ink-muted);font-size:.74rem}
.style:has(input:checked) img{border-color:var(--green);outline-color:var(--green)}
.style:has(input:focus-visible) img{outline:3px solid var(--green);outline-offset:2px}
.style.done span::after{content:" (made)";font-weight:400;color:var(--ink-muted)}
.stage{position:relative;background:var(--paper-2);aspect-ratio:3/4;max-width:420px;margin:0 auto 12px;border:9px solid #1d1912;box-shadow:0 12px 24px -8px rgba(0,0,0,.4)}
.stage img{width:100%;height:100%;object-fit:cover}
.result-frame{max-width:420px;margin:0 auto 14px}
.result-frame .stage{border:0;box-shadow:none;margin:0;max-width:none}
.result-frame.mat .stage{padding:11%;background:#f6f3ec;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.result-frame #result{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.working{position:absolute;inset:0;overflow:hidden;background:#2a2620;color:#f4efe4;text-align:left}
.working[hidden]{display:none}
.frame .working img,.working img{aspect-ratio:auto}
/* the visitor's own photo is on screen from the first frame (dim, greyscale) and warms up while a light sweep passes over it */
.working .working-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55);animation:develop 30s linear forwards}
@keyframes develop{to{filter:grayscale(.15) sepia(.25) brightness(.85)}}
.working::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(244,239,228,.22) 50%,transparent 65%);background-size:250% 100%;animation:sweep 2.6s ease-in-out infinite}
@keyframes sweep{from{background-position:120% 0}to{background-position:-20% 0}}
.working-panel{z-index:2}
.working-panel{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(rgba(24,20,13,0),rgba(24,20,13,.9) 38%)}
.working-style{display:flex;align-items:center;gap:8px;font:600 .88rem/1.2 var(--sans)}
.working-style img{width:34px;height:34px;object-fit:cover;border:2px solid #f4efe4}
.bar{height:4px;background:rgba(244,239,228,.22);margin:10px 0}
.bar i{display:block;height:100%;width:0;background:var(--brass)}
#working-text{margin:0;font-family:var(--serif);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2}
.spin{width:40px;height:40px;border-radius:50%;border:3px solid var(--paper-line);border-top-color:var(--green);margin:0 auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.tried{display:flex;gap:8px;justify-content:center;margin:0 0 12px;flex-wrap:wrap}
.tried:empty,.tried[hidden]{display:none}
.tried button.pending{display:grid;place-items:center;align-content:center;gap:4px;color:var(--ink-muted)}
.tried .pending .spin{width:20px;height:20px;border-width:2px}
.tried .pending small{font-size:.6rem;line-height:1.1;padding:0 2px}
#to-order{margin:4px 0 0}
.stage-cap{font-size:.86rem;color:var(--ink-muted);text-align:center;margin:-4px 0 12px}
.stage-cap[hidden]{display:none}
.notify{margin:4px 0 0;padding:14px;border:1px solid var(--paper-line);background:#fafaf8}
.notify[hidden],.notify-done[hidden],.keep[hidden]{display:none}
.notify label{display:block;font-family:var(--serif);font-weight:800;font-size:1.07rem;letter-spacing:-.01em;line-height:1.15;margin-bottom:10px}
.notify-row,.keep-row{display:flex;gap:8px}
.notify input,.keep input{flex:1;min-width:0;min-height:48px;padding:0 12px;font:400 1rem var(--sans);color:var(--ink);background:#fff;border:1px solid #bdb8b0;border-radius:2px}
.notify input:focus-visible,.keep input:focus-visible{outline:3px solid var(--green);outline-offset:1px}
.notify .btn{flex:none;min-height:48px;padding:0 18px}
.notify .note{font-size:.82rem;color:var(--ink-muted);margin:8px 0 0}
.notify-done{margin:4px 0 0;padding:12px 14px;border-left:3px solid var(--green);background:#fafaf8;font-size:.95rem}
.keep{margin:16px 0 0;font-size:.86rem;color:var(--ink-muted)}
.keep label{display:block;margin-bottom:6px}
.keep input{min-height:44px;font-size:.86rem;color:var(--ink-muted)}
.keep .btn{flex:none;min-height:44px}
.retry{text-align:center;font-size:.88rem;margin:12px 0 0;color:var(--ink-muted)}
.retry .link{color:var(--ink)}
.retry .note{display:block}
.chips-wrap{margin:18px 0 8px}
.chips-wrap[hidden]{display:none}
.chips-h{font-size:.86rem;color:var(--ink-muted);margin:0 0 8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scroll-snap-type:x proximity}
.chip{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:8px;border:1px solid var(--paper-line);background:#fafaf8;padding:4px 12px 4px 4px;min-height:48px;font:600 .86rem/1.2 var(--sans);color:var(--ink);cursor:pointer;border-radius:2px}
.chip img{width:38px;height:38px;object-fit:cover}
.chip:hover{border-color:var(--green)}
.chip:disabled{opacity:.5;cursor:not-allowed}
.photo-missing{text-align:center;margin:10px 0 0}
.photo-missing[hidden],.photo-row[hidden]{display:none}
.center{text-align:center;margin:14px 0 0}
#new-photo{font-size:.88rem;color:var(--ink-muted)}
.tried button{border:2px solid var(--paper-line);padding:0;width:56px;height:74px;overflow:hidden;background:var(--paper-2);cursor:pointer}
.tried button[aria-pressed=true]{border-color:var(--green)}
.tried img{width:100%;height:100%;object-fit:cover}
.sub-note{font-size:.88rem;color:var(--ink-muted);text-align:center;margin:0 0 12px}
#order{margin-top:30px;padding-top:24px;border-top:1px solid var(--paper-line)}
#order h3{margin-bottom:12px}
.paper .size-viz .sofa{stroke:#9a958c}
.paper .size-viz .cv{stroke:#9a958c}
.paper .size-viz .cv.on{stroke:var(--green);fill:color-mix(in srgb,var(--green) 12%,transparent)}
.paper .size-viz text{fill:var(--ink-muted)}
.paper .size-viz text.on{fill:var(--green)}
.size-viz.small{margin:0 auto 12px;max-width:280px}
.size-viz .cv.on.img{fill:none}
@media(max-width:640px){.size-viz.small{max-width:300px}}
.opts{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 12px;padding:0;border:0}
.opt{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid var(--paper-line);padding:11px 12px;cursor:pointer;background:#fafaf8;position:relative}
.opt-main{display:grid;gap:1px}
.opt .ship{color:var(--green);font-weight:600}
.opt-digital{padding:7px 12px;background:transparent;border-style:dashed}
.opt-digital b{font-size:.92rem}
.opt-digital .p{font-size:1.1rem}
.opt input{position:absolute;opacity:0}
.opt b{font-size:1rem}
.opt small{font-size:.78rem;color:var(--ink-muted)}
.opt .p{font-family:var(--serif);font-weight:800;font-size:1.11rem;letter-spacing:-.01em;line-height:1.1}
.opt:has(input:checked){border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#fff}
.opt:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.paper .shared{color:var(--ink-muted);font-size:.86rem;margin:0 0 12px}
.addon{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--paper-line);margin:0 0 14px;cursor:pointer;background:#fafaf8}
.addon input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}
.addon .note{display:block}
.addon[hidden]{display:none}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600;margin:4px 0 4px;padding-top:12px;border-top:1px solid var(--paper-line)}
.total #total{font-family:var(--serif);font-weight:800;font-size:1.3rem;text-align:right}
.total #total small{font:400 .9rem var(--sans);color:var(--ink-muted)}
.total-note{font-size:.86rem;color:var(--ink-muted);margin:0 0 14px}
.total-note:empty{display:none}
.guarantee{font-size:1rem;margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--green);background:#fafaf8}
.trust{font-size:.84rem;color:var(--ink-muted);text-align:center;margin:12px 0 0}
.deadline{border-left:3px solid var(--green);padding:4px 0 4px 12px;font-size:.92rem;margin:0 0 14px}
.deadline[hidden]{display:none}

/* faq: rules, no boxes */
.faq h2{margin-bottom:18px}
details{border-top:1px solid var(--wall-line)}
details:last-of-type{border-bottom:1px solid var(--wall-line)}
summary{cursor:pointer;list-style:none;font-family:var(--serif);font-weight:800;font-size:1.11rem;letter-spacing:-.01em;line-height:1.2;padding:16px 32px 16px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:13px;font-family:var(--sans);font-weight:300;font-size:1.5rem;color:var(--brass)}
details[open] summary::after{content:"\2212"}
details p{color:var(--on-wall-muted);margin:0 0 18px;max-width:38em}

.studio{padding:44px 0 48px;border-top:1px solid var(--wall-line)}
.studio h2{font-size:clamp(1.7rem,6vw,2.3rem)}
.studio p{max-width:36em}
.promise{margin-top:10px}

/* phone docks: an upload bar before the first preview, an order bar after it */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--wall-deep) 96%,transparent);border-top:1px solid var(--wall-line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dock[hidden]{display:none}
.dock .btn{width:100%;min-height:52px}
.order-dock{display:flex;align-items:center;gap:14px}
.order-dock .btn{width:auto;flex:1;padding:0 14px}
.od-info{display:grid;font-size:.8rem;color:var(--on-wall-muted);line-height:1.25;white-space:nowrap}
.od-info b{font-family:var(--serif);font-weight:800;font-size:1.15rem;line-height:1.1;color:var(--on-wall)}

footer{padding:40px 0 56px;border-top:1px solid var(--wall-line);font-size:.88rem;color:var(--on-wall-muted);background:var(--wall-deep)}
footer .brand{display:inline-block;margin-bottom:14px}
footer nav{display:flex;flex-wrap:wrap;gap:0 20px;margin-bottom:12px}
footer nav a{display:inline-flex;align-items:center;min-height:44px}
footer p{margin:0}

/* text pages */
body.text{background:var(--paper);color:var(--ink);color-scheme:light;--focus:var(--green)}
body.text a{color:var(--green)}
body.text .brand{color:var(--on-wall)}
body.text{min-height:100vh;display:flex;flex-direction:column}
body.text main{flex:1;width:100%}
body.text .top{background:var(--wall-deep)}
body.text .top a.btn{color:var(--brass)}
body.text footer a{color:var(--brass)}
.doc{max-width:720px;margin:0 auto;padding:34px 16px 64px}
.doc h1{font-size:clamp(2.2rem,8vw,3rem)}
.doc h2{font-size:1.6rem;margin-top:1.4em}
.doc li{margin-bottom:.5em}
.success{max-width:640px;margin:0 auto;padding:34px 16px 64px;text-align:center}
.success .frame{max-width:340px;margin:10px auto 26px}
.success .note{color:var(--on-wall-muted)}
.actions{margin:0 0 1em}
.actions .full-file{max-width:340px;width:100%;margin:12px auto 16px}
.save-tip{display:block;font-weight:600}

@media(max-width:759.98px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .head-cta{display:none}
  .hero{padding:14px 0 30px}
  .hero-grid{gap:12px}
  /* the painting is capped at a third of the screen so the sub line and the button fit the first view */
  .hero-art{--fh:min(calc(34vh - 22px),70vw);position:relative;display:block;width:max-content;max-width:100%;margin:0 auto 22px}
  .hang .frame{max-height:34vh}
  .hang .frame img{height:var(--fh);width:auto;max-width:none}
  .hang .frame.mat .matboard{padding:12px}
  .hang .frame.mat img{height:calc(var(--fh) - 24px)}
  .hero-art .placard{display:none}
  .snap{position:absolute;left:-24px;bottom:-22px;width:calc(var(--fh) * .36);margin:0;z-index:2;transform:rotate(-5deg)}
  .snap span{top:auto;bottom:4px;left:4px;right:4px;padding:2px 0;background:rgba(20,20,20,.78);color:#fff;font-size:.68rem;line-height:1.3}
  .sub{font-size:1rem;margin-bottom:12px}
  .cta{margin-bottom:10px}
}
@media(min-width:760px){
  .dock{display:none!important}
  .wrap{padding:0 28px}
  .hero{padding:56px 0 72px}
  .hero-grid{grid-template-columns:1.3fr 1fr;grid-template-areas:"h art" "copy art";column-gap:56px;row-gap:24px;align-items:end}
  .hero h1{align-self:end}
  .hero-copy{align-self:start}
  .hero-art{grid-template-columns:28% 1fr;gap:26px;max-width:540px;justify-self:end;width:100%}
  .cta .btn{width:auto;min-width:240px}
  section{padding:88px 0}
  .gallery{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);gap:44px 36px;overflow:visible;margin:0;padding:0 0 10px}
  .rooms{grid-template-columns:repeat(3,1fr);gap:20px}
  .room.edge{grid-column:auto;display:block}
  .room.edge figcaption{padding-top:8px}
  .room.wide img{aspect-ratio:16/9}
  .sizes{grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
  .app{padding:40px 44px 44px}
  .app-head{grid-template-columns:1fr minmax(0,360px);align-items:end}
  .styles{grid-template-columns:repeat(6,1fr)}
  .photo-row img{width:92px;height:92px}
  .result-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
  #order{margin-top:0;padding-top:0;border-top:0}
  .stage{margin-inline:0}
}
@media(min-width:760px){.hero h1{font-size:clamp(3.1rem,5vw,4.3rem)}}
.nb{white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}.working .working-photo{filter:grayscale(.3) brightness(.7)}}

/* 90s tee: the mockup sits on a plain card instead of a frame; options are swatches, a name and size rows */
.frame.tee{padding:0;background:#eceae6;box-shadow:0 10px 24px -14px rgba(0,0,0,.3)}
.frame.tee::before,.frame.tee::after{display:none}
#result-frame.tee #result{object-fit:contain}
.result-frame.tee .stage{aspect-ratio:1/1}
.tee-opts{display:grid;gap:14px;margin:0 0 14px}
.swatches{border:0;margin:0;padding:0}
.swatches legend,.tee-sizes legend,.tee-name span{font-size:.86rem;font-weight:600;margin-bottom:7px;padding:0}
.swatches legend b{font-weight:400;color:var(--ink-muted);margin-left:4px}
.sw-row{display:flex;flex-wrap:wrap;gap:9px}
.sw{position:relative;width:38px;height:38px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sw:has(input:checked){outline:2px solid var(--ink);outline-offset:3px}
.sw:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:3px}
.sw .tag{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--brass);font-size:.62rem;font-weight:700;letter-spacing:.02em;pointer-events:none}
.sw-row{padding-bottom:12px}
#add-size{display:block;margin-top:2px}
.swatches .more{margin-top:6px}
.tee-name{display:grid}
.tee-name input{font:inherit;font-size:1rem;padding:10px 12px;border:1px solid var(--paper-line);background:#fff;text-transform:uppercase;letter-spacing:.04em}
.tee-sizes{border:0;margin:0;padding:0;display:block}
.frame.tee .stage{background:#eceae6}
.size-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;margin-bottom:8px}
.size-row select{font:inherit;padding:9px 10px;border:1px solid var(--paper-line);background:#fff}
.qty{display:inline-grid;grid-template-columns:36px 34px 36px;align-items:center;border:1px solid var(--paper-line);background:#fff}
.qty button{font:inherit;font-size:1.1rem;height:38px;border:0;background:transparent;cursor:pointer}
.qty output{text-align:center;font-variant-numeric:lining-nums}
.size-row .rm{font-size:.78rem}
.break-hint{margin:0;padding:9px 11px;background:var(--paper-2);border-left:3px solid var(--brass);font-size:.88rem}
.break-hint b{color:var(--brass)}
#result.loading{opacity:.6;transition:opacity .15s}
.link.sm{font-size:.84rem;color:var(--ink-muted)}