/* ============================================================
   Molinsky Paintings, shared stylesheet
   Quiet page, loud paintings. Nothing competes with the work.
   No italics anywhere except a quotation. Nothing is ever cropped.
   ============================================================ */

:root{
  /* ---------- type ----------
     Settled with Betsie, September 2026. Three voices:
       --head   the site name, page titles and section headings. Poppins,
                her choice from the preview strip: it is the sans her
                previous website used, and the face she had been calling
                Avenir.
       --body   everything she wrote. Libre Baskerville, the "sturdier,
                easier to read" body she chose from the earlier strip.
       --sans   the small things: navigation, buttons, captions, labels.
                Left exactly as it was, at her request.
     These defaults must stay in step with DEFAULT_TYPEFACE in shell.py. */
  --head:Poppins,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --body-size:18px;
  --body-lh:1.72;
  --sans:system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  /* The site name is the largest thing on every page, and always on one
     line. Poppins is wide: "Molinsky Paintings" measures about 9.7 times its
     font size, so a fixed 34px floor broke it onto two lines on a 375px
     phone. Scaling with the window keeps it whole down to a 320px phone and
     leaves it at 50px on a desktop. */
  --brand-max:50px;
  --brand-size:clamp(26px,8.4vw,var(--brand-max));
  --brand-weight:600;
  --brand-track:0.01em;

  /* ---------- type sizes, by role ----------
     One setting per role, used on every page, so a role can never end up one
     size on one page and another size on the next. The tuning tool (?tune)
     moves these, and its "Copy changes" names them exactly. Sizes that sit
     beside a role, a quotation beside the body text for instance, are written
     as that role plus or minus a few pixels, so they move with it. */
  --title-size:38px;      /* page titles, "Five Figures" */
  --hero-title:36px;      /* the front page's opening line */
  --h2-size:25px;         /* section headings */
  --head-weight:500;      /* every title and heading except the site name */
  --nav-size:20px;      /* the menu */
  --subnav-size:18px;     /* the row under the menu; 16.5 on a phone */
  --card-title:16.5px;    /* a painting's name under its picture */
  --label-size:16px;      /* small uppercase labels, "Structure" */
  --link-size:13.5px;       /* "See the paintings", the gallery's group buttons */
  --small-size:12px;      /* captions under paintings, the footer */

  /* ---------- space ---------- */
  --section-gap:64px;     /* above a section heading */
  --pic-gap:44px;         /* above and below a picture */

  /* A warm wall rather than paper. Her work is high chroma and mid value
     and visibly floats on near white. */
  --paper:#EFEBE3;
  --paper-2:#E7E2D9;
  --ink:#1F1D1A;
  --ink-soft:#1F1D1A;
  /* Captions, sizes, the footer. It was #8A857C, which measured 3.1 to 1
     on the wall and 2.8 to 1 on the darker band, under the 4.5 to 1 an
     older reader needs, and Betsie had called it too faded more than once.
     The same warm grey, just dark enough to pass on both. */
  --ink-faint:#68635A;
  --rule:rgba(31,29,26,0.15);
  --rule-mid:rgba(31,29,26,0.28);
  /* the lines above and below the sub-menu: Betsie asked for them to be
     stronger, so the menus read as a frame around the row of colours */
  --rule-nav:rgba(31,29,26,0.45);

  /* ---------- colour in the words ----------
     Asked for by Betsie, October 2026: she wants to SEE colour in the text,
     the menus first, and blue for the bold words. Every colour here comes
     out of her own paintings, deepened until it reads as text. The words she
     wrote stay in --ink, and so do the titles and headings, so that the blue
     still means something when it appears. The one exception is the front
     page's three cards, whose headings take their card's paint (Trace asked
     for colour there, October 2026; see .ways.three).

       --navy     the dark ultramarine she outlines and shadows with (the
                  pitcher in Daisies in a Blue Pitcher, the night in Night
                  Sky). The menu, bold words, links, labels, the footer menu.
       --cadmium  the red-orange of Seated Figure with Striped Screen. Marks
                  the page you are on in the menu, and nothing else.

     The row under the menu takes one paint per item (never the cadmium), set in shell.py by
     name, so an item keeps its colour if pages are added or reordered:
     Inspired by landscape is always the green. Each is a deep version of a
     paint she uses at full strength:
       cobalt     Blue Fluted Vase           viridian   Woman with Crossed Arms
       violet     Pharaoh, Lady in Red       ochre      Fresh Flowers
       turquoise  the striped screen         rose       Woman in Pink

     Against --paper and --paper-2 every one of these measures at least 6
     to 1, and the navy 10 to 1 (4.5 is the floor). Check both again if any
     is changed. */
  --navy:#1A3FB8;
  --cadmium:#A11F02;
  --cobalt:#1A3FB8;
  --viridian:#025E42;
  --violet:#5E409C;
  --ochre:#754900;
  --turquoise:#065B66;
  --rose:#A60242;
  /* Colours the tuning tool can set on their own. Each starts as the colour
     it has always been, so the headings and the site name follow the text
     colour and the menu follows the navy, until one is given its own. */
  --head-color:var(--ink);
  --brand-color:var(--ink);
  --menu-color:var(--navy);

  /* ---------- width ----------
     The page is 1100px wide on a desktop, and it uses that width by putting
     pictures BESIDE text, not by making lines of text longer. Lines longer
     than about 75 characters are measurably harder to read, and harder
     still for an older reader, so running text stays near 720px. A picture
     with its text beside it, a group of three, or a gallery, spans the full
     1100px. On a phone everything stacks to the width of the screen. */
  --wide:1100px;          /* the usable width inside .wrap */
  --measure:calc(var(--wide) + 80px);   /* .wrap, including its padding */
  --pad:40px;
  --text:720px;           /* a column of running text */

  /* ---------- pictures ----------
     Settled numbers, arrived at by showing Betsie sizes and listening, so
     change them only when she asks.

       880px on its own      she called too large
       600px on its own      she called too large (Painting Can Be Fun)
       400px on its own      she called too small
       431px in a pair       she approved, Woven Basket No. 2 and No. 3
       281px in a three-up   she called too small
       343px gallery card    her own reference for "the right size"

     What she has been reacting to is how much of the SCREEN a picture
     fills, not its width. So every picture fits a box, wide and tall:
     a tall canvas stops at the height limit and a wide panorama at the
     width limit, and neither ends up filling the screen. Nothing is set
     per page: she judges a picture by how big it looks.

       beside text      460 wide, 500 tall   (Betsie, 30 September: was 480)
       on its own line  620 wide, 620 tall
       opening a page   520 wide, 520 tall   (Betsie, October: a little
                        smaller than the ones further down)

     The on-its-own box is square on purpose. A wide, short box shrank the
     tall pictures that most need their size, the Teaching directions map
     and the Time and Patience collage, which both carry text you have to be
     able to read; the map fell below the 400px she had already called too
     small. A square box treats tall and wide pictures evenly. */
  --side:460px;
  --side-hmax:calc(var(--side) * 13 / 12);   /* about 500 when --side is 460 */
  /* a reference photo marked "small", above or beside its text: Betsie
     asked for the flowers photo on Evolution of a Painting to be smaller so
     it does not pull the eye from the paintings below it, and above the
     words rather than beside them */
  --side-sm:300px;
  --fig-max:620px;
  --fig-hmax:var(--fig-max);
  --fig-lead:520px;       /* a picture on its own line that opens a page */
  --pair:431px;           /* each picture in a pair */
  --trio:355px;           /* each picture in a three-up, 1100 wide in all */
  --hero-max:460px;       /* the featured painting on the front page */
  --gal-cols:3;           /* paintings per row in a gallery, on a desktop */
}

*{box-sizing:border-box;margin:0;padding:0;}
/* The hidden attribute is only display:none at user-agent strength, so any
   later display rule silently beats it. Several things on this site are
   display:flex and start out hidden. */
[hidden]{display:none !important;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--body-size);line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
/* The line spacing of her writing. Set here rather than on body, so that
   changing it does not also open up the menu, the labels and the buttons. */
.prose,.hero p,.contact .note,.piece-meta dd{line-height:var(--body-lh);}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* Small uppercase labels ("Structure" over the front page's quotation).
   Betsie found them too faded to read in the faint grey they were set in.
   They are navy, as signposts rather than reading. */
.label{
  font-family:var(--sans);font-size:var(--label-size);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--navy);
}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--pad);}
/* Words for a screen reader only: on the page, so they are read out and can
   be changed like any other words, but out of sight and taking no room. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Every title and heading on the site is set in the heading face. */
.brand,.page-open h1,.hero h1,.prose h2,.prose h3,.gal-head h2,.cat-head,
.way h3,.work h3,.piece-meta h1,.contact .studio{font-family:var(--head);}
.page-open h1,.hero h1,.prose h2,.prose h3,.gal-head h2,.cat-head,
.way h3,.work h3,.piece-meta h1,.contact .studio{color:var(--head-color);}

/* ---------- masthead ---------- */
header{border-bottom:1px solid var(--rule-nav);}
.head{padding:38px 0 0;text-align:center;}
.brand{
  font-size:var(--brand-size);font-weight:var(--brand-weight);
  letter-spacing:var(--brand-track);line-height:1.1;
  display:inline-block;color:var(--brand-color);
}
nav.main{display:flex;justify-content:center;flex-wrap:wrap;gap:0 30px;margin-top:26px;}
/* The menu is navy. The page you are on turns cadmium with a rule under
   it. The one under the pointer is underlined beneath the word instead, so
   the two never look alike, and neither depends on colour alone. */
nav.main a{
  font-family:var(--sans);font-size:var(--nav-size);letter-spacing:0.085em;
  text-transform:uppercase;color:var(--menu-color);
  padding:15px 0 16px;border-bottom:2px solid transparent;
  text-decoration:underline transparent 1px;text-underline-offset:6px;
}
nav.main a:hover,nav.main a:focus-visible{text-decoration-color:currentColor;}
nav.main a.here{color:var(--cadmium);border-bottom-color:var(--cadmium);}
nav.main a.here:hover{text-decoration-color:transparent;}

/* ---------- section sub-nav ----------
   The items sit in a centred line rather than in flex boxes, so that
   text-wrap:balance can share them out when the row has to wrap: the seven
   Teaching items go three over four on a tablet, not six and one left
   alone. font-size:0 takes away the spaces between them, which would
   otherwise be sized by the body text and move with its slider. The gap is
   then exactly the item margins, 24px (15px on a tablet or phone, as
   before), and the padding gives back the margin at the two ends. The 3px
   above and below each item keeps wrapped rows apart, so a keyboard focus
   ring never covers the bar under the page above it. */
.subnav{
  text-align:center;text-wrap:balance;font-size:0;
  border-top:1px solid var(--rule-nav);
  padding:11px calc(var(--pad) - 12px);
}
/* "All paintings", "Inspired by landscape", and the About and Teaching
   rows: each item in its own paint (see the colour notes at the top). The
   page you are on has a thick bar in its paint; the one under the pointer a
   thin underline. */
.subnav a{
  display:inline-block;margin:3px 12px;white-space:nowrap;
  font-family:var(--sans);font-size:var(--subnav-size);letter-spacing:0.015em;
  color:var(--paint,var(--navy));padding:5px 0 3px;
  border-bottom:3px solid transparent;
  text-decoration:underline transparent 1px;text-underline-offset:5px;
}
.subnav a:hover,.subnav a:focus-visible{text-decoration-color:currentColor;}
.subnav a.here{border-bottom-color:currentColor;}
.subnav a.here:hover{text-decoration-color:transparent;}
.subnav .p-cobalt{--paint:var(--cobalt);}
.subnav .p-viridian{--paint:var(--viridian);}
.subnav .p-violet{--paint:var(--violet);}
.subnav .p-ochre{--paint:var(--ochre);}
.subnav .p-turquoise{--paint:var(--turquoise);}
.subnav .p-rose{--paint:var(--rose);}
/* Windows High Contrast repaints every border and underline, transparent
   ones included, which would put the current-page bar under every item.
   Keep the bar for the current page and the underline for hover. */
@media (forced-colors: active){
  nav.main a,.subnav a{border-bottom-color:Canvas;text-decoration-color:Canvas;}
  nav.main a:hover,nav.main a:focus-visible,
  .subnav a:hover,.subnav a:focus-visible{text-decoration-color:LinkText;}
  nav.main a.here,.subnav a.here{border-bottom-color:LinkText;}
  nav.main a.here:hover,.subnav a.here:hover{text-decoration-color:Canvas;}
}
/* A menu item she has started on a new line (in the tuning tool): the build
   puts this empty mark just before it. In the menu and the footer, which are
   flex rows, it is a line of its own with no height; in the sub-menu, a
   block in its line of text. Either way the item after it starts a line. */
.brk{display:block;flex-basis:100%;height:0;}

/* ---------- page opening ----------
   The page title is the heading, centred, with nothing stacked under it that
   the page is about to say again. */
.page-open{padding:58px 0 34px;text-align:center;}
.page-open h1{
  font-size:clamp(min(28px,var(--title-size)),3vw,var(--title-size));
  font-weight:var(--head-weight);line-height:1.18;
  letter-spacing:0.005em;
}
.page-open p.intro,
.page-open p.standfirst{
  color:var(--ink-soft);margin:18px auto 0;max-width:58ch;
  font-size:calc(var(--body-size) + 3px);line-height:1.55;text-wrap:pretty;
}

/* ---------- homepage hero ----------
   The hero sits inside .wrap. It used to bleed to the right edge of the
   window, which is where both cropping bugs came from: a crop-to-fill rule once,
   and 50vw maths that overshot by the scrollbar width and clipped 279px off
   the painting. */
.hero-outer{border-bottom:1px solid var(--rule);}
.hero{display:grid;grid-template-columns:1fr auto;gap:0 60px;align-items:center;}
.hero-text{padding:60px 0;}
.hero-text .label{display:block;margin-bottom:20px;}
.hero h1{
  font-size:clamp(min(27px,var(--hero-title)),2.9vw,var(--hero-title));
  font-weight:var(--head-weight);
  line-height:1.2;margin-bottom:22px;text-wrap:balance;
}
.hero p{color:var(--ink-soft);margin-bottom:15px;max-width:42ch;}
.actions{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px;}
.actions a{
  font-family:var(--sans);font-size:var(--link-size);letter-spacing:0.13em;
  text-transform:uppercase;color:var(--navy);
  border-bottom:1px solid var(--navy);padding-bottom:5px;
}
.actions a:hover,.actions a:focus-visible{border-bottom-width:2px;padding-bottom:4px;}
/* Never cropped: max-width and max-height with auto on both axes scales the
   painting down and widens the gutter instead of clipping it. */
.hero-art{display:flex;justify-content:flex-end;align-items:center;}
.hero-art img{
  width:auto;height:auto;
  max-width:min(var(--hero-max),100%);
  max-height:min(52vh,var(--hero-max));
}

.gal-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:64px 0 42px;
}
.gal-head h2{font-size:calc(var(--h2-size) + 3px);font-weight:var(--head-weight);}
/* "See all 95". Too faded for her in the mid grey, so it is set in the full
   text colour, like "See the paintings" and "Read my story" above it. */
.gal-head a{
  font-family:var(--sans);font-size:calc(var(--link-size) + 1px);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--navy);
  border-bottom:1px solid var(--navy);padding-bottom:4px;
}
.gal-head a:hover,.gal-head a:focus-visible{border-bottom-width:2px;padding-bottom:3px;}

.band{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.quote{max-width:700px;margin:0 auto;text-align:center;padding:82px 0;}
.quote .label{display:block;margin-bottom:20px;}
.quote blockquote{font-size:clamp(calc(var(--body-size) + 3px),2.2vw,calc(var(--body-size) + 9px));line-height:1.5;font-style:italic;}
.quote cite{
  display:block;margin-top:24px;font-style:normal;font-family:var(--sans);
  font-size:calc(var(--label-size) - 2px);letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- long-form pages ----------
   The article is the full 1100px. Each block inside it chooses its own
   width: running text keeps to --text and is centred, pictures and rows use
   what they need. No block breaks out of its container with transforms or
   viewport maths, which is the pattern that cropped the hero twice. */
.prose{max-width:var(--wide);margin:0 auto;padding-bottom:96px;}
.prose > *{max-width:var(--text);margin-left:auto;margin-right:auto;}
.prose > .figs,.prose > .row,.prose > .fig{max-width:none;}
.prose p{margin-bottom:24px;}
/* Body copy is ONE size throughout. A page only gets a larger opening when
   the content genuinely has a standfirst, and that lives above the article. */
.prose h2{
  font-size:var(--h2-size);font-weight:var(--head-weight);line-height:1.3;
  margin-block:var(--section-gap) 4px;letter-spacing:0.005em;
}
/* a hairline under a heading, set short, so sections read as sections */
.prose h2::after{
  content:'';display:block;width:44px;height:1px;
  background:var(--rule-mid);margin:16px 0 22px;
}
.prose h3{font-size:calc(var(--h2-size) - 5px);font-weight:var(--head-weight);margin-block:44px 12px;}
.prose ul{margin-block:0 24px;padding-left:0;list-style:none;}
.prose li{position:relative;padding-left:24px;margin-bottom:10px;}
.prose li::before{
  content:'';position:absolute;left:5px;top:0.72em;
  width:5px;height:5px;border-radius:50%;background:var(--ink-faint);
}
/* Links are navy with a navy line under them. Bold words are navy too, as
   Betsie asked, but never underlined, so the two are not confused. */
.prose a{color:var(--navy);border-bottom:1px solid var(--navy);overflow-wrap:anywhere;}
.prose a:hover{border-bottom-width:2px;}
.prose strong{font-weight:700;color:var(--navy);}
/* Some words in a colour of their own, one of her paints ({{navy|...}} in
   their words; tools/words.py, PAINTS). Wherever words can have one. */
.w-navy{color:var(--navy);}
.w-cobalt{color:var(--cobalt);}
.w-viridian{color:var(--viridian);}
.w-violet{color:var(--violet);}
.w-ochre{color:var(--ochre);}
.w-turquoise{color:var(--turquoise);}
.w-rose{color:var(--rose);}
/* A page whose sections are each a painting of their own ("sections:
   divided" in its front matter, Evolution of a Painting): a clear line
   across the column, with room either side, above every section after the
   first, so it is plain where one painting ends and the next begins. */
.prose.divided h2 ~ h2{
  margin-top:calc(var(--section-gap) + 8px);padding-top:calc(var(--section-gap) - 8px);
  border-top:1px solid var(--rule-nav);
}

/* quotations, the one place italics are allowed */
.prose blockquote{
  border-left:2px solid var(--ink);padding-left:26px;
  margin-block:36px;font-size:calc(var(--body-size) + 2px);line-height:1.55;font-style:italic;
}
.prose blockquote p{margin:0;}
/* a paragraph that is nothing but a quotation: no rule, larger and centred,
   so it interrupts the column rather than decorating it */
.prose blockquote.pull{
  border:0;padding:0;text-align:center;
  margin-block:52px;font-size:clamp(calc(var(--body-size) + 3px),2.2vw,calc(var(--body-size) + 8px));line-height:1.5;
}
.prose blockquote.pull::before,
.prose blockquote.pull::after{
  content:'';display:block;width:44px;height:1px;background:var(--rule-mid);
}
.prose blockquote.pull::before{margin:0 auto 26px;}
.prose blockquote.pull::after{margin:26px auto 0;}

/* ---------- pictures in long-form pages ----------
   Never cropped. object-fit:contain draws the whole picture inside its box,
   so a tall canvas held to a maximum height is shown whole, only smaller.
   (The crop-to-fill value would cut it, and is never used on this site.) No
   background on these boxes: it would show as bars beside a tall picture. */

/* A picture on its own line, above the text it introduces. */
.prose > .fig{width:min(var(--fig-max),100%);margin-block:var(--pic-gap);}
.prose .fig img{
  width:100%;height:auto;max-height:var(--fig-hmax);
  object-fit:contain;object-position:center top;
}
/* marked "small": a reference photo above its text, at the smaller size,
   so the paintings after it lead (the Stargazer lilies on Evolution) */
.prose > .fig-small{width:min(var(--side-sm),100%);}
.prose .fig-small img{max-height:calc(var(--side-sm) * 13 / 12);}
/* The picture that opens a page on its own line (Five Figures, Time and
   Patience, Teaching) is a little smaller than the ones further down, as
   Betsie asked, so a page does not open on a wall of picture. The Teaching
   map and the Time and Patience collage, which carry text to read, are
   further down and keep the full box. */
.prose > .fig:first-child:not(.fig-small):not(.sized){width:min(var(--fig-lead),100%);}
.prose > .fig:first-child:not(.fig-small):not(.sized) img{max-height:var(--fig-lead);}
/* A picture given a size of its own in the tuning tool ("380px" beside
   "left" in its line of the page): a square box that wide on its own line,
   and beside text a column that wide with a box a little taller, as the
   other pictures beside text have. Never cropped, never wider than the
   screen; how it stacks on a phone is with the narrow-screen rules below. */
.prose > .fig.sized{width:min(var(--pw),100%);}
.prose .fig.sized img{max-height:var(--pw);}

/* A run of pictures. A PAIR is 880px, which puts each at 431px, the size she
   approved under Woven Basket No. 2 and No. 3. A THREE-UP uses the full page
   so each lands near 354px, her gallery card. Four sit two by two. */
.prose > .figs{
  display:grid;gap:18px;margin-block:var(--pic-gap);
  width:min(calc(var(--pair) * 2 + 18px),100%);
}
.prose > .figs-3{width:min(calc(var(--trio) * 3 + 36px),100%);}
.prose .figs img{width:100%;height:auto;background:var(--paper-2);}
.prose .figs-2{grid-template-columns:repeat(2,1fr);}
.prose .figs-3{grid-template-columns:repeat(3,1fr);}

/* A picture BESIDE its text, on the left or the right. This is how a page
   uses the width of a desktop screen without long lines of text. The picture
   comes first in the page, so on a phone it stacks above its text, which is
   Betsie's other rule: the picture, then the heading, then the words. */
.prose > .row{
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);
  column-gap:56px;align-items:start;margin-block:calc(var(--pic-gap) + 12px);width:100%;
}
.prose > .row-right{grid-template-columns:minmax(0,1fr) var(--side);}
.prose > .row-left.row-small{grid-template-columns:var(--side-sm) minmax(0,1fr);}
.prose > .row-right.row-small{grid-template-columns:minmax(0,1fr) var(--side-sm);}
.row-small .row-img img{max-height:calc(var(--side-sm) * 13 / 12);}
.prose > .row-left.sized{grid-template-columns:var(--pw) minmax(0,1fr);}
.prose > .row-right.sized{grid-template-columns:minmax(0,1fr) var(--pw);}
.row.sized .row-img img{max-height:calc(var(--pw) * 13 / 12);}
.row-right .row-img{grid-column:2;grid-row:1;}
.row-right .row-text{grid-column:1;grid-row:1;}
.row-img,.row-text{min-width:0;}
.row-img{margin:0;}
.row-img img{
  width:100%;height:auto;max-height:var(--side-hmax);object-fit:contain;
}
/* a picture narrower than its column hugs the text, so the gap between
   picture and words is the same on every row */
.row-left .row-img img{object-position:right top;}
.row-right .row-img img{object-position:left top;}
.row-text > :first-child{margin-top:0;}
.row-text h2{margin-top:0;}
.row-text > :last-child{margin-bottom:0;}

/* ---------- contact ---------- */
.contact{max-width:var(--text);margin:0 auto;padding-bottom:96px;}
/* With the painting beside it: the details keep their width on the left and
   the painting sits to their right, at no more than its own size. */
.contact.has-art{
  max-width:none;display:grid;align-items:start;justify-content:center;
  grid-template-columns:minmax(0,560px) minmax(0,var(--side-sm));column-gap:64px;
}
.contact-art{margin:6px 0 0;}
/* never larger than the picture itself, whatever --side-sm is tuned to */
.contact-art img{width:auto;max-width:100%;height:auto;}
.contact-art figcaption{
  margin-top:12px;font-family:var(--sans);font-size:var(--small-size);
  letter-spacing:0.04em;color:var(--ink-soft);
}
.contact .studio{font-size:calc(var(--h2-size) - 1px);font-weight:var(--head-weight);margin-bottom:26px;}
.contact-rows{border-top:1px solid var(--rule);}
.contact-rows .row{
  display:flex;gap:20px;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--rule);padding:16px 0;
}
.contact-rows dt{
  font-family:var(--sans);font-size:calc(var(--label-size) - 2px);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--navy);flex:none;
}
.contact-rows dd{text-align:right;font-size:var(--body-size);line-height:1.45;min-width:0;overflow-wrap:anywhere;}
.contact-rows a{color:var(--navy);border-bottom:1px solid var(--navy);}
.contact-rows a:hover{border-bottom-width:2px;}
.contact .note{
  margin-top:26px;font-size:var(--body-size);color:var(--ink-soft);
  border-left:2px solid var(--ink);padding-left:18px;
}

/* ---------- section landing cards ---------- */
.ways{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;padding:8px 0 92px;}
.ways.three{grid-template-columns:repeat(3,1fr);}
.way{border-top:1px solid var(--rule-mid);padding:20px 0 24px;display:block;}
.way h3{font-size:calc(var(--h2-size) - 5px);font-weight:var(--head-weight);}
.way p{font-size:var(--body-size);color:var(--ink-soft);margin-top:8px;line-height:1.55;}
.way:hover h3{text-decoration:underline;text-underline-offset:4px;}
/* The front page's three cards each take one of her paints, as the
   sub-menus do (Trace asked for colour here, October 2026): the heading,
   and a short bar of the paint over it in place of a hairline. A hairline
   over each card ran just under the band's own rule above, one line after
   another; the bars are short, so the band's edge stays the only full line,
   and the cards have room below it. The paint follows the card's way on
   where it can: cobalt as All paintings, ochre as Master Teachers. */
.ways.three{padding-top:60px;}
.ways.three .way{border-top:0;padding-top:0;}
.ways.three .way::before{
  content:'';display:block;width:44px;margin-bottom:18px;
  border-top:3px solid var(--paint,var(--navy));
}
.ways.three .way h3{color:var(--paint,var(--head-color));}
.ways .p-cobalt{--paint:var(--cobalt);}
.ways .p-ochre{--paint:var(--ochre);}
.ways .p-rose{--paint:var(--rose);}

/* ---------- gallery ---------- */
.gallery{
  display:grid;grid-template-columns:repeat(var(--gal-cols),1fr);
  gap:56px 36px;align-items:start;padding-bottom:96px;
}
.work img{width:100%;height:auto;background:var(--paper-2);}
.work h3{font-size:var(--card-title);font-weight:var(--head-weight);margin-top:14px;line-height:1.35;}
.work:hover h3,.work:focus-visible h3{text-decoration:underline;text-underline-offset:4px;}
.work .det{
  font-family:var(--sans);font-size:var(--small-size);color:var(--ink-faint);
  margin-top:5px;line-height:1.5;
}
.avail{
  display:inline-block;margin-left:6px;padding:2px 7px;
  border:1px solid var(--rule-mid);border-radius:2px;
  font-size:calc(var(--small-size) - 2px);letter-spacing:0.11em;text-transform:uppercase;color:var(--ink-soft);
}
.work[hidden]{display:none;}

/* The Original Paintings page, organised into Betsie's groups. */
.cat{margin-bottom:76px;}
.cat-head{
  font-size:calc(var(--h2-size) - 1px);font-weight:var(--head-weight);line-height:1.2;
  display:flex;align-items:baseline;gap:12px;
  padding-bottom:14px;margin-bottom:30px;border-bottom:1px solid var(--rule);
}
.cat-n{font-family:var(--sans);font-size:calc(var(--small-size) + 1px);font-weight:400;color:var(--ink-faint);}
.cat .gallery{padding-bottom:0;}

/* ---------- filter bar ---------- */
.filters{
  display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:18px 0;margin-bottom:48px;
}
.filter-cats,.filter-more{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.filters button{
  font-family:var(--sans);font-size:var(--link-size);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--navy);
  background:none;border:1px solid var(--rule-mid);border-radius:2px;
  padding:8px 16px;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.filters button:hover{border-color:var(--navy);}
.filters button[aria-pressed="true"]{background:var(--navy);color:var(--paper);border-color:var(--navy);}
.filters button:disabled{opacity:0.4;cursor:default;}
.filters button:disabled:hover{border-color:var(--rule-mid);}
.filters .count{
  font-family:var(--sans);font-size:var(--small-size);color:var(--ink-faint);margin-left:auto;
}

/* ---------- single painting ----------
   Left as it was. It is the one place a picture is meant to be looked at,
   and by Betsie's own description it was already the right size. */
/* A painting's own page keeps the size she approved whatever the page
   width setting says: its wrapper holds the 1100px it was judged at. */
.wrap-piece{max-width:calc(1100px + 2 * var(--pad));}
.piece{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:56px;align-items:start;padding:52px 0 84px;
}
.piece-img{background:var(--paper-2);}
.piece-img img{width:100%;height:auto;}
.piece-meta h1{font-size:clamp(min(26px,calc(var(--title-size) - 4px)),2.8vw,calc(var(--title-size) - 4px));font-weight:var(--head-weight);line-height:1.2;margin-bottom:24px;}
.piece-meta dl{border-top:1px solid var(--rule);margin-bottom:30px;}
.piece-meta div.row{
  display:flex;gap:18px;justify-content:space-between;
  border-bottom:1px solid var(--rule);padding:12px 0;
}
.piece-meta dt{
  font-family:var(--sans);font-size:calc(var(--label-size) - 2px);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--navy);padding-top:4px;
}
.piece-meta dd{font-size:var(--body-size);text-align:right;}
.piece-meta dd a{color:var(--navy);border-bottom:1px solid var(--navy);}
.piece-meta dd a:hover{border-bottom-width:2px;}
.piece-meta .enquire{
  font-family:var(--sans);font-size:var(--link-size);letter-spacing:0.13em;
  text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:5px;
  display:inline-block;
}
.piece-meta .enquire:hover{border-bottom-width:2px;padding-bottom:4px;}
.piece-nav{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding:26px 0 0;
  font-family:var(--sans);font-size:var(--link-size);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--navy);
}
.piece-nav a:hover{text-decoration:underline;text-underline-offset:4px;}

/* ---------- the book ----------
   The pages that teach are read in order, like the chapters of a book (BOOK
   in tools/build-pages.py). The foot of each says which chapter it is and
   turns the page: a large link back and a large link on, a mark for every
   chapter, and the whole list under All chapters. No boxes and no shadows,
   as everywhere on the site: hairlines set the parts apart. The two links
   are the main thing, each a big target for an unsteady hand, and on a
   phone the way on comes first. A chapter's picture is drawn whole in its
   small box, never cropped. The sizes are the site's own roles, so the
   tuning tool's sizes move these too.

   A phone keeps the sizes the bar was first given: the rules here, with
   the phone block further down. A tablet and a computer take a size
   larger, in the block from 561px, so nothing has to be put back for a
   phone. No word in the bar is in the faint grey, on any screen: it passes
   on the wall, but only just, and Betsie has called it too faded more than
   once. The small words are in the navy or the text colour, and only the
   hairlines stay faint. */
.book{max-width:calc(var(--text) + 160px);margin:0 auto;padding-bottom:56px;}
.book-head{text-align:center;}
/* the short hairline over it, as over a quotation that stands on its own */
.book-head::before{
  content:'';display:block;width:44px;margin:0 auto 26px;
  border-top:1px solid var(--rule-mid);
}
/* The book's name is a label, like "Structure" over a quotation, so it is
   in the navy the labels were moved to (and on a tablet or a computer it
   takes their size and spacing too, below). */
.book-name{
  font-family:var(--sans);font-size:calc(var(--label-size) - 3px);letter-spacing:0.18em;
  line-height:1.5;text-transform:uppercase;color:var(--navy);
}
.book-where{
  font-family:var(--head);font-size:calc(var(--h2-size) - 3px);font-weight:var(--head-weight);
  line-height:1.3;color:var(--head-color);margin-top:8px;
}
/* Back on the left, on along the right, each with its picture on the outer
   side. On the first chapter there is no way back, and the way on keeps
   its place on the right. The way on comes first in the page (for a
   keyboard and a screen reader on a phone, below), so each is placed. */
.book-turn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:40px;}
.book-link{
  display:flex;align-items:center;gap:22px;min-height:104px;
  border-top:1px solid var(--rule-mid);padding:22px 0 24px;
}
.book-prev{grid-column:1;grid-row:1;}
.book-next{grid-column:2;grid-row:1;flex-direction:row-reverse;text-align:right;}
.book-cover{
  flex:none;width:96px;height:96px;
  object-fit:contain;background:var(--paper-2);
}
.book-text{flex:1 1 auto;min-width:0;}
.book-kick{
  display:block;font-family:var(--sans);font-size:var(--link-size);letter-spacing:0.12em;
  line-height:1.5;text-transform:uppercase;color:var(--navy);
}
.book-arrow{display:inline-block;transition:transform .18s ease;}
.book-title{
  display:block;margin-top:6px;font-family:var(--head);font-size:calc(var(--h2-size) - 4px);
  font-weight:var(--head-weight);line-height:1.3;color:var(--head-color);
  text-wrap:pretty;overflow-wrap:anywhere;
}
/* "Chapter 3" is read, not glanced at, so it is in the text colour */
.book-num{
  display:block;margin-top:4px;font-family:var(--sans);font-size:calc(var(--small-size) + 1px);
  letter-spacing:0.04em;line-height:1.5;color:var(--ink-soft);
}
.book-link:hover .book-title,.book-link:focus-visible .book-title{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.book-prev:hover .book-arrow{transform:translateX(-3px);}
.book-next:hover .book-arrow{transform:translateX(3px);}
.book a:focus-visible,.book-toc summary:focus-visible{outline:2px solid var(--navy);outline-offset:4px;}

/* A numbered mark for each chapter on a thread, like page markers on a
   ribbon: navy as far as she has read, the chapter she is on filled in, the
   ones ahead in a faint rule. The number in a mark ahead is in the text
   colour, so it reads plainly; the faint ring and thread round it are what
   say she has not read it yet. A little more than each circle answers a
   finger. If there are ever more chapters than a phone has room for, the
   row wraps rather than pushing the page sideways. With more than nine
   (many, ONE_ROW in tools/build-pages.py) the thread is left out, so a row
   that wraps never shows a piece of it leading to nothing, and the marks
   are spaced by the row's gap rather than a margin before each, so a row
   that starts with one is still centered. */
.book-steps{
  --dot:30px;--gap:22px;
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;row-gap:16px;
  margin:40px 0 0;padding:0;
}
.book-steps li{position:relative;flex:none;}
.book-steps li + li{margin-left:var(--gap);}
.book-steps li + li::before{
  content:'';position:absolute;top:50%;right:100%;width:var(--gap);
  border-top:1px solid var(--rule-mid);
}
.book-steps li.read::before,.book-steps li.now::before{border-top-color:var(--navy);}
.book-steps.many{column-gap:var(--gap);}
.book-steps.many li + li{margin-left:0;}
.book-steps.many li + li::before{display:none;}
.book-steps a{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:var(--dot);height:var(--dot);border-radius:50%;
  border:1px solid var(--rule-mid);background:var(--paper);
  font-family:var(--sans);font-size:calc(var(--small-size) + 1px);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink-soft);
}
.book-steps a::after{content:'';position:absolute;inset:-6px;border-radius:50%;}
.book-steps .read a,.book-steps a:hover{border-color:var(--navy);color:var(--navy);}
.book-steps .now a,.book-steps .now a:hover{background:var(--navy);border-color:var(--navy);color:var(--paper);}
.book-steps a:focus-visible{outline-offset:3px;}

/* Every chapter, folded away until asked for, set as the contents page of
   a book: the number, then the title. The chapter she is on is not a link,
   and says so. The numbers and You are here are in the text colour, as a
   printed book's contents are. */
.book-toc{margin-top:30px;text-align:center;}
.book-toc summary{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:var(--link-size);letter-spacing:0.12em;
  line-height:1.5;text-transform:uppercase;color:var(--navy);padding:10px 4px;
}
.book-toc summary::-webkit-details-marker{display:none;}
/* the arrow: down while the list is folded away, up while it is open */
.book-toc summary::after{
  content:'';width:7px;height:7px;margin-top:-4px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}
.book-toc[open] summary::after{transform:rotate(-135deg);margin-top:4px;}
.book-toc summary:hover > span{text-decoration:underline;text-underline-offset:4px;}
.book-toc ol{
  list-style:none;text-align:left;max-width:520px;margin:12px auto 0;padding:0;
  border-top:1px solid var(--rule);
}
.book-toc li{border-bottom:1px solid var(--rule);}
.book-toc li > a,.book-toc li.now{display:flex;align-items:baseline;gap:16px;padding:12px 2px;}
.book-toc-n{
  flex:none;min-width:1.5em;text-align:right;font-family:var(--sans);
  font-size:calc(var(--small-size) + 1px);font-variant-numeric:tabular-nums;color:var(--ink-soft);
}
.book-toc-t{min-width:0;font-size:calc(var(--body-size) - 1px);line-height:1.45;overflow-wrap:anywhere;}
.book-toc a .book-toc-t{color:var(--navy);}
.book-toc a:hover .book-toc-t{text-decoration:underline;text-underline-offset:4px;}
.book-toc .now .book-toc-t{font-weight:700;}
.book-here{
  margin-left:8px;font-family:var(--sans);font-size:var(--small-size);font-weight:400;
  letter-spacing:0.04em;color:var(--ink-soft);white-space:nowrap;
}

@media(max-width:940px){
  .book{padding-bottom:24px;}
}
/* On a narrower screen the two links stack, the way on first, as it is the
   main thing to do (and first in the page); each picture back on the left,
   beside its words. */
@media(max-width:860px){
  .book-turn{grid-template-columns:minmax(0,1fr);}
  .book-prev{grid-column:auto;grid-row:auto;}
  .book-next{grid-column:auto;grid-row:auto;flex-direction:row;text-align:left;}
}
/* On a tablet and a computer the bar is a size larger. Trace asked for it
   in October 2026: on a computer it read as a little small, and its small
   words were hard to see, the book's name and "Chapter 1" under each title
   most of all. So the small words grow the most. Those two are 16px: the
   book's name takes the size and spacing of the site's labels, and
   "Chapter 1" the captions' size and 4px more. The bar's other small words
   step up to 15px. The chapter line and the titles
   grow by 2px only, so both stay under a section heading and the bar is
   still a quiet close to the page, never a rival to its title or its
   paintings. The pictures grow to 120px, the most they can show sharply:
   each is made at most 240px on its longer side (COVER_MAX), and a Retina
   screen like Betsie's iMac draws each pixel of the page with two of its
   own dots across. The bar widens with them, from 880px to 1000px, still
   inside the 1100px the paintings use, so at its full width the longest
   title, Painting Can Be Really Fun!, still fits on one line beside its
   picture. Set from 561px up, so a phone keeps every size above exactly. */
@media(min-width:561px){
  .book{max-width:calc(var(--text) + 280px);}
  .book-head::before{margin-bottom:30px;}
  .book-name{font-size:var(--label-size);letter-spacing:0.14em;}
  .book-where{font-size:calc(var(--h2-size) - 1px);margin-top:10px;}
  .book-turn{margin-top:44px;}
  .book-link{gap:24px;padding:24px 0 26px;}
  .book-cover{width:120px;height:120px;}
  /* a long line over a title, "Read again from the beginning", breaks
     into two even lines rather than leaving the arrow on its own */
  .book-kick{font-size:calc(var(--link-size) + 1.5px);text-wrap:balance;}
  .book-title{font-size:calc(var(--h2-size) - 2px);}
  .book-num{margin-top:5px;font-size:calc(var(--small-size) + 4px);}
  /* Nine marks and their thread measure 9 x 34 + 8 x 24 = 498px, so they
     still fit on one line in a 561px window, inside its margins and a
     scrollbar. Each mark answers 6px beyond its circle, a 46px target. */
  .book-steps{--dot:34px;--gap:24px;row-gap:18px;margin-top:44px;}
  .book-steps a{font-size:calc(var(--small-size) + 3px);}
  .book-toc{margin-top:32px;}
  .book-toc summary{font-size:calc(var(--link-size) + 1.5px);padding:12px 6px;}
  .book-toc summary::after{width:8px;height:8px;}
  .book-toc ol{max-width:580px;}
  .book-toc li > a,.book-toc li.now{padding:13px 2px;}
  .book-toc-n{font-size:calc(var(--small-size) + 3px);}
  .book-toc-t{font-size:var(--body-size);}
  .book-here{font-size:calc(var(--small-size) + 3px);}
}
/* Side by side in a narrow computer window, or on a tablet held sideways,
   the bar cannot reach its full width, so the pictures are a little
   smaller there, and on an iPad at 1024px the longest title still fits on
   one line. From 1080px up the bar has its full width and the pictures
   their full size. */
@media(min-width:861px) and (max-width:1079px){
  .book-link{gap:20px;}
  .book-cover{width:104px;height:104px;}
}
/* On a phone the marks shrink with the screen, so nine of them fit on one
   line down to a 320px phone. */
@media(max-width:560px){
  .book-turn{margin-top:30px;}
  .book-link{gap:16px;min-height:96px;padding:18px 0 20px;}
  .book-cover{width:72px;height:72px;}
  .book-title{font-size:calc(var(--h2-size) - 6px);}
  .book-steps{--dot:clamp(22px,6.6vw,26px);--gap:clamp(6px,3vw,12px);margin-top:32px;}
  .book-steps a{font-size:var(--small-size);}
  .book-steps a::after{inset:-4px;}
  .book-toc ol{max-width:none;}
}
@media(prefers-reduced-motion:reduce){
  .book-arrow{transition:none;}
  .book-prev:hover .book-arrow,.book-next:hover .book-arrow{transform:none;}
}
/* Windows High Contrast: the rules and circles take the system's colours,
   and the chapter she is on keeps a fill of its own. */
@media (forced-colors: active){
  .book-head::before,.book-link,.book-toc ol,.book-toc li{border-color:CanvasText;}
  .book-steps li + li::before{border-top-color:CanvasText;}
  .book-steps a{border-color:LinkText;}
  .book-steps .now a,.book-steps .now a:hover{
    forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText;
  }
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);margin-top:40px;}
footer .wrap{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:34px;padding-bottom:44px;
  font-family:var(--sans);font-size:calc(var(--small-size) + 0.5px);color:var(--ink-faint);
}
footer nav{display:flex;gap:24px;flex-wrap:wrap;}
footer nav a{color:var(--navy);}
footer nav a:hover{text-decoration:underline;text-underline-offset:4px;}
/* With a new line in it (.brk, above), the empty line the mark makes would
   add a second 24px gap. So the rows are kept apart by the links' own
   margins instead, which an empty line does not have, and the menu gives
   back the margin at its top and bottom: the rows sit exactly where they
   would, 24px apart. Only when there is a new line, so the footer is
   otherwise untouched; a browser without :has shows a wider gap. The rows
   end at the right edge, as the footer's menu does; where the menu drops
   under the name instead (smaller screens, below), they start at the left.
   The mark has no width, but the 24px gap beside it would still make the
   menu wider than its links: its margins give that back. */
footer nav:has(> .brk){row-gap:0;margin-block:-12px;justify-content:flex-end;}
footer nav:has(> .brk) > a{margin-block:12px;}
footer nav > .brk{margin-inline:-12px;}
/* Below 696px the footer's menu drops under the name (as measured with its
   words and sizes in Oct 2026: if they grow a lot, measure again). */
@media(max-width:695px){
  footer nav:has(> .brk){justify-content:flex-start;}
}
/* Outside the book, the footer's other side leads into it (tools/shell.py,
   _foot_way): the book's name as a label, and a larger line to its first
   chapter, in the navy of a link. Trace asked for it simple and larger,
   October 2026. It sits level with the name and copyright beside it. From
   860px down it always has a line of its own under them, starting at the
   left, rather than fitting beside them or not by a few pixels. Above that,
   if larger sizes from the tuning tool or longer words push it under them,
   it keeps to the right. The pages of the book keep the menu here instead. */
.foot-book{display:block;align-self:center;margin-left:auto;text-align:right;color:var(--navy);}
.foot-book-name{
  display:block;font-family:var(--sans);font-size:calc(var(--label-size) - 2px);
  letter-spacing:0.14em;line-height:1.5;text-transform:uppercase;
}
.foot-book-go{
  display:block;margin-top:4px;font-family:var(--head);font-size:calc(var(--h2-size) - 3px);
  font-weight:var(--head-weight);line-height:1.3;text-wrap:balance;
}
.foot-book:hover .foot-book-go > span:first-child,
.foot-book:focus-visible .foot-book-go > span:first-child{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
}
.foot-arrow{display:inline-block;transition:transform .18s ease;}
.foot-book:hover .foot-arrow{transform:translateX(3px);}
.foot-book:focus-visible{outline:2px solid var(--navy);outline-offset:6px;}
@media(max-width:860px){
  .foot-book{flex-basis:100%;text-align:left;margin-top:6px;}
}
@media(prefers-reduced-motion:reduce){
  .foot-arrow{transition:none;}
  .foot-book:hover .foot-arrow{transform:none;}
}

/* "Original paintings, Dayton, Ohio" used to sit under the masthead. It reads
   as a colophon rather than a headline, so it lives down here. */
.foot-sub{
  font-family:var(--sans);font-size:calc(var(--small-size) - 1px);letter-spacing:0.21em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;
}

/* ---------- smaller screens ---------- */
@media(max-width:940px){
  :root{--pad:20px;}
  .head{padding-top:26px;}
  nav.main{gap:0 18px;margin-top:18px;}
  .subnav{padding:9px calc(var(--pad) - 7.5px);}
  .subnav a{margin:3px 7.5px;}
  .prose{padding-bottom:64px;}
  .page-open p.intro,.page-open p.standfirst{font-size:calc(var(--body-size) + 1px);}
  .prose h2{margin-top:calc(var(--section-gap) * 0.75);}
  .prose > .figs{gap:12px;}
  .prose .figs-3{grid-template-columns:repeat(2,1fr);}
  .ways,.ways.three{grid-template-columns:1fr;gap:0;padding-bottom:64px;}
  .ways.three{padding-top:44px;row-gap:36px;}
  .hero{grid-template-columns:1fr;gap:0;}
  .hero-text{padding:36px 0 34px;}
  .hero-art{justify-content:center;padding-bottom:44px;}
  .gal-head{padding:44px 0 32px;}
  .quote{padding:60px 0;}
  .gallery{grid-template-columns:1fr 1fr;gap:40px 20px;padding-bottom:64px;}
  .cat{margin-bottom:56px;}
  .piece{grid-template-columns:1fr;gap:32px;padding:32px 0 60px;}
  .page-open{padding:38px 0 26px;}
  .filters{margin-bottom:34px;}
}
/* A picture beside text stacks on a narrow screen: picture first, then the
   heading, then the words. */
@media(max-width:860px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track will not shrink below its
     content, so a picture wider than a phone would push the page sideways */
  .prose > .row,.prose > .row-right{grid-template-columns:minmax(0,1fr);row-gap:24px;}
  .row-right .row-img,.row-right .row-text{grid-column:auto;grid-row:auto;}
  .row-img{width:min(var(--fig-max),100%);margin:0 auto;}
  .row-small .row-img{width:min(var(--side-sm),100%);}
  .prose > .row.sized{grid-template-columns:minmax(0,1fr);}
  .row.sized .row-img{width:min(var(--pw),100%);}
  .contact.has-art{grid-template-columns:minmax(0,1fr);row-gap:48px;}
  .contact-art{width:min(var(--side-sm),100%);margin:0 auto;}
  .row-left .row-img img,.row-right .row-img img{object-position:center top;}
}
@media(max-width:560px){
  .gallery{grid-template-columns:1fr;}
  nav.main a{font-size:calc(var(--nav-size) - 1.5px);letter-spacing:0.06em;}
  /* a step smaller on a phone, as the menu is */
  .subnav a{font-size:calc(var(--subnav-size) - 1.5px);}
  .filters .count{margin-left:0;width:100%;}
}

/* ---------- arrows up and down the page ----------
   Two round arrows, to go up and to go down (Trace, October 2026), out of
   sight until the reader has started down the page (tools/shell.py,
   SCROLL_NAV). Beside the page on a wide screen, centred in the margin; on a
   narrower one stacked in the bottom corner, where the page has no margin to
   spare. 48px across so they are easy to hit with a finger or an unsteady
   hand, and solid, with a soft shadow, so they read as buttons floating over
   the page and never as part of a painting they pass over. Their words
   ("Top", "Bottom") are read out, not shown: an arrow is plain enough. */
.scroll-nav{display:none;}
header:focus{outline:none;}
.scroll-nav.is-on{
  display:flex;flex-direction:column;gap:10px;
  position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:45;
}
.scroll-nav a{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;color:var(--navy);
  background:var(--paper);border:1px solid var(--rule-mid);
  box-shadow:0 4px 16px rgba(31,29,26,0.16);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s;
}
.scroll-nav a.is-visible{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s;}
.scroll-nav a:hover{border-color:var(--navy);}
.scroll-nav svg{width:20px;height:20px;flex:none;}
.scroll-nav a:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
/* The page is 1100px wide inside its padding, so from 1260px there is room
   in the margin: the arrows sit there, halfway down the screen. */
@media(min-width:1260px){
  .scroll-nav.is-on{bottom:auto;top:50%;transform:translateY(-50%);right:18px;}
}
/* Where they sit in the corner, the last line of the footer would scroll
   under them, so the footer leaves room for the two (48px each, 10px apart,
   16px up from the bottom). */
@media(max-width:1259px){
  footer .wrap{padding-bottom:calc(44px + 80px + env(safe-area-inset-bottom, 0px));}
}
@media(prefers-reduced-motion:reduce){
  .scroll-nav a,.scroll-nav a.is-visible{transition:none;}
}

/* ---------- arranging the gallery ----------
   Betsie's own tool, on the real Original Paintings page. Everything here is
   chrome around her work and is set in the sans at 12px, the size of the
   filter bar. No painting is ever dimmed, tinted, overlaid or cropped to show
   state: the card being carried is marked with a rule outside its own edges,
   and the position number sits in the control row under the caption, never
   on top of a painting. Removed by setting ARRANGE = False in
   tools/build-gallery.py.
   ------------------------------------------------------------------ */
.arrange-open{
  font-family:var(--sans);font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-soft);
  background:none;border:1px solid var(--rule-mid);border-radius:2px;
  padding:8px 16px;cursor:pointer;margin-left:18px;
}
.arrange-open:hover{border-color:var(--ink);color:var(--ink);}

/* Sticky, because the painting she picked up can be several screens away
   from where she is putting it, and the only reminder that she is carrying
   anything has to stay on screen the whole way. */
.arrange-bar{
  position:sticky;top:0;z-index:40;
  background:var(--paper);border-bottom:1px solid var(--rule-mid);
  display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;
  padding:14px 0;margin-bottom:34px;
}
.arrange-say{
  font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--ink);
  flex:1 1 300px;min-width:0;
}
.arrange-acts{display:flex;gap:9px;flex-wrap:wrap;}
.arrange-acts button{
  font-family:var(--sans);font-size:12px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-soft);
  background:none;border:1px solid var(--rule-mid);border-radius:2px;
  padding:9px 15px;cursor:pointer;min-height:38px;
}
.arrange-acts button:hover:not(:disabled){border-color:var(--ink);color:var(--ink);}
.arrange-acts button:disabled{opacity:0.4;cursor:default;}
.arrange-acts [data-act="save"]{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.arrange-acts [data-act="save"]:hover{opacity:0.88;}

body.arranging .work{cursor:pointer;}
body.arranging .work-wrap{position:relative;}
/* an outline OUTSIDE the painting, with an offset, so nothing is covered */
body.arranging .work-wrap.carrying{outline:2px solid var(--ink);outline-offset:7px;}
.arr-ctl{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:11px;font-family:var(--sans);
}
.arr-ctl button{
  font-family:var(--sans);font-size:12px;letter-spacing:0.06em;
  color:var(--ink-soft);background:none;
  border:1px solid var(--rule-mid);border-radius:2px;
  padding:6px 10px;cursor:pointer;min-height:32px;
}
.arr-ctl button:hover{border-color:var(--ink);color:var(--ink);}
.arr-no{
  font-family:var(--sans);font-size:12px;letter-spacing:0.06em;
  color:var(--ink-faint);min-width:2.2em;
}

/* The line that says whose arrangement this is. */
.your-order{
  display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;
  font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink-soft);
  border-left:2px solid var(--ink);padding:2px 0 2px 16px;margin-bottom:34px;
}
.your-order-off{
  font-family:var(--sans);font-size:13px;color:var(--ink-soft);
  background:none;border:0;border-bottom:1px solid var(--rule-mid);
  padding:0 0 2px;cursor:pointer;
}
.your-order-off:hover{color:var(--ink);border-bottom-color:var(--ink);}
@media(max-width:940px){
  .arrange-open{margin-left:0;}
  .arrange-say{flex:1 1 100%;}
}

/* ---------- typeface picker ----------
   Preview only, and removed for good by flipping FONT_PICKER in
   tools/shell.py. A strip across the bottom of the window rather than a
   floating panel: a panel anchored to either side opened over the featured
   painting, and the front page exists to show that painting.

   Each button is a specimen, not a font name: her own name in the heading
   face, one of her own lines in the body face. The real specimen is the page
   itself, which changes underneath her as she clicks. The strip is fixed to
   the bottom of the window and the script reserves exactly its height at the
   end of the page, so every pixel of it is a pixel of her site she cannot
   see; it has to stay short. Set in the sans so it never reads as part of
   the site.
   ------------------------------------------------------------------ */
.fontpick{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--paper-2);border-top:1px solid var(--rule-mid);
  font-family:var(--sans);
  box-shadow:0 -6px 22px rgba(31,29,26,0.08);
}
.fontpick .wrap{
  display:flex;align-items:center;gap:10px 22px;flex-wrap:nowrap;
  padding-top:10px;padding-bottom:10px;
}
.fontpick-lead{
  font-family:var(--sans);font-size:13px;line-height:1.35;color:var(--ink-soft);
  flex:0 1 17em;
}
.fontpick-opts{display:flex;gap:8px;flex:1 1 auto;min-width:0;}
.fontpick-opts button{
  flex:1 1 0;min-width:0;text-align:left;
  background:none;border:1px solid var(--rule-mid);border-radius:2px;
  padding:7px 12px 8px;cursor:pointer;color:var(--ink);
}
.fontpick-opts button:hover{border-color:var(--ink);}
/* The chosen option is marked with a rule and a tick, NOT by reversing it to
   white on black. Reversed type reads optically heavier, so whichever option
   she had selected would always look bolder than the other, which is the
   exact comparison this control exists to let her make. */
.fontpick-opts button[aria-pressed="true"]{
  border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);
}
.fontpick-opts button[aria-pressed="true"] .fontpick-cap::before{content:'\2713\00a0';}
.fontpick-opts button[aria-pressed="true"] .fontpick-cap{color:var(--ink);}
.fontpick-name,.fontpick-body,.fontpick-cap{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fontpick-name{font-size:18px;font-weight:600;line-height:1.25;}
.fontpick-body{font-size:13px;line-height:1.3;color:var(--ink-soft);margin-top:2px;}
.fontpick-cap{
  font-family:var(--sans);font-size:10.5px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:4px;
}
/* The room for the strip is measured and set by the script, because its
   height depends on how its contents wrap. This is only the floor, for the
   moment between the strip appearing and the script measuring it. */
body.has-fontpick{padding-bottom:96px;}
@media(max-width:860px){
  .fontpick-lead{display:none;}
  .fontpick-body{display:none;}
  .fontpick .wrap{gap:8px;}
  .fontpick-name{font-size:15px;}
  .fontpick-opts button{padding:7px 9px 8px;}
}