/* Specimens are pre-rendered PNGs (no font ever reaches the browser). Hidden until the page has loaded. */
.fonts-loading .specimen { visibility: hidden; }

/* ── RESET & BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Fluid scale: 1rem = 1 design-pixel on a 1920 canvas (390 on mobile) */
html { font-size: calc(100vw / 1920); scroll-behavior: smooth; overflow-x: hidden; }
@media (max-width: 767px) { html { font-size: calc(100vw / 390); } }

:root {
  --fg: #000;
  --bg: #fff;
  --ui: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fs: 1;
  --ls: 0em;
  color-scheme: light;
}
html[data-theme="dark"] { --fg: #fff; --bg: #000; color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 16rem;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: 18rem; } }

a { color: inherit; text-decoration: none; }
a:hover, .hover-underline:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--fg); color: var(--bg); }
.ns { user-select: none; -webkit-user-select: none; }
.hidden-md { display: block; }
.only-md { display: none; }
@media (min-width: 768px) { .hidden-md { display: none; } .only-md { display: block; } }

/* ── LAYOUT PRIMITIVES ─────────────────────────────────────────── */
.container { width: 100%; padding-left: 20rem; padding-right: 20rem; }
.site-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 20rem; }
@media (min-width: 768px) { .site-grid { grid-template-columns: repeat(24, minmax(0, 1fr)); } }
.border-t { border-top: 1px solid var(--fg); }

/* ── BUTTONS (square, uppercase, invert on hover) ─────────────── */
.site-button {
  display: inline-block;
  border: 1px solid var(--fg);
  border-radius: 0;
  padding: 7rem 16rem 6rem;
  text-align: center;
  font-size: 13rem;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--fg);
  transition: color .2s, background-color .2s;
  white-space: nowrap;
  cursor: pointer;
}
.site-button:hover { background: var(--fg); color: var(--bg); text-decoration: none; }
.site-button.solid { background: var(--fg); color: var(--bg); }
.site-button.solid:hover { background: var(--bg); color: var(--fg); }
.site-button.accent, .site-button.large-sm { padding: 18rem 24rem 17rem; font-size: 14rem; }
.site-button.accent { background: var(--fg); color: var(--bg); }
.site-button.accent:hover { background: var(--bg); color: var(--fg); }
.w-full { width: 100%; }
.lbl-l { display: none; } .lbl-s { display: inline; }
@media (min-width: 768px) { .lbl-l { display: inline; } .lbl-s { display: none; } }
@media (min-width: 768px) {
  .site-button { padding: 8rem 20rem 7rem; font-size: 13rem; }
  .site-button.accent { padding: 20rem 40rem 19rem; font-size: 14rem; }
}

/* ── HEADER ────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 101;
  background: var(--bg); color: var(--fg);
  border-bottom: 1px solid var(--fg);
}
.site-header .container { padding-top: 21rem; padding-bottom: 20rem; }
.site-header .site-grid { position: relative; align-items: center; }
@media (min-width: 768px) {
  .site-header .container { height: 60rem; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
  .site-header .site-grid { width: 100%; }
}
.h-brand { grid-column: 1 / span 6; }
.h-typefaces { display: none; }
.h-switch { display: inline-block; margin-right: 4rem; }
@media (min-width: 768px) { .h-switch { display: none; } }
.h-typefaces .h-nav + .h-nav { margin-left: 28rem; }
body[data-section="assets"] .h-nav[data-nav="assets"], body[data-section="fonts"] .h-nav[data-nav="fonts"] { text-decoration: underline; }
.h-theme { display: none; }
.h-right { grid-column: 7 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 34rem; }
.h-right ul { display: none; gap: 34rem; }
@media (min-width: 768px) {
  .h-brand { grid-column: 1 / span 4; }
  .h-typefaces { display: block; grid-column: 5 / span 4; }
  .h-theme { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .h-right { grid-column: 14 / -1; }
  .h-right ul { display: flex; }
}
.theme-toggle { font: inherit; white-space: nowrap; }
.h-brand a { display: inline-flex; align-items: center; gap: 12rem; }
.h-brand svg { height: 22rem; width: auto; display: block; fill: currentColor; }
@media (min-width: 768px) { .h-brand svg { height: 26rem; } }

/* Cart button + drawer (our UI, Sellfy engine) */
.cart-btn { display: inline-flex; align-items: center; gap: 6rem; font: inherit; }
.cart-btn:hover { text-decoration: underline; }
.cart-count { display: inline-block; min-width: 18rem; height: 18rem; padding: 0 5rem; border: 1px solid var(--fg); font-size: 11rem; line-height: 16rem; text-align: center; background: var(--fg); color: var(--bg); }
.cart-count[hidden] { display: none; }
.cart-scrim { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.25); opacity: 0; transition: opacity .3s; }
.cart-scrim.open { opacity: 1; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 401;
  width: 100%; max-width: 520rem;
  background: var(--bg); color: var(--fg);
  border-left: 1px solid var(--fg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .4s var(--ease-out);
}
.cart-drawer.open { transform: translateX(0); }
.cd-head { display: flex; justify-content: space-between; align-items: center; height: 60rem; padding: 0 24rem; border-bottom: 1px solid var(--fg); font-size: 13rem; letter-spacing: .08em; text-transform: uppercase; }
.cd-head .cd-n { text-transform: none; letter-spacing: 0; }
.cd-close { font: inherit; letter-spacing: inherit; text-transform: inherit; }
.cd-close:hover { text-decoration: underline; }
.cd-items { flex: 1; overflow-y: auto; }
.cd-item { display: flex; justify-content: space-between; align-items: center; gap: 20rem; padding: 22rem 24rem; border-bottom: 1px solid var(--fg); }
.cd-name { font-size: 44rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cd-name .sp { max-width: 100%; height: auto; max-height: calc(var(--lh, 1.3) * 1em); }
.cd-name.cd-asset { display: flex; align-items: center; gap: 14rem; font-size: 15rem; line-height: 1.3; white-space: normal; }
.cd-thumb { flex: none; width: 72rem; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--fg); display: block; }
.cd-small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8rem; flex: none; font-variant-numeric: tabular-nums; }
.cd-remove { font-size: 12rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; }
.cd-empty { padding: 40rem 24rem; }
.cd-foot { border-top: 1px solid var(--fg); padding: 20rem 24rem 24rem; }
.cd-total { display: flex; justify-content: space-between; margin-bottom: 16rem; font-size: 13rem; letter-spacing: .08em; text-transform: uppercase; }
.cd-note { margin-top: 12rem; font-size: 13rem; line-height: 1.4; }
.site-button.disabled { opacity: .35; pointer-events: none; }
@media (max-width: 767px) { .cart-drawer { max-width: 100%; } .cd-name { font-size: 36rem; } .cd-head { height: 56rem; } }

/* ── SLIDE-UP REVEAL ───────────────────────────────────────────── */
.slide-up { transform: translateY(50px); opacity: 0; transition: transform .8s var(--ease-out), opacity .8s var(--ease-out); }
.slide-up.in-view { transform: translateY(0); opacity: 1; }

/* ── INDEX: SPECIMEN ROWS ──────────────────────────────────────── */
main { padding-bottom: 80rem; }
@media (min-width: 768px) { main { padding-bottom: 150rem; } }

.typetester { position: relative; background: var(--bg); transition: background-color .25s; }
.r-tags { display: flex; gap: 8rem; flex-wrap: wrap; }
.tag { display: inline-block; border: 1px solid var(--fg); padding: 3rem 8rem 2rem; font-size: 12rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ticker { display: inline-block; white-space: nowrap; animation: tick var(--tick, 40s) linear infinite; animation-play-state: paused; }
.ticker .sep { font-size: .4em; vertical-align: middle; padding: 0 .7em; font-family: var(--ui); }
.typetester:hover .ticker { animation-play-state: running; }
.typing .ticker { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.typetester + .typetester .row-meta { border-top: 1px solid var(--fg); }
.row-meta { padding-bottom: 28rem; align-items: start; }
@media (min-width: 768px) { .row-meta { padding-bottom: 60rem; } }

.r-name { grid-column: 1 / span 4; margin-top: 12rem; }
.r-mid { grid-column: 1 / -1; display: none; }
.r-view { display: none; }
.r-buy { grid-column: 6 / span 3; grid-row: 1; margin-top: 8rem; text-align: right; }
.r-buy .site-button { width: auto; }
@media (min-width: 768px) {
  .r-buy .site-button, .tt-buy .site-button { width: 100%; }
  .r-name { margin-top: 20rem; }
  .r-mid { display: flex; grid-column: 5 / span 13; gap: 60rem; padding-top: 14rem; align-items: center; }
  .r-view { display: block; grid-column: 19 / span 2; margin-top: 11rem; }
  .r-buy { grid-column: 21 / span 4; margin-top: 11rem; }
}
.r-styles { width: 202rem; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; cursor: default; }
.r-styles svg, .r-about svg { width: 15rem; margin-bottom: 2rem; fill: currentColor; flex: none; transition: transform .3s; }
.r-about { display: flex; align-items: center; gap: 30rem; white-space: nowrap; }
.r-about[aria-expanded="true"] svg { transform: rotate(180deg); }
.r-about[aria-expanded="true"] { text-decoration: underline; }
.r-feat { white-space: nowrap; }
.r-desc { grid-column: 1 / -1; overflow: hidden; height: 0; transition: height .45s var(--ease-out); }
.r-desc p { max-width: 520rem; padding-top: 24rem; line-height: 1.35; }
@media (min-width: 768px) { .r-desc { grid-column: 5 / span 11; } .r-desc p { padding-top: 30rem; } }

.text-line {
  display: block; white-space: nowrap; overflow: hidden; cursor: text;
  font-size: calc(94rem * var(--scale, 1) * var(--fs, 1));
  line-height: 1.12; padding: 0 18rem 8rem;
  letter-spacing: var(--ls, 0em);
}
@media (min-width: 768px) { .text-line { font-size: calc(267rem * var(--scale, 1) * var(--fs, 1)); padding: 0 10rem 40rem; } }
/* Mobile: no hover, so the row scrolls sideways by touch and glides back to the start when released */
@media (max-width: 767px) {
  .text-line { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .text-line::-webkit-scrollbar { display: none; }
  .ticker { animation: none; }
}

/* ── RENDERED SPECIMEN IMAGES ──────────────────────────────────── */
/* Black glyphs on transparent; inverted in dark mode. Height follows the font size via --lh (line height in em). */
.sp { display: inline-block; height: calc(var(--lh, 1.3) * 1em); width: auto; max-width: none; vertical-align: top; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.sp.pending { opacity: .35; }
.sp.live { transition: opacity .2s; }
html[data-theme="dark"] .sp, html[data-theme="dark"] .g, html[data-theme="dark"] .gc { filter: invert(1); }
.big-glyph .gc { filter: invert(1); }
html[data-theme="dark"] .big-glyph .gc { filter: none; }
.text-line, .tt-line { line-height: 1; }
.hero h1 .sp { display: block; align-self: flex-start; flex: none; height: auto; width: auto; max-width: 100%; max-height: calc(var(--lh, 1.3) * 1em); object-fit: contain; }
.bundle-hero h1 .sp { display: inline-block; height: calc(var(--lh, 1.3) * 1em); max-height: none; max-width: 100%; }
/* character set: one span per glyph over the proportional sprite */
.g { display: inline-block; width: calc(var(--w) * 1em); height: calc(var(--lh, 1.3) * 1em); vertical-align: top; background-image: var(--gu); background-repeat: no-repeat; background-size: calc(var(--gsw) * 1em) calc(var(--gsh) * 1em); background-position: calc(var(--x) * -1em) calc(var(--y) * var(--lh, 1.3) * -1em); }
/* glyph grid: fixed cells over the centered sprite */
.gc { display: block; width: 1.2em; height: 1.4em; background-image: var(--cu); background-repeat: no-repeat; background-size: calc(var(--cper) * 1.2em) calc(var(--crows) * 1.4em); background-position: calc(var(--c) * -1.2em) calc(var(--r) * -1.4em); }
/* detail tester text input */
.tt-input { grid-column: 1 / -1; margin-top: 18rem; }
.tt-in { width: 100%; border: 0; border-bottom: 1px solid var(--fg); border-radius: 0; background: none; color: inherit; font: inherit; padding: 6rem 0; outline: none; }
.tt-in::placeholder { color: inherit; opacity: .45; }
@media (min-width: 768px) { .tt-input { grid-column: 13 / span 8; margin-top: 14rem; } }

/* ── STICKY TESTER BAR (index): full-width toolbar ─────────────── */
.tester-bar {
  position: sticky; bottom: 0; z-index: 99;
  margin-top: 40rem;
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: var(--bg); color: var(--fg);
  border-top: 1px solid var(--fg);
}
.tester-form { flex: 1 1 100%; display: flex; align-items: stretch; height: 56rem; }
.tester-form .grow { flex: 1; min-width: 0; display: flex; padding: 0 20rem; }
.tester-form input[type="text"] { width: 100%; height: 100%; background: transparent; border: 0; outline: 0; color: var(--fg); font: inherit; }
.tester-form input[type="text"]::placeholder { color: var(--fg); opacity: .5; }
.slider { display: flex; align-items: center; justify-content: space-between; border-left: 1px solid var(--fg); padding: 0 20rem; }
.slider label { margin-right: 16rem; }
.slider p { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.slider.tracking { display: none; }
.tester-cta { flex: 1 1 100%; border-top: 1px solid var(--fg); display: flex; }
.tester-cta .site-button { flex: 1; border: 0; display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) {
  .tester-bar { flex-wrap: nowrap; }
  .tester-form { flex: 1 1 auto; height: 64rem; }
  .slider.tracking { display: flex; }
  .tester-cta { flex: 0 0 auto; border-top: 0; border-left: 1px solid var(--fg); }
  .tester-cta .site-button { padding: 0 60rem; }
}
.range { -webkit-appearance: none; appearance: none; background: transparent; height: 14rem; width: 71rem; margin: 0 12rem 0 0; }
@media (min-width: 768px) { .range { height: 16rem; width: 182rem; } .range.tr { width: 150rem; } }
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track { width: 100%; height: 1px; background: currentColor; cursor: pointer; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10rem; height: 10rem; margin-top: -5rem; border-radius: 0; background: currentColor; border: 0; cursor: pointer; }
@media (min-width: 768px) { .range::-webkit-slider-thumb { width: 12rem; height: 12rem; margin-top: -6rem; } }
.range::-moz-range-track { height: 1px; background: currentColor; }
.range::-moz-range-thumb { width: 12rem; height: 12rem; border: 0; border-radius: 0; background: currentColor; }

/* ── FOOTER ────────────────────────────────────────────────────── */
.site-footer { background: var(--fg); color: var(--bg); margin-top: 40rem; }
.site-footer .mark { color: var(--bg); }
.site-footer .site-grid { padding-top: 30rem; padding-bottom: 120rem; row-gap: 40rem; }
@media (min-width: 768px) { .site-footer { margin-top: 80rem; } .site-footer .site-grid { padding-top: 40rem; padding-bottom: 40rem; row-gap: 0; } }
.mark { display: block; width: 100%; height: auto; color: var(--fg); }
.f-mark { grid-column: 1 / span 5; }
.f-mark .mark { width: 100%; max-width: 160rem; }
.f-brand { grid-column: 1 / span 8; }
.f-col { grid-column: 1 / span 4; }
.f-social { grid-column: 5 / span 4; }
.f-label { font-size: 12rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin-bottom: 14rem; }
.f-links li { line-height: 1.6; }
.f-right { grid-column: 1 / span 8; }
@media (min-width: 768px) {
  .f-mark { grid-column: 1 / span 4; }
  .f-mark .mark { max-width: 200rem; }
  .f-brand { grid-column: 9 / span 4; }
  .f-site { grid-column: 13 / span 4; }
  .f-social { grid-column: 17 / span 4; }
  .f-right { grid-column: 21 / span 4; text-align: right; }
}

/* ── LOADER (visible while fonts decode) ───────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 9000; background: var(--bg); color: var(--fg);
  display: flex; align-items: center; justify-content: center; padding: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s var(--ease-out), visibility 0s .45s;
}
.fonts-loading #loader { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
#loader .mark { width: clamp(90px, 28vw, 130px); animation: mark-spin 14s linear infinite; }
@keyframes mark-spin { to { transform: rotate(360deg); } }

/* ── 404 ───────────────────────────────────────────────────────── */
.nf { padding-top: 60rem; padding-bottom: 100rem; min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.nf .site-grid { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.nf-mark { width: clamp(90px, 28vw, 130px); margin-bottom: 30rem; }
.nf-text h1 { font-weight: 400; font-size: 40rem; line-height: 1.05; margin-bottom: 14rem; }
.nf-text p { margin-bottom: 30rem; }
@media (min-width: 768px) {
  .nf { padding-top: 80rem; padding-bottom: 160rem; }
  .nf-mark { margin-bottom: 40px; }
  .nf-text h1 { font-size: 60rem; }
}

/* ── TOAST ─────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; top: 80rem; z-index: 300;
  transform: translate(-50%, -12rem); opacity: 0; pointer-events: none;
  background: var(--fg); color: var(--bg);
  padding: 14rem 24rem 13rem;
  font-size: 13rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .25s, transform .35s var(--ease-out);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast .t-name { text-transform: none; letter-spacing: 0; font-size: 15rem; margin-right: .4em; }
.toast { pointer-events: auto; }
.toast .t-open { margin-left: 16rem; text-decoration: underline; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
@media (max-width: 767px) { .toast { top: auto; bottom: 130rem; max-width: 92vw; white-space: normal; text-align: center; } }
.site-button.busy { opacity: .6; pointer-events: none; }

/* ── DEVTOOLS WARNING ──────────────────────────────────────────── */
#dtw { display: none; position: fixed; inset: 0; z-index: 9999; background: var(--bg); color: var(--fg); align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
#dtw.on { display: flex; }
#dtw > div { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 520px; }
#dtw .dtw-mark { width: clamp(90px, 28vw, 130px); }
#dtw small { align-self: end; margin-bottom: 20px; font-size: 20px; max-width: 26em; }
  #dtw a { align-self: start; justify-self: start; white-space: nowrap; }
}
#dtw small { font-size: 16px; display: block; margin-bottom: 28px; }
#dtw a { display: inline-block; border: 1px solid var(--fg); border-radius: 9999px; padding: 10px 28px; font-size: 16px; }
#dtw a:hover { background: var(--fg); color: var(--bg); text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════
   DETAIL PAGE
   ══════════════════════════════════════════════════════════════════ */
.detail-meta { position: sticky; top: var(--hh, 60rem); z-index: 99; background: var(--bg); }
.detail-meta .site-grid { padding-top: 7rem; padding-bottom: 10rem; position: relative; }
@media (min-width: 768px) { .detail-meta .site-grid { padding-top: 20rem; padding-bottom: 20rem; } }
.dm-name { grid-column: 1 / span 4; }
.dm-feat { grid-column: 5 / span 4; text-align: right; }
.dm-store, .dm-buy { display: none; }
@media (min-width: 768px) {
  .dm-feat { text-align: left; grid-column: 5 / span 6; }
  .dm-store { display: block; grid-column: 19 / span 2; }
  .dm-buy { display: block; grid-column: 21 / span 4; }
}
.detail-meta hr { border: 0; border-top: 1px solid var(--fg); margin: 0 -20rem; }

/* Hero */
.hero { grid-column: 1 / -1; }
.hero h1 {
  font-weight: 400; white-space: nowrap; overflow: hidden;
  font-size: calc(96rem * var(--scale, 1));
  line-height: 1.05;
  margin-top: 180rem; margin-bottom: 40rem;
  padding: 0 0 0.05em;
}
@media (min-width: 768px) {
  .hero h1 {
    margin-top: 0; margin-bottom: 0;
    height: calc(100vh - 190rem); max-height: 800rem; min-height: 450rem;
    display: flex; flex-direction: column; justify-content: flex-end;
    font-size: calc(267rem * var(--scale, 1));
  }
}

.bundle-hero h1 { white-space: normal; overflow: visible; font-size: calc(104rem * var(--scale, 1)); line-height: 1.15; display: flex; flex-wrap: wrap; column-gap: .6em; row-gap: .1em; }
.bundle-hero h1 span { display: inline-block; }
@media (max-width: 767px) { .bundle-hero h1 { font-size: 52rem; column-gap: .45em; } }
#bundle-rows .typetester .row-meta { border-top: 1px solid var(--fg); }

/* Section label rows */
.sec-label { grid-column: 1 / -1; border-top: 1px solid var(--fg); padding-top: 10rem; margin-bottom: 80rem; font-weight: 400; font-size: inherit; }
@media (min-width: 768px) { .sec-label { padding-top: 20rem; } }

/* Character set overview */
.charset { grid-column: 1 / -1; margin-bottom: 80rem; row-gap: 18rem; }
@media (min-width: 768px) { .charset { margin-bottom: 150rem; row-gap: 70rem; } }
.charset .cs-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); column-gap: 20rem; align-items: baseline; }
.charset .cs-row .cs-l { grid-column: 1 / -1; }
.charset .cs-row .cs-g { grid-column: 1 / -1; font-size: calc(30rem * var(--scale, 1)); line-height: 1.15; word-break: break-all; }
@media (min-width: 768px) {
  .charset .cs-row { grid-template-columns: repeat(24, minmax(0,1fr)); }
  .charset .cs-row .cs-l { grid-column: 1 / span 4; }
  .charset .cs-row .cs-g { grid-column: 5 / span 15; font-size: calc(70rem * var(--scale, 1)); }
}

/* Per-line type testers */
.tt { position: relative; margin-bottom: 15rem; }
@media (min-width: 768px) { .tt { margin-bottom: 58rem; } }
.tt-meta { border-top: 1px solid var(--fg); padding-bottom: 28rem; align-items: start; }
@media (min-width: 768px) { .tt-meta { padding-bottom: 70rem; } }
.tt-name { grid-column: 1 / span 4; margin-top: 12rem; }
.tt-size, .tt-track { display: none; }
.tt-buy { grid-column: 6 / span 3; margin-top: 8rem; text-align: right; }
.tt-buy .site-button { width: auto; }
@media (min-width: 768px) {
  .tt-name { margin-top: 20rem; }
  .tt-size { display: flex; grid-column: 5 / span 4; margin-top: 20rem; }
  .tt-track { display: flex; grid-column: 9 / span 4; margin-top: 20rem; }
  .tt-buy { grid-column: 21 / span 4; margin-top: 11rem; }
}
.tt .slider { border-left: 0; padding: 0; }
.tt .slider label { margin-right: 16rem; }
.tt .range { width: 120rem; }
.tt-line {
  display: block; white-space: nowrap; overflow: hidden;
  line-height: 1.1; padding: 0 18rem 8rem;
  font-size: calc(var(--size, 128rem) * var(--scale, 1) * var(--fs, 1));
  letter-spacing: var(--ls, 0em);
}
@media (min-width: 768px) { .tt-line { padding: 0 10rem 40rem; } }
@media (max-width: 767px) { .tt-line { font-size: calc(96rem * var(--scale, 1) * var(--fs, 1)); } }

/* Application slides */
.slides-outer { position: relative; margin-top: 80rem; }
@media (min-width: 768px) { .slides-outer { margin-top: 200rem; } }
.slides-sticky { position: sticky; top: calc(var(--hh, 60rem) + var(--mh, 0px)); }
.slides-wrapper { position: relative; overflow: hidden; }
.slides-track { display: flex; flex-direction: row; will-change: transform; padding-bottom: 20rem; }
.slide {
  flex: 0 0 362rem; display: flex; flex-direction: column;
  border-right: 1px solid var(--fg);
  padding: 10rem 20rem 0 20rem;
  min-height: 560rem; white-space: normal;
}
.slide:last-child { border-right: 0; }
.slide:nth-child(even) { background: var(--fg); color: var(--bg); border-color: var(--bg); }
@media (min-width: 768px) { .slide { flex: 0 0 853rem; padding: 20rem 64rem 0 20rem; min-height: 880rem; } }
.slide h2 { font-weight: 400; font-size: inherit; margin-bottom: 50rem; }
.slide .s-body { display: flex; flex: 1; flex-direction: column; }
.slide .s-head { font-size: calc(50rem * var(--scale, 1)); line-height: 1; }
.slide .s-text { margin-top: auto; padding-top: 20rem; font-size: 15rem; line-height: 1.35; }
.slide .s-text.in-font { font-size: calc(15rem * var(--scale, 1)); }
@media (min-width: 768px) {
  .slide .s-head { font-size: calc(125rem * var(--scale, 1)); line-height: 1.04; }
  .slide .s-text { font-size: 25rem; line-height: 31rem; }
  .slide .s-text.in-font { font-size: calc(25rem * var(--scale, 1)); line-height: 1.24; }
}

/* Image slides */
.slide.img { padding: 0; min-height: 0; height: 320rem; flex: 0 0 auto; display: block; }
.slide.img img { display: block; height: 100%; width: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
@media (min-width: 768px) { .slide.img { height: 880rem; } }
.r-note, .tt-note { font-size: 12rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.tt-note { margin-top: -20rem; padding-bottom: 20rem; }
.tt-note[hidden], .r-note[hidden] { display: none; }

/* Glyph grid */
.glyphs { overflow: hidden; padding-top: 80rem; }
@media (min-width: 768px) { .glyphs { padding-top: 198rem; } }
.glyphs ul { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); padding-bottom: 1px; }
@media (min-width: 768px) { .glyphs ul { grid-template-columns: repeat(26, minmax(0, 1fr)); } }
.glyphs li { margin: -0.5px; border: 1px solid var(--fg); }
.glyph { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 42.77rem; font-size: calc(22rem * var(--scale, 1)); line-height: 1; cursor: default; }
@media (min-width: 768px) { .glyph { height: 71.3rem; font-size: calc(30rem * var(--scale, 1)); } }
.big-glyph {
  pointer-events: none; position: absolute; left: -1px; bottom: -1px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: calc(200% + 3px); height: calc(200% + 3px);
  background: var(--fg); color: var(--bg);
  font-size: calc(48rem * var(--scale, 1)); opacity: 0; transition: opacity .15s;
}
@media (min-width: 768px) { .big-glyph { font-size: calc(90rem * var(--scale, 1)); } }
.glyph:hover .big-glyph { opacity: 1; }
.glyphs li:nth-child(9n) .big-glyph, .glyphs li:nth-child(9n-1) .big-glyph { left: auto; right: -1px; }
@media (min-width: 768px) {
  .glyphs li:nth-child(9n) .big-glyph, .glyphs li:nth-child(9n-1) .big-glyph { left: -1px; right: auto; }
  .glyphs li:nth-child(26n) .big-glyph, .glyphs li:nth-child(26n-1) .big-glyph { left: auto; right: -1px; }
}
.glyphs li:nth-child(-n+9) .big-glyph { bottom: auto; top: -1px; }
@media (min-width: 768px) { .glyphs li:nth-child(-n+9) .big-glyph { bottom: -1px; top: auto; } .glyphs li:nth-child(-n+26) .big-glyph { bottom: auto; top: -1px; } }

/* Information */
.info { margin-top: 66rem; }
@media (min-width: 768px) { .info { margin-top: 200rem; } }
.info .site-grid { row-gap: 70rem; }
@media (min-width: 768px) { .info .site-grid { row-gap: 0; } }
.info .rule { grid-column: 1 / -1; display: none; border-top: 1px solid var(--fg); }
.info .col { grid-column: 1 / -1; border-top: 1px solid var(--fg); padding-top: 10rem; }
.info .col h2 { font-weight: 400; font-size: inherit; margin-bottom: 1.25em; }
.info .col p { line-height: 1.35; }
.info .col p + p { margin-top: 1em; }
@media (min-width: 768px) {
  .info .rule { display: block; }
  .info .col { border-top: 0; padding-top: 20rem; padding-right: 78rem; }
  .info .c1 { grid-column: 1 / span 10; }
  .info .c2 { grid-column: 11 / span 4; }
  .info .c3 { grid-column: 15 / span 6; }
  .info .c4 { grid-column: 21 / span 4; padding-right: 0; }
}

/* Next typeface */
.next { margin-top: 80rem; }
@media (min-width: 768px) { .next { margin-top: 200rem; } }
.next .typetester .row-meta { border-top: 1px solid var(--fg); }
.next .text-line { cursor: pointer; }

/* Mobile sticky buy */
.mobile-buy { position: sticky; bottom: 0; z-index: 99; margin-top: 80rem; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--fg); background: var(--bg); padding: 0 !important; }
.mobile-buy .site-button { border: 0; }
.mobile-buy .site-button + .site-button { border-left: 1px solid var(--fg); }
@media (min-width: 768px) { .mobile-buy { display: none; } }

/* links used as specimen lines never underline */
a.text-line:hover { text-decoration: none; }

/* ── ASSETS ────────────────────────────────────────────────────── */
.assets-page { padding-top: 0; }
/* filter bar: pinned under the header while the grid scrolls */
.ag-head { position: sticky; top: var(--hh, 60rem); z-index: 98; background: var(--bg); display: flex; align-items: center; justify-content: flex-end; padding: 8rem 20rem; margin: 0 -20rem 0; border-bottom: 1px solid var(--fg); }
@media (min-width: 768px) { .ag-head { padding-top: 14rem; padding-bottom: 14rem; } }
.ag-filters { justify-content: flex-end; }
.ag-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.asset-grid { border-top: 0 !important; }
.ag-filters { display: flex; flex-wrap: wrap; gap: 8rem; }
.ag-filter { cursor: pointer; display: none; }
.ag-filter.on, .ag-filter:hover { background: var(--fg); color: var(--bg); }
/* mobile: one dropdown button instead of chips */
.ag-select { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--fg); padding: 0 10rem; height: 30rem; font-size: 11rem; letter-spacing: .08em; text-transform: uppercase; background: var(--bg); color: var(--fg); }
.ag-select select { appearance: none; -webkit-appearance: none; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding-right: 22rem; outline: none; }
.ag-select svg { position: absolute; right: 10rem; width: 8rem; fill: currentColor; pointer-events: none; }
@media (min-width: 768px) { .ag-filter { display: inline-block; } .ag-select { display: none; } }
.asset-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--fg); border-left: 1px solid var(--fg); }
@media (min-width: 768px) { .asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ag-item { display: flex; flex-direction: column; border-right: 1px solid var(--fg); border-bottom: 1px solid var(--fg); background: var(--bg); }
.ag-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.ag-img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .8s var(--ease-out), filter .5s; }
@media (hover: hover) { .ag-item:hover .ag-img img { transform: scale(1.03); filter: none; } }
.ag-item.focus .ag-img img { filter: none; }
.ag-meta { display: flex; justify-content: space-between; gap: 12rem; align-items: flex-start; padding: 12rem 12rem 4rem; border-top: 1px solid var(--fg); font-size: 14rem; line-height: 1.3; }
.ag-name { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-name:hover { text-decoration: underline; }
.ag-price { white-space: nowrap; }
.ag-foot { display: flex; justify-content: space-between; gap: 12rem; padding: 0 12rem 12rem; font-size: 12rem; letter-spacing: .08em; text-transform: uppercase; }
.ag-cat { opacity: .55; }
@media (min-width: 768px) { .ag-meta { padding: 16rem 18rem 6rem; font-size: 18rem; } .ag-foot { padding: 0 18rem 16rem; } }
.asset-slides { margin-top: 20rem; }
@media (min-width: 768px) { .asset-slides { margin-top: 40rem; } }
.more { margin-top: 80rem; }
@media (min-width: 768px) { .more { margin-top: 150rem; } }
.more .sec-label { display: block; margin-bottom: 40rem; }