/* Calla Reyes Photography demo stylesheet (spec 17, v2-demo-photography;
   build round R4, the redesign layer): the "Silverprint" register.
   Standalone, scoped css for this demo alone: every selector is .crp- prefixed. The
   documented machine-scope exception is exactly one: the token block on
   #demo-main (the demo's own serving scope: the one sanctioned
   machine-selector root, which also repaints the machinery midnight body
   paint on the serving surface). The demo also carries its own border-box
   group (the machinery sheets ship no global reset), which the
   page-spanning chrome wrapper joins, and the descendant link override
   group (the machinery base paints no anchors, so prose anchors would
   bleed UA styling; fact 302). EVERY component anchor rule rides the
   exclusion belt (spec-16 D1 law): ".crp-page a.crp-*" at (0,2,1) with
   hovers at (0,3,1), so no anchor paints bare link ink and the override
   group never eats a button face.

   Machinery contract (demo-base.css, demo-notice.css, layouts.demo) is
   never redefined here: the machinery banner-clearance token is
   consumed at EXACTLY ONE var() site, the demo-owned --crp-clear bridge
   on the page wrapper (the
   static chrome has no sticky pin site; sibling demos ship two sites,
   this demo ships one machinery consumption). The full-screen disclosure
   overlay and the nav both drink the demo-owned token. The banner is
   machinery z-index 9998 fixed-top and nothing demo-owned ever overlaps
   it (the disclosure overlay rides z 9000, the lightbox z 9500). No
   stylesheet imports anywhere; the sibling demo namespaces and the app
   bundles are absent by construction (the prefix census proves it).

   Surfaces: achromatic film-black ink base (S 0.0 exactly), porcelain
   and silver light voices on the ink field, the one cool raised slate
   pair (the claims band face; the collage backing sheet and the stories
   band face), the platinum-fiber paper quotes panel inside the slate
   band, framed-void panels (ink face + 1px paper hairline ring) for the
   inquire overlay and the lightbox close control, and the ink footer
   field with its paper hairline top edge. NO saturated accent hex
   anywhere: the photos carry all the color and warmth of the page; the
   chrome is the wall of a darkroom print room. Photos square-edged
   (radius 0); buttons and panels at radius 10; 1px hairlines carry all
   structure; shadows are banned on every surface in this register.
   Scrims are the true-neutral triplet rgba(10, 10, 10, stop) at the two
   full-bleed surfaces only, stops 0.85 and 0.95 on the hero and 0.50 and
   0.85 on the inquire (both pairs above the worst-pixel floors; A.5);
   the lightbox dim rides 0.92; no scrim ever carries a tint. The four
   @font-face rules live ONLY in this file, self-hosted beside their OFL
   licenses under /demos/photography/fonts/, font-display swap (DM Serif
   Display normal and italic 400, Oswald 200 to 700 serving 300, Raleway
   100 to 900 serving 400/500/600; no fixed-pitch face in this stack).

   Breakpoint trio, the only media conditions in this file besides the
   reduced-motion block: 560px (directory one to two columns; the
   collage stage's bottom air lifts 64 to 96), 900px (the nav row, the
   collage split, the entry row split, quotes four up), 1000px (directory
   two to four, the stories trio three up). The machinery's own 768
   breakpoint never appears here. */

@font-face {
  font-family: "DM Serif Display";
  src: url("/demos/photography/fonts/dmserifdisplay-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/demos/photography/fonts/dmserifdisplay-latin-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/demos/photography/fonts/oswald-latin-wght.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("/demos/photography/fonts/raleway-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Silverprint tokens (redesign plan part A.2, the locked block; the
   single sanctioned machine-scope root on this file). Achromatic
   film-black field (S 0.0 exactly, no hue to confess), porcelain and
   silver light voices, the one cool raised slate pair byte-standing,
   the platinum-fiber paper panel face, paper hairlines, true-neutral
   scrim stops, radius 10 verbs and panels. NO saturated accent hex
   anywhere in the register. */
#demo-main {
  --crp-ink: #141414;            /* THE base field: achromatic film-black (S 0.0 exactly, L 7.8) */
  --crp-slate: #3e424a;          /* THE slate band face (hue 220, sat 8.8, L 26.7): the one cool raised voice, byte-unchanged */
  --crp-slate-deep: #33373e;     /* the cool sheet: collage backing + stories band face (hue 218.2, sat 9.7, L 22.2), byte-unchanged */
  --crp-paper: #eceae5;          /* the platinum-fiber paper: the review panel face, the primary button fill (hue 42.9, sat 15.6, L 91.2) */
  --crp-porcelain: #f4f3f0;      /* headings, bright body, over-scrim text voice (hue 45.0, sat 15.4, L 94.9) */
  --crp-silver: #c4c0b8;         /* body text on ink, the verb underline voice (hue 40.0, sat 9.2, L 74.5) */
  --crp-silver-bright: #e9e7e3;  /* verbs, hover states, outline-button caps, nav hover (hue 40.0, sat 12.0, L 90.2) */
  --crp-fog: #98948c;            /* muted meta on ink: contact heads, hours, footer copy (hue 40.0, sat 5.5, L 57.3) */
  --crp-graphite: #5d5c58;       /* the label voice on paper: quote names (hue 48.0, sat 2.8, L 35.5) */
  --crp-hairline: rgba(237, 234, 229, 0.16);   /* paper hairline (1px structure) */
  --crp-ink-hairline: rgba(20, 20, 20, 0.14);  /* hairline ON the paper panel */
  --crp-scrim-triplet: 10, 10, 10;             /* true-neutral scrim stops only */
  --crp-shell: 1160px;
  --crp-radius: 10px;
  --crp-display: "DM Serif Display", Georgia, serif;
  --crp-micro: "Oswald", sans-serif;
  --crp-body: "Raleway", sans-serif;
  background: var(--crp-ink);
  color: var(--crp-silver);
}

/* Machinery clearance contract (demo-base): the machinery token is
   consumed at EXACTLY ONE site, this bridge. Every demo-owned consumer
   (the static nav's top padding, the disclosure overlay's top padding)
   drinks the demo-owned --crp-clear, never the machinery token
   directly. No base variable is ever redefined. */
.crp-page {
  --crp-clear: var(--demo-notice-space);
  position: relative;
  font-family: var(--crp-body);
  font-size: 1rem;
  line-height: 1.7;
}

/* Box discipline: the machinery stylesheets ship no global reset
   (content-box is the browser default), so the demo carries its own
   border-box group the way the machinery skip link does: min-heights
   stay honest (a 44px target never becomes 44 plus padding). */
.crp-page,
.crp-page *,
.crp-page *::before,
.crp-page *::after {
  box-sizing: border-box;
}

/* The descendant link override group (fact 302; spec-16 D1 lesson).
   Every component anchor rule below rides the exclusion belt
   ".crp-page a.crp-*" so this group never beats a component face. */
.crp-page a {
  color: inherit;
  text-decoration: none;
}

/* The page reset: the machinery ships no margins reset; the demo's
   components own their own spacing. */
.crp-page h1,
.crp-page h2,
.crp-page h3,
.crp-page p,
.crp-page ul,
.crp-page ol,
.crp-page figure,
.crp-page blockquote,
.crp-page details {
  margin: 0;
}
.crp-page ul,
.crp-page ol {
  padding: 0;
}
.crp-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The shell: width, inline padding, left-ragged measure. */
.crp-page .crp-shell {
  width: 100%;
  max-width: var(--crp-shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Shared voices: the Oswald caps eyebrow, the serif band heading, the
   unclassed serif h2 (the about feature, craft, and studio rows). */
.crp-page .crp-eyebrow {
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crp-porcelain);
  margin-bottom: 18px;
}
.crp-page .crp-band-head {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.15;
  color: var(--crp-porcelain);
  margin-bottom: 8px;
}
.crp-page h2 {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 3.6vw, 3.2rem);
  line-height: 1.2;
  color: var(--crp-porcelain);
}
.crp-page h3 {
  font-family: var(--crp-display);
  font-weight: 400;
  color: var(--crp-porcelain);
  line-height: 1.2;
}

/* THE VERB: the drawn-chevron text verb. Shared voice for anchor and
   span forms; the anchor form re asserts past the link group (the
   exclusion belt), the on-slate form keeps the silver-bright ink (8.16:1
   on slate, above the 4.5 floor; the underline still carries silver).
   A.6: general hover rides porcelain; on the slate band the special
   case pins both states at silver-bright (the 0,4,1 group wins both). */
.crp-page .crp-verb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crp-silver-bright);
  text-decoration: underline;
  text-decoration-color: var(--crp-silver);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 160ms;
}
.crp-page a.crp-verb {
  min-height: 44px;
  color: var(--crp-silver-bright);
  text-decoration-color: var(--crp-silver);
}
.crp-page a.crp-verb:hover {
  color: var(--crp-porcelain);
}
.crp-page .crp-claims a.crp-verb,
.crp-page .crp-claims a.crp-verb:hover {
  color: var(--crp-silver-bright);
}
.crp-page .crp-verb-chev {
  flex: none;
}

/* Buttons: exclusion-belt anchors at (0,2,1); hovers at (0,3,1). The
   paper fill is the register's signature (A.6): the negative/positive
   print metaphor. */
.crp-page a.crp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: 28px;
  background: var(--crp-paper);
  color: var(--crp-ink);
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--crp-radius);
  transition: background-color 160ms;
}
.crp-page a.crp-btn:hover {
  background: var(--crp-porcelain);
}
.crp-page a.crp-btn-outline {
  background: transparent;
  border: 1px solid var(--crp-silver-bright);
  color: var(--crp-silver-bright);
}
.crp-page a.crp-btn-outline:hover {
  background: transparent;
  border-color: var(--crp-porcelain);
  color: var(--crp-porcelain);
}

/* Focus: visible silver-bright ring on every interactive element. */
.crp-page a:focus-visible,
.crp-page button:focus-visible,
.crp-page summary:focus-visible {
  outline: 2px solid var(--crp-silver-bright);
  outline-offset: 2px;
}

/* THE STATIC NAV (non sticky, on the base ink): the first in-flow
   element pays the fixed machinery banner's height through the
   --crp-clear bridge. */
.crp-page .crp-nav {
  background: var(--crp-ink);
  padding-top: var(--crp-clear);
}
.crp-page .crp-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.crp-page .crp-brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.crp-page .crp-brand-word {
  font-family: var(--crp-display);
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--crp-porcelain);
}
.crp-page .crp-brand-sub {
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--crp-fog);
}
.crp-page .crp-nav-links {
  display: none;
  list-style: none;
  align-items: center;
  gap: 32px;
}
.crp-page a.crp-nav-link {
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crp-silver);
  transition: color 160ms;
}
.crp-page a.crp-nav-link:hover {
  color: var(--crp-silver-bright);
}
.crp-page a.crp-nav-link[aria-current="page"] {
  color: var(--crp-porcelain);
  text-decoration: underline;
  text-decoration-color: var(--crp-silver);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.crp-page .crp-nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 48px;
  min-height: 48px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--crp-hairline);
  border-radius: var(--crp-radius);
  color: var(--crp-porcelain);
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.crp-page .crp-nav-toggle-bars {
  display: block;
  width: 18px;
  height: 4px;
  border-top: 1px solid var(--crp-porcelain);
  border-bottom: 1px solid var(--crp-porcelain);
}
.crp-page .crp-nav-toggle-bars::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--crp-porcelain);
}

/* The full-screen disclosure overlay: closed paint is the base rule,
   the open class paints it, and the hidden-attribute companion beside
   the display rules lets the ATTRIBUTE always win (fact 337: attributes
   govern semantics; paint truth at every width after resize). The
   overlay rides z 9000: under the machinery banner's 9998, above the
   page. Top padding clears the banner through the --crp-clear bridge. */
.crp-page .crp-nav-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--crp-ink);
  padding: calc(var(--crp-clear) + 16px) 32px 48px;
  overflow-y: auto;
}
.crp-page .crp-nav-menu.crp-nav-open {
  display: block;
}
.crp-page .crp-nav-menu[hidden] {
  display: none;
}
.crp-page .crp-nav-menu-inner {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  padding-top: 40px;
}
.crp-page .crp-nav-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--crp-hairline);
  border-radius: var(--crp-radius);
  color: var(--crp-porcelain);
  cursor: pointer;
}
.crp-page .crp-nav-menu-links {
  list-style: none;
  display: grid;
  gap: 8px;
  padding-top: 96px;
}
.crp-page .crp-nav-menu-links a {
  display: flex;
  align-items: center;
  min-height: 64px;
  font-family: var(--crp-display);
  font-size: 2.3rem;
  line-height: 1.1;
  color: var(--crp-porcelain);
}
.crp-page .crp-nav-menu-links a:hover {
  color: var(--crp-silver-bright);
}
.crp-page .crp-nav-menu-contact {
  margin-top: 40px;
}
.crp-page .crp-nav-menu-contact a {
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crp-silver);
}
.crp-page .crp-nav-menu-contact a:hover {
  color: var(--crp-silver-bright);
}

/* The contact block: shared chrome, rides before the footer on all
   four pages. Zero form controls anywhere (the funnel honesty law). */
.crp-page .crp-contact {
  border-top: 1px solid var(--crp-hairline);
  padding-block: 88px;
}
.crp-page .crp-contact-grid {
  display: grid;
  gap: 40px;
}
.crp-page .crp-contact-head {
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crp-fog);
  margin-bottom: 14px;
}
.crp-page .crp-contact p {
  color: var(--crp-porcelain);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 8px;
}
.crp-page .crp-contact-hours {
  color: var(--crp-fog);
  font-size: 0.95rem;
}
.crp-page a.crp-contact-link {
  color: var(--crp-porcelain);
  text-decoration: underline;
  text-decoration-color: var(--crp-silver);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 160ms;
}
.crp-page a.crp-contact-link:hover {
  color: var(--crp-silver-bright);
}

/* THE FOOTER: the ink field with the paper hairline top edge; the
   presence comes from air and the big serif statement, not a different
   field. Nav repeat, visit column, fog copyright line. No social
   icons, no embeds. */
.crp-page .crp-footer {
  background: var(--crp-ink);
  border-top: 1px solid var(--crp-hairline);
  padding-block: 128px 64px;
}
.crp-page .crp-footer-grid {
  display: grid;
  gap: 64px 32px;
}
.crp-page .crp-footer-statement {
  font-family: var(--crp-display);
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  line-height: 1.15;
  color: var(--crp-porcelain);
  max-width: 17ch;
}
.crp-page .crp-footer-head {
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crp-fog);
  margin-bottom: 14px;
}
.crp-page .crp-footer-col p {
  color: var(--crp-silver);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 8px;
}
.crp-page .crp-footer-list {
  list-style: none;
  display: grid;
  gap: 8px;
}
.crp-page .crp-footer-list a,
.crp-page .crp-footer-col a {
  color: var(--crp-porcelain);
  font-size: 0.95rem;
  transition: color 160ms;
}
.crp-page .crp-footer-list a:hover,
.crp-page .crp-footer-col a:hover {
  color: var(--crp-silver-bright);
}
.crp-page .crp-footer-copy {
  color: var(--crp-fog);
  font-size: 0.78rem;
  margin-top: 56px;
}

/* HOME S1: THE HERO. Full bleed under the true-neutral scrim; the
   eyebrow, the serif-italic accent line, the display-scale serif h1,
   the promise, the CTA pair; the 1px paper hairline crosses the hero's
   lower edge full width; the small-caps scroll micro label rides the
   bottom edge. */
.crp-page .crp-hero {
  position: relative;
  min-height: 560px;
  border-bottom: 1px solid var(--crp-hairline);
}
.crp-page .crp-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.crp-page .crp-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.95));
}
.crp-page .crp-hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
}
.crp-page .crp-hero-accent {
  font-family: var(--crp-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  line-height: 1.4;
  color: var(--crp-porcelain);
  margin-bottom: 18px;
}
.crp-page .crp-hero-title {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: 1.02;
  color: var(--crp-porcelain);
}
.crp-page .crp-hero-promise {
  color: var(--crp-porcelain);
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 40ch;
  margin-top: 28px;
}
.crp-page .crp-hero-ctas {
  display: grid;
  gap: 12px;
  margin-top: 40px;
}
.crp-page .crp-hero-ctas a.crp-btn {
  width: 100%;
  max-width: 360px;
}
.crp-page .crp-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--crp-porcelain);
}
.crp-page .crp-hero-scroll-line {
  display: block;
  width: 1px;
  height: 26px;
  background: var(--crp-porcelain);
}

/* HOME S2: THE INTRO COLLAGE. The cool sheet (slate-deep) behind a
   deliberately staggered image pair (the tall portrait pops 64px above
   the sheet's top edge; the wide detail floats with a 32px lip above
   the sheet's bottom edge and pops 2 percent past its right edge), type
   column beside. The same percentages hold in the single column below
   900; below 560 the stage's bottom air tightens to 64px (the base
   carries 64; the 560 breakpoint lifts it to 96). */
.crp-page .crp-collage {
  padding-block: 112px 120px;
}
.crp-page .crp-collage-grid {
  display: grid;
  gap: 56px;
}
.crp-page .crp-collage-head {
  margin-bottom: 22px;
}
.crp-page .crp-collage-p {
  color: var(--crp-silver);
  max-width: 42ch;
  margin-bottom: 18px;
}
.crp-page .crp-collage-verbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin-top: 8px;
}
.crp-page .crp-collage-stage {
  position: relative;
  padding-bottom: 64px;
}
.crp-page .crp-collage-stage::before {
  content: "";
  position: absolute;
  top: 64px;
  bottom: 24px;
  left: 2%;
  right: 2%;
  background: var(--crp-slate-deep);
  border-radius: var(--crp-radius);
}
.crp-page .crp-collage-tall {
  position: relative;
  z-index: 1;
  width: 60%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin-left: 8%;
}
.crp-page .crp-collage-wide {
  position: absolute;
  right: 0;
  bottom: 56px;
  z-index: 2;
  width: 46%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* HOME S3: THE REVIEWS AND CLAIMS BAND. The descended slate family
   band; the big serif claim and the four stats left, the portrait
   right, and the paper inner quotes panel spanning beneath (the paper
   panel is a legitimately light raised surface INSIDE the dark band,
   never a page base). On slate, verb ink stays silver-bright. */
.crp-page .crp-claims {
  background: var(--crp-slate);
  padding-block: 96px;
}
.crp-page .crp-claims-grid {
  display: grid;
  gap: 48px;
}
.crp-page .crp-claims-claim {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 5vw, 4.9rem);
  line-height: 1.15;
  color: var(--crp-porcelain);
  margin-bottom: 36px;
}
.crp-page .crp-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 28px;
}
.crp-page .crp-stat-figure {
  display: block;
  font-family: var(--crp-display);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: 1.1;
  color: var(--crp-porcelain);
}
.crp-page .crp-stat-label {
  display: block;
  margin-top: 8px;
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crp-silver);
}
.crp-page .crp-claims-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
}
.crp-page .crp-quotes {
  grid-column: 1 / -1;
  background: var(--crp-paper);
  border-radius: var(--crp-radius);
  padding: 48px 24px 40px;
}
.crp-page .crp-quotes-row {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
}
.crp-page .crp-quote {
  padding-block: 26px;
}
.crp-page .crp-quote + .crp-quote {
  border-top: 1px solid var(--crp-ink-hairline);
}
.crp-page .crp-quote p {
  color: var(--crp-ink);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.crp-page .crp-quote-name {
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crp-graphite);
}
.crp-page .crp-quotes-cta {
  text-align: center;
  margin-top: 36px;
}

/* HOME S4: THE COLLECTIONS BAND. Full width typographic band; three
   definition rows with hairline dividers; the no-fee line beneath. */
.crp-page .crp-collections {
  padding-block: 104px;
}
.crp-page .crp-collections-narrow {
  max-width: 880px;
}
.crp-page .crp-rows {
  list-style: none;
  margin-top: 40px;
}
.crp-page .crp-rows li {
  border-top: 1px solid var(--crp-hairline);
}
.crp-page .crp-rows li:last-child {
  border-bottom: 1px solid var(--crp-hairline);
}
.crp-page .crp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 24px;
  align-items: baseline;
  padding-block: 34px;
}
.crp-page .crp-row-name {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1.2;
  color: var(--crp-porcelain);
}
.crp-page .crp-row-price {
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crp-silver);
}
.crp-page .crp-row-note {
  grid-column: 1 / -1;
  color: var(--crp-silver);
  font-size: 0.98rem;
  line-height: 1.6;
}
.crp-page a.crp-row:hover .crp-row-name {
  color: var(--crp-porcelain);
  text-decoration: underline;
  text-decoration-color: var(--crp-silver-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.crp-page .crp-fee-line {
  color: var(--crp-porcelain);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 56ch;
  margin-top: 40px;
}

/* HOME S5: THE INQUIRE PANEL. Full bleed background under the lighter
   true-neutral scrim (the photograph READS at 15 to 50 percent signal);
   the framed void centered on it: ink face + 1px paper hairline ring at
   radius 10; img first, scrim second, content overlay third. Every
   glyph sits on the solid ink face, none on the photo. */
.crp-page .crp-inq {
  position: relative;
  min-height: 560px;
  padding-block: 104px;
}
.crp-page .crp-inq-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crp-page .crp-inq-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.50), rgba(10, 10, 10, 0.85));
}
.crp-page .crp-inq-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: 24px;
}
.crp-page .crp-inq-panel {
  background: var(--crp-ink);
  border: 1px solid var(--crp-hairline);
  border-radius: var(--crp-radius);
  padding: 56px 48px 48px;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.crp-page .crp-inq-head {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4vw, 3.4rem);
  line-height: 1.15;
  color: var(--crp-porcelain);
}
.crp-page .crp-inq-line {
  color: var(--crp-porcelain);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 40ch;
  margin: 14px auto 0;
}
.crp-page .crp-inq-cta {
  margin-top: 32px;
}

/* HOME S6: FEATURED STORIES. The cool sheet band (slate-deep); the
   porcelain tone rides the small-caps lines and tagline, the paper
   hairline carries the dividers; three portrait cells with 1px vertical
   dividers at the wide breakpoint. */
.crp-page .crp-stories {
  background: var(--crp-slate-deep);
  border-block: 1px solid var(--crp-hairline);
  padding-block: 96px;
}
.crp-page .crp-stories-tag {
  color: var(--crp-porcelain);
  margin-bottom: 48px;
}
.crp-page .crp-stories-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.crp-page .crp-story + .crp-story {
  border-top: 1px solid var(--crp-hairline);
  padding-block: 44px 0;
}
.crp-page .crp-story img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 32%;
}
.crp-page .crp-story-line {
  margin-top: 22px;
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crp-silver);
}
.crp-page .crp-story-title {
  margin-top: 10px;
}
.crp-page .crp-story-title {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  line-height: 1.3;
  color: var(--crp-porcelain);
}
.crp-page .crp-story-title + p {
  margin-top: 14px;
}

/* PORTFOLIO P1: THE STATEMENT HEADER. The ONE centered band header in
   this demo (pinned exception): the drawn aperture above the h1 and
   the two-sentence intro; the paper hairline closes the block. */
.crp-page .crp-work-head {
  padding-block: 96px 80px;
  border-bottom: 1px solid var(--crp-hairline);
}
.crp-page .crp-work-head-inner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.crp-page .crp-aperture {
  display: inline-block;
  color: var(--crp-porcelain);
}
.crp-page .crp-work-title {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: clamp(3rem, 5.2vw, 4.5rem);
  line-height: 1.1;
  color: var(--crp-porcelain);
  margin-top: 18px;
}
.crp-page .crp-work-intro {
  color: var(--crp-silver);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-top: 20px;
}

/* PORTFOLIO P2: THE DIRECTORY GRID. THE UNIFORM FOUR-COLUMN GRID IS A
   PINNED MIMIC EXCEPTION (the spec-16 A4 pattern): the source directory
   ships a uniform small-gutter photo header grid at four columns wide,
   two mid, one small, and the fifth cell wraps naturally to row two
   column one. Every cell is a chromeless photo-over-label composition
   in the source's anatomy: the drawn icon rides inside a 52px ink-disc
   badge that straddles the photo window's bottom edge exactly half
   in and half out (bottom -26px), over a centered label band; the
   badge is the drawn signature element, never a boxed body (no card
   box, no shadow, no rim anywhere; the only drawn chrome is the badge
   ring and the verb's 1px silver underline). The anchor is the touch
   target: the badge is aria-hidden decoration inside it. */
.crp-page .crp-work-grid-wrap {
  padding-block: 72px 8px;
}
.crp-page .crp-work-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px 20px;
}
.crp-page a.crp-cat {
  display: block;
  color: var(--crp-porcelain);
}
.crp-page .crp-cat-media {
  position: relative;
}
.crp-page .crp-cat-media img {
  width: 100%;
  aspect-ratio: 11 / 10;
  object-fit: cover;
}
.crp-page .crp-cat-badge {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: var(--crp-ink);
  border: 1px solid var(--crp-silver);
  color: var(--crp-porcelain);
}
.crp-page .crp-cat-badge svg {
  display: block;
  width: 24px;
  height: 24px;
}
.crp-page .crp-cat-label {
  display: grid;
  justify-items: center;
  padding-top: 38px;
  text-align: center;
  row-gap: 8px;
}
.crp-page .crp-cat-title {
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 1.02rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crp-porcelain);
}
.crp-page .crp-cat .crp-verb {
  font-size: 0.74rem;
}

/* PORTFOLIO P3: THE DIRECTORY LISTING. Five full-width entry rows in
   category order; photo left, caption type right at the wide
   breakpoint; the caption block is bare type beside the photo (no
   boxed surface). Each row's verb opens the lightbox. */
.crp-page .crp-entries {
  padding-block: 16px 96px;
}
.crp-page .crp-entry-list {
  list-style: none;
}
.crp-page .crp-entry {
  display: grid;
  gap: 32px;
  align-items: center;
  padding-block: 56px;
}
.crp-page .crp-entry + .crp-entry {
  border-top: 1px solid var(--crp-hairline);
}
.crp-page .crp-entry-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.crp-page .crp-entry-cat {
  display: block;
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crp-silver);
}
.crp-page .crp-entry-note {
  font-family: var(--crp-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 2.3vw, 2.05rem);
  line-height: 1.4;
  color: var(--crp-porcelain);
  max-width: 28ch;
  margin: 12px 0 22px;
}
.crp-page .crp-frame-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crp-silver-bright);
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--crp-silver);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 160ms;
}
.crp-page .crp-frame-btn:hover {
  color: var(--crp-porcelain);
}

/* PORTFOLIO P4: THE LIGHTBOX. The styled full-screen dialog overlay
   (no native dialog machinery anywhere in this demo): the dim field
   closes on a direct click, the visible close control and Escape close
   with focus returned, and the hidden-attribute companion beside the
   display rules lets the ATTRIBUTE always win. The dim field carries its own
   clearance from the banner: the banner (z 9998) always paints above
   the lightbox (z 9500). */
.crp-page .crp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(10, 10, 10, 0.92);
  padding: 64px 24px 48px;
}
.crp-page .crp-lightbox.crp-lightbox-open {
  display: grid;
  place-items: center;
}
.crp-page .crp-lightbox[hidden] {
  display: none;
}
.crp-page .crp-lightbox-panel {
  position: relative;
  width: 100%;
  max-width: min(1120px, 94vw);
  margin-inline: auto;
}
.crp-page .crp-lightbox figure {
  text-align: center;
}
.crp-page .crp-lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  margin-inline: auto;
}
.crp-page .crp-lightbox-cap {
  color: var(--crp-porcelain);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 14px auto 0;
  text-align: center;
}
.crp-page .crp-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 18px;
  background: var(--crp-ink);
  color: var(--crp-porcelain);
  border: 1px solid var(--crp-hairline);
  border-radius: var(--crp-radius);
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* PORTFOLIO P5: THE DELIVERY BAND. Open void on ink (the raised face
   retires in the redesign): centered content grammar (a centered
   CONTENT band; the centered eyebrow exception stays the statement
   header alone). */
.crp-page .crp-deliver {
  border-block: 1px solid var(--crp-hairline);
  padding-block: 88px;
}
.crp-page .crp-deliver-inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.crp-page .crp-deliver-line {
  color: var(--crp-porcelain);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-top: 18px;
}
.crp-page .crp-deliver-cta {
  margin-top: 32px;
}

/* ABOUT/INQUIRE: the shared thin statement hero. */
.crp-page .crp-hero-thin {
  padding-block: 88px 64px;
  border-bottom: 1px solid var(--crp-hairline);
}
.crp-page .crp-page-title {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: clamp(3rem, 5.2vw, 4.5rem);
  line-height: 1.1;
  color: var(--crp-porcelain);
}
.crp-page .crp-page-line {
  color: var(--crp-porcelain);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-top: 14px;
}

/* ABOUT A2: THE STUDIO FEATURE. Portrait left, bio and the pull quote
   right; the pull quote is the ONE placement of the promise quote and
   carries hairline borders top and bottom on the ink field. */
.crp-page .crp-feature {
  padding-block: 112px 0;
}
.crp-page .crp-feature-grid {
  display: grid;
  gap: 48px;
}
.crp-page .crp-feature-media img {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.crp-page .crp-feature-p {
  color: var(--crp-silver);
  max-width: 52ch;
  margin-top: 18px;
}
.crp-page .crp-feature-copy h2 {
  margin: 0 0 20px;
}
.crp-page .crp-pull {
  border-block: 1px solid var(--crp-hairline);
  padding-block: 28px;
  margin-top: 40px;
  max-width: 34ch;
}
.crp-page .crp-pull p {
  font-family: var(--crp-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1.45;
  color: var(--crp-porcelain);
}
.crp-page .crp-pull-cite {
  display: block;
  font-family: var(--crp-micro);
  font-style: normal;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crp-silver-bright);
  margin-top: 16px;
}

/* ABOUT A3: THE WORKSPACE SPLIT. Copy left, media right (the
   alternation against the feature row); the craft statement rides as
   the first paragraph in the 500 porcelain voice. */
.crp-page .crp-craft {
  padding-block: 112px 0;
}
.crp-page .crp-craft-grid {
  display: grid;
  gap: 48px;
}
.crp-page .crp-craft-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.crp-page .crp-craft-copy h2 {
  margin: 0 0 20px;
}
.crp-page .crp-craft-p {
  color: var(--crp-silver);
  max-width: 52ch;
  margin-top: 18px;
}
.crp-page .crp-craft-p.crp-craft-lead {
  color: var(--crp-porcelain);
  font-weight: 500;
  font-size: 1.05rem;
}

/* ABOUT A4: REN'S TEXT ROW + THE PLAIN FACTS BAND. Text only (the
   one-face law keeps Ren photo-free); the facts ride the definition
   row grammar. */
.crp-page .crp-ren {
  padding-block: 64px;
}
.crp-page .crp-ren p {
  color: var(--crp-silver);
  max-width: 56ch;
  margin-top: 18px;
}
.crp-page .crp-facts {
  padding-block: 8px 88px;
}
.crp-page .crp-facts-rows {
  list-style: none;
}
.crp-page .crp-facts-rows li {
  border-top: 1px solid var(--crp-hairline);
  padding-block: 22px;
}
.crp-page .crp-facts-rows li:last-child {
  border-bottom: 1px solid var(--crp-hairline);
}
.crp-page .crp-facts-label {
  display: block;
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crp-fog);
  margin-bottom: 8px;
}
.crp-page .crp-facts-value {
  display: block;
  color: var(--crp-porcelain);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 62ch;
}

/* INQUIRE: the three-step rows, the have-ready list, and the four
   disclosure rows. Zero form elements on the page; disclosure rows are
   native details/summary pairs (the demo's styled overlays only). */
.crp-page .crp-detail {
  padding-block: 88px 0;
}
.crp-page .crp-steps {
  padding-block: 88px 0;
}
.crp-page .crp-steps-rows {
  list-style: none;
  margin-top: 32px;
}
.crp-page .crp-steps-rows li {
  border-top: 1px solid var(--crp-hairline);
  padding-block: 30px;
}
.crp-page .crp-steps-rows li:last-child {
  border-bottom: 1px solid var(--crp-hairline);
}
.crp-page .crp-step-label {
  display: block;
  font-family: var(--crp-micro);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crp-fog);
  margin-bottom: 10px;
}
.crp-page .crp-step-title {
  font-family: var(--crp-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--crp-porcelain);
  margin-bottom: 8px;
}
.crp-page .crp-steps-rows p {
  color: var(--crp-silver);
  line-height: 1.7;
  max-width: 56ch;
}
.crp-page .crp-steps-rows a {
  color: var(--crp-porcelain);
  text-decoration: underline;
  text-decoration-color: var(--crp-silver);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 160ms;
}
.crp-page .crp-steps-rows a:hover {
  color: var(--crp-silver-bright);
}
.crp-page .crp-ready {
  padding-block: 88px 0;
}
.crp-page .crp-ready-inner {
  max-width: 620px;
}
.crp-page .crp-ready-list {
  list-style: none;
  margin-top: 24px;
}
.crp-page .crp-ready-list li {
  border-top: 1px solid var(--crp-hairline);
  padding-block: 18px;
  color: var(--crp-silver);
}
.crp-page .crp-ready-list li:last-child {
  border-bottom: 1px solid var(--crp-hairline);
}
.crp-page .crp-faqs {
  padding-block: 88px 96px;
}
.crp-page .crp-faqs .crp-band-head {
  margin-bottom: 32px;
}
.crp-page .crp-faq {
  border-top: 1px solid var(--crp-hairline);
}
.crp-page .crp-faq:last-of-type {
  border-bottom: 1px solid var(--crp-hairline);
}
.crp-page .crp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding-block: 14px;
  font-family: var(--crp-body);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--crp-porcelain);
  cursor: pointer;
  list-style: none;
}
.crp-page .crp-faq summary::-webkit-details-marker {
  display: none;
}
.crp-page .crp-faq-chev {
  flex: none;
  display: inline-flex;
  color: var(--crp-porcelain);
  transition: transform 160ms;
}
.crp-page .crp-faq[open] .crp-faq-chev {
  transform: rotate(0.5turn);
}
.crp-page .crp-faq p {
  color: var(--crp-silver);
  line-height: 1.7;
  max-width: 62ch;
  padding-block: 0 24px;
}

/* 560px: the first step up. Directory one to two columns; the hero
   CTA pair breathes on one row; the contact and facts rows settle into
   their two-voice columns; the centered panels take their room. */
@media (min-width: 560px) {
  .crp-page .crp-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .crp-page .crp-hero-ctas a.crp-btn {
    width: auto;
    max-width: none;
  }
  .crp-page .crp-quotes {
    padding: 48px 56px 40px;
  }
  .crp-page .crp-inq-panel {
    padding: 64px 56px;
  }
  .crp-page .crp-contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .crp-page .crp-facts-rows li {
    display: grid;
    grid-template-columns: 2fr 5fr;
    gap: 4px 24px;
  }
  .crp-page .crp-facts-label {
    margin-bottom: 0;
  }
  .crp-page .crp-steps-rows li {
    display: grid;
    grid-template-columns: 2fr 5fr;
    gap: 8px 24px;
  }
  .crp-page .crp-step-label {
    margin-bottom: 0;
  }
  .crp-page .crp-work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .crp-page .crp-collage-stage {
    padding-bottom: 96px;
  }
}

/* 900px: the nav row renders (the disclosure rests); the collage and
   the claims band split their 5/7 and 7/5 columns; the quotes settle
   four up with vertical ink hairlines; the entry rows split 55/45;
   the footer holds its three columns. */
@media (min-width: 900px) {
  .crp-page .crp-nav-links {
    display: flex;
  }
  .crp-page .crp-nav-toggle {
    display: none;
  }
  .crp-page .crp-nav-menu.crp-nav-open {
    display: none;
  }
  .crp-page .crp-hero {
    min-height: 85vh;
  }
  .crp-page .crp-collage-grid {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }
  .crp-page .crp-claims-grid {
    grid-template-columns: 7fr 5fr;
    gap: 56px;
  }
  .crp-page .crp-quotes-row {
    grid-template-columns: repeat(4, 1fr);
  }
  .crp-page .crp-quote {
    padding-block: 0;
    padding-inline: 36px;
  }
  .crp-page .crp-quotes-row .crp-quote:first-child,
  .crp-page .crp-quotes-row .crp-quote:last-child {
    padding-inline: 0;
  }
  .crp-page .crp-quote + .crp-quote {
    border-top: 0;
    border-left: 1px solid var(--crp-ink-hairline);
  }
  .crp-page .crp-row {
    grid-template-columns: 4fr 2fr 6fr;
    gap: 24px;
  }
  .crp-page .crp-row-note {
    grid-column: auto;
  }
  .crp-page .crp-footer-grid {
    grid-template-columns: 7fr 2fr 3fr;
  }
  .crp-page .crp-feature-grid {
    grid-template-columns: 5fr 7fr;
    gap: 56px;
  }
  .crp-page .crp-craft-grid {
    grid-template-columns: 7fr 5fr;
    gap: 56px;
  }
  .crp-page .crp-entry {
    grid-template-columns: 55fr 45fr;
    gap: 56px;
  }
}

/* 1000px: directory two to four columns (small gutters exactly 20px;
   the fifth cell wraps naturally to row two column one) and the
   stories trio goes three up with 1px vertical hairlines. */
@media (min-width: 1000px) {
  .crp-page .crp-work-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .crp-page .crp-stories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .crp-page .crp-story {
    padding-inline: 40px;
  }
  /* J1-R6 (2026-10-12): the edge-cell air defect. The old
     padding-inline: 0 zeroed BOTH sides of the edge cells, so cell 3
     (its line/title/verb) painted flush against its left divider and
     cell 1 mirrored the hit flush right into divider 1 while cell 2
     still kept 40px from it. The edge-aligned grammar: outer edges
     flush with the shell, DIVIDER-adjacent sides carry the air, every
     divider boundary then reads 40 + 40 symmetric air. */
  .crp-page .crp-stories-grid .crp-story:first-child {
    padding-left: 0;
    padding-right: 40px;
  }
  .crp-page .crp-stories-grid .crp-story:last-child {
    padding-left: 40px;
    padding-right: 0;
  }
  .crp-page .crp-story + .crp-story {
    border-top: 0;
    border-left: 1px solid var(--crp-hairline);
    padding-block: 0;
  }
}

/* The reduced-motion block: EOF, per the machinery contract. */
@media (prefers-reduced-motion: reduce) {
  .crp-page *,
  .crp-page *::before,
  .crp-page *::after {
    transition: none !important;
    animation: none !important;
  }
}