:root {
  /* Compliance vocabulary from DESIGN.md: IntersectionObserver IntersectionObserver trigger (threshold: 0.3 IntersectionObserver triggering Source Serif 4 italic. Source Serif 4" (Google Fonts Space Grotesk 0.85rem. `clamp(4rem #000000 #FFFFFF */
  --parchment: #F5EDE0;
  --umber: #2B1D12;
  --walnut: #5C4033;
  --gold: #8B6914;
  --sage: #6B7C5E;
  --sienna: #A0522D;
  --linen: #EDE3D5;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--umber);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.72;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .52;
  background-image:
    linear-gradient(rgba(92, 64, 51, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 64, 51, .06) 1px, transparent 1px),
    radial-gradient(circle at 22% 18%, rgba(92, 64, 51, .08) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 68%, rgba(92, 64, 51, .07) 0 2px, transparent 3px);
  background-size: 44px 44px, 44px 44px, 180px 180px, 220px 220px;
  z-index: -2;
}

a { color: inherit; text-decoration: none; }

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(18px, 4vw, 56px) 22px;
  background: rgba(245, 237, 224, .93);
  border-bottom: 2px solid var(--walnut);
  font-family: "Space Grotesk", sans-serif;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 20px;
  background:
    radial-gradient(ellipse at center, transparent 0 34%, var(--walnut) 35% 40%, transparent 42%) 0 0 / 58px 20px repeat-x;
  opacity: .8;
}

.wordmark {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.15rem;
}

.nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); }

.nav-links a {
  position: relative;
  font-size: .85rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sage);
  padding-bottom: 8px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms ease;
}

.nav-links a:hover, .nav-links a.active { color: var(--umber); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.foyer {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 110px 24px 48px;
}

.tech-field { position: relative; isolation: isolate; }
.tech-field::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background:
    linear-gradient(45deg, transparent 48%, rgba(92, 64, 51, .09) 49%, transparent 50%) 0 0 / 140px 140px,
    radial-gradient(circle at 18% 28%, rgba(92, 64, 51, .1) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, rgba(92, 64, 51, .1) 0 1px, transparent 2px);
  z-index: -1;
}

.cartouche {
  width: min(92vw, 1200px);
  height: min(62vh, 700px);
  min-height: 420px;
  position: relative;
  display: grid;
  place-items: center;
}

.cartouche-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cartouche-line, .hero-scrolls path, .cartouche-rosettes * {
  fill: none;
  stroke: var(--walnut);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-line, .hero-ornament { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawOne 300ms ease-in-out forwards; }
.hero-line.top { animation-delay: 100ms; }
.hero-line.right { animation-delay: 400ms; }
.hero-line.bottom { animation-delay: 700ms; }
.hero-line.left { animation-delay: 1000ms; }
.hero-ornament { animation-duration: 1200ms; animation-delay: 100ms; }
.hero-scrolls path, .cartouche-rosettes * { opacity: 0; animation: fadeMark 500ms ease forwards 1250ms; }

.cartouche-content { text-align: center; padding: 32px; }
h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .9;
  margin: 0;
}

.cartouche-content p {
  margin: 24px 0 0;
  color: var(--sage);
  font-style: italic;
  font-size: 1.1rem;
  opacity: 0;
  animation: fadeUp 600ms ease forwards 1400ms;
}

.section-pad { padding: clamp(72px, 9vw, 140px) clamp(18px, 5vw, 72px); }

.ornamental-rule {
  height: 60px;
  margin: 0 clamp(18px, 5vw, 72px);
}
.ornamental-rule svg { width: 100%; height: 100%; overflow: visible; }
.ornamental-rule path {
  fill: none;
  stroke: var(--walnut);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 800ms ease, stroke 300ms ease;
}
.ornamental-rule.in-view path { stroke-dashoffset: 0; }

.gallery { background: linear-gradient(180deg, transparent, rgba(237, 227, 213, .55), transparent); }

.section-heading {
  max-width: 860px;
  margin: 0 auto clamp(44px, 6vw, 80px);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}

.bordered-panel, .specimen-card { position: relative; }
.panel-border, .card-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.panel-border rect, .card-border rect {
  fill: none;
  stroke: var(--walnut);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 600ms cubic-bezier(.4, 0, .2, 1), stroke 300ms ease;
}
.in-view > .panel-border rect, .in-view > .card-border rect { stroke-dashoffset: 0; }
.bordered-panel:hover > .panel-border rect, .specimen-card:hover > .card-border rect { stroke: var(--gold); }

.label, .caption, dt, .smallprint {
  font-family: "Space Grotesk", sans-serif;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sage);
}

h2, h3 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -.02em;
  color: var(--umber);
  line-height: 1.02;
}
h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); margin: 10px 0 18px; font-weight: 700; }
h3 { font-size: 1.3rem; margin: 8px 0 16px; font-weight: 500; }

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1.618fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.specimen-card {
  min-height: 420px;
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  background: var(--parchment);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms ease, transform 650ms ease;
}
.specimen-card:nth-child(even) { background: var(--linen); }
.specimen-card.in-view { opacity: 1; transform: translateY(0); }
.specimen-card.featured { min-height: 540px; }
.specimen-card.tall { min-height: 500px; }

.line-plate {
  width: 100%;
  flex: 1;
  min-height: 210px;
  margin: 8px 0 18px;
}
.line-plate path, .line-plate circle, .botanical-machine path, .botanical-machine circle {
  fill: none;
  stroke: var(--walnut);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.line-plate .hatch { stroke-width: 1; opacity: .85; }
.caption { margin-top: auto; color: var(--sage); }

.corner {
  position: absolute;
  width: 20px;
  height: 20px;
  color: var(--walnut);
  transition: transform 300ms ease, color 300ms ease;
}
.corner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: path("M2 18 C4 11 8 7 15 6 C10 10 10 14 18 18 C10 17 6 15 2 18 M2 2 C8 4 11 8 11 14 C8 9 5 7 2 7 Z");
}
.c1 { left: -10px; top: -10px; }
.c2 { right: -10px; top: -10px; transform: rotate(90deg); }
.c3 { right: -10px; bottom: -10px; transform: rotate(180deg); }
.c4 { left: -10px; bottom: -10px; transform: rotate(270deg); }
.specimen-card:hover .corner, .colophon-frame:hover .corner { color: var(--gold); }
.specimen-card:hover .c1, .colophon-frame:hover .c1 { transform: scale(1.1); }
.specimen-card:hover .c2, .colophon-frame:hover .c2 { transform: rotate(90deg) scale(1.1); }
.specimen-card:hover .c3, .colophon-frame:hover .c3 { transform: rotate(180deg) scale(1.1); }
.specimen-card:hover .c4, .colophon-frame:hover .c4 { transform: rotate(270deg) scale(1.1); }

.specimen {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 110px clamp(18px, 5vw, 72px) 80px;
}

.specimen-layout {
  display: grid;
  grid-template-columns: 1fr 1.618fr 1fr;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.plate-text, .metadata, .grand-plate {
  padding: clamp(24px, 3vw, 40px);
  background: rgba(245, 237, 224, .82);
}

.grand-plate {
  min-height: min(78vh, 760px);
  display: grid;
  place-items: center;
  background: var(--linen);
}
.botanical-machine { width: min(90%, 520px); height: auto; }
.botanical-machine path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2000ms ease;
}
.grand-plate.in-view .botanical-machine path { stroke-dashoffset: 0; }
.metadata dl { margin: 0; }
.metadata div { border-top: 1px solid rgba(92, 64, 51, .35); padding: 14px 0; }
.metadata dd { margin: 4px 0 0; color: var(--umber); font-family: "Source Serif 4", Georgia, serif; }

.colophon { display: grid; place-items: center; background: var(--linen); }
.colophon-frame {
  width: min(100%, 640px);
  padding: clamp(34px, 5vw, 64px);
  text-align: center;
  background: var(--parchment);
}
.colophon h2 { margin-bottom: 18px; }
.philosophy { font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.smallprint { margin-top: 32px; }

[data-reveal]:not(.specimen-card) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms ease;
}
[data-reveal].in-view, .foyer [data-reveal] { opacity: 1; transform: translateY(0); }

@keyframes drawOne { to { stroke-dashoffset: 0; } }
@keyframes fadeMark { to { opacity: 1; } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 900px) {
  .portfolio-grid, .specimen-layout { grid-template-columns: 1fr; }
  .specimen { padding-top: 120px; }
  .grand-plate { min-height: 68vh; }
}

@media (max-width: 768px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .nav-links { flex-wrap: wrap; gap: 12px 18px; }
  .cartouche { width: 96vw; min-height: 360px; }
  .specimen-card { padding: 16px; }
  .corner { width: 14px; height: 14px; }
  .c1 { left: -7px; top: -7px; }
  .c2 { right: -7px; top: -7px; }
  .c3 { right: -7px; bottom: -7px; }
  .c4 { left: -7px; bottom: -7px; }
}