/* ─────────────────────────────────────────────────────────────
   App surface · collection card · cover screen
   Everything inside .app is sized in container units so the whole
   UI scales with the (simulated) foldable display.
   ───────────────────────────────────────────────────────────── */

.host {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--cream);
}

.app {
  position: absolute;
  inset: 0;
  container-type: size;
  container-name: app;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}

/* faint foldable crease — vertical when the device lies flat */
.app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: linear-gradient(
    90deg,
    transparent calc(50% - 1.5%),
    rgba(255, 255, 255, 0.1) 50%,
    rgba(0, 0, 0, 0.02) calc(50% + 1%),
    transparent calc(50% + 1.8%)
  );
  opacity: 0.4;
  transition: opacity 0.4s var(--ease);
  display: none;
}
.app[data-posture="laptop"]::after,
.app[data-posture="cover"]::after { opacity: 0; }

/* ── views ───────────────────────────────────────────────────── */
.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.42s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.42s;
  will-change: opacity, transform;
}

.app[data-posture="flat"] .view--collection,
.app[data-posture="laptop"] .view--computer,
.app[data-posture="cover"] .view--cover {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* keep the old view painted while it folds away */
.app[data-transition] .view--collection { visibility: visible !important; }

/* the screen is "off" while the lid is down */
.app[data-posture="flat"] .view--computer { transform: scale(0.965); }
.app[data-posture="laptop"] .view--computer { transform: none; }
.app[data-posture="cover"] .view--collection { transform: scale(1.015); }

/* ═════════════════════════════ COLLECTION ═════════════════════════════ */

.view--collection {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 3.4cqw 4.4cqw 2.6cqw;
  background: var(--cream);
  z-index: 2;
}

.coll-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2cqw;
}

.wordmark { display: flex; flex-direction: column; gap: 0.42cqw; padding-left: 0.2cqw; }

.wm-name {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.65cqw, 30px);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.wm-sub {
  font-family: var(--font-sans);
  font-size: clamp(6px, 0.72cqw, 9px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #a29ba1;
}

.coll-tools { display: flex; align-items: center; gap: 1.5cqw; }

.round-btn {
  width: clamp(24px, 3cqw, 38px);
  height: clamp(24px, 3cqw, 38px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0.1cqw 0.3cqw rgba(25, 24, 21, 0.06), inset 0 0 0 1px rgba(25, 24, 21, 0.05);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-size: clamp(10px, 1.15cqw, 15px);
  line-height: 1;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.round-btn:hover { background: #fff; transform: translateY(-1px); }
.round-btn:active { transform: scale(0.94); }

.status {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  padding-left: 1.1cqw;
  min-height: 3cqw;
  color: var(--ink-2);
}

.status-time {
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.95cqw, 11px);
  letter-spacing: 0.02em;
}

.status-batt {
  width: clamp(11px, 1.5cqw, 18px);
  height: clamp(6px, 0.72cqw, 9px);
  border: 1px solid #6f6963;
  border-radius: 1.5px;
  position: relative;
  display: block;
  opacity: 0.75;
}
.status-batt::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  width: 2px; height: 40%;
  transform: translateY(-50%);
  background: #6f6963;
  border-radius: 0 1px 1px 0;
}
.status-batt i { position: absolute; inset: 1px; width: 62%; background: #4b4741; border-radius: 1px; }

.status-ring {
  width: clamp(10px, 1.35cqw, 16px);
  height: clamp(10px, 1.35cqw, 16px);
  border-radius: 50%;
  border: 1px solid rgba(75, 71, 65, 0.5);
  position: relative;
  opacity: 0.8;
}
.status-ring::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  border: 1px solid rgba(75, 71, 65, 0.5);
}

/* ── track / slides ───────────────────────────────────────────── */
.coll-track-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 -1cqw;
}

.coll-track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  cursor: grab;
}
.coll-track.is-dragging { cursor: grabbing; transition: none !important; }
.coll-track.is-dragging .slide-art { pointer-events: none; }

.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.2cqw;
  padding: 0 1cqw;
  user-select: none;
}

.slide-art {
  flex: 0 0 auto;
  height: 41cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  perspective: 1100px;
}

.slide-art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1.4cqw 1.6cqw rgba(46, 38, 30, 0.13));
  transform: rotateX(0deg) translateY(0);
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
}
.slide-art:hover svg { transform: translateY(-0.7cqw) rotateX(1.6deg); }

.slide-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3cqw;
  align-items: start;
  padding: 0 0.4cqw 0.6cqw;
  max-width: 100%;
}

.copy-col { max-width: 76%; display: flex; flex-direction: column; gap: 0.55cqw; }

.copy-col .eyebrow { font-size: clamp(6px, 0.82cqw, 10px); color: #7d7671; }

.copy-col .micro {
  font-family: var(--font-mono);
  font-size: clamp(6px, 0.78cqw, 9px);
  letter-spacing: 0.04em;
  color: #b3acb1;
  margin-bottom: 0.15cqw;
}

.copy-col .title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 4.55cqw, 54px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0.1cqw 0 0.7cqw;
  color: var(--ink);
}

.copy-col .lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(11px, 1.52cqw, 20px);
  line-height: 1.3;
  color: #4a4641;
  margin: 0 0 1.1cqw;
  max-width: 24em;
}

.copy-col .specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.92cqw, 11px);
  line-height: 1.35;
  color: #6c6661;
  letter-spacing: -0.005em;
}
.copy-col .specs li { display: flex; gap: 0.85em; align-items: baseline; }
.copy-col .specs li::before {
  content: "";
  width: 1.1em;
  height: 1px;
  background: currentColor;
  flex: 0 0 auto;
  transform: translateY(-0.28em);
  opacity: 0.55;
}

.copy-year {
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.92cqw, 11px);
  letter-spacing: 0.08em;
  color: #8d8792;
  padding-top: 1.1cqw;
  white-space: nowrap;
}

/* ── footer / pager ───────────────────────────────────────────── */
.coll-foot {
  display: flex;
  flex-direction: column;
  gap: 1.7cqw;
  padding-top: 0.6cqw;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.05cqw;
}

.chev {
  width: clamp(20px, 2.6cqw, 32px);
  height: clamp(20px, 2.6cqw, 32px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #4b4741;
  font-size: clamp(11px, 1.35cqw, 17px);
  line-height: 1;
  padding-bottom: 0.18em;
  transition: background 0.2s, opacity 0.2s, transform 0.2s var(--ease);
  opacity: 0.72;
}
.chev:hover { background: rgba(25, 24, 21, 0.06); opacity: 1; }
.chev:active { transform: scale(0.9); }
.chev[disabled] { opacity: 0.2; pointer-events: none; }

.ticks { display: flex; align-items: center; gap: 0.55cqw; }

.tick {
  width: clamp(5px, 1.15cqw, 16px);
  height: 2px;
  border-radius: 2px;
  background: #cec7cd;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease), width 0.35s var(--ease);
}
.tick.is-on { background: var(--ink); }
.tick.is-near { background: #a49da2; }

.count {
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.88cqw, 10px);
  letter-spacing: 0.06em;
  color: #5f5a55;
  display: flex;
  gap: 0.25em;
  margin-left: 0.5cqw;
}
.count b { font-weight: 500; color: var(--ink); }
.count span { color: #b0a9ae; }

.swipe-hint {
  font-family: var(--font-sans);
  font-size: clamp(7px, 0.9cqw, 10px);
  letter-spacing: 0.02em;
  color: #9b9499;
  margin-left: 0.6cqw;
}

.open-cta {
  display: flex;
  align-items: center;
  gap: 1.15cqw;
  padding: 1.35cqw 0.4cqw 0.3cqw;
  border-top: 1px solid var(--rule);
  text-align: left;
  color: #55504b;
  transition: color 0.2s;
  width: 100%;
}
.open-cta:hover { color: var(--ink); }
.cta-ico {
  width: clamp(16px, 2.1cqw, 26px);
  height: clamp(16px, 2.1cqw, 26px);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  opacity: 0.7;
}
.cta-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.25; }
.cta-txt { display: flex; flex-direction: column; gap: 0.18cqw; }
.cta-txt b { font-family: var(--font-sans); font-weight: 500; font-size: clamp(8px, 1.02cqw, 12px); letter-spacing: 0.01em; }
.cta-txt i { font-style: normal; font-size: clamp(6.5px, 0.78cqw, 9px); color: #a0999e; letter-spacing: 0.01em; }
.cta-key {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: clamp(6.5px, 0.8cqw, 9px);
  letter-spacing: 0.12em;
  color: #b3acb1;
  border: 1px solid #ddd6dc;
  border-radius: 3px;
  padding: 0.35em 0.4em;
}

/* ── index sheet ──────────────────────────────────────────────── */
.index-panel {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--cream-2);
  padding: 4cqw 4.6cqw 3.4cqw;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
  box-shadow: 0 -2cqw 4cqw rgba(25, 24, 21, 0.12);
}
.index-panel[hidden] { display: flex; visibility: hidden; }
.index-panel.is-open { transform: none; visibility: visible; }

.index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2cqw;
  border-bottom: 1px solid var(--rule);
}
.index-head .eyebrow { font-size: clamp(7px, 0.85cqw, 10px); }
.index-head button {
  font-size: clamp(16px, 2.3cqw, 30px);
  line-height: 0.7;
  color: #7d7671;
  padding: 0.2em 0.3em;
}

.index-list { list-style: none; margin: 0; padding: 0.6cqw 0 0; flex: 1; overflow: auto; }
.index-list li {
  display: flex;
  align-items: baseline;
  gap: 1.4cqw;
  padding: 1.5cqw 0.2cqw;
  border-bottom: 1px solid #e5dee5;
  cursor: pointer;
  transition: padding-left 0.25s var(--ease), background 0.2s;
}
.index-list li:hover { padding-left: 0.9cqw; background: rgba(255, 255, 255, 0.5); }
.index-list .ino {
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.85cqw, 10px);
  color: #b0a9ae;
  width: 2.2em;
}
.index-list .iname {
  font-family: var(--font-display);
  font-size: clamp(14px, 2.05cqw, 26px);
  line-height: 1;
  color: var(--ink);
}
.index-list .ilede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(8px, 1.1cqw, 14px);
  color: #8d8792;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.index-list .iyear {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.85cqw, 10px);
  color: #8d8792;
  letter-spacing: 0.06em;
}
.index-list li.is-on .iname { font-style: italic; }
.index-list li.is-on .ino::after { content: " •"; color: var(--gold); }

.index-foot {
  margin: 0;
  padding-top: 1.6cqw;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(9px, 1.15cqw, 14px);
  color: #8d8792;
}

/* ═════════════════════════════ COVER ═════════════════════════════ */

.view--cover {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 7cqw 6.5cqw 5cqw;
  background:
    radial-gradient(120% 80% at 50% 0%, #f7f3f8 0%, var(--cream) 55%),
    var(--cream);
  z-index: 3;
}

.cover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0.92;
}
.cover-head .cat-mark { width: 9cqw; height: 9cqw; }

.cover-time {
  font-family: var(--font-mono);
  font-size: clamp(8px, 2.6cqw, 14px);
  color: #6d6661;
  letter-spacing: 0.02em;
}

.cover-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4cqh;
  min-height: 0;
  padding: 0 0 2cqw;
}

.cover-art {
  flex: 0 0 auto;
  height: 34cqh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-art svg {
  height: 100%;
  width: 100%;
  filter: drop-shadow(0 3cqw 3cqw rgba(46, 38, 30, 0.16));
  animation: cover-float 7s var(--ease) infinite;
}
@keyframes cover-float {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-1.6cqw) rotate(0.5deg); }
}

.cover-copy { display: flex; flex-direction: column; gap: 1.2cqw; }
.cover-copy .eyebrow { font-size: clamp(7px, 2.1cqw, 11px); color: #8d8792; }
.cover-micro {
  font-family: var(--font-mono);
  font-size: clamp(7px, 1.9cqw, 10px);
  color: #b3acb1;
  letter-spacing: 0.02em;
  margin-top: -0.4cqw;
}

.cover-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 9.4cqw, 48px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

.cover-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(11px, 3.4cqw, 18px);
  line-height: 1.32;
  color: #57524c;
  margin: 0;
  max-width: 30ch;
}

.cover-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 1.7cqw;
  margin-top: 1.4cqw;
  font-family: var(--font-mono);
  font-size: clamp(7px, 2cqw, 11px);
  color: #8d8792;
  letter-spacing: 0.06em;
}

.cover-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3cqw;
}

.cover-hint {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-sans);
  font-size: clamp(7px, 2.15cqw, 12px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6d6661;
}
.cover-hint b {
  font-weight: 400;
  display: inline-block;
  animation: hint-bob 2.6s var(--ease) infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-0.5em); opacity: 1; }
}

.ticks--cover { align-self: center; }
.ticks--cover .tick { width: clamp(9px, 3.6cqw, 18px); height: 2px; }

/* ═════════════════════════════ transitions ═════════════════════════════ */

/* the whole card lifts like a laptop lid when the device folds open */
.app[data-transition="opening"] .view--collection {
  transform-origin: 50% 100%;
  animation: lid-lift 0.72s var(--ease-io) forwards;
}
.app[data-transition="closing"] .view--collection {
  transform-origin: 50% 100%;
  animation: lid-lift 0.72s var(--ease-io) reverse forwards;
}
@keyframes lid-lift {
  0% { transform: perspective(1800px) rotateX(0deg) translateY(0); opacity: 1; }
  55% { opacity: 0.6; }
  100% { transform: perspective(1800px) rotateX(-82deg) translateY(-6%); opacity: 0; }
}

.fold-veil {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: var(--cream);
  opacity: 0;
}
.app[data-transition="opening"] .fold-veil { animation: veil-flash 0.75s var(--ease) forwards; }
.app[data-transition="closing"] .fold-veil { animation: veil-flash 0.75s var(--ease) reverse forwards; }
@keyframes veil-flash {
  0% { opacity: 0; }
  35% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ═════════════════════════════ responsive ═════════════════════════════ */

/* portrait slab — a single tall column, much closer to a phone */
@container app (max-aspect-ratio: 0.98) {
  .view--collection { padding: 6cqw 6.5cqw 4cqw; }
  .wm-name { font-size: clamp(18px, 6.4cqw, 34px); }
  .wm-sub { font-size: clamp(6px, 1.9cqw, 9px); }
  .slide { justify-content: center; gap: 3cqw; }
  .slide-art { height: 36cqh; }
  .slide-art svg { max-width: 100%; }
  .copy-col { max-width: 100%; }
  .copy-col .title { font-size: clamp(28px, 9.6cqw, 54px); }
  .copy-col .lede { font-size: clamp(12px, 3.5cqw, 20px); }
  .copy-col .specs { font-size: clamp(8px, 2.2cqw, 11px); }
  .copy-col .eyebrow { font-size: clamp(7px, 2.1cqw, 10px); }
  .copy-col .micro { font-size: clamp(7px, 1.9cqw, 9px); }
  .copy-year { font-size: clamp(8px, 2.2cqw, 11px); padding-top: 0.6cqw; }
  .slide-copy { gap: 2cqw; }
  .pager { gap: 2.4cqw; }
  .swipe-hint { display: none; }
  .chev { width: 8cqw; height: 8cqw; font-size: 5cqw; }
  .count { font-size: clamp(8px, 2.3cqw, 12px); }
  .tick { width: clamp(8px, 3.4cqw, 20px); }
  .open-cta { padding-top: 2.6cqw; gap: 2.4cqw; }
  .cta-ico { width: 6cqw; height: 6cqw; }
  .cta-txt b { font-size: clamp(9px, 2.6cqw, 13px); }
  .cta-txt i { font-size: clamp(7px, 2cqw, 10px); }
  .index-panel { padding: 7cqw 7cqw 5cqw; }
  .index-list li { padding: 2.4cqw 0.2cqw; }
  .index-list .iname { font-size: clamp(18px, 6cqw, 30px); }
  .index-list .ilede { display: none; }
}

/* extremely narrow (cover screen) */
@container app (max-aspect-ratio: 0.62) {
  .view--collection { padding: 9cqw 8cqw 6cqw; }
  .wordmark { gap: 1.2cqw; }
  .wm-name { font-size: clamp(15px, 8.6cqw, 26px); }
  .wm-sub { font-size: clamp(6px, 2.3cqw, 9px); letter-spacing: 0.24em; }
  .slide-art { height: 30cqh; }
  .slide-copy { grid-template-columns: 1fr; gap: 1.5cqw; }
  .copy-year { padding-top: 0; }
  .copy-col .title { font-size: clamp(24px, 10.5cqw, 44px); }
  .coll-foot { gap: 3cqw; }
  .open-cta { border-top: 0; }
  .status-ring { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Wide displays — fill the window with a horizontal composition
   ═══════════════════════════════════════════════════════════════ */
@container app (min-aspect-ratio: 1.3) {
  /* the card runs edge to edge; header and pager float above it */
  .view--collection { display: block; padding: 0; }
  .coll-head { position: absolute; top: 1.7cqw; left: 3cqw; right: 3cqw; z-index: 5; }
  .coll-track-wrap { position: absolute; inset: 0; margin: 0; }
  .coll-foot {
    position: absolute;
    left: 3cqw;
    right: 3cqw;
    bottom: 1.6cqw;
    z-index: 5;
  }

  .wm-name { font-size: clamp(20px, 1.95cqw, 36px); }
  .wm-sub { font-size: clamp(7px, 0.58cqw, 9px); }

  .slide {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    align-items: center;
    gap: 1.8cqw;
    padding: 10cqh 3cqw 8cqh;
  }
  .slide-art { height: 100%; }
  .slide-copy { gap: 2.2cqw; }
  .copy-col { max-width: 100%; gap: 0.5cqw; }
  .copy-col .title { font-size: clamp(40px, 5.3cqw, 120px); margin-bottom: 0.8cqw; }
  .copy-col .lede { font-size: clamp(15px, 1.55cqw, 32px); margin-bottom: 1.4cqw; max-width: 24em; }
  .copy-col .specs { font-size: clamp(9px, 0.9cqw, 15px); gap: 0.65cqw; }
  .copy-col .eyebrow { font-size: clamp(8px, 0.78cqw, 13px); }
  .copy-col .micro { font-size: clamp(8px, 0.72cqw, 11px); }
  .copy-year { font-size: clamp(9px, 0.85cqw, 13px); padding-top: 0.6cqw; }

  .coll-foot { flex-direction: row; align-items: center; justify-content: center; gap: 3cqw; padding-top: 0; }
  .coll-foot .pager { position: relative; z-index: 2; }
  .pager { gap: 1.1cqw; }
  .open-cta { width: auto; border-top: 0; padding: 0; gap: 0.9cqw; }
  .cta-txt i { display: none; }
  .cta-key { display: none; }
  .chev { width: clamp(22px, 2.2cqw, 36px); height: clamp(22px, 2.2cqw, 36px); font-size: clamp(12px, 1.15cqw, 20px); }
  .ticks { gap: 0.6cqw; }
  .tick { width: clamp(6px, 1.1cqw, 18px); }
  .count { font-size: clamp(8px, 0.8cqw, 12px); }
  .swipe-hint { font-size: clamp(8px, 0.75cqw, 12px); }

  /* closed state becomes a wide poster */
  .view--cover { padding: 2.8cqw 4cqw 2.4cqw; }
  .cover-head .cat-mark { width: 4.5cqw; height: 4.5cqw; }
  .cover-time { font-size: clamp(9px, 1.1cqw, 16px); }
  .cover-body { display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: 3.4cqw; padding: 0; }
  .cover-art { height: 52cqh; margin: 0; }
  .cover-copy { gap: 1.2cqw; }
  .cover-copy .eyebrow { font-size: clamp(8px, 0.85cqw, 12px); }
  .cover-micro { font-size: clamp(8px, 0.8cqw, 11px); }
  .cover-title { font-size: clamp(44px, 5.2cqw, 120px); }
  .cover-lede { font-size: clamp(15px, 1.45cqw, 30px); max-width: 26ch; }
  .cover-meta { font-size: clamp(8px, 0.85cqw, 13px); padding-top: 1.1cqw; margin-top: 1.6cqw; }
  .cover-foot { gap: 1.4cqw; }
  .cover-hint { font-size: clamp(8px, 0.8cqw, 12px); }
}