/* ============================================================
   OT. R2 - approved market direction.
   Six sections: motion hero, screen adaptation, three curated
   projects, three-step process, compact deliverables, contact close.
   Loads after site.css and reuses its screen-geometry machinery.
   Warm ivory, near-black, one tobacco accent from tokens.css.
   ============================================================ */

.adapt, .cases, .flow, .incl, .close-r2 {
  padding-block: var(--section-pad-y);
  position: relative;
}
.incl { padding-block: clamp(48px, 7vh, 88px); }

/* ------------------------- 1 - HERO ------------------------- */
.hero-r2 {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0b0906;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8,6,4,0.88) 0%, rgba(8,6,4,0.45) 34%, rgba(8,6,4,0.10) 62%, rgba(8,6,4,0.42) 100%);
}
.hero-in {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block-end: clamp(56px, 11vh, 128px);
  padding-block-start: clamp(96px, 18vh, 180px);
  /* The hero copy block spans the full width and its padding swallowed every
     click on the background, so clicking the hero selected the SECTION and the
     background image could not be reached or swapped at all (Moreno 2026-08-29).
     Nothing in the padding band is interactive, so it should not eat pointers.
     Children opt back in below. */
  pointer-events: none;
}
.hero-in > *,
.hero-h,
.hero-s,
.hero-act,
.hero-act .btn { pointer-events: auto; }
.hero-h {
  font-family: var(--tt-hero-face);
  font-size: var(--fs-hero);
  font-weight: var(--tt-hero-fw);
  line-height: var(--tt-hero-lh);
  letter-spacing: var(--tt-hero-ls);
  color: #f7f4ef;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0,0,0,0.5);
}
.hero-s {
  margin-top: clamp(14px, 2vh, 22px);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(247,244,239,0.86);
  max-width: 40ch;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
.hero-act { margin-top: clamp(26px, 4vh, 40px); display: flex; }
.hero-act .btn-primary {
  background: var(--dk-gold);
  border-color: var(--dk-gold);
  color: #16100a;
}
.hero-act .btn-primary:hover {
  background: var(--dk-gold-soft);
  border-color: var(--dk-gold-soft);
}

/* ------------------ 2 - SCREEN ADAPTATION ------------------ */
.adapt-h {
  max-width: 22ch;
  text-wrap: balance;
  margin-bottom: clamp(30px, 5vh, 60px);
}
/* --- shape index ---
   One symbol per screen shape at its true ratio, all normalised to one height so
   the row IS the ratio comparison. non-scaling-stroke keeps every outline the
   same device weight even though each viewBox scales differently. Small by
   instruction: it is an index, not a display element. */
.shape-index {
  list-style: none;
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: clamp(12px, 2.2vw, 26px);
  margin: 0 0 clamp(24px, 3.8vh, 44px);
  padding: 0;
  width: 100%;
}
.si {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.si-g {
  display: block;
  height: clamp(19px, 2.1vw, 28px);
  width: auto;
  max-width: 100%;
  color: var(--gold);
  /* warm tint, not a neutral grey: a grey fill fights the cream ground */
  fill: color-mix(in srgb, currentColor 12%, transparent);
  stroke: currentColor;
  stroke-width: 1.4px;
}
.si-r {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-3);
  white-space: nowrap;
}

.adapt-lead { margin: 0 0 clamp(14px, 2.4vw, 26px); }
.adapt-lead .scr-shape {
  border-radius: 10px;
  border-color: var(--border);
}
.adapt-lead .scr-wide { aspect-ratio: 16 / 9; }

/* Mobile remains one deliberate column. The desktop recut below restores
   width rhythm without shrinking any assigned screen below a useful proof size. */
.adapt-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "strip" "dome";
  gap: clamp(26px, 4.4vh, 58px);
  align-items: start;
}
.adapt-cell { margin: 0; min-width: 0; }
.adapt-strip { grid-area: strip; }
.adapt-dome { grid-area: dome; }

.adapt-note {
  margin-top: clamp(22px, 3.4vh, 40px);
  font-size: var(--fs-body-sm);
  color: var(--ink-3);
  max-width: 52ch;
}

/* --------------- 3 - THREE CURATED PROJECTS --------------- */
.cases .kicker { margin-bottom: clamp(28px, 4.5vh, 54px); }

.case {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "art" "txt" "fit";
  gap: clamp(20px, 3.2vh, 38px);
  align-items: start;
  padding-block: clamp(44px, 8vh, 96px);
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.case:first-of-type { border-top: 0; padding-block-start: 0; }

/* each selected project lets its own colour touch the section,
   sampled from that project media rather than a fixed palette */
.case::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  width: 100%;
  pointer-events: none;
  opacity: .5;
  z-index: 0;
  background: radial-gradient(82% 38% at 50% 0%, var(--case-accent, transparent), transparent 72%);
}
.case[data-accent="desert"] { --case-accent: rgba(176, 91, 35, 0.38); }
.case[data-accent="letter"] { --case-accent: rgba(154, 109, 55, 0.28); }
.case[data-accent="garden"] { --case-accent: rgba(49, 73, 122, 0.40); }

.case > * { position: relative; z-index: 1; }

.case-art { grid-area: art; margin: 0; }
.case-art video,
.case-art img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #0b0906;
}
/* The case loops used to carry the pre-R2 class `cell-media`, which site.css
   pins to position:absolute;inset:0 for the old framed slots. Inside .case-art
   they escaped to the .case box, collapsed their own box to 0 height and painted
   the artwork straight under the heading. Renamed to .case-media (Moreno's
   vertical pass, 2026-08-29). Same trap as the .scr-cap collision: check this
   stylesheet for an existing class before reusing a name.
   preload="none" also leaves a <video> with no intrinsic size, so reserve the
   1280x512 box up front or the row still jumps on load. */
.case-media {
  position: static;
  aspect-ratio: 1280 / 512;
  object-fit: cover;
}
.case-shaped .u-screen,
.case-shaped .scr-shape { border-color: var(--border); }
.case-shaped .case-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}
.case-shaped .u-oval,
.case-shaped .u-dead,
.case-shaped .scr-safe,
.case-shaped .scr-dead { z-index: 2; }
.case-txt { grid-area: txt; align-self: auto; }
.case-h {
  font-family: var(--tt-h-md-face);
  font-size: var(--fs-h-md);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.case-p {
  margin-top: 12px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34ch;
}
.case-fit { grid-area: fit; margin: 0; align-self: start; }
.case-fit .u-screen,
.case-fit .scr-shape { border-color: var(--border); }

/* --- ONE READING EDGE (grid repair, Moreno 2026-08-30) ---
   The centred 900px media column was the defect. Text lived in the 1107px content
   column and hung off the reading edge at x=1266, while every media block was
   centred at x=1162. Measured at 1440: FOUR different right edges and FIVE
   different left edges down one page. That is what "something is off" was.
   Media now fills the same content column as the type, so every element on the
   page starts on one edge and ends on one edge. */
.adapt-lead,
.adapt-cell,
.case-art,
.case-fit,
.case-txt {
  width: 100%;
  margin-inline: 0;
}
.case-p { max-width: 56ch; }

/* ---------------------- 4 - PROCESS ---------------------- */
.flow .kicker { margin-bottom: clamp(24px, 4vh, 46px); }
.flow-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vh, 34px);
  width: 100%;
}
.flow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num t" ". b";
  column-gap: 14px;
  row-gap: 6px;
  align-items: baseline;
}
.f-num {
  grid-area: num;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.f-t {
  grid-area: t;
  font-family: var(--font-display);
  font-size: var(--fs-h-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.f-b {
  grid-area: b;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--ink-2);
}
.flow-proof {
  margin-top: clamp(30px, 4.6vh, 58px);
  padding-top: clamp(18px, 2.6vh, 28px);
  border-top: 1px solid var(--border);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink);
  max-width: 46ch;
}

/* ------------------ 5 - WHAT IS INCLUDED ------------------ */
.flow-included {
  margin-top: clamp(28px, 4.4vh, 54px);
  padding-top: clamp(22px, 3.2vh, 34px);
  border-top: 1px solid var(--border-soft);
}
.flow-included-h {
  font-family: var(--font-display);
  font-size: var(--fs-h-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: clamp(18px, 2.8vh, 28px);
}
.incl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.2vh, 24px);
  width: 100%;
}
.incl-item {
  font-family: var(--font-display);
  font-size: var(--fs-h-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--gold);
}

/* ------------------- 6 - CONTACT CLOSE ------------------- */
.close-in { text-align: center; }
.close-h {
  font-family: var(--tt-h-lg-face);
  font-size: var(--fs-h-lg);
  font-weight: var(--tt-h-lg-fw);
  line-height: 1.1;
  letter-spacing: var(--tt-h-lg-ls);
  color: var(--ink);
}
.close-s {
  margin: clamp(14px, 2vh, 22px) auto 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
}
.close-in .contact-actions {
  margin-top: clamp(26px, 4vh, 40px);
  justify-content: center;
}
.close-in .contact-note { margin-top: 16px; }

/* ----------------------- ACCESSIBILITY ----------------------- */
section[id] { scroll-margin-top: 92px; }
#main-content:focus { outline: none; }

/* ----------------------- RESPONSIVE ----------------------- */
@media (min-width: 901px) {
  .adapt .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .72fr);
    grid-template-areas:
      "title title"
      "index index"
      "lead row"
      "note note";
    column-gap: clamp(34px, 4.4vw, 72px);
    row-gap: clamp(24px, 3.4vh, 40px);
    align-items: start;
  }
  .adapt-h { grid-area: title; margin-bottom: 0; justify-self: end; }
  .shape-index { grid-area: index; margin: 0; }
  .adapt-lead { grid-area: lead; margin: 0; }
  .adapt-row {
    grid-area: row;
    height: 100%;
    align-content: space-between;
    gap: clamp(28px, 4vh, 48px);
  }
  .adapt-note { grid-area: note; margin-top: 0; justify-self: end; }

  .cases .kicker { margin-bottom: clamp(24px, 3.2vh, 38px); }
  .case {
    grid-template-columns: minmax(270px, .66fr) minmax(0, 1.55fr);
    grid-template-areas: "txt art";
    gap: clamp(38px, 4.6vw, 76px);
    align-items: center;
    padding-block: clamp(54px, 7vh, 82px);
  }
  .case:nth-of-type(even) {
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, .66fr);
    grid-template-areas: "art txt";
  }
  .case-txt { max-width: 34ch; justify-self: stretch; }
  .case-p { max-width: 34ch; }

  .flow-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); }
  .flow-step {
    grid-template-columns: 1fr;
    grid-template-areas: "num" "t" "b";
    align-content: start;
    row-gap: 10px;
  }
  .flow-proof { max-width: none; }
  .incl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
}

@media (max-width: 900px) {
  .case { gap: clamp(16px, 3vw, 24px); }
  .case-p { max-width: none; }
  .adapt-row { gap: clamp(22px, 3.4vh, 34px); }
}

@media (max-width: 700px) {
  .adapt-h { max-width: none; }
  .hero-h { max-width: 12ch; }
  .hero-s { max-width: 34ch; }
  .hero-act { width: 100%; }
  .hero-act .btn { flex: 1; text-align: center; }
  .hero-in { padding-block-end: clamp(44px, 8vh, 72px); }
}

/* ------------------- REDUCED MOTION -------------------
   The hero video stays in place but is never played (site.js
   skips play() under this preference), so the <video> renders
   its poster frame as a still. No autoplay, no duplicate asset. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   SECTION MARKER (Moreno 2026-08-30)
   The page had no punctuation between sections: six blocks of
   content separated only by a ground change. This is the pause.

   A hairline on the reading edge, then three screen shapes at
   true ratio. One slot changes at a time and no shape is ever on
   the line twice, which with four shapes means one is always
   resting off-line and is the only legal thing a slot can become.
   Live SVG, not a GIF, so it recolours per ground and stops dead
   under prefers-reduced-motion.
   ============================================================ */
.sec-mark {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  padding-block: clamp(34px, 6vh, 72px) 0;
}
.sec-mark .sm-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-soft);
}
.sec-mark .sm-slots {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
}
.sec-mark .sm-slot {
  width: clamp(38px, 4.4vw, 58px);   /* fixed, so the line never reflows */
  height: clamp(11px, 1.3vw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-mark .sm-slot svg {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  fill: var(--gold);
  opacity: .85;
  transition: opacity .18s linear;
}
.sec-mark .sm-slot[data-blank] svg { opacity: 0; }

/* on a black ground the deep tobacco dies, lift it */
[data-bg="black"] .sec-mark .sm-rule { background: rgba(255,255,255,0.14); }
[data-bg="black"] .sec-mark .sm-slot svg { fill: #b86230; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sec-mark .sm-slot svg { transition: none; }
}