/* ==========================================================================
   michaelimas.com · home.css
   Home page only. Loads after site.css, everything scoped to .page-home.
   Does not touch .nav, .menu, .footer, .social, .skip or .grain.
   --------------------------------------------------------------------------
   01  Hero (headline, tagline, buttons, brush stroke, scroll hint)
   02  Teaser with etymology card and link to Work with me
   03  (removed in round 8: "A different kind of conversation")
   04  Publications (dark)
   05  Recently
   06  Newsletter
   07  Motion (hero entrance, brush reveal) and reduced motion
   Breakpoints (min-width): 480, 720, 900, 1080, 1200
   ========================================================================== */


/* 01  Hero ----------------------------------------------------------------- */
/* Phone (below 720px): text column about 70 %, the brush stroke in full ink
   in the column beside it, as tall as the text block.
   Tablet (720 to 1079px): 1fr 34 %, stroke min(62svh, 640px), centred.
   Desktop (from 1080px): 1fr 45 % as before, stroke 70 % of the column. */

.page-home .hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  align-content: center;
  align-items: center;
  padding: 7rem var(--gutter) 3.5rem;
  overflow: hidden;
}

.page-home .hero-content {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* One continuous size: 36px on a 375px phone, growing to 41.6px from about
   800px, held there until 1200px, where the desktop formula takes over at the
   same value. No jump at any breakpoint. */
.page-home .hero-question {
  max-width: 700px;
  margin-bottom: 2.4rem;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.25rem, calc(2rem + 1.2vw), 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  text-wrap: balance;
}

/* The fixed two-line break only where the first line fits (from 1200px). */
.page-home .hero-question br { display: none; }

.page-home .hero-line {
  width: 3rem;
  height: 1px;
  margin-bottom: 2rem;
  background: var(--stone-light);
}

/* Italic again (round 8, card 3). Two halves that never break inside
   (.keep), so no single word ends up alone on the last line. */
.page-home .hero-tagline {
  max-width: 400px;
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 5.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--fg-muted);
  text-wrap: balance;
}

.page-home .hero-cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.2rem;
  margin-top: 3.4rem;
}

/* Brush stroke panel: stretches to the height of the text block. */
.page-home .hero-panel {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  position: relative;
  min-height: 12rem;
}

.page-home .brush-img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  height: 104%;                  /* the ink fills 96 % of the image height */
  max-width: none;
  transform: translate(-50%, -50%);
}

/* Scroll hint: hidden on phones and on short screens (Nr. 26). */
.page-home .hero-scroll {
  position: absolute;
  bottom: 3rem;
  left: var(--gutter);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 1rem;
}

.page-home .hero-scroll span {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-text);
}

.page-home .scroll-line {
  position: relative;
  width: 3rem;
  height: 1px;
  overflow: hidden;
  background: var(--stone-light);
}

.page-home .scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--stone);
}

/* Faint variant (bausteine-spec 14, original proposal): add the class
   hero--brush-faint to the hero section. Phones only: one text column, the
   stroke pale behind the text on the right. Not set by default. */
@media not all and (min-width: 720px) {
  .page-home .hero--brush-faint {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-home .hero--brush-faint .hero-panel {
    grid-area: auto;               /* place against the hero, not a grid cell */
    position: absolute;
    top: 14svh;
    right: -6vw;
    z-index: 0;
    width: 16.5svh;
    height: 66svh;
    min-height: 0;
    opacity: 0.16;
  }

  .page-home .hero--brush-faint .brush-img {
    top: 0;
    left: auto;
    right: 0;
    height: 100%;
    transform: none;
  }
}

@media (min-width: 720px) {
  .page-home .hero {
    grid-template-columns: minmax(0, 1fr) 34%;
    padding-top: 8rem;
    padding-bottom: 6rem;
  }

  .page-home .hero-question { margin-bottom: 1.8rem; }

  .page-home .hero-line { margin-bottom: 1.6rem; }

  .page-home .hero-tagline {
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    line-height: 1.65;
  }

  .page-home .hero-cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 2.5rem;
    margin-top: 3rem;
  }

  .page-home .brush-img { height: min(62svh, 640px); }
}

@media (min-width: 720px) and (min-height: 700px) {
  .page-home .hero-scroll { display: flex; }
}

/* Phones held sideways (flat, below 1080px): the stroke follows the height of
   the text block, as on the phone upright, instead of 62svh (K25). */
@media (min-width: 720px) and (max-width: 1079px) and (max-height: 500px) {
  .page-home .brush-img { height: 104%; }
}

@media (min-width: 1080px) {
  .page-home .hero {
    grid-template-columns: minmax(0, 1fr) 45%;
    align-content: stretch;
    padding: 0;
  }

  .page-home .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 6rem;
    /* lines up with the nav, which sits in a 1440px wrap */
    padding-inline: max(var(--gutter), calc(50vw - 720px + var(--gutter))) var(--gutter);
  }

  .page-home .hero-panel { min-height: 0; }

  .page-home .brush-img {
    left: 28%;
    height: 70%;
  }

  .page-home .hero-scroll {
    left: max(var(--gutter), calc(50vw - 720px + var(--gutter)));
  }
}

/* Desktop formula from the old page, with the real width of the first line
   (11.6em, 13em with room for a wider fallback font), so the two lines hold. */
@media (min-width: 1200px) {
  .page-home .hero-question {
    font-size: clamp(2.6rem, calc((55vw - 2 * var(--gutter)) / 13), 3.3rem);
  }

  .page-home .hero-question br { display: inline; }
}


/* 02  Teaser with etymology card ------------------------------------------- */
/* Phone and tablet: card first, then the text. From 900px: card left
   (5 columns), text right (7 columns). */

.page-home .notice-section {
  padding-block: clamp(6rem, 11vw, 10rem);
}

.page-home .notice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}

.page-home .notice-grid .etym { order: -1; }

.page-home .notice-heading {
  max-width: 34ch;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.2;
  color: var(--charcoal);
  text-wrap: balance;
}

.page-home .notice-body {
  max-width: 38rem;
  margin-top: 2.2rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.95;
  color: var(--charcoal);
  text-wrap: pretty;
}

.page-home .notice-cta { margin-top: 3rem; }

@media (min-width: 900px) {
  .page-home .notice-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(4rem, 7vw, 7rem);
    align-items: start;
  }

  .page-home .notice-grid .etym { padding-top: 0.6rem; }
}


/* 04  Publications --------------------------------------------------------- */
/* One heading, "Publications", over the three cards (round 8, card 5). */

.page-home .world-section {
  padding-block: 6rem;
  background: var(--charcoal);
  overflow: hidden;
}

.page-home .world-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 3.5rem;
}

.page-home .world-heading {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.15;
  color: var(--parchment);
}

.page-home .world-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  align-items: stretch;            /* equal card heights (P8-1) */
}

/* Flex column, so "Watch / Read / Listen" sit on one line in all three cards
   even when one text is shorter (P8-1). */
.page-home .world-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3rem 1.5rem;
  background: #252220;
  color: var(--parchment);
  text-decoration: none;
  transition: background-color 0.4s var(--ease-out);
}

.page-home .world-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: transparent;
  transition: background-color 0.4s var(--ease-out);
}

.page-home .world-card:hover,
.page-home .world-card:focus-visible { background: #2D2A27; }

.page-home .world-card:hover::before,
.page-home .world-card:focus-visible::before { background: var(--stone-light); }

/* Number row; the Writing card carries the badge here. */
.page-home .world-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  min-height: 1.75rem;
  margin-bottom: 2.6rem;
}

.page-home .world-card-num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--stone-light);       /* Stone was 4.39 : 1 on #252220 (K21) */
}

.page-home .world-card .soon {
  color: var(--stone-light);
  text-wrap: balance;
}

.page-home .world-card-title {
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1.15;
  color: var(--parchment);
}

.page-home .world-card-desc {
  margin-bottom: 2.6rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--stone-light);
}

.page-home .world-card-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--stone-light);
  transition: color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}

.page-home .world-card-link .arrow { padding-left: 0; }

.page-home .world-card:hover .world-card-link,
.page-home .world-card:focus-visible .world-card-link {
  gap: 1rem;
  color: var(--parchment);
}

@media (min-width: 480px) {
  .page-home .world-card { padding: 3.5rem 2.5rem; }
}

@media (min-width: 720px) {
  .page-home .world-section { padding-block: 9rem 11rem; }
  .page-home .world-header { margin-bottom: 5rem; }
}

@media (min-width: 1080px) {
  .page-home .world-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-home .world-card { padding-inline: clamp(1.75rem, 2.2vw, 2.5rem); }
}


/* 05  Recently ------------------------------------------------------------- */
/* Two entries for the launch; the grid takes a third later without rework. */

.page-home .recent-section {
  padding-block: clamp(5rem, 9vw, 8rem);
}

.page-home .recent__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none;
}

.page-home .recent__item {
  display: block;
  height: 100%;
  padding: 2.4rem clamp(1.2rem, 2vw, 2rem) 2.4rem 0;
  border-top: 1px solid var(--warm-mid);
  color: var(--charcoal);
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.page-home .recent__item > span { display: block; }

.page-home a.recent__item:hover,
.page-home a.recent__item:focus-visible {
  border-top-color: var(--charcoal);
  background: var(--parchment-2);
}

.page-home .recent__kind {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--fg-muted);
}

.page-home .recent__title {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  line-height: 1.25;
  color: var(--charcoal);
  text-wrap: balance;
}

.page-home .recent__item--soon .recent__title { color: var(--fg-muted); }

/* Episode title (round 8, card 5): quiet, italic, set off by a short rule. */
.page-home .recent__item > .recent__episode {
  max-width: 26rem;
  margin-top: 0.9rem;
  padding-left: 1rem;
  border-left: 1px solid var(--stone-light);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--stone-text);
  text-wrap: balance;
}

.page-home .recent__item > .recent__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
}

.page-home .recent__cta .arrow {
  padding-left: 0;
  transition: transform 0.3s var(--ease-out);
}

.page-home a.recent__item:hover .arrow,
.page-home a.recent__item:focus-visible .arrow { transform: translateX(6px); }


/* 06  Newsletter ----------------------------------------------------------- */

.page-home .newsletter-section {
  padding-block: 5rem;
  background: var(--warm-mid);
}

.page-home .newsletter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.page-home .newsletter-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.25;
  color: var(--charcoal);
}

.page-home .newsletter-heading em { font-style: italic; }

.page-home .newsletter-sub {
  max-width: 380px;
  margin-top: 1.2rem;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--fg-muted);
}

.page-home .newsletter-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}

.page-home .newsletter-note {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--fg-muted);
}

@media (min-width: 900px) {
  .page-home .newsletter-section { padding-block: 7rem; }

  .page-home .newsletter-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6rem;
    align-items: center;
  }
}


/* 07  Motion --------------------------------------------------------------- */
/* Hero entrance as on the old page, only with JavaScript and only when motion
   is welcome. The page fade on main runs without the upward shift here, so
   the hero does not move twice. */

@media (prefers-reduced-motion: no-preference) {
  .js .page-home main { animation-name: page-in-fade; }

  .js .page-home .hero-question { animation: home-up 1.1s var(--ease-out) 0.3s both; }
  .js .page-home .hero-line     { animation: home-fade 1s var(--ease-out) 0.6s both; }
  .js .page-home .hero-tagline  { animation: home-up 1.1s var(--ease-out) 0.7s both; }
  .js .page-home .hero-cta-row  { animation: home-up 1s var(--ease-out) 0.9s both; }
  .js .page-home .brush-img     { animation: brush-reveal 1.8s var(--ease-out) 0.8s both; }
  .js .page-home .hero-scroll   { animation: home-fade 1s var(--ease-out) 1.6s both; }

  .page-home .scroll-line::after { animation: scroll-slide 2s ease 2.5s infinite; }
}

@keyframes home-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes home-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes brush-reveal {
  0%   { opacity: 0; clip-path: inset(100% 0 0 0); }
  30%  { opacity: 0.6; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes scroll-slide {
  0%   { left: -100%; }
  50%  { left: 0%; }
  100% { left: 100%; }
}