/* Deinela Media landing page
   Font: TeX Gyre Adventor (GUST Font License, self-hosted, same family
   used on the Drillbook series covers). */

@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("../assets/fonts/texgyreadventor-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("../assets/fonts/texgyreadventor-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("../assets/fonts/texgyreadventor-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("../assets/fonts/texgyreadventor-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #0b2545;
  --steel: #1b5e9e;
  --cyan: #4fa6d9;
  --icy: #bfe6f5;
  --paper: #f7f9fc;
  --ink: #14213a;
  --line: #dbe4ef;
  --max-width: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "TeX Gyre Adventor", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  text-wrap: balance;
}

a {
  color: var(--steel);
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* ---------- Header ---------- */

header.site-header {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

header.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.brand span {
  color: var(--steel);
}

/* ---------- Compact intro strip ---------- */

.intro {
  position: relative;
  padding: 1.3rem 0;
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(11, 37, 69, 0.94), rgba(11, 37, 69, 0.9)),
    repeating-linear-gradient(
      0deg,
      rgba(191, 230, 245, 0.08) 0px,
      rgba(191, 230, 245, 0.08) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(191, 230, 245, 0.08) 0px,
      rgba(191, 230, 245, 0.08) 1px,
      transparent 1px,
      transparent 28px
    );
  color: #fff;
  text-align: center;
}

.intro h1 {
  color: #fff;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0 0 0.25rem;
}

.intro p {
  font-size: 0.95rem;
  color: var(--icy);
  margin: 0;
}

/* ---------- Main fold ---------- */

main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 1.6rem 0;
}

.fold {
  display: block;
}

.fold-head {
  margin: 0 0 0.9rem;
}

.fold-head h2 {
  font-size: 1.15rem;
  margin: 0 0 0.15rem;
}

.fold-head p {
  color: #3c4a63;
  margin: 0;
  font-size: 0.88rem;
}

/* ---------- Book grid ---------- */

.book-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem 1rem;
}

.book-card {
  text-align: center;
}

.book-card .cover-frame {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(11, 37, 69, 0.16);
  margin-bottom: 0.4rem;
  background: #fff;
  aspect-ratio: 3 / 4;
}

.book-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-card h3 {
  font-size: 0.72rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  line-height: 1.2;
}

.book-card .buy-link {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
  padding-bottom: 1px;
}

.book-card .buy-link:hover {
  border-color: var(--steel);
}

/* ---------- Footer ---------- */

footer.site-footer {
  padding: 1.5rem 0;
  text-align: center;
  color: #64738c;
  font-size: 0.82rem;
  border-top: 1px solid var(--line);
}

footer.site-footer a {
  color: #64738c;
}

.social-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

/* All three badges share one fixed OUTER diameter, set here in one place
   so they're guaranteed pixel-identical regardless of what the inner
   asset looks like. Bluesky and Instagram ship as bare glyphs on a
   transparent background (no badge shape of their own), so .badge-circle
   also gives them a white circle to sit inside, with the glyph itself
   smaller than the circle (padding on all sides). Facebook's asset came
   pre-composed as its own complete circular badge (blue circle baked in
   already) -- .badge-precomposed sizes the whole image to fill the exact
   same outer diameter directly, no extra circle behind it, since adding
   one would just double the border. Sizing this way (one shared width/
   height driving both classes) is what a first pass got wrong: it hard-
   coded Facebook's <img> at a separately-guessed pixel value instead of
   deriving it from the same number, so it came out visibly larger. */
.badge-circle,
.badge-precomposed {
  width: 2.25rem;
  height: 2.25rem;
}

.badge-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 37, 69, 0.25);
}

.badge-precomposed {
  display: block;
  border-radius: 50%;
}

/* ---------- Responsive ---------- */

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