/* ACHRAF OUAHAB MEDIA LLC: multi-page site
   Loaded after styles.css. Shared page parts (page heroes, footer, menu,
   motion) and the components of the About, Use cases, Blog and Contact pages. */

@property --gap { syntax: '<length>'; initial-value: 46px; inherits: true; }

/* ---------- Design tokens (shared by every page; styles.css keeps the palette) ---------- */
:root {
  /* radii: one scale */
  --r-xs: 10px;   /* small tiles, square chips, platform tiles */
  --r-sm: 14px;   /* icon wells, inner panels, agent nodes */
  --r-md: 20px;   /* grid cards, flow steps, FAQ panel */
  --r-lg: 28px;   /* feature panels, covers */
  --r-xl: 36px;   /* About arch plate, Contact call card */
  --r-pill: 999px;
  /* hairlines */
  --line-d: rgba(245, 239, 230, .10); --line-d2: rgba(245, 239, 230, .16);
  --line-l: rgba(20, 17, 16, .10);    --line-l2: rgba(20, 17, 16, .16);
  /* depth */
  --sh-raise: inset 0 1px 0 rgba(245, 239, 230, .05);
  --sh-card-l: inset 0 1px 0 rgba(255, 255, 255, .65), 0 18px 40px -24px rgba(20, 17, 16, .28);
  --sh-float-d: 0 40px 100px -40px rgba(0, 0, 0, .7), 0 30px 120px -50px rgba(215, 55, 43, .38);
  --sh-float-l: 0 30px 70px -32px rgba(20, 17, 16, .28);
  /* motion */
  --dur-1: .16s;  /* color and opacity on hover */
  --dur-2: .28s;  /* chips, ticks */
  --dur-3: .6s;   /* component state: gate, crossfades */
  --dur-4: 1.1s;  /* entrances, word rise */
  --dur-5: 1.6s;  /* hero image settles */
  --ease-io: cubic-bezier(.65, 0, .35, 1);  /* token travel, clip reveals */
  --ease-expo: cubic-bezier(.16, 1, .3, 1); /* CSS stand-in for GSAP expo.out */
  /* color additions */
  --green-ink: #276e43; /* "Live" text on light backgrounds (AA) */
  /* layout */
  --gap: 20px;        /* every card grid */
  --hero-top: 150px;
}
@media (max-width: 960px) { :root { --hero-top: 120px; } }
@media (max-width: 600px) { :root { --r-lg: 24px; --r-xl: 30px; --hero-top: 108px; } }
@media (max-width: 400px) { :root { --gutter: 20px; } }
/* keeps a name like "3-Layer" from breaking at its hyphen */
.nw { white-space: nowrap; }

/* Headings balance their lines; body text avoids orphans */
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li, dd, blockquote) { text-wrap: pretty; }

/* ---------- Page transitions (browsers that support them) ---------- */
@view-transition { navigation: auto; }
/* The header holds still while the page changes. The name is only set during a transition
   (html.vt-on, see layout() in partials.mjs): a named element is a backdrop root, which
   would stop the pill's frosted blur from seeing the page behind it the rest of the time. */
.vt-on .site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vtOut .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn .6s cubic-bezier(.2, .8, .1, 1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-12px); filter: blur(6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(22px); } }

/* ---------- Header ----------
   The header's look comes from styles.css, exactly as on the live site (Achraf, October 20, 2026:
   no overrides here). Only the labels and the Member portal button differ, as decided. */

/* ---------- Mobile menu ----------
   The menu's look comes from styles.css, exactly as on the live site. */

/* ---------- Facts bar ----------
   Hero facts as one row of cells between hairlines (no boxes). The hairlines
   draw in and the cells fade up 80ms apart (main.js). 2 x 2 on phones.
   <dl class="facts-bar">  (add facts-bar--light on light heroes, facts-bar--center in a centered block)
     <div><dt>Role</dt><dd>Founder</dd></div> ...
   </dl>
   Columns size to their content (a long value gets more room before it wraps).
   Force your own widths with style="--fb-cols: 1fr 1.6fr 1fr". */
.facts-bar {
  --fb-line: var(--line-d2); --fb-k: var(--muted); --fb-v: var(--cream);
  position: relative; display: grid; grid-template-columns: var(--fb-cols, none); grid-auto-flow: column; grid-auto-columns: auto;
  margin: 0; padding: 0; list-style: none;
}

.facts-bar::before, .facts-bar::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--fb-line); transform-origin: left; }
.facts-bar::before { top: 0; }
.facts-bar::after { bottom: 0; }
.facts-bar > * { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; min-width: 0; margin: 0; padding: 18px 20px; }
.facts-bar > :first-child { padding-left: 0; }
.facts-bar > :last-child { padding-right: 0; }
.facts-bar > * + *::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--fb-line); transform-origin: top; }
.facts-bar dt, .facts-bar dd { margin: 0; }
.facts-bar dt { font: 500 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--fb-k); }
.facts-bar dd { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: var(--fb-v); text-wrap: balance; }

@media (max-width: 600px) {
  .facts-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .facts-bar > * { padding: 16px 16px 16px 0; }
  .facts-bar > :nth-child(even) { padding: 16px 0 16px 16px; }
  .facts-bar > * + *::before { display: none; }
  .facts-bar > :nth-child(even)::before { display: block; content: ''; top: 16px; bottom: 16px; }
  .facts-bar > :nth-child(n+3)::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fb-line); transform-origin: left; }
  /* an odd cell out (3 facts) takes the whole last row */
  .facts-bar > :last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }

  .facts-bar dd { font-size: 16.5px; }
}
/* draw-in (only once main.js has armed it, so nothing is hidden without JS).
   Armed = hidden at once; the transitions live on .is-ruled so only the reveal animates. */
.facts-bar.rule-armed::before, .facts-bar.rule-armed::after, .facts-bar.rule-armed > *::after { transform: scaleX(0); }
.facts-bar.rule-armed > *::before { transform: scaleY(0); }
.facts-bar.rule-armed > * { opacity: 0; transform: translateY(12px); }
.facts-bar.rule-armed.is-ruled::before, .facts-bar.rule-armed.is-ruled::after, .facts-bar.rule-armed.is-ruled > *::after {
  transform: none; transition: transform .9s var(--ease-expo) var(--rule-delay, 0s);
}
.facts-bar.rule-armed.is-ruled > *::before { transform: none; transition: transform .7s var(--ease-expo) calc(var(--rule-delay, 0s) + .25s + var(--i, 0) * 80ms); }
.facts-bar.rule-armed.is-ruled > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) calc(var(--rule-delay, 0s) + .15s + var(--i, 0) * 80ms), transform 1s var(--ease-expo) calc(var(--rule-delay, 0s) + .15s + var(--i, 0) * 80ms);
}

/* ---------- Hairlines that draw in: [data-rule] (main.js) ---------- */
.rule-line {
  position: absolute; left: 0; right: 0; z-index: 1; height: var(--rule-w, 1px); pointer-events: none;
  background: var(--rule-c, color-mix(in srgb, currentColor 16%, transparent));
  transform: scaleX(0); transform-origin: left;
}

.is-ruled > .rule-line { transform: none; transition: transform .9s var(--ease-expo) var(--rule-delay, 0s); }
.rule-self.rule-armed { transform: scaleX(0); transform-origin: left; }
.rule-self--y.rule-armed { transform: scaleY(0); transform-origin: top; }
.rule-self.rule-armed.is-ruled { transform: none; transition: transform .9s var(--ease-expo) var(--rule-delay, 0s); }
hr.rule, .rule { display: block; height: 1px; margin: 0; border: 0; background: color-mix(in srgb, currentColor 16%, transparent); }

/* ---------- Edge glow: the red top hairline of the stat cards, as a utility ----------
   Needs a positioned element (relative is set softly). */
:where(.edge-glow) { position: relative; }
.edge-glow::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(239, 90, 76, .75), transparent);
}

/* ---------- Shared bits ---------- */

.sec-head__aside p { color: inherit; }
.sec-head__aside .link-arrow { display: inline-block; margin-top: 14px; }
.link-arrow--light { color: var(--cream); }
.scroll-cue {
  position: absolute; z-index: 6; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px;
  border-radius: 999px; border: 1.5px solid rgba(245, 239, 230, .35);
}
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--red-bright); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 959px) { .scroll-cue { display: none; } }

/* Split headings: words rise in (main.js wraps them in .w spans). Each .w keeps .1em of
   descender room inside its clip, but a negative margin gives it back, so lines sit at the
   heading's own line-height instead of growing by that room. */
[data-split] .w, .book__title .w { vertical-align: top; margin-bottom: -.1em; }

/* ---------- Breadcrumbs (blog posts) ---------- */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.crumbs a { position: relative; color: var(--muted-light); border-bottom: 1px solid rgba(245, 239, 230, .25); transition: color .3s, border-color .3s; }
.crumbs a::after { content: ''; position: absolute; inset: -14px -8px; } /* 44px tap area, same look */
.crumbs a:hover { color: var(--cream); border-color: var(--red-bright); }
.crumbs > span:last-child { color: var(--red-bright); }

/* ---------- Home: About teaser ---------- */
.about__links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

/* ---------- Numbered flow with a connecting line (Home, How it gets built) ---------- */
.flow { --fl-line: rgba(245, 239, 230, .16); --fl-card: var(--ink-raised); --fl-border: rgba(245, 239, 230, .09); --fl-t: var(--cream); --fl-d: var(--muted); }

.flow { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: f; }

/* ---------- Home: How it gets built ---------- */
.build { position: relative; overflow: hidden; padding: var(--section-y) var(--gutter); background: var(--ink); }
.build__glow { position: absolute; width: 900px; height: 900px; right: -320px; top: 10%; border-radius: 50%; background: var(--red); opacity: .12; filter: blur(160px); pointer-events: none; }
.build__wrap { position: relative; display: flex; flex-direction: column; gap: 24px; }
.build__wrap > .sec-head { margin-bottom: 32px; }

/* The red closing section's rings */
.book__rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }

.book__rings span { position: absolute; left: -300px; top: -300px; width: 600px; height: 600px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); animation: ringOut 9s linear infinite; }
.book__rings span:nth-child(2) { animation-delay: -3s; }
.book__rings span:nth-child(3) { animation-delay: -6s; }
@keyframes ringOut { from { transform: scale(.2); opacity: 0; } 20% { opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* ---------- FAQ (sand, 5/7, sticky intro on desktop) ---------- */
.faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(48px, 7vw, 112px); }
.faq__intro { align-self: start; }
.faq__intro .card__cta { align-self: flex-start; margin-top: 10px; }
.faq__after { display: none; }
.faq__item { position: relative; }
/* open item: a red rule on the left draws down */
.faq__item::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--red);
  transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease);
}
.faq__item.is-open::before { transform: none; }
.faq__btn {
  --q-lh: calc(19px * 1.35); /* one line of the question: the + circle centres on it */
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; gap: 0 20px; min-height: 56px;
  padding: 28px 0 28px 20px; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.015em;
  transition: color var(--dur-1);
}
.faq__btn:hover { color: var(--red-deep); }
.faq__n { font: 500 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; color: var(--red-deep); }
.faq__qt { min-width: 0; text-wrap: pretty; }
/* on the first line of the question (also when it wraps), and never taller than that line */
.faq__icon { align-self: start; margin-block: calc((var(--q-lh) - 34px) / 2); }
.faq__btn:hover .faq__icon { background: rgba(20, 17, 16, .12); }
.faq__item.is-open .faq__btn:hover .faq__icon { background: var(--red-deep); }
.faq__panel > div { padding: 0 56px 0 80px; }
.faq__panel p { max-width: 60ch; margin: -6px 0 0; padding: 0 0 28px; font-size: 16.5px; line-height: 1.65; }
@media (min-width: 960px) {
  .faq__intro { position: sticky; top: 120px; }
}
@media (max-width: 959px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__intro .faq__cta { display: none; }
  .faq__after { display: block; }
  .faq__after .card__cta { margin-top: 0; }
}
@media (max-width: 599px) {
  .faq__btn { --q-lh: calc(17.5px * 1.35); grid-template-columns: 30px minmax(0, 1fr) auto; gap: 0 12px; padding: 24px 0 24px 14px; font-size: 17.5px; }
  .faq__panel > div { padding: 0 0 0 56px; }
  .faq__panel p { padding: 0 0 24px; font-size: 16px; }
}

/* ---------- The red closing section (book() in partials.mjs) ----------
   The title is always fully opaque white; it settles from scale .94 on
   scroll and its words rise once (main.js). The rings breathe in turn. */
.book__title, .book__title .serif, .book__lede, .book .eyebrow { color: #fff; }
.book__title .serif .w { padding-right: .08em; margin-right: -.08em; }
/* the serif phrase always starts its own line, so a lone sans word never sits above it */
.book__title > .serif { display: block; }
.js .book__title.is-armed:not(.is-in) .w > span { animation-play-state: paused; }
.book__rings { left: 50%; top: 50%; }
.book__rings span {
  --s: 600px; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s);
  border: 1px solid rgba(255, 255, 255, .55); opacity: .5; animation: bookRing 6s ease-in-out infinite;
}
.book__rings span:nth-child(1) { --s: 560px; animation-delay: 0s; }
.book__rings span:nth-child(2) { --s: 880px; animation-delay: 2s; }
.book__rings span:nth-child(3) { --s: 1200px; animation-delay: 4s; }
@keyframes bookRing { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.06); opacity: .15; } }
@media (max-width: 599px) {
  .book__rings span:nth-child(1) { --s: 340px; }
  .book__rings span:nth-child(2) { --s: 560px; }
  .book__rings span:nth-child(3) { --s: 780px; }
}
.book__mail {
  position: relative; font-size: 14px; color: #fff; border-bottom: 0; padding-bottom: 3px;
  background: linear-gradient(#fff, #fff) left bottom / 0 1px no-repeat, linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) left bottom / 100% 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.book__mail::after { content: ''; position: absolute; inset: -12px -8px; } /* 44px tap area, same look */
.book__mail:hover { background-size: 100% 1px, 100% 1px; }

.book .avatars img { border-color: var(--red); }

/* keyboard focus on red surfaces: a white ring (the global red one vanishes on red) */
:is(.book, .handover, .flow__step--red, .era__card--now, .pcell--red, .gbox--red) :focus-visible { outline-color: #fff; }

/* ---------- Blog ----------
   The post card and the generated covers (website/src/blog.mjs), shared by Home ("From the blog"), the Blog
   index and "Keep reading" under every post. Covers draw with SVG presentation attributes, so they need
   nothing from here to look right. This section only runs their lights and pings: while a cover is live
   (.is-live, p-blog.js: in view or on hover) and, on Home, while its card is hovered or focused. At rest,
   with reduced motion and without JS a cover is its finished picture. p-blog.css adds the index and posts. */
.latest { padding: var(--section-y) var(--gutter); background: var(--cream); color: var(--ink); }
.latest--related { background: var(--sand); }
.latest__wrap { display: flex; flex-direction: column; gap: 56px; }
.latest .sec-head__aside { color: var(--body-on-light); }
.latest__grid, .bindex__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 1023px) { .latest__grid, .bindex__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 679px) { .latest__grid, .bindex__grid { grid-template-columns: minmax(0, 1fr); } }

/* Post card (e1 on light): the cover in a paper frame, the category, the title, three lines of description,
   then the date and reading time beside the arrow. The whole card is the link: hover and keyboard focus
   lift it, wake its cover, draw a red line under the title and fill the arrow. */
.pcard { min-width: 0; }
.pcard__link {
  position: relative; display: flex; flex-direction: column; height: 100%; border-radius: var(--r-md);
  background: var(--paper); border: 1px solid var(--line-l); box-shadow: var(--sh-card-l);
  transition: transform .6s var(--ease-expo), box-shadow .6s var(--ease), border-color .4s var(--ease);
}
.pcard__link:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; }
.pcard__media {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin: 6px 6px 0; border-radius: calc(var(--r-md) - 6px);
  isolation: isolate; background: #0f0c0b;
}
.pcard__media::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(245, 239, 230, .08); pointer-events: none; }
.pcard__media .cover { position: absolute; inset: 0; transition: transform 1s var(--ease-expo); }
.pcard__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 18px; }
.pcard__cat {
  align-self: flex-start; padding: 5px 9px; border-radius: var(--r-pill); background: rgba(215, 55, 43, .08);
  font: 500 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; color: var(--red-deep);
}
.pcard__title { margin-top: 2px; font-size: 21px; font-weight: 500; line-height: 1.22; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.pcard__tt { padding-bottom: 2px; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 1.5px no-repeat; transition: background-size .7s var(--ease-expo); }
.pcard__desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font-size: 15px; line-height: 1.58; color: var(--body-on-light);
}
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-l); }
.pcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font: 500 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--label-on-light);
}
.pcard__dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--red); }
@media (max-width: 359px) { .pcard__meta { letter-spacing: .07em; gap: 6px 8px; } }
.pcard__arr {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(215, 55, 43, .09); color: var(--red-deep); font-size: 15px;
  transition: background .4s var(--ease), color .4s var(--ease), transform .6s var(--ease-expo);
}
.pcard__link:is(:hover, :focus-visible) .pcard__tt { background-size: 100% 1.5px; }
.pcard__link:is(:hover, :focus-visible) .pcard__arr { background: var(--red); color: #fff; transform: translateX(3px); }
.pcard__link:focus-visible { transform: translateY(-6px); }
@media (hover: hover) {
  .pcard__link:hover { transform: translateY(-6px); border-color: rgba(215, 55, 43, .32); box-shadow: var(--sh-card-l), 0 44px 70px -42px rgba(20, 17, 16, .55); }
  .pcard__link:hover .pcard__media .cover { transform: scale(1.045); }
}

/* Generated covers */
.cover { position: relative; overflow: hidden; background: #0f0c0b; }
.cover svg { display: block; width: 100%; height: 100%; }
.cover__label {
  position: absolute; left: 18px; top: 18px; z-index: 2; padding: 7px 12px; border-radius: var(--r-pill);
  background: rgba(15, 12, 11, .58); border: 1px solid rgba(245, 239, 230, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 11px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--cream);
}
/* lights travel the wires and agents ping, only while the cover is live (the What I build card beside a post too) */
.cv-lt { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0; stroke-dasharray: 18 var(--g, 400); stroke-dashoffset: var(--s, 26); }
.cv-lt--loop { stroke-width: 3.2; stroke-dasharray: 64 var(--g, 400); stroke-dashoffset: 0; }
.cv-png { opacity: 0; transform-box: fill-box; transform-origin: center; }
:is(.cover.is-live, .pcard__link:hover .cover, .pcard__link:focus-visible .cover, .pside.is-live) .cv-lt { opacity: 1; animation: cvLt var(--t, 3s) linear var(--dl, 0s) infinite; }
:is(.cover.is-live, .pcard__link:hover .cover, .pcard__link:focus-visible .cover, .pside.is-live) .cv-lt--loop { animation-name: cvLtLoop; animation-delay: 0s; }
:is(.cover.is-live, .pcard__link:hover .cover, .pcard__link:focus-visible .cover, .pside.is-live) .cv-png { animation: cvPing 3.6s ease-out var(--dl, 0s) infinite; }
@keyframes cvLt { 0% { stroke-dashoffset: var(--s, 26); } 60%, 100% { stroke-dashoffset: var(--e, -400); } }
@keyframes cvLtLoop { to { stroke-dashoffset: var(--e, -400); } }
@keyframes cvPing { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.2); } }
.cover--still .cv-lt, .cover--still .cv-png { display: none; }
/* card covers show the picture without its small labels, which would render under 11px at every width
   (the post's own large cover keeps them from 701px) */
.pcard .cover .cv-lb, .pcard .cover .cv-num { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cover *, .pside * { animation: none !important; }
  .cv-lt, .cv-png { display: none; }
  .pcard__link, .pcard__media .cover, .pcard__tt, .pcard__arr { transition: none !important; }
  .pcard__link:is(:hover, :focus-visible), .pcard__link:hover .pcard__media .cover { transform: none; }
}

/* ---------- Blog post ----------
   The post page's own rules live in p-blog.css: only the posts and the Blog index load it. */

/* ---------- Footer ----------
   Three columns from 1100px (About, Explore, Get in touch), two from 600px,
   one below. footer--lite (meta "footerLite": true) drops Get in touch. */
.footer { border-top: 1px solid var(--line-d); }
.footer__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 600px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; } }
/* lite on tablets: About becomes a band (intro left, globe right), Explore sits below */
@media (min-width: 600px) and (max-width: 1099px) {
  .footer--lite .footer__about { grid-column: 1 / -1; max-width: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}
@media (min-width: 1100px) {
  .footer__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1.2fr); gap: 48px; }
  .footer--lite .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
}
.footer__about { gap: 28px; }
.footer .globe { width: 160px; }
.footer .globe__badge { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.footer .footer__h, .footer .contact__title { margin: 0 0 14px; font: 500 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.footer__nav ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* links: cream at 80%, full on hover, with a red underline that scales in */
.footer__nav a, .footer__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; transform: none;
  font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: rgba(245, 239, 230, .8); transition: color var(--dur-1);
}
.footer__link > span:first-child { position: relative; }
.footer__link > span:first-child::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--red-bright);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.footer__nav a:hover, .footer__link:hover { color: var(--cream); transform: none; }
.footer__link:hover > span:first-child::after { transform: scaleX(1); }

.footer .contact a { padding: 14px 0; color: var(--cream); }
.footer .contact a:first-of-type { padding-top: 4px; }
.footer .contact__icon { color: var(--cream); transition: border-color var(--dur-1), background var(--dur-1); }
.footer .contact a:hover { color: var(--cream); }
.footer .contact a:hover .contact__icon { border-color: rgba(239, 90, 76, .55); background: rgba(215, 55, 43, .12); }
.footer .contact__go { transition: transform .35s var(--ease), color var(--dur-1); }
.footer .contact a:hover .contact__go { color: var(--red-bright); transform: translate(2px, -2px); }
@media (min-width: 1100px) and (max-width: 1279px) { .footer .contact__value { font-size: 15px; } }
/* the email breaks only after the @ (a <wbr> in partials.mjs), never mid-word */
.footer .contact__value { overflow-wrap: normal; }
@media (max-width: 360px) { .footer .contact__value { font-size: 14.5px; } }
@media (max-width: 599px) { .footer .globe { width: 140px; } }

/* ---------- Legal pages on the shared header ---------- */
.legal-page .site-header .nav { display: none; }
@media (min-width: 960px) { .legal-page .site-header .nav { display: flex; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .book__rings span, .scroll-cue span, .pfig__loop span { animation: none !important; }

  /* menu: a plain fade, no circle, no rising rows */
  .menu, .menu.is-open { clip-path: none; }
  .menu { opacity: 0; transition: opacity .2s linear !important; }
  .menu.is-open { opacity: 1; }
  .menu.is-open .menu__link, .menu.is-open .menu__sub-link, .menu.is-open .menu__foot { animation: none !important; }

  .site-header, .brand img { transition: none !important; }
  /* section labels are simply there (main.js also marks them in at once) */
  .js [data-eyebrow] { opacity: 1; }
  .js [data-eyebrow] .eyebrow__line { transform: none; }
  /* marquees become calm scrollers: the first card starts on the content edge, cards snap,
     and only the right edge fades (a hint that the row scrolls) */
  .marquee-mask {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  }
  .marquee { --mq-pad: max(var(--gutter), calc((100vw - 1240px) / 2)); scroll-padding-inline: var(--mq-pad); }
  .marquee__list { padding-inline: var(--mq-pad); }
  .marquee--recs { scroll-snap-type: x mandatory; }
  .marquee--recs .rec { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  /* phones: the next card shows a clear edge, so the row reads as scrollable */
  .marquee-mask {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .marquee--recs .rec { width: calc(100vw - 2 * var(--gutter) - 44px); }
  /* everything lands in its final state at once: no staggered words, no late fade-ups */
  *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
}
.has-gl .hero__blob { display: none; }