:root{
  --bg:#150e09;--paper:#f3e5c6;--muted:#b9a27d;--amber:#ffb24f;--gold:#dab77c;--line:#bf986c44;
  --metal-hi:#6b5a47;--metal-lo:#1b1510;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --lab:74px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.is-locked{overflow:hidden}
body{margin:0;min-height:100vh;color:var(--paper);font:14px/1.8 var(--sans);-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse 70% 38% at 50% 0,#7a461d40,transparent 70%),radial-gradient(ellipse 60% 50% at 0 60%,#5a321522,transparent 60%),var(--bg)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2373674f' filter='url(%23n)' opacity='.2' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
a{color:inherit;text-underline-offset:5px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
h1,h2,p,ul{margin:0}ul{padding:0;list-style:none}
.skip{position:absolute;left:16px;top:8px;z-index:60;background:var(--paper);color:var(--bg);padding:12px}
.skip:not(:focus){width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* header (same as the other pages) */
.site-header{max-width:1240px;margin:auto;padding:23px 26px 20px;min-height:91px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.wordmark img{width:176px}
.site-header nav{display:flex;align-items:center;flex-wrap:wrap;gap:25px;font-size:11px;letter-spacing:.04em}
.site-header nav a{position:relative;padding:10px 0;text-decoration:none;color:#d5c6a8}
.site-header nav a:hover{color:#fff3cf}
.site-header nav a[aria-current]::after{position:absolute;content:"";bottom:2px;left:0;right:0;height:1px;background:var(--gold)}
.site-header nav span{font-size:9px;opacity:.6}

main{max-width:1240px;margin:auto;padding:0 26px}
.page-note{display:flex;justify-content:space-between;padding:36px 0 20px;font-size:10px;letter-spacing:.12em;color:#bbab8c}

.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:6px 0 30px;border-bottom:1px solid var(--line)}
.intro h1{font:500 clamp(56px,7vw,104px)/.95 var(--serif);letter-spacing:-.03em;white-space:nowrap}
.intro h1 em{color:var(--amber);font-style:italic;text-shadow:0 0 30px #ffb24f40}


/* rail: two tees on a short rail */
.row{position:relative}
.row-rail{padding:56px 0 18px}
.row-rail::before{content:"";position:absolute;left:50%;top:0;width:min(900px,100%);height:420px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 70% at 50% 0,#ffb24f16,transparent 70%)}
.items{position:relative;display:flex;justify-content:center;gap:clamp(30px,6vw,90px);width:max-content;margin:0 auto;padding:0 clamp(30px,5vw,70px)}
.item{display:flex;flex-direction:column}
.item-btn{display:flex;flex-direction:column;align-items:center;flex:1;text-align:center;width:100%}
.row-rail .items::before{content:"";position:absolute;left:0;right:0;top:8px;height:7px;border-radius:4px;z-index:0;
  background:linear-gradient(var(--metal-hi),#2c241c 55%,var(--metal-lo));box-shadow:0 1px 0 #ffb24f40,0 10px 22px #0008}
.row-rail .items::after{content:"";position:absolute;left:-10px;right:-10px;top:4px;height:16px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,#3a2c20 0 7px,transparent 7px calc(100% - 7px),#3a2c20 calc(100% - 7px));border-radius:2px}
.fig{position:relative;display:block;width:min(calc(var(--w) * 1px),calc(var(--w) * .066vw));z-index:1}
.turn{position:relative;z-index:1;display:block;perspective:1600px}
.flipper{position:relative;display:block;padding-top:40px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .95s cubic-bezier(.5,.05,.2,1)}
.face{display:block;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 22px 22px #0009)}
.face.front{position:relative;transform:translateZ(1px)}
.face.back{position:absolute;left:0;top:40px;transform:rotateY(180deg) translateZ(1px)}
.hanger{position:absolute;z-index:0;left:50%;top:0;width:60%;height:80px;margin-left:-30%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hanger .hook{stroke:#a8916f;stroke-width:2.4}
.hanger path{vector-effect:non-scaling-stroke}
.hanger{transform:none}
.row-count{display:none;text-align:center;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-top:4px}

.label{display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:16px;line-height:1.35}
.nm{font-size:12px;letter-spacing:.02em;white-space:pre-line}
.sb{font-size:10px;color:var(--muted);letter-spacing:.06em}
.pr{font-size:11px;color:var(--amber);margin-top:4px;letter-spacing:.04em}
.item-btn:focus-visible{outline:none}
.item-btn:focus-visible .nm{outline:1px solid var(--gold);outline-offset:4px}

/* shelf: an old wooden shop shelf, simple, products first */
.row-shelf{padding:40px 0 30px}
.shelf{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:22px 18px 0;
  border:1px solid #00000066;border-top:0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0,#ffb24f12,transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 119px,#0000004d 119px 120px,#ffffff06 120px 121px),
    linear-gradient(#22170f,#1a120b);
  box-shadow:inset 18px 0 30px -18px #000c,inset -18px 0 30px -18px #000c}
.shelf::before,.shelf::after{content:"";position:absolute;top:-14px;bottom:0;width:18px;z-index:2;
  background:linear-gradient(90deg,#24170d,#4a321d 45%,#2b1b0f);box-shadow:0 0 0 1px #00000055}
.shelf::before{left:0}.shelf::after{right:0}
.row-shelf::after{content:"";display:block;height:20px;margin:0 -6px;position:relative;z-index:3;
  background:linear-gradient(#4a321d,#2b1b0f 60%,#170e07);box-shadow:0 1px 0 #ffcf8a22 inset,0 16px 30px #000a}
.row-shelf::before{content:"";display:block;height:14px;margin:0 -6px;position:relative;z-index:3;
  background:linear-gradient(#5a3d23,#3a2715 55%,#25180c);box-shadow:0 1px 0 #ffb24f33 inset,0 10px 20px #0009}
.cell{display:flex;flex-direction:column}
.cell .item-btn{flex:1}
.spot{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:290px;padding-top:26px}
.spot::before{content:"";position:absolute;left:12%;right:12%;top:0;height:85%;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 0,#ffb24f14,transparent 70%)}
.spot img{position:relative;width:auto;height:auto;max-width:80%;max-height:var(--s);filter:drop-shadow(0 10px 10px #000b);transition:transform .45s cubic-bezier(.3,.7,.3,1),opacity .35s ease,filter .4s ease}
.board{display:block;width:100%;height:16px;position:relative;z-index:1;
  background:
    repeating-linear-gradient(90deg,#ffffff05 0 2px,transparent 2px 23px,#0000001a 23px 25px,transparent 25px 61px),
    linear-gradient(#6a4728,#4a311b 30%,#2f1f11 75%,#1e140a);
  box-shadow:0 1px 0 #ffcf8a30 inset,0 14px 18px -4px #000a}
.cell .label{padding:14px 10px 30px}
.cell .pr{display:inline-block;margin-top:8px;padding:2px 9px 1px;color:#2a1a0e;background:#e6d5b3;font-size:10px;letter-spacing:.06em;
  box-shadow:0 2px 4px #0006;transform:rotate(-1.5deg)}
.cell:nth-child(even) .pr{transform:rotate(1.2deg)}
.filler{display:none}

/* hover */
@media (hover:hover){
  .items:has(.item-btn:hover) .item-btn:not(:hover) .fig,.shelf:has(.item-btn:hover) .item-btn:not(:hover) .spot img{opacity:.5}
  .fig{transition:opacity .4s ease}
  .row-rail .item-btn:hover .flipper{transform:rotateY(180deg)}
  .cell .item-btn:hover .spot img{filter:drop-shadow(0 16px 14px #000b) drop-shadow(0 0 18px #ffb24f22)}
  .cell .item-btn:hover .spot img{transform:translateY(-8px)}
  .item-btn:hover .nm{color:#fff3cf}
}

/* sold out */
.is-sold .spot img{filter:drop-shadow(0 10px 10px #000b) saturate(.55) brightness(.72)}
.stamp{position:absolute;z-index:4;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-11deg);padding:6px 14px 5px;white-space:nowrap;
  font:600 14px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#ffcf8a;border:2px solid #ffb24fcc;outline:1px solid #ffb24f66;outline-offset:3px;
  background:#1a0f08cc;box-shadow:0 0 24px #ffb24f22}
.pr.is-out{letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.cell .pr.is-out{background:#2a1a0e;color:#ffcf8a;box-shadow:0 0 0 1px #ffb24f88 inset,0 2px 4px #0006}
.d-price:empty{display:none}

.shop-note{padding:24px 0 54px;font-size:11px;color:var(--muted);text-align:center;border-top:1px solid var(--line);margin-top:20px}

/* detail */
.detail{width:min(1080px,calc(100vw - 40px));max-width:none;height:min(720px,calc(100vh - 40px));max-height:none;padding:0;border:1px solid #bf986c55;color:var(--paper);overflow:hidden;
  background:radial-gradient(ellipse 60% 70% at 32% 45%,#5c33164d,transparent 70%),#150e09;display:none;grid-template-columns:1.25fr 1fr;box-shadow:0 30px 90px #000c}
.detail[open]{display:grid;animation:dIn .35s ease}
.detail::backdrop{background:#0a0604d0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@keyframes dIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.d-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:48px 48px 80px;min-height:0}
.d-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .95s cubic-bezier(.5,.05,.2,1)}
.d-flip.no-anim{transition:none}
.d-stage{perspective:2000px}
.d-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 30px #000b);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.d-front{transform:translateZ(1px)}
.d-back{transform:rotateY(180deg) translateZ(1px)}
.d-img:not([src]){visibility:hidden}
.detail.is-sold .d-img{filter:drop-shadow(0 30px 30px #000b) saturate(.55) brightness(.75)}
.d-stamp{top:45%;font-size:20px;padding:9px 20px 8px}
.d-views{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:center;gap:22px}
.d-views button{font-size:11px;letter-spacing:.12em;color:var(--muted);padding:6px 0;border-bottom:1px solid transparent}
.d-views button[aria-pressed=true]{color:var(--paper);border-color:var(--amber)}
.d-info{display:flex;flex-direction:column;padding:70px 44px 34px 10px;border-left:1px solid #bf986c22;padding-left:40px}
.d-count{font-size:10px;letter-spacing:.14em;color:var(--amber)}
.d-info h2{white-space:pre-line;font:500 clamp(30px,3.4vw,44px)/1.05 var(--serif);margin-top:18px}
.d-sub{margin-top:8px;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.d-price{margin-top:22px;font-size:20px;letter-spacing:.04em;color:var(--amber)}
.d-actions{margin-top:30px}
.d-buy{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:17px 22px;text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#1a0f08;background:linear-gradient(#ffc977,#ffa83e);box-shadow:0 0 0 1px #ffd59a inset,0 10px 30px #ffb24f33;transition:box-shadow .3s,transform .3s}
.d-buy:hover{box-shadow:0 0 0 1px #ffe2b5 inset,0 12px 40px #ffb24f55;transform:translateY(-1px)}
.d-soldline{display:inline-block;padding:7px 14px;border:1px solid #ffb24f88;color:#ffcf8a;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.d-link{display:inline-block;margin-left:16px;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.d-variants{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.d-variants a{display:block;padding:7px 0;font-size:11px;letter-spacing:.06em;color:#ccbba0;text-decoration:none;border-bottom:1px solid #bf986c33}
.d-variants a:hover{color:var(--paper)}
.d-note{margin-top:14px;font-size:10px;color:var(--muted)}
.d-nav{margin-top:auto;display:flex;justify-content:space-between;border-top:1px solid #bf986c33;padding-top:18px}
.d-nav button{font-size:11px;letter-spacing:.12em;color:#ccbba0;padding:6px 0}
.d-nav button:hover{color:var(--paper)}
.d-close{position:absolute;top:20px;right:24px;z-index:5;font-size:11px;letter-spacing:.14em;color:#ccbba0;padding:6px 0}
.d-close span{font-size:16px;margin-left:6px;vertical-align:-1px}
.d-close:hover{color:var(--paper)}

.page-footer{max-width:1188px;margin:0 auto;padding:21px 0 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:9px;color:#bda987}
.page-footer a{text-decoration:none}

@media(max-width:1000px){.site-header nav{gap:18px}.page-footer{margin:0 26px}}

/* phone: one item at a time, swipe sideways */
@media(max-width:760px){
  .site-header{margin:0 17px;padding:18px 0 13px;gap:17px;flex-wrap:wrap;min-height:0}
  .wordmark img{width:145px}
  .site-header nav{width:100%;justify-content:space-between;gap:9px;font-size:10px;letter-spacing:0}
  .site-header nav a{padding:7px 0}.site-header nav span{font-size:8px}
  main{padding:0 17px}
  .page-note{padding:24px 0 13px;font-size:8px;letter-spacing:.08em}
  .intro{display:block;padding-bottom:20px}
  .intro h1{font-size:13.4vw;white-space:nowrap}

  .row-rail{padding:38px 0 6px}
  /* phone: both shirts side by side on one rail */
  .row-count{display:none}
  .track{margin:0 -17px;overflow:hidden}
  .items{width:auto;justify-content:center;gap:4vw;padding:0 3vw;margin:0}
  .item{width:44vw}
  .fig{width:44vw}
  .row-rail .label{padding-top:10px}
  .row-rail .nm{font-size:11px}
  .row-rail .sb{font-size:9px}
  .row-rail .pr{font-size:10px}
  .row-shelf{padding-top:30px}
  .shelf{grid-template-columns:1fr 1fr;padding:16px 12px 0;margin:0 -4px}
  .shelf::before,.shelf::after{width:12px}
  .spot{height:170px;padding-top:20px}
  .spot img{max-width:86%}
  .cell .label{padding:12px 6px 24px}
  .nm{font-size:11px}
  .filler{display:flex}
  .stamp{font-size:11px;padding:5px 10px 4px}
  .shop-note{text-align:left;padding-bottom:40px}

  .detail{width:100vw;height:100dvh;max-height:100dvh;border:0;grid-template-columns:1fr;grid-template-rows:minmax(0,1.1fr) auto}
  .d-stage{padding:56px 22px 58px}
  .d-views{bottom:14px}
  .d-info{border-left:0;border-top:1px solid #bf986c22;padding:20px 22px calc(18px + env(safe-area-inset-bottom))}
  .d-info h2{margin-top:10px;font-size:30px}
  .d-price{margin-top:12px;font-size:18px}
  .d-actions{margin-top:18px}
  .d-nav{margin-top:18px;padding-top:12px}
  .d-close{top:16px;right:18px}
  .page-footer{margin:0 17px;padding:19px 0 23px;gap:10px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* shirt names and prices sit on the same line, even when the shirts differ in height */
.row-rail .item-btn{height:100%}
.row-rail .label{margin-top:auto}