/* ============================================================
   JINSEN VISION DECK — PAGE-SPECIFIC LAYOUTS (pages 3,6,7,8,10)
   + IMAGE PLACEHOLDER SYSTEM
   Image zones are labeled drop-targets. Jona replaces the
   background-image (or <img src>) with real assets later.
   ============================================================ */

/* ---------- IMAGE PLACEHOLDER ---------- */
.imgph {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background-color: var(--c-hairline);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;        /* never tile, regardless of variant */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* desaturated documentary treatment per brief §06 */
  filter: grayscale(0.4);
}
.is-dark .imgph { background-color: var(--d-surface-2); }

/* a real photo dropped in — documentary treatment per brief §06 */
.imgph--filled {
  background-color: var(--c-ink);   /* matte fill behind, no placeholder grey */
  background-size: cover;
  background-position: center;
  filter: grayscale(0.4) contrast(1.02);   /* ~40% desat, faint contrast lift */
}
/* product-on-black shot — show the whole subject (contain), no crop, matte black panel */
.imgph--product {
  background-color: #000;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: none;
}
/* contained image on its own panel — whole subject visible, no crop */
.imgph--contain {
  background-color: var(--c-cream);   /* light panel suits light-ground images */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: grayscale(0.15) contrast(1.02);
}
/* fill the frame edge-to-edge — cover, never tile (crops to fit). No panel fill. */
.imgph.imgph--fill,
.is-dark .imgph.imgph--fill {
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: grayscale(0.15) contrast(1.02);
}

/* ---------- MINIMAL CAROUSEL (page 2 gallery) ----------
   Stacked slides, opacity cross-fade (Lexus spec §3.1), dot pagination.
   0px radius preserved on the frame. */
.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--c-ink);
}
.carousel__track { position: absolute; inset: 0; }
.carousel__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.4) contrast(1.02);   /* documentary treatment per brief §06 */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;     /* smooth cross-fade, no structural jump */
  pointer-events: none;
}
.carousel__slide.is-active { opacity: 1; pointer-events: auto; }

/* dot pagination — sits over the image, bottom-centre */
.carousel__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--space-16);
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  z-index: 3;
}
.carousel__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: #fff;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-lexus), transform var(--dur-fast) var(--ease-lexus), background var(--dur-fast) var(--ease-lexus);
}
.carousel__dot.is-active {
  opacity: 1;
  transform: scale(1.3);
  background: var(--c-jinsen-red);   /* active = palette red, matches folio dots */
}

/* tiny circular prev/next arrows inside the carousel */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-lexus), background var(--dur-fast) var(--ease-lexus);
}
.carousel:hover .carousel__arrow { opacity: 1; }
.carousel__arrow:hover { background: #000; }
.carousel__arrow--prev { left: var(--space-12); }
.carousel__arrow--next { right: var(--space-12); }
.carousel__arrow .ic { font-size: 16px; }
.carousel__arrow svg { width: 16px; height: 16px; }

/* diagonal hatch so an empty placeholder reads as "image goes here" */
.imgph:not([style*="url"])::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 22px,
    rgba(107,107,107,0.07) 22px 23px
  );
}
.imgph__tag {
  position: relative;
  z-index: 2;
  margin: var(--space-16);
  padding: var(--space-8) var(--space-8);   /* 6×9px → 8dp token (round up) */
  background: rgba(244,244,242,0.86);
  color: var(--c-grey);
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  font-size: 0.56rem;
  line-height: 1.3;
  max-width: 80%;
}
.is-dark .imgph__tag { background: rgba(14,14,15,0.82); color: var(--d-grey); }

/* image caption sitting beneath an image, mono, per brief */
.imgcap {
  margin-top: var(--space-12);
  color: var(--c-grey);
}
.is-dark .imgcap { color: var(--d-grey); }

/* a full-height image column on a prose page */
.img-col {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 2% 0;
}
.img-col .imgph { flex: 1 1 auto; }

/* ============================================================
   ALTERNATING RIBBON MATRIX (Lexus spec §2.2)
   50/50 media | content split. Alternates direction slide to slide
   to control left-right reading pace. Internal cadence per spec:
   tag → (micro-sm 24) → title → (mid-md 48) → text → (mid-md 48) → link.
   gutter-grid 32 between media canvas and content rail.
   All intervals map to existing 8dp tokens — no new tokens added.
   ============================================================ */
.ribbon {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 50% media / 50% content */
  column-gap: var(--space-32);         /* = gutter-grid 32px */
  align-items: stretch;                /* media fills its full half-height */
  min-height: 72vh;
}
/* content stays vertically centred within its (stretched) column */
.ribbon__content { justify-content: center; }
/* compact ribbon — leaves room for an element below (pull-quote, etc.) */
.ribbon--compact { min-height: 46vh; }
.ribbon__media { align-self: stretch; display: flex; align-items: center; justify-content: center; }
.ribbon__media .imgph,
.ribbon__media .zero-field { width: 100%; }
/* object-logo (page 4 diagram) sits centred as a block, not stretched */
.ribbon__media .object-logo { width: 100%; align-self: center; }
/* image media fills its whole half — column height drives a tall, full canvas */
.ribbon__media .img-col { width: 100%; height: 100%; padding: 0; }
.ribbon__media .img-col .imgph { flex: 1 1 auto; min-height: 68vh; }

/* content rail — snaps to the interior alignment margin */
.ribbon__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ribbon__content .eyebrow { margin-bottom: var(--space-24); }   /* micro-sm: tag → title */
.ribbon__content .page-head { margin-bottom: var(--space-48); } /* mid-md: title → text */
.ribbon__content .prose { margin-bottom: var(--space-48); }     /* mid-md: text → link */
.ribbon__content .prose:last-child { margin-bottom: 0; }

/* direction modifiers — flip media/content via grid order */
.ribbon--media-left  .ribbon__media   { order: 1; }
.ribbon--media-left  .ribbon__content { order: 2; padding-left: var(--space-24); }
.ribbon--media-right .ribbon__media   { order: 2; }
.ribbon--media-right .ribbon__content { order: 1; padding-right: var(--space-24); }

/* linear action link (Lexus spec §4.2) — inline, trailing arrow, sharp underline on hover */
.action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--c-jinsen-blue-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-lexus);
  cursor: default;
}
.is-dark .action-link { color: var(--d-blue); }
.action-link:hover { border-bottom-color: currentColor; }
.action-link .ic { font-size: 13px; }

/* ============================================================
   MOMENT PAGES (3, 10) — exhibition wall text, centered, sparse
   ============================================================ */
.moment .page { align-content: center; justify-items: center; text-align: center; }
.moment .moment-body { grid-column: 3 / 11; }
.moment .eyebrow { text-align: center; }
.moment .page-head {
  max-width: 22ch;
  margin-left: auto; margin-right: auto;
  white-space: normal;
}
.moment .prose { margin: 0 auto; }
.moment .prose p { max-width: 54ch; margin-left: auto; margin-right: auto; }

/* the single coloured line that lands a moment (blue or red) */
.moment-line {
  font-family: var(--font-subtext);
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  line-height: 1.3;
  margin-top: var(--space-48);
  max-width: 40ch;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.moment-line.red  { color: var(--c-jinsen-red); }
.is-dark .moment-line.red { color: var(--d-red); }
.moment-line.blue { color: var(--c-jinsen-blue-deep); }
.is-dark .moment-line.blue { color: var(--d-blue); }

/* ============================================================
   PAGE 3 — THE TENSION (flanked layout)
   Two image containers literalise the two worlds the text describes:
   the trade (left) and the new customer (right), with the argument
   sitting in the middle. The flanking media is the visual thesis.
   ============================================================ */
.tension .page { align-content: center; }

/* full-width headline band — spans the whole rail so it lands on ONE line */
.tension-head {
  grid-column: 1 / 13;
  text-align: center;
  margin-bottom: var(--space-32);
}
.tension-head .eyebrow { margin-bottom: var(--space-24); }
.tension-head .page-head {
  max-width: none;
  white-space: nowrap;       /* force single line; size clamps down to fit */
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  margin: 0 auto;
}

/* image | text | image */
.tension-grid {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;   /* image | text | image */
  column-gap: var(--space-32);              /* gutter-grid 32 */
  align-items: center;
}
.tension-media {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24) 0;    /* 24px top + bottom around the image frame */
}
/* square frames (1:1), capped so the block stays compact and centred */
.tension-media .imgph {
  flex: 0 0 auto;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  margin: 0 auto;
}

/* group of small pills beneath each image */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-48);    /* 48px — extra clearance above the pills */
}

/* sharp "pill" tag — icon + label, 0px radius per Lexus spec, hairline border.
   Used on page 3 to label the two worlds. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  align-self: center;
  padding: var(--space-8) var(--space-12);
  border: 0.5px solid var(--d-hairline);
  border-radius: 0;                 /* spec §3.1 — zero curve masking */
  background: rgba(255,255,255,0.02);
  color: var(--d-grey);
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  font-size: 0.84rem;        /* 1.5× of original 0.56rem */
  line-height: 1;
  white-space: nowrap;
}
.pill .ic {
  font-size: 21px;           /* 1.5× of original 14px */
  flex: 0 0 auto;
}
/* light-slide variant */
.slide--light .pill { border-color: var(--c-hairline); background: rgba(0,0,0,0.015); color: var(--c-grey); }
/* the trade pill leans blue (institution); the customer pill leans red (belief/heat) */
.pill--trade .ic    { color: var(--d-blue); }
.pill--customer .ic { color: var(--d-red); }
.slide--light .pill--trade .ic    { color: var(--c-jinsen-blue-deep); }
.slide--light .pill--customer .ic { color: var(--c-jinsen-red); }
/* a quiet vertical offset between the two worlds — asymmetry, not symmetry */
/* both image frames aligned level (asymmetric offset removed) */
.tension-media--left,
.tension-media--right { margin-top: 0; margin-bottom: 0; }

.tension-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
}
.tension-body .prose { margin: 0 auto var(--space-32); }
.tension-body .prose p { max-width: 38ch; margin-left: auto; margin-right: auto; }
.tension-body .moment-line { margin-top: 0; }

/* ---- hover-to-reveal red line between the two paragraphs ----
   Default: three blinking red dots hint that something is hidden.
   On hover: dots fade out, the red line expands (grid 0fr → 1fr),
   pushing para 1 up and para 2 down. Easing is slowed 75%. */
.tension-body { --reveal-dur: 1050ms; }   /* 600ms + 75% */

.tension-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-12);
  margin: var(--space-24) auto;       /* sits in the gap between the paragraphs */
  height: 6px;
  opacity: 1;
  transition: opacity 1050ms var(--ease-lexus), margin 1050ms var(--ease-lexus), height 1050ms var(--ease-lexus);
}
.tension-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--d-red);
  animation: dotPulse 1.8s ease-in-out infinite;
}
.tension-dots span:nth-child(2) { animation-delay: 0.3s; }
.tension-dots span:nth-child(3) { animation-delay: 0.6s; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.tension-revealer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--reveal-dur) var(--ease-lexus),
              margin var(--reveal-dur) var(--ease-lexus);
  margin: 0 auto;
  overflow: hidden;
}
.tension-revealer > .moment-line {
  min-height: 0;
  margin: 0 auto;                 /* zero margin so the 0fr collapse is complete */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--reveal-dur) var(--ease-lexus),
              transform var(--reveal-dur) var(--ease-lexus);
}

/* the two white paragraphs fade smoothly (they fade out on hover) */
.slide.is-active .tension-reveal > p.reveal {
  transition: opacity var(--reveal-dur) var(--ease-lexus);
}

/* on hover: dots vanish, white paragraphs fade to 0, red line expands */
.tension-reveal:hover .tension-dots {
  opacity: 0;
  height: 0;
  margin: 0 auto;
}
.slide.is-active .tension-reveal:hover > p.reveal {
  opacity: 0;
}
.tension-reveal:hover .tension-revealer {
  grid-template-rows: 1fr;
  margin: var(--space-48) auto;       /* 2× the previous space-24 */
}
.tension-reveal:hover .tension-revealer > .moment-line {
  opacity: 1;
  transform: none;
  transition-delay: 320ms;            /* fades in after the gap opens */
}

/* ============================================================
   THREE DIRECTIONS (page 6) — equal columns
   ============================================================ */
/* page 6 header sits close to the direction cards */
.directions-slide .tier-headwrap { margin-bottom: var(--space-8); }
.directions {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3%;
  margin-top: 0;
  align-items: start;
}
/* each direction: frame on top (letter→image on hover), text below */
.direction {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* frame — always visible. Dark-grey fill with a huge faint A/B/C letter as
   the visual guide. On hover, the real image fades in over the letter. */
.direction__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;              /* ~1.35× taller than the prior 4:3 */
  margin-bottom: var(--space-24);
  background: var(--d-surface-2);   /* dark grey panel */
  overflow: hidden;
  container-type: size;             /* enables cqh sizing for the letter */
}
.direction__letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-subtext);   /* OT Jubilee */
  font-weight: 500;
  /* large — fills the frame; scales with frame height via cqh, capped */
  font-size: clamp(120px, 90cqh, 320px);
  line-height: 1;
  color: #000;                        /* black letter on the dark-grey fill */
  user-select: none;
  transition: opacity var(--dur-med) var(--ease-lexus);
}
.direction__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(0.2) contrast(1.02);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-slow) var(--ease-lexus),
              transform var(--dur-slow) var(--ease-lexus);
}
/* on hover: letter dims away, image fades in */
.direction:hover .direction__letter { opacity: 0; }
.direction:hover .direction__img { opacity: 1; transform: none; }

.direction__text { display: flex; flex-direction: column; }
.direction__num { color: var(--c-grey); margin-bottom: var(--space-12); }
.direction__title {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.15;
  margin-bottom: 6px;              /* ~60% tighter than the prior 16px */
  min-height: 2.3em;               /* fits the 2-line titles, no big gap */
  white-space: normal;             /* titles wrap naturally (multi-line) */
  transition: color var(--dur-fast) var(--ease-lexus);
}
/* hovered direction title turns red */
.direction:hover .direction__title { color: var(--d-red); }
.direction__body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.34;
  letter-spacing: var(--track-body);
  margin-bottom: var(--space-16);
  text-wrap: pretty;
}
.direction__ref {
  color: var(--c-grey);
  padding-top: var(--space-12);
  border-top: 0.5px solid var(--c-hairline);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.direction__ref .ic { font-size: 15px; flex: 0 0 auto; color: var(--d-blue); }
.is-dark .direction__ref { border-top-color: var(--d-hairline); }

/* ============================================================
   PAGE 7 — the recommendation (clean two-column)
   ============================================================ */
.rec-content { justify-content: center; }

/* serif headline per director */
.rec-head {
  font-family: var(--font-subtext);   /* OT Jubilee serif */
  font-weight: 500;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin-bottom: var(--space-32);
}

/* the chosen-direction callout — label above, name large */
.rec-pick {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24) 0;
  margin-bottom: var(--space-32);
  border-top: 0.5px solid var(--d-hairline);
  border-bottom: 0.5px solid var(--d-hairline);
}
.rec-pick__label { color: var(--d-grey); }
.rec-pick__name {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: var(--track-headline);
}

/* ============================================================
   PAGE 8 — reference territory: 5-image strip
   ============================================================ */
.ref-strip {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4%;
  margin-top: var(--space-32);
  height: 46vh;
  max-height: 420px;
}
/* page 8 header row — title left, framing note right */
.ref-headwrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-48);
  margin-bottom: var(--space-32);
}
.ref-headwrap__left { flex: 0 0 auto; }
.ref-headwrap__left .page-head { margin-bottom: 0; }
.ref-headwrap__note {
  flex: 0 1 46%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: var(--track-body);
  color: var(--d-grey);
  max-width: 56ch;
  text-wrap: pretty;
}
.ref-headwrap__note { color: var(--d-type); }   /* readable on dark slide */

/* 3-up variant — fewer, larger frames */
.ref-strip--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  height: 52vh;
  max-height: 480px;
}
.ref-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  text-decoration: none;
  color: inherit;
}
.ref-cell .imgph { flex: 1 1 auto; transition: transform var(--dur-med) var(--ease-lexus); }
/* clickable affordance — slight lift + caption brightens on hover */
a.ref-cell:hover .imgph { transform: translateY(-4px); }
a.ref-cell:hover .imgcap { color: var(--d-type); }
/* page 8 reference frames fill pure white */
.ref-strip--3 .imgph,
.is-dark .ref-strip--3 .imgph.imgph--fill { background-color: #fff; }
/* NGK is a logo on white — sits with breathing room, not edge-to-edge */
.ref-strip--3 .imgph--contain {
  background-color: #fff;
  background-size: 58%;
}
.ref-close {
  grid-column: 2 / 12;
  margin-top: var(--space-48);
  text-align: center;
  font-family: var(--font-subtext);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.35;
  max-width: 60ch;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}

/* ---- PAGE 10 — closing wallpaper ---- */
.end-slide .slide-bg {
  filter: none;                     /* keep the car's contrast; it's already cinematic */
  background-position: center 60%;  /* show the car body/face, not just the roof */
}
/* centred scrim — darkens behind the centred text, lets the car breathe */
.end-scrim {
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(8,8,12,0.78) 0%, rgba(8,8,12,0.5) 45%, rgba(8,8,12,0.2) 100%),
    linear-gradient(180deg, rgba(8,8,12,0.45) 0%, rgba(8,8,12,0.15) 40%, rgba(8,8,12,0.55) 100%);
}
/* Jinsen mark — sign-off directly under the closing red line, centred */
.end-logo {
  margin: var(--space-8) auto 0;       /* gap reduced ~75% (32px → 8px) */
  width: clamp(144px, 14.4vw, 224px);  /* 20% smaller than original */
  z-index: 4;
}
.end-logo img { width: 100%; height: auto; display: block; }

/* all closing text reads white over the dark car */
.end-slide .moment-body,
.end-slide .page-head,
.end-slide .prose p { color: #fff; }
.end-slide .eyebrow { color: #fff; }
.end-slide .eyebrow .eyebrow__ic { color: #fff; }

/* register tag on the reference captions (page 8) */
.ref-reg {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: 600;
  letter-spacing: var(--track-mono);
}
.imgcap .ref-reg:not(.accent-blue):not(.accent-red) { color: var(--d-grey); }

/* ============================================================
   PAGE 4 / 5 helpers (continuity + second life already partly styled)
   ============================================================ */
.logo-object-cap { color: var(--c-grey); text-align: center; margin-top: var(--space-16); }

/* full-bleed atmospheric image beneath closing prose (page 10) */
.moment .img-band {
  grid-column: 2 / 12;
  height: 30vh;
  max-height: 260px;
  margin-top: var(--space-48);
}