/* ═══════════════════════════════════════════════════════════════════════════
   GEN-16 · THE PIGMENT POUR
   The portfolio at dsl.teachsite.org. Prayas's signature, declarative register.

   The device: every project owns a pigment, and that pigment arrives as a POURED
   MASS running down the page — a body of colour with a hand-torn contour and the
   weight of gravity in it, never a card, never a border, never a tinted line.
   Work is set ON the pour or in the warm dark beside it. The ground is visible
   between pours, which is what keeps a painting on the page rather than a grid.

   Deliberately the counter-polarity of GEN-15 (the course tool this replaces at
   the same address): that was a hot saffron field with the night carved into it,
   fourteen standing days, transient, a working instrument. This is a warm umber
   night with pigment poured down it, no days at all, and nothing that passes.

   Chord — umber-black ground, eight pigments that clash and glow on it.
   Type   — Vesper Libre (display + running) · Lekton (machinery).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Ground. Never #000; warm umber-black, modelled rather than flat. */
  --ink:        #150f0b;
  --ink-lift:   #241a12;
  --ink-deep:   #0d0906;
  --bone:       #f2e9d8;
  --bone-dim:   #bdae97;
  --bone-far:   #8b7d69;

  /* The eight pigments. High chroma. They are masses, not accents. */
  --p1: #dc4526;   /* vermilion   */
  --p2: #b81410;   /* cadmium     */
  --p3: #e8a41c;   /* saffron     */
  --p4: #0f9c8a;   /* peacock     */
  --p5: #2a52c8;   /* cobalt      */
  --p6: #7d1636;   /* oxblood     */
  --p7: #3d8f68;   /* verdigris   */
  --p8: #c02864;   /* magenta rose*/

  --pigment: var(--p1);          /* overridden per project, inline */
  --measure: 38rem;

  --display: 'Vesper Libre', 'Hoefler Text', Georgia, serif;
  --mono: 'Lekton', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── The ground is MODELLED, never a flat fill ──────────────────────────────
   A broad diagonal fall from lifted umber into the deep, plus two soft warm
   masses low in the field so the dark has distance in it, plus a vignette.
   No area of this page is one colour.                                       */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(62rem 46rem at 10% 4%, rgba(232,164,28,.17), transparent 60%),
    radial-gradient(50rem 40rem at 96% 38%, rgba(220,69,38,.13), transparent 58%),
    radial-gradient(58rem 50rem at 40% 96%, rgba(15,156,138,.10), transparent 62%),
    radial-gradient(70rem 60rem at 74% 74%, rgba(125,22,54,.12), transparent 64%),
    linear-gradient(158deg, var(--ink-lift) 0%, var(--ink) 38%, var(--ink-deep) 78%, #171009 100%);
}

/* Grain — the medium shows through. An SVG turbulence tile, not a raster. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── Machinery type ────────────────────────────────────────────────────────*/
.m {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--bone-far);
}

a { color: inherit; }

/* ── Masthead ──────────────────────────────────────────────────────────────
   Asymmetric, never a centred hero. The wordmark sits left with a single fat
   paint-run falling off it — gravity, and the site's first pour.            */
.top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 3.2rem clamp(1.4rem, 5vw, 5.5rem) 0;
  flex-wrap: wrap;
}

.wordmark {
  position: relative;
  font-size: clamp(1.5rem, 3.1vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.012em;
  text-decoration: none;
  padding-bottom: .5rem;
}
.wordmark i { font-style: normal; color: var(--p3); }

/* the run off the masthead — one, fat, and it stops */
.wordmark::after {
  content: '';
  position: absolute;
  left: .34em;
  top: 100%;
  width: .30em;
  /* ⚠️ The run is a fixed length and the wordmark above it is fluid, so at narrow widths the two
     stopped agreeing and the paint ran straight through the first line of the page. Both are fluid
     now, and the sections below reserve clearance for it. Caught only by rendering at 760px. */
  height: clamp(2.1rem, 3.4vw, 3.6rem);
  background: linear-gradient(180deg, var(--p3), rgba(232,164,28,.5) 45%, transparent);
  border-radius: 0 0 55% 45% / 0 0 22% 26%;
}

nav.top-nav { display: flex; gap: 1.5rem; padding-top: .7rem; flex-wrap: wrap; }
nav.top-nav a { text-decoration: none; }
nav.top-nav a:hover { color: var(--p3); }
/* The one nav item that is an action rather than a place. Marked, not shouted. */
nav.top-nav a.mine { color: var(--p3); border-bottom: 2px solid currentColor; padding-bottom: .12rem; }
nav.top-nav a.mine:hover { color: var(--bone); }

/* ── THE POUR — the page-carrying device ───────────────────────────────────
   A body of pigment falling from the top of its own field. The contour on the
   right is hand-torn (a polygon with real wander in it, well over the 2% below
   which a wobble stops reading at all), and it weeps at the bottom.         */
.pour {
  position: relative;
  background: linear-gradient(178deg,
      color-mix(in srgb, var(--pigment) 100%, white 8%) 0%,
      var(--pigment) 38%,
      color-mix(in srgb, var(--pigment) 82%, var(--ink-deep)) 100%);
  clip-path: polygon(
    0% 0%, 100% 0%,
    97.2% 9%, 99.4% 17%, 95.8% 26%, 98.6% 34%, 94.4% 43%,
    97.8% 52%, 93.6% 61%, 97.0% 70%, 92.8% 79%, 96.2% 88%, 91.6% 100%,
    0% 100%
  );
  isolation: isolate;
}

/* the pour's own surface is worked — no flat fill anywhere */
.pour::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: .5;
  background:
    radial-gradient(120% 60% at 20% 0%, transparent 40%, rgba(0,0,0,.42)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size: cover, 300px 300px;
  pointer-events: none;
}

/* The drips — three, of decreasing length, off the bottom edge.
   🔴 A DRIP MUST BE A SIBLING OF THE POUR, NEVER A CHILD. The pour carries a clip-path, and a
   clip-path clips its descendants — including an absolutely positioned one at `top: 100%`, which
   is by definition outside the clipped region. Put inside, the drips vanish completely: no error,
   no layout shift, nothing in the CSS reading as wrong, and the only way to know is to look. */
.drips { position: absolute; left: 0; right: 6%; top: 100%; height: 7rem; pointer-events: none; }
.drips i {
  position: absolute;
  top: 0;
  display: block;
  background: linear-gradient(180deg, var(--pigment), color-mix(in srgb, var(--pigment) 40%, transparent));
  border-radius: 0 0 60% 40% / 0 0 14% 16%;
}
.drips i:nth-child(1) { left: 14%; width: 1.5rem; height: 6.4rem; }
.drips i:nth-child(2) { left: 43%; width: .95rem; height: 3.5rem; }
.drips i:nth-child(3) { left: 72%; width: .6rem;  height: 1.7rem; }

/* ── HOME · five pours standing in the dark ────────────────────────────────
   Different widths and different depths, so the row is a composition and not
   a row of tiles. The ground is visible between them and under them.        */
.field {
  display: grid;
  /* 🔴 THE WIDTHS DIFFER, NOT ONLY THE DEPTHS. Five equal columns of varying height on a shared
     field read as a bar chart whatever they are made of — the GEN-15 lesson, which cost that
     generation a rebuild. Unequal widths break the grammar of measure outright. */
  grid-template-columns: 1.15fr .82fr 1.3fr .78fr 1fr;
  align-items: start;
  gap: clamp(.9rem, 2.4vw, 2.8rem);
  padding: clamp(1.6rem, 3.5vw, 3.2rem) clamp(1.4rem, 5vw, 5.5rem) 11rem;
}

.draw { position: relative; text-decoration: none; display: block; }
/* the depths — each pour hangs from a different height */
.draw:nth-child(1) { margin-top: 0; }
.draw:nth-child(2) { margin-top: 5.5rem; }
.draw:nth-child(3) { margin-top: 1.6rem; }
.draw:nth-child(4) { margin-top: 8.2rem; }
.draw:nth-child(5) { margin-top: 3.1rem; }

.draw .pour { padding: 1.6rem 1.35rem 1.9rem; }

/* 🔴 THE IMAGE IS A PLATE ON THE MASS, NOT THE MASS ITSELF. Filling the pour with the picture left
   the pigment showing only as a hairline and put the title on top of somebody's photograph — the
   text had no ground of its own, which is the GEN-14 correction. The pigment shows above it, below
   it and down one side, and the words sit on bare paint. */
.draw figure { margin: 0 0 1rem -2.2rem; }

/* the image sits ON the mass and overhangs its left edge — set into the paint,
   not framed by it */
.draw figure { margin: 0 0 1.1rem -2.2rem; }
.draw img {
  display: block;
  width: calc(100% + 2.2rem);
  aspect-ratio: 5 / 4;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
  box-shadow: 0 1.1rem 2.4rem rgba(0,0,0,.45);
}
.draw .no-img {
  display: block;
  width: calc(100% + 2.2rem);
  aspect-ratio: 5 / 4;
  background: linear-gradient(150deg, rgba(0,0,0,.42), rgba(0,0,0,.06));
}

.draw h2 {
  font-size: clamp(1.02rem, 1.32vw, 1.42rem);
  line-height: 1.16;
  margin: 0 0 .5rem;
  font-weight: 400;
  color: #fff;
  text-wrap: balance;
}
.draw .by { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: rgba(255,255,255,.82); }

.draw:hover .pour { filter: brightness(1.11) saturate(1.09); }
.draw .pour { transition: filter .5s cubic-bezier(.22,.61,.36,1); }

/* the slow settle — gravity, not a snappy micro-interaction */
@keyframes settle { from { transform: translateY(-1.6rem); opacity: 0; } to { transform: none; opacity: 1; } }
.draw { animation: settle 1.5s cubic-bezier(.16,.84,.31,1) both; }
.draw:nth-child(2) { animation-delay: .10s; }
.draw:nth-child(3) { animation-delay: .20s; }
.draw:nth-child(4) { animation-delay: .30s; }
.draw:nth-child(5) { animation-delay: .40s; }
@media (prefers-reduced-motion: reduce) { .draw { animation: none; } }

/* ── The lede, set in the dark beside the pours ────────────────────────────*/
.lede {
  padding: max(3.4rem, clamp(1.8rem, 4vw, 3rem)) clamp(1.4rem, 5vw, 5.5rem) 0;
  max-width: 46rem;
}
.lede p {
  font-size: clamp(1.18rem, 2.1vw, 1.62rem);
  line-height: 1.42;
  margin: 0 0 1rem;
  text-wrap: pretty;
}
.lede .m { display: block; margin-bottom: 1.1rem; }

/* ── PROJECT PAGE · one wide pour on the left, reading in the dark ─────────*/
.work {
  display: grid;
  grid-template-columns: minmax(15rem, 22vw) minmax(0, 58rem);
  gap: clamp(1.6rem, 4vw, 4.5rem);
  justify-content: start;
  padding: max(3.4rem, clamp(2.4rem, 5vw, 4rem)) clamp(1.4rem, 5vw, 5.5rem) 0;
  align-items: start;
}

.spine { position: sticky; top: 1.6rem; }
.work .pour { padding: 2rem 1.7rem 2.6rem; }
.work .pour h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  line-height: 1.08;
  margin: .4rem 0 1rem;
  font-weight: 400;
  color: #fff;
  text-wrap: balance;
}
.work .pour .who { margin: 1.4rem 0 0; }
.work .pour .who li { list-style: none; margin: 0 0 .2rem; }
.work .pour .who a { color: rgba(255,255,255,.95); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.work .pour ul { padding: 0; margin: 0; }
.work .pour .m { color: rgba(255,255,255,.72); }

.read { min-width: 0; padding-bottom: 8rem; }
.read .standfirst {
  font-size: clamp(1.24rem, 2.05vw, 1.6rem);
  line-height: 1.4;
  margin: 0 0 2.2rem;
  max-width: var(--measure);
  color: #fff;
  text-wrap: pretty;
}
.read p { max-width: var(--measure); margin: 0 0 1.25rem; }
.read h2 {
  font-weight: 400;
  font-size: 1.42rem;
  margin: 2.6rem 0 .8rem;
  color: var(--pigment);
  filter: brightness(1.35);
}
.read ul, .read ol { max-width: var(--measure); padding-left: 1.1rem; }
.read blockquote {
  margin: 1.8rem 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--pigment);
  max-width: var(--measure);
  color: var(--bone-dim);
}

/* Images run wide, out past the measure — the work is the point. 🔴 BUT THEY ARE CAPPED IN HEIGHT.
   A portrait photograph at full column width rendered nine hundred pixels tall, pushed every word
   of the writing below the fold, and left the page reading as one enormous rectangle. A picture is
   the work; it is not the page. */
.plate { margin: 2.6rem 0; }
.plate img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 74vh;
  height: auto;
  box-shadow: 0 1.4rem 3rem rgba(0,0,0,.42);
}
.plate figcaption { margin-top: .55rem; max-width: var(--measure); color: var(--bone-far); font-family: var(--mono); font-size: .78rem; line-height: 1.5; }

/* ── Video · a stored poster and a click. Nothing third-party loads until then ─*/
.vid { margin: 2.6rem 0; }
.vid button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--ink-deep);
  font: inherit;
  color: inherit;
}
.vid img { display: block; width: auto; max-width: 100%; max-height: 74vh; height: auto; opacity: .82; }
.vid .mark {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 5.2rem; height: 5.2rem;
  border-radius: 50%;
  background: var(--pigment);
  display: grid;
  place-items: center;
  box-shadow: 0 0 5rem color-mix(in srgb, var(--pigment) 60%, transparent);
}
.vid .mark::after {
  content: '';
  width: 0; height: 0;
  margin-left: .45rem;
  border-left: 1.5rem solid #fff;
  border-top: .95rem solid transparent;
  border-bottom: .95rem solid transparent;
}
.vid button:hover img { opacity: 1; }
.vid iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.vid .note { margin-top: .55rem; color: var(--bone-far); font-family: var(--mono); font-size: .74rem; }

/* ── Tags — marks in mono, never buttons ───────────────────────────────────*/
.tags { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 2.8rem 0 0; padding: 0; }
.tags li { list-style: none; }
.tags a {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .09em;
  text-decoration: none;
  color: var(--bone-dim);
  border-bottom: 2px solid var(--pigment);
  padding-bottom: .12rem;
}
.tags a:hover { color: #fff; }

/* ── Index pages · a comb of narrow pours ──────────────────────────────────*/
.comb {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: clamp(.9rem, 2vw, 2rem);
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.4rem, 5vw, 5.5rem) 10rem;
  align-items: start;
}
.comb .draw { animation: none; }
.comb .draw:nth-child(odd)  { margin-top: 0; }
.comb .draw:nth-child(even) { margin-top: 2.6rem; }
.comb .draw .pour { min-height: 15rem; padding: .95rem 1.1rem 2rem; }
.comb .draw h2 { font-size: 1.02rem; }

.page-head { padding: max(3.4rem, clamp(2.4rem, 5vw, 4rem)) clamp(1.4rem, 5vw, 5.5rem) 0; max-width: 46rem; }
.page-head h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 400; line-height: 1.06; margin: .5rem 0 .8rem; text-wrap: balance; }
.page-head p { color: var(--bone-dim); max-width: var(--measure); margin: 0; }

/* ── The draft bar ─────────────────────────────────────────────────────────
   Shown only on a preview of an unpublished page. Loud, because the whole risk of a preview is
   somebody believing their work is public when it is not — or that it IS public when it is not. */
.draft-bar {
  position: sticky; top: 0; z-index: 9;
  display: flex; gap: 1.2rem; align-items: baseline; flex-wrap: wrap;
  padding: .7rem clamp(1.4rem, 5vw, 5.5rem);
  background: var(--p3); color: var(--ink-deep);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.draft-bar b { font-family: var(--display); font-size: 1rem; font-weight: 400;
  letter-spacing: normal; text-transform: none; }
.draft-bar a { color: inherit; text-underline-offset: 3px; }

/* ── Foot ──────────────────────────────────────────────────────────────────*/
footer {
  padding: 2.5rem clamp(1.4rem, 5vw, 5.5rem) 4rem;
  border-top: 1px solid rgba(242,233,216,.13);
  margin-top: 4rem;
  display: flex;
  gap: 1.6rem 2.6rem;
  flex-wrap: wrap;
  align-items: baseline;
}
footer a { color: var(--bone-dim); }

/* ── Narrow ────────────────────────────────────────────────────────────────
   The pours stop being a row and become a fall — one after another, still with
   the ground between them. Never a stack of cards.                          */
@media (max-width: 62rem) {
  .work { grid-template-columns: 1fr; }
  .spine { position: static; }
  .field { grid-template-columns: repeat(2, 1fr); padding-bottom: 7rem; }
  .draw:nth-child(n) { margin-top: 0; }
  .draw:nth-child(even) { margin-top: 3.2rem; }
}
@media (max-width: 34rem) {
  .field { grid-template-columns: 1fr; gap: 2.6rem; }
  .draw:nth-child(even) { margin-top: 0; }
  .draw figure { margin-left: -1.1rem; }
  .draw img, .draw .no-img { width: calc(100% + 1.1rem); }
  .drips { display: none; }
}