/* ==========================================================================
   layout.css — shell, sections, grids, the loom threads
   Structural only. Component skins live in components.css.

   Specificity note: section padding is declared HERE and nowhere else.
   Do not add vertical padding to .cta or any section variant in
   components.css — that is exactly how the old stylesheet ended up with
   rules cancelling each other.
   ========================================================================== */

/* --- Shell -------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: 1560px; }

/* --- Sections ----------------------------------------------------------
   ONE padding rule. Variants may change background, never spacing.      */
.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--flush-top { padding-block-start: 0; }
.section--raised { background: var(--ink-2); }

/* --- Section header ----------------------------------------------------- */
.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-block-end: var(--s-7);
  max-width: var(--measure);
}
.section__title {
  font-size: var(--step-h2);
}
.section__head--split {
  max-width: none;
}

@media (min-width: 860px) {
  .section__head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-6);
  }
  .section__head--split > * { max-width: 46ch; }
}

/* --- Auto grid ---------------------------------------------------------
   No media queries: the grid finds its own column count.                */
.grid {
  display: grid;
  gap: var(--s-5);
}
/* Grid items default to `min-width: auto`, meaning they refuse to shrink
   below their content's min-content width and silently overflow the track.
   That caused two separate bugs here — the stat strip clipping "98%" at
   390px, and the contact form pushing 17px of horizontal scroll at 1024px
   because its two-column field row has a 512px minimum. Fix it once, at the
   source, rather than chasing each component. */
.grid > * { min-width: 0; }
.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid--halves {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--s-7);
}

/* --- The loom threads --------------------------------------------------
   Four fixed hairlines spanning the viewport. Each scales horizontally
   with scroll progress, so the page visibly weaves as you read.
   Purely decorative: aria-hidden in markup, pointer-events none, and
   pinned under all content.                                             */
.loom {
  position: fixed;
  inset: 0;
  z-index: var(--z-threads);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 18vh;
}
.loom__thread {
  height: 1px;
  width: 100%;
  transform: scaleX(var(--weave, 0));
  transform-origin: left center;
  transition: transform 120ms linear;
  opacity: 0.5;
}
.loom__thread:nth-child(1) { background: var(--gold); transform-origin: left center; }
.loom__thread:nth-child(2) { background: var(--clay); transform-origin: right center; }
.loom__thread:nth-child(3) { background: var(--jade); transform-origin: left center; }
.loom__thread:nth-child(4) { background: var(--bone); transform-origin: right center; opacity: 0.25; }

/* Threads are a large-screen flourish. Below 700px they add noise and
   cost paint on exactly the Android hardware this site targets. */
@media (max-width: 700px) {
  .loom { display: none; }
}

/* --- Page content lifts above the threads ------------------------------ */
.page {
  position: relative;
  z-index: var(--z-content);
}

/* --- Rule ---------------------------------------------------------------- */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ======================= Light "sand" section surface =======================
   A warm parchment surface for section variety against the dark ground.
   Text tokens flip to warm darks; only components explicitly styled for sand
   should be placed here (the home Experiences panels are). Gold is fill-only
   on sand (fails as text), so gold text is remapped to earth. */
.section--sand { background: var(--sand); color: var(--sand-body); }
.section--sand .section__title,
.section--sand h2, .section--sand h3 { color: var(--on-accent); }
.section--sand .lede, .section--sand p { color: var(--sand-body); }
.section--sand .mono { color: var(--sand-mute); }
.section--sand .mono--gold { color: var(--earth); }      /* gold unreadable on sand */
.section--sand .rule, .section--sand hr { background: var(--sand-line); }