/* geozl — site styles
   One stylesheet for every page: landing, inner pages, codec catalog and
   codec detail. codecs.css just @imports this so the codec pages stay on
   a single source of truth. */

:root{
  --paper:#F1EDE4;
  --paper-2:#EAE4D8;
  --desk:#D8D1C4;
  --ink:#17161C;
  --ink-2:#625D53;
  --line:rgba(23,22,28,.28);
  --line-strong:rgba(23,22,28,.48);

  --purple:#4A2BE8;
  --gold:#F7CC0C;
  --green:#A9FFA6;
  --orange:#FE6B37;
  --wine:#7B164F;

  --page:var(--purple);
  --duration:180ms;
  --ease:cubic-bezier(.22,.7,.2,1);

  --tint-add:color-mix(in srgb,var(--purple) 15%,var(--paper));
  --tint-sub:color-mix(in srgb,var(--orange) 18%,var(--paper));
}

@view-transition{ navigation:auto; }

*{ box-sizing:border-box; }
html{ min-height:100%; }
body{
  margin:0;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,2.6vw,34px);
  color:var(--ink);
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.34), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(23,22,28,.045), transparent 30%),
    var(--desk);
  font-family:"Space Grotesk",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.mono{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace; }
a{ color:inherit; text-decoration:none; }
svg,img{ display:block; max-width:100%; }

/* Sheet + corner marks */
.sheet{
  position:relative;
  width:min(1240px,100%);
  min-height:min(860px,calc(100svh - clamp(32px,5.2vw,68px)));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 18%),
    var(--paper);
  border:1px solid var(--line-strong);
}
.reg{
  position:absolute;
  z-index:5;
  color:var(--ink);
  opacity:.28;
  font:13px/1 "IBM Plex Mono",monospace;
  pointer-events:none;
}
.reg.tl{ top:11px; left:14px; }
.reg.tr{ top:11px; right:14px; }
.reg.bl{ bottom:11px; left:14px; }
.reg.br{ bottom:11px; right:14px; }

.vt-lockup{ view-transition-name:geozl-lockup; }

/* Masthead + nav (shared by landing, inner pages, catalog) */
.masthead{
  position:relative;
  z-index:3;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:13px clamp(22px,3vw,38px);
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
  font-size:11px;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.masthead::after{
  content:"";
  position:absolute;
  left:0;
  right:auto;
  bottom:-1px;
  width:clamp(90px,14vw,180px);
  height:1px;
  background:var(--page);
}
.landing .masthead::after{ left:auto; right:0; background:var(--ink); opacity:.48; }

.status{ white-space:nowrap; }
.masthead .status .dot{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  vertical-align:1px;
  background:var(--green);
  border:1px solid var(--ink);
}

.lockup{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--ink);
  text-decoration:none;
}
.lockup .marksvg{ width:30px; height:auto; flex:0 0 auto; }
.lockup .wm-sm{
  font-size:24px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.035em;
  text-transform:none;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
}
.nav a{
  position:relative;
  padding:8px 10px;
  border:1px solid transparent;
  color:var(--ink-2);
  font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.015em;
  text-decoration:none;
  text-transform:none;
  transition:color var(--duration) var(--ease),background var(--duration) var(--ease),border-color var(--duration) var(--ease);
}
.nav a:hover{
  color:var(--ink);
  border-color:var(--line);
  background:rgba(255,255,255,.18);
}
/* The masthead marks which section you are in, so it follows the section and not
   the page tint. They match everywhere except the codec pages, which tint
   themselves by codec family while still living under Docs. */
body:has(main.codoc){ --nav:var(--purple); }
.nav a.here{
  padding-left:23px;
  color:var(--ink);
  border-color:var(--line-strong);
  background:color-mix(in srgb,var(--nav,var(--page)) 11%,transparent);
}
.nav a.here::before{
  content:"";
  position:absolute;
  left:9px;
  top:50%;
  width:7px;
  height:7px;
  transform:translateY(-50%);
  background:var(--nav,var(--page));
  border:1px solid var(--ink);
}

/* Kicker (shared) */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 20px;
  color:var(--ink-2);
  font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.085em;
  text-transform:uppercase;
}
.kicker .k-sq{ width:10px; height:10px; background:var(--page); border:1px solid var(--ink); }
.kicker .sep{ opacity:.5; }

/* Underline mark (shared) */
.u{ box-shadow:inset 0 -.09em 0 var(--page); }

/* Landing hero */
.hero{
  position:relative;
  flex:1 1 auto;
  min-height:360px;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(330px,.85fr);
  border-bottom:1px solid var(--line-strong);
}
.hero-id{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:22px;
  padding:clamp(46px,6vw,86px) clamp(28px,5vw,70px);
  border-right:1px solid var(--line);
}
.hero-id::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(43vw,520px);
  aspect-ratio:1;
  right:-16%;
  top:-42%;
  border:1px solid rgba(23,22,28,.10);
  transform:rotate(31deg);
}
.hero-id::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(31vw,390px);
  aspect-ratio:1;
  right:-7%;
  top:-29%;
  border:1px solid rgba(23,22,28,.12);
  transform:rotate(31deg);
}
.lockup-hero{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.5vw,30px);
}
.marksvg-lg{
  width:clamp(68px,8.5vw,104px);
  height:auto;
  flex:0 0 auto;
}
.wordmark{
  margin:0;
  font-size:clamp(70px,10vw,130px);
  font-weight:600;
  line-height:.8;
  letter-spacing:-.055em;
}
.tagline{
  max-width:34ch;
  margin:0 0 2px;
  color:var(--ink-2);
  font-size:clamp(16px,1.65vw,20px);
  line-height:1.4;
}

/* Landing spec panel — scoped to .hero so it never clashes with the
   codec-detail .spec definition list below. */
.hero .spec{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:rgba(255,255,255,.10);
}
.hero .spec::before{
  content:"";
  position:absolute;
  inset:20px 24px auto auto;
  width:98px;
  height:98px;
  background:url("../svg/mark.svg") center/contain no-repeat;
  opacity:.045;
  pointer-events:none;
}
.hero .spec-row{
  position:relative;
  display:grid;
  grid-template-columns:84px 1fr;
  align-items:baseline;
  gap:18px;
  padding:17px clamp(24px,3vw,38px);
  border-bottom:1px solid var(--line);
  font-size:13px;
  transition:background var(--duration) var(--ease);
}
.hero .spec-row:last-child{ border-bottom:0; }
.hero .spec-row:nth-child(even){ background:rgba(255,255,255,.12); }
.hero .spec-row:hover{ background:rgba(255,255,255,.34); }
.hero .spec-row:nth-child(4) .v{ color:var(--purple); }
.hero .spec-row .k{
  color:var(--ink-2);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero .spec-row .v{
  color:var(--ink);
  font-weight:500;
  text-align:right;
}

/* Landing index — asymmetric on desktop */
.index{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:104px;
  border-left:1px solid var(--line);
}
.idx{
  --accent:var(--ink-2);
  --on:#F5F1E8;
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 18px;
  overflow:hidden;
  color:var(--ink);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:background var(--duration) var(--ease),color var(--duration) var(--ease),transform var(--duration) var(--ease);
}
.idx.doc{ grid-column:span 4; grid-row:span 2; padding:22px; }
.idx.hi,.idx.lo,.idx.bench,.idx.links{ grid-column:span 4; }
.idx-top{ display:flex; align-items:center; justify-content:space-between; }
.idx .sq{
  width:13px;
  height:13px;
  background:var(--accent);
  border:1px solid var(--ink);
}
.idx.doc .sq{ width:18px; height:18px; }
.idx .no{ color:var(--ink-2); font-size:11px; }
.idx-body{ margin-top:auto; padding-right:24px; }
.idx-name{
  font-size:17px;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.018em;
}
.idx.doc .idx-name{ max-width:8ch; font-size:clamp(28px,3vw,42px); line-height:.96; }
.idx-tag{ margin-top:5px; color:var(--ink-2); font-size:10px; letter-spacing:.025em; }
.idx-cta{
  position:absolute;
  right:17px;
  bottom:17px;
  opacity:.44;
  transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease);
}
.idx-cta svg{ width:17px; height:17px; }
.idx.doc .idx-cta svg{ width:22px; height:22px; }
.idx:hover,.idx:focus-visible{
  z-index:2;
  color:var(--on);
  background:var(--accent);
  outline:none;
}
.idx:hover .no,.idx:focus-visible .no,
.idx:hover .idx-tag,.idx:focus-visible .idx-tag{ color:var(--on); opacity:.8; }
.idx:hover .sq,.idx:focus-visible .sq{ background:var(--on); border-color:var(--on); }
.idx:hover .idx-cta,.idx:focus-visible .idx-cta{ opacity:1; transform:translateX(3px); }
.idx:focus-visible{ box-shadow:inset 0 0 0 2px var(--ink); }

.idx.doc{ --accent:var(--purple); --on:#F6F2EA; }
.idx.hi{ --accent:var(--gold); --on:#17161C; }
.idx.lo{ --accent:var(--green); --on:#17161C; }
.idx.bench{ --accent:var(--orange); --on:#17161C; }
.idx.links{ --accent:var(--wine); --on:#F6F2EA; }
.idx.doc,.idx.links{ transition:none; }

/* Inner pages */
body:not(.landing) .sheet{ min-height:min(820px,calc(100svh - clamp(32px,5.2vw,68px))); }
.page{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(320px,.82fr);
  grid-template-rows:auto auto 1fr;
  column-gap:clamp(44px,6vw,88px);
  padding:clamp(50px,6.5vw,88px) clamp(28px,5vw,70px);
}
.page::before{
  content:"";
  position:absolute;
  left:calc(62% - 1px);
  top:0;
  bottom:0;
  width:1px;
  background:var(--line);
  pointer-events:none;
}
.page .kicker{ grid-column:1; grid-row:1; justify-self:start; margin:0 0 clamp(28px,4vw,48px); }
.page h1{
  grid-column:1;
  grid-row:2;
  max-width:11ch;
  margin:0 0 25px;
  font-size:clamp(48px,6.7vw,88px);
  font-weight:600;
  line-height:.93;
  letter-spacing:-.052em;
}
.page .lead{
  grid-column:1;
  grid-row:3;
  align-self:start;
  max-width:49ch;
  margin:0;
  color:var(--ink-2);
  font-size:clamp(16px,1.55vw,19px);
  line-height:1.58;
}

/* Inner: work-in-progress panel */
.soon{
  position:relative;
  grid-column:2;
  grid-row:1 / 4;
  min-height:360px;
  display:flex;
  align-items:flex-end;
  gap:14px;
  overflow:hidden;
  padding:clamp(28px,4vw,46px);
  color:var(--ink-2);
  background:color-mix(in srgb,var(--page) 9%,rgba(255,255,255,.15));
  border:1px solid var(--line-strong);
  font:400 12px/1.65 "IBM Plex Mono",monospace;
}
.soon::before{
  content:"";
  position:absolute;
  top:clamp(28px,4vw,44px);
  right:clamp(28px,4vw,44px);
  width:min(46%,160px);
  aspect-ratio:1;
  background:url("../svg/mark.svg") center/contain no-repeat;
  opacity:.075;
}
.soon::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent calc(100% - 1px),rgba(23,22,28,.065) 0),
    linear-gradient(transparent calc(100% - 1px),rgba(23,22,28,.065) 0);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
  pointer-events:none;
}
.soon .s-sq{
  position:relative;
  z-index:1;
  width:10px;
  height:10px;
  flex:0 0 auto;
  margin-top:5px;
  background:var(--page);
  border:1px solid var(--ink);
}
.soon code{ color:var(--ink); }
.soon > *,.soon{ position:relative; z-index:1; }

/* Links page */
.page-links .lead{ margin-bottom:0; }
.linklist{
  grid-column:2;
  grid-row:1 / 4;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.1);
}
.linkrow{
  position:relative;
  flex:1 1 0;
  min-height:112px;
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px clamp(22px,3vw,36px);
  overflow:hidden;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:background var(--duration) var(--ease),color var(--duration) var(--ease);
}
.linkrow:last-child{ border-bottom:0; }
.linkrow::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:var(--page);
  opacity:.1;
  transition:width var(--duration) var(--ease);
}
.linkrow:hover,.linkrow:focus-visible{ background:rgba(255,255,255,.30); outline:none; }
.linkrow:hover::after,.linkrow:focus-visible::after{ width:7px; }
.linkrow:focus-visible{ box-shadow:inset 0 0 0 2px var(--ink); }
.linkrow .logo{ position:relative; z-index:1; max-width:58%; height:28px; width:auto; flex:0 0 auto; }
.lk-meta{
  position:relative;
  z-index:1;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
}
.lk-desc{ color:var(--ink-2); font-size:10px; letter-spacing:.03em; white-space:nowrap; }
.lk-arrow{ color:var(--ink-2); transition:transform var(--duration) var(--ease),color var(--duration) var(--ease); }
.lk-arrow svg{ width:19px; height:19px; }
.linkrow:hover .lk-arrow,.linkrow:focus-visible .lk-arrow{ color:var(--ink); transform:translate(3px,-3px); }

/* Footer */
.colophon{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:13px clamp(22px,3vw,38px);
  color:var(--ink-2);
  border-top:1px solid var(--line-strong);
  font:400 11px/1.4 "IBM Plex Mono",monospace;
}
/* Codec-page footer (status bar with family + ctid) */
.footer{
  padding:clamp(18px,2.4vw,26px) clamp(28px,5vw,70px); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:14px;
  font:400 11px/1 "IBM Plex Mono",monospace; color:var(--ink-2);
}
.footer .ct{ color:var(--ink); }

/* Codec pager, walks prev and next through the catalog order */
.pager{ --pg-pad:clamp(10px,1.4vw,15px); align-items:center; gap:12px; padding-block:var(--pg-pad); min-height:calc(44px + 2*var(--pg-pad)); }
.pg{
  display:inline-flex; align-items:center; gap:11px; padding:9px 12px;
  color:var(--ink-2); border:1px solid transparent;
  transition:color var(--duration) var(--ease),border-color var(--duration) var(--ease),background var(--duration) var(--ease);
}
.pg:hover{ color:var(--ink); border-color:var(--line); background:rgba(255,255,255,.22); }
.pg:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--ink); }
.pg svg{ width:15px; height:15px; flex:0 0 auto; transition:transform var(--duration) var(--ease); }
.pg.prev:hover svg{ transform:translateX(-3px); }
.pg.next:hover svg{ transform:translateX(3px); }
.pg-fam{ width:7px; height:7px; flex:0 0 auto; background:var(--fam,var(--purple)); border:1px solid var(--ink); }
.pg-lab{ display:flex; flex-direction:column; gap:4px; line-height:1; }
.pg.next .pg-lab{ align-items:flex-end; }
.pg-k{ font:500 9px/1 "IBM Plex Mono",monospace; letter-spacing:.11em; text-transform:uppercase; opacity:.62; }
.pg-n{ color:var(--ink); font:600 13px/1 "Space Grotesk",system-ui,sans-serif; letter-spacing:-.02em; }
.pg-mid{ color:var(--ink-2); }

/* Catalog (docs) — sheet-height, card grid scrolls when the codecs outgrow it */
.is-catalog .sheet{
  height:min(760px,calc(100svh - clamp(32px,5.2vw,68px)));
}
.cat{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  padding:clamp(30px,3.8vw,54px) clamp(28px,5vw,70px) clamp(22px,3vw,38px);
}
.cat-head{ flex:0 0 auto; margin-bottom:clamp(30px,3.6vw,52px); }
.cat h1{
  margin:0 0 13px; max-width:18ch;
  font-size:clamp(34px,4.6vw,60px); font-weight:600;
  line-height:.94; letter-spacing:-.05em;
}
.cat-lead{ margin:0; max-width:62ch; color:var(--ink-2); font-size:clamp(15px,1.45vw,18px); line-height:1.52; }

.catalog{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:clamp(22px,2.6vw,32px); }

.legend{
  flex:0 0 auto; display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); margin:0;
  color:var(--ink-2); font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.085em; text-transform:uppercase;
}
.legend .lg{ display:inline-flex; align-items:center; gap:8px; }
.legend .lg-sq{ width:9px; height:9px; flex:0 0 auto; background:var(--fam,var(--purple)); border:1px solid var(--ink); }
.legend .lg b{ color:var(--ink); font-weight:600; }
.legend .legend-count{ margin-left:auto; opacity:.6; }

.cards{
  flex:0 1 auto; min-height:0;
  overflow-y:auto; scrollbar-width:thin; align-content:start;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(126px,15.5vh,152px);
  gap:clamp(14px,1.6vw,20px);
}
/* If a future codec pushes past the last row, fade the cut edge so it reads as
   more below rather than a clipped layout. Purely additive, the grid is sized
   to fit twelve without ever reaching this. */
@supports (animation-timeline:scroll()){
  .cards{
    animation:cards-fade linear both;
    animation-timeline:scroll(self block);
    animation-range:contain;
  }
  @keyframes cards-fade{
    from{ mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent); }
    to{ mask-image:linear-gradient(to bottom,#000 100%,#000); }
  }
}
.card{
  --fam:var(--purple); position:relative; display:flex; flex-direction:column; gap:8px;
  min-height:0; padding:16px 18px; overflow:hidden; color:var(--ink);
  border:1px solid var(--line);
  transition:background var(--duration) var(--ease),transform var(--duration) var(--ease);
}
.card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--fam); opacity:.85; }
.card-top{ display:flex; align-items:center; justify-content:space-between; }
.card-no{ font:600 11px/1 "IBM Plex Mono",monospace; color:var(--fam); }
.card-ct{ font:500 10px/1 "IBM Plex Mono",monospace; color:var(--ink-2); }
.card-name{ font-size:clamp(20px,2.4vw,27px); font-weight:600; letter-spacing:-.03em; line-height:1; }
.card-what{ margin:0; margin-top:auto; color:var(--ink-2); font-size:12.5px; line-height:1.45; }
.card-cta{
  position:absolute; right:14px; bottom:12px; opacity:0; color:var(--fam);
  transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease);
}
.card-cta svg{ width:16px; height:16px; }
.card:hover{ background:color-mix(in srgb,var(--fam) 9%,transparent); }
.card:hover .card-cta{ opacity:1; transform:translateX(2px); }
.card:focus-visible{ box-shadow:inset 0 0 0 2px var(--ink); outline:none; }

/* Codec detail — padding in one var so the divider matches it */
.codoc{
  position:relative; flex:1 1 auto; min-height:0; display:grid;
  --codoc-pad-y:clamp(30px,4vw,50px);
  grid-template-columns:minmax(0,1.02fr) minmax(340px,.98fr);
  column-gap:clamp(40px,6vw,84px); align-items:center;
  padding:var(--codoc-pad-y) clamp(28px,5vw,70px);
}
.codoc::before{
  content:""; position:absolute; left:calc(58% - 1px); top:var(--codoc-pad-y);
  bottom:var(--codoc-pad-y); width:1px; background:var(--line); pointer-events:none;
}
h1.name{ margin:0 0 8px; font-size:clamp(38px,5.2vw,70px); font-weight:600; line-height:.92; letter-spacing:-.05em; }
.subtitle{ margin:0 0 24px; font-size:clamp(16px,1.7vw,20px); color:var(--ink); font-weight:500; }
.desc{ margin:0 0 26px; max-width:50ch; color:var(--ink-2); font-size:clamp(15px,1.4vw,17px); line-height:1.62; }
.desc b{ color:var(--ink); font-weight:600; }

/* Codec spec list — scoped to .codoc (see landing .hero .spec above). */
.codoc .spec{ display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0 0 26px;
  font:500 12.5px/1.5 "IBM Plex Mono",monospace; }
.codoc .spec dt{ color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; font-size:11px; align-self:start; padding-top:2px; }
.codoc .spec dd{ margin:0; color:var(--ink); }

.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.btn-code{
  display:inline-flex; align-items:center; gap:9px; padding:11px 16px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  font:600 12.5px/1 "IBM Plex Mono",monospace; letter-spacing:.02em;
  transition:background var(--duration) var(--ease),color var(--duration) var(--ease);
}
.btn-code .arr{ width:13px; height:13px; }
.btn-code:hover{ background:transparent; color:var(--ink); }
.usage{ display:inline-block; background:color-mix(in srgb,var(--page) 12%,var(--paper));
  border:1px solid var(--line-strong); padding:10px 13px; font:500 12.5px/1 "IBM Plex Mono",monospace; color:var(--ink); }

/* Animation panel */
.panel{
  position:relative; justify-self:center; width:100%; max-width:360px;
  border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--page) 7%,rgba(255,255,255,.2)); padding:14px;
}
.panel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent calc(100% - 1px),rgba(23,22,28,.05) 0),
             linear-gradient(transparent calc(100% - 1px),rgba(23,22,28,.05) 0);
  background-size:30px 30px;
}
.panel svg{ position:relative; z-index:1; width:100%; height:auto; }
.panel .diagram{ position:relative; z-index:1; display:block; width:100%; aspect-ratio:var(--ar,360/220); }
.p-cap{ position:absolute; z-index:2; left:15px; bottom:12px; font:500 10px/1 "IBM Plex Mono",monospace;
  color:var(--ink-2); letter-spacing:.05em; }

/* SVG vocabulary shared across codec diagrams */
.tile{ fill:var(--paper); stroke:var(--ink); stroke-width:1.4; }
.tile-r{ fill:color-mix(in srgb,var(--purple) 11%,var(--paper)); stroke:var(--ink); stroke-width:1.4; }
.tv{ fill:var(--ink); font:600 16px/1 "IBM Plex Mono",monospace; text-anchor:middle; }
.rv{ fill:var(--purple); font:600 15px/1 "IBM Plex Mono",monospace; text-anchor:middle; }
.lab{ fill:var(--ink-2); font:500 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.05em; }
.nlab{ fill:var(--ink); font:600 10px/1 "IBM Plex Mono",monospace; text-anchor:middle; }
.cn{ fill:var(--ink-2); font:600 8.5px/1 "IBM Plex Mono",monospace; }
.br{ fill:var(--ink-2); font:500 11px/1 "IBM Plex Mono",monospace; }
.brA{ fill:var(--purple); font:600 11px/1 "IBM Plex Mono",monospace; }
.fx{ fill:var(--ink); font:600 12px/1 "IBM Plex Mono",monospace; }
.fx2{ fill:var(--ink-2); font:500 11.5px/1 "IBM Plex Mono",monospace; }
.dot{ fill:var(--paper); stroke:var(--ink); stroke-width:1.3; }
.cap{ fill:var(--ink-2); font:500 10.5px/1 "IBM Plex Mono",monospace; opacity:0; }
.di-a{ fill:color-mix(in srgb,var(--purple) 22%,var(--paper)); stroke:var(--ink); stroke-width:1.4; }
.di-b{ fill:color-mix(in srgb,var(--green) 48%,var(--paper)); stroke:var(--ink); stroke-width:1.4; }

/* Responsive */

/* Tablet */
@media (max-width:900px){
  body{ align-items:flex-start; padding:14px; }
  .sheet{ min-height:calc(100svh - 28px); }
  .hero{ grid-template-columns:1.2fr .9fr; }
  .wordmark{ font-size:clamp(68px,12vw,104px); }
  .index{ grid-auto-rows:98px; }
  .page{
    grid-template-columns:minmax(0,1fr) minmax(285px,.78fr);
    column-gap:34px;
    padding:48px 34px;
  }
  .page::before{ left:61%; }
  .nav a{ padding-inline:8px; }
  .nav a.here{ padding-left:20px; }
  .nav a.here::before{ left:7px; }
}

/* Phone and small tablet */
@media (max-width:760px){
  body{ padding:0; background:var(--paper); }
  .sheet{
    width:100%;
    min-height:100svh;
    border:0;
  }
  .reg{ display:none; }
  .masthead{
    min-height:58px;
    padding:12px 16px 12px 19px;
  }
  body:not(.landing) .masthead{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
  }
  .lockup .marksvg{ width:27px; }
  .lockup .wm-sm{ font-size:22px; }
  .nav{
    min-width:0;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    padding-left:10px;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ flex:0 0 auto; }
  .hero{
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    border-bottom:0;
  }
  .hero-id{
    min-height:310px;
    justify-content:center;
    padding:42px 22px 36px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .hero-id::before{ width:340px; right:-170px; top:-170px; }
  .hero-id::after{ width:240px; right:-105px; top:-105px; }
  .lockup-hero{ gap:17px; }
  .marksvg-lg{ width:58px; }
  .wordmark{ font-size:clamp(62px,20vw,90px); }
  .tagline{ max-width:30ch; font-size:16px; }
  .hero .spec-row{ padding:13px 20px; grid-template-columns:70px 1fr; }
  .index{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:116px;
  }
  .idx.doc{
    grid-column:1 / -1;
    grid-row:span 1;
    min-height:132px;
  }
  .idx.hi,.idx.lo,.idx.bench,.idx.links{ grid-column:span 1; }
  .idx.doc .idx-name{ max-width:none; font-size:25px; line-height:1; }
  .page{
    display:block;
    padding:42px 20px 48px 23px;
  }
  .page::before{ display:none; }
  .kicker{ margin-bottom:28px; }
  .page h1{ max-width:12ch; margin-bottom:20px; font-size:clamp(42px,13vw,64px); }
  .page .lead{ max-width:42ch; margin-bottom:34px; font-size:16px; }
  .soon{
    min-height:260px;
    padding:28px 24px;
  }
  .linklist{ min-height:360px; }
  .linkrow{ min-height:112px; padding:22px; }
  .colophon{
    justify-content:center;
    padding:16px 20px;
    text-align:center;
  }
  .footer{ padding-inline:18px; }
  .pager{ gap:4px; }
  .pg{ padding:8px 7px; gap:9px; }
}

@media (max-width:460px){
  .masthead{ font-size:9px; }
  .landing .masthead{ gap:12px; }
  .index{ grid-template-columns:1fr; grid-auto-rows:102px; }
  .idx.doc,.idx.hi,.idx.lo,.idx.bench,.idx.links{ grid-column:auto; }
  .idx.doc{ min-height:116px; }
  .idx.doc .idx-name{ font-size:24px; }
  .lk-desc{ display:none; }
  .linkrow .logo{ max-width:70%; height:26px; }
  .by{ flex-wrap:wrap; justify-content:center; }
  .pg-mid,.pg-fam{ display:none; }
  .pg-n{ font-size:12px; }
}

/* Catalog: short desktop shrinks the hero so three rows of cards keep their height */
@media (min-width:901px) and (max-height:880px){
  .cat{ padding-top:clamp(22px,3vw,40px); padding-bottom:20px; }
  .cat-head{ margin-bottom:30px; }
  .cat h1{ font-size:clamp(30px,3.4vw,46px); line-height:.96; margin-bottom:9px; }
  .cat-lead{ font-size:15px; line-height:1.44; max-width:66ch; }
  .catalog{ gap:18px; }
  .cards{ grid-auto-rows:clamp(120px,14vh,140px); }
  .card{ padding:13px 16px; }
  .card-name{ font-size:clamp(19px,2vw,24px); }
}
@media (min-width:901px) and (max-height:760px){
  .cat{ padding-top:26px; padding-bottom:18px; }
  .cat-head{ margin-bottom:22px; }
  .cat h1{ font-size:clamp(28px,3vw,40px); margin-bottom:7px; }
  .cat-lead{ line-height:1.4; }
  .catalog{ gap:14px; }
  /* 112px is the content floor, card-top + name + a two-line description */
  .cards{ grid-auto-rows:112px; gap:12px; }
  .card{ padding:11px 14px; gap:6px; }
  .card-name{ font-size:20px; }
  .card-what{ font-size:11.5px; line-height:1.38; }
}

/* Catalog: tablet + phone */
@media (max-width:900px){
  .is-catalog .sheet{ height:auto; min-height:calc(100svh - 28px); }
  .cat{ display:block; }
  .catalog{ display:block; }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; }
  .card{ min-height:120px; }
  .legend{ flex-wrap:wrap; margin-bottom:12px; }
}
@media (max-width:520px){
  .cards{ grid-template-columns:1fr; }
  .legend .legend-count{ width:100%; margin-left:0; }
}

/* Codec detail: short desktop tiers so masthead + content + footer fit */
@media (min-width:861px) and (max-height:900px){
  .codoc{ --codoc-pad-y:clamp(22px,2.8vw,36px); }
  h1.name{ font-size:clamp(32px,4vw,52px); margin-bottom:6px; }
  .subtitle{ margin-bottom:15px; font-size:clamp(15px,1.5vw,18px); }
  .desc{ margin-bottom:17px; line-height:1.5; font-size:clamp(14px,1.3vw,16px); }
  .codoc .spec{ margin-bottom:17px; gap:6px 18px; }
}
@media (min-width:861px) and (max-height:790px){
  .codoc{ --codoc-pad-y:20px; }
  h1.name{ font-size:clamp(28px,3.4vw,42px); margin-bottom:5px; }
  .subtitle{ margin-bottom:12px; font-size:16px; }
  .desc{ margin-bottom:13px; line-height:1.46; font-size:14px; }
  .codoc .spec{ margin-bottom:13px; gap:5px 18px; }
}
@media (min-width:861px) and (max-height:710px){
  .codoc{ --codoc-pad-y:15px; }
  h1.name{ font-size:clamp(26px,3vw,38px); margin-bottom:4px; }
  .subtitle{ margin-bottom:10px; }
  .desc{ margin-bottom:11px; line-height:1.42; font-size:13.5px; }
  .codoc .spec{ margin-bottom:11px; font-size:11px; }
}
@media (max-width:860px){
  .codoc{ grid-template-columns:1fr; row-gap:32px; }
  .codoc::before{ display:none; }
  .panel{ order:2; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}