/* =========================================================================
   AllMarsh Labs — design system + landing page
   Aesthetic: a Paul Rand book jacket as a living interface.
   Two inks (magenta + blue) on ink/paper · high-contrast serif ·
   torn-paper spine · violent scale contrast · initials-as-image.
   ========================================================================= */

/* ---- Self-hosted fonts (no third-party calls — the site dogfoods the
   pack's own subsidiarity/data-sharing ethic). Variable woff2, latin subset. */
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-roman.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-italic.woff2") format("woff2");
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/garamond-roman.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/garamond-italic.woff2") format("woff2");
  font-weight: 400 800; font-style: italic; font-display: swap;
}

/* ---- Design tokens ----------------------------------------------------- */
:root {
  /* two inks, black, paper — sampled from the 1956 Vintage cover */
  --ink:        #17171b;
  --paper:      #fbfaf7;
  --magenta:    #a32488;
  --blue:       #2c33b4;
  --ink-soft:   #34343b;
  --paper-dim:  #e9e2d4; /* unused-warm reserve */
  --hairline:   #d8d3c7;

  --serif-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --serif-text:    "EB Garamond", Georgia, "Times New Roman", serif;

  /* fluid spacing */
  --pad-x: clamp(1.5rem, 6vw, 5.5rem);
  --pad-y: clamp(1.75rem, 4.5vw, 3.25rem);
  --measure: 34rem;
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  height: 100%;
  overflow: hidden;            /* poster lock: one screen, no scroll (also contains the tear's 120vw bleed) */
}
a { color: inherit; }

/* faint paper grain for atmosphere (inline turbulence, very low opacity) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   HERO — full Paul Rand homage
   black top zone → torn edge → paper zone w/ A·L monogram → ink strip
   ========================================================================= */
.hero {
  height: 100svh;              /* exactly one screen — the page is a poster */
  display: flex;
  flex-direction: column;
}

/* ---- black upper zone -------------------------------------------------- */
.hero__top {
  background: var(--ink);
  color: var(--paper);
  flex: 1 1 48%;
  position: relative;
  /* NO z-index here: a stacking context would trap the A below the tear.
     Leaving it out lets the A's own z-index compete at the root level. */
  padding: clamp(2.5rem, 8vh, 6rem) var(--pad-x) 0;   /* vh breathing room (fix 3) */
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: visible;           /* let the A's feet break past the tear (fix 1) */
}

.metaline {
  margin: 0;
  font-family: var(--serif-text);
  font-weight: 500;
  font-size: clamp(.72rem, 1.1vw, .9rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #c9c6cf;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .9rem;
}
.metaline span:last-child { color: #8f8c97; }

/* headline: italic lead + one giant initial, the rest of the word small.
   Mirrors "The future of the [N]ovel". */
.headline {
  margin: 0;
  align-self: end;            /* sit low in the black zone */
  position: relative;
  z-index: 6;                 /* above the tilted tear (z-index 5) */
  display: flex;
  align-items: baseline;      /* "The governance of" · A · "gents" all on ONE baseline */
  justify-content: center;
  white-space: nowrap;
  /* one scale for the whole line: the words ARE this size, the A is a multiple
     of it — so the phrase shrinks to fit and never wraps "Agents" to a new line.
     Grows with width to fill the frame (less negative space), but min(,vh) caps
     it so the giant A never outgrows the black zone on short/landscape screens. */
  font-size: clamp(1.05rem, min(5.7vw, 6.9vh), 4.6rem);
  padding-bottom: clamp(1.6rem, 5.5vh, 4.5rem);  /* lift the line clear of the tear */
  transform: translateX(var(--shift, 0px));      /* desktop-only stagger (set in media query) */
}
/* V2 treatment: every word stays on ONE baseline; only the A is enlarged and
   shifted DOWN so its feet fall below the word-line (words never leave it). */
.headline__lead {
  font-family: var(--serif-text);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;             /* the word size — set once on .headline */
  color: #efeef0;
  margin-right: -.1em;        /* tuck "of" against the A's left leg */
}
.headline__word {
  display: inline-flex;
  align-items: baseline;
  line-height: .72;
  font-family: var(--serif-display);
  color: var(--paper);
}
.headline__cap {
  font-weight: 500;
  font-size: 5.6em;                  /* the lone giant letter — V2 ratio (14 / 2.5) */
  letter-spacing: -.02em;
  display: inline-block;
  transform: translateY(.19em);      /* feet drop below the word-line (scales with the A) */
  position: relative;
  z-index: 10;
}
.headline__tail {
  font-family: var(--serif-text);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;             /* the word size — set once on .headline */
  letter-spacing: 0;
  color: #efeef0;
  margin-left: -.1em;         /* tuck "gents" against the A's right leg */
}

/* ---- the tilted tear --------------------------------------------------
   Anchored to the black zone's bottom, but oversized to 120vw and pulled
   off both edges so a pure rotation can't expose a corner. We ROTATE (not
   skew) so the ragged teeth stay crisp instead of shearing. Its solid top
   hides against the black zone above; only the ragged bottom shows, now
   tilted, against the paper below. */
.tear-defs { position: absolute; width: 0; height: 0; }
.tear {
  position: absolute;
  left: -10vw;
  bottom: 0;                   /* sit on the black-zone seam */
  width: 120vw;                /* bleed past both edges so the tilt has no gaps */
  height: clamp(118px, 13vh, 165px);   /* taller floor so the displacement can't island the shorter mobile edge */
  background: var(--ink);
  filter: url(#tornInk);       /* roughen the edges in pixel space → consistent at any width */
  transform: rotate(5deg) translateY(20%);  /* stronger tilt — ink bleeds deeper on the right, under the A */
  transform-origin: center;
  z-index: 5;                  /* over the paper zone, under the A (z-index 10) */
  pointer-events: none;
}

/* ---- paper lower zone: the A·L monogram -------------------------------- */
.hero__bottom {
  flex: 1 1 40%;
  position: relative;
  z-index: 1;                  /* below the A (z-index:10) so its white ink cuts over the edge */
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem) var(--pad-x);
}
/* "All[M]arsh[L]abs" — the brand spelled natively, with M·L as the giant
   structural initials and the connective text trailing in italic, à la
   Rand's "[H]enry [J]ames". */
/* Two one-color words sitting side by side with clean air between them —
   "[All][M]arsh"  "[L]abs"  — exactly like Rand's "[H]enry  [J]ames".
   No overlap: the drama is scale + color, and every small completion sits
   readably on the white. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .40em;                /* word space between AllMarsh and Labs, scales with the lockup */
  line-height: .8;
  font-family: var(--serif-display);
  /* one scale (V2): small text = 1em, the M & L are a multiple and drop below it.
     Grows with width to fill the frame; min(,vh) caps it to the paper zone;
     floor keeps the long "AllMarsh Labs" lockup fitting down to ~320px. */
  font-size: clamp(1.6rem, min(6vw, 6.5vh), 5.2rem);
  transform: translateX(var(--shift, 0px));   /* desktop-only stagger; overridden by riseInWm while animating */
}
.wm-word {
  display: inline-flex;
  align-items: baseline;
}
.wm-word--m { color: var(--magenta); }   /* All · M · arsh */
.wm-word--l {
  color: var(--blue);                     /* L · abs */
  /* slide Labs left WITHOUT moving AllMarsh: a transform is visual-only, so the
     lockup's layout width (and thus its centering) doesn't change. This is the
     gap knob — more negative = tighter, AllMarsh stays pinned. */
  transform: translateX(-.22em);
}

.wm-big {
  font-weight: 800;
  font-size: 3.85em;                 /* the giant initials */
  letter-spacing: -.02em;
  display: inline-block;
  transform: translateY(.19em);      /* feet drop below the word-line, same as the A */
}
.wm-small {
  font-family: var(--serif-text);
  font-style: italic;
  font-weight: 500;
  font-size: 1em;
}
/* nestle each small completion against its giant letter (à la "[H]enry") */
.wm-word--m .wm-small:first-child { margin-right: -.03em; }   /* All → M */
.wm-word--m .wm-small:last-child  { margin-left: -.12em; }    /* M → arsh tucks under the right arm */
.wm-word--l .wm-small             { margin-left: .06em; }     /* L → abs: push clear of the L's narrow stem/foot */

/* ---- thin ink strip at the very bottom (subtitle/credit band) ---------- */
.hero__strip {
  /* no band — sits directly on the paper, like the credit line on Rand's cover */
  color: var(--ink);
  padding: clamp(.9rem, 2vw, 1.4rem) var(--pad-x) clamp(1.5rem, 3.2vh, 2.4rem);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
}
.strip__tag {
  margin: 0;
  font-style: italic;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);   /* a touch larger than the CTAs — more readable */
  line-height: 1.4;
}
.strip__actions {
  display: flex;
  flex-wrap: wrap;            /* stack gracefully if the two links can't share a line */
  align-items: baseline;
  gap: .6rem 3vw;            /* tight but distinct between the links; row-gap for when they wrap */
}
.strip__flagship {
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: border-color .25s ease, color .25s ease;
}
.strip__flagship:hover {
  color: var(--magenta);
  border-color: var(--magenta);
}

/* =========================================================================
   Page-load orchestration — one staggered reveal, CSS-only
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .metaline      { animation: trackIn 1s   ease both .1s; }
  .headline__lead{ animation: riseIn  .9s  cubic-bezier(.2,.7,.2,1) both .45s; }
  .headline__word{ animation: riseIn  1s   cubic-bezier(.2,.7,.2,1) both .3s; }
  /* fade only — a transform animation here would clobber the rotate() tilt */
  .tear          { animation: fadeIn  .9s  ease both .7s; }
  /* the wordmark animates as a unit; riseInWm preserves its --shift offset */
  .wordmark      { animation: riseInWm .9s cubic-bezier(.2,.7,.2,1) both 1s; }
  .hero__strip   { animation: riseIn  .8s  ease both 1.25s; }
}

@keyframes trackIn  { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .28em; } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } }
/* like riseIn, but carries the horizontal --shift through so the desktop stagger survives the animation */
@keyframes riseInWm { from { opacity: 0; transform: translate(var(--shift, 0px), 1.4rem); } to { opacity: 1; transform: translate(var(--shift, 0px), 0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes tearIn   { from { opacity: 0; transform: translateY(-1.4rem) scaleY(.6); } to { opacity: 1; transform: none; } }
@keyframes slideInL { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: none; } }
@keyframes slideInR { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: none; } }

/* Desktop-only stagger: a book cover is portrait, so the type centers there.
   On wider screens, nudge the header left and the wordmark right to lay a
   top-left → bottom-right diagonal parallel to the torn edge. Capped so it
   doesn't drift too far on ultra-wide. Phones/tablets stay centered (--shift:0). */
@media (min-width: 900px) {
  .headline { --shift: clamp(-9rem, -7vw, -2rem); }   /* nudge left  */
  .wordmark { --shift: clamp(2rem,  7vw,  9rem); }    /* nudge right */
}