/* Ember Forge — TONGS RACK / ANVIL FACE DESK
   RIGHT hanging blacksmith tongs of graduated jaw sizes as nav
   (not Ink RIGHT chase rollers, not Neutron RIGHT cogs,
   not Loom RIGHT cones, not Orbit RIGHT satellites, not Volt RIGHT reel,
   not Pitlane RIGHT tower, not Amber LEFT strop, not Copper LEFT valves,
   not Cedar LEFT therm, not Pine TOP notches, not Tide TOP stubs,
   not Frost BOTTOM blade, not Petal BOTTOM stems, not Kiln TOP chips) */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Bebas+Neue&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  --slag: #0f0a08;
  --ember: #ea580c;
  --coal: #1c1917;
  --spark: #fbbf24;
  --heat: #dc2626;
  --steel: #a8a29e;
  --ash: #f5f0e8;
  --mute: #78716c;
  --rail: 124px;
  --wrap: min(1080px, calc(100% - 2.2rem));
  --font: "Source Sans 3", system-ui, sans-serif;
  --display: "Bebas Neue", Impact, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  font: 16px/1.55 var(--font);
  color: var(--slag);
  background:
    radial-gradient(720px 400px at 20% 10%, rgba(234,88,12,0.18), transparent 55%),
    radial-gradient(560px 360px at 80% 90%, rgba(220,38,38,0.12), transparent 50%),
    linear-gradient(180deg, #2a1a12 0%, #1a100c 30%, #3d2918 100%);
  color: var(--ash);
  overflow-x: hidden;
  padding-right: var(--rail);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(251,191,36,0.15) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 70%, rgba(234,88,12,0.12) 0 1.5px, transparent 3px),
    radial-gradient(circle at 75% 35%, rgba(251,191,36,0.1) 0 2px, transparent 3px),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(251,191,36,0.03) 32px 33px);
}
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin: 0 0 0.55rem;
  text-wrap: balance;
  color: var(--ash);
}
h1 { font-size: clamp(2.8rem, 6.5vw, 4.8rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
h1 em { font-style: normal; color: var(--ember); }
h1 span { color: var(--spark); }

.back-st {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  z-index: 160;
  padding: 0.42rem 0.7rem;
  font: 700 11px/1 var(--mono);
  background: var(--ember);
  color: #fff;
  border: 0;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.seal {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  z-index: 160;
  width: 66px; height: 66px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  text-decoration: none;
  background:
    radial-gradient(circle at 40% 35%, var(--spark) 0 18%, transparent 19%),
    linear-gradient(160deg, #f97316, var(--heat) 55%, #7c2d12);
  color: #fff;
  border: 2px solid var(--spark);
  font: 700 0.5rem/1.05 var(--mono);
  text-align: center;
  box-shadow: 0 0 20px rgba(234,88,12,0.45), 3px 3px 0 rgba(0,0,0,0.35);
}
.seal b { display: block; font-size: 0.95rem; }

/* ===== NO standard header — RIGHT TONGS RACK ===== */
.tongs {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 150;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(270deg, #1a100c 0%, #0c0806 100%);
  border-left: 3px solid var(--ember);
  box-shadow: -14px 0 36px rgba(0,0,0,0.45);
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
}
.tongs::before {
  /* pegboard holes */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #3f2a1e 1.5px, transparent 2px);
  background-size: 14px 18px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.tongs__cap {
  position: relative;
  z-index: 1;
  margin: 12px 10px 6px;
  padding: 0.65rem 0.3rem;
  text-align: center;
  text-decoration: none;
  color: var(--ash);
  background: rgba(234,88,12,0.2);
  border: 1px solid rgba(251,191,36,0.45);
}
.tongs__cap strong {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  line-height: 0.95;
}
.tongs__cap small {
  display: block;
  margin-top: 0.25rem;
  font: 600 0.48rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.55);
}
.tongs__heat {
  position: relative;
  z-index: 1;
  margin: 0 10px 0.45rem;
  padding: 0.4rem 0.25rem;
  text-align: center;
  font-family: var(--mono);
  border: 1px solid rgba(220,38,38,0.5);
  background: rgba(220,38,38,0.15);
  color: var(--ash);
}
.tongs__heat b {
  display: block;
  font-size: 0.9rem;
  color: var(--spark);
  line-height: 1;
}
.tongs__heat span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
}
.tongs-toggle {
  display: none;
  position: relative;
  z-index: 1;
  margin: 0.35rem auto;
  width: 42px; height: 36px;
  background: transparent;
  border: 1px solid rgba(251,191,36,0.55);
  color: var(--ash);
  cursor: pointer;
  place-items: center;
  gap: 4px;
  flex-direction: column;
  padding: 0;
}
.tongs-toggle i {
  display: block;
  width: 16px; height: 1.5px;
  background: currentColor;
}
.tongs__rack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem 1rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}
/* hanging tongs — V jaws + handle */
.tongs__rack a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0.55rem 0.4rem 0.4rem;
  text-decoration: none;
  font: 700 0.55rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ash);
  background: transparent;
  border: 0;
  transition: transform 0.12s, filter 0.12s;
}
.tongs__rack a::before {
  /* tongs body: two arms forming V + rivet */
  content: "";
  position: absolute;
  inset: 4px 18px 18px;
  background:
    linear-gradient(105deg, transparent 42%, var(--steel) 42% 48%, transparent 48%),
    linear-gradient(-105deg, transparent 42%, #78716c 42% 48%, transparent 48%);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5));
}
.tongs__rack a::after {
  /* peg / rivet */
  content: "";
  position: absolute;
  top: 2px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde68a, #a16207 70%);
  border: 1px solid #78350f;
  box-shadow: 0 2px 0 #000;
  z-index: 2;
}
.tongs__rack a span {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 0.2rem 0.35rem;
  background: rgba(15,10,8,0.75);
  border: 1px solid rgba(234,88,12,0.4);
  text-shadow: 0 1px 2px #000;
}
.tongs__rack a:nth-child(1) { min-height: 52px; }
.tongs__rack a:nth-child(1)::before { inset: 4px 12px 18px; }
.tongs__rack a:nth-child(2) { min-height: 48px; }
.tongs__rack a:nth-child(2)::before {
  background:
    linear-gradient(105deg, transparent 42%, #f97316 42% 48%, transparent 48%),
    linear-gradient(-105deg, transparent 42%, #ea580c 42% 48%, transparent 48%);
}
.tongs__rack a:nth-child(3) { min-height: 46px; }
.tongs__rack a:nth-child(3)::before {
  background:
    linear-gradient(105deg, transparent 42%, #dc2626 42% 48%, transparent 48%),
    linear-gradient(-105deg, transparent 42%, #991b1b 42% 48%, transparent 48%);
}
.tongs__rack a:nth-child(4) { min-height: 42px; }
.tongs__rack a:nth-child(4)::before { inset: 4px 22px 18px; }
.tongs__rack a:nth-child(5)::before {
  background:
    linear-gradient(105deg, transparent 42%, #fbbf24 42% 48%, transparent 48%),
    linear-gradient(-105deg, transparent 42%, #d97706 42% 48%, transparent 48%);
}
.tongs__rack a:nth-child(even) { margin-left: 8px; }
.tongs__rack a:nth-child(odd) { margin-right: 6px; }
.tongs__rack a[aria-current="page"],
.tongs__rack a:hover {
  transform: translateX(-6px);
  filter: brightness(1.15);
}
.tongs__rack a[aria-current="page"] span,
.tongs__rack a:hover span {
  border-color: var(--spark);
  box-shadow: 0 0 8px rgba(251,191,36,0.4);
}

.shell { position: relative; z-index: 1; }
.wrap { width: var(--wrap); margin-inline: auto; }
.ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 1rem 0 0.2rem;
}
.ribbon span {
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.42rem 0.55rem;
  border: 1px dashed rgba(251,191,36,0.35);
  background: rgba(15,10,8,0.55);
  color: rgba(245,240,232,0.7);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.65rem;
}
.eyebrow::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--spark), var(--heat) 70%);
  box-shadow: 0 0 10px rgba(234,88,12,0.6);
}
.lead { font-size: 1.05rem; max-width: 58ch; color: rgba(245,240,232,0.78); }
.muted { color: rgba(245,240,232,0.55); }
.note {
  margin: 0.9rem 0 1.1rem;
  padding: 0.85rem 1rem;
  background: rgba(234,88,12,0.15);
  border-left: 3px solid var(--ember);
  color: var(--ash);
  font-size: 0.95rem;
}
.section { padding: 2.1rem 0 0.4rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.72rem 1.05rem;
  border: 1.5px solid var(--steel);
  background: transparent;
  color: var(--ash);
  font: 700 0.75rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,0.35); }
.btn-ember { background: var(--ember); border-color: #c2410c; color: #fff; }
.btn-spark { background: var(--spark); border-color: #d97706; color: var(--slag); }
.btn-heat { background: var(--heat); border-color: #991b1b; color: #fff; }
.btn-ghost { background: rgba(15,10,8,0.55); }

/* Anvil face desk hero */
.anvil {
  display: grid;
  grid-template-columns: 1.3fr 0.95fr;
  gap: 1.1rem;
  padding: 1.15rem 0 0.4rem;
  align-items: start;
}
.anvil__desk {
  position: relative;
  background:
    linear-gradient(160deg, #2a211c 0%, #1a1410 50%, #0f0a08 100%);
  border: 1.5px solid #57534e;
  padding: 1.4rem 1.3rem 1.25rem;
  overflow: hidden;
  min-height: 360px;
  box-shadow:
    8px 10px 0 rgba(0,0,0,0.35),
    inset 0 0 80px rgba(234,88,12,0.08);
}
.anvil__desk::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(234,88,12,0.2), transparent 45%),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(168,162,158,0.04) 20px 21px);
}
.anvil__desk::after {
  content: "straw · purple · blue";
  position: absolute;
  top: 16px; right: 18px;
  font: 600 0.58rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
}
.anvil__desk > * { position: relative; z-index: 1; }

.meters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin: 1.15rem 0 0.2rem;
}
.meters article {
  border: 1px solid rgba(168,162,158,0.25);
  background: rgba(15,10,8,0.55);
  padding: 0.65rem 0.7rem;
  position: relative;
}
.meters article::before {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.meters article:nth-child(1)::before { background: #fbbf24; color: #fbbf24; }
.meters article:nth-child(2)::before { background: #a855f7; color: #a855f7; }
.meters article:nth-child(3)::before { background: #3b82f6; color: #3b82f6; }
.meters b {
  display: block;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ash);
}
.meters span {
  display: block;
  margin-top: 0.2rem;
  font: 500 0.62rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
}

.billet-stack { display: grid; gap: 0.65rem; }
.billet {
  background: rgba(26,20,16,0.9);
  border: 1.5px solid var(--ember);
  padding: 0.85rem 0.95rem;
  position: relative;
  box-shadow: 4px 4px 0 rgba(234,88,12,0.2);
  background-image: linear-gradient(120deg, rgba(234,88,12,0.12), transparent 40%);
}
.billet::before {
  content: "";
  position: absolute;
  left: 14px; top: 16px;
  width: 18px; height: 28px;
  background:
    linear-gradient(105deg, transparent 40%, var(--steel) 40% 55%, transparent 55%),
    linear-gradient(-105deg, transparent 40%, #78716c 40% 55%, transparent 55%);
}
.billet--hot {
  border-color: var(--spark);
  box-shadow: 0 0 16px rgba(251,191,36,0.25), 4px 4px 0 rgba(234,88,12,0.25);
}
.billet__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin: 0 0 0.35rem 2.4rem;
}
.billet h3 { margin: 0 0 0 2.4rem; font-size: 1.25rem; }
.billet p { margin: 0.2rem 0 0 2.4rem; color: rgba(245,240,232,0.55); font-size: 0.9rem; font-family: var(--font); }
.billet .price {
  margin: 0.45rem 0 0 2.4rem;
  font: 700 1.05rem/1 var(--mono);
  color: var(--spark);
}

.tiers, .split-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-top: 1rem;
}
.split-3 { grid-template-columns: repeat(3, 1fr); }
.tier {
  background: rgba(26,20,16,0.85);
  border: 1px solid rgba(168,162,158,0.2);
  padding: 0.95rem 0.9rem;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
}
.tier .n {
  font: 700 0.7rem/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--ember);
  margin-bottom: 0.45rem;
}
.tier h3 { margin-bottom: 0.25rem; }
.tier p { margin: 0; font-size: 0.9rem; font-family: var(--font); }

.board {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 1rem;
  margin-top: 0.85rem;
}
.tray { display: grid; gap: 0.5rem; }
.tray-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  background: rgba(26,20,16,0.85);
  border: 1px solid rgba(168,162,158,0.18);
}
.tray-row .code {
  font: 700 0.58rem/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--slag);
  background: var(--spark);
  padding: 0.55rem 0.1rem;
  text-align: center;
  border-radius: 2px;
}
.tray-row h3 { margin: 0; font-size: 1.2rem; }
.tray-row p { margin: 0.15rem 0 0; font-size: 0.85rem; color: rgba(245,240,232,0.5); font-family: var(--font); }
.tray-row .price {
  font: 700 0.9rem/1 var(--mono);
  color: var(--spark);
  white-space: nowrap;
}

.panel {
  background: rgba(26,20,16,0.85);
  border: 1px solid rgba(168,162,158,0.2);
  padding: 1rem 1.05rem;
  margin-bottom: 0.7rem;
}
.panel.dark {
  background: var(--slag);
  border-color: var(--ember);
}
.panel.dark .kv span { color: rgba(245,240,232,0.75); }
.panel h3 { margin-bottom: 0.7rem; }
.kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(168,162,158,0.2);
  font-size: 0.92rem;
}
.kv:last-child { border-bottom: 0; }
.kv b {
  font: 700 0.68rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember);
}
.panel.dark .kv b { color: var(--spark); }

.menu-head {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px);
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.9rem;
}
.menu-head input[type="search"] {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--steel);
  background: rgba(15,10,8,0.7);
  font: 500 0.9rem/1.2 var(--font);
  color: var(--ash);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.chip {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--steel);
  background: rgba(15,10,8,0.55);
  font: 700 0.65rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ash);
}
.chip.on { background: var(--ember); color: #fff; border-color: #c2410c; }

.menu-sheet { display: grid; gap: 0.55rem; }
.billet-card {
  display: grid;
  grid-template-columns: 56px 1.2fr 1.4fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  background: rgba(26,20,16,0.85);
  border: 1px solid rgba(168,162,158,0.2);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}
.billet-card .code {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: linear-gradient(160deg, #57534e, #292524);
  color: var(--spark);
  font: 700 0.48rem/1 var(--mono);
  border: 1px solid var(--steel);
  clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
}
.billet-card .cat {
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.2rem;
}
.billet-card h3 { margin: 0.1rem 0 0; font-size: 1.2rem; }
.billet-card .blurb { margin: 0; font-size: 0.88rem; font-family: var(--font); }
.billet-card .price {
  font: 700 1rem/1 var(--mono);
  color: var(--ash);
  white-space: nowrap;
}

.form {
  display: grid;
  gap: 0.7rem;
  background: rgba(26,20,16,0.9);
  border: 1.5px solid var(--steel);
  padding: 1.1rem;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}
.form label {
  display: grid;
  gap: 0.35rem;
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.55);
}
.form input, .form select, .form textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(168,162,158,0.3);
  background: #0f0a08;
  font: 500 0.95rem/1.3 var(--font);
  color: var(--ash);
  text-transform: none;
  letter-spacing: 0;
}
.form textarea { min-height: 110px; resize: vertical; }

.faq details {
  background: rgba(26,20,16,0.85);
  border: 1px solid rgba(168,162,158,0.2);
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
}
.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--ash);
}
.faq p { margin: 0.55rem 0 0; font-family: var(--font); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-top: 1rem;
}
.person {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem;
  background: rgba(26,20,16,0.85);
  border: 1px solid rgba(168,162,158,0.2);
}
.avatar {
  width: 64px; height: 64px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 35% 30%, var(--spark) 0 18%, transparent 19%),
    linear-gradient(160deg, #f97316, var(--heat) 55%, #7c2d12);
  border: 2px solid var(--spark);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 1rem;
}
.g {
  min-height: 140px;
  display: grid;
  place-items: end start;
  padding: 0.85rem;
  font: 700 0.7rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  background:
    linear-gradient(180deg, transparent 35%, rgba(15,10,8,0.9)),
    radial-gradient(ellipse at 40% 30%, rgba(234,88,12,0.55), transparent 45%),
    linear-gradient(135deg, #451a03, var(--slag) 55%, #7c2d12);
  border: 1px solid rgba(234,88,12,0.3);
}
.g:nth-child(2n) {
  background:
    linear-gradient(180deg, transparent 35%, rgba(15,10,8,0.9)),
    radial-gradient(circle at 60% 40%, rgba(251,191,36,0.4), transparent 50%),
    linear-gradient(160deg, #44403c, var(--slag));
}
.g:nth-child(3n) {
  background:
    linear-gradient(180deg, transparent 35%, rgba(15,10,8,0.9)),
    radial-gradient(circle at 50% 25%, rgba(220,38,38,0.5), transparent 42%),
    linear-gradient(120deg, var(--slag), #991b1b);
}

.buyer {
  width: 100%;
  margin-top: 1.3rem;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.buyer th, .buyer td {
  border: 1px solid rgba(168,162,158,0.25);
  padding: 0.75rem 0.9rem;
  text-align: left;
  background: rgba(26,20,16,0.85);
  color: var(--ash);
}
.buyer th {
  font: 700 0.68rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
  background: rgba(234,88,12,0.15);
}

.footer {
  margin-top: 2.4rem;
  padding: 1.6rem 0 1.2rem;
  border-top: 1px solid rgba(168,162,158,0.2);
  background: rgba(0,0,0,0.25);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.2rem;
}
.footer p { margin: 0.35rem 0 0; color: rgba(245,240,232,0.55); font-size: 0.92rem; font-family: var(--font); }
.footer a { text-decoration: underline; text-underline-offset: 2px; }

.toast {
  position: fixed;
  left: calc(50% - var(--rail) / 2);
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px);
  z-index: 200;
  padding: 0.7rem 1rem;
  background: var(--slag);
  color: var(--spark);
  font: 600 0.78rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  border: 1px solid var(--ember);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.45s, transform 0.45s; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .anvil, .board, .footer-grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .billet-card { grid-template-columns: 48px 1fr auto; }
  .billet-card .blurb { display: none; }
  .menu-head { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .tongs__heat { display: none; }
}

@media (max-width: 720px) {
  :root { --rail: 0px; }
  body { padding-right: 0; padding-bottom: 72px; }
  .tongs {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: 72px;
    flex-direction: row;
    align-items: center;
    border-left: 0;
    border-top: 3px solid var(--ember);
    box-shadow: 0 -10px 28px rgba(0,0,0,0.45);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .tongs::before { opacity: 0.25; background-size: 12px 12px; }
  .tongs__cap {
    margin: 0.45rem 0.4rem 0.45rem 0.65rem;
    min-width: 78px;
    padding: 0.45rem 0.35rem;
  }
  .tongs__cap small { display: none; }
  .tongs__rack {
    display: none;
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    flex-direction: column;
    background: #0c0806;
    border-top: 2px solid var(--ember);
    max-height: 60vh;
    padding: 0.55rem;
  }
  .tongs__rack.is-open { display: flex; }
  .tongs__rack a {
    margin: 0 !important;
    min-height: 48px !important;
  }
  .tongs-toggle {
    display: grid;
    margin: 0 0.85rem 0 auto;
    width: 46px; height: 40px;
  }
  .meters, .split-3, .team-grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .anvil__desk::after { display: none; }
  .seal {
    width: 56px; height: 56px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
  }
  .billet-card { grid-template-columns: 44px 1fr; }
  .billet-card .price, .billet-card button { grid-column: 2; }
  .toast { left: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* NAV-FIX: always-visible back + working mobile menu */
.back-st{
  position:fixed!important;
  z-index:9999!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  padding:.45rem .75rem!important;
  background:#111!important;
  color:#f5f5f5!important;
  border:0!important;
  box-shadow:0 4px 14px rgba(0,0,0,.28)!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  writing-mode:horizontal-tb!important;
  clip-path:none!important;
  mix-blend-mode:normal!important;
  right:auto!important;
  bottom:auto!important;
}
.back-st{top:max(10px,env(safe-area-inset-top))!important;left:max(10px,env(safe-area-inset-left))!important;}

/* LAYOUT-FIX: hero composition variant */
@media(min-width:901px){.anvil{grid-template-columns:1.25fr .9fr!important;} .anvil>:first-child{order:0!important;} .anvil>:last-child{order:1!important;}}

@media (max-width:820px){
  [class*="toggle"],.nav-toggle{
    display:inline-flex!important;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;cursor:pointer;
    pointer-events:auto!important;visibility:visible!important;opacity:1!important;
    background:#111!important;color:#fff!important;
    border:1px solid rgba(255,255,255,.35)!important;
    z-index:10002!important;
  }
  [class*="toggle"] i,.nav-toggle i{background:#fff!important;display:block!important;}
  
  .tongs{
    top:0!important;left:0!important;right:0!important;bottom:auto!important;
    width:100%!important;height:auto!important;min-height:58px!important;
    max-height:none!important;flex-direction:row!important;align-items:center!important;
    overflow:visible!important;z-index:9000!important;
    padding-top:env(safe-area-inset-top)!important;
  }
  .tongs [class*="__rack"],.tongs [class*="__shelf"],.tongs [class*="__strand"],.tongs [class*="__frames"],.tongs [class*="__stones"],.tongs [class*="__wheels"],.tongs [class*="__links"],.tongs [class*="__flow"],.tongs [class*="__grid"],.tongs [class*="__route"],[class*="__steps"],[class*="__ports"],[class*="__nav"],[class*="__menu"],[class*="__list"],.tongs [class*="__beads"]{
    display:none!important;
    position:absolute!important;top:100%!important;left:0!important;right:0!important;bottom:auto!important;
    max-height:min(70dvh,520px)!important;overflow:auto!important;
    flex-direction:column!important;gap:.35rem!important;
    padding:.75rem!important;
    background:#141414!important;color:#f5f5f5!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    z-index:10001!important;
  }
  body{padding-left:0!important;padding-right:0!important;padding-top:max(72px,calc(58px + env(safe-area-inset-top)))!important;padding-bottom:0!important;}
  .seal{top:max(78px,calc(env(safe-area-inset-top) + 64px))!important;right:max(10px,env(safe-area-inset-right))!important;left:auto!important;bottom:auto!important;z-index:9001!important;}
  [class*="toggle"]{margin-left:auto!important;position:relative!important;transform:none!important;}

  [class*="__rack"].is-open,[class*="__shelf"].is-open,[class*="__strand"].is-open,[class*="__frames"].is-open,[class*="__stones"].is-open,[class*="__wheels"].is-open,[class*="__links"].is-open,[class*="__flow"].is-open,[class*="__grid"].is-open,[class*="__route"],[class*="__steps"],[class*="__ports"],[class*="__nav"],[class*="__menu"],[class*="__list"].is-open,[class*="__beads"].is-open,.is-open[class*="__"],.topnav__links.is-open,.mast__links.is-open{display:flex!important;}
  .back-st{top:max(10px,env(safe-area-inset-top))!important;left:max(10px,env(safe-area-inset-left))!important;transform:none!important;writing-mode:horizontal-tb!important;}
}