/* ============================================================
   Biochar — static site styles
   ============================================================ */

:root {
  --ink:        #08080a;
  --ink-2:      #0b0b0e;
  --soot:       #101014;
  --line:       rgba(255, 255, 255, .09);
  --line-soft:  rgba(255, 255, 255, .05);
  --text:       #ffffff;
  --muted:      #ddd9d4;
  --ember:      #ff6a2b;
  --ember-soft: #ffb27a;
  --ash:        #f0eeea;

  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ember); color: #120a05; }

a { color: inherit; }

.skip {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 999;
  background: var(--ember);
  color: #140a04;
  padding: .6rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------- NAV */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 1rem var(--pad);
  background: linear-gradient(to bottom, rgba(8, 8, 10, .92), rgba(8, 8, 10, .74) 55%, rgba(8, 8, 10, 0));
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.nav--on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
}
.nav__mark {
  height: 92px;
  width: auto;
  display: block;
  /* the artwork is white on transparent, so it needs no colour handling */
}

.nav__links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav__links a {
  text-decoration: none;
  padding: .2rem 0;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.nav__links a:hover { color: var(--text); border-color: var(--ember); }

/* second level: a submenu that opens on hover and on keyboard focus */
.nav__item { position: relative; }
.nav__item > a { display: inline-block; }

.nav__sub {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 15rem;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  background: #101014;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__sub a {
  display: block;
  padding: .5rem 1.1rem;
  border: 0;
  text-transform: none;
  letter-spacing: .02em;
  font-size: .88rem;
  color: var(--ash);
}
.nav__sub a:hover,
.nav__sub a:focus-visible { color: var(--text); background: rgba(255, 106, 43, .12); }

.nav__caret {
  display: inline-block;
  margin-left: .35em;
  font-size: .7em;
  vertical-align: .12em;
}

/* the burger only exists below the breakpoint */
.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s var(--ease), opacity .2s;
}
.nav__toggle span::before,
.nav__toggle span::after { content: ""; position: absolute; }
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(6px); }
.nav__toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::before { opacity: 0; }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-90deg); }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__mark { height: 64px; }

  /* full-height panel instead of a row that cannot fit */
  .nav__links {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem var(--pad) 2rem;
    max-height: 100svh;
    overflow-y: auto;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .32s var(--ease), visibility .32s;
  }
  .nav__links.is-open { transform: none; visibility: visible; }

  .nav__links > li { border-bottom: 1px solid var(--line-soft); }
  .nav__links > li > a { display: block; padding: .95rem 0; }

  /* on a touch screen there is no hover, so the submenu is simply always open */
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 .6rem;
    padding: 0 0 0 1rem;
    background: none;
    border: 0;
    border-left: 1px solid var(--line);
    box-shadow: none;
  }
  .nav__sub a { padding: .55rem 0; }
  .nav__caret { display: none; }
}

/* ---------------------------------------------------------- HERO */

.hero {
  position: relative;
  height: 140vh;              /* scroll runway for the charcoal — short: the
                                  point is a quick flourish, not a detour
                                  before the reader reaches the content */
  height: 140svh;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 42%, #131318 0%, #0a0a0c 55%, #07070a 100%);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;        /* horizontal drag spins, vertical still scrolls */
}

/* shown only when WebGL is unavailable */
.hero__fallback {
  position: absolute;
  inset: 0;
  display: none;
  background:
    radial-gradient(38% 34% at 50% 46%, #26242a 0%, #131217 45%, transparent 72%),
    radial-gradient(30% 26% at 44% 55%, rgba(255, 106, 43, .30) 0%, transparent 70%),
    radial-gradient(120% 80% at 50% 42%, #131318 0%, #08080a 60%);
}
.no-webgl .hero__fallback { display: block; }
.no-webgl .hero__canvas { display: none; }

.hero__ui {
  position: absolute;
  inset: auto 0 0 0;
  pointer-events: none;       /* the lump underneath stays clickable */
  padding: 0 var(--pad) clamp(3rem, 9vh, 6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
  will-change: transform, opacity;
}

.hero__ui--welcome {
  align-items: center;
  text-align: center;
  inset: 0 0 0 0;
  justify-content: center;
}
.hero__title.hero__title--welcome {
  font-size: clamp(2.4rem, 3rem + 2.5vw, 6.25rem);
  text-transform: none;
}

.hero__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 10px 2px rgba(255, 106, 43, .8);
  animation: pulse 3.2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4.2rem, 17vw, 15rem);
  line-height: .84;
  letter-spacing: -.02em;
  text-transform: lowercase;
}

.hero__sub {
  margin: .4rem 0 0;
  max-width: 44ch;
  color: var(--ash);
  font-size: clamp(1rem, .9rem + .4vw, 1.3rem);
  line-height: 1.5;
}

.hero__hint {
  margin: 1.1rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6e6a65;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hero__hint i {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 106, 43, .55);
  border-radius: 4px;
  animation: tap 2.8s var(--ease) infinite;
}
@keyframes tap {
  0%, 100% { transform: scale(1);   border-color: rgba(255, 106, 43, .30); }
  50%      { transform: scale(.78); border-color: rgba(255, 106, 43, .95); }
}
.hero__hint.is-used {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.hero__scrollcue {
  position: absolute;
  right: var(--pad);
  bottom: clamp(3rem, 9vh, 6rem);
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scrollcue i {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--ember), transparent);
  animation: drop 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

@media (max-width: 640px) {
  .hero__scrollcue { display: none; }
}

/* fades the stage into the page below */
.hero__veil {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------- LAYOUT */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.wrap--narrow { max-width: 780px; }

.section {
  position: relative;
  padding: clamp(5rem, 13vh, 9rem) 0;
  border-top: 1px solid var(--line-soft);
}
.section--dark { background: var(--ink-2); }
.section--lede {
  border-top: 0;
  background: var(--ink);
  padding-top: clamp(6rem, 16vh, 11rem);
}
.section--close {
  text-align: center;
  padding: clamp(7rem, 20vh, 12rem) 0;
  background:
    radial-gradient(58% 58% at 50% 100%, rgba(255, 106, 43, .05), transparent 70%),
    var(--ink);
}

.kicker {
  margin: 0 0 1rem;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ember);
}

.h2 {
  margin: 0 0 2.2rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 20ch;
}
.section--close .h2 { margin-inline: auto; }
.h2--big { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.6rem); max-width: 16ch; }

.h3 {
  margin: 0 0 .8rem;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .005em;
}

.intro {
  max-width: 62ch;
  margin: 0 0 3rem;
  color: var(--ash);
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  line-height: 1.55;
}
.section--close .intro { margin-inline: auto; }

.lede {
  max-width: 40ch;
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -.01em;
}
.lede--dim { color: var(--muted); }
.lede em { font-style: italic; color: var(--ember-soft); }

.note {
  color: var(--muted);
  font-size: .92rem;
  max-width: 58ch;
}

p { margin: 0 0 1.15rem; }

.cols {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.cols--wide { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) {
  .cols, .cols--wide { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- SPEC LIST */

.speclist {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  border-top: 1px solid var(--line);
}
.speclist li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.speclist span { color: var(--muted); }
.speclist b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------------------------------- SCALE LINE */

.scaleline {
  margin: clamp(3rem, 7vh, 5rem) 0 0;
  padding: 0;
}
.scaleline figcaption {
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .9rem;
}
.scaleline__bar {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.scaleline__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, #2a2a30, var(--ember));
  transition: width 1.1s var(--ease);
}
.reveal.in .scaleline__fill,
.scaleline.in .scaleline__fill { width: 100%; }
.scaleline__label {
  margin: .9rem 0 0;
  color: var(--ash);
  max-width: 52ch;
  font-size: .95rem;
}

/* ---------------------------------------------------------- PYROLYSIS */

.pyro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.pyro__step {
  position: relative;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--line);
}
.pyro__step h3 {
  margin: .2rem 0 .7rem;
  font-size: 1.1rem;
  font-weight: 500;
}
.pyro__step p { font-size: .95rem; color: var(--ash); margin-bottom: .7rem; }
.pyro__num {
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--muted);
}
.pyro__meta {
  margin: 0;
  font-size: .8rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.pyro__step--hot { border-top-color: var(--ember); }
.pyro__step--hot h3 { color: var(--ember-soft); }

/* the numbered steps carry the sequence on their own */
.pyro__arrow { display: none; }

@media (max-width: 900px) {
  .pyro { grid-template-columns: 1fr; }
}

.splitbar {
  display: flex;
  gap: 1px;
  height: 44px;
  margin-bottom: 1.4rem;
}
.splitbar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}
/* only the subject of the page carries the accent; the co-products stay neutral */
.splitbar__seg--char { flex: 30; background: var(--ember); color: #140a04; }
.splitbar__seg--gas  { flex: 35; background: #33333a; color: var(--ash); }
.splitbar__seg--oil  { flex: 35; background: #212127; color: var(--ash); }

/* ---------------------------------------------------------- CARDS */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.card {
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  transition: background .4s var(--ease);
}
.card:hover { background: #0f0f13; }
.card h3 {
  margin: 0 0 .8rem;
  font-size: 1.1rem;
  font-weight: 500;
}
.card p { margin: 0; color: var(--ash); font-size: .97rem; }

/* ---------------------------------------------------------- STATS */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(3.5rem, 9vh, 6rem);
}
.stat {
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}
.stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ember-soft);
  font-variant-numeric: tabular-nums;
  margin-bottom: .7rem;
}
.stat span {
  display: block;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

.xlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.xlist li {
  position: relative;
  padding: 0 0 1rem 1.5rem;
  color: var(--ash);
  font-size: .97rem;
}
.xlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--ember);
}
.xlist b { color: var(--text); font-weight: 500; }

.pull {
  margin: 0;
  padding: clamp(2rem, 5vw, 3rem) 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.28;
  max-width: 30ch;
  color: var(--text);
}

/* ---------------------------------------------------------- USES */

.uses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
}
.use b {
  display: block;
  font-weight: 500;
  font-size: 1.05rem;
  padding-bottom: .7rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.use p { margin: 0; color: var(--ash); font-size: .95rem; }

/* ---------------------------------------------------------- FAQ */

.qa {
  border-bottom: 1px solid var(--line);
}
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 2.5rem 1.4rem 0;
  position: relative;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  font-weight: 400;
  transition: color .25s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--ember-soft); }
.qa summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 1px solid var(--ember);
  border-bottom: 1px solid var(--ember);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.qa[open] summary::after { transform: rotate(-135deg); }
.qa p {
  margin: 0 0 1.5rem;
  max-width: 68ch;
  color: var(--ash);
  font-size: .98rem;
}

/* ---------------------------------------------------------- FOOTER */

.footer {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 8vh, 5rem) 0 clamp(2rem, 5vh, 3rem);
  background: var(--ink-2);
}
.footer__row {
  display: flex;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.footer__logo {
  display: block;
  width: clamp(120px, 14vw, 170px);
  height: auto;
  opacity: .85;
  transition: opacity .3s var(--ease);
}
.footer__logo:hover { opacity: 1; }
.footer__note {
  margin: 0;
  flex: 1 1 340px;
  color: var(--muted);
  font-size: .88rem;
  max-width: 60ch;
}
.footer__small {
  margin: 0;
  color: #5f5c58;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- REVEAL */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .dot, .hero__scrollcue i { animation: none; }
  .scaleline__fill { transition: none; width: 100%; }
}

/* ============================================================
   Secondary pages: videos, blog index, articles
   ============================================================ */

/* ---------------------------------------------------------- page head */

.phead {
  padding: clamp(7rem, 16vh, 11rem) 0 clamp(2.5rem, 6vh, 4rem);
  background: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.phead__title {
  margin: .4rem 0 1.4rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.phead__sub {
  max-width: 56ch;
  margin: 0;
  color: var(--ash);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.25rem);
  line-height: 1.55;
}

.section--tight {
  padding: clamp(3rem, 8vh, 5rem) 0 clamp(5rem, 12vh, 8rem);
  border-top: 0;
}
.center { text-align: center; }
.h2--center { margin-inline: auto; }
.empty { color: var(--muted); }

.btn {
  display: inline-block;
  margin-top: .5rem;
  padding: .8rem 1.5rem;
  border: 1px solid rgba(255, 106, 43, .5);
  border-radius: 999px;
  color: var(--ember-soft);
  text-decoration: none;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { background: var(--ember); border-color: var(--ember); color: #140a04; }

/* ---------------------------------------------------------- filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.chip {
  padding: .5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  letter-spacing: .05em;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.chip:hover { color: var(--text); border-color: rgba(255, 255, 255, .25); }
.chip.is-on {
  color: var(--ember-soft);
  border-color: rgba(255, 106, 43, .55);
  background: rgba(255, 106, 43, .08);
}

/* ---------------------------------------------------------- video cards */

.vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.vcard { min-width: 0; }
.vcard.is-off { display: none; }
.vcard--featured { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.vcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #101014;
}

.vcard__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.vcard__play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .4s var(--ease), transform .6s var(--ease);
}
.vcard__play:hover img { opacity: 1; transform: scale(1.03); }

.vcard__icon {
  position: relative;
  z-index: 1;
  width: clamp(52px, 6vw, 74px);
  height: clamp(52px, 6vw, 74px);
  border-radius: 50%;
  border: 1px solid rgba(255, 106, 43, .55);
  background: rgba(10, 10, 12, .55);
  display: grid;
  place-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.vcard__icon::before {
  content: "";
  border-left: 13px solid var(--ember);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 4px;
  transition: border-left-color .3s var(--ease);
}
.vcard__play:hover .vcard__icon { background: var(--ember); border-color: var(--ember); transform: scale(1.06); }
.vcard__play:hover .vcard__icon::before { border-left-color: #140a04; }
.vcard__play:focus-visible .vcard__icon { outline: 2px solid var(--ember-soft); outline-offset: 4px; }

.vcard__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  display: block;
}

.vcard__dur,
.vcard__badge {
  position: absolute;
  z-index: 2;
  bottom: .7rem;
  right: .7rem;
  padding: .25rem .55rem;
  border-radius: 5px;
  background: rgba(6, 6, 8, .8);
  color: var(--ash);
  font-size: .74rem;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.vcard__badge {
  left: .7rem;
  right: auto;
  top: .7rem;
  bottom: auto;
  color: var(--ember-soft);
  border: 1px solid rgba(255, 106, 43, .35);
  text-transform: uppercase;
}
.vcard.is-playing .vcard__dur { display: none; }

/* shown in place of the player when a local file cannot be loaded */
.vcard__error {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  background: #0b0b0e;
  color: var(--muted);
  font-size: .9rem;
}

.vcard--planned .vcard__media {
  background: repeating-linear-gradient(-45deg, #0e0e12 0 12px, #0b0b0e 12px 24px);
  opacity: .75;
}
.vcard--planned .vcard__body { opacity: .62; }

.vcard__body { padding: 1.1rem .2rem 0; }
.vcard__meta {
  margin: 0 0 .5rem;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.vcard__body h3 {
  margin: 0 0 .6rem;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.005em;
}
.vcard--featured .vcard__body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 3rem);
  line-height: 1.05;
}
.vcard__blurb { margin: 0; color: var(--ash); font-size: .95rem; }
.vcard--featured .vcard__blurb { max-width: 60ch; font-size: 1.02rem; }

/* ---------------------------------------------------------- blog list */

.postlist { border-top: 1px solid var(--line); }

.post {
  display: block;
  padding: clamp(1.6rem, 4vh, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left .4s var(--ease), background .4s var(--ease);
}
.post:hover { padding-left: 1rem; }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 0 0 .7rem;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.post__tag { color: var(--ember); }
.post__by { color: var(--ash); }

.post__title {
  margin: 0 0 .7rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  max-width: 26ch;
}
.post--featured .post__title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); }

.post__excerpt {
  margin: 0 0 .9rem;
  max-width: 68ch;
  color: var(--ash);
  font-size: .99rem;
}
.post--featured .post__excerpt { font-size: 1.08rem; max-width: 62ch; }

.post__more {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember);
}
.post__more::after { content: " \2192"; }

/* ---------------------------------------------------------- article */

.article { padding: clamp(5.5rem, 13vh, 8rem) 0 clamp(5rem, 12vh, 8rem); }
.article .wrap { max-width: 720px; }

.article__title {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  margin-top: .6rem;
}

.crumb {
  margin: 0 0 2rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ember); }

.article__body {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.19rem);
  line-height: 1.72;
  color: #dcd8d2;
}
.article__body h2 {
  margin: 2.8rem 0 1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
}
.article__body h3 {
  margin: 2rem 0 .7rem;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--text);
}
.article__body p { margin: 0 0 1.3rem; }
.article__body a { color: var(--ember-soft); text-decoration: underline; text-underline-offset: 3px; }
.article__body ul, .article__body ol { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.article__body li { margin-bottom: .6rem; }
.article__body strong { color: var(--text); font-weight: 500; }
.article__body blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--ember);
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--text);
}
.article__body figure { margin: 2.2rem 0; }
.article__body img { width: 100%; height: auto; border-radius: 4px; display: block; }
.article__body figcaption { margin-top: .7rem; font-size: .85rem; color: var(--muted); }
.article__body hr { margin: 2.6rem 0; border: 0; border-top: 1px solid var(--line); }
.article__body code {
  font-size: .92em;
  background: #16161b;
  padding: .1em .4em;
  border-radius: 4px;
}

/* fields the owner still has to fill in — deliberately loud */
.todo {
  background: rgba(255, 106, 43, .14);
  border-bottom: 1px dashed var(--ember);
  color: var(--ember-soft);
  padding: 0 .25em;
  font-style: normal;
}

.legal-meta {
  margin: 0 0 2.5rem;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  border-top: 1px solid var(--line);
}
.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.contact-list dt,
.contact-list .k {
  min-width: 7.5rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list .v { font-size: 1.05rem; }
.contact-list a { color: var(--ember-soft); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.article__foot {
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.article__foot p { margin: 0; color: var(--muted); font-size: .9rem; max-width: 46ch; }

.footer__small a { color: inherit; text-decoration: none; }
.footer__small a:hover { color: var(--ember); }

/* ---------------------------------------------------------- home: doors to videos / blog */

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.door {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: border-top-color .35s var(--ease);
}
.door:hover { border-top-color: var(--ember); }

/* the serif label already says which door this is */
.door__icon {
  display: none;
}
.door__icon::before {
  content: "";
  border-left: 11px solid var(--ember);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}
.door__icon--doc { border-radius: 6px; }
.door__icon--doc::before {
  border: 0;
  margin: 0;
  width: 16px;
  height: 2px;
  background: var(--ember);
  box-shadow: 0 -5px 0 var(--ember), 0 5px 0 rgba(255, 106, 43, .5);
}

.door__label {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1;
}
.door__text { color: var(--ash); font-size: .97rem; }
.door__more {
  margin-top: .4rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember);
}
.door__more::after { content: " \2192"; }

/* ---------------------------------------------------------- inner pages */

/* the breadcrumb strip: same clearance under the fixed nav, but no title */
.phead--slim {
  padding: clamp(6rem, 13vh, 8.5rem) 0 0;
  border-bottom: 0;
}

/* a section heading promoted to page title keeps the serif display size */
.h2--page {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}

.inline-link {
  color: var(--ember-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 178, 122, .35);
  transition: color .2s, border-color .2s;
}
.inline-link:hover { color: var(--ember); border-color: var(--ember); }

/* ---------------------------------------------------------- footer sitemap */

.footer__map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem 1.5rem;
  margin: 3rem 0 2.5rem;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--line);
}
.footer__col { display: flex; flex-direction: column; gap: .55rem; }
.footer__col h3 {
  margin: 0 0 .4rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__col a {
  color: var(--ash);
  font-size: .93rem;
  text-decoration: none;
  transition: color .2s;
}
.footer__col a:hover { color: var(--ember); }


/* ---------------------------------------------------------- WordPress block content */
/* .article__body renders whatever the block editor produced. These rules
   make core blocks look native to the design without editors having to
   pick a custom CSS class for every block. */

.article__body img { max-width: 100%; height: auto; border-radius: 4px; }
.article__body figure { margin: 2rem 0; }
.article__body figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); }

.article__body .wp-block-quote,
.article__body blockquote.pull {
  margin: 2.4rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 3px solid var(--ember);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.4;
  color: var(--text);
}
.article__body .wp-block-quote cite {
  display: block;
  margin-top: .6rem;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--muted);
  font-style: normal;
}

/* core/media-text — the photo + text sections on About-style pages.
   Left at 720px prose width these read as a cramped sidebar photo, so
   from tablet up the block breaks out to the site's full --maxw and
   gets a big cropped image + a large serif heading, closer to a proper
   feature section than a block-editor default. */
.article__body .wp-block-media-text {
  gap: clamp(2rem, 5vw, 4.5rem);
  margin: clamp(4rem, 9vw, 7.5rem) 0;
}
@media (min-width: 900px) {
  .article__body .wp-block-media-text {
    width: calc(100% + (var(--maxw) - 720px));
    margin-left: calc((720px - var(--maxw)) / 2);
    margin-right: calc((720px - var(--maxw)) / 2);
  }
}
.article__body .wp-block-media-text__media { margin: 0; }
.article__body .wp-block-media-text__media img,
.article__body .wp-block-media-text__media video {
  width: 100%;
  height: clamp(320px, 42vw, 560px);
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.article__body .wp-block-media-text__content {
  padding: 0;
}
.article__body .wp-block-media-text__content h1,
.article__body .wp-block-media-text__content h2,
.article__body .wp-block-media-text__content h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
  color: var(--text);
}
.article__body .wp-block-media-text__content p {
  color: var(--ash);
}
.article__body .wp-block-media-text__content > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .article__body .wp-block-media-text__media img,
  .article__body .wp-block-media-text__media video {
    height: 62vw;
  }
}

/* the core/details block is how the FAQ page's questions are authored —
   same look as the hand-built .qa accordion on the static site */
.article__body details,
.article__body .wp-block-details {
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.article__body details summary,
.article__body .wp-block-details summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 2.5rem 1.4rem 0;
  position: relative;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  transition: color .25s;
}
.article__body details summary::-webkit-details-marker,
.article__body .wp-block-details summary::-webkit-details-marker { display: none; }
.article__body details summary:hover,
.article__body .wp-block-details summary:hover { color: var(--ember-soft); }
.article__body details summary::after,
.article__body .wp-block-details summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--ember);
  border-bottom: 2px solid var(--ember);
  transform: rotate(45deg);
  transition: transform .25s;
}
.article__body details[open] summary::after,
.article__body .wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.article__body details > *:not(summary),
.article__body .wp-block-details > *:not(summary) { padding-bottom: 1.4rem; color: var(--ash); }

.article__body ul, .article__body ol { padding-left: 1.4em; color: var(--ash); }
.article__body li { margin: .35em 0; }
.article__body hr { margin: 2.6rem 0; border: 0; border-top: 1px solid var(--line); }
.article__body code {
  font-size: .92em;
  background: #16161b;
  padding: .1em .4em;
  border-radius: 4px;
}

/* Offerings presented as feature cards, side by side on wide screens — the
   "service as product" layout the owner asked for, minus a price (contact
   instead) and minus a photo he doesn't have yet. Reuses the door's
   bordered-card language rather than inventing a new visual style. The Shop
   page's product-cards share the exact same layout, plus a price line. */
.service-cards,
.product-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
  margin: clamp(2.5rem, 6vw, 4rem) 0;
}
/* The article column is 720px, too narrow for two comfortable cards —
   break out to the site's full --maxw, same trick used for Media & Text. */
@media (min-width: 900px) {
  .service-cards,
  .product-cards {
    width: calc(100% + (var(--maxw) - 720px));
    margin-left: calc((720px - var(--maxw)) / 2);
    margin-right: calc((720px - var(--maxw)) / 2);
  }
}
.service-card,
.product-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
}
.service-card .btn,
.product-card .btn { margin-top: auto; align-self: flex-start; }
.service-card__title,
.product-card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 1.3rem;
  color: var(--text);
}
.service-card__body p { margin: 0 0 1.2rem; color: var(--ash); }
.service-card__body p:last-of-type { margin-bottom: 1.8rem; }
.product-card__price {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ember);
  margin: 0 0 1.2rem;
}
.product-card__body p { margin: 0 0 1.8rem; color: var(--ash); }

/* ---------------------------------------------------------- pagination */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .5rem;
  border-radius: 6px;
  font-size: .9rem;
  color: var(--ash);
  text-decoration: none;
}
.pagination a:hover { color: var(--text); background: rgba(255, 106, 43, .12); }
.pagination .current { color: var(--ink); background: var(--ember); font-weight: 600; }