/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ── */
:root {
  --bg: #ffffff;
  --fg: #000000;
  --line: 1px solid #beb9b9;
  --ui-font: 'keynotesans';
}

/* ── Base ── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui-font);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

.cell-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.cell-link.block {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Font faces ── */
@font-face {font-family: "2008"; src: url(.../fonts/2008.woff) format("woff");}
@font-face {font-family: akijo; src: url(../fonts/akijo.woff) format('woff');}
@font-face {font-family: apollo-regular; src: url(../fonts/apollo-regular.woff) format('woff');}
@font-face {font-family: barbara; src: url(../fonts/barbara.woff) format('woff');}
@font-face {font-family: bomberfraktur; src: url(../fonts/bomberfraktur.woff) format('woff');}
@font-face {font-family: brno; src: url(../fonts/brno2016.woff) format('woff');}
@font-face {font-family: broadnibber; src: url(../fonts/broadnibber.woff) format('woff');}
@font-face {font-family: capsizun; src: url(../fonts/capsizun.woff) format('woff');}
@font-face {font-family: chaos; src: url(../fonts/chaos.woff) format('woff');}
@font-face {font-family: cofesans; src: url(../fonts/cofesans.woff) format('woff');}
@font-face {font-family: coffeetime; src: url(../fonts/coffeetime.woff) format('woff');}
@font-face {font-family: crystal; src: url(../fonts/crystal.woff) format('woff');}
@font-face {font-family: dahlia; src: url(../fonts/dahlia.woff) format('woff');}
@font-face {font-family: dap; src: url(../fonts/dap.woff) format('woff');}
@font-face {font-family: dematerialized; src: url(../fonts/dematerialized.woff) format('woff');}
@font-face {font-family: dewy; src: url(../fonts/dewy.woff) format('woff');}
@font-face {font-family: doublebubble; src: url(../fonts/doublebubble.woff) format('woff');}
@font-face {font-family: erki30; src: url(../fonts/erki30.woff) format('woff');}
@font-face {font-family: escapistdiaries; src: url(../fonts/escapistdiaries.woff) format('woff');}
@font-face {font-family: esimene; src: url(../fonts/esimene.woff) format('woff');}
@font-face {font-family: exquisitecorpsetypeface; src: url(../fonts/exquisitecorpsetypeface.woff) format('woff');}
@font-face {font-family: fairytype; src: url(../fonts/fairytype.woff) format('woff');}
@font-face {font-family: faktory; src: url(../fonts/faktory.woff) format('woff');}
@font-face {font-family: fallengum; src: url(../fonts/fallengum.woff) format('woff');}
@font-face {font-family: fiato; src: url(../fonts/fiato.woff) format('woff');}
@font-face {font-family: floraandfauna; src: url(../fonts/floraandfauna.woff) format('woff');}
@font-face {font-family: flowstate; src: url(../fonts/flowstate.woff) format('woff');}
@font-face {font-family: fontanne; src: url(../fonts/fontanne.woff) format('woff');}
@font-face {font-family: fontenstein-regular; src: url(../fonts/fontenstein-regular.woff) format('woff');}
@font-face {font-family: franz; src: url(../fonts/franz.woff) format('woff');}
@font-face {font-family: frisbee; src: url(../fonts/frisbee.woff) format('woff');}
@font-face {font-family: gary; src: url(../fonts/gary.woff) format('woff');}
@font-face {font-family: gog-regular; src: url(../fonts/gog-regular.woff) format('woff');}
@font-face {font-family: heavy; src: url(../fonts/heavy.woff) format('woff');}
@font-face {font-family: helipleumon; src: url(../fonts/helipleumon.woff) format('woff');}
@font-face {font-family: hellplague; src: url(../fonts/hellplague.woff) format('woff');}
@font-face {font-family: hypha; src: url(../fonts/hypha.woff) format('woff');}
@font-face {font-family: idreamofletters; src: url(../fonts/idreamofletters.woff) format('woff');}
@font-face {font-family: igorrounded; src: url(../fonts/igorrounded.woff) format('woff');}
@font-face {font-family: imogen; src: url(../fonts/imogen.woff) format('woff');}
@font-face {font-family: jaan; src: url(../fonts/jaan.woff) format('woff');}
@font-face {font-family: kalevgrotesk; src: url(../fonts/kalevgrotesk.woff) format('woff');}
@font-face {font-family: kalevgrotesk2; src: url(../fonts/kalevgrotesk2.woff) format('woff');}
@font-face {font-family: kalligrogro; src: url(../fonts/kalligrogro.woff) format('woff');}
@font-face {font-family: kalligrokalli; src: url(../fonts/kalligrokalli.woff) format('woff');}
@font-face {font-family: kandi3; src: url(../fonts/kandi3.woff) format('woff');}
@font-face {font-family: ketchupaddict; src: url(../fonts/ketchupaddict.woff) format('woff');}
@font-face {font-family: kevad; src: url(../fonts/kevad.woff) format('woff');}
@font-face {font-family: keynotesans; src: url(../fonts/keynotesans.woff) format('woff');}
@font-face {font-family: kiwi; src: url(../fonts/kiwi.woff) format('woff');}
@font-face {font-family: kollektiivcollective; src: url(../fonts/kollektiivcollective.woff) format('woff');}
@font-face {font-family: kulm; src: url(../fonts/kulm.woff) format('woff');}
@font-face {font-family: kykeon; src: url(../fonts/kykeon.woff) format('woff');}
@font-face {font-family: lambiseim; src: url(../fonts/lambiseim.woff) format('woff');}
@font-face {font-family: lazyglamour; src: url(../fonts/lazyglamour.woff) format('woff');}
@font-face {font-family: leimzy; src: url(../fonts/leimzy.woff) format('woff');}
@font-face {font-family: leone; src: url(../fonts/leone.woff) format('woff');}
@font-face {font-family: libreofficesans; src: url(../fonts/libreofficesans.woff) format('woff');}
@font-face {font-family: lopsakas-regular; src: url(../fonts/lopsakas-regular.woff) format('woff');}
@font-face {font-family: lumberjack; src: url(../fonts/lumberjack.woff) format('woff');}
@font-face {font-family: madis-igor; src: url(../fonts/madis-igor.woff) format('woff');}
@font-face {font-family: masurka; src: url(../fonts/masurka.woff) format('woff');}
@font-face {font-family: maurizio; src: url(../fonts/maurizio.woff) format('woff');}
@font-face {font-family: mehhanism; src: url(../fonts/mehhanism.woff) format('woff');}
@font-face {font-family: molot; src: url(../fonts/molot.woff) format('woff');}
@font-face {font-family: mozzarella; src: url(../fonts/mozzarella.woff) format('woff');}
@font-face {font-family: mscurvy; src: url(../fonts/mscurvy.woff) format('woff');}
@font-face {font-family: mymapssansalbersequalareaconic; src: url(../fonts/mymapssansalbersequalareaconic.woff) format('woff');}
@font-face {font-family: mymapssansazimuthalequidistant; src: url(../fonts/mymapssansazimuthalequidistant.woff) format('woff');}
@font-face {font-family: mymapssansbonne; src: url(../fonts/mymapssansbonne.woff) format('woff');}
@font-face {font-family: mymapssanscylindricalequalarea; src: url(../fonts/mymapssanscylindricalequalarea.woff) format('woff');}
@font-face {font-family: mymapssanslambertconformalconic; src: url(../fonts/mymapssanslambertconformalconic.woff) format('woff');}
@font-face {font-family: mymapssansmercator; src: url(../fonts/mymapssansmercator.woff) format('woff');}
@font-face {font-family: mymapssansorthographic; src: url(../fonts/mymapssansorthographic.woff) format('woff');}
@font-face {font-family: mymapssanspolyconic; src: url(../fonts/mymapssanspolyconic.woff) format('woff');}
@font-face {font-family: mymapssansrobinson; src: url(../fonts/mymapssansrobinson.woff) format('woff');}
@font-face {font-family: mymapssanssinusoidal; src: url(../fonts/mymapssanssinusoidal.woff) format('woff');}
@font-face {font-family: mymapssansstereographic; src: url(../fonts/mymapssansstereographic.woff) format('woff');}
@font-face {font-family: mymapssanstransversemercator; src: url(../fonts/mymapssanstransversemercator.woff) format('woff');}
@font-face {font-family: mymapssanswinkeltripel; src: url(../fonts/mymapssanswinkeltripel.woff) format('woff');}
@font-face {font-family: naps; src: url(../fonts/naps.woff) format('woff');}
@font-face {font-family: napulo; src: url(../fonts/napulo.woff) format('woff');}
@font-face {font-family: newpoetic; src: url(../fonts/newpoetic.woff) format('woff');}
@font-face {font-family: nocturnal; src: url(../fonts/nocturnal.woff) format('woff');}
@font-face {font-family: ofortuna; src: url(../fonts/ofortuna.woff) format('woff');}
@font-face {font-family: ornamental; src: url(../fonts/ornamental.woff) format('woff');}
@font-face {font-family: owlcave; src: url(../fonts/owlcave.woff) format('woff');}
@font-face {font-family: pakkonen; src: url(../fonts/pakkonen.woff) format('woff');}
@font-face {font-family: radio; src: url(../fonts/radio.woff) format('woff');}
@font-face {font-family: rammus; src: url(../fonts/rammus.woff) format('woff');}
@font-face {font-family: safaritraveller; src: url(../fonts/safaritraveller.woff) format('woff');}
@font-face {font-family: sato; src: url(../fonts/sato.woff) format('woff');}
@font-face {font-family: sens; src: url(../fonts/sens.woff) format('woff');}
@font-face {font-family: sensiblesenseless; src: url(../fonts/sensiblesenseless.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.woff) format('woff');}
@font-face {font-family: skeleton; src: url(../fonts/skeleton.woff) format('woff');}
@font-face {font-family: soy; src: url(../fonts/soy.woff) format('woff');}
@font-face {font-family: stereosans; src: url(../fonts/stereosans.woff) format('woff');}
@font-face {font-family: substanta; src: url(../fonts/substants.woff) format('woff');}
@font-face {font-family: susle; src: url(../fonts/susle.woff) format('woff');}
@font-face {font-family: teibifont; src: url(../fonts/teibifont.woff) format('woff');}
@font-face {font-family: thetimesapex; src: url(../fonts/thetimesapex.woff) format('woff');}
@font-face {font-family: tiltortion; src: url(../fonts/tiltortion.woff) format('woff');}
@font-face {font-family: tirnotmono; src: url(../fonts/tirnotmono.woff) format('woff');}
@font-face {font-family: tolietpapertype; src: url(../fonts/tolietpapertype.woff) format('woff');}
@font-face {font-family: tontfont; src: url(../fonts/tontfont.woff) format('woff');}
@font-face {font-family: tortura; src: url(../fonts/tortura.woff) format('woff');}
@font-face {font-family: vaksal; src: url(../fonts/vaksal.woff) format('woff');}
@font-face {font-family: varenyky; src: url(../fonts/varenyky.woff) format('woff');}
@font-face {font-family: velodromatic; src: url(../fonts/velodramatic.woff) format('woff');}
@font-face {font-family: volask; src: url(../fonts/volask.woff) format('woff');}
@font-face {font-family: vorsik; src: url(../fonts/vorsik.woff) format('woff');}
@font-face {font-family: worksanstase; src: url(../fonts/worksanstase.woff) format('woff');}
@font-face {font-family: yoga; src: url(../fonts/yoga.woff) format('woff');}
@font-face {font-family: zak; src: url(../fonts/zak.woff) format('woff');}

/* ── Topbar ── */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 55px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  z-index: 1000;
  background-color: var(--bg);
  border-bottom: var(--line);
}

#topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.logo-link {
  text-decoration: none;
  color: var(--fg);
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}

.logo {
  display: flex;
  gap: 1px;
  font-size: 20px;
  letter-spacing: 2px;
  font-family: var(--ui-font);
  color: var(--fg);
}

.logo-letter { color: var(--fg); }

.type-foundry {
  font-family: 'keynotesans';
  font-size: 12px;
  letter-spacing: 3px;
}

#topbar-right a {
  opacity: 1; /* was 0.5 but topbar-right items should always show */
}

#topbar-right a:hover { opacity: 1; }

/* ── Search ── */
#search {
  font-family: 'keynotesans';
  font-size: 16px;
  border: none;
  border-left: var(--line);
  padding: 0 16px;
  height: 49px;
  outline: none;
  background: none;
  width: 180px;
  color: var(--fg);
  opacity: 1;
}

.search-wrapper {
  position: relative;
}

#search-dropdown {
  position: absolute;
  top: 55px;
  right: 0;
  width: 280px;
  max-height: 400px;
  overflow-y: auto;

  background: var(--bg);
  border: var(--line);
  border-top: none;
  display: none;
  z-index: 3000;
}

#search-dropdown a {
  display: block;
  padding: 14px 16px;
  font-size: 28px;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
  border-bottom: var(--line);
}

#search-dropdown a:hover {
  background: #f3f3f3;
}

.search-wrapper {
  position: relative;
}

/* ── Main ── */
main {
  margin-top: 49px;
  padding-bottom: 49px;
}

/* ── Grid rows ── */
.row {
  border-bottom: var(--line);
  display: flex;
}

.row > .cell {
  flex: 1;
  border-right: var(--line);
  padding: 28px 32px;
  min-width: 0;
}

.row > .cell:last-child { border-right: none; }

.big-text-row,
.medium-text-row,
.small-text-row,
.big-letter-row {
  border-bottom: var(--line);
  display: grid;
}

.big-text-row.cols-2,
.medium-text-row.cols-2 { grid-template-columns: 1fr 1fr; }
.small-text-row.cols-2 { grid-template-columns: 1fr 1fr; }
.small-text-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.big-letter-row.cols-2 { grid-template-columns: 1fr 1fr; }
.big-letter-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.big-letter-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.big-text-cell,
.medium-text-cell,
.small-text-cell,
.big-letter-cell {
  border-right: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  overflow: hidden;
}

.big-text-cell:last-child,
.medium-text-cell:last-child,
.small-text-cell:last-child,
.big-letter-cell:last-child { border-right: none; }

/* ── Text sizes ── */
.big-text {
  font-size: clamp(20px, 9vw, 130px);
  line-height: 1;
  user-select: none;
  text-align: center;
}

.medium-text {
  font-size: clamp(15px, 5vw, 80px);
  line-height: 1;
  user-select: none;
  text-align: center;
  padding: 20px;
}

.small-text {
  font-size: clamp(14px, 2vw, 40px);
  line-height: 1.4;
  user-select: none;
  text-align: center;
  padding: 20px;
}

.para-text {
  font-size: clamp(13px, 1.2vw, 20px);
  line-height: 1.55;
}

.big-letter {
  font-size: clamp(120px, 18vw, 240px);
  user-select: none;
}

/* ── Footer (not sticky on homepage) ── */
.info-footer {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr auto;
  gap: 40px;

  border-top: var(--line);
  border-bottom: var(--line);

  padding: 18px 32px;
  align-items: center;
}

.footer-cell,
.footer-contact {
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-value,
.footer-cell p {
  max-width: 520px;
  line-height: 1.35;
}

.footer-label {
  margin-bottom: 8px;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-contact {
  align-items: flex-start;
  white-space: nowrap;
}