/* ========================================
   ROOT
   ======================================== */
:root {
  --page-bg-color: #ffffff;
  --page-text-color: #000000;
}

/* ========================================
   GLOBAL SELECTION
   ======================================== */
::selection {
  background-color: #ff00ff;
  /* Fluo pink */
  color: #ffffff;
}

::-moz-selection {
  background-color: #ff00ff;
  color: #ffffff;
}

/* ========================================
   BASE
   ======================================== */
body {
  background-color: var(--page-bg-color);
  color: var(--page-text-color);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

a {
  color: var(--page-text-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 2rem;
  display: block;
}

/* ========================================
   HEADER
   ======================================== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem;
  padding-bottom: 1rem;
  gap: 2rem;
  container-type: inline-size;
  container-name: header;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--page-bg-color);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.page-header .suva-title {
  margin-bottom: 0;
  flex-shrink: 0;
}

.page-header.font-header {
  padding-top: 2.8rem;
  justify-content: space-between;
}

.page-header.font-header #font-name {
  font-size: 4rem;
  margin: 0;
}

.page-header.font-header .top-buttons {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.page-header.font-header #download-font-button,
.page-header.font-header #neutral-view-button {
  border: 2px solid currentColor;
  border-radius: 20px;
  background: transparent;
  color: var(--page-text-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  padding: 0.55rem 0.6rem;
  text-transform: lowercase;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
}

.top-buttons {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-shrink: 0;
}

.top-buttons a,
.top-buttons button {
  display: inline-block;
  margin: 0;
  border: 2px solid currentColor;
  border-radius: 20px;
  background: transparent;
  color: var(--page-text-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  padding: 0.55rem 0.6rem;
  text-transform: lowercase;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
}

#copy-colors-button {
  margin-left: 1.5rem;
  text-transform: none;
}


/* Hover effects */
@media (hover: hover) {

  .page-header.font-header #download-font-button:hover,
  .page-header.font-header #neutral-view-button:hover,
  .top-buttons a:hover,
  .top-buttons button:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #ffffff;
  }

  body.neutral-mode .page-header.font-header #download-font-button:hover,
  body.neutral-mode .page-header.font-header #neutral-view-button:hover,
  body.neutral-mode .top-buttons a:hover,
  body.neutral-mode .top-buttons button:hover {
    color: #1e4fa8;
  }
}

/* Media query: Responsive header layout (phones + narrow tablets) */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    gap: 1.8rem;
    position: static;
  }

  /* Homepage only: center logo with centered font list below */
  .page-header:has(.homepage-title) {
    align-items: center;
  }

  .suva-title {
    display: inline-flex;
    gap: 0.3rem;
  }

  .suva-letter {
    font-size: 3.2rem;
  }

  .top-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 100%;
  }

  .page-header.font-header .top-buttons {
    display: grid;
    grid-template-columns: 155px 155px;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 100%;
  }

  .page-header.font-header .top-buttons button {
    width: 100%;
  }

  /* (Removed grid-specific rules for odd items as we use flex now) */

  #copy-colors-button {
    margin-left: 0;
  }

  .top-buttons a,
  .top-buttons button {
    font-size: 0.95rem;
    padding: 0.65rem 0.8rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow-wrap: normal;
    min-width: 0;
  }

  .page-header.font-header #download-font-button,
  .page-header.font-header #neutral-view-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 0;
    white-space: nowrap;
    overflow-wrap: normal;
    text-align: center;
    box-sizing: border-box;
  }

  .page-header.font-header {
    align-items: center;
    padding-top: 1.5rem;
    gap: 1.4rem;
  }

  .page-header.font-header #font-name {
    font-size: clamp(1.8rem, 9vw, 3.5rem);
    text-align: center;
    width: 100%;
    word-break: keep-all;
  }

  .type-tester-container + #go-home-button {
    margin-left: 1.5rem;
  }

  main .left-column {
    align-items: center;
    text-align: center;
  }

  main .left-column #go-home-button,
  main .left-column #copy-email-button {
    margin-left: 0;
    max-width: 100%;
  }

  main .left-column #back-to-top-button {
    margin-left: 0;
    max-width: 100%;
    align-self: center;
  }

  .homepage-title .suva-letter:nth-child(n+5) {
    display: none;
  }

  .homepage-title .suva-letter:nth-child(4) {
    margin-right: 0;
  }
}

/* ========================================
   LAYOUT
   ======================================== */
main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3rem;
  gap: 3rem;
  container-type: inline-size;
  container-name: main;
}

.left-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  container-type: inline-size;
  container-name: left-column;
  margin-bottom: 60px;
  width: 100%;
}

#copy-email-button,
#back-to-top-button,
#go-home-button {
  border: 2px solid currentColor;
  margin-left: 0.5rem;
  border-radius: 20px;
  background: transparent;
  color: var(--page-text-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  padding: 0.55rem 0.6rem;
  text-transform: lowercase;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
}

#back-to-top-button {
  margin-top: 2rem;
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

#back-to-top-button.visible {
  opacity: 1;
  pointer-events: auto;
}

#go-home-button {
  margin-top: 1rem;
  margin-bottom: 60px;
}

/* Hover effects for buttons */
@media (hover: hover) {

  #copy-email-button:hover,
  #back-to-top-button:hover,
  #go-home-button:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #ffffff;
  }

  body.neutral-mode #copy-email-button:hover,
  body.neutral-mode #back-to-top-button:hover,
  body.neutral-mode #go-home-button:hover {
    color: #1e4fa8;
  }
}

.info-description,
.contact-description,
.info-description-underline,
.email {
  background: transparent;
  color: var(--page-text-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: normal;
  padding: 0.6rem 0.8rem;
  line-height: 1.3;
  cursor: pointer;
  display: inline-block;
}

.info-description,
.info-description-underline {
  max-width: 85ch;
}

.contact-description {
  max-width: 100ch;
}

.info-description-underline,
.email {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Container query: Responsive main layout */
@media (max-width: 1200px) {
  main {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .info-description,
  .contact-description,
  .info-description-underline,
  .email {
    max-width: 100%;
    font-size: 1.2rem;
  }
}

/* Container query: Responsive left column */
@container left-column (max-width: 600px) {
  a {
    font-size: 1.5rem;
  }

  .info-description,
  .contact-description,
  .info-description-underline,
  .email {
    max-width: 100%;
    font-size: 1.2rem;
    text-align: center;
  }
}

/* ========================================
   SUVA TITLE
   ======================================== */
.suva-title {
  display: inline-flex;
  gap: 0.6rem;
  margin-bottom: 0;
}

@media (hover: hover) {
  .suva-title:hover {
    color: #ffffff;
  }

  body.neutral-mode .suva-title:hover {
    color: #1e4fa8;
  }
}

.suva-letter {
  font-size: 4rem;
  line-height: 1;
}

.homepage-title .suva-letter:nth-child(4),
.homepage-title .suva-letter:nth-child(8) {
  margin-right: 1.5rem;
}

/* ========================================
   FONT LIST
   ======================================== */
.font-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  white-space: nowrap;
}

.font-list a {
  font-size: 2.3rem;
}

@media (hover: hover) {
  .font-list a:hover {
    color: #ffffff;
  }

  body.neutral-mode .font-list a:hover {
    color: #1e4fa8;
  }
}

/* Container query: Responsive font list */
@container left-column (max-width: 600px) {
  .font-list {
    gap: 0.8rem;
    align-items: center;
    width: 100%;
    white-space: normal;
  }

  .font-list a {
    font-size: 1.75rem;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
  }

  #back-to-top-button {
    align-self: center;
    margin-left: 0;
  }
}

/* ========================================
   FONT PREVIEW
   ======================================== */
.font-preview {
  position: fixed;
  right: 8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  max-width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 10;
  pointer-events: none;
}

#font-preview-letter-lower,
#font-preview-letter-upper {
  font-size: clamp(8rem, 24vw, 22rem);
}


/* ========================================
   ALPHABET
   ======================================== */
.alphabet-frame {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 101px;
  gap: 21px;
  margin: 3rem 0 8rem 0;
  width: 100%;
  container-type: inline-size;
  container-name: alphabet-frame;
}

.alphabet-frame--tight {
  grid-template-columns: repeat(7, 196px);
  grid-auto-rows: 121px;
  margin-left: 1rem;
}

.alphabet-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
}

.alphabet-cell span {
  transition: transform 0.18s ease-in-out;
}

@media (hover: hover) {
  .alphabet-cell:hover span {
    transform: scale(3);
    color: #ffffff;
  }

  body.neutral-mode .alphabet-cell:hover span {
    color: #1e4fa8;
  }
}

/* Container query: Responsive alphabet grid */
@media (max-width: 900px) {
  .alphabet-frame {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 70px;
    gap: 12px;
    margin-left: 0;
    margin: 0 auto 4rem auto;
  }

  .alphabet-frame--tight {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 70px;
  }

  .alphabet-cell {
    font-size: 2rem;
  }
}

/* Container query: Extra small alphabet grid */
@media (max-width: 500px) {
  .alphabet-frame {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 60px;
    gap: 10px;
  }

  .alphabet-frame--tight {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 60px;
  }

  .alphabet-cell {
    font-size: 1.5rem;
  }
}

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */
#font-name {
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

@media (hover: hover) {
  #font-name:hover {
    color: #ffffff;
  }
}

#go-home-button {
  margin-top: 1rem;
  margin-bottom: 60px;
}

@media (hover: hover) {
  #go-home-button:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #ffffff;
  }

  body.neutral-mode #go-home-button:hover {
    color: #1e4fa8;
  }
}

/* Container query: Responsive typography */
@container main (max-width: 1000px) {
  #font-name {
    font-size: 3.2rem;
  }

  #go-home-button {
    margin-left: 0;
    margin-top: 1rem;
  }
}

/* TYPE TESTER */
.type-tester-title,
#font-author-info {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 2rem;
  font-weight: normal;
  color: var(--page-text-color);
  text-align: left;
}

.type-tester-title {
  margin-bottom: 2rem;
}

.type-tester-container {
  margin: 2rem 3rem 6rem 3rem;
  display: flex;
  flex-direction: column;
}

/* Font page only: #go-home-button follows type tester; match its horizontal inset (not .left-column’s 0.5rem). */
.type-tester-container + #go-home-button {
  margin-left: 3rem;
}

.tester-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  width: 100%;
}

.tester-line,
.tester-bottom-line {
  flex-grow: 1;
  height: 1px;
  background-color: var(--page-text-color);
  border: none;
  margin: 0;
}

.tester-bottom-line {
  margin-top: 2rem;
}

#font-author-info {
  margin-top: 2rem;
  flex-shrink: 0;
  line-height: 1.3;
}

/* Custom Range Slider */
input[type=range]#type-size-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 40%;
  background: transparent;
  cursor: pointer;
}

input[type=range]#type-size-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  background: var(--page-text-color);
}

input[type=range]#type-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--page-text-color);
  margin-top: -7px;
}

input[type=range]#type-size-slider::-moz-range-track {
  width: 100%;
  height: 1px;
  background: var(--page-text-color);
}

input[type=range]#type-size-slider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--page-text-color);
  border: none;
}

.tester-text {
  font-size: 64px;
  line-height: 1.1;
  white-space: pre-wrap;
  outline: none;
  height: 500px;
  max-height: 60vh;
  overflow: hidden;
}

/* Container query overrides */
@container main (max-width: 1000px) {
  .type-tester-container {
    margin: 1rem 0 3rem 0;
  }
}

/* ========================================
   FONT FACES
   ======================================== */
@font-face {
  font-family: 'Cofe Sans';
  src: url('../fonts/CofeSans-Regular.woff') format('woff');
}

@font-face {
  font-family: 'BRNO2016';
  src: url('../fonts/BRNO2016_Vello-Lutter&Mathias-V22rsi.ttf') format('truetype');
}

@font-face {
  font-family: 'Jaan';
  src: url('../fonts/jaan.woff') format('woff');
}

@font-face {
  font-family: 'Kalev Grotesk';
  src: url('../fonts/KalevGrotesk-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Koekoek Regular';
  src: url('../fonts/Koekoek-Regular-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Lambiseim Regular';
  src: url('../fonts/Lambiseim-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Leimzy Regular';
  src: url('../fonts/Leimzy-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Molot';
  src: url('../fonts/molot.woff') format('woff');
}

@font-face {
  font-family: 'Varenyky Regular';
  src: url('../fonts/Varenyky-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Vorsik Regular';
  src: url('../fonts/vorsik-regular.woff') format('woff');
}

@font-face {
  font-family: '2008';
  src: url('../fonts/2008.woff') format('woff');
}

@font-face {
  font-family: 'Apollo';
  src: url('../fonts/Apollo-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Dahlia';
  src: url('../fonts/Dahlia-bold.woff') format('woff');
}

@font-face {
  font-family: 'J-Sans';
  src: url('../fonts/J-Sansv1.6-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Kollektiiv';
  src: url('../fonts/Kollektiiv-Collective.woff') format('woff');
}

@font-face {
  font-family: 'Napulo';
  src: url('../fonts/Napulo-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Nocturnal';
  src: url('../fonts/Nocturnal.woff') format('woff');
}

@font-face {
  font-family: 'ReinLight';
  src: url('../fonts/ReinGrotesk-Light.woff') format('woff');
}

@font-face {
  font-family: 'ReinRegular';
  src: url('../fonts/ReinGrotesk-Regular.woff') format('woff');
}

@font-face {
  font-family: 'StereoSans';
  src: url('../fonts/StereoSans.woff') format('woff');
}

@font-face {
  font-family: 'Yoga';
  src: url('../fonts/Yoga-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Dap';
  src: url('../fonts/dap.woff') format('woff');
}

@font-face {
  font-family: 'FairyType';
  src: url('../fonts/fairytype.woff') format('woff');
}

@font-face {
  font-family: 'FallenGum';
  src: url('../fonts/fallengum.woff') format('woff');
}

@font-face {
  font-family: 'Fontenstein';
  src: url('../fonts/fontenstein-regular.woff') format('woff');
}

@font-face {
  font-family: 'Gog';
  src: url('../fonts/gog-regular.woff') format('woff');
}

@font-face {
  font-family: 'Helipleumon';
  src: url('../fonts/helipleumon.woff') format('woff');
}

@font-face {
  font-family: 'IDreamOfLetters';
  src: url('../fonts/idreamofletters.woff') format('woff');
}

@font-face {
  font-family: 'Kykeon';
  src: url('../fonts/kykeon.woff') format('woff');
}

@font-face {
  font-family: 'Lopsakas';
  src: url('../fonts/lopsakas-regular.woff') format('woff');
}

@font-face {
  font-family: 'Naps';
  src: url('../fonts/naps.woff') format('woff');
}

@font-face {
  font-family: 'OFortuna';
  src: url('../fonts/ofortuna.woff') format('woff');
}

@font-face {
  font-family: 'OwlCave';
  src: url('../fonts/owlcave.woff') format('woff');
}

@font-face {
  font-family: 'Sens';
  src: url('../fonts/sens.woff') format('woff');
}

@font-face {
  font-family: 'Shattered';
  src: url('../fonts/shattered.woff') format('woff');
}

@font-face {
  font-family: 'Sigella';
  src: url('../fonts/sigella.woff') format('woff');
}

@font-face {
  font-family: 'Sirkel';
  src: url('../fonts/sirkel-regular.woff') format('woff');
}

@font-face {
  font-family: 'ToiletPaperType';
  src: url('../fonts/toiletpapertype.woff') format('woff');
}

@font-face {
  font-family: 'Napulo2';
  src: url('../fonts/Napulo-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Nocturnal2';
  src: url('../fonts/Nocturnal.woff2') format('woff2');
}

@font-face {
  font-family: 'Yoga2';
  src: url('../fonts/Yoga-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Akijo';
  src: url('../fonts/Akijo_Regular_AAsztalos.otf') format('opentype');
}

@font-face {
  font-family: 'Bomber';
  src: url('../fonts/Bomber-Fraktur_Mathias-V22rsi.ttf') format('truetype');
}

@font-face {
  font-family: 'Crystal';
  src: url('../fonts/Crystal-regular_IMoltsanov.otf') format('opentype');
}

@font-face {
  font-family: 'DEWY';
  src: url('../fonts/DEWY-SVG_Martin Kipper.otf') format('opentype');
}

@font-face {
  font-family: 'Escapist';
  src: url('../fonts/Escapist_Diaries.otf') format('opentype');
}

@font-face {
  font-family: 'Fiato';
  src: url('../fonts/Fiato.otf') format('opentype');
}

@font-face {
  font-family: 'KetchupAddict';
  src: url('../fonts/KetchupAddict-Regular_BSiim.otf') format('opentype');
}

@font-face {
  font-family: 'LEONE';
  src: url('../fonts/LEONE-Regular_LMartens.otf') format('opentype');
}

@font-face {
  font-family: 'Madis';
  src: url('../fonts/Madis-Igor.otf') format('opentype');
}

@font-face {
  font-family: 'Pakkonen';
  src: url('../fonts/Pakkonen_Mathias-V22rsi.ttf') format('truetype');
}

@font-face {
  font-family: 'SafariTraveller';
  src: url('../fonts/SafariTraveller-Regular_MVarik.otf') format('opentype');
}

@font-face {
  font-family: 'Sato';
  src: url('../fonts/Sato_24_PSalmin.otf') format('opentype');
}

@font-face {
  font-family: 'Tiltortion';
  src: url('../fonts/Tiltortion.otf') format('opentype');
}

@font-face {
  font-family: 'Volask';
  src: url('../fonts/Volask.ttf') format('truetype');
}

@font-face {
  font-family: 'ZakHatless';
  src: url('../fonts/Žak_Hatless.otf') format('opentype');
}

@font-face {
  font-family: 'ZakImposter';
  src: url('../fonts/Žak_Imposter.otf') format('opentype');
}

@font-face {
  font-family: 'ZakRegular';
  src: url('../fonts/Žak_Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Barbara';
  src: url('../fonts/barbara_Sonia Ruus.otf') format('opentype');
}

@font-face {
  font-family: 'Broadnibber';
  src: url('../fonts/broadnibber.otf') format('opentype');
}

@font-face {
  font-family: 'Dematerialized';
  src: url('../fonts/dematerialized.otf') format('opentype');
}

@font-face {
  font-family: 'Faktory';
  src: url('../fonts/faktory.otf') format('opentype');
}

@font-face {
  font-family: 'FloraAndFauna';
  src: url('../fonts/floraandfauna.otf') format('opentype');
}

@font-face {
  font-family: 'Flowstate';
  src: url('../fonts/flowstate.otf') format('opentype');
}

@font-face {
  font-family: 'Franz';
  src: url('../fonts/franz-Regular_AVeevo.otf') format('opentype');
}

@font-face {
  font-family: 'Frisbee';
  src: url('../fonts/frisbee.otf') format('opentype');
}

@font-face {
  font-family: 'Gary';
  src: url('../fonts/gary.otf') format('opentype');
}

@font-face {
  font-family: 'Heavy';
  src: url('../fonts/heavy.otf') format('opentype');
}

@font-face {
  font-family: 'Hellplague';
  src: url('../fonts/hellplague.otf') format('opentype');
}

@font-face {
  font-family: 'Hypha';
  src: url('../fonts/hypha.otf') format('opentype');
}

@font-face {
  font-family: 'IgorRounded';
  src: url('../fonts/igorrounded.otf') format('opentype');
}

@font-face {
  font-family: 'Imogen';
  src: url('../fonts/imogen.ttf') format('truetype');
}

@font-face {
  font-family: 'Kevad';
  src: url('../fonts/kevad.otf') format('opentype');
}

@font-face {
  font-family: 'Kiwi';
  src: url('../fonts/kiwi.otf') format('opentype');
}

@font-face {
  font-family: 'LazyGlamour';
  src: url('../fonts/lazyglamour.otf') format('opentype');
}

@font-face {
  font-family: 'Lumberjack';
  src: url('../fonts/lumberjack.otf') format('opentype');
}

@font-face {
  font-family: 'Maurizio';
  src: url('../fonts/maurizio.otf') format('opentype');
}

@font-face {
  font-family: 'MSCurvy';
  src: url('../fonts/mscurvy.otf') format('opentype');
}

@font-face {
  font-family: 'NewPoetic';
  src: url('../fonts/newpoetic.otf') format('opentype');
}

@font-face {
  font-family: 'Ornamental';
  src: url('../fonts/ornamental.otf') format('opentype');
}

@font-face {
  font-family: 'Radio';
  src: url('../fonts/radio.otf') format('opentype');
}

@font-face {
  font-family: 'Rammus';
  src: url('../fonts/rammus.otf') format('opentype');
}

@font-face {
  font-family: 'SensibleSenseless';
  src: url('../fonts/sensiblesenseless.otf') format('opentype');
}

@font-face {
  font-family: 'Skeleton';
  src: url('../fonts/skeleton.otf') format('opentype');
}

@font-face {
  font-family: 'Substanta';
  src: url('../fonts/substanta.otf') format('opentype');
}

@font-face {
  font-family: 'Susle';
  src: url('../fonts/susle.otf') format('opentype');
}

@font-face {
  font-family: 'TheTimesApex';
  src: url('../fonts/thetimesapex.ttf') format('truetype');
}

@font-face {
  font-family: 'TorturaStroke';
  src: url('../fonts/torturastroke.otf') format('opentype');
}

@font-face {
  font-family: 'Vaksal';
  src: url('../fonts/vaksal.otf') format('opentype');
}

@font-face {
  font-family: 'Villowplex';
  src: url('../fonts/villowplex.ttf') format('truetype');
}

@font-face {
  font-family: 'DoubleBubble';
  src: url('../fonts/DoubleBubbleGX_AVeiderpass.ttf') format('truetype');
}

/* ========================================
   FONT SWITCHING (CORE SYSTEM)
   ======================================== */
.font-cofe-sans {
  font-family: 'Cofe Sans', serif;
}

.font-brno2016 {
  font-family: 'BRNO2016', sans-serif;
}

.font-jaan {
  font-family: 'Jaan', serif;
}

.font-kalev-grotesk {
  font-family: 'Kalev Grotesk', sans-serif;
}

.font-koekoek-regular {
  font-family: 'Koekoek Regular', sans-serif;
}

.font-lambiseim-regular {
  font-family: 'Lambiseim Regular', serif;
}

.font-leimzy-regular {
  font-family: 'Leimzy Regular', sans-serif;
}

.font-molot {
  font-family: 'Molot', sans-serif;
}

.font-varenyk-regular {
  font-family: 'Varenyky Regular', sans-serif;
}

.font-vorsik-regular {
  font-family: 'Vorsik Regular', sans-serif;
}

.font-2008 {
  font-family: '2008', sans-serif;
}

.font-apollo-regular {
  font-family: 'Apollo', sans-serif;
}

.font-dahlia-bold {
  font-family: 'Dahlia', sans-serif;
}

.font-dahlia-thin {
  font-family: 'Dahlia', sans-serif;
}

.font-jsans {
  font-family: 'J-Sans', sans-serif;
}

.font-kollektiiv {
  font-family: 'Kollektiiv', sans-serif;
}

.font-napulo-regular {
  font-family: 'Napulo', sans-serif;
}

.font-nocturnal {
  font-family: 'Nocturnal', sans-serif;
}

.font-rein-light {
  font-family: 'ReinLight', sans-serif;
}

.font-rein-regular {
  font-family: 'ReinRegular', sans-serif;
}

.font-stereosans {
  font-family: 'StereoSans', sans-serif;
}

.font-yoga-regular {
  font-family: 'Yoga', sans-serif;
}

.font-dap {
  font-family: 'Dap', sans-serif;
}

.font-fairytype {
  font-family: 'FairyType', sans-serif;
}

.font-fallengum {
  font-family: 'FallenGum', sans-serif;
}

.font-fontenstein-regular {
  font-family: 'Fontenstein', sans-serif;
}

.font-gog-regular {
  font-family: 'Gog', sans-serif;
}

.font-helipleumon {
  font-family: 'Helipleumon', sans-serif;
}

.font-idreamofletters {
  font-family: 'IDreamOfLetters', sans-serif;
}

.font-kykeon {
  font-family: 'Kykeon', sans-serif;
}

.font-lopsakas-regular {
  font-family: 'Lopsakas', sans-serif;
}

.font-naps {
  font-family: 'Naps', sans-serif;
}

.font-ofortuna {
  font-family: 'OFortuna', sans-serif;
}

.font-owlcave {
  font-family: 'OwlCave', sans-serif;
}

.font-sens {
  font-family: 'Sens', sans-serif;
}

.font-shattered {
  font-family: 'Shattered', sans-serif;
}

.font-sigella {
  font-family: 'Sigella', sans-serif;
}

.font-sirkel-regular {
  font-family: 'Sirkel', sans-serif;
}

.font-toiletpapertype {
  font-family: 'ToiletPaperType', sans-serif;
}

.font-lapulo-regular {
  font-family: 'Napulo2', sans-serif;
}

.font-lambi-otf {
  font-family: 'Lambiseim Regular', serif;
}

.font-varenyky-otf {
  font-family: 'Varenyky Regular', sans-serif;
}

.font-napulo-woff2 {
  font-family: 'Napulo2', sans-serif;
}

.font-nocturnal-woff2 {
  font-family: 'Nocturnal2', sans-serif;
}

.font-yoga-woff2 {
  font-family: 'Yoga2', sans-serif;
}

.font-dap-otf {
  font-family: 'Dap', sans-serif;
}

.font-akijo {
  font-family: 'Akijo', sans-serif;
}

.font-bomber {
  font-family: 'Bomber', serif;
}

.font-crystal {
  font-family: 'Crystal', sans-serif;
}

.font-dewy {
  font-family: 'DEWY', sans-serif;
}

.font-escapist {
  font-family: 'Escapist', sans-serif;
}

.font-fiato {
  font-family: 'Fiato', sans-serif;
}

.font-ketchup-addict {
  font-family: 'KetchupAddict', sans-serif;
}

.font-leone-regular {
  font-family: 'LEONE', sans-serif;
}

.font-madis {
  font-family: 'Madis', sans-serif;
}

.font-pakkonen {
  font-family: 'Pakkonen', serif;
}

.font-safaritraveller {
  font-family: 'SafariTraveller', sans-serif;
}

.font-sato {
  font-family: 'Sato', sans-serif;
}

.font-tiltortion {
  font-family: 'Tiltortion', sans-serif;
}

.font-volask {
  font-family: 'Volask', sans-serif;
}

.font-zak-hatless {
  font-family: 'ZakHatless', sans-serif;
}

.font-zak-imposter {
  font-family: 'ZakImposter', sans-serif;
}

.font-zak-regular {
  font-family: 'ZakRegular', sans-serif;
}

.font-barbara {
  font-family: 'Barbara', sans-serif;
}

.font-broadnibber {
  font-family: 'Broadnibber', sans-serif;
}

.font-dematerialized {
  font-family: 'Dematerialized', sans-serif;
}

.font-faktory {
  font-family: 'Faktory', sans-serif;
}

.font-floraandfauna {
  font-family: 'FloraAndFauna', sans-serif;
}

.font-flowstate {
  font-family: 'Flowstate', sans-serif;
}

.font-franz-regular {
  font-family: 'Franz', sans-serif;
}

.font-frisbee {
  font-family: 'Frisbee', sans-serif;
}

.font-gary {
  font-family: 'Gary', sans-serif;
}

.font-heavy {
  font-family: 'Heavy', sans-serif;
}

.font-hellplague {
  font-family: 'Hellplague', sans-serif;
}

.font-hypha {
  font-family: 'Hypha', sans-serif;
}

.font-igorrounded {
  font-family: 'IgorRounded', sans-serif;
}

.font-imogen {
  font-family: 'Imogen', sans-serif;
}

.font-kevad {
  font-family: 'Kevad', sans-serif;
}

.font-kiwi {
  font-family: 'Kiwi', sans-serif;
}

.font-lazyglamour {
  font-family: 'LazyGlamour', sans-serif;
}

.font-lumberjack {
  font-family: 'Lumberjack', sans-serif;
}

.font-maurizio {
  font-family: 'Maurizio', sans-serif;
}

.font-mscurvy {
  font-family: 'MSCurvy', sans-serif;
}

.font-newpoetic {
  font-family: 'NewPoetic', sans-serif;
}

.font-ornamental {
  font-family: 'Ornamental', sans-serif;
}

.font-radio {
  font-family: 'Radio', sans-serif;
}

.font-rammus {
  font-family: 'Rammus', sans-serif;
}

.font-sensiblesenseless {
  font-family: 'SensibleSenseless', sans-serif;
}

.font-skeleton {
  font-family: 'Skeleton', sans-serif;
}

.font-substanta {
  font-family: 'Substanta', sans-serif;
}

.font-susle {
  font-family: 'Susle', sans-serif;
}

.font-thetimesapex {
  font-family: 'TheTimesApex', sans-serif;
}

.font-torturastroke {
  font-family: 'TorturaStroke', sans-serif;
}

.font-vaksal {
  font-family: 'Vaksal', sans-serif;
}

.font-villowplex {
  font-family: 'Villowplex', sans-serif;
}

.font-doublebubble {
  font-family: 'DoubleBubble', sans-serif;
}

/* ========================================
   MOBILE
   ======================================== */
@media (max-width: 768px) {
  .font-preview {
    display: none !important;
  }

  main {
    flex-direction: column;
    padding: 1.5rem;
  }

  body {
    overflow-x: clip;
  }

  .alphabet-frame {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 78px;
  }

  .alphabet-cell {
    font-size: 2.45rem;
  }

  .type-tester-title,
  #font-author-info {
    font-size: 1.2rem;
  }

  .type-tester-title {
    margin-bottom: 1.1rem;
  }

  #big-text {
    font-size: 4rem;
  }

  #normal-text {
    font-size: 2.5rem;
  }

  #small-text {
    font-size: 2rem;
  }

  #tiny-text {
    font-size: 1.5rem;
  }

  #micro-text {
    font-size: 1rem;
  }
}

/* ========================================
   MOBILE GLYPH OVERLAY
   ======================================== */
.mobile-glyph-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  color: #ffffff;
}

.mobile-glyph-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

#mobile-glyph-display {
  font-size: 60vw;
  line-height: 1;
}