/* ==========================================================================
   layout.css — page shell, the master glass frame, section rhythm, and the
   contour backdrop that is this site's signature texture.

   The contour field is built from stacked repeating-radial-gradients with hard
   colour stops: concentric hairlines at irregular centres read as topographic
   contour lines. It is the one motif no competitor uses, it costs no image
   request, and it is the literal subject of the product.
   ========================================================================== */

.page {
  position: relative;
  min-height: 100vh;
  padding-top: var(--chrome-h);
  isolation: isolate;
}

/* --- Backdrop: mood wash + contour field + vignette ------------------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--mood);
  pointer-events: none;
}
.backdrop::before {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0.5;
  background:
    repeating-radial-gradient(circle at 18% 22%, transparent 0 46px, rgba(255,255,255,0.055) 46px 47px),
    repeating-radial-gradient(circle at 74% 12%, transparent 0 62px, rgba(255,255,255,0.04)  62px 63px),
    repeating-radial-gradient(circle at 52% 78%, transparent 0 54px, rgba(255,255,255,0.035) 54px 55px),
    repeating-radial-gradient(circle at 92% 62%, transparent 0 38px, rgba(255,255,255,0.03)  38px 39px);
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(140% 100% at 50% 0%, #000 20%, transparent 78%);
  animation: contour-drift 90s linear infinite alternate;
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(5,9,18,0.55) 62%, var(--night-950) 100%);
}
@keyframes contour-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-3%, -2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .backdrop::before { animation: none; } }

/* A ridgeline of contours pinned to the bottom of a section — used to close
   long content pages so they don't end on flat night. */
.contour-close {
  height: clamp(120px, 18vw, 260px);
  margin-top: calc(var(--section-y) * -0.4);
  background:
    repeating-radial-gradient(circle at 50% 190%, transparent 0 30px, var(--fg-5) 30px 31px);
  mask-image: linear-gradient(180deg, transparent, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%, transparent);
  pointer-events: none;
}

/* --- Containers ------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 900px; }
.shell--wide   { max-width: 1680px; }

/* The floating master frame: content sits inside one pane of glass. */
.master {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--r-2xl);
  background: var(--glass-tint-1);
  border: 1px solid var(--glass-stroke-2);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-4), var(--glass-inner-lift);
  overflow: clip;
}

/* --- Sections -------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* A section can wash itself in a mood without changing the page track. */
.section--wash { position: relative; }
.section--wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--section-mood, var(--mood-night));
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.section-head { max-width: 74ch; margin-bottom: clamp(32px, 4vw, 64px); }
.section-head .lead { margin-top: var(--s-5); }

/* --- Grids ------------------------------------------------------------ */
.grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* Split: prose beside a figure. Reverses with a modifier, never a media hack. */
.split { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.split--60 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.split--40 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.split--flip > :first-child { order: 2; }

/* Docked highlight: half out of the master frame, per the Aurix layout rule. */
.dock {
  position: relative;
  padding: var(--s-6) var(--s-8);
  border-radius: var(--r-xl);
  background: var(--glass-tint-3);
  border: 1px solid var(--glass-stroke-3);
  backdrop-filter: blur(var(--glass-blur-lg));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  box-shadow: var(--shadow-3), var(--glass-inner-lift);
}
.dock--right { margin-right: calc(var(--gutter) * -1); }
.dock--left  { margin-left:  calc(var(--gutter) * -1); }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split, .split--60, .split--40 { grid-template-columns: minmax(0,1fr); }
  .split--flip > :first-child { order: 0; }
  .dock--right, .dock--left { margin-inline: 0; }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0,1fr); }
}