/* A single shared grid: article wrappers preserve reading order, not scene boxes. */
main#content.projects-page { display: block; padding-bottom: 64px; }
.projects-masthead { padding: 46px 34px 68px; }
.projects-masthead h1 { margin: 0 0 16px; font-size: clamp(2.6rem, 4.2vw, 3.8rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.projects-masthead-note { margin: 0; color: var(--muted); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; }
.projects-composition { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(30, clamp(32px, 3.1vw, 44px)); isolation: isolate; }
.project-scene { display: contents; }
.scene-copy { position: relative; z-index: 4; align-self: start; padding: 26px 30px; }
.scene-index, .scene-meta { margin: 0; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.scene-copy h2 { margin: 15px 0 18px; font-weight: 500; line-height: 1.02; letter-spacing: -.04em; }
.scene-text { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; max-width: 32ch; }
.scene-tags { margin: 24px 0 14px; }
.scene-cta { margin: 24px 0 0; }
.scene-link { display: inline-flex; align-items: center; gap: 42px; font-size: 1rem; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.scene-link:hover { text-decoration: underline; }
.scene-visual { position: relative; min-width: 0; }
.scene--syverro .scene-visual { grid-column: 1 / 8; grid-row: 1 / 16; z-index: 1; background: #0b1220; color: #e7edf5; }
.scene-visual-note { position: absolute; left: 26px; bottom: 22px; color: var(--paper); font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; }
.scene--syverro .scene-copy { grid-column: 7 / 13; grid-row: 7 / 13; background: #d9dee2; padding: 28px 34px 30px; }
.scene--syverro h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); max-width: 8ch; }
.scene--niqual .scene-visual { grid-column: 6 / 13; grid-row: 13 / 26; z-index: 2; background: var(--paper-deep); border-top: 1px solid var(--line); }
.scene--niqual .scene-visual::before { content: ''; position: absolute; inset: 0; background: url('/assets/sand-grain-alpha.png') repeat; background-size: 128px; opacity: .12; pointer-events: none; }
.scene--niqual .scene-visual::after { content: 'Sand / 02'; position: absolute; right: 26px; bottom: 22px; font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.scene-mark { position: absolute; width: 60%; max-width: 340px; height: auto; right: 7%; top: 16%; }
.scene--niqual .scene-copy { grid-column: 2 / 6; grid-row: 17 / 23; padding: 16px 28px 24px 0; }
.scene--niqual h2 { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.scene--03 .scene-visual { grid-column: 4 / 8; grid-row: 23 / 30; z-index: 3; display: flex; align-items: center; padding: 36px; background: var(--ink); color: var(--paper); }
.scene--03 .scene-visual::before { content: ''; position: absolute; width: 28%; top: -42px; bottom: 36px; left: -28%; background: var(--slab); z-index: -1; }
.scene--03 .scene-copy { grid-column: 8 / 13; grid-row: 27 / 31; padding: 0 26px 20px 32px; }
.scene--03 h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); max-width: 12ch; }
.composition-rule { grid-column: 2 / 12; grid-row: 11 / 29; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); pointer-events: none; z-index: 0; }
.composition-glass { grid-column: 12 / 13; grid-row: 11 / 22; z-index: 5; pointer-events: none; margin-right: -20px; backdrop-filter: blur(9px); background: repeating-linear-gradient(90deg, rgba(246,244,239,.28) 0 1px, rgba(216,212,203,.12) 2px 4px, transparent 5px 10px), linear-gradient(90deg, rgba(216,212,203,.22), rgba(43,42,40,.14)); border-left: 1px solid var(--line); }
.composition-glass span { display: block; writing-mode: vertical-rl; padding: 20px 12px; font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; }
@media (min-width: 1280px) {
  .scene--syverro .scene-visual { margin-left: calc(-1 * var(--outer-bleed)); }
  .scene--niqual .scene-visual { margin-right: calc(-1 * var(--outer-bleed)); }
}
@media (min-width: 681px) and (max-width: 1050px) {
  .projects-composition { grid-template-rows: repeat(30, 38px); }
  .scene--syverro .scene-copy { grid-column: 7 / 13; padding: 24px; }
  .scene--niqual .scene-copy { grid-column: 1 / 6; padding-left: 26px; }
  .scene--03 .scene-copy { grid-column: 8 / 13; padding-left: 22px; }
  .scene--03 .scene-visual { padding: 24px; }
  .composition-glass { margin-right: 0; }
}
@media (max-width: 680px) {
  main#content.projects-page { padding-bottom: 34px; }
  .projects-masthead { padding: 36px 22px 46px; }
  .projects-composition { display: block; }
  .project-scene { display: flex; flex-direction: column; }
  .scene-copy { padding: 24px !important; }
  .scene--syverro .scene-visual { order: -1; height: 330px; margin-right: 28px; }
  .scene--syverro .scene-copy { margin: -48px 0 0 48px; }
  .scene--syverro h2 { font-size: 2.5rem; }
  .scene--niqual .scene-visual { order: -1; height: 260px; margin: 26px 0 0 48px; }
  .scene-mark { width: 58%; max-width: 200px; top: 20px; right: 26px; }
  .scene--niqual .scene-copy { margin: 0 38px 0 0; }
  .scene--03 { margin-top: 20px; }
  .scene--03 .scene-visual { min-height: 220px; margin: 0 48px; padding: 30px; }
  .scene--03 .scene-visual::before { top: -16px; bottom: 30px; left: -24px; width: 24px; }
  .scene--03 .scene-copy { margin-left: 24px; }
  .composition-rule, .composition-glass { display: none; }
}
/* Keep the shared rule and placeholder caption clear of live text. */
.composition-rule { grid-column: 2 / 8; }
@media (max-width: 680px) {
  .scene-visual-note { top: 20px; bottom: auto; }
}
/* Surgical pass 01: scale only Syverro; retain the shared scene anchors. */
@media (min-width: 681px) {
  .scene--syverro .scene-visual {
    grid-row: 1 / 14;
    width: 90%;
  }
  .scene--syverro .scene-copy {
    width: 90%;
    padding: 20px 26px;
  }
  .scene--syverro .scene-copy h2 { margin: 10px 0 12px; }
  .scene--syverro .scene-tags { margin: 16px 0 10px; }
}
@media (min-width: 1280px) {
  .scene--syverro .scene-visual { width: calc(90% + var(--outer-bleed)); }
}

/* Pass 02: reduce object area by ~20%, using real grid tracks and widths.
   The canvas and type tokens stay unchanged; neighboring rows move together. */
@media (min-width: 681px) {
  .projects-composition { grid-template-rows: repeat(30, clamp(26.88px, 2.604vw, 36.96px)); }
  .scene--syverro .scene-visual { width: 85.5%; }
  .scene--syverro .scene-copy { width: 85.5%; padding: 16px 22px; }
  .scene--niqual .scene-visual { width: 95%; justify-self: end; }
  .scene--niqual .scene-copy { padding-top: 12px; padding-bottom: 20px; }
  .scene--03 .scene-visual { width: 95%; padding: 30px; }
  .scene--03 .scene-copy { padding-left: 26px; }
  .scene--03 .scene-visual::before { top: -35px; bottom: 30px; }
}
@media (min-width: 681px) and (max-width: 1050px) {
  .projects-composition { grid-template-rows: repeat(30, 31.92px); }
}
@media (min-width: 1280px) {
  .scene--syverro .scene-visual { width: calc(85.5% + var(--outer-bleed) * .95); }
  .scene--niqual .scene-visual { width: calc(95% + var(--outer-bleed) * .95); }
}
/* CSS typography is the artwork, not an imitation dashboard. */
.scene-visual--studio { overflow: hidden; }
.scene-visual--studio::before { content: ''; position: absolute; inset: 0; background: url('/assets/sand-grain-alpha.png') repeat; background-size: 128px; opacity: .025; pointer-events: none; }
.studio-art-title { position: absolute; top: 16%; left: 9%; font-size: clamp(2.8rem, 4.5vw, 4rem); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; }
.scene--niqual .scene-visual { background: none; border: 0; overflow: hidden; }
.scene--niqual .scene-visual::before, .scene--niqual .scene-visual::after { content: none; }
.niqual-artwork { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
.scene--03 .redaction-bar--tail { width: 42%; height: 6px; margin-top: 10px; }
/* Retain the narrow image/copy overlap after reducing the visual width. */
@media (min-width: 681px) {
  .scene--syverro .scene-copy { margin-left: -24px; }
}

/* Pass 03: only the requested type, material, counterweight and vertical offset. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url('/fonts/CormorantGaramond-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.studio-art-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: -.025em; }
.scene-visual--studio::before { opacity: .085; }
.projects-principle { grid-column: 9 / 13; grid-row: 1 / 5; justify-self: end; align-self: start; width: 250px; margin: -28px 34px 0 0; padding: 24px 26px; background: var(--dark); color: var(--paper); }
.projects-principle p { margin: 0; font-size: .88rem; line-height: 1.4; }
@media (min-width: 681px) {
  .scene--03 .scene-visual { top: 80px; }
}
@media (min-width: 681px) and (max-width: 1050px) {
  .projects-principle { width: 220px; margin-right: 24px; padding: 20px 22px; }
}
@media (max-width: 680px) {
  .projects-principle { width: 220px; margin: 0 22px 32px auto; padding: 20px 22px; }
}

/* Upper glass: the existing neutral fluted recipe, with a quieter refraction.
   Absolute positioning leaves every existing grid item and overlap untouched. */
.composition-glass-upper {
  position: absolute;
  z-index: -1;
  top: -84px;
  right: 0;
  width: 170px;
  height: 260px;
  pointer-events: none;
  backdrop-filter: blur(3px);
  background:
    repeating-linear-gradient(90deg,
      rgba(246,244,239,.28) 0 1px,
      rgba(216,212,203,.12) 2px 4px,
      transparent 5px 10px),
    linear-gradient(90deg,
      rgba(216,212,203,.18),
      rgba(43,42,40,.10));
}
@media (min-width: 1280px) {
  .composition-glass-upper { right: -18px; }
}
@media (max-width: 680px) {
  .composition-glass-upper { display: none; }
}

/* Composition correction: Niqual leads; Syverro reverses the spatial pairing.
   All project elements continue to share the same grid. */
.projects-masthead { padding-bottom: 32px; }
.composition-glass-upper { top: -38px; width: 140px; height: 280px; }
.composition-sand { background: var(--paper-deep); position: relative; z-index: 0; }
.composition-sand::after { content: ''; position: absolute; inset: 0; background: url('/assets/sand-grain-alpha.png') repeat; background-size: 128px; opacity: .12; }
@media (min-width: 681px) {
  .projects-composition { grid-template-rows: repeat(28, 36px); }
  .scene--niqual .scene-visual { grid-column: 1 / 8; grid-row: 1 / 13; width: auto; justify-self: stretch; margin: 0; }
  .scene--niqual .scene-copy { grid-column: 8 / 12; grid-row: 4 / 10; padding: 20px 18px 24px 20px; }
  .scene--syverro .scene-visual { grid-column: 6 / 13; grid-row: 11 / 21; width: auto; margin: 0; }
  .scene--syverro .scene-copy { grid-column: 2 / 7; grid-row: 13 / 21; width: auto; margin: 0; padding: 20px 26px; }
  .scene--syverro .studio-art-title { left: 23%; top: 18%; }
  .composition-sand { grid-column: 4 / 8; grid-row: 10 / 22; }
  .scene--03 .scene-visual { grid-column: 4 / 8; grid-row: 20 / 27; top: 36px; }
  .scene--03 .scene-copy { grid-column: 8 / 13; grid-row: 24 / 29; }
  .composition-rule { grid-column: 2 / 8; grid-row: 9 / 27; }
}
@media (min-width: 1280px) {
  .scene--niqual .scene-visual { margin-left: calc(-1 * var(--outer-bleed)); }
  .scene--syverro .scene-visual { margin-right: 24px; }
}
@media (min-width: 681px) and (max-width: 1050px) {
  .scene--niqual .scene-copy { grid-column: 8 / 13; padding-right: 24px; }
  .scene--syverro .scene-copy { grid-column: 1 / 7; margin-left: 24px; }
  .composition-glass-upper { width: 90px; height: 180px; top: -30px; }
}
@media (max-width: 680px) {
  .composition-sand { display: none; }
  .scene--niqual .scene-visual { margin: 0 28px 0 0; }
  .scene--niqual .scene-copy { margin: 0 24px 0 0; }
  .scene--syverro .scene-visual { height: 260px; margin: 16px 0 0 28px; }
  .scene--syverro .scene-copy { margin: -24px 28px 0 0; }
  .scene--03 .scene-visual { top: 0; }
}
/* Keep a narrow overlap at the Syverro-to-Marina handoff. */
@media (min-width: 681px) {
  .scene--03 .scene-visual { top: 18px; }
}
/* Spacing pass: move whole scenes together, retaining their internal geometry. */
@media (min-width: 681px) {
  .scene--syverro .scene-visual,
  .scene--syverro .scene-copy { top: 32px; }
  .scene--03 .scene-visual { top: 106px; }
  .scene--03 .scene-copy { top: 88px; }
  .composition-sand { grid-row-end: 24; }
  .composition-rule { grid-row-end: 29; }
  .projects-composition { padding-bottom: 88px; }
}

/* Glass now belongs to Syverro; the separate sand backing is removed. */
@media (min-width: 681px) {
  .composition-glass-upper { top: 392px; height: 560px; z-index: 5; }
}
@media (min-width: 681px) and (max-width: 1050px) {
  .composition-glass-upper { height: 360px; }
}
/* Extend the glass upward by 30%, keeping its lower edge fixed. */
@media (min-width: 1051px) {
  .composition-glass-upper { top: 224px; height: 728px; }
}
@media (min-width: 681px) and (max-width: 1050px) {
  .composition-glass-upper { top: 284px; height: 468px; }
}

/* Archive annotation and final inter-scene spacing. */
.projects-masthead { position: relative; }
.projects-annotation {
  position: absolute;
  right: 12%;
  top: 68px;
  margin: 0;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .25em;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-25deg);
}
@media (min-width: 681px) {
  .scene--syverro .scene-visual,
  .scene--syverro .scene-copy { top: 42px; }
  .scene--03 .scene-visual { top: 126px; }
  .scene--03 .scene-copy { top: 108px; }
  .projects-composition { padding-bottom: 108px; }
}
@media (max-width: 1050px) {
  .projects-annotation { display: none; }
}

/* Titles use the existing underline / keyboard-outline interaction language. */
.project-title-link { color: inherit; text-decoration: none; }
.project-title-link:hover,
.project-title-link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
/* Artwork links share the scene geometry verbatim; only add interaction. */
.project-art-link { display: block; text-decoration: none; cursor: pointer; transition: opacity .2s ease; }
.project-art-link:hover,
.project-art-link:focus-visible { opacity: .85; }
/* Preserve the scene footprint after removing the separate 57px CTA area. */
.scene--niqual .scene-copy { padding-bottom: 81px; }
@media (max-width: 680px) {
  .scene--niqual .scene-copy { padding-bottom: 81px !important; }
}