/* Portfolio case-study layer. Loaded only on /work/ and single Work projects. */
.work-archive-page,
.single-work-page { background: var(--cream); }

/* Curtigghiu case study */
.curtigghiu-case { overflow: hidden; }
.cg-hero,
.cg-section,
.cg-case-footer { padding-inline: var(--page); }
.cg-hero { padding-top: clamp(100px, 12vw, 170px); }
.cg-topline {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font: 500 10px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cg-hero h1 {
  margin: clamp(24px, 4vw, 58px) 0 clamp(32px, 5vw, 70px);
  color: var(--vermillion);
  font: 500 clamp(70px, 15.2vw, 250px)/.72 var(--serif);
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.cg-intro-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 20px;
  margin-bottom: clamp(46px, 7vw, 100px);
}
.cg-lead {
  grid-column: 1 / 8;
  margin: 0;
  max-width: 46ch;
  font: 450 clamp(20px, 2vw, 30px)/1.32 var(--sans);
  letter-spacing: -.022em;
}
.cg-meta {
  grid-column: 9 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px 18px;
  margin: 4px 0 0;
  align-self: start;
}
.cg-meta div:last-child { grid-column: 1 / 3; }
.cg-meta dt,
.cg-section-label,
.cg-card figcaption,
.cg-wide-media figcaption,
.cg-duo-grid figcaption,
.cg-use-grid figcaption,
.cg-video-caption {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.cg-meta dt { margin-bottom: 8px; opacity: .55; }
.cg-meta dd { margin: 0; font-size: 12px; line-height: 1.5; }
.cg-hero-media { margin: 0; }
.cg-hero-media img { width: 100%; max-height: 82svh; object-fit: cover; }

.cg-section {
  padding-top: clamp(90px, 12vw, 180px);
  padding-bottom: clamp(90px, 12vw, 180px);
  border-bottom: 1px solid var(--line);
}
.cg-section-label { margin-bottom: clamp(34px, 5vw, 72px); }
.cg-section-copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 20px;
  margin-bottom: clamp(55px, 8vw, 120px);
}
.cg-section-copy h2 {
  grid-column: 1 / 9;
  margin: 0;
  font: 500 clamp(54px, 8.8vw, 150px)/.82 var(--serif);
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.cg-section-copy p {
  grid-column: 9 / 13;
  align-self: end;
  margin: 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
}

.cg-asym-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(18px, 2.2vw, 36px);
  align-items: start;
}
.cg-card { margin: 0; }
.cg-card-large { grid-column: 1 / 7; }
.cg-card-tall { grid-column: 8 / 13; margin-top: 11vw; }
.cg-card img,
.cg-wide-media img,
.cg-duo-grid img,
.cg-use-grid img { width: 100%; height: auto; }
.cg-card figcaption,
.cg-wide-media figcaption,
.cg-duo-grid figcaption,
.cg-use-grid figcaption { display:flex; justify-content:space-between; gap:16px; padding-top:10px; }
.cg-card figcaption a { border-bottom: 1px solid currentColor; }

.cg-wide-media { margin: 0 0 clamp(36px, 6vw, 88px); }
.cg-wide-media img { max-height: 82svh; object-fit: cover; }
.cg-duo-grid {
  display: grid;
  grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: clamp(18px, 2.2vw, 36px);
  align-items: end;
}
.cg-duo-grid figure { margin: 0; }
.cg-duo-grid figure:first-child { width: 76%; justify-self: center; }

.cg-use-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(18px, 2vw, 32px);
  align-items: start;
}
.cg-use-grid figure { margin: 0; }
.cg-use-a { grid-column: 1 / 5; }
.cg-use-b { grid-column: 6 / 10; margin-top: 10vw !important; }
.cg-use-c { grid-column: 10 / 13; margin-top: 3vw !important; }

/* Embedded project PDF: progressive enhancement with a direct fallback link. */
.cg-pdf-viewer {
  margin-top: clamp(42px, 6vw, 84px);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.cg-pdf-viewer-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 14px;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Custom spread viewer: the uploaded menu already contains facing-page spreads. */
.cg-menu-track {
  display: flex;
  gap: clamp(18px, 2vw, 34px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page);
  padding: clamp(18px, 2.5vw, 34px) 0 clamp(20px, 3vw, 42px);
  scrollbar-width: thin;
  scrollbar-color: var(--vermillion) rgba(23,20,18,.12);
  -webkit-overflow-scrolling: touch;
}
.cg-menu-track:focus-visible { outline: 1px solid var(--vermillion); outline-offset: 6px; }
.cg-menu-sheet {
  flex: 0 0 min(86vw, 1320px);
  scroll-snap-align: center;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
}
.cg-menu-sheet img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78svh, 900px);
  object-fit: contain;
  box-shadow: 0 18px 50px rgba(23,20,18,.12);
}
.cg-menu-sheet-cover img { width: min(46%, 610px); }
.cg-menu-sheet figcaption {
  justify-self: stretch;
  padding-top: 10px;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .6;
}
.cg-menu-help {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .68;
}
.cg-pdf-frame {
  width: 100%;
  height: min(82svh, 920px);
  min-height: 620px;
  border: 1px solid var(--line);
  background: var(--cream-2);
}
.cg-pdf-fallback { margin: 12px 0 0; font-size: 13px; line-height: 1.5; }

.cg-motion { background: var(--espresso); color: var(--cream); }
.cg-motion .cg-section-copy h2 { color: var(--cream); }
.cg-motion .cg-section-label { color: rgba(241,235,221,.72); }
.cg-video-frame { overflow: hidden; background:#000; }
.cg-video-frame video { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; }
.cg-video-caption {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 18px;
  padding-top: 12px;
  color: rgba(241,235,221,.72);
}

.cg-case-footer {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-top:clamp(60px,8vw,110px);
  padding-bottom:clamp(60px,8vw,110px);
  background:var(--vermillion);
  color:var(--cream);
}
.cg-case-footer a {
  font:500 clamp(30px,4vw,64px)/.95 var(--serif);
  letter-spacing:-.045em;
  text-transform:uppercase;
}

.archive-empty { padding: 80px var(--page) 140px; border-top:1px solid var(--line); }

@media (max-width: 980px) {
  .cg-lead { grid-column: 1 / 13; }
  .cg-meta { grid-column: 1 / 13; grid-template-columns: repeat(3,1fr); margin-top: 26px; }
  .cg-meta div:last-child { grid-column: auto; }
  .cg-section-copy h2 { grid-column: 1 / 13; }
  .cg-section-copy p { grid-column: 7 / 13; margin-top: 24px; }
  .cg-card-large { grid-column: 1 / 8; }
  .cg-card-tall { grid-column: 8 / 13; }
  .cg-use-a { grid-column: 1 / 7; }
  .cg-use-b { grid-column: 7 / 13; margin-top: 12vw !important; }
  .cg-use-c { grid-column: 3 / 10; margin-top: 24px !important; }
}

@media (max-width: 640px) {
  .cg-hero { padding-top: 86px; }
  .cg-topline { align-items:flex-start; }
  .cg-hero h1 { font-size: clamp(62px, 23vw, 112px); line-height:.76; margin-top:32px; }
  .cg-intro-grid { grid-template-columns:1fr; }
  .cg-lead, .cg-meta { grid-column:1; }
  .cg-lead { font-size: clamp(19px, 5.7vw, 26px); line-height: 1.35; }
  .cg-meta { grid-template-columns:1fr 1fr; }
  .cg-meta div:last-child { grid-column:1 / 3; }
  .cg-hero-media img { min-height: 56svh; object-position:center; }
  .cg-section-copy { grid-template-columns:1fr; }
  .cg-section-copy h2, .cg-section-copy p { grid-column:1; }
  .cg-section-copy h2 { font-size:clamp(48px,15vw,78px); }
  .cg-section-copy p { margin-top:18px; }
  .cg-asym-grid, .cg-use-grid { display:grid; grid-template-columns:1fr; }
  .cg-card-large, .cg-card-tall, .cg-use-a, .cg-use-b, .cg-use-c { grid-column:1; margin-top:0 !important; }
  .cg-card-tall { width:82%; justify-self:end; margin-top:36px !important; }
  .cg-duo-grid { grid-template-columns:1fr; }
  .cg-duo-grid figure:first-child { width:82%; justify-self:start; }
  .cg-menu-track { gap: 14px; padding-top: 12px; }
  .cg-menu-sheet { flex-basis: 92vw; }
  .cg-menu-sheet-cover img { width: 72%; }
  .cg-menu-sheet img { max-height: 68svh; }
  .cg-menu-help { flex-direction: column; gap: 4px; }
  .cg-pdf-frame { height: 70svh; min-height: 480px; }
  .cg-video-frame video { aspect-ratio: 16/9; }
  .cg-video-caption { grid-template-columns:1fr; gap:5px; }
  .cg-case-footer { flex-direction:column; }
}


/* v0.4.4 — single menu presentation + stable table image rhythm */
.cg-table-photo {
  width: min(82%, 1180px);
  margin-inline: auto;
}
.cg-pdf-viewer-head { justify-content: flex-start; }
@media (max-width: 640px) {
  .cg-table-photo { width: 100%; }
}

/* v0.4.6 — OP Cosmetics case study */
.op-case {
  --op-black: #0d0b0c;
  --op-gold: #b8953e;
  --op-paper: #f6f2e8;
  overflow: hidden;
  background: var(--op-paper);
  color: var(--ink);
}
.op-hero,
.op-section,
.op-case-footer { padding-inline: var(--page); }
.op-hero { padding-top: clamp(100px, 12vw, 170px); }
.op-topline {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(23,20,18,.22);
  font: 500 10px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.op-hero h1 {
  margin: clamp(28px, 4vw, 60px) 0 clamp(34px, 5vw, 74px);
  color: var(--op-black);
  font: 500 clamp(76px, 14vw, 230px)/.73 var(--serif);
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.op-hero h1::first-line { color: var(--op-gold); }
.op-intro-grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 20px;
  margin-bottom: clamp(48px, 7vw, 100px);
}
.op-lead {
  grid-column: 1 / 8;
  margin: 0;
  max-width: 48ch;
  font: 450 clamp(20px, 2vw, 30px)/1.34 var(--sans);
  letter-spacing: -.022em;
}
.op-meta {
  grid-column: 9 / 13;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 18px;
  margin: 4px 0 0;
  align-self: start;
}
.op-meta div:last-child { grid-column: 1 / 3; }
.op-meta dt,
.op-section-label,
.op-product-card figcaption,
.op-profile-head,
.op-profile-sheet figcaption,
.op-track-help {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.op-meta dt { margin-bottom: 8px; opacity: .55; }
.op-meta dd { margin: 0; font-size: 12px; line-height: 1.5; }
.op-hero-media {
  margin: 0;
  background: var(--op-black);
}
.op-hero-media img {
  display: block;
  width: 100%;
  max-height: 82svh;
  object-fit: cover;
}
.op-section {
  padding-top: clamp(90px, 12vw, 180px);
  padding-bottom: clamp(90px, 12vw, 180px);
  border-bottom: 1px solid rgba(23,20,18,.22);
}
.op-section-label { margin-bottom: clamp(34px, 5vw, 72px); }
.op-section-copy {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 20px;
  margin-bottom: clamp(55px, 8vw, 120px);
}
.op-section-copy h2 {
  grid-column: 1 / 9;
  margin: 0;
  font: 500 clamp(54px, 8.6vw, 146px)/.82 var(--serif);
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.op-section-copy p {
  grid-column: 9 / 13;
  align-self: end;
  margin: 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.52;
}

/* Product line: horizontal sequence preserves the intentionally consistent render system. */
.op-product-track {
  display: flex;
  gap: clamp(16px, 2vw, 30px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 0 clamp(22px,3vw,42px);
  scrollbar-width: thin;
  scrollbar-color: var(--op-gold) rgba(23,20,18,.12);
  -webkit-overflow-scrolling: touch;
}
.op-product-track:focus-visible,
.op-profile-track:focus-visible { outline: 1px solid var(--op-gold); outline-offset: 6px; }
.op-product-card {
  flex: 0 0 clamp(290px, 34vw, 560px);
  scroll-snap-align: start;
  margin: 0;
  background: #fff;
}
.op-product-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.op-product-card figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 2px 0;
  background: var(--op-paper);
}
.op-track-help {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(23,20,18,.22);
  opacity: .65;
}

/* Editorial viewer: one presentation only, browsed as rendered pages. */
.op-editorial {
  background: var(--op-black);
  color: var(--cream);
  border-bottom-color: rgba(241,235,221,.25);
}
.op-editorial .op-section-copy h2 { color: var(--cream); }
.op-editorial .op-section-label { color: rgba(241,235,221,.7); }
.op-editorial .op-section-copy p { color: rgba(241,235,221,.78); }
.op-profile-viewer { border-top: 1px solid rgba(241,235,221,.28); padding-top: 14px; }
.op-profile-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(241,235,221,.7);
}
.op-profile-track {
  display: flex;
  gap: clamp(18px, 2vw, 34px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: clamp(22px, 3vw, 42px) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--op-gold) rgba(241,235,221,.14);
  -webkit-overflow-scrolling: touch;
}
.op-profile-sheet {
  flex: 0 0 min(86vw, 1320px);
  scroll-snap-align: center;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
}
.op-profile-sheet img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78svh, 920px);
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}
.op-profile-sheet-cover { flex-basis: min(48vw, 680px); }
.op-profile-sheet figcaption {
  justify-self: stretch;
  padding-top: 10px;
  color: rgba(241,235,221,.58);
}
.op-editorial .op-track-help {
  border-top-color: rgba(241,235,221,.25);
  color: rgba(241,235,221,.62);
}
.op-case-footer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: clamp(60px,8vw,110px);
  padding-bottom: clamp(60px,8vw,110px);
  background: var(--op-gold);
  color: var(--op-black);
}
.op-case-footer a {
  font: 500 clamp(30px,4vw,64px)/.95 var(--serif);
  letter-spacing: -.045em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .op-lead { grid-column: 1 / 13; }
  .op-meta { grid-column: 1 / 13; grid-template-columns: repeat(3,1fr); margin-top: 26px; }
  .op-meta div:last-child { grid-column: auto; }
  .op-section-copy h2 { grid-column: 1 / 13; }
  .op-section-copy p { grid-column: 7 / 13; margin-top: 24px; }
}

@media (max-width: 640px) {
  .op-hero { padding-top: 86px; }
  .op-topline { align-items: flex-start; }
  .op-hero h1 { font-size: clamp(60px, 22vw, 108px); line-height: .77; margin-top: 32px; }
  .op-intro-grid { grid-template-columns: 1fr; }
  .op-lead, .op-meta { grid-column: 1; }
  .op-lead { font-size: clamp(19px,5.7vw,26px); line-height: 1.36; }
  .op-meta { grid-template-columns: 1fr 1fr; }
  .op-meta div:last-child { grid-column: 1 / 3; }
  .op-hero-media img { min-height: 52svh; object-position: center; }
  .op-section-copy { grid-template-columns: 1fr; }
  .op-section-copy h2, .op-section-copy p { grid-column: 1; }
  .op-section-copy h2 { font-size: clamp(47px,14.5vw,76px); }
  .op-section-copy p { margin-top: 18px; }
  .op-product-card { flex-basis: 82vw; }
  .op-profile-sheet { flex-basis: 92vw; }
  .op-profile-sheet-cover { flex-basis: 76vw; }
  .op-profile-sheet img { max-height: 67svh; }
  .op-track-help { flex-direction: column; gap: 4px; }
  .op-case-footer { flex-direction: column; }
}

/* v0.4.7 - paginated OP Cosmetics company-profile viewer */
.op-book {
  border-top: 1px solid rgba(241,235,221,.28);
  padding-top: 14px;
}
.op-book-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 12px 0;
  border-block: 1px solid rgba(241,235,221,.22);
}
.op-book-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cream);
  padding: 8px 0;
  cursor: pointer;
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.op-book-button:first-child { justify-self: start; }
.op-book-button:last-child { justify-self: end; }
.op-book-button:disabled { opacity: .28; cursor: default; }
.op-book-counter {
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .08em;
  color: rgba(241,235,221,.72);
}
.op-book-pages {
  display: grid;
  gap: 26px;
  padding: clamp(24px, 4vw, 54px) 0;
  outline: none;
}
.op-book-pages:focus-visible {
  outline: 1px solid var(--op-gold);
  outline-offset: 6px;
}
.op-book-page {
  width: min(86vw, 980px);
  margin: 0 auto;
}
.op-book-page img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78svh;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
}
.op-book-page figcaption {
  padding-top: 10px;
  color: rgba(241,235,221,.58);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* Only hide non-current pages after JS proves it is running. */
.op-book.is-ready .op-book-page { display: none; }
.op-book.is-ready .op-book-page.is-active { display: block; }

@media (max-width: 640px) {
  .op-book-toolbar { margin-top: 16px; }
  .op-book-page { width: 92vw; }
  .op-book-page img { max-height: 70svh; }
}


/* v0.4.8 — native embedded PDF viewer; no JS required */
.op-hero-product {
  background: #fff;
  min-height: min(76svh, 900px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.op-hero-product img {
  width: min(72vw, 980px);
  height: min(72svh, 820px);
  object-fit: contain;
  max-height: none;
}
.op-pdf-viewer {
  border-top: 1px solid rgba(241,235,221,.28);
  padding-top: 14px;
}
.op-pdf-shell {
  width: 100%;
  height: clamp(620px, 82svh, 980px);
  margin-top: clamp(22px, 3vw, 42px);
  background: #1a1a1a;
  border: 1px solid rgba(241,235,221,.22);
  overflow: hidden;
}
.op-pdf-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.op-pdf-help a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The old image-based book is no longer used. */
.op-book,
.op-book-toolbar,
.op-book-pages {
  /* kept harmlessly for backwards compatibility with cached markup */
}
@media (max-width: 640px) {
  .op-hero-product { min-height: 58svh; }
  .op-hero-product img { width: 92vw; height: 52svh; }
  .op-pdf-shell { height: 72svh; min-height: 520px; }
}


/* v0.4.9 — OP Company Profile uses the same scroll-snap book viewer as the Curtigghiu menu. */
.op-company-book {
  margin-top: clamp(42px, 6vw, 84px);
  border-top: 1px solid rgba(241,235,221,.28);
  padding-top: 14px;
}
.op-company-book .op-profile-head {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 14px;
  color: rgba(241,235,221,.70);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.op-company-book .op-profile-track {
  display: flex;
  gap: clamp(18px, 2vw, 34px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page);
  padding: clamp(18px, 2.5vw, 34px) 0 clamp(20px, 3vw, 42px);
  scrollbar-width: thin;
  scrollbar-color: var(--op-gold) rgba(241,235,221,.14);
  -webkit-overflow-scrolling: touch;
}
.op-company-book .op-profile-track:focus-visible {
  outline: 1px solid var(--op-gold);
  outline-offset: 6px;
}
.op-company-book .op-profile-sheet {
  flex: 0 0 min(86vw, 1320px);
  scroll-snap-align: center;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
}
.op-company-book .op-profile-sheet img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78svh, 900px);
  object-fit: contain;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.op-company-book .op-profile-sheet-cover img {
  width: min(46%, 610px);
}
.op-company-book .op-profile-sheet figcaption {
  justify-self: stretch;
  padding-top: 10px;
  color: rgba(241,235,221,.58);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.op-company-book .op-profile-help {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(241,235,221,.25);
  color: rgba(241,235,221,.62);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* Remove the native-PDF shell introduced in v0.4.8: the rendered-page book is now the primary viewer. */
.op-company-book + .op-pdf-shell,
.op-company-book .op-pdf-shell { display: none; }

@media (max-width: 640px) {
  .op-company-book .op-profile-track { gap: 14px; padding-top: 12px; }
  .op-company-book .op-profile-sheet { flex-basis: 92vw; }
  .op-company-book .op-profile-sheet-cover img { width: 72%; }
  .op-company-book .op-profile-sheet img { max-height: 68svh; }
  .op-company-book .op-profile-help { flex-direction: column; gap: 4px; }
}

/* v0.5.0 — Wesley Barrell case study */
.wb-case {
  --wb-ink: #211e1b;
  --wb-paper: #f2eee5;
  --wb-muted: #d8d0c2;
  overflow: hidden;
  background: var(--cream);
  color: var(--wb-ink);
}
.wb-hero,
.wb-section,
.wb-case-footer { padding-inline: var(--page); }
.wb-hero { padding-top: clamp(100px, 12vw, 170px); }
.wb-topline {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font: 500 10px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.wb-hero h1 {
  margin: clamp(24px, 4vw, 58px) 0 clamp(34px, 5vw, 72px);
  color: var(--espresso);
  font: 500 clamp(70px, 14.2vw, 230px)/.75 var(--serif);
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.wb-intro-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 20px;
  margin-bottom: clamp(48px, 7vw, 100px);
}
.wb-lead {
  grid-column: 1 / 8;
  max-width: 48ch;
  margin: 0;
  font: 450 clamp(20px, 2vw, 30px)/1.34 var(--sans);
  letter-spacing: -.022em;
}
.wb-meta {
  grid-column: 9 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px 18px;
  margin: 4px 0 0;
}
.wb-meta div:last-child { grid-column: 1 / 3; }
.wb-meta dt,
.wb-section-label,
.wb-hero-media figcaption,
.wb-campaign-card figcaption,
.wb-photo figcaption,
.wb-drawing-grid figcaption,
.wb-track-help,
.wb-talk-note span {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.wb-meta dt { margin-bottom: 8px; opacity: .52; }
.wb-meta dd { margin: 0; font-size: 12px; line-height: 1.5; }
.wb-hero-media { margin: 0; }
.wb-hero-media img {
  width: 100%;
  height: min(72svh, 880px);
  object-fit: cover;
  object-position: center;
}
.wb-hero-media figcaption,
.wb-campaign-card figcaption,
.wb-drawing-grid figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 10px;
}
.wb-section {
  padding-top: clamp(90px, 12vw, 180px);
  padding-bottom: clamp(90px, 12vw, 180px);
  border-bottom: 1px solid var(--line);
}
.wb-section-label { margin-bottom: clamp(34px, 5vw, 72px); }
.wb-section-copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 20px;
  margin-bottom: clamp(52px, 7vw, 110px);
}
.wb-section-copy h2 {
  grid-column: 1 / 9;
  margin: 0;
  font: 500 clamp(54px, 8.8vw, 150px)/.82 var(--serif);
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.wb-section-copy p {
  grid-column: 9 / 13;
  align-self: end;
  max-width: 44ch;
  margin: 0;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.52;
}

.wb-advertising { background: var(--wb-paper); }
.wb-campaign-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 3vw, 48px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 0 clamp(22px, 3vw, 42px);
  scrollbar-width: thin;
  scrollbar-color: var(--espresso) rgba(23,20,18,.12);
  -webkit-overflow-scrolling: touch;
}
.wb-campaign-card {
  flex: 0 0 min(66vw, 560px);
  margin: 0;
  scroll-snap-align: start;
}
.wb-campaign-card img {
  width: 100%;
  height: auto;
  max-height: 78svh;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 20px 55px rgba(23,20,18,.10);
}
.wb-track-help {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  opacity: .62;
}

.wb-photo-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(18px, 2vw, 34px);
  align-items: start;
}
.wb-photo { margin: 0; }
.wb-photo img { width: 100%; height: auto; display: block; }
.wb-photo figcaption { padding-top: 9px; opacity: .64; }
.wb-photo-1 { grid-column: 1 / 8; }
.wb-photo-2 { grid-column: 9 / 13; margin-top: 8vw; }
.wb-photo-3 { grid-column: 1 / 5; margin-top: 4vw; }
.wb-photo-4 { grid-column: 5 / 10; margin-top: 10vw; }
.wb-photo-5 { grid-column: 10 / 13; margin-top: 3vw; }
.wb-photo-6 { grid-column: 1 / 7; margin-top: 5vw; }
.wb-photo-7 { grid-column: 8 / 13; margin-top: 11vw; }

.wb-drawings {
  background: var(--espresso);
  color: var(--cream);
}
.wb-drawings .wb-section-copy h2 { color: var(--cream); }
.wb-drawings .wb-section-label { color: rgba(241,235,221,.70); }
.wb-drawing-grid {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: clamp(22px, 3vw, 52px);
  align-items: start;
}
.wb-drawing-grid figure { margin: 0; }
.wb-drawing-grid img {
  width: 100%;
  height: min(76svh, 900px);
  object-fit: contain;
  background: #fff;
}
.wb-drawing-grid figure:last-child { margin-top: 8vw; }
.wb-drawing-grid figcaption { color: rgba(241,235,221,.72); }

.wb-design-talk {
  background: #e8e3d9;
}
.wb-design-talk-copy h2 { color: var(--espresso); }
.wb-talk-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(24px, 3vw, 52px);
  align-items: end;
}
.wb-talk-media { grid-column: 1 / 9; margin: 0; }
.wb-talk-media img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 24px 70px rgba(23,20,18,.10);
}
.wb-talk-note {
  grid-column: 10 / 13;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.wb-talk-note span { display: block; opacity: .52; margin-top: 24px; }
.wb-talk-note span:first-child { margin-top: 0; }
.wb-talk-note p {
  margin: 7px 0 0;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.5;
}
.wb-case-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
  background: var(--ink);
  color: var(--cream);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .wb-intro-grid,
  .wb-section-copy,
  .wb-photo-grid,
  .wb-talk-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .wb-lead { grid-column: 1 / 7; }
  .wb-meta { grid-column: 1 / 7; margin-top: 22px; }
  .wb-section-copy h2 { grid-column: 1 / 7; }
  .wb-section-copy p { grid-column: 2 / 7; margin-top: 22px; }
  .wb-photo-1 { grid-column: 1 / 7; }
  .wb-photo-2 { grid-column: 2 / 7; margin-top: 8vw; }
  .wb-photo-3 { grid-column: 1 / 4; }
  .wb-photo-4 { grid-column: 4 / 7; }
  .wb-photo-5 { grid-column: 1 / 4; }
  .wb-photo-6 { grid-column: 3 / 7; }
  .wb-photo-7 { grid-column: 1 / 7; }
  .wb-talk-media { grid-column: 1 / 7; }
  .wb-talk-note { grid-column: 2 / 7; margin-top: 30px; }
}

@media (max-width: 640px) {
  .wb-topline { flex-direction: column; gap: 8px; }
  .wb-hero h1 { font-size: clamp(60px, 20vw, 104px); line-height: .79; }
  .wb-meta { grid-template-columns: 1fr 1fr; }
  .wb-lead { font-size: 19px; line-height: 1.42; }
  .wb-hero-media img { height: 58svh; }
  .wb-section-copy p { grid-column: 1 / 7; }
  .wb-campaign-card { flex-basis: 82vw; }
  .wb-track-help { flex-direction: column; gap: 4px; }
  .wb-photo-grid { display: block; }
  .wb-photo { margin: 0 0 34px !important; }
  .wb-drawing-grid { grid-template-columns: 1fr; }
  .wb-drawing-grid figure:last-child { margin-top: 28px; }
  .wb-drawing-grid img { height: auto; max-height: 72svh; }
  .wb-talk-note { grid-column: 1 / 7; }
  .wb-case-footer { flex-direction: column; }
}

/* v0.5.2 — Work archive sticky filters: keep the sub-navigation below the fixed site header. */
.work-archive-page .work-filters {
  top: 52px;
  z-index: 80;
}

@media (max-width: 640px) {
  .work-archive-page .work-filters {
    top: 49px;
  }
}

/* v0.5.3 — Work archive header layer.
   The fixed primary navigation gets an opaque background on /work/ so archive
   content cannot become visible again in the strip above the sticky filters. */
body.post-type-archive-work .site-header,
body:has(.work-archive-page) .site-header {
  background: var(--cream);
  color: var(--ink);
  mix-blend-mode: normal;
  border-bottom: 1px solid var(--line);
}

/* Keep the two navigation layers visually continuous and fully opaque. */
.work-archive-page .work-filters {
  background: var(--cream);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* v0.6.0 — StudyTrack academic development case study.
   Uses the existing editorial palette, type system and 12-column rhythm. */
.studytrack-card-cover {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 34px);
  background: var(--espresso);
  color: var(--cream);
}
.studytrack-card-monogram {
  position: absolute;
  z-index: 1;
  right: clamp(-90px, -6vw, -34px);
  bottom: clamp(-60px, -4vw, -24px);
  width: min(56%, 340px);
  height: auto;
  opacity: .96;
  pointer-events: none;
}
.studytrack-card-kicker,
.studytrack-card-stack {
  position: relative;
  z-index: 2;
  max-width: 28ch;
  font: 500 clamp(8px, .72vw, 11px)/1.45 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.studytrack-card-cover strong {
  position: relative;
  z-index: 2;
  margin: auto 0;
  color: var(--cream);
  font: 500 clamp(58px, 7vw, 118px)/.72 var(--serif);
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.studytrack-case {
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
}
.st-hero,
.st-section,
.st-case-footer {
  padding-inline: var(--page);
}
.st-hero {
  padding-top: clamp(100px, 12vw, 170px);
  padding-bottom: clamp(70px, 9vw, 130px);
}
.st-topline {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font: 500 10px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.st-topline a,
.st-case-footer a {
  text-decoration: none;
}
.st-topline a:focus-visible,
.st-case-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
.st-hero-title-wrap {
  margin: clamp(30px, 4vw, 60px) 0 clamp(42px, 6vw, 84px);
}
.st-eyebrow,
.st-section-label,
.st-cover-kicker,
.st-cover-stack,
.st-feature-card > span,
.st-tech-grid > div > span,
.st-architecture-index,
.st-screen figcaption {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.st-eyebrow {
  margin: 0 0 18px;
  color: var(--vermillion);
}
.st-hero h1 {
  margin: 0;
  color: var(--vermillion);
  font: 500 clamp(76px, 15vw, 245px)/.72 var(--serif);
  letter-spacing: -.078em;
  text-transform: uppercase;
}
.st-intro-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: clamp(52px, 8vw, 110px);
}
.st-intro-copy {
  grid-column: 1 / 8;
}
.st-lead {
  margin: 0;
  max-width: 43ch;
  font: 450 clamp(21px, 2.25vw, 34px)/1.28 var(--sans);
  letter-spacing: -.028em;
}
.st-positioning {
  max-width: 60ch;
  margin: 26px 0 0;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  opacity: .72;
}
.st-meta {
  grid-column: 9 / 13;
  margin: 3px 0 0;
  display: grid;
  gap: 25px;
  align-self: start;
}
.st-meta div {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.st-meta dt {
  margin-bottom: 7px;
  font: 500 10px/1.35 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .55;
}
.st-meta dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.st-hero-cover {
  position: relative;
  min-height: min(72svh, 820px);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  padding: clamp(24px, 3vw, 46px);
  background: var(--espresso);
  color: var(--cream);
  isolation: isolate;
}
.st-cover-monogram {
  position: absolute;
  z-index: 0;
  right: clamp(-100px, -5vw, -28px);
  bottom: clamp(-70px, -4vw, -20px);
  width: min(46vw, 660px);
  height: auto;
  opacity: .95;
  pointer-events: none;
}
.st-cover-kicker,
.st-cover-stack,
.st-cover-title {
  position: relative;
  z-index: 1;
}
.st-cover-kicker {
  grid-column: 1 / 6;
  grid-row: 1;
}
.st-cover-title {
  grid-column: 1 / 11;
  grid-row: 2;
  align-self: center;
  color: var(--cream);
  font: 500 clamp(72px, 13vw, 220px)/.7 var(--serif);
  letter-spacing: -.085em;
  text-transform: uppercase;
}
.st-cover-stack {
  grid-column: 1 / 8;
  grid-row: 3;
  align-self: end;
  max-width: 60ch;
}

.st-section {
  padding-top: clamp(90px, 11vw, 170px);
  padding-bottom: clamp(90px, 11vw, 170px);
  border-bottom: 1px solid var(--line);
}
.st-section-label {
  margin-bottom: clamp(34px, 5vw, 72px);
}
.st-section-copy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  align-items: end;
}
.st-section-copy h2,
.st-split-panel h2 {
  margin: 0;
  font: 500 clamp(52px, 8.5vw, 142px)/.82 var(--serif);
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.st-section-copy h2 {
  grid-column: 1 / 9;
}
.st-section-copy > p,
.st-section-copy > .st-copy-column {
  grid-column: 9 / 13;
}
.st-section-copy > p,
.st-copy-column p,
.st-split-panel > p {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
}
.st-copy-column p + p {
  margin-top: 22px;
}
.st-section-copy-compact {
  margin-bottom: clamp(50px, 7vw, 100px);
}

.st-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
}
.st-split-panel {
  min-height: 620px;
  padding: clamp(28px, 4.5vw, 74px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.st-split-panel + .st-split-panel {
  border-left: 1px solid var(--line);
}
.st-split-panel .st-section-label {
  margin-bottom: clamp(50px, 8vw, 120px);
}
.st-split-panel h2 {
  margin-bottom: auto;
}
.st-split-panel > p {
  margin-top: clamp(38px, 6vw, 90px);
}
.st-split-panel-dark {
  background: var(--espresso);
  color: var(--cream);
  border-color: rgba(241,235,221,.25);
}
.st-split-panel-dark .st-section-label {
  opacity: .65;
}
.st-plain-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(241,235,221,.3);
}
.st-plain-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(241,235,221,.22);
  font-size: 13px;
  line-height: 1.45;
}

.st-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.st-feature-card {
  min-height: 290px;
  padding: clamp(22px, 2.7vw, 42px);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.st-feature-card > span {
  color: var(--vermillion);
}
.st-feature-card h3 {
  margin: auto 0 16px;
  font: 500 clamp(34px, 3.7vw, 60px)/.9 var(--serif);
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.st-feature-card p {
  margin: 0;
  max-width: 36ch;
  font-size: 14px;
  line-height: 1.5;
}

.st-architecture {
  background: var(--espresso);
  color: var(--cream);
}
.st-architecture .st-section-copy > p {
  color: rgba(241,235,221,.76);
}
.st-architecture-flow {
  margin: clamp(60px, 8vw, 120px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(241,235,221,.3);
}
.st-architecture-flow li {
  position: relative;
  min-height: 250px;
  padding: clamp(22px, 3vw, 42px);
  display: flex;
  flex-direction: column;
}
.st-architecture-flow li + li {
  border-left: 1px solid rgba(241,235,221,.3);
}
.st-architecture-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  right: -18px;
  top: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(241,235,221,.45);
  border-radius: 50%;
  background: var(--espresso);
  font: 500 16px/1 var(--mono);
}
.st-architecture-index {
  color: var(--vermillion);
}
.st-architecture-flow strong {
  margin: auto 0 18px;
  max-width: 15ch;
  font: 500 clamp(26px, 3vw, 48px)/.92 var(--serif);
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.st-architecture-flow small {
  color: rgba(241,235,221,.65);
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .035em;
  text-transform: uppercase;
}

.st-screen-grid {
  margin-top: clamp(60px, 8vw, 115px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 82px) clamp(16px, 2vw, 30px);
  align-items: start;
}
.st-screen {
  grid-column: span 6;
  margin: 0;
}
.st-screen:nth-child(3n + 1) {
  grid-column: 1 / 9;
}
.st-screen:nth-child(3n + 2) {
  grid-column: 9 / 13;
  margin-top: 8vw;
}
.st-screen:nth-child(3n + 3) {
  grid-column: 3 / 11;
}
.st-screen img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--cream-2);
}
.st-screen figcaption {
  padding-top: 10px;
  opacity: .65;
}

.st-tech-grid {
  margin-top: clamp(60px, 8vw, 120px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.st-tech-grid > div {
  min-height: 360px;
  padding: clamp(24px, 3vw, 44px) 0;
}
.st-tech-grid > div:first-child {
  padding-right: clamp(28px, 5vw, 80px);
}
.st-tech-grid > div + div {
  padding-left: clamp(28px, 5vw, 80px);
  border-left: 1px solid var(--line);
}
.st-tech-grid > div > span {
  color: var(--vermillion);
}
.st-tech-grid ul,
.st-next-list {
  margin: clamp(44px, 6vw, 88px) 0 0;
  padding: 0;
  list-style: none;
}
.st-tech-grid li,
.st-next-list li {
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.45;
}
.st-tech-grid li:last-child,
.st-next-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.st-outcome {
  background: var(--tobacco);
  color: var(--cream);
}
.st-outcome .st-section-copy h2 {
  color: var(--cream);
}
.st-outcome .st-copy-column p {
  color: rgba(241,235,221,.88);
}
.st-next-list {
  margin-top: clamp(60px, 8vw, 120px);
}
.st-next-list li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  font: 500 clamp(25px, 3.4vw, 52px)/1 var(--serif);
  letter-spacing: -.04em;
}
.st-next-list li::before {
  content: counter(list-item, decimal-leading-zero);
  padding-top: 4px;
  color: var(--vermillion);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .07em;
}

.st-case-footer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: clamp(60px, 8vw, 110px);
  padding-bottom: clamp(60px, 8vw, 110px);
  background: var(--vermillion);
  color: var(--cream);
}
.st-case-footer a {
  font: 500 clamp(30px, 4vw, 64px)/.95 var(--serif);
  letter-spacing: -.045em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .st-intro-copy { grid-column: 1 / 8; }
  .st-meta { grid-column: 8 / 13; }
  .st-section-copy h2 { grid-column: 1 / 13; }
  .st-section-copy > p,
  .st-section-copy > .st-copy-column { grid-column: 7 / 13; margin-top: 28px; }
  .st-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-architecture-flow { grid-template-columns: 1fr; }
  .st-architecture-flow li { min-height: 210px; }
  .st-architecture-flow li + li { border-left: 0; border-top: 1px solid rgba(241,235,221,.3); }
  .st-architecture-flow li:not(:last-child)::after {
    content: "↓";
    right: 50%;
    top: auto;
    bottom: -18px;
    transform: translateX(50%);
  }
}

@media (max-width: 640px) {
  .studytrack-card-cover { padding: 18px; }
  .studytrack-card-monogram { width: 72%; right: -24%; bottom: -8%; }
  .studytrack-card-cover strong { font-size: clamp(58px, 18vw, 90px); }

  .st-hero { padding-top: 86px; padding-bottom: 72px; }
  .st-topline { flex-direction: column; gap: 8px; }
  .st-hero-title-wrap { margin-top: 32px; }
  .st-hero h1 { font-size: clamp(48px, 14.7vw, 74px); line-height: .77; letter-spacing: -.07em; }
  .st-intro-grid { grid-template-columns: 1fr; }
  .st-intro-copy,
  .st-meta { grid-column: 1; }
  .st-meta { margin-top: 28px; }
  .st-lead { font-size: 21px; line-height: 1.38; }
  .st-hero-cover {
    min-height: 66svh;
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .st-cover-kicker,
  .st-cover-title,
  .st-cover-stack { grid-column: 1; }
  .st-cover-title { font-size: clamp(68px, 23vw, 112px); line-height: .72; }
  .st-cover-stack { max-width: 30ch; }
  .st-cover-monogram { width: 78vw; right: -25vw; bottom: -7vw; }

  .st-section { padding-top: 76px; padding-bottom: 76px; }
  .st-section-copy { grid-template-columns: 1fr; }
  .st-section-copy h2,
  .st-section-copy > p,
  .st-section-copy > .st-copy-column { grid-column: 1; }
  .st-section-copy h2,
  .st-split-panel h2 { font-size: clamp(48px, 15vw, 80px); }
  .st-section-copy > p,
  .st-section-copy > .st-copy-column { margin-top: 24px; }

  .st-split-grid { grid-template-columns: 1fr; }
  .st-split-panel { min-height: 520px; padding: 24px 18px; }
  .st-split-panel + .st-split-panel { border-left: 0; border-top: 1px solid var(--line); }
  .st-feature-grid { grid-template-columns: 1fr; }
  .st-feature-card { min-height: 230px; padding: 22px 18px; }
  .st-feature-card h3 { font-size: clamp(38px, 12vw, 60px); }

  .st-architecture-flow li { min-height: 190px; padding: 22px 18px; }
  .st-architecture-flow strong { font-size: 34px; }

  .st-screen-grid { display: block; }
  .st-screen:nth-child(n) { margin: 0 0 38px; }

  .st-tech-grid { grid-template-columns: 1fr; }
  .st-tech-grid > div { min-height: auto; padding: 30px 0; }
  .st-tech-grid > div:first-child { padding-right: 0; }
  .st-tech-grid > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .st-next-list li { grid-template-columns: 42px 1fr; font-size: clamp(24px, 8vw, 38px); }
  .st-case-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .studytrack-card-cover,
  .st-hero-cover,
  .st-section,
  .st-case-footer {
    scroll-behavior: auto;
  }
}