/* Progress Series Media site styles.

   One continuous dark space. A fixed atmosphere sits behind every page and cross-fades its light to whichever
   section crosses the middle of the screen (data-m on the section, copied to <html data-m> by main.js), so the page
   never breaks into bands. Each Progress site keeps its own colours and wordmark through CSS variables set in the
   HTML (--bg, --acc, --wm-font ...). The live canvases (the hero mesh and the Nanotech lattice) are drawn by
   main.js. All motion stops for visitors who ask for reduced motion, and "Pause animations" stops it for anyone. */

:root {
  --void: #0E1530;
  --deep: #090E22;
  --on-d: #F4F1EA;
  --on-d-2: rgba(244, 241, 234, .78);
  --on-d-3: rgba(244, 241, 234, .56);
  --line-d: rgba(244, 241, 234, .12);
  --line-d2: rgba(244, 241, 234, .24);
  /* older names, so every page reads the same light-on-dark tokens */
  --ink: var(--on-d);
  --ink-2: var(--on-d-2);
  --ink-3: var(--on-d-3);
  --line: var(--line-d);
  --mint: #36F0C8;
  /* the four sites in series order: Longevity gold, Robotics orange, Intelligence sky, Nanotech mint */
  --grad: linear-gradient(100deg, #E2C38A 0%, #FF8A4C 32%, #9AA4FF 66%, #36F0C8 100%);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.45, 0, .25, 1);
  --gutter: clamp(20px, 4vw, 40px);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--on-d); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid #9AA4FF; outline-offset: 4px; border-radius: 6px; }
::selection { background: rgba(154, 164, 255, .35); }

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--on-d); color: var(--void); padding: 12px 18px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { left: 12px; }

/* ---------- the atmosphere: one fixed, coloured light behind the whole page ---------- */
.atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--void); }
.atmos i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.atmos::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); background-size: 180px; opacity: .07; mix-blend-mode: overlay; }
html[data-m="night"] .atmos [data-a="night"], html[data-m="longevity"] .atmos [data-a="longevity"],
html[data-m="robotics"] .atmos [data-a="robotics"], html[data-m="intelligence"] .atmos [data-a="intelligence"],
html[data-m="nanotech"] .atmos [data-a="nanotech"], html[data-m="bridges"] .atmos [data-a="bridges"],
html[data-m="dusk"] .atmos [data-a="dusk"], html[data-m="dawn"] .atmos [data-a="dawn"] { opacity: 1; }
/* night: the company's own colour, a deep ink navy with blue light and a trace of teal */
.atmos [data-a="night"] { background: radial-gradient(1100px 760px at 78% 8%, rgba(86, 104, 220, .42), transparent 64%), radial-gradient(1000px 760px at 2% 98%, rgba(26, 128, 122, .24), transparent 70%), #0E1530; }
/* Longevity Progress: a deep sea at dawn, teal water and gold light */
.atmos [data-a="longevity"] { background: radial-gradient(1000px 700px at 82% 14%, rgba(226, 195, 138, .30), transparent 62%), radial-gradient(1100px 860px at 0% 100%, rgba(34, 132, 134, .42), transparent 68%), #0C2A2E; }
/* Robotics Progress: dusk, a plum sky and an orange sun */
.atmos [data-a="robotics"] { background: radial-gradient(1100px 720px at 80% 10%, rgba(255, 112, 52, .28), transparent 60%), radial-gradient(1200px 860px at 4% 94%, rgba(128, 82, 200, .5), transparent 70%), #1D1535; }
/* Intelligence Progress: indigo, with electric blue above and apricot at the edge */
.atmos [data-a="intelligence"] { background: radial-gradient(1000px 740px at 78% 16%, rgba(70, 84, 255, .46), transparent 62%), radial-gradient(900px 660px at 0% 96%, rgba(255, 138, 76, .18), transparent 70%), #11164A; }
/* Nanotech Progress: deep carbon green, quantum-dot mint and violet */
.atmos [data-a="nanotech"] { background: radial-gradient(1000px 720px at 76% 20%, rgba(54, 240, 200, .2), transparent 62%), radial-gradient(1000px 760px at 4% 92%, rgba(122, 115, 255, .32), transparent 70%), #08211F; }
/* dusk: under the dawn of "Never the judge", the deep magenta its ground fades into */
.atmos [data-a="dusk"] { background: radial-gradient(1100px 700px at 70% 0%, rgba(214, 76, 154, .22), transparent 62%), radial-gradient(1000px 760px at 0% 100%, rgba(86, 104, 220, .18), transparent 70%), #24102C; }
/* where the fields meet: warm plum with amber light from above */
.atmos [data-a="bridges"] { background: radial-gradient(1200px 720px at 50% -6%, rgba(255, 170, 116, .3), transparent 62%), radial-gradient(1000px 760px at 100% 100%, rgba(86, 104, 220, .26), transparent 70%), #251826; }
/* dawn: the closing, the Earth's edge at sunrise */
.atmos [data-a="dawn"] { background: radial-gradient(1300px 760px at 50% 100%, rgba(240, 162, 112, .3), transparent 64%), radial-gradient(1000px 700px at 80% 0%, rgba(86, 104, 220, .22), transparent 64%), #161430; }

/* ---------- type ---------- */
.display { font-family: var(--serif); font-size: clamp(52px, 7.4vw, 116px); line-height: .93; letter-spacing: -.02em; }
.h2 { font-family: var(--serif); font-size: clamp(42px, 5.4vw, 80px); line-height: .98; letter-spacing: -.014em; }
.h3 { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.08; }
.display em, .h2 em, .h3 em { font-style: italic; padding-right: .04em; }
.grad, .h2 em { background: var(--grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad { animation: shimmer 9s var(--ease-io) infinite alternate; }
.site-theme .h2 em, .s-ladder .h2 em { background: none; color: var(--acc); }
.eyebrow, .kicker { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--on-d-3); margin-bottom: 22px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--on-d-2); margin-bottom: 26px; }
.kicker .mark { border-radius: 7px; }
.live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex-shrink: 0; animation: ping 2.6s var(--ease) infinite; }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--on-d-2); max-width: 52ch; }
.big { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; max-width: 44ch; color: var(--on-d-2); }
.fine { font-size: 14px; line-height: 1.55; color: var(--on-d-3); margin-top: 40px; max-width: 80ch; }
.prose p + p { margin-top: 18px; }
.prose p:not(.big) { color: var(--on-d-2); }

/* ---------- buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 600 16px/1.1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .4s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.arr { width: 16px; height: 16px; flex-shrink: 0; transition: transform .4s var(--ease); }
a:hover > .arr:not(.arr-out), .btn:hover .arr:not(.arr-out) { transform: translateX(4px); }
a:hover .arr-out { transform: translate(2px, -2px); }
.btn-light { background: var(--on-d); color: var(--void); }
.btn-light:hover { background: #fff; box-shadow: 0 16px 48px -14px rgba(154, 164, 255, .7); }
.btn-ghost, .btn-outline { color: var(--on-d); border-color: rgba(244, 241, 234, .28); }
.btn-ghost:hover, .btn-outline:hover { border-color: var(--on-d); background: rgba(255, 255, 255, .06); }
.btn-acc { background: var(--acc); color: #0B0B10; }
.btn-acc:hover { box-shadow: 0 16px 48px -14px var(--acc); }
.btn-ink { background: var(--on-d); color: var(--void); }
.more-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease); }
.more-link:hover { background-size: 30% 1px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--on-d-3); margin-bottom: 34px; }
.crumbs a { color: var(--on-d-2); text-decoration: none; }
.crumbs a:hover { color: var(--on-d); text-decoration: underline; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; }
/* The blurred bar is a pseudo-element: a backdrop-filter on the header itself would trap the fixed mobile menu inside it. */
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(14, 21, 48, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--line-d); opacity: 0; transition: opacity .45s; }
.hdr.scrolled::before, .menu-open .hdr::before { opacity: 1; }
[id] { scroll-margin-top: 92px; }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.logo, .ftr-logo { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--on-d); text-decoration: none; border-radius: 8px; }
.logo svg, .ftr-logo svg { width: 30px; height: 30px; flex-shrink: 0; }
.logo rect { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.logo:hover rect { transform: scaleY(1.18); }
.logo:hover rect:nth-child(2) { transition-delay: .05s; }
.logo:hover rect:nth-child(3) { transition-delay: .1s; }
.logo:hover rect:nth-child(4) { transition-delay: .15s; }
.logo-word { font-family: var(--serif); font-size: 24px; line-height: 1; letter-spacing: -.005em; white-space: nowrap; }
.logo-word em { font-style: italic; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { position: relative; padding: 10px 15px; border-radius: 999px; color: var(--on-d-2); font-size: 15px; font-weight: 500; text-decoration: none; transition: color .25s, background-color .25s; }
.nav a:hover { color: var(--on-d); background: rgba(255, 255, 255, .06); }
.nav a[aria-current="page"] { color: var(--on-d); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1px; background: var(--grad); }
.nav .nav-cta { margin-left: 10px; color: var(--on-d); border: 1px solid rgba(244, 241, 234, .28); padding: 9px 18px; }
.nav .nav-cta:hover { border-color: var(--on-d); }
.menu-btn { display: none; position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(244, 241, 234, .3); background: transparent; cursor: pointer; }
.menu-btn span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--on-d); transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn span:first-child { top: 18px; }
.menu-btn span:last-child { top: 26px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

/* ---------- drifting light for page heads (about, 404) ---------- */
.backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 30s var(--ease-io) infinite alternate; will-change: transform; }
.a1 { width: 58vw; height: 58vw; left: -18vw; top: -30vw; background: radial-gradient(circle, rgba(46, 58, 180, .7), transparent 62%); }
.a2 { width: 50vw; height: 50vw; right: -16vw; top: -18vw; background: radial-gradient(circle, rgba(18, 110, 100, .55), transparent 62%); animation-duration: 36s; animation-delay: -11s; }
.a3 { width: 44vw; height: 44vw; left: 26vw; top: 24%; background: radial-gradient(circle, rgba(160, 90, 40, .32), transparent 62%); animation-duration: 42s; animation-delay: -21s; }

/* ---------- home: hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: max(100svh, 760px); padding-top: clamp(118px, 15vh, 160px); }
.hero-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; touch-action: pan-y; }
/* calm ground behind the headline, and a soft fade into the next section */
.hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1000px 560px at 18% 24%, rgba(14, 21, 48, .62), transparent 72%), linear-gradient(180deg, transparent 72%, rgba(14, 21, 48, .55) 100%); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end; }
.hero h1 { max-width: 13ch; }
.ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln > span { display: inline-block; }
html.js .ln > span { animation: lineup 1.3s var(--ease-out) both; animation-delay: calc(.15s + var(--l, 0) * .12s); }
.hero-side { display: grid; gap: 28px; padding-bottom: 10px; }
.hero-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-d-3); }
.hero-hint i { position: relative; width: 22px; height: 22px; border: 1px solid var(--line-d2); border-radius: 50%; }
.hero-hint i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--on-d-2); animation: orbit 3.6s var(--ease-io) infinite; }

/* the four sites, as an index along the bottom of the hero; hovering one lights its lane in the mesh */
.hero-index { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 9vh, 110px); border-top: 1px solid var(--line-d); background: linear-gradient(180deg, rgba(14, 21, 48, .3), rgba(14, 21, 48, .62)); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.hi { position: relative; display: grid; align-content: start; gap: 10px; height: 100%; padding: 22px 22px 30px; border-left: 1px solid var(--line-d); color: var(--on-d); text-decoration: none; transition: background-color .6s var(--ease); }
.hero-index li:first-child .hi { border-left: 0; padding-left: 0; }
.hi::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--lane, var(--acc)); box-shadow: 0 0 14px var(--lane, var(--acc)); transform: scaleX(.16); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.hi:hover::before, .hi:focus-visible::before { transform: scaleX(1); }
.hi:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lane, var(--acc)) 10%, transparent), transparent 80%); }
.hi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-d-3); }
.hi-top .arr { width: 14px; height: 14px; transform: rotate(90deg); opacity: .6; transition: transform .5s var(--ease), opacity .4s; }
.hi:hover .hi-top .arr { transform: rotate(90deg) translateX(4px); opacity: 1; }
.hi .wm { font-size: clamp(24px, 2.1vw, 32px); }
.hi-q { font-size: 14.5px; line-height: 1.45; color: var(--on-d-3); max-width: 30ch; transition: color .4s; }
.hi:hover .hi-q { color: var(--on-d-2); }
html.js .hero-index li { animation: rise 1.2s var(--ease) both; animation-delay: calc(.7s + var(--i) * .1s); }

/* ---------- home: the series, chapter by chapter ---------- */
.intro { padding-block: clamp(120px, 15vw, 200px) clamp(24px, 4vw, 56px); }
.intro-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px clamp(40px, 6vw, 104px); align-items: end; }

.ch { position: relative; padding-block: clamp(64px, 9vw, 130px); }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px clamp(40px, 6vw, 110px); align-items: start; }
.ch.flip .ch-stage { order: 2; }
.ch-stage { position: sticky; top: max(100px, 12vh); height: min(76vh, 760px); min-height: 540px; }
.ch-frame { position: absolute; inset: 0 9% 0 0; overflow: hidden; isolation: isolate; background: var(--bg); border-radius: 220px 28px 28px 28px; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease), box-shadow .9s var(--ease), clip-path 1.6s var(--ease-out); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .9); }
.ch.flip .ch-frame { inset: 0 0 0 9%; }
.ch-1 .ch-frame { border-radius: 50% 50% 28px 28px / 230px 230px 28px 28px; }
.ch-2 .ch-frame { border-radius: 220px 28px 28px 28px; }
.ch-3 .ch-frame { border-radius: 28px 28px 28px 220px; }
.ch.flip.ch-0 .ch-frame, .ch.flip.ch-2 .ch-frame { border-radius: 28px 220px 28px 28px; }
html.js .ch-frame:not(.is-in) { clip-path: inset(16% 12% 16% 12% round 40px); }
html.js .ch-frame.is-in { clip-path: inset(0 round 0); }
.ch-frame::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 70%, transparent) 100%); }
.ch-media { position: absolute; inset: -7%; z-index: -2; transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -16px + (var(--p, .5) - .5) * -90px), 0); transition: transform .9s var(--ease); }
.ch-media img { width: 100%; height: 100%; object-fit: cover; animation: kb 36s var(--ease-io) infinite alternate; animation-delay: calc(var(--i, 0) * -9s); }
.ch-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.ch-frame.is-live { background: radial-gradient(80% 60% at 62% 38%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%), radial-gradient(70% 50% at 20% 90%, rgba(122, 115, 255, .16), transparent 70%), var(--bg); }
.ch-orn { position: absolute; left: 50%; top: 44%; z-index: 1; width: clamp(140px, 30%, 240px); transform: translate(-50%, -50%) translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 14px), 0); transition: transform .9s var(--ease); opacity: .9; }
.ch-light { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--acc) 30%, transparent), transparent 62%); transition: opacity .6s; }
.ch-stage:hover .ch-light { opacity: 1; }
.ch-stage:hover .ch-frame { box-shadow: 0 70px 130px -60px rgba(0, 0, 0, .95), 0 0 0 1px color-mix(in srgb, var(--acc) 34%, transparent); }
.ch-tag { position: absolute; left: 24px; bottom: 22px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(8, 10, 18, .44); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-decoration: none; transition: border-color .3s, background-color .3s; }
.ch-tag:hover { border-color: var(--acc); background: rgba(8, 10, 18, .64); }
.ch-tag .live { background: var(--acc); animation: none; }
.ch.flip .ch-tag { left: auto; right: 24px; }
.ch-float { position: absolute; right: 0; bottom: 9%; z-index: 5; width: 36%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px 110px 22px 22px; background: var(--bg2); box-shadow: 0 44px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .1); transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px + (var(--p, .5) - .5) * -170px), 0); transition: transform .9s var(--ease); }
.ch.flip .ch-float { right: auto; left: 0; border-radius: 110px 22px 22px 22px; }
.ch-float img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.ch-stage:hover .ch-float img { transform: scale(1.14); }
.ch-copy { padding-block: clamp(16px, 7vh, 80px) clamp(16px, 10vh, 120px); }
.ch-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-d-3); }
.ch-kicker .mark { border-radius: 6px; }
.ch-kicker b { font-weight: 400; color: var(--acc); }
.ch-wm { display: block; margin: 26px 0 26px; font-size: clamp(56px, 6.6vw, 108px); line-height: .9; }
.ch-wm em { display: block; margin-top: .04em; }
.ch-q { font-family: var(--serif); font-style: italic; font-size: clamp(25px, 2.3vw, 32px); line-height: 1.2; color: var(--on-d); max-width: 24ch; }
.ch-sum { margin-top: 22px; color: var(--on-d-2); max-width: 50ch; }
.ch-copy .ladder { margin-top: 46px; }
.ch-copy .ladder figcaption { gap: 6px; }
.ch-aud { margin-top: 30px; font-size: 15.5px; color: var(--on-d-3); max-width: 50ch; }
.ch-copy .actions { margin-top: 34px; }
.ch-copy .more-link { margin-left: 12px; }

/* ---------- home: never the judge, at dawn ---------- */
/* After Longevity Progress's skin feature: a violet dusk turning to dawn behind a wavy edge with a glowing rim, the
   sun's rays turning slowly, and a ground of flowing lines (drawn in main.js) that swell and light under the pointer. */
.creed-wrap { --wave: clamp(44px, 7.5vw, 120px); position: relative; margin-top: clamp(30px, 5vw, 80px); }
.creed-rim { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: var(--wave); overflow: visible; pointer-events: none; filter: drop-shadow(0 0 6px #FFB26B) drop-shadow(0 0 20px #FF8F6B); animation: rim 7s ease-in-out infinite; }
.creed-rim path { fill: none; stroke: #FFC98A; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.creed { position: relative; isolation: isolate; overflow: hidden; color: #FFF6EE; background: radial-gradient(90% 520px at 16% 0, #2E1878, rgba(46, 24, 120, 0)), linear-gradient(180deg, #190F40 0%, #241250 40%, #3A1660 64%, #4A1A62 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40C300 104 560 10 860 58S1260 104 1440 36V120H0Z'/%3E%3C/svg%3E") top center / 100% var(--wave) no-repeat, linear-gradient(180deg, #000 0, #000 calc(100% - 260px), transparent) 0 calc(var(--wave) - 1px) / 100% calc(100% - var(--wave) + 1px) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40C300 104 560 10 860 58S1260 104 1440 36V120H0Z'/%3E%3C/svg%3E") top center / 100% var(--wave) no-repeat, linear-gradient(180deg, #000 0, #000 calc(100% - 260px), transparent) 0 calc(var(--wave) - 1px) / 100% calc(100% - var(--wave) + 1px) no-repeat; }
.creed-stars { position: absolute; left: 0; right: 0; top: var(--wave); height: 520px; z-index: -1; pointer-events: none; opacity: .8; animation: twinkle 6s ease-in-out infinite alternate;
  background-image: radial-gradient(1.6px 1.6px at 8% 22%, #FFF2DE, transparent), radial-gradient(1.2px 1.2px at 19% 64%, #FFE6C8, transparent), radial-gradient(1.4px 1.4px at 31% 12%, #FFF2DE, transparent), radial-gradient(1px 1px at 44% 40%, #FFE6C8, transparent), radial-gradient(1.6px 1.6px at 57% 18%, #FFF2DE, transparent), radial-gradient(1.2px 1.2px at 63% 52%, #FFE6C8, transparent), radial-gradient(1.4px 1.4px at 76% 8%, #FFF2DE, transparent), radial-gradient(1px 1px at 84% 34%, #FFE6C8, transparent), radial-gradient(1.6px 1.6px at 92% 16%, #FFF2DE, transparent), radial-gradient(1.2px 1.2px at 97% 58%, #FFE6C8, transparent); }
.creed-top { position: relative; z-index: 1; padding-top: calc(var(--wave) + clamp(56px, 7vw, 100px)); }
/* dusk deepens away from the sun, which keeps the words clear of the bright sky */
.creed-top::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: -120px; left: calc(50% - 50vw); width: 100vw; pointer-events: none; background: linear-gradient(98deg, rgba(23, 14, 58, .82), rgba(23, 14, 58, .6) 38%, rgba(23, 14, 58, 0) 66%); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.creed-copy { max-width: 680px; }
.creed-eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #FFD27A; }
.creed-eyebrow::before { content: ""; width: 36px; height: 1px; background: #FFD27A; flex: none; }
.creed-h { margin-top: 20px; font-family: var(--serif); font-size: clamp(64px, 9vw, 150px); line-height: .9; letter-spacing: -.022em; text-shadow: 0 2px 40px rgba(20, 8, 60, .7); }
.creed-h em { font-style: italic; color: #FFD0A0; padding-right: .05em; }
.creed-lede { margin-top: 26px; max-width: 34em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.58; text-shadow: 0 1px 18px rgba(20, 8, 60, .85); }
.creed-ground { --crest: 110px; position: relative; padding: calc(var(--crest) + 70px) 0 clamp(170px, 16vw, 230px); }
.creed-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.creed-sun, .creed-rays { position: absolute; left: 70%; top: var(--crest); z-index: -1; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.creed-sun { width: min(1300px, 100vw); background: radial-gradient(closest-side, #FFFBEA, rgba(255, 238, 184, .96) 5%, rgba(255, 196, 128, .78) 11%, rgba(255, 150, 110, .56) 21%, rgba(232, 86, 146, .36) 38%, rgba(140, 52, 170, .16) 58%, transparent 78%); animation: sun 8s ease-in-out infinite alternate; }
.creed-rays { width: 150vw; background: repeating-conic-gradient(rgba(255, 236, 196, .17) 0 2.4deg, rgba(255, 236, 196, 0) 2.4deg 8deg, rgba(255, 214, 170, .09) 8deg 9.4deg, rgba(255, 214, 170, 0) 9.4deg 19deg); -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 76%); mask-image: radial-gradient(closest-side, #000 8%, transparent 76%); animation: rays 260s linear infinite; }
.creed-doors { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.creed-door { display: grid; align-content: start; gap: 10px; padding: 14px 26px 6px 0; }
.creed-door + .creed-door { padding-left: 26px; border-left: 1px solid rgba(255, 224, 176, .26); }
.creed-door .num { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: #FFD27A; }
.creed-door h3 { font-family: var(--serif); font-size: clamp(28px, 2.5vw, 38px); line-height: 1.05; letter-spacing: -.01em; color: #FFE0B0; text-shadow: 0 2px 22px rgba(40, 6, 40, .85); }
.creed-door p { font-size: 15.5px; line-height: 1.5; color: #FFF6EE; text-shadow: 0 1px 12px rgba(40, 6, 40, .95); }

.principles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: clamp(64px, 8vw, 112px); }
.principles li { position: relative; padding-top: 24px; border-top: 1px solid var(--line-d); }
.principles li::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--grad); }
.principles .num, .inside-list .num { font-family: var(--mono); font-size: 12px; color: var(--on-d-3); }
.principles h3 { margin: 14px 0 10px; font-family: var(--serif); font-size: 28px; line-height: 1.08; }
.principles p { font-size: 15.5px; line-height: 1.55; color: var(--on-d-2); }

/* ---------- evidence ladders ---------- */
.ladders { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 48px clamp(32px, 4vw, 64px); margin-top: clamp(56px, 7vw, 100px); align-items: start; }
.ladder figcaption { display: grid; gap: 10px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line-d); }
.ladder-wm { font-size: clamp(27px, 2.3vw, 34px); color: #fff; }
.ladder-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.ladder-q { font-size: 15px; line-height: 1.45; color: var(--on-d-3); }
.steps { list-style: none; padding: 0; display: grid; gap: 15px; }
.steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.st-n { font-family: var(--mono); font-size: 12px; line-height: 1.9; color: var(--on-d-3); }
.st-name { display: block; font-size: 16px; font-weight: 500; line-height: 1.35; }
.st-rule { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--on-d-3); }
.st-bar { display: block; width: calc(var(--k) / var(--n) * 100%); height: 5px; margin-top: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 18px -4px var(--c); transform-origin: 0 50%; transition: transform 1.1s var(--ease) calc(.2s + (var(--k) - 1) * 120ms); }
html.js .ladder[data-reveal]:not(.is-in) .st-bar { transform: scaleX(0); }
.ladder .more-link { margin-top: 26px; font-size: 15px; }
.ladder-rules .steps { gap: 20px; }

/* ---------- where the fields meet ---------- */
.sec { position: relative; padding-block: clamp(84px, 11vw, 156px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(40px, 6vw, 104px); align-items: end; }
.split.top { align-items: start; }
.sec-head { display: grid; gap: 0; max-width: 760px; }
.sec-lede { margin-top: 22px; font-size: clamp(18px, 1.5vw, 21px); color: var(--on-d-2); max-width: 52ch; }

.fold { list-style: none; padding: 0; display: flex; gap: 14px; height: clamp(460px, 64vh, 600px); margin-top: clamp(48px, 6vw, 80px); }
.fold li { flex: 1 1 0; min-width: 0; transition: flex-grow 1s var(--ease-out); }
.fold:hover li, .fold:focus-within li { flex-grow: .78; }
.fold li:hover, .fold li:focus-within { flex-grow: 1.9; }
.br-card { position: relative; isolation: isolate; display: block; height: 100%; overflow: hidden; border-radius: 28px; background: #12131c; color: #fff; text-decoration: none; transition: box-shadow .8s var(--ease); }
.fold li:first-child .br-card { border-radius: 170px 28px 28px 28px; }
.fold li:last-child .br-card { border-radius: 28px 170px 28px 28px; }
.br-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(6, 6, 12, 0) 22%, rgba(6, 6, 12, .58) 56%, rgba(6, 6, 12, .93) 100%); }
.br-img { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; }
.br-img img { width: 100%; height: 100%; object-fit: cover; animation: kb 38s var(--ease-io) infinite alternate; animation-delay: calc(var(--i) * -11s); transition: filter .8s var(--ease); }
.br-card:hover { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 196, 150, .3); }
.br-card:hover .br-img img { filter: brightness(1.12) saturate(1.1); }
.br-meta { position: absolute; left: 30px; right: 30px; bottom: 28px; display: grid; justify-items: start; gap: 10px; max-width: 46ch; }
.br-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .84); }
.br-site { display: inline-flex; align-items: center; gap: 8px; }
.br-site i { width: 8px; height: 8px; border-radius: 50%; }
.br-x { opacity: .6; }
.br-title { font-family: var(--serif); font-size: clamp(28px, 2.5vw, 38px); line-height: 1.02; }
.br-text { font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.br-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: #FFD3A8; }

/* ---------- home: the company ---------- */
.company .split { align-items: start; }
.company .prose { margin-top: 26px; max-width: 46ch; }
.company .more-link { margin-top: 32px; }
.ledger { display: grid; }
.ledger div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--line-d); }
.ledger div:last-child { border-bottom: 1px solid var(--line-d); }
.ledger dt { padding-top: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-d-3); }
.ledger dd { font-family: var(--serif); font-size: clamp(25px, 2.3vw, 32px); line-height: 1.15; }
.ledger dd small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--on-d-3); }
.ledger-bars { display: inline-flex; gap: 5px; vertical-align: middle; margin-left: 10px; }
.ledger-bars i { width: 7px; height: 7px; border-radius: 50%; }

/* ---------- home: a quiet line to the advertising page ---------- */
.adv-teaser { padding-block: clamp(20px, 3vw, 40px); }
.adv-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 40px; padding: 26px 0; border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.adv-line .eyebrow { margin: 0; }
.adv-line p { color: var(--on-d-2); }

/* ---------- advertising: the tiers on hairlines (/advertise) ---------- */
.tiers { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line-d); }
.tier { position: relative; display: grid; align-content: start; gap: 14px; padding: 30px 30px 34px; border-left: 1px solid var(--line-d); }
.tier:first-child { border-left: 0; padding-left: 0; }
.tier::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 2px; background: var(--on-d-3); }
.tier:first-child::before { left: 0; }
.tier-series { background: radial-gradient(110% 80% at 50% 0%, rgba(255, 170, 120, .13), transparent 72%); }
.tier-series::before { width: 100%; background: var(--grad); box-shadow: 0 0 18px rgba(255, 170, 120, .5); }
.tier-name { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-d-2); }
.tier-dots { display: inline-flex; gap: 5px; }
.tier-dots i { width: 7px; height: 7px; border-radius: 50%; }
.tier-price { font-family: var(--serif); font-size: clamp(60px, 6.4vw, 96px); line-height: .9; letter-spacing: -.02em; }
.tier-price small { display: block; margin-top: 12px; font-family: var(--sans); font-size: 14.5px; letter-spacing: 0; color: var(--on-d-3); }
.tier-line { font-family: var(--serif); font-style: italic; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.25; color: #FFD0A0; }
.tier ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line-d); font-size: 15px; line-height: 1.5; color: var(--on-d-2); }
.tier ul li { position: relative; padding-left: 20px; }
.tier ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 1px; background: #FFD0A0; }
.draft-note { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px; border: 1px solid rgba(255, 210, 122, .42); border-radius: 999px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #FFD27A; }
.draft-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FFD27A; }
.adv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }
.cta-in .actions { justify-content: center; }
.adv-foot .draft-note { margin: 0; }
.terms { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-d); font-size: 15.5px; line-height: 1.5; color: var(--on-d-2); }
.ways { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: clamp(48px, 6vw, 80px); }
.ways li { position: relative; padding-top: 24px; border-top: 1px solid var(--line-d); }
.ways li::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--grad); }
.ways .num { font-family: var(--mono); font-size: 12px; color: var(--on-d-3); }
.ways h3 { margin: 14px 0 10px; font-family: var(--serif); font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; }
.ways p { max-width: 46ch; color: var(--on-d-2); }
.aud { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line-d); }
.aud li { position: relative; display: grid; align-content: start; gap: 16px; padding: 28px 24px 8px; border-left: 1px solid var(--line-d); }
.aud li:first-child { border-left: 0; padding-left: 0; }
.aud li::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--lane); box-shadow: 0 0 12px var(--lane); }
.aud-name { display: flex; align-items: center; gap: 12px; }
.aud-name .mark { border-radius: 8px; }
.aud .wm { font-size: clamp(22px, 1.9vw, 28px); }
.aud li > p:not(.aud-name) { font-size: 15.5px; line-height: 1.55; color: var(--on-d-2); }
.aud .more-link { justify-self: start; font-size: 14.5px; }
.rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 104px); }
.rules h3 { margin-bottom: 18px; font-family: var(--serif); font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; }
.rules ul { list-style: none; padding: 0; }
.rules li { padding: 15px 0; border-top: 1px solid var(--line-d); font-size: 16px; line-height: 1.5; color: var(--on-d-2); }
.rules li:last-child { border-bottom: 1px solid var(--line-d); }
.ask { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px clamp(40px, 7vw, 112px); align-items: start; margin-top: clamp(72px, 9vw, 120px); }
.ask .eyebrow { margin-bottom: 18px; }
.ask-links { list-style: none; padding: 0; }
.ask-links a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-d); color: var(--on-d); text-decoration: none; font-weight: 500; }
.ask-links li:last-child a { border-bottom: 1px solid var(--line-d); }
.ask-links a > span:not(.sr-only) { flex: 1; }
.ask-links a:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.ask-links img.mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; }

/* ---------- closing: the Earth at dawn ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(140px, 17vw, 240px) clamp(180px, 22vw, 320px); }
.cta-img { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 86%, transparent 100%); }
.cta-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; opacity: .92; transform: translate3d(0, calc((var(--p, .5) - .5) * -80px), 0) scale(1.08); }
.cta-in { display: grid; justify-items: center; gap: 28px; }
.cta-in .eyebrow { margin: 0; }
.cta-in .eyebrow::before { display: none; }
.cta-mail { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 60px); line-height: 1.1; text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.cta-mail:hover { background-size: 100% 1px; }

/* ---------- page heads (about, 404) ---------- */
.page-head { position: relative; isolation: isolate; overflow: hidden; padding: clamp(150px, 18vw, 210px) 0 clamp(72px, 9vw, 120px); }
.page-head .lede { margin-top: 26px; }
.page-head .actions { margin-top: 36px; }

/* ---------- the series page ---------- */
.fam-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(96svh, 920px); padding: 150px 0 clamp(56px, 8vw, 96px); }
.pano { position: absolute; inset: 0; z-index: -2; display: flex; }
.pano span { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.pano span + span { margin-left: -12%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%); mask-image: linear-gradient(90deg, transparent, #000 26%); }
.pano img { width: 100%; height: 100%; object-fit: cover; animation: kb 40s var(--ease-io) infinite alternate; }
.pano-1 img { animation-delay: -14s; }
.pano-2 img { animation-delay: -27s; }
.pano-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 21, 48, .6) 0%, rgba(14, 21, 48, .15) 34%, rgba(14, 21, 48, .8) 76%, var(--void) 100%), linear-gradient(90deg, rgba(14, 21, 48, .75), rgba(14, 21, 48, 0) 64%); }
.fam-hero .lede { margin-top: 26px; color: rgba(244, 241, 234, .86); }
.fam-jump { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.fam-jump a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(14, 21, 48, .42); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; font-size: 22px; text-decoration: none; transition: border-color .3s, transform .4s var(--ease), background-color .3s; }
.fam-jump a:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .5); background: rgba(14, 21, 48, .6); }
.fam-jump .mark { border-radius: 8px; }
.q-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: clamp(56px, 7vw, 100px); }
.q-list li { padding-top: 26px; border-top: 1px solid var(--line-d); }
.q-n { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(70px, 7vw, 104px); line-height: .8; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em; width: fit-content; }
.q-list h3 { margin: 22px 0 12px; font-family: var(--serif); font-size: clamp(27px, 2.4vw, 33px); line-height: 1.08; }
.q-list p { color: var(--on-d-2); }
.site-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 7vw, 112px); align-items: center; padding-block: clamp(40px, 6vw, 80px); }
.site-row:first-child { padding-top: 0; }
.site-row:last-child { padding-bottom: 0; }
.site-row + .site-row { border-top: 1px solid var(--line-d); }
.site-row.flip .site-art { order: 2; }
.site-art { position: relative; isolation: isolate; display: block; aspect-ratio: 1 / 1.02; overflow: hidden; background: var(--bg); border-radius: 50% 50% 30px 30px / 34% 34% 30px 30px; }
.site-row:nth-child(3n + 1) .site-art { border-radius: 200px 30px 30px 30px; }
.site-row:nth-child(3n) .site-art { border-radius: 30px 200px 30px 30px; }
.site-art > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; animation: kb 34s var(--ease-io) infinite alternate; }
.site-art .orn-wrap { position: absolute; left: 50%; top: 42%; width: 32%; transform: translate(-50%, -50%); opacity: .85; }
.site-copy .eyebrow::before { display: none; }
.site-copy .eyebrow .mark { border-radius: 6px; }
.site-wm { font-size: clamp(46px, 5.4vw, 80px); color: #fff; }
.site-wm em { display: block; margin-top: .06em; }
.site-tag { margin: 16px 0 20px; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 27px); line-height: 1.25; color: var(--on-d-2); }
.site-copy > p:not(.eyebrow):not(.site-tag) { color: var(--on-d-2); max-width: 54ch; }
.site-aud { margin-top: 14px; font-size: 15.5px; color: var(--on-d-3); }
.site-aud b { color: var(--on-d); font-weight: 600; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.chips li { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-d); font-size: 13.5px; color: var(--on-d-2); }
.site-copy .chips { margin-bottom: 30px; }

/* ---------- a Progress site's own page ---------- */
.s-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(96svh, 940px); padding: 150px 0 clamp(56px, 8vw, 96px); color: var(--fg); }
.s-hero-img { position: absolute; inset: 0; z-index: -3; }
.s-hero-img img { width: 100%; height: 100%; object-fit: cover; animation: kb 44s var(--ease-io) infinite alternate; }
.s-hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 32%, color-mix(in srgb, var(--bg) 80%, transparent) 70%, var(--bg) 100%), linear-gradient(90deg, color-mix(in srgb, var(--bg) 78%, transparent), transparent 70%); }
.s-orn { position: absolute; right: clamp(24px, 4.5vw, 100px); top: clamp(120px, 17vh, 200px); z-index: -1; width: clamp(150px, 20vw, 300px); opacity: .8; }
.s-hero .crumbs, .s-hero .crumbs a { color: color-mix(in srgb, var(--fg) 72%, transparent); }
.s-hero .kicker { color: color-mix(in srgb, var(--fg) 82%, transparent); }
.s-wm { display: block; font-size: clamp(58px, 8.4vw, 128px); line-height: .92; }
.s-headline { margin: 22px 0 14px; font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); line-height: 1.1; }
.s-headline em { font-style: italic; color: var(--acc); }
.s-hero .lede { color: color-mix(in srgb, var(--fg) 84%, transparent); margin-bottom: 34px; }
.s-meta { margin-top: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 66%, transparent); }
.s-ladder .split { align-items: start; }
.s-ladder .ladder { margin-top: 0; }
.inside-list { list-style: none; padding: 0; columns: 2; column-gap: 40px; }
.inside-list li { display: flex; gap: 14px; break-inside: avoid; padding: 13px 0; border-top: 1px solid var(--line-d); font-size: 17px; line-height: 1.4; }
.inside-list .num { padding-top: 3px; }
.gallery { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 84px); }
.gallery.count-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g > a, .g > span { position: relative; display: block; overflow: hidden; height: clamp(260px, 30vw, 420px); border-radius: 24px; background: var(--bg); color: #fff; text-decoration: none; }
.gallery.count-6 .g > a, .gallery.count-6 .g > span { height: clamp(200px, 20vw, 280px); }
.g-0 > * { border-radius: 50% 50% 24px 24px / 34% 34% 24px 24px !important; }
.g-2 > * { border-radius: 24px 120px 24px 24px !important; }
.g-3 > * { border-radius: 24px 24px 120px 24px !important; }
.gallery.count-6 .g-0 > * { border-radius: 120px 24px 24px 24px !important; }
.g img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .8s; }
.g a:hover img { transform: scale(1.06); filter: brightness(1.08); }
.g-label { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: rgba(14, 21, 48, .58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 13.5px; }
.more-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.more-card { position: relative; isolation: isolate; display: block; height: clamp(300px, 30vw, 380px); overflow: hidden; border-radius: 28px; background: var(--bg); color: #fff; text-decoration: none; transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.more-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(6, 6, 12, 0) 28%, rgba(6, 6, 12, .5) 58%, rgba(6, 6, 12, .9) 100%); }
.more-grid li:first-child .more-card { border-radius: 150px 28px 28px 28px; }
.more-grid li:last-child .more-card { border-radius: 28px 150px 28px 28px; }
.mc-img { position: absolute; inset: 0; z-index: -2; }
.mc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.more-card:hover { transform: translateY(-5px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.more-card:hover .mc-img img { transform: scale(1.05); }
.mc-meta { position: absolute; left: 28px; right: 24px; bottom: 24px; display: grid; justify-items: start; gap: 10px; }
.tp-field { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.tp-field .mark { border-radius: 6px; }
.mc-wm { font-size: clamp(30px, 2.6vw, 40px); }
.mc-q { font-size: 15.5px; color: rgba(255, 255, 255, .86); }

/* ---------- about ---------- */
.pubs { list-style: none; padding: 0; margin-top: clamp(48px, 6vw, 84px); }
.pubs a { display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 24px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line-d); color: var(--on-d); text-decoration: none; }
.pubs li:last-child a { border-bottom: 1px solid var(--line-d); }
.pubs .mark { width: 44px; height: 44px; border-radius: 12px; }
.pubs .wm { font-size: clamp(28px, 2.8vw, 40px); }
.pubs-q { color: var(--on-d-2); font-size: 16px; line-height: 1.45; }
.pubs a:hover .arr { transform: translateX(6px); }
.pubs a:hover .wm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px clamp(40px, 7vw, 112px); align-items: start; }
.contact-grid .big { margin: 22px 0 40px; }
.mail .eyebrow { margin-bottom: 10px; }
.mail-more { margin-top: 14px; color: var(--on-d-2); }
.mail-more a { color: var(--on-d); }
.ask-note { margin-top: 18px; color: var(--on-d-3); font-size: 15px; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-form .full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--line-d2); border-radius: 14px; background: rgba(255, 255, 255, .04); color: var(--on-d); font: inherit; font-size: 16px; }
.field textarea { min-height: 150px; resize: vertical; }
.notice { padding: 18px 22px; border-radius: 16px; background: rgba(255, 255, 255, .06); font-weight: 600; }
.support p { margin: 12px 0 18px; color: var(--on-d-3); }
.support ul { list-style: none; padding: 0; }
.support a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-d); color: var(--on-d); text-decoration: none; font-weight: 500; }
.support li:last-child a { border-bottom: 1px solid var(--line-d); }
.support a > span:not(.sr-only) { flex: 1; }
.support a:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.support img.mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; }

/* ---------- Progress wordmarks: each site's own fonts, with "Progress" in italic and its accent colour ---------- */
.wm { font-family: var(--wm-font); font-weight: var(--wm-weight); letter-spacing: var(--wm-track); line-height: 1; }
.wm em { font-family: var(--wm-it-font); font-weight: var(--wm-it-weight); font-style: italic; letter-spacing: 0; color: var(--acc); }

/* ---------- animated marks ---------- */
.orn-wrap { display: block; pointer-events: none; }
.orn { width: 100%; height: auto; overflow: visible; }
.orn * { fill: none; }
.orn-line { stroke: var(--fg); stroke-opacity: .34; stroke-width: 1.2; }
.orn-dots { stroke: var(--fg); stroke-opacity: .4; stroke-width: 1.6; stroke-dasharray: 1 7; stroke-linecap: round; }
.orn-acc { stroke: var(--acc); stroke-width: 3; stroke-linecap: round; }
.orn-fg { stroke: var(--fg); stroke-opacity: .72; stroke-width: 3; stroke-linecap: round; }
.orn-thick { stroke-width: 9; stroke-linecap: butt; }
.orn .orn-fill { fill: var(--acc); }
.orn-sky { stroke: #9AA4FF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.orn .orn-sky-fill { fill: #9AA4FF; }
.orn-spin, .orn-spin-rev, .orn-hand { transform-box: view-box; transform-origin: 50% 50%; }
.orn-spin { animation: spin 90s linear infinite; }
.orn-spin-rev { animation: spin 150s linear infinite reverse; }
.orn-hand-m { animation: spin 60s linear infinite; }
.orn-hand-h { animation: spin 720s linear infinite; }
.orn-pulse { transform-box: fill-box; transform-origin: 50% 50%; animation: pulse 3.4s var(--ease-io) infinite; }
.orn-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawloop 7s var(--ease) infinite; }

/* ---------- footer ---------- */
.ftr { padding: clamp(64px, 8vw, 96px) 0 30px; background: linear-gradient(180deg, rgba(9, 14, 34, .55), var(--deep) 40%); color: var(--on-d-2); border-top: 1px solid var(--line-d); }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1.2fr .7fr; gap: 48px; }
.ftr-brand p { max-width: 34ch; margin: 20px 0 14px; font-size: 15px; }
.ftr-mail { color: var(--on-d); font-size: 15px; }
.ftr h2 { margin-bottom: 14px; font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--on-d-3); }
.ftr nav a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 7px 0; color: var(--on-d); font-size: 15px; text-decoration: none; }
.ftr nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ftr nav small { flex-basis: 100%; font-size: 12.5px; color: var(--on-d-3); }
.ftr nav .arr-out { width: 13px; height: 13px; }
.ftr-base { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; font-size: 13.5px; color: var(--on-d-3); }
.ftr-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line-d); }
.motion-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border: 1px solid var(--line-d); border-radius: 999px; background: transparent; color: var(--on-d-2); font-size: 13.5px; cursor: pointer; transition: border-color .25s, color .25s; }
.motion-toggle:hover { border-color: var(--on-d-2); color: var(--on-d); }
.mt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
html.motion-off .mt-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-d-3); }

/* ---------- motion ---------- */
html.js .rise { animation: rise 1.1s var(--ease) both; animation-delay: var(--d, 0s); }
html.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
/* a chapter's picture frame opens instead of rising */
html.js .ch-frame[data-reveal] { opacity: 1; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease), box-shadow .9s var(--ease), clip-path 1.6s var(--ease-out); }
html.entered .rise, html.entered .hero-index li, html.entered .ln > span { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes lineup { from { transform: translateY(105%); } to { transform: none; } }
@keyframes kb { from { transform: scale(1.04); } to { transform: scale(1.14) translate3d(-1.8%, -1.4%, 0); } }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, 5vh, 0) scale(1.16); } }
@keyframes drawloop { 0% { stroke-dashoffset: 1; } 40%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .72; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(54, 240, 200, .6); } 70%, 100% { box-shadow: 0 0 0 11px rgba(54, 240, 200, 0); } }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes rim { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes sun { from { opacity: .82; transform: translate(-50%, -50%) scale(.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes rays { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes twinkle { from { opacity: .45; } to { opacity: .9; } }
@keyframes orbit { 0% { transform: translate(-6px, 0); } 50% { transform: translate(6px, 0); } 100% { transform: translate(-6px, 0); } }

/* "Pause animations": loops freeze, entrances and reveals show at once */
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-play-state: paused !important; transition: none !important; }
html.motion-off .rise, html.motion-off .hero-index li, html.motion-off .ln > span, html.motion-off .orn-draw { animation: none !important; }
html.motion-off .orn-draw { stroke-dashoffset: 0; }
html.motion-off [data-reveal] { opacity: 1 !important; transform: none !important; }
html.motion-off .ch-frame { clip-path: none !important; }
html.motion-off .ladder .st-bar { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-reveal], html.js .ladder .st-bar { opacity: 1; transform: none !important; }
  html.js .ch-frame { clip-path: none !important; }
  .orn-draw { stroke-dashoffset: 0; }
  .motion-toggle { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero-in, .intro-in { grid-template-columns: 1fr; }
  .creed-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .creed-door:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hero h1 { max-width: 15ch; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .hero-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-index li:nth-child(3) .hi { border-left: 0; padding-left: 0; }
  .hero-index li:nth-child(n + 3) .hi { border-top: 1px solid var(--line-d); }
  .more-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .split, .site-row, .contact-grid, .ch-grid { grid-template-columns: 1fr; }
  .split { align-items: start; }
  .site-row.flip .site-art { order: 0; }
  .site-art { max-width: 560px; }
  .q-list { grid-template-columns: 1fr; gap: 28px; }
  .ch.flip .ch-stage { order: 0; }
  .ch-stage { position: relative; top: 0; height: clamp(420px, 110vw, 620px); min-height: 0; }
  .ch-frame, .ch.flip .ch-frame { inset: 0 0 12% 0; }
  .ch-float { width: 40%; bottom: 0; }
  .ch-copy { padding-block: 8px 0; }
  .ch-tag { display: none; }
  .fold { flex-direction: column; height: auto; }
  .fold li, .fold:hover li, .fold li:hover, .fold:focus-within li, .fold li:focus-within { flex: none; height: 440px; }
  .fold li:first-child .br-card { border-radius: 50% 50% 28px 28px / 160px 160px 28px 28px; }
  .fold li:last-child .br-card { border-radius: 28px 28px 120px 28px; }
  .gallery, .gallery.count-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more-grid { grid-template-columns: 1fr; }
  .pubs a { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .tiers, .terms, .ways, .rules, .ask { grid-template-columns: 1fr; }
  .tier, .tier:first-child { padding: 26px 0 30px; border-left: 0; }
  .tier + .tier { border-top: 1px solid var(--line-d); }
  .tier-series { padding-inline: 18px !important; margin-inline: -18px; }
  .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud li:nth-child(3) { border-left: 0; padding-left: 0; }
  .aud li:nth-child(n + 3) { border-top: 1px solid var(--line-d); }
  .pubs-q { grid-column: 2 / 4; grid-row: 2; }

  .menu-btn { display: inline-block; }
  .nav { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 96px var(--gutter) 48px; background: #0E1530; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
  .nav.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
  .nav a { padding: 10px 0; border-radius: 0; font-family: var(--serif); font-size: clamp(38px, 9vw, 56px); line-height: 1.1; color: var(--on-d); }
  .nav a:hover { background: none; }
  .nav a[aria-current="page"]::after { left: 0; right: auto; width: 48px; bottom: 6px; }
  .nav .nav-cta { margin: 22px 0 0; padding: 14px 26px; border-radius: 999px; font-family: var(--sans); font-size: 17px; }
  html.js .nav.open a { animation: rise .7s var(--ease) both; }
  .nav.open a:nth-child(2) { animation-delay: .05s; }
  .nav.open a:nth-child(3) { animation-delay: .1s; }
  .nav.open a:nth-child(4) { animation-delay: .15s; }
  .menu-open { overflow: hidden; }
}
@media (max-width: 700px) {
  body { font-size: 16.5px; }
  .hdr-in { height: 66px; }
  .logo svg { width: 26px; height: 26px; }
  .logo-word { font-size: 21px; }
  .hero { min-height: 0; padding-top: 108px; }
  .hero-side .actions .btn { flex: 1 1 auto; }
  .hero-hint { display: none; }
  .hero-index { margin-top: 56px; }
  .hi { padding: 18px 14px 22px; }
  .hi-q { display: none; }
  .ledger div { grid-template-columns: 1fr; gap: 6px; }
  .adv-line { grid-template-columns: 1fr; justify-items: start; }
  .aud { grid-template-columns: 1fr; }
  .aud li, .aud li:nth-child(3) { padding: 24px 0 18px; border-left: 0; }
  .aud li + li { border-top: 1px solid var(--line-d); }
  .principles { grid-template-columns: 1fr; gap: 28px; }
  .inside-list { columns: 1; }
  .gallery, .gallery.count-6 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .g > a, .g > span, .gallery.count-6 .g > a, .gallery.count-6 .g > span { height: 220px; }
  .contact-form { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; gap: 36px; }
  .fam-jump a { font-size: 19px; }
  .s-orn { display: none; }
  .cta-mail { font-size: clamp(26px, 8vw, 40px); }
  .ch-frame, .ch.flip .ch-frame { border-radius: 150px 26px 26px 26px !important; }
  .ch-1 .ch-frame { border-radius: 50% 50% 26px 26px / 150px 150px 26px 26px !important; }
  .creed-ground { --crest: 80px; }
  .creed-sun, .creed-rays { left: 64%; }
  .creed-doors { grid-template-columns: 1fr; }
  .creed-door, .creed-door + .creed-door { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(255, 224, 176, .26); }
}