/*
╭──────────────────╮
│ GLOBAL VARIABLES │
╰──────────────────╯
*/

@font-face {
    font-family: "MD System";
    src: url("/static/type/MDSystem-VF.woff2") format(woff2);
}

@font-face {
    font-family: "MD System Mono";
    src: url("/static/type/MDSystemMono-Regular.woff2") format(woff2);
    font-weight: normal;
}

@font-face {
  font-family: "MD Lorien";
  src: url("/static/type/MDLorien-VF.woff2") format(woff2);
  font-style: normal;
}

@font-face {
  font-family: "MD Lorien";
  src: url("/static/type/MDLorien-Italic-VF.woff2") format(woff2);
  font-style: italic;
}

:root {
    font-size: 16px;

    /* Variables */
        /* Type */
        --font-ui: "MD System", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-mono: "MD System Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        --font-serif: "MD Lorien", Times, serif;

        --font-ui-wght: 400;
        --font-ui-wdth: 100;
        --font-ui-slnt: 0;

        --font-wght-bold: 700;

        /* Colours */
        --text: #000;
        --text-hover: #222;
        --text-attenuated: #888;
        --text-distinct: #777;
        --rule: #CCC;
        --rule-strong: #999;
        --rule-attenuated: #DDD;
        --background: #F6F6F6;
        --background-subtle: #E7E7E7;
        --background-offset: #FFF;

        /* UI */
        --h-basis: 30px;
        --v-basis: 32px;
        --radius: 1pt;
        --shadow: 0px 6px 16px rgba(0,0,0,0.03), 0px 4px 8px rgba(0,0,0,0.03), 0px 2px 4px rgba(0,0,0,0.03);

        /* Juice */
        --transition-instant: 0.05s;
        --transition-fast: 0.08s;
        --transition-medium: 0.12s;

        /* Glass Nav (Top Menu) */
        --gn-text: var(--off-white);
        --gn-text-focus: rgba(255, 255, 255, 0.8);
        --gn-text-attenuated: rgba(255, 255, 255, 0.6);
        --gn-background: rgba(54, 54, 54, 0.6);
        --gn-background-focus: rgba(255, 255, 255, 0.05);
        --gn-border: rgba(255, 255, 255, 0.1);
        --gn-border-double: rgba(255, 255, 255, 0.2);
}

.darkmode {
    --text: #F6F6F6;
    --text-hover: #DDD;
    --text-attenuated: #777;
    --text-distinct: #999;
    --rule: #333;
    --rule-strong: #666;
    --rule-attenuated: #222;
    --background: #000;
    --background-subtle: #1A1A1A;
    --background-offset: #1A1A1A;

    /* Light glare compensation for bold text */
    --font-wght-bold: 660;
}

/*
╭────────────╮
│ ANIMATIONS │
╰────────────╯
*/

@keyframes gn__show {
    from { opacity: 0; margin-top: -4px; margin-bottom: 4px; }
    to { opacity: 1; margin-top: 0; }
}

@keyframes gn__submenu__show {
    from { background-color: rgba(0,0,0,0); margin-top: 0px; }
    to { background-color: var(--gn-background); margin-top: 4px; }
}

@keyframes gn_local__submenu__show {
    from { background-color: rgba(250, 250, 250, 0); margin-top: 0px; }
    to { background-color: var(--background-subtle); margin-top: 4px; }
}

@keyframes gn__stowed__show {
    0% {
        opacity: 0;
        font-size: 0;
        animation-timing-function: ease-in;
    }
    50% {
        opacity: 0;
        font-size: 1rem;
        margin-left: -1em;
        animation-timing-function: ease-out;
    }
    100% {
        visibility: visible;
        opacity: 1;
        font-size: 1rem;
        margin-left: 0.5rem;
    }
}

@keyframes gn__stowed__hide {
    0% {
        opacity: 1;
        margin-left: 0.5rem;
        animation-timing-function: ease-in;
    }
    50% {
        visibility: hidden;
        opacity: 0;
        margin-left: -1rem;
        font-size: 1rem;
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        font-size: 0;
    }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% - var(--v-basis))); }
}

/*
╭───────────────╮
│ ELEMENT RULES │
╰───────────────╯
*/

* {
    /* We’re handling all type modulation via the variable font — */
    /* Therefore no synthetic bold or oblique, ever, no matter what. */
    /* If a browser doesn’t support VFs, that’s its own problem. */
    font-variation-settings: "wght" var(--font-ui-wght), "wdth" var(--font-ui-wdth), "slnt" var(--font-ui-slnt);
    font-synthesis: none;
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    background-color: var(--background);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.375;
    letter-spacing: 0.006em;
    transition: background-color var(--transition-fast);
}

h1 {
    font-size: 2rem;
    line-height: 1.1;
    /* text-wrap: balance; (futureproofing yo) */
    letter-spacing: -0.006em;
    --font-ui-wght: var(--font-wght-bold);
    --font-ui-wdth: 75;
    margin: 1rem 0rem;
}

h2 { --font-ui-wght: var(--font-wght-bold); }
h3 { color: var(--text-attenuated); }

h2, h3, p {
    font-size: 1rem;
    margin: 1rem 0rem;
}

aside, figcaption {
    color: var(--text-distinct);
    --font-ui-wdth: 75;
    letter-spacing: 0.01em;
    margin: 1rem 0rem;
    scroll-margin-top: 5rem;
}

b, strong { --font-ui-wght: var(--font-wght-bold); }
i, em { --font-ui-slnt: -10; }
pre { white-space: pre-line; }
pre > code { white-space: pre; }
code, pre { font-family: var(--font-mono); }
abbr { font-feature-settings: "c2sc"; }
q::before { content: "“"; }
q::after { content: "”"; }
ins { text-decoration: none; }

ins, cite, code {
    padding: 0.1em 0.3em;
    background-color: var(--background-subtle);
    border-radius: var(--radius);
    border: 1px solid rgba(0,0,0,0.08);
}

hr {
    width: 100%;
    height: 1px;
    border: solid var(--rule);
    border-width: 1px 0px 0px;
    margin: 0;
}

a {
    color: var(--text-distinct);
    text-decoration: none;
    transition-duration: var(--transition-instant);
}

a:hover { color: var(--text-hover); }

p button {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;

    color: var(--background);
    background-color: var(--text-hover);
    border: 1px solid var(--text);
    border-radius: var(--radius);
    padding: 0.2rem 0.5rem;

    transition-duration: var(--transition-fast);
}

p button:not(:disabled):hover {
    color: var(--background-subtle);
    background-color: var(--text);
    border-color: var(--text);
    cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--background);
    border: 1px solid var(--rule-strong);
    /* vertical-align: middle; */
    /* margin-top: 0.1rem; */
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 0.1rem;
    cursor: pointer;
    transition-duration: var(--transition-fast);
}

input[type="checkbox"] { border-radius: var(--radius); }

input[type="radio"] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    border-color: var(--text);
    background-color: var(--text-hover);
    box-shadow: inset 0 0 0 1px var(--text-distinct);
}

input[type="radio"] + label,
input[type="checkbox"] + label { cursor: pointer; }

input[type="range"] {
    appearance: none;
    height: 1px;
    background-color: var(--background);
    border-bottom: 1px solid var(--rule-strong);
    box-shadow: 0 1px 0 var(--background-offset);
    margin-top: 0.7em;
}

/* Webit slider thumb */
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--rule);
    border: 1px solid var(--rule-strong);
    border-radius: 0.6rem;
    margin-top: 0.1rem;
    box-shadow: inset 0 0 0 1px var(--background);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="range"]::-webkit-slider-thumb:hover {
    background-color: var(--rule-strong);
    box-shadow: inset 0 0 0 1px var(--rule);
    border-color: var(--text-hover);
    cursor: pointer;
}

/* Firefox slider thumb */
input[type="range"]::-moz-range-thumb {
    appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: var(--rule);
    border: 1px solid var(--rule-strong);
    border-radius: 0.6rem;
    box-shadow: inset 0 0 0 1px var(--background);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="range"]::-moz-range-thumb:hover {
    background-color: var(--rule-strong);
    box-shadow: inset 0 0 0 1px var(--rule);
    border-color: var(--text-hover);
    cursor: pointer;
}

table {
    text-align: left;
    border-collapse: collapse;
    margin: -0.5em 0 1em;
}

table th { --font-ui-wght: 700; }
table th, table td { padding: 0.5em 0em; }
table tr:not(:last-child) { border-bottom: 1px solid var(--rule-attenuated); }

details > summary {
    --font-ui-wght: 700;
    cursor: pointer;
}

details > p { margin: 1em 0 1em 0; }

section,
article,
footer,
.grid {
    display: grid;
    padding: var(--h-basis) var(--v-basis);
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--v-basis);
    row-gap: var(--h-basis);
}

section > h1,
section > h2,
section > h3,
section > p,
section > aside,
article > h1,
article > h2,
article > h3,
article > p,
article > aside,
footer > h1,
footer > h2,
footer > h3,
footer > p,
footer > aside,
section > aside > p { margin: 0; }

section > hr { grid-column: 1 / -1; }
section > h1 { grid-column: 2 / span 2; }
section > h2,
section > h3 { grid-column: 1 / span 1; }
section > p,
section > ul,
section > ol,
section > pre,
section > blockquote,
section > address,
section > details { grid-column: 2 / span 2; }
section > aside { grid-column: 5 / span 1; }
section > table { grid-column: 2 / span 3; }

article > p { grid-column: 2 / span 3; }
article > aside { grid-column: 5 / span 1; }
article > figure { grid-column: 1 / -1; }
article figure img,
article figure video { max-width: 100%; }

section p { max-width: 32em; }

article { align-items: baseline; }
article figure { margin: 1rem 0rem; }

article p {
    font-family: var(--font-serif);
    font-feature-settings: "liga";
    font-variant-numeric: oldstyle-nums;
    font-size: 1.065rem;
    line-height: 1.5rem;
    
    max-width: 56ch;
}

article p i,
article p em { font-style: italic; }
article p b,
article p strong { font-weight: bold; }


/*
╭────────────────╮
│ GLOBAL CLASSES │
╰────────────────╯
*/

.grid__last {
    grid-column: -2 / span 1;
    margin-left: auto;
}

section.ruled,
article.ruled,
.grid.ruled { border-top: 1px solid var(--rule); }

.cta {
    /* Align better at the end of paragraphs */
    display: inline-block;
    margin-top: -0.2rem;

    color: var(--text-distinct);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 0.2rem 0.5rem;
    --font-ui-wdth: 100;

    transition-duration: var(--transition-fast);
}

.cta:hover, a:hover .cta {
    color: var(--text-hover);
    border-color: var(--text-distinct);
    cursor: pointer;
}

select.styled {
    margin: 0;
    padding: 0.54rem 0.8rem 0.5rem;
    width: 100%;
    
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    letter-spacing: 0.01em;

    color: var(--text-distinct);
    background-color: var(--background);
    border: 1px solid var(--rule);
    border-radius: var(--radius);

    transition-duration: var(--transition-fast);
}

select.styled:hover {
    cursor: context-menu;
    color: var(--text-hover);
    background-color: var(--background-subtle);
    border-color: var(--rule-strong);
}

select.styled:focus {
    color: var(--text-hover);
    background-color: var(--background-subtle);
    border-color: var(--rule-strong);
    outline: 1px solid var(--rule);
    outline-offset: -4px;
}

p button.accent, .cta.accent {
    color: #F6F6F6;
    background-color: #3050FF;
    border-color: rgba(0, 0, 0, 0.2);
}

p button.accent:hover, .cta.accent:hover {
    color: #FFF;
    background-color: rgb(60, 102, 255);
    border-color: rgba(0, 0, 0, 0.3);
}

p button.scary, .cta.scary {
    color: #F6F6F6;
    background-color: #FF5030;
    border-color: rgba(0, 0, 0, 0.2);
}

p button.scary:hover, .cta.scary:hover {
    color: #FFF;
    background-color: #FF674C;
    border-color: rgba(0, 0, 0, 0.3);
}

hr.flush {
    margin: 0 calc(var(--v-basis)*-1);
    width: calc(100% + var(--v-basis) * 2);
}

hr.attenuated { border-color: var(--rule-attenuated); }

.mono { font-family: var(--font-mono); font-variant-numeric: slashed-zero; }

.darkmode p button.accent, .darkmode .cta.accent,
.darkmode p button.scary, .darkmode .cta.scary { border-color: rgba(255, 255, 255, 0.2); }

.darkmode p button.accent:hover, .darkmode .cta.accent:hover,
.darkmode p button.scary:hover, .darkmode .cta.scary:hover { border-color: rgba(255, 255, 255, 0.3); }

/*
╭───────────────╮
│ GLOBAL LAYOUT │
╰───────────────╯
*/

/* Glass Nav */
.gn * { box-sizing: border-box; }

.glass_nav {
    pointer-events: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    margin: var(--h-basis) var(--v-basis);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--v-basis);
    z-index: 10;
}

.glass_nav nav, .glass_nav .gn { pointer-events: all; }
        
/* Reset buttons/type */
.gn ul { list-style: none; margin: 0; padding: 0; }
.gn h1, .gn a, .gn button { margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; height: auto; }
.gn button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; appearance: none; }

.gn {
    --gn-text: #F6F6F6;
    --gn-text-focus: rgba(255, 255, 255, 0.8);
    --gn-text-attenuated: rgba(255, 255, 255, 0.6);

    --gn-background: rgba(36, 36, 36, 1);
    --gn-background-focus: rgba(255, 255, 255, 0.05);

    --gn-border: rgba(255, 255, 255, 0.1);
    --gn-border-double: rgba(255, 255, 255, 0.2);

    display: inline-block;
    width: max-content;
    top: 1rem;

    font-family: "MD System", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: "ss03";
    letter-spacing: 0.01em;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
    color: var(--gn-text);

    background-color: var(--gn-background);
    border: 1px solid var(--gn-border);
    border-radius: var(--radius);
}

.glass_nav__primary { grid-column: 1 / span 2; }
.glass_nav__fonts { grid-column: 5 / span 1;}

.gn ul { display: flex; }
.gn li { flex-grow: 0; flex-shrink: 0; }

.gn li {
    padding: 0;
    margin: -1px;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

/* Make sure contents are fully clickable */
.gn > ul > li > *:not(nav):not(.gn__submenu) {
    padding: 0.54rem 0.8rem 0.5rem;
    display: inline-block;
}

.gn li svg {
    vertical-align: middle;
    margin-top: -2px;
}

/* Item Dividers */
.gn li:not(:last-child) {
    border-right-color: var(--gn-border);
    margin-right: 0px;
}

/* Top Level Hover States */
.gn li { transition: border-color 0.08s, background-color 0.08s, color 0.08s }
.gn li:not(:last-child):hover,
.gn li:not(:last-child):focus-within { border-right-color: var(--gn-border-double); }
.gn li:hover,
.gn li:focus-within {
    border: 1px solid var(--gn-border);
    color: var(--gn-text-focus);
    background-color: var(--gn-background-focus);
}

.gn li svg { transition: opacity 0.08s; }
.gn li:hover svg, .gn li:focus-within svg { opacity: 0.7; }

.gn li, .gn button, .gn a { cursor: pointer; }
.gn button:focus, .gn a:focus { outline: none; }

/* Submenu States */
.gn__submenu { display: none; }

.gn li:hover .gn__submenu,
.gn li:focus-within .gn__submenu { display: block; }
.gn li:hover .gn__submenu ul, .gn li:focus-within .gn__submenu ul { animation: gn__submenu__show 0.08s ease-out; }

.gn li { position: relative; }
.gn__submenu {
  position: absolute;
  left: -1px;
  top: 100%;
  user-select: none;
  -webkit-user-select: none;
}
.gn__submenu.rhs { position: absolute; left: auto; right: -1px; top: 100%; }

.gn__submenu ul {
    margin-top: 4px;
    padding-top: 0.2rem;
    white-space: nowrap;

    background-color: var(--gn-background);
    border: 1px solid var(--gn-border-double);
    border-radius: var(--radius);
    box-shadow: var(--shadow);

    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.gn .gn__submenu li {
    margin: 0rem 0.2rem 0.2rem;
    padding: 0;
    border: 1px solid transparent;
    color: var(--gn-text);
}

.gn .gn__submenu li a,
.gn .gn__submenu li label {
    /* Make sure link clickable areas are big enough */
    display: inline-block;
    padding: 0.44rem 0.6rem 0.4rem 0.6rem;
    width: 100%;
}

.gn .gn__submenu li input { margin-left: 0.6rem; margin-right: -0.3rem; }

.gn .gn__attenuated, .gn .gn__submenu li .gn__attenuated { color: var(--gn-text-attenuated); }

.gn .gn__submenu li:hover,
.gn .gn__submenu li:focus-within {
    background-color: var(--gn-background-focus);
    border: 1px solid var(--gn-border-double);
    color: var(--gn-text-focus);
}

.gn .gn__submenu ul hr {
    margin: 0rem 0rem 0.2rem;
    grid-column: 1 / -1;
}

/* If the last link is on its own, make it double width */
/* Nth-of-type rather than nth-child because we don’t want to count dividers */
.gn .gn__submenu li:last-child:nth-of-type(odd) {
    grid-column: 1 / -1;
}

/*
Menu label stow animations will play on page load —
rather than disabling them with js, let’s just wait
until they’re done before fading in the menu.
*/
.gn { animation: gn__show 0.1s ease both 0.2s; }

.gn .gn__stowed {
    vertical-align: top;
    display: inline-block;
    overflow: hidden;
    animation: gn__stowed__hide 0.15s forwards;
}

.gn li:hover .gn__stowed,
.gn li a:focus .gn__stowed,
.gn li button:focus .gn__stowed {
    animation: gn__stowed__show 0.15s forwards;
}

/* CTA */
.gn .gn__highlighted {
    background-color: rgb(40, 85, 255);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gn .gn__highlighted:hover,
.gn .gn__highlighted:focus-within {
    background-color: rgb(60, 102, 255);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Glassnav component with in-page styling */
.gn.local {
    height: min-content;
    color: var(--text-distinct);
    background-color: var(--background);
    border-color: var(--rule);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.gn.local li:not(:last-child) { border-right-color: var(--rule); }
.gn.local li:not(:last-child):hover,
.gn.local li:not(:last-child):focus-within { border-right-color: var(--rule-strong); }
.gn.local li:hover,
.gn.local li:focus-within {
    border: 1px solid var(--rule-strong);
    color: var(--text-hover);
    background-color: var(--background-subtle);
}

.gn.local .gn__submenu::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.gn.local li:hover .gn__submenu ul, .gn.local li:focus-within .gn__submenu ul { animation: gn_local__submenu__show 0.08s ease-out; }
.gn.local .gn__submenu ul {
    background-color: var(--background-subtle);
    border: 1px solid var(--rule-strong);
}

.gn.gn.local .gn__submenu li {
    border: 1px solid transparent;
    color: var(--text-distinct);
}

.gn.local .gn__attenuated, .gn.local .gn__submenu li .gn__attenuated { color: var(--text-attenuated); }
.gn.local .gn__submenu li:hover,
.gn.local .gn__submenu li:focus-within {
    background-color: rgba(128, 128, 128, 0.05);
    border: 1px solid var(--rule);
    color: var(--text-hover);
}

.gn.safari:not(.local),
.gn.safari:not(.local) .gn__submenu ul {
    --gn-background: rgba(54, 54, 54, 0.6);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

/*
╭────────────────╮
│ PAGES: GENERIC │
╰────────────────╯
*/

.page { margin-top: 4rem;}
.page > h1 { grid-column: 1 / span 2; }
.page > h2,
.page > h3 { grid-column: 1 / span 1; }
.page > p { grid-column: 2 / span 2; }
.page > aside { grid-column: 4 / span 1; }
.page > aside.double { grid-column: 4 / span 2; }

footer {
    border-top: 1px solid var(--rule);
    background-color: var(--background-subtle);
}

footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer ul > li > h2 {
    margin-top: 0;
    --font-ui-wght: 600;
}

.footer__logo__mark { float: left; margin-top: -2px; }
.footer__logo__type { margin-left: 1em; }

.footer__meta {
    grid-column: -3 / span 2;
    --font-ui-wdth: 50;
    text-align: right;
    font-feature-settings: "smcp", "c2sc";
    color: var(--text-attenuated); 
}

.page__min_height__wrapper { min-height: calc(100vh - 20rem); /* about 1 footer */ }

/*
╭─────────────╮
│ PAGES: FONT │
╰─────────────╯
*/

.font__styles {
  padding-top: 20rem;
  color: #F6F6F6;
  background-color: #000;
  align-items: baseline;
}

/*
Superfamily has div top level,
regular family has ol top level.
*/
.font__styles > div,
.font__styles > ol {
    grid-column: 2 / span 4;
    max-width: 100ch;
}

.font__styles ol {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 3rem;
    line-height: 1.1;
}

.font__styles ol li { display: inline-block; }
.font__styles__list li:not(:last-child) div::after { content: ","; }
.font__styles__list li:last-child div::after { content: "."; }

.font__info__link_minisite {grid-column: -3 / span 1; }
.font__info__link_specimen {grid-column: -2 / span 1; }

.font__info__thumb svg { width: 100%; height: auto; }

.font__info__thumb .cta {
    width: 100%;
    margin-top: 0;
    text-align: center;
    box-sizing: border-box;
}

.font__info__thumb a:hover svg { --rule-strong: var(--text-distinct); }

.font__samples { display: block; padding: 0; }
.font__samples__tester {
    display: grid;
    padding: 1rem var(--v-basis) 3rem;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--v-basis);
    row-gap: var(--h-basis);
    overflow-x: hidden;
}

.font__samples__tester:not(:last-child) { border-bottom: 1px solid var(--rule); }

.font__samples__controls { align-self: baseline; color: var(--text-attenuated); display: flex; }
.font__samples__stylename { margin: 0; }
.font__samples__fontsize { grid-column: 2 / span 2; }
.font__samples__lineheight { grid-column: 4 / span 1; }
.font__samples__letterspacing { grid-column: 5 / span 1; }
.gn.font__samples__otl { grid-column: 6; grid-column-end: span 1; margin-left: auto; }

.font__samples__controls > label {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    flex-basis: 2ch;
    text-align: right;
    margin-right: 0.5em;
}

.font__samples__fontsize > label { flex-basis: 5ch; text-align: left; }
.font__samples__controls input[type="range"] { flex-grow: 1; }

.font__samples__tester__input {
    grid-column: 1 / -1;
    max-width: 2056px;
    margin: -1rem auto 0;
}

.font__samples__tester__input[data-xl="true"] {
    max-width: 100%; /* Ensure XL testers don’t overflow */
    text-align: center;
}

.font__samples__tester__input[data-sm="true"] {
    text-align: left;
    columns: 3;
    column-gap: var(--v-basis);
}

.font__samples__controls { z-index: 2; }

/* -16px margins are countered by 32px offset in the js calculation;
don’t change one without the other. */
.font__samples__tester__input { z-index: 1; grid-row: 2; }

.font__samples__tester__input__inner { transition: color var(--transition-fast); display: inline; }
.font__samples__tester__input__inner:focus,
.font__samples__tester__input__inner:focus-within { outline: none; color: var(--text-hover); }

.font__samples__tester .font__samples__controls:not(.font__samples__stylename) { opacity: 0; transition: opacity var(--transition-fast); }
.font__samples__tester:hover .font__samples__controls,
.font__samples__tester:focus .font__samples__controls,
.font__samples__tester:focus-within .font__samples__controls { opacity: 1; }

.font__glyphs__list { grid-column: 3 / -1; }
.font__otl__list { grid-column: 1 / span 4; }

.font__glyphs__list ul,
.font__otl__list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.font__glyphs__list ul:first-child,
.font__otl__list ul:first-child { margin-top: -0.2rem; }
.font__glyphs__list ul:not(:last-child),
.font__otl__list ul:not(:last-child) { margin-bottom: 1.5rem; }

.font__glyphs__list ul h3,
.font__otl__list ul h3 {
    font-family: var(--font-ui);
    flex-basis: 100%;
    flex-shrink: 0;
    margin: 0rem 0rem 0.5rem;
}

.font__glyphs__list li,
.font__otl__list li {
    font-size: 2rem;
    line-height: 4rem; /* affects height */
    flex-basis: 4rem; /* affects width */
    flex-shrink: 0;
    border: 1px solid var(--rule);
    margin: 0px -1px -1px 0px;
    text-align: center;
    transition: background-color var(--transition-fast);
}

.font__glyphs__list li:hover,
.font__otl__list li:hover {
    color: var(--text-hover);
    border: 1px solid var(--rule-strong);
    background-color: var(--background-subtle);
    z-index: 2;
    border-radius: var(--radius);
    cursor: pointer;
}

.font__glyphs__selected_track { grid-column: 1 / span 2; }

.font__glyphs__selected_sled,
.font__otl__selected_sled {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    position: sticky;
    top: 6rem;
    margin-bottom: -1px; /* align with palette */
}

.font__glyphs__selected_sled select,
.font__otl__selected_sled select {
    width: calc(100% + 2px);
    margin: -1px -1px 0px -1px;
}

.font__glyphs__selected_glyph {
    font-size: 16rem;
    line-height: 24rem;
    text-align: center;
    border-bottom: 1px solid var(--rule);
}

.font__glyphs__selected_info {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.font__glyphs__selected_info b {
    font-variant-numeric: normal;
    display: inline-block;
    min-width: 5em;
}

.font__otl__selected_sled { display: flex; flex-wrap: wrap; }

.font__otl__selected_sled > div {
    flex-basis: 49%;
    flex-shrink: 1;
    flex-grow: 1;
}

.font__otl__selected_off { border-right: 1px solid var(--rule); }

.font__otl__selected__label {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--rule);
}

.font__otl__selected__glyph {
    font-size: 8rem;
    line-height: 12rem;
    text-align: center;
    border-bottom: 1px solid var(--rule);
}

.font__otl__selected__note {
    margin: 0;
    padding: 0.5rem 1rem;
    color: var(--text-attenuated);
    --font-ui-wdth: 75;
}

.font__languages { row-gap: 1rem; }

.font__languages input[type="text"] {
    margin: 0;
    margin-top: -0.5rem;
    margin-left: -1rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    appearance: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background-color: transparent;
    transition-duration: var(--transition-fast);
}

.font__languages input[type="text"]:hover { border-color: var(--rule-strong); }
.font__languages input[type="text"]:focus {
    border-color: var(--rule-strong);
    background-color: var(--background-subtle);
    outline: 1px solid var(--rule);
    outline-offset: -4px;
}

.font__languages__note { grid-column: 5 / span 2; }
.font__languages__disclaimer {
    --font-ui-wdth: 75;
    grid-column: 1 / span 1;
    color: var(--text-attenuated);
    margin-right: 2rem;
}

.font__languages__disclaimer a { color: var(--text-hover); }
.font__languages__disclaimer a:hover { color: var(--text-attenuated); }

.font__languages__box {
    position: relative;
    margin: 0;
    margin-left: -1rem;
    padding: 0.6rem 1rem 2rem;
    background-color: var(--background-subtle);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    grid-column: 2 / -1;
    max-height: 24rem;
    overflow-y: scroll;
    overflow-x: hidden; /* Hide horiz scrollbar on Windows */
}

/* Fade bottom of the box to show there’s scrollable content */
.font__languages__box > div {
    content: '';
    width: calc(100% + 2rem);
    height: 2rem;
    position: sticky;
    margin-left: -1rem;
    margin-bottom: -2rem;
    top: 100%;
    background: linear-gradient(transparent 0, var(--background-subtle));
}

.font__languages__list {
    list-style: none;
    margin: 0rem -1rem 0rem 0rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--v-basis);
}

.font__languages__list__name {
    margin-left: 0.5em;
    --font-ui-wdth: 75;
    grid-auto-flow: row dense;
}

.font__languages__list__tag {
    font-family: var(--font-mono);
    font-feature-settings: "smcp";
    color: var(--text-attenuated);
}

.font__footer { align-items: baseline; }
.font__footer__buttons { grid-column: -3 / span 2; margin-left: auto; }

/*
╭────────────────╮
│ PAGES: CATALOG │
╰────────────────╯
*/

.catalog { margin-top: 5rem; }

.catalog {
    list-style: none;
    padding: 0 var(--v-basis);
    overflow-x: hidden;
}

.catalog__family {
    margin: 0rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    color: var(--text-attenuated);
}

.catalog__family h2 { --font-ui-wght: 400; }

.catalog__family:not(:last-child) { border-bottom: 1px solid var(--rule); }
.catalog__family__info { grid-column: -2 / span 1; text-align: right; }
.catalog__family img { min-width: 100%; height: auto; }
.catalog__family img { transition-duration: var(--transition-instant); }
.darkmode .catalog__family img { filter: invert(95%); transition-duration: 0ms; }
.catalog__family a:hover img { opacity: 0.7; }

.catalog__family ul {
    margin: 0rem 0rem 2rem -0.2rem;
    margin-right: calc(var(--v-basis) * -1);
    padding: 0;
    grid-column: 1 / -1;
    list-style: none;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0.2));
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0.2));
}

.catalog__family ul li { margin-bottom: 1rem; }

/*
╭──────────────────────────────╮
│ PAGES: SPECIMEN/ARTICLE LIST │
╰──────────────────────────────╯
*/

.articles { padding-top: 6rem; }

.cards { list-style: none; margin: 0; }

.cards li { grid-column-end: span 4; }
.cards li:nth-child(2n),
.cards li:nth-child(5n) { grid-column-end: span 2; }
.cards li:nth-child(3n),
.cards li:nth-child(4n),
.cards li:nth-child(13n) { grid-column-end: span 3; }

.cards__caption {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: var(--gutter);
    font-feature-settings: "ss03";
}

.cards__caption p { margin: 0; }

.cards li .cards__caption {
    grid-template-columns: repeat(4, 1fr);
    align-items: baseline;
}

.cards__caption__title,
.cards__caption__name {
    grid-column: 1 / span 3;
}

.cards__caption__tag,
.cards__caption__styles {
    grid-column: -1;
    text-align: right;
}

.cards__caption__title h1 {
    margin: 0;
    font-size: 1rem;
    --font-ui-wght: 600;
    --font-ui-wdth: 100;
    letter-spacing: 0.002em;
    font-feature-settings: "ss03" 0;
    color: var(--text-hover);
    transition: color var(--transition-fast);
}

.cards a:hover h1 { color: var(--text); }

.cards__caption__tag {
    text-transform: capitalize;
    grid-column: -1;
    color: var(--mid-gray);
}

.cards__caption__deck {
    grid-column: 1 / -1;
    max-width: 56ch;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.cards li img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-sizing: border-box;

    outline: 1px solid rgba(0,0,0,0.1);
    outline-offset: -1px;
}

.darkmode .cards li img { outline: 1px solid rgba(255,255,255,0.2); }

.cards li a:hover img { outline: 1px solid rgba(0,0,0,0.2); }
.darkmode .cards li a:hover img { outline: 1px solid rgba(255,255,255,0.3); }

.articles.cards li:nth-child(1n) {
    grid-column-end: span 3;
}

/*
╭────────────────╮
│ PAGES: ARTICLE │
╰────────────────╯
*/

.article__title {
    padding-top: 20rem;
    color: #F6F6F6;
    background-color: #000;
    align-items: baseline;
}

.article__title h1 {
    grid-column: 2 / span 3;
    /* text-wrap: balance; */
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.008em;
    --font-ui-wght: 700;
}

.article__title__deck,
.article h2 {
    grid-column: 2 / span 3;
    font-size: 1.5rem;
    line-height: 1.3;
    --font-ui-wght: 500;
    --font-ui-wdth: 90;
    letter-spacing: 0;
    max-width: 64ch;
}

.article__title__back { grid-column: 1 / span 1; }
.article__title__tag { grid-column: 5 / span 2; text-align: right; }
.article__title p { margin-bottom: -0.5rem; }

.article {
    counter-reset: footnote;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.article hr { grid-column: 1 / -1; }

.article p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-lines: 1;
}

/* .article h2 {
    grid-column: 2 / span 2;
    font-size: 1.4rem;
    line-height: 1.2;
    --font-ui-wght: 600;
} */

.article figure {
    display: grid;
    grid-column-gap: var(--v-basis);
    grid-template-columns: repeat(12, 1fr);
    margin-bottom: 0.5rem;
}

.article figure.twoup,
.article figure.threeup,
.article figure.fourup { row-gap: var(--h-basis); }

.article figure.twoup div { grid-column-end: span 6; }
.article figure.threeup div { grid-column-end: span 4; }
.article figure.fourup div { grid-column-end: span 3; }

.article figure img,
.article figure video {
    grid-column: 1 / -1;
    border-radius: var(--radius);
    outline: 1px solid rgba(0,0,0,0.1);
    outline-offset: -1px;
}

.article figure video { outline-offset: 0; }

.article figure img[src*=".svg"] { width: 100%; }

.darkmode figure img.invertable {
    filter: invert(1);
}

.darkmode .article figure img:not(.invertable),
.darkmode .article figure video:not(.invertable) { outline: 1px solid rgba(255,255,255,0.2); }

.article figure figcaption {
    margin-bottom: 0;
    grid-column: 3 / span 4;
}

.article figure div figcaption {
    margin: 0.5rem 0 0;
    max-width: 64ch;
}

.article a[href^="#footnote"]::after {
    counter-increment: footnote;
    content: counter(footnote);
    font-variant-numeric: normal;
    font-variant-position: super;
    padding: 0 0.1em;
}

.article a[name^="#footnote"]::before,
.article a[id^="#footnote"]::before,
.article a[name^="footnote"]::before,
.article a[id^="footnote"]::before {
    color: var(--text-attenuated);
    content: counter(footnote);
    font-variant-numeric: tabular-nums;
    margin-right: 1ch;
}

.article figcaption a,
.article aside a { color: var(--text-hover); }

.article figcaption a:hover,
.article aside a:hover { color: var(--text-distinct); }

/*
╭──────────────────╮
│ PAGES: MISC/EDGE │
╰──────────────────╯
*/

.nameplates {
    list-style: none;
    margin: 0;
    padding: 0 var(--v-basis);
    border-top: 1px solid var(--rule);
}

.nameplates li {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--v-basis);
    align-items: center;
    padding: 2.5rem 0;
}

.nameplates li:not(:last-child) { border-bottom: 1px solid var(--rule-attenuated); }

.nameplate__styles { grid-column: 1 / span 1; color: var(--text-attenuated); }
.nameplate__image { grid-column: 2 / span 3; }
.nameplate__year { grid-column: 6 / span 1; color: var(--text-attenuated); text-align: right; }
.nameplate__details { grid-column: 5 / span 1; }

.nameplates img {
    width: 100%;
    height: auto;
    max-width: 700px;
    margin-left: -4px;
}

.nameplates a:hover img { opacity: 0.8; }
.darkmode .nameplates img { filter: invert(95%); transition-duration: 0ms; }

/* we do not use !important flags in this household */
.gn > ul > li.gn__highlighted fontdue-buy-button { padding: 0; }
.gn__highlighted fontdue-buy-button button.buy-button { padding: 0.54rem 0.8rem 0.5rem; }

.gn__highlighted button.buy-button:hover {
    background: none;
    border: none;
    color: inherit;
}

.gn > ul > li > fontdue-cart-button.gn__cart_button {
    padding: 0;
    font-feature-settings: 'zero';
}

.gn__cart_button button { padding: 0.54rem 0.8rem 0.5rem; }

.font__footer__buy_button button.buy-button {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;

    color: var(--background);
    background-color: var(--text-hover);
    border: 1px solid var(--text);
    border-radius: var(--radius);
    padding: 0.2rem 0.5rem;

    transition-duration: var(--transition-fast);
}

.font__footer__buy_button button.buy-button:hover {
    color: var(--background-subtle);
    background-color: var(--text);
    border-color: var(--text);
    cursor: pointer;
}

.licensing__eula_download { display: inline-block; max-width: 16rem; }
.licensing__eula_download svg { width: 100%; height: auto; }
.licensing__eula_download .cta { width: 100%; text-align: center; box-sizing: border-box; margin-top: 0px; }

.licensing__eula_download:hover svg {
    --rule-strong: var(--text-distinct);
}

.page_404 { margin-top: 0; }

.notdef_marquee {
    width: 100%;
    margin: 6rem 0 0;
    padding: 0;
    display: flex;
    overflow: hidden;
    user-select: none;
}

.notdef_marquee ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--v-basis);
    min-width: 100%;

    animation: marquee 120s linear infinite;
}

.notdef_marquee ul svg path { fill: var(--rule-attenuated); }

/* Add some license clarification to the checkout flow */
.store-modal__license-selection__licenses::after {
    content: "Licenses are priced by total company size, not the number of people using the fonts. Please make sure the number covers everyone at the licensee’s company.";
    max-width: 32em;
    display: inline-block;
    opacity: 0.6;
}

/* Styling the trial fonts form Tom explicitly told me not to style */

.test-fonts__downloading a { color: var(--text-distinct) !important; }

.newsletter-signup__title,
.newsletter-signup__intro { display: none; }

.test-fonts__form .text-field__input,
.newsletter-signup .text-field__input,
.login-form .text-field__input {
    margin: 0;
    padding: 0.5rem 0.7rem;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
    font-size: inherit;
    color: inherit;
    appearance: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background-color: transparent;
    transition-duration: var(--transition-fast);
}

.test-fonts__form .text-field__input:hover,
.newsletter-signup .text-field__input:hover,
.login-form .text-field__input:hover { border-color: var(--rule-strong); }

.test-fonts__form .text-field__input:focus,
.newsletter-signup .text-field__input:focus,
.login-form .text-field__input:focus {
    border-color: var(--rule-strong);
    background-color: var(--background-subtle);
    outline: 1px solid var(--rule);
    outline-offset: -4px;
    box-shadow: none;
}

#test-fonts-eula-agreement + label { cursor: pointer; }

.test-fonts__form .submit-button,
.newsletter-signup .submit-button,
.login-form .submit-button {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0.5rem 0 0;

    color: var(--text-distinct);
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 0.2rem 0.5rem;

    transition-duration: var(--transition-fast);
}

.newsletter-signup .submit-button,
.login-form .submit-button {
  margin: 0;
}

.newsletter-signup .newsletter-signup__section:last-child {
  margin-bottom: 0.5rem;
}

.test-fonts__form .test-fonts__checkbox-field,
.newsletter-signup .newsletter-signup__checkbox-field { margin: 0 0 0.5rem; }

.test-fonts__form .test-fonts__section,
.newsletter-signup .newsletter-signup__section { margin: 0 0 1.25rem; }

.test-fonts__checkbox-field .checkbox,
.newsletter-signup__checkbox-field .checkbox {
    width: auto;
    height: auto;
    margin-right: 0.75rem;
    margin-top: -2px;
    font-size: inherit;
}

.test-fonts__checkbox-field .checkbox input,
.newsletter-signup__checkbox-field .checkbox input {
    appearance: none;
    -webkit-appearance: none;
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--background);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 0.1rem;
    cursor: pointer;
    transition-duration: var(--transition-fast);
}

.test-fonts__checkbox-field .checkbox input:checked,
.newsletter-signup__checkbox-field .checkbox input:checked {
    border-color: var(--text);
    background-color: var(--text-hover);
    box-shadow: inset 0 0 0 1px var(--text-distinct);
}

.test-fonts__checkbox-field .checkbox__icon,
.newsletter-signup__checkbox-field .checkbox__icon { display: none; }

.test-fonts__form .submit-button:not(:disabled):hover,
.newsletter-signup .submit-button:not(:disabled):hover,
.login-form .submit-button:not(:disabled):hover {
    color: var(--text-hover);
    border-color: var(--text-distinct);
    background-color: var(--background-subtle);
    cursor: pointer;
}

.login-form__form {
  display: flex;
  align-items: end;
}

.login-form__form .login-form__section {
  flex-grow: 1;
  margin: 0 1em 0 0;
}

.login-form .submit-button {
  padding: 0.5rem 0.7rem;
}

/*
╭─────────────╮
│ BREAKPOINTS │
╰─────────────╯
*/

/* Tablet */
@media screen and (max-width: 1460px) {

    /* General */
    body { --font-ui-wdth: 95; }
    
    article > p { grid-column: 1 / span 4; }
    article > aside { grid-column: 5 / span 2; }

    section > p,
    section > ul,
    section > ol,
    section > pre,
    section > blockquote,
    section > address,
    section > table,
    section > details { grid-column: 2 / span 4; }

    section > aside { grid-column: 6 / span 1; }

    .glass_nav { display: flex; }

    .footer__logo { grid-column-end: span 2; }

    /* Index */
    .index__link aside { text-align: right; }

    /* Pages */
    .page > h1 { grid-column: 1 / span 4; }
    .page > p { grid-column: 2 / span 3; }
    .page > aside,
    .page > aside.double { grid-column: 5 / span 2; }

    /* Cards */
    .cards__caption__title { grid-column: 1 / span 2; }
    .cards__caption__tag { grid-column: 3 / span 2; }
    .cards__caption__deck { padding-right: 2rem; }

    .cards li:nth-child(1n) { grid-column-end: span 3; }
    .cards li:nth-child(3n-2) { grid-column-end: span 6; }

    /* Articles */
    .article { --font-ui-wdth: 100; }
    .article figure figcaption { grid-column: 1 / span 6; }
    .article__title__back { display: none; }
    .article__title h1,
    .article__title__deck { grid-column: 1 / span 4; }
    .article h2 { grid-column: 1 / span 3; }
    .article figure.fourup div { grid-column-end: span 6; }
    
    .article__title__tag {
        grid-row: 2;
        margin: 0;
        align-self: end;
    }

    /* Font Pages */
    .font__styles > div,
    .font__styles > ol { grid-column: 2 / span 5; }
    .font__styles ol { font-size: 2rem; }

    .font__info__link_specimen { grid-row: 2; grid-column: 2 / span 2; }
    .font__info__link_minisite { grid-row: 2; grid-column: 4 / span 2; }

    .font__samples__stylename { grid-row: 1; grid-column: 1 / span 2; }
    .font__samples__fontsize { grid-row: 1; grid-column: 3 / span 2; }
    .font__samples__otl { grid-row: 1; grid-column: 5 / span 2; }
    .font__samples__lineheight,
    .font__samples__letterspacing { display: none; }

    .font__samples__tester__input[data-sm="true"] { columns: 2; }

    .font__glyphs__selected_glyph { font-size: 10rem; line-height: 15rem; }
    .font__otl__selected__glyph { font-size: 6rem; line-height: 9rem; }

    .font__glyphs__list li,
    .font__otl__list li {
        font-size: 1.75rem;
        line-height: 3rem;
        flex-basis: 3rem;
    }

    .font__languages h2 { grid-column: 1 / span 2; }
    .font__languages > input[type="text"] { grid-column: 3 / span 2; height: min-content; }
    .font__languages__disclaimer { grid-column: 1 / span 2; }
    .font__languages__box { grid-column: 3 / -1; }

    .font__languages__list { grid-template-columns: repeat(2, 1fr); }

    .font__footer__buttons {
        grid-column: 2 / span 5;
        margin: -1rem 0 0;
    }
}

/* Mobile */
@media screen and (max-width: 960px) {
    .hide_on_mobile { display: none; }

    :root {
        --font-ui-wdth: 85;
        --h-basis: 20px;
        --v-basis: 22px;
    }

    section > h1,
    section > h2,
    section > h3,
    section > p,
    section > table,
    section > details { grid-column: 1 / -1; }

    section > h2,
    section > h3 { margin-bottom: -0.5rem; }

    section > aside { grid-column: 1 / -1; }

    /* Index */
    .index__link aside { text-align: left; }

    /* GN */
    .gn .gn__stowed { display: none; }

    .glass_nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1rem;
        row-gap: 5px;
    }

    .glass_nav__primary { grid-row: 1; grid-column: 1; }
    .glass_nav__controls { grid-row: 1; grid-column: 2; }

    .gn li:hover .gn__submenu,
    .gn li:focus-within .gn__submenu {
        position: fixed;
        left: var(--v-basis);
        right: var(--v-basis);
        top: 3.5rem;
    }

    .glass_nav__fonts {
        position: fixed;
        bottom: var(--h-basis);
        top: auto;
    }

    /* Index */
    .nameplates li { padding: var(--h-basis) 0; }
    .nameplate__image { grid-column: 1 / -1; }
    .nameplate__styles,
    .nameplate__details,
    .nameplate__year { display: none; }

    /* Pages */
    .page > h1,
    .page > h2,
    .page > h3,
    .page > p,
    .page > table,
    .page > details { grid-column: 1 / -1; }

    .page > h2,
    .page > h3 { margin-bottom: -0.5rem; }

    .page > aside,
    .page > aside.double { grid-column: 1 / -1; }

    /* Cards */
    .cards li:nth-child(1n),
    .articles.cards li:nth-child(1n) { grid-column: 1 / -1; }

    /* Articles */
    .article__title { padding-top: 14rem; }
    .article__title__tag { display: none; }
    .article__title h1,
    .article__title__deck { grid-column: 1 / -1; }

    .article { padding-top: 1.5rem; padding-bottom: 2rem; }
    .article > p,
    .article > h2,
    .article > h3 { grid-column: 1 / -1; }

    .article figure.twoup div,
    .article figure.threeup div { grid-column: 1 / -1; }
    .article figure figcaption { grid-column: 1 / -1; }

    .article aside {
        grid-column: 1 / -1;
        padding-left: 1rem;
        border-left: 1px solid var(--rule);
    }

    /* Font */
    .font__styles { padding-top: 5rem; }
    .font__styles__label,
    .font__styles > ol,
    .font__styles > div { grid-column: 1 / -1; }
    .font__styles__label { margin-bottom: -0.5rem; }

    .font__info__link_specimen { grid-row: 3; grid-column: 1 / span 3; }
    .font__info__link_minisite { grid-row: 3; grid-column: 4 / span 3; }

    /* Collapse long texts on mobile */
    .font__samples__tester.collapse { display: none; visibility: hidden; }
    .font__samples__tester { margin-bottom: -1px; } /* Prevent double-thickness border */

    .font__samples__tester { padding: 1rem var(--v-basis) 2rem; }
    .font__samples__tester__input { margin-top: 1rem; }
    .font__samples__tester .font__samples__controls:not(.font__samples__stylename) { opacity: 1; }
    .font__samples__stylename { grid-column: 1 / span 2; }
    .font__samples__fontsize { grid-column: 3 / span 4; }
    .font__samples__otl { display: none; }

    .font__samples__tester__input[data-sm="true"] { columns: 1; }

    .font__glyphs__selected_track { display: none; }
    .font__glyphs__list { grid-column: 1 / -1; }

    .font__languages h2 { grid-column: 1 / -1; }
    .font__languages input[type="text"] { grid-row: 2; grid-column: 1 / -1; margin: 0; }
    .font__languages__box { grid-row: 3; grid-column: 1 / -1; margin-left: 0; }
    .font__languages__list { grid-template-columns: 1fr; margin: 0; }
    .font__languages__note { grid-row: 4; grid-column: 1 / -1; margin-left: 0; }
    .font__languages__disclaimer { grid-row: 5; grid-column: 1 / -1; }

    .font__footer__buttons { grid-column: 1 / -1; margin: -0.5rem 0 0; }
    .font__footer__buttons .cta,
    .font__footer__buy_button button.buy-button {
        margin-bottom: 0.4rem;
    }

    .notdef_marquee { margin-top: 5rem; }

    /* Footer */
    footer { padding-bottom: 5rem; }

    .footer__logo {
        grid-row: 1;
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--rule);
        padding-bottom: 1rem;
    }

    footer ul { grid-row: 2; grid-column-end: span 2; }
    .footer__meta {
        grid-row: 3;
        grid-column: 1 / -1;
        text-align: left;
        padding-top: 1rem;
        border-top: 1px solid var(--rule);
    }

    /* footer .grid__last { grid-row: 3; grid-column: 4 / span 3; align-self: end; } */
}

/* Shrink text on tiny tiny screens */
@media screen and (max-width: 480px) {
    :root {
        font-size: 14px;
        --font-ui-wdth: 80;
    }
}