/* The Support page used to run a black header, set here. Adrian, 4 October:
   "make sure all pages keep the menu header the same". One header now, the
   lime one, on every page. The black hero below it is untouched, which is
   the same shape your-data already had. */
:root{
/* Support runs the grain HARD. Two layers at different scales, because a
   single tile reads as a repeating pattern once you notice it, and two
   coprime scales read as a surface. Layer one is the colored speckle at
   160px: alpha coverage is ~44% of samples against ~12% before, which is
   what takes it from a faint tint to visible tooth. Layer two is a finer
   monochrome dust at 90px sitting on top. Everywhere else on the site uses
   .s--grain--soft, which is a tenth of this. */
--mi-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0.52 0.46 0.20 0.13'/%3E%3CfeFuncG type='discrete' tableValues='0.60 0.46 0.21 0.13'/%3E%3CfeFuncB type='discrete' tableValues='0.23 0.46 0.19 0.12'/%3E%3CfeFuncA type='discrete' tableValues='0 0 0.20 0 0 0.28 0 0.14 0 0 0.25 0 0.12 0 0.31 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
--mi-dust:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='d' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='1' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0.13 0 0 0 0.07 0 0 0.18 0 0 0.10 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23d)'/%3E%3C/svg%3E");
}

/* ── the page ground ───────────────────────────────────────────────────
   The Support page steps off the lime and onto speckled paper: black,
   yellow, gray and white flecks over off-white, with the MI mark tiled
   faintly behind everything. Two fixed layers so it does not scroll with
   the content and never tiles against a section edge.
   Marks first, speckle over the top, so the grain sits on the paper.
   No CSS rotation on this layer: a transformed fixed layer stops repainting
   on scroll in Chrome and the page goes blank below the fold. Marks sit
   upright instead, which also makes the MI read as MI. */
/* The ground goes on <html>, which propagates to the page canvas and paints
   reliably at any scroll position. It must NOT be a fixed pseudo-element:
   a fixed layer carrying either a transform or an SVG filter stops
   repainting on scroll in Chrome and the page goes blank below the fold. */
html{background-color:#0A0A0A;
  background-image:var(--mi-dust),var(--mi-noise);
  background-repeat:repeat,repeat;
  background-size:256px 256px,256px 256px}
body{background:transparent}

/* sections let the paper through; the dark block stays as the one anchor */
.s--dark{background:transparent}
.s--dark + .s--dark{border-top:0}
.mi-field{position:relative}
.mi-field > *{position:relative;z-index:1}

/* ── product grid ───────────────────────────────────────────────────── */
/* Four across, so the eight pieces sit as two full rows. The step down is
   4 -> 2 -> 1 and deliberately skips 3: eight divides evenly by four, two
   and one, so no width ever leaves a single card stranded on its own row. */
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,22px)}
@media(max-width:1000px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.shelf{grid-template-columns:1fr}}
.tee{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(10,10,10,.04)}
.s--dark .tee{background:var(--dark);border-color:var(--dline)}
.tee .shot{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  position:relative;border-bottom:1px solid var(--line)}
.s--dark .tee .shot{border-bottom-color:var(--dline)}
.tee .shot svg{width:52%;height:auto;opacity:.9}
/* real product photo from Shopify; the mark is the fallback when there isn't one */
.tee .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tee .shot:has(img) svg{display:none}
.tee .meta{padding:var(--s-3);display:flex;flex-direction:column;gap:8px;flex:1}
.tee h3{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.025em;
  line-height:1.2;text-wrap:balance}
.tee .sub{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t-38)}
.s--dark .tee .sub{color:var(--dt-35)}
.tee .price{font-family:var(--stamp);font-size:26px;font-weight:400;
  letter-spacing:0;line-height:1;margin-top:auto;padding-top:2px}
.tee .sizes{display:flex;flex-wrap:wrap;gap:5px}
.tee .sizes button{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  padding:6px 9px;border:1px solid var(--line);background:transparent;color:inherit;
  cursor:pointer;border-radius:3px}
.s--dark .tee .sizes button,.s--dark .tee .colors button{border-color:var(--dline)}
.tee .sizes button[aria-pressed="true"],.tee .colors button[aria-pressed="true"]{background:var(--dark);color:var(--lime);
  border-color:var(--dark)}
.s--dark .tee .sizes button[aria-pressed="true"],.s--dark .tee .colors button[aria-pressed="true"]{background:var(--lime);color:var(--dark);
  border-color:var(--lime)}
.tee .add{margin-top:4px;font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:0;text-transform:none}

/* "3 colors" instead of three more chips on a postcard-sized card */
.tee .colorcount{align-self:flex-start;display:flex;align-items:center;gap:9px;
  background:none;border:0;padding:2px 0;
  font-family:var(--display);font-size:11.5px;font-weight:600;color:var(--t-60)}
/* only the word-count fallback keeps the underline; a row of dots does not
   need to look like a link to read as one */
.tee .colorcount--words{text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tee .colorcount .dot{position:relative;width:15px;height:15px;border-radius:50%;
  flex:none;-webkit-appearance:none;appearance:none;border:0;padding:0;cursor:pointer;
  /* a ring, not a border, so White and Oat Gray still read as discs on paper
     and the ring never eats into the color itself */
  box-shadow:0 0 0 1px rgba(10,10,10,.28);
  transition:box-shadow .14s ease,transform .14s ease}
/* A 15px disc is the right size to look at and too small to hit with a thumb.
   The target grows. The disc does not. The gap above keeps neighboring targets
   from overlapping, so a tap lands on the color it looks like. */
.tee .colorcount .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.s--dark .tee .colorcount .dot{box-shadow:0 0 0 1px rgba(255,255,255,.34)}
.tee .colorcount .dot:hover{box-shadow:0 0 0 1px var(--dark);transform:scale(1.1)}
.s--dark .tee .colorcount .dot:hover{box-shadow:0 0 0 1px var(--lime)}
/* the chosen color holds a gap then a ring, which reads at 15px where a
   thicker ring only reads as a darker dot */
.tee .colorcount .dot[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--dark)}
.s--dark .tee .colorcount .dot[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--dark),0 0 0 3.5px var(--lime)}
.s--dark .tee .colorcount{color:var(--dt-55)}
.tee .opens{cursor:pointer}
.tee h3.opens:hover{text-decoration:underline;text-underline-offset:3px}

/* ── cart drawer ────────────────────────────────────────────────────── */
.cart-open{position:fixed;right:18px;bottom:18px;z-index:40;background:var(--dark);
  color:var(--lime);border:0;border-radius:999px;padding:15px 22px;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;box-shadow:0 8px 26px rgba(10,10,10,.3)}
.cart{position:fixed;inset:0;z-index:50;display:none}
.cart[data-open="true"]{display:block}
.cart .veil{position:absolute;inset:0;background:rgba(10,10,10,.55)}
.cart .panel{position:absolute;right:0;top:0;bottom:0;width:min(400px,100%);
  background:var(--paper);display:flex;flex-direction:column}
.cart .hd{padding:var(--s-3);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center}
.cart .hd h2{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.03em}
.cart .close{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t-60)}
.cart .items{flex:1;overflow-y:auto;padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-3)}
.cart .line{display:grid;grid-template-columns:1fr auto;gap:3px 12px;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.cart .line .nm{font-weight:600;font-size:15px;line-height:1.3}
.cart .line .vr{grid-column:1;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--t-38)}
.cart .line .pr{font-family:var(--mono);font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;text-align:right}
.cart .line .rm{grid-column:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;background:none;border:0;color:var(--t-38);cursor:pointer;
  text-align:right;padding:0}
.cart .ft{padding:var(--s-3);border-top:1px solid var(--line)}
.cart .tot{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:var(--s-3);font-family:var(--display);font-weight:700;font-size:14px}
.cart .tot .v{font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cart .ft .btn{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:0;
  text-transform:none}
.cart .empty{color:var(--t-60);font-size:15px}
.cart .note{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-38);margin-top:10px;text-align:center}

/* ── product detail ─────────────────────────────────────────────────────
   Opened from a card. Everything Shopify holds about the piece, including
   the fabric and care copy that comes down with the product body. */
.pdp{position:fixed;inset:0;z-index:60;display:none}
.pdp[data-open="true"]{display:flex;align-items:center;justify-content:center;padding:16px}
.pdp .veil{position:fixed;inset:0;background:rgba(10,10,10,.62)}
.pdp .sheet{position:relative;background:#FFFFFF;width:min(1000px,100%);max-height:90vh;
  /* dvh where it exists: on phones 100vh is the tall URL-bar-hidden viewport,
     so a vh-sized sheet is taller than what you can actually see and the
     centring pushes its top edge, and the Close button with it, off screen. */
  max-height:90dvh;overflow-y:auto;
  background:var(--paper);border-radius:var(--r);display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
/* A glass disc rather than a labelled button: it sits over photography as
   often as over the sheet, so it carries its own translucent ground and a
   white rim instead of borrowing the surface it happens to land on. */
.pdp .close{position:absolute;top:12px;right:14px;z-index:2;
  width:40px;height:40px;padding:0;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.46);
  border-radius:999px;cursor:pointer;color:#FFFFFF;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 2px 10px rgba(10,10,10,.32);
  transition:background .15s ease,border-color .15s ease}
.pdp .close svg{width:16px;height:16px;display:block}
.pdp .close:hover{background:rgba(255,255,255,.3);border-color:#FFFFFF}
.pdp .close:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.pdp .gal{padding:var(--s-4);border-right:1px solid var(--line)}
.pdp .main{aspect-ratio:1/1;background:var(--bg-dk,#EEEAE5);border-radius:var(--r);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.pdp .main img{width:100%;height:100%;object-fit:cover}
.pdp .thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pdp .thumbs button{width:58px;height:58px;padding:0;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:none;cursor:pointer}
.pdp .thumbs button[aria-pressed="true"]{border-color:var(--dark);border-width:2px}
.pdp .thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.pdp .info{padding:var(--s-4);display:flex;flex-direction:column;gap:12px}
.pdp .info .sub{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t-38)}
.pdp .info h2{font-family:var(--display);font-weight:900;font-size:clamp(21px,2.6vw,27px);
  letter-spacing:-.03em;line-height:1.12;margin:0}
.pdp .info .price{font-family:var(--stamp);font-size:30px;line-height:1}
.pdp .opt{display:flex;flex-direction:column;gap:7px}
.pdp .opt .lbl{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t-38)}
.pdp .colors,.pdp .sizes{display:flex;flex-wrap:wrap;gap:6px}
.pdp .colors button,.pdp .sizes button{padding:8px 12px;border:1px solid var(--line);
  background:transparent;color:inherit;cursor:pointer;border-radius:3px;font-size:12.5px}
.pdp .colors button{font-family:var(--display);font-weight:600}
.pdp .sizes button{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em}
.pdp .colors button[aria-pressed="true"],.pdp .sizes button[aria-pressed="true"]{
  background:var(--dark);color:var(--lime);border-color:var(--dark)}
.pdp .sizes button:disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.pdp .add{margin-top:4px;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:0;text-transform:none;align-self:flex-start}

.pdp .specs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:6px 0 0;
  padding-top:var(--s-3);border-top:1px solid var(--line);font-size:13px}
.pdp .specs dt{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--t-38);align-self:center}
.pdp .specs dd{margin:0}
.pdp .desc{font-size:13.5px;line-height:1.55;color:var(--t-60);
  padding-top:var(--s-3);border-top:1px solid var(--line)}
.pdp .desc ul{padding-left:18px;margin:8px 0}
.pdp .desc li{margin-bottom:3px}
.pdp .desc table{border-collapse:collapse;font-size:12px;margin:8px 0;width:100%}
.pdp .desc td,.pdp .desc th{border:1px solid var(--line);padding:4px 7px;text-align:left}
.pdp .desc img{max-width:100%;height:auto}

@media(max-width:760px){
  /* Full-bleed on a phone: stretch the sheet to the dialog rather than
     centring it, so it starts at the top of the visible viewport instead of
     hanging above it. .pdp is fixed inset:0, which tracks the browser chrome
     as it collapses, so height:100% is honest where 100vh is not. */
  .pdp[data-open="true"]{padding:0;align-items:stretch;justify-content:stretch}
  .pdp .sheet{grid-template-columns:1fr;width:100%;max-height:none;height:100%;
    border-radius:0;-webkit-overflow-scrolling:touch}
  /* Fixed, not absolute: absolute pins Close to the top of the sheet's
     scrolling content, so it rides away the moment the sheet is scrolled.
     Fixed keeps it against the viewport, clear of the notch, all the way down. */
  .pdp .close{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;
    width:46px;height:46px;background:rgba(255,255,255,.22);
    box-shadow:0 3px 14px rgba(10,10,10,.4)}
  .pdp .close svg{width:18px;height:18px}
  .pdp .gal{border-right:0;border-bottom:1px solid var(--line);padding-top:60px}
  .pdp .info{padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px))}
}

/* ── the founders, at the top ───────────────────────────────────────────
   Real photographs go in as founder-1.jpg … founder-3.jpg beside this file.
   Until they exist the img removes itself and the frame shows the filename
   it is waiting for, so an unfinished page can never look finished. */
.faces{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(14px,2.2vw,26px);
  margin-top:var(--s-5)}
.face{margin:0;width:clamp(92px,11vw,124px)}
.face .frame{position:relative;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:#fff;border:2px solid var(--dark);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:8px}
.face .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Initials in the brush face, standing in for photography. Sized in cq units
   against the circle rather than px so the letter keeps its proportion at
   every breakpoint instead of drifting small inside a fluid frame. */
.face .frame{container-type:inline-size}
.face .mono-initial{font-family:var(--stamp);font-weight:400;font-size:44cqw;
  line-height:1;color:var(--dark);padding-top:.10em;letter-spacing:0;
  -webkit-text-stroke:.045em var(--lime);paint-order:stroke fill}
.face figcaption{margin-top:9px;text-align:center;display:flex;flex-direction:column;gap:2px}
.face figcaption b{font-size:13.5px;font-weight:800;letter-spacing:-.01em}
.face figcaption span{font-size:11.5px;color:var(--t-60);line-height:1.3}
.faces .hail{font-family:var(--display);font-size:clamp(15px,1.9vw,19px);font-weight:600;
  margin:0 0 var(--s-3) 4px;letter-spacing:-.02em}
.faces .hail b{font-family:var(--stamp);font-weight:400;font-size:1.35em;
  display:inline-block;margin-left:4px}
@media(max-width:620px){
  .faces{gap:12px}
  .faces .hail{width:100%;margin:var(--s-2) 0 0}
}

/* cards in the money section, now that the page has no black block */
.card{background:#FFFFFF}

/* ── dark ground overrides ──────────────────────────────────────────────
   The Support page runs on black now, so every surface I had set to white
   for the paper version flips here. Product photos keep their own light
   backgrounds, which is what makes the shelf read as lit tiles on black. */
.tee{background:var(--dark);border-color:var(--dline);box-shadow:none}
.tee .sub{color:var(--dt-35)}
.tee .colorcount{color:var(--dt-55)}
.tee .colorcount .dot{box-shadow:0 0 0 1px rgba(255,255,255,.34)}
.tee .colorcount .dot:hover{box-shadow:0 0 0 1px var(--lime)}
/* the gap in the chosen ring is the card, so it has to be the card's black */
.tee .colorcount .dot[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--dark),0 0 0 3.5px var(--lime)}
.tee .sizes button{border-color:var(--dline)}
.tee .sizes button[aria-pressed="true"]{background:var(--lime);color:var(--dark);
  border-color:var(--lime)}
.card{background:var(--dark);border-color:var(--dline)}

/* founders */
.face .frame{background:var(--lime);border-color:#FFFFFF}
.face .mono-initial{color:var(--dark);-webkit-text-stroke-color:#FFFFFF}
.face figcaption span{color:rgba(255,255,255,.72);font-weight:600}

/* cart drawer */
.cart .panel{background:var(--dark);color:var(--dt-90)}
.cart .hd{border-bottom-color:var(--dline)}
.cart .close{color:var(--dt-55)}
.cart .line{border-bottom-color:var(--dline)}
.cart .line .vr{color:var(--dt-35)}
.cart .line .rm{color:var(--dt-35)}
.cart .ft{border-top-color:var(--dline)}
.cart .empty{color:var(--dt-55)}
.cart .note{color:var(--dt-35)}

/* product detail */

/* ── header, this page only ─────────────────────────────────────────────
   The nav is lime everywhere else. On black it has to invert, or it reads
   as a stripe of another site pasted across the top. */
/* The nav has to carry the SAME two layers at the SAME scales as the page
   ground, or the header reads as a different material bolted to the top:
   one layer at 200px against two at 90 and 160 is a visibly coarser grain,
   and the border underlined the join. Phase still shifts as a sticky bar
   scrolls over a document-scrolled ground, but matching the scales means
   the texture reads as continuous even when the offset does not line up. */
/* removed 4 Oct: .nav{--nav-panel:rgba(10,10,10,.94);--nav-panel-line:rgba(255,255,255,.16);background-color: */
  background-image:var(--mi-dust),var(--mi-noise);
  background-repeat:repeat,repeat;
  background-size:256px 256px,256px 256px;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.09);
  --mark-fill:var(--lime);--mark-edge:var(--dark)}
/* removed 4 Oct: .nav .logo{color:#FFFFFF} */
/* removed 4 Oct: .nav .links a{color:var(--dt-55)} */
/* removed 4 Oct: .nav .links a:hover{color:#FFFFFF} */
/* removed 4 Oct: .nav .links a.on{color:#FFFFFF;border-bottom-color:var(--lime)} */
/* removed 4 Oct: .nav .btn{background:var(--lime);color:var(--dark);border-color:var(--lime)} */
/* removed 4 Oct: .nav-toggle{border-color:rgba(255,255,255,.28)} */
/* removed 4 Oct: .nav-toggle span{background:#FFFFFF} */

/* The open menu on a phone was still the lime panel from the system sheet,
   with this page's white link color on top of it: white on lime, which is
   about a 1.1:1 contrast and simply not there. The panel is part of the
   header, so it inverts with the header. Same two texture layers at the
   same scales, for the same reason the bar carries them. */
@media(max-width:880px){
/* removed 4 Oct: .nav .links{background-color:#0A0A0A; */
    background-image:var(--mi-dust),var(--mi-noise);
    background-repeat:repeat,repeat;
    background-size:256px 256px,256px 256px;
    border-bottom:1px solid rgba(255,255,255,.09);
    box-shadow:0 14px 28px rgba(0,0,0,.5)}
/* removed 4 Oct: .nav .links a{color:var(--dt-90);border-bottom-color:rgba(255,255,255,.12)} */
/* removed 4 Oct: .nav .links a.on{color:var(--lime);border-bottom-color:rgba(255,255,255,.12)} */
}

/* Every subtitle on this page gets the hero treatment: smaller, tighter,
   white and bold. Gray body copy at a loose line height is hard work on a
   grainy black ground, and the notes were mono uppercase on top of that. */
.lede{font-size:15px;line-height:1.35;font-weight:700;color:#FFFFFF;
  letter-spacing:-.012em;max-width:46ch}
.body{font-size:15px;line-height:1.4;font-weight:600;color:#FFFFFF;
  letter-spacing:-.01em}
.note{font-family:var(--display);font-size:13px;line-height:1.4;font-weight:600;
  letter-spacing:-.005em;text-transform:none;color:var(--dt-55)}
.card p{font-size:14px;line-height:1.45;font-weight:500;color:var(--dt-90)}

/* RULE 4: header and footer always match. This page overrides .nav to the
   grained dark ground, so it must override .foot to the same thing. A lime
   footer under a dark header made the page look like two documents. */
.foot{background-color:#0A0A0A;
  background-image:var(--mi-dust),var(--mi-noise);
  background-repeat:repeat,repeat;
  background-size:256px 256px,256px 256px;
  border-top:1px solid rgba(255,255,255,.09)}
.foot .lbl,.foot a{color:var(--dt-35)}
.foot a:hover{color:#FFFFFF}

/* ── founder profiles ──────────────────────────────────────────────────
   Three columns, each a face over a role over a short bio. The plain
   .faces row centred small captions under circles, which is fine for a
   credit line and useless for a profile. */
.faces--profile{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);align-items:start}
/* .face carries width:clamp(92px,11vw,124px) for the plain credit row,
   which was squeezing each bio to about four words a line inside a
   grid column three times that wide. */
.faces--profile .face{display:block;width:auto}
.faces--profile .frame{width:clamp(76px,9vw,104px);margin:0 0 var(--s-3)}
.faces--profile figcaption{text-align:left;display:block}
.faces--profile figcaption b{display:block;font-size:15px;letter-spacing:-.01em;
  margin-bottom:3px}
.faces--profile .role{display:block;font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lime);margin-bottom:9px}
.faces--profile .bio{display:block;font-size:14px;line-height:1.5;
  letter-spacing:-.005em;color:var(--dt-55);max-width:34ch}
@media(max-width:760px){
  .faces--profile{grid-template-columns:1fr;gap:var(--s-4)}
  .faces--profile .bio{max-width:46ch}
}

/* three records side by side */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);
  margin-top:var(--s-5)}
.pcards .pcard{margin:0}
@media(max-width:880px){.pcards{grid-template-columns:1fr}}

/* ── grain, once ───────────────────────────────────────────────────────
   This page carries its dense grain on the page ground, and the design
   system adds a per-band layer to every .s as well. Both together doubled
   it and washed out the type, worst on the profile cards, which were
   translucent enough to show the ground straight through their text.
   The page ground wins here; the band layer is switched off.
   ------------------------------------------------------------------- */
.s::before{display:none}

/* opaque, so text sits on a clean field instead of on the speckle */
/* A file you can see through, not a solid card. The blur behind it softens
   the grain under the type without hiding it, which is what makes the
   panel readable while still feeling like it is sitting ON the surface
   rather than punched out of it. */
.pcard{background:rgba(10,10,10,.66);
  border:1px solid rgba(222,255,99,.26);border-radius:14px;
  box-shadow:0 20px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.pcard .ph{background:rgba(222,255,99,.07);border-bottom-color:rgba(222,255,99,.22)}

/* field labels as pills so they read as metadata rather than as faint text */
.pcard .pf{grid-template-columns:auto 1fr;gap:14px;align-items:start;
  border-top-color:rgba(255,255,255,.08)}
.pcard .pk{background:rgba(222,255,99,.16);color:var(--lime);
  border:1px solid rgba(222,255,99,.30);border-radius:100px;
  padding:3px 10px 2px;font-size:8.5px;letter-spacing:.12em;
  justify-self:start;white-space:nowrap}
.pcard .pv{color:#FFFFFF;padding-top:2px}

/* the bare cards have no panel of their own, so their copy needs help
   standing off a grained ground */
.t-bare .card p{color:rgba(255,255,255,.72);
  text-shadow:0 1px 3px rgba(0,0,0,.85)}
.t-bare .card h3{text-shadow:0 1px 4px rgba(0,0,0,.9)}

/* ── readable on grain ─────────────────────────────────────────────────
   Every running-text token in the system is tuned for ink on paper, so on
   this page they all inherited a muted gray and then had speckle put
   behind them. On a dark grained ground the copy needs to be white and
   needs a shadow to sit on top of the texture rather than in it.
   ------------------------------------------------------------------- */
.s--dark .lede,
.s--dark .body,
.s--dark .note,
.s--dark p{color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.85)}
.s--dark .lbl{color:rgba(255,255,255,.62);text-shadow:0 1px 3px rgba(0,0,0,.85)}
.s--dark .t-bare .card p{color:rgba(255,255,255,.86)}
.s--dark .note--sm{color:rgba(255,255,255,.72)}
/* the shelf cards keep their own white ground, so leave their type alone */
.tee p,.tee .sub,.cart p,.pdp p{text-shadow:none}

/* ── photo arrows on the card ──────────────────────────────────────────
   Sit inside .shot, above the image, and only appear on hover or focus on
   a fine pointer. On touch they stay visible, because there is no hover
   to reveal them and an invisible control is no control.
   ------------------------------------------------------------------- */
.tee .shot{overflow:hidden}
.shotnav{position:absolute;inset:0;z-index:2;pointer-events:none}
.sn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  pointer-events:auto;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(10,10,10,.18);background:rgba(255,255,255,.92);
  color:var(--dark);font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 2px 3px;
  box-shadow:0 2px 10px rgba(10,10,10,.18);opacity:0;transition:opacity .15s}
.sn--prev{left:9px} .sn--next{right:9px}
.tee:hover .sn,.tee:focus-within .sn{opacity:1}
@media (hover:none),(pointer:coarse){ .sn{opacity:1} }
.sn:hover{background:#fff}

.shotdots{position:absolute;left:0;right:0;bottom:9px;z-index:3;
  display:flex;justify-content:center;gap:5px;pointer-events:none}
.shotdots i{width:5px;height:5px;border-radius:50%;
  background:rgba(10,10,10,.28);display:block}
.shotdots i[data-on="true"]{background:var(--dark)}

/* ── the face on the record ────────────────────────────────────────────
   All three portraits sit the head above the middle of the frame, so a
   plain centred crop would cut foreheads. object-position pulls the crop
   upward instead of asking anyone to re-cut the files.
   ------------------------------------------------------------------- */
.pwho{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.pwho .pname{margin-bottom:0}
.pface{width:clamp(58px,7.5vw,76px);height:clamp(58px,7.5vw,76px);flex:none;
  border-radius:50%;object-fit:cover;object-position:center 16%;
  border:1px solid rgba(222,255,99,.5);
  box-shadow:0 0 0 4px rgba(10,10,10,.55),0 6px 18px rgba(0,0,0,.5);
  background:#141414}
@media(max-width:560px){ .pwho{gap:var(--s-2)} }

/* ── matched faces ─────────────────────────────────────────────────────
   Three portraits shot in three different rooms: one warm gray, one cool
   gray, one blue-gray. Desaturating them removes the argument between
   those backgrounds without touching the faces, and a soft edge mask
   feathers each one into the grain instead of stamping a hard disc onto
   it. Cheaper and more reversible than cutting the subjects out, and a
   replacement photo needs no preparation to match.
   ------------------------------------------------------------------- */
.pface{filter:grayscale(1) contrast(1.06) brightness(.97);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,
    #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
  mask-image:radial-gradient(circle at 50% 50%,
    #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
  border:0;box-shadow:none;background:transparent}
/* the ring moves onto a wrapper, so the mask fades the photo while the
   outline itself stays crisp */
.pwho{position:relative}

/* ── the face, in color, on lime ──────────────────────────────────────
   Grayscale settled the three backgrounds but made everyone look somber,
   which is the wrong note for a page asking people to buy a t-shirt. The
   people keep their color now. The disc behind them is lime with the
   same grain as the page, and the photo's edge feathers into it, so the
   three different studio backgrounds resolve into one brand color
   instead of three shades of gray.
   ------------------------------------------------------------------- */
.pface-disc{position:relative;display:block;flex:none;
  width:clamp(58px,7.5vw,76px);height:clamp(58px,7.5vw,76px);
  border-radius:50%;overflow:hidden;
  background-color:var(--lime);
  background-image:var(--mi-dust);background-size:110px 110px;
  box-shadow:0 0 0 1px rgba(222,255,99,.55),0 6px 18px rgba(0,0,0,.5)}
.pface{width:100%;height:100%;
  filter:saturate(1.12) contrast(1.04);
  -webkit-mask-image:radial-gradient(circle at 50% 46%,
    #000 54%, rgba(0,0,0,.6) 76%, transparent 97%);
  mask-image:radial-gradient(circle at 50% 46%,
    #000 54%, rgba(0,0,0,.6) 76%, transparent 97%)}

/* ── the three profiles read as one table ───────────────────────────────
   Each card used to stack its own fields, so a long BEFORE on one pushed
   that card's NOW and BORN below the others and the three read as three
   unrelated blocks. A subgrid chain hands the row heights up to .pcards,
   so every ROLE sits on one line, every NOW on another, however long the
   text in any single cell is. Two links in the chain, because .pbody sits
   between the card and its fields.
   Row gap goes to zero: with seven rows a gap would open a gutter between
   every field. Column gap is restated so the cards keep their spacing.
   Only above the stacking breakpoint, where there is more than one column
   to line up against.
   ------------------------------------------------------------------- */
@media(min-width:881px){
  @supports (grid-template-rows:subgrid){
    /* header, the face-and-name block, then one row per field */
    .pcards{grid-template-rows:auto auto repeat(5,auto);
      row-gap:0;column-gap:clamp(16px,2.4vw,26px)}
    .pcards .pcard{grid-row:1/-1;display:grid;grid-template-rows:subgrid}
    .pcards .pcard .pbody{grid-row:2/-1;display:grid;grid-template-rows:subgrid}
    /* the field rule keeps its own top border, which now lands on the
       shared line rather than wherever that card happened to reach */
    .pcards .pcard .pf{align-content:start}
  }
}

/* ── the detail sheet stays light ──────────────────────────────────────
   The page runs on black, but this sheet does not follow it. The size
   chart and care table come from Shopify inside the product description,
   set in black type with no background of their own, so on a dark sheet
   they disappeared entirely. The sheet is the one surface here that has
   to render someone else's HTML, so it keeps a white ground.
   ------------------------------------------------------------------- */
.pdp .sheet{background:#FFFFFF;color:var(--dark)}
.pdp .close{background:rgba(10,10,10,.06);border:1px solid var(--line);color:var(--dark)}
.pdp .close:hover{background:rgba(10,10,10,.12);border-color:var(--dark)}
.pdp .desc,.pdp .desc td,.pdp .desc th{color:var(--dark)}

/* ── paging the photos ─────────────────────────────────────────────────
   Six thumbnails under a photo is a list, not a control. These step
   through the same images the thumbs hold, so the two stay in sync
   without a second source of truth for which shot is showing.
   ------------------------------------------------------------------- */
.pdp .main{position:relative}
.pdp .pager{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.92);color:var(--dark);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(10,10,10,.14);transition:background .12s}
.pdp .pager:hover{background:#FFFFFF;border-color:var(--dark)}
.pdp .pager:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.pdp .pager--prev{left:10px}
.pdp .pager--next{right:10px}
.pdp .pager svg{width:15px;height:15px;display:block}
.pdp .pager[hidden]{display:none}

/* ── the profiles, lighter ──────────────────────────────────────────────
   These were near-black panels with lime type on a black ground: heavy,
   technical, and reading a lot more severe than the people on them. Same
   structure, warm white ground instead, with the grain carried onto the
   card itself so it does not sit on the page as a flat cut-out. Lime drops
   to the labels and the name, where it does the work of an accent rather
   than of a whole color scheme.
   ------------------------------------------------------------------- */
.pcard{background-color:#FCFBF5;
  background-image:var(--mi-dust);background-size:256px 256px;
  border:1px solid rgba(10,10,10,.10);border-radius:20px;
  box-shadow:0 14px 38px rgba(0,0,0,.42);
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* header: a soft lime band rather than a dark one */
.pcard .ph{background:rgba(222,255,99,.55);
  border-bottom:1px solid rgba(10,10,10,.10)}
.pcard .pid{color:var(--dark)}
.pcard .pseal{color:rgba(10,10,10,.52);opacity:1}

/* the name keeps the brush face, now ink-stroked on paper */
.pcard .pname{color:var(--lime);-webkit-text-stroke:.055em var(--dark)}

/* labels become solid lime chips, which reads friendlier than an outline */
.pcard .pk{background:var(--lime);color:var(--dark);
  border:1px solid rgba(10,10,10,.14)}
.pcard .pv{color:var(--dark)}
.pcard .pf{border-top-color:rgba(10,10,10,.10)}

/* the portrait ring follows the card, not the old dark panel */
.pcard .pface-disc{border-color:rgba(10,10,10,.14)}
.pcard .pface{filter:grayscale(.25) contrast(1.02)}

/* This page's nav runs on black, so the block shadow has to invert with it
   or it vanishes into the bar. */
/* removed 4 Oct: .nav{--btn-shadow:#FFFFFF} */

/* Add to cart was still set in the display face from before the buttons
   moved to the brush. Slightly larger than the site default, because the
   card is small and Knewave sets small on the eye. */
.tee .add{font-family:var(--stamp);font-weight:400;text-transform:none;
  font-size:15px;letter-spacing:0;line-height:1;padding:12px 18px 10px}

/* The pill is a label and stays mono. Everything outside it is copy, so it
   takes the body face and can be read at a normal reading size. */
.pcard .pv{font-family:var(--body);font-size:12.5px;line-height:1.55;
  letter-spacing:0;padding-top:1px}
/* The standing sits under the name rather than inside the Role row, so Role
   says only what somebody owns. */
.pnamewrap{display:flex;flex-direction:column;gap:3px;min-width:0}
/* --dt-35 is white at 48 percent, which is invisible on this card because
   the card is near white. The muted ink token is the one that belongs here. */
.pcard .ptitle{font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t-60)}

/* ── the product photo must never be cropped ───────────────────────────
   The main shot was object-fit:cover inside a 1/1 box. On a phone that
   filled the box by cropping, so opening a hoodie showed a shoulder.
   A product photo is the thing being sold, so it fits inside the box and
   the box is capped so it cannot take the whole screen. */
@media(max-width:760px){
  .pdp .gal{align-self:start}
  .pdp .main{aspect-ratio:1/1;height:auto;max-height:54svh}
  .pdp .main img{object-fit:contain}
}

/* ── the gap the patent note used to fill ──────────────────────────────
   Two full bands met where that paragraph sat. With it gone they stack. */
@media(max-width:760px){
  .pcards{margin-top:var(--s-3)}
  .s--dark.mi-field{padding-bottom:var(--s-4)}
  .s--dark.mi-field + .s{padding-top:var(--s-4)}
}

/* ── the sheet keeps the page's own ground on a phone ──────────────────
   Full bleed white read as a browser dialog rather than as part of the
   shop. The gallery half takes the same dust and noise the page runs on,
   so the garment sits on our own ground. The details half stays light,
   because Shopify's size and care tables arrive as black type with no
   background of their own. */
@media(max-width:760px){
  .pdp .gal{
    background-color:#0A0A0A;
    background-image:var(--mi-dust),var(--mi-noise);
    background-repeat:repeat,repeat;
    background-size:256px 256px,256px 256px;
    border-bottom:1px solid rgba(222,255,99,.26)}
  /* A lime wash under the shot, so the ground reads as ours rather than
     as a dark box. */
  .pdp .main{
    background-color:#141410;
    background-image:radial-gradient(120% 90% at 50% 12%,
      rgba(222,255,99,.16) 0%, rgba(222,255,99,.05) 46%, transparent 74%)}
  .pdp .thumbs button{border-color:rgba(222,255,99,.26)}
  .pdp .pager{background:rgba(10,10,10,.62);color:#F0EBE3;
    border-color:rgba(222,255,99,.30)}
  .pdp .close{background:rgba(10,10,10,.72);color:#F0EBE3;
    border-color:rgba(222,255,99,.30)}
}

/* ── the sheet runs on our ground, not on white ────────────────────────
   Everything except the photo itself. The product shots arrive on white
   from Shopify and that is fine, they are the thing being sold. The panel
   around them is ours.

   The one exception is the description: Shopify sends the size and care
   tables as black type with no background of their own, so that block
   keeps a light card inside the dark sheet rather than losing its text. */
@media(max-width:760px){
  .pdp .sheet{background:#0A0A0A}
  .pdp .info{
    background-color:#0A0A0A;
    background-image:var(--mi-dust),var(--mi-noise);
    background-repeat:repeat,repeat;
    background-size:256px 256px,256px 256px}
  .pdp .info h2{color:#F5F3EC}
  .pdp .info .price{color:var(--lime)}
  .pdp .info .sub,.pdp .info .lbl{color:rgba(245,243,236,.55)}

  /* pickers read as chips on dark */
  .pdp .opt button{background:transparent;color:#F5F3EC;
    border-color:rgba(245,243,236,.34)}
  .pdp .opt button[aria-pressed="true"]{background:var(--lime);color:var(--dark);
    border-color:var(--lime)}
  .pdp .opt button:disabled{opacity:.34}

  /* the description keeps its own light card so Shopify's tables survive */
  .pdp .desc{background:#FCFBF5;border-top:0;border-radius:var(--r);
    padding:var(--s-3);margin-top:var(--s-2)}
  .pdp .desc,.pdp .desc td,.pdp .desc th,.pdp .desc li{color:var(--dark)}

  .pdp .thumbs{background:transparent}
}

/* ── the detail is behind a disclosure ─────────────────────────────────
   Shopify sends 8kb of fabric and care copy as an ordered list pretending
   to be bullets, at whatever size it likes. On a phone that pushed the
   price and the picker off the screen and scrolled sideways. It is now
   shut by default and constrained when opened. */
.pdp .more{margin-top:var(--s-3);border-top:1px solid var(--line)}
.pdp .more summary{list-style:none;cursor:pointer;padding:14px 0 12px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;display:flex;align-items:center;gap:8px}
.pdp .more summary::-webkit-details-marker{display:none}
.pdp .more summary::after{content:"+";margin-left:auto;font-size:15px;line-height:1}
.pdp .more[open] summary::after{content:"\2013"}

/* nothing inside may be wider than the sheet */
.pdp .more,.pdp .desc,.pdp .desc *{max-width:100%;min-width:0}
.pdp .desc{font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.pdp .desc *{font-size:inherit;line-height:inherit}
/* Shopify marks these as bullets and ships them as an ordered list. */
.pdp .desc ol,.pdp .desc ul{list-style:disc;padding-left:17px;margin:6px 0}
.pdp .desc li{margin-bottom:4px}
.pdp .desc .ql-ui{display:none}
.pdp .desc table{display:block;overflow-x:auto;white-space:nowrap}

@media(max-width:760px){
  .pdp .sheet{overflow-x:hidden}
  .pdp .more summary{color:rgba(245,243,236,.72);border:0}
  .pdp .more{border-top-color:rgba(245,243,236,.16)}
  .pdp .specs dt{color:rgba(245,243,236,.5)}
  .pdp .specs dd{color:#F5F3EC}
  .pdp .specs{border-top:0;padding-top:0}
  .pdp .desc{font-size:12px}
}

/* ── iOS was resizing the text, not us ────────────────────────────────
   Safari inflates text inside any block it decides is too narrow, and it
   does it per block. That is why SKU stayed at 9.5px while its value grew,
   and why the care list arrived two to three times its set size. Nothing
   on this site had ever turned it off. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ── no grain over the product shot ────────────────────────────────────
   There was a dust and noise layer multiplied over both frames to texture
   the flat white the photos arrive on. It is gone. Multiply darkens every
   pixel under it, and the garment is under it too, so Oat Gray came out
   dirtier than the garment is and White stopped reading as white.

   It cannot be limited to the background. The files are 1400x1400 RGB with
   no alpha channel, checked, so the white is painted into the pixels rather
   than being something showing through from behind. CSS has no way to tell
   a white background pixel from a white t-shirt pixel.

   On a page where a person is choosing a color, true color beats texture.
   Textured shots would have to come from the photography. */

@media(max-width:760px){
  /* the value sits closer to its label now that iOS is not inflating it */
  .pdp .specs{font-size:12px;gap:5px 14px}
  .pdp .specs dt{font-size:9px}
  .pdp .desc{font-size:11.5px;line-height:1.55}
}

/* ── the bar under the product panel ─────────────────────────────────────
   The panel's veil is rgba(10,10,10,.62) at z-index 60; the header sits at
   30, so the scrim paints over it. A 96 percent lime bar under 62 percent
   black is army green, and no opacity fixes that: a saturated yellow-green
   dimmed by black just is olive.

   So while the panel is open the bar stops being lime and joins the scrim.
   Composited under the same veil it reads as one dark surface instead of a
   green stripe across the top of the modal. :has() keys off the attribute
   shop.js already sets, so this needs no new state. */
body:has(.pdp[data-open="true"]) .nav{
  background-color:rgba(10,10,10,.72);
  border-bottom-color:rgba(255,255,255,.12)}
body:has(.pdp[data-open="true"]) .nav .logo{--mark-fill:#FFFFFF;--mark-edge:var(--dark)}
body:has(.pdp[data-open="true"]) .nav .links a{color:rgba(255,255,255,.5)}
body:has(.pdp[data-open="true"]) .nav .links a.on{background:rgba(255,255,255,.14);color:#FFFFFF}
body:has(.pdp[data-open="true"]) .nav .links a.on::before{opacity:0}
body:has(.pdp[data-open="true"]) .burger{border-color:rgba(255,255,255,.3)}
body:has(.pdp[data-open="true"]) .burger span{background:#FFFFFF}