/* The latin-ext file carries "ă" and other Romanian letters. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2192;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2192;
}

/* The latin-ext file carries "ă" and other Romanian letters. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0b0d10;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }

.family {
  position: absolute;
  top: 1.75rem;
  left: 50%;
  z-index: 1;
  translate: -50% 0;
  padding: .2rem 1rem;
  background: #ffd400;
  color: #0b0d10;
  font: 600 1.15rem/1.5 "Fraunces", Georgia, serif;
}

.panels { display: flex; min-height: 100vh; min-height: 100svh; }

.panel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem;
  min-width: 0;
  padding: clamp(2rem, 6vw, 5rem);
  text-decoration: none;
  transition: flex-grow .3s ease;
}
.panel:hover, .panel:focus-visible { flex-grow: 1.25; }
.panel:focus-visible { outline: 3px solid currentcolor; outline-offset: -8px; }

.panel h2 { font-size: clamp(2.4rem, 5.6vw, 4.75rem); line-height: 1.05; }
.panel p { font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.tag { font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.go { margin-top: 1.25rem; font-weight: 600; }

.daniel { background: #0b0d10; color: #eef0f3; }
.daniel h2 { font-weight: 700; letter-spacing: -.03em; }
.daniel p { color: #a3acb8; }
.daniel .tag, .daniel .go { color: #ffd400; }

.ionela { background: #f6f1e7; color: #1f2a27; }
.ionela h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -.02em; }
.ionela p { color: #55615c; }
.ionela .tag { color: #b8432a; }
.ionela .go { color: #1f5c4d; }

@media (max-width: 720px) {
  .panels { flex-direction: column; }
  .panel { padding-top: 5rem; }
  .panel:hover, .panel:focus-visible { flex-grow: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
}