/* ============================================================================
   AIGP portfolio, Sprint 2: Royal and amber, gallery grammar
   Layered on scrollcraft.css. Six colour roles, one accent (royal blue).
   Amber is a marker colour only (rules, ticks, active underline), never text.
   ========================================================================== */

:root {
  --sc-canvas:     #ffffff;
  --sc-surface:    #eef2fb;
  --sc-ink:        #101828;
  --sc-ink-soft:   #46546e;
  --sc-accent:     #1b3a8a;
  --sc-accent-ink: #ffffff;

  --royal-deep:    #14307a;
  --royal-night:   #0f2a6b;
  --royal-tint:    #dce6fa;
  --royal-tint-2:  #b8c8ee;
  --amber:         #f59e0b;
  --on-royal-soft: #cdd9f6;

  --sc-font-display: "Archivo", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sc-shadow-color: 222 47% 11%;
  --nav-h: 64px;
  color-scheme: light;

  /* standard type sizes (owner, 2026-10-06): 16px body, modest display ramp */
  --sc-t-xs:   0.75rem;
  --sc-t-sm:   0.875rem;
  --sc-t-base: 1rem;
  --sc-t-lg:   1.0625rem;
  --sc-t-xl:   1.375rem;   /* 22px */
  --sc-t-2xl:  1.5rem;     /* 24px */
  --sc-t-3xl:  1.75rem;    /* 28px */
  --sc-t-4xl:  2.25rem;    /* 36px */
  --sc-section: clamp(3rem, 6vw, 5rem);
}

html { scroll-padding-top: calc(var(--nav-h) + 56px); }
body { background: var(--sc-canvas); color: var(--sc-ink); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { cursor: pointer; }

.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--sc-accent); color: #fff; padding: 10px 16px; border-radius: var(--sc-r-sm); transition: top 160ms var(--sc-ease-out); }
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border-radius: var(--sc-r-sm); border: 1px solid transparent;
  font: 500 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: 0;
  text-decoration: none; white-space: nowrap;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out),
              border-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--sm { min-height: 40px; padding: 0 16px; }
.btn--lg { min-height: 48px; padding: 0 24px; font-size: var(--sc-t-sm); }
.btn--icon { min-width: 44px; padding: 0; border-color: var(--sc-hairline-strong); background: transparent; color: var(--sc-ink); font-size: 1.1rem; }
.btn--icon:disabled { opacity: 0.4; cursor: default; }
.btn--primary { background: var(--sc-accent); color: #fff; }
.btn--quiet { background: transparent; color: var(--sc-ink); border-color: var(--sc-hairline-strong); }
.btn--light { background: #fff; color: #1b3a8a; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--royal-deep); }
  .btn--quiet:hover, .btn--icon:not(:disabled):hover { background: var(--sc-surface); border-color: var(--sc-accent); }
  .btn--light:hover { background: var(--royal-tint); }
}

/* ------------------------------------------------------------------ nav -- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--sc-hairline); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: var(--sc-5); padding-inline: var(--sc-gutter); max-width: var(--sc-maxw); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--sc-accent); color: #fff; border-radius: var(--sc-r-sm); font: 700 0.8rem/1 var(--sc-font-display); letter-spacing: 0.02em; }
.brand__name { font: 600 var(--sc-t-sm)/1.1 var(--sc-font-display); letter-spacing: -0.01em; }
.nav__links { display: flex; gap: var(--sc-5); }
.nav__links a { text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); padding: 10px 14px; border-radius: var(--sc-r-sm); transition: color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out); }
.nav__links a:hover, .nav__links a:focus-visible { background: var(--sc-accent); color: #fff; }
.nav__links a.is-active { color: var(--sc-accent); box-shadow: inset 0 -2px 0 var(--amber); }
.nav__links a.is-active:hover { color: #fff; box-shadow: none; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--sc-hairline-strong); background: transparent; border-radius: var(--sc-r-sm); position: relative; }
.nav__toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--sc-ink); transition: transform 160ms var(--sc-ease-out); }
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 25px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
.nav__mobile { display: grid; gap: 4px; padding: 8px var(--sc-gutter) 20px; border-top: 1px solid var(--sc-hairline); background: #fff; }
.nav__mobile[hidden] { display: none; }
.nav__mobile a:not(.btn) { padding: 14px 0; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--sc-hairline); }
.nav__mobile .btn { margin-top: 12px; }
@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
}

/* ----------------------------------------------------------------- hero -- */
.hero { padding-top: calc(var(--nav-h) + 1.75rem); padding-bottom: 2rem; overflow: clip; }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); align-items: center; }
.hero__copy { grid-column: 1 / span 7; display: grid; gap: var(--sc-5); align-content: center; }
/* the landing view never waits on an observer: a plain CSS entrance, staggered */
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.hero__copy > * { animation: hero-rise 620ms var(--sc-ease-out) both; }
.hero__copy > :nth-child(2) { animation-delay: 90ms; }
.hero__copy > :nth-child(3) { animation-delay: 180ms; }
.hero__copy > :nth-child(4) { animation-delay: 270ms; }
@media (prefers-reduced-motion: reduce) { .hero__copy > * { animation: none; } }
.hero__name { font: 500 var(--sc-t-sm)/1.3 var(--sc-font-text); color: var(--sc-accent); display: flex; align-items: center; gap: 12px; }
.hero__name::before { content: ""; width: 28px; height: 4px; background: var(--amber); flex: none; }
.hero__title { font: 600 var(--sc-t-4xl)/1.1 var(--sc-font-display); letter-spacing: -0.034em; max-width: 12ch; text-wrap: balance; }
.hero__intro { font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink-soft); max-width: 44ch; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sc-2); }

/* three planes: a backing plate, the portrait, a document card in front */
.hero__scene { grid-column: 8 / span 5; position: relative; width: 100%; max-width: 26rem; aspect-ratio: 4 / 5; justify-self: end; }
.plane { position: absolute; will-change: transform; }
.plane--back { inset: 9% -9% -7% 15%; background: var(--royal-tint); border-radius: var(--sc-r-md); z-index: 0; }
.plane__tick { position: absolute; left: 0; top: 0; width: 56px; height: 8px; background: var(--amber); border-top-left-radius: var(--sc-r-md); }
.plane--subject { inset: 0 9% 0 0; z-index: 1; }
.plane--subject img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); background: var(--sc-surface); }
.plane--front { left: -9%; bottom: 4%; width: 38%; z-index: 2; }
.plane--front img { width: 100%; height: auto; aspect-ratio: 935 / 1210; object-fit: cover; object-position: top; background: #fff; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); box-shadow: var(--sc-e3); rotate: -6deg; }
@media (max-width: 900px) {
  .hero__copy { grid-column: 1 / -1; }
  .hero__scene { grid-column: 1 / -1; justify-self: start; max-width: 17rem; margin: var(--sc-6) 0 0 clamp(0.75rem, 6vw, 2rem); }
  .hero__title { max-width: 14ch; }
}

/* ---------------------------------------------------------------- strip -- */
.strip { background: var(--sc-surface); border-block: 1px solid var(--sc-hairline); }
.strip__inner { display: flex; align-items: center; gap: var(--sc-4); padding-block: var(--sc-5); }
.strip__inner img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.strip__inner p { display: grid; gap: 2px; font-size: var(--sc-t-sm); line-height: 1.3; }
.strip__inner span { color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- about -- */
.about { padding-block: clamp(2rem, 4vw, 3rem); }
.about__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-5) var(--sc-7); align-items: start; }
.about__title { font: 700 var(--sc-t-xl)/1.2 var(--sc-font-display); letter-spacing: -0.02em; color: var(--sc-accent); display: flex; align-items: center; gap: 12px; }
.about__title::before { content: ""; width: 28px; height: 4px; background: var(--amber); flex: none; }
.about__text { font-size: var(--sc-t-base); line-height: 1.6; max-width: 52ch; text-wrap: pretty; }
@media (max-width: 760px) { .about__inner { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- collection -- */
.collection { border-top: 1px solid var(--sc-hairline); }
.collection__head { padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 1.75rem); display: grid; gap: var(--sc-3); }
.collection__title { font: 600 var(--sc-t-3xl)/1.1 var(--sc-font-display); letter-spacing: -0.03em; }
.collection__lede { font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink-soft); max-width: 48ch; }

/* the index of objects: sticky under the bar, jumps, marks where you are */
.index { position: sticky; top: var(--nav-h); z-index: 40; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-block: 1px solid var(--sc-hairline); }
.index__row { display: flex; gap: var(--sc-5); overflow-x: auto; scrollbar-width: none; }
.index__row::-webkit-scrollbar { display: none; }
.index button { padding: 16px 2px; border: 0; background: none; white-space: nowrap; font: 500 var(--sc-t-sm)/1 var(--sc-font-text); color: var(--sc-ink-soft); box-shadow: inset 0 -3px 0 transparent; transition: color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out); }
.index button:hover { color: var(--sc-ink); }
.index button[aria-pressed="true"] { color: var(--sc-accent); box-shadow: inset 0 -3px 0 var(--amber); }
.index button:focus-visible { outline-offset: -4px; }
.collection__empty { padding-block: clamp(2.5rem, 5vw, 4rem); color: var(--sc-ink-soft); }
.collection__empty[hidden] { display: none; }
.obj[hidden] { display: none; }
/* while a filter is active the acts are re-laid out, so the fans rest open rather than trusting stale measurements */
.collection.is-filtered .obj { --f: 1; }

/* ---------------------------------------------------------------- object -- */
.obj { padding-block: clamp(3.5rem, 7vw, 6.5rem); border-top: 1px solid var(--sc-hairline); overflow: clip;
  /* the fan: 0 closed, 1 open, driven by this act's flow progress */
  --f0: 0.14; --fw: 0.30;
  --f: clamp(0, calc((var(--sc-p, 1) - var(--f0)) / var(--fw)), 1);
}
.obj:first-of-type { border-top: 0; }
.obj--alt { background: var(--sc-surface); }
.obj__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-6); align-items: start; }
.obj__media { grid-column: 1 / span 5; position: relative; }
.obj__label { grid-column: 7 / span 6; display: grid; gap: var(--sc-4); align-content: start; }
.obj--flip .obj__media { grid-column: 8 / span 5; grid-row: 1; }
.obj--flip .obj__label { grid-column: 1 / span 6; grid-row: 1; }

/* the stack */
/* the wrap is the reveal's clip box, so it carries room for the fan to rise and rotate into */
.stack__wrap { position: sticky; top: calc(var(--nav-h) + 40px); padding: 12% 26% 8% 0; margin-top: -12%; }
.obj--flip .stack__wrap { padding-right: 0; padding-left: 26%; }
.stack { position: relative; display: block; width: 100%; max-width: 21rem; aspect-ratio: 935 / 1210; padding: 0; border: 0; background: none; text-align: left; border-radius: var(--sc-r-sm); }
.stack__page { position: absolute; inset: 0; display: block; border-radius: var(--sc-r-sm); overflow: hidden; background: #fff; border: 1px solid var(--sc-hairline-strong); box-shadow: var(--sc-e2); transform-origin: 50% 100%; will-change: transform; }
.stack__page img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stack__page--cover { box-shadow: var(--sc-e3); }
/* fan geometry: pages behind the cover spread right and up; flipped stacks spread left */
.stack__page:nth-child(5) { z-index: 5; transform: rotate(calc(var(--f) * -2deg)); }
.stack__page:nth-child(4) { z-index: 4; transform: translate(calc(var(--f) * 8%),  calc(var(--f) * -2%)) rotate(calc(var(--f) * 2.5deg)); }
.stack__page:nth-child(3) { z-index: 3; transform: translate(calc(var(--f) * 16%), calc(var(--f) * -4%)) rotate(calc(var(--f) * 5deg)); }
.stack__page:nth-child(2) { z-index: 2; transform: translate(calc(var(--f) * 24%), calc(var(--f) * -6%)) rotate(calc(var(--f) * 7.5deg)); }
.stack__page:nth-child(1) { z-index: 1; transform: translate(calc(var(--f) * 32%), calc(var(--f) * -8%)) rotate(calc(var(--f) * 10deg)); }
.stack--flip .stack__page:nth-child(5) { transform: rotate(calc(var(--f) * 2deg)); }
.stack--flip .stack__page:nth-child(4) { transform: translate(calc(var(--f) * -8%),  calc(var(--f) * -2%)) rotate(calc(var(--f) * -2.5deg)); }
.stack--flip .stack__page:nth-child(3) { transform: translate(calc(var(--f) * -16%), calc(var(--f) * -4%)) rotate(calc(var(--f) * -5deg)); }
.stack--flip .stack__page:nth-child(2) { transform: translate(calc(var(--f) * -24%), calc(var(--f) * -6%)) rotate(calc(var(--f) * -7.5deg)); }
.stack--flip .stack__page:nth-child(1) { transform: translate(calc(var(--f) * -32%), calc(var(--f) * -8%)) rotate(calc(var(--f) * -10deg)); }
.stack__cap { display: flex; justify-content: flex-start; gap: var(--sc-4); margin-top: var(--sc-4); max-width: 21rem; font: 500 var(--sc-t-sm)/1.3 var(--sc-font-text); color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .stack:hover .stack__page--cover { box-shadow: var(--sc-e3), 0 0 0 3px var(--royal-tint); }
}
.stack:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; }

/* label, in Rachael Blizzard's shape: bold lead-in, then the line */
.obj__name { font: 500 var(--sc-t-sm)/1.35 var(--sc-font-text); color: var(--sc-ink-soft); }
.obj__title { font: 600 var(--sc-t-xl)/1.25 var(--sc-font-display); letter-spacing: -0.028em; text-wrap: balance; margin-bottom: var(--sc-2); }
.obj__label p { max-width: 66ch; text-wrap: pretty; }
.obj__label p strong { font-weight: 600; color: var(--sc-ink); }
.obj__label ul { display: grid; gap: var(--sc-2); margin-top: calc(var(--sc-3) * -1); max-width: 66ch; }
.obj__label li { position: relative; padding-left: 1.25rem; text-wrap: pretty; }
.obj__label li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 9px; height: 2px; background: var(--amber); }
.obj__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sc-3); }

@media (max-width: 900px) {
  .obj { --f0: 0.05; --fw: 0.17; }
  .obj__media, .obj--flip .obj__media { grid-column: 1 / -1; grid-row: auto; }
  .obj__label, .obj--flip .obj__label { grid-column: 1 / -1; grid-row: auto; }
  .stack__wrap, .obj--flip .stack__wrap { position: static; padding: 12% 24% 6% 0; margin-top: -12%; }
  .obj--flip .stack__wrap { padding: 12% 0 6% 24%; }
  .stack { max-width: 15rem; }
  .stack__cap { max-width: 15rem; }
  .obj--flip .stack, .obj--flip .stack__cap { margin-left: auto; }
}

/* ----------------------------------------------------------- background -- */
.background { background: var(--sc-surface); border-top: 1px solid var(--sc-hairline); padding-block: clamp(4rem, 9vw, 8rem); }
.background__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-7); }
.background__intro { grid-column: 1 / span 6; display: grid; gap: var(--sc-4); align-content: start; }
.background__title { font: 600 var(--sc-t-3xl)/1.1 var(--sc-font-display); letter-spacing: -0.03em; }
.background__text { text-wrap: pretty; max-width: 60ch; font-size: var(--sc-t-base); line-height: 1.6; }
.habits { grid-column: 8 / span 5; display: grid; gap: var(--sc-4); align-content: start; }
.habits__lead { color: var(--sc-ink-soft); }
.habits__list { display: grid; border-top: 2px solid var(--sc-accent); }
.habits__list li { display: grid; gap: 4px; padding-block: var(--sc-4); border-bottom: 1px solid var(--sc-hairline-strong); }
.habits__list strong { font-weight: 600; }
.habits__list span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.habits__pmp { font-weight: 500; }
@media (max-width: 900px) { .background__intro, .habits { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- close -- */
.close { background: #1b3a8a; color: #fff; --sc-ink: #fff; --sc-ink-soft: var(--on-royal-soft); --sc-accent: #fff; }
.close ::selection { background: #fff; color: #1b3a8a; }
.close :focus-visible { outline-color: #fff; }
.close__grid { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); display: grid; gap: var(--sc-6); max-width: 40rem; }
.close__copy { display: grid; gap: var(--sc-5); justify-items: start; }
.close__copy::before { content: ""; width: 56px; height: 6px; background: var(--amber); }
.close__title { font: 600 var(--sc-t-4xl)/1.1 var(--sc-font-display); letter-spacing: -0.032em; max-width: 16ch; text-wrap: balance; }
.close__sub { font-size: var(--sc-t-base); line-height: 1.6; color: var(--on-royal-soft); max-width: 36ch; }
.plate { display: grid; border-top: 1px solid rgba(255,255,255,0.4); }
.plate > div { display: grid; gap: 3px; padding-block: var(--sc-4); border-bottom: 1px solid rgba(255,255,255,0.22); }
.plate dt { font: 500 var(--sc-t-xs)/1.3 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-royal-soft); }
.plate dd { font-size: var(--sc-t-sm); overflow-wrap: anywhere; }
.plate a { color: #fff; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.foot { background: var(--royal-night); }
.foot__inner { padding-block: var(--sc-5); font-size: var(--sc-t-xs); color: var(--on-royal-soft); }
.foot__inner p { max-width: 78ch; }

/* --------------------------------------------------------------- viewer -- */
.viewer { width: min(980px, 96vw); height: min(94vh, 1200px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); background: var(--sc-surface); color: var(--sc-ink); overflow: hidden; }
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: rgba(16, 24, 40, 0.74); }
.viewer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--sc-hairline-strong); }
.viewer__title { font-weight: 600; font-size: var(--sc-t-sm); margin-right: auto; min-width: 12rem; flex: 1 1 14rem; }
.viewer__nav { display: flex; align-items: center; gap: 8px; }
.viewer__count { min-width: 6.5rem; text-align: center; font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; }
.viewer__stage { flex: 1; overflow: auto; padding: clamp(10px, 2vw, 24px); display: grid; justify-items: center; align-items: start; }
.viewer__stage img { width: min(100%, 860px); height: auto; background: #fff; border: 1px solid var(--sc-hairline-strong); box-shadow: var(--sc-e2); }
@media (max-width: 640px) { .viewer { width: 100vw; height: 100dvh; border-radius: 0; } .viewer__bar { padding: 10px 12px; } }

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .obj { --f: 1; }                                   /* the fan rests open */
  .stack__page { transition: none; }
}

/* failsafe: if the engine never mounts, nothing stays hidden or closed */
.sc-failsafe [data-sc-in], .sc-failsafe [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
.sc-failsafe [data-sc-reveal] { clip-path: none !important; }

/* page chrome: keep the progress bar above the nav hairline, amber */
[data-sc-progress] { background: var(--amber); z-index: 70; }

@media print { .nav, .index, [data-sc-progress], .viewer { display: none !important; } .obj { --f: 1; } }

/* phone: one step down on the display sizes */
@media (max-width: 600px) {
  :root { --sc-t-4xl: 1.875rem; --sc-t-3xl: 1.5rem; --sc-t-2xl: 1.375rem; --sc-t-xl: 1.25rem; }
}

/* --------------------------------------------------- thought pieces -- */
.piece { display: grid; gap: var(--sc-3); padding: var(--sc-6); background: #fff; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); box-shadow: var(--sc-e2); max-width: 21rem; }
.obj--alt .piece { background: #fff; }
.piece__kicker { font: 500 var(--sc-t-xs)/1.3 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); }
.piece__title { font: 600 var(--sc-t-lg)/1.3 var(--sc-font-display); letter-spacing: -0.01em; }
.piece__stand { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-wrap: pretty; }
.piece__meta { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.viewer--article { width: min(760px, 96vw); }
.viewer__stage--article { display: block; }
.article { max-width: 62ch; margin-inline: auto; padding: var(--sc-5) 0 var(--sc-7); display: grid; gap: var(--sc-4); }
.article h2 { font: 600 var(--sc-t-2xl)/1.15 var(--sc-font-display); letter-spacing: -0.02em; }
.article h3 { font: 600 var(--sc-t-lg)/1.3 var(--sc-font-display); margin-top: var(--sc-3); }
.article p { text-wrap: pretty; }
.article blockquote { margin: 0; padding-left: var(--sc-4); border-left: 3px solid var(--amber); color: var(--sc-ink-soft); }