/* Brand Fonts — Figma 710:1730 */
body[data-chapter="fonts"] { --dock-y: 168; --dock-x: 160; }
.fh.th-navy { color: #fff; }
.fo-dodge .fh__s img { mix-blend-mode: color-dodge; filter: blur(6px) saturate(1.4); }
.fo-dodge .fh__s { background: var(--m-navy); }
.fh.th-navy .fh__chips .chip:first-child { background: var(--m-lilac); color: var(--m-navy); }

.fo-intro { display: grid; gap: var(--s-4); max-width: 1100px; }
.fo-intro .shapes { font-size: clamp(18px, calc(26 * var(--fx)), 26px); }
.fo-intro__copy { display: grid; gap: var(--s-3); color: var(--fg-soft); max-width: 60ch; }

/* family blocks */
.fo-fam { overflow: clip; }
.fo-fam__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: center; }
.fo-fam__main { position: relative; display: grid; gap: var(--s-4); align-content: start; }
.fo-fam__label { font: 700 clamp(22px, calc(45.33 * var(--fx)), 46px)/1 var(--font-display); letter-spacing: -.023em; margin-bottom: calc(var(--s-4) * -1.2); padding-left: .2em; }
.fo-fam__label b { color: var(--m-purple); font-weight: 700; }
.th-navy .fo-fam__label b { color: var(--m-violet); }
.fo-spec { font: var(--w, 700) clamp(80px, calc(248 * var(--fx)), 248px)/1.05 var(--font-display); letter-spacing: -.045em; font-weight: var(--w, 700); transition: font-weight .6s var(--ease), letter-spacing .6s var(--ease); white-space: nowrap; }
.fo-spec span { color: var(--m-purple); }
.fo-spec--plex { font-family: var(--font-ar); font-size: clamp(54px, calc(150 * var(--fx)), 150px); letter-spacing: -.03em; white-space: normal; }
.fo-pill { position: absolute; top: 0; right: 0; padding: .5em 1.2em; border-radius: 999px; background: var(--m-purple); color: #fff; font: 700 clamp(16px, calc(32.77 * var(--fx)), 33px)/1 var(--font-display); }
.fo-weights { display: grid; gap: .25em; justify-items: start; margin-top: var(--s-4); }
.fo-weights button {
  position: relative; padding: .18em .6em .18em 0; font: 400 clamp(16px, calc(28 * var(--fx)), 32px)/1.35 var(--font-display); color: var(--fg-soft);
  transition: color .25s, padding .45s var(--ease);
}
.fo-fam--plex .fo-weights button { font-family: var(--font-ar); }
.fo-weights button::before { content: ""; position: absolute; left: -1.2em; top: 50%; width: .55em; height: .55em; translate: 0 -50%; background: var(--m-purple); -webkit-mask: var(--sparkle) center/contain no-repeat; mask: var(--sparkle) center/contain no-repeat; opacity: 0; transition: opacity .3s, rotate .5s var(--ease); }
.fo-weights button:hover { color: var(--fg); padding-left: .3em; }
.fo-weights button[aria-checked="true"] { color: var(--fg); padding-left: .3em; }
.fo-weights button[aria-checked="true"]::before { opacity: 1; rotate: 90deg; }
.fo-weights button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.fo-ar { font: var(--w, 700) clamp(30px, calc(72 * var(--fx)), 72px)/1.4 var(--font-ar); font-weight: var(--w, 700); color: var(--m-purple); transition: font-weight .6s var(--ease); margin-top: var(--s-4); }

/* glyph wheel (stand-in for the Figma specimen video) */
.fo-glyph { position: relative; aspect-ratio: 1; border-radius: var(--r-panel); display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, rgba(126,105,245,.35), rgba(14,19,60,0) 60%), rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.fo-glyph::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); }
.fo-glyph::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.12); box-shadow: 0 -18% 0 rgba(255,255,255,.08); }
.fo-glyph__ch { position: relative; z-index: 1; font: 700 clamp(140px, calc(420 * var(--fx)), 420px)/1 var(--font-display); letter-spacing: -.04em; color: #fff; font-weight: var(--gw, 700); transition: font-weight .8s var(--ease); }
.fo-glyph__meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: var(--s-3) var(--s-4); font: 500 var(--t-micro)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.fo-glyph--ar { background: radial-gradient(120% 90% at 70% 20%, rgba(101,47,234,.18), rgba(255,255,255,0) 60%), #F5F6FD; box-shadow: inset 0 0 0 1px rgba(14,19,60,.08); }
.fo-glyph--ar::before { border-color: rgba(14,19,60,.15); }
.fo-glyph--ar::after { background: rgba(14,19,60,.08); }
.fo-glyph--ar .fo-glyph__ch { color: var(--m-navy); font-family: var(--font-ar); }

/* tester */
.fo-tester { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); display: grid; gap: var(--s-4); }
.fo-tester__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.fo-tester .seg { --line: rgba(255,255,255,.3); --fg: #fff; --bg: var(--m-navy); --fg-soft: rgba(255,255,255,.7); }
.fo-ctl { display: inline-flex; align-items: center; gap: .8em; font: 500 var(--t-small)/1 var(--font-display); }
.fo-ctl output { min-width: 3ch; font-variant-numeric: tabular-nums; color: var(--m-lilac); }
.fo-ctl input[type="range"] { -webkit-appearance: none; appearance: none; width: clamp(120px, 14vw, 220px); height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); outline-offset: 6px; }
.fo-ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 6px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 0 4px rgba(101,47,234,.6); cursor: grab; }
.fo-ctl input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 0 0 4px rgba(101,47,234,.6); }
.fo-tester__text { font-family: var(--font-display); font-size: var(--ts, 88px); font-weight: var(--tw, 600); line-height: 1.1; letter-spacing: -.03em; outline: none; padding: .1em 0; border-radius: 8px; transition: box-shadow .3s; overflow-wrap: anywhere; min-height: 1.2em; }
.fo-tester__text.is-plex { font-family: var(--font-ar); letter-spacing: -.01em; }
.fo-tester__text:hover { box-shadow: 0 1px 0 0 rgba(255,255,255,.25); }
.fo-tester__text:focus { box-shadow: 0 2px 0 0 var(--m-violet); }
.fo-tester__hint { opacity: .6; }

/* type scale */
.fo-sys__note { margin-top: var(--s-3); }
.fo-scale { display: grid; border-top: 1px solid var(--line); }
.fs-row {
  display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 7fr) minmax(170px, 2.4fr); gap: var(--s-4); align-items: center;
  padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); text-align: left; border-radius: 10px; transition: background .25s;
}
.fs-row:hover, .fs-row:focus-visible { background: rgba(101,47,234,.06); }
.fs-row__role { font: 600 var(--t-micro)/1.3 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--m-purple); }
.fs-row__sample { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--m-navy); }
.fs-row__spec { font: 500 var(--t-micro)/1.5 ui-monospace, Menlo, monospace; color: var(--fg-soft); text-align: right; }
.fs-row--readex .fs-row__sample { font-family: "Readex Pro", var(--font-display); }

@media (max-width: 900px) {
  .fo-fam__grid { grid-template-columns: 1fr; }
  .fo-pill { position: static; justify-self: start; }
  .fo-glyph { max-width: 420px; }
  .fs-row { grid-template-columns: 1fr; }
  .fs-row__spec { text-align: left; }
}