/* ==========================================================================
   HOME — MOBILE LAYOUT  (phone only, <=600px)

   A ground-up phone composition of the HOME page: the desktop
   LEFT=SILENCE / RIGHT=OBSERVATION horizontal grid is re-authored as a
   vertical sequence of full-bleed "scenes", one section = one clear stage.
   This is NOT a scaled-down desktop — copy leads, visuals take the whole
   width, the dead air between stages is removed while each stage keeps room
   to breathe.

   Loaded AFTER home-hero.css + home-editorial.css, on template-home.php
   only. EVERY rule lives inside the @media (max-width:600px) block, so the
   tablet / desktop cascade is byte-for-byte untouched. No markup, copy,
   order, link or interaction changes — presentation only.
   ========================================================================== */

@media (max-width: 600px) {

  /* =====================================================================
     HEADER — wordmark first; the eyebrow and Menu step back
     ===================================================================== */
  .site-header {
    height: auto;
    min-height: var(--header-height);
    padding-block: 0.85rem;
    column-gap: 0.6rem;
    border-bottom: 1px solid var(--color-line);
  }
  .wordmark-creature {
    height: 50px;
    width: auto;
  }
  .wordmark-text {
    font-size: 26px;
    line-height: 38px;
  }
  .wordmark-mark {
    height: 28px;
    margin-left: 8px;
  }
  .wordmark-eyebrow {
    top: 38px;
    font-size: 0.48rem;
    letter-spacing: 0.03em;
    color: var(--color-muted);
  }
  .mobile-menu summary {
    border: 1px solid var(--color-line);
    padding: 0.5rem 0.85rem;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }
  /* lift the whole header above .ihero's stacking context (it has
     isolation:isolate) so the open <details> dropdown paints ON TOP of the
     hero — otherwise taps land on .ihero__grid and the paper panel ghosts
     through the translucent leaf. The <nav> is position:absolute, so opening
     the menu never reflows the page (width / height / transform / SVG ratio
     of the content below are unchanged). */
  .site-header {
    position: relative;
    z-index: 40;
  }
  .mobile-menu nav {
    top: 2.9rem;
    min-width: 13rem;
    z-index: 5;
    box-shadow: 0 20px 44px -26px rgba(17, 19, 17, 0.45);
  }

  /* =====================================================================
     SHARED — section rhythm + heading scale for the whole page
     One heading size, one vertical cadence, echoing the dark section
     (which already reads well on phones).
     ===================================================================== */
  .page-section,
  .home-manifesto {
    padding-block: clamp(3rem, 10vw, 5rem);
  }
  .section-header h2,
  .manifesto-heading {
    font-size: clamp(1.5rem, 6vw, 1.85rem) !important;
    line-height: 1.34 !important;
    letter-spacing: -0.03em;
  }
  .section-header {
    gap: clamp(1rem, 4vw, 1.6rem) !important;
  }
  .section-index {
    gap: var(--space-3);
  }

  /* the mono two-part line under each divider ("DEPTH OF FIELD / …",
     "SCALE OF OBSERVATION / …", "CROSS-DOMAIN ASSOCIATION / …") — on phones
     it is a world-building detail, not information: ~63% size, tight leading,
     both halves muted so it reads clearly weaker than the heading. */
  #perspective .manifesto-index,
  #research .observation-figure__index,
  #knowledge-network .kn-index {
    font-size: 0.42rem;
    line-height: 1.25;
    gap: 0.1rem 0.75rem;
    padding-top: 0.55rem;
  }
  #perspective .manifesto-index span:first-child,
  #research .observation-figure__index span:first-child,
  #knowledge-network .kn-index span:first-child {
    color: var(--color-muted);
  }

  /* =====================================================================
     HERO — the copy is the cover; the specimen is a full-bleed scene
     under it. No more "left text + right sliver".
     ===================================================================== */
  .ihero {
    display: block;
    min-height: 0;
  }
  .ihero__grid {
    position: static;
    width: 100%;
    min-width: 0;
    gap: clamp(1.5rem, 5vw, 2.25rem);
    padding: clamp(2.75rem, 10vw, 4.5rem) var(--page-gutter) clamp(2.25rem, 7vw, 3.25rem);
  }
  .ihero__title {
    font-size: clamp(2.15rem, 9vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
    max-width: none;
  }
  .ihero__lede {
    margin-top: clamp(1.5rem, 5vw, 2.5rem);
    max-width: none;
    gap: clamp(1rem, 4vw, 1.6rem);
  }
  .ihero__lede p {
    font-size: 0.98rem;
    line-height: 1.75;
  }
  .ihero__lede .ihero__claim {
    font-size: 1.05rem;
  }

  .ihero__figure {
    position: relative;
    right: auto;
    top: auto;
    left: auto;
    transform: none;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: auto;
    height: min(96vw, 24rem);
    overflow: hidden;
    border-block: 1px solid var(--color-line);
  }
  .ihero__leafwindow {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 34px), transparent),
      linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 34px), transparent),
      linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent);
    mask-composite: intersect;
  }
  .ihero__leaf {
    top: 0;
    left: -150%;   /* PNG x 0.51 at the window's left edge … */
    width: 294%;   /* … window shows PNG x 0.51–0.85 (contour + body, no baked marks) */
    transform: none;
  }
  .ihero__measure {
    left: 7%;
    top: 58%;
  }
  .ihero__rule--v {
    left: 0;
    top: -2.2rem;
    height: 3.8rem;
  }
  .ihero__mlabel {
    left: 0.5rem;
    top: -0.35rem;
    font-size: 0.58rem;
  }

  /* =====================================================================
     00  OUR PERSPECTIVE — quiet, but the contact sheet is a clean
     edge-to-edge plate, not a lopsided crop, and the dead air after it
     is cut.
     ===================================================================== */
  #perspective {
    padding-block: clamp(3rem, 10vw, 5rem);
  }
  #perspective .manifesto-copy {
    margin-left: var(--silence);
    margin-top: clamp(1.5rem, 5vw, 2.25rem);   /* was var(--space-16) — close the label→heading gap */
  }
  #perspective .manifesto-heading {
    padding-bottom: clamp(1.25rem, 5vw, 1.9rem);
  }
  #perspective .manifesto-index {
    margin-left: 0;
  }
  #perspective .manifesto-visual {
    width: 100vw;
    /* nested inside .manifesto-copy (offset by --silence) inside .container
       (offset by --page-gutter): cancel BOTH to reach the viewport edge */
    margin-left: calc(-1 * (var(--page-gutter) + var(--silence)));
    margin-right: calc(-1 * var(--page-gutter));
    margin-top: clamp(2rem, 8vw, 3rem);
    margin-bottom: 0;
    border-block: 1px solid var(--color-line);
  }
  #perspective .manifesto-visual img {
    aspect-ratio: 32 / 15;
    width: 100%;
    height: auto;
  }
  #perspective .manifesto-visual figcaption {
    padding-inline: var(--page-gutter);
    margin-top: var(--space-3);
    /* image credit, not body copy — pull it down to the same auxiliary size
       as the under-divider English so it never competes with the plate. */
    font-size: 0.42rem;
    line-height: 1.3;
  }

  /* =====================================================================
     01  FIELD OF VIEW — heading, then the observation figure as the lead
     visual: the self-contained mobile arc SVG shown WHOLE, edge to edge,
     as the section's stage (bigger than the old inset diagram, nothing
     cropped). The heading above keeps the left silence, so the section
     still reads asymmetric.
     ===================================================================== */
  #research {
    padding-block: clamp(3rem, 10vw, 5rem);
    overflow: clip;
  }
  #research .observation-figure {
    margin-left: calc(-1 * var(--page-gutter));
    margin-right: calc(-1 * var(--page-gutter));
    margin-top: clamp(1.5rem, 6vw, 2.5rem);
    width: auto;
  }
  #research .observation-figure__index,
  #research .observation-figure__caption {
    margin-left: calc(var(--page-gutter) + var(--silence));
    margin-right: var(--page-gutter);
  }
  #research .observation-figure__plate {
    width: 100%;
    margin-top: clamp(1rem, 4vw, 1.75rem);
  }
  #research .observation-figure__caption {
    margin-top: clamp(1.25rem, 5vw, 2rem);
  }

  /* =====================================================================
     02  KNOWLEDGE NETWORK — copy, then the live network fills the width
     of the screen (a real stage, not a 525px strip with label soup).
     The renderer / data / drag are untouched — only its container.
     ===================================================================== */
  #knowledge-network {
    padding-block: clamp(3rem, 10vw, 5rem) clamp(2.5rem, 8vw, 4rem);
    overflow: clip;
  }
  #knowledge-network .kn-intro {
    margin-left: var(--silence);
    max-width: none;
    padding-bottom: clamp(1.25rem, 5vw, 1.9rem);
  }
  #knowledge-network .kn-index {
    margin-left: var(--silence);
    max-width: none;
  }
  #knowledge-network .knowledge-world {
    width: 100vw;
    margin-left: calc(50% - 50vw);   /* direct child of .container — one level to cancel */
    margin-right: calc(50% - 50vw);
    /* the renderer draws the network in the lower third of the canvas and
       leaves the rest as a faint (near-invisible) field. Pull the whole
       canvas up so that faint field slides up behind the copy (all of which
       carries position:relative + z-index:2) and the DRAWN network lands a
       comfortable ~40px below the divider — no dead band, and the nodes
       never reach .kn-index. */
    margin-top: -17rem;
  }
  #knowledge-network .knowledge-world.knowledge-world--on {
    min-height: min(56vh, 28rem);
  }
  /* the widget's own corner labels ("DRAG TO EXPLORE", "PUBLIC KNOWLEDGE
     WORLD …") are aria-hidden decorative chrome; on a phone they can only
     land on the nodes, so drop them here. The section's real English lives
     in .kn-index above the network. */
  #knowledge-network .knowledge-world.knowledge-world--on .knowledge-world__meta,
  #knowledge-network .knowledge-world.knowledge-world--on .knowledge-world__hint {
    display: none;
  }

  /* =====================================================================
     YOUR QUESTION (dark) — already the reference; only align the heading
     to the shared scale so it stops orphaning "では、".
     ===================================================================== */
  .page-section.dark {
    padding-block: clamp(4.5rem, 14vw, 7rem);
  }
  .page-section.dark .question-flow {
    margin-left: 0;
    margin-top: clamp(2.75rem, 9vw, 4rem);
  }

  /* =====================================================================
     03  WORKS — two case blocks, each a self-contained editorial unit.
     The floating arrow that used to hang in dead space now closes each
     block; the connected terms read as a wrapped index, not a generic
     stacked list.
     ===================================================================== */
  #evidence {
    padding-block: clamp(3rem, 10vw, 5rem);
  }
  #evidence .case-list {
    margin-left: 0;
    margin-top: clamp(2rem, 8vw, 3rem);
  }
  #evidence .case-study {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    grid-template-columns: none;
    padding: clamp(2rem, 8vw, 3rem) 0;
  }
  #evidence .case-study > div {
    width: 100%;
  }
  #evidence .case-study .mono {
    margin: 0 0 0.75rem;
  }
  #evidence .case-study h3 {
    margin: 0;
    white-space: normal;
    font-size: clamp(1.4rem, 5.5vw, 1.75rem);
    line-height: 1.28;
  }
  #evidence .case-study ol {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    width: 100%;
    gap: 0.5rem 0.55rem;
    margin: 1.4rem 0 0;
    grid-column: auto;
  }
  #evidence .case-study li {
    flex: none;
    width: auto;
    min-height: 0;
    border: 1px solid var(--color-line);
    padding: 0.3rem 0.7rem;
    font-size: 0.76rem;
    color: var(--color-muted);
  }
  #evidence .case-study li:not(:last-child)::after {
    display: none;
  }
  #evidence .case-study > p {
    margin: 1.5rem 0 0;
    max-width: none;
  }
  #evidence .case-study > a {
    position: static;
    grid-column: auto;
    grid-row: auto;
    align-self: flex-end;
    margin-top: 1.5rem;
  }
  #evidence .works-cta {
    margin-left: 0;
    margin-top: clamp(2.25rem, 8vw, 3rem);
  }

  /* =====================================================================
     04  JOURNAL — the archive line restored, cards given weight and air
     without becoming a corporate blog list.
     ===================================================================== */
  #journal {
    padding-block: clamp(3.5rem, 11vw, 5rem);
  }
  #journal .section-header > p {
    display: block;
    grid-column: 1;
    margin: var(--space-3) 0 0 var(--silence);
    max-width: none;
    color: var(--color-muted);
  }
  #journal .journal-grid {
    margin-left: 0;
    margin-top: clamp(1.75rem, 7vw, 2.75rem);
    gap: 0;
    border-top: 1px solid var(--color-ink);
  }
  #journal .journal-card {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
    min-height: 0;
    padding: clamp(1.75rem, 7vw, 2.5rem) 0;
  }
  #journal .journal-card .mono {
    color: var(--color-muted);
  }
  #journal .journal-card h2 {
    font-size: clamp(1.35rem, 5vw, 1.7rem) !important;
    line-height: 1.4 !important;
    margin: 0.8rem 0 1.35rem !important;
  }
  #journal .journal-card a {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 0.82rem;
    color: var(--color-ink);
  }
  #journal .journal-cta {
    margin-left: 0;
    margin-top: clamp(2.25rem, 8vw, 3rem);
  }

  /* =====================================================================
     FOOTER — the archive photo gains presence; the link block is tightened
     so the dark section stops stretching down the screen.
     ===================================================================== */
  .footer-photo img {
    aspect-ratio: 16 / 10;
  }
  .site-footer {
    padding-top: clamp(2.75rem, 10vw, 3.75rem);
    padding-bottom: 2rem;
  }
  .footer-top {
    gap: var(--space-4);
  }
  .footer-wordmark {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
    margin: clamp(2.5rem, 9vw, 3.5rem) 0;
  }
  .footer-meta {
    gap: var(--space-2);
    padding-top: var(--space-4);
  }
  /* the archive-photo source note is reference text, not a footer link — drop
     it to ~7px, tighten the leading and dim it below the © / PRIVACY / TERMS
     row. Full text incl. the URL is kept; overflow-wrap stops the long URL
     from pushing a horizontal scrollbar at 375. */
  .footer-meta .credits {
    font-size: 0.44rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: #5e625f;
    margin-top: var(--space-2);
    overflow-wrap: anywhere;
  }
}