/* ==========================================================================
   INITIAL HERO  —  restored specimen-poster hero.  (v11)

   ONE DESIGN, FOUR CROPPED COMPOSITIONS.
   Every width: left editorial column, ONE oversized leaf entering from the
   right beyond the viewport, the measurement between them. Narrowing the
   viewport slides the leaf further off the right (smaller visible slice,
   same giant scale) — never stacks copy over leaf, never shrinks both.
   The figure is vertically centred, so the hero stays "one cover".

   specimen-87a.png (1731x909) baked marks, all kept OUT of frame:
     wordmark x0.04-0.16 | headline x0.03-0.50 | Specimen label x0.53-0.62 /
     y0.77-0.87 | old crosshair x0.45-0.585 / y0.71-0.90 | ruler x0.90-1.00
   Safe window every composition:  PNG x [~0.51, <=0.85]  y [0, ~0.63]
   -> the leaf's LEFT OUTER CONTOUR plus the pale paper just outside it.

   .ihero__leafwindow (overflow:clip, edges feathered) crops an OVERSIZED
   <img> positioned by plain percentages. No object-fit. The figure is not
   clipped, so the measurement can reach across into the copy. .ihero clips
   the whole field at the section edge.
   ========================================================================== */

.ihero {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: var(--color-paper);
  display: grid;
  align-content: center;
  min-height: min(92svh, 50rem);
  max-width: 100%;
}

/* the "Independent Research & Development / Shizuoka" line sits directly under
   the USOHONTO wordmark (took the old tagline's slot). .mono supplies the
   mono/uppercase/label treatment; this only places it. */
.wordmark-eyebrow {
  position: absolute;
  left: 0;
  top: 64px;
  white-space: nowrap;
  color: var(--color-ink);
}
@media (max-width: 45rem) {
  .wordmark-eyebrow { top: 46px; }
}

/* ---- left editorial column --------------------------------------------- */
.ihero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.3rem, 2.8vh, 2.6rem);
  width: 44%;
  min-width: 21rem;
  padding: clamp(2.25rem, 5vh, 4rem) var(--page-gutter);
}
.ihero__eyebrow { margin: 0; color: var(--color-ink); }
.ihero__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-sans);
  font-weight: 410;
  font-size: clamp(2.7rem, 3.5vw, 4.5rem);
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
}
.ihero__br { display: none; }
.ihero__br--abc { display: inline; }          /* break after "fiction" */
.ihero__br--e { display: inline; }            /* break after "becomes" -> 3 lines: "Yesterday's fiction" / "becomes" / "today's reality." */
.ihero__lede {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.8rem);
  max-width: 28rem;
  margin-top: clamp(2rem, 5vh, 4rem);         /* gap between the English title and the Japanese copy */
}
.ihero__lede p {
  margin: 0;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.05vw, 1.2rem);
  line-height: var(--leading-body);
}
.ihero__lede .ihero__claims {   /* one shrink-to-content box (width = the widest of the
                                   two lines) sitting flush-left */
  width: max-content;
  max-width: 100%;
  justify-self: start;
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.8rem);
}
.ihero__lede .ihero__claim {   /* both "できる／本当に" blocks: centred inside that shared box,
                                  so their centres line up */
  text-align: center;
  font-weight: 700;
}
.ihero__link { min-width: 0; width: max-content; max-width: 100%; }

/* ---- ObservationFigure : oversized leaf + measurement, ONE unit -------- */
.ihero__figure {
  position: absolute;
  z-index: 1;
  margin: 0;
  pointer-events: none;
  overflow: visible;                            /* measurement reaches into the copy */
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 56%;
  aspect-ratio: 1.12;
}
.ihero__leafwindow {
  position: absolute;
  inset: 0;
  overflow: clip;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 46px), transparent),
    linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 46px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 46px), transparent),
    linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 46px), transparent);
  mask-composite: intersect;
}
.ihero__leaf {
  position: absolute;
  top: 0;
  left: -138%;                                  /* PNG x 0.511 at the window's left edge */
  width: 270%;                                  /* window shows 0.370 of the PNG width   */
  max-width: none;                              /* theme has a global img{max-width:100%} */
  min-width: 0;
  height: auto;
  mix-blend-mode: darken;
}

/* Measurement — old .specimen-label crosshair, in the figure's own space. */
.ihero__measure {
  position: absolute;
  left: 4%;
  top: 68%;
  color: var(--color-accent);
}
.ihero__mlabel { position: absolute; left: 0; top: 0; line-height: 1.65; white-space: nowrap; }
.ihero__rule { position: absolute; pointer-events: none; }
.ihero__rule--v {
  left: -2.3rem; top: -5.1rem; width: 0.7rem; height: 8rem;
  background:
    radial-gradient(circle at 50% 100%,
      var(--color-paper) 0 0.26rem, var(--color-accent) 0.28rem 0.34rem, transparent 0.36rem),
    linear-gradient(90deg,
      transparent calc(50% - 0.5px), var(--color-accent) calc(50% - 0.5px),
      var(--color-accent) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.ihero__rule--h {
  left: -10.5rem; top: -5.1rem; width: 10.8rem; height: 0.7rem;
  background:
    radial-gradient(circle at 0 50%, var(--color-accent) 0 0.18rem, transparent 0.2rem),
    linear-gradient(0deg,
      transparent calc(50% - 0.5px), var(--color-accent) calc(50% - 0.5px),
      var(--color-accent) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* ======================================================================
   B  —  NARROW DESKTOP (1024-1439)
   ====================================================================== */
@media (max-width: 1439.98px) {
  .ihero { min-height: min(92svh, 48rem); }
  .ihero__grid { width: 45%; min-width: 20rem; }
  .ihero__title { font-size: clamp(2.6rem, 3.5vw, 3.9rem); }
  .ihero__figure { width: 55%; aspect-ratio: 1.13; }
  .ihero__leaf { left: -140%; width: 274%; }    /* PNG x 0.511 .. 0.876 */
  .ihero__measure { left: 4%; top: 66%; }
}

/* ======================================================================
   C  —  TABLET (768-1023) : copy column widens, leaf slides further off
   the right. Still left copy / right leaf — NO stacking.
   ====================================================================== */
@media (max-width: 1023.98px) {
  .ihero { min-height: min(92svh, 44rem); }
  .ihero__grid {
    width: 48%;
    min-width: 0;
    padding: clamp(2rem, 5vh, 3.5rem) var(--page-gutter);
  }
  .ihero__title { font-size: clamp(2.2rem, 4.2vw, 3rem); }  /* natural wrap -> short last line */
  .ihero__lede { max-width: 20rem; }
  .ihero__figure { width: 50%; aspect-ratio: 1.06; }
  .ihero__leaf { left: -152%; width: 298%; }     /* PNG x 0.510 .. 0.845 */
  .ihero__measure { left: 6%; top: 40%; }         /* C/D : compact marker sits ON the leaf, no arm across the copy */
  .ihero__rule--h { display: none; }
  .ihero__rule--v { left: 0; top: -2.6rem; height: 4.6rem; }
  .ihero__mlabel { left: 0.6rem; top: -0.4rem; }
}

/* ======================================================================
   D  —  MOBILE (<=767) : copy set for the narrow column; ONE bold fragment
   of the giant leaf intrudes from the right at the copy's height. Short
   hero — one cover. Compact measurement sits ON the leaf (no long arm to
   cross the cramped copy).  NO stacking.
   ====================================================================== */
@media (max-width: 767.98px) {
  .ihero { min-height: min(82svh, 27rem); }
  .ihero__grid {
    width: 62%;
    min-width: 0;
    padding: clamp(1.75rem, 5vh, 3rem) var(--page-gutter);
    gap: 1rem;
  }
  .ihero__title {
    font-size: clamp(1.4rem, 5.9vw, 1.95rem);
    line-height: 1.1;
    max-width: none;
  }
  /* title breaks are width-independent now: "Yesterday's fiction" / "becomes" / "today's reality." */
  .ihero__lede { max-width: none; }
  .ihero__lede p { font-size: 0.92rem; line-height: 1.7; }
  .ihero__link { font-size: 0.78rem; }

  .ihero__figure { width: 41%; aspect-ratio: 0.58; }
  .ihero__leaf { left: -286%; width: 560%; }     /* PNG x 0.511 .. 0.690 : contour + body-start */

  .ihero__measure { left: 9%; top: 36%; }        /* origin ON the leaf, right of the copy */
  .ihero__rule--h { display: none; }
  .ihero__rule--v { left: 0; top: -2.2rem; height: 3.8rem; }
  .ihero__mlabel { left: 0.5rem; top: -0.35rem; font-size: 0.58rem; }
}

@media (max-width: 23.4375rem) {              /* <=375 */
  .ihero__grid { width: 63%; }
  .ihero__title { font-size: clamp(1.35rem, 5.7vw, 1.8rem); }
  .ihero__figure { width: 39%; }
}

/* ---- dot / creature presentation stays hidden on the front page ------- */
.knowledge-creature-v2-layer,
.creature-field-canvas,
.wordmark-creature .wordmark-canvas { display: none !important; }
.wordmark-creature.is-creature-ready .wordmark-text,
.wordmark-creature.is-hero-field-ready .wordmark-text {
  position: static !important; width: auto !important; height: auto !important;
  margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important;
  opacity: 1 !important;   /* header-creature.js runs on sub-pages and adds is-creature-ready; components.css then sets opacity:0 expecting the (now-disabled) creature canvas to replace the text — restore it */
}
.knowledge-creature-v2-source-hidden,
.knowledge-creature-v2-target-hidden { opacity: 1 !important; }
html, body { overflow-x: clip; }

/* ---- brand mark (字ナシ bird logo) beside the USOHONTO wordmark ------- */
.wordmark-creature {
  display: flex;
  align-items: center;
  width: auto;
  justify-self: start;
}
.wordmark-mark {
  display: block;
  flex: none;
  width: auto;
  height: 46px;
  margin-left: 14px;
}
@media (max-width: 45rem) {
  .wordmark-mark { height: 34px; margin-left: 10px; }
}