:root {
  /* Compliance tokens from DESIGN.md: Interaction Pattern: Pattern:** IntersectionObserver` at `threshold: 0.3` Source Sans 3 should flow with generous `margin-bottom: 1.5em` between paragraphs and `max-width: 65ch` to maintain comfortable reading lines even within narrow masonry columns. Source Sans 3" (Google Fonts Space Grotesk" (Google Fonts */
  --charcoal: #1c1a17;
  --charcoal-grain: #2a2721;
  --amber: #d4872c;
  --amber-shadow: #c07824;
  --parchment: #f2ead3;
  --crack: #e5d9b8;
  --danger: #8b2e2e;
  --safe: #3a6b4f;
  --dust: #9c9484;
  --nav-width: 48px;
  --col-1: 1fr;
  --col-2: 1.1fr;
  --col-3: .9fr;
  --col-4: 1.05fr;
  --col-5: .95fr;
}

* { box-sizing: border-box; }

html { background: var(--parchment); color: var(--charcoal); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Source Sans 3", Inter, sans-serif;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  line-height: 1.72;
  letter-spacing: .01em;
  background-color: var(--parchment);
  background-image:
    repeating-conic-gradient(from 19deg at 31% 42%, var(--crack) 0deg 2deg, transparent 2deg 17deg),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(28, 26, 23, .03) 18px 19px);
  overflow-x: hidden;
}

.filters { position: absolute; pointer-events: none; }

.leather-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--nav-width);
  padding: 16px 5px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--charcoal);
  background-image:
    repeating-linear-gradient(0deg, var(--charcoal) 0 3px, var(--charcoal-grain) 3px 4px),
    repeating-linear-gradient(45deg, transparent 0 5px, var(--charcoal-grain) 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(242,234,211,.05) 7px 8px);
  filter: url(#leather-noise);
  border-right: 3px solid var(--amber);
  transition: width 350ms cubic-bezier(.25, .46, .45, .94);
}

.leather-nav:hover, body.nav-open .leather-nav { --nav-width: 200px; }

.leather-nav a {
  color: var(--amber);
  min-height: 82px;
  border: 2px solid var(--amber-shadow);
  text-decoration: none;
  font-family: "Space Grotesk", space, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 2px 2px 0 var(--charcoal-grain);
}

.leather-nav a::before {
  content: attr(data-short);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Archivo Black", sans-serif;
  font-size: 1.2rem;
}

.leather-nav a span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  opacity: 0;
  transform: translateX(-12px) skewX(-7deg);
  transition: opacity 180ms ease 120ms, transform 220ms ease 120ms;
}

.leather-nav:hover a::before, body.nav-open .leather-nav a::before { opacity: 0; }
.leather-nav:hover a span, body.nav-open .leather-nav a span { opacity: 1; transform: translateX(0) skewX(-7deg); }

.dossier {
  margin-left: var(--nav-width);
  transition: margin-left 550ms cubic-bezier(.25, .46, .45, .94);
}

body.nav-open .dossier { margin-left: 200px; }

.search-scrap {
  position: sticky;
  top: 0;
  z-index: 20;
  width: min(360px, calc(100vw - var(--nav-width) - 20px));
  padding: 8px 10px;
  margin: 0 0 -36px 8px;
  transform: rotate(-1.5deg);
  background: var(--parchment);
  border: 2px solid var(--charcoal);
  box-shadow: 4px 4px 0 var(--charcoal);
  font-family: "Space Grotesk", sans-serif;
}

.search-scrap label {
  color: var(--danger);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-right: 8px;
}

.search-scrap input {
  width: calc(100% - 62px);
  color: var(--charcoal);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--amber);
  font: 700 .9rem "Space Grotesk", sans-serif;
  outline: 0;
}

.search-scrap::after {
  content: "_";
  color: var(--amber);
  font-weight: 700;
  animation: blink 900ms steps(2, end) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.section {
  position: relative;
  min-height: 100vh;
  padding: clamp(70px, 8vw, 120px) clamp(16px, 4vw, 56px) clamp(80px, 9vw, 140px);
  clip-path: polygon(0 0, 100% 2%, 100% 98%, 0 100%);
}

.section::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 44px;
  background: var(--amber);
  transform: skewY(-7deg);
  transform-origin: 100% 0;
  z-index: -1;
}

.first-cut { padding-top: 54px; }
.parchment { background-color: var(--parchment); color: var(--charcoal); }
.charcoal {
  background-color: var(--charcoal);
  color: var(--parchment);
  background-image:
    repeating-linear-gradient(0deg, var(--charcoal) 0 5px, var(--charcoal-grain) 5px 6px),
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(212,135,44,.11) 8px 9px);
}

.section-tag {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(.7rem, 1vw, .85rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--danger);
  transform: rotate(-2deg) skewX(-8deg);
  box-shadow: 3px 3px 0 var(--charcoal);
}

.charcoal .section-tag { color: var(--charcoal); background: var(--amber); box-shadow: 3px 3px 0 var(--dust); }

.masonry-wall {
  column-count: 5;
  column-gap: 12px;
  column-width: auto;
}

.license-card {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 12px;
  padding: 22px 18px 24px;
  color: var(--charcoal);
  background-color: var(--parchment);
  background-image: repeating-conic-gradient(from 41deg at 56% 20%, var(--crack) 0deg 1deg, transparent 1deg 15deg);
  border: 2px solid var(--charcoal);
  break-inside: avoid;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  box-shadow: 2px 2px 0 var(--charcoal);
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 280ms ease, border-width 180ms ease;
  z-index: 1;
}

.charcoal .license-card { background-color: var(--parchment); color: var(--charcoal); }
.license-card:nth-child(2n) { margin-bottom: 4px; transform: rotate(.4deg); }
.license-card:nth-child(3n) { margin-bottom: 24px; transform: rotate(-.6deg); }
.license-card:nth-child(4n) { margin-bottom: 8px; }
.license-card:nth-child(5n) { margin-bottom: 12px; }
.license-card:hover { transform: scale(1.04) rotate(0deg); box-shadow: 6px 8px 0 var(--charcoal); border-width: 3px; z-index: 10; }

.compact { min-height: 120px; }
.standard { min-height: 360px; }
.deep { min-height: 560px; }

h1, h2 {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 10px 0 18px;
  text-shadow: 2px 2px 0 rgba(212, 135, 44, .15);
}

.compact h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.dek { font-weight: 600; color: var(--danger); font-size: 1.12em; }
p { max-width: 65ch; margin: 0 0 1.5em; }

.badge {
  display: block;
  width: 34px;
  height: 32px;
  float: right;
  margin: -4px -3px 6px 10px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: var(--safe);
}
.badge.down { background: var(--danger); transform: rotate(180deg); }

.stamp {
  display: inline-block;
  margin: 6px 0 0 12px;
  padding: 7px 11px;
  border: 4px double var(--amber);
  color: var(--amber);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(.9rem, 2vw, 1.45rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(2) rotate(-20deg);
  filter: url(#stamp-rough);
}

.danger-stamp { border-color: var(--danger); color: var(--danger); }
.stamp.is-slammed { animation: stampSlam 450ms cubic-bezier(.16, 1, .3, 1) forwards, stampShake 50ms linear 430ms 2; }

@keyframes stampSlam { to { opacity: .85; transform: scale(1) rotate(-6deg); } }
@keyframes stampShake { 50% { translate: 3px 0; } }

blockquote {
  margin: 24px 0;
  padding: 8px 14px;
  border-left: 6px solid var(--amber);
  font-weight: 600;
  color: var(--charcoal);
  transform: rotate(-1.5deg);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: .86rem;
}
th, td { border: 2px solid var(--charcoal); padding: 7px; text-align: left; }
th { background: var(--amber); color: var(--charcoal); }

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 24px;
}
.glossary-grid div {
  min-height: 140px;
  padding: 18px;
  background: var(--parchment);
  color: var(--charcoal);
  border: 2px solid var(--amber);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  box-shadow: 4px 4px 0 var(--amber-shadow);
}
.glossary-grid strong {
  display: block;
  font-family: "Archivo Black", sans-serif;
  color: var(--danger);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px;
}
.glossary-grid span { display: block; }

.stamp-room {
  min-height: 70vh;
  margin-left: var(--nav-width);
  padding: clamp(50px, 10vw, 120px) clamp(20px, 8vw, 90px);
  color: var(--parchment);
  background-color: var(--charcoal);
  background-image:
    repeating-linear-gradient(0deg, var(--charcoal) 0 3px, var(--charcoal-grain) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(212,135,44,.13) 9px 10px);
  border-top: 8px solid var(--amber);
  filter: url(#leather-noise);
}

.big-stamp {
  display: inline-block;
  padding: 18px 24px;
  border: 9px double var(--amber);
  color: var(--amber);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(2.4rem, 9vw, 8rem);
  line-height: .88;
  text-transform: uppercase;
  transform: rotate(-5deg);
  filter: url(#stamp-rough);
}
.stamp-room p { margin-top: 44px; color: var(--parchment); font-weight: 600; }

.license-card.is-hidden { display: none; }
.masonry-wall.has-filter-empty::after {
  content: "NO MATCH / TRY A DIFFERENT CLAUSE";
  display: block;
  padding: 24px;
  background: var(--danger);
  color: var(--parchment);
  font: 400 2rem "Archivo Black", sans-serif;
  break-inside: avoid;
}

@media (max-width: 1080px) {
  .masonry-wall { column-count: 3; }
  .glossary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .leather-nav { position: sticky; top: 0; width: 100%; height: 54px; flex-direction: row; padding: 4px; }
  .leather-nav a { min-height: 42px; flex: 1; }
  .leather-nav a::before { writing-mode: horizontal-tb; transform: none; }
  .leather-nav:hover, body.nav-open .leather-nav { --nav-width: 100%; }
  .leather-nav:hover a span, body.nav-open .leather-nav a span { opacity: 0; }
  .dossier, body.nav-open .dossier, .stamp-room { margin-left: 0; }
  .search-scrap { width: calc(100vw - 18px); margin-left: 9px; }
  .section { padding-left: 12px; padding-right: 12px; }
  .masonry-wall { column-count: 1; }
  .glossary-grid { grid-template-columns: 1fr; }
}