/* =============================================================
   Learnmedi — public teacher site styles.
   Every colour/font comes from theme CSS variables injected per
   site (--c-primary, --c-accent, --c-bg, --c-surface, --c-text,
   --c-muted, --font-heading, --font-body, --radius, --radius-btn).
   Editorial look adapted from tranhoangyen.com.
   ============================================================= */
:root {
  --c-primary: #1f4d3a; --c-accent: #c8793a; --c-bg: #fbf7f0; --c-surface: #fff; --c-text: #1d1b18; --c-muted: #6b645a;
  --font-heading: Georgia, serif; --font-body: system-ui, sans-serif; --radius: 18px; --radius-btn: 999px; --base-size: 17px;
  --line: color-mix(in srgb, var(--c-text) 12%, transparent);
  --soft: color-mix(in srgb, var(--c-primary) 8%, var(--c-bg));
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px -14px rgba(0,0,0,.22);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.07), 0 30px 60px -24px rgba(0,0,0,.35);
  --w: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: var(--base-size)/1.7 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--c-accent); font-weight: 400; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 6px; }
.container { width: min(100% - 32px, var(--w)); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--c-primary); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.muted { color: var(--c-muted); }
.small { font-size: .88rem; }

/* ---------- small type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .6em; font: 600 .74rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 1.2rem; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.kicker { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; margin-bottom: .5rem; }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); }
.caption { color: var(--c-muted); font-size: .9rem; margin-top: .6rem; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .9em 1.45em; border-radius: var(--radius-btn); border: 1.5px solid transparent; font: 600 .95rem/1 var(--font-body); text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, color .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: .6em 1em; font-size: .85rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--c-primary); color: #fff; box-shadow: 0 10px 22px -12px var(--c-primary); }
.btn-secondary { background: var(--c-accent); color: #fff; }
.btn-ghost { border-color: currentColor; color: var(--c-primary); background: transparent; }
.btn-primary.on-dark, .on-dark .btn-primary.on-dark { background: #f6efe3; color: var(--c-primary); }
.btn-primary.on-dark:hover { background: #fff; }
.primary-low .btn-primary:not(.on-dark) { background: var(--c-accent); color: #14151c; box-shadow: 0 10px 22px -14px var(--c-accent); }
.primary-low .price-big { color: var(--c-accent); }
.btn-ghost.on-dark { color: #f6efe3; border-color: rgba(246,239,227,.45); }
.btn-ghost.on-dark:hover { background: #f6efe3; color: var(--c-primary); }
.btn-outline .btn-primary { background: transparent; color: var(--c-primary); border-color: var(--c-primary); box-shadow: none; }
.btn-soft .btn-primary { background: color-mix(in srgb, var(--c-primary) 14%, transparent); color: var(--c-primary); box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 1.4rem; }
.al-center .btn-row { justify-content: center; }
.al-right .btn-row { justify-content: flex-end; }
.link-arrow { font-weight: 600; text-decoration: none; color: var(--c-primary); border-bottom: 1.5px solid var(--c-accent); padding-bottom: 2px; }
.chip { display: inline-flex; align-items: center; padding: .35em .85em; border-radius: 999px; border: 1px solid var(--line); font-size: .82rem; text-decoration: none; background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
.chip.is-on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.badge { display: inline-flex; padding: .3em .8em; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; background: color-mix(in srgb, var(--c-accent) 16%, transparent); color: var(--c-accent); white-space: nowrap; }

/* ---------- header / footer ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary); color: #fff; font: 500 1.2rem/1 var(--font-heading); flex: none; }
.brand-logo { height: 40px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font: 500 1.1rem/1.1 var(--font-heading); white-space: nowrap; }
.brand-text small { white-space: nowrap; }
.main-nav { flex-wrap: nowrap; }
.brand-text small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); margin-top: 4px; }
.main-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-link { position: relative; white-space: nowrap; padding: 9px 11px; text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--c-muted); border-radius: 10px; }
.nav-link:hover { color: var(--c-text); background: var(--soft); }
.nav-link.is-active { color: var(--c-primary); }
.theme-dark .nav-link.is-active, .theme-dark .prose a { color: var(--c-accent); }
.nav-link.is-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--c-accent); }
.account { display: flex; align-items: center; gap: 4px; }
.muted-link { color: var(--c-muted); }
.lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 2px; margin-right: 6px; }
.lang-switch a { padding: 4px 9px; border-radius: 999px; text-decoration: none; font: 600 .74rem/1.2 var(--font-body); letter-spacing: .04em; color: var(--c-muted); }
.lang-switch a:hover { color: var(--c-text); background: var(--soft); }
.lang-switch a.is-current { background: var(--c-primary); color: #fff; }
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; cursor: pointer; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--c-primary); color: #fff; font: 600 .85rem/1 var(--font-body); letter-spacing: .02em; border: 2px solid var(--c-bg); box-shadow: 0 0 0 1px var(--line); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-pop { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: var(--c-surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; z-index: 60; }
.acct-pop a { padding: 9px 12px; border-radius: 9px; text-decoration: none; font-size: .92rem; }
.acct-pop a:hover { background: var(--soft); }
.acct-ws { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.acct-ws a { padding: 8px 10px; border-radius: 9px; background: var(--soft); font-size: .86rem; font-weight: 500; text-align: center; white-space: nowrap; }
.acct-ws a:hover { background: color-mix(in srgb, var(--soft) 60%, var(--c-text) 8%); }
.acct-who { display: flex; flex-direction: column; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; line-height: 1.3; }
.acct-who small { color: var(--c-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.hdr-bold .acct-pop { color: var(--c-text); }
.mobile-nav { display: none; position: relative; }
.mobile-nav > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-content: center; gap: 5px; }
.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav > summary span { display: block; width: 20px; height: 2px; background: var(--c-text); border-radius: 2px; }
/* `>`: the language switch is a <nav> too and must not pick up the menu panel styles. */
.mobile-nav > nav { position: absolute; right: 0; top: 54px; width: min(84vw, 300px); background: var(--c-bg); border: 1px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.mobile-nav > nav a { padding: 12px 14px; text-decoration: none; border-radius: 10px; }
@media (max-width: 1180px) { .main-nav { display: none; } .mobile-nav { display: block; } }
.menu-foot { display: none; }
@media (max-width: 560px) {
  /* Phones: the header keeps the full name (wrapping to two lines); the language switch and
     the account move to one row at the foot of the menu. */
  .header-inner { gap: 12px; min-height: 64px; }
  .header-inner > .account { display: none; }
  .brand { min-width: 0; gap: 10px; }
  .brand-mark { width: 36px; height: 36px; font-size: 1.05rem; }
  .brand-text { min-width: 0; }
  .brand-text strong { font-size: 1rem; line-height: 1.2; white-space: normal; }
  .brand-text small { display: none; }
  .mobile-nav > summary { width: 40px; height: 40px; flex: none; }
  .mobile-nav > nav { top: 50px; }
  .menu-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 12px 8px 4px; border-top: 1px solid var(--line); }
  .menu-foot .lang-switch { margin: 0; }
  .menu-foot .lang-switch a { padding: 5px 12px; }
  .menu-foot > .nav-link { padding: 8px 12px; }
  .menu-foot .acct-menu { margin-left: auto; }
  .menu-foot .acct-pop { top: auto; bottom: calc(100% + 8px); right: 0; max-width: calc(100vw - 40px); }
}
.hdr-bold .site-header { background: var(--c-primary); color: #fff; border: 0; }
.hdr-bold .nav-link { color: rgba(255,255,255,.8); }
.hdr-bold .nav-link:hover, .hdr-bold .nav-link.is-active { color: #fff; background: rgba(255,255,255,.1); }
.hdr-bold .brand-mark { background: #fff; color: var(--c-primary); }
.hdr-bold .brand-text small { color: rgba(255,255,255,.7); }
.hdr-toggle .main-nav { display: none; }
.hdr-toggle .mobile-nav { display: block; }
@media (min-width: 1181px) {
  .hdr-sidebar { padding-inline-start: 224px; }
  .hdr-sidebar .site-header { position: fixed; inset: 0 auto 0 0; width: 224px; border-right: 1px solid var(--line); }
  .hdr-sidebar .header-inner { display: flex; flex-direction: column; align-items: stretch; gap: 24px; height: 100%; overflow: auto; padding-block: 28px; }
  .hdr-sidebar .brand { margin: 0; }
  .hdr-sidebar .brand-text strong, .hdr-sidebar .brand-text small { white-space: normal; }
  .hdr-sidebar .main-nav { display: flex; flex-direction: column; }
  .hdr-sidebar .account { margin-top: auto; }
  .hdr-sidebar .acct-pop { right: auto; left: 0; top: auto; bottom: calc(100% + 8px); min-width: 170px; }
}
.site-footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--c-muted); font-size: .9rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-text p { margin: 0; }
.footer-powered a { color: inherit; }

/* ---------- block frame ---------- */
.page-section { position: relative; overflow-x: clip; background-color: var(--blk-bg, transparent); color: var(--blk-fg, inherit); display: grid; align-content: center; }
.page-section.height-screen { min-height: 100svh; }
.page-section.height-screen:not(.has-bg-img) {
  background-image:
    radial-gradient(ellipse at 85% 12%, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent 48%),
    radial-gradient(ellipse at 6% 85%, color-mix(in srgb, var(--c-primary) 30%, transparent), transparent 48%);
}
.page-section.height-screen .hero-centered .hero-title {
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: .95;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.section-inner { width: min(100% - 32px, 1040px); margin-inline: auto; display: grid; gap: clamp(16px, 3vw, 40px); }
.page-section.w-narrow > .section-inner { max-width: 760px; }
.page-section.w-wide > .section-inner { width: min(100% - 32px, 1240px); }
.page-section.w-full > .section-inner { width: 100%; }
.section-inner > .in-section { min-width: 0; --blk-bg: transparent; --blk-fg: inherit; --blk-img: none; }
.section-inner > .in-section > .blk-inner { width: 100%; }
@media (min-width: 800px) {
  .layout-split > .section-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-feature > .section-inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .layout-feature > .section-inner > :first-child { grid-row: span 2; }
}
.anim-ready [data-section-anim]:not([data-section-anim="none"]) > .section-inner { opacity: 0; transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.anim-ready [data-section-anim="fade-up"] > .section-inner { transform: translateY(36px); }
.anim-ready [data-section-anim="zoom-in"] > .section-inner { transform: scale(.95); }
.anim-ready [data-section-anim="slide-left"] > .section-inner { transform: translateX(32px); }
.anim-ready [data-section-anim="slide-right"] > .section-inner { transform: translateX(-32px); }
.anim-ready [data-section-anim].is-in > .section-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-section-anim] > .section-inner { opacity: 1; transform: none; transition: none; }
}
.blk { position: relative; background: var(--blk-bg, transparent); color: var(--blk-fg, inherit); }
.blk-inner { width: min(100% - 32px, var(--w)); margin-inline: auto; }
.w-narrow > .blk-inner { --w: 760px; }
.w-normal > .blk-inner { --w: 1040px; }
.w-wide > .blk-inner { --w: 1240px; }
.w-full > .blk-inner { width: 100%; padding-inline: 16px; --w: 100%; }
.pad-none { padding: 0; } .pad-sm { padding: clamp(20px, 3vw, 32px) 0; } .pad-md { padding: clamp(40px, 6vw, 72px) 0; }
.pad-lg { padding: clamp(60px, 8vw, 104px) 0; } .pad-xl { padding: clamp(80px, 11vw, 140px) 0; }
.al-center { text-align: center; } .al-right { text-align: right; }
.al-center .eyebrow { justify-content: center; }
.has-bg-img { background-image: linear-gradient(rgba(0,0,0,var(--blk-overlay,.35)), rgba(0,0,0,var(--blk-overlay,.35))), var(--blk-img); background-size: cover; background-position: center; }
.on-dark:not(.has-fg) { color: #f7f3ea; }
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em { color: color-mix(in srgb, var(--c-accent) 55%, #fff); }
.on-dark .muted, .on-dark .eyebrow { color: rgba(255,255,255,.75); }
.on-dark .card, .on-dark .feature.card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: inherit; }
.on-dark .badge { background: rgba(255,255,255,.12); color: inherit; }
.on-dark .link-arrow { color: inherit; }
.is-hidden { opacity: .35; outline: 2px dashed var(--c-muted); }
.img-placeholder { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-text) 6%, transparent) 0 12px, color-mix(in srgb, var(--c-text) 3%, transparent) 12px 24px); border-radius: var(--radius); min-height: 180px; width: 100%; }
.course-ph { min-height: 100%; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); }

/* ---------- prose ---------- */
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose a { color: var(--c-primary); }
.on-dark .prose a { color: inherit; }
.prose img { border-radius: var(--radius); margin: 1.4em 0; }
.prose blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--c-accent); font-style: italic; }
.prose table { border-collapse: collapse; width: 100%; } .prose td, .prose th { border: 1px solid var(--line); padding: .5em .7em; }
.prose code { background: var(--soft); padding: .1em .35em; border-radius: 6px; font-size: .9em; }

/* ---------- hero ---------- */
.hero-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero-split.reverse .hero-text { order: 2; }
.hero-centered { text-align: center; max-width: 860px; margin: 0 auto; }
.hero-centered .eyebrow, .hero-centered .tag-list, .hero-centered .btn-row { justify-content: center; }
.hero-title { margin-bottom: .3em; }
.hero-sub { font-size: 1.1rem; color: var(--c-muted); margin: 0 0 1rem; }
.on-dark .hero-sub { color: rgba(255,255,255,.75); }
.hero-quote { font: italic 400 clamp(1.1rem, 1.6vw, 1.35rem)/1.5 var(--font-heading); max-width: 34em; margin: 1.2rem 0; opacity: .92; }
.hero-centered .hero-quote { margin-inline: auto; }
.tag-list { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li { padding: .4em .9em; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 999px; font-size: .85rem; }
.hero-split { grid-template-columns: 1.15fr .85fr; }
.hero-title.two-lines { font-size: clamp(2.7rem, 6.6vw, 5.7rem); line-height: .98; letter-spacing: -.035em; font-weight: 400; margin-bottom: .2em; }
.hero-title .ln { display: block; }
.hero-title.two-lines + .hero-sub { font: italic 400 clamp(1rem, 2vw, 1.7rem)/1.2 var(--font-heading); color: color-mix(in srgb, var(--c-accent) 60%, #fff); margin: 0 0 1.6rem; }
.hero .tag-list { margin: 0 0 2rem; }
.hero .tag-list li { font-weight: 500; font-size: .84rem; background: color-mix(in srgb, currentColor 4%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); }
.hero .hero-quote { padding-left: 1.2em; border-left: 2px solid color-mix(in srgb, var(--c-accent) 60%, #fff); margin: 0 0 2.4rem; font-size: clamp(1.15rem, 2.1vw, 1.5rem); }
.hero-photos { position: relative; aspect-ratio: 4 / 5; max-width: 470px; width: 100%; justify-self: end; }
.ph-main { position: absolute; right: 0; top: 0; width: 78%; height: 86%; border-radius: 22px 120px 22px 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.ph-small { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid var(--blk-bg, var(--c-bg)); }
.ph-main img, .ph-small img, .ph-main .img-placeholder, .ph-small .img-placeholder { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.ph-small img { object-position: 50% 62%; }
.hero-photos:not(:has(.ph-small)) .ph-main { width: 100%; height: 100%; }
.float-badge { position: absolute; z-index: 2; padding: .7em 1em; border-radius: 999px; background: #f6efe3; color: var(--c-primary); font: 600 .7rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; box-shadow: var(--shadow); white-space: nowrap; }
.fb-0 { left: 4%; bottom: 47%; } .fb-1 { right: 4%; top: 6%; background: color-mix(in srgb, var(--c-accent) 45%, #fff); } .fb-2 { left: 40%; top: -4%; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } .hero-split.reverse .hero-text { order: 0; } .hero-photos { justify-self: center; max-width: 400px; } }

/* ---------- section head ---------- */
.section-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 820px; }
.al-center .section-head { margin-inline: auto; }
.section-head.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; max-width: none; }
.section-head h1, .section-head h2, .section-head h3 { margin: 0; }
.section-head .prose { margin-top: 1rem; }
.section-head.split .prose { margin: 0; }
.blk-heading .section-head { margin-bottom: 0; }
@media (max-width: 760px) { .section-head.split { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.cols-1 { grid-template-columns: 1fr; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) { .cols-3, .cols-4, .cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.card-body h3 { margin: 0 0 .35rem; }
.card-body .prose { font-size: .95rem; }
.card-body .meta { margin-top: auto; padding-top: .8rem; font-weight: 600; color: var(--c-primary); font-size: .9rem; }
.on-dark .card-body .meta { color: inherit; }
.card-body .btn { align-self: flex-start; margin-top: .9rem; }
.card-img { overflow: hidden; background: var(--soft); }
.card-img img, .card-img .img-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 0; min-height: 0; }
/* book covers: whole cover, no crop, lifted on hover */
.book-covers .card { background: none; border: 0; overflow: visible; border-radius: 0; }
.book-covers .card-img.ratio-cover { aspect-ratio: 4/5; display: flex; align-items: flex-end; justify-content: center; background: none; overflow: visible; }
.book-covers .card-img.ratio-cover img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px 10px 10px 4px; box-shadow: var(--shadow); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.book-covers a.card:hover { transform: none; box-shadow: none; }
.book-covers a.card:hover .card-img img { transform: translateY(-8px) rotate(-1.2deg); box-shadow: var(--shadow-lg); }
.book-covers .card-body { padding: 22px 4px 0; }
.book-covers .kicker { letter-spacing: .16em; }
.cards-more .btn-row { justify-content: center; margin-top: 48px; }
.ratio-portrait { aspect-ratio: 3/4; } .ratio-square { aspect-ratio: 1; } .ratio-landscape { aspect-ratio: 16/10; } .ratio-video { aspect-ratio: 16/9; }
.feature { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: inherit; }
.feature.card { padding: 26px; }
.feat-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--c-primary) 10%, transparent); color: var(--c-primary); margin-bottom: .6rem; }
.on-dark .feat-icon { background: rgba(255,255,255,.12); color: inherit; }
.feat-icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.feature .prose { color: var(--c-muted); font-size: .95rem; }
.on-dark .feature .prose { color: rgba(255,255,255,.75); }
.feature .link-arrow { margin-top: auto; padding-top: .6rem; align-self: flex-start; border: 0; }
.feature.card { background: var(--c-bg); }
.features-numbered .feature { position: relative; min-height: 300px; padding: 30px 26px 26px; transition: transform .3s, box-shadow .3s, border-color .3s; }
.features-numbered a.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.features-numbered .feat-num { font: italic 400 2.6rem/1 var(--font-heading); color: color-mix(in srgb, var(--c-accent) 55%, #fff); margin-bottom: auto; }
.features-numbered .feat-icon { position: absolute; right: 22px; top: 26px; width: 44px; height: 44px; background: none; color: var(--c-primary); margin: 0; }
.features-numbered .feat-icon svg { width: 44px; height: 44px; stroke-width: 1.2; }
.features-numbered h3 { margin: 28px 0 10px; color: var(--c-primary); }
.features-numbered .link-arrow { color: var(--c-primary); font-size: .88rem; }
.on-dark .features-numbered h3, .on-dark .features-numbered .feat-icon, .on-dark .features-numbered .link-arrow { color: inherit; }
@media (max-width: 600px) { .features-numbered .feature { min-height: 0; } }

/* rows (numbered list) */
.row-list { display: flex; flex-direction: column; }
.row-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 24px; align-items: start; padding: 28px 0; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); text-decoration: none; color: inherit; transition: padding .25s; }
.row-item:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
a.row-item:hover { padding-left: 10px; }
.row-index { font: italic 400 1.6rem/1 var(--font-heading); opacity: .6; }
.row-main h3 { margin: 0 0 .3rem; }
@media (max-width: 640px) { .row-item { grid-template-columns: 1fr; gap: 8px; } }

/* media + text */
.media-text.no-img { grid-template-columns: minmax(0, 760px); }
.media-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .media-text { grid-template-columns: 1fr; } .media-text.img-left .mt-collage { order: 2; } }
.mt-collage { position: relative; display: grid; gap: 14px; }
.mt-collage.n-1 { grid-template-columns: 1fr; }
.mt-collage.n-2 { grid-template-columns: 1fr 1fr; }
.mt-collage.n-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mt-collage.n-3 .mt-img-0 { grid-row: span 2; }
.mt-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 200px; }
.mt-img img, .mt-img .img-placeholder { width: 100%; height: 100%; object-fit: cover; min-height: 200px; border-radius: 0; }
.mt-collage.n-1 .mt-img { aspect-ratio: 4/3; }
.promise { margin: 1.6rem 0 1.4rem; padding: 0; border: 0; }
.promise p { font: italic 380 clamp(1.5rem, 3.1vw, 2.4rem)/1.25 var(--font-heading); color: var(--c-primary); margin: 0; letter-spacing: -.01em; }
.promise p::before { content: '“'; display: block; font-size: 2.6em; line-height: .6; color: color-mix(in srgb, var(--c-accent) 55%, #fff); margin-bottom: .1em; }
.on-dark .promise p { color: inherit; }
.promise cite { display: block; margin-top: 1rem; font: italic 400 1.15rem var(--font-heading); color: var(--c-muted); }
.mt-text .lead, .mt-text .prose { color: color-mix(in srgb, var(--c-text) 85%, transparent); }
.mt-text > .btn-row .btn-ghost { border: 0; border-bottom: 1.5px solid var(--c-accent); border-radius: 0; padding: 0 0 2px; }
.mt-text > .btn-row .btn-ghost::after { content: ' →'; }
.mt-collage.n-3 .mt-img { min-height: 220px; }

/* cta */
.cta { display: grid; grid-template-columns: 1.3fr auto; gap: 32px; align-items: center; }
.cta h2 { margin-bottom: .3em; }
.cta.centered { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.cta.centered .eyebrow, .cta.centered .btn-row { justify-content: center; }
.cta .btn-row { margin: 0; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* figures / gallery / video */
.figure { margin: 0 auto; }
.figure.size-small { max-width: 360px; } .figure.size-medium { max-width: 640px; } .figure.size-large { max-width: 1000px; } .figure.size-full { max-width: none; }
.figure img.rounded { border-radius: var(--radius); }
.al-center .figure img { margin-inline: auto; }
.gallery { display: grid; gap: 14px; }
.gallery figure { margin: 0; }
.gallery img, .gallery .img-placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); min-height: 0; }
.gallery figcaption { font-size: .85rem; color: var(--c-muted); margin-top: .4rem; }
.gallery-masonry { display: block; columns: 3 220px; column-gap: 14px; } .gallery-masonry figure { break-inside: avoid; margin-bottom: 14px; } .gallery-masonry img { aspect-ratio: auto; }
.gallery-collage figure:nth-child(3n+1) img { aspect-ratio: 4/5; }
.video-frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* quotes, stats, timeline, faq, contact */
.quotes { display: grid; gap: 24px; }
.big-quote { margin: 0; padding: 0; }
.big-quote .prose { font: italic 400 clamp(1.3rem, 2.4vw, 2rem)/1.4 var(--font-heading); }
.big-quote cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 600; } .big-quote cite span { font-weight: 400; color: var(--c-muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.stat strong { display: block; font: 500 clamp(2.2rem, 4vw, 3.2rem)/1 var(--font-heading); color: var(--c-primary); }
.on-dark .stat strong { color: inherit; }
.stat span { color: var(--c-muted); }
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.tl-item.is-filtered { display: none; }
.tl-date { font-weight: 600; color: var(--c-accent); }
.tl-body h3 { font-size: 1.15rem; margin-bottom: .3rem; } .tl-body h3 a { text-decoration: none; }
.tl-body .badge { margin-bottom: .4rem; }
.tl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
@media (max-width: 600px) { .tl-item { grid-template-columns: 1fr; gap: 6px; } }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--c-surface); padding: 0 20px; }
.faq-item summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; }
.faq-item summary::after { content: '+'; float: right; font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: '–'; }
.faq-item .prose { padding-bottom: 18px; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-lines li { display: flex; gap: 12px; align-items: center; font-size: 1.05rem; }
.contact-lines svg { width: 22px; height: 22px; color: var(--c-accent); flex: none; }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } }
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }
.divider-dots { border-top: 3px dotted var(--line); }
.divider-wave { height: 14px; border: 0; background: radial-gradient(circle at 10px -4px, transparent 10px, var(--line) 11px, transparent 12px) 0 0 / 20px 14px repeat-x; }
.spacer-sm { height: 24px; } .spacer-md { height: 56px; } .spacer-lg { height: 96px; } .spacer-xl { height: 150px; }
.more { margin-top: 28px; }

/* blog & course pages */
.post-cover img { border-radius: var(--radius); width: 100%; margin: 1.6rem 0; }
.post-body { font-size: 1.06rem; }
.draft-flag { display: inline-block; background: #fde68a; color: #713f12; padding: .3em .8em; border-radius: 8px; font-size: .8rem; font-weight: 700; }
.course-detail { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.course-buy { position: sticky; top: 96px; }
.course-cover img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.price-big { font: 500 2rem/1 var(--font-heading); margin: .2rem 0 1rem; color: var(--c-primary); }
.outline { display: flex; flex-direction: column; gap: 10px; }
.week { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; background: var(--c-surface); }
.week summary { cursor: pointer; }
.week ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.outline-item { padding: .2rem 0; }
.outline-item .chip { margin-left: .5rem; font-size: .7rem; padding: .1em .6em; }
@media (max-width: 900px) { .course-detail { grid-template-columns: 1fr; } .course-buy { position: static; } }
.post-list-rows { display: flex; flex-direction: column; gap: 16px; }
.post-list-rows .card { flex-direction: row; } .post-list-rows .card-img { width: 260px; flex: none; }
@media (max-width: 640px) { .post-list-rows .card { flex-direction: column; } .post-list-rows .card-img { width: auto; } }

/* plain pages (errors) */
body.plain { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.plain-box { max-width: 520px; text-align: center; }
.empty-page { text-align: center; color: var(--c-muted); border: 2px dashed var(--line); border-radius: var(--radius); padding: 60px 20px; }

/* ---------- entrance animations ---------- */
.anim-ready [data-anim]:not([data-anim="none"]) .blk-inner { opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.anim-ready [data-anim="fade-up"] .blk-inner { transform: translateY(28px); }
.anim-ready [data-anim="zoom-in"] .blk-inner { transform: scale(.96); }
.anim-ready [data-anim="slide-left"] .blk-inner { transform: translateX(40px); }
.anim-ready [data-anim="slide-right"] .blk-inner { transform: translateX(-40px); }
.anim-ready [data-anim].is-in .blk-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .anim-ready [data-anim] .blk-inner { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- studio preview hooks ---------- */
.is-preview [data-block-id] { cursor: pointer; }
.is-preview [data-block-id]:hover { outline: 2px dashed color-mix(in srgb, #3b82f6 70%, transparent); outline-offset: -2px; }
.is-preview [data-block-id].lm-selected { outline: 3px solid #3b82f6; outline-offset: -3px; }
.lm-tag { position: absolute; top: 6px; left: 6px; z-index: 5; background: #3b82f6; color: #fff; font: 600 11px/1 system-ui; padding: 5px 8px; border-radius: 6px; pointer-events: none; }

/* newsletter */
.subscribe-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 520px; }
.cta.subscribe { grid-template-columns: 1fr 1fr; }
.cta.subscribe.centered { grid-template-columns: 1fr; }
.cta.subscribe.centered .subscribe-form { justify-content: center; margin: 0 auto; }
.subscribe-form input { flex: 1 1 200px; min-width: 0; padding: .85em 1.1em; border-radius: var(--radius-btn); border: 1.5px solid var(--line, #d9d2c5); background: var(--c-surface, #fff); color: var(--c-text); font: inherit; }
.subscribe-form input:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.subscribe-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.subscribe-msg { flex-basis: 100%; margin: 0; font-size: .92rem; min-height: 1.2em; }
.subscribe-msg.ok { color: var(--c-primary); } .subscribe-msg.err { color: #b3261e; }
@media (max-width: 760px) { .cta.subscribe { grid-template-columns: 1fr; } }
body.plain { min-height: 100vh; display: grid; place-items: center; background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); padding: 24px; }
.plain-box { max-width: 520px; text-align: center; background: var(--c-surface); border-radius: var(--radius); padding: 40px 32px; box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.08)); }
.plain-box h1 { font-family: var(--font-heading); margin: .2em 0 .4em; }
.plain-box form { margin: 20px 0; }

.collection-year { grid-column: 1 / -1; }
.collection-table { width: 100%; border-collapse: collapse; }
.collection-table :is(th,td) { text-align: left; padding: .75rem; border-bottom: 1px solid var(--muted); }
.collection-timeline .card { border-inline-start: 3px solid var(--accent); }

/* Community service page, shared by each site theme. */
.community-page { padding-block: clamp(2.5rem, 7vw, 6rem); }
.community-heading { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
.community-heading h1 { max-width: 15ch; }
.community-years { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-block: .9rem 0; }
.community-years a, .community-badge { display: inline-flex; padding: .35em .8em; border-radius: 99px; border: 1px solid var(--line); color: inherit; font-weight: 650; }
.community-years input { width: 7ch; font: inherit; }
.community-totals, .community-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.community-totals { margin: 1.5rem 0 .5rem; padding: 0; list-style: none; }
.community-totals li, .community-card { padding: clamp(1rem, 2.7vw, 2rem); border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--line); }
.community-totals li { border-top: .3rem solid var(--c-accent); }
.community-totals strong, .community-totals span { display: block; }
.community-totals strong { font: 700 clamp(1.6rem, 4vw, 2.7rem) / 1.2 var(--font-heading); }
.community-card { min-width: 0; overflow-wrap: anywhere; }
.community-card h2, .community-card h3 { margin-top: .4rem; }
.community-card details { border-top: 1px solid var(--line); padding-top: .8rem; }
.community-card summary { cursor: pointer; font-weight: 650; }
.community-courses { margin-top: clamp(2rem, 6vw, 4.5rem); }
.research-survey, .research-surveys { padding-block: clamp(2rem, 5vw, 4rem); }
.research-survey form { display: grid; gap: 1.1rem; max-width: 42rem; }
.research-survey form label { display: grid; gap: .4rem; }
.research-survey textarea, .research-survey select { border: 1px solid var(--line); border-radius: var(--radius); padding: .65rem; color: var(--c-text); background: var(--c-surface); font: inherit; }
.research-survey form button { justify-self: start; }

/* Newsletter button for visitors (bottom right; never shown to staff, whose AI chat sits
   there). The daily wish sits bottom left; "add as associate" stacks above this. */
.lm-sub { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: opacity .25s, transform .25s; }
.lm-sub.is-away { opacity: 0; transform: translateY(12px); pointer-events: none; }
.lm-sub-form { display: grid; gap: 8px; margin-bottom: 4px; }
.lm-sub-form input[type="email"] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--c-bg); color: var(--c-text); font: inherit; }
.lm-sub-form .subscribe-msg { margin: 0; font-size: .85rem; }
.lm-sub-form + .lm-sub-no { padding-left: 0; }
.lm-sub[hidden], .lm-sub-card[hidden], .lm-sub-msg[hidden], .lm-sub-actions[hidden] { display: none; }
.lm-sub-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--c-accent, var(--c-primary)); color: var(--c-bg); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform .2s; }
.lm-sub-btn:hover { transform: translateY(-2px); }
.lm-sub-card { position: relative; width: min(320px, calc(100vw - 40px)); background: var(--c-surface); color: var(--c-text); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 18px 18px 16px; }
.lm-sub-title { margin: 0 28px 6px 0; font: 500 1.05rem/1.3 var(--font-heading); }
.lm-sub-text { margin: 0 0 14px; font-size: .88rem; color: var(--c-muted); overflow-wrap: anywhere; }
.lm-sub-actions { display: flex; align-items: center; gap: 10px; }
.lm-sub-no { background: none; border: 0; color: var(--c-muted); font: inherit; font-size: .88rem; cursor: pointer; padding: 8px 6px; }
.lm-sub-no:hover { color: var(--c-text); }
.lm-sub-close { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; background: none; color: var(--c-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 8px; }
.lm-sub-close:hover { background: var(--soft); color: var(--c-text); }
.lm-sub-msg { margin: 10px 0 0; font-size: .88rem; }
body:has(.mobile-nav[open]) .lm-sub { display: none; }
@media (max-width: 560px) { .lm-sub { left: 14px; bottom: 14px; } .lm-sub-btn { width: 48px; height: 48px; } }

/* Likes and comments under a blog post. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.post-social[hidden] { display: none; }
.post-social .blk-inner { border-top: 1px solid var(--line); padding-top: 28px; }
.ps-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; color: var(--c-muted); font-size: .92rem; }
.ps-like { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--c-text); font: 600 .92rem/1 var(--font-body); cursor: pointer; transition: transform .15s, background .15s; }
.ps-like:hover { background: var(--soft); }
.ps-like:active { transform: scale(.96); }
.ps-heart { color: var(--c-muted); font-size: 1.05rem; transition: color .15s; }
.ps-like.is-on .ps-heart { color: #e0475b; }
.ps-like.is-on { border-color: color-mix(in srgb, #e0475b 45%, var(--line)); }
.ps-title { font-size: 1.25rem; margin: 0 0 14px; }
.ps-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ps-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; }
.ps-item.ps-hidden { opacity: .55; }
.ps-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--soft); color: var(--c-text); font-weight: 600; font-size: .85rem; }
.ps-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ps-time { color: var(--c-muted); font-size: .8rem; }
.ps-flag { font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--c-muted); }
.ps-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ps-tools { display: flex; gap: 6px; margin-top: 4px; }
.ps-tool { background: none; border: 0; padding: 2px 4px; color: var(--c-muted); font: inherit; font-size: .8rem; cursor: pointer; }
.ps-tool:hover { color: var(--c-text); text-decoration: underline; }
.ps-empty, .ps-note { color: var(--c-muted); }
.ps-new textarea { width: 100%; min-height: 84px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--c-surface); color: var(--c-text); font: inherit; resize: vertical; }
.ps-new textarea:focus { outline: 2px solid color-mix(in srgb, var(--c-primary) 40%, transparent); outline-offset: 1px; }
.ps-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.ps-err { color: #c0392b; font-size: .85rem; margin-right: auto; }
/* Product page */
.product-includes { margin: 0 0 16px; padding-left: 18px; color: var(--c-muted); font-size: .92rem; }
.product-buy { display: grid; gap: 10px; }
.product-owned { margin: 0; font-weight: 600; color: var(--c-text); }
.product-err { color: #c0392b; margin: 0; }
.product-buy .qr-box { display: grid; gap: 6px; }
.product-buy .qr-box img { width: 100%; max-width: 260px; justify-self: center; border-radius: 10px; background: #fff; }
.product-buy .copy { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.product-buy .copy b { text-align: right; overflow-wrap: anywhere; }

/* Site intro: an overlay over the loaded page (the page is not held back). It ends by
   itself through CSS even without JS; site.js only ends it early on any interaction. */
.lm-intro { position: fixed; inset: 0; z-index: 300; overflow: hidden; display: grid; place-items: center; background: var(--c-bg); color: #fff; animation: lmi-out .7s cubic-bezier(.7, 0, .3, 1) var(--lmi-ms) forwards; }
.lm-intro[hidden] { display: none; }
/* The name shows at once; the photos and the closing clock wait until the photos have
   loaded (at most 3 s, see intro.rs). */
.lm-intro:not(.lmi-go), .lm-intro:not(.lmi-go) .lmi-ph { animation-play-state: paused !important; }
.lm-intro.lmi-done { animation: lmi-out .45s ease forwards; }
.lm-intro::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.62) 100%); }
@keyframes lmi-out { to { opacity: 0; visibility: hidden; transform: scale(1.015); } }
.lmi-photos { position: absolute; inset: 0; }
.lmi-ph { position: absolute; overflow: hidden; background: color-mix(in srgb, var(--c-text) 12%, var(--c-bg)); }
.lmi-ph img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .45s ease; }
/* A photo shows once it has loaded (class set by the intro script): no grey boxes. */
.lmi-ph.ok img { opacity: 1; }
.lmi-ph:not(.ok) { background: transparent; box-shadow: none !important; border-color: transparent !important; }
.lmi-text { position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: 900px; animation: lmi-text .9s cubic-bezier(.2, .8, .2, 1) min(calc(var(--lmi-ms) * .3), 900ms) both; }
.lmi-title { margin: 0; font: 500 clamp(2.1rem, 6.4vw, 4.6rem)/1.04 var(--font-heading); text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.lmi-sub { margin: .9rem 0 0; font: 600 clamp(.68rem, 1.6vw, .8rem)/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; opacity: .88; }
@keyframes lmi-text { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } }
.lmi-skip { position: absolute; right: 18px; bottom: 18px; z-index: 3; padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.18); color: #fff; font: 600 .74rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; animation: lmi-text .6s ease .4s both; }
.lmi-skip:hover { background: rgba(0,0,0,.35); }
html.lmi-on .lm-sub { visibility: hidden; }

/* stack: photos fly in from the sides and settle into a collage; the name sits below. */
.lmi-stack { background: var(--c-bg); }
.lmi-stack::after { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%); }
.lmi-stack .lmi-ph { border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); animation: lmi-fly 1.05s cubic-bezier(.16, .9, .25, 1) calc(var(--i) * 120ms) both; }
.lmi-stack .lmi-ph-0 { --rr: -2deg; left: 50%; top: 38%; width: min(30vw, 300px, 40vh); aspect-ratio: 4 / 5; translate: -50% -50%; rotate: var(--rr); z-index: 2; }
.lmi-stack .lmi-ph-1 { --fx: -60vw; --fy: 20vh; --fr: -18deg; left: calc(50% - min(26vw, 270px)); top: calc(38% + min(4vw, 40px)); width: min(15vw, 160px, 20vh); aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--c-bg); z-index: 3; }
.lmi-stack .lmi-ph-2 { --fx: 60vw; --fy: -30vh; --fr: 22deg; rotate: 6deg; left: calc(50% + min(11vw, 120px)); top: calc(38% - min(22vw, 230px)); width: min(17vw, 180px, 22vh); aspect-ratio: 4 / 3; z-index: 1; }
.lmi-stack .lmi-ph-3 { --fx: 60vw; --fy: 40vh; --fr: -14deg; rotate: -5deg; left: calc(50% + min(13vw, 140px)); top: calc(38% + min(1vw, 10px)); width: min(14vw, 150px, 20vh); aspect-ratio: 3 / 4; z-index: 1; }
.lmi-stack .lmi-ph-4 { --fx: -60vw; --fy: -40vh; --fr: 16deg; rotate: 4deg; left: calc(50% - min(27vw, 290px)); top: calc(38% - min(20vw, 210px)); width: min(14vw, 150px, 19vh); aspect-ratio: 1; z-index: 1; }
.lmi-stack .lmi-text { position: absolute; left: 0; right: 0; bottom: max(8vh, 56px); margin: 0 auto; }
@keyframes lmi-fly { from { opacity: 0; translate: var(--fx) var(--fy); rotate: var(--fr); scale: .8; } }
/* The main photo is centred with translate, so it gets its own keyframes. */
@keyframes lmi-fly0 { from { opacity: 0; translate: -50% calc(-50% + 60vh); rotate: 6deg; scale: .85; } }
.lmi-stack .lmi-ph-0 { animation-name: lmi-fly0; }

/* slideshow: full-screen photos cross-fade one after another. */
.lmi-slideshow .lmi-ph { inset: 0; opacity: 0; animation: lmi-show calc(var(--lmi-ms) / var(--lmi-n) + 700ms) ease calc(var(--i) * var(--lmi-ms) / var(--lmi-n)) forwards; }
@keyframes lmi-show { 0% { opacity: 0; scale: 1.08; } 30% { opacity: 1; } 100% { opacity: 1; scale: 1; } }

/* kenburns: one photo slowly zooms; the name rises. */
.lmi-kenburns .lmi-ph { inset: 0; display: none; }
.lmi-kenburns .lmi-ph-0 { display: block; animation: lmi-zoom calc(var(--lmi-ms) + 900ms) linear both; }
@keyframes lmi-zoom { from { scale: 1; opacity: .2; } 15% { opacity: 1; } to { scale: 1.14; } }

/* grid: photos flip up in a grid, then the name appears over them. */
.lmi-grid .lmi-photos { display: grid; grid-template-columns: repeat(var(--lmi-cols), 1fr); grid-auto-rows: 1fr; gap: 6px; padding: 6px; perspective: 1200px; }
.lmi-grid .lmi-ph { position: relative; border-radius: 10px; animation: lmi-flip .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 110ms) both; }
@keyframes lmi-flip { from { opacity: 0; transform: rotateX(75deg) translateY(30px); } }
@media (max-width: 560px) {
  .lmi-grid .lmi-photos { grid-template-columns: repeat(2, 1fr); }
  .lmi-stack .lmi-ph-0 { width: 66vw; top: 40%; }
  .lmi-stack .lmi-ph-1 { width: 36vw; left: 6vw; top: calc(40% + 18vw); }
  .lmi-stack .lmi-ph-2 { width: 34vw; left: auto; right: 4vw; top: calc(40% - 62vw); }
  .lmi-stack .lmi-ph-3 { width: 30vw; left: auto; right: 5vw; top: calc(40% + 14vw); }
  .lmi-stack .lmi-ph-4 { width: 28vw; left: 5vw; top: calc(40% - 58vw); }
}


/* =============================================================
   Heading weight, transparent header, display hero, slideshow,
   marquee, scrolling cards, CSS-drawn decor, rich motion.
   ============================================================= */
h1, h2, h3, h4 { font-weight: var(--hw, 500); }
.hw-light .hero-title, .hw-light h1, .hw-light h2 { letter-spacing: -.03em; }
.hw-black h1, .hw-black h2 { letter-spacing: -.02em; line-height: 1; }

/* ---------- header: overlay (transparent over the first section) ---------- */
.hdr-overlay .site-header { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; transition: background .45s ease, color .45s ease, border-color .45s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.hdr-overlay main { padding-top: 72px; }
.hdr-overlay.hdr-bleed main { padding-top: 0; }
.hdr-overlay .site-header .nav-link, .hdr-overlay .site-header .brand-text small { color: inherit; }
.hdr-overlay .site-header .nav-link { opacity: .9; }
.hdr-overlay .site-header .nav-link:hover { background: color-mix(in srgb, currentColor 12%, transparent); opacity: 1; }
.hdr-overlay .site-header .brand-text strong { font-size: 1.3rem; }
.hdr-overlay .mobile-nav > summary { border-color: color-mix(in srgb, currentColor 35%, transparent); }
.hdr-overlay .mobile-nav > summary span { background: currentColor; }
.hdr-overlay.hdr-light-start .site-header { color: var(--c-text); }
.hdr-overlay .site-header.is-solid { background: color-mix(in srgb, var(--c-bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); color: var(--c-text); border-bottom-color: var(--line); }
.theme-dark.hdr-overlay .site-header.is-solid { color: #f5f2ec; }
.site-header.is-tucked { transform: translateY(-105%); }
.hdr-overlay .mobile-nav nav { color: var(--c-text); }

/* ---------- hero: display size and overlay layout ---------- */
.hero-display .hero-title { font-size: clamp(3.2rem, 10.5vw, 10.5rem); line-height: .9; letter-spacing: -.045em; }
.hw-light .hero-display .hero-title { letter-spacing: -.06em; }
.blk-hero:has(.hero-overlay) > .blk-inner, .blk-slideshow > .blk-inner { width: 100%; max-width: none; padding: 0; }
.blk-hero:has(.hero-overlay), .blk-slideshow { padding: 0; }
.hero-overlay { position: relative; min-height: min(100svh, 1100px); display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; }
.hero-overlay .hero-bg { position: absolute; inset: 0; z-index: -1; background: #111; overflow: hidden; }
.hero-overlay .hero-bg img, .hero-overlay .hero-bg .img-placeholder { width: 100%; height: 115%; object-fit: cover; min-height: 0; border-radius: 0; }
.hero-overlay .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.05) 32%, rgba(0,0,0,.08) 55%, rgba(0,0,0,.62) 100%); }
.hero-overlay .hero-text { padding: clamp(120px, 16vh, 180px) clamp(20px, 5vw, 80px) clamp(48px, 9vh, 110px); max-width: 1280px; }
.hero-overlay .hero-sub, .hero-overlay .eyebrow { color: rgba(255,255,255,.86); }
.hero-overlay .btn-ghost { color: #fff; }
.hero-overlay .hero-quote { border-color: rgba(255,255,255,.6); }

/* ---------- slideshow ---------- */
.slideshow { position: relative; overflow: hidden; color: #fff; background: #151515; isolation: isolate; }
.ss-tall { height: min(92svh, 920px); } .ss-screen { height: 100svh; } .ss-medium { height: min(66svh, 640px); }
.ss-track { position: absolute; inset: 0; }
.ss-slide { position: absolute; inset: 0; display: grid; align-items: end; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 1.1s; }
.ss-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.ss-slide .ss-media { position: absolute; inset: 0; overflow: hidden; }
.ss-media img, .ss-media .img-placeholder { width: 100%; height: 100%; object-fit: cover; min-height: 0; border-radius: 0; }
.ss-media .img-placeholder { background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); }
.ss-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0) 34%, rgba(0,0,0,.08) 55%, rgba(0,0,0,.6)); }
.ss-slide-anim .ss-slide { transition: transform 1s cubic-bezier(.7,0,.2,1), visibility 1s; opacity: 1; transform: translateX(100%); }
.ss-slide-anim .ss-slide.is-active { transform: none; }
.ss-slide-anim .ss-slide.is-out { transform: translateX(-100%); visibility: visible; }
.ss-text { position: relative; z-index: 2; padding: clamp(110px, 15vh, 170px) clamp(24px, 8vw, 128px) clamp(70px, 11vh, 120px); max-width: 980px; }
.ss-title { font-size: clamp(2.4rem, 6.2vw, 5.8rem); line-height: .98; letter-spacing: -.035em; margin: 0 0 .35em; }
.ss-text .prose { font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 34em; opacity: .9; }
.ss-text .eyebrow { color: rgba(255,255,255,.85); letter-spacing: .3em; }
.ss-l-center .ss-slide { align-items: center; text-align: center; }
.ss-l-center .ss-text { margin-inline: auto; } .ss-l-center .ss-text .prose { margin-inline: auto; } .ss-l-center .eyebrow { justify-content: center; }
.ss-l-split .ss-slide { align-items: center; }
.ss-l-split .ss-media img { object-position: 70% 30%; }
.ss-l-split .ss-media::after { background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 45%); }
.ss-l-split .ss-text { color: var(--c-text); margin-left: clamp(16px, 6vw, 90px); max-width: min(600px, 54vw); padding: clamp(36px, 5vw, 64px) clamp(32px, 5vw, 72px); background: color-mix(in srgb, var(--c-bg) 80%, #f2e6c2); transform: rotate(-3.5deg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
  clip-path: polygon(0 5%, 7% 1%, 16% 4%, 28% 0, 41% 3%, 55% 0, 69% 4%, 82% 1%, 93% 4%, 100% 2%, 98% 24%, 100% 47%, 97% 70%, 100% 96%, 88% 100%, 74% 96%, 60% 100%, 45% 97%, 31% 100%, 17% 96%, 5% 100%, 2% 76%, 0 52%, 3% 28%); }
.ss-l-split .ss-text .eyebrow { color: var(--c-accent); }
.ss-l-split .ss-title { color: var(--c-primary); font-size: clamp(2.2rem, 5vw, 4.6rem); }
.ss-nav { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; width: 64px; height: 96px; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; opacity: .85; transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.ss-nav svg { width: 26px; height: 52px; }
.ss-nav:hover { opacity: 1; } .ss-prev { left: 8px; } .ss-next { right: 8px; }
.ss-prev:hover { transform: translateX(-4px); } .ss-next:hover { transform: translateX(4px); }
.ss-dots { position: absolute; z-index: 3; left: 50%; bottom: 22px; translate: -50% 0; display: flex; gap: 10px; }
.ss-dot { width: 28px; height: 3px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.4); cursor: pointer; transition: background .3s, width .4s; }
.ss-dot.is-active { background: #fff; width: 48px; }
.ss-slide.is-active .ss-text > * { animation: ss-up .95s cubic-bezier(.2,.75,.2,1) both; }
.ss-slide.is-active .ss-text > :nth-child(2) { animation-delay: .1s; } .ss-slide.is-active .ss-text > :nth-child(3) { animation-delay: .2s; } .ss-slide.is-active .ss-text > :nth-child(4) { animation-delay: .3s; }
@keyframes ss-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.fx-kenburns .ss-slide.is-active .ss-media img { animation: ss-kb 9s ease-out both; }
@keyframes ss-kb { from { transform: scale(1.14); } to { transform: scale(1); } }
@media (max-width: 760px) { .ss-l-split .ss-text { max-width: none; margin: 0 16px; transform: rotate(-2deg); } .ss-nav { display: none; } }

/* ---------- gallery marquee (logo strips, moving rows of pictures) ---------- */
.gallery.gallery-marquee { display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track, .mq-copy { display: flex; gap: clamp(20px, 3vw, 48px); width: max-content; }
.mq-track { animation: mq 42s linear infinite; }
.gallery-marquee:hover .mq-track { animation-play-state: paused; }
.gallery-marquee figure { flex: none; width: clamp(150px, 18vw, 260px); }
.gallery-marquee img, .gallery-marquee .img-placeholder { aspect-ratio: 4 / 3; }
.gallery-marquee figcaption { text-align: center; }
@keyframes mq { to { transform: translateX(calc(-50% - clamp(10px, 1.5vw, 24px))); } }

/* ---------- cards in a scrolling row ---------- */
.grid.cards.cards-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 27vw, 360px); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 14px; scroll-behavior: smooth; }
.cards-scroll::-webkit-scrollbar { display: none; }
.cards-scroll > * { scroll-snap-align: start; }
.scroller-nav { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.scroller-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: inherit; font-size: 1.3rem; cursor: pointer; transition: background .3s, transform .3s; }
.scroller-nav button:hover { background: var(--c-accent); color: #fff; transform: scale(1.06); }

/* ---------- CSS-drawn decor (no images) ---------- */
.has-decor { isolation: isolate; overflow: hidden; }
.decor-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.decor-grain .decor-layer, .decor-paper .decor-layer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%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)' opacity='.55'/%3E%3C/svg%3E"); opacity: .12; mix-blend-mode: multiply; }
.on-dark.decor-grain .decor-layer { mix-blend-mode: screen; opacity: .08; }
.decor-paper .decor-layer { opacity: .18; box-shadow: inset 0 0 160px rgba(120, 90, 40, .18); }
.decor-stars .decor-layer { background-image:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 27% 64%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 41% 30%, color-mix(in srgb, var(--c-accent) 70%, #fff) 50%, transparent 52%),
  radial-gradient(1px 1px at 58% 82%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 69% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 83% 47%, #fff 50%, transparent 52%), radial-gradient(2px 2px at 92% 76%, #fff 50%, transparent 52%),
  radial-gradient(1px 1px at 6% 88%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 49% 6%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 35% 92%, #fff 50%, transparent 52%);
  background-size: 640px 520px; opacity: .8; }
.decor-grid .decor-layer { background-image: linear-gradient(color-mix(in srgb, currentColor 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, currentColor 9%, transparent) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }
.decor-lines .decor-layer { background-image: repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--c-accent) 22%, transparent) 31px 32px); opacity: .6; }
.decor-dots .decor-layer { background-image: radial-gradient(color-mix(in srgb, currentColor 22%, transparent) 1.4px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.decor-clouds .decor-layer { background:
  radial-gradient(ellipse 38% 26% at 8% 98%, #fff 60%, transparent 61%), radial-gradient(ellipse 30% 22% at 30% 104%, #fff 60%, transparent 61%), radial-gradient(ellipse 34% 30% at 62% 102%, #fff 60%, transparent 61%), radial-gradient(ellipse 30% 24% at 92% 100%, #fff 60%, transparent 61%),
  radial-gradient(ellipse 22% 10% at 18% 30%, rgba(255,255,255,.65) 60%, transparent 62%), radial-gradient(ellipse 18% 8% at 78% 22%, rgba(255,255,255,.55) 60%, transparent 62%); }
.decor-rays .decor-layer { background: repeating-conic-gradient(from 200deg at 82% 112%, color-mix(in srgb, var(--c-accent) 85%, transparent) 0 3.2deg, transparent 3.2deg 5deg, color-mix(in srgb, var(--c-primary) 85%, transparent) 5deg 8.2deg, transparent 8.2deg 10deg); -webkit-mask-image: radial-gradient(circle at 82% 112%, transparent 34%, #000 34.5%, #000 52%, transparent 52.5%); mask-image: radial-gradient(circle at 82% 112%, transparent 34%, #000 34.5%, #000 52%, transparent 52.5%); opacity: .95; }
.decor-circle .decor-layer::before { content: ''; position: absolute; width: clamp(180px, 26vw, 380px); aspect-ratio: 1; border-radius: 50%; right: clamp(-40px, 3vw, 80px); top: clamp(30px, 8vw, 110px); background: var(--c-accent); }
.decor-arches .decor-layer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='600'%3E%3Cpath d='M0 600V160Q0 30 60 0Q120 30 120 160V600' fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E"); background-size: 120px 100%; background-position: center bottom; }
.decor-mesh .decor-layer { background: radial-gradient(40% 50% at 18% 22%, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent 70%), radial-gradient(45% 55% at 85% 30%, color-mix(in srgb, var(--c-primary) 50%, transparent), transparent 70%), radial-gradient(50% 50% at 50% 100%, color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 70%); filter: blur(10px); opacity: .7; }
.decor-network .decor-layer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='225'%3E%3Cg fill='none' stroke='%237aa6ff' stroke-opacity='.28'%3E%3Cpath d='M0 0L65 112.5L0 225M65 112.5H195M195 112.5L260 0M195 112.5L260 225M65 112.5L130 0L195 112.5L130 225Z'/%3E%3C/g%3E%3Cg fill='%237aa6ff' fill-opacity='.5'%3E%3Ccircle cx='65' cy='112.5' r='2'/%3E%3Ccircle cx='195' cy='112.5' r='2'/%3E%3Ccircle cx='130' cy='0' r='2'/%3E%3Ccircle cx='130' cy='225' r='2'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); }
.page-section.has-decor > .section-inner, .blk.has-decor > .blk-inner { position: relative; z-index: 1; }

/* ---------- motion: none ---------- */
.motion-none .mq-track { animation: none; }
.motion-none * { scroll-behavior: auto; }

/* ---------- motion: rich ---------- */
.scroll-progress { position: fixed; z-index: 90; top: 0; left: 0; width: 100%; height: 3px; background: var(--c-accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
.fx-decor-move .decor-stars .decor-layer { animation: twinkle 6s ease-in-out infinite alternate; }
.fx-decor-move .decor-mesh .decor-layer { animation: mesh 18s ease-in-out infinite alternate; }
.fx-decor-move .decor-clouds .decor-layer { animation: drift 24s ease-in-out infinite alternate; }
.fx-decor-move .decor-circle .decor-layer::before { animation: bob 9s ease-in-out infinite alternate; }
.fx-decor-move .decor-rays .decor-layer { animation: rays-in 1.8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes mesh { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -4%) scale(1.08); } 100% { transform: translate(-3%, 3%) scale(1.02); } }
@keyframes drift { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
@keyframes bob { from { transform: translateY(-10px) scale(1); } to { transform: translateY(16px) scale(1.04); } }
@keyframes rays-in { from { -webkit-mask-size: 70% 70%; mask-size: 70% 70%; opacity: 0; } to { opacity: .95; } }
/* words of big headings rise out of a mask, one after another */
.fx-words .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-words .wd > span { display: inline-block; }
.anim-ready .fx-words .wd > span { transform: translateY(108%); transition: transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--wi, 0) * 55ms); }
.anim-ready .fx-words .is-in .wd > span, .anim-ready .fx-words .ss-slide .wd > span { transform: none; }
/* list items, cards, stats and images come in one by one */
.anim-ready .fx-stagger .stg { opacity: 0; transform: translateY(34px); transition: opacity .8s ease calc(var(--i, 0) * 95ms), transform 1s cubic-bezier(.2,.75,.2,1) calc(var(--i, 0) * 95ms); }
.anim-ready .fx-stagger .is-in .stg { opacity: 1; transform: none; }
.anim-ready .fx-wipe-img .rv { clip-path: inset(14% 8% 14% 8%); transform: scale(1.14); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1), transform 1.7s cubic-bezier(.2,.7,.2,1); }
.anim-ready .fx-wipe-img .is-in .rv { clip-path: inset(0); transform: none; }
.anim-ready :is(.motion-rich, .motion-burst) [data-anim]:not([data-anim="none"]) .blk-inner { transition-duration: 1s; }
/* depth on hover */
.fx-card-lift .card { transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s; }
.fx-card-lift .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.fx-card-lift .card-img { overflow: hidden; }
.fx-card-lift .card-img img, .fx-card-lift .mt-img img, .fx-card-lift .gallery:not(.gallery-marquee) img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; }
.fx-card-lift .card:hover .card-img img, .fx-card-lift .mt-img:hover img, .fx-card-lift .gallery figure:hover img { transform: scale(1.06); }
:is(.fx-btn-sheen, .fx-ripple, .fx-confetti, .fx-magnetic) .btn { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, box-shadow .3s; }
.fx-btn-sheen .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.fx-btn-sheen .btn:hover::after { transform: translateX(130%); }
.fx-nav-underline .nav-link::before { content: ''; position: absolute; left: 11px; right: 11px; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.fx-nav-underline .nav-link:hover::before { transform: scaleX(1); transform-origin: left; }
.fx-countup .stat strong { font-variant-numeric: tabular-nums; }
.fx-parallax [data-px] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .mq-track, .decor-layer, .decor-layer::before, .ss-media img, .ss-text > * { animation: none !important; }
  .anim-ready .wd > span, .anim-ready .stg, .anim-ready .rv, .anim-ready .bnc { transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  .scroll-progress { display: none; }
}
/* slideshow: only the active slide shows its words (no overlap during the cross-fade) */
.ss-slide:not(.is-active) .ss-text { opacity: 0; transition: opacity .25s ease; }
/* transparent header: long menus stay on one line */
.hdr-overlay .main-nav { flex-wrap: nowrap; gap: 0; }
.hdr-overlay .nav-link { padding: 8px 8px; font-size: .86rem; }
@media (max-width: 1180px) { .hdr-overlay .main-nav { display: none; } .hdr-overlay .mobile-nav { display: block; } }

/* =============================================================
   Hero frames, stacked hero, leader rows; extra "rich" motion;
   the "burst" motion level.
   ============================================================= */
/* split hero frames */
.frame-circle .hero-photos { aspect-ratio: 1; max-width: 480px; }
.frame-circle .ph-main { width: 86%; height: 86%; right: 0; top: 8%; border-radius: 50%; }
.frame-circle .hero-photos::before { content: ''; position: absolute; z-index: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--c-accent); right: -4%; top: -4%; }
.frame-circle .ph-main { z-index: 1; }
.frame-bleed.hero-split { grid-template-columns: 1fr 1.1fr; }
.frame-bleed .hero-photos { aspect-ratio: auto; height: min(78vh, 760px); max-width: none; margin-right: calc((100vw - 100%) / -2); width: calc(100% + (100vw - 100%) / 2); justify-self: stretch; }
.frame-bleed .ph-main { border-radius: 0; width: 100%; height: 100%; box-shadow: none; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.frame-blob .ph-main { border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; width: 92%; height: 92%; }
.frame-tilt .ph-main { border-radius: 4px; transform: rotate(4deg); border: 12px solid #fff; border-bottom-width: 46px; box-shadow: 0 28px 50px -24px rgba(0,0,0,.45); }
.frame-tilt .hero-photos::after { content: ''; position: absolute; z-index: 3; width: 34%; height: 34px; top: -14px; left: 40%; background: color-mix(in srgb, var(--c-accent) 55%, rgba(255,255,255,.6)); transform: rotate(-6deg); opacity: .85; }
.frame-plain .ph-main { border-radius: 0; width: 100%; height: 100%; box-shadow: none; }
/* overlay frames */
.frame-ring .hero-bg::before { content: ''; position: absolute; z-index: 1; width: min(62vh, 640px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; left: 50%; top: 46%; translate: -50% -50%; }
.frame-grid .hero-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 4px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 100% 4px, 80px 100%; }
.frame-glow { align-items: center; text-align: center; }
.frame-glow .hero-text { margin-inline: auto; }
.frame-glow .eyebrow, .frame-glow .btn-row { justify-content: center; }
.frame-glow .hero-title { text-shadow: 0 0 40px color-mix(in srgb, var(--c-accent) 70%, transparent), 0 0 90px color-mix(in srgb, var(--c-accent) 45%, transparent); }
.frame-duotone .hero-bg img { filter: grayscale(1) contrast(1.15); mix-blend-mode: luminosity; }
.frame-duotone .hero-bg { background: var(--c-primary); }
.frame-duotone .hero-bg::after { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65)), color-mix(in srgb, var(--c-primary) 35%, transparent); }
.blk-hero:has(.frame-inset) > .blk-inner { width: min(100% - 32px, 1240px); }
.frame-inset { min-height: min(70vh, 720px); border-radius: var(--radius); align-items: end; }
.frame-inset .hero-text { text-align: center; margin-inline: auto; padding-bottom: 7vh; }
.frame-inset .hero-title { font-size: clamp(1.8rem, 3.6vw, 3rem); font-style: italic; }
.frame-card { align-items: center; }
.frame-card .hero-text { background: color-mix(in srgb, var(--c-bg) 94%, transparent); color: var(--c-text); max-width: 520px; margin-left: clamp(16px, 6vw, 96px); padding: clamp(28px, 4vw, 52px); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.frame-card .hero-sub, .frame-card .eyebrow { color: var(--c-muted); }
.frame-card .hero-title { font-size: clamp(2rem, 4vw, 3.4rem); }
/* A hero block with its own background colour paints the card with it (e.g. a black caption box). */
.blk.has-bg .frame-card .hero-text { background: var(--blk-bg); color: var(--blk-fg, var(--c-text)); box-shadow: none; }
.blk.has-bg .frame-card :is(.hero-sub, .eyebrow) { color: inherit; opacity: .85; }
/* stacked hero: giant title above a wide picture */
.hero-stack { display: grid; gap: clamp(20px, 4vw, 48px); }
.hero-stack .hero-title { font-size: clamp(3.4rem, 11vw, 11.5rem); line-height: .88; letter-spacing: -.05em; }
.hero-stack .hero-text { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px 40px; align-items: end; }
.hero-stack .hero-text > .eyebrow, .hero-stack .hero-text > .hero-title { grid-column: 1 / -1; }
.hero-wide { overflow: hidden; border-radius: var(--radius); aspect-ratio: 21 / 9; }
.hero-wide img, .hero-wide .img-placeholder { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; min-height: 0; }
@media (max-width: 760px) { .hero-stack .hero-text { grid-template-columns: 1fr; } .hero-wide { aspect-ratio: 4 / 3; } }
/* leader rows: a table of contents */
.row-leaders .row-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border: 0; }
.row-leaders .row-main { flex: 1; display: flex; align-items: baseline; gap: 10px; }
.row-leaders .row-main h3 { font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; white-space: nowrap; }
.row-leaders .row-main::after { content: ''; flex: 1; border-bottom: 2px dotted color-mix(in srgb, currentColor 45%, transparent); transform: translateY(-4px); }
.row-leaders .row-main .prose { display: none; }
.row-leaders .badge { background: none; padding: 0; font-family: var(--font-heading); }

/* ---------- more "rich" motion ---------- */
.fx-shimmer h2 em, .fx-shimmer .hero-title em, .fx-shimmer .fx-em { background: linear-gradient(90deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 40%, var(--c-primary)), var(--c-accent)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.fx-rule-draw .section-head h2::after { content: ''; display: block; width: 64px; height: 3px; margin-top: .45em; background: var(--c-accent); transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .35s; }
.fx-rule-draw .is-in .section-head h2::after, .fx-rule-draw .section-head h2.is-drawn::after { transform: scaleX(1); }
.al-center .section-head h2::after { margin-inline: auto; transform-origin: center; }
.fx-boop .feature.card .feat-icon { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.fx-boop .feature.card:hover .feat-icon { transform: rotate(-10deg) scale(1.15); }
.fx-ripple .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: ripple .7s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.fx-float .float-y { animation: float-y 6s ease-in-out infinite alternate; }
@keyframes float-y { from { transform: translateY(-6px); } to { transform: translateY(8px); } }

/* ---------- "burst": every effect plus the unusual ones ---------- */
/* opening curtain */
.burst-curtain { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--c-text); color: var(--c-bg); font: 200 clamp(2.4rem, 7vw, 6rem)/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; transition: transform 1.1s cubic-bezier(.8,0,.2,1) .15s; pointer-events: none; }
.burst-curtain::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c-accent); transform-origin: left; animation: curtain-bar .9s cubic-bezier(.7,0,.2,1) both; }
@keyframes curtain-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.burst-curtain.is-up { transform: translateY(-101%); }
/* custom cursor: a dot and a ring that grows over links and pictures */
.burst-cursor, .burst-ring { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; }
.burst-cursor { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; }
.burst-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid #fff; transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s, margin .35s, background .35s; }
.burst-ring.is-big { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: rgba(255,255,255,.95); }
.fx-cursor.has-cursor, .fx-cursor.has-cursor a, .fx-cursor.has-cursor button { cursor: none; }
/* cursor trail */
.burst-trail { position: fixed; z-index: 290; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--c-accent); pointer-events: none; animation: trail .8s ease-out forwards; }
@keyframes trail { to { transform: scale(0) translateY(14px); opacity: 0; } }
/* film grain over the page */
.burst-grain { position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
/* giant ghost words behind sections, sliding sideways with the scroll */
.ghost-word { position: absolute; z-index: 0; left: 0; top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none; font: 800 clamp(6rem, 18vw, 18rem)/1 var(--font-heading); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, currentColor 26%, transparent); opacity: 1; }
.page-section:has(> .ghost-word) > .section-inner { position: relative; z-index: 1; }
/* pictures: a colour block wipes away; then a spotlight follows the pointer */
.burst-wipe { position: relative; overflow: hidden; }
.burst-wipe::after { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--c-accent); transform-origin: right; transition: transform 1.1s cubic-bezier(.8,0,.2,1); }
.is-in .burst-wipe::after, .burst-wipe.is-open::after { transform: scaleX(0); }
.burst-spot img { filter: grayscale(.85) contrast(1.05); transition: filter .6s; }
.burst-spot:hover img { filter: none; -webkit-mask-image: none; }
.burst-spot { --mx: 50%; --my: 50%; }
.burst-spot::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle 140px at var(--mx) var(--my), rgba(255,255,255,.28), transparent 70%); opacity: 0; transition: opacity .4s; }
.burst-spot:hover::before { opacity: 1; }
/* 3D tilt with glare */
.burst-tilt { transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .5s; will-change: transform; }
.burst-tilt .glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.4), transparent 55%); opacity: 0; transition: opacity .3s; }
.burst-tilt:hover .glare { opacity: 1; }
/* scroll skew */
.fx-skew .skew-on-scroll { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
/* decoding titles */
.fx-decode .decode { font-variant-numeric: tabular-nums; }
/* big title letters drop in one by one on load */
.fx-letters .hero-title .ch, .fx-letters .ss-title .ch { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(8deg); animation: ch-in .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--ci) * 28ms + .9s); }
@keyframes ch-in { to { opacity: 1; transform: none; } }
/* section backgrounds breathe in */
.fx-clip-sections .page-section.has-bg { clip-path: inset(6% 4% round 28px); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1); }
.fx-clip-sections .page-section.has-bg.is-in { clip-path: inset(0 0 round 0); }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .burst-cursor, .burst-ring, .burst-trail, .burst-grain, .ghost-word { display: none !important; }
  .fx-cursor.has-cursor, .fx-cursor.has-cursor a, .fx-cursor.has-cursor button { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .burst-curtain { display: none; }
  .burst-wipe::after { display: none; }
  .fx-clip-sections .page-section.has-bg { clip-path: none; }
  .fx-letters .hero-title .ch, .fx-letters .ss-title .ch { opacity: 1; transform: none; animation: none; }
  .fx-shimmer h2 em, .fx-shimmer .hero-title em, .fx-shimmer .fx-em { animation: none; }
}
/* cards: staggered heights, tilted overlapping cards */
@media (min-width: 800px) {
  .cards-stagger > :nth-child(even) { margin-top: clamp(60px, 12vw, 180px); }
  .cards-tilt { gap: 0; padding-block: 30px; }
  .cards-tilt > * { transform: rotate(-5deg); margin-inline: -14px; box-shadow: var(--shadow-lg); }
  .cards-tilt > :nth-child(even) { transform: rotate(6deg) translateY(30px); z-index: 1; }
  .cards-tilt > :hover { transform: rotate(0) scale(1.04); z-index: 2; }
}
.cards-tilt > * { background: color-mix(in srgb, var(--c-accent) 18%, var(--c-surface)); }

/* =============================================================
   Menu layouts (theme.header_style). Each follows the menu of a real
   site; the theme YAML that uses it names the site.
   ============================================================= */
.hdr-aux { display: none; }
.mn-word { display: none; }
.nav-right { display: none; }
/* menus that float over the page: room at the top unless the first section is a full picture */
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger, .hdr-pill, .hdr-bigtype, .hdr-columns) main { padding-top: 84px; }
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger, .hdr-pill, .hdr-bigtype, .hdr-columns).hdr-bleed main { padding-top: 0; }
/* white text that inverts over whatever is under it */
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger) .site-header { position: fixed; inset: 0 0 auto 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--c-text); pointer-events: none; }
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger).hdr-bleed .site-header { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
/* once the page moves under it, the menu inverts over whatever passes below */
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger) .site-header.is-solid { color: #fff; text-shadow: none; mix-blend-mode: difference; }
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger) .site-header :is(a, summary, .account, .hdr-aux, nav, details) { pointer-events: auto; }
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger) .site-header :is(.nav-link, .brand-text small) { color: inherit; }
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger) .nav-link:hover { background: none; }
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger) .nav-link.is-active::after { display: none; }
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger) .brand-mark { display: none; }
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger) .mobile-nav > summary { border: 0; }
:is(.hdr-stack, .hdr-frame, .hdr-corners, .hdr-burger) .mobile-nav > summary span { background: currentColor; }
/* the open menu panel must not invert */
body:has(.site-header .mobile-nav[open]) .site-header { mix-blend-mode: normal; }

/* stack — OXMAN: thin wordmark top left, links as a small vertical list */
.hdr-stack .header-inner { align-items: flex-start; padding-top: 16px; }
.hdr-stack .brand-text strong { font: 200 clamp(1.8rem, 3.2vw, 2.9rem)/1 var(--font-heading); text-transform: uppercase; letter-spacing: .04em; }
.hdr-stack .brand-text small { display: none; }
.hdr-stack .main-nav { flex-direction: column; gap: 0; position: absolute; left: 62%; top: 14px; }
.hdr-stack .nav-link { padding: 0; font-size: .92rem; font-weight: 400; line-height: 1.45; opacity: .85; }
.hdr-stack .nav-link.is-active, .hdr-stack .nav-link:hover { opacity: 1; }
.hdr-stack .nav-link.is-active::before { content: '— '; }
@media (max-width: 1180px) { .hdr-stack .mobile-nav > summary .mn-word { display: block; font: 400 .9rem/1 var(--font-body); } .hdr-stack .mobile-nav > summary span { display: none; } .hdr-stack .mobile-nav > summary { width: auto; padding: 0 6px; } }
/* stack, compact: the big wordmark and the vertical list only sit over a full picture at the top of the page.
   Once the page scrolls under the menu, or on a page that does not open on a full picture, they fold into one
   thin bar of dark glass: the name on one small line, the links in a row. Nothing inverts over text any more. */
.hdr-stack .site-header { transition: background-color .3s ease, border-color .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease; }
.hdr-stack .header-inner { transition: min-height .3s ease, padding .3s ease; }
.hdr-stack .brand-text strong { transition: font-size .3s cubic-bezier(.2,.7,.2,1), letter-spacing .3s ease; }
.hdr-stack .brand-logo { transition: height .3s ease; }
:is(.hdr-stack.hdr-light-start .site-header, .hdr-stack .site-header.is-solid) {
  mix-blend-mode: normal; color: var(--c-text); text-shadow: none; pointer-events: auto;
  background: color-mix(in srgb, var(--c-bg) 74%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent);
}
:is(.hdr-stack.hdr-light-start .site-header, .hdr-stack .site-header.is-solid) .header-inner { align-items: center; min-height: 56px; padding-top: 0; }
:is(.hdr-stack.hdr-light-start .site-header, .hdr-stack .site-header.is-solid) .brand-text strong { font-size: 1.05rem; font-weight: 300; letter-spacing: .14em; }
:is(.hdr-stack.hdr-light-start .site-header, .hdr-stack .site-header.is-solid) .brand-logo { height: 28px; }
:is(.hdr-stack.hdr-light-start .site-header, .hdr-stack .site-header.is-solid) .main-nav { position: static; flex-direction: row; align-items: center; gap: 22px; margin-left: auto; }
:is(.hdr-stack.hdr-light-start .site-header, .hdr-stack .site-header.is-solid) .nav-link { line-height: 1; font-size: .86rem; }
.hdr-stack.hdr-light-start main { padding-top: 56px; }

/* frame — Refik Anadol Studio: spaced mono caps across the top, labels in the bottom corners */
.hdr-frame .header-inner { min-height: 64px; max-width: none; padding-inline: clamp(16px, 3vw, 40px); }
.hdr-frame .brand-text strong { font: 500 .7rem/1 var(--font-heading); letter-spacing: .24em; text-transform: uppercase; border: 1px solid currentColor; padding: 5px 8px; }
.hdr-frame .brand-text small { display: none; }
.hdr-frame .main-nav { flex: 1; justify-content: space-between; margin: 0 clamp(20px, 8vw, 160px); }
.hdr-frame .nav-link { font: 400 .72rem/1 var(--font-heading); letter-spacing: .22em; text-transform: uppercase; padding: 8px 0; }
.hdr-frame .nav-link.is-active { text-decoration: underline; text-underline-offset: 6px; }
.hdr-frame .hdr-aux { display: block; }
.hdr-frame .hdr-aux > * { position: fixed; bottom: 16px; font: 400 .6rem/1.3 var(--font-heading); letter-spacing: .22em; text-transform: uppercase; }
.hdr-frame .hdr-line { left: clamp(16px, 3vw, 40px); }
.hdr-frame .hdr-year { right: clamp(16px, 3vw, 40px); }
.hdr-frame .hdr-ruler { display: none; }

/* corners — Aristide Benoist: name top left, scroll ruler in the middle, links bottom right, a line bottom left */
.hdr-corners .header-inner { max-width: none; padding-inline: clamp(18px, 3vw, 44px); min-height: 92px; }
.hdr-corners .brand-text strong { font: 800 clamp(1.4rem, 2.4vw, 2rem)/.9 var(--font-heading); letter-spacing: -.02em; text-transform: uppercase; transform: scaleY(1.25); transform-origin: top; display: inline-block; }
.hdr-corners .brand-text small { display: none; }
.hdr-corners .main-nav { position: fixed; right: clamp(18px, 3vw, 44px); bottom: 26px; flex-direction: column; align-items: flex-end; gap: 0; }
.hdr-corners .nav-link { padding: 1px 0; font: 500 .74rem/1.35 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.hdr-corners .nav-link.is-active { text-decoration: underline; text-underline-offset: 4px; }
.hdr-corners .hdr-aux { display: block; }
.hdr-corners .hdr-line { position: fixed; left: clamp(18px, 3vw, 44px); bottom: 26px; max-width: 220px; font: 500 .62rem/1.35 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.hdr-corners .hdr-year { display: none; }
.hdr-corners .hdr-ruler { position: fixed; left: 50%; top: 40px; translate: -50% 0; width: min(260px, 40vw); height: 14px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 9px); opacity: .55; }
.hdr-corners .hdr-ruler i { position: absolute; top: -3px; bottom: -3px; width: 26px; border: 1px solid currentColor; left: calc(var(--p, 0) * (100% - 26px)); }
@media (max-width: 1180px) {
  .hdr-corners .main-nav { display: none; }
  .hdr-corners .hdr-ruler { display: none; }
  .hdr-corners .hdr-line { display: none; }
}

/* burger — Poet of Code: only a button in the corner; the menu fills the screen */
.hdr-burger .main-nav { display: none !important; }
.hdr-burger .mobile-nav { display: block !important; }
.hdr-burger .header-inner { max-width: none; padding-inline: clamp(16px, 3vw, 40px); }
.hdr-burger .brand-text strong { font: 600 1rem/1 var(--font-heading); opacity: .75; }
.hdr-burger .brand-text small { display: none; }
.hdr-burger .header-inner > .account { display: none; }
.hdr-burger .mobile-nav > summary { position: relative; z-index: 2; width: 46px; height: 46px; gap: 7px; }
.hdr-burger .mobile-nav > summary span { width: 28px; height: 1.5px; transition: transform .4s cubic-bezier(.7,0,.2,1), opacity .3s; }
.hdr-burger .mobile-nav[open] > summary span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hdr-burger .mobile-nav[open] > summary span:nth-child(2) { opacity: 0; }
.hdr-burger .mobile-nav[open] > summary span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
.hdr-burger .mobile-nav > nav { position: fixed; inset: 0; width: auto; top: 0; border: 0; border-radius: 0; padding: clamp(80px, 12vh, 140px) clamp(24px, 8vw, 120px) 40px; background: #0e0e0e; color: #f4f1ec; box-shadow: none; justify-content: center; gap: 2px; animation: burger-in .55s cubic-bezier(.7,0,.2,1) both; }
.hdr-burger .mobile-nav > nav > a { font: 700 clamp(2rem, 6vw, 4.6rem)/1.05 var(--font-heading); letter-spacing: -.03em; padding: 4px 0; color: inherit; opacity: 0; animation: burger-link .6s cubic-bezier(.2,.8,.2,1) forwards; }
.hdr-burger .mobile-nav > nav > a:nth-child(2) { animation-delay: .05s; } .hdr-burger .mobile-nav > nav > a:nth-child(3) { animation-delay: .1s; } .hdr-burger .mobile-nav > nav > a:nth-child(4) { animation-delay: .15s; } .hdr-burger .mobile-nav > nav > a:nth-child(5) { animation-delay: .2s; } .hdr-burger .mobile-nav > nav > a:nth-child(n+6) { animation-delay: .25s; }
.hdr-burger .mobile-nav > nav > a:hover { color: var(--c-accent); }
.hdr-burger .mobile-nav .menu-foot { display: flex; gap: 12px; margin-top: 28px; border: 0; }
.hdr-burger .mobile-nav[open] > summary { color: #fff; }
@keyframes burger-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes burger-link { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
body:has(.hdr-burger .mobile-nav[open]), .hdr-burger:has(.mobile-nav[open]) { overflow: hidden; }

/* drawer — Cuberto: a plain bar that becomes a round floating button; links slide in from the right */
.hdr-drawer .site-header { transition: transform .5s cubic-bezier(.7,0,.2,1); }
.hdr-drawer .main-nav .nav-link:last-child { background: var(--c-text); color: var(--c-bg); border-radius: 999px; padding: 10px 20px; margin-left: 10px; }
.hdr-drawer .main-nav .nav-link:last-child::after { display: none; }
.hdr-drawer .mobile-nav > summary { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--c-text); gap: 6px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.hdr-drawer .mobile-nav > summary span { background: var(--c-bg); width: 22px; }
.hdr-drawer .site-header.is-compact { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-drawer .site-header.is-compact :is(.brand, .main-nav, .account) { opacity: 0; pointer-events: none; transition: opacity .3s; }
.hdr-drawer .site-header.is-compact .mobile-nav { display: block; position: fixed; right: clamp(14px, 2.5vw, 32px); top: 14px; }
.hdr-drawer .mobile-nav > nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); border: 0; border-radius: 0; padding: 120px 48px 40px; background: #0b0b0d; color: #fff; box-shadow: -40px 0 80px rgba(0,0,0,.25); justify-content: flex-start; animation: drawer-in .6s cubic-bezier(.7,0,.2,1) both; }
.hdr-drawer .mobile-nav > nav > a { font: 500 clamp(2rem, 4vw, 3.4rem)/1.1 var(--font-heading); letter-spacing: -.03em; padding: 6px 0; color: inherit; }
.hdr-drawer .mobile-nav > nav > a:hover { padding-left: 14px; transition: padding .3s; }
.hdr-drawer .mobile-nav[open] > summary { position: fixed; right: clamp(14px, 2.5vw, 32px); top: 14px; z-index: 3; background: #fff; }
.hdr-drawer .mobile-nav[open] > summary span { background: #000; }
.hdr-drawer .mobile-nav .menu-foot { display: flex; border-color: rgba(255,255,255,.15); margin-top: auto; }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }

/* dock — Studio Freight: the menu is a bar fixed at the bottom of the screen */
.hdr-dock .site-header { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-bottom: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--c-bg) 92%, transparent); }
.hdr-dock .header-inner { min-height: 54px; max-width: none; padding-inline: clamp(14px, 2vw, 28px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; }
.hdr-dock .brand { grid-column: 2; grid-row: 1; margin: 0; }
.hdr-dock .brand-mark { display: none; }
.hdr-dock .brand-text strong { font: 700 .92rem/1 var(--font-heading); letter-spacing: .02em; }
.hdr-dock .brand-text small { display: none; }
.hdr-dock .main-nav { grid-column: 1; grid-row: 1; justify-self: start; gap: 0; }
.hdr-dock .nav-link { padding: 6px 0; font: 400 .84rem/1 var(--font-body); color: var(--c-text); }
.hdr-dock .nav-link:not(:last-child)::before { content: ','; position: static; margin-right: .45em; order: 2; }
.hdr-dock .nav-link { display: inline-flex; }
.hdr-dock .nav-link:hover { background: none; text-decoration: underline; }
.hdr-dock .nav-link.is-active::after { display: none; }
.hdr-dock .nav-link.is-active { font-weight: 700; }
.hdr-dock .header-inner > .account { grid-column: 3; grid-row: 1; justify-self: end; }
.hdr-dock .hdr-aux { display: none; }
.hdr-dock main { padding-bottom: 54px; }
.hdr-dock .site-footer { padding-bottom: 90px; }
.hdr-dock .lm-sub { bottom: 76px; }
.hdr-dock .mobile-nav > nav { top: auto; bottom: 54px; }
@media (max-width: 1180px) {
  .hdr-dock .header-inner { grid-template-columns: 1fr auto; }
  .hdr-dock .brand { grid-column: 1; justify-self: start; }
  .hdr-dock .mobile-nav { grid-column: 2; grid-row: 1; }
  .hdr-dock .mobile-nav > summary { height: 38px; width: auto; padding: 0 14px; border-radius: 999px; display: flex; align-items: center; }
  .hdr-dock .mobile-nav > summary span { display: none; }
  .hdr-dock .mobile-nav > summary .mn-word { display: block; font: 600 .82rem/1 var(--font-body); }
  .hdr-dock .mobile-nav > nav { position: fixed; left: 10px; right: 10px; bottom: 64px; top: auto; width: auto; }
}

/* pill — Antinomy Studio: a floating rounded bar detached from the top */
.hdr-pill .site-header { position: fixed; top: 14px; left: 50%; translate: -50% 0; width: min(1080px, calc(100% - 28px)); border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--c-bg) 84%, transparent); box-shadow: 0 12px 40px -18px rgba(0,0,0,.35); }
.hdr-pill .header-inner { min-height: 56px; width: 100%; max-width: none; padding: 0 8px 0 10px; gap: 10px; }
.hdr-pill .brand-mark { width: 36px; height: 36px; font-size: 1rem; }
.hdr-pill .brand-text small { display: none; }
.hdr-pill .brand-text strong { font-size: .98rem; }
.hdr-pill .nav-link { border-radius: 999px; padding: 8px 14px; font-size: .88rem; }
.hdr-pill .nav-link.is-active { background: var(--c-text); color: var(--c-bg); }
.hdr-pill .nav-link.is-active::after { display: none; }
.hdr-pill .mobile-nav > nav { top: 62px; border-radius: 24px; }
.hdr-pill .mobile-nav > summary { border-radius: 999px; }

/* split — Nadieh Bremer: caps links around a mark in the middle, rule under, active item boxed */
.hdr-split .site-header { background: var(--c-bg); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-split .header-inner { justify-content: center; gap: 0; border-bottom: 1px solid var(--c-text); min-height: 64px; }
.hdr-split .brand { margin: 0 28px; order: 2; }
.hdr-split .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hdr-split .brand-mark { width: 46px; height: 52px; border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(135deg, var(--c-accent), var(--c-primary)); font-size: 1.05rem; }
.hdr-split .main-nav { order: 1; flex: 1; justify-content: flex-end; gap: 4px; }
.hdr-split .nav-right { order: 3; flex: 1; justify-content: flex-start; gap: 4px; }
.hdr-split .header-inner > .account { order: 4; }
.hdr-split .main-nav, .hdr-split .nav-right { flex-wrap: nowrap; }
.hdr-split .nav-link { font: 500 .68rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text); padding: 14px 11px; border-radius: 0; }
.hdr-split .nav-link.is-active { background: color-mix(in srgb, var(--c-accent) 35%, transparent); }
.hdr-split .nav-link.is-active::after { display: none; }
.hdr-split .mobile-nav { order: 5; }
@media (min-width: 1181px) { .hdr-split .nav-right, .hdr-centered .nav-right { display: flex; } }
@media (max-width: 1180px) { .hdr-split .brand { order: 0; margin: 0 auto 0 0; } .hdr-split .header-inner { justify-content: space-between; } }

/* centered — Adam Grant: the name in the middle of the menu, small serif links on both sides */
.hdr-centered .site-header { background: var(--c-bg); border-bottom: 0; }
.hdr-centered .header-inner { min-height: 84px; justify-content: center; gap: 0; }
.hdr-centered .brand { order: 2; margin: 0 40px; }
.hdr-centered .brand-mark { display: none; }
.hdr-centered .brand-text { align-items: center; }
.hdr-centered .brand-text strong { font: 600 1.2rem/1 var(--font-body); letter-spacing: .01em; }
.hdr-centered .brand-text small { display: none; }
.hdr-centered .main-nav { order: 1; flex: 1; justify-content: flex-start; gap: 18px; }
.hdr-centered .nav-right { order: 3; flex: 1; justify-content: flex-end; gap: 18px; }
.hdr-centered .header-inner > .account { order: 4; margin-left: 12px; }
.hdr-centered .nav-link { font: 400 .9rem/1 var(--font-heading); color: var(--c-muted); padding: 6px 0; }
.hdr-centered .nav-link:hover { background: none; color: var(--c-text); }
.hdr-centered .nav-link.is-active::after { left: 0; right: 0; bottom: -4px; height: 1px; }
.hdr-centered .mobile-nav { order: 5; }
@media (max-width: 1180px) { .hdr-centered .brand { order: 0; margin: 0 auto 0 0; } }

/* tabs — The Coding Train: links as boxed cells with dividers, on a ruled line */
.hdr-tabs .site-header { background: var(--c-bg); border-bottom: 1.5px solid var(--c-text); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-tabs .header-inner { min-height: 52px; max-width: none; padding-inline: 0 0; gap: 0; align-items: stretch; }
.hdr-tabs .brand { padding: 0 20px; border-right: 1.5px solid var(--c-text); }
.hdr-tabs .brand-mark { border-radius: 8px; width: 34px; height: 34px; }
.hdr-tabs .brand-text small { display: none; }
.hdr-tabs .main-nav { gap: 0; align-items: stretch; margin-left: auto; }
.hdr-tabs .nav-link { display: grid; place-items: center; border-radius: 0; border-left: 1.5px solid var(--c-text); padding: 0 20px; font: 600 .74rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text); }
.hdr-tabs .nav-link:hover { background: color-mix(in srgb, var(--c-accent) 18%, transparent); }
.hdr-tabs .nav-link.is-active { background: var(--c-primary); color: #fff; }
.hdr-tabs .nav-link.is-active::after { display: none; }
.hdr-tabs .header-inner > .account { border-left: 1.5px solid var(--c-text); padding: 0 14px; }
.hdr-tabs .mobile-nav { align-self: center; margin-right: 12px; }

/* tiles — teenage engineering: links as tiles with a big first letter, on a dark band */
.hdr-tiles .site-header { background: #0d0d0d; color: #f2f2f2; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-tiles .header-inner { min-height: 92px; max-width: none; padding-inline: clamp(16px, 2.5vw, 32px); gap: 6px; }
.hdr-tiles .brand-mark { display: none; }
.hdr-tiles .brand-text strong { font: 300 clamp(1.3rem, 2vw, 1.8rem)/1 var(--font-body); text-transform: lowercase; letter-spacing: -.01em; }
.hdr-tiles .brand-text small { color: #9a9a9a; }
.hdr-tiles .main-nav { gap: 8px; }
.hdr-tiles .nav-link { display: block; width: 116px; height: 66px; padding: 8px 10px; border: 1px solid #3a3a3a; border-radius: 6px; color: #d9d9d9; font: 400 .74rem/1.1 var(--font-body); letter-spacing: .02em; text-transform: lowercase; overflow: hidden; }
.hdr-tiles .main-nav .nav-link { display: flex; flex-direction: column; justify-content: space-between; }
.hdr-tiles .main-nav .nav-link[data-i]::before { content: attr(data-i); position: static; transform: none; background: none; height: auto; font: 200 1.9rem/1 var(--font-heading); text-transform: uppercase; color: #fff; }
.hdr-tiles .nav-link:hover { background: #1c1c1c; color: #fff; border-color: #777; }
.hdr-tiles .nav-link.is-active { border-color: var(--c-accent); }
.hdr-tiles .nav-link.is-active::after { left: 10px; right: auto; width: 18px; bottom: 6px; }
.hdr-tiles .mobile-nav > summary { border-color: #444; }
.hdr-tiles .mobile-nav > summary span { background: #eee; }
.hdr-tiles .mobile-nav > nav { color: var(--c-text); }

/* bigtype — Sagmeister & Walsh: huge bold links, as big as the name */
.hdr-bigtype .site-header { position: fixed; left: 0; right: 0; top: 0; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--c-text); transition: background .4s, color .4s; }
.hdr-bigtype.hdr-bleed .site-header:not(.is-solid) { color: #fff; }
.hdr-bigtype .site-header.is-solid { background: var(--c-bg); }
.hdr-bigtype .header-inner { min-height: 96px; max-width: none; padding-inline: clamp(16px, 2.5vw, 36px); }
.hdr-bigtype .brand-mark { display: none; }
.hdr-bigtype .brand-text strong { font: 800 clamp(1.4rem, 2.6vw, 2.4rem)/1 var(--font-heading); text-transform: uppercase; letter-spacing: -.02em; }
.hdr-bigtype .brand-text small { display: none; }
.hdr-bigtype .main-nav { gap: clamp(10px, 1.6vw, 26px); }
.hdr-bigtype .nav-link { color: inherit; font: 800 clamp(1rem, 1.7vw, 1.7rem)/1 var(--font-heading); text-transform: uppercase; letter-spacing: -.01em; padding: 4px 0; border-radius: 0; }
.hdr-bigtype .nav-link:hover { background: none; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.hdr-bigtype .nav-link.is-active::after { left: 0; right: 0; bottom: -4px; height: 4px; border-radius: 0; background: currentColor; }
.hdr-bigtype .mobile-nav > summary { border-color: currentColor; }
.hdr-bigtype .mobile-nav > summary span { background: currentColor; }
.hdr-bigtype .mobile-nav > nav { color: var(--c-text); }

/* bracket — DIA: faded words in the middle, the current one dark, [ brackets ] on the last */
.hdr-bracket .site-header { background: var(--c-bg); border: 0; }
.hdr-bracket .header-inner { min-height: 58px; max-width: none; padding-inline: clamp(16px, 2.5vw, 32px); }
.hdr-bracket .brand { margin-right: 0; flex: 1; }
.hdr-bracket .brand-mark { display: none; }
.hdr-bracket .brand-text small { display: none; }
.hdr-bracket .brand-text strong { font: 500 .95rem/1 var(--font-heading); }
.hdr-bracket .main-nav { gap: 2px; }
.hdr-bracket .nav-link { font: 400 .95rem/1 var(--font-heading); color: color-mix(in srgb, var(--c-text) 42%, transparent); padding: 6px 7px; }
.hdr-bracket .nav-link:hover { background: none; color: var(--c-text); }
.hdr-bracket .nav-link.is-active { color: var(--c-text); }
.hdr-bracket .nav-link.is-active::after { display: none; }
.hdr-bracket .main-nav .nav-link:last-child { color: var(--c-text); }
.hdr-bracket .main-nav .nav-link:last-child::before { content: '[ '; }
.hdr-bracket .main-nav .nav-link:last-child::after { content: ' ]'; position: static; display: inline; background: none; height: auto; }
.hdr-bracket .header-inner > .account { flex: 1; justify-content: flex-end; }

/* masthead — Edward Tufte: a big title band, a full-width row of caps links under it */
.hdr-masthead .site-header { position: relative; background: var(--c-bg); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-masthead .header-inner { flex-wrap: wrap; padding-top: 18px; gap: 6px 20px; }
.hdr-masthead .brand { flex: 1 1 auto; }
.hdr-masthead .brand-mark { display: none; }
.hdr-masthead .brand-text strong { font: 500 clamp(1.4rem, 2.4vw, 2.1rem)/1.05 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; color: var(--c-primary); white-space: normal; }
.hdr-masthead .brand-text small { color: var(--c-primary); text-transform: none; letter-spacing: .02em; font-size: .9rem; }
.hdr-masthead .main-nav { order: 5; flex: 1 1 100%; justify-content: space-between; padding: 10px 0 12px; }
.hdr-masthead .nav-link { font: 500 .74rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text); padding: 6px 2px; }
.hdr-masthead .nav-link:hover { background: none; color: var(--c-primary); }
.hdr-masthead .nav-link.is-active { color: var(--c-primary); }
.hdr-masthead .nav-link.is-active::after { left: 2px; right: 2px; bottom: -2px; height: 1px; }
/* underline: small serif name left, spaced grey caps links right, the current one dark and underlined (andrewng.org). */
.hdr-underline .site-header { background: var(--c-bg); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-underline .brand-mark { display: none; }
.hdr-underline .brand-text strong { font: 400 1.15rem/1 var(--font-heading); letter-spacing: -.02em; color: var(--c-text); }
.hdr-underline .brand-text small { display: none; }
.hdr-underline .main-nav { margin-left: auto; gap: 22px; }
.hdr-underline .nav-link { padding: 6px 0; font: 400 .8rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); border-radius: 0; }
.hdr-underline .nav-link:hover { background: none; color: var(--c-text); }
.hdr-underline .nav-link.is-active { color: var(--c-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.hdr-underline .nav-link.is-active::after { display: none; }
/* ruled: large italic name centred, a row of caps links between two coloured rules (sheenachoward.com). */
.hdr-ruled .site-header { position: relative; background: var(--c-bg); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-ruled .header-inner { flex-wrap: wrap; justify-content: center; padding-top: 18px; gap: 0; }
.hdr-ruled .brand { flex: 1 1 100%; justify-content: center; margin: 0 0 14px; }
.hdr-ruled .brand-mark { display: none; }
.hdr-ruled .brand-text { align-items: center; }
.hdr-ruled .brand-text strong { font: italic 700 clamp(1.7rem, 3.2vw, 2.7rem)/1.05 var(--font-heading); color: var(--c-text); }
.hdr-ruled .brand-text small { display: none; }
.hdr-ruled .main-nav { order: 5; flex: 1 1 100%; justify-content: center; gap: 30px; padding: 12px 0; border-top: 2px solid var(--c-primary); border-bottom: 2px solid var(--c-primary); }
.hdr-ruled .nav-link { padding: 4px 2px; font: 600 .76rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text); border-radius: 0; }
.hdr-ruled .nav-link:hover { background: none; color: var(--c-primary); }
.hdr-ruled .nav-link.is-active { color: var(--c-primary); }
.hdr-ruled .nav-link.is-active::after { display: none; }

/* band — Robin Sloan: a thin coloured strip with small centred links; the page is a sheet on that colour */
.hdr-band { background: var(--c-primary); }
.hdr-band .site-header { position: relative; background: var(--c-primary); color: #fff; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-band .header-inner { min-height: 40px; justify-content: center; }
.hdr-band .brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hdr-band .main-nav { gap: 6px; }
.hdr-band .nav-link { color: #fff; font-size: .84rem; padding: 6px 10px; opacity: .92; }
.hdr-band .nav-link:hover { background: rgba(255,255,255,.14); }
.hdr-band .nav-link.is-active::after { background: #fff; height: 1px; }
.hdr-band .header-inner > .account { position: absolute; right: 16px; }
.hdr-band main, .hdr-band .site-footer { background: var(--c-bg); margin-inline: clamp(8px, 1.4vw, 18px); }
.hdr-band main { border-radius: 4px 4px 0 0; }
.hdr-band .site-footer { margin-bottom: clamp(8px, 1.4vw, 18px); border-radius: 0 0 4px 4px; }
.hdr-band .mobile-nav > summary { border-color: rgba(255,255,255,.5); width: 36px; height: 32px; }
.hdr-band .mobile-nav > summary span { background: #fff; }
@media (max-width: 1180px) { .hdr-band .brand { position: static; width: auto; height: auto; clip: auto; margin-right: auto; color: #fff; } .hdr-band .brand-mark { display: none; } .hdr-band .header-inner { justify-content: space-between; } }

/* columns — Tobias van Schneider: a logo block, links in columns with a ✣ bullet */
.hdr-columns .site-header { position: absolute; left: 0; right: 0; top: 0; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-columns .header-inner { align-items: flex-start; padding-top: 22px; max-width: none; padding-inline: clamp(16px, 2.5vw, 34px); }
.hdr-columns .brand { background: var(--c-accent); color: #fff; padding: 12px 22px; border-radius: 4px; }
.hdr-columns .brand-mark { display: none; }
.hdr-columns.hdr-bleed .site-header, .theme-dark.hdr-columns .site-header { color: #fff; }
.hdr-columns .brand-text strong { white-space: nowrap; font: 400 1.4rem/1 var(--font-heading); letter-spacing: .02em; text-transform: uppercase; }
.hdr-columns .brand-text small { display: none; }
@media (min-width: 1181px) { .hdr-columns .main-nav { display: grid; } }
.hdr-columns .main-nav { grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: clamp(24px, 3.5vw, 56px); row-gap: 0; }
.hdr-columns .nav-link { padding: 2px 0; font: 500 .9rem/1.3 var(--font-body); color: inherit; opacity: .92; }
.hdr-columns .nav-link::before { content: '✣ '; position: static; transform: none; background: none; height: auto; }
.hdr-columns .nav-link:hover { background: none; opacity: 1; text-decoration: underline; }
.hdr-columns .nav-link.is-active::after { display: none; }
.hdr-columns .nav-link.is-active { color: var(--c-accent); }
@media (max-width: 1180px) { .hdr-columns .header-inner { align-items: center; } }

/* ledger — Craig Mod: a round badge, links in stacked columns of faint caps */
.hdr-ledger .site-header { position: relative; background: var(--c-bg); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-ledger .header-inner { min-height: 116px; align-items: center; gap: clamp(30px, 8vw, 140px); border-bottom: 1px solid var(--line); }
.hdr-ledger .brand { margin-right: 0; }
.hdr-ledger .brand-mark { width: 70px; height: 70px; font: 700 1.6rem/1 var(--font-body); background: color-mix(in srgb, var(--c-text) 10%, var(--c-bg)); color: var(--c-bg); }
.hdr-ledger .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 1181px) { .hdr-ledger .main-nav { display: grid; } }
.hdr-ledger .main-nav { grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: clamp(30px, 8vw, 150px); flex: 1; }
.hdr-ledger .nav-link { padding: 3px 0; font: 700 .76rem/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c-muted) 70%, var(--c-bg)); }
.hdr-ledger .nav-link:hover { background: none; color: var(--c-text); }
.hdr-ledger .nav-link.is-active { color: var(--c-text); }
.hdr-ledger .nav-link.is-active::after { display: none; }
.hdr-ledger.hdr-bleed main { padding-top: 0; }

/* sidebar — Brittany Chiang: a fixed column with the name and links that carry a line marker */
@media (min-width: 1181px) {
  .hdr-sidebar { padding-inline-start: 340px; }
  .hdr-sidebar .site-header { width: 340px; border-right: 0; background: var(--c-bg); }
  .hdr-sidebar .header-inner { padding: 72px 28px 40px 48px; gap: 30px; }
  .hdr-sidebar .brand-mark { display: none; }
  .hdr-sidebar .brand-text strong { font: 700 2.2rem/1.05 var(--font-heading); letter-spacing: -.02em; }
  .hdr-sidebar .brand-text small { font: 500 1rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; margin-top: 10px; color: var(--c-text); }
  .hdr-sidebar .main-nav { gap: 0; margin-top: 36px; }
  .hdr-sidebar .nav-link { display: flex; align-items: center; gap: 14px; padding: 9px 0; font: 700 .7rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
  .hdr-sidebar .nav-link::before { content: ''; position: static; width: 32px; height: 1px; background: currentColor; transform: none; transition: width .3s; }
  .hdr-sidebar .nav-link:hover, .hdr-sidebar .nav-link.is-active { color: var(--c-text); background: none; }
  .hdr-sidebar .nav-link:hover::before, .hdr-sidebar .nav-link.is-active::before { width: 64px; }
  .hdr-sidebar .nav-link.is-active::after { display: none; }
}

/* rail-left — REAS: a narrow fixed mono index at the left edge */
@media (min-width: 1181px) {
  .hdr-rail-left { padding-inline-start: 210px; }
  .hdr-rail-left .site-header { position: fixed; inset: 0 auto 0 0; width: 210px; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hdr-rail-left .header-inner { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: 14px 16px; gap: 22px; overflow: auto; }
  .hdr-rail-left .brand-mark { display: none; }
  .hdr-rail-left .brand-text strong { font: 700 1.5rem/1 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; }
  .hdr-rail-left .brand-text small { text-transform: none; letter-spacing: 0; font: 400 .8rem/1.3 var(--font-heading); }
  .hdr-rail-left .main-nav { display: flex; flex-direction: column; gap: 0; }
  .hdr-rail-left .nav-link { padding: 0; font: 400 .95rem/1.32 var(--font-heading); color: var(--c-text); border-radius: 0; }
  .hdr-rail-left .nav-link:hover { background: none; color: var(--c-primary); }
  .hdr-rail-left .nav-link.is-active { color: var(--c-primary); }
  .hdr-rail-left .nav-link.is-active::after { display: none; }
  .hdr-rail-left .nav-link.is-active::before { content: '▸ '; position: static; }
  .hdr-rail-left .account { margin-top: auto; }
  .hdr-rail-left .hdr-aux { display: block; font: 400 .66rem/1 var(--font-heading); text-transform: uppercase; }
  .hdr-rail-left .hdr-line, .hdr-rail-left .hdr-ruler { display: none; }
  .hdr-rail-left .acct-pop { right: auto; left: 0; top: auto; bottom: calc(100% + 8px); }
  .hdr-rail-left .main-nav, .hdr-rail-left .mobile-nav { }
}
@media (min-width: 1181px) { .hdr-rail-left .main-nav { display: flex; } .hdr-rail-left .mobile-nav { display: none; } }

/* rail-right — gwern.net: a vertical strip fixed on the right edge, links turned sideways */
@media (min-width: 1181px) {
  .hdr-rail-right { padding-inline-end: 64px; }
  .hdr-rail-right .site-header { position: fixed; inset: 0 0 0 auto; width: 64px; border: 0; border-left: 1px solid var(--line); background: var(--c-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hdr-rail-right .header-inner { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 16px 0; gap: 18px; }
  .hdr-rail-right .brand { margin: 0; }
  .hdr-rail-right .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hdr-rail-right .main-nav { display: flex; flex-direction: column; gap: 4px; writing-mode: vertical-rl; }
  .hdr-rail-right .nav-link { padding: 12px 6px; font: 600 .76rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; border-radius: 8px; }
  .hdr-rail-right .nav-link.is-active { background: var(--c-text); color: var(--c-bg); }
  .hdr-rail-right .nav-link.is-active::after { display: none; }
  .hdr-rail-right .account { margin-top: auto; flex-direction: column; }
  .hdr-rail-right .lang-switch { flex-direction: column; margin: 0; }
  .hdr-rail-right .acct-pop { right: calc(100% + 10px); top: auto; bottom: 0; }
  .hdr-rail-right .main-nav { display: flex; } .hdr-rail-right .mobile-nav { display: none; }
}

/* cluster — Yuval Noah Harari: links right after the name, the rest pushed right */
.hdr-cluster .brand { margin-right: 36px; }
.hdr-cluster .main-nav { margin-right: auto; gap: 6px; }
.hdr-cluster .nav-link { color: var(--c-text); font-size: 1rem; font-weight: 400; }
.hdr-cluster .brand-text strong { color: var(--c-accent); font-weight: 500; }
.hdr-cluster .nav-link.is-active::after { background: var(--c-text); height: 1px; }

/* cta — Ayana Elizabeth Johnson: a dash and initials, caps links, a pill button last */
.hdr-cta .site-header { background: var(--c-bg); border: 0; }
.hdr-cta .brand-mark { display: none; }
.hdr-cta .brand-text strong { font: 800 1.05rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.hdr-cta .brand-text strong::before { content: '— '; }
.hdr-cta .brand-text small { display: none; }
.hdr-cta .nav-link { font: 500 .7rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-text); }
.hdr-cta .main-nav .nav-link:last-child { background: var(--c-accent); color: var(--c-text); border-radius: 999px; padding: 10px 18px; margin-left: 10px; font-weight: 700; }
.hdr-cta .main-nav .nav-link:last-child::after { display: none; }

/* phones: every bar keeps the name and a menu button; the dock, the pill and the corner button keep their place */
@media (max-width: 760px) {
  :is(.hdr-stack, .hdr-frame, .hdr-corners) .brand-text strong { font-size: 1.15rem; }
  .hdr-frame .hdr-aux { display: none; }
  .hdr-tiles .header-inner, .hdr-bigtype .header-inner { min-height: 64px; }
  .hdr-ledger .header-inner { min-height: 76px; } .hdr-ledger .brand-mark { width: 48px; height: 48px; font-size: 1.1rem; }
  .hdr-columns .brand { padding: 8px 14px; } .hdr-columns .brand-text strong { font-size: 1.05rem; }
  .hdr-masthead .brand-text strong { font-size: 1.15rem; }
  .hdr-ruled .header-inner { flex-wrap: nowrap; justify-content: space-between; padding-top: 0; } .hdr-ruled .brand { flex: 0 1 auto; margin: 0; } .hdr-ruled .brand-text strong { font-size: 1.35rem; }
  .hdr-pill .site-header { top: 10px; }
}
/* the menu button panel of the floating menus opens below their own bar */
:is(.hdr-stack, .hdr-frame, .hdr-corners) .mobile-nav > nav { color: var(--c-text); }

/* =============================================================
   Hero frame "hex": a portrait in a hexagon with a net of points
   ============================================================= */
.frame-hex.hero-split { grid-template-columns: 1.05fr .95fr; align-items: center; }
.frame-hex .hero-title { font-size: clamp(2.8rem, 6.4vw, 6.4rem); line-height: .92; letter-spacing: -.035em; }
.frame-hex .eyebrow { font-family: var(--font-body); letter-spacing: .3em; }
.frame-hex .hero-photos { aspect-ratio: .88; max-width: min(520px, calc((100svh - 190px) * .88)); width: 100%; justify-self: end; }
.frame-hex .ph-main { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: 1; }
.frame-hex .ph-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.frame-hex .hero-photos::before { content: ''; position: absolute; inset: -9% -12%; z-index: 0; background-image: radial-gradient(circle, var(--c-accent) 1.6px, transparent 2px); background-size: 26px 30px; opacity: .55; -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.frame-hex .hero-photos::after { content: ''; position: absolute; z-index: 2; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 0 25%, 3% 26.5%, 3% 73.5%, 50% 96.5%, 97% 73.5%, 97% 26.5%, 50% 3.5%, 3% 26.5%, 0 25%); background: var(--c-accent); opacity: .9; pointer-events: none; }
.frame-hex .ph-small { position: absolute; z-index: 3; width: 34%; aspect-ratio: 1; left: -8%; bottom: 4%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: 0; box-shadow: none; }
.frame-hex .float-badge { z-index: 4; }
@media (max-width: 900px) {
  .frame-hex.hero-split { grid-template-columns: 1fr; min-height: 0; gap: 18px; }
  .frame-hex .hero-photos { order: -1; max-width: 300px; justify-self: center; }
  .frame-hex .hero-title { font-size: clamp(2.4rem, 11vw, 3.6rem); }
}

/* =============================================================
   Effects added with theme.fx (one class fx-<key> on <body> each)
   ============================================================= */
.fx-canvas { position: absolute; z-index: 0; pointer-events: none; }
.has-fx-canvas { position: relative; isolation: isolate; }
.has-fx-canvas > :not(.fx-canvas) { position: relative; z-index: 1; }
/* bounce */
.anim-ready .fx-bounce .bnc { opacity: 0; transform: translateY(46px) scale(.7); transition: opacity .5s ease calc(var(--i, 0) * 90ms), transform .9s cubic-bezier(.34,1.7,.5,1) calc(var(--i, 0) * 90ms); }
.anim-ready .fx-bounce .is-in .bnc { opacity: 1; transform: none; }
/* tile-pop: grid tiles pop in one by one with a small overshoot. */
.anim-ready .fx-tile-pop .tpp { opacity: 0; transform: scale(.82); transition: opacity .45s ease calc(var(--i, 0) * 80ms), transform .7s cubic-bezier(.34,1.45,.5,1) calc(var(--i, 0) * 80ms); }
.anim-ready .fx-tile-pop .is-in .tpp { opacity: 1; transform: none; }
/* band-slide: full-width colour bands slide in from alternating sides. */
.fx-band-slide main { overflow-x: clip; }
.anim-ready .fx-band-slide .page-section.bsl { opacity: 0; transform: translateX(calc(var(--dir, 1) * 8%)); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.75,.2,1); }
.anim-ready .fx-band-slide .page-section.bsl.is-in { opacity: 1; transform: none; }
/* tab-slide: the caption tab of a picture card slides up and fills with the main colour on hover. */
.fx-tab-slide .card .card-body { transition: transform .4s cubic-bezier(.2,.7,.2,1), background-color .4s ease, color .4s ease; }
.fx-tab-slide .card:hover .card-body { transform: translateY(-8px); background: var(--c-primary); color: #fff; }
.fx-tab-slide .card:hover .card-body :is(h3, p, small, .meta) { color: inherit; }
/* wiggle */
.fx-wiggle .card:hover, .fx-wiggle main .btn:hover, .fx-wiggle .feature:hover { animation: wiggle .5s ease-in-out; }
@keyframes wiggle { 0%,100% { rotate: 0deg; } 20% { rotate: -2.5deg; } 45% { rotate: 2deg; } 70% { rotate: -1deg; } }
/* sparkle */
.sparkly { position: relative; }
.spk { position: absolute; z-index: 2; translate: -50% -50%; pointer-events: none; animation: spk .9s ease-in-out forwards; }
.spk svg { width: 100%; height: 100%; display: block; }
@keyframes spk { 0% { transform: scale(0) rotate(0); } 50% { transform: scale(1) rotate(90deg); } 100% { transform: scale(0) rotate(180deg); } }
/* boop */
.fx-boop :is(.feat-icon, .link-arrow, .btn, .brand-mark, .ss-nav, .sc-prev, .sc-next) { transition: transform .5s cubic-bezier(.3,1.8,.4,1); }
.fx-boop .is-booped { transform: rotate(10deg) scale(1.12); transition-duration: .12s; }
/* iris */
.iris { clip-path: circle(var(--iris, 78%) at 50% 50%); animation: iris-in 1.8s cubic-bezier(.7,0,.2,1) .2s both; }
@keyframes iris-in { from { clip-path: circle(0% at 50% 50%); } }
/* focus-pull */
.fp { transition: filter .25s linear; will-change: filter; }
/* glitch */
.gl { overflow: hidden; }
.gl img { opacity: 0; }
.gl.gl-in img { animation: gl-in 1s steps(1) forwards; }
@keyframes gl-in {
  0% { opacity: 1; clip-path: inset(0 0 88% 0); transform: translateX(-14px); filter: drop-shadow(8px 0 #ff2a6d) drop-shadow(-8px 0 #05d9e8); }
  12% { clip-path: inset(30% 0 46% 0); transform: translateX(16px); }
  24% { clip-path: inset(62% 0 8% 0); transform: translateX(-8px); }
  36% { clip-path: inset(10% 0 52% 0); transform: translateX(10px); filter: drop-shadow(5px 0 #ff2a6d) drop-shadow(-5px 0 #05d9e8); }
  48% { clip-path: inset(0 0 30% 0); transform: translateX(-4px); }
  62% { clip-path: inset(18% 0 0 0); transform: translateX(3px); filter: drop-shadow(2px 0 #ff2a6d) drop-shadow(-2px 0 #05d9e8); }
  76%, 100% { opacity: 1; clip-path: inset(0); transform: none; filter: none; }
}
/* flowfield */
.fx-flow { inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: .8; }
/* paper-tear */
.page-section.torn { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 16V9l6-4 7 5 6-7 8 6 5-5 9 7 6-6 7 4 8-7 6 6 7-3 6 5 8-6 7 5 5-4 8 6 6-5V16z'/%3E%3C/svg%3E") top left / 120px 16px repeat-x, linear-gradient(#000, #000) 0 15px / 100% calc(100% - 15px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 16V9l6-4 7 5 6-7 8 6 5-5 9 7 6-6 7 4 8-7 6 6 7-3 6 5 8-6 7 5 5-4 8 6 6-5V16z'/%3E%3C/svg%3E") top left / 120px 16px repeat-x, linear-gradient(#000, #000) 0 15px / 100% calc(100% - 15px) no-repeat; }
.anim-ready .page-section.torn { transform: translateY(46px) rotate(-.6deg); opacity: .001; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.anim-ready .page-section.torn.is-in { transform: none; opacity: 1; }
/* ink-underline */
.ink { position: relative; text-decoration: none; }
.ink::after { content: ''; position: absolute; left: 0; bottom: -7px; height: 8px; width: 100%; background: var(--c-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4c4-4 8-4 12 0s8 4 12 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") left center / 24px 8px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4c4-4 8-4 12 0s8 4 12 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") left center / 24px 8px repeat-x; clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.6,0,.2,1); pointer-events: none; }
.ink:hover::after, .ink.is-active::after { clip-path: inset(0 0 0 0); }
.nav-link.ink.is-active::after { left: 0; right: auto; bottom: -2px; height: 8px; border-radius: 0; }
/* magnet-cursor */
.has-magnet main :is(.card-img, .mt-img, .gallery figure, .hero-wide, .ph-main) { cursor: none; }
.mg-disc { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: var(--c-text); display: grid; place-items: center; transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), margin .35s cubic-bezier(.2,.8,.2,1), background .3s, opacity .3s; }
.mg-disc span { color: var(--c-bg); font: 600 .9rem/1 var(--font-body); opacity: 0; transition: opacity .2s; }
.mg-disc.is-view { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
.mg-disc.is-view span { opacity: 1; }
.mg-disc.is-grab { width: var(--gw, 48px); height: var(--gh, 48px); margin: calc(var(--gh, 48px) / -2) 0 0 calc(var(--gw, 48px) / -2); background: transparent; border: 1.5px solid var(--c-text); }
/* hover-marquee */
.hm { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 3; overflow: hidden; background: var(--c-accent); color: #fff; padding: 10px 0; pointer-events: none; opacity: 0; transform: scaleY(0); transition: opacity .3s, transform .45s cubic-bezier(.2,.8,.2,1); }
.hm span { display: inline-block; white-space: nowrap; font: 600 1.05rem/1 var(--font-heading); letter-spacing: -.01em; animation: hm 9s linear infinite; }
.card:hover .hm { opacity: 1; transform: none; }
@keyframes hm { to { transform: translateX(-50%); } }
/* starfield */
.fx-stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .9; }
/* flashlight */
.flashlit { position: relative; }
.flashlit::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle 360px at var(--fx, 50%) var(--fy, 50%), transparent 0, transparent 45%, rgba(0,0,0,.42) 100%); opacity: 0; transition: opacity .6s; }
.flashlit.is-lit::after { opacity: 1; }
/* sticker */
.anim-ready .stk { opacity: 0; transform: scale(.6) rotate(calc(var(--r) * -6)); transition: opacity .3s, transform .8s cubic-bezier(.3,1.6,.5,1); }
.anim-ready .stk.is-on { opacity: 1; transform: rotate(var(--r)); }
.stk.is-on:hover { animation: stk-wobble .6s ease-in-out; box-shadow: 0 22px 40px -22px rgba(0,0,0,.5); }
@keyframes stk-wobble { 0%,100% { transform: rotate(var(--r)) scale(1.02); } 30% { transform: rotate(calc(var(--r) - 3deg)) scale(1.04); } 60% { transform: rotate(calc(var(--r) + 2deg)) scale(1.03); } }
/* confetti */
.cf { position: fixed; left: 0; top: 0; z-index: 400; width: 8px; height: 12px; margin: -6px 0 0 -4px; pointer-events: none; border-radius: 1px; }
/* doodle */
.doodled { position: relative; display: inline-block; }
.doodled .dd { position: absolute; left: -10%; top: -16%; width: 120%; height: 135%; color: var(--c-accent); overflow: visible; pointer-events: none; }
.doodled .dd path { stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.3s cubic-bezier(.6,0,.2,1) .2s; }
.doodled.is-drawn .dd path { stroke-dashoffset: 0; }
/* blinds */
.blinds { position: absolute; inset: 0; z-index: 4; display: flex; pointer-events: none; }
.blinds i { flex: 1; background: #0b0b0b; transform-origin: left; animation: blind 1.1s cubic-bezier(.7,0,.2,1) calc(.35s + var(--b) * 70ms) forwards; }
@keyframes blind { to { transform: scaleX(0); } }
/* typewriter */
.tw-caret { display: inline-block; width: .08em; height: .9em; margin-left: .06em; background: currentColor; vertical-align: -.08em; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* constellation */
.fx-net { left: -15%; top: -10%; width: 130%; height: 120%; }
/* odometer */
.odo { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.odo-r { display: block; white-space: pre; transform: translateY(0); transition: transform 1.6s cubic-bezier(.2,.9,.2,1) calc(var(--k) * 110ms); }
.is-rolled .odo-r { transform: translateY(calc(var(--d) * -1em)); }
/* gold-shine */
.gs { background: linear-gradient(110deg, currentColor 0 42%, #f6dd8a 48%, #c99a2e 52%, currentColor 58% 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gs.is-in { animation: gs 2.4s cubic-bezier(.6,0,.2,1) .4s both, gs 2.4s cubic-bezier(.6,0,.2,1) 7s infinite; }
@keyframes gs { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.gs-card { position: relative; overflow: hidden; }
.gs-card::before { content: ''; position: absolute; inset: -40% -60%; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(246,221,138,.55) 49%, rgba(201,154,46,.35) 52%, transparent 60%); transform: translateX(-60%); transition: transform 1s cubic-bezier(.6,0,.2,1); }
.gs-card:hover::before { transform: translateX(60%); }
@media (prefers-reduced-motion: reduce) {
  .iris, .gl img, .blinds, .anim-ready .stk, .anim-ready .page-section.torn, .anim-ready .fx-bounce .bnc, .anim-ready .fx-tile-pop .tpp, .anim-ready .fx-band-slide .page-section.bsl { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fx-canvas, .fx-stars, .mg-disc, .hm, .spk, .cf { display: none !important; }
  .gs { -webkit-text-fill-color: currentColor; background: none; }
}
@media (hover: none) { .mg-disc, .fx-stars { display: none; } }

.fx-em { display: inline-block; }
.has-fp-bg { background-image: none !important; isolation: isolate; }
.fp-bg { position: absolute; inset: -12px; z-index: -1; background-size: cover; background-position: center; pointer-events: none; }
.has-fp-bg.has-bg-img::before { z-index: 0; }

/* =============================================================
   Opening animations (one per burst theme, see blueprint theme::OPENERS)
   ============================================================= */
.burst-curtain.is-out { transform: translateY(-100%); }
.op { position: fixed; inset: 0; z-index: 500; overflow: hidden; cursor: pointer; }
.op-on { overflow: hidden; }
/* collage — photos fly in around the name, then the sheet lifts */
.op-collage { background: var(--c-bg); display: grid; place-items: center; transition: transform .9s cubic-bezier(.7,0,.2,1), border-radius .9s; }
.op-collage.is-out { transform: translateY(-104%) rotate(-2deg); border-radius: 0 0 40% 40% / 0 0 12% 12%; }
.opc-name { position: relative; z-index: 3; max-width: 70vw; text-align: center; font: 700 clamp(2.2rem, 6.4vw, 5.6rem)/1 var(--font-heading); letter-spacing: -.02em; color: var(--c-text); background: var(--c-bg); padding: .2em .4em; animation: opc-name 1s cubic-bezier(.2,.8,.2,1) .25s both; }
@keyframes opc-name { from { opacity: 0; transform: scale(.9); letter-spacing: .1em; } }
.opc-ph { position: absolute; z-index: 2; margin: 0; width: clamp(130px, 17vw, 250px); aspect-ratio: 4 / 5; background: #fff; padding: 8px 8px 26px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); animation: opc-in 1.1s cubic-bezier(.2,.9,.25,1.15) var(--d) both; }
.opc-ph img { width: 100%; height: 100%; object-fit: cover; }
.opc-0 { left: 8%; top: 10%; --r: -8deg; --fx: -60vw; --fy: -20vh; }
.opc-1 { right: 9%; top: 8%; --r: 6deg; --fx: 60vw; --fy: -30vh; }
.opc-2 { left: 14%; bottom: 7%; --r: 5deg; --fx: -50vw; --fy: 40vh; }
.opc-3 { right: 13%; bottom: 9%; --r: -5deg; --fx: 50vw; --fy: 40vh; }
.opc-4 { left: 42%; top: 3%; --r: 2deg; --fx: 0; --fy: -70vh; width: clamp(100px, 12vw, 170px); }
@keyframes opc-in { from { transform: translate(var(--fx), var(--fy)) rotate(calc(var(--r) * 6)); opacity: 0; } to { transform: rotate(var(--r)); opacity: 1; } }
/* hex — a hexagon draws, numbers fly out, the hexagon closes onto the page */
.op-hex { background: var(--c-bg); display: grid; place-items: center; clip-path: polygon(50% -60%, 160% 20%, 160% 80%, 50% 160%, -60% 80%, -60% 20%); transition: clip-path .9s cubic-bezier(.7,0,.2,1); }
.op-hex.is-out { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }
.oph-hex { position: absolute; width: min(56vmin, 460px); height: auto; overflow: visible; }
.oph-hex polygon { fill: none; stroke: var(--c-accent); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: oph-draw 1.1s cubic-bezier(.6,0,.2,1) .1s forwards; }
@keyframes oph-draw { to { stroke-dashoffset: 0; } }
.oph-name { position: relative; max-width: min(46vmin, 380px); text-align: center; font: 900 clamp(1.6rem, 4.6vmin, 3rem)/1 var(--font-heading); letter-spacing: -.03em; color: var(--c-text); animation: opc-name .8s cubic-bezier(.2,.8,.2,1) .6s both; }
.oph-bit { position: absolute; left: 50%; top: 50%; padding: 8px 16px; border-radius: 999px; background: var(--c-primary); color: #fff; font: 700 .95rem/1 var(--font-body); white-space: nowrap; opacity: 0; animation: oph-bit .9s cubic-bezier(.2,.9,.3,1.2) var(--d) forwards; }
@keyframes oph-bit { from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) rotate(calc(var(--a) * -1)) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(min(36vmin, 300px)) rotate(calc(var(--a) * -1)); } }
/* marquee — rows of the name race across, then the panel slides up */
.op-marquee { background: var(--c-text); color: var(--c-bg); display: flex; flex-direction: column; justify-content: center; gap: 0; transition: transform .8s cubic-bezier(.7,0,.2,1), border-radius .8s; }
.op-marquee.is-out { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 30% 30%; }
.opm-row { white-space: nowrap; font: 800 clamp(3rem, 11vw, 9rem)/1 var(--font-heading); letter-spacing: -.04em; text-transform: uppercase; }
.opm-row span { display: inline-block; animation: opm 2.4s linear both; }
.opm-row.is-rev span { animation-direction: reverse; }
.opm-row:nth-child(2n) { -webkit-text-stroke: 1.5px var(--c-bg); color: transparent; }
@keyframes opm { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* stars — points gather into the name */
.op-stars { background: #04050a; transition: opacity .9s; }
.op-stars.is-out { opacity: 0; }
.op-stars canvas { width: 100%; height: 100%; display: block; }
/* noise — flickering signs resolve into the name, then slices split away */
.op-noise { background: #000; color: #fff; display: grid; place-items: center; }
.opn-grid { position: absolute; inset: 0; font: 400 14px/22px var(--font-heading), monospace; color: rgba(255,255,255,.22); word-break: break-all; overflow: hidden; }
.opn-name { position: relative; background: #000; padding: .15em .35em; font: 500 clamp(1.6rem, 4.6vw, 3.6rem)/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; border: 1px solid #fff; }
.opn-slice { display: none; }
.op-noise.is-out { background: transparent; }
.op-noise.is-out > :not(.opn-slice) { display: none; }
.op-noise.is-out .opn-slice { display: block; position: absolute; left: 0; right: 0; height: calc(100% / 6 + 1px); top: calc(var(--i) * 100% / 6); background: #000; animation: opn-split .7s cubic-bezier(.7,0,.2,1) calc(var(--i) * 40ms) forwards; }
.op-noise.is-out .opn-slice:nth-child(odd) { animation-name: opn-split-r; }
@keyframes opn-split { to { transform: translateX(-102%); } }
@keyframes opn-split-r { to { transform: translateX(102%); } }
/* paper — coloured sheets peel away one after another */
.op-paper { pointer-events: auto; }
.opp-sheet { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 0 0; }
.opp-b { background: var(--c-bg); } .opp-a { background: var(--c-accent); } .opp-p { background: var(--c-primary); color: #fff; }
.opp-p span { font: 800 clamp(2.4rem, 7vw, 6rem)/1 var(--font-heading); letter-spacing: -.02em; max-width: 80vw; text-align: center; transform: rotate(-3deg); animation: opp-pop .8s cubic-bezier(.3,1.6,.5,1) .15s both; }
@keyframes opp-pop { from { transform: rotate(-12deg) scale(.5); opacity: 0; } }
.op-paper.is-out .opp-sheet { animation: opp-peel .75s cubic-bezier(.7,0,.25,1) calc((2 - var(--i)) * 160ms) forwards; }
@keyframes opp-peel { to { transform: translate(-10%, -115%) rotate(-14deg); } }
.op-paper.is-out { pointer-events: none; }
/* leader — film countdown 3-2-1, a flash, then the name */
.op-leader { background: #1b1b1b; display: grid; place-items: center; transition: opacity .8s; }
.op-leader.is-out { opacity: 0; }
.opl-dial { position: relative; width: min(64vmin, 520px); aspect-ratio: 1; border-radius: 50%; border: 3px solid #d9d9d9; display: grid; place-items: center; overflow: hidden; animation: opl-hide 0s 1.65s forwards; }
.opl-sweep { position: absolute; inset: 0; background: conic-gradient(rgba(255,255,255,.22) var(--s, 0deg), transparent 0); animation: opl-sweep .55s linear 3; }
@property --s { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes opl-sweep { to { --s: 360deg; } }
.opl-cross { position: absolute; inset: 0; background: linear-gradient(#d9d9d9, #d9d9d9) center / 2px 100% no-repeat, linear-gradient(#d9d9d9, #d9d9d9) center / 100% 2px no-repeat; opacity: .6; }
.opl-dial b { position: absolute; font: 700 min(34vmin, 280px)/1 var(--font-heading); color: #eee; opacity: 0; }
.opl-dial b:nth-of-type(1) { animation: opl-n .55s steps(1) 0s; } .opl-dial b:nth-of-type(2) { animation: opl-n .55s steps(1) .55s; } .opl-dial b:nth-of-type(3) { animation: opl-n .55s steps(1) 1.1s; }
@keyframes opl-n { 0% { opacity: 1; } 100% { opacity: 1; } }
@keyframes opl-hide { to { opacity: 0; } }
.opl-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: opl-flash .5s ease-out 1.65s; }
@keyframes opl-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.opl-name { position: absolute; color: #fff; font: 200 clamp(2.2rem, 7vw, 6rem)/1 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; opacity: 0; animation: opc-name .8s ease 1.75s both; animation-name: opl-name; }
@keyframes opl-name { from { opacity: 0; letter-spacing: .4em; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .op, .burst-curtain { display: none !important; } }

/* logos in the menus that draw their own mark */
.hdr-ledger .brand-logo { height: 70px; }
.hdr-split .brand-logo { height: 56px; }
.hdr-pill .brand-logo { height: 36px; }
.hdr-columns .brand-logo, .hdr-tiles .brand-logo { height: 44px; }
@media (max-width: 760px) { .hdr-ledger .brand-logo { height: 50px; } .hdr-split .brand-logo { height: 44px; } }
/* photos in slideshows: keep faces of tall pictures in view */
.ss-media img { object-position: 50% 30%; }

.ss-media.ss-tall { overflow: hidden; }
.ss-media.ss-tall::before { content: ''; position: absolute; inset: -60px; background: var(--ss-bg) center / cover no-repeat; filter: blur(34px) brightness(.62) saturate(1.1); }
.ss-media.ss-tall img { position: relative; z-index: 0; object-fit: contain; object-position: 84% 50%; }
@media (max-width: 760px) { .ss-media.ss-tall img { object-fit: cover; object-position: 50% 25%; } }

/* theme trial bar (/__try/…) */
.lm-trial { position: sticky; top: 0; z-index: 1000; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 16px; background: #111; color: #fff; font: 14px/1.3 system-ui, sans-serif; }
.lm-trial-actions { display: flex; gap: 8px; align-items: center; }
.lm-trial button, .lm-trial a { font: inherit; padding: 6px 12px; border-radius: 6px; border: 1px solid #fff4; background: transparent; color: #fff; cursor: pointer; text-decoration: none; }
.lm-trial button[data-act="publish"] { background: #fff; color: #111; font-weight: 600; }
/* associates */
.associate-list { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.associate a { display: block; padding: 16px; border-radius: var(--radius, 8px); background: var(--surface); color: var(--text); text-decoration: none; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.associate-name { display: block; font-weight: 600; }
.associate-url { display: block; font-size: .85rem; color: var(--muted); }
.lm-associate-btn { position: fixed; right: 20px; bottom: 84px; z-index: 79; padding: 10px 14px; border-radius: 999px; background: var(--primary); color: var(--background); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.lm-sub[hidden] ~ .lm-associate-btn, body:not(:has(.lm-sub:not([hidden]))) .lm-associate-btn { bottom: 20px; }