/* DRAWN FIRST — the 2019 concept work, on the spine, immediately after the
   paragraph that names its three ideas.
   ---------------------------------------------------------------------------
   The story section says the house was commissioned as "a monolith … inter-
   locking volumes, blended into the trees". Those are not our words: they are
   the chapter titles of Hyejin Yang's 2019 concept deck. This section puts the
   drawings under the sentence so the claim is shown rather than asserted.

   The translucent layer: the finished house, seen from above, sits behind the
   copy at low opacity under `mix-blend-mode: multiply`. On the site's ivory
   paper, multiply drops the white roofs out into the page and prints only the
   canopy and the neighbouring blocks — a watermark rather than a picture pasted
   behind text. The foreground plates stay at full opacity, so the ghosting
   reads as depth and never as a faded image.

   Photograph, not drawing, and that is the point: the section is about the house
   being drawn before it existed, so the built thing showing faintly through the
   page underneath is the payoff rather than a repetition. It also earns its
   keep technically — a line diagram has almost no ink, and at these opacities
   would disappear.

   Blend support is not assumed. Without `mix-blend-mode` the backdrop would
   render as a flat grey rectangle over the paper, so the @supports block is
   what turns it on; the default is a much fainter plain-opacity wash.
   --------------------------------------------------------------------------- */

.drawn {
  position: relative;
  isolation: isolate;                 /* keep the multiply off the page behind */
  overflow: clip;
  padding-block: var(--sp-xl) var(--sp-lg);
}

/* The ghost. Decorative only — the same aerial is published, captioned and
   credited on /shell, so this copy carries empty alt and aria-hidden.

   It is deliberately confined to the TOP of the section and masked out before
   the plates begin. Two reasons, both found by looking at it rather than by
   reasoning about it:

   1. Legibility. Run full height, the canopy landed directly under the plate
      captions and took their contrast down with it. Captions must never sit on
      the dark part of a picture.
   2. Subject collision. Whatever is back there must not be another view of what
      is in front of it, or it reads as a duplicate rather than as depth. This
      was learned with a massing study behind massing plates, which looked like
      noise; the rule survives the change of image and is why the ghost is a
      photograph while the plates are drawings.

   Paint order was verified correct (the plates hit-test above it); the fault was
   compositional, not a stacking bug. */
.drawn__ghost {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: -1;
  width: min(120rem, 148%);
  height: min(60%, 36rem);
  object-fit: cover;
  object-position: 50% 42%;
  opacity: .07;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
}

@supports (mix-blend-mode: multiply) {
  .drawn__ghost { opacity: .16; mix-blend-mode: multiply; }
}

.drawn__inner {
  max-width: var(--measure-wide, 68rem);
  margin-inline: auto;
  padding-inline: var(--gutter, 1.5rem);
}

.drawn__h {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.08;
  margin: .1em 0 .5em;
  max-width: 18ch;
}

.drawn__lede {
  max-width: 46ch;
  margin: 0 0 var(--sp-lg);
}

/* -- her hand. Two line drawings, kept small and set against the massing that
      follows: the idea at sketch scale, then the same idea at model scale. -- */
.drawn__hand {
  margin: 0 0 var(--sp-lg);
  display: grid;
  gap: var(--sp-md);
}

.drawn__hand img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-2, #f2ede4);
}

.drawn__hand figcaption {
  margin-top: .6em;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--muted);
}

.drawn__word {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .35em;
}

@media (min-width: 48rem) {
  .drawn__hand { grid-template-columns: repeat(2, minmax(0, 22rem)); }
  /* One plate instead of two, for the concept plan. It is a dense hand drawing
     with written place-names on it — at the 22rem two-up width the labels are
     there but not readable, which makes it decoration rather than evidence.
     44rem is the widest it goes before a 2x display outruns the 1500px source. */
  .drawn__hand--single { grid-template-columns: minmax(0, 44rem); }
}

/* -- the three massing options. Deliberately unequal: A and B are held small
      and C runs wide, so the row reads as a study set narrowing rather than as
      three equal cards in a grid. -- */
.drawn__options {
  display: grid;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
}

.drawn__opt { margin: 0; }

.drawn__opt img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-2, #f2ede4);
}

.drawn__opt figcaption {
  margin-top: .55em;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--muted);
}

.drawn__opt b {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--ink);
}

@media (min-width: 48rem) {
  .drawn__options { grid-template-columns: 1fr 1fr; align-items: start; }
  .drawn__opt--wide { grid-column: 1 / -1; }
  /* Three equal columns, for the diagram sequence. Equal is right here where it
     was wrong for the massing options: these three are the SAME drawing at three
     stages, so unequal sizing would read as one mattering more than the others.
     It is also the only layout their resolution allows — the diagrams are 1200px,
     and one promoted to full width would upscale on any retina screen. */
  .drawn__options--three { grid-template-columns: repeat(3, 1fr); }
}

.drawn__more {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

.drawn__credit {
  margin: var(--sp-md) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--muted);
}