/* NO FILL — house stylesheet.
   Bone, black, optic white. Empty space is the brand. */

:root {
  --black: #0a0a0a;
  --ink: #000000;
  --bone: #efe4d5;
  --white: #ffffff;
  --cream: #f6f3ec;
  --concrete: #8d8b86;
  --line: #262626;
  --blue: #1e6bff;

  --grotesque: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --serif: "Didot", "Bodoni MT", "Times New Roman", serif;

  --gut: 24px;
  --rule: 1px solid var(--line);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--grotesque);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }

/* Motion: almost none. Hard cuts. */
* { transition: none !important; }

/* ---------- meta type ---------- */

.mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete);
}

.mono--bone { color: var(--bone); }

/* GO 01 · TRACK — wide-tracked thin grotesque wordmark, type only */
.wordmark {
  font-family: var(--grotesque);
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}

/* GO 08 · QUIET — tiny top-left wordmark, rest empty */
.wordmark--quiet { font-size: 11px; letter-spacing: 0.38em; }
.wordmark--splash { font-size: clamp(22px, 5vw, 46px); }

/* GO 09 · BLUE BAR — utility stamp only */
.stamp {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 8px;
}

/* ---------- frame ---------- */

.head {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gut);
  padding: 18px var(--gut);
  background: var(--black);
  border-bottom: var(--rule);
}

.nav { display: flex; gap: 28px; }

.nav a[aria-current="page"] { color: var(--bone); }

main { min-height: 70vh; }

.wrap { padding: 0 var(--gut); }

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 40px var(--gut) 56px;
  border-top: var(--rule);
  margin-top: 120px;
}

/* ---------- page furniture ---------- */

.page-head {
  padding: 96px var(--gut) 56px;
  border-bottom: var(--rule);
}

.page-title {
  font-weight: 300;
  font-size: clamp(28px, 6vw, 64px);
  letter-spacing: -0.01em;
  margin: 20px 0 0;
  line-height: 1.05;
}

.lede {
  max-width: 46ch;
  margin: 24px 0 0;
  color: var(--concrete);
}

/* ---------- house home ---------- */

/* One empty page. Bone ground, NF + type, quiet nav. No footer. */
html.home,
html.home body {
  background: var(--bone);
  color: var(--ink);
  height: 100%;
  overflow: hidden;
}

html.home body { min-height: 100dvh; }

html.home a:hover { color: var(--ink); }

html.home main {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.head--house {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
  border-bottom: 0;
  justify-content: flex-end;
  padding: 32px 40px 0;
}

.nav--house {
  font-family: var(--grotesque);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: var(--ink);
  gap: 40px;
}

.nav--house a {
  color: var(--ink);
  /* tracking adds space after the last letter — pull the item back */
  margin-right: -0.62em;
}

/* 146px at 1440. Floor so the mark still reads on a phone. */
.lockup {
  width: clamp(108px, 10.1388889vw, 146px);
}

.lockup__mark {
  width: 100%;
  height: auto;
  display: block;
}

/* Two words, all caps, tracked to the exact width of the NF. */
.lockup__name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
  font-family: var(--grotesque);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}

.lockup__gap { flex: 0 0 0.55em; }

/* ---------- lines index ---------- */

.lines { border-top: var(--rule); }

.line-row {
  display: grid;
  grid-template-columns: 90px 1fr 120px;
  gap: var(--gut);
  align-items: baseline;
  padding: 34px var(--gut);
  border-bottom: var(--rule);
}

.line-row__name {
  font-weight: 300;
  font-size: clamp(20px, 3.4vw, 34px);
  letter-spacing: -0.01em;
}

.line-row--empty { color: var(--concrete); }
.line-row--empty .line-row__name { color: #3a3a3a; }

/* ---------- shop grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  border-left: var(--rule);
}

.card {
  border-right: var(--rule);
  border-bottom: var(--rule);
  padding: var(--gut);
  display: block;
}

.card__frame {
  aspect-ratio: 4 / 5;
  background: #0e0e0e;
  border: 1px solid #161616;
  position: relative;
  margin-bottom: 16px;
}

.card__frame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 58%;
  transform: translate(-50%, -50%);
  background: #131313;
}

.card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.card--out { opacity: 0.45; }

/* ---------- PDP ---------- */

.pdp {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  border-top: var(--rule);
}

.pdp__shots {
  border-right: var(--rule);
}

.shot {
  aspect-ratio: 4 / 5;
  background: #0e0e0e;
  border-bottom: var(--rule);
  position: relative;
}

.shot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 52%;
  transform: translate(-50%, -50%);
  background: #131313;
}

.shot--rail { background: #121211; }
.shot--rail::after { background: #171716; }

.pdp__panel {
  padding: 40px var(--gut);
  position: sticky;
  top: 57px;
  align-self: start;
}

.pdp__title {
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 14px 0 0;
}

.price { margin: 28px 0 0; font-size: 15px; }

.sizes { display: flex; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }

.size {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
}

.size[aria-pressed="true"] { border-color: var(--bone); }
.size[disabled] { color: #3a3a3a; border-color: #1a1a1a; cursor: default; }

.btn {
  display: inline-block;
  width: 100%;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--bone);
  background: transparent;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.btn:hover { background: var(--bone); color: var(--ink); }
.btn[disabled] { color: #3a3a3a; border-color: #1a1a1a; cursor: default; }
.btn[disabled]:hover { background: transparent; color: #3a3a3a; }

.spec {
  margin: 40px 0 0;
  border-top: var(--rule);
}

.spec dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete);
  padding-top: 16px;
}

.spec dd { margin: 4px 0 16px; }

/* ---------- info ---------- */

.house {
  padding: 0 var(--gut);
  max-width: 52ch;
}

.house p { margin: 0 0 20px; }

.house__line {
  font-weight: 300;
  font-size: clamp(20px, 4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0 0 40px;
}

/* ---------- bag ---------- */

.bag-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 60px;
  gap: var(--gut);
  align-items: baseline;
  padding: 24px var(--gut);
  border-bottom: var(--rule);
}

.bag-total {
  display: flex;
  justify-content: space-between;
  padding: 24px var(--gut);
}

.link-x {
  background: none;
  border: 0;
  padding: 0;
  color: var(--concrete);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

.link-x:hover { color: var(--bone); }

.note {
  color: var(--concrete);
  max-width: 46ch;
  padding: 24px var(--gut) 0;
}

.field {
  display: block;
  width: 100%;
  max-width: 380px;
  margin-top: 12px;
  padding: 14px 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.field::placeholder { color: #3a3a3a; }

/* ---------- small screens ---------- */

@media (max-width: 820px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__shots { border-right: 0; }
  .line-row { grid-template-columns: 64px 1fr; }
  .line-row__status { grid-column: 2; }
  .bag-row { grid-template-columns: 1fr 70px 60px; }
  .bag-row__size { display: none; }
  .nav { gap: 18px; }
  .head--house { padding: 24px 22px 0; }
  .nav--house { gap: 22px; }
}