@font-face { font-family: "Utendo"; src: url(../assets/fonts/Utendo-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Utendo"; src: url(../assets/fonts/Utendo-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --navy: #222B4A;
  --fg2: #4E556E;
  --line: rgba(34, 43, 74, .14);
  --panel: #F3F4F6;
  --gutter: clamp(20px, 5vw, 80px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #fff; }
body { font-family: "Utendo", system-ui, sans-serif; color: var(--navy); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

.top { position: relative; z-index: 2; display: flex; align-items: center; gap: 28px; padding: 26px var(--gutter); font-size: 15px; }
.world { font-weight: 700; letter-spacing: .02em; margin-right: auto; }
.mail { font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---------- first screen: words on the left, the three guides on a panel to the right ---------- */
.hero { position: relative; margin-top: -78px; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); }
.intro { padding: 150px 4vw 8vh var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.intro h1 { font-weight: 700; font-size: clamp(52px, 6.6vw, 116px); line-height: .9; letter-spacing: -.04em; }
.lede { margin-top: 30px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--fg2); max-width: 36ch; }
.reviewed { margin-top: 34px; padding-left: 14px; border-left: 2px solid var(--navy); font-size: 15px; line-height: 1.55; color: var(--fg2); max-width: 34ch; }
.reviewed b { color: var(--navy); }
.ask { margin-top: 14px; font-size: 15px; color: var(--fg2); }
.ask a { color: var(--navy); font-weight: 700; border-bottom: 1px solid currentColor; }

.shelf { background: var(--panel); padding: 150px var(--gutter) 8vh 4vw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); align-content: center; }
.book { display: block; }
.cover { position: relative; aspect-ratio: 3 / 4; max-height: 62vh; overflow: hidden; display: grid; place-items: center; padding: 14%;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 28px 50px -30px rgba(34, 43, 74, .5); transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s; }
.book:hover .cover, .book:focus-visible .cover { transform: translateY(-10px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 46px 70px -34px rgba(34, 43, 74, .6); }
.cover .vol { position: absolute; left: 9%; bottom: 6%; font-size: 12px; letter-spacing: .02em; }
.ahc .cover { background: #fff; color: var(--navy); }
.ahc-logo { width: 100%; height: auto; overflow: visible; }
.ahc-logo .sky { fill: none; stroke: #52A758; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.house .cover { background: var(--navy); color: #fff; }
.house .cover::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .45); }
.house-logo { width: 100%; height: auto; overflow: visible; }
.house .vol { font-family: "Marcellus", serif; }
.lumina .cover { background: radial-gradient(circle at 4px 4px, #161616 1.5px, transparent 2px) 0 0 / 8px 8px, #000; color: #fff; }
.lumina-logo { width: 100%; aspect-ratio: 913 / 179; }
.meta { padding: 16px 2px 0; display: grid; gap: 2px; }
.meta b { font-size: 17px; }
.meta span { font-size: 14px; color: var(--fg2); }

/* ---------- kits ---------- */
.kits { padding: 14vh var(--gutter) 6vh; }
.kits h2, .inside h2 { font-weight: 700; font-size: clamp(30px, 3vw, 48px); letter-spacing: -.02em; line-height: 1; }
.kits .sub { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--fg2); max-width: 60ch; }
.kit-rows { margin-top: 36px; border-top: 1px solid var(--line); }
.kit-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.kit-row .mark { height: 72px; display: grid; place-items: center; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.kit-row .mark img { max-width: 78%; max-height: 64%; }
.kit-row .name b { display: block; font-size: 19px; }
.kit-row .name span { display: block; margin-top: 2px; font-size: 15px; color: var(--fg2); }
.kit-row .open { font-weight: 700; font-size: 15px; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.kit-row .get { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--navy); color: #fff; font-weight: 700; font-size: 15px; border-radius: 4px; }
.kit-row .get small { font-weight: 400; opacity: .75; }
.kit-row .get:hover { background: #161C33; }

/* ---------- inside ---------- */
.inside { padding: 8vh var(--gutter) 14vh; }
.chapters { margin-top: 30px; list-style: none; counter-reset: c; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 3vw; }
.chapters li { counter-increment: c; padding: 16px 0 16px 46px; border-top: 1px solid var(--line); position: relative; font-size: 14px; line-height: 1.5; color: var(--fg2); }
.chapters li::before { content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.chapters b { display: block; font-size: 16px; color: var(--navy); }

.foot { padding: 26px var(--gutter) 36px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 30px; font-size: 14px; color: var(--fg2); border-top: 1px solid var(--line); }
.foot b, .foot a { color: var(--navy); font-weight: 700; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; margin-top: 0; min-height: 0; }
  .intro { padding: 40px var(--gutter) 40px; }
  .shelf { padding: 40px var(--gutter); }
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .top .mail { display: none; }
  .shelf { grid-template-columns: 1fr; gap: 36px; }
  .cover { aspect-ratio: 4 / 3; max-height: none; padding: 12%; }
  .kit-row { grid-template-columns: 96px minmax(0, 1fr); }
  .kit-row .open, .kit-row .get { grid-column: span 1; justify-self: start; }
  .chapters { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cover { transition: none; } }