/* ISR site — shared stylesheet.
   Palette, type, and callout treatments follow isr_technical_reference.html so
   the site and the reference read as one document. Additions here are the parts
   the reference never needed: nav, hero, card grids, figure captions. */

:root {
  --bg: #fbfaf7; --ink: #23211d; --muted: #6b675e; --line: #ddd8cd;
  --accent: #8a4b2d; --accent-light: #f3e9e0; --card: #f5f2ea;
  --code-bg: #efece3; --warn-bg: #f6efdc; --warn-border: #c9a24b;
  --find-bg: #e9efe6; --find-border: #5f7d54;
  --mono: "SF Mono", Menlo, Consolas, monospace;
  --sans: Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171613; --ink: #e6e2d8; --muted: #9d988c; --line: #3a372f;
    --accent: #d08a5e; --accent-light: #2a211a; --card: #201e19;
    --code-bg: #24221c; --warn-bg: #2a2515; --warn-border: #a3803a;
    --find-bg: #1d241b; --find-border: #6f8f63;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.62 Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: .7rem 1.4rem;
  display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap;
}
.nav .brand {
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-size: .74rem; color: var(--accent); text-decoration: none;
  margin-right: auto;
}
.nav a { color: var(--muted); text-decoration: none; font-size: .84rem; }
.nav a:hover { color: var(--ink); }
.nav a.here { color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* ---- layout ---- */
.page { max-width: 860px; margin: 0 auto; padding: 3rem 1.4rem 6rem; }
.page.wide { max-width: 1080px; }

header.doc { border-bottom: 3px solid var(--accent); padding-bottom: 1.4rem; margin-bottom: 2.2rem; }
.kicker {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
h1 { font-size: 2.1rem; line-height: 1.15; margin: .4rem 0 .6rem; font-weight: 400; }
h2 {
  font-family: var(--sans); font-size: 1.15rem; letter-spacing: .02em;
  margin: 2.8rem 0 .8rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
h3 { font-family: var(--sans); font-size: .95rem; margin: 1.8rem 0 .5rem; }
p { margin: .65rem 0; }
.lede { font-size: 1.08rem; }
.meta { color: var(--muted); font-size: .92rem; }
a { color: var(--accent); }

/* ---- hero ---- */
.hero { padding: 3.4rem 1.4rem 1rem; max-width: 1080px; margin: 0 auto; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); max-width: 20ch; margin-bottom: 1rem; }
.hero .claim {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem); line-height: 1.5;
  max-width: 46ch; color: var(--ink);
}
.hero .claim em { font-style: italic; color: var(--accent); }

.showcase {
  max-width: 1080px; margin: 2.6rem auto 0; padding: 0 1.4rem;
}
.showcase figure { margin: 0; }
.showcase img { border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
figcaption {
  font-family: var(--sans); font-size: .8rem; color: var(--muted);
  margin-top: .6rem; line-height: 1.5;
}

/* ---- coordinate strip ---- */
.coords {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; margin: 1.4rem 0;
}
.coord { background: var(--bg); padding: .8rem .9rem; }
.coord .k {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); display: block;
}
.coord .v { font-family: var(--sans); font-size: 1.25rem; color: var(--ink); }
.coord .d { font-family: var(--sans); font-size: .74rem; color: var(--muted); display: block; margin-top: .15rem; }

/* ---- callouts (matching the reference) ---- */
.stance {
  background: var(--accent-light); border-left: 4px solid var(--accent);
  padding: 1rem 1.2rem; border-radius: 0 4px 4px 0; margin: 1.4rem 0;
}
.warn {
  background: var(--warn-bg); border-left: 4px solid var(--warn-border);
  padding: .8rem 1.1rem; border-radius: 0 4px 4px 0; margin: 1.4rem 0; font-size: .95rem;
}
.find {
  background: var(--find-bg); border-left: 4px solid var(--find-border);
  padding: .8rem 1.1rem; border-radius: 0 4px 4px 0; margin: 1.4rem 0; font-size: .95rem;
}
.callout-label {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; display: block; margin-bottom: .3rem;
}

/* ---- three-beat argument ---- */
.beats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.6rem; margin: 2rem 0;
}
.beat { border-top: 3px solid var(--accent); padding-top: .9rem; }
.beat h3 { margin: 0 0 .4rem; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; }
.beat p { font-size: .95rem; margin: 0; }

/* ---- study cards ---- */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.6rem; margin: 1.8rem 0;
}
.card {
  border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
  background: var(--card); display: flex; flex-direction: column;
}
.card .thumb { aspect-ratio: 16 / 5; overflow: hidden; background: var(--code-bg); border-bottom: 1px solid var(--line); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb.none {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .74rem; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0 1rem;
}
.card-body { padding: .95rem 1.1rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.card .no { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.card h3 { margin: .25rem 0 .1rem; font-family: Georgia, serif; font-size: 1.05rem; font-weight: 400; }
.card h3 em { font-style: italic; }
.card .artist { font-family: var(--sans); font-size: .78rem; color: var(--muted); }
.card .find-line { font-size: .9rem; margin: .7rem 0 1rem; flex: 1; }
.card .links { font-family: var(--sans); font-size: .8rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.card .links a { text-decoration: none; border-bottom: 1px solid var(--line); }
.card .links a:hover { border-bottom-color: var(--accent); }
.card .links span.off { color: var(--muted); }

.tag {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; padding: .16rem .45rem;
  border-radius: 3px; background: var(--accent-light); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  white-space: nowrap;
}
.tagrow { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }

/* ---- domain filter ---- */
.filters { font-family: var(--sans); display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.filters button {
  font: inherit; font-size: .8rem; padding: .35rem .8rem; cursor: pointer;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
}
.filters button[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ---- tables ---- */
.tablewrap { overflow-x: auto; margin: 1.2rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; font-family: var(--sans); }
th {
  text-align: left; border-bottom: 2px solid var(--ink); padding: .45rem .6rem;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
}
td { border-bottom: 1px solid var(--line); padding: .5rem .6rem; vertical-align: top; }

/* ---- code ---- */
code, pre { font-family: var(--mono); font-size: .82em; }
code { background: var(--code-bg); padding: .1em .35em; border-radius: 3px; overflow-wrap: anywhere; }
pre { background: var(--code-bg); padding: .9rem 1rem; border-radius: 6px; overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; }

/* ---- layer walk (how-to-read) ---- */
.layer { margin: 2.6rem 0; }
.layer-head { display: flex; align-items: baseline; gap: .8rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.layer-num {
  font-family: var(--mono); font-size: 2rem; color: var(--accent);
  line-height: 1; opacity: .5;
}
.layer-head h2 { border: none; padding: 0; margin: 0; }
.layer figure { margin: 1.2rem 0; }
.layer figure img { border: 1px solid var(--line); border-radius: 4px; }

.fieldgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem; margin: 1.2rem 0;
}
.fieldgrid figure { margin: 0; }
.fieldgrid img { border: 1px solid var(--line); border-radius: 3px; }
.fieldgrid figcaption { margin-top: .4rem; font-size: .74rem; }
.fieldgrid .name { font-family: var(--mono); color: var(--ink); }

/* ---- footer ---- */
footer.site {
  border-top: 1px solid var(--line); margin-top: 4rem;
  font-family: var(--sans); font-size: .82rem; color: var(--muted);
}
footer.site .inner { max-width: 1080px; margin: 0 auto; padding: 2rem 1.4rem 3rem; }
footer.site a { color: var(--muted); }

/* ---- next/prev ---- */
.next {
  display: block; border: 1px solid var(--line); border-radius: 5px;
  padding: 1.1rem 1.3rem; margin-top: 2.6rem; text-decoration: none;
  background: var(--card); color: var(--ink);
}
.next:hover { border-color: var(--accent); }
.next .k { font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.next .t { font-size: 1.05rem; margin-top: .25rem; display: block; }
.next .s { font-family: var(--sans); font-size: .84rem; color: var(--muted); display: block; margin-top: .3rem; }

@media print {
  .nav, .filters, .next { display: none; }
  body { background: #fff; color: #000; }
}

/* Parallax Metrology masthead */
.logobar { background:#171613; border-bottom:1px solid #2a2720; }
.logobar .inner { max-width:1080px; margin:0 auto; padding:.55rem 1.4rem; }
.logobar img { height:30px; width:auto; display:block; }