/* MetalStack — shared stylesheet.
   Same design language as thermstack (noveety product-line sibling): a light
   editorial palette, hairline rules instead of cards, no shadows, no gradients
   and a single green accent carrying the emphasis. Keep the two in step. */

:root {
  --ink: #172b32;
  --muted: #52646b;
  --line: #d9e2e4;
  --paper: #fff;
  --wash: #f3f7f7;
  --green: #087964;
  --blue: #215fa4;
  --orange: #ae521d;
  --max: 1160px;
}

* { box-sizing: border-box; letter-spacing: 0 }
html { scroll-behavior: smooth; scroll-padding-top: 100px }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.7 Inter, Arial, sans-serif;
}

a { color: var(--green); text-underline-offset: 4px }
button, a { -webkit-tap-highlight-color: transparent }
button { font: inherit }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}

h1, h2, h3, h4, p, figure, ul { margin: 0 }
h1, h2, h3 { line-height: 1.18; font-weight: 600 }
h1 { font-size: 48px }
h2 { font-size: 34px }
h3 { font-size: 22px }
p + p { margin-top: 16px }

.wrap { max-width: var(--max); margin: auto; padding: 0 28px }

.skip { position: fixed; top: -100px; left: 12px; background: #fff; padding: 12px; z-index: 100 }
.skip:focus { top: 10px }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  background: #fffffffa;
  border-bottom: 1px solid var(--line);
  z-index: 20;
}
.header-inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}
.brand-mark { display: grid; gap: 3px; transform: skewY(-16deg); width: 25px }
.brand-mark i { display: block; height: 5px; background: var(--green) }
.brand-mark i:nth-child(2) { background: #449dc0 }
.brand-mark i:nth-child(3) { background: #dc9147 }

.nav { display: flex; align-items: center; gap: 32px }
.nav a { font-size: 14px; text-decoration: none; color: var(--muted) }
.nav a[aria-current=page] { color: var(--ink); border-bottom: 2px solid var(--green); padding: 24px 0 }
.nav .contact-link { color: var(--green); font-weight: 600 }

.menu-button { display: none; border: 0; background: transparent; padding: 8px; color: var(--ink) }
.icon { width: 20px; height: 20px; vertical-align: middle; flex: none }

/* ---------- shared type ---------- */

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.lead { font-size: 21px; color: var(--muted); line-height: 1.55; max-width: 830px }
.text-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; text-decoration: none }

/* ---------- cover ---------- */

.cover { padding: 42px 0 0; background: #fff }
.cover .intro { max-width: 910px }
.cover h1 { margin-bottom: 12px }
.cover .lead { max-width: 890px }
.cover-actions { display: flex; gap: 30px; flex-wrap: wrap; margin: 20px 0 12px }
.cover-visual {
  height: 315px;
  position: relative;
  background-image: url('../figs/risc_core_strss_map_3D_353.png'), url('../figs/risc_core_pg_ir_drop_3d_353.png');
  background-size: auto 310px, auto 310px;
  background-repeat: no-repeat;
  background-position: calc(50% - 200px) center, calc(50% + 200px) center;
}
.visual-note { color: var(--muted); font-size: 12px; text-align: center; padding-bottom: 14px }

.summary-strip { border-block: 1px solid var(--line); background: var(--wash) }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr) }
.summary-grid > div { padding: 24px 24px 24px 0 }
.summary-grid strong { display: block; font-size: 17px; margin-bottom: 5px }
.summary-grid p { font-size: 14px; color: var(--muted); max-width: 300px }

/* ---------- bands ---------- */

.band { padding: 70px 0; border-bottom: 1px solid var(--line) }
.band.alt { background: var(--wash) }

.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 36px;
}
.section-heading p { color: var(--muted) }
.section-heading h2 { max-width: 540px }

.capabilities { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 50px }
.capability { border-top: 1px solid var(--line); padding: 24px 0 30px }
.capability .number, .feature-number {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 12px;
}
.capability p { color: var(--muted); margin: 12px 0 18px }

.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px }
.flow article { border-top: 2px solid var(--green); padding-top: 22px }
.flow article:nth-child(2) { border-color: var(--blue) }
.flow article:nth-child(3) { border-color: var(--orange) }
.flow p { font-size: 15px; color: var(--muted); margin-top: 12px }

.inline-list { padding: 0; list-style: none }
.inline-list li { padding: 12px 0; border-bottom: 1px solid var(--line) }

.note { font-size: 13px; color: var(--muted); margin-top: 18px; line-height: 1.6 }

.evidence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 32px 0;
  border-block: 1px solid var(--line);
}
.evidence > div { padding: 24px 20px 24px 0 }
.evidence strong { font-size: 35px; color: var(--green); display: block; line-height: 1.2 }
.evidence span { display: block; font-size: 14px; color: var(--muted); margin-top: 9px }
.evidence .blue { color: var(--blue) }

/* ---------- figures ---------- */

.figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.figure { margin: 26px 0 }
.figure img { width: 100%; height: auto; display: block; background: #fff }
.figure figcaption { font-size: 13px; color: var(--muted); margin-top: 12px }
.image-open { padding: 0; border: 0; background: #fff; display: block; cursor: zoom-in; width: 100% }
.image-open:hover { outline: 1px solid #9fbdc4 }

/* ---------- paper pages ---------- */

.page-intro { padding: 54px 0 40px; border-bottom: 1px solid var(--line) }
.page-intro h1 { margin-bottom: 18px }
.page-intro .lead { max-width: 890px }

.feature-section {
  padding: 48px 0 54px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 24px;
}
.feature-section h2 { font-size: 32px; margin-bottom: 18px }
.feature-section h3 { margin: 28px 0 14px }
.feature-section > p { color: var(--muted) }
.feature-section .intro-copy { font-size: 18px }
.feature-section ul:not(.inline-list) { color: var(--muted); padding-left: 20px; margin: 16px 0 }
.feature-section ul:not(.inline-list) li { margin-bottom: 10px }
.feature-section b, .feature-section strong { color: var(--ink) }

.article-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 25px 0 }
.article-pair p { font-size: 15px; color: var(--muted) }
.article-pair h3 { font-size: 19px; margin-top: 0 }

.paper-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.paper-meta span + span::before { content: "\00b7"; margin-right: 14px; color: var(--line) }
.paper-body { max-width: 880px }
.paper-abstract {
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  background: var(--wash);
  padding: 20px 24px;
  margin: 30px 0 6px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
}
.paper-abstract strong { display: block; color: var(--ink); font-size: 12px; text-transform: uppercase; margin-bottom: 8px }
.paper-abstract b { color: var(--ink) }
.paper-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 0;
  font-size: 14px;
}

/* ---------- tables ---------- */

.table-wrap { overflow: auto; margin: 22px 0; border-block: 1px solid var(--line) }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
caption { text-align: left; font-size: 13px; color: var(--muted); padding: 0 0 12px }
th, td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
th { font-weight: 600; background: var(--wash); font-size: 12px }
tr:last-child td { border-bottom: 0 }

/* Pass / fail verdicts read as words, not chips — the only colour MetalStack
   adds to the thermstack vocabulary. Both clear 4.5:1 on paper and on wash. */
.verdict { font-weight: 600 }
.verdict.pass { color: var(--green) }
.verdict.fail { color: var(--orange) }

.reading-note {
  border-left: 3px solid var(--blue);
  padding: 12px 0 12px 20px;
  margin: 24px 0;
  font-size: 14px;
  color: var(--muted);
}
.reading-note strong, .reading-note b { color: var(--ink) }

/* ---------- contact + footer ---------- */

.contact-band { padding: 55px 0; background: var(--wash) }
.contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px }
.contact-inner p { max-width: 660px; margin-top: 12px; color: var(--muted) }

.button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 13px 22px;
  background: var(--green);
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.button:hover { background: #075b4d }

footer { padding: 28px 0; font-size: 12px; color: var(--muted) }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap }
footer a { color: var(--muted) }

/* ---------- lightbox ---------- */

.lightbox {
  max-width: 96vw;
  max-height: 94vh;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 48px 20px 20px;
  background: #fff;
}
.lightbox::backdrop { background: #172b32c7 }
.lightbox img { display: block; max-width: 88vw; max-height: 76vh; object-fit: contain; margin: auto }
.lightbox p { font-size: 13px; color: var(--muted); max-width: 900px; margin: 12px auto 0 }
.close-button {
  position: absolute;
  right: 12px;
  top: 10px;
  padding: 6px;
  border: 0;
  background: var(--wash);
  border-radius: 4px;
  cursor: pointer;
}

/* ---------- responsive ---------- */

@media (min-width: 1600px) {
  .cover-visual { height: 350px; background-size: auto 345px, auto 345px }
}

/* Four nav items start wrapping well before the phone breakpoint, so the menu
   collapses on its own schedule. top:100% tracks the header's own height,
   which differs above and below 640px. */
@media (max-width: 860px) {
  .menu-button { display: inline-flex }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav.open { display: flex }
  .nav a, .nav a[aria-current=page] { padding: 12px 0; border: 0 }
  .nav a[aria-current=page] { font-weight: 700 }
}

@media (max-width: 900px) {
  .nav { gap: 22px }
  .section-heading { gap: 28px }
  .evidence strong { font-size: 29px }
  .cover-visual { background-position: calc(50% - 175px) center, calc(50% + 175px) center }
  .article-pair { grid-template-columns: 1fr }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px }
  .header-inner { height: 64px; gap: 12px }
  .brand { font-size: 20px }
  .cover { padding-top: 30px }
  h1 { font-size: 36px }
  h2 { font-size: 28px }
  .lead { font-size: 18px }
  .eyebrow { font-size: 11px; margin-bottom: 12px }
  .cover-actions { gap: 15px; font-size: 14px }
  .cover-visual {
    height: 240px;
    background-image: url('../figs/risc_core_strss_map_3D_353.png');
    background-size: auto 235px;
    background-position: center;
  }
  .visual-note { font-size: 10px }
  .summary-grid { grid-template-columns: 1fr }
  .summary-grid > div { padding: 16px 0; border-bottom: 1px solid var(--line) }
  .summary-grid > div:last-child { border: 0 }
  .summary-grid p { max-width: none }
  .band { padding: 44px 0 }
  .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px }
  .capabilities, .flow, .figure-pair { grid-template-columns: 1fr }
  .flow { gap: 28px }
  .evidence { grid-template-columns: 1fr }
  .evidence > div { border-bottom: 1px solid var(--line); padding: 18px 0 }
  .evidence > div:last-child { border: 0 }
  .page-intro { padding: 34px 0 }
  .feature-section { padding: 36px 0 }
  .feature-section h2 { font-size: 28px }
  .contact-inner { display: block }
  .contact-inner .button { margin-top: 24px }
  .table-wrap { font-size: 12px }
  th, td { padding: 12px 8px }
  .lightbox { padding: 44px 10px 12px }
  .lightbox img { max-width: 86vw }
  .lightbox p { font-size: 12px }
  .footer-inner { gap: 14px }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

@media print {
  .site-header, .cover-actions, .contact-band, dialog { display: none !important }
  .wrap { max-width: none; padding: 0 }
  .band, .feature-section { padding: 22px 0 }
  .figure, table { break-inside: avoid }
  .cover-visual { print-color-adjust: exact }
  body { font-size: 11pt }
  h1 { font-size: 28pt }
  h2 { font-size: 21pt }
}