/* Selva — drawing kit (prefix il-). Fine pen-line architectural drawings as inline SVG.
   Tokens only (tokens.css). Method + parts: ILLUSTRATIONS.md. Catalogue: pages/illustrations.html.

   The board: every drawing is drawn in a 1378 × 1040 viewBox (2× its 689 × 520 display size), so the
   unitless stroke widths below are user units and land at the source's ~1px pen at desktop width.
   Ink is currentColor (= --text); the only fills are the 6% hatch tint and one 6px accent dot.

   <figure class="il-frame">
     <div class="il il--elevation" data-m-draw>
       <svg viewBox="0 0 1378 1040" role="img" aria-labelledby="…"> <title>…</title>
         <path class="il-line" d="…"/> <path class="il-thin" d="…"/> <path class="il-ground" d="…"/>
         <text class="il-label" x="…" y="…">North elevation</text>
       </svg>
     </div>
     <figcaption class="il-cap"><span>Elevation</span> parts used</figcaption>
   </figure>                                                                                        */

/* ── wrapper ── */
.il { display: block; position: relative; width: 100%; max-width: 689px; aspect-ratio: 1378 / 1040; color: var(--text);
      --il-ground: 82%; --il-fill-x: 8%; --il-fill-y: 8%; }
.il > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.il path, .il line, .il polyline, .il circle, .il ellipse, .il rect, .il polygon {
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* ── pen weights (user units on the 2× board; see the phone block for small screens) ── */
.il .il-line   { stroke-width: 2.2; }                          /* 1.1px — outlines, edges, everything that is "the thing" */
.il .il-thin   { stroke-width: 1.2; }                          /* .6px — detail: boards, glazing bars, plants, leaves */
.il .il-dash   { stroke-width: 1.3; stroke-dasharray: 7 6; }   /* hidden lines, things above, light falling, where it goes */
.il .il-ground { stroke-width: 3; }                            /* the one heavy line the drawing stands on */
.il .il-figure { stroke-width: 1.9; }                          /* people + hands: one-stroke outlines, no faces */
.il .il-dims   { stroke-width: 1.1; }                          /* dimension + extension lines (ticks are il-line) */
.il .il-hatch  { stroke-width: 1; }                            /* the one hatch: cut material, deep shadow, earth */
.il .il-tint   { fill: currentColor; fill-opacity: .06; stroke: none; }   /* optional 6% ink tint under a hatch */
.il .il-dot    { fill: var(--accent); stroke: none; }          /* the single accent: one 6px dot (r=6 on the board) */

/* ── labels: Schibsted 11–12px at display, caps, ≤ 3 words, ≤ 4 per drawing ── */
.il .il-label { fill: currentColor; stroke: none; font-family: var(--font); font-size: 23px; font-weight: 400; letter-spacing: .9px; }
.il .il-label--plain { letter-spacing: 0; }                    /* numbers + units: "26.8 m", "1:100" */

/* ── a dimension, for hand-written SVG: <g class="il-dims"> line + two ticks + extension lines ── */
.il .il-dims path, .il .il-dims line { stroke-width: 1.1; }
.il .il-dims .il-tick { stroke-width: 2.2; }

/* ── people: simple one-stroke figures (outline silhouettes, 1 per drawing for scale) ── */
.il .il-figure path { stroke-width: 1.9; }

/* ── layout patterns: where the ground sits and how much of the board the drawing fills ──
   (--il-ground = ground line from the top; --il-fill-* = the white margin each side). Add .is-guides
   to see them while composing; never ship with guides on. */
.il--elevation { --il-ground: 82%; --il-fill-x: 8%;  --il-fill-y: 10%; }   /* façade, flat on: ground line, 1 figure, dims below */
.il--section   { --il-ground: 80%; --il-fill-x: 8%;  --il-fill-y: 12%; }   /* cut through: cut = il-line + il-hatch, beyond = il-thin */
.il--axo       { --il-ground: 86%; --il-fill-x: 10%; --il-fill-y: 9%;  }   /* 30° / 30° parallel view on a ground slab, hatch the cut faces */
.il--plan      { --il-ground: 86%; --il-fill-x: 15%; --il-fill-y: 14%; }   /* top view: poché walls, door arcs, furniture il-thin, north point */
.il--object    { --il-ground: 72%; --il-fill-x: 8%;  --il-fill-y: 12%; }   /* object on a table: table edge ≈ 72%, the hand comes in from a corner */
.il--people    { --il-ground: 82%; --il-fill-x: 6%;  --il-fill-y: 10%; }   /* people at work: one-point view, loose vignette edge */
.il.is-guides::before, .il.is-guides::after { content: ""; position: absolute; pointer-events: none; }
.il.is-guides::before { left: 0; right: 0; top: var(--il-ground); border-top: 1px dashed var(--accent); }
.il.is-guides::after { inset: var(--il-fill-y) var(--il-fill-x); outline: 1px dashed var(--line); }

/* ── the frame + caption used on catalogue and inner pages ── */
.il-frame { margin: 0; }
.il-frame .il { max-width: none; }
.il-frame--ruled { border: 1px solid var(--line); padding: 24px; }
.il-cap { margin-top: 10px; font-family: var(--font); font-size: 12px; line-height: 1.3; letter-spacing: -.12px; color: var(--muted-ink); }
.il-cap span { color: var(--text); text-transform: uppercase; letter-spacing: .6px; margin-right: 8px; }

/* ── motion: put data-m-draw on .il and motion.js draws every path on scroll (one path per part = one stroke
   of the pen, ~80ms apart); ?static and reduced motion show the finished drawing ── */

/* ── small screens: the board shrinks to ~343px, so the pen gets heavier to stay ~1px ── */
@media (max-width: 560px) {
  .il .il-line   { stroke-width: 3.6; }
  .il .il-thin   { stroke-width: 2.1; }
  .il .il-dash   { stroke-width: 2.2; stroke-dasharray: 12 10; }
  .il .il-ground { stroke-width: 4.8; }
  .il .il-figure, .il .il-figure path { stroke-width: 3.1; }
  .il .il-dims   { stroke-width: 1.9; }
  .il .il-hatch  { stroke-width: 1.7; }
  .il .il-label  { font-size: 40px; letter-spacing: 1.4px; }
  .il-frame--ruled { padding: 12px; }
}