/* Fonts are loaded in memory by fontload.js (no @font-face URLs). */
.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-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; }
.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; }
}

/* ── 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 .site-grid { border-top: 1px solid var(--fg); padding-top: 12rem; padding-bottom: 120rem; row-gap: 40rem; }
@media (min-width: 768px) { .site-footer .site-grid { padding-top: 20rem; padding-bottom: 20rem; } }
.f-brand { grid-column: 1 / span 4; }
.f-links { grid-column: 5 / span 4; }
.f-right { grid-column: 1 / span 4; display: flex; flex-direction: column; justify-content: space-between; }
@media (min-width: 768px) { .f-right { grid-column: 21 / span 4; align-items: flex-end; text-align: right; } }

/* ── 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; }
#dtw.on { display: flex; }
#dtw p { font-family: 'fg-g', var(--ui); font-size: clamp(40px, 8vw, 80px); margin-bottom: 16px; }
#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: 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 { position: static; } .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); }

/* 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)); } }
.tt-line [contenteditable] { display: inline-block; outline: none; min-width: 1ch; }

/* Application slides */
.slides-outer { position: relative; margin-top: 80rem; }
@media (min-width: 768px) { .slides-outer { margin-top: 200rem; } }
.slides-sticky { position: sticky; top: 60rem; }
.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; }
}
@media (max-width: 767px) { .slides-sticky { top: 112rem; } }

/* 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: block; 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; }