/* =====================================================================================
   THE NAND BLUEPRINT (/founders/)
   NAND's story in five editorial chapters: a large outlined chapter number and label on one side,
   the heading and copy on the other (chapter 02 mirrored), fine rules with a red lead-in between
   chapters, a numbered list of areas (04) and a closing statement. Built on styles.css (tokens,
   sheet, .btn) and legal.css (page shell: header, footer line). No scripts except consent.js.
   Motion: the opening rises in on load; each block eases in as it scrolls into view (scroll-driven
   CSS, no script). Without support for that, or with reduced motion, everything is simply shown.
   ===================================================================================== */
.bp-page { flex: 1; padding-top: clamp(40px, 6vh, 72px); padding-bottom: clamp(56px, 8vh, 96px); }

/* ---------- Opening ---------- */
.bp-hero { padding-bottom: clamp(48px, 9vh, 104px); }
.bp-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12.5px var(--font-technical);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.bp-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--red-bright); }
.bp-title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(56px, 8.4vw, 136px);
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink);
}
.bp-title span, .bp-title em { display: block; }
.bp-title em { font-style: normal; color: var(--red-bright); }
.bp-lead { margin-top: 26px; max-width: 620px; font: 400 19px/1.65 var(--font-body); color: var(--ink-2); }
/* Founders: two photographs (4:5) with the name below. The <img class="bp-person__photo"> fills the
   framed box (object-fit: cover); without an image the slot shows as an empty paper panel with a
   fine frame and corner ticks. */
.bp-people { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 620px; margin-top: 40px; }
.bp-person { min-width: 0; }
.bp-person__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--ink), var(--ink)) 8px 8px / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 8px 8px / 1px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 8px) calc(100% - 8px) / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 8px) calc(100% - 8px) / 1px 14px no-repeat,
    linear-gradient(var(--red-bright), var(--red-bright)) 0 0 / 40px 2px no-repeat,
    rgba(255, 252, 244, .55);
}
img.bp-person__photo { height: auto; background: var(--paper); }
.bp-person__name {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Chapter index: in-page links, set like a drawing's sheet list */
.bp-index { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }
.bp .bp-index a {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; align-items: center;
  font: 600 11.5px var(--font-technical);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.bp-index a span { font-weight: 500; color: var(--red-bright); letter-spacing: .1em; }
.bp .bp-index a:hover { color: var(--ink); }

/* ---------- Chapters ---------- */
.bp-chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, .34fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 104px);
  padding: clamp(48px, 9vh, 104px) 0;
  border-top: 1px solid var(--line-strong);
  scroll-margin-top: 16px;
}
.bp-chapter::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 48px; height: 2px;
  background: var(--red-bright);
  transform-origin: left center;
}
.bp-chapter__meta { display: flex; flex-direction: column; gap: 14px; }
/* The chapter number, outlined like a drawing's callout (solid ink where outlines aren't supported) */
.bp-chapter__num {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(96px, 11vw, 176px);
  line-height: .8;
  letter-spacing: -.01em;
  color: var(--ink-3);
}
@supports (-webkit-text-stroke: 1px black) {
  .bp-chapter__num { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
}
.bp-chapter__label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 11.5px var(--font-technical);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.bp-chapter__label::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.bp-chapter__body { max-width: 720px; padding-top: 6px; }
.bp-chapter__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(38px, 4.4vw, 72px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.bp-chapter__title em { font-style: normal; color: var(--red-bright); }
.bp-chapter__title > span { display: block; }
.bp-chapter__text { margin-top: 20px; max-width: 600px; font: 400 17px/1.75 var(--font-body); color: var(--ink-2); }
.bp-chapter__text + .bp-chapter__text { margin-top: 14px; }
.bp-chapter__text strong { font-weight: 500; color: var(--ink); }
.bp-chapter__text em { font-style: normal; color: var(--red-bright); }

/* 02: mirrored, the number on the right, aligned to the outer edge */
.bp-chapter--alt { grid-template-columns: minmax(0, 1fr) minmax(170px, .34fr); }
.bp-chapter--alt .bp-chapter__meta { order: 2; align-items: flex-end; text-align: right; }
.bp-chapter--alt .bp-chapter__label { flex-direction: row-reverse; }

/* 03: the statement, set between the end ticks of a dimension line */
.bp-statement {
  position: relative;
  display: inline-block;
  margin-top: 22px;
  padding: 14px 18px 0;
  border-top: 1px solid var(--ink);
  font: 600 13px var(--font-technical);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.bp-statement::before, .bp-statement::after { content: ""; position: absolute; top: -6px; width: 1px; height: 11px; background: var(--ink); }
.bp-statement::before { left: 0; }
.bp-statement::after { right: 0; }

/* 04: the areas as numbered editorial rows; hover nudges the title and draws a red rule */
.bp-areas { list-style: none; margin-top: 34px; border-bottom: 1px solid var(--line-strong); }
.bp-area {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.bp-area:first-child { border-top-color: var(--line-strong); }
.bp-area::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--red-bright);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.bp-area__num { padding-top: 4px; font: 500 11px var(--font-technical); letter-spacing: .22em; color: var(--red-bright); }
.bp-area__title {
  font: 600 14px/1.45 var(--font-technical);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.bp-area__text { margin-top: 6px; max-width: 520px; font: 400 15px/1.6 var(--font-body); color: var(--ink-2); }
@media (hover: hover) {
  .bp-area:hover .bp-area__title { transform: translateX(5px); }
  .bp-area:hover::after { transform: scaleX(1); }
}

/* 05 and the closing statement */
.bp-chapter--last { padding-bottom: clamp(40px, 7vh, 72px); }
.bp-closing {
  position: relative;
  padding: clamp(40px, 7vh, 80px) 0 clamp(48px, 8vh, 88px);
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(48px, 7.6vw, 124px);
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink);
}
.bp-closing::before { content: ""; position: absolute; left: 0; top: -1px; width: 96px; height: 2px; background: var(--red-bright); }
.bp-closing span, .bp-closing em { display: block; }
.bp-closing em { font-style: normal; color: var(--red-bright); }

/* The way on: into the booking flow or the designs */
.bp-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--line);
}
.bp-next__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.bp-next__title em { font-style: normal; color: var(--red-bright); }
.bp-next__ctas { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.bp .bp-next .btn { padding: 15px 30px; font-size: 13px; text-transform: uppercase; }

/* ---------- Tablet + phone ---------- */
@media (max-width: 900px) {
  .bp-chapter, .bp-chapter--alt { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bp-chapter__meta, .bp-chapter--alt .bp-chapter__meta { order: 0; flex-direction: row; align-items: flex-end; gap: 18px; text-align: left; }
  .bp-chapter--alt .bp-chapter__label { flex-direction: row; }
  .bp-chapter__num { font-size: clamp(72px, 14vw, 112px); }
  .bp-chapter__label { padding-bottom: 8px; }
}
@media (max-width: 600px) {
  .bp-title { font-size: min(64px, 15vw); }
  .bp-lead { font-size: 16.5px; }
  .bp-index { gap: 0 18px; }
  .bp-people { gap: 16px; margin-top: 32px; }
  .bp-person__name { margin-top: 10px; font-size: min(22px, 5.6vw); }
  .bp-chapter__title { font-size: min(40px, 10.5vw); }
  .bp-chapter__text { font-size: 16px; line-height: 1.7; }
  .bp-statement { font-size: 11.5px; letter-spacing: .22em; padding: 12px 12px 0; }
  .bp-area { grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; }
  .bp-area__title { font-size: 13px; }
  .bp-closing { font-size: min(48px, 10.8vw); }   /* keeps "NOT WAITED FOR." on one line */
  .bp-next__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .bp-next__ctas .btn { text-align: center; }
}
/* Very narrow screens: the two photo slots stack. */
@media (max-width: 340px) {
  .bp-people { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bp-hero > * { animation: bp-up .8s cubic-bezier(.2, .7, .2, 1) both; }
  .bp-hero > :nth-child(2) { animation-delay: .08s; }
  .bp-hero > :nth-child(3) { animation-delay: .16s; }
  .bp-hero > :nth-child(4) { animation-delay: .24s; }
  .bp-hero > :nth-child(5) { animation-delay: .32s; }
}
/* Reveal on scroll, once per element: reveal.js adds .is-in when an element first comes into view.
   (Not scroll-linked animations: Chrome recomputed those on every scrolled frame, which made the page
   stall on large or busy screens.) Without .bp-js (no script) everything is simply shown. */
@media (prefers-reduced-motion: no-preference) {
  .bp-js .bp-reveal, .bp-js .bp-chapter__meta {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  }
  .bp-js .bp-chapter::before, .bp-js .bp-closing::before {
    transform: scaleX(0);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1) .1s;
  }
  .bp-js .bp-reveal.is-in, .bp-js .bp-chapter__meta.is-in { opacity: 1; transform: none; }
  .bp-js .bp-chapter.is-in::before, .bp-js .bp-closing.is-in::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-area::after, .bp-area__title { transition: none; }
  .bp-area:hover .bp-area__title { transform: none; }
}
@keyframes bp-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes bp-draw { from { transform: scaleX(0); } }