/* ─── Foldable & Dual-Screen Adaptive Stylesheet ───
   Targets book-style foldable devices (Galaxy Z Fold, Pixel Fold, OnePlus Open)
   in their unfolded or propped states, distinguishing them from standard
   tablets and single-screen phones.
─── */

/* ── 1. Viewport Segments API (Chromium / W3C Foldables) ── */
@media (horizontal-viewport-segments: 2) {
  :root {
    --fold-active: 1;
    --fold-segment-0-width: env(viewport-segment-width 0 0, 50%);
    --fold-segment-1-width: env(viewport-segment-width 1 0, 50%);
    --fold-segment-0-inline-size: env(viewport-segment-width 0 0, 50%);
    --fold-segment-1-inline-size: env(viewport-segment-width 1 0, 50%);
    --fold-hinge-width: calc(env(viewport-segment-left 1 0, 50%) - env(viewport-segment-right 0 0, 50%));
    --fold-seam-gutter: max(var(--space-2xl), calc(env(viewport-segment-left 1 0, 50%) - env(viewport-segment-right 0 0, 50%)));
    --fold-page-padding: max(var(--space-xl), env(safe-area-inset-left, 0px));
    --fold-spine-shadow: inset -1px 0 0 var(--color-border);
  }
}

/* ── 2. Legacy Screen-Spanning (Early Surface Duo / Chromium) ── */
@media (screen-spanning: single-fold-vertical) {
  :root {
    --fold-active: 1;
    --fold-segment-0-width: env(fold-left, 50%);
    --fold-segment-1-width: calc(100% - env(fold-right, 50%));
    --fold-segment-0-inline-size: env(fold-left, 50%);
    --fold-segment-1-inline-size: calc(100% - env(fold-right, 50%));
    --fold-hinge-width: env(fold-width, 0px);
    --fold-seam-gutter: max(var(--space-2xl), env(fold-width, 0px));
    --fold-page-padding: max(var(--space-xl), env(safe-area-inset-left, 0px));
    --fold-spine-shadow: inset -1px 0 0 var(--color-border);
  }
}

/* ── 3. Device Posture API (Folded / Bent Book State) ── */
@media (device-posture: folded) {
  :root {
    --fold-posture: folded;
    --fold-spine-shadow: inset -8px 0 16px -6px rgba(0, 0, 0, 0.14), inset -1px 0 0 var(--color-border);
  }

  :root[data-mode="dark"],
  .dark-mode {
    --fold-spine-shadow: inset -8px 0 16px -6px rgba(0, 0, 0, 0.55), inset -1px 0 0 rgba(255, 255, 255, 0.1);
  }
}

/* ── 4. Vertical Viewport Segments / Clamshell / Laptop Posture ── */
@media (vertical-viewport-segments: 2) {
  :root {
    --fold-active: 1;
    --fold-segment-top-height: env(viewport-segment-height 0 0, 50%);
    --fold-segment-bottom-height: env(viewport-segment-height 0 1, 50%);
    --fold-hinge-height: calc(env(viewport-segment-top 0 1, 50%) - env(viewport-segment-bottom 0 0, 50%));
    --fold-seam-gutter-block: max(var(--space-2xl), calc(env(viewport-segment-top 0 1, 50%) - env(viewport-segment-bottom 0 0, 50%)));
  }
}

@media (screen-spanning: single-fold-horizontal) {
  :root {
    --fold-active: 1;
    --fold-segment-top-height: env(fold-top, 50%);
    --fold-segment-bottom-height: calc(100% - env(fold-bottom, 50%));
    --fold-hinge-height: env(fold-height, 0px);
    --fold-seam-gutter-block: max(var(--space-2xl), env(fold-height, 0px));
  }
}

/* ── 5. Unified Foldable Book Layout ──────────────────────────────────────────
   Triggers when:
   1. The browser spans two horizontal segments (Viewport Segments API)
   2. Legacy single-fold-vertical spanning is detected
   3. The device posture is folded in landscape/book orientation
   4. Heuristic fallback for unspanned flat foldables:
      - Coarse pointer (touchscreen device)
      - Unfolded inner screen width between 540px and 1000px
      - Aspect ratio strictly between 4/5 (0.80) and 13/10 (1.30)
      (Safely excludes standard phones [ratio ~0.45], closed foldables [ratio ~0.40],
       iPad portrait [ratio 0.75 < 0.8], iPad landscape [ratio 1.33 > 1.30],
       and desktop browsers [pointer: fine])
   ────────────────────────────────────────────────────────────────────────── */
@media (horizontal-viewport-segments: 2),
       (screen-spanning: single-fold-vertical),
       ((device-posture: folded) and (orientation: landscape)),
       ((pointer: coarse) and (min-width: 540px) and (max-width: 1000px) and (min-aspect-ratio: 4/5) and (max-aspect-ratio: 13/10)) {

  :root {
    --fold-active: 1;
    --fold-page-padding: max(var(--page-padding-inline), env(safe-area-inset-left, 0px));
  }

  /* ── Page Container Spacing ── */
  .page-container {
    padding-inline: var(--fold-page-padding) !important;
    max-width: 100% !important;
  }

  /* ── Header & Navigation ── */
  .site-header {
    height: var(--nav-height) !important;
  }

  .header-container {
    display: grid !important;
    grid-template-columns: minmax(0, var(--fold-segment-0-width, 1fr)) minmax(0, var(--fold-segment-1-width, 1fr)) !important;
    column-gap: var(--fold-seam-gutter) !important;
    align-items: center !important;
    padding-inline: var(--fold-page-padding) !important;
    max-width: 100% !important;
  }

  .site-logo {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .desktop-nav {
    display: flex !important;
    grid-column: 2 !important;
    justify-self: end !important;
  }

  .desktop-nav .nav-links {
    display: flex !important;
    gap: var(--space-md) !important;
    flex-wrap: nowrap !important;
  }

  .desktop-nav .nav-link {
    font-size: var(--font-size-sm) !important;
    white-space: nowrap !important;
  }

  .mobile-menu-trigger {
    display: none !important;
  }

  /* ── Dynamic Blurb Hero (Home Page) ── */
  .cover-hero {
    min-height: calc(100dvh - var(--nav-height) - 40px) !important;
    padding-block: var(--space-2xl) !important;
    padding-inline: var(--fold-page-padding) !important;
    display: flex !important;
    align-items: center !important;
    max-width: 100% !important;
  }

  .cover-hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, var(--fold-segment-0-width, 1fr)) minmax(0, var(--fold-segment-1-width, 1fr)) !important;
    column-gap: var(--fold-seam-gutter) !important;
    align-items: center !important;
    width: 100% !important;
    min-height: auto !important;
    position: relative;
  }

  /* Left Page / Segment 0: Main Blurb Statement */
  .cover-hero-inner > .blurb-content {
    grid-column: 1 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-inline-end: var(--space-lg) !important;
    box-shadow: var(--fold-spine-shadow);
  }

  .blurb-lead-heading {
    font-size: clamp(2rem, 3.8vw, 3rem) !important;
    line-height: 1.22 !important;
    margin-bottom: var(--space-lg) !important;
    text-wrap: pretty;
  }

  .blurb-body {
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
    line-height: 1.6 !important;
    text-wrap: pretty;
  }

  /* Right Page / Segment 1: Footnotes Shelf */
  .cover-hero-inner > .blurb-footnotes {
    grid-column: 2 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    border-inline-start: 1px solid var(--color-border) !important;
    padding-inline-start: var(--space-xl) !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .blurb-footnotes .footnotes-hairline {
    display: none !important;
  }

  .footnotes-list {
    gap: var(--space-md) !important;
  }

  .footnote-item {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* ── Featured Work Carousel (Home Page) ── */
  .featured-carousel-section {
    padding-inline: var(--fold-page-padding) !important;
    max-width: 100% !important;
  }

  .featured-carousel-header {
    display: grid !important;
    grid-template-columns: minmax(0, var(--fold-segment-0-width, 1fr)) minmax(0, var(--fold-segment-1-width, 1fr)) !important;
    column-gap: var(--fold-seam-gutter) !important;
    align-items: end !important;
  }

  .featured-header-text {
    grid-column: 1 !important;
  }

  .featured-carousel-controls {
    grid-column: 2 !important;
    justify-self: end !important;
  }

  .featured-carousel-track {
    scroll-snap-type: x mandatory !important;
    gap: var(--fold-seam-gutter) !important;
  }

  /* Exactly one card per fold segment (2 cards per book spread) */
  .featured-carousel-card {
    flex: 0 0 calc(50% - (var(--fold-seam-gutter) / 2)) !important;
    min-width: calc(50% - (var(--fold-seam-gutter) / 2)) !important;
    max-width: calc(50% - (var(--fold-seam-gutter) / 2)) !important;
    scroll-snap-align: start !important;
  }

  /* ── Project / Case Study Detail Split Section (50% / 50% Centered Container) ── */
  .detail-split-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(var(--space-xl), 3.5vw, var(--space-2xl)) !important;
    padding-block: var(--space-2xl) !important;
    width: 100% !important;
    max-width: min(960px, 100%) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .detail-excerpt-col {
    grid-column: 1 !important;
    max-width: 100% !important;
    padding-inline-end: var(--space-lg) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .detail-meta-col {
    grid-column: 2 !important;
    border-inline-start: 1px solid var(--color-border) !important;
    padding-inline-start: var(--space-xl) !important;
    max-width: 100% !important;
  }

  /* ── Editorial Diptych (Two-Up Spreads Framed Across the Fold) ── */
  .editorial-diptych {
    display: grid !important;
    grid-template-columns: minmax(0, var(--fold-segment-0-width, 1fr)) minmax(0, var(--fold-segment-1-width, 1fr)) !important;
    column-gap: var(--fold-seam-gutter) !important;
    margin-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .editorial-diptych > figure:first-child,
  .editorial-diptych > *:first-child {
    grid-column: 1 !important;
    margin: 0 !important;
  }

  .editorial-diptych > figure:last-child,
  .editorial-diptych > *:last-child {
    grid-column: 2 !important;
    margin: 0 !important;
  }

  .editorial-diptych img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ── Editorial Header, Prose & Footer Alignment ── */
  .editorial-header,
  .editorial-body > *:not(.editorial-wide):not(.editorial-wide-media):not(.editorial-diptych):not(.editorial-triptych):not(.editorial-full-bleed):not(blockquote):not(figure.editorial-wide):not(figure.editorial-full-bleed),
  .editorial-footer-inner,
  .editorial-footer {
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .editorial-title {
    font-size: clamp(2rem, 4.5vw, 2.75rem) !important;
    line-height: 1.2 !important;
  }

  /* ── Home Section Split (e.g. Field Notes / Selected Work) ── */
  .home-section-split {
    display: grid !important;
    grid-template-columns: minmax(0, var(--fold-segment-0-width, 1fr)) minmax(0, var(--fold-segment-1-width, 1fr)) !important;
    column-gap: var(--fold-seam-gutter) !important;
    padding-block: var(--space-3xl) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .split-aside {
    grid-column: 1 !important;
    max-width: 100% !important;
    padding-inline-end: var(--space-lg) !important;
    box-shadow: var(--fold-spine-shadow);
  }

  .split-main {
    grid-column: 2 !important;
    border-inline-start: 1px solid var(--color-border) !important;
    padding-inline-start: var(--space-xl) !important;
    max-width: 100% !important;
  }

  /* ── Work Archive Grid (Two Columns Matching Fold Halves) ── */
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--fold-seam-gutter) !important;
    row-gap: var(--space-xl) !important;
  }

  /* ── Work List Page Header & Items ── */
  .work-list-header {
    max-width: 100% !important;
  }

  /* ── Footer ── */
  .footer-container {
    display: grid !important;
    grid-template-columns: minmax(0, var(--fold-segment-0-width, 1fr)) minmax(0, var(--fold-segment-1-width, 1fr)) !important;
    column-gap: var(--fold-seam-gutter) !important;
    align-items: center !important;
    padding-inline: var(--fold-page-padding) !important;
  }

  .footer-left {
    grid-column: 1 !important;
  }

  .footer-links {
    grid-column: 2 !important;
    justify-content: flex-end !important;
  }
}

/* ── 6. Clamshell / Laptop Posture (Top Display + Bottom Surface Console) ────
   Triggers when device is propped in portrait orientation, splitting
   top and bottom halves across the horizontal hinge.
   ────────────────────────────────────────────────────────────────────────── */
@media (vertical-viewport-segments: 2),
       (screen-spanning: single-fold-horizontal),
       ((device-posture: folded) and (orientation: portrait)) {

  .cover-hero {
    min-height: calc(100dvh - var(--nav-height)) !important;
    padding-block: var(--space-xl) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .cover-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 100% !important;
    flex: 1 1 auto !important;
  }

  /* Top Screen Half: Focus on the Blurb Statement */
  .cover-hero-inner > .blurb-content {
    min-height: var(--fold-segment-top-height, 45dvh);
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: var(--space-lg) 0 !important;
  }

  /* Bottom Surface / Console Half: Footnotes & Interactive Trigger Panel */
  .cover-hero-inner > .blurb-footnotes {
    min-height: var(--fold-segment-bottom-height, 45dvh);
    border-top: 1px solid var(--color-border) !important;
    border-inline-start: none !important;
    padding-top: var(--space-lg) !important;
    padding-inline-start: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
}