/* ==========================================================================
   doglike.studio
   One stylesheet. No build step. Plain CSS, meant to be repaired by hand.

   The whole system is derived from the logo: one unclosed stroke, warm ink
   on warm paper, round ends, a soft square. Two values, no colour — the
   paintings bring the colour, the site does not compete with them.

   Everything adjustable lives in the :root block below. Change a value
   there and the whole site changes. Nothing below :root hard-codes a
   colour, a size or a space.
   ========================================================================== */

:root{

  /* --- Colour -------------------------------------------------------------
     The logo holds exactly two: #FAF9F6 ground, #1A1915 stroke.
     Everything else is ink mixed toward paper. Contrast ratios are measured
     against --paper and all text values pass WCAG AA at normal size.       */

  --paper:          #FAF9F6;   /* logo ground                              */
  --ink:            #1A1915;   /* logo stroke            — 16.7:1 on paper */
  --ink-mid:        #5C584E;   /* secondary text         —  6.7:1          */
  --ink-soft:       #767065;   /* meta, captions, labels —  4.7:1          */

  --paper-sunk:     #F2F0E9;   /* set back: image placeholders, panels     */
  --paper-raised:   #FFFFFF;

  --rule:           #E3E0D8;   /* decorative separator                     */
  --rule-strong:    #948D7F;   /* real boundary, focus   —  3.1:1          */

  /* The logo has no accent colour, so neither does the site. This slot is
     deliberately left pointing at ink. Give it a colour and every link,
     underline and mark on the site follows it. */
  --accent:         var(--ink);

  /* --- Type ---------------------------------------------------------------
     System stacks only. No webfont, no network request, nothing to break
     in two years.                                                         */

  --font-serif:     ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans:      ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Handwriting for the one line that is a signature, not a sentence.
     A joined cursive, thin: Savoye LET first, Snell Roundhand behind it, then
     Segoe Script for Windows and Brush Script, which both platforms have.
     System faces only, so there is still no webfont to break — but they do
     differ between a Mac and a PC. See the note by .room__title. */
  --font-hand:      "Savoye LET", "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
  --weight-hand:    400;

  --font-display:   var(--font-serif);
  --font-body:      var(--font-serif);
  --font-meta:      var(--font-sans);

  /* No bold anywhere. Hierarchy comes from size, colour and space. */
  --weight-display: 400;
  --weight-body:    400;

  --track-tight:    -0.015em;
  --track-normal:   0;
  --track-meta:     0.11em;

  --leading-tight:  1.12;
  --leading-body:   1.65;
  --leading-meta:   1.4;

  /* Fluid scale. Smallest values are sized for a 360px viewport. */
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1.0625rem;
  --text-md:        clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-lg:        clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-xl:        clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --text-2xl:       clamp(2.25rem, 1.70rem + 2.6vw, 3.75rem);
  --text-3xl:       clamp(2.75rem, 1.90rem + 4.0vw, 5rem);

  /* --- Space --------------------------------------------------------------
     The show notes say: most of the room is empty, the paintings float far
     apart, hung slightly low. That is the layout brief. Sections carry more
     space above than below so content sits low in its own room.            */

  --space-3xs:      0.25rem;
  --space-2xs:      0.5rem;
  --space-xs:       0.75rem;
  --space-sm:       1rem;
  --space-md:       1.5rem;
  --space-lg:       2.5rem;
  --space-xl:       4rem;
  --space-2xl:      6rem;
  --space-3xl:      clamp(5rem, 10vw, 10rem);

  /* --- Layout ------------------------------------------------------------- */

  --page-max:       66rem;
  --measure:        34rem;    /* comfortable prose line */
  --measure-narrow: 26rem;
  --gutter:         clamp(1.25rem, 5vw, 3rem);

  /* --- Line & corner ------------------------------------------------------
     The logo strokes are 7 and 3.4 units on a 64 square — a 2:1 ratio.
     Its corner radius is 15/64, a generous 23%. Controls take that
     softness; paintings never do, because a painting is a rectangle.      */

  --line-thin:      1px;
  --line-thick:     2px;

  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-pill:    999px;

  /* --- Motion & focus ----------------------------------------------------- */

  --dur:            180ms;
  --ease:           cubic-bezier(.2,.6,.2,1);

  --focus-width:    2px;
  --focus-offset:   3px;
}


/* ==========================================================================
   Reset
   ========================================================================== */

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

html{ -webkit-text-size-adjust:100%; }

body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{ margin:0; padding:0; }

ul[class],ol[class]{ list-style:none; }

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

a{ color:inherit; }

button,input,textarea,select{ font:inherit; color:inherit; }


/* ==========================================================================
   Base
   ========================================================================== */

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:var(--weight-body);
  line-height:var(--leading-body);
  overflow-wrap:break-word;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  line-height:var(--leading-tight);
  letter-spacing:var(--track-tight);
  text-wrap:balance;
}

/* No bold anywhere — emphasis is carried by colour, not weight. */
strong,b{ font-weight:var(--weight-body); color:var(--ink); }

em,i{ font-style:italic; }

a{
  text-decoration:underline;
  text-decoration-thickness:var(--line-thin);
  text-underline-offset:0.18em;
  text-decoration-color:var(--rule-strong);
  transition:text-decoration-color var(--dur) var(--ease),
             text-decoration-thickness var(--dur) var(--ease);
}
a:hover{
  text-decoration-color:var(--accent);
  text-decoration-thickness:var(--line-thick);
}

:focus-visible{
  outline:var(--focus-width) solid var(--ink);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-sm);
}

::selection{ background:var(--paper-sunk); }


/* ==========================================================================
   Utilities
   ========================================================================== */

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:var(--gutter); top:var(--space-2xs);
  z-index:10; transform:translateY(-200%);
  background:var(--paper-raised); color:var(--ink);
  padding:var(--space-2xs) var(--space-sm);
  border:var(--line-thin) solid var(--ink);
  border-radius:var(--radius-pill);
  font-family:var(--font-meta); font-size:var(--text-sm);
  text-decoration:none;
}
.skip:focus{ transform:translateY(0); }

.wrap{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:calc(var(--measure) + 2 * var(--gutter)); }

/* Sections sit low in their own room: more space above than below. */
.band{ padding-block:var(--space-3xl) var(--space-2xl); }
.band--tight{ padding-block:var(--space-2xl) var(--space-xl); }

.meta{
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  line-height:var(--leading-meta);
  letter-spacing:var(--track-meta);
  text-transform:uppercase;
  color:var(--ink-soft);
}


/* ==========================================================================
   Masthead
   ========================================================================== */

/* One row, always: the name, the three destinations, Instagram. Three links
   is not enough to hide behind a menu — and they are the two pages that make
   money plus the one that explains them. */
.masthead{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:var(--space-md);
  padding-block:var(--space-2xs);
}

.masthead__brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  min-height:2.75rem;
  gap:0.55em;
  margin-inline-end:auto;
  font-family:var(--font-display);
  font-size:var(--text-md);
  letter-spacing:var(--track-tight);
  text-decoration:none;
}
.masthead__mark{ width:2em; height:2em; }

.masthead__nav{ flex:0 0 auto; }
.masthead__nav ul{
  list-style:none;
  display:flex;
  flex-wrap:nowrap;
  gap:var(--space-md);
  font-family:var(--font-meta);
  font-size:var(--text-sm);
}
.masthead__nav a{
  color:var(--ink-mid);
  text-decoration-color:transparent;
}
.masthead__nav a:hover,
.masthead__nav a[aria-current="page"]{
  color:var(--ink);
  text-decoration-color:var(--accent);
}

.masthead__ig{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:2.75rem;
  height:2.75rem;
  margin-inline-end:calc(var(--space-2xs) * -1);
  color:var(--ink-mid);
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.masthead__ig:hover{ color:var(--ink); }
.masthead__ig svg{
  width:1.375rem;
  height:1.375rem;
  stroke-linejoin:round;
}


/* ==========================================================================
   Home — the room

   Four things on one axis: the line, the painting, its name, two doors.
   The photograph is already a room (wall above, floor below, the work hung
   slightly low) and its composition is symmetrical, so the page centres on
   it rather than fighting it. Column width is the width of the picture.
   ========================================================================== */

.band--room{ padding-block:var(--space-xl) var(--space-3xl); }

.room{
  max-width:calc(40rem + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
  text-align:center;
}

/* The tagline, in a hand, grey. Handwriting faces run optically small and
   tight, so this takes a size up and a looser line than the serif would.
   Grey is --ink-soft: 4.7:1 on paper, which clears AA for normal text and
   clears large-text AA several times over. */
.room__title{
  font-family:var(--font-hand);
  font-weight:var(--weight-hand);
  /* Its own scale, not --text-2xl. A cursive has a small x-height, so it is
     set larger than the serif or the marker face would be to read at the
     same size. 34px at 360px, 52px from 1200px up. */
  font-size:clamp(2.125rem, 1.55rem + 2.6vw, 3.25rem);
  line-height:1.3;
  letter-spacing:0.01em;
  color:var(--ink);
  text-wrap:balance;
}

.room__figure{
  margin:0;
  margin-block-start:var(--space-2xl);
}
.room__work{ width:100%; }

.room__caption{
  margin-block-start:var(--space-lg);
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  color:var(--ink-soft);
}
.room__caption em{ font-style:italic; color:var(--ink-mid); }
.room__caption a{ text-decoration-color:var(--rule-strong); }
.room__caption a:hover{ color:var(--ink); }

.room__actions{
  margin-block-start:var(--space-2xl);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-sm);
}

/* ==========================================================================
   Colophon
   ========================================================================== */

.colophon{
  margin-block-start:var(--space-3xl);
  padding-block:var(--space-xl) var(--space-2xl);
}

.colophon__line{ font-size:var(--text-md); }
.colophon__tag{ color:var(--ink-mid); }

.colophon__links{
  margin-block-start:var(--space-lg);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-md);
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  color:var(--ink-mid);
}


/* ==========================================================================
   Preferences
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ==========================================================================
   Prose
   ========================================================================== */

.prose{ max-width:var(--measure); }
.prose > * + *{ margin-block-start:var(--space-md); }
.prose h2{ font-size:var(--text-xl); margin-block-start:var(--space-xl); }
.prose h3{ font-size:var(--text-lg); margin-block-start:var(--space-lg); }
.prose em{ color:var(--ink-mid); }


/* ==========================================================================
   Page head
   ========================================================================== */

.pagehead__title{ font-size:var(--text-2xl); max-width:18ch; }
.pagehead__lede{
  margin-block-start:var(--space-lg);
  max-width:var(--measure);
  font-size:var(--text-md);
  color:var(--ink-mid);
}
.pagehead__lede + .pagehead__lede{ margin-block-start:var(--space-sm); }


/* ==========================================================================
   A body of work
   ========================================================================== */

.series + .series{ margin-block-start:var(--space-3xl); }

.series__head{
  max-width:var(--measure);
  border-block-start:var(--line-thick) solid var(--ink);
  padding-block-start:var(--space-sm);
}
.series__title{ font-size:var(--text-xl); }
.series__blurb{ margin-block-start:var(--space-md); color:var(--ink-mid); }
.series__blurb + .series__blurb{ margin-block-start:var(--space-sm); }

.series__rules{
  margin-block-start:var(--space-md);
  padding-block-start:var(--space-md);
  border-block-start:var(--line-thin) solid var(--rule);
  color:var(--ink-mid);
}

.series__price{ margin-block-start:var(--space-md); }


/* ==========================================================================
   Grid of works
   ========================================================================== */

.works{
  margin-block-start:var(--space-2xl);
  display:grid;
  align-items:start;
  gap:var(--space-2xl) var(--space-lg);
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
}

.work{ display:block; text-decoration:none; }
.work__figure{ margin:0; background:var(--paper-sunk); }
.work__figure img{ width:100%; }

.work__body{ margin-block-start:var(--space-sm); }
.work__title{
  font-size:var(--text-md);
  text-decoration:underline;
  text-decoration-thickness:var(--line-thin);
  text-decoration-color:transparent;
  text-underline-offset:0.18em;
  transition:text-decoration-color var(--dur) var(--ease);
}
.work:hover .work__title{ text-decoration-color:var(--accent); }

.work__spec{
  margin-block-start:var(--space-3xs);
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  color:var(--ink-soft);
}
.work__status{
  margin-block-start:var(--space-2xs);
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  letter-spacing:var(--track-meta);
  text-transform:uppercase;
  color:var(--ink-mid);
}


/* ==========================================================================
   One painting
   ========================================================================== */

.piece{
  display:grid;
  gap:var(--space-2xl) var(--space-xl);
  grid-template-columns:1fr;
}
@media (min-width:52em){
  .piece{ grid-template-columns:minmax(0,3fr) minmax(18rem,2fr); }
}

.piece__figure{ margin:0; background:var(--paper-sunk); }
.piece__figure img{ width:100%; }

.piece__title{ font-size:var(--text-xl); }

.piece__spec{
  margin-block-start:var(--space-sm);
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  color:var(--ink-soft);
}

.piece__note{
  margin-block-start:var(--space-lg);
  color:var(--ink-mid);
}
.piece__note + .piece__note{ margin-block-start:var(--space-sm); }

.piece__price{
  margin-block-start:var(--space-lg);
  padding-block-start:var(--space-md);
  border-block-start:var(--line-thick) solid var(--ink);
  font-size:var(--text-md);
}
.piece__price .amount{ font-size:var(--text-lg); }

.piece__ship{
  margin-block-start:var(--space-2xs);
  color:var(--ink-mid);
  font-size:var(--text-sm);
}

.piece__cta{ margin-block-start:var(--space-lg); }



/* ==========================================================================
   Button & backlink
   ========================================================================== */

.btn{
  display:inline-block;
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  font-weight:var(--weight-body);
  letter-spacing:0.02em;
  text-decoration:none;
  color:var(--paper);
  background:var(--ink);
  border:var(--line-thin) solid var(--ink);
  border-radius:var(--radius-pill);
  padding:0.85em 1.6em;
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{ background:var(--paper); color:var(--ink); }

.btn--ghost{ background:var(--paper); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }

/* the quietest of the three: a thin outline that firms up on hover */
.btn--quiet{ background:transparent; color:var(--ink-mid); border-color:var(--rule-strong); }
.btn--quiet:hover{ background:transparent; color:var(--ink); border-color:var(--ink); }

.backlink{
  display:inline-block;
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  color:var(--ink-mid);
  text-decoration-color:transparent;
}
.backlink:hover{ color:var(--ink); text-decoration-color:var(--accent); }


/* ==========================================================================
   Lists: prices, steps, refusals
   ========================================================================== */

.pricelist{
  max-width:var(--measure);
  margin-block-start:var(--space-lg);
  list-style:none;
}
.pricelist li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-sm);
  padding-block:var(--space-sm);
  border-block-start:var(--line-thin) solid var(--rule);
}
.pricelist li:last-child{ border-block-end:var(--line-thin) solid var(--rule); }
.pricelist .amount{ font-size:var(--text-md); }

.steps{
  max-width:var(--measure);
  margin-block-start:var(--space-lg);
  list-style:none;
  display:grid;
  gap:var(--space-md);
  counter-reset:step;
}
.steps li{
  padding-block-start:var(--space-sm);
  border-block-start:var(--line-thin) solid var(--rule);
  color:var(--ink-mid);
}
.steps .step__name{ color:var(--ink); }

.refuse{
  max-width:var(--measure);
  margin-block-start:var(--space-md);
  color:var(--ink-mid);
}


/* ==========================================================================
   The commission configurator

   Behaviour is unchanged from the original build: the same markup, the same
   script, the same aria-pressed toggles, the same paint-splash on colour,
   the same live preview and the same mailto brief.

   --splash is written by the script when a colour is chosen, so the page
   still takes on the colour you picked. It drives decorative surfaces only,
   never text or a control label, so contrast cannot fall below AA whichever
   colour is picked.
   ========================================================================== */

:root{ --splash:var(--ink); }

.config section + section{ margin-block-start:var(--space-2xl); }

.config__legend{
  font-size:var(--text-lg);
  padding-block-end:var(--space-sm);
  border-block-end:var(--line-thick) solid var(--ink);
  margin-block-end:var(--space-lg);
  width:100%;
}

/* --- colour dots + splash ------------------------------------------------ */

.moods{ display:flex; flex-wrap:wrap; gap:var(--space-md); align-items:center; }
.mood{
  width:3rem; height:3rem;
  border:none; padding:0; cursor:pointer; position:relative;
  border-radius:47% 53% 58% 42% / 45% 52% 48% 55%;
  box-shadow:inset 0 0 0 1px rgba(26,25,21,.18);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mood:nth-child(2n){ border-radius:58% 42% 45% 55% / 52% 48% 55% 45%; }
.mood:nth-child(3n){ border-radius:42% 58% 52% 48% / 55% 45% 42% 58%; }
.mood:hover{ transform:scale(1.12); }
.mood[aria-pressed="true"]{
  transform:scale(1.08);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}

.mood-hint{
  margin-block-start:var(--space-md);
  min-height:1.6em;
  font-style:italic;
  font-size:var(--text-md);
  color:var(--ink-soft);
}
.mood-hint b{ font-style:normal; font-weight:var(--weight-body); color:var(--ink); }

/* the splash itself — colours come inline from the script */
.flood{ position:fixed; z-index:80; border-radius:50%; pointer-events:none; width:24px; height:24px; margin:-12px 0 0 -12px; }
.drop{ position:fixed; z-index:81; pointer-events:none; width:10px; height:10px; border-radius:46% 54% 52% 48% / 50% 45% 55% 50%; margin:-5px 0 0 -5px; }

/* --- glyph picker -------------------------------------------------------- */

.glyphs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(5.5rem, 1fr)); gap:var(--space-xs); }
.glyph{
  background:var(--paper-sunk); border:none; padding:var(--space-2xs); cursor:pointer;
  aspect-ratio:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5em;
  border-radius:46% 54% 52% 48% / 52% 46% 54% 48%;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.glyph:nth-child(2n){ border-radius:56% 44% 47% 53% / 48% 55% 45% 52%; }
.glyph:nth-child(3n){ border-radius:50% 50% 54% 46% / 55% 45% 50% 50%; }
.glyph:nth-child(4n){ border-radius:44% 56% 50% 50% / 50% 52% 48% 50%; }
.glyph:hover{ transform:translateY(-2px); }
.glyph[aria-pressed="true"]{ background:var(--ink); }

.glyph svg{
  width:2rem; height:2rem;
  stroke:var(--ink); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.glyph svg .accent{ stroke:var(--ink-soft); }
.glyph[aria-pressed="true"] svg,
.glyph[aria-pressed="true"] svg .accent{ stroke:var(--paper); }

.glyph span{
  font-family:var(--font-meta); font-size:var(--text-xs);
  letter-spacing:0.04em; color:var(--ink-mid);
}
.glyph[aria-pressed="true"] span{ color:var(--paper); }

.pickhint{
  margin-block-start:var(--space-md);
  font-family:var(--font-meta); font-size:var(--text-sm);
  letter-spacing:var(--track-meta); text-transform:uppercase; color:var(--ink-soft);
}
.pickhint b{ font-weight:var(--weight-body); color:var(--ink); }

/* --- fields -------------------------------------------------------------- */

.field{ margin-block-end:var(--space-md); max-width:var(--measure); }

label.lab{
  display:block; margin-block-end:var(--space-2xs);
  font-family:var(--font-meta); font-size:var(--text-sm);
  letter-spacing:var(--track-meta); text-transform:uppercase; color:var(--ink-soft);
}

textarea,
input[type=text],
input[type=email],
input[type=number]{
  width:100%;
  background:var(--paper-sunk);
  border:var(--line-thin) solid transparent;
  border-radius:var(--radius-md);
  padding:0.8em 1em;
  font-family:var(--font-body); font-size:var(--text-base); color:var(--ink);
  resize:vertical;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
textarea::placeholder, input::placeholder{ color:var(--ink-soft); }
textarea:focus, input:focus{ outline:none; background:var(--paper-raised); border-color:var(--ink); }
textarea:focus-visible, input:focus-visible{ outline:var(--focus-width) solid var(--ink); outline-offset:var(--focus-offset); }
textarea{ min-height:6rem; line-height:var(--leading-body); }

.onenote{
  margin-block-start:var(--space-2xs);
  font-family:var(--font-meta); font-size:var(--text-sm);
  letter-spacing:var(--track-meta); text-transform:uppercase; color:var(--ink);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.onenote.show{ opacity:1; }
input.invalid{ border-color:var(--ink); }

/* --- chips --------------------------------------------------------------- */

.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2xs); }
.chip{
  border:var(--line-thin) solid var(--rule-strong);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-meta); font-size:var(--text-sm); font-weight:var(--weight-body);
  padding:0.7em 1.2em;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover{ border-color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.custom-size{ display:flex; align-items:center; gap:var(--space-2xs); margin-block:var(--space-sm); }
.custom-size input{ width:6rem; }
.custom-size span{ color:var(--ink-soft); }

/* --- live preview -------------------------------------------------------- */

#stage{
  display:flex; justify-content:center; align-items:center;
  padding:clamp(2.5rem, 10vw, 7rem) clamp(1.5rem, 7vw, 5rem);
  border-radius:var(--radius-md);
  background:var(--paper-sunk);
}
#art svg{
  display:block; width:auto; height:auto;
  background:var(--paper-raised);
  border-radius:var(--radius-sm);
  box-shadow:0 1px 0 rgba(26,25,21,.06),
             0 14px 20px -10px rgba(26,25,21,.18),
             0 32px 48px -18px rgba(26,25,21,.22);
}
#sizeLabel{
  margin-block-start:var(--space-md);
  text-align:center;
  font-family:var(--font-meta); font-size:var(--text-sm);
  letter-spacing:var(--track-meta); text-transform:uppercase; color:var(--ink-mid);
}

/* the one place the picked colour paints the page */
.tint-rule{
  height:var(--line-thick);
  background:var(--splash);
  border:none;
  border-radius:var(--radius-pill);
  margin-block:var(--space-lg);
  transition:background var(--dur) var(--ease);
}

/* --- send ---------------------------------------------------------------- */

.actions{ display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center; margin-block-start:var(--space-xl); }

.toast{
  font-family:var(--font-meta); font-size:var(--text-sm);
  letter-spacing:var(--track-meta); text-transform:uppercase; color:var(--ink-mid);
}

#summary{
  display:none;
  margin-block-start:var(--space-lg);
  max-width:var(--measure);
  background:var(--paper-sunk);
  border-radius:var(--radius-md);
  padding:var(--space-md);
  white-space:pre-wrap;
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  line-height:var(--leading-body);
}
#summary.show{ display:block; }
#summary h3{
  font-family:var(--font-display); font-size:var(--text-md);
  margin-block-end:var(--space-2xs);
}

.finenote{
  max-width:var(--measure);
  margin-block-start:var(--space-sm);
  font-family:var(--font-meta);
  font-size:var(--text-sm);
  color:var(--ink-soft);
}

/* --- the work, shown big -------------------------------------------------
   Intro, grid and closing note all sit in the same wide container so their
   left edges line up with the paintings, and the page carries one set of
   vertical spacing rather than three stacked section paddings. */

.band--work{ padding-block:var(--space-2xl) var(--space-3xl); }


.work-close{
  margin-block-start:var(--space-3xl);
  padding-block-start:var(--space-lg);
  border-block-start:var(--line-thin) solid var(--rule);
  max-width:var(--measure);
  color:var(--ink-mid);
}


.wrap--wide{ max-width:78rem; }

.works--grand{
  margin-block-start:0;
  grid-template-columns:1fr;
  gap:var(--space-3xl) var(--space-2xl);
}
@media (min-width:46em){
  .works--grand{ grid-template-columns:repeat(2, 1fr); }
}
.works--grand .work__body{ margin-block-start:var(--space-md); }
.works--grand .work__title{ font-size:var(--text-lg); }

/* ==========================================================================
   Touch

   Most people arrive here from an Instagram link, on a phone. Navigation,
   the handle, the wordmark and the footer links are all small type, so each
   one carries its own padding to clear a 44px hit area. The masthead's own
   padding comes down to compensate, so the bar doesn't grow.
   ========================================================================== */

.masthead{ padding-block:var(--space-2xs); }
.masthead__brand{ padding-block:0.3rem; }
.masthead__nav a{ display:inline-block; padding-block:0.8rem; padding-inline:0.4rem; }
.masthead__handle{ display:inline-block; padding-block:0.7rem; }
.colophon__links a{ display:inline-block; padding-block:0.8rem; }
.skip{ padding:0.8rem 1.2rem; }

/* the caption link on the home page sits alone, so it gets room too */
.room__caption a{ display:inline-block; padding-block:0.7rem; }

/* the back link on a painting page */
.backlink{ padding-block:0.7rem; }

/* ==========================================================================
   Phone

   Nearly everyone arrives from Instagram on a phone, so this is the case the
   header and footer are designed for, not a fallback from the desktop one.

   The header becomes a real bar: the name, then the three destinations set
   across the full width, closed with a hairline. The handle is dropped — it
   is already in the footer and was costing a whole row. The footer links
   stop wrapping into a ragged block and become a list.
   ========================================================================== */

@media (max-width: 46em){

  /* Everything stays on one line. Measured at 360px: the name, the three
     links and the Instagram mark need 357px of a 320px line, and the
     wordmark is 87px of that. So on a phone the mark carries the brand on
     its own — it is the logo, and it still links home. The word is kept for
     screen readers rather than deleted. */
  .masthead{
    gap:var(--space-sm);
    border-block-end:var(--line-thin) solid var(--rule);
  }
  .masthead__brand{ gap:0; }
  .masthead__brand span{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .masthead__mark{ width:2rem; height:2rem; }

  .masthead__nav ul{ gap:var(--space-sm); }
  .masthead__nav a{
    font-size:0.8125rem;
    padding-inline:0;
  }

  .colophon{
    margin-block-start:var(--space-2xl);
    padding-block:var(--space-lg) var(--space-xl);
  }
  /* A quiet stack, no rules. The dividers made four links read as a heavy
     block; even spacing and one alignment is enough to hold them together. */
  .colophon__links{
    display:grid;
    gap:0;
    margin-block-start:var(--space-md);
  }
  /* the padding is both the tap target and the separation — no gap needed */
  .colophon__links a{
    display:block;
    padding-block:0.7rem;
    padding-inline:0;
  }

}

/* ==========================================================================
   Seeing a painting large

   The photograph is what people came for, so it is tappable. Underneath it
   is a plain link to the full-size file, which works with no JavaScript at
   all; zoom.js upgrades that to an overlay. See zoom.js.
   ========================================================================== */

.zoom{ display:block; cursor:zoom-in; }
.zoom img{ width:100%; }

/* only touch devices get the words — a pointer gets the zoom-in cursor */
.zoom__hint{ display:none; }
@media (pointer: coarse){
  .zoom__hint{
    display:block;
    margin-block-start:var(--space-2xs);
    font-family:var(--font-meta);
    font-size:var(--text-xs);
    letter-spacing:var(--track-meta);
    text-transform:uppercase;
    color:var(--ink-soft);
  }
}

html.has-lightbox,
html.has-lightbox body{ overflow:hidden; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--paper);
}
.lightbox[hidden]{ display:none; }

.lightbox__frame{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:var(--gutter);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.lightbox__img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  cursor:zoom-in;
}

/* second tap: the picture at its own size, the frame pans.
   place-items:start, not center — a centred item that overflows a scroll
   container cannot be scrolled back to. */
.lightbox__frame.is-actual{ place-items:start; }
.lightbox__frame.is-actual .lightbox__img{
  max-width:none;
  max-height:none;
  cursor:zoom-out;
}

.lightbox__close{
  position:absolute;
  top:var(--space-sm);
  right:var(--space-sm);
  z-index:1;
  width:2.75rem;
  height:2.75rem;
  display:grid;
  place-items:center;
  font-family:var(--font-meta);
  font-size:1.5rem;
  line-height:1;
  color:var(--ink);
  background:var(--paper);
  border:var(--line-thin) solid var(--rule-strong);
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease);
}
.lightbox__close:hover{ border-color:var(--ink); }