:root{color-scheme:light;--paper:#f6f6f2;--white:#fff;--ink:#171815;--muted:#666961;--line:#d9dbd3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
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{outline:2px solid var(--ink);outline-offset:4px}
.wrap{width:min(100% - 48px,1400px);margin:auto}
.topline{background:var(--ink);color:#fff;text-align:center;padding:9px 16px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.site-logo{width:148px;display:block}
.site-logo img{width:100%;display:block}
.site-nav{display:flex;gap:26px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.site-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.hero{padding:52px 0 30px;display:flex;justify-content:space-between;align-items:end;gap:28px}
h1{margin:8px 0 0;max-width:950px;font-size:clamp(48px,7.5vw,108px);line-height:.88;letter-spacing:-.075em;text-transform:uppercase}
.hero-copy{max-width:300px;color:#555951;font-size:15px;line-height:1.6}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{display:block;min-width:0}
.card .media{transition:filter .2s ease}
.card:hover .media{filter:contrast(1.04)}
.media{position:relative;width:100%;overflow:hidden;background-image:url('assets/running-blanks.png');background-repeat:no-repeat;background-size:200% auto;background-color:#fff}
.media.tee,.media.singlet{aspect-ratio:.835}
.media.blackcap,.media.stonecap{aspect-ratio:1.24}
.media.tee{background-position:0 0}
.media.singlet{background-position:100% 0}
.media.blackcap{background-position:0 100%}
.media.stonecap{background-position:100% 100%}
.media.islandtee{aspect-ratio:611/643.5;background-image:url('assets/island-graphic-tee-sheet.png');background-position:0 0}
.media.island-front-back{aspect-ratio:1;background-image:url('assets/island-front-back-blank.png');background-size:200% 100%}
.media.island-front-back.front-view{background-position:left center}
.media.island-front-back.back-view{background-position:right center}
.grid .media.island-front-back{background-image:url('assets/design-studio/tee-ivory.jpg')}
.media.original-tee{aspect-ratio:1;background-image:url('assets/design-studio/tee-ivory.jpg');background-size:200% 100%;background-position:left center}
.original-tee .center-logo{position:absolute;left:50%;top:33%;width:44%;height:auto;transform:translate(-50%,-50%);pointer-events:none}
.media.studio-singlet{aspect-ratio:1;background-image:none;display:flex;justify-content:center}
.singlet-card-view{position:relative;height:100%;aspect-ratio:3/4;background-image:url('assets/design-studio/singlet-ivory.jpg');background-size:200% 100%;background-position:right center}
.singlet-card-view.original-front{background-position:left center}
.singlet-card-view .center-logo{position:absolute;left:50%;top:40%;width:39%;height:auto;transform:translate(-50%,-50%);pointer-events:none}
.studio-singlet .back-island{position:absolute;display:block;left:50%;top:41%;width:34.4%;height:auto;aspect-ratio:470/170;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.studio-singlet .back-wordmark{position:absolute;display:block;left:50%;top:53%;width:28%;height:auto;aspect-ratio:1740/315;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.mark{position:absolute;display:block;height:auto;transform:translate(-50%,-50%);pointer-events:none}
.islandtee .mark{left:45.8%;top:39.8%;width:20.235%;aspect-ratio:1740/315;overflow:hidden;filter:invert(1)}
.front-view .front-logo{position:absolute;left:62.5%;top:26%;width:20%;height:auto;transform:translate(-50%,-50%);pointer-events:none}
.back-view .back-island{position:absolute;display:block;left:50%;top:27%;width:44.8%;height:auto;aspect-ratio:470/170;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.back-view .back-wordmark{position:absolute;display:block;left:50%;top:44%;width:36%;height:auto;aspect-ratio:1740/315;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.tee .mark{left:50%;top:31.3%;width:36%;filter:invert(1)}
.singlet .mark{left:50%;top:35.8%;width:34%}
.blackcap .mark{left:54.4%;top:46%;width:27.6%;filter:invert(1);transform:translate(-50%,-50%) rotate(-6deg)}
.stonecap .mark{left:54%;top:45%;width:27.6%;transform:translate(-50%,-50%) rotate(-5deg)}
.card-info{display:flex;align-items:start;justify-content:space-between;gap:12px;padding:16px 2px 22px;border-bottom:1px solid var(--line)}
.card-title{margin:0;font-size:clamp(17px,1.6vw,23px);font-weight:900;letter-spacing:-.04em;text-transform:uppercase}
.card-meta{display:block;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.4}
.card-arrow{font-size:23px;line-height:1}
.note{margin:60px 0 70px;padding:28px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:25px}
.note h2{margin:0;font-size:clamp(28px,4vw,54px);letter-spacing:-.06em;line-height:1;text-transform:uppercase}
.note p{max-width:460px;margin:0;color:#555951;font-size:15px;line-height:1.7}
.breadcrumb{padding:25px 0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{text-decoration:underline;text-underline-offset:4px}
.product{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr);gap:clamp(28px,5vw,88px);align-items:start}
.product-visuals{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.product-visuals .media:first-child{grid-column:1/-1}
.product-visuals .media:not(:first-child){aspect-ratio:1.24}
.product-visuals.front-back-visuals{gap:12px}
.front-back-visuals figure{margin:0;min-width:0}
.front-back-visuals .media.island-front-back{aspect-ratio:1}
.front-back-visuals figcaption{padding:10px 2px 0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cap-page .product-visuals .media{grid-column:1/-1}
.product-details{position:sticky;top:22px;padding-top:10px}
.product-details h1{font-size:clamp(48px,5vw,78px);margin:20px 0 24px}
.product-lead{max-width:500px;margin:0 0 30px;color:#4d5049;font-size:18px;line-height:1.55}
.status{display:inline-block;margin-bottom:28px;padding:10px 13px;border:1px solid var(--ink);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.spec{padding:19px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:130px 1fr;gap:15px;font-size:14px;line-height:1.55}
.spec strong{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.spec span{color:#52564f}
.back-link{display:inline-block;margin:28px 0 60px;border-bottom:2px solid var(--ink);padding-bottom:6px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.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:800px){.hero{display:block;padding-top:38px}.hero-copy{max-width:530px;margin:20px 0 0}.product{grid-template-columns:1fr}.product-details{position:static;padding-top:4px}.product-details h1{font-size:clamp(48px,10vw,78px)}.note{margin:45px 0;grid-template-columns:1fr}}
@media(max-width:560px){.wrap{width:min(100% - 28px,1400px)}.site-header{height:69px}.site-logo{width:124px}.site-nav{gap:13px;font-size:10px}.hero{padding:31px 0 25px}.grid{gap:10px}.card-info{padding:12px 1px 18px}.card-title{font-size:15px}.card-meta{font-size:10px}.card-arrow{font-size:18px}.product-visuals{gap:8px}.front-back-visuals{grid-template-columns:1fr}.spec{grid-template-columns:95px 1fr;gap:10px}.site-footer{font-size:9px}}