/* ==========================================================================
   Home v2 : p-home-v2.css (HOME-V2-BRIEF.md, 2026-09-05)
   Clean, quiet, image-led. No colour field, no tint on the photographs, no
   scroll-driven motion of any kind: only the once-only opening-plate reveal
   and the plain [data-reveal] entry reveals site.js already runs everywhere.
   Tokens (--paper, --ink, --rule, --gutter, --wrap, .mono, .wrap, .grid) come
   from site.css; nothing here duplicates or overrides them.
   ========================================================================== */

body.page-home-v2 { background: var(--paper); }

/* --------------------------------------------------------------- rhythm -- */
/* round C (lab/council-v2c/astra-pro.md, item 5): one margin per boundary, desktop / phone, replacing the flat
   section-to-section value rounds A/B used (padding on both sides of a boundary was double-counting the gap). */

/* round E (lab/council-hero/astra-pro.md): on a phone heroV2()/introV2() (below) replace the opening plate
   entirely; both DOM trees are always rendered (home-v2.ts) and this pair of rules is the only thing that decides
   which one paints, so a screen reader / keyboard user never meets the hidden pair (display:none drops it from
   the accessibility tree too). Round F: the separate positioning-line section (.line) is gone from the markup —
   the opening plate now carries the positioning sentence itself — so this pair no longer mentions it. */
.plate-opening { display: none; }
@media (min-width: 900px) {
  .hero-v2, .intro-v2 { display: none; }
  .plate-opening { display: block; }
}

/* -------------------------------------------------------- hero (phone/tablet, < 900px) -- */
/* round G (lab/council-hero/astra-pro.md): a digital magazine cover. min-height: 100svh INCLUDES the header now
   (unlike round E/F) — the header lies fixed OVER the picture (see "the header" block below, which is the only
   piece of this round scoped past 900px too, since it touches .site-head). */
.hero-v2 {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  overflow: hidden;
}
/* round H: the header fade, widened to 170px / 0.50 peak so "Suzanne Dolan" and "Menu" read over any patch of the
   photo (the owner's own complaint — "Menu" sat over a bright area at 120px/0.28). */
.hero-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 170px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(rgba(26, 26, 26, 0.5), rgba(26, 26, 26, 0));
}
/* round H: a cinematic multi-stop scrim replacing round G2's flat 2-stop ramp — spans the WHOLE hero (not just its
   own bottom 40%) so the percentages below read directly against the hero's own height: transparent to 50%, then
   0.18 / 0.45 / 0.70 / 0.86 at 62 / 74 / 86 / 100%. */
.hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* 2026-09-08, the owner: "the type gets lost in the table"; the stops deepened once more, measured on the
     screenshot behind the title (paper on the scrimmed wood must reach at least 7:1) */
  background: linear-gradient(
    rgba(26, 26, 26, 0) 46%,
    rgba(26, 26, 26, 0.22) 58%,
    rgba(26, 26, 26, 0.55) 70%,
    rgba(26, 26, 26, 0.80) 82%,
    rgba(26, 26, 26, 0.92) 100%
  );
}

.hero-v2__link {
  position: absolute;
  inset: 0;
  /* no z-index: with one the link became a stacking context and the type inside it painted UNDER the scrim
     (::after, z 2) and read grey whatever its colour (found 2026-09-08 by comparing it with the cue outside the
     link); with z auto the photograph stays under the scrim and the type block (z 3) rises above it */
  z-index: auto;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* round G: full-bleed, no gutter, no paper margin — the photograph fills the whole cover. */
.hero-v2__photo { position: absolute; inset: 0; }
.hero-v2__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* her face, both hands and the vessel measured in frame at 375x667/390x705/430x932 (2026-09-08): the crop is
     horizontal-only at these narrow widths (the box is always taller, relative to width, than the 1429x2000
     photo, so the full photo HEIGHT always shows); the subject sits right-of-centre in the source frame, so the
     window is anchored well past 50% to keep the vessel in, not just her face. */
  object-position: 78% 35%;
  border-radius: 0;
}
/* round G2 item 2: at 375 the type block (anchored to the bottom, see .hero-v2__foot) still crossed the vessel's
   base even with no top air to spare. Scaling the photo up, anchored at its own bottom edge, pushes the whole
   scene higher in the frame (only the top — her hair — is cropped further; the face is nowhere near that edge),
   growing the clear table strip at the bottom without moving the crop's own object-position. Measured 2026-09-08:
   1.08 (an 8% zoom, the ceiling the brief allowed) was enough to clear the vessel base; 390/430 already had room
   without it. */
@media (max-width: 389.98px) {
  .hero-v2__photo-img { transform: scale(1.08); transform-origin: 50% 100%; }
}

/* round H: the block still anchored to the bottom (its own content height decides how far up it reaches — this is
   what clears the jar/vessel, not the scrim), but with a 12px safety margin now enforced below both landmarks
   rather than whatever margin fell out of the previous spacing. bottom: 34px is measured, not the brief's literal
   56px — with these bigger type sizes 56px put the title's top ABOVE the vessel's base (a ~10px overlap) at
   390x705; see the report for the per-viewport numbers this produces instead. */
.hero-v2__foot {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 44px;
  z-index: 3;
}
/* round 13: her three lines (the 2026-09-11 email), the council's sizes: the name Inter Tight 600 40/42 (36 on a
   320px screen), the role Inter 400 18/24, the medium Plex Mono 12/18 uppercase, 8px between them; full paper,
   100% opacity, a hairline cinematic shadow (not an outline) on all three for contrast wherever the crop puts them.
   No arrow: the whole cover is the link and "Scroll to explore" is the cue. */
.hero-v2__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(26, 26, 26, 0.45), 0 8px 24px rgba(26, 26, 26, 0.35);
}
@media (max-width: 339.98px) {
  .hero-v2__name { font-size: 2.25rem; }
}
.hero-v2__role {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.33;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(26, 26, 26, 0.45), 0 8px 24px rgba(26, 26, 26, 0.35);
}
.hero-v2__medium {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(26, 26, 26, 0.45), 0 8px 24px rgba(26, 26, 26, 0.35);
}

/* round G: the once-only load reveal, this hero's own timing — the photo settles first (0.01 -> 1 opacity, 900ms),
   the title block and arrow rise 12px after it finishes (600ms, delayed 900ms so the two never overlap). Nothing
   under prefers-reduced-motion (site.css's html.no-motion / [data-reveal] rules already cover that generically). */
.js:not(.no-motion) .hero-v2__photo-img { transition: opacity 900ms var(--ease); }
.js:not(.no-motion) .hero-v2__foot { transition: opacity 600ms var(--ease) 900ms, transform 600ms var(--ease) 900ms; }
.js:not(.no-motion) [data-reveal="hero"]:not(.is-in) .hero-v2__photo-img { opacity: 0.01; }
.js:not(.no-motion) [data-reveal="hero"]:not(.is-in) .hero-v2__foot { opacity: 0; transform: translateY(12px); }

/* round G: the header lies over the cover (< 900px only — desktop's header stays the normal paper header, no
   transparency). Reuses site.js's existing scrollY > 80 -> .is-grounded toggle (the same mechanism v1's
   body.page-home .site-head uses, site.css); additive here, site.css/site.js untouched. */
@media (max-width: 899.98px) {
  body.page-home-v2 .site-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
    border-bottom-color: transparent;
    transition: background-color 220ms var(--ease), border-color 220ms var(--ease);
  }
  body.page-home-v2 .site-head.is-grounded { background: var(--paper); border-bottom-color: var(--rule); }
  body.page-home-v2 .site-head:not(.is-grounded) .wordmark,
  body.page-home-v2 .site-head:not(.is-grounded) .menu-btn { color: var(--paper); }
  /* round 13: one identity anchor per screen. The cover already carries her name in its type block, so the wordmark
     stays out (visibility, so it is not a focusable invisible link either) until site.js grounds the header, which
     on this page happens when the name block ([data-ground-at]) has passed behind it, not at 80px. */
  html.js body.page-home-v2 .site-head:not(.is-grounded) .wordmark { visibility: hidden; }
}

/* ------------------------------------------------------- information screen -- */
.intro-v2 {
  /* no forced viewport height: the three lines fill half a screen and a full-height box left the other half empty
     (measured 2026-09-07); the catalogue follows after 64 px */
  box-sizing: border-box;
  padding: 48px 20px 64px;
}
/* round F: her positioning sentence leads (astra-pro.md round 2: "it is the lead"); round 13: Inter 400 24/32, the
   council's number, no italic. The hero shows the artist, not a work, so there is no per-work metadata here. */
.intro-v2__positioning {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.intro-v2 .plate-open__proof {
  margin: 32px 0 0;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- opening plate -- */
/* named plate-opening, not .plate: site.css's .plate is the bordered enquiry panel elsewhere on the site (border,
   background, padding) and must never wrap a photograph on this page (rule 2: no rules around photographs). */
.plate-opening { margin-top: 0; }

.plate-open__grid { display: block; }

/* round G: an "art-book spread" — the photograph right (columns 7-12), the proof line then the cover type left
   (columns 1-5), the arrow in line with the last line of type. The photograph (object-fit: cover, no --ratio/
   --obj-h sizing — a cutout needed those, a cropped photo fills whatever box it is given). The whole plate is one
   link to /work, so .plate-open__grid IS the anchor (home-v2.ts). */
.plate-open__grid { text-decoration: none; color: inherit; }
.plate-open__label { padding-inline: var(--gutter); }
/* council pass 2: the proof line after her three lines, not before her name; soft ink */
.plate-open__label .plate-open__proof { margin-top: 1.75rem; color: var(--ink-soft); }
/* round 13: the desktop spread's three lines, her order: the name (Inter Tight 600, 72px at 1440, the council's
   number, growing to 88px only on a wide screen), the role (Inter 400 22/28), the medium (Plex Mono 12 uppercase,
   soft ink). The header wordmark stays at 18px above: two regions, navigation and heading. */
.plate-open__name {
  margin: 2.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.5rem, 2rem + 3.5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.plate-open__role {
  margin: 1.25rem 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--ink);
}
.plate-open__medium {
  margin: 0.75rem 0 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (min-width: 900px) {
  .plate-open__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding-top: 3rem;   /* air between the header's hairline and the photograph (it touched, 2026-09-05) */
    padding-inline: var(--gutter);
    padding-bottom: 2rem;
  }
  .plate-open__photo-box {
    height: 84vh;
    grid-column: 7 / 13;
    grid-row: 1;
  }
  .plate-open__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* the box's aspect is close to the photo's own (round G: "trim <= 6%"), so a near-centre crop already keeps
       the whole scene; nudged right of centre to match the hero's own crop bias (measured 2026-09-08). */
    object-position: 60% 40%;
    border-radius: 0;
  }
  .plate-open__label {
    grid-column: 1 / 5;
    grid-row: 1;   /* the same row as the photograph (auto-placement put it under, measured 2026-09-05), bottom-aligned */
    padding-inline: 0;
  }
}

/* round G: no once-only reveal here any more. site.js's hero reveal is a single querySelector('[data-reveal="hero"]')
   — with two such sections in the DOM (.hero-v2 and this one) it only ever finds the first (.hero-v2, earlier in
   the page), so .plate-opening's own .is-in never arrived and this section sat stuck at opacity 0.01, permanently
   near-invisible on every desktop load (caught 2026-09-08 screenshotting this round, not left for the report to
   flag). Fixed by dropping data-reveal="hero" from this section (home-v2.ts) rather than fighting a single-target
   selector we cannot edit (site.js is off-limits); the round's own motion instructions were scoped to the phone
   hero anyway. The opening plate now just renders at full opacity immediately, no animation. */

/* ------------------------------------------------------------ positioning -- */
/* round G: restored, desktop only (round F wrongly removed it — her sentence belongs after the opening plate, not
   repeated inside it). round C (item 4): wrapped in .wrap so its left edge lines up with the wordmark. */
.line { display: none; }
@media (min-width: 900px) {
  .line { display: block; margin-top: 7rem; }
  .line__text {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 3rem;
    letter-spacing: -0.02em;
    max-width: 48.75rem;
    text-wrap: pretty;
  }
}

/* ------------------------------------------------------------ selected work -- */
.plates { margin-top: 72px; }
@media (min-width: 900px) { .plates { margin-top: 7rem; } }

/* round D (owner's reference, lab/uploads/df9c4978-image.png): "Selected work" redone as a printed catalogue on a
   phone (< 900px, the page's one breakpoint — "mobile only" in the brief). Everything in this block is the
   mobile-first default and gets explicitly reverted inside the @media(min-width:900px) block below, which stays
   round C's design unchanged (two equal columns, no dividers, no arrow, the plain eyebrow). */
.plates__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
}
.plates__eyebrow { margin: 0; color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }
.plates__eyebrow-rule { flex: 1 1 auto; height: 1px; background: var(--rule); }

.plates__grid { display: block; }
/* round 13, council pass 2: 16px from the photograph to its label, 64px from the label to the next photograph
   (pass 1 said 48, pass 2 measured the taller photographs and asked for more; one member said 80) */
.plate-card + .plate-card { margin-top: 64px; }
.plate-card__link { display: block; text-decoration: none; }

/* round 13: the photograph, complete, at its own aspect (the img's width/height attributes), spanning the content
   width; a plain rectangle on the paper: no frame, no shadow, no tint, nothing cropped. */
.plate-card__photo-box {
  display: block;
  padding: 0 0 16px;
  line-height: 0;
}
.plate-card__photo-box .photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* council pass 2: no hairlines, no arrow, no uppercase announcement: the label is the archive's two lines */
.plate-card__info { padding: 0; }
/* round 13: the title in Inter Tight 500, 26/30 on a phone (the council's number), tracking 0 (pass 2: the
   negative tracking read compressed), marked by weight and position, never italic; ", Year" on the same line */
.plate-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}
.plate-card__title cite { font-style: normal; font-weight: 500; }
.plate-card__link .plate-card__title cite { text-decoration: none; }
/* the whole card is the link; hover and focus underline the title as the archive cards do */
.plate-card__link:hover .plate-card__title cite,
.plate-card__link:focus-visible .plate-card__title cite {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-soft);
}
/* "materials · dimensions": mono, sentence case, soft ink, the archive label's own line */
.plate-card__meta {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.plates__all { margin-top: 32px; }
@media (min-width: 900px) { .plates__all { margin-top: 3rem; } }

@media (min-width: 900px) {
  /* round C, unchanged: the plain eyebrow, no hairline, no dividers, no arrow. */
  .plates__head { display: block; margin: 0 0 2rem; }
  .plates__eyebrow-rule { display: none; }

  /* round C (item 1): two EQUAL columns, no stagger — Bear, Obviously's shifted-down cutout was intruding into
     Everything's Fine's caption above it (desktop.jpg). Columns are var(--wrap) (1180px, the site's shared
     container) split by the 96px gutter: ~542px each, not the 552px a 1200px container would give; using the
     site's own --wrap keeps this grid aligned with every other section instead of a one-off width. */
  .plates__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6rem;
    row-gap: 6rem;
  }
  .plate-card + .plate-card { margin-top: 0; }

  /* round C's fixed-height image area, kept for the photographs (round 13): a 500px-tall box, the photograph
     scaled to fit it whole (height-capped, width auto, never cropped) and standing on its bottom edge, so every
     row's photographs share one base line; left-aligned so the label lines up with the photograph's left edge. */
  .plate-card__photo-box {
    --obj-h: 31.25rem;   /* 500px at the base size; grows with the root on wide screens */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: var(--obj-h);
    padding: 0;
  }
  .plate-card__photo-box .photo {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }

  .plate-card__info { margin-top: 1rem; }
  .plate-card__title { font-size: 1.5rem; line-height: 1.8rem; }
  .plate-card__meta { margin-top: 0.25rem; }
}

.plate-open__proof {
  font-size: 0.75rem;
  line-height: 1.125rem;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------- words -- */
.words { margin-top: 72px; }
@media (min-width: 900px) { .words { margin-top: 7rem; } }
/* round 13: her paragraph in Inter 400 (20/30, 24/36 from 900px), no italic */
.words__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.005em;
  max-width: 342px;
  text-wrap: pretty;
}
@media (min-width: 900px) {
  .words__text { font-size: 1.5rem; line-height: 2.25rem; max-width: 44ch; }
}
.words__link { margin-top: var(--s-4); }

/* ---------------------------------------------------------------- enquire -- */
.enquire-line { margin-top: 64px; margin-bottom: 64px; }
@media (min-width: 900px) { .enquire-line { margin-top: 6rem; margin-bottom: 6rem; } }
.enquire-line__text { max-width: var(--measure); }

/* no shadow section since round 13: the plates are photographs on the paper, and a photograph gets no shadow,
   tint or frame (the council's refusal line: "0 shadow 0 tint 0 frame") */

/* --------------------------------------------------------- reduced motion -- */
/* site.css already sets transition:none on every [data-reveal] under prefers-reduced-motion and (separately) drives
   html.no-motion; both gates are attribute/class based, so they cover .plate-open__photo-box .object and
   .plate-open__label without change here. The rules above are themselves scoped to .js:not(.no-motion), so under
   reduced motion, ?static=1 or without JavaScript nothing is ever set to opacity 0 in the first place. */