:root{color-scheme:light;--paper:#f5f5f1;--ink:#171815;--muted:#5e625c;--line:#d9dbd3;--shirt-photo:url('assets/design-studio/tee-ivory.jpg')}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid #4382b6;outline-offset:3px}
button{font:inherit}
.wrap{width:min(100% - 44px,1360px);margin:auto}
.topline{padding:9px 16px;background:var(--ink);color:#fff;text-align:center;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.site-header{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}
.site-logo{display:block;width:145px}
.site-logo img{display:block;width:100%}
.site-nav{display:flex;gap:24px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.site-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.eyebrow,.step-label{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
h1{margin:10px 0 13px;font-size:clamp(45px,6.7vw,91px);line-height:.9;letter-spacing:-.075em;text-transform:uppercase}
.intro{max-width:800px;margin:0 0 27px;color:#52564f;font-size:clamp(15px,1.45vw,18px);line-height:1.55}
.hero{padding-top:33px}
.choices{display:grid;grid-template-columns:.8fr 1fr 1.35fr;gap:24px;padding:23px 0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step-label{display:block;margin-bottom:12px}
.buttons{display:flex;flex-wrap:wrap;gap:8px}
.choice{min-height:42px;padding:9px 13px;border:1px solid #afb3a9;background:transparent;color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.choice[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.logo-step{grid-column:1/-1}
.logo-step[hidden]{display:none}
.ink-dot{display:inline-block;width:13px;height:13px;margin-right:7px;border:1px solid #777;vertical-align:-2px}
.ink-dot.white{background:#fff}
.ink-dot.black{background:#111}
.choice[aria-pressed=true] .ink-dot.black{border-color:#fff}
.swatch{display:flex;align-items:center;gap:7px;min-height:42px;padding:5px 10px 5px 6px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:11px;font-weight:700;cursor:pointer}
.swatch[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.dot{width:23px;height:23px;flex:none;border:1px solid #979a93;background:var(--dot)}
.dot.forest{background:linear-gradient(135deg,#646d53 0 25%,#283a32 25% 52%,#9a9677 52% 74%,#3b4c40 74%)}
.dot.urban{background:linear-gradient(135deg,#b4b6b7 0 27%,#545e63 27% 52%,#343a40 52% 76%,#848c90 76%)}
.dot.topo{background-color:var(--dot);background-image:repeating-radial-gradient(ellipse at 61% 48%,transparent 0 3px,rgba(30,32,30,.55) 3.5px 4px);background-size:26px 22px}
.preview-head{display:flex;align-items:baseline;justify-content:space-between;gap:25px;padding:25px 0 14px}
.preview-head h2{margin:0;font-size:clamp(22px,2.4vw,31px);letter-spacing:-.05em;text-transform:uppercase}
.preview-head p{max-width:520px;margin:0;color:var(--muted);font-size:13px;line-height:1.5;text-align:right}
.views{display:grid;grid-template-columns:1fr 1fr;gap:14px}
figure{margin:0;min-width:0;border:1px solid var(--line);background:#fff}
.view{position:relative;width:100%;overflow:hidden;background-image:var(--shirt-photo);background-repeat:no-repeat;background-size:200% 100%}
.view.tee{aspect-ratio:1}
.view.singlet{aspect-ratio:3/4}
.view.front{background-position:left center}
.view.back{background-position:right center}
.front-logo{position:absolute;left:62.5%;top:26%;width:20%;height:auto;transform:translate(-50%,-50%);pointer-events:none}
.center-logo{display:none;position:absolute;left:50%;top:33%;width:44%;height:auto;transform:translate(-50%,-50%);pointer-events:none}
.back-island{position:absolute;left:50%;top:27%;width:44.8%;height:auto;aspect-ratio:470/170;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.back-wordmark{position:absolute;left:50%;top:44%;width:36%;height:auto;aspect-ratio:1740/315;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.back-logo{display:none;position:absolute;left:50%;top:38%;width:40%;height:auto;transform:translate(-50%,-50%);pointer-events:none}
.view.singlet .front-logo{left:63%;top:33%;width:20%}
.view.singlet .center-logo{top:40%;width:39%}
.view.singlet .back-island{top:41%;width:34.4%}
.view.singlet .back-wordmark{top:53%;width:28%}
.view.singlet .back-logo{top:44%;width:35.2%}
.view.tee.front .center-logo{left:50.7%}
.view.tee.back .back-island,.view.tee.back .back-wordmark,.view.tee.back .back-logo{left:48.3%}
.view.singlet.front .center-logo{left:49.8%}
.view.singlet.back .back-island,.view.singlet.back .back-wordmark,.view.singlet.back .back-logo{left:49.5%}
body[data-design=original] .front-logo,body[data-design=original] .back-island,body[data-design=original] .back-wordmark{display:none}
body[data-design=original] .center-logo{display:block}
body[data-design=logo-back] .back-island,body[data-design=logo-back] .back-wordmark{display:none}
body[data-design=logo-back] .back-logo{display:block}
body[data-ink=light] .front-logo,body[data-ink=light] .center-logo,body[data-ink=light] .back-island,body[data-ink=light] .back-wordmark,body[data-ink=light] .back-logo{filter:invert(1)}
figcaption{display:flex;justify-content:space-between;gap:12px;padding:15px 17px 17px;border-top:1px solid var(--line);font-size:12px}
figcaption strong{letter-spacing:.13em}
figcaption span{color:var(--muted);text-align:right}
.foot{display:flex;justify-content:space-between;gap:25px;margin:30px 0 55px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.5}
.foot strong{color:var(--ink)}
.site-footer{display:flex;justify-content:space-between;gap:20px;padding:24px 0 35px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:900px){.choices{grid-template-columns:1fr 1fr}.choices .color-step{grid-column:1/-1}.preview-head{display:block}.preview-head p{margin-top:7px;text-align:left}}
@media(max-width:650px){.wrap{width:min(100% - 24px,1360px)}.site-header{min-height:67px}.site-logo{width:120px}.site-nav{gap:13px;font-size:10px}.hero{padding-top:25px}.choices{grid-template-columns:1fr;gap:21px}.choices .color-step{grid-column:auto}.views{grid-template-columns:1fr}.foot{display:block}.site-footer{font-size:9px}}