/* ============================================
   SUVA TYPE FOUNDRY — index.css
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

/* FONTS */

@font-face { font-family: "Worksanstase"; src: url("fonts/worksanstase-nr_3.woff") format("woff"); }
@font-face { font-family: "Font2008"; src: url("fonts/2008.otf") format("opentype"); }
@font-face { font-family: "Akijo"; src: url("fonts/Akijo_Regular_AAsztalos.otf") format("opentype"); }
@font-face { font-family: "Apollo"; src: url("fonts/Apollo-Regular.otf") format("opentype"); }
@font-face { font-family: "BarbaraSoniaRuus"; src: url("fonts/barbara_Sonia Ruus.otf") format("opentype"); }
@font-face { font-family: "BomberFraktur"; src: url("fonts/Bomber-Fraktur_Mathias-V22rsi.ttf") format("truetype"); }
@font-face { font-family: "BRNO2016"; src: url("fonts/BRNO2016_Vello-Lutter&Mathias-V22rsi.ttf") format("truetype"); }
@font-face { font-family: "Broadnibber"; src: url("fonts/broadnibber.otf") format("opentype"); }
@font-face { font-family: "Chaos"; src: url("fonts/Chaos-Regular.otf") format("opentype"); }
@font-face { font-family: "Crystal"; src: url("fonts/Crystal-regular_IMoltsanov.otf") format("opentype"); }
@font-face { font-family: "DahliaBold"; src: url("fonts/Dahlia-bold.woff") format("woff"); }
@font-face { font-family: "DahliaThin"; src: url("fonts/Dahlia-thin.woff") format("woff"); }
@font-face { font-family: "Dap"; src: url("fonts/dap.otf") format("opentype"); }
@font-face { font-family: "Dematerialized"; src: url("fonts/dematerialized.otf") format("opentype"); }
@font-face { font-family: "DewySVG"; src: url("fonts/DEWY-SVG_Martin Kipper.otf") format("opentype"); }
@font-face { font-family: "DoubleBubbleGX"; src: url("fonts/DoubleBubbleGX_AVeiderpass.ttf") format("truetype"); }
@font-face { font-family: "EscapistDiaries"; src: url("fonts/Escapist_Diaries.otf") format("opentype"); }
@font-face { font-family: "Fairytype"; src: url("fonts/fairytype.otf") format("opentype"); }
@font-face { font-family: "Faktory"; src: url("fonts/faktory.otf") format("opentype"); }
@font-face { font-family: "Fallengum"; src: url("fonts/fallengum.otf") format("opentype"); }
@font-face { font-family: "Fiato"; src: url("fonts/Fiato.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: "FontAnne"; src: url("fonts/font_anne.woff") format("woff"); }
@font-face { font-family: "Fontenstein"; src: url("fonts/fontenstein-regular.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: "Gog"; src: url("fonts/gog-regular.otf") format("opentype"); }
@font-face { font-family: "Heavy"; src: url("fonts/heavy.otf") format("opentype"); }
@font-face { font-family: "Helipleumon"; src: url("fonts/helipleumon.woff") format("woff"); }
@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: "IDreamOfLetters"; src: url("fonts/idreamofletters.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: "JSans"; src: url("fonts/J-Sansv1.6-Regular.otf") format("opentype"); }
@font-face { font-family: "KalevGrotesk"; src: url("fonts/KalevGrotesk-Regular.woff") format("woff"); }
@font-face { font-family: "KetchupAddict"; src: url("fonts/KetchupAddict-Regular_BSiim.otf") format("opentype"); }
@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: "Kollektiiv"; src: url("fonts/Kollektiiv-Collective.ttf") format("truetype"); }
@font-face { font-family: "Kykeon"; src: url("fonts/kykeon.otf") format("opentype"); }
@font-face { font-family: "Lambiseim"; src: url("fonts/Lambiseim-Regular.otf") format("opentype"); }
@font-face { font-family: "Lazyglamour"; src: url("fonts/lazyglamour.otf") format("opentype"); }
@font-face { font-family: "Leimzy"; src: url("fonts/Leimzy-Regular.woff") format("woff"); }
@font-face { font-family: "Leone"; src: url("fonts/LEONE-Regular_LMartens.otf") format("opentype"); }
@font-face { font-family: "Lopsakas"; src: url("fonts/lopsakas-regular.otf") format("opentype"); }
@font-face { font-family: "Lumberjack"; src: url("fonts/lumberjack.otf") format("opentype"); }
@font-face { font-family: "MadisIgor"; src: url("fonts/Madis-Igor.otf") format("opentype"); }
@font-face { font-family: "Maurizio"; src: url("fonts/maurizio.otf") format("opentype"); }
@font-face { font-family: "Molot"; src: url("fonts/molot.ttf") format("truetype"); }
@font-face { font-family: "Mscurvy"; src: url("fonts/mscurvy.otf") format("opentype"); }
@font-face { font-family: "Naps"; src: url("fonts/naps.otf") format("opentype"); }
@font-face { font-family: "Napulo"; src: url("fonts/Napulo-Regular.otf") format("opentype"); }
@font-face { font-family: "Newpoetic"; src: url("fonts/newpoetic.otf") format("opentype"); }
@font-face { font-family: "Nocturnal"; src: url("fonts/Nocturnal.otf") format("opentype"); }
@font-face { font-family: "Ofortuna"; src: url("fonts/ofortuna.ttf") format("truetype"); }
@font-face { font-family: "Ornamental"; src: url("fonts/ornamental.otf") format("opentype"); }
@font-face { font-family: "Owlcave"; src: url("fonts/owlcave.ttf") format("truetype"); }
@font-face { font-family: "Pakkonen"; src: url("fonts/Pakkonen_Mathias-V22rsi.ttf") format("truetype"); }
@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: "ReinGrotesk"; src: url("fonts/ReinGrotesk-Regular.woff") format("woff"); }
@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: "Sens"; src: url("fonts/sens.woff") format("woff"); }
@font-face { font-family: "Sensiblesenseless"; src: url("fonts/sensiblesenseless.otf") format("opentype"); }
@font-face { font-family: "Shattered"; src: url("fonts/shattered.otf") format("opentype"); }
@font-face { font-family: "Sigella"; src: url("fonts/sigella.otf") format("opentype"); }
@font-face { font-family: "Sirkel"; src: url("fonts/sirkel-regular.otf") format("opentype"); }
@font-face { font-family: "Skeleton"; src: url("fonts/skeleton.otf") format("opentype"); }
@font-face { font-family: "StereoSans"; src: url("fonts/StereoSans.ttf") format("truetype"); }
@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: "Tiltortion"; src: url("fonts/Tiltortion.otf") format("opentype"); }
@font-face { font-family: "Toiletpapertype"; src: url("fonts/toiletpapertype.otf") format("opentype"); }
@font-face { font-family: "Tortura"; src: url("fonts/torturastroke.otf") format("opentype"); }
@font-face { font-family: "Vaksal"; src: url("fonts/vaksal.otf") format("opentype"); }
@font-face { font-family: "Varenyky"; src: url("fonts/Varenyky-Regular.otf") format("opentype"); }
@font-face { font-family: "Villowplex"; src: url("fonts/villowplex.ttf") format("truetype"); }
@font-face { font-family: "Volask"; src: url("fonts/Volask.ttf") format("truetype"); }
@font-face { font-family: "Yoga"; src: url("fonts/Yoga-Regular.otf") format("opentype"); }
@font-face { font-family: "ZakHatless"; src: url("fonts/Zak_Hatless.otf") format("opentype"); }
@font-face { font-family: "ZakImposter"; src: url("fonts/Zak_Imposter.otf") format("opentype"); }
@font-face { font-family: "ZakRegular"; src: url("fonts/Zak_Regular.otf") format("opentype"); }

/* FONT CLASSES */

.font-2008          { font-family: "Font2008", sans-serif; }
.font-akijo         { font-family: "Akijo", sans-serif; }
.font-apollo        { font-family: "Apollo", sans-serif; }
.font-barbara       { font-family: "BarbaraSoniaRuus", sans-serif; }
.font-bomberfraktur { font-family: "BomberFraktur", sans-serif; }
.font-brno          { font-family: "BRNO2016", sans-serif; }
.font-broadnibber   { font-family: "Broadnibber", sans-serif; }
.font-chaos         { font-family: "Chaos", sans-serif; }
.font-crystal       { font-family: "Crystal", sans-serif; }
.font-dahlia-bold   { font-family: "DahliaBold", sans-serif; }
.font-dahlia-thin   { font-family: "DahliaThin", sans-serif; }
.font-dap           { font-family: "Dap", sans-serif; }
.font-dematerialized{ font-family: "Dematerialized", sans-serif; }
.font-dewy          { font-family: "DewySVG", sans-serif; }
.font-doublebubble  { font-family: "DoubleBubbleGX", sans-serif; }
.font-escapist      { font-family: "EscapistDiaries", sans-serif; }
.font-fairytype     { font-family: "Fairytype", sans-serif; }
.font-faktory       { font-family: "Faktory", sans-serif; }
.font-fallengum     { font-family: "Fallengum", sans-serif; }
.font-fiato         { font-family: "Fiato", sans-serif; }
.font-floraandfauna { font-family: "FloraAndFauna", sans-serif; }
.font-flowstate     { font-family: "Flowstate", sans-serif; }
.font-fontanne      { font-family: "FontAnne", sans-serif; }
.font-fontenstein   { font-family: "Fontenstein", sans-serif; }
.font-franz         { font-family: "Franz", sans-serif; }
.font-frisbee       { font-family: "Frisbee", sans-serif; }
.font-gary          { font-family: "Gary", sans-serif; }
.font-gog           { font-family: "Gog", sans-serif; }
.font-heavy         { font-family: "Heavy", sans-serif; }
.font-helipleumon   { font-family: "Helipleumon", sans-serif; }
.font-hellplague    { font-family: "Hellplague", sans-serif; }
.font-hypha         { font-family: "Hypha", sans-serif; }
.font-idreamofletters { font-family: "IDreamOfLetters", sans-serif; }
.font-igorrounded   { font-family: "IgorRounded", sans-serif; }
.font-imogen        { font-family: "Imogen", sans-serif; }
.font-jsans         { font-family: "JSans", sans-serif; }
.font-kalevgrotesk  { font-family: "KalevGrotesk", sans-serif; }
.font-ketchupaddict { font-family: "KetchupAddict", sans-serif; }
.font-kevad         { font-family: "Kevad", sans-serif; }
.font-kiwi          { font-family: "Kiwi", sans-serif; }
.font-kollektiiv    { font-family: "Kollektiiv", sans-serif; }
.font-kykeon        { font-family: "Kykeon", sans-serif; }
.font-lambiseim     { font-family: "Lambiseim", sans-serif; }
.font-lazyglamour   { font-family: "Lazyglamour", sans-serif; }
.font-leimzy        { font-family: "Leimzy", sans-serif; }
.font-leone         { font-family: "Leone", sans-serif; }
.font-lopsakas      { font-family: "Lopsakas", sans-serif; }
.font-lumberjack    { font-family: "Lumberjack", sans-serif; }
.font-madisigor     { font-family: "MadisIgor", sans-serif; }
.font-maurizio      { font-family: "Maurizio", sans-serif; }
.font-molot         { font-family: "Molot", sans-serif; }
.font-mscurvy       { font-family: "Mscurvy", sans-serif; }
.font-naps          { font-family: "Naps", sans-serif; }
.font-napulo        { font-family: "Napulo", sans-serif; }
.font-newpoetic     { font-family: "Newpoetic", sans-serif; }
.font-nocturnal     { font-family: "Nocturnal", sans-serif; }
.font-ofortuna      { font-family: "Ofortuna", sans-serif; }
.font-ornamental    { font-family: "Ornamental", sans-serif; }
.font-owlcave       { font-family: "Owlcave", sans-serif; }
.font-pakkonen      { font-family: "Pakkonen", sans-serif; }
.font-radio         { font-family: "Radio", sans-serif; }
.font-rammus        { font-family: "Rammus", sans-serif; }
.font-reingrotesk   { font-family: "ReinGrotesk", sans-serif; }
.font-safaritraveller { font-family: "SafariTraveller", sans-serif; }
.font-sato          { font-family: "Sato", sans-serif; }
.font-sens          { font-family: "Sens", sans-serif; }
.font-sensiblesenseless { font-family: "Sensiblesenseless", sans-serif; }
.font-shattered     { font-family: "Shattered", sans-serif; }
.font-sigella       { font-family: "Sigella", sans-serif; }
.font-sirkel        { font-family: "Sirkel", sans-serif; }
.font-skeleton      { font-family: "Skeleton", sans-serif; }
.font-stereosans    { font-family: "StereoSans", sans-serif; }
.font-substanta     { font-family: "Substanta", sans-serif; }
.font-susle         { font-family: "Susle", sans-serif; }
.font-thetimesapex  { font-family: "Thetimesapex", sans-serif; }
.font-tiltortion    { font-family: "Tiltortion", sans-serif; }
.font-toiletpapertype { font-family: "Toiletpapertype", sans-serif; }
.font-tortura       { font-family: "Tortura", sans-serif; }
.font-vaksal        { font-family: "Vaksal", sans-serif; }
.font-varenyky      { font-family: "Varenyky", sans-serif; }
.font-villowplex    { font-family: "Villowplex", sans-serif; }
.font-volask        { font-family: "Volask", sans-serif; }
.font-worksanstase  { font-family: "Worksanstase", sans-serif; }
.font-yoga          { font-family: "Yoga", sans-serif; }
.font-zakhatless    { font-family: "ZakHatless", sans-serif; }
.font-zakimposter   { font-family: "ZakImposter", sans-serif; }
.font-zakregular    { font-family: "ZakRegular", sans-serif; }

/* BODY */

body {
  font-family: "Worksanstase", sans-serif;
  background-color: rgb(255, 255, 255);
}

/* HEADER */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3.25rem;
  background: white;
  z-index: 100;
  font-family: "KalevGrotesk", sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}

.header-left {
  display: flex;
  gap: 1.5rem;
}

.header-nav-link {
  text-decoration: none;
  color: black;
  font-size: 1rem;
  font-family: "KalevGrotesk", sans-serif;
  transition: color 0.15s;
}

.header-nav-link:hover {
  color: #666;
}

.header-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "KalevGrotesk", sans-serif;
  font-size: 1.2rem;
  color: black;
  text-decoration: none;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-search {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  outline: none;
  font-family: "KalevGrotesk", sans-serif;
  font-size: 1rem;
  color: black;
  cursor: text;
  padding: 0 0 2px 0;
  width: 5rem;
  text-align: right;
  transition: width 0.2s ease, border-color 0.15s;
}

.header-search::placeholder {
  color: black;
  transition: color 0.15s;
}

.header-search:hover::placeholder {
  color: #666;
}

.header-search:focus {
  width: 10rem;
  border-bottom: 1px solid black;
  cursor: text;
}

.header-search:focus::placeholder {
  color: #999;
}

/* MAIN + GRID */

main {
  margin-top: 3.25rem;
  padding: 0;
  min-height: calc(100vh - 3.25rem);
  background: black;
}

.font-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: black;
  border: 1.5px solid black;
  border-top: none;
}

/* FONT CARD */

.font-card {
  position: relative;
  overflow: hidden;
  height: calc((100vh - 3.25rem) / 3.3);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  background-color: white;
}

.font-card.is-hovered {
  z-index: 1;
}

.font-card.is-hovered .preview-text {
  opacity: 0;
}

.preview-text {
  color: black;
  white-space: nowrap;
  line-height: 1;
  position: absolute;
  left: 19px;
}

.hover-overlay {
  display: none;
}

.card-overlay {
  display: none;
}

.hover-font-name {
  display: none;
}

.marquee-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.font-card.is-hovered .marquee-wrap {
  opacity: 1;
}

.marquee-track {
  position: absolute;
  left: 0;
  white-space: nowrap;
  color: black;
  line-height: 1;
  will-change: transform;
}

.mq-gap {
  display: inline-block;
  width: 38px;
}

/* INFO OVERLAY */

.info-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 200;
}

.info-overlay.active {
  display: block;
}

.info-overlay-info-btn {
  position: fixed;
  top: 0;
  left: 1.5rem;
  height: 3.25rem;
  background: none;
  border: none;
  font-family: 'KalevGrotesk', sans-serif;
  font-size: 1rem;
  color: black;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  z-index: 201;
  text-decoration: none;
}

.info-overlay-close {
  position: fixed;
  top: 1.1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: black;
  font-family: 'KalevGrotesk', sans-serif;
  padding: 0;
  line-height: 1;
  z-index: 201;
}

.info-overlay-content {
  position: absolute;
  top: calc(3.25rem + 1.6rem);
  left: 1.5rem;
  font-family: 'KalevGrotesk', sans-serif;
  font-size: 1rem;
  color: black;
  line-height: 1.6;
}

.info-overlay-content p {
  margin: 0;
}

.info-overlay-content .spacer {
  display: block;
  height: 1.6rem;
}

/* MEDIA QUERIES */

@media (max-width: 768px) {
  .font-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  main {
    padding: 0.25rem;
  }
  .font-grid {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}