/* ============================================================
   gregclement.com — V3 "The Editorial Grid, craft pass"
   V2 layout + brand-locked identity, refined with Emil Kowalski's
   motion craft (strong curves, press feedback, hover-gating,
   GPU-only animation, staggered reveals) and taste-skill discipline.
   ============================================================ */

:root {
  --paper:   #F4ECDD;
  --ink:     #221D17;
  --orange:  #BC4B1C;
  --divider: #D6C9B2;
  --dark:    #1A1611;

  --ink-70:  rgba(34, 29, 23, 0.70);
  --ink-55:  rgba(34, 29, 23, 0.55);
  --ink-40:  rgba(34, 29, 23, 0.40);
  --paper-90: rgba(244, 236, 221, 0.92);
  --paper-70: rgba(244, 236, 221, 0.70);
  --paper-45: rgba(244, 236, 221, 0.45);
  --paper-22: rgba(244, 236, 221, 0.22);
  --paper-14: rgba(244, 236, 221, 0.14);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1880px;
  --edge: clamp(1.25rem, 3vw, 3.25rem);
  --radius: 2px;
  /* Emil's strong curves — built-in CSS easings lack punch */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);          /* strong ease-out: enters, hovers */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* strong ease-in-out: on-screen movement */
  --line: 1px solid var(--divider);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
p { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 440;
  font-optical-sizing: auto;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
::selection { background: var(--orange); color: var(--paper); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---- Layout primitives ---- */
.bleed {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
  position: relative;
  z-index: 1;
}

/* Ruled modular grid: hairlines via 1px gap over a divider-colored bed */
.ruled {
  display: grid;
  gap: 1px;
  background: var(--divider);
  border: var(--line);
}
.ruled--dark { background: var(--paper-14); border-color: var(--paper-14); }
.cell { background: var(--paper); }
.ruled--dark .cell { background: var(--dark); }

/* ---- Section header (numbered editorial index) ---- */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding-bottom: 1rem;
  border-bottom: var(--line);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sec-head__idx {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--orange);
}
.sec-head__label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sec-head__meta {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--ink-55);
  letter-spacing: 0.03em;
  text-align: right;
}
.sec-head--dark { border-bottom-color: var(--paper-22); }
.sec-head--dark .sec-head__label { color: var(--paper); }
.sec-head--dark .sec-head__meta { color: var(--paper-45); }

/* ---- Buttons / links ---- */
.btn-orange {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  background: var(--orange); color: var(--paper);
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.95em 1.6em; border: none; border-radius: var(--radius); line-height: 1;
  transition: transform 160ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn-orange:hover { background: #a53f15; transform: translateY(-2px); box-shadow: 0 9px 24px -14px rgba(40,25,10,0.55); }
}
.btn-orange:active { transform: scale(0.97); transition-duration: 110ms; }
.tlink {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--orange);
}
.tlink .arw { transition: transform 0.3s var(--ease); }
.tlink:hover .arw { transform: translateX(5px); }
.tlink[aria-disabled="true"] { color: var(--ink-40); pointer-events: none; }
.serif-italic { font-style: italic; }

/* ---- Draft markers ---- */
.draft { border-bottom: 1.5px dotted var(--orange); }
.ruled--dark .draft, .build .draft { border-bottom-color: var(--orange); }

/* ============================================================ NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.scrolled {
  background: var(--paper-90);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--divider);
}
.nav__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.05rem var(--edge);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.wordmark {
  font-family: var(--serif); font-weight: 500; font-size: 1.3rem;
  letter-spacing: -0.02em; white-space: nowrap; display: inline-flex; gap: 0.5em; align-items: baseline;
}
.wordmark__idx { font-size: 0.7rem; font-family: var(--sans); color: var(--ink-40); letter-spacing: 0.1em; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); margin-left: auto; }
.nav__link {
  font-size: 0.88rem; font-weight: 500; color: var(--ink-70);
  display: inline-flex; align-items: baseline; gap: 0.4em;
  position: relative; padding: 0.3em 0; transition: color 0.25s var(--ease);
}
.nav__num { font-size: 0.62rem; color: var(--orange); font-weight: 600; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__cta { white-space: nowrap; }
.nav__burger { display: none; flex-direction: column; gap: 5px; width: 30px; height: 24px; padding: 0; background: none; border: none; justify-content: center; }
.nav__burger span { display: block; height: 1.5px; width: 100%; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); }

.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 0.4rem; padding: var(--edge); transform: translateY(-100%); visibility: hidden;
  /* Keep the panel visible through the slide-up so the close animates out too. */
  transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.menu.open { transform: translateY(0); visibility: visible; transition: transform 0.5s var(--ease), visibility 0s linear 0s; }
.menu a:not(.menu__cta) { font-family: var(--serif); font-size: clamp(2.2rem, 11vw, 3.5rem); font-weight: 440; color: var(--ink); padding: 0.18em 0; }
/* Resting (closed) state — links also TRANSITION here, so closing reverses the
   entrance: items fade/slide out, lower ones leaving first. */
.menu a { opacity: 0; transform: translateY(14px); transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); }
.menu a:nth-child(1){ transition-delay: .20s; }
.menu a:nth-child(2){ transition-delay: .15s; }
.menu a:nth-child(3){ transition-delay: .10s; }
.menu a:nth-child(4){ transition-delay: .05s; }
.menu .menu__cta { transition-delay: 0s; }
/* Open state — staggered entrance (top item first, CTA last). */
.menu.open a { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.menu.open a:nth-child(1){transition-delay:.12s}.menu.open a:nth-child(2){transition-delay:.18s}
.menu.open a:nth-child(3){transition-delay:.24s}.menu.open a:nth-child(4){transition-delay:.30s}
.menu .menu__cta { margin-top: 1.8rem; align-self: flex-start; font-size: 1rem; padding: 1em 1.8em; }
.menu.open .menu__cta { transition-delay: .36s; }
body.menu-open { overflow: hidden; }

/* ============================================================ HERO */
.hero {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: var(--paper);
  padding-top: clamp(7rem, 12vh, 9.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}
/* Static background layer */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/images/Hero_V2.webp") center 28% / cover no-repeat;
}
/* Paper wash over the image, beneath the content */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,236,221,0.58) 0%, rgba(244,236,221,0.70) 48%, rgba(244,236,221,0.96) 100%);
}
.hero > .bleed { position: relative; z-index: 2; }
.hero__title {
  font-size: clamp(3.2rem, 0.5rem + 11vw, 11rem);
  font-weight: 380;
  line-height: 0.97;
  letter-spacing: -0.035em;
  margin: clamp(1.5rem, 3vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.hero__title em { font-style: italic; font-weight: 420; color: var(--orange); }
.hero__psst {
  font-family: var(--serif); font-style: italic; font-weight: 340;
  font-size: clamp(1.3rem, 0.8rem + 1.6vw, 2rem); line-height: 1.3;
  color: var(--ink-70); max-width: 42ch;
  margin: 0 0 clamp(2.25rem, 4vw, 3.25rem);
}
.hero__row.ruled { grid-template-columns: 1.45fr 1fr; }
.hero__optin { padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; }
.hero__cover-cell { padding: 0; display: block; overflow: hidden; }
.hero__mockup { width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: center; display: block; }

/* Desktop-only line break */
.br-desktop { display: none; }
@media (min-width: 721px) { .br-desktop { display: inline; } }
.hero__monday {
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
  padding-left: 1.1rem;
  border-left: 2px solid var(--orange);
  font-family: var(--serif); font-style: italic;
  font-size: 1.1rem; line-height: 1.35;
  color: var(--ink-70); max-width: 30ch;
}

/* Opt-in form */
.optin { display: flex; flex-direction: column; }
.optin__label { font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; margin-bottom: 0.5rem; }
.optin__sub { font-size: 0.92rem; color: var(--ink-55); line-height: 1.55; margin-bottom: 1.3rem; }
.optin__sub em { color: var(--ink-70); }
.form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.field { flex: 1 1 11rem; display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); }
.field input {
  font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--divider); border-radius: var(--radius); padding: 0.85em 0.95em; width: 100%;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field input::placeholder { color: var(--ink-40); }
.field input:focus { outline: none; border-color: var(--orange); background: #fff8ee; box-shadow: 0 0 0 3px rgba(188,75,28,0.13); }
.field input[aria-invalid="true"] { border-color: var(--orange); background: #fbeee6; }
.form-actions { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fineprint { font-size: 0.8rem; color: var(--ink-40); }
.form-error { font-size: 0.82rem; color: var(--orange); font-weight: 600; min-height: 1.2em; margin-top: 0.5rem; }
.form-success { display: none; font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; }
.form-success strong { color: var(--orange); font-weight: 520; }
.optin.is-sent .form-body { display: none; }
.optin.is-sent .form-success { display: block; }

/* Cover plate (shared) */
.cover { position: relative; aspect-ratio: 5 / 7; width: 100%; max-width: 320px; }
.cover__plate {
  position: absolute; inset: 0; border: 1px dashed var(--divider); border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  text-align: center; padding: 1.5rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(0,0,0,0.02));
  box-shadow: 0 20px 50px -28px rgba(40,25,10,0.45);
}
.cover__plate .ico { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--orange); line-height: 1; }
.cover__plate .lbl { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40); }
.cover__plate .hint { font-size: 0.76rem; color: var(--ink-40); max-width: 22ch; }
.cover--tilted { transform: rotate(-5deg); transition: transform 0.6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .cover--tilted:hover { transform: rotate(-2deg); }
}
.cover img { width: 100%; height: 100%; object-fit: contain; }

/* Book section: Wistia video fills the tilted "cover" frame */
.cover--video {
  aspect-ratio: auto;            /* the video's own aspect defines the height */
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 18px 26px 60px -30px rgba(40,25,10,0.55);
}
.cover--video wistia-player { display: block; width: 100%; }

/* ============================================================ BOOK */
.book {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 7vw, 7.5rem);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(188,75,28,0.05), rgba(188,75,28,0) 55%),
    #ECE0CA;
}
.book__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
  align-items: stretch;
}
.book__title {
  grid-column: 1 / 6; grid-row: 1;
  font-size: clamp(2.4rem, 0.5rem + 4.6vw, 5.25rem);
  font-weight: 380; line-height: 1.0; align-self: start;
}
.book__title em { font-style: italic; color: var(--orange); }
.book__body { grid-column: 1 / 6; grid-row: 2; display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; max-width: 48ch; }
.book__body p { font-family: var(--serif); font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem); font-weight: 340; line-height: 1.5; color: var(--ink-70); }
.book__body .btn-orange { margin-top: 0.5rem; }

/* What's inside — vertical boxed stat stack, centered column, fills column height */
.book__facts {
  grid-column: 6 / 9; grid-row: 1 / 3;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--divider);
  background: #ECE0CA;
}
.book__facts li {
  flex: 1;
  display: flex; align-items: center; gap: clamp(0.8rem, 1.4vw, 1.2rem);
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid var(--divider);
}
.book__facts li:last-child { border-bottom: none; }
.book__facts-n { font-family: var(--serif); font-size: clamp(1.7rem, 1rem + 1.2vw, 2.4rem); color: var(--orange); line-height: 0.9; min-width: 2.6ch; flex-shrink: 0; }
.book__facts-text { display: flex; flex-direction: column; gap: 0.15rem; }
.book__facts-name { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.1; }
.book__facts-sub { font-family: var(--serif); font-style: italic; font-size: 0.85rem; color: var(--ink-55); }

.book__cover { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; display: flex; justify-content: center; }
.book__cover .cover { max-width: 340px; margin-inline: auto; }

/* ============================================================ BIG IDEAS */
.ideas { padding-block: clamp(4rem, 7vw, 7.5rem); }
.ideas__title {
  font-size: clamp(1.8rem, 0.8rem + 3vw, 3.6rem);
  font-weight: 400; line-height: 1.12; max-width: 30ch;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.ideas__title em { font-style: italic; color: var(--orange); }
.ideas__grid.ruled { grid-template-columns: repeat(4, 1fr); }
.idea { display: flex; flex-direction: column; }
.idea__media { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--divider); }
.idea__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .idea:hover .idea__media img { transform: scale(1.04); }
}
.idea__badge {
  position: absolute; top: 1rem; left: 1rem; font-family: var(--sans); font-size: 0.64rem;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper);
  background: var(--orange); padding: 0.5em 0.9em; border-radius: 100px;
}
.idea__text { display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(1.4rem, 2vw, 2rem); flex: 1; }
.idea__num { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--orange); }
.idea__title { font-size: 1.4rem; font-weight: 460; line-height: 1.16; }
.idea__excerpt { font-size: 0.96rem; color: var(--ink-70); line-height: 1.55; flex: 1; }
.idea__text .tlink { margin-top: 0.3rem; }

/* Faded rule between the featured essay and the four below */
.ideas__sep {
  height: 1px;
  margin: clamp(1.75rem, 4vw, 3rem) 0;
  background: linear-gradient(90deg, transparent, var(--divider) 12%, var(--divider) 88%, transparent);
}

/* Featured — standalone bordered cell: image left, text right, big */
.idea--featured {
  display: grid; grid-template-columns: 1.35fr 1fr; align-items: stretch;
  border: var(--line);
  background: var(--paper);
}
.idea--featured .idea__text { border-left: var(--line); }
.idea--featured .idea__media { aspect-ratio: auto; min-height: 360px; }
.idea--featured .idea__text { padding: clamp(2rem, 4vw, 3.5rem); justify-content: center; gap: 1.1rem; }
.idea--featured .idea__num { font-size: 1.4rem; }
.idea--featured .idea__title { font-size: clamp(2rem, 1rem + 2.6vw, 3.4rem); font-weight: 420; letter-spacing: -0.02em; }
.idea--featured .idea__excerpt { font-size: 1.25rem; flex: 0; }

.ideas__viewall { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); text-align: center; }
/* Stroked (outlined) button treatment for the View all essays link. */
.ideas__viewall .tlink {
  padding: 0.85em 1.7em; border: 1.5px solid var(--orange); border-radius: var(--radius);
  transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease), transform 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .ideas__viewall .tlink:hover { background: var(--orange); color: var(--paper); transform: translateY(-2px); box-shadow: 0 9px 24px -14px rgba(40,25,10,0.55); }
}
.ideas__viewall .tlink:active { transform: scale(0.97); transition-duration: 110ms; }

/* ============================================================ ESSAYS (sub-pages) */
.subpage { padding-top: clamp(8rem, 13vh, 10rem); padding-bottom: clamp(4rem, 7vw, 7rem); min-height: 70vh; }
.essays__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.essays__title { font-size: clamp(2.4rem, 1rem + 4.5vw, 5.25rem); font-weight: 380; line-height: 1.02; letter-spacing: -0.025em; margin: 0.6rem 0 1rem; max-width: 18ch; }
.essays__title em { font-style: italic; color: var(--orange); }
.essays__lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); color: var(--ink-70); max-width: 46ch; }

.essays__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.essay-tile { display: flex; flex-direction: column; border: var(--line); background: var(--paper); overflow: hidden; transition: border-color 0.4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .essay-tile:hover { border-color: var(--orange); } .essay-tile:hover .idea__media img { transform: scale(1.04); } }
.essay-tile .idea__media { aspect-ratio: 16 / 10; }
@media (max-width: 1024px) { .essays__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .essays__grid { grid-template-columns: 1fr; } }

/* Individual essay */
.essay { max-width: 860px; margin-inline: auto; }
.essay__back { display: inline-flex; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.essay__series { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); }
.essay__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 1rem + 4.5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0.8rem 0 1rem; }
.essay__dek { font-family: var(--serif); font-style: italic; font-weight: 340; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem); line-height: 1.45; color: var(--ink-70); max-width: 44ch; }
.essay__meta { margin-top: 1.2rem; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-55); }
.essay__hero { width: 100%; border-radius: 3px; margin-block: clamp(1.75rem, 4vw, 3rem); box-shadow: 0 24px 60px -34px rgba(40,25,10,0.5); }
.essay__body { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem); font-weight: 340; line-height: 1.7; color: var(--ink); }
.essay__body p { margin-bottom: 1.4rem; }
.essay__body strong { font-weight: 600; color: var(--ink); }
.essay__body em { font-style: italic; }
.essay__pull {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.7rem); line-height: 1.18; letter-spacing: -0.015em;
  color: var(--orange); margin: clamp(1.75rem, 3.5vw, 3rem) 0;
}
.essay__body h2.essay__h2 {
  font-family: var(--serif); font-weight: 460; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.15rem);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
  margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 1rem;
}
/* Inner-voice passages (lower self) */
.essay__body .essay__voice { border-left: 2px solid var(--orange); padding-left: clamp(1rem, 2vw, 1.4rem); margin: clamp(1.5rem, 3vw, 2.25rem) 0; }
.essay__body .essay__voice p { font-style: italic; color: var(--ink-70); margin-bottom: 0.8rem; }
.essay__body .essay__voice p:last-child { margin-bottom: 0; }

/* Inline figures inside an essay */
.essay__fig { margin: clamp(1.75rem, 3.5vw, 2.75rem) 0; }
.essay__fig img { width: 100%; display: block; border-radius: 3px; box-shadow: 0 18px 44px -28px rgba(40,25,10,0.45); }
.essay__fig--portrait img { max-width: 460px; margin-inline: auto; }
.essay__fig figcaption { margin-top: 0.65rem; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-55); letter-spacing: 0.02em; }
.essay__fig--portrait figcaption { text-align: center; }
/* Video version embed */
.essay__video { margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.essay__video-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.9rem; }
.essay__video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; box-shadow: 0 18px 44px -28px rgba(40,25,10,0.45); background: var(--dark); }
.essay__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.essay__readmore { margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: var(--line); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.essay__readmore p { font-family: var(--serif); font-style: italic; color: var(--ink-70); font-size: 1.1rem; }

/* End-of-article: two more essays + breadcrumb */
.essay__more { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: var(--line); }
.essay__more-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 1.2rem; }
.essay__more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.essay__more-grid .essay-tile .idea__text { gap: 0.5rem; }
.essay__more-grid .essay-tile .idea__title { font-size: 1.3rem; font-weight: 460; line-height: 1.18; }
@media (max-width: 600px) { .essay__more-grid { grid-template-columns: 1fr; } }
.essay__crumbs { margin-top: clamp(2.25rem, 4vw, 3rem); display: flex; gap: 0.85rem; align-items: center; font-size: 0.95rem; }
.essay__crumbs a { color: var(--orange); font-weight: 600; }
@media (hover: hover) { .essay__crumbs a:hover { text-decoration: underline; } }
.essay__crumbs span { color: var(--ink-40); }

/* ============================================================ PIVOT */
.pivot { position: relative; }
.pivot__frame { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: var(--dark); }
.pivot__img { position: absolute; top: 50%; left: 0; width: 100%; height: 140%; object-fit: cover; transform: translateY(-50%); will-change: transform; }
.pivot__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,16,12,0.7) 0%, rgba(20,16,12,0.15) 45%, rgba(20,16,12,0) 70%);
}
.pivot__quote { position: absolute; left: var(--edge); bottom: clamp(1.5rem, 4vw, 3.5rem); z-index: 2; max-width: min(72ch, 84%); color: var(--paper); }
.pivot__idx { font-family: var(--serif); font-style: italic; color: var(--paper-70); font-size: 1rem; display: block; margin-bottom: 0.8rem; }
.pivot__quote blockquote { margin: 0; font-family: var(--serif); font-weight: 360; font-size: clamp(1.5rem, 0.8rem + 2.8vw, 3.6rem); line-height: 1.1; letter-spacing: -0.02em; }
.pivot__quote em { font-style: italic; color: #f0a878; }

/* ============================================================ BUILD (dark) */
.build { background: var(--dark); color: var(--paper); padding-block: clamp(4rem, 7vw, 7.5rem); }
.build__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.build__title { font-size: clamp(2rem, 1rem + 3vw, 4rem); font-weight: 360; color: var(--paper); line-height: 1.28; }
.build__accent {
  grid-row: 1; grid-column: 2;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.6rem, 1.2rem + 5vw, 5.5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--orange);
}
.build__grid.ruled { grid-template-columns: repeat(3, 1fr); }
.venture { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.6rem, 2.6vw, 2.4rem); min-height: 14rem; transition: background-color 0.4s var(--ease); }
.ruled--dark .venture:hover { background: #221d17; }
.venture__n { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--orange); }
.venture__row { display: flex; gap: clamp(0.9rem, 1.4vw, 1.3rem); align-items: stretch; }
.venture__media { flex: 0 0 33%; max-width: 150px; min-height: 7.5rem; overflow: hidden; background: #100d0a; }
.venture__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) sepia(0.28) brightness(0.9) contrast(1.02);
  opacity: 0.8;
  transition: filter 0.5s var(--ease), opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .venture:hover .venture__media img { filter: grayscale(0.1) sepia(0.06); opacity: 1; transform: scale(1.04); }
}
.venture__copy { display: flex; flex-direction: column; gap: 0.7rem; flex: 1; min-width: 0; }
.venture__mark { font-family: var(--serif); font-size: 1.55rem; font-weight: 460; color: var(--paper); line-height: 1.1; }
.venture__line { font-size: 0.94rem; color: var(--paper-70); line-height: 1.7; flex: 1; padding-bottom: 0.35rem; }
.venture__link { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); }
.venture__link .arw { transition: transform 0.3s var(--ease); }
.venture:hover .venture__link .arw { transform: translate(3px, -3px); }

/* ============================================================ ABOUT */
.about { padding-block: clamp(4rem, 7vw, 7.5rem); }
.about__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
.about__portrait { position: sticky; top: 110px; }
.portrait__plate {
  position: relative; aspect-ratio: 4 / 5; border: 1px dashed var(--divider); border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  text-align: center; padding: 1.5rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.25), rgba(0,0,0,0.02));
  box-shadow: 0 18px 44px -30px rgba(40,25,10,0.45);
}
.portrait__plate .ico { font-family: var(--serif); font-size: 2rem; letter-spacing: 0.06em; color: var(--orange); }
.portrait__plate .lbl { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40); }
.portrait__plate .hint { font-size: 0.76rem; color: var(--ink-40); max-width: 22ch; }
/* Greg headshot fills the left column; life photos marquee over its bottom third */
.about__portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  box-shadow: 0 18px 44px -30px rgba(40,25,10,0.45);
}
.about__headshot { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; border-radius: 2px; }

.about__marquee {
  position: absolute;
  right: 0;                          /* stops at the right edge of the left column (never the text) */
  left: calc(-1 * var(--edge) - 1vw); /* breaks out past the headshot, to/off the page's left edge */
  bottom: 2.5%;
  height: 30%;
  display: flex;
  align-items: center;
  overflow: hidden;                  /* clips at the page edge and the text-column boundary */
  pointer-events: none;
  /* soft fade right at the page edge as they scroll off */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 100%);
}
.about__marquee-track {
  display: flex;
  flex: none;                  /* don't let the flex parent shrink it... */
  width: max-content;          /* ...so width = content and translateX(-50%) == exactly one set → seamless */
  height: 60%;
  align-items: center;
  animation: aboutMarquee 46s linear infinite;
  will-change: transform;
}
.about__marquee-track img {
  height: 100%;
  width: auto;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  margin-right: 0.6rem;          /* img + margin = repeating unit → seamless at -50% */
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 10px 26px -10px rgba(40,25,10,0.55);
}
@keyframes aboutMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.about__body { margin-top: 1.4rem; }
.about__body p { font-family: var(--serif); font-size: clamp(1.2rem, 0.9rem + 0.9vw, 1.5rem); font-weight: 360; line-height: 1.6; margin-bottom: 1.4rem; color: var(--ink); }
.dropcap::first-letter { font-family: var(--serif); font-size: 5.5rem; font-weight: 460; line-height: 0.8; color: var(--orange); float: left; padding: 0.06em 0.12em 0 0; }
.about__sign { display: block; width: auto; height: auto; max-width: 200px; margin-top: clamp(2rem, 4vw, 3rem); mix-blend-mode: multiply; }

/* ============================================================ LASTCALL */
.lastcall { background: linear-gradient(180deg, rgba(188,75,28,0.05), rgba(188,75,28,0)), #EFE5D3; padding-block: clamp(3.5rem, 6vw, 6rem); }
.lastcall__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.lastcall__line { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 0.9rem + 1.4vw, 2.1rem); color: var(--ink-70); line-height: 1.25; }
.lastcall__optin { min-width: min(26rem, 100%); }
.lastcall__form { display: flex; gap: 0.75rem; align-items: end; }
.lastcall__form .field { flex: 1 1 14rem; }
/* Match the input boxes to the left: same height, bottom-aligned (no label above),
   two stacked lines ("Send me" / "Part One"), each kept on its own line. */
.lastcall__btn { flex-direction: column; gap: 0; line-height: 1.12; padding-block: 0; height: calc(1.2rem + 0.85rem * 2 + 2px); white-space: nowrap; }
.lastcall .form-success { text-align: left; }

/* ============================================================ FOOTER */
.footer { padding-block: clamp(3rem, 5vw, 4.5rem) 2.5rem; }
.footer__grid.ruled { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.footer__brand, .footer__col { padding: clamp(1.5rem, 3vw, 2.4rem); }
.footer__brand .wordmark { font-size: 1.5rem; margin-bottom: 0.7rem; }
.footer__tag { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-55); max-width: 26ch; }
.footer__col h4 { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: 1.1rem; }
.footer__col ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer__col a { font-size: 0.95rem; color: var(--ink-70); transition: color 0.25s var(--ease); }
.footer__col a:hover { color: var(--orange); }
.footer__bottom { margin-top: 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer__copy { font-size: 0.85rem; color: var(--ink-40); }
.footer__love { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--ink-55); }
.footer__love .love { color: var(--orange); font-style: normal; font-weight: 500; letter-spacing: 0.04em; }

/* ============================================================ MOTION */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* Staggered children (Emil: 30-80ms between items, GPU-only) */
.stagger-item { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); will-change: opacity, transform; }
.stagger-item.in { opacity: 1; transform: none; }

/* Clip-path image reveal (Emil): the inner image wipes in as the wrapper
   enters the viewport. Clip the IMAGE, not the observed wrapper — clipping
   the observed element to 0 height stops IntersectionObserver from firing. */
.clip-reveal img { clip-path: inset(0 0 100% 0); transition: clip-path 0.95s var(--ease); will-change: clip-path; }
.clip-reveal.in img { clip-path: inset(0 0 0 0); }

/* ---- Hero load sequence (first paint only) ----
   A cinematic settle on the background image, then a staggered rise of the
   masthead: section tag → headline → tagline → opt-in → book cover. The word
   "create" blooms from ink to orange last, animating INTO the resting design
   (so nothing changes once the sequence completes). CSS keyframes run off the
   main thread, which stays smooth even while the page is still loading. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroBg {
    from { opacity: 0; transform: scale(1.12); filter: blur(10px); }
    to   { opacity: 1; transform: scale(1);    filter: blur(0); }
  }
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(1.7rem); filter: blur(7px); }
    to   { opacity: 1; transform: translateY(0);      filter: blur(0); }
  }
  @keyframes heroRiseSoft {
    from { opacity: 0; transform: translateY(1.2rem); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroSettle {
    from { opacity: 0; transform: translateY(1.5rem) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)      scale(1); }
  }
  @keyframes heroEmBloom {
    from { color: var(--ink); }
    to   { color: var(--orange); }
  }

  .hero__bg                 { animation: heroBg       1.5s  var(--ease) both; }
  .hero .sec-head.hero-load { animation: heroRiseSoft 0.7s  var(--ease) 0.15s both; }
  .hero__title.hero-load    { animation: heroRise     0.95s var(--ease) 0.30s both; }
  .hero__psst.hero-load     { animation: heroRiseSoft 0.8s  var(--ease) 0.55s both; }
  /* Animate the whole ruled block as one unit so its frame/border never
     appears before the opt-in and book cover inside it. */
  .hero__row                { animation: heroSettle   0.9s  var(--ease) 0.70s both; }
  .hero__title em           { animation: heroEmBloom  0.7s  var(--ease) 0.95s both; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal, .stagger-item { opacity: 1; transform: none; }
  .clip-reveal img { clip-path: none; }
  .about__marquee-track { animation: none; }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 1080px) {
  .ideas__grid.ruled { grid-template-columns: repeat(2, 1fr); }
  .build__grid.ruled { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .hero__row.ruled { grid-template-columns: 1fr; }
  .hero__cover-cell { order: -1; }
  .hero__mockup { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
  .book__grid { grid-template-columns: 1fr; }
  .book__title { grid-column: 1; grid-row: auto; }
  .book__cover { grid-column: 1; grid-row: auto; }
  .book__body { grid-column: 1; grid-row: auto; }
  .book__facts { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, 1fr); }
  .idea--featured { grid-template-columns: 1fr; }
  .idea--featured .idea__text { border-left: none; border-top: var(--line); }
  .idea--featured .idea__media { min-height: 240px; }
  .about__grid { grid-template-columns: 1fr; gap: 2rem; }
  .about__portrait { position: static; max-width: 340px; }
  .lastcall__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; flex-shrink: 0; }
  .nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2) { opacity: 0; }
  .nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .build__split { grid-template-columns: 1fr; gap: 0.6rem; }
  .build__accent { grid-row: auto; grid-column: 1; }
  .sec-head { flex-wrap: wrap; }
  .sec-head__meta { margin-left: 0; flex-basis: 100%; text-align: left; }

  /* Keep the nav (and its burger) above the menu overlay at all times so the
     close "X" stays on top of the paper background and visible through the
     slide-out animation, not just while open. */
  .nav { z-index: 60; }
  /* While open, clear the nav's own background so it doesn't seam over the
     menu; it fades back in (base nav transition) as the menu slides away. */
  body.menu-open .nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }

  /* Big Ideas: show only three articles (featured + 2) on phones; the
     "View all essays" button below covers the rest. */
  .ideas__grid.ruled .idea:nth-child(n+3) { display: none; }

  /* Section 04 pull-quote reads larger on phones. */
  .pivot__quote blockquote { font-size: clamp(1.95rem, 6vw, 2.7rem); }

  /* Bottom CTA button: keep "Send me Part One" on a single line. */
  .lastcall__btn { flex-direction: row; gap: 0.32em; height: auto; line-height: 1.1; padding-block: 0.95em; }
}
/* Desktop: full-viewport hero, content fitted via flex (for the pin/overlap effect) */
@media (min-width: 921px) {
  .hero {
    height: 100vh;
    min-height: 640px;
    padding-top: clamp(5.25rem, 9vh, 7rem);
    padding-bottom: clamp(1.25rem, 2.5vh, 2.25rem);
  }
  .hero > .bleed { height: 100%; display: flex; flex-direction: column; }
  .hero .sec-head { margin-bottom: clamp(0.9rem, 2vh, 1.6rem); }
  .hero__title { margin: clamp(0.4rem, 1.2vh, 1rem) 0 clamp(1.4rem, 2.8vh, 2.1rem); line-height: 0.96; }
  .hero__psst { margin-bottom: clamp(0.9rem, 2vh, 1.6rem); }
  .hero__row.ruled { flex: 1 1 auto; min-height: 0; }
  .hero__row.ruled > .cell { min-height: 0; }

  /* The snap lands here — Book is a full-viewport slide that locks into place */
  .book { min-height: 100vh; display: flex; align-items: center; }
  .book > .bleed { width: 100%; }
}

@media (max-width: 560px) {
  .ideas__grid.ruled { grid-template-columns: 1fr; }
  .build__grid.ruled { grid-template-columns: 1fr; }
  .footer__grid.ruled { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .form-row { flex-direction: column; }
  .form-row .field { flex: 0 0 auto; }
  .lastcall__form { flex-direction: column; align-items: stretch; }
  .lastcall__form .field { flex: 0 0 auto; }
  .lastcall__form .btn-orange { width: 100%; }
  .pivot__frame { aspect-ratio: 3 / 4; }
  .pivot__quote { max-width: 90%; }
}