/* =========================================================================
   Daniele Fanelli — Astrolabe · v3 (hybrid: sky + walnut)

   The page is the cold midnight sky, with a faint star field and a
   brass-glow horizon. The cards (TEMET, comCensus, ESM, plate, cabinet)
   are the walnut instruments resting on a stone pier under it. Brass is
   the metal that holds them together. An observatory at altitude — the
   metaphor the astrolabe was always asking for.

   Type system unchanged from v2: Marcellus for display (Roman-classical,
   the inscription on the cornice), Inter for body (screen-tuned, the page
   you actually read), JetBrains Mono for code & instrument readouts.
   Marcellus has no italic; we use Marcellus SC for emphasis inside display
   headings (see .section-title em &c. below).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Marcellus+SC&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ============================================================
     HYBRID PALETTE — observatory at altitude.
     The page is the cold midnight sky. The cards are the walnut
     instruments resting on a stone pier under it. Brass is the
     metal that holds them together.
     ============================================================ */

  /* The page (the night) */
  --sky:           #08111f;          /* deep base — midnight, faintly warm */
  --sky-2:         #0c1828;          /* one step up — sky shadow */

  /* The cards (the wood) — unchanged from the original walnut design,
     reserved for surfaces that must read as physical objects. */
  --walnut:        #1a1612;
  --walnut-2:      #221d18;
  --walnut-3:      #2d2620;

  /* Type — primary works against either surface; -soft and -faint are
     tuned for the sky background (cool); -warm and -warm-faint are
     used INSIDE walnut cards, where text wants to read as ink on wood. */
  --bone:          #ecebe3;          /* primary type and figure */
  --bone-soft:     #b9bcb6;          /* secondary type, on sky */
  --bone-faint:    #5e6573;          /* tertiary on sky, faded into the dusk */
  --bone-warm:     #c9bfa9;          /* secondary type, on walnut */
  --bone-warm-faint: #6b6354;        /* tertiary on walnut */

  /* Brass — the universal accent, equally at home on sky and on wood */
  --brass:         #c9a961;
  --brass-deep:    #a0823f;
  --brass-glow:    #e8cf90;          /* a touch warmer to glow harder against blue */
  --rule-brass:    rgba(201,169,97,.42);
  --rule-bone:     rgba(236,235,227,.10);
  --vermilion:     #b8523a;          /* still used very sparingly */

  /* Stars — a faint silver-blue for the very-far ones, brass-tinted for
     the closer/brighter ones. Used in the body's fixed star-field. */
  --star-far:      rgba(180,200,230,.6);
  --star-near:     rgba(232,207,144,.85);

  /* Typography — Option A type system: Marcellus (Roman classical) for
     display, Inter (screen-tuned sans) for body, JetBrains Mono for code &
     instrument readouts. Marcellus has no italic; we use Marcellus SC for
     emphasis inside display headings (see .section-title em &c. below). */
  --f-display:     'Marcellus', 'Trajan Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  --f-display-sc:  'Marcellus SC', 'Marcellus', serif;
  --f-body:        'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  --f-mono:        'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* Proportions — golden ratio derived */
  --phi: 1.618;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max:    1320px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

html {
  background: var(--sky);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--bone);
  background: var(--sky);
  /* The page atmosphere: a faint brass horizon at the top, a cool wash
     bottom-right, and a star field. The stars are FIXED — they don't
     scroll, the way real stars don't move when you walk around. They are
     deliberately so faint that you almost don't notice them. */
  background-image:
    radial-gradient(ellipse at 50% 0%,    rgba(232,207,144,.05) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(80,110,160,.06)  0%, transparent 55%),
    /* near (brighter, brass-tinted) stars */
    radial-gradient(1px 1px at 12% 18%,  var(--star-near) 50%, transparent 100%),
    radial-gradient(1px 1px at 78% 8%,   var(--star-near) 50%, transparent 100%),
    radial-gradient(1px 1px at 33% 62%,  var(--star-near) 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 42%,  var(--star-near) 50%, transparent 100%),
    radial-gradient(1px 1px at 56% 88%,  var(--star-near) 50%, transparent 100%),
    /* far (cooler, sparser) stars */
    radial-gradient(0.6px 0.6px at 22% 42%, var(--star-far) 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 67% 28%, var(--star-far) 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 9% 72%,  var(--star-far) 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 92% 65%, var(--star-far) 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 48% 18%, var(--star-far) 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 71% 78%, var(--star-far) 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 28% 88%, var(--star-far) 50%, transparent 100%),
    radial-gradient(0.6px 0.6px at 4% 30%,  var(--star-far) 50%, transparent 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "ss01", "cv11";
}

::selection { background: var(--brass); color: var(--sky); }

a { transition: color .25s ease; }
a:hover { color: var(--brass-glow); }

/* =========================================================================
   THE INSTRUMENT BAR — fixed top header
   ========================================================================= */
.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(8,17,31,.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--rule-brass);
  z-index: 100;
  display: flex;
  align-items: center;
}
.bar-inner {
  width: 100%;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}

.bar-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--bone);
  white-space: nowrap;
}
.bar-brand:hover { color: var(--bone); }
.bar-brand .mark {
  width: 28px; height: 28px;
  color: var(--brass);
  flex: none;
}

.bar-nav {
  display: flex;
  justify-content: center;
  gap: 2.25rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-soft);
}
.bar-nav a {
  position: relative;
  padding: 0.4rem 0;
}
.bar-nav a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: -2px;
  height: 1px;
  background: var(--brass);
  transition: left .35s ease, right .35s ease;
}
.bar-nav a:hover { color: var(--bone); }
.bar-nav a:hover::after { left: 0; right: 0; }
.bar-nav a.is-active { color: var(--brass-glow); }
.bar-nav a.is-active::after { left: 0; right: 0; background: var(--brass-glow); }

/* The instrument readout in the bar */
.bar-readout {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--bone-faint);
  text-align: right;
  line-height: 1.5;
  white-space: nowrap;
}
.bar-readout .live { color: var(--brass); }

/* Mobile menu button */
.bar-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-brass);
  border-radius: 2px;
  color: var(--bone);
}
.bar-toggle svg { width: 18px; height: 18px; }

/* =========================================================================
   PAGE CONTAINER
   ========================================================================= */
.page {
  padding-top: 64px;
}

.section {
  position: relative;
  padding: clamp(4rem, 9vw, 8rem) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  scroll-margin-top: 80px;
}

/* Section labels — small instrument readings */
.section-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.section-label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--brass);
}
.section-label .ord { color: var(--bone-faint); }

/* =========================================================================
   HERO — astrolabe rete behind the title
   ========================================================================= */
.hero {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  overflow: hidden;
}

.hero-rete {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(560px, 75vw, 980px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.55;
  animation: rotate-rete 240s linear infinite;
  z-index: 0;
}
.hero-rete svg {
  width: 100%; height: 100%;
  color: var(--brass);
}
@keyframes rotate-rete {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rete { animation: none; }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.hero-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--brass);
}

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 7.5vw, 6.5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
  margin: 0 0 1.5rem;
  color: var(--bone);
}
.hero-title em {
  /* The hero italic deliberately uses the body font (Inter) — that gives
     us a real italic against Marcellus's upright. */
  font-style: italic;
  font-family: var(--f-body);
  font-weight: 300;
  color: var(--brass-glow);
}

.hero-subtitle {
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--bone-soft);
  max-width: 38em;
  margin: 0 auto 3.5rem;
}

/* The four-quadrant practice indicator below the hero title */
.hero-quadrants {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--rule-brass);
  border-bottom: 1px solid var(--rule-brass);
}
.hero-quadrant {
  padding: 1.25rem 1rem;
  text-align: center;
  position: relative;
  border-right: 1px solid var(--rule-brass);
  transition: background .35s ease;
}
.hero-quadrant:last-child { border-right: none; }
.hero-quadrant:hover { background: rgba(201,169,97,.06); }
.hero-quadrant .ord {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--bone-faint);
  margin-bottom: 0.5rem;
}
.hero-quadrant .name {
  font-family: var(--f-display-sc);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--bone);
}
.hero-quadrant:hover .name { color: var(--brass-glow); }

/* Compass at bottom */
.hero-compass {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--bone-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hero-compass-line {
  width: 1px;
  height: 36px;
  background: var(--rule-brass);
  position: relative;
  overflow: hidden;
}
.hero-compass-line::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 50%;
  background: var(--brass);
  animation: descend 2.4s ease-in-out infinite;
}
@keyframes descend {
  0%, 100% { transform: translateY(-100%); }
  50%      { transform: translateY(200%); }
}

/* =========================================================================
   CHAPTER HEADERS — between major sections
   ========================================================================= */
.chapter-divider {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.chapter-divider .line {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-brass), var(--rule-brass));
}
.chapter-divider .line.right {
  background: linear-gradient(to left, transparent, var(--rule-brass), var(--rule-brass));
}
.chapter-divider .ornament {
  width: 32px;
  height: 32px;
  color: var(--brass);
  opacity: 0.7;
}

/* =========================================================================
   CONTENT SECTIONS
   ========================================================================= */
.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.section-title {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--bone);
  margin: 0 0 2rem;
  max-width: 14ch;
}
.section-title em {
  /* Marcellus has no italic — we use Marcellus SC (small caps) tinted in
     brass-glow, which is the historically authentic "Roman emphasis" move
     and looks deliberate rather than missing. */
  font-family: var(--f-display-sc);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--brass-glow);
}

.section-label-center {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.section-label-center::before {
  margin-right: 1rem;
}
.section-label-center::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--brass);
  margin-left: 1rem;
}

.section-title-center {
  text-align: center;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.section-lead {
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--bone);
  margin-bottom: 1.5rem;
  max-width: 32em;
}

.prose {
  font-family: var(--f-body);
  font-size: 1.03rem;
  line-height: 1.62;
  color: var(--bone-soft);
}
.prose p { margin: 0 0 1.1em; max-width: 36em; }
.prose strong { color: var(--bone); font-weight: 500; }
.prose em { font-style: italic; color: var(--bone); }
.prose a {
  color: var(--bone);
  border-bottom: 1px solid var(--rule-brass);
  transition: color .2s, border-color .2s;
}
.prose a:hover {
  color: var(--brass-glow);
  border-bottom-color: var(--brass-glow);
}

/* =========================================================================
   RESEARCH — figure plates and a publications register
   ========================================================================= */
.plates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.plate {
  position: relative;
  background: var(--walnut-2);
  border: 1px solid var(--rule-brass);
  padding: 1rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: border-color .3s, transform .4s cubic-bezier(.22,.8,.36,1);
  /* The "lit from above" detail — a 1-pixel warm highlight at the top
     edge plus a faint outer sky-shadow, so the plate reads as an object
     resting on the night-sky page. */
  box-shadow:
    inset 0 1px 0 rgba(232,207,144,.08),
    0 0 0 1px rgba(8,17,31,.4);
}
.plate:hover {
  border-color: var(--brass);
  transform: translateY(-3px);
}
.plate-img {
  background: var(--bone);
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  overflow: hidden;
  position: relative;
}
.plate-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.plate-cap {
  /* Sits on .plate (walnut surface), so uses the warm tertiary palette. */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-warm-faint);
}
.plate-cap .name {
  font-family: var(--f-display-sc);
  font-style: normal;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--bone);
}
.plate-cap .ord { color: var(--brass); }

/* Publications register */
.register {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule-brass);
  padding-top: 1.25rem;
}
.register-head {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1rem;
}
.register-list { list-style: none; margin: 0; padding: 0; }
.register-list li {
  display: grid;
  grid-template-columns: 70px 1fr 50px;
  gap: 1.25rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-bone);
  align-items: baseline;
}
.register-list li:last-child { border-bottom: none; }
.register-list .src {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--bone-faint);
  text-transform: uppercase;
}
.register-list .ttl {
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--bone);
  line-height: 1.45;
}
.register-list .ttl a:hover { color: var(--brass-glow); }
.register-list .yr {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--brass);
  text-align: right;
}

/* =========================================================================
   COMPANY — product cabinet
   ========================================================================= */
.cabinet {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cabinet-card {
  position: relative;
  border: 1px solid var(--rule-brass);
  background: linear-gradient(180deg, var(--walnut-2) 0%, var(--walnut) 100%);
  padding: 1.75rem 1.85rem;
  transition: border-color .3s, transform .4s cubic-bezier(.22,.8,.36,1);
  /* "Wooden object on cold stone" — see .temet-card */
  box-shadow:
    inset 0 1px 0 rgba(232,207,144,.08),
    0 0 0 1px rgba(8,17,31,.4);
}
.cabinet-card:hover {
  border-color: var(--brass);
  transform: translateY(-2px);
}
.cabinet-card::before {
  /* a small brass corner ornament */
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 18px; height: 18px;
  border-top: 1px solid var(--brass);
  border-right: 1px solid var(--brass);
}
.cabinet-card::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -1px;
  width: 18px; height: 18px;
  border-bottom: 1px solid var(--brass);
  border-left: 1px solid var(--brass);
}
.cabinet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}
.cabinet-name {
  font-family: var(--f-display);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  color: var(--bone);
  letter-spacing: 0.005em;
}
.cabinet-tag {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--rule-brass);
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}
.cabinet-desc {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bone-warm);
  max-width: 38em;
  margin-bottom: 1rem;
}
.cabinet-link {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-warm-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cabinet-card:hover .cabinet-link { color: var(--brass-glow); }

.partners {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-bone);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.partners .label { color: var(--brass); }

/* =========================================================================
   TEMET CARD — homepage Research section, right column
   ========================================================================= */
.temet-card {
  position: relative;
  border: 1px solid var(--rule-brass);
  background: linear-gradient(180deg, var(--walnut-2) 0%, var(--walnut) 100%);
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  align-self: start;
  /* "Wooden object resting on cold stone" — faint warm halo at the top
     edge (light catching the polished wood) plus a one-pixel sky ring
     just outside the brass border so the card asserts itself against
     the night. No drop shadow needed; this is sharper and quieter. */
  box-shadow:
    inset 0 1px 0 rgba(232,207,144,.08),
    0 0 0 1px rgba(8,17,31,.4);
}
.temet-card::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 22px; height: 22px;
  border-top: 1px solid var(--brass);
  border-right: 1px solid var(--brass);
}
.temet-card::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -1px;
  width: 22px; height: 22px;
  border-bottom: 1px solid var(--brass);
  border-left: 1px solid var(--brass);
}

.temet-logo-link {
  display: block;
  margin-bottom: 1.25rem;
}
.temet-logo {
  width: 400px;
  /* height: 200px; */
  display: block;
  margin: 0 auto;
  transition: transform .8s cubic-bezier(.22,.8,.36,1);
}
.temet-logo-link:hover .temet-logo {
  transform: rotate(15deg);
}

.temet-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-warm-faint);
  margin: 0 0 0.5rem;
}

.temet-name {
  font-family: var(--f-display);
  font-size: 1.55rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--bone);
  margin: 0 0 1.25rem;
  max-width: 18em;
}

.temet-prose {
  font-family: var(--f-body);
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--bone-warm);
  margin: 0 0 1.75rem;
  max-width: 32em;
}

.temet-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--rule-brass);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
}
.temet-cta:hover, .temet-cta:focus-visible {
  border-color: var(--brass);
  background: rgba(201,169,97,.08);
  color: var(--brass-glow);
}
.temet-cta .arrow {
  display: inline-block;
  transition: transform .25s;
}
.temet-cta:hover .arrow {
  transform: translateX(4px);
}
.temet-cta .temet-url {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--brass);
  font-weight: 400;
}

/* =========================================================================
   COMCENSUS CARD — homepage Company section, right column
   Mirrors the TEMET card but with the vermilion accent
   ========================================================================= */
.comcensus-card {
  position: relative;
  border: 1px solid var(--rule-brass);
  background: linear-gradient(180deg, var(--walnut-2) 0%, var(--walnut) 100%);
  padding: 2.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  align-self: start;
  /* "Wooden object on cold stone" — see .temet-card */
  box-shadow:
    inset 0 1px 0 rgba(232,207,144,.08),
    0 0 0 1px rgba(8,17,31,.4);
}
.comcensus-card::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 22px; height: 22px;
  border-top: 1px solid var(--vermilion);
  border-right: 1px solid var(--vermilion);
}
.comcensus-card::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -1px;
  width: 22px; height: 22px;
  border-bottom: 1px solid var(--vermilion);
  border-left: 1px solid var(--vermilion);
}

.comcensus-logo-link {
  display: block;
  margin-bottom: 1.25rem;
}
.comcensus-logo {
  width: 400px;
  /* height: 200px; */
  display: block;
  margin: 0 auto;
  transition: transform .8s cubic-bezier(.22,.8,.36,1);
}
.comcensus-logo-link:hover .comcensus-logo {
  transform: scale(1.04);
}

.comcensus-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-warm-faint);
  margin: 0 0 0.5rem;
}

.comcensus-name {
  font-family: var(--f-display-sc);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.18;
  color: var(--bone);
  margin: 0 0 1.25rem;
  max-width: 18em;
}

.comcensus-prose {
  font-family: var(--f-body);
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--bone-warm);
  margin: 0 0 1.75rem;
  max-width: 32em;
}

.comcensus-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--rule-brass);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
}
.comcensus-cta:hover, .comcensus-cta:focus-visible {
  border-color: var(--vermilion);
  background: rgba(184,82,58,.08);
  color: var(--bone);
}
.comcensus-cta .arrow {
  display: inline-block;
  transition: transform .25s;
}
.comcensus-cta:hover .arrow {
  transform: translateX(4px);
}
.comcensus-cta .comcensus-url {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--vermilion);
  font-weight: 400;
}

/* Side-by-side text + logo layout for the Company sub-page */
.comcensus-feature {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: 0.5rem;
}
.comcensus-feature-text {
  min-width: 0;
}
.comcensus-feature-text p {
  margin: 0 0 1.1em;
}
.comcensus-feature-text p:last-child { margin-bottom: 0; }
.comcensus-feature-logo {
  display: block;
  flex: none;
  width: 220px;
  height: 220px;
  transition: transform .8s cubic-bezier(.22,.8,.36,1);
}
.comcensus-feature-logo:hover { transform: scale(1.04); }
.comcensus-feature-logo img {
  width: 100%; height: 100%;
}
@media (max-width: 720px) {
  .comcensus-feature {
    grid-template-columns: 1fr;
  }
  .comcensus-feature-logo {
    width: 180px; height: 180px;
    margin: 0 auto;
    order: -1;
  }
}

/* =========================================================================
   STUDIO — vertically stacked discipline blocks
   Each block mirrors the Research/Company two-column rhythm: prose on the
   left, a visual (card or photo grid) on the right.
   ========================================================================= */
.studio-section {
  /* Inherits the sky background from the page — photographs live in their
     own walnut .frame backgrounds, like gallery prints on stone. */
  background: transparent;
  position: relative;
}
.studio-section::before {
  /* hairline ornament divider above the section */
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-brass) 30%, var(--rule-brass) 70%, transparent);
}

/* The stack of discipline blocks. */
.studio-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5rem);
  margin-top: 2.5rem;
}

/* A single discipline block — uses the same two-column grid as .section-grid.
   The block itself sits on a faint top rule so the divisions read clearly. */
.studio-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule-bone);
}
.studio-block:first-child {
  border-top: none;
  padding-top: 0;
}

/* Eyebrow for each block: a small ordinal in mono, like the section-label
   but at sub-section scale. */
.studio-block-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1rem;
}
.studio-block-eyebrow .ord {
  color: var(--bone-faint);
}

/* The block's title — smaller than .section-title so it nests cleanly. */
.studio-block-title {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.2vw, 2.55rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--bone);
  margin: 0 0 1.25rem;
  max-width: 14ch;
}
.studio-block-title em {
  /* Marcellus has no italic — we use Marcellus SC (small caps) tinted in
     brass-glow, which is the historically authentic "Roman emphasis" move
     and looks deliberate rather than missing. */
  font-family: var(--f-display-sc);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--brass-glow);
}

/* Subsection titles use Marcellus too, so emphasis inside them needs the
   same Marcellus-SC fallback. Used e.g. for journal names: "comCensus in
   <em>Nature</em>." */
.subsection-title em {
  font-family: var(--f-display-sc);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--brass-glow);
}

/* The right-hand visual column. Holds either an .esm-card or a
   .studio-photo-grid. Sticks to the top of the row. */
.studio-block-visual {
  align-self: start;
}

/* Reusable image frame — used inside the studio-photo-grid (and ready for
   any other gallery work). */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--walnut-2);
  display: block;
}
.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22,.8,.36,1), filter .4s;
  filter: brightness(0.92);
}
.frame:hover img { transform: scale(1.04); filter: brightness(1.05); }
.frame::after {
  /* thin brass border on hover */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color .3s;
  pointer-events: none;
}
.frame:hover::after { border-color: var(--brass); }

/* The caption overlay that fades in on hover — small mono label with a
   brass left-border, sitting in the lower-left of the frame. */
.frame-cap {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(8,17,31,.78);
  backdrop-filter: blur(4px);
  padding: 0.3rem 0.55rem;
  border-left: 1px solid var(--brass);
  opacity: 0;
  transition: opacity .3s, transform .3s;
  transform: translateY(4px);
}
.frame:hover .frame-cap { opacity: 1; transform: translateY(0); }


/* The right-column photo arrangement: one wide hero on top, two square
   thumbnails beneath. Compact enough to balance the prose on the left. */
.studio-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 220px 160px;
  gap: 0.85rem;
}
.studio-photo-grid .frame-hero {
  grid-column: 1 / 3;
  grid-row: 1;
}
.studio-photo-grid .frame-thumb {
  grid-row: 2;
}

/* The Edinburgh Society of Musicians card. A close cousin of .temet-card
   and .comcensus-card — same brass corner-marks and warm walnut gradient,
   but the inner layout is set as a small "engraved card" rather than a
   logo + cta. */
.esm-card {
  position: relative;
  border: 1px solid var(--rule-brass);
  background: linear-gradient(180deg, var(--walnut-2) 0%, var(--walnut) 100%);
  padding: 2rem 1.85rem 1.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  align-self: start;
  /* "Wooden object on cold stone" — see .temet-card */
  box-shadow:
    inset 0 1px 0 rgba(232,207,144,.08),
    0 0 0 1px rgba(8,17,31,.4);
}
.esm-card::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 22px; height: 22px;
  border-top: 1px solid var(--brass);
  border-right: 1px solid var(--brass);
}
.esm-card::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -1px;
  width: 22px; height: 22px;
  border-bottom: 1px solid var(--brass);
  border-left: 1px solid var(--brass);
}

.esm-card-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-warm-faint);
  margin: 0 0 0.85rem;
}

.esm-card-name {
  font-family: var(--f-display-sc);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.18;
  color: var(--bone);
  margin: 0 0 0.4rem;
  max-width: 14em;
}

.esm-card-since {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--brass);
  margin: 0 0 1.4rem;
}

.esm-card-rule {
  width: 38px;
  height: 1px;
  background: var(--rule-brass);
  margin: 0 0 1.4rem;
}

.esm-card-prose {
  font-family: var(--f-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bone-warm);
  margin: 0 0 1.6rem;
  max-width: 30em;
}

.esm-card-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--rule-brass);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
}
.esm-card-cta:hover, .esm-card-cta:focus-visible {
  border-color: var(--brass);
  background: rgba(201,169,97,.08);
  color: var(--brass-glow);
}
.esm-card-cta .arrow {
  display: inline-block;
  transition: transform .25s;
}
.esm-card-cta:hover .arrow {
  transform: translateX(4px);
}
.esm-card-cta .esm-card-url {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--brass);
  font-weight: 400;
}

/* =========================================================================
   DISPATCHES — recent news / blog
   ========================================================================= */
.dispatches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 880px;
  margin: 0 auto;
}
.dispatch {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule-bone);
}
.dispatch:first-child { padding-top: 0; }
.dispatch-date {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--brass);
  padding-top: 0.3rem;
}
.dispatch-body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bone-soft);
}
.dispatch-body strong { color: var(--bone); font-weight: 500; }
.dispatch-body em { font-style: italic; color: var(--bone); }
.dispatch-body a {
  color: var(--bone);
  border-bottom: 1px solid var(--rule-brass);
}
.dispatch-body a:hover { color: var(--brass-glow); border-bottom-color: var(--brass-glow); }

.dispatch-foot {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.dispatch-foot a { color: var(--brass); border-bottom: 1px solid var(--brass); padding-bottom: 2px; }
.dispatch-foot a:hover { color: var(--brass-glow); border-bottom-color: var(--brass-glow); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.colophon {
  margin-top: 2rem;
  padding: 4rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule-brass);
  background: var(--walnut-2);
}
.colophon-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--bone-warm-faint);
  line-height: 1.7;
}
.colophon h4 {
  font-family: var(--f-display-sc);
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--brass);
  margin: 0 0 0.85rem;
}
.colophon a { color: var(--bone-warm); }
.colophon a:hover { color: var(--brass-glow); }
.colophon .credit {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-bone);
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-warm-faint);
  grid-column: 1 / -1;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 880px) {
  .bar-inner { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .bar-nav {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--sky);
    border-bottom: 1px solid var(--rule-brass);
    flex-direction: column;
    gap: 0;
    padding: 0;
    transform: translateY(-110%);
    transition: transform .3s ease, visibility .3s;
    z-index: 99;
    visibility: hidden;
  }
  .bar-nav.is-open { transform: translateY(0); visibility: visible; }
  .bar-nav a {
    padding: 1rem var(--gutter);
    border-bottom: 1px solid var(--rule-bone);
    text-align: center;
  }
  .bar-readout { display: none; }
  .bar-toggle { display: inline-flex; }

  .section-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .plates { grid-template-columns: 1fr 1fr; }

  .hero-quadrants {
    grid-template-columns: 1fr 1fr;
  }
  .hero-quadrant {
    border-bottom: 1px solid var(--rule-brass);
  }
  .hero-quadrant:nth-child(2) { border-right: none; }
  .hero-quadrant:nth-child(3),
  .hero-quadrant:nth-child(4) { border-bottom: none; }

  .studio-block {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 2rem;
  }
  .studio-photo-grid {
    grid-template-rows: 200px 140px;
  }

  .dispatch { grid-template-columns: 1fr; gap: 0.5rem; }
  .dispatch-date { padding-top: 0; }

  .colophon-inner { grid-template-columns: 1fr; gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================================
   SUB-PAGE UTILITIES — used by /about, /research, /studio, /blog, /contact
   ========================================================================= */

/* Page hero — a smaller, calmer hero used at the top of every sub-page */
.page-hero {
  position: relative;
  padding: clamp(5rem, 9vw, 8rem) var(--gutter) clamp(3rem, 5vw, 5rem);
  max-width: var(--max);
  margin: 0 auto;
  border-bottom: 1px solid var(--rule-brass);
  overflow: hidden;
}
.page-hero-rete {
  position: absolute;
  top: 50%; right: -180px;
  transform: translateY(-50%);
  width: 540px;
  height: 540px;
  pointer-events: none;
  opacity: 0.3;
  color: var(--brass);
  animation: rotate-rete 360s linear infinite;
}
.page-hero-rete svg { width: 100%; height: 100%; }
.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
}
.page-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.page-eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--brass);
}
.page-eyebrow .ord { color: var(--bone-faint); }

.page-title {
  font-family: var(--f-display);
  font-size: clamp(2.7rem, 5.7vw, 4.8rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--bone);
  margin: 0 0 1.5rem;
}
.page-title em {
  /* Marcellus has no italic — we use Marcellus SC (small caps) tinted in
     brass-glow, which is the historically authentic "Roman emphasis" move
     and looks deliberate rather than missing. */
  font-family: var(--f-display-sc);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--brass-glow);
}

.page-lede {
  font-family: var(--f-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--bone-soft);
  max-width: 38em;
}

/* Two-column reading layout: a side-rail on the left for navigation/metadata */
.reading {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 5rem) var(--gutter);
}

.reading-rail {
  position: sticky;
  top: 96px;
  align-self: start;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: var(--bone-faint);
}
.reading-rail .label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--brass);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.reading-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.reading-rail li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--rule-bone);
}
.reading-rail li:last-child { border-bottom: none; }
.reading-rail a {
  color: var(--bone-soft);
  text-transform: uppercase;
  display: block;
}
.reading-rail a:hover { color: var(--brass-glow); }
.reading-rail a.is-current { color: var(--brass-glow); }
.reading-rail a.is-current::before { content: "▸ "; color: var(--brass); }

.reading-body {
  min-width: 0;
}

/* Subsection — a major heading inside a reading body */
.subsection {
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
  scroll-margin-top: 96px;
}
.subsection-head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-brass);
  padding-bottom: 0.85rem;
}
.subsection-num {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--brass);
}
.subsection-title {
  font-family: var(--f-display);
  font-size: clamp(1.85rem, 3.3vw, 2.5rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--bone);
  margin: 0;
}

/* Paragraph reading rhythm */
.subsection .prose,
.reading-body > .prose {
  max-width: 38em;
}
.reading-body p {
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--bone-soft);
  margin: 0 0 1.1em;
  max-width: 38em;
}
.reading-body p strong { color: var(--bone); font-weight: 500; }
.reading-body p em { font-style: italic; color: var(--bone); }
.reading-body p a {
  color: var(--bone);
  border-bottom: 1px solid var(--rule-brass);
}
.reading-body p a:hover {
  color: var(--brass-glow);
  border-bottom-color: var(--brass-glow);
}

/* Lists in reading body */
.reading-body ul, .reading-body ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.reading-body ol.numbered {
  counter-reset: ord;
}
.reading-body ol.numbered li {
  counter-increment: ord;
  position: relative;
  padding: 0.85rem 0 0.85rem 3.25rem;
  border-bottom: 1px solid var(--rule-bone);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bone-soft);
}
.reading-body ol.numbered li:last-child { border-bottom: none; }
.reading-body ol.numbered li::before {
  content: counter(ord, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.1rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--brass);
}
.reading-body ol.numbered li strong { color: var(--bone); font-weight: 500; }
.reading-body ol.numbered li em { font-style: italic; color: var(--bone); }
.reading-body ol.numbered li a {
  color: var(--bone-soft);
  border-bottom: 1px solid var(--rule-bone);
  transition: color .2s, border-color .2s;
}
.reading-body ol.numbered li a:hover {
  color: var(--brass-glow);
  border-bottom-color: var(--brass-glow);
}

/* A simple bulleted reading list (for "positions", "service" etc) */
.reading-body ul.bulleted li {
  padding: 0.7rem 0 0.7rem 1.5rem;
  border-bottom: 1px solid var(--rule-bone);
  position: relative;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bone-soft);
}
.reading-body ul.bulleted li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brass);
}
.reading-body ul.bulleted li:last-child { border-bottom: none; }
.reading-body ul.bulleted li strong { color: var(--bone); font-weight: 500; }
.reading-body ul.bulleted li em { font-style: italic; color: var(--bone); }
.reading-body ul.bulleted li a {
  color: var(--bone);
  border-bottom: 1px solid var(--rule-brass);
}
.reading-body ul.bulleted li a:hover { color: var(--brass-glow); border-bottom-color: var(--brass-glow); }

/* Project cards — for research and company project lists */
.project-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.project-card {
  border: 1px solid var(--rule-bone);
  background: var(--walnut-2);
  padding: 1.25rem 1.4rem;
  transition: border-color .25s;
  position: relative;
  /* The "lit from above" detail — a 1-pixel warm highlight plus a faint
     outer sky-shadow, so the card reads as an object resting on the page. */
  box-shadow:
    inset 0 1px 0 rgba(232,207,144,.08),
    0 0 0 1px rgba(8,17,31,.4);
}
.project-card:hover { border-color: var(--brass); }
.project-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.project-card-title {
  /* Marcellus has no italic and no 500 — use Marcellus SC (small caps) so
     the title reads as a label rather than as headline-italic, which works
     well at this card-title scale. */
  font-family: var(--f-display-sc);
  font-style: normal;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  color: var(--bone);
}
.project-card-tag {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.project-card-desc {
  font-family: var(--f-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bone-warm);
}
.project-card-desc a { color: var(--bone); border-bottom: 1px solid var(--rule-brass); }
.project-card-desc a:hover { color: var(--brass-glow); border-bottom-color: var(--brass-glow); }

/* Photo grid for studio page (deeper than homepage) */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.photo-grid .frame {
  aspect-ratio: 4/3;
}
.photo-grid .frame.tall { aspect-ratio: 3/4; }
.photo-grid .frame.wide { aspect-ratio: 16/10; grid-column: span 2; }

/* Contact card */
.contact-page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.contact-card {
  border: 1px solid var(--rule-brass);
  background: linear-gradient(180deg, var(--walnut-2), var(--walnut));
  padding: 2.5rem 2.5rem 2rem;
  position: relative;
  /* "Wooden object on cold stone" — see .temet-card */
  box-shadow:
    inset 0 1px 0 rgba(232,207,144,.08),
    0 0 0 1px rgba(8,17,31,.4);
}
.contact-card::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 22px; height: 22px;
  border-top: 1px solid var(--brass);
  border-right: 1px solid var(--brass);
}
.contact-card::after {
  content: "";
  position: absolute;
  bottom: -1px; left: -1px;
  width: 22px; height: 22px;
  border-bottom: 1px solid var(--brass);
  border-left: 1px solid var(--brass);
}
.contact-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule-bone);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
}
.contact-row:last-child { border-bottom: none; }
.contact-row .label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 0.2rem;
}
.contact-row .value { color: var(--bone); }
.contact-row .value a { color: var(--bone); border-bottom: 1px solid var(--rule-brass); }
.contact-row .value a:hover { color: var(--brass-glow); border-bottom-color: var(--brass-glow); }
.contact-row .value .secondary {
  display: block;
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--bone-faint);
  font-style: italic;
  margin-top: 0.2rem;
}

/* Email display — simple, kept the original handle */
.email-display {
  font-family: var(--f-mono);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--brass-glow);
  letter-spacing: 0.02em;
  margin: 1.5rem 0 0.5rem;
}

/* Simple back-to-home link, used near top of sub-pages */
.crumb {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.crumb::before {
  content: "←";
  color: var(--brass);
}
.crumb a { color: var(--bone-faint); }
.crumb a:hover { color: var(--brass-glow); }

/* Responsive tweaks for sub-pages */
@media (max-width: 900px) {
  .reading {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .reading-rail {
    position: static;
    border-bottom: 1px solid var(--rule-brass);
    padding-bottom: 1rem;
  }
  .reading-rail ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
  }
  .reading-rail li {
    border-bottom: none;
    padding: 0.2rem 0;
  }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .photo-grid .frame.wide { grid-column: span 2; }
  .contact-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .page-hero-rete { display: none; }
}


/* =========================================================================
   UTILITIES — small helpers that replace inline style attributes.
   These exist so that the page HTML can stay free of inline styles while
   still expressing the small per-instance overrides the layout occasionally
   needs.
   ========================================================================= */

/* The hidden SVG sprite at the bottom of every page (#mark, #ornament,
   #rete) needs to be taken out of layout flow. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* A small set of vertical-rhythm utilities for pushing a block down by
   a precise amount. Used on .photo-grid, .project-list, and a few
   trailing notes. */
.mt-md  { margin-top: 1.5rem; }
.mt-lg  { margin-top: 1.75rem; }
.mt-xl  { margin-top: 2rem; }

/* "Note in passing" — small italic-grey paragraph used at the bottom of a
   list to flag that more content is coming, or to add a footnote. */
.note-faint {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--bone-faint);
}

/* A short uppercase label used inside a long article to introduce a
   subgroup ("Current", "Concluded", &c.) — appears on the Research page. */
.minor-heading {
  margin: 2.5rem 0 1.25rem;
  color: var(--bone-faint);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.minor-heading:first-child,
.minor-heading.tight { margin-top: 0; margin-bottom: 1.25rem; }

/* The studio page's dance placeholder banner — a single wide image that
   should not be constrained by .frame.wide's default 16/10 ratio. */
.frame.aspect-auto { aspect-ratio: auto; }
.frame.banner-16-5 { aspect-ratio: 16 / 5; display: block; }

/* The studio page's dance .photo-grid is a single column rather than the
   default two. */
.photo-grid.single-col { grid-template-columns: 1fr; }

/* Lead paragraph variant: a wider lead used on the homepage where the
   default 32em max-width is too tight. */
.section-lead.wide { max-width: 42em; }