/* Centre Pointe — shared foundation for every design option.
   Palette and modern voice are FIXED across all six; only layout,
   typography scale and photo treatment change per design. */
:root {
  --ink:   #08080a;
  --ink-1: #101014;
  --ink-2: #17171d;
  --ink-3: #202028;
  --gold:      #d4af37;
  --gold-lt:   #f2dd9e;
  --gold-dp:   #8f7218;
  --gold-grad: linear-gradient(135deg, #f7ecc4 0%, #d4af37 46%, #ab8420 100%);
  --cream: #f7f4ef;
  --text:  #d8d3cb;
  --muted: #9a948b;
  --faint: #6a655e;
  --line:      rgba(212,175,55,.22);
  --line-soft: rgba(247,244,239,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
  --gutter: clamp(1.15rem, 4vw, 3rem);
}
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem; }
body { margin:0; background:var(--ink); color:var(--text); line-height:1.65;
       -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { margin:0; color:var(--cream); line-height:1.06; letter-spacing:-.02em; }
p { margin:0 0 1.05em; } p:last-child { margin-bottom:0; }
ul { margin:0; padding:0; list-style:none; }
::selection { background:var(--gold); color:var(--ink); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }

.wrap { width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gutter); }
/* Gradient TEXT only. Never put this on a box that also sets its own background:
   the background shorthand resets background-clip while -webkit-text-fill-color
   survives and inherits, leaving every descendant's text invisible. */
.gold-text { background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
        -webkit-text-fill-color:transparent; color:transparent; }
.vh { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Wordmark — the studio's CNC sign, shared by every design */
.sign { display:inline-block; font-family:"Marcellus",Georgia,serif; font-weight:400;
        line-height:.92; text-transform:uppercase; background:var(--gold-grad);
        -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sign-1 { display:block; letter-spacing:.06em; margin-right:-.06em; }
.sign-2 { display:flex; justify-content:space-between; width:100%; margin-top:.33em; }
.sign-2 i { font-style:normal; } .sign-2 .sp { width:.7em; }

/* Shared button voice */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.7rem;
       border-radius:999px; border:1.5px solid transparent; font-size:.78rem; font-weight:600;
       letter-spacing:.12em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
       transition:transform .22s var(--ease), background-color .22s var(--ease),
                  color .22s var(--ease), border-color .22s var(--ease); }
.btn:hover { transform:translateY(-2px); }
/* Doubled class keeps these ahead of each design's `.nav a` colour rule —
   without it the Register button renders gold-on-gold and is unreadable. */
.btn.btn-gold { background:var(--gold-grad); color:#1a1405; }
.btn.btn-gold:hover { color:#1a1405; }
/* Register buttons (gold, linking to the parent portal): a streak of light sweeps across
   once on hover. It snaps back unseen when the pointer leaves, so it never runs backwards. */
.btn.btn-gold[href*="thestudiodirector"] { position:relative; isolation:isolate; overflow:hidden; }
.btn.btn-gold[href*="thestudiodirector"]::after { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0;
  width:60%; pointer-events:none;
  background:linear-gradient(105deg, transparent 20%, rgba(255,255,255,.7) 50%, transparent 80%);
  transform:translateX(-120%); }
@media (hover:hover) {
  .btn.btn-gold[href*="thestudiodirector"]:hover::after { transform:translateX(220%); transition:transform .8s ease-in-out; }
}
@media (prefers-reduced-motion:reduce) { .btn.btn-gold[href*="thestudiodirector"]::after { display:none; } }
.btn.btn-ghost { border-color:rgba(247,244,239,.24); color:var(--cream); }
.btn.btn-ghost:hover { border-color:var(--gold); color:var(--gold-lt); }

/* Back-to-options bar, present on every variant */
.optbar { position:sticky; top:0; z-index:150; background:rgba(8,8,10,.9);
          backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.optbar-in { max-width:1240px; margin-inline:auto; padding:.55rem var(--gutter);
             display:flex; align-items:center; justify-content:space-between; gap:1rem;
             font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.optbar a { color:var(--gold); }
.optbar a:hover { color:var(--gold-lt); }
.optbar span { color:var(--faint); }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }

/* Link through to the faculty page */
.fac-link { display:inline-flex; align-items:center; gap:.45rem; margin-top:1.4rem;
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  padding-bottom:3px; border-bottom:1px solid rgba(212,175,55,.45);
  transition:color .2s var(--ease), border-color .2s var(--ease); }
.fac-link:hover { color:var(--gold-lt); border-color:var(--gold); }
.fac-link span { transition:transform .25s var(--ease); }
.fac-link:hover span { transform:translateX(3px); }

/* ---------- Faculty page ---------- */
.fp-nav { border-bottom:1px solid var(--line); }
.fp-nav-in { max-width:1240px; margin-inline:auto; padding:1.1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.fp-nav .nav { padding:0; }
.fp-head { border-bottom:1px solid var(--line); padding:clamp(2.5rem,6vw,4.5rem) 0; }
.fp-crumb { margin:0 0 1.1rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.fp-crumb a { color:var(--gold); }
.fp-crumb a:hover { color:var(--gold-lt); }
.fp-head h1 { font-size:clamp(2.2rem,6vw,4rem); }
.fp-intro { max-width:62ch; margin-top:1.1rem; color:var(--muted); }
.fp-body { padding:clamp(2.5rem,6vw,4.5rem) 0 1rem; }
.fp-group { font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:clamp(2rem,4vw,3rem) 0 .5rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--line); }
.fp-group:first-child { margin-top:0; }
.fp-person { display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.5rem); padding:clamp(1.6rem,3.5vw,2.5rem) 0;
  border-bottom:1px solid var(--line-soft); align-items:start; }
@media (max-width:680px){ .fp-person{ grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:1.1rem; } }
@media (max-width:460px){ .fp-person{ grid-template-columns:1fr; } }
.fp-person img { width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(1); border-radius:3px; }
.fp-text h2 { font-size:clamp(1.25rem,2.4vw,1.65rem); }
.fp-role { margin:.35rem 0 1rem; font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); }
.fp-text p { color:var(--muted); font-size:.96rem; max-width:66ch; }

/* Bios collapse to one uniform height so the roster reads as an even list,
   and open in place when there is more to read. Checkbox toggle = no JS. */
.fp-bio { position:relative; height:9.4rem; overflow:hidden;
  transition:height .35s var(--ease); }
.fp-bio::after { content:""; position:absolute; inset:auto 0 0 0; height:3.4rem;
  background:linear-gradient(180deg, transparent, var(--ink)); pointer-events:none;
  transition:opacity .25s var(--ease); }
.fp-bio--short { height:9.4rem; }          /* short bios keep the same footprint */
.fp-bio--short::after { display:none; }
.fp-bio p:last-child { margin-bottom:0; }

.fp-toggle:checked ~ .fp-bio { height:auto; }
.fp-toggle:checked ~ .fp-bio::after { opacity:0; }

.fp-more { display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; cursor:pointer;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); padding-bottom:2px; border-bottom:1px solid rgba(212,175,55,.45);
  transition:color .2s var(--ease), border-color .2s var(--ease); }
.fp-more:hover { color:var(--gold-lt); border-color:var(--gold); }
.fp-more::after { content:"\2193"; transition:transform .25s var(--ease); }
.fp-toggle:checked ~ .fp-more::after { transform:rotate(180deg); }
.fp-toggle:checked ~ .fp-more .is-more,
.fp-toggle:not(:checked) ~ .fp-more .is-less { display:none; }
.fp-toggle:focus-visible ~ .fp-more { outline:2px solid var(--gold); outline-offset:3px; }

/* ══════════════════════════════════════════════════════ INNER PAGES ═══════
   One structure, seven skins. Each design's own stylesheet supplies the type
   and accent; these rules supply the skeleton so the content stays identical
   across all seven and the studio owner compares design, not wording. */
.pg-hero { position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--line); }
.pg-hero .wrap { position:relative; padding-block:clamp(2.5rem,6vw,4.5rem); }
.pg-crumb { margin:0 0 1rem; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; }
.pg-crumb a { color:var(--gold); }
.pg-crumb a:hover { color:var(--gold-lt); }
.pg-hero h1 { font-size:clamp(2rem,5.4vw,3.6rem); }
.pg-hero-lede { max-width:56ch; margin:1.1rem 0 0; color:var(--text); font-size:clamp(1rem,1.5vw,1.15rem); }

.pg-hero--photo .pg-hero-media { position:absolute; inset:0; z-index:-2; }
.pg-hero--photo .pg-hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.pg-hero--photo .pg-hero-media::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.78),rgba(8,8,10,.55) 45%,rgba(8,8,10,.92)),
             linear-gradient(90deg,rgba(8,8,10,.85),rgba(8,8,10,.35) 60%,rgba(8,8,10,.6)); }
.pg-hero--photo .wrap { padding-block:clamp(3.5rem,8vw,6rem); }
.pg-hero--loud h1 { font-size:clamp(2.4rem,8vw,5.5rem); line-height:.94; }
.pg-hero--type { border-bottom-width:4px; border-bottom-style:double; }
.pg-hero--tile .pg-tile { background:var(--ink-1); border:1px solid var(--line-soft);
  border-radius:18px; padding:clamp(1.5rem,3vw,2.4rem); }
.pg-hero--tile { border-bottom:0; }

.pg-body { padding-block:clamp(2.5rem,6vw,4.5rem); }
.pg-h2 { font-size:clamp(1.5rem,3vw,2.2rem); margin:clamp(2.25rem,5vw,3.5rem) 0 1rem; }
.pg-body > .wrap > .pg-h2:first-child { margin-top:0; }
.pg-p { color:var(--muted); max-width:68ch; }
.pg-lede { color:var(--text); font-size:1.1rem; max-width:62ch; }

.pg-cards { display:grid; gap:clamp(.85rem,1.8vw,1.3rem); margin:1.5rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.pg-card { display:flex; flex-direction:column; background:var(--ink-1);
  border:1px solid var(--line-soft); border-radius:16px; padding:clamp(1.2rem,2.2vw,1.7rem);
  transition:border-color .3s var(--ease), transform .3s var(--ease); }
.pg-card:hover { border-color:var(--line); transform:translateY(-2px); }
.pg-card h3 { font-size:1.12rem; margin-bottom:.55rem; }
.pg-card p { color:var(--muted); font-size:.95rem; margin:0; }
.pg-chip { align-self:flex-start; margin-top:auto; padding-top:1rem; font-size:.68rem;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
/* Family reviews use the card look, minus the hover lift: nothing to click. */
.pg-quote, .pg-quote blockquote { margin:0; }
.pg-quote:hover { border-color:var(--line-soft); transform:none; }
.pg-quote p { color:var(--text); font-size:1rem; }

.pg-accs { display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; margin:1.4rem 0 0; }
.pg-accs li { font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text); }
.pg-accs li::before { content:"\2726"; color:var(--gold); margin-right:.55rem; }

.pg-check { margin:1.3rem 0 0; display:grid; gap:.6rem; }
.pg-check + .pg-p, .pg-time + .pg-p { margin-top:1.5rem; }
.pg-check li { position:relative; padding-left:1.75rem; color:var(--text); }
.pg-check li::before { content:""; position:absolute; left:0; top:.5em; width:10px; height:6px;
  border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }

.pg-tablewrap { overflow-x:auto; border:1px solid var(--line-soft); border-radius:14px;
  background:var(--ink-1); margin-top:1.4rem; }
.pg-tablewrap table { width:100%; border-collapse:collapse; min-width:560px; }
.pg-tablewrap th, .pg-tablewrap td { padding:.9rem 1.3rem; text-align:left; vertical-align:top;
  font-size:.93rem; border-bottom:1px solid var(--line-soft); }
.pg-tablewrap thead th { font-size:.7rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold); background:rgba(212,175,55,.05); white-space:nowrap; }
.pg-tablewrap tbody tr:last-child td { border-bottom:0; }
.pg-tablewrap td:first-child { color:var(--cream); font-weight:500; }

.pg-time { margin:1.4rem 0 0; padding:0; list-style:none; position:relative; }
.pg-time::before { content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--line); }
.pg-time li { position:relative; padding:0 0 1.6rem 2.3rem; }
.pg-time li::last-child { padding-bottom:0; }
.pg-time li::before { content:""; position:absolute; left:0; top:7px; width:13px; height:13px;
  border-radius:50%; background:var(--ink); border:2px solid var(--gold); }
.pg-when { display:block; font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.2rem; }
.pg-what { display:block; font-family:inherit; font-size:1.1rem; font-weight:600; color:var(--cream); margin-bottom:.25rem; }
.pg-note { display:block; color:var(--muted); font-size:.94rem; }

.pg-posts { margin-top:1.2rem; border-top:1px solid var(--line-soft); }
.pg-post { padding:1.5rem 0; border-bottom:1px solid var(--line-soft); }
.pg-post h3 { font-size:1.12rem; margin:.15rem 0 .45rem; }
.pg-post p { color:var(--muted); font-size:.96rem; max-width:66ch; margin:0; }
.pg-post .pg-when { margin-bottom:.3rem; }

.pg-faq { margin-top:1.3rem; border-top:1px solid var(--line-soft); }
.pg-faq details { border-bottom:1px solid var(--line-soft); }
.pg-faq summary { list-style:none; cursor:pointer; padding:1.15rem 2.4rem 1.15rem 0; position:relative;
  font-size:1.05rem; font-weight:600; color:var(--cream); }
.pg-faq summary::-webkit-details-marker { display:none; }
.pg-faq summary:hover { color:var(--gold-lt); }
.pg-faq summary::after { content:""; position:absolute; right:.4rem; top:50%; width:9px; height:9px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease); }
.pg-faq details[open] summary::after { transform:translateY(-30%) rotate(-135deg); }
.pg-faq-a { padding:0 2.4rem 1.3rem 0; color:var(--muted); }

.pg-details { margin:1.3rem 0 0; }
.pg-details li { display:grid; gap:.2rem; padding:1.05rem 0; border-bottom:1px solid var(--line-soft); }
.pg-details li:last-child { border-bottom:0; }
.pg-dlabel { font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.pg-dvalue { color:var(--cream); font-size:1.02rem; }
.pg-dvalue:hover { color:var(--gold-lt); }

.pg-map { margin-top:1.4rem; border-radius:14px; overflow:hidden; border:1px solid var(--line-soft); }
.pg-map iframe { width:100%; min-height:320px; border:0; display:block;
  filter:grayscale(1) invert(.92) contrast(.85) hue-rotate(180deg); }

.pg-cta { margin-top:clamp(2.5rem,5vw,3.5rem); padding:clamp(2rem,4.5vw,3rem) clamp(1.3rem,4vw,3rem);
  border:1px solid var(--line); border-radius:18px; text-align:center;
  background:linear-gradient(150deg,var(--ink-1),var(--ink)); }
.pg-cta h2 { font-size:clamp(1.5rem,3vw,2.1rem); }
.pg-cta p { max-width:48ch; margin:.9rem auto 1.6rem; color:var(--muted); }

/* ── The studio's own clip (studio_video() in build_designs.py) ─────────────
   Black and white like every photo in the options. The still sits under the
   video: it is what reduced-motion visitors see, and what shows if a phone in
   Low Power Mode refuses to autoplay. */
.vid { position:relative; overflow:hidden; background:var(--ink-2); }
.vid img, .vid video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1); }
.vid--wide  { aspect-ratio:16/9; margin-top:clamp(2rem,4vw,3rem); }
.vid--frame { aspect-ratio:16/10; }
.vid--fill  { position:absolute; inset:0; }
.vid-clip::-webkit-media-controls-start-playback-button { display:none !important; -webkit-appearance:none; }
@media (prefers-reduced-motion: reduce) { .vid-clip { display:none; } }

/* ── Photos inside inner pages (the "figure" block) ── natural aspect, capped height */
.pg-fig { margin:clamp(2rem,4vw,3rem) 0 0; }
.pg-fig img { display:block; width:auto; height:auto; max-width:100%; max-height:36rem; border-radius:3px; }
.pg-fig figcaption { margin-top:.65rem; font-size:.8rem; letter-spacing:.04em; color:var(--muted); }

/* Links inside page copy (e.g. the Nimbly store on Class Attire) */
.pg-p a, .pg-card a { color:var(--gold); text-decoration:underline; text-underline-offset:.2em;
  text-decoration-thickness:1px; }
.pg-p a:hover, .pg-card a:hover { color:var(--gold-lt); }

/* Footer social icons: inline, so they follow each design's footer alignment */
.foot-social { margin:.4rem 0 0; }
.foot-social a { display:inline-grid; place-items:center; width:38px; height:38px; margin:0 .25rem;
  border:1px solid var(--line); border-radius:50%; color:var(--gold);
  transition:border-color .2s var(--ease), color .2s var(--ease); }
.foot-social a:hover { border-color:var(--gold); color:var(--gold-lt); }
.foot-social svg { width:17px; height:17px; }
/* The studio clip inside an inner page (About) */
.pg-vid { max-width:56rem; }

/* ── Programs page (designs/programs_page.py; the main site draws the same) ──
   A four-card guide to how the tracks differ, then a section per track: its
   header, a strip of its photos at their own shapes, then what it covers beside
   its classes and its recital or competition details. */
.pr-num { margin:0; font-size:.7rem; font-weight:600; letter-spacing:.2em; color:var(--gold); }
.pr-guide { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.7rem,1.6vw,1.1rem);
  margin:0 0 clamp(3rem,7vw,4.5rem); }
@media (max-width:1000px) { .pr-guide { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .pr-guide { grid-template-columns:1fr; } }
.pr-card { position:relative; display:flex; flex-direction:column; gap:.45rem;
  padding:clamp(1.1rem,2vw,1.45rem); background:var(--ink-1); border:1px solid var(--line-soft);
  border-radius:14px; transition:border-color .3s var(--ease), transform .3s var(--ease); }
.pr-card:hover { border-color:var(--line); transform:translateY(-2px); }
.pr-card h3 { margin:0; font-size:1.12rem; }
.pr-card h3 a { color:var(--cream); }
/* The heading link covers the card, so the whole card jumps to its track. */
.pr-card h3 a::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.pr-card h3 a:focus-visible { outline:none; }
.pr-card h3 a:focus-visible::after { outline:2px solid var(--gold); outline-offset:3px; }
.pr-card-tag { margin:0; font-size:.92rem; color:var(--muted); }
.pr-card dl { display:grid; gap:.5rem; margin:.5rem 0 0; padding-top:.9rem; border-top:1px solid var(--line-soft); }
.pr-card dl div { display:grid; grid-template-columns:5.4rem minmax(0,1fr); gap:.6rem; }
.pr-card dt { padding-top:.2em; font-size:.64rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); }
.pr-card dd { margin:0; font-size:.88rem; color:var(--text); }
.pr-more { margin:auto 0 0; padding-top:.9rem; font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); }

.pr-track { scroll-margin-top:1.5rem; }
.pr-track + .pr-track { margin-top:clamp(3rem,7vw,5rem); padding-top:clamp(3rem,7vw,5rem);
  border-top:1px solid var(--line); }
.pr-head { max-width:46rem; }
.pr-head .pg-h2 { margin:.4rem 0 .45rem; }
.pr-meta { margin:0 0 .9rem; font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); }
.pr-tag { margin:0; font-size:clamp(1.15rem,2.1vw,1.5rem); line-height:1.35; color:var(--cream); }

/* One row at a shared height: each photo grows by its own width/height (--ar),
   so none is cropped. --strip-max stops a row of a few tall photos growing too tall. */
.pr-strip { display:flex; gap:8px; max-width:var(--strip-max,none); margin:clamp(1.5rem,3.5vw,2.25rem) 0; }
.pr-strip figure { flex:var(--ar) 1 0; aspect-ratio:var(--ar); margin:0; overflow:hidden;
  border-radius:4px; background:var(--ink-2); }
.pr-strip img { width:100%; height:100%; object-fit:cover; }
@media (max-width:700px) {   /* phones: a full-bleed row you swipe */
  .pr-strip { max-width:none; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); }
  .pr-strip::-webkit-scrollbar { display:none; }
  .pr-strip figure { flex:0 0 auto; height:clamp(200px,56vw,260px); scroll-snap-align:start; }
}

.pr-body { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start; }
@media (max-width:860px) { .pr-body { grid-template-columns:1fr; } }
.pr-intro { max-width:62ch; margin:0 0 1.5rem; color:var(--text); }
.pr-label { margin:0 0 .85rem; font-size:.7rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); }
.pr-points { margin:0; }
.pr-points--2 { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem; }
@media (max-width:560px) { .pr-points--2 { grid-template-columns:1fr; } }
.pr-side { display:grid; gap:.75rem; }
.pr-subs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:clamp(1.25rem,3vw,2rem); }
@media (max-width:860px) { .pr-subs { grid-template-columns:1fr; margin-top:.75rem; } }
.pr-box { padding:clamp(1.1rem,2vw,1.4rem); background:var(--ink-1); border:1px solid var(--line-soft);
  border-radius:14px; }
.pr-box p { margin:0 0 .75rem; font-size:.93rem; color:var(--muted); }
.pr-classes { display:flex; flex-wrap:wrap; gap:.4rem; }
.pr-classes li { padding:.34rem .72rem; border:1px solid var(--line); border-radius:999px;
  font-size:.78rem; color:var(--text); }
.pr-list { list-style:disc; padding-left:1.15rem; display:grid; gap:.4rem; font-size:.93rem; color:var(--muted); }
.pr-list li::marker { color:var(--gold); }
.pr-list a, .pr-points a { color:var(--gold); text-decoration:underline; text-underline-offset:.2em; }