/* Zirconoid site styles. Values mirror the Claude Design prototype the site was built from. */

:root {
  --bg: #141414;
  --ink: #e8e7e1;
  --soft: #c9c9c3;
  --muted: #a3a39e;
  --dim: #8a8a85;
  --faint: #6b6b66;
  --cream: #ecebe4;
  --rule: rgba(255, 255, 255, .1);
  --rule-soft: rgba(255, 255, 255, .08);
  --head: 'Montserrat', sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --gutter: clamp(32px, 9vw, 160px);
  --nav-gutter: clamp(20px, 3vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: #fff; }
::selection { background: var(--ink); color: var(--bg); }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

@keyframes zr-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes zr-spin { to { transform: rotate(360deg); } }

.site { position: relative; min-height: 100vh; background: var(--bg); color: var(--ink); overflow-x: clip; }
.site--column { display: flex; flex-direction: column; }

/* Shared type */
.eyebrow {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.h2 {
  margin: 0;
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.mono-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  transition: color .2s;
}
.mono-link:hover { color: #fff; }

/* Nav. Stacking order on the home page, bottom to top: nav blur (40), galaxy (60), hero (65), nav (70). */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--nav-gutter);
  pointer-events: none;
}
.nav--sticky { position: sticky; padding: 18px var(--nav-gutter); pointer-events: auto; }
.nav__blur {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h, 80px);
  z-index: 40;
  pointer-events: none;
  background: transparent;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.nav__blur--on,
.nav__blur.is-on { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nav__brand {
  pointer-events: auto;
  font-family: var(--head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav__links {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav__link { color: var(--muted); transition: color .2s; }
.nav__link:hover, .nav__link[aria-current="page"] { color: #fff; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 4px;
  transition: background .25s, transform .35s var(--ease), box-shadow .35s;
}
.btn:hover { background: #fff; color: var(--bg); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.btn--lg { padding: 14px 20px; }
.btn--lg:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.btn__star { display: block; flex: none; transition: transform .6s var(--ease); }
.btn:hover .btn__star { transform: rotate(22.5deg); }

/* Hero galaxy layer: sits above the nav so the nav blur never touches it. */
.galaxy-hero {
  position: absolute;
  top: -30vh;
  height: 160vh;
  left: 10%;
  right: -8%;
  z-index: 60;
  pointer-events: none;
  will-change: transform;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 60%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 38%, #000 85%, rgba(0, 0, 0, .5) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 60%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 38%, #000 85%, rgba(0, 0, 0, .5) 100%);
  mask-composite: intersect;
}
.galaxy-hero zirconoid-galaxy,
.footer__galaxy zirconoid-galaxy { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Hero */
.hero {
  position: relative;
  z-index: 65;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: visible;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  pointer-events: auto;
  padding: calc(120px + 10vh) var(--gutter) 100px;
  box-sizing: border-box;
}
.hero__title {
  margin: 0;
  max-width: 26ch;
  will-change: transform;
  font-family: var(--head);
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: pretty;
  animation: zr-rise 1.1s .1s var(--ease) both;
}

/* Belief */
.belief { position: relative; z-index: 2; padding: 60px var(--gutter) 160px; }
.belief__inner { max-width: none; }
/* Centred over the paragraphs, with its definition opening upward like the footer mark's.
   The belief section starts a full screen down, so the bubble always has room above it. */
.belief__mark-wrap { position: relative; display: block; width: 64px; margin: 0 auto 56px; }
.belief__mark { width: 64px; height: 64px; display: block; }
.belief__text { display: grid; gap: 34px; }
.belief__text p {
  margin: 0;
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.32;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.belief__text [data-w] { display: inline; will-change: filter, opacity; }

/* Trusted by. The marks sit on a sphere centred on the claim. The script turns the sphere and
   sets each mark's position, scale and opacity per frame, so depth reads as size and brightness. */
.trust { padding: 20px var(--gutter) 120px; }
.trust__orbit {
  position: relative;
  width: min(100%, 520px);
  height: clamp(230px, 20vw, 300px);
  margin: 0 auto;
  display: grid;
  place-items: center;
}
/* Deliberately no z-index: the ring must not open a stacking context, or the marks on the near
   side of the sphere could never rise above the claim that hangs inside it. */
.trust__ring { position: absolute; inset: 0; }
.trust__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  object-fit: contain;
  opacity: 0;               /* the script takes over on the first frame */
  will-change: transform, opacity;
}
/* The claim is wider than the sphere it hangs in, and a grid item that overflows its track is
   laid out from the start edge, which pushed the whole line to the right. Take it out of the
   flow and pin it to the middle of the sphere, which is the middle of the page. */
.trust__title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;              /* the claim hangs mid-sphere; see TITLE_LAYER in site.js */
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-weight: 500;
  font-size: clamp(17px, 2.1vw, 28px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}

/* Work */
.work { padding: 0 var(--gutter) 160px; }
.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}
.work__head .h2 { white-space: nowrap; }
.work__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 48px; }
.card {
  padding: 40px 20px 44px;
  margin: 0 -20px;
  border-bottom: 1px solid var(--rule);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background .45s var(--ease), transform .55s var(--ease);
}
.card:hover { background: rgba(255, 255, 255, .035); transform: translateY(-6px); }
.card__domain { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
.card__media {
  height: 160px;
  border-radius: 4px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 6px, rgba(255, 255, 255, 0) 6px 14px), #1a1a1a;
  border: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  transition: border-color .45s, background-position .8s var(--ease);
}
.card:hover .card__media { border-color: rgba(255, 255, 255, .22); background-position: 28px 0; }
.card__media span { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); transition: color .45s; }
.card:hover .card__media span { color: var(--muted); }
/* A capture still. Held back a little so it sits in the page's greys, full colour on hover. */
.card__media--shot { padding: 0; overflow: hidden; }
.card__media--shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(.4) brightness(.82) contrast(1.05);
  transform: scale(1.02);
  transition: filter .5s var(--ease), transform .7s var(--ease);
}
.card:hover .card__media--shot img { filter: none; transform: scale(1.06); }
.card__title { margin: 0; font-family: var(--head); font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty; }
.card__desc { margin: 0; font-size: 15px; line-height: 1.65; font-weight: 300; color: var(--muted); text-wrap: pretty; }
.card__meta { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; line-height: 1.5; }
.card__meta dt { color: var(--faint); }
.card__meta dd { margin: 0; color: var(--ink); }

/* FAQ. One answer open at a time. Without JS the <details> elements still work,
   just without the height transition, and the answers stay in the page source either way. */
.faq { padding: 0 var(--gutter) 140px; }
.faq__head { padding-bottom: 18px; }
.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--head);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
  transition: opacity .25s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { opacity: .6; }
.faq__chevron { flex: none; color: var(--muted); transition: transform .3s var(--ease), color .25s; }
.faq__item[open] .faq__chevron, .faq__item.is-open .faq__chevron { transform: rotate(180deg); color: var(--ink); }
.faq__panel-inner { overflow: hidden; }
.faq__a {
  margin: 0;
  padding: 0 48px 26px 0;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--muted);
  text-wrap: pretty;
}
/* The transition is JS-driven: the panel opens from 0fr only once the script can time it. */
.js .faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.js .faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.js .faq__item[open]:not(.is-open) .faq__chevron { transform: none; color: var(--muted); }

/* CTA */
.cta { padding: 0 var(--gutter) 40px; }
.cta__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 64px;
  align-items: end;
  padding: 64px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cta__copy { display: grid; gap: 20px; }
.cta__copy .eyebrow { margin: 0; }
.cta__lede { margin: 0; font-size: 16px; line-height: 1.65; font-weight: 300; color: var(--muted); max-width: 520px; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; justify-self: start; }

/* Home footer */
.footer {
  position: relative;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 96px var(--gutter) 40px;
  box-sizing: border-box;
}
/* Clips the oversized galaxy to the footer box while letting the definition bubble rise above it. */
.footer__clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.footer__galaxy { position: absolute; left: -10%; right: -10%; top: 22%; bottom: -60%; pointer-events: none; }
.footer__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(20, 20, 20, 0) 34%, rgba(20, 20, 20, .8) 70%, #141414 100%); }
.footer__fade-top { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, #141414, rgba(20, 20, 20, 0)); }
.footer__fade-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(20, 20, 20, 0), rgba(20, 20, 20, .92)); }
/* The mark is not a link: it only shows its definition. The wrapper is the width of the mark,
   so hovering the empty space either side of it does nothing. */
.footer__mark { position: relative; width: 56px; margin: 0 auto; }
.footer__mark img { width: 56px; height: 56px; display: block; animation: zr-spin 14s linear infinite; animation-play-state: paused; }
.footer__mark:hover img, .footer__mark:focus-visible img { animation-play-state: running; }

/* Definition bubble: fades in above a mark while it is hovered, fades out a little slower. */
.def {
  position: absolute;
  bottom: calc(100% + 18px);
  width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 18px 22px 20px;
  border-radius: 6px;
  background: rgba(20, 20, 20, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  z-index: 5;
}
.def::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  background: rgba(20, 20, 20, .92);
  border-right: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transform: rotate(45deg);
}
.def--center { left: 50%; transform: translate(-50%, 8px) scale(.98); transform-origin: 50% 100%; }
.def--center::after { left: 50%; }
.footer__mark.is-open .def,
.belief__mark-wrap.is-open .def,
.footer__mark:hover .def,
.footer__mark:focus-visible .def,
.belief__mark-wrap:hover .def,
.belief__mark-wrap:focus-visible .def {
  opacity: 1;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.footer__mark:hover .def--center, .footer__mark:focus-visible .def--center,
.footer__mark.is-open .def--center,
.belief__mark-wrap:hover .def--center, .belief__mark-wrap:focus-visible .def--center,
.belief__mark-wrap.is-open .def--center { transform: translate(-50%, 0) scale(1); }
/* The footer mark keeps turning while its definition is up on a touch screen. */
.footer__mark.is-open img { animation-play-state: running; }
.def p { margin: 0; }
.def__head { font-family: var(--head); font-size: 16px; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px !important; }
.def__head strong { font-weight: 600; }
.def__pos { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); margin-left: 4px; }
.def__pron { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--dim); margin-left: 6px; white-space: nowrap; }
.def__body { font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--soft); text-wrap: pretty; }
.def__body em { font-style: italic; color: var(--ink); }
.def__body strong { font-weight: 500; color: var(--ink); }

.footer__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer__bar span { color: var(--muted); }
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 28px; }
.footer__bar nav a { color: var(--muted); transition: color .2s; }
.footer__bar nav a:hover, .footer__bar nav a[aria-current="page"] { color: #fff; }

/* Sub-page footer */
.footer--simple { min-height: 0; display: block; padding: 40px var(--gutter) 48px; border-top: 1px solid var(--rule-soft); overflow: visible; }
.footer--simple .footer__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.footer--simple .footer__brand { display: flex; align-items: center; gap: 14px; }
.footer--simple .footer__brand img { width: 26px; height: 26px; display: block; }
.footer--simple .footer__brand span { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.footer--simple nav { display: flex; flex-wrap: wrap; gap: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.footer--simple nav a { color: var(--dim); transition: color .2s; }
.footer--simple nav a:hover, .footer--simple nav a[aria-current="page"] { color: #fff; }

/* Sub pages */
.page { flex: 1; padding: clamp(56px, 8vw, 110px) var(--gutter) 120px; }
.page__inner { max-width: 720px; margin: 0 auto; animation: zr-rise .8s var(--ease) both; }
.page__inner--wide { max-width: 1200px; }
.page__title {
  margin: 0 0 14px;
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.page__meta { margin: 0 0 56px; font-size: 13px; color: var(--faint); }
.page .eyebrow { margin-bottom: 18px; }

/* The blog sits on a sheet of paper. Nearly every rule on this site takes its colour from a
   variable, so the sheet redefines the palette for its own subtree and the rest follows.
   assets/js/paper.js puts a canvas behind the text and paints the grain with a static shader;
   without WebGL2 the off-white background below it carries the page on its own. */
.paper {
  position: relative;
  isolation: isolate;
  /* The sheet grows by its own margins so the column of text keeps the width it had before. */
  --paper-pad: clamp(24px, 4.4vw, 68px);
  max-width: calc(720px + 2 * var(--paper-pad));
  border-radius: 14px;
  background: #fdfcf7;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;                 /* clip the canvas to the rounded corners */
  /* Grain breaks up a letter the way a flat background never does, so the ink is black and the
     supporting greys are far darker than the dark theme's. */
  --ink: #000;
  --soft: #000;
  --muted: #1c1b16;
  --dim: #2a2822;
  --faint: #3b382f;
  --cream: #000;
  --rule: rgba(0, 0, 0, .22);
  --rule-soft: rgba(0, 0, 0, .12);
  color: var(--ink);
}
/* Light type sits on paper the way it never does on a dark screen: the grain eats the thin
   strokes. The body text carries normal weight here. */
.paper .post__body p,
.paper .post-list__excerpt { font-weight: 400; }
/* The padding lives in here, not on the sheet: the shader sizes its canvas from the host's
   content box and then stretches it over the border box, so padding on the host renders the
   grain small and blows it back up. */
.page__inner--wide.paper { max-width: calc(1200px + 2 * var(--paper-pad)); }
.paper__inner { padding: clamp(30px, 4.4vw, 64px) var(--paper-pad) clamp(40px, 5vw, 76px); }
/* The base rules brighten to white on hover, which on paper has to darken instead. */
.paper a:hover,
.paper .post__back:hover,
.paper .post__body a:hover,
.paper .post__foot a:hover { color: #000; }
.paper .post__body a { border-bottom-color: var(--rule); }
.paper .post__body a:hover { border-bottom-color: var(--muted); }
.paper ::selection { background: #000; color: #fdfcf7; }
.paper .post-list__item:hover { background: rgba(0, 0, 0, .05); }
/* The nav floats over the sheet, and its blur alone would leave pale type on white paper. */
.site--paper .nav__blur { background: rgba(20, 20, 20, .72); }

/* Legal */
.legal { display: grid; gap: 44px; font-size: 16px; line-height: 1.75; font-weight: 300; color: var(--soft); }
.legal section { display: grid; gap: 14px; }
.legal h2 { margin: 0; font-family: var(--head); font-weight: 500; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.legal p { margin: 0; }
.legal strong { font-weight: 500; color: var(--ink); }
.legal a { color: var(--muted); }
.legal a:hover { color: #fff; }

/* Blog index */
.blog__title { margin: 0 0 56px; font-size: clamp(30px, 4vw, 52px); max-width: 760px; }
.post-list { display: grid; border-top: 1px solid var(--rule); }
.post-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 32px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .35s var(--ease);
}
.post-list__item:hover { padding-left: 12px; }
.post-list__body { display: grid; gap: 8px; }
.post-list__meta { font-size: 12px; color: var(--faint); letter-spacing: .04em; }
.post-list__title { font-family: var(--head); font-weight: 500; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.01em; line-height: 1.3; }
.post-list__excerpt { font-size: 15px; color: var(--dim); line-height: 1.6; max-width: 680px; font-weight: 300; }
.post-list__read { font-size: 14px; color: var(--dim); }

/* Blog post */
.post__back { display: inline-block; font-size: 13px; color: var(--dim); margin-bottom: 40px; transition: color .2s; }
.post__back:hover { color: #fff; }
.post__meta { margin: 0 0 18px; font-size: 12px; color: var(--faint); letter-spacing: .04em; }
.post__title { margin: 0 0 40px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; }
.post__body { display: grid; gap: 22px; }
.post__body p { margin: 0; font-size: 17px; line-height: 1.75; font-weight: 300; color: var(--soft); text-wrap: pretty; }
.post__body a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.post__body a:hover { color: #fff; border-color: var(--muted); }
.post__foot {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.post__foot span { color: var(--dim); }
.post__foot a { color: var(--ink); transition: color .2s; }
.post__foot a:hover { color: #fff; }

/* 404 */
.notfound { min-height: 60vh; display: grid; align-content: center; gap: 24px; }

/* Scroll reveal (JS only) */
.js [data-reveal]:not(.is-settled) { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }

/* Too little room to orbit a one-line claim: stack it over a plain row of marks. */
@media (max-width: 720px) {
  .trust { padding-top: 0; padding-bottom: 110px; }
  .trust__orbit { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; }
  .trust__ring { position: static; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 32px; margin-top: 34px; }
  .trust__logo { position: static; width: 34px; height: 34px; margin: 0; opacity: .85 !important; transform: none !important; }
  /* Stacked: the claim goes back into the flow, above a plain row of marks. */
  .trust__title { position: static; transform: none; order: -1; white-space: normal; text-wrap: balance; max-width: 20ch; }
}

/* Small screens */
@media (max-width: 640px) {
  /* Wider than the screen and as tall as the hero: a tall narrow frame crops the spiral to
     nothing, and the hard left fade was cutting away most of what was left. The fades sit close
     to the edges so the galaxy carries the whole hero instead of capping the top of it. */
  .galaxy-hero {
    left: -14%;
    right: -14%;
    top: -12vh;
    height: 122vh;
    opacity: .72;             /* it sits behind the headline, so keep it under the type */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
  :root { --nav-gutter: 16px; }
  .nav { padding-top: 16px; padding-bottom: 16px; }
  .nav__brand { letter-spacing: .2em; }
  .nav__links { gap: 16px; }
  .nav .btn { padding: 9px 12px; letter-spacing: .08em; }
  .nav .btn__star { display: none; }
  .hero__inner { padding-top: calc(96px + 8vh); }
  .work__grid { gap: 0; }
  .post-list__item { grid-template-columns: 1fr; }
  .post-list__read { display: none; }
  .work__head .h2 { white-space: normal; }
  .faq__q { gap: 20px; }
  .faq__a { padding-right: 0; }
  /* A centred bubble wider than the screen would run off both edges, so hold it to the gutters. */
  .def--center { width: min(440px, calc(100vw - 2 * var(--gutter))); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__title, .page__inner { animation: none; }
  .footer__mark img { animation: none; }
  .def { transition: none; }
  .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .btn, .card, .card__media, .post-list__item, .nav__blur { transition: none; }
  .js .faq__panel, .faq__chevron, .faq__q { transition: none; }
}