/* layout.css — shell, grids, sections. Manga gutters are load-bearing:
   generous white between elements, hairline rules framing columns. */
.site{ display:grid; grid-template-rows:auto 1fr auto; min-height:100vh; position:relative; z-index:2 }
main{ padding-block:5rem 7rem }
.section{ margin-block:6.5rem }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:2.4rem; flex-wrap:wrap }
.section-head h2{ margin:0 }
/* the 11px caps label beside the huge display title — contrast in SIZE */
.kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink); display:block; margin-bottom:1.1rem; opacity:.75 }
.kicker::after{ content:""; display:inline-block; width:2.4rem; height:1px; margin-left:.8rem; vertical-align:.45em;
  background:var(--ink); opacity:.6 }
.grid{ display:grid; gap:2.6rem }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-auto{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid-3,.grid-2{grid-template-columns:1fr} }
/* shared layout atoms */
.stack{ display:flex; flex-direction:column; gap:1.8rem }
.row{ display:flex; gap:.9rem; align-items:center; flex-wrap:wrap }
/* the ledger line — a ruled index row, not a dashboard */
.ledger-line{ display:flex; flex-wrap:wrap; gap:0 2.2rem; padding:1.4rem 2rem; border:1px solid var(--ink);
  border-radius:0; background:var(--paper) }
.ledger-line div{ display:flex; align-items:baseline; gap:.7rem; padding-right:2.2rem;
  border-right:1px solid var(--rule) }
.ledger-line div:last-child{ border-right:0; padding-right:0 }
.ledger-line b{ font-family:var(--font-display); font-size:1.6rem; color:var(--ink) }
/* numerals mono, spelled tallies in Didone — one voice per kind */
.ledger-line b.num{ font-family:var(--font-mono); font-size:1.3rem; font-weight:500 }
.ledger-line b.word{ font-family:var(--font-display); font-size:1.9rem; text-transform:lowercase; letter-spacing:.02em }
.ledger-line span{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.18em; color:var(--fg-muted) }

/* ——— the contact sheet ———
   staggered catalogue of logged works: panel heights vary, one plate spans wide,
   laid out like pages pinned to a bench with wide gutters of white. */
.hero{ position:relative }
/* owner iteration: giant dried-blood splatter field behind the hero — the
   page bleed. Low opacity so ink-on-paper readability holds (figure-ground). */
.hero::before{ content:""; position:absolute; z-index:-1; pointer-events:none;
  top:2%; right:-10%; width:86%; aspect-ratio:1.7; opacity:.9;
  background:url('../img/ink/splatter-hero-gloss.png') center/contain no-repeat }

/* owner iteration (spilled-glass register): three black field spills, each a
   distinct stain — long lazy trail / short fat pour / fast thin streak.
   Same layer family as the red hero spill, never concentrated at the top. */
body{ position:relative }
.bg-splat{ position:absolute; z-index:0; pointer-events:none; opacity:1;
  mix-blend-mode:multiply;
  background:center/contain no-repeat }
.bg-splat--1{ top:20%; left:-5%; width:520px; aspect-ratio:0.77; transform:rotate(0deg);
  background-image:url('../img/ink/field1.png') }
.bg-splat--2{ top:52%; right:-3%; width:700px; aspect-ratio:1.18; transform:rotate(-90deg) scaleX(-1);
  background-image:url('../img/ink/field2.png') }
.bg-splat--3{ top:78%; left:16%; width:560px; aspect-ratio:0.77; transform:rotate(0deg);
  background-image:url('../img/ink/field3.png') }
@media (max-width:900px){ .bg-splat{ opacity:.85 } }

.wall{ columns:3 300px; column-gap:2.6rem }
/* owner iteration: quiet black ink drops at section heads */
.section-head h2{ position:relative }
.section-head h2::after{ content:""; position:absolute; left:-50px; bottom:-4px;
  width:38px; height:26px; background:url('../img/ink/field3.png') left center/contain no-repeat;
  opacity:.6 }
@media (max-width:900px){ .section-head h2::after{ display:none } }
/* REMOVED per owner: black splash on hero brand-panel edge (upper right) —
   conflicts with the spill language; the PX artwork gets its own pass later. */
.wall > .card{ break-inside:avoid; margin-bottom:2.6rem }
.wall > .card:first-child{ break-inside:auto }
.wall > .card .card__media{ aspect-ratio:16/9 }
.wall > .card:nth-child(3n+2) .card__media{ aspect-ratio:5/6 }     /* taller plate */
.wall > .card:nth-child(3n)   .card__media{ aspect-ratio:21/9 }    /* wide frieze */
@media (min-width:1100px){
  .wall > .card--wide{ columns:1; width:100%; column-span:all }
  .wall:has(.card--wide) > .card--wide .card__media{ aspect-ratio:32/9 }
}