/* ===========================================================================
   closer.css — styles for the Closer section only.

   Loaded by closer.html and nothing else, so no rule in this file can reach
   an existing page. Everything is additionally scoped under .closer-page.

   The governing rule of the page:
       images may leave the axis; words never do.
   Every text block resolves from --measure (660px), exactly like the rest of
   the site. Only photographs are allowed past --container (880px).
   =========================================================================== */

.closer-page {
  --plate-gap: 132px;      /* between a photograph and the passage after it */
  --movement-gap: 190px;   /* between one beat of the essay and the next */
  --wide: 1240px;          /* the register between --container and full bleed */
}

/* The page's own column — identical geometry to .wrap (880px, 28px padding)
   so a sentence here begins at exactly the same x as a sentence on About or
   Field Notes. Declared separately only so full-bleed plates can be siblings
   of it rather than children. Text inside is then capped at --measure and
   left-aligned, which is how every other page sets body copy. */
.closer-page .axis {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------------------------------------------------------------------------
   Plates — used by the Closer landing page.

   The collection page is a grid now and does not use these, but the landing
   page still leads each movement with a single large image, so the base
   plate rules stay. Nothing is ever cropped: width is set, height follows
   the file, and only frames taller than they are wide get a viewport cap
   (the .tall class is written by build-closer-images.py from the real file
   dimensions).
--------------------------------------------------------------------------- */
.closer-page .plate {
  margin: 0 auto;
}

.closer-page .plate picture,
.closer-page .plate img {
  display: block;
  width: 100%;
  height: auto;
}

.closer-page .plate.tall img {
  max-height: var(--plate-cap, 92vh);
  object-fit: contain;
  object-position: center;
}

/* Every photograph in this collection is portrait, which changes what the
   registers have to be. A width-based ladder (full bleed / wide / column)
   stops differentiating anything once each frame is fitted to a height cap:
   a portrait in a 1440px box and the same portrait in a 1184px box render
   at almost the same size, and the rhythm the page depends on flattens.

   So the ladder is heights, not widths. The spread below is deliberate and
   large — 92vh down to 44vh — because that is the only axis left that can
   carry a change in scale. */
.closer-page .plate-full {
  width: 100%;
  --plate-cap: 92vh;
}

.closer-page .plate-wide {
  max-width: var(--wide);
  padding: 0 28px;
  --plate-cap: 70vh;
}

@media (max-width: 640px) {
  .closer-page .plate-wide { padding-left: 20px; padding-right: 20px; }
  /* On a phone the viewport is tall and narrow, so width is the binding
     constraint again and the caps have to come up or every frame shrinks. */
  .closer-page .plate-full { --plate-cap: 78vh; }
  .closer-page .plate-wide { --plate-cap: 66vh; }
  .closer-page .plate-quiet { --plate-cap: 52vh; }
}


/* --- Editorial registers, restored ------------------------------------- */

/* Quiet — sits at the reading column, deliberately small after scale. */
.closer-page .plate-quiet {
  max-width: var(--container);
  padding: 0 28px;
  --plate-cap: 44vh;
}

/* The quiet plate shares the reading column, so it is aligned to the same
   left edge as the paragraphs rather than centred inside it. It is the one
   photograph on the page that sits where the words sit. */
.closer-page .plate-quiet picture {
  max-width: var(--measure);
  margin-right: auto;
}

.closer-page .plate-quiet img {
  object-position: left center;
}

/* A pair: unequal and vertically offset, never a grid. */
.closer-page .plate-pair {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: 52px;
  align-items: start;
}

.closer-page .plate-pair .plate { --plate-cap: 62vh; }
.closer-page .plate-pair .plate:last-child { --plate-cap: 44vh; }
.closer-page .plate-pair .plate:last-child { margin-top: 176px; }

/* The one location line on the page: stated because it is certain. */
.closer-page .plate-place {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.42;
  margin: 14px auto 0;
  max-width: var(--container);
  padding: 0 28px;
}

/* Passages of the essay, between the photographs. */
.closer-page .passage { margin: var(--plate-gap) auto; }

.closer-page .passage p {
  font-size: 1.16rem;
  line-height: 1.72;
  color: var(--ink);
  opacity: 0.88;
  margin: 0;
  max-width: var(--measure);
}

.closer-page .passage p + p { margin-top: 20px; }

/* One line lifted out and given air. */
.closer-page .line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3.1vw, 2rem);
  line-height: 1.42;
  color: var(--forest);
  margin: var(--movement-gap) auto;
  max-width: 720px;
  padding: 0 28px;
  text-align: center;
  opacity: 0.95;
}

@media (max-width: 899px) {
  .closer-page .plate-pair { grid-template-columns: 1fr; gap: 88px; }
  .closer-page .plate-pair .plate:last-child { margin-top: 0; max-width: 78%; margin-left: auto; }
}

@media (max-width: 640px) {
  .closer-page .plate-quiet,
  .closer-page .plate-pair,
  .closer-page .plate-place,
  .closer-page .line { padding-left: 20px; padding-right: 20px; }
  .closer-page .plate-pair .plate:last-child { max-width: 86%; }
  .closer-page .passage p { font-size: 1.08rem; }
}

/* ---------------------------------------------------------------------------
   The gallery

   The photographs are the page. They sit in equal cells, two across, and
   nothing is cropped: each cell is a square and the image is fitted inside
   it, so a portrait fills the height and a landscape fills the width while
   both occupy the same amount of the page. Equal space, equal weight, real
   proportions kept.

   The cells have no background, border or radius. The letterboxing is just
   more cream, which is why the grid reads as work on a wall rather than as
   a row of cards.
--------------------------------------------------------------------------- */
.closer-page .gallery {
  padding: 0;
  border-top: none;
  margin: 58px 0 0;
}

.closer-page .grid {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
}

.closer-page .grid .cell {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.closer-page .grid picture {
  display: block;
  width: 100%;
  height: 100%;
}

.closer-page .grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* The work itself.

   Two across, and deliberately wider than the site's --container. The rest
   of I'n'I resolves from an 880px axis because it is reading; this is
   looking, so the grid takes nearly the full window and the gap is kept
   tight. On a 1440px screen that puts each photograph at roughly 690px
   rather than the 570px a container-width grid would allow.

   All seven photographs are portrait, with ratios between 1.17 and 1.56 and
   a clear cluster at 4:3. The cells are set to that, which is why each frame
   now stands about 900px rather than the 670px a square would have allowed:
   a square cell spends a third of its height on nothing. The two outliers
   letterbox slightly — the taxi on its sides, the skateboarder top and
   bottom — and neither is cropped. */
.closer-page .grid-work {
  width: min(1680px, 95vw);
  max-width: none;
  padding: 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 26px;
}

.closer-page .grid-work .cell { aspect-ratio: 3 / 4; }

/* The same seven at architectural scale. Three across and smaller, so the
   second layer stays under the first without a label saying so. */
.closer-page .gallery-env { margin-top: 150px; }

.closer-page .grid-env {
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
  max-width: 1280px;
}

.closer-page .grid-env .cell { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------------------
   The writing

   One block, once, above the work. Set at the same measure as the rest of
   the site so it reads as a piece rather than as captions.
--------------------------------------------------------------------------- */
/* The piece sits after the work now: whoever wants it reads it, whoever
   doesn't has already seen everything they came for. */
.closer-page .intro {
  margin-top: 44px;
}

.closer-page .intro p,
.closer-page .outro p {
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.88;
  margin: 0;
  max-width: var(--measure);
}

.closer-page .intro p + p { margin-top: 18px; }

.closer-page .outro {
  margin-top: 150px;
}

/* ---------------------------------------------------------------------------
   Title block — arrives after the opening photograph, not before it.
--------------------------------------------------------------------------- */
.closer-page .collection-head {
  margin: 96px auto 0;
}

.closer-page .collection-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.2vw, 4rem);
  line-height: 1.08;
  color: var(--forest);
  margin: 10px 0 18px;
  letter-spacing: -0.01em;
  max-width: 740px;
}

.closer-page .collection-head .collection-sub {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.5;
  color: var(--terracotta);
  margin: 0;
  max-width: 460px;
}

/* ---------------------------------------------------------------------------
   Ending — the thought the visitor carries out. Not a call to action, so it
   gets no rule above it, no button, and no link.
--------------------------------------------------------------------------- */
.closer-page .ending {
  margin: 40px auto 0;
  text-align: center;
  padding: 0 28px;
}

.closer-page .ending p {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--forest);
  margin: 0;
  max-width: none;
}

.closer-page .ending .ending-lead {
  font-size: clamp(2rem, 5.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.closer-page .ending .ending-tail {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  margin-top: 18px;
  opacity: 0.72;
}

/* ---------------------------------------------------------------------------
   Epilogue — the one environmental visualization, and the colophon.
--------------------------------------------------------------------------- */
.closer-page .epilogue {
  margin-top: 230px;
}

.closer-page .epilogue-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.42;
  max-width: var(--wide);
  margin: 16px auto 0;
  padding: 0 28px;
}

.closer-page .colophon {
  max-width: var(--container);
  margin: 104px auto 0;
  padding: 26px 28px 0;
  border-top: 1px solid var(--line);
}

.closer-page .colophon p {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.55;
  margin: 0;
}

.closer-page .closer-end {
  height: 150px;
}

/* ---------------------------------------------------------------------------
   Entrance

   One behaviour, used once per element: a short fade with a 12px rise. It
   fires 15% of a viewport early (see the rootMargin in closer.html), so by the
   time a photograph is genuinely on screen it has already resolved — the
   effect is never something the visitor has to wait through to see the work.

   Applied by JS only. Without JS, or with reduced motion, everything is simply
   visible.
--------------------------------------------------------------------------- */
.closer-page.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.85s ease, transform 0.85s ease;
  will-change: opacity, transform;
}

.closer-page.js .reveal.seen {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .closer-page.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Responsive

   The score changes rather than just shrinking: the pair unstacks into two
   separate plates at different widths so it keeps its inequality, and the
   gaps come down so the page doesn't become an endurance test on a phone.
--------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .closer-page .grid-work { width: 94vw; gap: 22px 18px; }
  .closer-page .grid-env { grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
  .closer-page .gallery { margin-top: 78px; }
  .closer-page .gallery-env { margin-top: 92px; }
  .closer-page .outro { margin-top: 86px; }
  .closer-page {
    --plate-gap: 88px;
    --movement-gap: 120px;
  }
  .closer-page .plate-pair {
    grid-template-columns: 1fr;
    gap: 88px;
  }
  .closer-page .plate-pair .plate:last-child {
    margin-top: 0;
    max-width: 78%;
    margin-left: auto;
  }
  .closer-page .collection-head {
    margin-top: 72px;
  }
  .closer-page .ending { margin-top: 28px; }
}

@media (max-width: 640px) {
  /* One photograph at a time on a phone. Two across at this width would make
     each frame smaller than a thumbnail, which is the opposite of the point. */
  .closer-page .grid-work { width: 100%; grid-template-columns: 1fr; gap: 30px; padding: 0 20px; }
  .closer-page .grid-env { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }
  .closer-page .grid { padding-left: 20px; padding-right: 20px; }
  .closer-page .intro p,
  .closer-page .outro p { font-size: 1.05rem; }
  .closer-page {
    --plate-gap: 68px;
    --movement-gap: 96px;
  }
  .closer-page .axis,
  .closer-page .plate-wide,
  .closer-page .plate-quiet,
  .closer-page .plate-pair,
  .closer-page .plate-place,
  .closer-page .epilogue-note,
  .closer-page .line,
  .closer-page .ending {
    padding-left: 20px;
    padding-right: 20px;
  }
  .closer-page .plate-full {
    --plate-cap: 86vh;
  }
  .closer-page .plate-pair .plate:last-child {
    max-width: 86%;
  }
  .closer-page .passage p {
    font-size: 1.08rem;
  }
  .closer-page .ending { margin-top: 24px; }
  .closer-page .colophon {
    margin-top: 90px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .closer-page .closer-end {
    height: 90px;
  }
}

/* ===========================================================================
   Closer landing page

   The cover of the section rather than a menu of it. Three movements, each
   with its own scale and its own relationship between image and text, so the
   page reads as a sequence rather than a row of equal things:

     one   photography   full bleed, the largest thing here, text beneath
     two   stories       image steps back beside the writing, quieter
     three objects       full bleed again, plus one small detail dropped in

   The geometry is the same as the collection page: text on the 880 axis,
   capped at 660, and only images allowed past it.
   =========================================================================== */
.closer-landing .closer-cover {
  position: relative;
  padding-top: 118px;
  padding-bottom: 8px;
}

.closer-landing .closer-cover h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--forest);
  margin: 14px 0 20px;
  max-width: 760px;
  position: relative;
  z-index: 1;
}

.closer-landing .cover-lede {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.85;
  margin: 0;
  max-width: var(--measure);
  position: relative;
  z-index: 1;
}

/* The global `section` rule adds a hairline and 80px of padding to every
   section on the site. These movements are separated by scale and space
   instead, so both are cleared here rather than by avoiding the element. */
.closer-landing .movement {
  padding: 0;
  border-top: none;
  margin-top: 150px;
}

.closer-landing .movement-copy {
  margin-top: 46px;
}

.closer-landing .movement-copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
  line-height: 1.14;
  color: var(--forest);
  margin: 0 0 10px;
}

.closer-landing .movement-sub {
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--terracotta);
  margin: 0 0 14px;
  max-width: var(--measure);
}

.closer-landing .movement-copy p {
  font-size: 1.05rem;
  margin: 0;
  max-width: var(--measure);
}

.closer-landing .movement-copy .section-link {
  margin-top: 22px;
}

/* Two — the image comes off full bleed and sits beside the writing. The
   column split is uneven on purpose so it never reads as a two-up grid. */
.closer-landing .movement-split {
  max-width: var(--wide);
  margin-left: auto;
  margin-right: auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.closer-landing .movement-split .movement-copy {
  margin-top: 0;
}

/* Three — one detail at a fraction of the scale of the plate above it,
   dropped in against the right edge of the wide column. */
.closer-landing .plate-detail {
  max-width: var(--wide);
  margin: -68px auto 0;
  padding: 0 28px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}

.closer-landing .plate-detail .plate {
  width: 300px;
  max-width: 42%;
  margin: 0;
}

.closer-landing .plate-detail img {
  border: 6px solid var(--cream);
}

@media (max-width: 899px) {
  .closer-landing .closer-cover { padding-top: 84px; }
  .closer-landing .movement { margin-top: 104px; }
  .closer-landing .movement-split {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .closer-landing .movement-split .movement-copy { margin-top: 4px; }
  .closer-landing .plate-detail { margin-top: -46px; }
  .closer-landing .plate-detail .plate { width: 200px; }
}

@media (max-width: 640px) {
  .closer-landing .closer-cover,
  .closer-landing .movement-split,
  .closer-landing .plate-detail {
    padding-left: 20px;
    padding-right: 20px;
  }
  .closer-landing .movement { margin-top: 78px; }
  .closer-landing .movement-copy { margin-top: 32px; }
  .closer-landing .plate-detail { margin-top: -32px; }
  .closer-landing .plate-detail .plate { width: 150px; max-width: 46%; }
  .closer-landing .plate-detail img { border-width: 4px; }
}

/* ---------------------------------------------------------------------------
   Environments

   The second layer of the collection: a photograph imagined at architectural
   scale. Hierarchy is held structurally rather than by labelling, so nothing
   on the page has to announce what these are.

   Three rules do the work:

     1. An environment is never full bleed. Full bleed belongs to the
        photographs alone, so the two largest moments on the page stay
        originals no matter how large an environment gets.
     2. Even the large register stops at 1080px, inside the 1240px the
        originals use when they break wide. An environment can be big; it
        cannot be the biggest.
     3. Environments sit off-axis, pushed to one edge of the wide column.
        The originals are centred. That difference alone tells the eye which
        layer it is looking at, before scale registers at all.
--------------------------------------------------------------------------- */
/* A flex container does not collapse margins with its siblings, so this
   spacing is added to whatever sits above rather than merged into it. It is
   set below --plate-gap deliberately: an environment should read as arriving
   in response to what precedes it, not floating free of it. */
.closer-page .plate-env {
  max-width: var(--wide);
  margin: 96px auto;
  padding: 0 28px;
  display: flex;
}

.closer-page .plate-env .plate {
  margin: 0;
  --plate-cap: none;
}

.closer-page .plate-env.to-right { justify-content: flex-end; }
.closer-page .plate-env.to-left  { justify-content: flex-start; }

/* The visualizations are interior scenes, roughly square to portrait rather
   than landscape. Widths are set against that: a square frame at the width a
   landscape one could carry would stand nearly a full screen tall and start
   competing with the photographs it is supposed to sit under. Tall variants
   step down again so height stays in range without any cropping. */
.closer-page .plate-env.env-sm .plate { width: 340px; max-width: 46%; }
.closer-page .plate-env.env-md .plate { width: 560px; max-width: 66%; }
.closer-page .plate-env.env-lg .plate { width: 760px; max-width: 84%; }

.closer-page .plate-env.env-sm .plate.tall { width: 300px; }
.closer-page .plate-env.env-md .plate.tall { width: 500px; }
.closer-page .plate-env.env-lg .plate.tall { width: 660px; }

@media (max-width: 899px) {
  .closer-page .plate-env { margin: 72px auto; }
  .closer-page .plate-env.env-sm .plate { width: 210px; max-width: 52%; }
  .closer-page .plate-env.env-md .plate,
  .closer-page .plate-env.env-md .plate.tall { width: 100%; max-width: 76%; }
  .closer-page .plate-env.env-lg .plate,
  .closer-page .plate-env.env-lg .plate.tall { width: 100%; max-width: 92%; }
}

@media (max-width: 640px) {
  .closer-page .plate-env { padding-left: 20px; padding-right: 20px; margin: 60px auto; }
  .closer-page .plate-env.env-sm .plate,
  .closer-page .plate-env.env-sm .plate.tall { width: 160px; max-width: 52%; }
  .closer-page .plate-env.env-md .plate,
  .closer-page .plate-env.env-md .plate.tall { max-width: 84%; }
}

/* ---------------------------------------------------------------------------
   The sequence — one photograph at a time

   Every photograph in this collection is portrait, shot with a consistent
   eye, and none is more important than the others. So the frame stops making
   decisions: each one is given the same height and centred on the same
   vertical axis, and the variation the page carries comes from the pictures
   themselves — colour against black and white, a close detail against depth.

   The seven are cut to a common 4:3 in closer-cropped/, so setting a height
   here sets the width too and every photograph renders at exactly the same
   size. That uniformity is the point: with a set this consistent, an equal
   frame lets the pictures carry the variation instead of the layout.

   The untouched files stay in closer-originals/ and are never overwritten,
   so any crop can be revisited. On a phone the rule inverts and width
   becomes the constant, since a tall portrait set by height would end up
   narrower than the screen.
--------------------------------------------------------------------------- */
.closer-page .sequence {
  margin: 120px 0 0;
  padding: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 150px;
}

.closer-page .shot {
  margin: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.closer-page .shot picture {
  display: block;
}

.closer-page .shot img {
  display: block;
  height: 84vh;
  max-height: 940px;
  width: auto;
  max-width: min(92vw, 1120px);
}

@media (max-width: 899px) {
  .closer-page .sequence { margin-top: 84px; gap: 96px; }
  .closer-page .shot img { height: 70vh; max-width: 88vw; }
}

/* On a phone the window is tall and narrow, so height is the wrong thing to
   fix — a 78vh portrait would be far narrower than the screen. Width becomes
   the constant instead and each photograph fills the column. */
@media (max-width: 640px) {
  .closer-page .sequence { margin-top: 64px; gap: 64px; }
  /* the plate supplies the inset now; see .plate-field below */
  .closer-page .shot { padding: 0; }
  .closer-page .shot img {
    height: auto;
    max-height: none;
    width: 100%;
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   Prints

   The commercial room. Deliberately a different shape from the collection:
   there the photograph is alone on the screen and nothing interrupts it;
   here it sits beside its details, because the job has changed from looking
   to deciding.

   This is also where the environment renderings finally earn their keep. In
   the collection they were a distraction from the work; on a page where
   someone is picturing a wall, showing the wall is the entire point.
--------------------------------------------------------------------------- */
.closer-prints .prints {
  padding-top: 8px;
}

.closer-prints .print {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 72px 28px;
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 64px;
  align-items: start;
  border-top: 1px solid var(--line);
}

.closer-prints .print:first-of-type { border-top: none; }

.closer-prints .print-shot { margin: 0; }

.closer-prints .print-shot img,
.closer-prints .print-env img {
  display: block;
  width: 100%;
  height: auto;
}

.closer-prints .print-ref {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  opacity: 0.85;
  margin-bottom: 8px;
}

.closer-prints .print-detail h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--forest);
  margin: 0 0 22px;
}

/* Priced sizes. A rule per row rather than a boxed table — the page already
   has enough structure and a bordered table would read as a storefront. */
.closer-prints .size-list {
  margin: 0 0 22px;
  border-top: 1px solid var(--line);
}

.closer-prints .size-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.closer-prints .size-label {
  font-size: 0.97rem;
  color: var(--ink);
  opacity: 0.88;
}

.closer-prints .size-price {
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--forest);
  white-space: nowrap;
}

.closer-prints .print-status {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: -14px 0 18px;
}

/* Mono labels against roman values — the same pairing the case-study credits
   block uses, so a buyer reads it as the site's own register. */
.closer-prints .print-meta {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 9px 22px;
  margin: 0 0 24px;
  font-size: 0.95rem;
}

.closer-prints .print-meta dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.7;
  padding-top: 3px;
}

.closer-prints .print-meta dd { margin: 0; }

.closer-prints .print-env {
  margin: 34px 0 0;
  max-width: 300px;
}

.closer-prints .print-env figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.4;
  margin-top: 9px;
}

.closer-prints .prints-note {
  max-width: var(--container);
  margin: 72px auto 0;
  padding: 34px 28px 0;
  border-top: 1px solid var(--line);
}

.closer-prints .prints-note p {
  font-size: 1.05rem;
  max-width: var(--measure);
  margin: 0 0 14px;
}

@media (max-width: 899px) {
  .closer-prints .print {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 52px 28px;
  }
  .closer-prints .print-shot { max-width: 420px; }
  .closer-prints .print-env { margin-top: 28px; max-width: 240px; }
}

@media (max-width: 640px) {
  .closer-prints .print { padding: 44px 20px; }
  .closer-prints .prints-note { padding-left: 20px; padding-right: 20px; }
  .closer-prints .print-meta { grid-template-columns: 1fr; gap: 2px; }
  .closer-prints .print-meta dd { margin-bottom: 12px; }
  .closer-prints .print-meta dt { margin-top: 6px; }
}

/* A quiet route from the collection to the prints page. Not a call to action:
   a line and a link, the way the rest of the site points onward. */
.closer-page .prints-link {
  max-width: var(--container);
  margin: 96px auto 0;
  padding: 0 28px;
}

.closer-page .prints-link .section-link { font-size: 0.95rem; }

@media (max-width: 640px) {
  .closer-page .prints-link { padding-left: 20px; padding-right: 20px; margin-top: 68px; }
}

/* ---------------------------------------------------------------------------
   Plate note

   One line under each photograph in the sequence, aligned to the left edge of
   the image it belongs to. Not a call to action: it names the plate and it
   links, which is what someone standing in front of one of these actually
   needs — a way to act on it without scrolling to the end and working out
   which photograph they meant. No verb, caption weight, terracotta only on
   hover or focus.

   The figure shrinks to its image (width: fit-content) so the caption inherits
   the image's width and lines up with its left edge rather than the page.
   On a phone that inverts, because there the image already fills the column.
--------------------------------------------------------------------------- */
.closer-page .shot {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.closer-page .shot picture { display: block; }

.closer-page .shot-note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.closer-page .shot-note a {
  color: var(--ink);
  opacity: 0.38;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.closer-page .shot-note a:hover,
.closer-page .shot-note a:focus-visible {
  opacity: 1;
  color: var(--terracotta);
  border-bottom-color: rgba(181, 86, 46, 0.4);
}

@media (max-width: 640px) {
  .closer-page .shot { width: auto; }
}

/* The overture row sits between the title and the essay, so it needs less air
   above it than the closing row needs below the ending. */
.closer-page .gallery-env-top {
  margin-top: 52px;
}

@media (max-width: 899px) {
  .closer-page .gallery-env-top { margin-top: 38px; }
}

/* ---------------------------------------------------------------------------
   The introduction

   This is the only piece of literary first-person writing on the site, and it
   was being set like page copy — sans, 1.12rem, ordinary leading — which is
   why six paragraphs of it read as a wall. Two columns halved the depth but
   cost more than they saved: the essay uses short standalone paragraphs as
   beats, and in a 50-character column every line is short, so the lines that
   were meant to land alone stopped registering as deliberate.

   So: one column, in the serif the site keeps for the things it means most,
   with enough air between paragraphs that each beat reads as its own moment.
   Counter-intuitively this makes the piece feel shorter than the two-column
   version did, because it stops being a block and becomes a sequence.

   Serif gets a slightly longer measure and more leading than the sans it
   replaces, which is why --measure is comfortable here at this size.
--------------------------------------------------------------------------- */
.closer-page .intro {
  margin-top: 62px;
}

.closer-page .intro p,
.closer-page .outro p {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2.1vw, 1.32rem);
  line-height: 1.62;
  color: var(--ink);
  opacity: 0.9;
  margin: 0;
  max-width: var(--measure);
}

/* The gap is the point. At this size a one-line paragraph surrounded by this
   much space reads as a held beat rather than as a short sentence. */
.closer-page .intro p + p {
  margin-top: 34px;
}

@media (max-width: 640px) {
  .closer-page .intro p,
  .closer-page .outro p {
    font-size: 1.14rem;
    line-height: 1.58;
  }
  .closer-page .intro p + p { margin-top: 26px; }
}

/* A titled plate gets the title on its own line above the link, set in the
   serif the rest of the site uses for names of things. Untitled plates show
   the link alone, so the caption never carries an empty line. */
.closer-page .shot-title {
  display: block;
  font-family: var(--serif);
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--forest);
  opacity: 0.85;
  margin-bottom: 5px;
}

.closer-page .shot-note a {
  display: inline-block;
}

/* ===========================================================================
   Closer stories — photo and words

   A reading experience, not a page of content. The column is narrow, the type
   is the serif the section already uses for its writing, and the photographs
   are allowed out of the column at three set widths so the rhythm can change
   without every image looking the same.

   The spacing is the design here. Most of what makes this read as a book
   rather than a blog is the size of the gaps, so they are set deliberately
   rather than inherited.
   =========================================================================== */
.closer-story main.story {
  padding-bottom: 0;
}

.closer-story .story-head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 104px 28px 0;
}

.closer-story .story-head .back-link {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.55;
  text-decoration: none;
}

.closer-story .story-head .back-link:hover { opacity: 1; }

.closer-story .story-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--forest);
  margin: 0 0 16px;
}

.closer-story .story-meta {
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
}

/* --- the writing ------------------------------------------------------- */
.closer-story .story-text,
.closer-story .story-cadence,
.closer-story .story-close {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.closer-story .story-text p,
.closer-story .story-cadence p,
.closer-story .story-close p {
  font-family: var(--serif);
  font-size: clamp(1.16rem, 2.1vw, 1.3rem);
  line-height: 1.72;
  color: var(--ink);
  opacity: 0.9;
  margin: 0;
  max-width: 620px;
}

.closer-story .story-text + .story-text,
.closer-story .story-text { margin-top: 40px; }

.closer-story .story-text p + p { margin-top: 26px; }

/* The opening line. Larger, and the only line in the piece set this way. */
.closer-story .story-lead p {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.42;
  color: var(--forest);
  opacity: 1;
}

/* Repeated or isolated lines that need to breathe without becoming display
   type. Same size as the body: the space does the work, not the scale. */
.closer-story .story-cadence {
  margin-top: 40px;
}

.closer-story .story-cadence p + p { margin-top: 12px; }

.closer-story .story-cadence.spaced { margin-top: 56px; }
.closer-story .story-cadence.spaced p + p { margin-top: 26px; }

/* --- the photographs ---------------------------------------------------- */
.closer-story .story-image {
  margin: 96px auto;
}

.closer-story .story-image picture,
.closer-story .story-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Intimate — sits in the reading column, close enough to spend time with. */
.closer-story .img-column {
  max-width: var(--container);
  padding: 0 28px;
}

.closer-story .img-column picture {
  max-width: 620px;
}

/* Documentary — narrower and taller than the column, so it reads as a
   different kind of looking. Held at its own native scale rather than
   stretched, because the file is small. */
.closer-story .img-wide {
  max-width: var(--container);
  padding: 0 28px;
}

.closer-story .img-wide picture {
  max-width: 480px;
  margin: 0 auto;
}

/* Elemental — the place itself. The widest thing in the section. */
.closer-story .img-full {
  max-width: none;
  width: min(1200px, 94vw);
  margin: 132px auto;
}

.closer-story .story-end {
  max-width: var(--container);
  margin: 120px auto 0;
  padding: 0 28px;
}

/* --- the close ---------------------------------------------------------- */
.closer-story .story-close {
  margin-top: 40px;
}

.closer-story .story-close p {
  font-size: clamp(1.3rem, 2.6vw, 1.55rem);
  line-height: 1.5;
  color: var(--forest);
  opacity: 1;
}

.closer-story .story-close p + p { margin-top: 30px; }

/* --- deliberate space --------------------------------------------------- */
.closer-story .story-pause { height: 40px; }
.closer-story .pause-small { height: 40px; }
.closer-story .pause-medium { height: 88px; }
.closer-story .pause-large { height: 132px; }

@media (max-width: 899px) {
  .closer-story .story-head { padding-top: 76px; }
  .closer-story .story-image { margin: 68px auto; }
  .closer-story .img-full { width: 100%; margin: 84px auto; }
  .closer-story .story-pause,
  .closer-story .pause-small { height: 28px; }
  .closer-story .pause-medium { height: 60px; }
  .closer-story .pause-large { height: 88px; }
  .closer-story .story-end { margin-top: 84px; }
}

@media (max-width: 640px) {
  .closer-story .story-head,
  .closer-story .story-text,
  .closer-story .story-cadence,
  .closer-story .story-close,
  .closer-story .img-column,
  .closer-story .img-wide,
  .closer-story .story-end { padding-left: 20px; padding-right: 20px; }
  .closer-story .story-text { margin-top: 30px; }
  .closer-story .img-wide picture { max-width: 100%; }
}

/* --- the Stories index -------------------------------------------------- */
.closer-stories-index .story-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
}

.closer-stories-index .story-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

.closer-stories-index .story-card:last-child { border-bottom: 1px solid var(--line); }

.closer-stories-index .story-card-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
  margin-bottom: 10px;
}

.closer-stories-index .story-card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--forest);
  margin: 0 0 10px;
}

.closer-stories-index .story-card p {
  font-size: 1rem;
  max-width: var(--measure);
  margin: 0 0 14px;
}

/* The Studio wordline. Mono, uppercase, at the weight of every other label on
   the site — it names the practice without becoming a second logo. The serif
   line beneath it carries the idea. */
.closer-landing .studio-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 20px;
}

.closer-landing .closer-cover h1 {
  max-width: none;
}

/* ===========================================================================
   Studio hero

   Entering another room in the same house. The type and the artwork share a
   single row, held inside the site's own grid rather than breaking full
   bleed, because the consultancy pages never break the grid either and the
   Studio should read as part of the same building.

   The proportions are roughly 43 / 57 in favour of the artwork, which is what
   keeps it from reading as a marketing hero: the words take less than half
   the width and the rest is largely air.
   =========================================================================== */
.closer-landing .studio-hero {
  padding: 0;
  border-top: none;
}

.closer-landing .studio-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: 700px;
  display: grid;
  /* 48/52 of the space left after the gutter lands the type column at ~43%
     of the full 1200px container, which is the proportion that matters. A
     literal 43/57 split of the columns measures 39% once the 64px gutter is
     taken out of the middle. */
  grid-template-columns: 48fr 52fr;
  gap: 64px;
  align-items: center;
}

.closer-landing .studio-hero-type {
  position: relative;
  z-index: 1;
}

/* The wordline names the practice. Mono, uppercase, terracotta, at the weight
   of every other label on the site — a wordline, not a second logo. */
.closer-landing .studio-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 26px;
}

.closer-landing .studio-hero-type h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--forest);
  margin: 0 0 24px;
  max-width: none;
}

.closer-landing .studio-hero-type .cover-lede {
  font-size: 1.12rem;
  line-height: 1.62;
  color: var(--ink);
  opacity: 0.85;
  margin: 0;
  max-width: 420px;
  /* Evens the two lines so the sentence doesn't end on a single stranded
     word. Ignored by browsers that don't support it, which simply get the
     ordinary break. */
  text-wrap: balance;
}

/* --- the artwork ------------------------------------------------------- */
.closer-landing .studio-hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* A square of space, not a frame. No background, border, radius or shadow:
   the illustration arrives with its own paper ground and should look as
   though it was drawn onto the page. */
.closer-landing .studio-artwork {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.closer-landing .studio-artwork img,
.closer-landing .studio-artwork svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The artwork carries its own warm paper ground, so it is given nothing of its
   own: no background, border, radius or shadow. object-fit: contain and a 1:1
   box mean the full drawing is always shown and never cropped, at any width.
--------------------------------------------------------------------------- */

/* --- into what comes next ----------------------------------------------- */
/* Space for the doorways to open onto. Deliberately less than the gap between
   the movements further down, so the hero reads as leading into the next
   section rather than ending. */
.closer-landing .studio-hero + * {
  margin-top: 40px;
}

/* --- tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .closer-landing .studio-hero-inner {
    min-height: 0;
    padding-top: 72px;
    padding-bottom: 24px;
    gap: 44px;
    grid-template-columns: 45fr 55fr;
  }
  .closer-landing .studio-artwork { max-width: 460px; }
  .closer-landing .studio-hero-type .cover-lede { max-width: 360px; }
}

/* --- mobile ------------------------------------------------------------- */
/* Stacked, with real distance between the words and the artwork. Shrinking
   the desktop composition would leave a cramped two-column layout; this is a
   different arrangement of the same two parts. */
@media (max-width: 760px) {
  .closer-landing .studio-hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 56px;
    padding-bottom: 12px;
  }
  .closer-landing .studio-hero-art {
    margin-top: 64px;
  }
  .closer-landing .studio-artwork {
    width: 100%;
    max-width: 420px;
  }
  .closer-landing .studio-hero-type .cover-lede { max-width: none; }
}

@media (max-width: 640px) {
  .closer-landing .studio-hero-inner { padding-left: 20px; padding-right: 20px; }
  .closer-landing .studio-hero-art { margin-top: 52px; }
  .closer-landing .studio-eyebrow { margin-bottom: 20px; }
}

/* ===========================================================================
   The Studio: introduction and the three doorways
   =========================================================================== */

/* A breath, not a second hero. It sits on the reading axis at the scale of a
   section opener elsewhere on the site, and it is short enough that the eye
   passes through it on the way to the plates. */
.closer-landing .studio-intro {
  padding: 0;
  border-top: none;
  margin-top: 96px;
}

.closer-landing .studio-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.closer-landing .studio-intro h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.16;
  color: var(--forest);
  margin: 12px 0 12px;
  max-width: 620px;
}

.closer-landing .studio-intro p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.8;
  margin: 0;
  max-width: 520px;
}

/* --- the doorways ------------------------------------------------------- */
/* Three plates from the same notebook. Equal columns, equal artwork, equal
   weight — no first among them. The illustrations carry their own paper, so
   nothing is drawn behind or around them: no panel, no border, no radius, no
   shadow. What makes them read as a set is that they are identical in size
   and aligned on the same two baselines, not that they sit in boxes. */
.closer-landing .doorways {
  padding: 0;
  border-top: none;
  margin-top: 64px;
}

.closer-landing .doorways-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  align-items: start;
}

.closer-landing .doorway {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* All three artworks are 1145 x 1374, so the ratio is declared once and the
   plates can never disagree with each other. contain means that stays true
   even if a future plate arrives at a different size. */
.closer-landing .doorway-plate {
  aspect-ratio: 1145 / 1374;
  overflow: hidden;
}

.closer-landing .doorway-plate picture,
.closer-landing .doorway-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.closer-landing .doorway h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.25;
  color: var(--forest);
  margin: 26px 0 0;
}

.closer-landing .doorway p {
  font-size: 0.98rem;
  line-height: 1.58;
  color: var(--ink);
  opacity: 0.78;
  margin: 10px 0 0;
  max-width: 330px;
}

/* Hover: the plate settles from slightly held back to fully present, and the
   rule draws. Nothing lifts, nothing scales, nothing glows. */
.closer-landing .doorway-plate img {
  opacity: 0.93;
  transition: opacity 0.35s ease;
}

.closer-landing .doorway:hover .doorway-plate img,
.closer-landing .doorway:focus-visible .doorway-plate img {
  opacity: 1;
}

/* The invitation.

   Built on .section-link, the site's existing action language: terracotta
   text over a faint rule that is always there, with a solid rule that draws
   in from the left on hover. The permanent rule is what makes it read as a
   link at rest — which matters most on touch, where there is no hover to
   reveal anything.

   It is a span rather than an anchor because the whole doorway is already the
   link, and an anchor inside an anchor is invalid. It is styled as the action
   and behaves as the action; the click target is the entire plate. */
.closer-landing .doorway-invite {
  position: relative;
  display: inline-block;
  margin-top: 16px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--terracotta);
  border-bottom: 1px solid rgba(181, 86, 46, 0.35);
  padding-bottom: 1px;
}

.closer-landing .doorway-invite::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.closer-landing .invite-arrow {
  display: inline-block;
  margin-left: 7px;
  transition: transform 0.3s ease;
}

.closer-landing .doorway:hover .doorway-invite::after,
.closer-landing .doorway:focus-visible .doorway-invite::after {
  transform: scaleX(1);
}

.closer-landing .doorway:hover .invite-arrow,
.closer-landing .doorway:focus-visible .invite-arrow {
  transform: translateX(4px);
}

.closer-landing .doorway:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 10px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .closer-landing .doorway-invite::after,
  .closer-landing .invite-arrow,
  .closer-landing .doorway-plate img { transition: none; }
}

/* --- tablet ------------------------------------------------------------- */
/* Three columns hold here: at 1024 each plate is about 300px wide, which is
   still a plate rather than a thumbnail. */
@media (max-width: 1024px) {
  .closer-landing .studio-intro { margin-top: 64px; }
  .closer-landing .doorways { margin-top: 48px; }
  .closer-landing .doorways-inner { gap: 34px; }
  .closer-landing .doorway h3 { font-size: 1.2rem; margin-top: 20px; }
  .closer-landing .doorway p { font-size: 0.94rem; }
}

/* --- mobile ------------------------------------------------------------- */
/* Stacked, with the artwork at full column width rather than shrunk to keep
   a grid. Each doorway gets room of its own. */
@media (max-width: 760px) {
  .closer-landing .doorways-inner {
    grid-template-columns: 1fr;
    gap: 72px;
    justify-items: start;
  }
  .closer-landing .doorway { width: 100%; max-width: 420px; }
  .closer-landing .doorway p { max-width: none; }
}

@media (max-width: 640px) {
  .closer-landing .studio-intro-inner,
  .closer-landing .doorways-inner { padding-left: 20px; padding-right: 20px; }
  .closer-landing .studio-intro { margin-top: 56px; }
  .closer-landing .doorways { margin-top: 40px; }
  .closer-landing .doorways-inner { gap: 60px; }
}

/* ===========================================================================
   Notice — the photography landing page

   Built from the Studio hero rather than from a second hero system, so the
   relationship between the two pages is structural rather than stylistic.
   The difference is one of volume: a shorter column, a smaller plate, a
   smaller display size. A level deeper in the hierarchy should not arrive
   louder than the level above it.
   =========================================================================== */
.notice-page .notice-hero .studio-hero-inner {
  min-height: 600px;
}

.notice-page .notice-hero .studio-hero-type h1 {
  font-size: clamp(2.3rem, 5vw, 3.5rem);
}

/* Optical placement, not mathematical.

   The illustration is portrait where the Studio artwork is square, so
   inheriting the Studio hero's centring leaves it reading as a separate
   object floating opposite the text. Measuring the plate explains why: the
   drawn matter occupies rows 94–1183 of 1374, so its bounding box sits high
   in the frame — 7% of paper above it and 14% below — while its ink-weighted
   centre sits low. The eye follows the bounding shape, so the plate reads
   high even when the box is perfectly centred.

   Measuring further settled where it should go. The lens — the subject the
   eye actually reads — sits at 42% across and 56% down the plate, so at this
   size its centre falls 34px left of the box's centre and 29px below it.
   Centring the box therefore leaves the subject hanging below the text.
   Lifting the box by 22px brings the lens level with the line of type, which
   is what makes the two halves read as one composition.

   The box is also pulled toward the text and reduced from 480 to 430. */
.notice-page .notice-hero .studio-artwork {
  max-width: 430px;
  aspect-ratio: 1145 / 1374;
  transform: translate(-70px, -22px);
}

/* Pulled toward the text rather than centred in its own column, so the two
   halves read as one composition instead of two objects at opposite edges. */
.notice-page .notice-hero .studio-hero-art {
  justify-content: flex-start;
}

/* The wordline carries two levels now. The slash is the only mark that
   separates them, set lighter so the eye reads one line, not two labels. */
.notice-page .eyebrow-sep {
  opacity: 0.4;
  margin: 0 5px;
}

/* --- the collections grid ----------------------------------------------- */
/* Two across today, and any number tomorrow: auto-fit means a third and
   fourth collection wrap into a second row at exactly the same size, with no
   change to this file. */
.notice-page .collections {
  padding: 0;
  border-top: none;
  margin-top: 56px;
}

.notice-page .collections-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 80px 64px;
  align-items: start;
}

.notice-page .collection {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* The ratio of the supplied collection artwork. Both plates share it, so the
   two entries are the same size whatever is inside them — which is what makes
   them read as equal bodies of work rather than as a lead and a follower. */
.notice-page .collection-plate {
  /* Both collection plates are 1312 x 1193 in closer-cropped/ — identical, so
     each fills this box exactly and the two render at the same pixel size.

     The trim needed to get there is 6px: 0.50% off the height of one, 0.46%
     off the width of the other. The artworks arrived 1% apart, and meeting in
     the middle costs each of them almost nothing. Originals untouched in
     closer-originals/. */
  aspect-ratio: 1312 / 1193;
  overflow: hidden;
}

.notice-page .collection-plate picture,
.notice-page .collection-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A collection is a body of work, so its name sits a step above a doorway
   heading — but still well below the page's own h1. */
.notice-page .collection h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--forest);
  margin: 30px 0 0;
}

.notice-page .collection p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  margin: 10px 0 0;
}

/* Exactly the interaction established on the Studio doorways: the plate
   settles to full presence, the rule draws, the arrow steps. */
.notice-page .collection-plate img {
  opacity: 0.93;
  transition: opacity 0.35s ease;
}

.notice-page .collection:hover .collection-plate img,
.notice-page .collection:focus-visible .collection-plate img {
  opacity: 1;
}

.notice-page .collection:hover .doorway-invite::after,
.notice-page .collection:focus-visible .doorway-invite::after {
  transform: scaleX(1);
}

.notice-page .collection:hover .invite-arrow,
.notice-page .collection:focus-visible .invite-arrow {
  transform: translateX(4px);
}

.notice-page .collection:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 10px;
  border-radius: 2px;
}

/* --- prints -------------------------------------------------------------- */
/* Separated from the grid by a rule and by the absence of a plate. Prints is
   an extension of the photography, not a third collection, and giving it an
   illustration would have made it look like one. */
.notice-page .prints-note-section {
  padding: 0;
  border-top: none;
  margin-top: 104px;
}

.notice-page .prints-note-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 28px 0;
}

.notice-page .prints-note-inner::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--line);
  margin-bottom: 44px;
  /* the rule spans the content column, not the padding */
  margin-left: 0;
  margin-right: 0;
}

.notice-page .prints-note-inner h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  line-height: 1.18;
  color: var(--forest);
  margin: 12px 0 18px;
  max-width: 560px;
}

@media (max-width: 1024px) {
  .notice-page .notice-hero .studio-hero-inner { min-height: 0; }
  /* The row height is content-driven here, so a vertical lift would push the
     plate toward the header instead of into the composition. Only the inward
     pull survives, and at a smaller amount because the gutter is smaller. */
  .notice-page .notice-hero .studio-artwork {
    max-width: 400px;
    transform: translateX(-28px);
  }
  .notice-page .collections-inner { gap: 60px 40px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .notice-page .collection h3 { font-size: 1.36rem; margin-top: 22px; }
  .notice-page .prints-note-section { margin-top: 80px; }
}

/* --- mobile -------------------------------------------------------------- */
@media (max-width: 760px) {
  .notice-page .collections-inner {
    grid-template-columns: 1fr;
    gap: 84px;
    justify-items: start;
  }
  .notice-page .collection { width: 100%; max-width: 460px; }
  /* Stacked: there is no second column to lean toward, so no offset at all. */
  .notice-page .notice-hero .studio-artwork {
    max-width: 380px;
    transform: none;
  }
  .notice-page .notice-hero .studio-hero-art { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .notice-page .collections-inner,
  .notice-page .prints-note-inner { padding-left: 20px; padding-right: 20px; }
  .notice-page .collections { margin-top: 40px; }
  .notice-page .collections-inner { gap: 68px; }
  .notice-page .prints-note-section { margin-top: 68px; }
}

/* ---------------------------------------------------------------------------
   Notice hero — vertical rhythm

   Measured, the hero sat 20px below the navigation and 167px above
   // COLLECTIONS. The page therefore read as three moments with the first
   breath missing and the second overlong.

   Fifty pixels move from the lower gap to the upper one. Both changes are on
   the sections, not on the artwork, so the optical relationship between the
   lens and the typography is untouched — and because one gap grows by exactly
   what the other loses, the page does not get taller.

   Desktop only: at 1024 the gaps already measure 72 above and 88 below, and
   on a phone 56 and 75. Both are balanced, and applying the same offset there
   would push the hero down a screen it does not have to spare.
--------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .notice-page .notice-hero {
    padding-top: 50px;
  }

  .notice-page .studio-intro {
    margin-top: 46px;
  }
}

/* ===========================================================================
   What I Almost Missed — archival plates

   The photograph is not framed, matted or carded. It is set into a slightly
   deeper field of the same warm paper the rest of the Studio is printed on,
   so it reads as an artifact laid down rather than an image placed in a
   component. No border, no radius, no shadow, no outline — the only thing
   distinguishing the plate from the page is about four percent of warmth.

   The photograph itself is untouched: same 567 x 756, same centred axis,
   same order. The plate is what surrounds it.
   =========================================================================== */
.closer-page .sequence {
  /* B — Presence. A pale mineral grey, ~24 luminance points below the page
     and with the warmth spread cut from 22 to 9, so the plate reads as an
     archival object beside the ivory rather than dissolving into it. */
  --plate-paper: #DCD9D3;
  --plate-inset: 56px;
}

.closer-page .plate-field {
  background: var(--plate-paper);
  padding: var(--plate-inset);
  /* The caption sits inside the plate, aligned to the photograph's own left
     edge, so the title belongs to the artifact rather than floating between
     two of them. The existing 12px and 5px caption relationships are
     untouched; only the paper extends past them. */
  padding-bottom: 40px;
  position: relative;
}

/* One registration tick, in the plate margin, at the top left. It points at
   nothing inside the photograph and carries no measurement — it is the
   quietest possible nod to the drafting language used elsewhere. Deleting
   these six lines removes it entirely. */
.closer-page .plate-field::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--terracotta);
  border-left: 1px solid var(--terracotta);
  opacity: 0.28;
}

/* --- pacing -------------------------------------------------------------
   The default 150px separation is unchanged. Two entries get a longer pause,
   and nothing marks them but the space itself: Plate 04, where the sequence
   turns human, and Plate 07, where it returns to the fractured city.
   60px is added to the flex gap to reach roughly 210px.
------------------------------------------------------------------------- */
.closer-page .sequence > .plate-field:nth-of-type(4),
.closer-page .sequence > .plate-field:nth-of-type(7) {
  margin-top: 60px;
}

/* --- the ending needs more silence --------------------------------------- */
.closer-page .outro {
  margin-top: 260px;
}

/* The credit sits between the closing passage and the way out, with real
   space on both sides and no rule of any kind. On this page the colophon's
   hairline is removed: a line drawn immediately after the silence would cut
   it short. */
.closer-page .sequence ~ .colophon {
  margin-top: 200px;
  padding-top: 0;
  border-top: none;
}

.closer-page .collection-return {
  max-width: var(--container);
  margin: 96px auto 0;
  padding: 0 28px;
}

.closer-page .collection-return .back-link {
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.closer-page .collection-return .back-link:hover { opacity: 1; }

/* --- responsive ---------------------------------------------------------
   The plate inset and the two longer pauses scale with the rest rather than
   carrying desktop pixel values down to a phone.
------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .closer-page .sequence { --plate-inset: 34px; }
  .closer-page .plate-field { padding-bottom: 26px; }
  .closer-page .plate-field::before { top: 14px; left: 14px; }
  .closer-page .sequence > .plate-field:nth-of-type(4),
  .closer-page .sequence > .plate-field:nth-of-type(7) { margin-top: 38px; }
  .closer-page .outro { margin-top: 165px; }
  .closer-page .sequence ~ .colophon { margin-top: 130px; }
  .closer-page .collection-return { margin-top: 64px; }
}

@media (max-width: 640px) {
  .closer-page .sequence { --plate-inset: 18px; }
  .closer-page .plate-field {
    width: auto;
    margin: 0 20px;
    padding: 18px 18px 22px;
  }
  .closer-page .plate-field::before { top: 8px; left: 8px; width: 7px; height: 7px; }
  .closer-page .sequence > .plate-field:nth-of-type(4),
  .closer-page .sequence > .plate-field:nth-of-type(7) { margin-top: 26px; }
  .closer-page .outro { margin-top: 118px; }
  .closer-page .sequence ~ .colophon { margin-top: 96px; }
  .closer-page .collection-return { margin-top: 52px; padding-left: 20px; padding-right: 20px; }
}

/* The Studio wordline on a collection page. The landing pages carry
   .closer-landing and pick this up from there; a collection page does not, so
   the same treatment is declared for the collection entrance. Identical
   values — mono, uppercase, terracotta, at label weight. */
.closer-page .collection-head .studio-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 22px;
}

.closer-page .collection-head .eyebrow-sep {
  opacity: 0.4;
  margin: 0 5px;
}

/* A collection entrance, not a page header: more air above the title than a
   blog header would take, and more below the subtitle before the writing. */
.closer-page .collection-head {
  margin-top: 132px;
}

.closer-page .collection-head + .intro {
  margin-top: 74px;
}

/* ===========================================================================
   Prints — Plate 02 prototype

   A different argument from the standard entry above and below it. The room
   comes first and takes the page; the photograph follows as a physical
   artifact on the same mineral field the collection established, with its
   information set beside it rather than stacked beneath it.

   Everything here is scoped to .print-entry, so the other six entries and
   every other route are untouched.
   =========================================================================== */
.closer-prints .print-entry {
  display: block;
  max-width: none;
  padding: 0;
  border-top: none;          /* entries are separated by space, not rules */
  margin: 120px 0 0;
  /* A direct link such as #plate-04 otherwise lands the entry flush with the
     top of the window, where the sticky header covers the plate reference.
     This clears the header and leaves a little air above it. */
  scroll-margin-top: 130px;
}

/* --- the introduction ---------------------------------------------------- */
.closer-prints .proto-head {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 28px 34px;
}

.closer-prints .proto-head .print-ref { margin-bottom: 10px; }

.closer-prints .proto-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  line-height: 1.16;
  color: var(--forest);
  margin: 0;
}

/* --- the room ------------------------------------------------------------ */
/* Directly on the ivory. No plate, no border, no shadow, no container — the
   rendering's own paper meets the page and the reader is simply in the room. */
.closer-prints .proto-env {
  margin: 0 auto;
  width: min(940px, 88vw);
}

.closer-prints .proto-env picture,
.closer-prints .proto-env img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- the object ---------------------------------------------------------- */
/* Deliberate silence between the room and the artifact: you leave one and
   arrive at the other rather than reading them as one block. */
.closer-prints .proto-object {
  max-width: 940px;
  margin: 120px auto 0;
  padding: 0 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 72px;
  align-items: start;
}

/* The mineral field from the collection, at a smaller physical size — this is
   the print as an object you could hold, not the exhibition plate. Same
   #DCD9D3, same proportional inset, same absence of border or shadow. */
.closer-prints .proto-artifact {
  margin: 0;
  background: #DCD9D3;
  /* Inset scales with the field so the photograph keeps the same relationship
     to its margin: 36/420 becomes 40/470, both ~8.6%. */
  padding: 40px;
  width: 470px;
}

.closer-prints .proto-artifact picture,
.closer-prints .proto-artifact img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- the information ----------------------------------------------------- */
.closer-prints .proto-info {
  padding-top: 4px;
}

.closer-prints .proto-info p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.8;
  margin: 0 0 18px;
  max-width: 340px;
}

/* --- room to breathe before the next print ------------------------------- */
.closer-prints .print-entry { padding-bottom: 170px; }

@media (max-width: 1024px) {
  .closer-prints .proto-object { gap: 48px; margin-top: 88px; }
  .closer-prints .proto-artifact { width: 380px; padding: 31px; }
  .closer-prints .print-entry { padding-bottom: 130px; margin-top: 90px; }
}

/* --- mobile -------------------------------------------------------------- */
/* Stacked: the room fills the column, then the artifact, then its line. */
@media (max-width: 760px) {
  .closer-prints .proto-head { padding-left: 20px; padding-right: 20px; }
  .closer-prints .proto-env { width: calc(100vw - 40px); }
  .closer-prints .proto-object {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 61px;
    padding-left: 20px;
    padding-right: 20px;
    justify-items: start;
  }
  .closer-prints .proto-artifact { width: min(100%, 320px); padding: 22px; }
  .closer-prints .proto-info p { max-width: none; }
  .closer-prints .print-entry { padding-bottom: 96px; margin-top: 64px; }
}

/* ===========================================================================
   Prints — entrance and ending

   Scoped to this page. The seven print entries are untouched: nothing here
   selects .print-entry or anything inside it.
   =========================================================================== */

/* --- entrance ------------------------------------------------------------
   A composed entrance rather than a page header. The headline and the concept
   line are given different weights and sizes so they read as a statement and
   its subtitle; the supporting line drops to body scale and carries only what
   the page can support.
------------------------------------------------------------------------- */
.closer-prints .prints-entrance {
  padding: 0;
  border-top: none;
}

.closer-prints .prints-entrance-inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 130px 28px 0;
}

.closer-prints .prints-entrance .studio-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 24px;
}

.closer-prints .prints-entrance .eyebrow-sep {
  opacity: 0.4;
  margin: 0 5px;
}

.closer-prints .prints-entrance h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--forest);
  margin: 0 0 18px;
}

/* The concept line carries the page's argument, so it sits in the serif at
   roughly half the headline — clearly subordinate, clearly not body copy. */
.closer-prints .prints-concept {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  color: var(--forest);
  opacity: 0.86;
  margin: 0 0 26px;
  max-width: 620px;
}

.closer-prints .prints-support {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink);
  opacity: 0.78;
  margin: 0;
  max-width: 500px;
}

/* --- ending --------------------------------------------------------------
   No rules anywhere. The question, the instruction, the way in — then silence.
------------------------------------------------------------------------- */
.closer-prints .prints-close {
  padding: 0;
  border-top: none;
}

.closer-prints .prints-close-inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 90px 28px 0;
}

.closer-prints .close-lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.22;
  color: var(--forest);
  margin: 0 0 14px;
  max-width: 620px;
}

.closer-prints .close-sub {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.78;
  margin: 0 0 26px;
  max-width: 480px;
}

/* The long breath, then the way back. */
.closer-prints .prints-return {
  max-width: 940px;
  margin: 210px auto 0;
  padding: 0 28px;
}

.closer-prints .prints-return .back-link {
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.closer-prints .prints-return .back-link:hover { opacity: 1; }

/* The credit sits last and quiet, with no rule, so it reads as a colophon
   rather than as one more section after the close. */
.closer-prints .colophon {
  /* same 940 column as the close and the return, so the credit sits on the
     page's left edge rather than stepping in from it */
  max-width: 940px;
  margin: 104px auto 0;
  padding: 0 28px;
  border-top: none;
}

.closer-prints .colophon p { opacity: 0.4; }

@media (max-width: 1024px) {
  .closer-prints .prints-entrance-inner { padding-top: 96px; }
  .closer-prints .prints-close-inner { padding-top: 70px; }
  .closer-prints .prints-return { margin-top: 160px; }
  .closer-prints .colophon { margin-top: 80px; }
}

@media (max-width: 760px) {
  .closer-prints .prints-entrance-inner,
  .closer-prints .prints-close-inner,
  .closer-prints .prints-return { padding-left: 20px; padding-right: 20px; }
  .closer-prints .prints-entrance-inner { padding-top: 76px; }
  .closer-prints .prints-close-inner { padding-top: 56px; }
  .closer-prints .prints-return { margin-top: 118px; }
  .closer-prints .colophon { margin-top: 62px; padding-left: 20px; padding-right: 20px; }
  .closer-prints .prints-concept { margin-bottom: 20px; }
}