@font-face {font-family: 'Anybody';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url(/assets/fonts/Anybody-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Anybody';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url(/assets/fonts/Anybody-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(/assets/fonts/Caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(/assets/fonts/Caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/JetBrainsMono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/JetBrainsMono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


:root {
  --ink: #10132b;
  --ink-2: #4a5070;
  --paper: #fbfbfe;
  --line: #e4e6f1;
  --cobalt: #2b3bff;
  --pink: #ff4d8d;
  --mint: #19c39a;
  --violet: #7b5cff;
  --display: 'Anybody', system-ui, sans-serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --hand: 'Caveat', cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
code, pre { font-family: var(--mono); }

/* nav */
.nav { position: relative; z-index: 5; }
.nav .wrap { display: flex; align-items: center; height: 76px; gap: 28px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; font: 900 26px/1 var(--display); font-stretch: 120%; letter-spacing: -0.02em; color: #fff; }
.logo img { width: 30px; height: 30px; margin-right: 8px; }
.nav ul { display: flex; gap: 24px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav ul a { color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav ul a:hover { color: #fff; }
.nav.light .logo { color: var(--ink); }
.nav.light ul a { color: var(--ink-2); }
.nav.light ul a:hover { color: var(--ink); }

/* hero */
.hero { background: var(--cobalt); color: #fff; margin-top: -76px; padding-top: 76px; overflow: hidden; }
.hero-head { padding: 54px 0 10px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.hero h1 { margin: 0; font: 900 clamp(54px, 7.2vw, 108px)/0.88 var(--display); letter-spacing: -0.03em; font-stretch: 62%; transition: font-stretch 1.4s cubic-bezier(.2,.7,.1,1); }
.hero h1.wide { font-stretch: 108%; }
.hero .lede { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.88); margin: 0 0 8px; max-width: 30em; }
.hero .lede b { color: #fff; }
.status { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; margin-top: 14px; background: rgba(255,255,255,.12); padding: 7px 12px; border-radius: 999px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(25,195,154,.3); }

.stage { position: relative; height: 600px; margin-top: 10px; touch-action: none; user-select: none; -webkit-user-select: none; }
.stage svg.arms { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .arm { stroke-width: 18; stroke-linecap: round; fill: none; }
.stage .arm { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.stage.drawn .arm { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.6,.1,1); }
.card { position: absolute; width: 330px; transform: translate(-50%, -50%); background: #fff; color: var(--ink); border-radius: 14px; padding: 14px 16px 15px; box-shadow: 0 18px 40px rgba(10, 16, 80, .28); opacity: 0; transition: opacity .5s ease .9s; }
.stage.drawn .card { opacity: 1; }
.card .tag { display: inline-block; font: 700 12px var(--sans); color: #fff; padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }
.card pre { margin: 0; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; }
.card .soon { font: 700 19px var(--hand); color: var(--pink); position: absolute; right: 14px; top: 8px; transform: rotate(-4deg); }
.hub { position: absolute; transform: translate(-50%, -50%); width: 196px; height: 196px; border-radius: 50%; background: var(--pink); color: var(--ink); display: grid; place-items: center; text-align: center; cursor: grab; user-select: none; box-shadow: 0 0 0 10px rgba(255,255,255,.18), 0 20px 50px rgba(10,16,80,.35); z-index: 3; }
.hub:active { cursor: grabbing; }
.hub .num { font: 900 58px/0.9 var(--display); font-stretch: 85%; letter-spacing: -0.03em; }
.hub .what { font: 600 13px/1.3 var(--sans); max-width: 140px; margin-top: 6px; }
.hint { position: absolute; font: 700 26px var(--hand); color: #fff; transform: rotate(-6deg); pointer-events: none; z-index: 4; transition: opacity .4s; white-space: nowrap; }
.hint svg { position: absolute; left: -46px; top: 10px; width: 44px; height: 30px; }
.examples { display: flex; gap: 10px; justify-content: center; padding: 6px 0 46px; flex-wrap: wrap; }
.examples button { font: 700 15px var(--sans); color: #fff; background: transparent; border: 2px solid rgba(255,255,255,.45); padding: 9px 16px; border-radius: 999px; cursor: pointer; }
.examples button[aria-pressed="true"] { background: #fff; color: var(--cobalt); border-color: #fff; }

/* periodic table */
.band { padding: 90px 0; }
.band h2 { font: 900 clamp(40px, 5.5vw, 76px)/0.92 var(--display); font-stretch: 75%; letter-spacing: -0.02em; margin: 0 0 16px; }
.band .intro { font-size: 19px; color: var(--ink-2); max-width: 36em; margin: 0 0 36px; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 22px; font-weight: 600; font-size: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.ptable { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; height: 104px; perspective: 600px; text-decoration: none; color: var(--ink); }
.tile .face { position: absolute; inset: 0; border-radius: 10px; padding: 10px 11px; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3,.7,.2,1); display: flex; flex-direction: column; justify-content: space-between; }
.tile .front { background: #fff; border: 2px solid var(--fam); }
.tile .front b { font: 800 17px/1.05 var(--display); font-stretch: 70%; letter-spacing: 0; word-break: break-word; }
.tile .front small { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.tile .back { background: var(--fam); color: #fff; transform: rotateY(180deg); }
.tile .back small { font-size: 11px; font-weight: 700; opacity: .85; }
.tile .back code { font-size: 11.5px; line-height: 1.35; }
.tile:hover .front, .tile:focus-visible .front { transform: rotateY(-180deg); }
.tile:hover .back, .tile:focus-visible .back { transform: rotateY(0); }
.tile.big { grid-column: span 2; }
.tile.big .front b { font-size: 26px; }
.fam-lod { --fam: var(--cobalt); } .fam-tc { --fam: var(--pink); } .fam-date { --fam: var(--mint); }
.fam-logic { --fam: var(--ink); } .fam-dax { --fam: var(--violet); }

/* guides as handwritten notebook */
.guides { background: var(--ink); color: #fff; }
.guides .intro { color: rgba(255,255,255,.75); }
.glist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.glist h3 { font: 700 30px var(--hand); color: var(--mint); margin: 0 0 6px; transform: rotate(-2deg); transform-origin: left; }
.glist ul { list-style: none; margin: 0; padding: 0; }
.glist li { border-top: 1px solid rgba(255,255,255,.15); }
.glist li a { display: block; padding: 11px 0; text-decoration: none; font-weight: 600; }
.glist li a:hover { color: var(--pink); }

/* build strip */
.build { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--ink); }
.build div { padding: 22px 22px 26px 0; }
.build div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.build h3 { font: 800 26px/1 var(--display); font-stretch: 80%; margin: 0 0 10px; }
.build p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.build .state { font: 700 20px var(--hand); color: var(--pink); margin-top: 10px; }

footer { border-top: 1px solid var(--line); padding: 34px 0 54px; font-size: 13px; color: var(--ink-2); }
footer p { max-width: 64em; margin: 0 0 6px; }

/* reference page */
.refhead { background: var(--paper); padding: 30px 0 0; }
.crumbs { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.crumbs a { color: var(--cobalt); }
.refhead h1 { font: 900 clamp(46px, 7vw, 96px)/0.9 var(--display); font-stretch: 70%; letter-spacing: -0.02em; margin: 14px 0 0; max-width: 11em; }
.refhead .scrawl { font: 700 30px var(--hand); color: var(--pink); transform: rotate(-3deg); display: inline-block; margin: 6px 0 0 4px; }
.answer { font-size: 21px; line-height: 1.5; max-width: 34em; margin: 22px 0 34px; }
.answer mark { background: linear-gradient(transparent 58%, rgba(255,77,141,.35) 58%); color: inherit; padding: 0 2px; }
.switchboard { background: var(--ink); color: #fff; border-radius: 22px; padding: 26px; position: relative; }
.sw-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.sw-top .lbl { font-weight: 600; color: rgba(255,255,255,.75); }
.switch { display: inline-flex; background: rgba(255,255,255,.1); border-radius: 999px; padding: 5px; position: relative; }
.switch button { position: relative; z-index: 1; font: 700 15px var(--sans); color: #fff; background: none; border: 0; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: color .3s; }
.switch button[aria-pressed="true"] { color: var(--ink); }
.switch .knob { position: absolute; top: 5px; bottom: 5px; border-radius: 999px; background: var(--mint); transition: left .35s cubic-bezier(.3,.7,.2,1), width .35s; }
.sw-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.9fr); gap: 18px; }
.panel { background: rgba(255,255,255,.06); border-radius: 14px; padding: 16px; }
.panel h3 { margin: 0 0 10px; font: 700 13px var(--sans); color: rgba(255,255,255,.65); }
.panel pre { margin: 0; font-size: 13px; line-height: 1.55; white-space: pre; overflow-x: auto; }
.sql { position: relative; font: 13px/1.55 var(--mono); }
.sql .ln { white-space: pre; display: block; will-change: transform; }
.sql .ln.where { background: var(--pink); color: var(--ink); border-radius: 5px; font-weight: 600; margin: 2px -6px; padding: 1px 6px; }
.panel table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.panel th { text-align: left; font-size: 12px; color: rgba(255,255,255,.6); font-weight: 600; padding: 4px 6px 6px 0; }
.panel td { padding: 6px 6px 6px 0; border-top: 1px solid rgba(255,255,255,.1); }
.panel .n { text-align: right; }
.share { font: 900 20px var(--display); font-stretch: 80%; color: var(--mint); }
.margin-note { position: absolute; font: 700 24px/1.05 var(--hand); color: var(--pink); max-width: 210px; transform: rotate(-5deg); pointer-events: none; }
.verdict { margin-top: 16px; font-size: 17px; }
.verdict b { color: var(--mint); }

.refbody { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 60px; padding: 70px 0 30px; }
.refbody h2 { font: 900 40px/0.95 var(--display); font-stretch: 75%; margin: 0 0 14px; }
.refbody section { margin-bottom: 46px; }
.refbody p { max-width: 36em; }
pre.block { background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 16px 18px; font-size: 13.5px; line-height: 1.55; overflow-x: auto; box-shadow: 6px 6px 0 var(--violet); }
.traps { list-style: none; padding: 0; margin: 0; counter-reset: t; }
.traps li { position: relative; padding: 16px 18px 16px 64px; border: 2px solid var(--ink); border-radius: 14px; margin-bottom: 14px; background: #fff; max-width: 40em; }
.traps li::before { content: '!'; position: absolute; left: 18px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: #fff; font: 900 18px/30px var(--display); text-align: center; }
.side h3 { font: 700 26px var(--hand); color: var(--cobalt); margin: 0 0 6px; }
.side ul { list-style: none; padding: 0; margin: 0 0 30px; }
.side li a { display: block; padding: 9px 0; border-top: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.side li a:hover { color: var(--cobalt); }
.cli { background: var(--cobalt); color: #fff; border-radius: 14px; padding: 16px; }
.cli p { margin: 0 0 8px; font-weight: 600; }
.cli code { font-size: 13px; }
.cli .later { font: 700 20px var(--hand); color: #ffd0e1; }

@media (max-width: 980px) {
  .hero-head { grid-template-columns: 1fr; }
  .ptable { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sw-grid { grid-template-columns: 1fr; }
  .refbody { grid-template-columns: 1fr; }
  .margin-note { display: none; }
  .build { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .nav ul { display: none; }
  .stage { height: auto; display: grid; gap: 14px; padding: 10px 0 0; }
  .stage svg.arms, .hint { display: none; }
  .card, .hub { position: relative; transform: none; left: auto !important; top: auto !important; width: auto; opacity: 1; }
  .hub { width: 170px; height: 170px; margin: 6px auto; order: 2; }
  .card.c-top { order: 1; } .card.c-left { order: 3; } .card.c-right { order: 4; } .card.c-bottom { order: 5; }
  .glist, .build { grid-template-columns: 1fr; }
  .build div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .stage .arm, .card, .tile .face, .switch .knob, .sql .ln { transition: none !important; }
  .stage .arm { stroke-dashoffset: 0; }
  .card { opacity: 1; }
}

/* motion */
@keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.09); } 100% { transform: translate(-50%, -50%) scale(1); } }
.hub.pulse { animation: pulse .5s cubic-bezier(.3,.7,.2,1); }
@keyframes swap { 0% { opacity: .2; filter: blur(3px); } 100% { opacity: 1; filter: none; } }
.stage.drawn .card.swap pre { animation: swap .45s ease; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-28px) rotate(-6deg); } 70% { transform: translateY(4px) rotate(1deg); } 100% { opacity: 1; transform: none; } }
.ptable .tile { opacity: 0; }
.ptable.in .tile { animation: drop .55s cubic-bezier(.3,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .ptable .tile { opacity: 1; } .ptable.in .tile, .hub.pulse, .card.swap pre { animation: none; } }
@media (max-width: 760px) { .hub.pulse { animation: none; } }

/* illustrations */
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }
.table-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.table-head img { width: 100%; height: auto; mix-blend-mode: multiply; }
.crossband { height: 420px; background: var(--cobalt) url('/assets/img/hero-crossing.webp') center / cover no-repeat; }
.spot { width: 120px; height: 120px; display: block; margin: 0 0 8px -8px; transition: transform .35s cubic-bezier(.3,.7,.2,1); }
.build div:hover .spot { transform: rotate(-6deg) scale(1.06); }
.foot { display: flex; gap: 18px; align-items: center; }
.foot img { flex: none; }
.refgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: center; }
.funnel { width: 340px; height: 340px; animation: bob 3.4s ease-in-out infinite; }
h2.with-mascot { display: flex; align-items: center; gap: 10px; }
h2.with-mascot img { width: 96px; height: 96px; margin: -20px 0; }
.cli { position: relative; padding-top: 70px; }
.cli-mascot { position: absolute; top: -40px; right: 6px; width: 104px; height: 104px; }
@media (max-width: 980px) { .table-head, .refgrid { grid-template-columns: 1fr; } .funnel { width: 220px; height: 220px; } .crossband { height: 260px; } }
@media (prefers-reduced-motion: reduce) { .funnel { animation: none; } }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.cta { display: inline-block; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; }
.cta.solid { background: #fff; color: var(--cobalt); }
.cta.ghost { color: #fff; border: 2px solid rgba(255,255,255,.5); }
.cta.solid:hover { background: var(--pink); color: #fff; }
.simple { max-width: 720px; margin: 0 auto; padding: 40px 28px 80px; }
.simple h1 { font: 900 56px/0.95 var(--display); font-stretch: 75%; margin: 10px 0 18px; }
.simple h2 { font: 800 24px/1.1 var(--display); font-stretch: 85%; margin: 30px 0 8px; }

/* generated reference pages */
.switchboard .tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.switchboard .tabs button { font: 700 13px var(--sans); color: #fff; background: rgba(255,255,255,.1); border: 0; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.switchboard .tabs button[aria-pressed="true"] { background: var(--mint); color: var(--ink); }
.switchboard .tabpane pre { white-space: pre-wrap; word-break: break-word; }
.tabnote { font-size: 13px; color: rgba(255,255,255,.6); margin: 10px 0 0; }
.cu { font-size: 13px; color: rgba(255,255,255,.75); margin: 10px 0 0; }
.cu b { color: var(--mint); }
.panel td.hl { color: var(--mint); font-weight: 700; }
.panel .null, .trapgrid .null { opacity: .5; font-style: italic; }
.panel { overflow-x: auto; }
.trapgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.trapgrid h4 { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.trapgrid pre { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; word-break: break-word; margin: 0 0 8px; }
.trapgrid table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.trapgrid th { text-align: left; font-size: 12px; color: var(--ink-2); font-weight: 600; padding: 3px 6px 3px 0; }
.trapgrid td { padding: 4px 6px 4px 0; border-top: 1px solid var(--line); }
.trapgrid td.hl { color: var(--pink); font-weight: 700; }
.trapgrid > div:last-child td.hl { color: var(--mint); }
.refindex { padding: 30px 28px 60px; }
.fam h2 { font: 900 40px/1 var(--display); font-stretch: 75%; margin: 40px 0 14px; }
.fam h2 small { font: 600 16px var(--sans); color: var(--ink-2); margin-left: 8px; }
.fnlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.fnlist a { display: block; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; }
.fnlist b { display: block; font: 800 17px var(--display); font-stretch: 80%; }
.fnlist span { font-size: 14px; color: var(--ink-2); }
.fnlist a:hover b { color: var(--cobalt); }
@media (max-width: 980px) { .fnlist { grid-template-columns: 1fr 1fr; } .trapgrid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fnlist { grid-template-columns: 1fr; } }