/* Shop finish: restrained motion, shared studio palette, accessible controls.
   One surface language: paper, a hairline and three radii. Real controls look like controls, and labels stay plain text. */
body{--ease-out:cubic-bezier(.23,1,.32,1);--surface:#fffdf9;--muted:#5f6158;--ink:#292b26;--hairline:#d7d4cb;--r-control:6px;--r-card:8px;--r-panel:12px;background:#f5f3ee}header{padding-block:0}.brand{position:relative}header nav a{position:relative;padding:10px 0}header nav a:after{content:'';position:absolute;inset:auto 0 3px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 160ms var(--ease-out)}.cart-button{display:flex;align-items:center;gap:3px;border:1px solid var(--hairline);background:var(--surface);border-radius:var(--r-control);padding:8px 12px;min-height:40px}.cart-button .icon{width:16px;height:16px}#count{background:#eeece5;border:0;border-radius:4px;font-variant-numeric:tabular-nums}.intro .slogan{font-weight:650}.intro .slogan em{color:#d9362b}.collection{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-panel);padding:16px 13px 13px}.collection-heading h2{font-weight:600}.filters button{border-radius:var(--r-control);background:var(--surface);border-color:var(--hairline);min-height:32px}.filters button.active{background:var(--ink);border-color:var(--ink);color:#fff}.section-line{padding-top:3px}.thumb{position:relative;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);transition:transform 160ms var(--ease-out)}.thumb img{border-radius:4px}.thumb span{font-weight:450}.thumb.active{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}.thumb.active:after{content:'';position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:4px;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}.product-stage{border-radius:var(--r-panel);background:#d3d0c8;border:1px solid #c9c6bc}#position,.stage-bottom span{color:#4a4d44;font-size:12px;letter-spacing:0}#position{font-variant-numeric:tabular-nums}.stage-bottom button{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--surface);color:var(--ink)}.stage-bottom span{display:flex;align-items:center;gap:6px;padding:0;background:none}.stage-bottom span .icon{width:14px;height:14px}.print{transition:none}.shirt-wrap{border-radius:5px}.shirt-wrap:focus-visible{outline:3px solid var(--red);outline-offset:-5px}.product-heading{align-items:flex-start}.details h2{font-weight:600}.product-heading p{line-height:1.65}.price{padding-top:4px}.price span{color:#33362e;font-weight:500}.options-bar{border-radius:var(--r-panel);background:var(--surface);border:1px solid var(--hairline)}.sizes button{border-radius:var(--r-control);background:var(--surface);border-color:var(--hairline)}.sizes button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.swatch{width:16px;height:16px;border:0;outline:0;border-radius:50%}.text-button{min-height:24px;font-size:12px;border-bottom-color:#898b7f}.primary{border-radius:var(--r-control);font-weight:500;gap:12px}.primary.is-saved{background:#304e36}.product-notes{border-top:1px solid var(--line)}.product-notes details{border:0}.manifesto{position:relative;background:#242720;overflow:hidden}.manifesto .eyebrow{color:#b7b9a7}.manifesto h2{font-weight:550;max-width:850px;margin-inline:auto}.manifesto em{color:#ef624e}.manifesto p{color:#bdc0b0;line-height:1.8}footer{background:#242720}dialog{border-radius:var(--r-panel);box-shadow:0 18px 80px #0003}dialog::backdrop{background:#171a16aa;backdrop-filter:blur(4px)}.dialog-top h2{letter-spacing:-.6px}.dialog-top button{display:grid;place-items:center;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--surface);color:var(--ink)}.cart-item img{border-radius:4px}.cart-item button{color:#a13e32}.zoom-toolbar{border-bottom:1px solid #d9d7ce}.zoom-toolbar h2{font-weight:550}.zoom-toolbar button{display:grid;place-items:center;background:var(--surface);border-color:var(--hairline);border-radius:var(--r-control);color:var(--ink)}.zoom-help{border-top:1px solid #d9d7ce}#toast{border-radius:var(--r-control);background:#2c4130;box-shadow:0 6px 22px #0002;opacity:0;transform:translateY(6px);transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}#toast.visible{opacity:1;transform:translateY(0)}button{transition:transform 160ms var(--ease-out)}body:not(.keyboard-input) button:active:not(:disabled){transform:scale(.98)}.shirt-wrap:active{transform:none!important}button:disabled{cursor:default;opacity:.5}body.keyboard-input button,body.keyboard-input nav a:after{transition:none}
@media(hover:hover) and (pointer:fine){body:not(.keyboard-input) .thumb:hover{transform:translateY(-2px)}.thumb:hover{border-color:#aaa69a}header nav a:hover:after{transform:scaleX(1)}.sizes button:not(.active):hover{border-color:#898b7f}.filters button:not(.active):hover{background:#eeece4}.cart-button:hover,.dialog-top button:hover,.zoom-toolbar button:hover{border-color:#898b7f}.stage-bottom button:hover{background:var(--ink);border-color:var(--ink);color:#fff}.primary.is-saved:hover{background:#263e2b}}
@media(max-width:1000px){.collection{border:0;padding:0;background:none}.thumb.active:after{top:8px;right:8px;width:18px;height:18px;background-size:12px}.filters button{min-height:32px}.options-bar{padding:14px}.product-notes{margin-top:4px}.cart-button{padding:7px 9px}}
@media(max-width:380px){.cart-button{padding:6px}.cart-button #count{width:20px;height:20px;margin-inline:2px}.filters button{min-height:30px}.options-bar{padding:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.thumb:hover,button:active{transform:none!important}#toast{transform:none}}
/* Keep scroll-snap targets geometrically stable while choosing a design. */
body:not(.keyboard-input) .thumb:active{transform:none}
@media(max-width:1000px){body:not(.keyboard-input) .thumb:hover{transform:none}}
/* A narrow design panel gives the shirt a wide stage. The photo has margins, so it grows past the stage height and the shirt fills it. */
@media(min-width:1001px){
.studio{width:92vw;max-width:1740px;margin-inline:auto;grid-template-columns:clamp(430px,44%,760px) minmax(0,1fr);gap:22px 30px}
main>.studio:first-child{--workspace-height:clamp(460px,calc(100svh - 110px),850px)}
.collection{height:var(--workspace-height)}
.product-stage{height:var(--workspace-height);container-type:size}
.shirt-wrap{width:min(115cqh,100cqw);height:auto;aspect-ratio:1}
.shirt-wrap:focus-visible{outline:none}.product-stage:has(.shirt-wrap:focus-visible){outline:3px solid var(--red);outline-offset:-3px}
.stage-bottom span{margin-left:auto}
.options-bar{grid-template-columns:90px minmax(0,1fr);gap:14px 18px}
.options-bar .primary{grid-column:1/-1}
.thumbnails{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 -13px 0 -3px;padding-right:3px}
}
@media(min-width:1250px){.details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:30px;align-items:start}.product-heading,.options-bar,.preview-note{grid-column:1}.product-notes{grid-column:2;grid-row:1/span 3;margin-top:0}}

/* Fit the lightbox to the shirt; reserve scrolling for deliberate detail zoom. */
#zoom{width:min(94vw,max(560px,calc(94svh - 110px)));height:94svh;max-height:94svh}
.zoom-toolbar{padding:12px 18px;gap:12px}.zoom-toolbar h2{font-size:20px}
.zoom-viewport{container-type:size;background:#c4c0b6}
#zoom.fit .zoom-viewport{overflow:hidden;display:grid;place-items:center}
#zoom.fit .zoom-composition{width:min(100cqw,100cqh);margin:0;flex-shrink:0}
.zoom-help{padding:9px 12px}
@media(max-width:600px){#zoom{width:100vw;max-width:100vw;height:100svh;max-height:100svh}.zoom-toolbar{flex-wrap:nowrap;padding:12px;gap:8px}.zoom-toolbar>div{flex:1;order:0}.zoom-toolbar h2{font-size:17px}#zoom-toggle{order:1;margin-left:0;font-size:11px;padding:8px}.zoom-close{order:2}}
/* One white frame around the original grey photograph. */
#zoom,.zoom-toolbar,.zoom-help,.zoom-viewport{background:#fff}
.zoom-viewport{margin-inline:16px}.zoom-toolbar,.zoom-help{border:0}
@media(max-width:600px){.zoom-viewport{margin-inline:10px}}
/* Soft page tint under solid surfaces; only the lightbox floats. */
body{background:radial-gradient(ellipse at 8% 16%,#dce6df80,transparent 42%),radial-gradient(ellipse at 92% 8%,#f2dfd37a,transparent 40%),#f5f3ee}
#zoom{background:#fff;box-shadow:0 32px 100px #111a;border-radius:var(--r-panel)}#zoom::backdrop{background:#18231f99;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
@media(hover:hover) and (pointer:fine){.thumb.active:hover{border-color:var(--red)}}
@media(max-width:600px){#zoom{border-radius:0}}
/* One icon set: drawn strokes instead of font glyphs, which fall back to a different typeface. The hidden attribute has no effect on svg. */
.icon-sprite{display:none}.icon{display:block;flex-shrink:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-offset:2px}
/* Long design names wrap instead of widening the page. */
.details h2,.thumb span,#zoom-title{overflow-wrap:anywhere}.product-heading .price{flex:0 0 auto;min-width:78px}
/* Design pages: the design name is the page heading, and thumbnails are real links. */
.details h1{font-size:25px;line-height:1.15;margin:6px 0;letter-spacing:-.6px;font-weight:600}.thumb{display:block;color:inherit}main>.studio:first-child{margin-top:20px}
@media(min-width:1001px) and (max-width:1250px){.details h1{font-size:23px}}
@media(max-width:1000px){.details h1{font-size:26px}}
/* Cut choice sits on the preview, next to the shirt it changes. */
.models{display:flex;gap:2px;padding:3px;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--surface);pointer-events:auto}.models button{min-width:70px;min-height:34px;padding:0 12px;border:0;border-radius:3px;background:none;color:#42483f;font-size:13px;font-weight:500;letter-spacing:0}.models button.active{background:var(--ink);color:#fff}
@media(hover:hover) and (pointer:fine){.models button:not(.active):hover{background:#292b2612}}
@media(max-width:380px){.models button{min-width:62px;padding:0 8px;font-size:12px}}
/* Both photos share one scale, so the women's cut looks as much shorter as it is. Print box: 28 × 35 cm and 24 × 30 cm. */
.shirt-814{display:none}body[data-model="814"] .shirt-813{display:none}body[data-model="814"] .shirt-814{display:block}
.print{left:35%;top:24%;width:30%;height:40%}body[data-model="814"] .print{left:37.15%;width:25.7%;height:34.3%}
/* Product facts read as stacked sections. */
.product-notes{grid-template-columns:minmax(0,1fr);gap:0}.product-notes details{border-bottom:1px solid var(--line)}.product-notes details:last-child{border-bottom:0}.product-notes details{padding:0}.product-notes details[open]{padding-bottom:10px}.product-notes summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:13px;font-weight:500;color:var(--ink);list-style:none}.product-notes summary::-webkit-details-marker{display:none}.product-notes summary:after{content:'';width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292b26' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform 160ms var(--ease-out)}.product-notes details[open] summary:after{transform:rotate(180deg)}.product-notes p{font-size:13px;line-height:1.6;margin:8px 0}.product-notes ul{margin:8px 0;padding-left:18px;font-size:13px;line-height:1.6}.product-notes li{margin-bottom:3px}.product-notes strong{color:#33362e;font-weight:600}
.size-table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:13px;font-variant-numeric:tabular-nums}.size-table caption{text-align:left;font-weight:600;padding-bottom:6px;color:#33362e}.size-table th,.size-table td{padding:7px 4px;border-bottom:1px solid var(--line);text-align:center;font-weight:400}.size-table thead th{font-weight:600}.size-table th:first-child{text-align:left}
#guide{width:min(560px,calc(100% - 32px))}#guide>p{line-height:1.6}
@media(max-width:380px){.size-table{font-size:12px}.size-table th,.size-table td{padding:6px 2px}}
/* Marks on design cards, and the row of similar designs below the product facts. */
.design-badge{position:absolute;z-index:1;top:12px;left:12px;padding:2px 6px;border-radius:4px;background:var(--ink);color:#fff;font-size:10px;font-style:normal;font-weight:500;line-height:1.4}.design-badge.new{background:var(--surface);color:#a02a22;border:1px solid var(--red)}
.related{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);grid-column:1/-1}.related h2{margin:0 0 10px;font-size:15px;font-weight:600;letter-spacing:-.2px}.related-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.related-card{display:block;padding:7px;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);color:inherit}.related-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:5px;background:#1f201d;border-radius:4px}.related-card span{display:block;margin-top:7px;font-size:12px;line-height:1.3;overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){.related-card:hover{border-color:#898b7f}}
@media(max-width:600px){.related-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Author display rules would otherwise beat the hidden attribute. */
[hidden]{display:none!important}
#checkout-link{margin-bottom:8px}#checkout-link:not([hidden])+.primary{background:var(--surface);color:var(--ink);border:1px solid var(--hairline)}
/* Order form: the shop's paper panels, one step per panel. */
.checkout{max-width:720px;margin:0 auto;padding:24px 16px 56px}.checkout h1{margin:0 0 16px;font-size:clamp(28px,4vw,38px);line-height:1.1;letter-spacing:-1.2px;font-weight:650}.checkout-back{font-size:13px;color:#66685f}.checkout-test{margin:0 0 12px;padding:10px 12px;border:1px solid var(--red);border-radius:var(--r-control);color:#a02a22;font-size:13px}.checkout-panel{margin-bottom:12px;padding:18px;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--surface)}.checkout-panel h2{margin:0 0 12px;font-size:16px;font-weight:600}.checkout-panel p{font-size:14px;line-height:1.6}.checkout-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.checkout label{display:block;font-size:12px;font-weight:500}.checkout .wide{grid-column:1/-1}.checkout-note{margin-top:12px}.checkout input:not([type=radio]),.checkout textarea,.checkout select{display:block;width:100%;min-height:44px;margin-top:6px;padding:10px 12px;border:1px solid var(--hairline);border-radius:var(--r-control);background:#fff;color:var(--ink);font:inherit;font-size:16px}.checkout-delivery{display:flex;gap:18px;margin-bottom:14px}.checkout-delivery label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px}.checkout-delivery input{accent-color:var(--ink);width:18px;height:18px}.order-line{display:grid;grid-template-columns:72px minmax(0,1fr) 84px auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--hairline);font-size:13px;line-height:1.45}.order-line:first-child{border-top:0;padding-top:0}.order-line img{display:block;width:72px;height:72px;object-fit:contain;padding:4px;background:#1f201d;border-radius:4px}.order-line label{font-size:11px;font-weight:400}.order-line select{min-height:38px;margin-top:2px;padding:6px 8px;font-size:14px}#order-error{margin:0 0 12px;color:#a02a22;font-size:14px}.checkout .primary{min-height:48px;font-size:13px}.checkout .primary[disabled]{cursor:wait}
@media(max-width:560px){.checkout-fields{grid-template-columns:1fr}.order-line{grid-template-columns:56px minmax(0,1fr) 72px}.order-line img{width:56px;height:56px}.order-line .text-button{grid-column:2/-1;justify-self:start}}
/* Missing-page screen shares the shop header and footer. */
.not-found{min-height:calc(100svh - 170px);display:grid;place-content:center;justify-items:center;gap:14px;padding:48px 20px;text-align:center}.not-found .eyebrow{color:#77776b}.not-found h1{font-size:clamp(30px,5vw,46px);line-height:1.1;letter-spacing:-1.5px;font-weight:650;margin:0}.not-found p{max-width:440px;margin:0;font-size:14px;color:var(--muted)}.not-found .primary{width:auto;min-width:220px;margin-top:10px;justify-content:center}
/* One secondary text colour at a readable contrast, and a 12px floor for all text. */
.intro .eyebrow,.intro p,.price,.product-heading .eyebrow,.product-heading p,.details .preview-note,.collection-heading h2 span,.product-notes p,.product-notes ul,header nav a{color:var(--muted)}
.intro .eyebrow,.collection-heading .eyebrow,.product-heading .eyebrow,.zoom-toolbar .eyebrow,.manifesto .eyebrow{font-size:12px;letter-spacing:1px}
.filters button,.price,.collection-heading h2 span,.details .preview-note,.options-bar legend,.color-label,.zoom-help,.related-card span,.cart-button{font-size:12px}
.thumb span{font-size:12px;line-height:1.3;min-height:32px}
.intro p,.product-heading p,.product-notes p,.product-notes ul,.product-notes summary,.manifesto p{font-size:14px}
.price span{font-size:14px}
/* The panel heading names the step on wider screens, where the list has its own header. */
@media(min-width:1001px){.section-line{display:none}}
.options-bar legend{min-height:24px;align-items:center}
.filters button,.filters button.active{font-weight:500}
footer a:last-child{font-size:12px}footer a img{width:110px;height:auto}
/* All sizes of a model share one row, so 2XL never drops onto a line of its own. */
.sizes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.sizes button{min-width:0;padding-inline:2px;font-size:12px}
.design-badge{font-size:12px}

/* Bot trap in the order form: hidden from people, still a normal field for a form-filling script. */
.checkout-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* The home page keeps its slogan as the big line, with the search phrase as the real heading. */
.intro h1.eyebrow{margin:0;font-weight:700;text-transform:uppercase}
a.eyebrow{display:inline-block}

/* Pages for search: one per profession and one per gift guide. */
.browse{display:block;max-width:1040px;margin:0 auto;padding:32px 16px}
.browse h2{margin:0 0 12px;font-size:18px;letter-spacing:-.3px}
.browse-links{display:flex;flex-wrap:wrap;gap:8px}
.browse-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--surface);font-size:14px}
.landing{max-width:1040px;margin:0 auto;padding:24px 16px 16px}
.landing .browse{padding-inline:0}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;font-size:13px;color:var(--muted)}
.crumbs a,.landing-more a{text-decoration:underline;text-underline-offset:3px}
.landing h1{margin:0 0 12px;font-size:clamp(30px,5vw,46px);line-height:1.1;letter-spacing:-1.5px;font-weight:650;text-wrap:balance}
.landing-lead{max-width:680px;margin:0 0 8px;font-size:17px;line-height:1.55;text-wrap:pretty}
.landing-note{margin:0 0 8px;font-size:14px;color:var(--muted)}
.landing-section{margin-top:36px}
.landing-section h2{margin:0 0 8px;font-size:clamp(21px,3vw,26px);line-height:1.2;letter-spacing:-.5px;font-weight:650;text-wrap:balance}
.landing-section p,.landing-section li{max-width:680px;font-size:16px;line-height:1.6;text-wrap:pretty}
.landing-section p{margin:0 0 12px}
.landing-section ul{margin:0 0 12px;padding-inline-start:20px}
.shirt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media(min-width:640px){.shirt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.shirt-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.shirt-card{display:flex;flex-direction:column;gap:6px;min-width:0}
.shirt-card-art{position:relative;display:block;aspect-ratio:1;background:#232421;border-radius:8px}
.shirt-card-art img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}
.shirt-card strong{font-size:16px;line-height:1.25}
.shirt-card span:last-child{font-size:14px;line-height:1.45;color:var(--muted)}
.landing-more{margin:32px 0 0;font-size:16px}
@media(hover:hover){a.eyebrow:hover,.shirt-card:hover strong{text-decoration:underline;text-underline-offset:3px}.browse-links a:hover{border-color:var(--ink)}}
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:4;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--surface);color:var(--ink);opacity:0;visibility:hidden;transition:opacity 180ms var(--ease-out),visibility 180ms}
.to-top.visible{opacity:1;visibility:visible}
footer:has(~.to-top){padding-right:76px}
@media(hover:hover){.to-top:hover{border-color:var(--ink)}}
/* Desktop card: one column under the shirt. Heading and options span it, long text keeps a readable line. */
@media(min-width:1001px){.details{display:block;container-type:inline-size}.product-heading{margin-bottom:16px}.product-heading p{max-width:32em;font-size:15px}.product-notes{margin-top:8px}.product-notes p,.product-notes ul{max-width:32em;font-size:15px;line-height:1.65}.product-notes summary{font-size:14px}}
@container (min-width:600px){.options-bar{grid-template-columns:auto minmax(0,1fr) minmax(200px,260px);align-items:end}.options-bar .primary{grid-column:auto}}
/* Similar designs: own row right after the studio and exactly as wide as its content.
   Outside the grid, because the sticky collection panel slides over anything inside it. */
.related-row{width:calc(100% - 36px);max-width:614px;margin:22px auto 0}
@media(max-width:380px){.related-row{width:calc(100% - 24px)}}
@media(min-width:1001px){.related-row{width:92vw;max-width:1740px}}
/* Similar designs carousel: native scroll with snap, arrows centred under the cards around a short progress line,
   mouse wheel support in app.js. Only whole cards show. */
.related-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.related-nav button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--surface);color:var(--ink)}
.related-nav button:disabled{opacity:.35;cursor:default}
.related-nav[hidden],.related-progress[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.related-nav button:not(:disabled):hover{border-color:var(--ink)}}
.related-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 10px)/2);gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:6px;scrollbar-width:none;padding:6px;margin:-6px}
.related-list::-webkit-scrollbar{display:none}
.related-card{scroll-snap-align:start}
@media(min-width:601px){.related-list{grid-auto-columns:calc((100% - 20px)/3)}}
@media(min-width:1001px){.related-list{grid-auto-columns:calc((100% - 70px)/6);gap:14px}}
.related-progress{width:min(220px,40%);height:3px;margin:0;background:var(--hairline);border-radius:3px;overflow:hidden}
.related-progress span{display:block;width:0;height:100%;background:var(--ink);border-radius:3px}
/* The links under the carousel start at the same edge. */
.related-row~.browse{width:calc(100% - 36px);max-width:614px;padding-inline:0}
@media(max-width:380px){.related-row~.browse{width:calc(100% - 24px)}}
@media(min-width:1001px){.related-row~.browse{width:92vw;max-width:1740px}}
/* Shirt stage morph: only the stage and the print are captured. The print cross-fades on a design change
   and glides to its new place on a cut change. The whole stage is captured, not the shirt photo, because the photo
   multiplies onto the stage colour and a snapshot of it alone shows a white box. The page stays clickable while it runs. */
:root{view-transition-name:none}
#print{view-transition-name:print}
.product-stage{view-transition-name:stage}
::view-transition{pointer-events:none}
::view-transition-group(print),::view-transition-group(stage){animation-duration:200ms;animation-timing-function:cubic-bezier(.77,0,.175,1)}
::view-transition-old(print),::view-transition-new(print),::view-transition-old(stage),::view-transition-new(stage){animation-duration:180ms;animation-timing-function:cubic-bezier(.23,1,.32,1)}
@media(prefers-reduced-motion:reduce){::view-transition-group(print),::view-transition-group(stage){animation-duration:0s}}
/* Save button: the colour settles instead of snapping when the design lands in the selection. */
#add{transition:transform 160ms var(--ease-out),background-color 180ms ease}
/* Manifesto ECG line: drawn by default, swept left to right like a monitor once per visit (app.js). */
.manifesto-ekg{display:block;width:min(600px,100%);height:auto;margin:20px auto 4px;overflow:visible;clip-path:inset(0 0 0 0)}
.manifesto-ekg path{fill:none;stroke:#ef624e;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.manifesto-ekg.is-armed{clip-path:inset(0 100% 0 0)}
.manifesto-ekg.is-drawing{clip-path:inset(0 0 0 0);transition:clip-path 1200ms linear}
/* Site menu: plain links and two dropdowns on desktop, a side sheet on phones. Dropdowns grow out of their trigger
   (opacity and scale .95, 200 ms), the sheet slides in from the edge it leaves by (drawer curve, 400 ms). */
.header-actions{display:flex;align-items:center;gap:8px}
.site-nav{display:flex;align-items:center;gap:30px}
.nav-trigger{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:10px 0;border:0;border-radius:0;background:none;font:inherit;font-size:14px;color:var(--muted);cursor:pointer}
.nav-trigger .icon{width:16px;height:16px;transition:transform 200ms var(--ease-out)}
.nav-trigger:has(+.nav-panel:popover-open){color:var(--ink)}
.nav-trigger:has(+.nav-panel:popover-open) .icon{transform:rotate(180deg)}
.nav-panel{position:fixed;inset:auto;margin:0;width:300px;padding:6px;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--surface);color:var(--ink);transform-origin:top left;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),overlay 200ms allow-discrete,display 200ms allow-discrete}
.nav-panel:not(:popover-open){opacity:0;transform:scale(.95)}
@starting-style{.nav-panel:popover-open{opacity:0;transform:scale(.95)}}
.nav-panel a,.site-menu .menu-list a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r-control);font-size:14px;color:var(--ink)}
.nav-panel a:after{display:none}
.nav-panel small,.site-menu small{flex:0 0 auto;font-size:12px;color:var(--muted)}
.nav-panel a[aria-current],.site-menu a[aria-current]{background:#eeece5}
.nav-panel .menu-all{align-items:center;margin-top:6px;border-top:1px solid var(--hairline);border-radius:0 0 var(--r-control) var(--r-control);font-weight:500}
.menu-all .icon{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.nav-trigger:hover{color:var(--ink)}.nav-panel a:hover,.site-menu .menu-list a:hover{background:#f1efe8;color:var(--ink)}}
.menu-open{display:none}
@media(max-width:1000px){.site-nav{display:none}.menu-open{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--surface);color:var(--ink)}}
.site-menu{position:fixed;inset:0 0 0 auto;width:min(360px,88vw);max-width:none;height:100%;max-height:none;margin:0;padding:12px 18px 28px;border-radius:var(--r-panel) 0 0 var(--r-panel);overflow-y:auto;overscroll-behavior:contain;transition:transform 400ms cubic-bezier(.32,.72,0,1),overlay 400ms allow-discrete,display 400ms allow-discrete}
.site-menu:not([open]){transform:translateX(100%)}
@starting-style{.site-menu[open]{transform:translateX(100%)}}
.site-menu::backdrop{transition:opacity 400ms var(--ease-out),overlay 400ms allow-discrete,display 400ms allow-discrete}
@starting-style{.site-menu[open]::backdrop{opacity:0}}
.site-menu .dialog-top{margin-bottom:6px}
.site-menu .menu-main{display:block;padding:14px 4px;border-bottom:1px solid var(--hairline);font-size:18px;font-weight:600}
.site-menu h3{margin:20px 4px 6px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.site-menu .menu-list{margin-bottom:6px}
.site-menu .menu-list a{padding:12px 8px;font-size:16px}
/* Intro: more air between the three lines and around them (inside 14 and 12 px, outside about twice that).
   The home studio gives the same 36 px back, so the whole shirt stage still fits the first screen. */
.intro{padding:22px 20px 26px}
.intro .slogan{margin:14px 0 12px}
@media(max-width:1000px){.intro{padding:24px 16px}.intro .slogan{margin:12px 0 10px}}
@media(min-width:1001px){.intro~.studio{--workspace-height:clamp(460px,calc(100svh - 236px),850px)}}
@media(min-width:1001px) and (max-height:730px){.intro~.studio{--workspace-height:clamp(430px,calc(100svh - 226px),580px)}}