/* ============================================================
   MEN — BUILD (L3) layout vocabulary.
   Loaded after women-build.css + men.css. Reuses palette tokens
   from styles.css (noir) and the blue accent from men.css.
   Adds menswear-native sections: fabric ladder, color theory
   grid, seven-piece blue capsule.
   ============================================================ */

/* Reuse women-build's section header but force everything
   palette-agnostic to the men's blue. women-build.css uses
   var(--gold), and men.css already retones --gold to blue
   under [data-palette="noir"], so most accents Just Work. */

/* ---------- custom Men Build surface: dark twill cloth, no pinstripe ---------- */
body.men-twill-surface {
  isolation: isolate;
}

body.men-twill-surface::before,
body.men-twill-surface::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.men-twill-surface::before {
  background-image:
    repeating-linear-gradient(34deg, rgba(236,244,255,0.018) 0 1px, transparent 1px 7px, rgba(93,139,194,0.014) 7px 8px, transparent 8px 18px),
    repeating-linear-gradient(124deg, transparent 0 5px, rgba(236,244,255,0.014) 5px 6px, transparent 6px 17px),
    radial-gradient(ellipse 820px 460px at 12% 18%, rgba(93,139,194,0.045), transparent 64%),
    radial-gradient(ellipse 900px 620px at 88% 72%, rgba(236,244,255,0.026), transparent 66%);
  background-size:
    42px 42px,
    36px 36px,
    100% 100%,
    100% 100%;
  opacity: 0.68;
  mix-blend-mode: screen;
}

body.men-twill-surface::after {
  background-image:
    radial-gradient(circle at 21% 37%, rgba(236,244,255,0.10) 0 0.45px, transparent 0.8px),
    radial-gradient(circle at 76% 61%, rgba(93,139,194,0.08) 0 0.48px, transparent 0.82px),
    repeating-linear-gradient(34deg, transparent 0 26px, rgba(236,244,255,0.012) 26px 27px, transparent 27px 53px);
  background-size:
    13px 13px,
    19px 19px,
    580px 580px;
  background-position:
    0 0,
    7px 11px,
    -120px 40px;
  opacity: 0.20;
  mix-blend-mode: soft-light;
}

body.men-twill-surface > #root {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  body.men-twill-surface::before { opacity: 0.50; }
  body.men-twill-surface::after { opacity: 0.14; }
}

[data-palette="noir"] .crumb a:hover,
[data-palette="noir"] .crumb .here,
[data-palette="noir"] .l3-head .title .it,
[data-palette="noir"] .b-intro .body p:first-child::first-letter,
[data-palette="noir"] .basics-grid .b .label .num,
[data-palette="noir"] .checklist .row .n,
[data-palette="noir"] .checklist .row:hover .arr,
[data-palette="noir"] .f-row .big,
[data-palette="noir"] .tile .num,
[data-palette="noir"] .bag .num,
[data-palette="noir"] .work-list .it .n,
[data-palette="noir"] .quartet .q .body .num,
[data-palette="noir"] .work-spread .col-left h3 .it,
[data-palette="noir"] .l3-head .num,
[data-palette="noir"] .hero-stats .stat .n .gold,
[data-palette="noir"] .b-intro .standfirst,
[data-palette="noir"] .cross-lanes .n,
[data-palette="noir"] .cross-lanes .arr::after {
  color: var(--gold);
}
[data-palette="noir"] .b-intro .body em { color: var(--accent-soft); }
[data-palette="noir"] .b-intro .standfirst .sf-row { color: var(--ink-dim); }
[data-palette="noir"] .b-intro .standfirst .sf-row span:last-child { color: var(--ink); }

/* ============================================================
   Drier nav variant — replace ticker styling with a noir bar
   so it doesn't inherit the home-page red ticker look.
   ============================================================ */
.mb-nav-bar {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.mb-nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.mb-nav-inner .label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mb-nav-list {
  display: flex; flex-wrap: wrap; gap: 22px;
}
.mb-nav-list a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.mb-nav-list a:hover { color: var(--ink); }
.mb-nav-list a.on { color: var(--ink); border-bottom-color: var(--gold); }
.mb-nav-list a .nm { margin-left: 6px; }
.mb-nav-list a .n { color: var(--gold); }

/* ============================================================
   Wittier hero variant — slightly tighter than women's
   Reuses .w-hero.l3 but tunes the megaword copy block.
   ============================================================ */
[data-palette="noir"] .w-hero.l3 .copy { max-width: 920px; }
[data-palette="noir"] .w-hero.l3 .megaword { font-size: clamp(96px, 15vw, 220px); }
[data-palette="noir"] .w-hero.l3 .lede { max-width: 580px; }

/* ============================================================
   FABRIC LADDER — between Outerwear & Footwear
   Vertical scale of cotton weights, rendered as horizontal bars
   ============================================================ */
.fabric-ladder {
  display: grid;
  grid-template-columns: 110px 1fr 80px;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.fabric-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  cursor: pointer;
  transition: background 0.2s;
}
.fabric-row:hover { background: rgba(127, 179, 213, 0.04); }
.fabric-row .oz {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: var(--gold);
}
.fabric-row .oz small {
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
  font-style: normal;
}
.fabric-row .body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: baseline;
}
.fabric-row .body h5 {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}
.fabric-row .body h5 .it { font-style: italic; }
.fabric-row .body .verdict {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-dim);
  line-height: 1.45;
}
.fabric-row .when {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
}
.fabric-bar {
  height: 4px;
  background: var(--rule);
  position: relative;
  margin: 12px 0 0;
  grid-column: 1 / -1;
}
.fabric-bar .fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--gold);
  opacity: 0.7;
}
@media (max-width: 800px) {
  .fabric-ladder { grid-template-columns: 80px 1fr; }
  .fabric-row .when { grid-column: 1 / -1; text-align: left; padding-top: 8px; }
  .fabric-row .body { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   COLOR THEORY GRID — between Accessories & Wardrobes
   Three columns: navy, charcoal, brown. Each is a vertical
   manifesto card with a ground swatch + rules + pairings.
   ============================================================ */
.color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.color-card {
  background: var(--bg);
  display: flex; flex-direction: column;
  min-height: 520px;
}
.color-card .swatch {
  height: 200px;
  position: relative;
  display: flex; align-items: flex-end; padding: 20px;
  color: #f3ede0;
}
.color-card .swatch .name {
  font-family: var(--f-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.color-card .swatch .name .it { font-style: italic; opacity: 0.85; }
.color-card .swatch .hex {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.color-card .body {
  padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
  flex: 1;
}
.color-card .body .lede {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-dim);
  margin: 0;
}
.color-card .rules {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.color-card .rule-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding: 8px 0;
  align-items: baseline;
}
.color-card .rule-row .mark {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--gold);
  font-weight: 500;
}
.color-card .rule-row .mark.no { color: #a8312a; }
.color-card .rule-row p {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
}
.color-card .pairs {
  margin-top: auto;
  display: flex; gap: 10px; align-items: center;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.color-card .pairs .lbl {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 4px;
}
.color-card .pairs .chip {
  width: 26px; height: 26px;
  border: 1px solid var(--rule-strong);
  position: relative;
}
.color-card .pairs .chip::after {
  content: attr(data-name);
  position: absolute;
  top: 110%; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.color-card .pairs .chip:hover::after { opacity: 1; }
@media (max-width: 900px) {
  .color-grid { grid-template-columns: 1fr; }
  .color-card { min-height: auto; }
  .color-card .swatch { height: 140px; }
}

/* ============================================================
   WEEKEND — alternating two-column 'when in doubt' verdicts
   ============================================================ */
.verdict-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.verdict-list .vd {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: baseline;
  cursor: pointer;
  transition: padding 0.2s;
}
.verdict-list .vd:nth-child(odd) {
  padding-right: 32px;
  border-right: 1px solid var(--rule);
}
.verdict-list .vd:nth-child(even) { padding-left: 32px; }
.verdict-list .vd:hover { padding-left: 8px; }
.verdict-list .vd:nth-child(even):hover { padding-left: 40px; }
.verdict-list .vd .label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.verdict-list .vd h6 {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.verdict-list .vd h6 .it { font-style: italic; }
.verdict-list .vd p {
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}
.verdict-list .vd .verdict {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  margin-top: 8px;
  display: block;
}
@media (max-width: 800px) {
  .verdict-list { grid-template-columns: 1fr; }
  .verdict-list .vd, .verdict-list .vd:nth-child(odd), .verdict-list .vd:nth-child(even) {
    border-right: none; padding: 22px 0;
  }
}

/* ============================================================
   CAPSULE — full Carolina-blue surface, seven pieces
   Override the women-build .capsule styling to use blue ground.
   ============================================================ */
[data-palette="noir"] .capsule.blue {
  background: #2c5a7a;
  border-top-color: rgba(243, 237, 224, 0.16);
  border-bottom-color: rgba(243, 237, 224, 0.16);
  color: #f3ede0;
}
[data-palette="noir"] .capsule.blue .capsule-head {
  border-bottom-color: rgba(243, 237, 224, 0.18);
}
[data-palette="noir"] .capsule.blue .capsule-head .lede-block .eyebrow {
  color: #c8e0ee;
}
[data-palette="noir"] .capsule.blue .capsule-head .lede-block h3 .it {
  color: #f3ede0; font-style: italic; opacity: 0.9;
}
[data-palette="noir"] .capsule.blue .capsule-head .desc {
  color: rgba(243, 237, 224, 0.78);
}
[data-palette="noir"] .capsule.blue .capsule-seven {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: rgba(243, 237, 224, 0.18);
  border: 1px solid rgba(243, 237, 224, 0.18);
}
[data-palette="noir"] .capsule.blue .pc {
  background: #2c5a7a;
  padding: 26px 18px;
  cursor: pointer;
  transition: background 0.25s;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 260px;
}
[data-palette="noir"] .capsule.blue .pc:hover {
  background: #346a8e;
}
[data-palette="noir"] .capsule.blue .pc .roman {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: #c8e0ee;
}
[data-palette="noir"] .capsule.blue .pc h6 {
  font-family: var(--f-display);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
  color: #f3ede0;
  letter-spacing: -0.01em;
}
[data-palette="noir"] .capsule.blue .pc h6 .it { font-style: italic; opacity: 0.85; }
[data-palette="noir"] .capsule.blue .pc p {
  font-family: var(--f-sans);
  font-size: 12px;
  color: rgba(243, 237, 224, 0.7);
  margin: 0;
  line-height: 1.5;
}
[data-palette="noir"] .capsule.blue .pc .tag {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 237, 224, 0.55);
}
@media (max-width: 1100px) {
  [data-palette="noir"] .capsule.blue .capsule-seven { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  [data-palette="noir"] .capsule.blue .capsule-seven { grid-template-columns: 1fr; }
}

/* ============================================================
   CROSS — three men L2 chapters + one women bridge.
   Special highlighted card for the women-lane bridge.
   ============================================================ */
.cross-lanes a.bridge-card {
  background: #5a1410;
  color: #f4ead7;
}
.cross-lanes a.bridge-card .n { color: #d4a14a; }
.cross-lanes a.bridge-card h6 { color: #f4ead7; font-style: italic; }
.cross-lanes a.bridge-card p { color: rgba(244, 234, 215, 0.65); }
.cross-lanes a.bridge-card .arr { color: #f4ead7; }
.cross-lanes a.bridge-card .arr::after { color: #d4a14a; }
.cross-lanes a.bridge-card:hover {
  background: #6f1c17;
}

/* ============================================================
   Tweaks panel — bottom-right floating, simple
   ============================================================ */
.mb-tweaks {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  padding: 18px 20px;
  z-index: 100;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  min-width: 240px;
  display: none;
}
.mb-tweaks.on { display: block; }
.mb-tweaks h5 {
  margin: 0 0 14px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--gold);
}
.mb-tweaks .row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 12px;
}
.mb-tweaks .row label {
  color: var(--ink-dim);
  font-size: 10px;
}
.mb-tweaks .seg {
  display: flex; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.mb-tweaks .seg button {
  background: var(--bg-elev);
  border: none;
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mb-tweaks .seg button.on {
  background: var(--gold);
  color: #0a0a0a;
}
.mb-tweaks .close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  color: var(--ink-mute);
  font-size: 16px;
  cursor: pointer;
}
.mb-tweaks .close:hover { color: var(--ink); }

/* alt blue palettes */
[data-palette="noir"][data-blue="navy"] {
  --gold: #6b88b8;
  --accent: #6b88b8;
  --accent-soft: #4f6c9c;
}
[data-palette="noir"][data-blue="petrol"] {
  --gold: #4a9aa8;
  --accent: #4a9aa8;
  --accent-soft: #3a7d8a;
}
[data-palette="noir"][data-blue="navy"] .capsule.blue { background: #2a3d5e; }
[data-palette="noir"][data-blue="navy"] .capsule.blue .pc { background: #2a3d5e; }
[data-palette="noir"][data-blue="navy"] .capsule.blue .pc:hover { background: #36507a; }
[data-palette="noir"][data-blue="petrol"] .capsule.blue { background: #1f5660; }
[data-palette="noir"][data-blue="petrol"] .capsule.blue .pc { background: #1f5660; }
[data-palette="noir"][data-blue="petrol"] .capsule.blue .pc:hover { background: #2a6f7a; }

/* density */
[data-palette="noir"][data-density="loose"] .l3-sec { padding: clamp(80px, 9vw, 140px) 0; }
[data-palette="noir"][data-density="tight"] .l3-sec { padding: clamp(40px, 4vw, 64px) 0; }