/* ==========================================================================
   FORGOTTEN — styles (black & white, contemporary)
   ========================================================================== */
:root {
  --bg: #fff; --fg: #000; --mut: #6d6d6d; --line: #e3e3e3; --tile: #e6e9ec;
  --ok: #0a7d32; --err: #c4161c;
  --font-d: 'Instrument Serif', 'Times New Roman', serif;
  --font-u: 'Special Elite', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --gut: clamp(16px, 2.2vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr: 60px;
}
.dark { --bg: #000; --fg: #fff; --mut: #9b9b9b; --line: #2a2a2a; --tile: #151515; --ok: #7bd88f; --err: #ff7a66; background: var(--bg); color: var(--fg); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 12.5px/1.6 var(--font-u); letter-spacing: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-d); font-weight: 400; margin: 0; line-height: .95; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: #000; color: #fff; padding: 10px 14px; }
.skip:focus { left: 8px; }

.wrap { padding-inline: var(--gut); max-width: 1760px; margin-inline: auto; }
.u { font: 500 11px/1.2 var(--font-u); letter-spacing: .06em; text-transform: uppercase; }
.eyebrow { font: 500 11px/1.2 var(--font-u); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.h-xl { font-size: clamp(56px, 11vw, 190px); } .h-lg { font-size: clamp(40px, 6vw, 96px); } .h-md { font-size: clamp(28px, 3.2vw, 48px); }
.mut { color: var(--mut); }
.sec { padding-block: clamp(56px, 8vw, 120px); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 34px; font: 500 11px/1 var(--font-u); letter-spacing: .1em; text-transform: uppercase; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); transition: background .25s, color .25s; }
.btn:hover, .btn:focus-visible { background: transparent; color: var(--fg); }
.btn--ghost { background: transparent; color: var(--fg); } .btn--ghost:hover { background: var(--fg); color: var(--bg); }
.btn--block { width: 100%; } .btn[disabled] { opacity: .4; pointer-events: none; }
.link { border-bottom: 1px solid currentColor; padding-bottom: 1px; font: 500 11px/1.2 var(--font-u); letter-spacing: .08em; text-transform: uppercase; transition: opacity .2s; } .link:hover { opacity: .55; }

/* announcement + header */
.ann { position: relative; background: #e9ecef; color: #1f2bd4; font: 500 11px/1 var(--font-u); letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: 12px 44px; }
.ann button { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; line-height: 1; color: inherit; padding: 4px 6px; }
.hdr { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr__in { height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-inline: var(--gut); }
.hdr .u { cursor: pointer; } .hdr .u:hover { opacity: .55; }
.logo { font: 400 28px/1 var(--font-d); letter-spacing: .09em; text-transform: uppercase; justify-self: center; padding-left: .09em; }
.hdr__r { display: flex; justify-content: flex-end; gap: 22px; }
.hdr__l { display: flex; gap: 22px; align-items: center; }

/* full-screen menu */
.menu { position: fixed; inset: 0; z-index: 85; background: #000; color: #fff; display: flex; flex-direction: column; padding: 0 var(--gut) var(--gut); visibility: hidden; opacity: 0; transition: opacity .4s var(--ease), visibility .4s; overflow-y: auto; }
.menu.open { visibility: visible; opacity: 1; }
.menu__top { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; flex: none; }
.menu__top .u { color: #fff; }
.menu nav { display: grid; margin-block: auto; padding-block: 24px; }
.menu nav a { font: 400 clamp(44px, 9vw, 120px)/1.02 var(--font-d); letter-spacing: -.02em; display: block; transform: translateY(14px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease), padding-left .3s var(--ease); }
.menu.open nav a { transform: none; opacity: 1; } .menu.open nav a:nth-child(2) { transition-delay: .05s; } .menu.open nav a:nth-child(3) { transition-delay: .1s; } .menu.open nav a:nth-child(4) { transition-delay: .15s; } .menu.open nav a:nth-child(5) { transition-delay: .2s; } .menu.open nav a:nth-child(6) { transition-delay: .25s; }
.menu nav a:hover { padding-left: 16px; font-style: italic; }
.menu__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #9b9b9b; font: 500 11px/1.4 var(--font-u); letter-spacing: .06em; text-transform: uppercase; }
.menu__foot a:hover { color: #fff; }

/* HERO */
.hero { position: relative; height: calc(100svh - var(--hdr) - 34px); min-height: 520px; background: #0a0a0a; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; background: radial-gradient(70% 90% at 70% 40%, #3a3a3a 0%, #151515 55%, #070707 100%); }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.hero__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.28); text-align: center; font: 500 11px/1.8 var(--font-u); letter-spacing: .1em; text-transform: uppercase; padding: 24px; }
.hero__copy { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 38px); z-index: 2; }
.hero__copy h1 { font-size: clamp(56px, 10vw, 170px); line-height: .88; }
.hero__copy .eyebrow { color: rgba(255,255,255,.7); margin-bottom: 16px; }
.hero__bar { position: absolute; left: var(--gut); right: var(--gut); bottom: 16px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 500 10.5px/1 var(--font-u); letter-spacing: .06em; text-transform: uppercase; }
.hero__bar a { border-bottom: 1px solid #fff; padding-bottom: 2px; }
@media (max-width: 640px) { .hero__bar span:nth-child(1) { display: none; } }

/* quick links strip */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo a { display: flex; justify-content: space-between; align-items: center; padding: clamp(22px, 3.5vw, 52px) var(--gut); font: 400 clamp(30px, 5vw, 76px)/1 var(--font-d); letter-spacing: -.02em; border-bottom: 1px solid var(--line); transition: background .25s, color .25s; }
.duo a + a { border-left: 1px solid var(--line); } .duo a:hover { background: var(--fg); color: var(--bg); } .duo a span { font: 500 11px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; }

/* product art placeholders */
.ph { position: relative; width: 100%; height: 100%; background: var(--tile); display: grid; place-items: center; overflow: hidden; }
.ph svg.garment { width: 72%; height: auto; max-height: 80%; }
.ph svg.garment .g { fill: var(--gc); stroke: rgba(0,0,0,.28); stroke-width: 1; }
.ph .tag { position: absolute; left: 12px; bottom: 10px; font: 500 9px/1 var(--font-u); letter-spacing: .1em; color: #aaa; text-transform: uppercase; }
.ph img.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dark .ph { background: #1a1a1a; } .dark .ph svg.garment .g { stroke: rgba(255,255,255,.2); }

/* grid / cards (flat, edge-to-edge) */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.card { display: block; position: relative; padding-bottom: 28px; }
.card__media { position: relative; aspect-ratio: 4/5; background: var(--tile); overflow: hidden; }
.card__media .ph { position: absolute; inset: 0; transition: opacity .5s var(--ease); } .card__media .ph + .ph { opacity: 0; }
.card:hover .card__media .ph:first-child { opacity: 0; } .card:hover .card__media .ph + .ph { opacity: 1; }
.card__badge { position: absolute; top: 12px; left: 14px; z-index: 2; font: 500 10px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; }
.card__meta { display: flex; justify-content: space-between; gap: 12px; padding: 12px 12px 0; font: 500 11px/1.3 var(--font-u); letter-spacing: .04em; text-transform: uppercase; }
.card__sub { padding: 2px 12px 0; color: var(--mut); font: 400 11px/1.3 var(--font-u); text-transform: uppercase; letter-spacing: .04em; }

/* editorial split */
.edit { display: grid; grid-template-columns: 1fr 1fr; }
.edit__img { position: relative; min-height: 70vh; background: #111; }
.edit__img .ph { position: absolute; inset: 0; }
.edit__txt { display: flex; flex-direction: column; justify-content: space-between; padding: var(--gut); padding-block: clamp(32px, 5vw, 72px); gap: 48px; }
.edit__txt p.big { font: 400 clamp(32px, 4.6vw, 76px)/1 var(--font-d); letter-spacing: -.02em; max-width: 16ch; margin: 0; }
@media (max-width: 860px) { .edit { grid-template-columns: 1fr; } .edit__img { min-height: 60vw; } }

/* categories */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { position: relative; aspect-ratio: 3/4; overflow: hidden; display: block; background: var(--tile); }
.tile .ph { position: absolute; inset: 0; transition: transform .9s var(--ease); } .tile:hover .ph { transform: scale(1.04); }
.tile h3 { position: absolute; left: 14px; bottom: 12px; font: 500 11px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; }

/* forms (underline style) */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font: 500 10.5px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.inp, select.inp, textarea.inp { width: 100%; height: 50px; padding: 0 2px; background: transparent; border: 0; border-bottom: 1px solid var(--fg); border-radius: 0; color: var(--fg); appearance: none; -webkit-appearance: none; transition: border-color .2s; }
textarea.inp { height: auto; min-height: 130px; resize: vertical; border: 1px solid var(--fg); padding: 12px; }
.inp::placeholder { color: var(--mut); letter-spacing: .04em; } .inp:focus { outline: none; border-bottom-width: 2px; }
select.inp { background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%); background-position: calc(100% - 12px) 22px, calc(100% - 7px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .row2, .row3 { grid-template-columns: 1fr; gap: 0; } }
.chk { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 11px; line-height: 1.55; color: var(--mut); cursor: pointer; margin: 8px 0 18px; }
.chk input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid var(--fg); background: transparent; margin: 0; display: grid; place-content: center; cursor: pointer; }
.chk input::after { content: ''; width: 10px; height: 10px; background: var(--fg); transform: scale(0); transition: transform .15s; } .chk input:checked::after { transform: scale(1); }
.chk a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.msg { font-size: 12px; min-height: 1.4em; margin-top: 10px; } .msg.ok { color: var(--ok); } .msg.err { color: var(--err); }
.sub-form { display: grid; gap: 4px; max-width: 520px; } .sub-form .field { margin: 0; } .sub-form .row2 { gap: 20px; }

/* signup band + footer */
.band { background: #000; color: #fff; --fg: #fff; --bg: #000; --mut: #9b9b9b; --ok: #7bd88f; --err: #ff7a66; }
.band__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 96px); align-items: end; }
@media (max-width: 860px) { .band__in { grid-template-columns: 1fr; } }
.ftr { border-top: 1px solid var(--line); padding-top: clamp(40px, 6vw, 80px); }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 56px; }
@media (max-width: 860px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__grid > :first-child { grid-column: 1/-1; } }
.ftr h4 { font: 500 11px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 16px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ftr a:hover { opacity: .55; }
.ftr__big { font: 400 clamp(60px, 19vw, 400px)/.8 var(--font-d); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; margin: 0 0 -.05em -.02em; user-select: none; }
.ftr__bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 18px; border-top: 1px solid var(--line); font: 500 10.5px/1 var(--font-u); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }

/* shop + product */
.page-head { padding-block: clamp(40px, 6vw, 88px) 24px; }
.toolbar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px var(--gut); border-block: 1px solid var(--line); align-items: center; }
.chips { display: flex; gap: 22px; flex-wrap: wrap; }
.chip { font: 500 11px/1 var(--font-u); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 4px 0; border-bottom: 1px solid transparent; } .chip:hover { color: var(--fg); } .chip[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); }
.toolbar select.inp { height: 30px; width: auto; min-width: 170px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 0; background-position: calc(100% - 12px) 12px, calc(100% - 7px) 12px; }

.pdp { display: grid; grid-template-columns: 1.5fr 1fr; align-items: start; }
@media (max-width: 960px) { .pdp { grid-template-columns: 1fr; } }
.pdp__gal { display: grid; grid-template-columns: 1fr 1fr; }
.pdp__gal > :first-child { grid-column: 1/-1; }
.pdp__gal .m { aspect-ratio: 4/5; position: relative; overflow: hidden; background: var(--tile); } .pdp__gal .m:first-child { aspect-ratio: 1/1; }
.pdp__info { position: sticky; top: var(--hdr); padding: clamp(24px, 3vw, 48px) var(--gut); }
@media (max-width: 960px) { .pdp__info { position: static; } }
.pdp__price { font: 500 14px/1 var(--font-u); margin: 14px 0 24px; }
.sizes { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 22px; }
.size { min-width: 52px; height: 46px; padding: 0 14px; border: 1px solid var(--line); font: 500 12px/1 var(--font-u); transition: .15s; } .size:hover { border-color: var(--fg); } .size[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.shake { animation: shake .4s; } @keyframes shake { 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.acc-d { border-top: 1px solid var(--line); } .acc-d:last-of-type { border-bottom: 1px solid var(--line); }
.acc-d summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; font: 500 11px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; }
.acc-d summary::-webkit-details-marker { display: none; } .acc-d summary::after { content: '+'; font-size: 16px; line-height: .8; transition: transform .3s; } .acc-d[open] summary::after { transform: rotate(45deg); }
.acc-d ul { margin: 0 0 16px; padding-left: 18px; color: var(--mut); } .acc-d p { color: var(--mut); }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; opacity: 0; visibility: hidden; transition: .35s; } .scrim.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--bg); z-index: 80; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .45s var(--ease); visibility: hidden; }
.drawer.open { transform: none; visibility: visible; }
.drawer__h { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: var(--hdr); border-bottom: 1px solid var(--line); font: 500 11px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; }
.drawer__b { flex: 1; overflow-y: auto; padding: 0 20px; } .drawer__f { padding: 18px 20px 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.ship-bar { font: 500 10.5px/1.3 var(--font-u); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 14px 20px; border-bottom: 1px solid var(--line); }
.ship-bar i { display: block; height: 2px; background: var(--line); margin-top: 10px; position: relative; } .ship-bar i b { position: absolute; inset: 0 auto 0 0; background: var(--fg); transition: width .5s var(--ease); }
.line { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.line__img { aspect-ratio: 4/5; background: var(--tile); position: relative; overflow: hidden; }
.line__name { font: 500 12px/1.3 var(--font-u); text-transform: uppercase; letter-spacing: .03em; } .line__opt { color: var(--mut); font-size: 11px; text-transform: uppercase; margin: 3px 0 10px; }
.qty { display: inline-flex; border: 1px solid var(--line); height: 32px; align-items: center; } .qty button { width: 30px; height: 100%; font-size: 15px; } .qty button:hover { background: var(--fg); color: var(--bg); } .qty span { min-width: 26px; text-align: center; }
.line__rm { font-size: 11px; color: var(--mut); text-decoration: underline; margin-left: 12px; } .line__rm:hover { color: var(--fg); }
.tot-row { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .tot-row.big { font-weight: 600; font-size: 14px; }
.empty { text-align: center; padding: 56px 0; color: var(--mut); } .empty h3 { color: var(--fg); margin-bottom: 14px; font-size: 40px; }

/* cart + checkout */
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 5vw, 96px); padding-block: 32px 96px; align-items: start; }
@media (max-width: 960px) { .two { grid-template-columns: 1fr; } .two > aside { order: -1; } }
.sum { background: var(--tile); padding: clamp(18px, 3vw, 32px); position: sticky; top: calc(var(--hdr) + 20px); } @media (max-width: 960px) { .sum { position: static; } }
.sum h3 { font-size: 32px; margin-bottom: 8px; } .sum .tot-row { margin-top: 12px; }
.fs { border: 0; padding: 0; margin: 0 0 40px; } .fs legend { font: 400 34px/1 var(--font-d); margin-bottom: 18px; padding: 0; letter-spacing: -.02em; }
.radio { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--line); padding: 16px; margin-bottom: -1px; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.radio:has(input:checked) { border-color: var(--fg); position: relative; z-index: 1; } .radio input { accent-color: #000; margin-right: 12px; } .radio small { color: var(--mut); display: block; margin-left: 28px; text-transform: none; }
.demo-note { border: 1px dashed var(--fg); padding: 12px 14px; font-size: 12px; margin-bottom: 24px; }
.secure { font-size: 11px; color: var(--mut); text-align: center; margin-top: 12px; }

/* prose / about / contact */
.prose { max-width: 720px; padding-block: 8px 120px; } .prose h2 { font-size: 34px; margin: 40px 0 12px; } .prose p, .prose li { color: #444; font-size: 14px; } .prose ul { padding-left: 20px; } .prose a { text-decoration: underline; text-underline-offset: 3px; }
.draft { border: 1px dashed #999; padding: 12px 14px; color: var(--mut); font-size: 12px; margin-bottom: 28px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 96px); align-items: center; padding-block: clamp(32px, 5vw, 72px); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split .ph-block { aspect-ratio: 4/5; position: relative; background: var(--tile); overflow: hidden; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; } .stats b { display: block; font: 400 clamp(36px, 4.4vw, 64px)/1 var(--font-d); }

/* PASSWORD */
.pw { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: #000; color: #fff; --fg: #fff; --bg: #000; --mut: #9b9b9b; --line: #2a2a2a; --ok: #7bd88f; --err: #ff7a66; position: relative; overflow: hidden; }
.pw::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 38%, #1f1f1f, transparent 70%); pointer-events: none; }
.pw__top, .pw__bot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--gut); font: 500 10.5px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; }
.pw__main { position: relative; z-index: 2; display: grid; place-items: center; padding: 24px var(--gut); text-align: center; }
.pw__in { width: min(520px, 100%); }
.pw__word { font: 400 clamp(56px, 14vw, 190px)/.86 var(--font-d); letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 14px; }
.pw__in > p { color: var(--mut); max-width: 38ch; margin-inline: auto; }
.cd { display: flex; justify-content: center; gap: clamp(18px, 4vw, 36px); margin: 24px 0 34px; }
.cd b { display: block; font: 400 clamp(34px, 6vw, 52px)/1 var(--font-d); font-variant-numeric: tabular-nums; } .cd small { font: 500 9.5px/1 var(--font-u); letter-spacing: .1em; color: var(--mut); text-transform: uppercase; }
.pw .sub-form { text-align: left; margin-inline: auto; }
.pw__alt { margin-top: 28px; } .pw__alt button { font: 500 10.5px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); border-bottom: 1px solid currentColor; padding-bottom: 2px; } .pw__alt button:hover { color: #fff; }
.pw__alt form { display: none; gap: 14px; margin: 18px auto 0; grid-template-columns: 1fr auto; text-align: left; max-width: 420px; } .pw__alt.open form { display: grid; }
@media (max-width: 480px) { .pw__alt form { grid-template-columns: 1fr; } }
.pw .btn { background: #fff; color: #000; border-color: #fff; } .pw .btn:hover { background: transparent; color: #fff; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px); background: #000; color: #fff; padding: 13px 18px; font: 500 11px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; z-index: 100; opacity: 0; transition: .4s var(--ease); pointer-events: none; } .toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}
.line__img .tag, .tile .tag { display: none; }

/* ---- Off-White-inspired additions ---- */
.hero { height: calc(100svh - var(--hdr) - 100px); min-height: 460px; }
.capbar { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(18px, 2.4vw, 30px) var(--gut); border-bottom: 1px solid var(--line); font: 500 12px/1.3 var(--font-u); text-transform: uppercase; letter-spacing: .02em; }
.capbar nav { display: flex; gap: clamp(20px, 4vw, 56px); }
.capbar a { padding: 6px 0; border-bottom: 1px solid transparent; } .capbar a:hover { border-color: var(--fg); }
@media (max-width: 640px) { .capbar { grid-template-columns: 1fr; gap: 12px; } }
.feature { display: grid; grid-template-columns: 1fr 1fr; }
.feature .tile { aspect-ratio: 4/5; } .feature .tile + .tile { border-left: 1px solid var(--line); }
.feature .tile h3 { left: 0; right: 0; bottom: 0; padding: 18px var(--gut); font-size: 12px; background: linear-gradient(transparent, rgba(255,255,255,.0)); display: flex; justify-content: space-between; }
.feature .tile h3::after { content: 'Shop →'; }
@media (max-width: 640px) { .feature { grid-template-columns: 1fr; } .feature .tile + .tile { border-left: 0; border-top: 1px solid var(--line); } }
.card__meta { letter-spacing: .02em; }
.h-md, .sec-head h2 { font-family: var(--font-d); }

/* signup popup */
.pop { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.pop.open { opacity: 1; visibility: visible; }
.pop__card { position: relative; background: #fff; color: #000; width: min(500px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; padding: clamp(24px, 4vw, 40px); transform: translateY(14px); transition: transform .5s var(--ease); }
.pop.open .pop__card { transform: none; }
.pop__x { position: absolute; top: 12px; right: 14px; font-size: 24px; line-height: 1; padding: 4px 8px; }
.pop__card .eyebrow { margin-bottom: 14px; }
.pop__card h2 { font-size: clamp(34px, 6vw, 48px); margin-bottom: 14px; }
.pop__card > p { color: var(--mut); margin-bottom: 20px; }
.pop .sub-form .row2 { grid-template-columns: 1fr; gap: 0; }

/* password page SMS section */
.pw-sms { text-align: left; border: 1px solid #2a2a2a; padding: clamp(20px, 3.5vw, 32px); margin-top: 8px; }
.pw-sms h2 { font-size: clamp(30px, 5vw, 42px); margin: 10px 0 10px; }
.pw-sms > p.mut { margin-bottom: 18px; }
.pw-email { margin-top: 18px; text-align: left; }
.pw-email button[aria-controls] { font: 500 10.5px/1 var(--font-u); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pw-email button[aria-controls]:hover { color: #fff; }
.pw-email [hidden] { display: none; } .pw-email #pw-email-form { margin-top: 14px; }

/* ==========================================================================
   DISTRESSED / PUNK FADED TYPE  (rough edges + eroded, speckled fade)
   Turn it off: delete this block, or add class "clean" to <body>.
   ========================================================================== */
:root {
  --erode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -12 0 0 0 8.2'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --blot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.5 0 0 0 1.95'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
/* the SVG filter node itself */
.rough-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

body:not(.clean) :is(h1:not(.pw__word), h2, h3, h4, .menu nav a, .hero__copy h1, .tile h3, .stats b, .fs legend) {
  filter: url(#rough);
  -webkit-mask-image: var(--erode), var(--blot);
          mask-image: var(--erode), var(--blot);
  -webkit-mask-size: 320px 320px, 900px 900px;
          mask-size: 320px 320px, 900px 900px;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* small caps text keeps rough edges only — stays legible */
body:not(.clean) :is(.eyebrow, .u, .card__meta, .capbar, .btn, .link, .chip, .ann) { filter: url(#rough-s); }
/* a touch of faded ink on large type */
body:not(.clean) :is(h1:not(.pw__word), h2, .h-xl, .h-lg) { opacity: .94; }

/* typewriter body copy: slightly worn */
body:not(.clean) p, body:not(.clean) li { letter-spacing: .005em; }

/* ---- image logo ---- */
.logo { display: block; padding: 0; line-height: 0; }
.logo img { height: 38px; width: auto; }
.menu__logo { line-height: 0; } .menu__logo img { height: 30px; width: auto; filter: invert(1); }
.ftr__logo { display: block; width: 100%; height: auto; margin: 0 0 -1.5%; user-select: none; pointer-events: none; }
.pw__word { line-height: 0; margin-bottom: 22px; } .pw__word img { width: min(400px, 78vw); height: auto; margin-inline: auto; filter: invert(1); }
@media (max-width: 640px) { .logo img { height: 32px; } }

/* ---- distressed type everywhere (not just headlines) ---- */
body:not(.clean) :is(p, li, label, summary, small, .eyebrow, .u, .btn, .link, .chip, .ann, .capbar span, .capbar a,
  .card__meta, .card__sub, .card__badge, .hero__bar, .hero__ph, .line__name, .line__opt, .tot-row, .acc-d summary,
  .radio, .size, .field label, .ftr li, .ftr h4, .menu__foot, .toolbar, .ship-bar, .drawer__h, .msg, .chk span, .pdp__price, .tag) { filter: url(#rough-s); }
/* faded ink: body copy sits slightly back, headings stay strong */
body:not(.clean) :is(p, li, .card__sub, .line__opt, .chk span) { color: color-mix(in srgb, var(--fg) 72%, transparent); }
body:not(.clean) .pw :is(p, li) { color: color-mix(in srgb, #fff 72%, transparent); }
/* never distort the product art or the logo */
body:not(.clean) :is(.ph, .ph *, .logo img, .menu__logo img, .ftr__logo, .pw__word img) { filter: none; }
body:not(.clean) .pw__word img { filter: invert(1); } body:not(.clean) .menu__logo img { filter: invert(1); }

/* ==========================================================================
   PASSWORD PAGE — old CRT TV / VHS ("Feel Forgotten")
   ========================================================================== */
.tvbody { background: #000; margin: 0; overflow: hidden; height: 100svh; }
.tvbody::after { display: none; }
.tvroom { position: fixed; inset: 0; background: #000; padding: clamp(8px, 2vmin, 22px);
  --fg: #fff; --bg: #000; --mut: #a8a8a8; --line: #2a2a2a; --tile: #151515; --ok: #7bd88f; --err: #ff7a66; color: #fff; }
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #070707;
  border-radius: 7vmin / 6vmin; box-shadow: inset 0 0 0 2px #111, inset 0 0 90px 24px rgba(0,0,0,.95), 0 0 0 6px #0c0c0c; isolation: isolate; }
.tv-intro .screen { animation: crt-on .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes crt-on { 0% { transform: scale(1, .006); filter: brightness(8); } 40% { transform: scale(1, .006); filter: brightness(8); } 55% { transform: scale(1, 1); filter: brightness(2.2); } 100% { transform: none; filter: none; } }
#static { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 1; opacity: .12; transition: opacity .15s linear; }
.scan { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px); }
.roll { position: absolute; left: 0; right: 0; height: 22%; z-index: 6; pointer-events: none; background: linear-gradient(transparent, rgba(255,255,255,.06), transparent); animation: roll 7.5s linear infinite; }
@keyframes roll { from { top: -25%; } to { top: 110%; } }
.glass { position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(0,0,0,.7) 100%), radial-gradient(60% 35% at 28% 14%, rgba(255,255,255,.07), transparent 70%); }
.screen.glitch { animation: jolt .22s steps(2) 2; }
@keyframes jolt { 0% { transform: translate(-6px, 0) skewX(1.2deg); filter: contrast(1.4) brightness(1.4); } 50% { transform: translate(5px, 2px); } 100% { transform: none; } }
.osd { position: absolute; z-index: 7; font: 400 clamp(20px, 3.2vmin, 32px)/1 'VT323', monospace; letter-spacing: .08em; color: #eaeaea; text-shadow: 2px 0 rgba(255,0,0,.45), -2px 0 rgba(0,220,255,.35); pointer-events: none; }
.osd--tl { top: 6.5vmin; left: 8vmin; } .osd--tr { top: 6.5vmin; right: 8vmin; } .osd--bl { bottom: 6vmin; left: 8vmin; } .osd--br { bottom: 6vmin; right: 8vmin; }
.tv-intro #osd-play { visibility: hidden; } .osd.show { visibility: visible !important; }
.stage { position: absolute; inset: 0; z-index: 5; overflow-y: auto; display: grid; place-items: center; padding: 11vmin clamp(18px, 8vw, 90px); }

/* VHS disclaimer card (title card look: red glow + white rule, smeared yellow) */
.vhs { width: min(900px, 100%); }
.vhs[hidden] { display: none; }
.vhs__title { display: block; width: fit-content; font: 600 clamp(54px, 13vw, 140px)/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .01em; color: #ff6b52; margin: 0 auto 4vmin; padding: 0 .1em .06em;
  text-shadow: 0 0 14px rgba(255,60,30,.95), 0 0 38px rgba(255,40,0,.6), 3px 0 0 rgba(255,0,0,.4); border-bottom: 5px solid #fff; box-shadow: 0 8px 30px -10px rgba(255,255,255,.5); filter: blur(.6px); opacity: 0; transform: scaleX(1.03); }
.vhs.on .vhs__title { opacity: 1; animation: flick .2s steps(3) 2; }
.vhs__text { margin: 0; text-align: center; font: 600 clamp(32px, 7.6vw, 78px)/1.12 'Barlow Condensed', 'Arial Narrow', sans-serif; color: #f6ef4a; letter-spacing: .005em; transform: scaleX(1.03);
  text-shadow: 4px 0 0 rgba(255,40,0,.35), -3px 0 0 rgba(0,230,255,.22), 0 5px 7px rgba(0,0,0,.7); filter: blur(.7px); }
.vhs__text span { display: block; opacity: 0; transform: translateX(-8px); }
.vhs__text span.on { opacity: 1; transform: none; animation: smear .35s steps(4); }
@keyframes flick { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: .2; } 100% { opacity: 1; } }
@keyframes smear { 0% { transform: translateX(-24px) skewX(-8deg); opacity: .3; } 100% { transform: none; opacity: 1; } }

/* Final: Feel Forgotten + SMS */
.final { width: min(540px, 100%); text-align: center; }
.tv-intro .final { visibility: hidden; } .final.reveal { visibility: visible !important; animation: glitch-in .7s steps(1) both; }
@keyframes glitch-in { 0% { transform: translateX(-14px) skewX(3deg); filter: contrast(2) brightness(1.6); opacity: .2; } 15% { transform: translateX(10px); opacity: 1; } 30% { transform: translateX(-4px); opacity: .5; } 50% { transform: translateX(3px); opacity: 1; } 100% { transform: none; filter: none; } }
.final__logo { width: min(200px, 48vw); height: auto; margin: 0 auto 18px; filter: invert(1) !important; }
.final .eyebrow { color: #cfcfcf; margin-bottom: 8px; }
.final__title { font: 400 clamp(60px, 13vw, 128px)/.84 'Instrument Serif', serif; letter-spacing: -.02em; text-shadow: -3px 0 rgba(255,0,60,.6), 3px 0 rgba(0,220,255,.55); margin: 0 0 18px; animation: aberr 5s steps(1) infinite; }
@keyframes aberr { 0%, 90%, 100% { text-shadow: -3px 0 rgba(255,0,60,.6), 3px 0 rgba(0,220,255,.55); transform: none; } 92% { text-shadow: -9px 0 rgba(255,0,60,.8), 9px 0 rgba(0,220,255,.8); transform: translateX(3px); } 95% { text-shadow: 7px 0 rgba(255,0,60,.8), -7px 0 rgba(0,220,255,.8); transform: translateX(-3px); } }
.final__lede { color: #bdbdbd; max-width: 40ch; margin: 0 auto 4px; }
.final .cd { margin: 16px 0 22px; } .final .cd b { text-shadow: -2px 0 rgba(255,0,60,.5), 2px 0 rgba(0,220,255,.45); }
.final .pw-sms { border-color: #3a3a3a; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.final .sub-form { margin-inline: auto; text-align: left; } .final .pw-email, .final .pw__alt { text-align: center; }
.final .pw-email { text-align: left; }
.final .btn { background: #fff; color: #000; border-color: #fff; } .final .btn:hover { background: transparent; color: #fff; }
.final__legal { margin: 22px 0 0; color: #8a8a8a; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; } .final__legal a { text-decoration: underline; text-underline-offset: 2px; }
.tv-skip { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20; font: 400 20px/1 'VT323', monospace; letter-spacing: .12em; color: #cfcfcf; background: rgba(0,0,0,.55); padding: 5px 12px; border: 1px solid #333; text-transform: uppercase; }
.tv-skip:hover, .tv-skip:focus-visible { color: #fff; border-color: #fff; }
html:not(.tv-intro) .tv-skip { display: none; }
@media (max-width: 560px) { .osd--tl, .osd--tr { top: 5vmin; } .osd--bl { display: none; } .stage { padding-block: 13vmin; } }
@media (prefers-reduced-motion: reduce) { .roll, .final__title, .tv-intro .screen { animation: none !important; } }
/* turn off the page-wide distress filters inside the TV so it reads as video, not print */
.tvroom :is(h1, h2, p, li, label, .btn, .eyebrow, .link, .msg, .chk span) { filter: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
body.tvbody .vhs__text { color: #f6ef4a !important; }
body.tvbody .vhs__text span { color: #f6ef4a; }

/* ==========================================================================
   v7: password page = disclaimer -> SMS signup, all in the same VHS look
   ========================================================================== */
.tvbody .stage { display: flex; padding: 11vmin clamp(16px, 7vw, 90px); }
.tvbody .stage > .vhs { margin: auto; }
.vhs--final { width: min(680px, 100%); text-align: center; }
.vhs--final[hidden] { display: none; }
.vhs--final .vhs__title { font-size: clamp(40px, 10.5vw, 104px); margin-bottom: 3vmin; }
.vhs--final.reveal { animation: glitch-in .7s steps(1) both; }
.vhs__text--sm { font-size: clamp(26px, 5.4vw, 52px); margin-bottom: 4vmin; }
/* "TV static" in the type itself: RGB split that jitters + a flicker */
.vhs__text span.on, .vhs__title { animation-name: vhs-jit; animation-duration: 3.2s; animation-iteration-count: infinite; animation-timing-function: steps(1); }
.vhs__text span.on:nth-child(2n) { animation-duration: 4.1s; animation-delay: .6s; }
.vhs__text span.on:nth-child(3n) { animation-duration: 2.7s; animation-delay: 1.1s; }
@keyframes vhs-jit {
  0%, 86%, 100% { transform: none; }
  88% { transform: translateX(-6px) skewX(-4deg); text-shadow: 7px 0 0 rgba(255,40,0,.55), -6px 0 0 rgba(0,230,255,.45), 0 5px 7px rgba(0,0,0,.7); opacity: .75; }
  91% { transform: translateX(5px); opacity: 1; }
  94% { transform: translateX(-2px) skewX(2deg); opacity: .85; }
}
.vhs__form { opacity: 0; transition: opacity .5s steps(5); margin-top: 1vmin; } .vhs__form.on { opacity: 1; }
.vhs__form .sub-form { margin-inline: auto; max-width: 480px; text-align: left; gap: 0; }
.vhs__form .inp { font: 600 clamp(24px, 6vw, 34px)/1.1 'Barlow Condensed', sans-serif; letter-spacing: .04em; color: #f6ef4a; height: 58px; border-bottom: 3px solid #f6ef4a; text-shadow: 3px 0 0 rgba(255,40,0,.35), -2px 0 0 rgba(0,230,255,.25); text-align: center; }
.vhs__form .inp::placeholder { color: rgba(246,239,74,.55); }
.vhs__form .chk { margin: 14px 0 16px; color: #cfcfcf; font: 500 14px/1.35 'Barlow Condensed', sans-serif; letter-spacing: .02em; text-transform: none; }
.vhs__form .chk span { color: #cfcfcf !important; } .vhs__form .chk a { color: #f6ef4a; }
.vhs__form .chk input { border-color: #f6ef4a; } .vhs__form .chk input::after { background: #f6ef4a; }
.vhs__form .btn { height: 56px; font: 600 24px/1 'Barlow Condensed', sans-serif; letter-spacing: .12em; background: transparent; color: #ff6b52; border: 3px solid #ff6b52; text-shadow: 0 0 12px rgba(255,60,30,.9); box-shadow: 0 0 18px rgba(255,60,30,.35), inset 0 0 18px rgba(255,60,30,.2); }
.vhs__form .btn:hover, .vhs__form .btn:focus-visible { background: #ff6b52; color: #000; text-shadow: none; }
.vhs__form .msg { color: #f6ef4a; font: 600 20px/1.2 'Barlow Condensed', sans-serif; text-align: center; letter-spacing: .04em; }
.vhs__form .msg.err { color: #ff8a73; }
.osd--bl { display: block; }
@media (max-width: 560px) {
  .tvbody .stage { padding: 14vmin 18px 8vmin; }
  .osd--tl { left: 9vw; top: 6vmin; } .osd--tr { right: 9vw; top: 6vmin; } .osd--bl { left: 9vw; bottom: 5vmin; }
  .screen { border-radius: 9vw / 6vw; }
  .vhs__title { border-bottom-width: 4px; }
}