/* ==========================================================================
   YOPROFX / 03 — LAYOUT
   The building: sections, measures, the drafting grid, hairlines, and the
   margin annotation layer. Structure only — no component styling.
   ========================================================================== */

/* --- THE SHEET -----------------------------------------------------------
   Everything sits on a drafting sheet: near-black, faint grain, faint grid. */
.sheet {
  position: relative;
  isolation: isolate;
}

/* Film grain. One tiled SVG, fixed to the viewport, painted once. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("../assets/grain.svg");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  /* No will-change: the opacity is static per page, so promoting this
     full-viewport blended layer for the life of the document costs memory
     and buys nothing. */
}

/* --- SECTIONS ------------------------------------------------------------
   Full-width by default. A hairline at the top of every section is the
   site's basic rhythm; content is constrained inside. */
.section {
  position: relative;
  padding-block: var(--sp-section);
  border-top: var(--hair) solid var(--c-line-soft);
}

.section--flush { border-top: 0; }
/* Clears the fixed chrome. Required on the first section of any page that
   does not open with .hero (which clears it itself). */
.section--top   { padding-top: calc(var(--chrome-h) + var(--sp-2xl)); border-top: 0; }
.section--floor { background: var(--c-floor); }
.section--tall  { padding-block: calc(var(--sp-section) * 1.45); }
.section--short { padding-block: var(--sp-xl); }

/* Territory scoping. A section declares its hue; every component inside
   inherits it through --territory and nothing needs to be told twice. */
.t-transform { --territory: var(--t-transform); }
.t-play      { --territory: var(--t-play); }
.t-make      { --territory: var(--t-make); }
.t-tell      { --territory: var(--t-tell); }
.t-think     { --territory: var(--t-think); }
.t-house     { --territory: var(--c-bone); }

/* --- MEASURES ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--full { max-width: var(--w-full); }

/* Asymmetric compositions. Collapse to a single column below 60rem. */
.split {
  display: grid;
  gap: var(--sp-lg);
  align-items: start;
}

@media (min-width: 60rem) {
  .split          { grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
  .split--7-5     { grid-template-columns: 7fr 5fr; }
  .split--5-7     { grid-template-columns: 5fr 7fr; }
}

/* Card beds. Auto-fit so the same markup serves 2, 3 or 9 objects. */
.bed {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

/* --- THE VISIBLE GRID ---------------------------------------------------
   Decorative column rules, drawn like a drafting sheet. Desktop only; it
   reads as noise at small sizes, where it is simply not drawn. */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  max-width: var(--w-full);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 64rem) {
  .gridlines {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  .gridlines span {
    border-left: var(--hair) solid var(--c-line-soft);
  }
  .gridlines span:last-child {
    border-right: var(--hair) solid var(--c-line-soft);
  }
}

/* --- HAIRLINES ----------------------------------------------------------- */
.rule {
  border: 0;
  border-top: var(--hair) solid var(--c-line);
  width: 100%;
}

.rule--soft { border-top-color: var(--c-line-soft); }
.rule--lit  { border-top-color: var(--territory); }
.rule--stub { width: 3.5rem; border-top-color: var(--territory); }

/* --- REEL HEAD -----------------------------------------------------------
   The signature section header. Mono at both ends, signage in the middle,
   a hairline doing the connecting. Used on every section, every page. */
.reel {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xl);
}

.reel__n {
  flex: none;
  color: var(--territory);
}

.reel__t {
  flex: none;
  font-family: var(--font-structure);
  font-weight: 600;
  font-stretch: 112%;
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-bone);
}

.reel__line {
  flex: 1 1 auto;
  height: 0;
  border-top: var(--hair) solid var(--c-line);
  transform: translateY(-0.3em);
}

.reel__x {
  flex: none;
  color: var(--c-graphite);
}

@media (max-width: 40rem) {
  .reel { margin-bottom: var(--sp-lg); }
  .reel__x { display: none; }
}

/* A leader line, for callouts that point at something. */
.leader {
  display: inline-block;
  width: 2.25rem;
  height: 0;
  border-top: var(--hair) solid var(--c-line-lit);
  vertical-align: 0.28em;
  margin-inline: var(--sp-2xs);
}

/* --- STACKS -------------------------------------------------------------- */
.stack        { display: flex; flex-direction: column; gap: var(--sp-md); align-items: flex-start; }
.stack--tight { gap: var(--sp-2xs); }
.stack--sm    { gap: var(--sp-sm); }
.stack--lg    { gap: var(--sp-lg); }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-md);
}


.push { margin-inline-start: auto; }

/* --- SPACING UTILITIES --------------------------------------------------
   The only spacing that may appear on an element in markup. Anything else
   belongs in a component. */
.u-mt-sm  { margin-top: var(--sp-sm); }
.u-mt-lg  { margin-top: var(--sp-lg); }
.u-mt-xl  { margin-top: var(--sp-xl); }
.u-mb-xl  { margin-bottom: var(--sp-xl); }
.u-mb-2xl { margin-bottom: var(--sp-2xl); }