/* Noirehall — black & white, editorial. */
:root{
  --ink:#0a0a0a; --paper:#fff; --muted:#767676; --hair:#e4e4e4; --wash:#f6f5f3;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(16px,5vw,64px); --max:1400px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.01em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.rule{border:0;border-top:1px solid var(--hair);margin:0}

/* ---- announcement + header ---- */
.ticker{background:var(--ink);color:#fff;text-align:center;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;padding:9px 16px}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:18px var(--pad)}
.bar nav{display:flex;gap:26px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.bar .right{justify-self:end;display:flex;align-items:center;gap:18px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.brand{justify-self:center}
.brand img{width:clamp(130px,17vw,190px);aspect-ratio:520/120}
.switch{display:flex;gap:6px;align-items:center;color:var(--muted)}
.switch button{background:none;border:0;padding:2px 1px;color:var(--muted);
  font-size:11px;letter-spacing:.14em}
.switch button.on{color:var(--ink);border-bottom:1px solid var(--ink)}
.switch span{opacity:.4}
.burger{display:none;background:none;border:0;padding:0;font-size:18px;justify-self:start}

/* ---- hero ---- */
.hero{position:relative;height:var(--rest,86vh);min-height:0;max-height:860px;display:grid;
  align-items:stretch;border-bottom:1px solid var(--hair);
  /* The image column is sized FROM the hero height, not as a fixed fraction of the
     width. The source is a tall portrait crop; a wide-but-short box would scale it
     up and cut the top off the back print. Keeping width ≈ height means roughly the
     same slice of the shirt shows at every window size. */
  grid-template-columns:minmax(0,1fr) clamp(320px, calc(var(--rest,80vh) * 1.02), 52%)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;
  gap:clamp(12px,2.2vh,22px);padding:clamp(24px,4vh,72px) clamp(28px,5vw,96px);min-height:0}
/* Capped against the viewport height too, so a short window shrinks the type
   instead of pushing the buttons below the fold. */
.hero h1{font-size:min(clamp(38px,5.6vw,80px),11vh);line-height:1.02}
.hero p{font-size:min(15px,2.6vh)}
.hero p{max-width:44ch;color:#3a3a3a;margin:0}
.hero-img{background:var(--wash);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 72%}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

.btn{display:inline-block;padding:15px 34px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;border:1px solid var(--ink);background:var(--ink);color:#fff;
  transition:background .18s,color .18s}
.btn:hover{background:#fff;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.block{width:100%;text-align:center}

/* ---- sections + grid ---- */
section{padding:clamp(40px,7vh,96px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:clamp(22px,3.5vh,44px);flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,3.2vw,40px)}
.sec-head p{margin:6px 0 0;color:var(--muted)}
.link-u{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:3px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(20px,2.6vw,40px) clamp(16px,2vw,28px)}
.card-img{background:var(--wash);aspect-ratio:3/4;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-img img{transform:scale(1.04)}
.card-meta{padding:16px 2px 0;display:flex;flex-direction:column;gap:5px}
.card-line{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.card-meta h3{font-size:17px}
.card-price{font-size:14px}

/* ---- craft strip ---- */
.craft{background:var(--ink);color:#fff}
.craft h2{font-size:clamp(26px,3.2vw,40px)}
.craft p{color:#c9c9c9;max-width:62ch}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:36px;margin-top:56px;border-top:1px solid #2a2a2a;padding-top:40px}
.cols h3{font-size:20px;margin-bottom:8px}
.cols p{color:#9e9e9e;font-size:14px}

/* ---- PDP ---- */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,72px);
  padding:clamp(28px,4vw,60px) var(--pad) clamp(56px,7vw,100px);
  max-width:var(--max);margin:0 auto}
.pdp-img{background:var(--wash)}
.pdp-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pdp-info{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:22px}
.pdp-info h1{font-size:clamp(28px,3.4vw,44px);line-height:1.12}
.pdp-price{font-size:20px}

/* One screen for the product block: image fills the space left under the header,
   the info column is measured against the same box. Below 900px the page stacks
   and scrolling is the right behaviour, so none of this applies. */
@media(min-width:901px){
  .pdp{height:var(--rest,auto);align-items:stretch;
    padding:clamp(14px,2.4vh,40px) var(--pad) clamp(16px,2.8vh,44px)}
  .pdp-img{height:100%;overflow:hidden}
  .pdp-img img{height:100%;aspect-ratio:auto}
  .pdp-info{position:static;height:100%;min-height:0;overflow:auto;
    align-self:stretch;justify-content:center;gap:clamp(8px,1.5vh,20px)}
  .pdp-info h1{font-size:min(clamp(28px,3.4vw,44px),5.4vh)}
  .pdp-price{font-size:min(20px,3vh)}
  .acc summary{padding:min(16px,1.6vh) 0}
  .acc .body{padding-bottom:min(18px,1.8vh)}
  .btn{padding:min(15px,1.7vh) 34px}
}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.sizes button{min-width:56px;padding:13px 6px;background:#fff;border:1px solid var(--hair);
  font-size:12px;letter-spacing:.1em}
.sizes button:hover{border-color:var(--ink)}
.sizes button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.acc{border-top:1px solid var(--hair)}
.acc details{border-bottom:1px solid var(--hair)}
.acc summary{padding:16px 0;cursor:pointer;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:15px}
.acc details[open] summary::after{content:'–'}
.acc .body{padding:0 0 18px;color:#4a4a4a;font-size:14px}
.note{font-size:12px;color:var(--muted)}
.flash{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:16px}

/* ---- cart / checkout ---- */
.page-head{padding:clamp(26px,5vh,60px) var(--pad) 0;max-width:var(--max);margin:0 auto}
.page-head h1{font-size:clamp(30px,4vw,52px)}
.cart-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(28px,5vw,72px);
  max-width:var(--max);margin:0 auto;padding:clamp(20px,3vh,36px) var(--pad) clamp(40px,7vh,96px);align-items:start}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--hair)}
.line img{width:96px;aspect-ratio:3/4;object-fit:cover;background:var(--wash)}
.line h3{font-size:16px}
.line .sub{font-size:12px;color:var(--muted);margin-top:4px}
.qty{display:inline-flex;border:1px solid var(--hair);margin-top:12px}
.qty button{width:32px;height:32px;background:#fff;border:0}
.qty span{min-width:34px;display:grid;place-items:center;font-size:13px}
.line .rm{background:none;border:0;padding:0;margin-top:10px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--hair)}
.summary{background:var(--wash);padding:clamp(22px,3vw,34px);position:sticky;top:110px}
.summary h2{font-size:20px;margin-bottom:20px}
.row{display:flex;justify-content:space-between;padding:9px 0;font-size:14px}
.row.tot{border-top:1px solid var(--hair);margin-top:12px;padding-top:16px;font-size:17px}
.empty{padding:70px 0;text-align:center;color:var(--muted)}

form .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
form label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
form input,form select,form textarea{padding:13px 14px;border:1px solid var(--hair);
  background:#fff;font:inherit;font-size:14px;border-radius:0;width:100%}
form input:focus,form select:focus,form textarea:focus{outline:0;border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
fieldset{border:0;padding:0;margin:0 0 34px}
legend{font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:0 0 16px}
.stub{border:1px dashed var(--hair);background:var(--wash);padding:18px;
  font-size:13px;color:#4a4a4a;margin-bottom:22px}

/* ---- long-form documents ---- */
.doc{max-width:74ch}
.doc h1{font-size:clamp(28px,3.6vw,46px)}
.doc h2{font-size:clamp(17px,1.7vw,21px);margin:38px 0 12px}
.doc table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:14px}
.doc th,.doc td{text-align:left;padding:11px 12px 11px 0;border-bottom:1px solid var(--hair);
  vertical-align:top}
.doc th{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border-bottom-color:var(--ink)}
.doc .in{color:var(--muted);font-size:12px}
.doc a{border-bottom:1px solid var(--hair)}
.doc .note{font-size:12px;color:var(--muted)}
@media(max-width:600px){.doc td,.doc th{font-size:13px;padding-right:8px}.doc .in{display:none}}

/* ---- editorial pages ---- */
.prose{max-width:66ch;margin:0 auto;padding:clamp(30px,5vh,72px) var(--pad)}
.prose .lead{font-family:var(--serif);font-size:clamp(19px,2.2vw,25px);line-height:1.5;margin:26px 0 34px}
.prose p{margin:0 0 20px;color:#3a3a3a}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  max-width:var(--max);margin:0 auto;padding:clamp(22px,4vh,56px) var(--pad)}
.split dt{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:22px}
.split dd{margin:6px 0 0}

/* ---- filters ---- */
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters button{background:none;border:1px solid var(--hair);padding:9px 20px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- newsletter + footer ---- */
.news{background:var(--wash);text-align:center}
.news h2{font-size:clamp(22px,2.6vw,32px)}
.news p{color:var(--muted);margin:10px auto 26px;max-width:46ch}
.news form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap}
.news input{flex:1 1 220px;padding:14px;border:1px solid var(--hair);font:inherit;background:#fff}
footer{background:var(--ink);color:#9e9e9e;font-size:13px}
.fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;
  padding:clamp(36px,5vh,72px) var(--pad) 36px;max-width:var(--max);margin:0 auto}
.fcols img{width:170px;aspect-ratio:520/120;filter:invert(1);margin-bottom:18px}
.fcols h4{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  margin:0 0 14px;font-weight:400}
.fcols ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.fcols a:hover{color:#fff}
.fbot{border-top:1px solid #222;padding:22px var(--pad);max-width:var(--max);
  margin:0 auto;font-size:12px}

/* ---- responsive ---- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-img{order:-1;aspect-ratio:4/5}
  .pdp,.cart-wrap,.split{grid-template-columns:1fr}
  .pdp-info,.summary{position:static}
  .fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .bar{grid-template-columns:auto 1fr auto;padding:14px var(--pad)}
  .burger{display:block}
  .bar nav{position:fixed;inset:64px 0 auto 0;background:#fff;flex-direction:column;
    gap:0;padding:8px var(--pad) 20px;border-bottom:1px solid var(--hair);display:none}
  body.nav-open .bar nav{display:flex}
  .bar nav a{padding:14px 0;border-bottom:1px solid var(--hair)}
  .bar .right{gap:10px;font-size:10px;letter-spacing:.1em}
  .cur-code{display:none}
  .brand img{width:118px}
  .hero{height:auto;min-height:0;max-height:none}
  .hero-copy{padding:40px var(--pad) 52px}
  .hero h1{font-size:clamp(30px,8.4vw,44px)}
  .page-head h1,.prose h1{overflow-wrap:break-word}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .card-meta h3{font-size:15px}
  .two{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr}
  .line{grid-template-columns:72px 1fr;gap:14px}
  .line img{width:72px}
  .line .price{grid-column:2}
}