:root {
  color-scheme: light;
  --bg: #f9f9f9;
  --ink: #1a1c1c;
  --muted: #444654;
  --line: #1a1c1c;
  --paper: #ffffff;
  --panel: #eeeeee;
  --panel-strong: #e2e2e2;
  --blue: #002eb8;
  --blue-dark: #001e81;
  --white: #ffffff;
  --gutter: 24px;
  --outer: clamp(16px, 5vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  cursor: crosshair;
  overflow-x: hidden;
}
a { color: inherit; }
::selection { background: var(--blue); color: var(--white); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ink); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding: 14px var(--outer);
  border-bottom: 2px solid var(--line);
  background: var(--bg);
}
.brand {
  font-weight: 950;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
}
.topbar nav { display: flex; gap: 10px; align-items: center; }
.topbar nav a {
  min-width: 96px;
  padding: 6px 10px;
  border: 2px solid transparent;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.1;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.topbar nav a:hover, .topbar nav a.active { background: var(--blue); color: var(--white); border-color: var(--blue); }
.home {
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: start center;
  padding: clamp(52px, 8vw, 104px) var(--outer) 72px;
}
.home-inner { width: min(1180px, 100%); }
.home h1 {
  margin: 0 0 20px;
  font-size: clamp(54px, 11vw, 132px);
  line-height: .95;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}
.home p {
  margin: 0 0 40px;
  max-width: 760px;
  color: var(--ink);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 650;
}
.home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 2px solid var(--line);
  padding-top: var(--gutter);
  width: 100%;
}
.big-button {
  width: 100%;
  min-width: 0;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border: 2px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  position: relative;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.big-button::after {
  content: "";
  position: absolute;
  inset: 4px -6px -6px 4px;
  background: var(--ink);
  z-index: -1;
  opacity: 0;
}
.big-button:hover { transform: translate(4px, 4px); background: var(--blue); color: var(--white); }
.big-button:hover::after { opacity: 1; }
.big-button strong {
  font-size: clamp(42px, 7vw, 82px);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: .95;
}
.big-button span {
  max-width: 460px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.55;
}
.page { width: min(1180px, 100%); margin: 0 auto; padding: 56px var(--outer) 88px; }
.book-hero, .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: var(--gutter);
  align-items: end;
  margin-bottom: 40px;
  padding-bottom: 38px;
  border-bottom: 2px solid var(--line);
}
.section-head { grid-template-columns: 1fr; align-items: start; }
.book-hero h1, .section-head h1 {
  margin: 0;
  font-size: clamp(54px, 10vw, 118px);
  line-height: .92;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.section-head p {
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  font-size: 12px;
}
.eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 -14px;
  color: var(--blue);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .12em;
}
.search { justify-self: stretch; }
.search input {
  width: 100%;
  height: 56px;
  border: 0;
  border-bottom: 2px solid var(--line);
  background: transparent;
  padding: 0 0 6px;
  font-size: 18px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
  outline: none;
  border-radius: 0;
}
.search input:focus { border-color: var(--blue); color: var(--blue); }
.section-grid, .grid, .search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--gutter);
}
.section-card, .item-card {
  display: flex;
  min-height: 168px;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 2px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  position: relative;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.section-card::after, .item-card::after {
  content: "";
  position: absolute;
  inset: 4px -6px -6px 4px;
  background: var(--ink);
  z-index: -1;
  opacity: 0;
}
.section-card:hover, .item-card:hover { transform: translate(4px, 4px); background: var(--blue); color: var(--white); }
.section-card:hover::after, .item-card:hover::after { opacity: 1; }
.section-card span {
  color: var(--blue);
  font-weight: 950;
  font-size: 64px;
  line-height: .9;
  letter-spacing: -.02em;
}
.section-card:hover span { color: var(--white); }
.section-card strong, .item-card strong {
  line-height: 1.12;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(18px, 2vw, 24px);
}
.item-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 650;
}
.item-card:hover span { color: var(--white); }
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 34px;
  color: var(--ink);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
}
.breadcrumbs a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--line); }
.breadcrumbs a:hover { color: var(--blue); border-color: var(--blue); }
.article {
  width: min(980px, 100%);
  margin: 0 auto;
  background: transparent;
  border-top: 2px solid var(--line);
  padding: 42px 0 0;
}
.article h1 {
  margin: 0 0 34px;
  font-size: clamp(42px, 8vw, 86px);
  line-height: .96;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.article h2 {
  margin: 48px 0 18px;
  padding-top: 28px;
  border-top: 2px solid var(--line);
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.05;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.article h2::before { content: ""; display: inline-block; width: 6px; height: .9em; margin-right: 10px; background: var(--blue); vertical-align: -.1em; }
.article h3 {
  margin: 30px 0 12px;
  font-size: 20px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.article p, .article li {
  max-width: 860px;
  color: var(--ink);
  line-height: 1.75;
  letter-spacing: .035em;
  font-weight: 560;
  font-size: 15px;
}
.article ul { padding-left: 22px; }
.article a { color: var(--blue); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.article-image {
  margin: 28px 0 36px;
  border: 2px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.article-image a { display: block; }
.article-image img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  background: var(--paper);
}
.article-image:hover img { filter: grayscale(0) contrast(1); }
.meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.meta-row span {
  padding: 8px 12px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--gutter);
  align-items: center;
  padding: 36px var(--outer);
  background: var(--ink);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 850;
}
.site-footer strong { font-size: 22px; letter-spacing: -.02em; }
@media (max-width: 860px) {
  .topbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .topbar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .topbar nav a { min-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .home-actions { grid-template-columns: 1fr; }
  .book-hero, .section-head { grid-template-columns: 1fr; }
  .search { justify-self: auto; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .topbar nav { grid-template-columns: 1fr; }
  .home { padding-top: 38px; }
  .page { padding-top: 38px; }
  .home h1 {
    font-size: clamp(40px, 16vw, 54px);
    letter-spacing: 0;
    line-height: .92;
  }
  .home p {
    letter-spacing: .035em;
  }
  .book-hero h1, .section-head h1, .article h1 { letter-spacing: .015em; }
  .big-button {
    min-height: 190px;
    padding: 22px;
  }
  .big-button strong {
    font-size: clamp(34px, 13vw, 48px);
    letter-spacing: 0;
  }
  .big-button span {
    letter-spacing: .035em;
  }
  .section-grid, .grid, .search-results { grid-template-columns: 1fr; }
}