/* ============================================
   Layout — michaeldariuseastwood.com
   Eden Design DNA · Warm-paper depth · Mobile parity
   ============================================ */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-2xl);
  width: 100%;
}

@media (max-width: 720px) {
  .container { padding: 0 var(--space-xl); }
}

section {
  padding: var(--space-5xl) 0;
  position: relative;
}

/* ---- Void Hero — full-bleed cinematic portrait ---- */
.hero-void {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background: #080808;
}

.hero-void__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 20%;
  z-index: 1;
}

.hero-void__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* held dark across the copy column, then released so the face is not veiled */
    linear-gradient(to right, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.78) 30%, rgba(0,0,0,0.42) 46%, rgba(0,0,0,0.10) 62%, transparent 75%),
    linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 40%);
}

/* -- Ambient gold glow in void hero -- */
.hero-void::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 80%;
  z-index: 2;
  background: radial-gradient(ellipse at center, hsla(38, 80%, 55%, 0.07), transparent 70%);
  pointer-events: none;
}

/* The portrait sits at object-position 60%, so its lit edge arrives around 37%
   of the viewport. A fixed 640px column crossed that on a 1440 screen and the
   lede ran onto the face. A proportional cap tracks the portrait at every
   width rather than only looking right at one. */
.hero-void__content {
  position: relative;
  z-index: 3;
  max-width: min(620px, 34vw);
  padding: var(--space-4xl) var(--space-3xl);
}

.hero-void__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsla(38, 75%, 55%, 0.6);
  margin-bottom: var(--space-xl);
}

.hero-void__statement {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  color: #fafaf8;
  margin-bottom: var(--space-2xl);
  letter-spacing: -0.02em;
}

.hero-void__lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: hsla(40, 25%, 92%, 0.65);
  line-height: 1.75;
  margin-bottom: var(--space-2xl);
  max-width: 500px;
}

.hero-void__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.hero-void__ctas .btn-primary {
  background: var(--gold-btn);
  color: #fff;
  border-color: var(--gold-btn);
  box-shadow: var(--shadow-gold);
}
.hero-void__ctas .btn-primary:hover {
  background: var(--gold-btn-hover);
  border-color: var(--gold-btn-hover);
  box-shadow: 0 12px 40px hsla(38, 65%, 42%, 0.28);
}

.hero-void__ctas .btn-secondary {
  color: hsla(40, 25%, 92%, 0.75);
  border-color: hsla(40, 25%, 92%, 0.2);
}
.hero-void__ctas .btn-secondary:hover {
  border-color: hsla(38, 55%, 50%, 0.4);
  color: #fafaf8;
  background: hsla(40, 25%, 92%, 0.05);
}

.hero-void__scroll {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: hsla(40, 25%, 92%, 0.3);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: void-scroll-pulse 2.5s ease-in-out infinite;
}

@keyframes void-scroll-pulse {
  0%, 100% { opacity: 0.25; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.55; transform: translateX(-50%) translateY(5px); }
}

@media (max-width: 720px) {
  /* Phone: stack, do not overlay.
     The desktop hero works because the portrait is pushed right (60% 20%) and a
     left-to-right scrim keeps the words on the dark side, clear of the face. A
     phone has no left side. The words were anchored to the bottom of a full
     viewport-height section over a centred portrait, so a tall block of eyebrow,
     statement, lede and two buttons rose straight into the face.
     Type over a face is the thing that reads as unfinished, and no amount of
     scrim fixes it. The phone layout therefore stacks: portrait on top with its
     focal point held high, words underneath on the hero's own near-black.
     Desktop is untouched. */
  /* section.hero-void, not .hero-void: two other rules set this background and a
     later one was winning with a near-white, which turned the near-white h1
     invisible the moment the words stopped sitting on the portrait. The extra
     element in the selector wins on specificity regardless of source order.
     The 128px vertical padding never showed on desktop because the hero is
     flex-centred at full viewport height; as a block it became a gap above the
     portrait. */
  section.hero-void {
    min-height: auto;
    display: block;
    padding: 0;
    background: #0a0a0a;
  }
  .hero-void__bg {
    position: relative;
    height: 46svh;
    min-height: 260px;
    object-position: 50% 18%;
  }
  /* The scrim covers the portrait only. Left at inset:0 it would sit over the
     words too, once the section stopped being a flex overlay. */
  .hero-void__overlay {
    inset: 0 0 auto 0;
    height: 46svh;
    min-height: 260px;
    background:
      linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 45%, transparent 100%);
  }
  /* Paint the words' own block rather than relying on the section. The hero
     copy is near-white by design because it used to sit on the portrait; once it
     moved below, whatever paints the section light made the h1 white-on-white and
     "Raise AI with care." disappeared entirely. Styling the content block is
     robust to that: the dark runs continuously from the portrait into the text,
     which is also what the desktop hero looks like. */
  .hero-void__content {
    align-self: auto;
    padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
    max-width: 100%;
    background: #0a0a0a;
  }
  .hero-void__statement { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .hero-void__lede { font-size: var(--text-sm); }
  .hero-void::after { display: none; }
  /* A scroll cue pinned to the bottom of a section that is no longer viewport
     height lands in the middle of the copy. */
  .hero-void__scroll { display: none; }
}

/* ---- Legacy Hero (card layout for about pages) ---- */
.hero {
  padding: var(--space-5xl) 0 var(--space-4xl);
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-4xl);
  align-items: start;
}

.hero-photo-wrap { order: 2; }
.hero-content { order: 1; }

.hero-name {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xl);
  color: var(--ink);
}

.hero-position {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ink-sec);
  line-height: 1.75;
  margin-bottom: var(--space-xl);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--hairline);
}

.hero-photo {
  border-radius: var(--radius-lg);
  width: 100%;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .hero-photo-wrap { order: -1; }
  .hero-content { order: 1; }
  .hero-photo {
    max-width: 100%;
    max-height: 40dvh;
    object-fit: cover;
    object-position: center 20%;
  }
  .hero-name { font-size: var(--text-3xl); }
}

@media (max-width: 720px) {
  .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { text-align: center; justify-content: center; }
  .hero-name { font-size: var(--text-2xl); }
}

/* ---- Operating Map ---- */
.map-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-3xl);
}

@media (max-width: 720px) {
  .map-grid { grid-template-columns: 1fr; }
}

/* ---- Thesis ---- */
.thesis {
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}

.thesis::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 50%;
  height: 150%;
  background: radial-gradient(ellipse at center, hsla(38, 45%, 55%, 0.05), transparent 60%);
  pointer-events: none;
}

.thesis-quote {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
  max-width: 800px;
  margin-bottom: var(--space-2xl);
  position: relative;
  padding-left: var(--space-2xl);
  border-left: 3px solid var(--gold);
}

.thesis-body {
  font-size: var(--text-md);
  color: var(--ink-sec);
  max-width: 700px;
  line-height: 1.8;
}

@media (max-width: 720px) {
  .thesis-quote {
    font-size: var(--text-2xl);
    padding-left: var(--space-lg);
  }
}

/* ---- Proof Stack ---- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
}

.proof-card {
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}

.proof-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--gold-border);
}

.proof-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gold-text);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em;
}

.proof-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--ink);
}

.proof-desc {
  font-size: var(--text-sm);
  color: var(--ink-sec);
  line-height: 1.6;
}

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

@media (max-width: 720px) {
  .proof-grid { grid-template-columns: 1fr; }
}

/* ---- Book ---- */
.book-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-4xl);
  align-items: start;
}

.book-cover {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--duration-slow) var(--ease-out);
}

.book-cover:hover {
  box-shadow: var(--shadow-xl);
}

.book-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.015em;
}

.book-pitch {
  font-size: var(--text-md);
  color: var(--ink-sec);
  line-height: 1.75;
  margin-bottom: var(--space-2xl);
  max-width: 560px;
}

@media (max-width: 720px) {
  .book-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .book-cover { max-width: 240px; }
  .book-title { font-size: var(--text-2xl); }
}

/* ---- Section headers ---- */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--space-lg);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.section-desc {
  font-size: var(--text-md);
  color: var(--ink-sec);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: var(--space-3xl);
}

@media (max-width: 720px) {
  .section-title { font-size: var(--text-3xl); }
  .section-desc { font-size: var(--text-sm); }
}

/* ---- Footer ---- */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-3xl);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* Footer mobile density: identity links wrap inline; sections two-up; tighter rhythm (390px parity) */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:first-child .footer-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
  .footer-grid > div:first-child .footer-links li { margin: 0; }
  .footer-links li { margin-bottom: .45rem; }
  .footer-links a { font-size: .92rem; line-height: 1.45; }
}