/* Endpaper case study — product-specific layer.
   The shared scaffolding (frame, header/meta band, lede, galleries, captions)
   lives in frame.css; this sheet adds ONLY what's particular to Endpaper:
   the hover-fan clip, the palette strip, and the Source Serif / WMorris type
   specimen. Loaded after frame.css. Scoped under .case-study-wide. */

/* The hover-fan clip sits in the frame, height-capped, centered. */
.case-study-wide .cs-fan {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

/* ---- Palette strip -------------------------------------------------------- */
.case-study-wide .ep-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
  /* Top/bottom only — the frame rule owns margin-left for centering. The
     figures get this rhythm automatically; this div doesn't, so match it. */
  margin-top: var(--rhythm-page);
  margin-bottom: var(--rhythm-page);
}
.case-study-wide .ep-swatch {
  border: var(--border-thin) solid var(--ink-line);
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.45;
}
.case-study-wide .ep-swatch .chip { height: 92px; }
.case-study-wide .ep-swatch .meta { padding: 0.6rem 0.8rem; }
.case-study-wide .ep-swatch .role { display: block; opacity: 0.75; }
.case-study-wide .ep-swatch .hex {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* ---- Type specimen -------------------------------------------------------
   The two real Endpaper faces, set live in the product's own palette rather
   than the site's green-on-black: Source Serif 4 (the variable workhorse —
   UI, body, reading) and the WMorris woodcut initials (brand mark + reader
   drop caps). Fonts are vendored in /fonts, the same files the app ships.
   Self-contained like .ep-palette: Endpaper tokens are declared locally. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Variable-Roman.ttf.woff2") format("woff2-variations"),
       url("/fonts/SourceSerif4Variable-Roman.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Variable-Italic.ttf.woff2") format("woff2-variations"),
       url("/fonts/SourceSerif4Variable-Italic.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "WMorrisInitials";
  src: url("/fonts/WMORRIS.ttf") format("truetype");
  font-display: swap;
}

.case-study-wide .ep-type {
  --ep-bg: #111111;
  --ep-rule: #292621;
  --ep-fg: #e8e4dc;
  --ep-dim: #8a857c;
  --ep-gold: #d4a85a;
  --ep-aged: #8a6f3c;
  /* No box of its own — the tiles are the containers. .ep-type is just a
     styling scope for the tokens + family; gaps show the page ground. */
  color: var(--ep-fg);
  font-family: "Source Serif 4", "Iowan Old Style", "Charter", "Georgia", serif;
}

/* Seven equal tiles. Each group is block-centered (horizontally AND vertically)
   inside its tile, but the lines WITHIN a group stay left-aligned. Tiles are the
   app's soft #1a1a1a ground; the #111 frame shows through the gaps — a module
   grid, no rules. flex-wrap + justify-center so the second row of three centres
   beneath the first row of four. */
.case-study-wide .ep-mosaic {
  --g: clamp(0.6rem, 1.8vw, 1rem);
  display: grid;
  /* Three across, full stop — an even 3×2 that steps to 2×3 then 1×6. Explicit
     columns, not auto-fit: the intent is "at most three", not "as many as fit"
     (which depended on frame width and let a fourth column slip in). */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--g);
}
@media (max-width: 760px) {
  .case-study-wide .ep-mosaic { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .case-study-wide .ep-mosaic { grid-template-columns: 1fr; }
}
.case-study-wide .m-cell {
  min-width: 0;
  min-height: clamp(150px, 15vw, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  background: #1a1a1a;
}
.case-study-wide .m-cell .g { text-align: left; min-width: 0; }

/* Every value below is measured from the running app with getComputedStyle
   (root font-size 18px). Sizes are in px, not rem, so the panel renders at the
   app's true scale no matter what this page's root is. */

/* Display title — Source Serif 4 at the page/series-title size (1.85rem in the
   app); the largest the one family is pushed. */
.case-study-wide .ep-mark {
  font-family: "WMorrisInitials", serif;
  color: var(--ep-gold);
  font-size: 64px;
  line-height: 0.8;
  text-transform: uppercase;
}
.case-study-wide .ep-display {
  font-family: "Source Serif 4", "Iowan Old Style", "Charter", "Georgia", serif;
  font-weight: 400;
  font-size: 33px;
  line-height: 1.15;
  letter-spacing: -0.333px;
  color: var(--ep-fg);
}

/* Stats headline — same size, weight does the talking: value 600, label 300. */
.case-study-wide .ep-headline {
  margin: 0;
  font-size: 28.8px;
  line-height: 1.1;
  color: var(--ep-fg);
}
.case-study-wide .ep-headline .v { font-weight: 600; }
.case-study-wide .ep-headline .l { font-weight: 300; }

/* Library trio — eyebrow (uppercase, +1.26px), card title (cream, −0.077px),
   author (dim). */
.case-study-wide .ep-eyebrow {
  margin: 0 0 0.7rem;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.26px;
  text-transform: uppercase;
  color: var(--ep-dim);
}
.case-study-wide .ep-title {
  display: block;
  font-size: 15.3px;
  line-height: 1.35;
  letter-spacing: -0.077px;
  color: var(--ep-fg);
}
.case-study-wide .ep-author {
  display: block;
  margin-top: 0.1rem;
  font-size: 13.5px;
  color: var(--ep-dim);
}

/* Segmented control — active gold, the rest dim, at 15.3px. */
.case-study-wide .ep-seg {
  display: flex;
  gap: clamp(1rem, 4vw, 1.6rem);
  margin: 0;
  font-size: 15.3px;
}
.case-study-wide .ep-seg .on { color: var(--ep-gold); }
.case-study-wide .ep-seg .off { color: var(--ep-dim); }

/* Section label — the smaller tracked-caps register (+1.04px). */
.case-study-wide .ep-label {
  font-size: 12.96px;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--ep-dim);
}

/* Quiet aside — the system's second italic, softer, in aged gold. */
.case-study-wide .ep-label { margin: 0 0 0.5rem; }
.case-study-wide .ep-note {
  margin: 0;
  font-size: 16.2px;
  font-style: italic;
  letter-spacing: 0.16px;
  color: var(--ep-aged);
}

/* Wordmark — text only, the widest tracking in the system (4.03px ≈ 0.28em). */
.case-study-wide .ep-wordmark {
  margin: 0;
  font-size: 14.4px;
  letter-spacing: 4.03px;
  text-transform: uppercase;
  color: var(--ep-gold);
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 40em) {
  /* Phone: tighten the specimen tile height. */
  .case-study-wide .m-cell { min-height: clamp(110px, 26vw, 150px); }
}