/*
  The site's look, from Marita's brand guide (Oct 2026). Colors and fonts are the tokens right
  below: change them here and the whole site follows.
  Sand walls, each piece shown whole on a Paper mat and never cropped, Cyanotype blue for links
  and buttons, and a hand-painted color for each menu section.
*/
:root {
  --sand: #efe4d0;       /* page background */
  --paper: #f7f1e6;      /* cards and mats; text on blue */
  --warm-ink: #2e2620;   /* text */
  --clay: #6b5e52;       /* quiet text */
  --cyanotype: #1f4e8c;  /* logo, links, buttons */
  --hairline: rgba(46, 38, 32, .14);
  --sold: #b73557;       /* the dot on sold pieces */
  --lift: 0 2px 6px rgba(46, 38, 32, .08), 0 14px 28px -14px rgba(46, 38, 32, .4);
  --button-lift: 0 6px 14px -6px rgba(31, 78, 140, .6);
  --shadow: 0 1px 2px rgba(46, 38, 32, .06), 0 6px 18px -10px rgba(46, 38, 32, .25);
  /* each menu section: a line color, and a watercolor splash cut from her cyanotype of petals */
  --line-paintings: #b73557;
  --line-cyanotypes: #1f4e8c;
  --line-printmaking: #88431d;
  --line-prints: #316429;
  --line-gifts: #8a6200;
  --heading: "Alegreya Sans", "Trebuchet MS", sans-serif;
  --body: "Figtree", Helvetica, Arial, sans-serif;
  --gutter: clamp(24px, 5vw - 8px, 64px);  /* page side margins */
  --page: 1180px;                         /* content width */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--sand); color: var(--warm-ink); font-family: var(--body); font-size: 18px; line-height: 1.6; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; display: block; }
a { color: var(--cyanotype); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--cyanotype); outline-offset: 3px; }
h1[tabindex="-1"]:focus { outline: none; }  /* focus lands on a page's heading after a page change; no ring needed there */
/* Skip link: hidden until a keyboard user tabs onto it, first thing on every page */
.skip { position: absolute; top: 8px; left: 8px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--paper); color: var(--cyanotype); border-radius: 6px; box-shadow: var(--shadow); transform: translateY(-200%); }
.skip:focus { transform: none; }
h1, h2 { font-family: var(--heading); font-weight: 400; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(40px, 2.6vw + 23px, 60px); line-height: 1.1; }
h2 { font-size: clamp(28px, 1.1vw + 21px, 36px); line-height: 1.2; }
.wrap { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
.block { padding-block: 48px 8px; display: flex; flex-direction: column; gap: 20px; }
.lede { margin: 0; color: var(--clay); font-style: italic; max-width: 60ch; }
.empty, .notice { color: var(--clay); }
.notice { margin: 20px 0 0; padding: 12px 16px; border-radius: 6px; background: var(--paper); }
.load-error p { margin: 0; }
.load-error p + p { margin-top: 8px; }
.fineprint { font-size: 16px; line-height: 1.5; color: var(--clay); }

/* A section heading with its splash tucked behind the first letters, turned slightly.
   One splash per page, only behind headings. */
.splash-heading { position: relative; isolation: isolate; align-self: flex-start; }  /* the text lines up with the page; the splash hangs into the margin */
.splash-heading::before { content: ""; position: absolute; z-index: -1; left: -.45em; top: 50%; width: 1.6em; height: 1.6em; translate: var(--splash-shift, 0) -50%; rotate: var(--splash-turn);
  background: var(--section-splash) center / contain no-repeat; }

/* header (brand look): tulip and name, section links over brush lines, "Contact me" button */
.header { background: var(--sand); color: var(--warm-ink); font-family: var(--body); border-bottom: 1px solid rgba(46, 38, 32, .08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; max-width: 1440px; margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.name { display: flex; align-items: center; gap: 17px; font-family: var(--heading); font-weight: 500; font-size: 25px; line-height: 1; color: var(--cyanotype); text-decoration: none; white-space: nowrap; }
.name img { width: 28px; height: 49px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 5.2vw - 33px, 42px); --section-line: var(--warm-ink); }
.nav a, .menu-panel a { color: var(--warm-ink); text-decoration: none; font-weight: 500; font-size: 18px; line-height: 1.6; white-space: nowrap; }
/* A hand-painted line under each menu item, in its section's color (warm ink for the others).
   The line is always 5px tall, however long the word. */
.nav a:not(.nav-contact) { position: relative; isolation: isolate; padding-bottom: 11px; margin-top: 11px; }
.nav a:not(.nav-contact)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--section-line);
  -webkit-mask: url(menu-line.svg) center / 100% 100% no-repeat; mask: url(menu-line.svg) center / 100% 100% no-repeat; }
/* Hover: the section's splash, squashed into a brushstroke behind the word (brand guide, Menu lines),
   painted in from left to right. */
.nav a[data-section]::before, .menu-panel a[data-section] .label::before { content: ""; position: absolute; z-index: -1; left: -6px; right: -8px; top: 3px; height: 22px; rotate: -5deg;
  background: var(--section-splash) center / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path .4s cubic-bezier(.3, .7, .4, 1); }
.nav a[data-section]:hover::before, .nav a[data-section]:focus-visible::before, .nav a[data-section][aria-current]::before,
.menu-panel a[data-section]:hover .label::before, .menu-panel a[data-section]:active .label::before, .menu-panel a[data-section]:focus-visible .label::before { clip-path: inset(0); }
/* phone menu: the current section paints itself in each time the menu opens */
.menu-panel a[data-section] .label { position: relative; isolation: isolate; }
.menu-panel a[data-section][aria-current] .label::before { clip-path: inset(0); animation: splash-in .5s .15s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes splash-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
[data-section="paintings"] { --section-line: var(--line-paintings); --section-splash: url(splash-paintings.webp); --splash-turn: 9deg; }
[data-section="cyanotypes"] { --section-line: var(--line-cyanotypes); --section-splash: url(splash-cyanotypes.webp); --splash-turn: 9deg; }
[data-section="printmaking"] { --section-line: var(--line-printmaking); --section-splash: url(splash-printmaking.webp); --splash-turn: -69deg; }
[data-section="prints"] { --section-line: var(--line-prints); --section-splash: url(splash-prints.webp); --splash-turn: 0deg; }
[data-section="gifts"] { --section-line: var(--line-gifts); --section-splash: url(splash-gifts.webp); --splash-turn: -28deg; --splash-shift: .25em; }  /* turned this way it reaches further left; nudged to line up with the others */
.nav a:not([data-section]):not(.nav-contact):hover, .nav a:not([data-section]):not(.nav-contact)[aria-current] { color: var(--cyanotype); --section-line: var(--cyanotype); }
.nav .nav-contact { margin-left: clamp(0px, 3vw - 24px, 8px); padding: 8px 16px; border-radius: 6px; background: var(--cyanotype); color: var(--paper); white-space: nowrap; }

.header :focus-visible { outline-color: var(--cyanotype); }
.menu-btn { display: none; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: var(--cyanotype); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.menu-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn .menu-close, .menu-btn[aria-expanded="true"] .menu-open { display: none; }
.menu-btn[aria-expanded="true"] .menu-close { display: inline; }
.menu-panel { display: flex; flex-direction: column; border-top: 1px solid rgba(46, 38, 32, .1); padding: 6px max(var(--gutter), env(safe-area-inset-right, 0px)) 16px max(var(--gutter), env(safe-area-inset-left, 0px)); }
.menu-panel[hidden] { display: none; }
.menu-panel a { padding: 11px 0; border-bottom: 1px solid rgba(46, 38, 32, .1); }
.menu-panel a[data-section] .label { padding-bottom: 6px; }
.menu-panel a[data-section] .label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--section-line);
  -webkit-mask: url(menu-line.svg) center / 100% 100% no-repeat; mask: url(menu-line.svg) center / 100% 100% no-repeat; }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a[aria-current] { color: var(--cyanotype); }
.menu-panel .nav-contact { margin-top: 12px; padding: 10px 16px; border: 0; border-radius: 6px; background: var(--cyanotype); color: var(--paper); text-align: center; }
/* Every menu item stays in the header down to 1000px (room for Sold too); below that, the menu button. */
@media (max-width: 1179px) { .name { font-size: 22px; gap: 15px; } .name img { width: 25px; height: 44px; } }
@media (max-width: 999px) { .nav { display: none; } .menu-btn { display: grid; } }
@media (min-width: 1000px) { .menu-panel { display: none !important; } }
@media (max-width: 520px) { .header-inner { min-height: 76px; } }
/* small tablets (stacked hero): the wide studio crop, kept short so the button stays on the first screen */
@media (min-width: 521px) and (max-width: 759px) { .hero .hero-photo { aspect-ratio: 16 / 10; } .hero .hero-photo img { object-position: center 40%; }
  .hero .hero-text h1 { font-size: min(60px, 9vw); } }  /* a heading big enough to hold its own over the full-width paragraph */

/* a piece on its Paper mat: always whole, never cropped */
.mat { background: var(--paper); box-shadow: var(--shadow); aspect-ratio: 4 / 5; padding: 8%; display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr); }  /* the photo fits the mat; it can't push the mat bigger */
.mat img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.no-photo { font-family: var(--heading); font-size: 22px; color: var(--clay); text-align: center; }

/* Grids of pieces. Each is a Paper card: the art whole in a slightly wide box at the top, then its name
   and the price in quiet italic. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 19px; }
@media (max-width: 759px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
/* Each card spans three rows of the grid (art, title, price) and shares them with the cards beside it
   (subgrid). So in a row, every title starts at the same height and every price lines up, and a row only
   makes room for a second title line when one of its titles wraps. */
/* One column that can't grow past the card: Safari otherwise sizes the art box from the row's height and
   lets it spill out of the card on phones. The art box takes the card's width and gets its height from that. */
.card { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-content: start;
  padding: clamp(12px, 1.8vw, 24px); background: var(--paper); border-radius: 6px;
  color: var(--warm-ink); text-decoration: none; min-width: 0; transition: transform .2s ease, box-shadow .2s ease; }
.card .mat { position: relative; width: 100%; height: auto; aspect-ratio: 15 / 14; margin-bottom: clamp(14px, 1.5vw, 20px); padding: 0; box-shadow: none; background: none; }
.card .mat img { position: absolute; inset: 0; object-position: top center; }  /* fills the art box, whole (contain), top-aligned */
/* Figtree Regular: 22px on desktop, about 19px on tablets, 16px on phones (a size container on the card
   would scale it with the card, but breaks the shared rows in Chrome). The caption's title and price sit in the
   card's own rows, so the wrapper itself steps aside (display: contents) and just passes the type down. */
.card-cap { display: contents; font-weight: 400; font-size: clamp(16px, .6vw + 13.5px, 22px); line-height: 1.35; }
.card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.card-info { display: flex; flex-direction: column; justify-content: flex-end; }  /* price on the bottom line, level across the row */
.card-kind { color: var(--clay); }  /* "Original" / "Print": upright, so it reads as what the piece is, apart from the italic price */
.card-meta { font-style: italic; color: var(--clay); }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--sold); margin-right: 6px; vertical-align: .05em; }
@media (min-width: 761px) { .card { border-radius: 0; } }

/* front page */
.intro { display: flex; flex-direction: column; gap: 12px; padding-block: 48px 16px; }
.intro p { margin: 0; }
.home-block { display: flex; flex-direction: column; gap: clamp(12px, 2.6vw, 38px); padding-top: clamp(24px, 3.6vw, 52px); }
.home-heading { font-size: clamp(32px, 1.5vw + 22px, 44px); line-height: 1.15; }  /* one step under the hero's 60px */
#newest .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { #newest .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #newest .card:nth-child(n + 7) { display: none; } }
@media (max-width: 759px) { #newest .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#newest .home-heading { scroll-margin-top: 24px; }
#newest .home-heading:focus { outline: none; }
.see-more-row { display: flex; justify-content: flex-end; align-items: flex-start; height: calc(1.6em + 12px); font-size: 18px; line-height: 1.6; }
.see-more { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 2px; border-bottom: 2px solid var(--cyanotype); font-weight: 500; text-decoration: none;
  transition: border-bottom-width .15s ease; }
@media (hover: hover) { .see-more:hover { border-bottom-width: 4px; } }
.see-more .arrow { width: 16px; height: auto; }
.see-more { position: relative; }
.see-more::after { content: ""; position: absolute; inset: -6px -4px; }  /* a 44px-tall tap area; the underline stays where it is */
.arrow { fill: var(--cyanotype); flex: none; }

/* "Browse the art": the five splashes, then a card per section */
.browse-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 13px; margin-bottom: clamp(12px, 4.9vw - 30px, 32px); }
.splash-row { display: flex; align-items: center; }
.splash-row img { height: clamp(26px, 3.6vw, 52px); width: auto; rotate: var(--splash-turn); margin-right: -4px; }
.rooms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 16px; }
.room { container-type: inline-size; grid-column: span 2; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px 8px 8px; background: var(--paper); border-radius: 6px;
  color: var(--warm-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.room:nth-child(-n + 2) { grid-column: span 3; }
/* lift on hover, only where there's a mouse (a tap on a phone would leave it stuck) */
@media (hover: hover) {
  .card:hover, .room:hover { transform: translateY(-4px); box-shadow: var(--lift); }
}
.room-title { position: relative; isolation: isolate; flex: none; margin-left: 14px; padding: 0 16px; font-family: var(--heading); font-weight: 400; font-size: clamp(28px, 1.1vw + 21px, 36px); line-height: 1.2; }
.room-title::before { content: ""; position: absolute; z-index: -1; left: -4px; top: 50%; width: 2.75em; height: 2.75em; translate: var(--splash-shift, 0) -50%; rotate: var(--splash-turn);
  background: var(--section-splash) center / contain no-repeat; }
.room img { flex: 1; min-width: 0; height: 100%; object-fit: contain; object-position: right center; }  /* art is never cropped */
.room .arrow { width: 20px; height: 20px; margin-left: auto; }
/* desktop: the name over its splash and the arrow along the top, the piece filling the rest, whole */
@media (min-width: 1100px) {
  .room { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: 16px 8px; padding: 30px 20px 20px 12px; }
  .room-title { grid-area: 1 / 1; justify-self: start; }
  .room .arrow { grid-area: 1 / 2; }
  .room img { grid-area: 2 / 1 / 3 / 3; width: 100%; height: 100%; object-position: center; }
}
@container (max-width: 280px) { .room img { display: none; } }  /* too narrow: just the name and the arrow */
@media (max-width: 1099px) { .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } .room, .room:nth-child(-n + 2) { grid-column: auto; } .room:first-child:nth-last-child(odd) { grid-column: span 2; } }  /* an odd count: Paintings takes the full row */
@media (max-width: 759px) {
  .browse-head { flex-direction: column; align-items: flex-start; }
  .rooms { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 109px; }
  .room:first-child:nth-last-child(odd) { grid-column: auto; }
  .room-title::before { width: 2.9em; height: 2.9em; }
  .room .arrow { width: 13px; height: 13px; }
}

/* front-page hero: heading, her words and the button on the left, studio photo on the right.
   Studio photos can be cropped; artwork never is. The hero is only as tall as it needs to be (the photo
   tops out at 58% of the window), so the first row of What's new shows at the bottom of the first screen. */
.hero { padding: clamp(24px, 3vw, 40px) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(24px, 3vw, 40px) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.hero + #newest { padding-top: 24px; }
.hero-inner { display: grid; grid-template-columns: minmax(min-content, 406fr) minmax(0, 742fr); gap: clamp(32px, 4.3vw, 62px); align-items: center; max-width: var(--page); margin: 0 auto; }
.hero h1 { font-size: min(clamp(40px, 2.6vw + 23px, 60px), (100vw - 48px) / 7); line-height: 1.1; text-wrap: wrap; }  /* the second cap keeps "I like painting the" on one line on the smallest phones */
/* always two lines: "I like painting the / joyful part of life", even where both halves would fit on one.
   Each half stays whole; the text column grows to hold the longer one, and on the smallest phones the
   heading shrinks a little instead of breaking a half. */
.hero h1 .phrase { display: block; white-space: nowrap; }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vw, 24px); }
.hero-lede { margin: 0 0 clamp(4px, 1.4vw, 20px); font-size: 20px; line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.hero-photo { display: block; justify-self: end; width: min(100%, 742px, 58svh * 742 / 567); aspect-ratio: 742 / 567; border-radius: 8px; overflow: hidden; background: var(--paper); }  /* Paper shows while it loads */
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 6px; background: var(--cyanotype); color: var(--paper); font-weight: 600; font-size: 18px; line-height: 1.6; text-decoration: none; }

@media (max-width: 759px) {
  .hero { padding-block: 16px 8px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hero-photo { order: -1; justify-self: stretch; width: 100%; aspect-ratio: 342 / 280; }
  .hero-text { gap: 12px; }
  .hero-lede { font-size: 18px; margin-bottom: 4px; max-width: none; }  /* stacked: as wide as the heading */
  .hero-btn { align-self: stretch; padding: 8px 16px; }
}

/* subject filters and subject tags */
/* The chips, with how many pieces are showing at the far right ("11 pieces", quiet Clay gray). When the
   chips wrap, the count drops under them at the left. Its line height is held so filling it in moves nothing. */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.count { margin: 0; color: var(--clay); font-size: 16px; line-height: 34px; min-height: 34px; font-variant-numeric: tabular-nums; }
.filters, .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.filters a, .tags a { border: 1px solid var(--warm-ink); border-radius: 999px; padding: 3px 14px; font-size: 16px; color: var(--warm-ink); text-decoration: none; }
.filters a:hover, .tags a:hover { border-color: var(--cyanotype); color: var(--cyanotype); }
.filters a[aria-current] { background: var(--cyanotype); border-color: var(--cyanotype); color: var(--paper); }
.tags { margin: 4px 0 0; }
.filters a, .tags a { position: relative; }
.filters a::after, .tags a::after { content: ""; position: absolute; inset: -5px -2px; }  /* a 44px-tall tap area around the 34px pill */

/* one piece */
.back { display: inline-flex; align-items: center; min-height: 44px; margin: 14px 0 6px; font-size: 16px; }
.back::before { content: "‹"; margin-right: .3em; }  /* a flex row drops a trailing space, so the gap is a margin */
.piece { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.stage { container-type: inline-size; --mat-pad: clamp(16px, 3vw, 40px); --img-max: min(70vh, 680px); }
/* The mat is as tall as this piece's tallest photo (--tallest = its height / width, measured in site.js),
   so switching photos never moves the page. A single-photo piece gets a mat that fits it exactly. */
.stage .mat { aspect-ratio: auto; height: auto; grid-template: auto / minmax(0, 1fr); padding: var(--mat-pad);
  min-height: max(240px, calc(min(var(--img-max), (100cqw - 2 * var(--mat-pad)) * var(--tallest, 0)) + 2 * var(--mat-pad))); }
.stage .mat img { width: auto; height: auto; max-width: 100%; max-height: var(--img-max); }
/* the photo is a button: click or tap to see it larger */
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom:focus-visible { outline-offset: 4px; }
.thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; scroll-padding-inline: 24px;
  --fade-left: 0px; --fade-right: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--warm-ink) var(--fade-left), var(--warm-ink) calc(100% - var(--fade-right)), transparent);
  mask-image: linear-gradient(to right, transparent, var(--warm-ink) var(--fade-left), var(--warm-ink) calc(100% - var(--fade-right)), transparent); }
/* more photos past an edge: that edge fades out, so the strip reads as scrollable */
.thumbs.more-left { --fade-left: 48px; }
.thumbs.more-right { --fade-right: 48px; }
.thumbs button { scroll-snap-align: start; }
/* phones: say how many photos there are, since the strip runs off the screen */
.photo-count { display: none; margin: 4px 0 0; font-size: 16px; color: var(--clay); }
@media (max-width: 999px) { .photo-count { display: block; } }
.thumbs button { flex: none; width: 64px; height: 64px; padding: 4px; border: 1px solid var(--hairline); background: var(--paper); cursor: pointer; border-radius: 4px; }
.thumbs button[aria-pressed="true"] { border-color: var(--cyanotype); box-shadow: 0 0 0 1px var(--cyanotype); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; }
.gallery { min-width: 0; }
.info { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.info-head { display: flex; flex-direction: column; gap: 6px; }
.info h1 { font-size: clamp(28px, 1.1vw + 21px, 36px); line-height: 1.2; } /* names are long: H2 size */
.facts { margin: 0; color: var(--clay); font-style: italic; }
.info .prose p:last-child, .info .prose ul:last-child { margin-bottom: 0; }
/* the purchase block: price, a button sized to its words, the Etsy note */
.purchase { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.price { margin: 6px 0 0; font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }  /* under the title and details line */
.buy { display: inline-grid; gap: 8px; }  /* several buttons share the widest one's width */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 16px; padding: 12px 32px; border-radius: 6px; background: var(--cyanotype); color: var(--paper); text-decoration: none; font-weight: 600; font-size: 18px; line-height: 1.4; }
.btn, .hero-btn, .nav .nav-contact, .menu-panel .nav-contact { box-shadow: 0 1px 2px rgba(31, 78, 140, .25); transition: transform .15s ease, box-shadow .15s ease, filter .15s; }
@media (hover: hover) { .btn:hover, .hero-btn:hover, .nav .nav-contact:hover, .menu-panel .nav-contact:hover { transform: translateY(-2px); box-shadow: var(--button-lift); filter: brightness(1.1); } }
.btn:active, .hero-btn:active, .nav .nav-contact:active, .menu-panel .nav-contact:active { transform: none; box-shadow: none; }
.btn-price { font-weight: 500; font-variant-numeric: tabular-nums; }
.btn:has(.btn-price) { justify-content: space-between; }  /* several options: label left, price right */
.buy-note { margin: 0; font-size: 16px; line-height: 1.5; color: var(--clay); }
.sold-note { margin: 0; padding: 12px 16px; background: var(--paper); border-radius: 6px; }
.also { margin: 0; }
@media (max-width: 999px) {
  .piece { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .stage { --img-max: min(62vh, 600px); }
}

/* text pages and descriptions */
.prose { max-width: 65ch; }
.prose p, .prose ul { margin: 0 0 14px; white-space: pre-line; }
.prose ul { white-space: normal; padding-left: 22px; }
.prose h2 { font-size: 28px; margin: 24px 0 8px; }
/* print-on-demand specs ("Product features", "Care instructions") fold away under Details */
.spec { margin-top: 16px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.spec summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--cyanotype); font-weight: 500; cursor: pointer; }
.spec summary::marker { color: var(--cyanotype); }
.spec[open] summary { margin-bottom: 4px; }
.spec h2 { font-size: 22px; margin: 12px 0 4px; }

/* the larger view: the photo whole on Sand, a Close button, Escape or a click outside closes it */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 56px var(--gutter) 24px; border: 0; background: transparent; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: color-mix(in srgb, var(--sand) 96%, transparent); }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 96px); width: auto; height: auto; object-fit: contain; background: var(--paper); padding: 12px; box-shadow: var(--shadow); }
.lightbox-close { position: fixed; top: 12px; right: max(var(--gutter), env(safe-area-inset-right, 0px)); min-height: 44px; padding: 0 18px; border: 1px solid var(--cyanotype); border-radius: 999px; background: var(--paper); color: var(--cyanotype); font: 500 16px/1 var(--body); cursor: pointer; }
.lightbox-close:hover { background: var(--cyanotype); color: var(--paper); }

/* read by screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.prose blockquote { margin: 24px 0; font-family: var(--heading); font-weight: 500; font-style: italic; font-size: 26px; line-height: 1.3; }
.page h1 { margin-bottom: 18px; }
.page figure { margin: 20px 0; }
.page figure img { border-radius: 6px; }
.page figcaption { font-size: 16px; line-height: 1.35; color: var(--clay); margin-top: 8px; }
.page figure.float-right { float: right; width: 42%; margin: 4px 0 16px 28px; }
.page figure.float-right img { width: 100%; height: auto; display: block; }
.page .clear { clear: both; }
@media (max-width: 600px) { .page figure.float-right { float: none; width: 100%; margin: 4px 0 20px; } }
.email { font-size: 20px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.email span { user-select: all; }
.link-btn { font: inherit; font-size: 16px; color: var(--cyanotype); background: none; border: 1px solid var(--cyanotype); border-radius: 6px; padding: 2px 12px; cursor: pointer; }

/* footer: badge and email, the studio line, links; then the small print, centered */
.footer { margin-top: clamp(64px, 7.4vw, 107px); border-top: 1px solid var(--cyanotype); padding: 16px 0 24px; color: var(--clay); font-size: 18px; line-height: 1.35; }
.footer-contact a, .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer a { color: var(--cyanotype); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .15s ease, text-decoration-thickness .15s ease; }
.footer-contact a:hover, .footer-links a:hover, .footer-fine a:hover { text-decoration-thickness: 3px; }  /* stays blue; only the underline grows */
.footer-main { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "contact line links" "social . ."; align-items: center; gap: 4px 24px;
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px)); }
.footer-contact { grid-area: contact; display: flex; align-items: center; gap: 21.5px; padding-block: 6px; }
.badge { flex: none; width: 49px; height: 49px; }  /* the simplified badge: it's under 96px */
.footer-line { grid-area: line; margin: 0; color: var(--warm-ink); text-align: center; }
.footer-links { grid-area: links; justify-self: end; display: flex; gap: 29px; padding-right: 28px; }
.social { grid-area: social; display: flex; align-items: center; gap: 10px; padding-left: 62px; }
.social a, .social span { display: grid; place-items: center; min-width: 44px; min-height: 44px; }  /* easy to tap; the icon stays 27px */
.social img { height: 27px; width: auto; }
.social a, .social span { border-radius: 6px; transition: background-color .15s ease, transform .15s ease; }
.social a:hover { background: var(--paper); transform: translateY(-2px); }
.footer-fine { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; padding: 6px var(--gutter) 0; text-align: center; font-size: 16px; line-height: 1.5; }
.footer-fine p { margin: 0; }
.footer-copy { width: min(580px, 100%); padding-top: 16px; border-top: 1px solid rgba(107, 94, 82, .5); }
@media (max-width: 999px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "contact" "links" "line" "social"; justify-items: center; gap: 16px; text-align: center; }
  .footer-contact { flex-direction: column; gap: 8.5px; padding: 0; }
  .badge { width: 33px; height: 33px; }
  .footer-links { justify-self: center; flex-direction: column; align-items: center; gap: 0; padding: 0; }
  .footer-line { margin-top: 8px; }
  .social { padding: 0; gap: 0; }
  .social img { height: 22px; }
  .footer-fine { gap: 8px; margin-top: 24px; }
  .footer-copy { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .card:hover, .room:hover, .btn:hover, .hero-btn:hover, .nav-contact:hover { transform: none !important; } }