/* iangreer.com v2: the homepage (loaded after base.css).
   A typographic poster with one object. Elwood Research's section keeps Elwood's own graphite, bone
   and orange. Brief: scripts/home-v2/BRIEF.md. Engine (untouched): assets/v2/engine/. */

/* The engine writes --sc-p on every act each frame. Nothing here reads it from a descendant, so it
   does not inherit: otherwise every frame restyles the whole act, the WebGL canvas included, and
   restyling a canvas makes the browser wait on the GPU. */
@property --sc-p { syntax: "*"; inherits: false; }

/* ------------------------------------------------------------ the opening */
/* One pinned act on a light ground: the book lies on a drawing of itself beside the claim, opens
   into the outline drawn for it, turns through its chapters (book3d.js), and the camera descends
   into a page until paper fills the stage. Layers, back to front: paper, the book (still, then
   live canvas), copy, the paper hand-off. */
.opening { position: relative; z-index: 1; background: var(--paper); color: var(--ink); }
.opening__stage { height: 100vh; height: 100svh; overflow: hidden; }
/* The still is the landing pose rendered from the same scene: a 1500x1100 frame at the landing
   zoom, centred on the target point, so it sits at full stage height on wide screens and scaled on
   phones. --bx/--by are the target's screen position (book3d.js: cx, cy). */
.opening__book {
  --bx: 0.715; --by: 0.54; --bs: 1;
  position: absolute; z-index: 2; aspect-ratio: 1500 / 1100;
  height: calc(var(--bs) * 100%); top: calc(var(--by) * 100% - var(--bs) * 50%); left: calc(var(--bx) * 100%);
  translate: -50% 0; pointer-events: none; transition: opacity 0.3s var(--ease);
}
.opening__poster { display: block; width: 100%; height: 100%; }
html.js .opening__book.is-hidden { opacity: 0; transition-delay: 0s; }
.opening__canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s var(--ease); }
.opening__canvas.is-live { opacity: 1; }
.opening__canvas.is-measuring { opacity: 0.001; }                 /* composited, so its frames count, but unseen */
.opening__hero { position: absolute; z-index: 3; left: var(--g); top: 50%; translate: 0 -50%; max-width: min(40rem, 44vw); }
.opening__hero .continue-note { display: block; margin-top: 0.9rem; font-size: 0.95rem; color: var(--ink-soft); }
.hero__claim {
  margin: 0; max-width: 13.5ch;
  font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 5.4rem); line-height: 0.96; letter-spacing: -0.042em;
}
.hero__sub {
  margin: clamp(1.1rem, 2.4vh, 1.8rem) 0 clamp(1.4rem, 3vh, 2.2rem); max-width: 34ch;
  font-size: clamp(1.02rem, 0.9rem + 0.35vw, 1.3rem); line-height: 1.45; color: var(--ink-soft);
}
.hero__sub cite { color: var(--ink); font-weight: 600; }
.opening__flank {
  position: absolute; z-index: 3; top: 0; bottom: 0; margin: 0;
  display: flex; align-items: center; width: 30vw;
  font-weight: 800; font-size: clamp(2.4rem, 5.3vw, 6.4rem); line-height: 0.9; letter-spacing: -0.05em;
}
.opening__flank--l { left: var(--g); }
.opening__flank--r { right: var(--g); justify-content: flex-end; text-align: right; }
.opening__caption {
  position: absolute; z-index: 3; left: var(--g); bottom: 5vh; margin: 0; max-width: 25rem;
  font-size: clamp(1rem, 0.92rem + 0.25vw, 1.18rem); line-height: 1.45; font-weight: 500; color: var(--ink-soft);
}
.opening__caption cite { color: var(--ink); font-weight: 700; }
.opening__paper { position: absolute; inset: 0; z-index: 4; background: var(--paper); opacity: 0; pointer-events: none; }
.no-3d .opening__flank--r { display: none; }

/* Load choreography (runs once; the head script adds .is-greeting, home.js swaps it). */
.hero__claim .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__claim .w > span { display: inline-block; }
html.is-greeting .hero__claim:not(.is-split) { opacity: 0; }
html.is-greeting .hero__claim .w > span { transform: translateY(105%); }
html.is-greeting .hero__sub, html.is-greeting .opening__hero .btn, html.is-greeting .opening__book { opacity: 0; transform: translateY(10px); }
html.is-greeted .hero__claim .w > span { transform: none; transition: transform 0.9s var(--ease); transition-delay: calc(var(--i) * 40ms); }
html.is-greeted .hero__sub, html.is-greeted .opening__hero .btn { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 0.45s, transform 0.6s var(--ease) 0.45s; }
html.is-greeted .opening__book { opacity: 1; transform: none; transition: opacity 0.9s var(--ease) 0.25s, transform 1.1s var(--ease) 0.25s; }

/* --------------------------------------------------------------- patterns */
.patterns {
  position: relative; z-index: 1; background: var(--paper); color: var(--ink);
  /* Follows the dive into the page: the paper is already on screen, so the heading comes straight in. */
  padding: clamp(1.5rem, 4vh, 3rem) var(--g) clamp(4.5rem, 11vh, 8rem);
}
.patterns__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; margin-bottom: clamp(2.5rem, 7vh, 5rem); }
.patterns__title { margin: 0; font-weight: 800; font-size: clamp(3.1rem, 10.2vw, 12rem); line-height: 0.86; letter-spacing: -0.058em; }
.patterns__intro { margin: 0; max-width: 42ch; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.45rem); line-height: 1.4; color: var(--ink-soft); }
/* The book's three parts, as rows of a table of contents (2.3.4): the tag, the name and the summary are
   centred on one line between equal paddings, so each row has the same air above as below (on one
   baseline the summary hung low and the name sat high, with 12px more space under each row). */
.parts { list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--rule-strong); }
.part {
  display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) minmax(0, 21rem); align-items: center; gap: 0.6rem var(--g);
  padding: clamp(1.6rem, 4.2vh, 2.6rem) 0;
  border-top: 2px solid var(--rule-strong);
}
.part__meta { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink-soft); justify-self: start; }
.part__name { margin: 0; font-weight: 800; font-size: clamp(2.5rem, 5vw, 6rem); line-height: 0.95; letter-spacing: -0.05em; }
.part__text { margin: 0; max-width: 30ch; font-size: clamp(1.02rem, 0.95rem + 0.2vw, 1.18rem); line-height: 1.45; color: var(--ink-soft); }
.patterns__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin: clamp(2.2rem, 6vh, 3.6rem) 0 0; }
.patterns__foot .continue-note { flex-basis: 100%; margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* ------------------------------------------------------------ blueprint ai */
.ai {
  position: relative; z-index: 1; background: var(--paper); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem);
  padding: clamp(4rem, 10vh, 7rem) var(--g) clamp(5rem, 12vh, 9rem);
}
.ai::before { content: ""; position: absolute; left: var(--g); right: var(--g); top: 0; border-top: 1px solid var(--rule); }
.ai__title { margin: 0; font-weight: 800; font-size: clamp(2.5rem, 5.6vw, 6.4rem); line-height: 0.9; letter-spacing: -0.05em; }
.ai__text { max-width: 40ch; font-size: clamp(1.08rem, 0.98rem + 0.3vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); }
.ai .sc-stack > * + * { margin-top: 1.4rem; }
.ai__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; }
.ai__note { font-size: 0.95rem; color: var(--ink-soft); }
.ai__modes { list-style: none; margin: 0; padding: 0; align-self: end; }
.ai__modes li { display: grid; gap: 0.3rem; padding: 1.15rem 0 1.3rem; border-top: 2px solid var(--rule-strong); }
.ai__modes li:last-child { border-bottom: 2px solid var(--rule-strong); }
.ai__modes strong { font-weight: 800; font-size: clamp(1.45rem, 2.5vw, 2.6rem); line-height: 1.02; letter-spacing: -0.035em; }
.ai__modes span { color: var(--ink-soft); }

/* ----------------------------------------------------------------- elwood */
.elwood { position: relative; z-index: 1; background: var(--paper); color: var(--el-ink); }
.elwood__ground { position: absolute; inset: 0; background: var(--el-bg); }
.elwood__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 2rem clamp(2rem, 5vw, 6rem);
  padding: clamp(5rem, 13vh, 9rem) var(--g) clamp(4.5rem, 11vh, 8rem);
  font-family: "Mona Sans", var(--sc-font-text);
}
.elwood__lockup { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--el-ink); text-decoration: none; font-weight: 600; font-stretch: 112%; letter-spacing: -0.01em; }
.elwood__lockup svg { width: 26px; height: 26px; flex: none; }
.elwood__title { margin: 1.6rem 0 1.2rem; font-family: inherit; font-weight: 700; font-stretch: 112%; font-size: clamp(2.4rem, 5vw, 5.4rem); line-height: 0.95; letter-spacing: -0.035em; }
.elwood__text { margin: 0; max-width: 40ch; color: var(--el-soft); font-size: 1.08rem; line-height: 1.6; }
.elwood__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 2rem 0 0; }
.elwood__btn {
  display: inline-flex; align-items: center; gap: 0.7em; min-height: 52px; padding: 0 1.3em;
  background: var(--el-orange); color: #0b0d0f; font-weight: 700; text-decoration: none; border-radius: 2px;
  transition: background-color 0.16s var(--ease), transform 0.12s var(--ease);
}
.elwood__btn .arrow { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; }
.elwood__btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .elwood__btn:hover { background: #ff8a55; } }
.elwood__link { color: var(--el-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.elwood :focus-visible { outline-color: var(--el-orange); }
.elwood__lens { margin: 0; align-self: center; }
.elwood__lens img { display: block; width: 100%; height: auto; }
.elwood__mandates { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); margin-top: clamp(1.5rem, 5vh, 3.5rem); }
.mandate { border-top: 1px solid rgba(237, 238, 234, 0.22); padding-top: 1.1rem; }
.mandate h3 { margin: 0; font-family: inherit; font-weight: 700; font-stretch: 112%; font-size: clamp(1.3rem, 1.9vw, 1.9rem); letter-spacing: -0.02em; }
.mandate p { margin: 0.3rem 0 0.9rem; color: var(--el-soft); }
.mandate ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.2rem; font-size: 0.98rem; }
.mandate li { padding: 0.45rem 0; border-bottom: 1px solid rgba(237, 238, 234, 0.1); }

/* ------------------------------------------------------------- newsletter */
.letter {
  position: relative; z-index: 1; background: var(--blue); color: #fff;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 2rem var(--g);
  padding: clamp(4.5rem, 11vh, 8rem) var(--g);
}
.letter__title { margin: 0; font-weight: 800; font-size: clamp(2.8rem, 7vw, 8rem); line-height: 0.88; letter-spacing: -0.055em; }
.letter__body p { margin: 0 0 1.6rem; max-width: 36ch; font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--on-blue-soft); }

/* ------------------------------------------------------------------ about */
.about { position: relative; z-index: 1; background: var(--paper); padding: clamp(5rem, 13vh, 10rem) var(--g) clamp(5rem, 12vh, 9rem); }
.about__line { margin: 0; max-width: 16ch; font-weight: 800; font-size: clamp(2.8rem, 7.8vw, 9rem); line-height: 0.9; letter-spacing: -0.055em; }
.about__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem var(--g); margin-top: clamp(3rem, 9vh, 6rem); }
.about__col { border-top: 2px solid var(--rule-strong); padding-top: 1.1rem; }
.about__col h3 { margin: 0; font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 2.2rem); letter-spacing: -0.03em; }
.about__col p { max-width: 42ch; color: var(--ink-soft); }
.about__col.sc-stack > * + * { margin-top: 0.9rem; }

/* ------------------------------------------------------------------ phone */
/* Stacked opening (phones, and any portrait screen): text above, the book in the space below it.
   home.js measures that space and sets --by/--bs (and the 3D landing) so the two never meet. */
@media (max-width: 860px), (max-aspect-ratio: 9/10) {
  .opening__hero { top: calc(var(--corner-h) + 1vh); translate: none; max-width: none; right: var(--g); }
  .hero__claim { font-size: clamp(2rem, min(9.6vw, 6.2vh), 3.2rem); max-width: 12ch; }
  .hero__sub { max-width: 30ch; font-size: 1rem; margin: 0.7rem 0 0.95rem; }
  /* 2.3.7: a returning reader's chapter sits beside the button, not on a line of its own, and the
     book fills the band left under the text (home.js landing), about 1.5x bigger on an iPhone. */
  .opening { --land-fill: 1.45; }
  .opening__hero .continue-note { display: inline-block; max-width: calc(100% - 13.2rem); margin: 0 0 0 0.9rem; font-size: 0.9rem; line-height: 1.3; vertical-align: middle; }
  .opening__book { --bx: 0.5; --by: 0.67; --bs: 0.5976; }
  .opening__flank { width: auto; left: var(--g); right: var(--g); font-size: clamp(2.3rem, 11.5vw, 3.6rem); }
  .opening__flank--l { top: calc(var(--corner-h) + 2vh); bottom: auto; align-items: flex-start; }
  .opening__flank--r { top: auto; bottom: 5vh; align-items: flex-end; }
  .opening__caption { right: var(--g); bottom: 4vh; font-size: 1rem; }
  html.no-3d .opening__caption { top: calc(var(--corner-h) + 2vh); bottom: auto; }
}
/* Too narrow for the chapter beside the button: it goes back under it. */
@media (max-width: 359px) {
  .opening__hero .continue-note { display: block; max-width: none; margin: 0.8rem 0 0; }
}
@media (max-width: 860px) {

  .part { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
  .part__name { font-size: clamp(2.3rem, 11vw, 3.4rem); margin: 0.35rem 0 0.2rem; }

  .ai { grid-template-columns: minmax(0, 1fr); }
  .elwood__inner { grid-template-columns: minmax(0, 1fr); }
  .elwood__lens { order: -1; margin: 0 -8vw 0 auto; width: 104%; }
  /* On phones the lens picture is simply there, at full strength: its scroll cue (opacity and rise)
     is overridden (v2.1.3, Ian: the Elwood card "on mobile should have the static signal/noise/lens
     image"). Wider screens keep the cue. */
  .elwood__lens[data-sc-cue] { opacity: 1 !important; transform: none !important; }
  .elwood { overflow-x: clip; }                                     /* the lens bleeds off the edge; the page never scrolls sideways */
  .elwood__mandates { grid-template-columns: minmax(0, 1fr); }
  .letter { grid-template-columns: minmax(0, 1fr); }
  .about__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .mandate ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.is-greeting .hero__claim .w > span,
  html.is-greeting .hero__sub, html.is-greeting .opening__hero .btn, html.is-greeting .opening__book { transform: none; opacity: 1; }
}

/* ------------------------------------------------------------ without JS */
/* The engine hides cued copy until it runs; without JavaScript every line must simply show. */
html:not(.js) [data-sc-cue] { opacity: 1; }
html:not(.js) .opening__flank, html:not(.js) .opening__caption { display: none; }