/*
----------------------------------------
Reset
----------------------------------------
*/

html {
  font-size: 100%;
  font-family: var(--font-parling);
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  background: var(--ink-222);
}

body {
  background: var(--warm-200);
  color: var(--ink-222);
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body.menu-open {
  overflow: hidden;
}

img, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

ul,
ul li {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--warm-600);
  text-decoration-thickness: 0.08em;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
  transition: color 0.1s ease, text-decoration-color 0.1s ease;
}

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

#footer a:hover {
  color: var(--warm-400);
  text-decoration-color: var(--warm-500);
}

:where(#masthead, #mobile-menu, .font-subnav, .tag-list) a,
:where(.menu-toggle, .menu-close, .mobile-submenu-trigger, .mobile-submenu-back, .carousel-zone-prev, .carousel-zone-next) {
  text-decoration: none;
}

:where(#masthead, #mobile-menu, .font-subnav, .tag-list) a:hover,
:where(.carousel-zone-prev, .carousel-zone-next):hover {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/*
----------------------------------------
Fonts
----------------------------------------
*/

@font-face {
  font-family: "Haffner Text";
  src: url("../fonts/HaffnerText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Haffner Text";
  src: url("../fonts/HaffnerText-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Haffner Text";
  src: url("../fonts/HaffnerText-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Haffner Text";
  src: url("../fonts/HaffnerText-SemiboldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Haffner Text";
  src: url("../fonts/HaffnerText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Haffner Text";
  src: url("../fonts/HaffnerText-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Parling";
  src: url("../fonts/ParlingVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Parling";
  src: url("../fonts/ParlingVF-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/*
----------------------------------------
Variables
----------------------------------------
*/
:root {
	--brick: 	#C1624D;

	/* Grayscale */
	--ink-ccc: #ccc;
	--ink-666: #666;
	--ink-333: #333;
	--ink-222: #222;
	--ink-000: #000;
	--ink-fff: #fff;

	/* Warm neutrals */
	--warm-100: #FBFAF8;
	--warm-200: #F5F4EF;
	--warm-300: #DEDCD2;
	--warm-400: #C6C4B5;
	--warm-500: #AFAC98;
	--warm-600: #8A8670;
	--warm-700: #78735c;
	--warm-800: #666148;

	--content-max: 86.25rem;
	--content-margin: clamp(1.25rem, calc(1.25rem + 3.5 * (100vw - 20rem) / 66.25), 3.25rem);
	--grid-columns: 4;

	/* Layout base */
	--grid-gutter: clamp(1.25rem, calc(1.25rem + 0.625 * (100vw - 20rem) / 66.25), 1.875rem);
	--logo-size: clamp(4.375rem, calc(4.375rem + 2 * (100vw - 20rem) / 66.25), 6.375rem);
	--masthead-height: clamp(4.375rem, calc(4.375rem + 0.875 * (100vw - 20rem) / 66.25), 5.25rem);
	--masthead-border: clamp(0.25rem, calc(0.25rem + 0.125 * (100vw - 20rem) / 66.25), 0.375rem);
	--masthead-stack: calc(var(--masthead-height) + var(--masthead-border));
	--footer-rule: clamp(0.25rem, calc(0.25rem + 0.125 * (100vw - 20rem) / 66.25), 0.375rem);
	--main-offset: clamp(3.75rem, calc(3.75rem + 3.1875 * (100vw - 20rem) / 66.25), 6.9375rem);
	--space-block: 1.25rem;
	--space-section: clamp(2.5rem, calc(2.5rem + 1.25 * (100vw - 20rem) / 66.25), 3.75rem);

	/* Layout tweaks */
	--mobile-menu-header-top: 2.5rem;
	--mobile-menu-header-height: 1.25rem;
	--mobile-menu-header-gap: 1.5rem;
	--mobile-menu-content-top: calc(var(--mobile-menu-header-top) + var(--mobile-menu-header-height) + var(--mobile-menu-header-gap));
	--content-offset: var(--main-offset);
	--font-subnav-height: calc(var(--logo-size) / 2 - var(--masthead-border));
	--subnav-link-inset: 0.5rem;
	--subnav-text-offset: calc(var(--logo-size) + var(--grid-gutter) + var(--subnav-link-inset));
	--space-font-hero-inner-y: clamp(1.25rem, 2vw + 0.75rem, 3.125rem);
	--space-font-hero-inner-x: clamp(1.25rem, 4vw + 0.25rem, 5rem);
	--space-font-hero-name-before: clamp(0.75rem, 1vw + 0.5rem, 1.5rem);
	--space-font-hero-name-after: var(--space-font-hero-name-before);
	--space-font-hero-rule-after-name: clamp(0.75rem, 1vw + 0.5rem, 1.5rem);

	/* Font families */
	--font-serif: "Haffner Text", "Times New Roman", Times, serif;
	--font-parling: "Parling", system-ui, -apple-system, sans-serif;

	/* Type */
	--type-xs: 1rem;
	--type-sm: 1.125rem;
	--type-lg: 1.375rem;
	--type-3xl: 1.35rem;
	--type-5xl: 1.9125rem;
	--type-nav: 1rem;
	--type-font-notes: 1.0625rem;
	--type-font-hero-style: 1rem;
	--type-font-hero-styles-label: 0.8125rem;
	--type-prose: 1.25rem;
	--type-journal-title: 1.125rem;
	--type-font-hero-tagline: 1.125rem;
	--type-works-module-title: 1.6875rem;
	--type-page-title: 1.9125rem;
}

/*
----------------------------------------
Base
----------------------------------------
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skip-link {
  position: absolute;
  left: var(--content-margin);
  top: 0.75rem;
  z-index: 10000;
  padding: 0.5rem 0.75rem;
  background: var(--ink-fff);
  border: 1px solid var(--ink-000);
  color: var(--ink-222);
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--ink-000);
  outline-offset: 2px;
}

.content {
  box-sizing: border-box;
  width: min(calc(100% - 2 * var(--content-margin)), var(--content-max));
  max-width: var(--content-max);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

#main {
  padding-top: var(--main-offset);
}

.page-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-page-title);
  font-weight: 400;
  line-height: 1.167;
}

.works-intro .page-title,
.journal-intro .page-title,
.about-content .page-title,
.error-content .page-title,
.account-aside .page-title,
.account-content .page-title,
.journal-post-header .page-title {
  margin-bottom: 0.5rem;
}

.journal-intro .page-title,
.journal-post-header .page-title {
  font-size: var(--type-5xl);
  line-height: 1.05;
}

.home-headline h1,
.page-title,
.font-section-heading {
  line-height: 1.167;
}

.journal-date {
  font-family: var(--font-parling);
  font-weight: 400;
  color: var(--warm-800);
}

.post-aside,
.post-caption {
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  color: var(--warm-800);
}

.post-date {
  font-family: var(--font-parling);
  font-weight: 400;
  color: var(--warm-800);
  font-size: var(--type-sm);
}

.journal-entry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: baseline;
}

.font-section-body > .font-section-heading + * {
  margin-top: 0;
}

.latest-entries-title,
.works-module-title,
.journal-tags-heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
}

.latest-entries-title,
.journal-tags-heading {
  font-size: var(--type-3xl);
}

.works-module-title {
  font-size: var(--type-works-module-title);
}

.works-module-title-link {
  color: inherit;
  text-decoration: none;
}

.works-module-title-link:hover {
  text-decoration: underline;
}

.prose {
  font-family: var(--font-serif);
  font-size: var(--type-prose);
  font-weight: 400;
  font-feature-settings: "onum" 1;
  font-variant-numeric: oldstyle-nums;
}

.prose:not(.font-section-content) {
  line-height: 1.375;
}

.prose,
.font-section-content.prose,
.license-intro-lead,
.works-intro-lead,
.journal-intro-lead,
.works-module-description p,
.about-colophon,
.about-contact,
.account-intro,
.post-aside,
.post-caption,
.post-blockquote,
.post-footnote__text,
.post-figure-side__caption,
.font-feature-text {
  text-wrap: pretty;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose p {
  margin: 0;
}

.prose p + p {
  margin-top: 1em;
}

/*
----------------------------------------
Home hero
----------------------------------------
*/

.home-headline,
.latest-entries {
  grid-column: 1 / -1;
}

.home-intro {
  row-gap: var(--space-section);
}

.latest-entries-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.view-all,
.works-roadmap-heading,
.font-feature-heading,
.footer-heading,
.newsletter-label-heading,
.about-content .about-subhead {
  font-family: var(--font-parling);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  font-size: var(--type-xs);
  font-weight: 500;
}

.works-roadmap-heading,
.font-feature-heading,
.footer-heading,
.newsletter-label-heading,
.about-content .about-subhead {
  font-weight: 700;
}

.dashed-rule {
  border: 0;
  border-top: 1px dashed var(--warm-500);
  margin: 0.75rem 0;
}

.latest-entries .journal-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 0;
  padding: 0;
}

.latest-entries .journal-entry {
  padding-block: 0.75rem;
}

.latest-entries .journal-date {
  grid-column: span 1;
  font-size: var(--type-xs);
}

.latest-entries .journal-title {
  grid-column: span 3;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 600;
}

.home-headline h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-5xl);
  font-weight: 400;
  font-kerning: normal;
}

.home-specimens {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
  margin-top: var(--space-section);
}

.home-specimen {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color 0.1s ease;
}

.home-specimen:hover {
  color: var(--warm-800);
}

.home-specimen-rule {
  border: 0;
  border-top: 1px solid var(--ink-000);
  margin: 0;
}

.home-specimen-labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.625rem;
  font-family: var(--font-parling);
}

.home-specimen-name {
  font-size: var(--type-sm);
  font-weight: 600;
}

.home-specimen-styles {
  font-size: var(--type-sm);
  color: var(--ink-666);
  font-weight: 400;
}

.home-specimen:hover .home-specimen-styles {
  color: var(--warm-800);
}

.home-specimen-picture,
.home-specimen-image,
.home-specimen-picture img {
  display: block;
  width: 100%;
  height: auto;
}

.home-specimen-picture,
.home-specimen-image {
  margin-top: 0.75rem;
}

/*
----------------------------------------
Font detail subnav
----------------------------------------
*/

.font-subnav {
  position: sticky;
  top: calc(var(--masthead-stack) - 0.0625rem);
  z-index: 19;
  background: var(--warm-100);
  --font-subnav-dropdown-gutter: 1em;
}

.font-subnav-inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  align-items: center;
  min-height: var(--font-subnav-height);
}

.font-subnav-menu {
  grid-column: 1 / -1;
  position: relative;
  margin-left: calc(var(--logo-size) + var(--font-subnav-dropdown-gutter) + var(--subnav-link-inset));
}

.font-subnav-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--font-subnav-height);
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  list-style: none;
  cursor: pointer;
}

.font-subnav-label::-webkit-details-marker {
  display: none;
}

.font-subnav-label::marker {
  content: "";
}

.font-subnav-chevron {
  flex-shrink: 0;
  width: 0.625rem;
  height: auto;
  transition: transform 0.15s ease;
}

.font-subnav-menu[open] .font-subnav-chevron {
  transform: rotate(180deg);
}

.font-subnav-dropdown {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--font-subnav-dropdown-gutter));
  width: max-content;
  min-width: 100%;
  max-width: none;
  padding-block: 1rem 1.25rem;
  padding-inline: var(--font-subnav-dropdown-gutter);
  background: var(--warm-100);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-0.375rem);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.font-subnav-menu[open]:not(.is-closing) .font-subnav-dropdown {
  opacity: 1;
  transform: translateY(0);
}

.font-subnav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.125rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.font-subnav-list a {
  display: block;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  white-space: nowrap;
  transition: color 0.1s ease;
}

.font-subnav-list a:hover {
  color: var(--warm-800);
}

.font-subnav-list .buy-button {
  display: inline-block;
  width: auto;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--font-theme-color, var(--ink-000));
  border-radius: 9999px;
  background: none;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
  transition: background 0.1s ease, color 0.1s ease;
}

.font-subnav-list .buy-button:hover {
  background: var(--ink-fff);
  color: var(--warm-800);
  border-color: var(--font-theme-color, var(--ink-000));
}

.font-detail #main {
  padding-top: 0;
}

.font-try-inner {
  padding-top: 0;
  padding-bottom: var(--space-section);
}

/*
----------------------------------------
Font detail hero
----------------------------------------
*/

.font-hero-spec {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, calc(1.125vw + 1.625rem), 4rem);
  background-color: var(--hero-tile-bg, #F5F4EF);
}

.font-hero-spec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--hero-tile-color, #E0D9CB);
  -webkit-mask-image: var(--hero-tile-image, none);
  mask-image: var(--hero-tile-image, none);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 2.5rem 2.5rem;
  mask-size: 2.5rem 2.5rem;
}

.font-hero-spec > .content {
  position: relative;
  z-index: 1;
}

.font-hero-spec-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  background: var(--ink-fff);
  padding: 0.5rem;
}

.font-hero-spec-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  border: 2px solid var(--font-theme-color, var(--ink-000));
}

.font-hero-spec-panel > .font-hero-spec-frame {
  padding: 0.1875rem;
}

.font-hero-spec-panel > .font-hero-spec-frame > .font-hero-spec-frame {
  padding: 0.1875rem;
}

.font-hero-spec-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--space-font-hero-inner-y) var(--space-font-hero-inner-x);
  text-align: center;
}

.font-hero-tagline {
  margin: 0;
  font-size: calc(var(--type-font-hero-tagline) * var(--font-hero-tagline-scale, 1));
  line-height: 1.15;
  color: var(--font-theme-color, var(--ink-000));
  text-wrap: pretty;
}

.font-hero-rule {
  display: flex;
  align-items: center;
  width: 100%;
  margin-block: 1rem;
}

.font-hero-rule-line {
  flex: 1;
  border-top: 2px solid var(--font-theme-color, var(--ink-000));
}

.font-hero-rule-mark {
  flex-shrink: 0;
  padding-inline: 0.75rem;
  font-size: var(--type-font-hero-tagline);
  line-height: 1;
  color: var(--font-theme-color, var(--ink-000));
}

.font-hero-rule:has(+ .font-hero-name-wrap),
.font-hero-rule:has(+ .font-hero-name) {
  margin-bottom: var(--space-font-hero-name-before);
}

.font-hero-name-wrap,
.font-hero-name {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding-block: var(--space-font-hero-name-before) var(--space-font-hero-name-after);
  box-sizing: border-box;
}

.font-hero-name-wrap .font-hero-name {
  padding-block: 0;
}

.font-hero-name-wrap + .font-hero-rule,
.font-hero-name + .font-hero-rule {
  margin-top: var(--space-font-hero-rule-after-name);
}

.font-hero-styles-heading {
  margin: 1rem 0 0.625rem;
  font-family: var(--font-parling);
  font-size: var(--type-font-hero-styles-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-222);
}

.font-hero-styles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.font-hero-styles + .font-hero-styles {
  margin-top: 0.25rem;
}

.font-hero-style {
  font-size: var(--type-font-hero-style);
  line-height: 1.25;
  color: var(--ink-222);
  text-wrap: pretty;
}

.font-glyphs-embed {
  margin-top: var(--space-section);
}

.font-in-use-carousel {
  grid-column: 1 / -1;
}

.font-in-use-carousel .works-carousel {
  margin: 0;
}

.font-section#in-use {
  padding-bottom: 1.5rem;
}

.font-section#in-use .font-section-body > .font-section-heading {
  margin-bottom: 0.75rem;
}

.font-section#in-use .font-section-body > .font-section-heading + * {
  margin-top: 0;
}

.font-try-embed {
  --primary_text_color: var(--ink-222);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.font-try-embed fontdue-type-tester,
.font-glyphs-embed fontdue-character-viewer {
  display: block;
  width: 100%;
  min-width: 0;
}

.font-try-embed .type-tester {
  margin-bottom: 0;
  border-top: none;
}

.font-try-embed fontdue-type-tester:not([axes]) .type-tester {
  --type-tester--adjustment: 1;
}

.font-try-embed .type-tester__toolbar {
  color: var(--warm-700);
}

.font-try-embed .type-tester-select .select:first-child {
  display: none;
}

.font-try-embed .type-tester[data-shy='hover'] .type-tester__toolbar,
.font-try-embed .type-tester[data-shy='focus'] .type-tester__toolbar {
  visibility: hidden;
  pointer-events: none;
}

.font-try-embed .type-tester[data-shy='hover']:hover .type-tester__toolbar,
.font-try-embed .type-tester[data-shy='focus']:focus-within .type-tester__toolbar,
.font-try-embed .type-tester[data-focused='true'] .type-tester__toolbar {
  visibility: visible;
  pointer-events: auto;
}

.font-try-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.font-glyphs-embed {
  grid-column: 1 / -1;
  --primary_text_color: var(--ink-222);
  --horizontal_rule_color: var(--warm-300);
  color: var(--ink-222);
  overflow: visible;
}

.font-glyphs-embed fontdue-character-viewer,
.font-glyphs-embed .character-viewer,
.font-glyphs-embed .character-viewer__character-map,
.font-glyphs-embed .character-viewer__monitor {
  overflow: visible;
}

.font-glyphs-embed .character-viewer__monitor__details > span:nth-child(odd) {
  font-weight: 600;
}

.font-glyphs-embed .character-viewer__monitor__character {
  color: var(--font-theme-color, var(--ink-000));
}

.font-glyphs-embed .character-viewer__block__character-list > div {
  border-color: var(--warm-300);
}

.font-detail {
  --character-viewer-header-stack: calc(var(--masthead-stack) + var(--font-subnav-height));
  --character-viewer-sticky-gap: 2.25rem;
  --font-section-scroll-offset: 0.125rem;
  --character_viewer_sticky_top: calc(var(--character-viewer-header-stack) + var(--character-viewer-sticky-gap));
}

.font-detail .font-try,
.font-detail .font-section {
  scroll-margin-top: calc(var(--character-viewer-header-stack) - var(--font-section-scroll-offset));
}

.font-section {
  margin-top: 1.5rem;
  padding-bottom: var(--space-section);
}

.font-section-body {
  border-top: 1px solid var(--font-theme-color, var(--ink-000));
  padding-top: var(--space-section);
}

.font-detail .font-section-body {
  overflow: visible;
}

.font-section-meta,
.font-section-content {
  grid-column: 1 / -1;
}

.font-section-meta {
  font-family: var(--font-parling);
  font-size: var(--type-sm);
}

.font-section-content.prose {
  font-family: var(--font-parling);
  font-size: var(--type-font-notes);
  line-height: 1.4;
}

.account-intro .prose,
.account-main > .prose,
.journal-intro-lead .prose,
.works-intro-lead .prose,
.works-module-description.prose,
.font-feature-text.prose,
.font-license-info .prose {
  font-family: var(--font-parling);
  font-feature-settings: normal;
  font-variant-numeric: normal;
}

.account-intro .prose,
.account-main > .prose,
.journal-intro-lead .prose,
.license-intro-lead .prose,
.works-intro-lead .prose,
.works-module-description.prose {
  font-size: var(--type-font-notes);
  line-height: 1.4;
}

.account-main > .prose p {
  margin: 0;
}

.account-main > .prose p + p {
  margin-top: 1em;
}

.font-feature-text.prose,
.font-license-info .prose {
  font-size: var(--type-sm);
  line-height: 1.5;
}

.font-license-info .font-feature-text.prose p + p {
  margin-top: 1em;
}

.font-section-heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-5xl);
  font-weight: 400;
}

.font-section-body > .font-section-heading {
  grid-column: 1 / -1;
  margin-bottom: 0.25rem;
}

.font-try {
  background: var(--ink-fff);
}

.font-feature-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: calc(var(--grid-gutter) + 0.5rem);
  margin: 0;
  padding: 0;
}

.font-feature {
  grid-column: 1 / -1;
}

.font-feature-heading {
  margin: 1rem 0 0;
  font-size: var(--type-sm);
}

.font-feature-text {
  margin: 0.5rem 0 0;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 400;
}

.font-license-buy {
  grid-column: 1 / -1;
  margin-top: 0;
}

.font-license-info {
  grid-column: 1 / -1;
  margin-top: 2rem;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
}

.font-license-info .font-feature-heading {
  margin-top: 0;
}

.font-license-buy .buy-button {
  display: inline-block;
  border: 1px solid var(--font-theme-color, var(--ink-000));
  border-radius: 9999px;
  background: none;
  font-family: var(--font-parling);
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  transition: background 0.1s ease;
  padding: 0.625rem 1.5rem;
  font-size: var(--type-journal-title);
}

.font-license-buy .buy-button:hover {
  background: var(--ink-fff);
  color: inherit;
  border-color: var(--font-theme-color, var(--ink-000));
}

.font-license-trial {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
}

.font-meta-label,
.font-meta-value {
  margin: 0;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
}

.font-meta-label {
  font-weight: 700;
}

.font-meta-group + .font-meta-group,
.font-meta-link {
  margin-top: 1.5rem;
}

.font-meta-link {
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 400;
}

.font-meta-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.font-meta-specimen {
  margin-top: 2.5rem;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 400;
}

.font-meta-specimen-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.font-meta-specimen-link:hover {
  color: var(--warm-800);
  text-decoration: underline;
  text-decoration-color: var(--warm-800);
  text-underline-offset: 0.15em;
}

.font-meta-specimen-thumb {
  display: block;
  width: 6rem;
  height: auto;
  aspect-ratio: 8.5 / 11;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--font-theme-color, var(--ink-000));
}

.icon-external {
  display: inline-block;
  flex-shrink: 0;
  height: 1cap;
  width: auto;
}
/*
----------------------------------------
In the Works
----------------------------------------
*/

.works-intro,
.journal-intro,
.license-page {
  row-gap: 0;
}

.license-intro-lead,
.works-intro-lead,
.journal-intro-lead,
.works-module-description p {
  font-family: var(--font-parling);
  font-size: var(--type-font-notes);
  font-weight: 400;
  line-height: 1.4;
}

.works-roadmap-list {
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 400;
}

.works-intro-lead,
.journal-intro-lead,
.license-intro-lead {
  margin: 0;
}

.works-intro-lead p,
.journal-intro-lead p,
.license-intro-lead p {
  margin: 0;
}

.works-intro-lead p + p,
.journal-intro-lead p + p,
.license-intro-lead p + p {
  margin-top: 1em;
}

.works-module-description {
  margin: 0;
}

.works-module-description p {
  margin: 0;
}

.works-module-description p + p {
  margin-top: 1em;
}

.works-intro .page-title,
.journal-intro .page-title,
.works-module-meta {
  grid-column: 1 / -1;
}

.works-intro-lead,
.journal-intro-lead,
.license-intro-lead {
  grid-column: 1 / -1;
}

.license-aside {
  grid-column: 1 / -1;
}

.license-sections {
  grid-column: 1 / -1;
}

.license-page:has(.license-intro-lead) .license-intro-lead {
  margin-bottom: var(--space-section);
}

.license-page:has(.license-intro-lead) .license-sections {
  border-top: 1px solid var(--ink-000);
  padding-top: var(--space-section);
}

.works-module {
  margin-top: var(--space-section);
}

.works-module[id] {
  scroll-margin-top: calc(var(--masthead-stack) + 0.5rem);
}

.works-module-rule {
  border: 0;
  border-top: 1px solid var(--ink-666);
  margin: 0 0 var(--space-block);
}

.works-carousel {
  margin-bottom: 0;
}

.carousel-viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.carousel-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 50%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.carousel-zone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(34, 34, 34, 0.65);
  color: var(--ink-fff);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.carousel-zone:hover .carousel-zone-icon {
  opacity: 1;
}

.carousel-zone-prev {
  left: 0;
  justify-content: flex-start;
  padding-left: 1.25rem;
}

.carousel-zone-next {
  right: 0;
  justify-content: flex-end;
  padding-right: 1.25rem;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
}

.carousel-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  -webkit-user-drag: none;
  user-select: none;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.3125rem;
  margin-top: 0.9375rem;
}

.carousel-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--ink-ccc);
}

.carousel-dot[aria-current="true"] {
  background: var(--ink-666);
}

.works-module-detail {
  margin-top: var(--space-block);
}

.works-module-meta,
.works-module-description {
  grid-column: 1 / -1;
}

.works-roadmap-heading {
  margin: 1.5rem 0 0.75rem;
  font-size: var(--type-sm);
}

.works-roadmap-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.75rem;
}

.works-roadmap-list li {
  padding-left: 1em;
  text-indent: -1em;
}

.works-roadmap-list li::before {
  content: "•\00a0";
}

/*
----------------------------------------
Journal archive
----------------------------------------
*/

.journal-intro {
  margin-bottom: var(--space-section);
}

.journal-tags {
  grid-column: 1 / -1;
}

.journal-archive .journal-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-block);
  margin: 2rem 0 0;
  padding: 0;
}

.journal-tags-heading {
  margin: 0 0 0.75rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-list a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  background: var(--warm-300);
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  white-space: nowrap;
  transition: background 0.1s ease;
}

.tag-list a:hover {
  background: var(--warm-100);
  color: inherit;
  text-decoration: none;
}

.tag-list a[aria-current="true"] {
  background: var(--warm-800);
  color: var(--warm-100);
}

.tag-list a[aria-current="true"]:hover {
  background: var(--ink-222);
  color: var(--warm-100);
}

.journal-archive .journal-date {
  grid-column: span 1;
  font-size: var(--type-xs);
  text-align: left;
}

.journal-archive .journal-title {
  grid-column: span 3;
  font-family: var(--font-serif);
  font-size: var(--type-journal-title);
  font-weight: 400;
}

/*
----------------------------------------
Journal post
----------------------------------------
*/

.post-lede {
  margin: 0 0 var(--space-block);
}

.post-lede img {
  width: 100%;
  height: auto;
}

.post-lede + .journal-post-header {
  padding-top: 0;
}

.journal-post-header {
  padding-top: var(--content-offset);
  margin-bottom: var(--space-block);
}

.journal-post-header:first-child {
  padding-top: 0;
}

.journal-post {
  --post-paragraph-gap: 0.75em;
  --post-subhead-after: 0.375rem;
  --post-figure-extra: 0.625rem;
  --post-blockquote-size: 0.84375em;
  --post-anchor-scroll-margin: calc(var(--masthead-stack) + var(--logo-size) / 2 + 0.5rem);
}

html:has(.journal-post) {
  scroll-padding-top: calc(var(--masthead-stack) + var(--logo-size) / 2 + 0.5rem);
}

.post-body.prose {
  position: relative;
}

.post-body.prose > * {
  margin: 0;
}

.post-body.prose > * + * {
  margin-top: var(--post-block-gap, var(--grid-gutter));
}

.post-body.prose > p + p {
  margin-top: var(--post-paragraph-gap);
}

.post-body.prose > .post-subhead + * {
  margin-top: var(--post-subhead-after);
}

.post-body.prose > * + :is(figure, .post-figure-side),
.post-body.prose > :is(figure, .post-figure-side) + * {
  margin-top: calc(var(--grid-gutter) + var(--post-figure-extra));
}

.post-aside p + p,
.post-caption p + p {
  margin-top: 0;
}

.post-aside {
  margin-inline: 0;
  margin-bottom: 0;
}

.post-meta .post-date {
  display: block;
}

.post-tags {
  margin-top: 1rem;
}

.journal-post-header .page-title {
  margin-top: var(--space-block);
}

.post-body.prose > .post-subhead {
  font-family: var(--font-serif);
  font-size: var(--type-3xl);
  font-weight: 600;
}

.post-body.prose :is(.post-aside, .post-caption, .post-blockquote, .post-footnote__text) a,
.post-body.prose .post-footnote__back {
  color: inherit;
  text-decoration-color: var(--warm-600);
  text-decoration-thickness: 0.09rem;
  text-underline-offset: 0.15em;
  transition: color 0.1s ease, text-decoration-color 0.1s ease;
}

.post-body.prose :is(.post-aside, .post-caption, .post-blockquote, .post-footnote__text) a:is(:hover, :active, :focus-visible),
.post-body.prose .post-footnote__back:is(:hover, :active, :focus-visible) {
  color: var(--ink-222);
  text-decoration-color: var(--ink-222);
}

.post-body.prose a {
  text-decoration-thickness: 0.072em;
}

.post-body.prose :is(strong, b) {
  font-weight: 700;
}

.post-body.prose :is(em, i) {
  font-style: italic;
}

.post-body.prose .small-caps {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.02em;
}

.post-aside p {
  margin: 0;
}

.post-caption {
  margin-top: 0.75rem;
}

.post-body.prose > .post-subhead--h3 {
  font-size: clamp(1.125rem, 0.45vw + 0.95rem, 1.35rem);
  font-weight: 700;
}

.post-body.prose > .post-subhead :is(em, i) {
  font-style: italic;
}

.post-body.prose > .post-subhead :is(s, del, strike) {
  text-decoration: line-through;
}

.post-body.prose > .post-subhead code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 0.9em;
}

.post-body.prose > .post-subhead a {
  color: inherit;
  text-decoration-color: var(--warm-600);
}

.post-body.prose > .post-subhead a:hover {
  color: var(--ink-222);
  text-decoration-color: var(--ink-222);
}

:is(.post-body.prose, .license-body.prose) > ul:not(.tag-list),
:is(.post-body.prose, .license-body.prose) > ol,
:is(.post-body.prose, .license-body.prose) > .post-list {
  padding-inline-start: 1.25em;
}

:is(.post-body.prose, .license-body.prose) > ul:not(.tag-list),
:is(.post-body.prose, .license-body.prose) ul.post-list {
  list-style: disc;
}

:is(.post-body.prose, .license-body.prose) > ul:not(.tag-list) li,
:is(.post-body.prose, .license-body.prose) ul.post-list li {
  list-style: disc;
}

:is(.post-body.prose, .license-body.prose) > ol,
:is(.post-body.prose, .license-body.prose) ol.post-list {
  list-style: decimal;
}

:is(.post-body.prose, .license-body.prose) > ol li,
:is(.post-body.prose, .license-body.prose) ol.post-list li {
  list-style: decimal;
}

:is(.post-body.prose, .license-body.prose) > ul:not(.tag-list) li + li,
:is(.post-body.prose, .license-body.prose) > ol li + li,
:is(.post-body.prose, .license-body.prose) .post-list li + li {
  margin-top: 0.375em;
}

.post-list li > p {
  margin: 0;
}

.post-list li > p + p {
  margin-top: 0.5em;
}

.post-blockquote {
  padding-inline-start: 1em;
  border-inline-start: 0.125rem solid var(--warm-600);
  font-family: var(--font-parling);
  font-size: var(--post-blockquote-size);
  line-height: var(--post-blockquote-leading, 1.45);
  color: var(--warm-800);
}

.post-blockquote p {
  margin: 0;
}

.post-body.prose .post-blockquote p + p {
  margin-top: var(--post-paragraph-gap);
}

.post-body.prose > figure,
.post-body.prose > .post-figure-side .post-figure-side__media {
  width: 100%;
}

.post-body.prose > figure img,
.post-body.prose > .post-figure-side .post-figure-side__media img {
  width: 100%;
  height: auto;
}

.post-figure-side {
  display: grid;
  gap: var(--grid-gutter);
}

.post-figure-side__media {
  max-width: none;
}

.post-figure-side__caption {
  margin: 0;
}

.post-footnote-ref {
  scroll-margin-top: var(
    --post-anchor-scroll-margin,
    calc(var(--masthead-stack) + var(--logo-size) / 2 + 0.5rem)
  );
  margin-inline: 0.0625em;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

.post-body.prose .post-footnote-ref a {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  font-feature-settings: "sups" 1;
  font-variant-position: super;
  line-height: inherit;
  color: inherit;
  text-decoration-color: var(--warm-600);
  text-decoration-thickness: 0.09rem;
  text-underline-offset: -0.3em;
  text-underline-position: from-font;
  transition: color 0.1s ease, text-decoration-color 0.1s ease;
}

.post-body.prose .post-footnote-ref a:hover,
.post-body.prose .post-footnote-ref a:focus-visible {
  color: var(--warm-800);
  text-decoration-color: var(--warm-800);
}

.post-body.prose > .post-footnotes {
  margin-top: calc(var(--grid-gutter) + 1rem);
  padding-top: 1rem;
  border-top: 1px dashed var(--warm-500);
}

.post-footnotes {
  padding: 0;
  list-style: none;
  counter-reset: post-footnote;
}

.post-footnote {
  scroll-margin-top: var(
    --post-anchor-scroll-margin,
    calc(var(--masthead-stack) + var(--logo-size) / 2 + 0.5rem)
  );
  display: grid;
  grid-template-columns: minmax(1.5em, auto) 1fr;
  gap: 0.375rem 0.5rem;
  align-items: baseline;
  counter-increment: post-footnote;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  color: var(--warm-800);
}

.post-footnote + .post-footnote {
  margin-top: 0.75em;
}

.post-footnote::before {
  content: counter(post-footnote) ".";
  font-weight: 600;
}

.post-footnote__text p {
  margin: 0;
}

.post-footnote__text p + p {
  margin-top: 0.5em;
}

.post-footnote__back {
  display: inline;
  margin-inline-start: 0.25em;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.post-carousel .works-carousel {
  margin: 0;
}

/*
----------------------------------------
License
----------------------------------------
*/

.license-page {
  --post-paragraph-gap: 0.75em;
  --post-subhead-after: 0.375rem;
  --license-sidebar-top: calc(
    var(--masthead-stack) + var(--logo-size) / 2 + var(--grid-gutter)
  );
}

.license-aside .page-title {
  margin: 0;
}

.license-intro-lead {
  margin: 0;
  font-family: var(--font-parling);
  font-size: var(--type-font-notes);
  font-weight: 400;
  line-height: 1.4;
}

.license-intro-lead .prose {
  font-family: var(--font-parling);
  font-size: inherit;
  line-height: inherit;
  font-feature-settings: normal;
  font-variant-numeric: normal;
}

.license-nav {
  margin-top: 1.25rem;
}

.license-nav-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.25rem;
  margin: 0 0 var(--space-block);
  padding: 0 0 0.75rem;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--ink-666);
}

.license-nav-link {
  display: block;
  flex-shrink: 0;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  white-space: nowrap;
}

.license-section {
  scroll-margin-top: var(--license-sidebar-top);
}

.license-section-headline {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-works-module-title);
  font-weight: 400;
  line-height: 1.167;
}

.license-pdf {
  margin: var(--space-block) 0;
  font-family: var(--font-parling);
  font-size: var(--type-font-notes);
  font-weight: 400;
  line-height: 1.4;
}

.license-body {
  margin-top: 0.3125rem;
}

.license-body.prose {
  font-family: var(--font-parling);
  font-size: var(--type-font-notes);
  line-height: 1.4;
  font-feature-settings: normal;
  font-variant-numeric: normal;
}

.license-body.prose > * {
  margin: 0;
}

.license-body.prose > * + * {
  margin-top: 1em;
}

.license-body.prose > .post-subhead + * {
  margin-top: 0.375rem;
}

.license-body.prose > .post-subhead {
  font-family: var(--font-parling);
  font-size: var(--type-lg);
  font-weight: 700;
  line-height: 1.4;
}

.license-body.prose > .post-subhead--h3 {
  font-size: var(--type-sm);
  font-weight: 700;
}

.license-body.prose .post-blockquote {
  padding-inline-start: 1em;
  border-inline-start: 0.125rem solid var(--warm-600);
  font-family: var(--font-parling);
  font-size: inherit;
  line-height: inherit;
  color: var(--warm-800);
}

.license-body.prose a {
  color: inherit;
  text-decoration-color: var(--warm-600);
  text-decoration-thickness: 0.072em;
}

.license-rule {
  border: 0;
  border-top: 1px solid var(--ink-000);
  margin: var(--space-section) 0;
}

/*
----------------------------------------
About
----------------------------------------
*/

.about-photo,
.about-content,
.error-notdef,
.error-content {
  grid-column: 1 / -1;
}

.about-colophon {
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 400;
  line-height: 1.5;
}

.about-contact {
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 400;
  line-height: 1.5;
}

.about-colophon p {
  margin: 0;
}

.about-colophon p + p {
  margin-top: 1.25rem;
}

.about-content > p:has(.about-contact) {
  margin-top: calc(var(--space-block) * 2);
}

.about-content .prose > h2 {
  margin-block: calc(var(--space-block) + 0.375rem) 0.375rem;
  font-family: var(--font-serif);
  font-size: var(--type-3xl);
  font-weight: 600;
}

.about-content .about-subhead {
  margin-block: calc(var(--space-block) + 0.375rem) 0.375rem;
  font-size: var(--type-sm);
}

.about-contact .icon-mail {
  display: inline-block;
  vertical-align: center;
  height: 1em;
  width: auto;
  margin-right: 0.375rem;
}

.error-notdef {
  margin: 0;
  line-height: 0;
}

.error-notdef img {
  display: block;
  width: 50%;
  height: auto;
  margin-inline: auto;
}

/*
----------------------------------------
Fontdue account pages
----------------------------------------
*/

.account-aside,
.account-main,
.account-content {
  grid-column: 1 / -1;
}

.account-aside .page-title {
  margin: 0;
}

.account-intro {
  margin: 0 0 2rem;
  max-width: 36rem;
  font-family: var(--font-parling);
  font-size: var(--type-font-notes);
  font-weight: 400;
  line-height: 1.4;
}

.account-embed {
  max-width: 28rem;
  font-family: var(--font-parling);
  color: var(--ink-222);
  --primary_text_color: var(--ink-222);
  --secondary_text_color: var(--warm-800);
  --secondary_background_color: var(--ink-fff);
  --error_color: var(--brick);
  --button_text_color: var(--ink-fff);
  --button_background_color: var(--brick);
  --button_border_color: var(--brick);
  --button_hover_text_color: var(--ink-fff);
  --button_hover_background_color: var(--ink-222);
  --button_hover_border_color: var(--ink-222);
}

.account-embed fontdue-customer-login-form,
.account-embed fontdue-test-fonts-form {
  display: block;
}

.account-embed .login-form__section {
  margin-bottom: 1.25rem;
}

.account-embed .login-form__errors {
  margin: 0 0 1.25rem;
  color: var(--brick);
  font-size: var(--type-sm);
  line-height: 1.4;
}

.account-embed .text-field__label-wrapper {
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-800);
}

.account-embed .text-field__input-wrapper {
  margin-top: 0.375rem;
}

.account-embed .text-field__input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 2px;
  font-size: var(--type-sm);
  line-height: 1.25;
}

.account-embed .text-field__input:not([type="checkbox"]):not([type="radio"]):focus {
  box-shadow: 0 0 0 1px var(--ink-222);
}

.account-embed .checkbox {
  --checkbox-size: 1.25rem;
  --checkbox-margin: 0.625rem;
}

.account-embed .checkbox svg {
  max-width: none;
  width: 1em;
  height: 1em;
}

.account-embed .text-field__error {
  margin-top: 0.375rem;
  font-size: var(--type-xs);
}

.account-embed .submit-button {
  padding: 0.625rem 1rem;
  border-radius: 2px;
  font-size: var(--type-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.account-embed .login-form__submitted {
  font-size: var(--type-sm);
  line-height: 1.5;
}

.account-embed .login-form__submitted p {
  margin: 0 0 1rem;
}

.account-embed .login-form__submitted p:last-child {
  margin-bottom: 0;
}

/*
----------------------------------------
Fontdue store modal
----------------------------------------
*/

fontdue-store-modal {
  --secondary_background_color: var(--warm-100);
  --button_selected_background_color: var(--warm-300);
  --button_selected_border_color: var(--ink-222);
  --button_selected_text_color: var(--ink-222);
  --checkout_button_text_color: var(--ink-fff);
  --checkout_button_background_color: var(--brick);
  --checkout_button_border_color: var(--brick);
  --checkout_button_hover_text_color: var(--ink-fff);
  --checkout_button_hover_background_color: var(--ink-222);
  --checkout_button_hover_border_color: var(--ink-222);
  --add_to_cart_button_text_color: var(--ink-fff);
  --add_to_cart_button_background_color: var(--brick);
  --add_to_cart_button_border_color: var(--brick);
  --add_to_cart_button_hover_text_color: var(--ink-fff);
  --add_to_cart_button_hover_background_color: var(--ink-222);
  --add_to_cart_button_hover_border_color: var(--ink-222);
}

fontdue-store-modal .checkbox {
  --checkbox-size: 1.25rem;
  --checkbox-margin: 0.625rem;
}

fontdue-store-modal .checkbox svg {
  display: block;
  max-width: none;
  width: 1em;
  height: 1em;
}

/*
----------------------------------------
Fontdue hosted pages
----------------------------------------
*/

html:has(.customer-dashboard),
html:has(.order),
html:has(.invoice) {
  height: auto;
  min-height: 100%;
  background: var(--warm-200);
}

body[data-template="show.html"],
body[data-template="template.html"] {
  height: auto;
  min-height: 100%;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  line-height: 1.5;
  background: var(--warm-200);
  color: var(--ink-222);
  --primary_text_color: var(--ink-222);
  --secondary_text_color: var(--warm-800);
  --primary_background_color: var(--warm-200);
  --secondary_background_color: var(--warm-100);
  --horizontal_rule_color: var(--warm-300);
  --link_color: inherit;
  --link_hover_color: var(--warm-800);
  --error_color: var(--brick);
  --button_text_color: var(--ink-fff);
  --button_background_color: var(--brick);
  --button_border_color: var(--brick);
  --button_hover_text_color: var(--ink-fff);
  --button_hover_background_color: var(--ink-222);
  --button_hover_border_color: var(--ink-222);
  --download_button_text_color: var(--ink-fff);
  --download_button_background_color: var(--brick);
  --download_button_border_color: var(--brick);
  --download_button_hover_text_color: var(--ink-fff);
  --download_button_hover_background_color: var(--ink-222);
  --download_button_hover_border_color: var(--ink-222);
}

body[data-template="show.html"] a,
body[data-template="template.html"] a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--warm-600);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

body[data-template="show.html"] a:hover,
body[data-template="template.html"] a:hover {
  color: var(--warm-800);
  text-decoration-color: var(--warm-800);
}

body:has(.customer-dashboard),
body:has(.order),
body:has(.invoice) {
  height: auto;
  min-height: 100%;
}

.customer-dashboard,
.order,
.invoice {
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
  padding: var(--main-offset) var(--content-margin) 5rem;
  font-weight: 400;
  background: var(--warm-200);
}

.customer-dashboard__tenant-name,
.order__tenant-name,
.invoice__tenant-name {
  width: var(--logo-size);
  height: var(--logo-size);
  margin: 0 0 2rem;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  background: url("../img/kent-lew-logo.svg") no-repeat left center / contain;
}

.customer-dashboard__customer-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.customer-dashboard__customer-info h2 {
  margin: 0;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-800);
}

.customer-dashboard__customer-info p {
  margin: 0;
  font-size: var(--type-sm);
  line-height: 1.5;
}

.customer-dashboard__order {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0 0 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--warm-300);
}

.customer-dashboard__order:last-child {
  margin-bottom: 0;
}

.customer-dashboard__order__invoice-number h3 {
  margin: 0 0 0.375rem;
  font-family: var(--font-serif);
  font-size: var(--type-lg);
  font-weight: 400;
  line-height: 1.15;
}

.customer-dashboard__order__invoice-number p {
  margin: 0;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  color: var(--warm-800);
  line-height: 1.5;
}

.customer-dashboard__order__items ul {
  margin: 0;
  padding: 0 0 0 1.125rem;
  list-style: disc;
}

.customer-dashboard__order__items li,
.customer-dashboard .customer-dashboard__order_item,
.customer-dashboard .customer-dashboard__order_selection {
  margin: 0 0 0.5rem;
  padding-left: 0;
  text-indent: 0;
  list-style: inherit;
  list-style-position: outside;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  line-height: 1.4;
}

.customer-dashboard__order__items li::marker,
.customer-dashboard .customer-dashboard__order_item::marker,
.customer-dashboard .customer-dashboard__order_selection::marker {
  text-indent: 0;
  text-align: start;
}

.customer-dashboard__order__items li:last-child {
  margin-bottom: 0;
}

.customer-dashboard__order__archive-link {
  margin-top: 1.25rem;
  padding-top: 0.25rem;
  text-align: left;
}

.customer-dashboard a.customer-dashboard__download-button,
.customer-dashboard a.customer-dashboard__invoice-link {
  text-decoration: none;
}

.customer-dashboard a.customer-dashboard__download-button {
  display: inline-block;
  padding: 0.625rem 1rem;
  border-radius: 2px;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.customer-dashboard a.customer-dashboard__download-button:hover {
  text-decoration: none;
}

.order__message {
  margin: 0 0 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--warm-300);
  font-size: var(--type-sm);
  line-height: 1.5;
}

.order__message p {
  margin: 0 0 1rem;
}

.order__message p:last-child {
  margin-bottom: 0;
}

.order .submit-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.625rem 1rem;
  border-radius: 2px;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.order .submit-button .icon {
  display: none;
}

.order__back-link {
  margin: 0;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
}

.order__back-link a {
  text-decoration: none;
}

.order__back-link a:hover {
  text-decoration: underline;
}

.invoice {
  max-width: 48rem;
  font-size: var(--type-sm);
}

.invoice h1,
.invoice h2,
.invoice h3 {
  font-family: var(--font-serif);
  font-weight: 400;
}

.invoice__print-button a,
.invoice__re-send-button a {
  display: inline-block;
  padding: 0.625rem 1rem;
  border-radius: 2px;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

/*
----------------------------------------
Footer
----------------------------------------
*/

#footer {
  background: var(--ink-222);
  color: var(--ink-fff);
  margin-top: 5rem;
  padding-top: var(--content-offset);
  padding-bottom: 2.5rem;
}

.footer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: 0;
  align-items: start;
}

.footer-fonts {
  grid-column: 1;
}

.footer-nav {
  grid-column: 2;
}

.footer-newsletter {
  grid-column: 1 / -1;
  margin-top: 3.75rem;
}

.footer-heading {
  margin: 0 0 0.875rem;
  min-height: calc(var(--type-sm) * 1.25);
  font-size: var(--type-sm);
  line-height: 1.25;
  color: var(--warm-500);
}

.footer-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 400;
  line-height: 1.25;
}

.footer-links svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

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

.footer-links li + li {
  margin-top: 0.875rem;
}

.newsletter-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
}

.newsletter-label-sub {
  color: var(--warm-400);
}

.newsletter-disclaimer {
  margin: 0 0 0.75rem;
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  font-style: italic;
  color: var(--warm-400);
}

.newsletter-form {
  display: flex;
  gap: 0.625rem;
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: 2px;
  background: var(--ink-fff);
  color: var(--ink-222);
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
}

.newsletter-form button {
  flex-shrink: 0;
  padding: 0.625rem 1rem;
  border-radius: 2px;
  background: var(--brick);
  color: var(--ink-fff);
  font-family: var(--font-parling);
  font-size: var(--type-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-mastodon {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 2rem;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 400;
}

.footer-mastodon svg {
  flex-shrink: 0;
}

.footer-rule {
  border: 0;
  border-top: var(--footer-rule) solid var(--ink-000);
  margin: var(--content-offset) 0 1rem;
}

.footer-copyright {
  margin: 0;
  font-family: var(--font-parling);
  font-size: var(--type-sm);
  font-weight: 400;
  color: var(--warm-500);
}

.rss-link {
  align-items: baseline;
}

.footer-links .icon-rss {
  width: 0.875em;
  height: 0.875em;
  flex-shrink: 0;
}

.icon-rss rect {
  fill: var(--warm-600);
}

.icon-rss path {
  stroke: var(--warm-100);
}

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.cart-link fontdue-cart-button:has(.cart-button) {
  display: inline-flex;
  align-items: center;
}

.cart-link fontdue-cart-button:not(:has(.cart-button)) {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

.cart-link:has(.cart-button) .cart-link-placeholder {
  display: none;
}

.cart-link-placeholder {
  pointer-events: none;
}

.cart-link .cart-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.cart-link .icon-cart {
  flex-shrink: 0;
}

.cart-link .cart-button .icon {
  display: none;
}

.icon-cart path:nth-child(1),
.icon-cart path:nth-child(2) {
  stroke-width: 2.5;
}

.icon-cart path:nth-child(3) {
  stroke-width: 2;
}
/*
----------------------------------------
Masthead
----------------------------------------
*/

#masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--brick);
  border-bottom: var(--masthead-border) solid var(--ink-000);
  overflow: visible;
}

.masthead-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: var(--masthead-height);
  overflow: visible;
}

#logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: var(--logo-size);
  height: var(--logo-size);
  transform: translateY(50%);
}

#logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

#masthead .nav-primary > li > a,
#masthead .nav-utility a,
#masthead .nav-utility .cart-button {
  transition: opacity 0.1s ease;
}

#masthead .nav-primary > li > a:hover,
#masthead .nav-utility a:hover,
#masthead .nav-utility .cart-link:has(.cart-button):hover,
#masthead .nav-utility .cart-button:hover {
  opacity: 0.75;
}

#nav {
  display: none;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: calc(var(--masthead-height) - var(--logo-size) / 4);
  margin-left: auto;
  margin-bottom: 0;
  color: var(--ink-000);
  transform: translateY(-50%);
}
/*
----------------------------------------
Mobile menu
----------------------------------------
*/

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--brick);
  color: var(--ink-fff);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.menu-close {
  position: absolute;
  top: var(--mobile-menu-header-top);
  right: var(--content-margin);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-fff);
}

.mobile-menu-viewport {
  overflow: hidden;
  height: 100%;
  padding-top: var(--mobile-menu-content-top);
  transform: translateY(-0.375rem);
  transition: transform 0.2s ease;
}

.mobile-menu.is-open .mobile-menu-viewport {
  transform: translateY(0);
}

.mobile-menu-track {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.2s ease;
}

.mobile-menu-track.is-subnav {
  transform: translateX(-50%);
}

.mobile-menu-panel {
  box-sizing: border-box;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  padding-inline: var(--content-margin);
  overflow-y: auto;
}

.mobile-submenu-back {
  position: absolute;
  top: var(--mobile-menu-header-top);
  left: var(--content-margin);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-fff);
  visibility: hidden;
  pointer-events: none;
}

#mobile-menu:has(.mobile-menu-track.is-subnav) .mobile-submenu-back {
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-list li {
  border-bottom: 1px solid var(--ink-000);
}

.mobile-nav-list a,
.mobile-nav-list .mobile-submenu-trigger {
  display: block;
  width: 100%;
  padding-block: 1rem;
  font-size: var(--type-lg);
  text-align: left;
}

.mobile-nav-list .nav-sign-in,
.mobile-nav-list .cart-link {
  font-size: var(--type-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mobile-nav-list a[aria-current="page"] {
  font-weight: 600;
}

.mobile-nav-list .mobile-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-list .cart-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding-block: 1rem;
}

#mobile-menu .mobile-nav-list a,
#mobile-menu .mobile-nav-list .cart-link,
#mobile-menu .mobile-submenu-trigger,
#mobile-menu .menu-close,
#mobile-menu .mobile-submenu-back {
  transition: opacity 0.1s ease;
}

#mobile-menu .mobile-nav-list a:hover,
#mobile-menu .mobile-nav-list a:focus-visible,
#mobile-menu .mobile-nav-list .cart-link:hover,
#mobile-menu .mobile-nav-list .cart-link:focus-within,
#mobile-menu .mobile-submenu-trigger:hover,
#mobile-menu .mobile-submenu-trigger:focus-visible,
#mobile-menu .menu-close:hover,
#mobile-menu .menu-close:focus-visible,
#mobile-menu .mobile-submenu-back:hover,
#mobile-menu .mobile-submenu-back:focus-visible {
  opacity: 0.75;
}

.icon-submenu {
  flex-shrink: 0;
}
/*
----------------------------------------
Narrow layout styles
----------------------------------------
*/

@media (hover: none) {
  .font-try-embed .type-tester[data-shy='hover'] .type-tester__toolbar,
  .font-try-embed .type-tester[data-shy='focus'] .type-tester__toolbar {
    visibility: visible;
    pointer-events: auto;
  }

  .font-try-embed .type-tester[data-shy='hover'] .type-tester__toolbar__tools,
  .font-try-embed .type-tester[data-shy='focus'] .type-tester__toolbar__tools {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 47.9375rem) {
  .font-try-embed fontdue-type-tester + fontdue-type-tester .type-tester__toolbar,
  .font-try-embed .font-try-pair + fontdue-type-tester .type-tester__toolbar,
  .font-try-embed fontdue-type-tester + .font-try-pair > fontdue-type-tester:first-child .type-tester__toolbar,
  .font-try-embed .font-try-pair + .font-try-pair > fontdue-type-tester:first-child .type-tester__toolbar {
    padding-top: 1.25rem;
  }
}

@media (hover: none) and (max-width: 47.9375rem) {
  .carousel-zone {
    pointer-events: none;
  }
}

@media (min-width: 48rem) {
  :root {
    --grid-columns: 12;

    --type-xs: clamp(0.8125rem, 0.15vw + 0.78rem, 0.875rem);
    --type-sm: clamp(0.875rem, 0.3vw + 0.85rem, 1rem);
    --type-prose: clamp(1.0625rem, 0.45vw + 0.95rem, 1.25rem);
    --type-font-notes: clamp(1rem, 0.3vw + 0.95rem, 1.0625rem);
    --type-nav: clamp(1rem, 0.35vw + 0.9rem, 1.25rem);
    --type-3xl: clamp(1.35rem, 0.6vw + 1.08rem, 1.6875rem);
    --type-5xl: clamp(2.25rem, 2vw + 1.35rem, 3.375rem);
    --type-page-title: clamp(1.9125rem, 1.5vw + 1.35rem, 3.375rem);
    --type-journal-title: clamp(1.125rem, 0.5vw + 0.85rem, 1.35rem);
    --type-font-hero-tagline: clamp(1.0125rem, 1.75vw + 0.4rem, 2.25rem);
    --type-font-hero-style: clamp(0.9375rem, 1vw + 0.625rem, 1.8rem);
    --type-font-hero-styles-label: clamp(0.8125rem, 0.15vw + 0.78rem, 0.875rem);
    --type-works-module-title: clamp(1.6875rem, 1vw + 1.125rem, 2.25rem);

    --nav-gap: clamp(0.875rem, 0.5rem + 2vw, 2.75rem);
    --nav-logo-gap: clamp(0.75rem, 0.25rem + 1.5vw, 2.25rem);
    --logo-viewbox: 102;
    --logo-type-top-y: 20;
    --nav-type-nudge: calc(var(--type-nav) * -0.25);
    --nav-offset-top: calc(
      var(--masthead-height) - var(--logo-size) / 2
      + var(--logo-size) * var(--logo-type-top-y) / var(--logo-viewbox)
    );
    --nav-top: calc(var(--nav-offset-top) + var(--nav-type-nudge));
    --nav-item-height: calc(var(--type-nav) * 1.25 + 0.25rem);
    --nav-link-height: var(--nav-item-height);
    --nav-flyout-offset: calc(var(--masthead-height) - var(--nav-top) + var(--masthead-border));
    --nav-flyout-bridge: calc(var(--nav-flyout-offset) - var(--nav-link-height));
    --nav-indicator-height: 0.5rem;
    --nav-indicator-width: 1rem;
    --nav-indicator-top: calc(
      100% + (var(--masthead-height) - var(--nav-top) - 100%) - var(--nav-indicator-height)
    );
    --nav-flyout-padding: 1rem;
  }

  #nav {
    display: flex;
    align-items: flex-start;
    align-self: flex-start;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    margin-left: var(--nav-logo-gap);
    margin-top: var(--nav-top);
    color: var(--ink-fff);
  }

  .nav-primary {
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
  }

  .nav-utility {
    display: flex;
    align-items: flex-end;
    gap: var(--nav-gap);
  }

  .nav-utility > li {
    display: flex;
    align-items: flex-end;
    height: var(--nav-item-height);
    box-sizing: border-box;
  }

  .nav-primary > li > a,
  .nav-primary > li > .nav-flyout-trigger {
    display: inline-grid;
    align-items: center;
    justify-items: center;
    box-sizing: border-box;
    min-height: var(--nav-item-height);
    padding-top: 0;
    padding-bottom: 0.25rem;
    white-space: nowrap;
    font-family: var(--font-parling);
    font-size: var(--type-nav);
    font-weight: 400;
  }

  .nav-primary > li > .nav-flyout-trigger {
    border: 0;
    margin: 0;
    padding-inline: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .nav-primary > li > a::before,
  .nav-primary > li > .nav-flyout-trigger::before,
  .nav-label {
    grid-area: 1 / 1;
  }

  .nav-primary > li > a::before,
  .nav-primary > li > .nav-flyout-trigger::before {
    content: attr(data-nav-label);
    font-weight: 600;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  .nav-primary > li > a[aria-current="page"],
  .nav-primary > li > .nav-flyout-trigger[aria-current="page"] {
    position: relative;
    font-weight: 600;
  }

  .has-flyout > a,
  .has-flyout > .nav-flyout-trigger {
    position: relative;
  }

  .nav-primary > li > a[aria-current="page"]::after,
  .nav-primary > li > .nav-flyout-trigger[aria-current="page"]::after,
  .has-flyout:hover > a::after,
  .has-flyout:hover > .nav-flyout-trigger::after,
  .has-flyout:focus-within > a::after,
  .has-flyout:focus-within > .nav-flyout-trigger::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 1;
    top: var(--nav-indicator-top);
    width: var(--nav-indicator-width);
    height: var(--nav-indicator-height);
    background: var(--ink-000);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform: translateX(-50%);
  }

  .nav-utility a,
  .nav-utility .cart-link,
  .nav-utility .cart-button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--nav-item-height);
    padding-top: 0;
    padding-bottom: 0.25rem;
    white-space: nowrap;
    font-family: var(--font-parling);
    font-size: var(--type-sm);
    font-weight: 500;
  }

  #masthead .nav-utility .cart-link .cart-button {
    line-height: 1.25;
  }

  .nav-utility {
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .has-flyout {
    position: relative;
  }

  .nav-flyout {
    position: absolute;
    top: calc(var(--nav-flyout-offset) - 0.0625rem);
    left: calc(-1 * var(--nav-flyout-padding));
    width: max-content;
    padding-block: 0.5rem;
    background: var(--ink-000);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }

  .nav-flyout::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--nav-flyout-bridge);
  }

  .has-flyout:hover .nav-flyout,
  .has-flyout:focus-within .nav-flyout {
    opacity: 1;
    visibility: visible;
  }

  .nav-flyout a {
    display: block;
    padding: 0.5rem var(--nav-flyout-padding);
    white-space: nowrap;
    font-family: var(--font-parling);
    font-size: var(--type-sm);
    font-weight: 400;
  }

  .nav-flyout a:hover,
  .nav-flyout a:focus-visible {
    background: var(--ink-333);
  }

  .menu-toggle,
  .mobile-menu {
    display: none;
  }

  .font-subnav-inner {
    height: var(--font-subnav-height);
    min-height: 0;
  }

  .font-subnav-label {
    display: none;
  }

  .font-subnav-menu {
    margin-left: 0;
  }

  .font-subnav-dropdown {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: none;
    right: auto;
    left: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .font-subnav-list {
    position: static;
    left: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.875rem;
    max-width: 100%;
    width: auto;
    padding: 0;
    padding-left: var(--subnav-text-offset);
  }

  .font-subnav-list a,
  .font-subnav-list .buy-button {
    display: inline-block;
    width: auto;
    font-size: var(--type-sm);
  }

  .font-subnav-list .buy-button {
    padding: 0.25rem 0.75rem;
  }

  .font-try-inner {
    padding-top: var(--space-section);
  }

  .font-try-embed {
    gap: 0.5em;
  }

  .font-try-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gutter);
  }

  .font-hero-spec {
    background-size: 3.75rem 3.75rem;
  }

  .font-hero-rule {
    margin-block: 1.25rem;
  }

  .font-hero-style {
    white-space: nowrap;
  }

  .font-hero-styles {
    gap: 0.375rem var(--grid-gutter);
  }

  .font-hero-styles + .font-hero-styles {
    margin-top: 0.625rem;
  }

  .font-section {
    margin-top: 2.5rem;
  }

  .font-section-body {
    padding-top: 1.75rem;
    align-items: start;
  }

  .font-section-body > .font-section-heading {
    margin-bottom: 1.9375rem;
  }

  .font-section-body > .font-section-heading + * {
    margin-top: calc(var(--grid-gutter) * -1);
  }

  .font-section-body > .font-section-heading ~ .font-section-content {
    margin-top: calc(var(--grid-gutter) * -1);
  }

  .font-section-meta {
    grid-column: span 4;
  }

  .font-section-content {
    grid-column: span 6;
  }

  .font-feature {
    grid-column: span 4;
  }

  .font-feature-list {
    row-gap: 3.5rem;
  }

  .font-license-buy,
  .font-license-info {
    grid-column: span 4;
  }

  .font-section-body > .font-section-heading ~ .font-license-info {
    margin-top: calc(var(--grid-gutter) * -1);
  }

  .font-section#in-use .font-section-body > .font-section-heading {
    margin-bottom: 0.5rem;
  }

  .works-intro .page-title,
  .journal-intro .page-title,
  .works-module-meta {
    grid-column: span 4;
  }

  .works-module-detail {
    margin-top: 2.5rem;
  }

  .works-intro-lead,
  .journal-intro-lead,
  .works-module-description {
    grid-column: span 6;
  }

  .account-aside {
    grid-column: 1 / span 4;
  }

  .account-main {
    grid-column: 5 / span 6;
  }

  .account-main .account-intro {
    max-width: none;
  }

  .license-aside {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: var(--license-sidebar-top);
  }

  .license-nav-link {
    font-size: var(--type-sm);
  }

  .license-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-bottom: 0;
  }

  .license-sections {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gutter);
  }

  .license-sections > .license-rule {
    grid-column: 1 / -1;
  }

  .license-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gutter);
  }

  .license-section-headline,
  .license-pdf,
  .license-body {
    grid-column: 5 / span 6;
  }

  .license-pdf {
    margin: 0.3125rem 0 0;
  }

  .license-intro-lead {
    grid-column: 5 / span 6;
    grid-row: 1;
  }

  .error.grid {
    align-items: center;
  }

  .error-notdef img {
    width: 80%;
  }

  .about-photo,
  .error-notdef {
    grid-column: 2 / span 4;
  }

  .about-content,
  .error-content {
    grid-column: 6 / span 6;
  }

  .journal-tags {
    grid-column: span 2;
  }

  .journal-archive .journal-list {
    grid-column: span 10;
    margin-top: 0;
  }

  .journal-archive-body {
    align-items: start;
  }

  .journal-archive .journal-entry {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .journal-archive .journal-date {
    grid-column: span 2;
    font-size: var(--type-sm);
    text-align: right;
  }

  .journal-archive .journal-title {
    grid-column: span 8;
  }

  .journal-post-header {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gutter);
    align-items: baseline;
  }

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

  .journal-post-header .page-title {
    grid-column: 3 / span 8;
    margin-top: 0;
  }

  .journal-post-header {
    margin-bottom: 2rem;
  }

  .post-lede {
    margin-bottom: 2rem;
  }

  .journal-post .post-body.prose {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gutter);
  }

  .journal-post .post-body.prose > * + * {
    margin-top: 0;
  }

  .journal-post .post-body.prose > p + p {
    margin-top: calc(var(--post-paragraph-gap) - var(--grid-gutter));
  }

  .journal-post .post-body.prose > .post-subhead + * {
    margin-top: calc(var(--post-subhead-after) - var(--grid-gutter));
  }

  .journal-post .post-body.prose > * + :is(figure, .post-figure-side),
  .journal-post .post-body.prose > :is(figure, .post-figure-side) + * {
    margin-top: var(--post-figure-extra);
  }

  .journal-post .post-body.prose > :is(
    p,
    h2,
    h3,
    figure,
    ul,
    ol,
    blockquote,
    pre,
    hr,
    .post-list,
    .post-blockquote,
    .post-figure-side,
    .post-footnotes,
    .post-carousel
  ) {
    grid-column: 3 / span 8;
  }

  .journal-post .post-body.prose > .post-aside,
  .journal-post .post-body.prose > p + aside.post-aside {
    grid-column: 3 / span 8;
  }

  .journal-post .post-body.prose > .post-figure-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: var(--grid-gutter);
  }

  .customer-dashboard,
  .order {
    max-width: 42rem;
  }

  .customer-dashboard__customer-info {
    grid-template-columns: minmax(7.5rem, max-content) 1fr;
    gap: 2rem;
  }

  .customer-dashboard__order {
    grid-template-columns: minmax(7.5rem, max-content) 1fr;
    gap: 2rem;
  }

  .customer-dashboard__order__archive-link {
    text-align: right;
  }

  .home-specimen-name {
    font-size: calc(var(--type-sm) * 1.25);
  }
}
/*
----------------------------------------
Wide layout tweaks
----------------------------------------
*/

@media (min-width: 56.25rem) {
  .font-hero-spec-panel {
    width: calc(100% - 12.75em);
    max-width: calc(100% - 12.75em);
  }

  .journal-post .post-body.prose > p:has(+ aside.post-aside) {
    anchor-name: --post-aside-anchor;
  }

  .journal-post .post-body.prose > p + aside.post-aside {
    --post-col-width: calc((100% - var(--grid-gutter) * (var(--grid-columns) - 1)) / var(--grid-columns));
    position: absolute;
    top: anchor(--post-aside-anchor top);
    left: calc(var(--post-col-width) * 10 + var(--grid-gutter) * 10);
    width: calc(var(--post-col-width) * 2 + var(--grid-gutter) * 1);
    margin: 0;
  }

  .home-headline {
    display: flex;
    align-items: center;
    grid-column: span 7;
  }

  .latest-entries {
    align-self: start;
    grid-column: span 5;
  }

  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .footer-fonts {
    grid-column: 1 / span 3;
  }

  .footer-nav {
    grid-column: 4 / span 3;
  }

  .footer-newsletter {
    grid-column: 8 / -1;
    margin-top: 0;
  }
}

@media (min-width: 75rem) {
  .home-headline {
    grid-column: span 8;
  }

  .latest-entries {
    grid-column: span 4;
  }

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

  .footer-nav {
    grid-column: 3 / span 2;
  }

  .footer-newsletter {
    grid-column: 9 / -1;
  }

  .journal-archive .journal-title {
    grid-column: span 7;
  }

  .journal-post-header .page-title {
    grid-column: 3 / span 7;
  }

  .journal-post .post-body.prose > :is(
    p,
    h2,
    h3,
    figure,
    ul,
    ol,
    blockquote,
    pre,
    hr,
    .post-list,
    .post-blockquote,
    .post-figure-side,
    .post-footnotes,
    .post-carousel
  ) {
    grid-column: 3 / span 7;
  }

  .journal-post .post-body.prose > .post-aside,
  .journal-post .post-body.prose > p + aside.post-aside {
    grid-column: 3 / span 7;
  }

  .journal-post .post-body.prose > p + aside.post-aside {
    left: calc(var(--post-col-width) * 9 + var(--grid-gutter) * 9);
    width: calc(var(--post-col-width) * 3 + var(--grid-gutter) * 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-viewport,
  .mobile-menu-track,
  .font-subnav-dropdown,
  .font-subnav-chevron,
  .skip-link {
    transition: none;
  }
}