/* Peppercord: the house style. Tokens for the scrollcraft engine, then the
   editorial layer. Two grounds (bone paper, forest ink) that hard-cut per
   chapter; one amber accent in two lightnesses, one per ground. */

:root {
  --pcc-bg: #12201A; --pcc-ink: #EFEAE0; --pcc-accent: #E3A33A; --pcc-accent-ink: #12201A; --pcc-font: "Instrument Sans", system-ui, sans-serif;
  --bone: #EFEAE0;
  --bone-2: #E7E1D4;
  --forest: #12201A;
  --forest-2: #192B23;
  --ink-bone: #14201A;
  --soft-bone: #4A574F;
  --ink-forest: #EFEAE0;
  --soft-forest: #AEBAB1;
  --amber: #E3A33A;        /* on forest */
  --amber-deep: #875708;   /* on bone, 5:1 */

  --sc-canvas: var(--bone);
  --sc-surface: var(--bone-2);
  --sc-ink: var(--ink-bone);
  --sc-ink-soft: var(--soft-bone);
  --sc-accent: var(--amber-deep);
  --sc-accent-ink: var(--bone);
  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text: "Instrument Sans", system-ui, sans-serif;
  --sc-shadow-color: 150 30% 8%;

  --margin: 104px;          /* left margin the cord lives in */
  --folio: 64px;            /* right margin the folio lives in */
  --r: 4px;
  color-scheme: light;
}

@media (max-width: 860px) {
  :root { --margin: 30px; --folio: 0px; }
}

html { background: var(--bone); }
body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--amber); color: var(--forest); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--forest); color: var(--bone); padding: 8px 14px; }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------ grounds -- */
.g-bone   { --sc-canvas: var(--bone);   --sc-ink: var(--ink-bone);   --sc-ink-soft: var(--soft-bone);   --sc-accent: var(--amber-deep); --sc-accent-ink: var(--bone); background: var(--bone); color: var(--sc-ink); }
.g-bone-2 { --sc-canvas: var(--bone-2); --sc-ink: var(--ink-bone);   --sc-ink-soft: var(--soft-bone);   --sc-accent: var(--amber-deep); --sc-accent-ink: var(--bone); background: var(--bone-2); color: var(--sc-ink); }
.g-forest { --sc-canvas: var(--forest); --sc-ink: var(--ink-forest); --sc-ink-soft: var(--soft-forest); --sc-accent: var(--amber);      --sc-accent-ink: var(--forest); background: var(--forest); color: var(--sc-ink); }
.g-forest-2 { --sc-canvas: var(--forest-2); --sc-ink: var(--ink-forest); --sc-ink-soft: var(--soft-forest); --sc-accent: var(--amber); --sc-accent-ink: var(--forest); background: var(--forest-2); color: var(--sc-ink); }

/* ------------------------------------------------------------ type -- */
.d { font-family: var(--sc-font-display); font-weight: 480; font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-tight); text-wrap: balance; margin: 0; }
.d em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.d-xl { font-size: var(--sc-t-4xl); line-height: 0.98; }
.d-lg { font-size: var(--sc-t-3xl); }
.d-md { font-size: var(--sc-t-2xl); }
.d-sm { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.g-forest .d, .g-forest-2 .d { font-weight: 440; }
.lede { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-variation-settings: "opsz" 36; line-height: 1.4; max-width: 34ch; text-wrap: pretty; margin: 0; }
.prose { max-width: var(--sc-measure); }
.prose p { margin: 0 0 1em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.g-forest .prose, .g-forest-2 .prose { letter-spacing: 0.005em; line-height: 1.68; }
.label { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-accent); margin: 0; }
.soft { color: var(--sc-ink-soft); }
.num { font-family: var(--sc-font-display); font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 144; }

a.line { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .18s var(--sc-ease-out, ease-out), color .18s; }
@media (hover: hover) and (pointer: fine) { a.line:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--sc-accent); } }
a.go { display: inline-flex; gap: .5em; align-items: baseline; font-weight: 600; text-decoration: none; }
a.go::after { content: "\2192"; transition: transform .16s ease-out; }
@media (hover: hover) and (pointer: fine) { a.go:hover::after { transform: translateX(4px); } }
a.go:active { transform: translateY(1px); }

/* ------------------------------------------------------------ frame -- */
.wrap {
  width: 100%;
  max-width: calc(var(--sc-maxw) + var(--margin) + var(--folio));
  margin: 0 auto;
  padding-left: calc(var(--margin) + clamp(8px, 2vw, 32px));
  padding-right: calc(var(--folio) + var(--sc-gutter) * .6);
  box-sizing: border-box;
}
@media (max-width: 860px) { .wrap { padding-left: calc(var(--margin) + 14px); padding-right: 16px; } }
.chapter { position: relative; padding-block: var(--sc-section); }
.chapter + .chapter { border-top: 0; }

/* chapter opener: number and title set like an intertitle */
.opener { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-4) var(--sc-6); align-items: baseline; margin-bottom: var(--sc-8); }
.opener .roman { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); color: var(--sc-accent); font-variation-settings: "opsz" 72; }
.opener .rule { height: 1px; background: var(--sc-hairline-strong); align-self: center; }
.opener h2 { grid-column: 1 / -1; }

/* ------------------------------------------------------------ mark -- */
.mark-svg { display: block; }
.mark-svg path { stroke: currentColor; }
.mark-svg circle { fill: var(--amber); }

/* ------------------------------------------------------------ folio -- */
.folio {
  position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: var(--folio);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 22px 0; box-sizing: border-box; pointer-events: none;
  color: var(--folio-ink, var(--ink-bone));
  transition: color .25s ease-out;
}
.folio > * { pointer-events: auto; }
.folio__chapter { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; white-space: nowrap; display: flex; gap: 14px; align-items: center; }
.folio__chapter b { font-family: var(--sc-font-display); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 1.25em; color: var(--folio-accent, var(--amber-deep)); }
.folio__btn { font: 600 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); background: none; border: 0; color: inherit; cursor: pointer; padding: 10px 6px; }
.folio__btn:active { transform: rotate(180deg) translateY(-1px); }
.folio__home { width: 26px; color: inherit; }
body.on-forest .folio { --folio-ink: var(--ink-forest); --folio-accent: var(--amber); }

@media (max-width: 860px) {
  .folio { top: auto; left: 0; width: auto; height: 52px; flex-direction: row; padding: 0 16px 0 calc(var(--margin) + 10px); background: var(--folio-bg, var(--bone)); border-top: 1px solid color-mix(in oklab, var(--folio-ink, var(--ink-bone)) 14%, transparent); }
  body.on-forest .folio { --folio-bg: var(--forest); }
  .folio__chapter, .folio__btn { writing-mode: horizontal-tb; transform: none; }
  .folio__btn:active { transform: translateY(1px); }
  .folio__home { display: none; }
  .folio__chapter { overflow: hidden; text-overflow: ellipsis; max-width: 64vw; }
  body { padding-bottom: 52px; }
}

/* contents panel */
.contents { position: fixed; inset: 0; z-index: 60; background: var(--forest); color: var(--ink-forest); display: none; overflow-y: auto; }
.contents.open { display: block; animation: contents-in .22s var(--sc-ease-out, ease-out); }
@keyframes contents-in { from { opacity: 0; transform: translateY(8px); } }
.contents .wrap { padding-block: clamp(28px, 6vw, 72px); }
.contents__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sc-8); }
.contents__close { background: none; border: 1px solid color-mix(in oklab, var(--ink-forest) 30%, transparent); color: inherit; font: 600 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; padding: 12px 16px; border-radius: var(--r); cursor: pointer; }
.contents__close:hover { border-color: var(--amber); color: var(--amber); }
.contents__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sc-8); }
.contents ol, .contents ul { list-style: none; margin: 0; padding: 0; }
.contents__pages a { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); text-decoration: none; line-height: 1.15; display: inline-block; padding: 4px 0; letter-spacing: var(--sc-track-tight); }
.contents__pages a:hover { color: var(--amber); font-style: italic; }
.contents__brands li { display: grid; grid-template-columns: 2.4em 1fr; border-top: 1px solid color-mix(in oklab, var(--ink-forest) 14%, transparent); }
.contents__brands a { display: contents; text-decoration: none; }
.contents__brands .n { color: var(--amber); font-size: var(--sc-t-sm); padding: 10px 0; }
.contents__brands .t { padding: 10px 0; }
.contents__brands .t small { display: block; color: var(--soft-forest); font-size: var(--sc-t-xs); }
.contents__brands a:hover .t { color: var(--amber); }
@media (max-width: 860px) { .contents__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ the cord -- */
.cord { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 30; overflow: visible; }
.cord path.cord__line { fill: none; stroke: var(--cord, #C4862A); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cord path.cord__ghost { fill: none; stroke: var(--cord-ghost, rgba(20, 32, 26, .10)); stroke-width: 1.2; stroke-dasharray: 2 6; }
.cord circle.cord__dot { fill: var(--amber); transform-box: fill-box; transform-origin: center; transition: transform .5s var(--sc-ease-out, ease-out), opacity .3s; }
.cord circle.cord__dot:not(.on) { transform: scale(.3); opacity: 0; }
.cord__tip { fill: var(--amber); }
.knot-tag {
  position: absolute; z-index: 31; left: calc(var(--margin) - 44px); writing-mode: vertical-rl;
  font: 600 11px/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--tag-ink, var(--ink-bone)); padding: 10px 5px 12px; border-radius: 0 0 3px 3px;
  background: var(--tag-bg, var(--bone)); border: 1px solid color-mix(in oklab, currentColor 30%, transparent); border-top: 0;
  opacity: 0; transform: translateY(-8px) rotate(-2deg); transform-origin: top center;
  transition: opacity .35s ease-out, transform .5s var(--sc-ease-out, ease-out), color .15s;
}
.knot-tag.on { opacity: 1; transform: translateY(0) rotate(-2deg); }
.knot-tag::before { content: attr(data-no); display: block; color: var(--amber-deep); margin-bottom: 6px; }
.knot-tag.dark { --tag-ink: var(--ink-forest); --tag-bg: var(--forest); }
.knot-tag.dark::before { color: var(--amber); }
@media (hover: hover) and (pointer: fine) { .knot-tag:hover { color: var(--amber-deep); } .knot-tag.dark:hover { color: var(--amber); } }
@media (max-width: 860px) { .knot-tag { display: none; } }

/* ------------------------------------------------------------ title page -- */
.title-page { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding-block: clamp(28px, 5vw, 56px) clamp(40px, 7vw, 88px); box-sizing: border-box; }
.masthead { display: flex; align-items: center; gap: 18px; }
.masthead .mark-svg { width: clamp(40px, 4.4vw, 58px); }
.masthead__word { font-family: var(--sc-font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 560; letter-spacing: -.03em; line-height: 1; }
.masthead__meta { margin-left: auto; text-align: right; font-size: var(--sc-t-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); line-height: 1.7; }
.title-page__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); margin-top: var(--sc-9); }
.title-page h1 { max-width: 13ch; }
.title-page .lede { max-width: 40ch; }
.title-page__foot { display: flex; justify-content: space-between; align-items: end; gap: var(--sc-6); margin-top: var(--sc-8); border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-4); font-size: var(--sc-t-sm); }
.title-page__foot ol { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.title-page__foot li span { color: var(--sc-accent); font-variant-numeric: tabular-nums; margin-right: 6px; }
.title-page__foot a { text-decoration: none; }
.title-page__foot a:hover { color: var(--sc-accent); }
@media (max-width: 700px) { .masthead__meta { display: none; } .title-page h1 { font-size: var(--sc-t-2xl); } }

/* ------------------------------------------------------------ chapter I -- */
.spread { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.spread--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.media-col figure { margin: 0; overflow: hidden; border-radius: var(--r); }
.media-col figure img { width: 100%; height: auto; }
.media-col figcaption, .caption { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: 10px; letter-spacing: .02em; }
.bigyear { font-size: clamp(4rem, 2rem + 8vw, 9rem); line-height: .9; color: var(--sc-accent); letter-spacing: -.04em; font-variation-settings: "opsz" 144, "SOFT" 0; font-weight: 400; margin: 0 0 var(--sc-4); display: block; }
.years { display: flex; gap: var(--sc-7); align-items: flex-end; margin-block: var(--sc-7) var(--sc-6); }
.years div { border-top: 1px solid var(--sc-hairline-strong); padding-top: 12px; }
.years .num { font-size: var(--sc-t-2xl); color: var(--sc-accent); line-height: 1; display: block; }
.years small { display: block; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: 6px; max-width: 18ch; }
@media (max-width: 860px) { .spread, .spread--rev { grid-template-columns: 1fr; } .years { gap: var(--sc-5); } }

/* ------------------------------------------------------------ creed -- */
.creed { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.creed li { display: grid; grid-template-columns: 3.4rem 1fr; gap: var(--sc-5); padding-block: clamp(18px, 2.6vw, 34px); border-top: 1px solid var(--sc-hairline-strong); counter-increment: c; }
.creed li::before { content: counter(c, lower-roman) "."; font-family: var(--sc-font-display); font-style: italic; color: var(--sc-accent); font-size: var(--sc-t-lg); padding-top: .35em; }
.creed .d { font-size: var(--sc-t-2xl); max-width: 22ch; }
.silence { min-height: 58svh; display: grid; place-items: center start; }
.silence p { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-2xl); margin: 0; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }

/* ------------------------------------------------------------ the wall (peak) -- */
.wall-act { position: relative; }
.wall-stage { overflow: hidden; display: grid; place-items: center; }
.wall {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px);
  width: min(90vw, 1440px); transform-origin: 50% 50%;
}
.tile { margin: 0; text-decoration: none; display: block; }
.tile__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #0c1511; box-shadow: var(--sc-e2); position: relative; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tile__label { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; margin-top: 8px; font-size: 12px; line-height: 1.35; opacity: var(--label-o, 0); transition: opacity .2s; }
.tile__label b { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.tile__label span { font-weight: 600; }
.tile__label small { grid-column: 2; color: var(--soft-forest); font-size: 11px; }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__img { outline: 2px solid var(--amber); outline-offset: 3px; } }
.wall-copy { position: absolute; left: calc(var(--margin) + 2vw); bottom: clamp(24px, 6vh, 64px); z-index: 3; max-width: 30ch; background: var(--forest); color: var(--ink-forest); padding: 20px 26px 22px; border-radius: 3px; box-shadow: var(--sc-e3); }
.wall-copy--end { left: auto; right: calc(var(--folio) + 3vw); bottom: auto; top: clamp(24px, 8vh, 88px); text-align: right; max-width: 26ch; }
.wall-copy .d { font-size: var(--sc-t-2xl); }
.wall-scrim { display: none; position: absolute; inset: auto auto 0 0; width: min(760px, 100%); height: 60%; background: radial-gradient(120% 100% at 0% 100%, rgba(10, 18, 14, .94) 0%, rgba(10, 18, 14, .82) 38%, rgba(10, 18, 14, 0) 72%); z-index: 2; pointer-events: none; opacity: calc(1 - var(--wall-e, 0) * 1.6); }
@media (max-width: 860px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); width: calc(100vw - var(--margin) - 28px); margin-left: calc(var(--margin) - 4px); gap: 10px 10px; }
  .tile__label { font-size: 11px; }
  .tile__label small { display: none; }
  .wall-copy { left: calc(var(--margin) + 12px); right: 16px; bottom: 76px; }
  .wall-copy--end { top: auto; bottom: 64px; right: 16px; text-align: left; left: calc(var(--margin) + 12px); }
}

/* ------------------------------------------------------------ flagship -- */
.flag { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.shot { position: relative; margin: 0; }
.shot__d { border-radius: var(--r); overflow: hidden; box-shadow: var(--sc-e3); background: #111; }
.shot__d img { width: 100%; height: auto; }
.shot__m { position: absolute; right: -4%; bottom: -12%; width: 24%; border-radius: 14px; overflow: hidden; box-shadow: var(--sc-e3); border: 3px solid var(--forest); background: #111; }
.shot__m img { width: 100%; height: auto; }
.labels { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: var(--sc-6) 0; padding: 0; font-size: var(--sc-t-sm); }
.labels dt { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding-top: .2em; }
.labels dd { margin: 0; }
.swatches { display: flex; gap: 6px; }
.swatches i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
@media (max-width: 860px) { .flag { grid-template-columns: 1fr; } .shot__m { width: 30%; right: 2%; } }

/* ------------------------------------------------------------ the family index -- */
.index { list-style: none; margin: 0; padding: 0; }
.index li { border-top: 1px solid var(--sc-hairline-strong); }
.index li:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.index a { display: grid; grid-template-columns: 3.2rem minmax(0, 1.1fr) minmax(0, 1.3fr) 11rem; gap: var(--sc-5); align-items: center; padding-block: clamp(18px, 2.4vw, 30px); text-decoration: none; position: relative; }
.index .n { font-family: var(--sc-font-display); font-style: italic; color: var(--sc-accent); font-size: var(--sc-t-lg); }
.index .nm { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-tight); line-height: 1; transition: transform .2s var(--sc-ease-out, ease-out); }
.index .nm small { display: block; font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); margin-top: 10px; }
.index .sm { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 44ch; }
.index .th { aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; box-shadow: var(--sc-e1); transform: rotate(var(--rot, 1.5deg)); transition: transform .25s var(--sc-ease-out, ease-out); }
.index .th img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (hover: hover) and (pointer: fine) {
  .index a:hover .nm { transform: translateX(8px); font-style: italic; }
  .index a:hover .th { transform: rotate(0) scale(1.06); }
}
@media (max-width: 860px) {
  .index a { grid-template-columns: 2.2rem 1fr 6.5rem; }
  .index .sm { grid-column: 2 / 4; grid-row: 2; }
  .index .th { grid-column: 3; grid-row: 1; }
}

/* ------------------------------------------------------------ made for others: pan -- */
.rail { display: flex; gap: clamp(20px, 3vw, 44px); padding-left: calc(var(--margin) + 2vw); padding-right: 8vw; align-items: stretch; height: 100%; box-sizing: border-box; padding-block: 12vh 10vh; }
.rail > * { flex: 0 0 auto; }
.rail__lead { width: min(34rem, 80vw); display: flex; flex-direction: column; justify-content: center; gap: var(--sc-5); }
.plate { width: clamp(17rem, 30vw, 27rem); display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.plate__img { aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; box-shadow: var(--sc-e2); }
.plate__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.plate dl { display: grid; grid-template-columns: 5.2em 1fr; gap: 3px 10px; margin: 0; font-size: 13px; line-height: 1.4; }
.plate dt { color: var(--sc-ink-soft); text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 600; padding-top: .25em; }
.plate dd { margin: 0; }
.plate dd.nm { font-family: var(--sc-font-display); font-size: 1.35rem; line-height: 1.1; }
@media (hover: hover) and (pointer: fine) { .plate:hover .plate__img { outline: 2px solid var(--sc-accent); outline-offset: 3px; } .plate:hover dd.nm { color: var(--sc-accent); } }
.rail__end { width: min(22rem, 70vw); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 6vh; gap: var(--sc-4); }
@media (prefers-reduced-motion: no-preference) {
  .rail .plate { opacity: calc(.55 + .45 * min(1, max(0, (var(--sc-p, 0) * 6 - var(--i, 0) + 1)))); }
}

/* ------------------------------------------------------------ people -- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); }
.person figure { margin: 0 0 var(--sc-5); overflow: hidden; border-radius: var(--r); aspect-ratio: 1 / 1; }
.person figure img { object-position: 50% 22%; }
.person figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.person h3 { margin-bottom: 6px; }
.person .role { margin-bottom: var(--sc-4); }
.person--third { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-6); }
.person--third .monogram { font-family: var(--sc-font-display); font-size: clamp(5rem, 3rem + 8vw, 11rem); line-height: .8; color: var(--sc-accent); font-style: italic; letter-spacing: -.05em; }
@media (max-width: 760px) { .people, .person--third { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ why -- */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.why blockquote { margin: 0; }
.why blockquote p { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1.12; letter-spacing: var(--sc-track-tight); margin: 0 0 var(--sc-5); font-variation-settings: "opsz" 144, "SOFT" 60; text-wrap: balance; }
.why blockquote footer { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ colophon (close) -- */
.colophon-stage { display: grid; align-content: center; padding-block: 6vh; box-sizing: border-box; }
.colophon { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.colophon__mark { position: relative; aspect-ratio: 120 / 140; width: 100%; max-width: 250px; }
.colophon h2 { font-size: var(--sc-t-2xl); margin-bottom: var(--sc-5); max-width: 18ch; }
.masthead-list { columns: 2; column-gap: var(--sc-7); list-style: none; margin: 0 0 var(--sc-6); padding: 0; font-size: var(--sc-t-sm); }
.masthead-list li { break-inside: avoid; display: grid; grid-template-columns: 2em 1fr; padding: 5px 0; border-top: 1px solid var(--sc-hairline); }
.masthead-list li span { color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.masthead-list a { text-decoration: none; }
.masthead-list a:hover { color: var(--sc-accent); }
.masthead-list small { color: var(--sc-ink-soft); }
.colophon__ask { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); max-width: 40ch; margin: 0 0 var(--sc-6); }
.smallprint { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); display: flex; flex-wrap: wrap; gap: 6px 18px; border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.smallprint a { text-decoration: none; }
.smallprint a:hover { color: var(--sc-ink); text-decoration: underline; }
@media (max-width: 760px) { .colophon { grid-template-columns: 1fr; } .colophon__mark { max-width: 120px; order: 2; margin: var(--sc-4) 0 var(--sc-6) 30%; } .masthead-list { columns: 1; } }

/* ------------------------------------------------------------ inner pages -- */
.page-head { padding-block: clamp(40px, 8vw, 110px) var(--sc-8); }
.page-head .label { margin-bottom: var(--sc-5); }
.page-head h1 { max-width: 16ch; margin-bottom: var(--sc-5); }
.crumbs { font-size: var(--sc-t-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); margin-bottom: var(--sc-7); display: flex; gap: 10px; align-items: center; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--sc-accent); }
.crumbs .mark-svg { width: 20px; }
.sect { padding-block: var(--sc-8); border-top: 1px solid var(--sc-hairline-strong); display: grid; grid-template-columns: minmax(10rem, .5fr) minmax(0, 1.5fr); gap: var(--sc-6); }
.sect > h2 { font-size: var(--sc-t-xl); }
@media (max-width: 760px) { .sect { grid-template-columns: 1fr; gap: var(--sc-4); } }
.proud { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-6); }
.proud li { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sc-4); }
.proud li > span { font-family: var(--sc-font-display); font-style: italic; color: var(--sc-accent); font-size: var(--sc-t-lg); }
.proud h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); margin: 0 0 6px; }
.proud p { margin: 0; max-width: 60ch; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); }
.stats div { border-top: 2px solid var(--sc-accent); padding-top: 12px; }
.stats .num { font-size: var(--sc-t-3xl); line-height: 1; display: block; letter-spacing: -.03em; }
.stats small { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.source { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: var(--sc-4); }
.case-shot { padding-bottom: clamp(40px, 6vw, 100px); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); padding-block: var(--sc-8); border-top: 1px solid var(--sc-hairline-strong); }
.pager a { text-decoration: none; display: block; }
.pager small { display: block; font-size: var(--sc-t-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); margin-bottom: 8px; }
.pager span { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-tight); }
.pager a:hover span { color: var(--sc-accent); font-style: italic; }
.pager a:last-child { text-align: right; }
.visit { display: inline-flex; align-items: center; gap: 12px; background: var(--sc-ink); color: var(--sc-canvas); text-decoration: none; padding: 16px 22px; border-radius: var(--r); font-weight: 600; white-space: nowrap; transition: transform .14s ease-out, background .15s; }
.visit:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
.visit:active { transform: translateY(1px) scale(.99); }

/* work index gallery */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(18px, 2.4vw, 36px); }
.gallery a { text-decoration: none; grid-column: span 4; display: flex; flex-direction: column; gap: 12px; }
.gallery a.wide { grid-column: span 8; }
.gallery a.half { grid-column: span 6; }
.gallery .img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; box-shadow: var(--sc-e2); }
.gallery .img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s var(--sc-ease-out, ease-out); }
@media (hover: hover) and (pointer: fine) { .gallery a:hover .img img { transform: scale(1.03); } .gallery a:hover h3 { color: var(--sc-accent); } }
.gallery h3 { font-family: var(--sc-font-display); font-weight: 480; font-size: var(--sc-t-xl); margin: 0; letter-spacing: var(--sc-track-snug); line-height: 1.1; }
.gallery .meta { display: flex; gap: 12px; font-size: var(--sc-t-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); }
.gallery .meta b { color: var(--sc-accent); }
.gallery p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 860px) { .gallery a, .gallery a.wide, .gallery a.half { grid-column: 1 / -1; } }

/* timeline (story page) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: minmax(7rem, .4fr) minmax(0, 1.6fr); gap: var(--sc-6); padding-block: var(--sc-7); border-top: 1px solid var(--sc-hairline-strong); }
.timeline .num { font-size: var(--sc-t-3xl); color: var(--sc-accent); line-height: 1; letter-spacing: -.03em; }
.timeline h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); margin: 0 0 12px; letter-spacing: var(--sc-track-snug); }
@media (max-width: 700px) { .timeline li { grid-template-columns: 1fr; gap: var(--sc-3); } }

/* legal (markdown) */
.legal { max-width: 70ch; padding-block: var(--sc-8); }
.legal h1 { font-family: var(--sc-font-display); font-weight: 480; font-size: var(--sc-t-3xl); letter-spacing: var(--sc-track-tight); line-height: 1.05; }
.legal h2 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); margin-top: 2em; }
.legal h3 { font-size: var(--sc-t-lg); margin-top: 1.6em; }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--sc-t-sm); display: block; overflow-x: auto; }
.legal th, .legal td { border: 1px solid var(--sc-hairline-strong); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal hr { border: 0; border-top: 1px solid var(--sc-hairline-strong); margin: 2em 0; }

/* footer used on inner pages */
.foot { padding-block: var(--sc-8) var(--sc-7); }
.foot__top { display: flex; gap: var(--sc-6); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--sc-7); }
.foot__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.foot__brand .mark-svg { width: 34px; }
.foot__brand span { font-family: var(--sc-font-display); font-size: 1.6rem; font-weight: 560; letter-spacing: -.03em; }

/* reduced motion: the engine handles the devices; our own movement stops here */
@media (prefers-reduced-motion: reduce) {
  .knot-tag, .cord circle.cord__dot { transition: none; }
  .index .th, .index .nm { transition: none; }
}

.folio { transition: color .25s ease-out, opacity .25s ease-out; }
body.wall-zoomed .folio { opacity: 0; pointer-events: none; }
.gallery a.full { grid-column: 1 / -1; } .gallery a.full .img { aspect-ratio: 21 / 8; }

/* the cord passes behind the two full-bleed acts, like a thread behind a wall */
.wall-act, #others { position: relative; z-index: 32; }