/* ============================================================
   PALETTE — sampled directly from Debbie's six paintings, not
   invented. --paper is the literal color of her watercolor
   sheets (#FEFDF9), so the art sits on screen the way it sits
   on paper, with no visible edge.
   ============================================================ */
:root{
  --paper:        #FEFDF9;   /* her actual sheet color */
  --paper-warm:   #FAF6EE;   /* very slightly deeper, for banding */
  --ink:          #3C3632;   /* her graphite, sampled */
  --ink-soft:     #6E655D;
  --ink-faint:    #A79C92;

  --rose:         #D45474;   /* Lady Slipper pouch — the one saturated note */
  --rose-deep:    #7B4554;   /* hellebore + orchid shadows */
  --gold:         #B9B249;   /* dominant mid-tone, 5 of 6 works */
  --sage:         #8EA864;   /* leaves, moss, stems */
  --earth:        #C08E65;   /* branch, root, bark */

  --rule:         #E8E1D6;

  --measure:      66ch;
  --gutter:       clamp(1.25rem, 4vw, 4rem);

  /* One shared easing so every transition on the page feels related. */
  --ease:         cubic-bezier(.22,.61,.36,1);
}

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

/* ============================================================
   TEXT SIZE — set on <html> as a percentage so EVERY rem-based
   size on the page scales together: body copy, specimen labels,
   nav, headings. 106.25% = 17px base (up from 16px).

   The reader can then step it further with the control in the
   header. Three steps rather than a slider: fewer decisions, and
   each one is a visible change. The choice is remembered in
   localStorage so it survives a reload.
   ============================================================ */
html{
  font-size:106.25%;                       /* 17px */
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
html[data-text="large"]  { font-size:118.75%; }   /* 19px */
html[data-text="larger"] { font-size:131.25%; }   /* 21px */

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* 300 was too light once type gets larger and readers are older: thin
     strokes at 17px+ read as grey mush. 400 holds its color. */
  font-weight:400;
  font-size:1rem;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

::selection{ background:rgba(212,84,116,.16); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--rose);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   GLASS — deliberately confined to CHROME only. Nothing
   translucent is ever laid over a painting: blurring museum-
   exhibited botanical illustration to decorate a container
   would be backwards. The art is always the sharpest thing here.
   ============================================================ */
.glass{
  background:rgba(254,253,249,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}

/* ---------- Site header ---------- */
.masthead{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.85rem var(--gutter);
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease), background-color .5s var(--ease);
}
.masthead.is-scrolled{
  border-bottom-color:var(--rule);
  background:rgba(254,253,249,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.wordmark{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.16rem; font-weight:400; letter-spacing:.055em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.wordmark span{ font-style:italic; color:var(--rose-deep); }

.nav{ display:flex; gap:clamp(.9rem,2.2vw,2rem); align-items:center; }
/* The four page links are wrapped in .nav-links so the phone layout can move
   them to a row of their own (see the 600px block). display:contents makes the
   wrapper vanish at every other width, leaving the links as direct flex items
   of .nav exactly as they were before it existed — so nothing above 600px
   changes. */
.nav-links{ display:contents; }
.nav a{
  font-size:.82rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); font-weight:400;
  padding:.3rem 0; position:relative;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--rose);
  transition:right .45s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after{ right:0; }

/* ---------- Text size control ----------
   Sits at the end of the nav. Labelled with actual letter A's at the sizes
   they produce, which needs no explaining to anyone. */
.textsize{
  display:flex; align-items:baseline; gap:.1rem;
  margin-left:.4rem; padding-left:clamp(.6rem,1.5vw,1.1rem);
  border-left:1px solid var(--rule);
}
.textsize button{
  font-family:'Cormorant Garamond',Georgia,serif;
  background:none; border:0; cursor:pointer; color:var(--ink-faint);
  padding:.25rem .45rem; line-height:1; border-radius:3px;
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.textsize button:nth-child(1){ font-size:.92rem; }
.textsize button:nth-child(2){ font-size:1.16rem; }
.textsize button:nth-child(3){ font-size:1.42rem; }
.textsize button:hover{ color:var(--rose-deep); }
.textsize button[aria-pressed="true"]{
  color:var(--rose-deep); background:rgba(212,84,116,.09);
}

/* ============================================================
   HERO — the thesis: her most characteristic image at scale,
   with her own pencil title beneath it. No stat tiles, no
   gradient. The painting IS the argument.
   ============================================================ */
.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr minmax(0,var(--hero-art,44vmin)) 1fr;
  align-items:center;
  column-gap:clamp(1.5rem,4vw,4.5rem);
  padding:6rem var(--gutter) 4rem;
}
/* min-width:0 keeps a wide intrinsic image width from blowing out a grid track:
   a percentage max-width cannot resolve while the browser computes the track's
   intrinsic size, so it falls back to the image's natural width and sizes the
   column to it — body text stops wrapping and the art clips off the right
   edge. min-width:0 lets the track ignore that intrinsic width. */
.hero > *{ min-width:0; }
.hero-lede{ grid-column:1; max-width:34ch; justify-self:end; text-align:right; }
.hero-art{ grid-column:2; }
/* Centred, then nudged down: it should read as a considered counterweight to
   the lede, not as text that fell to the bottom of an empty column. */
.hero-meta{ grid-column:3; max-width:30ch; align-self:center; margin-top:14vh; }

.eyebrow{
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 1.4rem;
}
.hero h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  font-size:clamp(2.6rem,1rem + 5.4vw,5.2rem);
  line-height:.98; letter-spacing:-.015em;
  margin:0 0 1.5rem;
}
.hero h1 em{ font-style:italic; color:var(--rose-deep); }
.hero-lede p{ margin:0; color:var(--ink-soft); font-size:1.05rem; line-height:1.8; }

.hero-art figure{ margin:0; position:relative; }
.hero-art img.plate{
  /* Soft, long, low-opacity shadow: the sheet lifts off the page like a
     mounted specimen. This is where the "soft light" feeling comes from --
     not from blur. */
  filter:drop-shadow(0 26px 44px rgba(60,54,50,.13))
         drop-shadow(0 3px 8px rgba(60,54,50,.06));
}
.hero-meta dl{ margin:0; display:grid; gap:.9rem; }
.hero-meta dt{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.hero-meta dd{
  margin:.15rem 0 0; font-size:.95rem; color:var(--ink-soft); line-height:1.55;
}
.hero-meta dd em{ font-style:italic; }

.scroll-cue{
  grid-column:1/-1; justify-self:center; margin-top:clamp(1.5rem,4vh,3.5rem);
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.scroll-cue::after{
  content:''; width:1px; height:2.6rem;
  background:linear-gradient(var(--ink-faint),transparent);
  animation:drift 2.8s var(--ease) infinite;
}
@keyframes drift{
  0%,100%{ transform:scaleY(.55); transform-origin:top; opacity:.5; }
  50%    { transform:scaleY(1);   transform-origin:top; opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .scroll-cue::after{ animation:none; } }

/* ---------- Section scaffolding ---------- */
.section{ padding:clamp(4.5rem,11vh,9rem) var(--gutter); }
.section--warm{ background:var(--paper-warm); }

.section-head{
  display:flex; align-items:baseline; gap:1.1rem;
  margin:0 0 clamp(2.5rem,6vh,4.5rem);
}
.section-head h2, .section-head h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300; font-size:clamp(1.7rem,1rem + 1.9vw,2.9rem);
  letter-spacing:-.01em; margin:0; white-space:nowrap;
}
.section-head .rule{ flex:1; height:1px; background:var(--rule); }
.section-head .count{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}

/* ============================================================
   PLATES — the gallery. Asymmetric two-column rhythm rather
   than a uniform grid: botanical plates were bound as single
   sheets of differing sizes, and a rigid grid would crop that
   variety away. Each plate alternates side, and the specimen
   label sits BESIDE the art on wide screens (never over it).
   ============================================================ */
.plates{ max-width:1180px; margin:0 auto; display:grid; gap:clamp(4rem,9vh,8rem); }

.plate-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,17rem);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;
}
.plate-row > *{ min-width:0; }   /* same intrinsic-width trap as .hero */
.plate-row:nth-child(even){ grid-template-columns:minmax(0,17rem) minmax(0,1fr); }
.plate-row:nth-child(even) .plate-figure{ order:2; }
.plate-row:nth-child(even) .label{ order:1; text-align:right; }

/* Constrain plates by HEIGHT, not width. These are portrait sheets: at full
   column width a 11 × 15¼ in plate renders taller than any laptop screen, so
   you'd never see a whole painting at once — the one thing a gallery must do.
   Capping height keeps every plate wholly visible and lets the differing sheet
   proportions show, the way a wall of framed work does. */
.plate-figure{ margin:0; display:flex; flex-direction:column; align-items:center; }
.plate-btn{
  display:block; max-width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; border-radius:2px; line-height:0;
}
.plate-btn img{
  max-height:72svh; width:auto; max-width:100%;
  filter:drop-shadow(0 20px 36px rgba(60,54,50,.11))
         drop-shadow(0 2px 6px rgba(60,54,50,.05));
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.plate-btn:hover img, .plate-btn:focus-visible img{
  transform:translateY(-5px) scale(1.008);
  filter:drop-shadow(0 34px 54px rgba(60,54,50,.16))
         drop-shadow(0 3px 8px rgba(60,54,50,.07));
}

/* Specimen label — herbarium sheet convention: binomial in italic, then
   medium and sheet size as plain data. */
.label{ padding-bottom:.4rem; }
.label h3, .gallery .g-title, .pricelist .pl-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400; font-size:1.32rem; line-height:1.25;
  margin:0 0 .3rem; letter-spacing:.002em;
}
.label .binomial, .gallery .g-binomial, .pricelist .binomial{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic; font-size:1rem; color:var(--rose-deep);
  margin:0 0 1rem;
}
/* Conservation status — only two of the six carry one, and on a herbarium
   sheet that fact is data, not decoration: it says why the plant was worth
   recording. Set like a determination slip: a short rose rule, the status
   itself caps-tracked, and the range spelled out beneath on its own line.
   Deliberately NOT a colored pill — a badge would compete with the painting
   for the one saturated note on the page. The two parts are separate lines
   rather than one string because the label column is ~290px and "Native to
   Western North Carolina · Vulnerable" cannot fit on one.
   NOT flex: a flex container makes every child a flex item, so the range
   would sit on the same line however it's displayed. */
.label .status{
  margin:-.7rem 0 1rem; font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rose-deep);
}
.label .status::before{
  content:''; display:inline-block; vertical-align:middle;
  width:1.4rem; height:1px; margin-right:.55rem;
  background:var(--rose);
}
.label .status .range{
  display:block; margin-top:.2rem; letter-spacing:.04em;
  text-transform:none; font-size:.8rem; color:var(--ink-faint);
}
.label .spec, .pricelist .spec{
  margin:0; font-size:.85rem; line-height:1.9; color:var(--ink-soft);
  border-top:1px solid var(--rule); padding-top:.85rem;
}
.label .spec span, .pricelist .spec span{ display:block; }
.label .spec .dim, .pricelist .spec .dim{ color:var(--ink-faint); font-variant-numeric:tabular-nums; }
/* Latin term glossed in place. Only one plate is titled "in situ", so the
   explanation belongs on that label rather than in the general note. */
.label .gloss{
  margin:-.6rem 0 1rem; font-size:.8rem; line-height:1.5; color:var(--ink-faint);
}
.label .gloss em{ font-style:italic; color:var(--ink-soft); }

/* ============================================================
   EDITION / PRINT BLOCK
   Sits AFTER the specimen spec and behind its own rule, because it
   describes a different object: .spec is the original painting,
   this is the signed print made from it. A reader must never read
   "$150" as the price of an 11 × 15¼ in watercolor.
   Paper stock and the signed-and-numbered fact are stated ONCE in
   the note above the plates instead of six times down the page —
   what varies per plate is only the run size and the price.
   ============================================================ */
.label .edition{
  margin-top:1.05rem; padding-top:.9rem; border-top:1px solid var(--rule);
}
.label .edition-kind{
  margin:0; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-faint);
}
.label .edition-run, .pricelist .edition-run{
  margin:.3rem 0 0; font-size:.85rem; line-height:1.7; color:var(--ink-soft);
}
/* The run size is the collectible fact — 50 is worth noticing next to 200 —
   so it holds its color where the surrounding words go soft. */
.label .edition-run strong{ font-weight:500; color:var(--ink); }
.label .edition-run .dim, .pricelist .edition-run .dim{
  display:block; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
/* Set in the display serif, not the UI sans: it reads as a printed price on a
   gallery card rather than a figure in a shopping cart. */
.label .price, .pricelist .price{
  font-family:'Cormorant Garamond',Georgia,serif;
  margin:.45rem 0 0; font-size:1.4rem; line-height:1.2; color:var(--ink);
  letter-spacing:.01em; font-variant-numeric:tabular-nums;
}

/* Note above the gallery carrying the facts common to all six: the paper, the
   signed-and-numbered convention, originals not for sale, and one copyright
   line — rather than a © stamped across every plate. */
.prints-note{
  max-width:64ch; margin:-1.5rem 0 clamp(2.5rem,6vh,4rem);
  font-size:.92rem; line-height:1.85; color:var(--ink-soft);
}
.prints-note .copyright{
  display:block; margin-top:.45rem; font-size:.8rem; color:var(--ink-faint);
  letter-spacing:.02em;
}

/* A real <button>, not styled text: it says "Open larger", so it has to open
   the painting. Reset the UA button chrome but keep the keyboard behaviour. */
.label .view{
  margin-top:.9rem; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rose); display:inline-block;
  font-family:inherit; background:none; border:0; padding:0;
  cursor:pointer; text-align:left;
}
.label .view:hover{ color:var(--rose-deep); }
.label .view:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }

/* Two actions per label now, so they get a row of their own rather than each
   claiming its own margin-top. column-gap only: when they wrap on a narrow
   label the row-gap keeps them from touching. */
.label .actions{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.5rem clamp(1rem,2.5vw,1.6rem);
  margin-top:1rem;
}
.label .actions .view{ margin-top:0; }
/* Same weight and tracking as "Open larger" — buying and looking are offered
   as equal invitations, and neither gets a filled button. A solid rose block
   in this palette would out-shout the paintings. */
.label .enquire, .pricelist .enquire{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.label .enquire:hover, .pricelist .enquire:hover{ color:var(--rose-deep); border-bottom-color:var(--rose); }
/* On the even rows the whole label is right-aligned, so the action row has to
   follow it or the two links drift away from their own text. */
.plate-row:nth-child(even) .label .actions{ justify-content:flex-end; }

/* ---------- Bio ---------- */
.bio-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
.portrait figure{ margin:0; }
.portrait img{
  width:100%; border-radius:2px;
  filter:drop-shadow(0 18px 32px rgba(60,54,50,.14));
}
.portrait figcaption{
  margin-top:1rem; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.portrait .sig{ margin-top:1.2rem; height:44px; width:auto; opacity:.7; }

.prose{ max-width:var(--measure); }
.prose p{ margin:0 0 1.3em; }
.prose p:last-child{ margin-bottom:0; }
.prose .lead{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.25rem,.9rem + .8vw,1.65rem);
  line-height:1.5; font-weight:300; color:var(--ink);
  margin-bottom:1.6em;
}
.prose .lead em{ font-style:italic; color:var(--rose-deep); }
.prose a{ color:var(--rose-deep); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px; }

/* ---------- Exhibitions + credentials ---------- */
.record{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(2rem,5vw,4rem);
}
.record h3{
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500;
  margin:0 0 1.3rem; padding-bottom:.8rem; border-bottom:1px solid var(--rule);
}
.record ul{ list-style:none; margin:0; padding:0; }
.record li{
  padding:.62rem 0; font-size:1rem; line-height:1.5;
  border-bottom:1px solid rgba(232,225,214,.5);
}
.record li:last-child{ border-bottom:0; }
.record li .where{ display:block; }
.record li .what{
  display:block; font-size:.85rem; color:var(--ink-faint); margin-top:.15rem;
}
.record li em{ font-style:italic; }

/* ---------- Contact ---------- */
.contact{ text-align:center; max-width:44rem; margin:0 auto; }
.contact h2, .contact h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300; font-size:clamp(1.9rem,1.1rem + 2.4vw,3.4rem);
  line-height:1.1; margin:0 0 1.1rem;
}
.contact h2 em, .contact h1 em{ font-style:italic; color:var(--rose-deep); }
.contact > p{ color:var(--ink-soft); margin:0 auto 2.6rem; max-width:44ch; }
.contact-lines{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.9rem clamp(1.5rem,5vw,3.5rem);
}
.contact-lines a{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(1.05rem,.9rem + .5vw,1.4rem);
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:.25rem; transition:border-color .4s var(--ease), color .4s var(--ease);
}
.contact-lines a:hover, .contact-lines a:focus-visible{
  color:var(--rose-deep); border-bottom-color:var(--rose);
}
.noscript-contact{
  margin-top:1.6rem; color:var(--ink-soft); font-size:1rem; line-height:2;
}
.noscript-contact strong{ font-weight:500; color:var(--ink); }
.contact-lines .kind{
  display:block; font-family:'Inter',sans-serif; font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:.4rem;
}

/* ---------- Footer ---------- */
.footer{
  padding:2.6rem var(--gutter); border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem;
  justify-content:space-between; align-items:center;
  font-size:.82rem; letter-spacing:.08em; color:var(--ink-faint);
}
.footer a{ color:var(--ink-faint); }

/* ============================================================
   LIGHTBOX — the ONE place glass genuinely helps: the backdrop
   frosts the page so the painting reads without distraction,
   and the painting itself stays perfectly sharp on top.
   Loads the 3800px file so technique can actually be inspected.
   ============================================================ */
.viewer{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3.5rem);
  background:rgba(250,246,238,.82);
  backdrop-filter:blur(26px) saturate(130%);
  -webkit-backdrop-filter:blur(26px) saturate(130%);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.viewer.is-open{ opacity:1; visibility:visible; }
.viewer figure{
  margin:0; max-height:100%; display:flex; flex-direction:column;
  align-items:center; gap:1rem;
}
.viewer img{
  max-height:82svh; max-width:100%; width:auto; object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(60,54,50,.2));
  transform:scale(.97); opacity:0;
  transition:transform .6s var(--ease), opacity .5s var(--ease);
}
.viewer.is-open img{ transform:scale(1); opacity:1; }
.viewer figcaption{
  font-size:.86rem; color:var(--ink-soft); text-align:center; line-height:1.7;
}
.viewer figcaption strong{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:500;
  font-size:1.05rem; display:block; color:var(--ink);
}
.viewer figcaption em{ font-style:italic; color:var(--rose-deep); }
/* Divided from the original's medium/size line above it by a short rule, so the
   print offer can't be misread as part of the painting's description. */
.viewer figcaption .cap-edition{
  display:block; margin-top:.6rem; padding-top:.6rem;
  border-top:1px solid var(--rule);
  font-size:.82rem; color:var(--ink-faint); letter-spacing:.02em;
}
.viewer figcaption .cap-edition b{ font-weight:500; color:var(--ink); }
.viewer-close{
  position:absolute; top:clamp(.75rem,2.5vw,1.6rem); right:clamp(.75rem,2.5vw,1.6rem);
  width:2.9rem; height:2.9rem; border-radius:50%;
  border:1px solid var(--rule); background:rgba(254,253,249,.8);
  color:var(--ink-soft); font-size:1.1rem; cursor:pointer; line-height:1;
  display:grid; place-items:center;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.viewer-close:hover{ color:var(--rose-deep); border-color:var(--rose); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px);
  transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .plate-btn img, .viewer img{ transition:none; }
}

/* ============================================================
   RESPONSIVE — the hero collapses from three columns to one,
   plates stop alternating, labels move beneath the art.
   ============================================================ */
@media (max-width:960px){
  .hero{
    grid-template-columns:1fr; min-height:auto;
    padding:5.5rem var(--gutter) 3rem; row-gap:2.4rem;
    text-align:center;
  }
  .hero-lede{ grid-column:1; justify-self:center; text-align:center; max-width:40ch; }
  .hero-art{ grid-column:1; max-width:min(78vw,26rem); margin:0 auto; }
  .hero-meta{ grid-column:1; max-width:34ch; margin:0 auto; padding-bottom:0; text-align:center; }
  .hero-meta dl{ gap:.7rem; }

  .plate-row,
  .plate-row:nth-child(even){ grid-template-columns:1fr; align-items:start; }
  .plate-row:nth-child(even) .plate-figure{ order:0; }
  .plate-row:nth-child(even) .label{ order:0; text-align:left; }
  /* The even-row right-alignment is undone just above, so the action row has to
     be undone with it — otherwise the two links sit right while the label they
     belong to reads left. */
  .plate-row:nth-child(even) .label .actions{ justify-content:flex-start; }
  .label{ padding-bottom:0; }

  .bio-grid{ grid-template-columns:1fr; }
  .portrait{ max-width:15rem; }
}
/* ------------------------------------------------------------
   PHONES (iPhone 12–16 are 390–430px wide; common Androids
   360–412px). This is a genuinely different layout, not a
   narrowed desktop:
     · the 4-item nav is dropped — on a one-screen-per-plate
       scroll it earns nothing and crowds the wordmark. The
       masthead becomes her name alone, and the sections follow
       in order as you scroll.
     · plates go nearly edge-to-edge and are capped by height so
       one painting fills one screen, which is how a phone
       actually wants to show art.
     · everything left-aligns: centred body copy is hard to read
       at this measure.
   ------------------------------------------------------------ */
@media (max-width:600px){
  :root{ --gutter:1.15rem; }

  /* ⚠ TWO-ROW MASTHEAD — her name and the text-size control on the first row,
     the four page links spread across the second.
     This replaced `.nav a{ display:none }` on 2026-10-05. Hiding the links was
     correct while this was ONE page: they were in-page anchors and the sections
     they pointed at sat directly below. The ten-page split turned those same
     four links into the site's ONLY route to prints.html and about.html — no
     page body links to either — so hiding them left both unreachable on every
     phone, and contact.html reachable only by tapping a painting and then
     "Enquire about this print". Do NOT reinstate display:none here unless the
     links exist somewhere else first. */
  /* position:static on phones, NOT fixed. Two reasons:
     (1) this masthead is 99px tall at normal text and 168px at the largest
     A/A/A step, where the links wrap to a line of their own. Pinning that much
     chrome to the top of a 390x844 screen costs 12-20% of the viewport
     permanently, and fights the rule a few declarations below that one
     painting should fill one screen.
     (2) a fixed masthead is a glass bar that slides over the paintings as you
     scroll, and backdrop-filter over artwork is exactly what the chrome-only
     glass decision rules out.
     Letting it scroll away also means no clearance value has to chase a
     height that jumps whenever the links wrap. */
  .masthead{
    position:static;
    flex-wrap:wrap; row-gap:.3rem; padding:.6rem var(--gutter);
  }
  /* .nav stops being a box of its own so the wordmark, the control and the
     links row are all laid out by .masthead directly — that is what lets the
     links take a full-width second row while the control stays on the first. */
  .nav{ display:contents; }
  .wordmark{ order:1; font-size:1.05rem; }
  .textsize{ order:2; margin-left:0; padding-left:0; border-left:0; }
  .textsize button{ padding:.4rem .5rem; }   /* larger touch targets */
  /* flex:0 0 100% is what forces the break onto the second row — grow and
     shrink are both 0, so the row cannot be squeezed back up beside the
     wordmark. The inner flex-wrap is deliberate: at the largest A/A/A setting
     on a 360px phone the four links stop fitting one line, and wrapping to two
     keeps them full size rather than shrinking type for exactly the readers
     most likely to be using that setting. */
  .nav-links{
    order:3; flex:0 0 100%;
    display:flex; flex-wrap:wrap; justify-content:space-between;
    gap:.1rem .6rem;
  }
  /* No clearance rule is needed here: the masthead above is position:static on
     phones, so it occupies real space and nothing can slide under it. */

  /* The art must be on the FIRST screen. Prose moves BELOW it (order:3) so the
     opening view is her name, a short label, and the painting — the lede is
     still there, one thumb-flick down. */
  .hero{
    min-height:0;
    /* 3.6rem here was clearance for the old fixed masthead. Now that the
       masthead is static and takes its own space, this is only the gap below
       it — and the art wants to be high on the first screen. */
    padding:1.5rem var(--gutter) 2.2rem;
    row-gap:1.2rem; text-align:left;
  }
  .hero-lede{ display:contents; }
  .hero-lede .eyebrow{ order:1; margin-bottom:.5rem; }
  .hero-lede h1{ order:2; }
  .hero-art{ order:3; }
  .hero-lede p{ order:4; }
  .hero-meta{ order:5; }
  /* justify-self MUST return to stretch here. The tablet block centres this
     item, and a grid item that isn't stretched sizes to max-content — with no
     max-width to cap it the headline and paragraph run straight off the
     viewport. Stretch pins it to the track width instead. */
  .hero-lede{ text-align:left; max-width:none; justify-self:stretch; }
  .hero h1{ font-size:clamp(2.35rem,1rem + 9vw,3.1rem); margin-bottom:1.1rem; }
  .hero-lede p{ font-size:1rem; }
  .hero-art{ max-width:100%; }
  .hero-art img.plate{ max-height:62svh; width:auto; margin:0 auto; }
  .hero-meta{ text-align:left; max-width:none; margin-top:.5rem; }
  .hero-meta dl{
    /* Two columns of short data reads as a caption block rather than a
       lonely stack, and keeps the fold within reach. */
    grid-template-columns:1fr 1fr; gap:1.1rem .9rem;
  }
  .hero-meta dl > dt:first-of-type, .hero-meta dl > dd:first-of-type{ grid-column:1/-1; }
  .scroll-cue{ display:none; }

  .section{ padding:3.5rem var(--gutter); }
  .section-head{ margin-bottom:2rem; }
  .section-head .count{ display:none; }
  /* ⚠ PRE-EXISTING BUG, not introduced by the two-row masthead — the Sep 14
     build scrolls sideways here too. The heading is white-space:nowrap so the
     decorative rule can sit on its baseline; at the largest A/A/A step on a
     360px phone the heading outgrows the viewport and pushes .rule 16px past
     the edge, which scrolls the whole page horizontally. Phones get a heading
     that may wrap, and lose the rule — the count beside it is already hidden
     here, so a bare heading is the established phone treatment. */
  .section-head .rule{ display:none; }
  .section-head h2, .section-head h1{ white-space:normal; }

  .plates{ gap:3.5rem; }
  /* Bleed the art past the gutter: on a phone the painting should own the
     full screen width, while text keeps its margins. */
  .plate-figure{ margin:0 calc(var(--gutter) * -1); }
  .plate-btn img{ max-height:76svh; }
  .label h3{ font-size:1.18rem; }
  .label .spec{ font-size:.84rem; }
  .prints-note{ margin:-.75rem 0 2rem; font-size:.88rem; }
  /* The price is the one thing a phone reader is scrolling for, so it grows
     here rather than shrinking with everything else. */
  .label .price{ font-size:1.5rem; }
  /* No hover on touch — the lift just fires on tap and looks like a glitch. */
  .plate-btn:hover img{ transform:none; }
  .label .view{ font-size:.75rem; }

  .prose .lead{ font-size:1.18rem; }
  .portrait{ max-width:11rem; }
  .record{ gap:2.2rem; }

  .contact-lines{ flex-direction:column; gap:1.6rem; }
  .footer{ font-size:.78rem; }

  /* Fill the screen in the viewer and give the close button a proper
     44px touch target. */
  .viewer{ padding:.75rem; }
  .viewer img{ max-height:76svh; }
  .viewer-close{ width:2.75rem; height:2.75rem; }
}

/* Very small / older phones (iPhone SE at 375, some Androids at 360). */
@media (max-width:380px){
  .hero h1{ font-size:2.1rem; }
  .hero-meta dl{ grid-template-columns:1fr; }
}

/* Landscape phone: svh collapses to almost nothing, so stop capping by
   height or the plates shrink to postage stamps. */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:0; }
  .hero-art img.plate, .plate-btn img{ max-height:none; }
  .viewer img{ max-height:70svh; }
}

/* ---------- Print ---------- */
@media print{
  .masthead,.scroll-cue,.viewer,.footer{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1; transform:none; }
  .plate-row{ page-break-inside:avoid; }
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   Added when the single page was split into ten. Nothing here
   changes an existing rule -- these are the few things a
   multi-page site needs that a one-pager did not. Palette
   tokens and type are the ones already defined above.
   ============================================================ */

/* NOTE ON PROMOTED HEADINGS
   Where a section <h2> became a page <h1>, no new rule is written here. The
   existing selectors are widened instead (see broaden_heading_selectors in
   build_pages_v2.py), so an <h1> is styled by the very same declarations that
   styled the <h2> it replaced. Copying the values into a second rule would
   let the two drift apart the first time anyone edits one of them.

   The one thing that does need saying: .section-head h2 sets
   white-space:nowrap, which is right for "Recent plates" but not for
   "Garlic Harvest and Eastern Tiger Swallowtail". Long plate titles opt out. */
.section-head h1.wrap{ white-space:normal; }

/* Marks the page you are on. The nav underline already animates in on hover,
   so the current page simply shows it permanently -- no new visual language. */
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{ right:0; }

/* Back link at the foot of a single-painting page. Borrows the uppercase
   letter-spaced treatment of the nav rather than introducing a third link
   style. */
.backlink{
  display:inline-block; margin-top:clamp(2.5rem,6vh,4rem);
  font-size:.82rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
  border-bottom:1px solid var(--rule); padding-bottom:.2rem;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.backlink:hover{ color:var(--rose-deep); border-bottom-color:var(--rose); }

/* A plate title that links to its own page. Inherits the h3/h1 face; only the
   underline on hover is added, so it does not read as a generic web link. */
.label h3 a, .section-head h1 a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease);
}
.label h3 a:hover{ border-bottom-color:var(--rose); }

/* Single-painting pages hold one .plate-row, so the alternating left/right
   rhythm of the gallery has nothing to alternate against. Force the gallery's
   odd-row orientation (art large on the left, label right) regardless of
   position. */
.plates--solo .plate-row:nth-child(even){
  grid-template-columns:minmax(0,1fr) minmax(0,17rem);
}
.plates--solo .plate-row:nth-child(even) .plate-figure{ order:1; }
.plates--solo .plate-row:nth-child(even) .label{ order:2; text-align:left; }
.plates--solo .plate-row:nth-child(even) .label .actions{ justify-content:flex-start; }

/* ---------- Home gallery ----------
   Six thumbnails, each one click from the painting's own page.

   Deliberately NOT the full .plate-row treatment. Showing all six at scale
   here AND at scale on the prints page AND at scale on their own pages was
   what made the site read as the same page three times. Each work now appears
   large in exactly one place: its own page. This is the index to them.

   The drop-shadow and hover lift are copied from .plate-btn img so a
   thumbnail behaves like the plates always have -- that much is the design,
   not the layout. */
.gallery{
  max-width:1180px; margin:0 auto;
  display:grid; gap:clamp(2.4rem,5vw,4.5rem) clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));
  align-items:end;              /* bottoms line up: a row of mounted sheets */
}
.gallery a{ display:block; text-decoration:none; color:inherit; }
.gallery figure{ margin:0; }
.gallery img{
  width:100%; height:auto;
  filter:drop-shadow(0 20px 36px rgba(60,54,50,.11))
         drop-shadow(0 2px 6px rgba(60,54,50,.05));
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.gallery a:hover img, .gallery a:focus-visible img{
  transform:translateY(-5px) scale(1.008);
  filter:drop-shadow(0 34px 54px rgba(60,54,50,.16))
         drop-shadow(0 3px 8px rgba(60,54,50,.07));
}
.gallery figcaption{ margin-top:1.15rem; text-align:center; }
/* .g-title and .g-binomial take their type from the .label rules via
   SELECTOR_ALIASES; only the spacing differs here. */
.gallery .g-binomial{ margin:.15rem 0 0; }
.gallery .g-more{
  display:block; margin-top:.5rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
  transition:color .35s var(--ease);
}
.gallery a:hover .g-more, .gallery a:focus-visible .g-more{ color:var(--rose-deep); }

/* ⚠ The phone rules for .gallery have to live HERE, not in the 600px block of
   site/index.html, because this whole section is appended AFTER that block in
   the built stylesheet — anything written up there for a class defined down
   here would be overridden by these declarations. That ordering is why the
   gallery had no phone rules at all until 2026-10-05: the home page stopped
   using .plate-row/.plates/.label at the ten-page split, so every phone rule
   written for the gallery of six quietly stopped matching anything. */
@media (max-width:600px){
  .gallery{
    /* An explicit single column, NOT auto-fill. minmax(14rem,...) is a rem
       floor, and the A/A/A control scales the root font — at the largest step
       14rem is wider than the content box on a 360px phone, which makes the
       track overflow and the whole page scroll sideways. The readers using
       that control are the ones who would hit it. */
    grid-template-columns:1fr;
    gap:3rem;
  }
  /* Cap by height, matching .hero-art img.plate and .plate-btn img above, so a
     thumbnail cannot grow to the full-plate presentation its own page gives
     it — six uncapped portrait scans at full width made the index as long as
     the six pages it indexes. Kept deliberately shorter than the 76svh the
     plate pages use, so tapping through still reveals something. */
  .gallery img{ width:auto; max-height:46svh; margin:0 auto; }
  /* No hover on touch — the lift fires on tap and reads as a glitch. Same
     reasoning as .plate-btn:hover img in the phone block. */
  .gallery a:hover img, .gallery a:focus-visible img{ transform:none; }
  .gallery figcaption{ margin-top:.9rem; }
}

/* ---------- Print price list ----------
   A buyer comparing six prints wants them beside each other as data. Six
   full-height paintings is a gallery, not a price list -- and it was an exact
   repeat of the home page. Small thumbnail, then only the facts that DIFFER
   between plates: sheet, edition, price. */
.pricelist{
  max-width:56rem; margin:0 auto;
  border-top:1px solid var(--rule);
}
.pricelist-row{
  display:grid;
  grid-template-columns:4.5rem minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.2rem);
  align-items:center;
  padding:1.5rem .2rem;
  border-bottom:1px solid var(--rule);
}
.pricelist-row > a.pl-thumb{ display:block; line-height:0; }
.pricelist-row img{
  width:4.5rem; height:auto;
  filter:drop-shadow(0 4px 10px rgba(60,54,50,.10));
  transition:transform .5s var(--ease);
}
.pricelist-row a.pl-thumb:hover img{ transform:translateY(-2px); }
.pricelist .pl-title{ margin:0; }
.pricelist .pl-title a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease);
}
.pricelist .pl-title a:hover{ border-bottom-color:var(--rose); }
.pricelist .binomial{ margin:.1rem 0 .35rem; }
.pricelist .spec{ margin:0; }
.pricelist .pl-buy{ text-align:right; }
.pricelist .price{ margin:0; }
.pricelist .edition-run{ margin:.15rem 0 .5rem; }
.pricelist .enquire{ font-size:.8rem; }

@media (max-width:640px){
  /* Thumb keeps its column; name and price stack beneath it rather than
     squeezing three columns into a phone. */
  .pricelist-row{
    grid-template-columns:3.6rem minmax(0,1fr);
    row-gap:.6rem;
  }
  .pricelist-row img{ width:3.6rem; }
  .pricelist .pl-buy{ grid-column:2; text-align:left; }
}