/* ntvrli design system — the homepage below the hero (sections 02–06).
   Measured from the owner's reference video on its 1280×720 grid: the page
   comes out of the finished hero as a clean capability band, then turns into
   its own wireframe (studio), a marker sketch (method), dark panels over
   drawings (work) and a way to start. The hero is in evolution.css; the marks
   are markup.css; the footer, which is sitewide, is in evolution.css. */

/* --inset (the video's inner margin) lives in evolution.css with the work
   grid, which /work shares. */

/* Shared: section label row and the plain capability column. */
.sec-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem 2rem; flex-wrap:wrap; }
.sec-link { text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.sec-link:hover,.sec-link:focus-visible { text-decoration:underline; text-underline-offset:.35em; }
.band-name { font-family:var(--face-sans); font-weight:700; text-transform:uppercase; letter-spacing:-.005em;
  font-size:clamp(1.15rem,.8rem + .9vw,1.6rem); line-height:1.05; margin-top:.3rem; }
.band-dash { display:block; width:1.1rem; border-top:1px solid currentColor; margin:.95rem 0 1.1rem; }

/* ── 02 CAPABILITY BAND ─────────────────────────────────────────────────
   One tight row after the hero. Four columns split by short hairlines at
   heading height; the words are the plain names of what is sold. */
.band { position:relative; padding:1.1rem var(--gut) clamp(2.5rem,6vh,3.75rem);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 26%,transparent); }
.band-num { margin-bottom:1rem; }
.band-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; align-items:start; }
.band-col { position:relative; padding:0 clamp(1rem,2.2vw,2.25rem); }
.band-col:first-child { padding-left:clamp(0rem,2vw,1.75rem); }
.band-col + .band-col::before { content:""; position:absolute; left:0; top:1.9rem; height:2.4rem;
  border-left:1px solid color-mix(in srgb,var(--ink) 40%,transparent); }
.band-head { position:relative; display:inline-block; }
.band-list { list-style:none; display:grid; gap:.3rem; text-transform:uppercase; }
.band-note { align-self:center; text-transform:uppercase; line-height:1.55; }
/* The arc that leaves the band and drops into the studio wireframe. */
.mk-band-arc { left:calc(var(--gut) + 9%); bottom:-9.5rem; width:min(560px,44vw); height:200px; z-index:2; }

/* ── 03 STUDIO, AS WIREFRAME ────────────────────────────────────────────
   A pencil frame for the studio itself, a 2×2 grid of placeholder frames
   (the graphite drawings of real build artefacts arrive in step 7), and a
   small side column. Every frame is drawn, not bordered. */
.studio { position:relative; padding:1.1rem var(--gut) clamp(4rem,10vh,6rem); }
.studio-grid { display:grid; grid-template-columns:minmax(0,307fr) minmax(0,363fr) minmax(0,170fr);
  column-gap:clamp(1rem,2.2vw,2.25rem); margin:clamp(1.5rem,4vh,2.5rem) 0 0 var(--inset); max-width:62rem; }
.studio-main { position:relative; min-height:16.25rem; padding:1rem 1.1rem 1.25rem; display:flex; flex-direction:column; justify-content:space-between; }
.studio-title { font-family:var(--face-sans); font-weight:700; text-transform:uppercase; font-size:clamp(1.15rem,.8rem + .9vw,1.6rem); margin-top:.5rem; }
.studio-copy .band-dash { margin:.8rem 0 .9rem; }
.studio-body { font-family:var(--face-sans); font-size:.95rem; line-height:1.55; max-width:32ch; }
.studio-cells { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:1.1rem .9rem; align-content:start; }
.studio-cell { position:relative; }
.studio-cell img, .studio-thumb img { display:block; width:100%; height:auto; aspect-ratio:480/340; object-fit:cover; }
.studio-thumb img { aspect-ratio:1; }
.studio-cell .mk-frame { height:auto; aspect-ratio:480/340; }
.studio-cell .micro { margin-top:.45rem; line-height:1.35; }
.studio-side { display:grid; align-content:start; gap:.55rem; }
.studio-thumb { position:relative; width:6rem; aspect-ratio:1; margin-bottom:1.1rem; }

/* ── 04 METHOD, AS SKETCH ───────────────────────────────────────────────
   The four stages lettered in marker, numbered in terracotta, joined by
   drawn arrows in reading order: across, back and down, across. */
.method { position:relative; padding:clamp(3rem,9vh,5.5rem) var(--gut) clamp(7rem,18vh,10rem); }
.method-num { position:absolute; left:var(--gut); top:calc(clamp(3rem,9vh,5.5rem) + .6rem);
  font-family:var(--face-mono); font-size:clamp(1.5rem,2.5vw,2.1rem); font-weight:400; }
.method-body { position:relative; margin-left:var(--inset); max-width:58rem; }
.method-grid { list-style:none; position:relative; display:grid;
  grid-template-columns:minmax(0,370fr) minmax(0,362fr); column-gap:clamp(4rem,12vw,10rem); row-gap:clamp(3.5rem,9vh,5.5rem); }
.method-step { position:relative; }
.method-name { font-family:var(--face-marker); font-weight:400; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(2.2rem,1rem + 3vw,3.6rem); line-height:1; letter-spacing:.005em; }
.method-n { color:var(--mk-terra-text); }
/* Colour planes (the owner's third reference video): each stage sits on a
   flat plane, offset like a pasted-down card, with a huge bone numeral and one
   crayon stroke across it. Planes use the pencil palette because text sits on
   them: ink measures 5.8–11:1 on all four. The numeral is decorative. */
.method-step { isolation:isolate; }
.method-plane { position:absolute; z-index:-1; left:-1.4rem; right:-1.4rem; top:-1.3rem; bottom:-1.8rem;
  background:var(--plane); overflow:hidden; }
.method-step:nth-child(1) { --plane:var(--mk-terra); }
.method-step:nth-child(2) { --plane:var(--mk-teal); }
.method-step:nth-child(3) { --plane:var(--mk-yellow); }
.method-step:nth-child(4) { --plane:var(--mk-blue); }
.method-plane > span { position:absolute; right:.1em; bottom:-.18em; font-family:var(--face-display); font-size:clamp(7rem,12vw,11rem);
  line-height:1; color:color-mix(in srgb,var(--bone) 75%,transparent); }
.method-plane .mk-plane-stroke { left:0; top:auto; bottom:-1.2rem; width:62%; height:3.4rem; }
/* The text keeps clear of the numeral, so ink never sits on a mark. */
.method-step p { max-width:min(34ch,68%); }
.method-step .method-n { color:var(--ink); }
/* The first crayon gesture on the page, in the gap above the method. */
.mk-sweep { left:3%; top:-5.6rem; width:min(1100px,88%); height:150px; z-index:1; }
.method-step p { font-family:var(--face-sans); font-size:1rem; line-height:1.55; max-width:34ch; margin-top:.9rem; }
.mk-step-arrow { left:calc(100% + .75rem); top:.2em; width:calc(clamp(4rem,12vw,10rem) - 1.5rem); height:24px; font-size:clamp(2.2rem,1rem + 3vw,3.6rem); }
.mk-method-return { inset:0; width:100%; height:100%; }
.mk-method-star { left:calc(-1 * min(var(--inset), 7rem) - 1rem); top:38%; width:110px; height:90px; }
.method-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2.25rem; margin-top:clamp(3rem,7vh,4.5rem); }
.sk-button { position:relative; display:inline-grid; place-items:center; min-height:44px; padding:.8rem 1.6rem;
  font-family:var(--face-mono); font-size:var(--t-micro); font-weight:var(--micro-weight); letter-spacing:var(--track-micro);
  text-transform:uppercase; text-decoration:none; }
.sk-button > span { position:relative; z-index:1; }
.sk-link { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; text-decoration:none;
  font-family:var(--face-mono); font-size:var(--t-micro); font-weight:var(--micro-weight); letter-spacing:var(--track-micro); text-transform:uppercase; }
.sk-button:hover span,.sk-button:focus-visible span,.sk-link:hover .mk-word,.sk-link:focus-visible .mk-word { text-decoration:underline; text-underline-offset:.35em; }
.mk-method-onward { right:14%; bottom:-6.5rem; width:500px; height:300px; }

/* ── 06 WAYS TO START ───────────────────────────────────────────────────── */
.engage { position:relative; padding:clamp(3rem,8vh,5rem) var(--gut) clamp(4rem,10vh,6rem);
  border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent); }
.engage-row { margin-top:clamp(2rem,5vh,3rem); grid-template-columns:repeat(4,minmax(0,1fr)); }
.engage-body { font-family:var(--face-sans); font-size:.95rem; line-height:1.55; max-width:28ch; }
.engage-close { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-top:clamp(4rem,10vh,6.5rem); }
.engage-title { font-family:var(--face-display); font-weight:400; text-transform:uppercase; line-height:.9;
  font-size:clamp(3rem,7.4vw,8rem); }

/* ── NARROW ─────────────────────────────────────────────────────────────
   The wireframe and sketch compositions become single columns; the loose
   marks that only make sense across a wide composition are left out, and
   every mark anchored to its own element stays. */
@media (max-width:1100px) {
  .band-row,.engage-row { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2.25rem; }
  .band-col,.band-col:first-child { padding:0 1.5rem 0 0; }
  .band-col + .band-col::before { display:none; }
  .band-note { grid-column:1/-1; }
  .studio-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:1.5rem; margin-left:0; }
  .studio-side { grid-column:1/-1; }
}
@media (max-width:900px) {
  .mk-band-arc,.mk-method-return,.mk-method-star,.mk-method-onward,.mk-step-arrow,.mk-sweep { display:none; }
  .method-plane { left:-1rem; right:-1rem; }
  .mk-lede { left:-.9em; top:.72em; width:.95em; height:1.33em; }
  .method-body { margin-left:0; }
  .method-num { position:static; margin-bottom:1.5rem; }
  .method-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .band-row,.engage-row { grid-template-columns:1fr; }
  .studio-grid { grid-template-columns:1fr; }
  .method-name { white-space:normal; }
}