/* aaroncphelps.com — The First Domino landing page.
   Sits on styles.css for the shell. The scroll-pinned scene is the kit saved
   in design/first-domino-scene/, carried here unchanged apart from the notes
   marked "book page". Tokens: charcoal #2C2C2C · sand #BCB4A4 · orange
   #E57647 · paper #DAD5CF · ink #171717. */

.book-page { background: #2C2C2C; }
#field, #request { scroll-margin-top: 0; }

/* ---------- hero ---------- */

.book-hero { position: relative; overflow: hidden; }
.book-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #4D4D4D 1px, transparent 1px);
  background-size: 11px 11px;
  mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}
.book-hero-inner {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  padding: 72px 64px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 420px);
  gap: 48px 96px;
  align-items: center;
}
.book-hero-copy { display: flex; flex-direction: column; gap: 36px; }
.book-kicker {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #BCB4A4;
}
.book-title {
  font-family: "proxima-sera", Georgia, serif;
  font-weight: 300;
  font-size: clamp(64px, 9vw, 132px);
  line-height: .94;
  letter-spacing: -.035em;
  color: #F2EDE3;
}
.book-lede {
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.55;
  color: #BCB4A4;
  max-width: 30ch;
  text-wrap: pretty;
}
.book-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 8px; }
.book-cta { align-self: flex-start; }
.book-help {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: #8F897F;
}
.book-cover { margin: 0; width: 100%; justify-self: end; }
.book-cover-art { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; }
.book-hero-foot {
  grid-column: 1 / -1;
  margin-top: 40px;
  border-top: 1px solid #4D4D4D;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: "Space Mono", monospace;
  font-size: 13px;
  letter-spacing: .06em;
  color: #BCB4A4;
}

/* ---------- domino scene (design/first-domino-scene/scene.css) ---------- */

#field {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: #2C2C2C;
  overflow: hidden;
}
.field-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 64px;
}

/* when the scene can't pin (short or crowded viewports) it flows in-page */
#field.scene-unpinned { min-height: auto; }
#field.scene-unpinned > div { position: relative; padding-block: 64px; }
@media (min-width: 901px) and (max-height: 640px) {
  #field { min-height: auto; }
  .field-grid { position: relative; padding-block: 64px; }
}

#stage { position: relative; height: 560px; width: 100%; min-width: 0; }
#rig {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 640px;
  height: 560px;
  perspective: 1400px;
  transform-style: preserve-3d;
  transform-origin: 0 100%;
}

.dom {
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 480px;
  transform-style: preserve-3d;
  will-change: transform;
}
#domA { left: 60px; }
#domB { left: 336px; }

.dom-inner {
  position: relative;
  width: 240px;
  height: 480px;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(3deg);
}

.face { position: absolute; }
.face-front { inset: 0; transform: translateZ(20px); }
.face-back  { inset: 0; transform: rotateY(180deg) translateZ(20px); }
.face-left  { top: 0; left: -20px; width: 40px; height: 480px; transform: rotateY(-90deg); }
.face-right { top: 0; right: -20px; width: 40px; height: 480px; transform: rotateY(90deg); }
.face-top    { left: 0; top: -20px; width: 240px; height: 40px; transform: rotateX(90deg); }
.face-bottom { left: 0; bottom: -20px; width: 240px; height: 40px; transform: rotateX(-90deg); }

#domA .face-front  { background: #E57647; }
#domA .face-back   { background: #B85A36; }
#domA .face-left   { background: #B85A36; }
#domA .face-right  { background: #CC6540; }
#domA .face-top    { background: #CC6540; }
#domA .face-bottom { background: #B85A36; }

#domB .face-front  { background: #2C2C2C; }
#domB .face-back   { background: #232323; }
#domB .face-left   { background: #232323; }
#domB .face-right  { background: #3B3B3B; }
#domB .face-top    { background: #3B3B3B; }
#domB .face-bottom { background: #232323; }

#domB .face-front svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pip { position: absolute; width: 28px; height: 28px; border-radius: 50%; }
#domA .pip { background: #2C2C2C; }
#domB .pip { background: #E57647; }

.mid { position: absolute; left: 24px; right: 24px; top: 238px; }
#domA .mid { height: 4px; background: #2C2C2C; }
#domB .mid { height: 2px; background: #E57647; }

#floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: #BCB4A4;
  transform-origin: left;
  transform: scaleX(1);
}

.field-copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 48px;
  position: relative;
  z-index: 2;
}
.field-kicker {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8F919C;
}
.scene-line {
  font-family: "proxima-sera", Georgia, serif;
  font-weight: 300;
  font-size: clamp(36px, 3.8vw, 60px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #FFFFFF;
  max-width: 20ch;
}
.scene-line-2 { margin-top: -8px; }
.scene-caption {
  font-family: "proxima-sera", Georgia, serif;
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.4;
  color: #BCB4A4;
  max-width: 40ch;
}

/* ---------- the question ---------- */

.book-question {
  max-width: 1360px;
  margin: 0 auto;
  padding: 120px 64px 140px;
}
.book-question-text {
  font-family: "proxima-sera", Georgia, serif;
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: #F2EDE3;
  max-width: 22ch;
}
.book-question-text .sand { color: #BCB4A4; }

/* ---------- inside the book ---------- */

.book-inside { background: #DAD5CF; color: #171717; }
.book-inside-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 104px 64px 120px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.book-inside .book-kicker { color: #55514D; }
.book-inside-head { display: flex; flex-direction: column; gap: 28px; }
.book-inside-head h2 {
  font-family: "proxima-sera", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -.03em;
  color: #171717;
}
.book-ideas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
}
.book-ideas li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #A8A198;
}
.book-idea-num {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: #A44826;
}
.book-ideas h3 {
  font-family: "proxima-sera", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #171717;
}
.book-ideas p {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: #44413D;
  max-width: 34ch;
}
.book-idea-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-height: 44px;
  margin-top: 4px;
  font-weight: 700;
  font-size: 15px;
  color: #171717;
  border-bottom: 1px solid #171717;
  padding-bottom: 4px;
}
.book-idea-link span { color: #A44826; transition: transform 220ms ease; }
.book-idea-link:hover { color: #A44826; border-bottom-color: #A44826; }
.book-idea-link:hover span { transform: translate(2px, -2px); }

/* ---------- request ---------- */

.book-request { border-top: 1px solid #4D4D4D; }
.book-request-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 96px 64px 128px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px 80px;
  align-items: start;
}
.book-request-inner .book-kicker { grid-column: 1 / -1; }
.book-request-title {
  font-family: "proxima-sera", Georgia, serif;
  font-weight: 300;
  font-size: clamp(48px, 5.6vw, 84px);
  line-height: 1;
  letter-spacing: -.03em;
  color: #F2EDE3;
}
.book-request-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 12px; }
.book-request-aside > p:first-child {
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: #BCB4A4;
  max-width: 34ch;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .book-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 40px 56px; }
  .book-ideas { gap: 32px; }
  .book-request-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .book-hero-inner { grid-template-columns: 1fr; padding: 56px 32px 64px; }
  .book-cover { max-width: 320px; justify-self: start; }
  .field-grid {
    position: relative;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 32px;
  }
  #stage { width: min(100%, 520px); justify-self: center; height: 300px; }
  #rig { transform: scale(.6); }
  .field-copy { padding-left: 0; gap: 22px; }
  .scene-line { font-size: clamp(30px, 4.2vw, 44px); max-width: 26ch; }
  .scene-caption { font-size: 20px; }
  .book-question { padding: 88px 32px 104px; }
  .book-inside-inner { padding: 80px 32px 96px; gap: 56px; }
  .book-ideas { grid-template-columns: 1fr; gap: 40px; }
  .book-request-inner { padding: 72px 32px 96px; }
}

@media (max-width: 600px) {
  .book-hero-inner { padding: 44px 24px 56px; gap: 32px; }
  .book-hero-copy { gap: 28px; }
  .book-title { font-size: clamp(56px, 16vw, 76px); }
  .book-lede { font-size: 18px; }
  .book-cover { max-width: 260px; }
  .book-hero-foot { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; }
  .field-grid { padding: 32px 24px; gap: 24px; }
  .field-copy { gap: 20px; }
  .scene-line { font-size: 32px; }
  .scene-caption { font-size: 18px; }
  .book-question { padding: 72px 24px 88px; }
  .book-question-text { font-size: 34px; }
  .book-inside-inner { padding: 64px 24px 80px; }
  .book-request-inner { padding: 64px 24px 88px; }
  .book-request-title { font-size: clamp(42px, 12vw, 56px); }
  .book-request-aside > p:first-child { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .book-idea-link span { transition: none; }
}

@media print {
  .field-grid { position: relative; }
  .w { opacity: 1 !important; transform: none !important; }
}