/* 058637 — minimal.
   One mast, one sentence, a wall of plates, a size ruler that adds.
   No hero, no header bar, no drawer, no toast. */

@font-face{font-family:'Big Shoulders';src:url('/fonts/big-shoulders.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* surfaces */
  --white:#fff; --ink:#141311; --muted:#6B6B6B;
  --paper:#EDEBE5; --ink-press:#2A2825;              /* product mat: the garment's own mount, never the page */
  --text-2:rgb(20 19 17 / .62); /* 5.19:1 — footer colophon that still has to be read */
  --line:rgb(20 19 17 / .22); --line-strong:rgb(20 19 17 / .5); --hair:rgb(20 19 17 / .12);
  --alert:#C4382A;
  --display:'Big Shoulders','Arial Narrow',Impact,sans-serif;
  --text:'Switzer',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif;
  /* geometry: 4px base */
  --pad:16px; --gutter:16px; --mat:8px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px; --space-10:96px;
  /* type roles. Four sizes carry the shop: 14 micro, 16 body and every
     price you are asked to pay, 24 every total and the wordmark, and the
     display ladder for plates and titles. Nothing goes below 14. */
  --type-mark:800 24px/24px var(--display);
  --type-card:600 18px/22px var(--display);
  --type-h1:800 44px/44px var(--display);
  --type-h1-item:800 40px/40px var(--display);
  --type-micro:400 14px/20px var(--text);
  --type-label:500 14px/20px var(--text);
  --type-body:400 16px/24px var(--text);
  --type-price:500 14px/22px var(--text);
  --type-money:500 16px/24px var(--text);
  --type-figure:600 24px/24px var(--text);
  --row:40px;
  --tap:44px; --max:1520px; --panel-w:clamp(380px,32vw,440px);
  --ease:cubic-bezier(.2,.8,.1,1);
}
@media(min-width:640px){:root{--pad:24px;--gutter:24px;--mat:10px}}
@media(min-width:1024px){:root{--pad:40px;--mat:12px}}
@media(min-width:1440px){:root{--pad:56px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;caret-color:var(--ink)}
body{margin:0;background:var(--white);color:var(--ink);font:var(--type-body);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
main{flex:1 0 auto}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:left}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--white)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-64px;z-index:60;background:var(--ink);color:var(--white);padding:12px 18px;font-size:13px;transition:top .18s}
.skip:focus{top:8px}
.frame{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- mast: 48px in flow, no bar ----------
   Every page: wordmark at the left edge, Cart at the right. Nothing else
   lives up here, so the mark never moves between routes; back links belong
   to the page body, where they sit with the thing they return to. */
.mast{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-4);padding-top:var(--space-4);padding-bottom:var(--space-3);min-height:72px}
.mark{font:var(--type-mark);letter-spacing:.12em;margin:0}
/* A 24px wordmark still deserves a 44px target. On the wall the anchor sits
   inside the h1; on the other pages the anchor *is* the mark, so both cases
   are named here — one element must not have two tap heights. */
.mark a,a.mark{display:inline-block;padding-block:10px;margin-block:-10px}
.cart{font:var(--type-label);color:var(--muted);display:flex;align-items:baseline;gap:var(--space-1);
  padding:10px 0;min-height:var(--tap);min-width:var(--tap);justify-content:flex-end}
.cart:hover{color:var(--ink)}
.cart b{font-weight:500;color:var(--ink)}
.cart[data-empty='true']{color:var(--muted)}
.mark a{color:inherit}

/* ---------- wall: uniform mounted plates, no chrome ---------- */
.wall{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--gutter);row-gap:var(--row);padding-bottom:var(--space-8)}
@media(min-width:640px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.wall{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);min-width:0;scroll-margin-top:8px}
.card>*{min-width:0}
/* No mount, no frame: the plate is the maker's own white composite and the
   grid is held apart by gutters and row rhythm, not by drawn boxes. */
.card .media,.item-media{aspect-ratio:1;min-width:0;background:transparent;padding:0;outline:0}
.item-gallery{display:grid;gap:var(--space-4);min-width:0}
.card .media img,.item-media img{width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.card .card-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);min-width:0}
.card .name{font:var(--type-card);letter-spacing:.03em;text-transform:uppercase;
  overflow-wrap:break-word;min-width:0}
.card .price{font:var(--type-price);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
@media(min-width:1024px){:root{--type-card:600 20px/24px var(--display);--type-price:500 15px/24px var(--text)}}
@media(min-width:1440px){:root{--type-card:600 22px/26px var(--display);--type-price:500 15px/26px var(--text)}}

/* One listing system: the underline is the hover/focus/press affordance for
   every card, and never exists at rest or once visited. */
a:visited{color:inherit}
.card:is(:hover,:focus-visible,:active) .name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- foot: a full-bleed band across the bottom ----------
   The rule spans the viewport; the content is distributed edge to edge
   with its own page padding, so it reads as a colophon band, not a card. */
.foot{margin-top:auto;width:100%;border-top:1px solid var(--line);
  color:var(--text-2);font:var(--type-micro)}
.foot-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  column-gap:var(--space-4);padding-top:var(--space-5);padding-bottom:var(--space-6)}
@supports(padding:env(safe-area-inset-bottom)){.foot-in{padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom))}}
.foot p{margin:0;min-width:0}
.foot-brand{justify-self:start;display:flex;flex-wrap:wrap;gap:0 var(--space-2)}
.foot-place{justify-self:center;white-space:nowrap}
.foot-mail{justify-self:end;min-width:0;overflow-wrap:anywhere}
.foot a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  display:inline-block;padding:13px 8px;margin:-13px -8px}
.foot a:hover{color:var(--ink)}
@media(max-width:639px){
  .foot-in{grid-template-columns:1fr;row-gap:var(--space-2);padding-top:var(--space-4);padding-bottom:var(--space-5)}
  .foot-brand,.foot-place,.foot-mail{justify-self:start}
}

/* ---------- cart panel ----------
   A decision surface, not chrome: it may never be set smaller than the page
   behind it. The title is the wordmark; every total is the figure size. */
.veil{position:fixed;inset:0;z-index:70;background:rgb(20 19 17 / .2);opacity:0;transition:opacity .18s var(--ease)}
.veil.is-on{opacity:1}
.panel{position:fixed;z-index:71;top:0;right:0;bottom:0;width:var(--panel-w);background:var(--white);
  border-left:1px solid var(--ink);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;
  transform:translateX(101%);transition:transform .22s var(--ease)}
.panel.is-on{transform:none}
.panel-top{display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line);
  font:var(--type-label);color:var(--muted)}
.panel-top>span{font:var(--type-mark);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.panel-top button{font:var(--type-label);color:var(--muted);padding:10px;margin:-10px;
  min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;justify-content:center}
.panel-top button:hover{color:var(--ink)}
.panel-items{overflow:auto;padding:0 var(--space-5)}
.row-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  gap:var(--space-3);align-items:start;padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.row-item img{width:56px;height:56px;object-fit:cover;clip-path:inset(3%)}
.row-item .nm{display:block;font:500 16px/22px var(--text)}
.row-item .mt{display:block;margin-top:2px;font:var(--type-micro);color:var(--muted)}
.row-side{display:grid;gap:var(--space-2);justify-items:end}
.row-item .am{font:var(--type-money);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.qty{display:flex;align-items:center;gap:var(--space-1)}
.qty button{width:var(--tap);height:var(--tap);border:1px solid var(--line-strong);
  display:grid;place-items:center;font:400 16px/1 var(--text);color:var(--ink)}
.qty button:hover{border-color:var(--ink)}
.qty span{min-width:24px;text-align:center;font:500 16px/1 var(--text)}
.panel-empty{padding:var(--space-7) 0;font:var(--type-body);color:var(--muted)}
.panel-foot{border-top:1px solid var(--line);padding:var(--space-4) var(--space-5);
  display:flex;align-items:center;gap:var(--space-2)}
.panel-foot span{font:var(--type-micro);color:var(--muted)}
.panel-foot b{font:var(--type-figure);margin-right:auto}
@supports(padding:env(safe-area-inset-bottom)){
  .panel-foot{padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}
}
.panel-cta{background:var(--ink);color:var(--white);height:52px;min-width:0;padding:0 var(--space-4);
  display:flex;align-items:center;justify-content:center;font:600 16px/1 var(--text)}
@media(min-width:640px){.panel-cta{min-width:160px;padding:0 var(--space-5)}}
.panel-cta:hover{background:var(--ink-press)}
.panel-cta[aria-disabled='true']{background:transparent;color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
/* A drawer that stops 10px short of a phone's edge is a bug, not an inset. */
@media(max-width:639px){.panel{width:100%;border-left:0}}
html[data-bag-lock]{overflow:hidden}
/* ---------- shirt page ---------- */
/* `.item` used to match both <main> and the data div inside it, so every
   padding applied twice. Scope it to the page shell. */
/* The plate wants the page, not a 520px column beside 460px of void. From
   1024 the buy block sits beside it, which keeps the size ruler and the add
   button high on the screen without shrinking the artwork. Only the stacked
   phone/tablet layout has to trade plate size for a visible buy button, so
   only that layout asks the viewport how tall it is. */
.frame.item{padding-top:8px;padding-bottom:var(--space-10);margin-inline:auto;max-width:var(--max)}
@media(max-width:1023px){
  .frame.item .item{max-width:min(760px, 100svh - 440px);margin-inline:auto}
}
@media(min-width:1024px){
  .frame.item .item{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    column-gap:var(--space-7);align-items:start}
  .frame.item .item-buy{padding-top:0}
}

.item-buy{display:grid;gap:var(--space-2);padding-top:var(--space-5)}
.item-buy h1{font:var(--type-h1-item);text-transform:uppercase;letter-spacing:.004em}
.item-buy .price{font:var(--type-money);color:var(--muted)}
.item-buy .sizes{display:flex;height:52px;margin-top:var(--space-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.item-buy .s{position:relative;flex:1 1 0;min-width:0;text-align:center;padding-inline:var(--space-2);
  font:500 16px/1 var(--text)}
.item-buy .s:hover{background:rgb(20 19 17 / .05)}
.item-buy .s[aria-checked='true']{background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none}
.add{margin-top:var(--space-4);width:100%;height:56px;background:var(--ink);color:var(--white);
  font:600 16px/1 var(--text);display:flex;align-items:center;justify-content:center;transition:background .12s}
.add:hover:not(:disabled){background:var(--ink-press)}
/* An inactive control should look deliberately inactive, not greyed out of
   existence: the ink block is reserved for a live action. */
.add:disabled{background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line);cursor:default}

/* ---------- checkout: one column, no furniture ---------- */
.checkout{padding-top:8px;padding-bottom:120px;max-width:calc(640px + 2 * var(--pad));margin-inline:auto}
.back{display:inline-block;font:var(--type-label);color:var(--muted);padding:10px 0;min-height:44px;margin-bottom:var(--space-2)}
.back:hover{color:var(--ink)}
.lines{display:grid;border-top:1px solid var(--line)}
.line{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.line img{width:44px;height:44px;object-fit:cover;clip-path:inset(3%)}
.line b{display:block;font:500 16px/22px var(--text)}
.line small{display:block;font:var(--type-micro);color:var(--muted)}
.line .amt{font:var(--type-money);text-align:right;white-space:nowrap}

.money{padding:16px 0;display:grid;gap:6px;border-bottom:1px solid var(--line)}
.money div{display:flex;justify-content:space-between;gap:12px;font:var(--type-money);color:var(--muted)}
.money div b{font-weight:500;color:var(--ink)}
.money .total{font:var(--type-label);color:var(--ink);padding-top:var(--space-2);align-items:baseline}
.money .total strong{font:var(--type-figure)}

.form{display:grid;gap:14px;padding-top:18px}
.f{display:grid;gap:2px;min-width:0}
.f>span{font:var(--type-label);color:var(--muted)}
.f input,.f select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;
  padding:7px 0 9px;font:var(--type-body);transition:border-color .12s}
.f input:focus,.f select:focus{border-bottom-color:var(--ink)}
.f input:focus-visible,.f select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--ink) 50%),linear-gradient(-45deg,transparent 49%,var(--ink) 50%);
  background-position:calc(100% - 12px) 52%,calc(100% - 7px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.f.is-bad input,.f.is-bad select{border-bottom-color:var(--alert)}
.f-error{font:var(--type-micro);color:var(--alert)}
.form-msg{font:var(--type-micro);color:var(--alert)}
.form-msg:empty{display:none}
.row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.promise{font:400 14px/22px var(--text);color:var(--muted);padding-top:var(--space-1)}

.paybar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--white);border-top:1px solid var(--ink);
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--pad);min-height:72px}
@supports(padding:env(safe-area-inset-bottom)){.paybar{padding-bottom:calc(8px + env(safe-area-inset-bottom))}}
.paybar .sum{margin-right:auto;font:var(--type-label)}
.paybar .sum strong{font:var(--type-figure)}
.pay-btn{background:var(--ink);color:var(--white);height:52px;padding:0 var(--space-5);display:flex;align-items:center;
  justify-content:center;font:600 16px/1 var(--text);white-space:nowrap;transition:background .12s}
.pay-btn:hover:not(:disabled){background:var(--ink-press)}
.pay-btn:disabled{background:rgb(20 19 17 / .35);cursor:not-allowed}
@media(min-width:720px){.pay-btn{min-width:300px;justify-content:center}}

/* ---------- return / receipt / info ---------- */
.page{padding-top:8px;padding-bottom:var(--space-10);max-width:calc(640px + 2 * var(--pad));margin-inline:auto}
.page h1{font:var(--type-h1);text-transform:uppercase;letter-spacing:.004em;padding-top:8px;padding-bottom:16px}
.page p{color:var(--muted);padding-bottom:var(--space-3)}
.page p b{color:var(--ink);font-weight:500}
.rec-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font:var(--type-micro)}
.rec-line b{font-weight:500}
.rec-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--space-3);font:var(--type-label)}
.rec-total strong{font:var(--type-figure)}
.info{padding-top:8px;padding-bottom:var(--space-10);max-width:calc(640px + 2 * var(--pad));margin-inline:auto}
.info h1{font:var(--type-h1);text-transform:uppercase;letter-spacing:.004em;padding-bottom:20px}
.info dl{display:grid;gap:18px;margin:0;border-top:1px solid var(--line);padding-top:20px}
.info dt{font:600 14px/20px var(--text);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding-bottom:3px}
.info dd{margin:0;font:var(--type-body);color:var(--ink)}
.info dd a{border-bottom:1px solid var(--line);padding-bottom:1px}
.info dd span{color:var(--muted)}

/* Empty collection and page-level links, in the same voice as everything else. */
.note{grid-column:1/-1;font:var(--type-body);color:var(--muted);padding:var(--space-5) 0 var(--space-6)}
.page a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.page a:hover{color:var(--ink)}
.muted{color:var(--muted)}
.item-desc{max-width:38rem;padding-top:var(--space-4)}
.item-desc p{font:var(--type-body);color:var(--muted);padding-bottom:var(--space-3)}
.item-desc p:last-child{padding-bottom:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}