/* Two Owls · twoowls.se. Brand: cream and sand, warm browns, autumn leaves. Never green. */
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --cream: #FFF5E4; --cream2: #FBE9CC; --sand: #F3DDB6; --hill: #E6C595;
  --ink: #4E3322; --soft: #8A6447; --bark: #7A5A3E;
  --amber: #E9A23B; --terra: #D98E73; --honey: #F2C063;
  --card: #FFFDF8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 1.0625rem/1.6 Inter, system-ui, sans-serif;
}
a { color: var(--bark); text-decoration-color: var(--honey); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--amber); }
h1, h2 { font-family: Fraunces, Georgia, serif; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(2.4rem, 7vw, 4rem); }
h2 { font-size: 1.4rem; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1040px; margin: 0 auto; padding: 14px 16px;
}
.brand { display: flex; align-items: center; gap: 8px; font: 700 1.3rem Fraunces, Georgia, serif; color: var(--ink); text-decoration: none; }
.brand img { border-radius: 50%; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { padding: 6px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--soft); }
nav a:hover { background: var(--cream2); color: var(--ink); }
nav a[aria-current] { background: var(--sand); color: var(--ink); }

main { max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; }
.hero { text-align: center; padding: 24px 0 8px; }
.hero .owls { width: min(520px, 100%); height: auto; display: block; margin: 0 auto 12px; }
.tag { font-weight: 600; color: var(--soft); font-size: 1.2rem; margin: 0 0 1em; }
.lead { font-size: 1.15rem; max-width: 640px; margin: 0 auto 1em; }
.intro { max-width: 720px; margin: 24px auto; }
.intro .lead { margin-left: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 32px; }
.card {
  display: block; padding: 22px; border-radius: 20px; background: var(--card); text-decoration: none; color: var(--ink);
  border: 2px solid var(--sand); transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-2px); border-color: var(--honey); color: var(--ink); }
.card p { margin: 0; color: var(--soft); }

.button {
  display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--amber); color: #3B2618;
  font-weight: 700; text-decoration: none; margin: 4px 8px 4px 0;
}
.button:hover { background: var(--honey); color: var(--ink); }
.button.soon { background: var(--sand); color: var(--soft); }

.strip { display: flex; gap: 18px; overflow: hidden; justify-content: center; flex-wrap: wrap; padding: 8px 0; }
.strip img { height: 70px; width: 110px; object-fit: contain; }

.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.book { padding: 22px; border-radius: 20px; background: var(--card); border: 2px solid var(--sand); }
.book .ages { display: inline-block; margin: 0 0 .6em; padding: 2px 10px; border-radius: 999px; background: var(--cream2); color: var(--soft); font-weight: 600; font-size: .9rem; }

.animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; }
.animal { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 18px; background: var(--card); border: 2px solid var(--sand); }
.animal img { width: 110px; height: 82px; object-fit: contain; }
.animal h2 { font-size: 1.25rem; margin-bottom: .3em; }
.num { display: inline-block; min-width: 1.7em; padding: 0 .4em; margin-right: .2em; border-radius: 999px; background: var(--cream2); color: var(--soft); font: 600 .85rem/1.7 Inter, sans-serif; text-align: center; vertical-align: middle; }
.animal dl { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 0 0 .5em; }
.animal dt { color: var(--soft); font-weight: 600; }
.animal dd { margin: 0; }
.animal .ans { font-weight: 700; }
.animal .note { margin: 0 0 .4em; font-size: .95rem; }
.animal .src { margin: 0; font-size: .9rem; color: var(--soft); }

footer { border-top: 2px solid var(--sand); text-align: center; color: var(--soft); font-size: .9rem; padding: 18px 16px 28px; }
footer p { margin: .2em 0; }

@media (max-width: 520px) {
  .animal { grid-template-columns: 76px 1fr; }
  .animal img { width: 76px; height: 60px; }
  .strip img { height: 52px; width: 80px; }
}