/* Landing page: nav, hero, rules marquee, journey, acts, sample, book, closer, footer. */

/* ── Nav ─────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--stone-1) 70%, transparent);
}
.site-nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; font: 500 1.01rem var(--font-label); letter-spacing: -0.01em; text-decoration: none; margin-right: auto; }
.brand__mark { width: 20px; height: 20px; background: var(--crimson); box-shadow: inset 0 -7px 0 var(--paper-3); }
.site-nav__links { display: flex; gap: 24px; }
.site-nav__links a { font: 500 0.85rem var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); transition: color 0.2s; }
.site-nav__links a:hover { color: var(--ink); }
@media (max-width: 720px) { .site-nav__links { display: none; } .brand span:last-child { font-size: 0.8rem; } }

/* ── Hero ────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero__grid {
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding-block: clamp(48px, 8vh, 96px);
}
/* The text becomes mobile LCP; keep it visible from the first paint too. */
.hero__title { font-size: clamp(3.4rem, 8.4vw, 7.4rem); line-height: 0.9; }
.hero__heel { color: var(--crimson); position: relative; white-space: nowrap; }
.hero__heel::after {
  content: ''; position: absolute; left: 0; right: 0.25em; bottom: 0.02em; height: 0.07em;
  background: var(--ink);
}
.hero__lede { margin-top: 36px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--ink-2); max-width: 36ch; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; font: 400 0.92rem var(--font-label); color: var(--ink-3); letter-spacing: 0.02em; }
.hero__meta strong { color: var(--ink); font-weight: 600; font-size: 1.05rem; margin-right: 6px; }
.hero__meta li { display: flex; align-items: baseline; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 36px; }
.hero__resume { margin-top: 20px; font: 400 0.94rem var(--font-label); color: var(--ink-3); }
.hero__resume a { color: var(--crimson); }

.hero__book { position: relative; display: grid; place-items: center; perspective: 1600px; }
.book3d {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 2 / 3;
  transform: rotateY(-14deg) rotateX(3deg);
  transform-style: preserve-3d;
  animation: float 9s ease-in-out infinite;
}
.book3d picture { display: block; aspect-ratio: inherit; }
.book3d img {
  width: 100%;
  aspect-ratio: inherit;
  box-shadow: 1px 0 0 var(--stone-1), 24px 32px 50px -18px rgba(43, 52, 65, 0.42), 60px 70px 90px -40px rgba(43, 52, 65, 0.3);
  border-radius: 2px 6px 6px 2px;
}
.book3d::before { /* spine highlight */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 18px; z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.35) 40%, rgba(0, 0, 0, 0.06));
  border-radius: 2px 0 0 2px;
}
.book3d::after { /* page edge */
  content: ''; position: absolute; top: 4px; bottom: 4px; right: -10px; width: 10px;
  background: repeating-linear-gradient(0deg, var(--marble) 0 2px, var(--paper-3) 2px 3px);
  transform: rotateY(60deg); transform-origin: left;
}
@keyframes float { 50% { transform: rotateY(-10deg) rotateX(2deg) translateY(-10px); } }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .hero__book { order: -1; }
  .book3d { width: min(62vw, 280px); animation-delay: 4s; }
}
@media (max-width: 720px) {
  .hero__book { order: 0; }
  .hero__grid { padding-top: 32px; gap: 48px; }
  .hero__lede { margin-top: 24px; }
  .hero__meta { margin-top: 24px; gap: 8px 20px; }
  .hero__ctas { margin-top: 24px; }
}

/* ── Rules marquee ───────────────────────────────────── */
.marquee { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; border-block: 1px solid var(--ink); }
.marquee__track { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee--paused .marquee__track { animation-play-state: paused; }
.marquee__toggle { position: absolute; z-index: 1; right: 8px; top: 50%; transform: translateY(-50%); min-width: 44px; min-height: 44px; padding: 0 12px; background: var(--ink); color: var(--paper); border: 1px solid var(--paper); font: 600 0.82rem var(--font-label); }
.marquee__run { display: flex; }
.marquee__item { display: flex; align-items: center; gap: 12px; padding: 16px 28px; font: 400 0.92rem var(--font-label); white-space: nowrap; letter-spacing: 0.01em; }
.marquee__item b { font-weight: 500; color: var(--crimson-3); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.68rem; }
.marquee__item::after { content: ''; width: 6px; height: 6px; background: var(--crimson); margin-left: 28px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation-play-state: paused; } }

/* ── Journey ─────────────────────────────────────────── */
.journey { padding-block: var(--section-y); }
.journey__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.journey__tower { padding-top: 12px; }
.chips { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin-top: 28px; }
@media (max-width: 640px) { .chips { display: flex; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } }
.chips button {
  flex: 1 0 auto; min-width: 44px;
  display: grid; gap: 2px; min-height: 44px; padding: 9px 10px; text-align: left;
  font: 600 0.9rem var(--font-label); border: 1px solid var(--stone-1); background: var(--marble);
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s var(--ease);
}
.chips button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: 0.66rem; color: var(--ink-3); letter-spacing: 0.02em; }
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed='true'] { background: var(--ink); color: var(--marble); border-color: var(--ink); }
.chips button[aria-pressed='true'] span { color: var(--stone-1); }

.plaque {
  position: relative;
  background: var(--marble);
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--stone-1);
  padding: clamp(24px, 3vw, 36px);
  min-height: 360px;
}
.plaque > * { animation: rise 0.5s var(--ease) both; }
.plaque > :nth-child(2) { animation-delay: 0.04s; }
.plaque > :nth-child(3) { animation-delay: 0.08s; }
.plaque > :nth-child(4) { animation-delay: 0.12s; }
.plaque > :nth-child(5) { animation-delay: 0.16s; }
.jd__num { font: 600 0.83rem var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--crimson); }
.jd__name { font: 400 clamp(1.8rem, 2.8vw, 2.4rem)/1 var(--font-display); text-transform: uppercase; margin-top: 10px; }
.jd__headline { margin-top: 10px; font-style: italic; color: var(--ink-2); font-size: 1.15rem; }
.jd__floor { margin-top: 18px; color: var(--ink-3); font-size: 1rem; }
.jd__forces { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--stone-2); font-size: 1rem; }
.jd__forces span { display: block; font: 500 0.76rem var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
@media (max-width: 900px) { .journey__grid { grid-template-columns: minmax(0, 1fr); } .plaque { min-height: 0; } }

/* ── Acts ────────────────────────────────────────────── */
.acts { padding-block: var(--section-y); background: var(--paper-2); border-block: 1px solid var(--stone-1); }
.acts__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.acts__grid .section-head { position: sticky; top: calc(var(--nav-h) + 32px); margin-bottom: 0; }
.acts__grid .btn { margin-top: 32px; }
.acts__list { border-top: 1.5px solid var(--ink); }
.acts__list li { display: grid; grid-template-columns: 88px 1fr; gap: 20px; padding-block: 32px; border-bottom: 1px solid var(--stone-2); }
.acts__num { font: 400 3.8rem/0.9 var(--font-display); color: var(--crimson); }
.acts__list h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.acts__list p { margin-top: 10px; color: var(--ink-3); }
@media (max-width: 900px) { .acts__grid { grid-template-columns: minmax(0, 1fr); } .acts__grid .section-head { position: static; } .acts__list li { grid-template-columns: 60px 1fr; } .acts__num { font-size: 2.3rem; } }

/* ── Sample ──────────────────────────────────────────── */
.sample { padding-block: var(--section-y); }
.sample__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sample__art { max-width: 520px; width: 100%; justify-self: center; }
.gets { margin-block: 28px 36px; display: grid; gap: 14px; }
.gets li { padding-left: 22px; position: relative; color: var(--ink-2); }
.gets li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--ink); }
.gets strong { font-weight: 500; color: var(--ink); }
.sample__label { margin-top: 18px; font: 400 0.85rem var(--font-label); color: var(--ink-4); letter-spacing: 0.02em; }
@media (max-width: 900px) { .sample__grid { grid-template-columns: minmax(0, 1fr); } .sample__art { max-width: 400px; } }

/* ── Book ────────────────────────────────────────────── */
.book { background: var(--ink); color: var(--paper); padding-block: var(--section-y); position: relative; overflow: hidden; }
.book__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 7vw, 112px); align-items: center; }
.book__cover img { width: min(100%, 380px); margin-inline: auto; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); transform: rotate(-2deg); }
.book h2 { color: var(--marble); }
.book h2 em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; }
.book__text p { margin-top: 20px; color: var(--stone-1); font-size: 1.1rem; max-width: 60ch; }
.book__quote { margin-top: 36px; padding: 24px 0 0 24px; border-left: 3px solid var(--crimson); }
.book__quote p { margin: 0; font-size: 1.3rem; line-height: 1.5; font-style: italic; color: var(--marble); }
.book__quote cite { display: block; margin-top: 12px; font: 400 0.83rem var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; color: var(--stone-3); }
.book__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
@media (max-width: 900px) { .book__grid { grid-template-columns: minmax(0, 1fr); } .book__cover img { width: min(60vw, 260px); } }

/* ── Closer ──────────────────────────────────────────── */
.closer { padding-block: var(--section-y); }
.closer__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; border-top: 1.5px solid var(--ink); padding-top: 48px; }
.closer h2 { font-size: clamp(2rem, 4.6vw, 3.8rem); max-width: 18ch; }

/* ── Footer ──────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--stone-1); padding-block: 36px 48px; font: 400 0.87rem/1.7 var(--font-label); color: var(--ink-3); }
.site-foot__inner { display: grid; gap: 8px; }
.site-foot strong { color: var(--ink); font-weight: 500; }
.site-foot__fine { color: var(--ink-4); max-width: 80ch; }

.book__author { font-style: italic; }
.book__author a, .site-foot a { color: inherit; text-decoration-color: var(--crimson); text-underline-offset: 3px; }