/* Layout: an ivory gallery wall — Available hangs in orderly uniform mounts,
   Sold spills into a patchwork salon wall. Double-hairline frame from her card. */
:root {
  --paper: #F7F3E8;
  --mount: #EEE8D7;
  --ink: #4A4A14;
  --ink-soft: #6F6F44;
  --ink-medium: color-mix(in srgb, var(--ink) 71%, var(--ink-soft));
  --rule: rgba(74, 74, 20, .26);
  --rule-strong: rgba(74, 74, 20, .5);
  --delft: #2A4A7A;
  --delft-soft: #55779F;
  --shadow: rgba(74, 74, 20, .13);

  --display: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --wide: 1180px;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper: #15170F;
    --mount: #1E2117;
    --ink: #EFE9D5;
    --ink-soft: #AEAA8D;
    --rule: rgba(239, 233, 213, .2);
    --rule-strong: rgba(239, 233, 213, .42);
    --delft: #9DBCE2;
    --delft-soft: #7E9CC2;
    --shadow: rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #15170F;
  --mount: #1E2117;
  --ink: #EFE9D5;
  --ink-soft: #AEAA8D;
  --rule: rgba(239, 233, 213, .2);
  --rule-strong: rgba(239, 233, 213, .42);
  --delft: #9DBCE2;
  --delft-soft: #7E9CC2;
  --shadow: rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* the hidden attribute must beat any display: rule below (.lb and .prefill
   are flex, which would otherwise keep them on screen and eat clicks) */
[hidden] {
  display: none !important
}

* {
  box-sizing: border-box
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
  line-height: 1.14
}

p {
  margin: 0
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer
}

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

.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r)
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0
}

.framed {
  position: relative;
  padding: 7px;
  border: 1px solid var(--rule-strong)
}

.framed::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--rule);
  pointer-events: none;
  z-index: 1
}

.mark,
.logomark {
  /* these are empty spans tinted through an alpha mask, so they need a
     block box — an inline span ignores width and height and collapses to
     nothing, which is what hid the footer logo. */
  display: block;
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.mark {
  -webkit-mask-image: url(../img/mark.png);
  mask-image: url(../img/mark.png);
  width: 44px;
  height: 38px;
  flex: none
}

.logomark {
  -webkit-mask-image: url(../img/logo.png);
  mask-image: url(../img/logo.png);
  width: 190px;
  height: 156px
}

@supports not ((-webkit-mask-image:url(i.png)) or (mask-image:url(i.png))) {

  .mark,
  .logomark {
    background-color: transparent
  }
}

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.head-in {
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
  padding-block: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
  min-width: 0
}

.brand-name {
  font-family: var(--display);
  font-size: 1.22rem;
  line-height: 1.1;
  white-space: nowrap
}

.brand-sub {
  display: block;
  font-family: var(--sans);
  font-size: .56rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px
}

.nav a {
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s
}

.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule-strong)
}

.nav-cta {
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--rule-strong);
  padding: 9px 16px;
  color: var(--ink);
  transition: background .2s, color .2s
}

.nav-cta:hover {
  background: var(--ink);
  color: var(--paper)
}

.burger {
  display: none;
  background: none;
  border: 1px solid var(--rule-strong);
  padding: 9px 12px;
  line-height: 0
}

.burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink)
}

.burger span+span {
  margin-top: 4px
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--paper)
}

.mobile-nav.open {
  display: block
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px var(--gutter-r) 16px var(--gutter);
  display: grid;
  gap: 2px
}

.mobile-nav a {
  display: block;
  text-decoration: none;
  padding: 11px 0;
  font-size: .95rem;
  border-bottom: 1px solid var(--rule)
}

@media (max-width:860px) {

  .nav,
  .nav-cta {
    display: none
  }

  .burger {
    display: block
  }
}

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(40px, 6vw, 74px) clamp(40px, 6vw, 70px)
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr .92fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: center
}

.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  letter-spacing: -.012em;
  margin-block: 20px 0
}

.hero h1 em {
  font-style: italic;
  color: var(--delft)
}

.hero-lead {
  font-family: var(--display);
  font-size: clamp(1.06rem, 1.7vw, 1.24rem);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 20px
}

.hero-meta {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-size: .78rem;
  color: var(--ink-soft)
}

.hero-meta span {
  display: flex;
  align-items: center;
  gap: 8px
}

.dot {
  width: 5px;
  height: 5px;
  background: var(--delft);
  border-radius: 50%;
  flex: none
}

.hero-art {
  margin: 0
}

.hero-art .framed {
  background: var(--mount);
  box-shadow: 0 18px 44px -26px var(--shadow)
}

.hero-art img {
  width: 100%;
  height: auto
}

.plate {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px
}

.plate-t {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.06rem
}

.plate-m {
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right
}

@media (max-width:820px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .hero-art {
    order: -1
  }
}

/* ---------- the two doors ---------- */
.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  margin-top: 4px
}

@media (max-width:620px) {
  .doors {
    grid-template-columns: 1fr
  }
}

.door {
  position: relative;
  text-align: left;
  background: var(--mount);
  border: 1px solid var(--rule-strong);
  padding: clamp(20px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .25s, border-color .25s, transform .25s;
}

.door:hover {
  border-color: var(--ink);
  transform: translateY(-2px)
}

.door[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper)
}

.door[aria-pressed="true"] .door-n,
.door[aria-pressed="true"] .door-d {
  color: var(--paper);
  opacity: .78
}

.door-t {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.1
}

.door-n {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums
}

.door-d {
  font-size: .88rem;
  color: var(--ink-soft);
  margin-top: 6px;
  max-width: 34ch
}

/* ---------- section furniture ---------- */
.section {
  padding-block: clamp(44px, 6vw, 80px);
  border-top: 1px solid var(--rule)
}

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 30px
}

.sec-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem)
}

.sec-head p {
  color: var(--ink-soft);
  max-width: 50ch;
  margin-top: 10px;
  font-size: .95rem
}

.note {
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: .95rem
}

/* ---------- category blocks (Available) ---------- */
.cat {
  margin-top: clamp(40px, 5vw, 62px)
}

.cat:first-of-type {
  margin-top: 0
}

.cat-head {
  border-top: 1px solid var(--rule-strong);
  padding-top: 16px;
  margin-bottom: 24px;
  display: grid;
  gap: 8px
}

.cat-head h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem)
}

.cat-head p {
  font-size: .92rem;
  color: var(--ink-soft);
  max-width: 62ch
}

.cat-count {
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--delft);
  font-variant-numeric: tabular-nums
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 32px)
}

@media (max-width:900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr)
  }
}



.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 0
}

.card-frame {
  position: relative;
  background: var(--mount);
  aspect-ratio: 1/1;
  overflow: hidden;
  transition: box-shadow .3s
}

.card-frame .shot {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: contain;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1)
}

.card:hover .card-frame {
  box-shadow: 0 16px 36px -22px var(--shadow)
}

.card:hover .shot {
  transform: scale(1.035)
}

.status {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
}

.status.sold {
  color: var(--ink-soft)
}

.status.avail {
  color: var(--delft);
  border-color: var(--delft)
}

.status.gallery {
  color: var(--ink-soft)
}

.card-body {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start
}

.card-title {
  display: block;
  font-family: var(--display);
  font-size: 1.14rem;
  line-height: 1.25
}

.card-spec {
  display: block;
  font-size: .74rem;
  color: var(--ink-soft);
  letter-spacing: .02em
}

/* third line on every card: the canvas size, or the word Placeholder
   until it has been measured — so an unmeasured piece reads as waiting
   rather than as having nothing to say. */
.card-size {
  display: block;
  font-size: .74rem;
  color: var(--ink-soft);
  letter-spacing: .02em
}

/* the price. Set in the display face with lining figures so a column of
   them lines up, and a shade heavier than the specification lines above
   it — it is what a buyer is scanning for. */
.card-price {
  display: block;
  margin-top: 7px;
  font-family: var(--display);
  font-size: 1.06rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* who sold it, when that was the gallery rather than Desireé. Sits in the
   card text instead of the corner badge, which is too narrow on a phone to
   hold a 26-character name without covering the painting. */
.card-via {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  font-style: italic;
  letter-spacing: .02em;
  color: var(--ink-medium);
}

/* The gallery badge carries two spellings; CSS shows one. Above 560px the
   corner badge says it in full. At or below 700px the badge shortens to
   "Available" and the full sentence moves into the card text, where it has
   room to be read instead of covering the painting.

   700 rather than the 560 the other card rules use: the cards are two to a
   row from 900px down, so they get NARROWER as the viewport shrinks until
   560, and the badge wraps into a two-line slab from about 610px. 560 would
   have left the worst case — a 94%-wide, two-line badge at 561px — showing. */
.b-short {
  display: none;
}

.card-via.card-gallery {
  display: none;
}

@media (max-width:700px) {
  .status .b-long {
    display: none;
  }

  .status .b-short {
    display: inline;
  }

  .card-via.card-gallery {
    display: block;
  }
}

/* a caution the photograph alone would get wrong — nearly always that the
   frame in the picture is an optional extra. Italic and delft so it reads
   as a remark rather than another specification. */
.card-note {
  display: block;
  margin-top: 5px;
  font-family: var(--display);
  font-style: italic;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--delft);
}

.lb-note {
  margin-top: 14px;
  font-family: var(--display);
  font-style: italic;
  font-size: .95rem;
  color: var(--delft);
}

/* all-sold state for a category */
.allsold {
  border: 1px solid var(--rule);
  background: var(--mount);
  padding: clamp(22px, 3.4vw, 34px);
  display: grid;
  gap: 12px;
  justify-items: start;
}

.allsold p {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.9vw, 1.34rem);
  line-height: 1.45;
  max-width: 46ch
}

.allsold .sub {
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--ink-soft)
}

/* ---------- sold patchwork ---------- */
.patch {
  column-count: 4;
  column-gap: clamp(12px, 1.8vw, 20px)
}

@media (max-width:1000px) {
  .patch {
    column-count: 3
  }
}

@media (max-width:700px) {
  .patch {
    column-count: 2
  }
}



.tile {
  break-inside: avoid;
  width: 100%;
  display: block;
  margin: 0 0 clamp(12px, 1.8vw, 20px);
  padding: 0;
  border: 0;
  background: var(--mount);
  position: relative;
  overflow: hidden;
  line-height: 0;
  transition: transform .3s, box-shadow .3s;
}

.tile img {
  width: 100%;
  height: auto;
  transition: opacity .3s
}

.tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px var(--shadow);
  z-index: 2
}

.tile:hover img {
  opacity: .92
}

.tile-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 14px 11px;
  line-height: 1.3;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, .76), rgba(0, 0, 0, 0));
  color: #F7F3E8;
  opacity: 0;
  transition: opacity .3s;
}

.tile:hover .tile-cap,
.tile:focus-visible .tile-cap {
  opacity: 1
}

.tile-cap b {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem
}

.tile-cap span {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .82
}

@media (hover:none) {
  .tile-cap {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0))
  }
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px
}

.chip {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 8px 15px;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all .18s;
}

.chip:hover {
  border-color: var(--rule-strong);
  color: var(--ink)
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper)
}

.chip .n {
  font-variant-numeric: tabular-nums;
  opacity: .6;
  margin-left: 6px
}

/* ---------- detail band ---------- */
.band {
  background: var(--mount);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule)
}

.band-in {
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
  padding-block: clamp(40px, 5.5vw, 70px);
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.75fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

.band img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover
}

.quote {
  margin: 0
}

.quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.26rem, 2.2vw, 1.66rem);
  line-height: 1.4;
  font-style: italic
}

.quote figcaption {
  margin-top: 16px;
  font-size: .73rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-soft)
}

@media (max-width:820px) {
  .band-in {
    grid-template-columns: 1fr 1fr
  }

  .quote {
    grid-column: 1/-1
  }
}

/* ---------- about ---------- */
.about {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(30px, 5vw, 66px);
  align-items: start
}

.about-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px
}

.about-portrait {
  margin: 0;
  width: 100%
}

.about-portrait .framed {
  background: var(--mount)
}

.about-portrait img {
  width: 100%;
  height: auto;
  /* 3/4 rather than 1/1: the location photograph is full-length, and a
     square crop of it loses the mountains and cuts her off at the shin.
     Put 1/1 back here if the portrait is ever a head-and-shoulders one. */
  aspect-ratio: 3/4;
  object-fit: cover
}

.about-portrait figcaption {
  margin-top: 12px;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.about-body p+p {
  margin-top: 17px
}

.about-body .first {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.46rem);
  line-height: 1.5
}

.about-body {
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 60ch
}

.about-body strong {
  color: var(--ink);
  font-weight: 500
}

.facts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule)
}

.facts li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: .86rem
}

.facts .k {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--ink-soft);
  font-weight: 600
}

@media (max-width:760px) {
  .about {
    grid-template-columns: 1fr
  }
}

/* ---------- commissions ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px)
}

@media (max-width:760px) {
  .steps {
    grid-template-columns: 1fr
  }
}

.step {
  padding-top: 18px;
  border-top: 1px solid var(--rule-strong)
}

.step-n {
  font-family: var(--display);
  font-size: .9rem;
  letter-spacing: .1em;
  color: var(--delft);
  font-variant-numeric: tabular-nums
}

.step h3 {
  font-size: 1.3rem;
  margin-block: 8px 8px
}

.step p {
  font-size: .92rem;
  color: var(--ink-soft)
}

.comm-ex {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(18px, 3vw, 34px);
  margin-top: clamp(34px, 4vw, 50px);
  align-items: center
}

@media (max-width:760px) {
  .comm-ex {
    grid-template-columns: 1fr
  }
}

.comm-ex img {
  width: 100%;
  height: auto
}

.comm-ex .cap {
  font-size: .9rem;
  color: var(--ink-soft)
}

.comm-ex .cap b {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 8px
}

.sizes {
  margin-top: 40px;
  border-top: 1px solid var(--rule)
}

.size-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule)
}

.size-row .s-name {
  font-family: var(--display);
  font-size: 1.06rem
}

.size-row .s-dim {
  font-size: .76rem;
  color: var(--ink-soft);
  letter-spacing: .04em
}

.size-row .s-price {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

/* ---------- contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: start
}

@media (max-width:820px) {
  .contact {
    grid-template-columns: 1fr
  }
}

.field {
  display: grid;
  gap: 7px;
  margin-bottom: 17px
}

.field label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft)
}

.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: 12px 13px;
  width: 100%;
  border-radius: 0
}

.field textarea {
  resize: vertical;
  min-height: 112px
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--delft);
  outline-offset: 1px;
  border-color: var(--delft)
}

.field .err {
  font-size: .75rem;
  color: var(--delft);
  font-weight: 500
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--delft)
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px
}

@media (max-width:520px) {
  .form-row {
    grid-template-columns: 1fr
  }
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 6px
}

.btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 14px 24px;
  border: 1px solid var(--ink);
  transition: background .2s, color .2s, border-color .2s
}

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

.btn-solid:hover {
  background: transparent;
  color: var(--ink)
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong)
}

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

.sent {
  border: 1px solid var(--delft);
  padding: 24px;
  background: var(--mount)
}

.sent h3 {
  font-size: 1.4rem;
  color: var(--delft)
}

.sent p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: .93rem
}

.contact-card {
  background: var(--mount);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--rule)
}

.contact-card h3 {
  font-size: 1.35rem
}

.ch {
  display: grid;
  gap: 4px;
  padding-block: 16px;
  border-bottom: 1px solid var(--rule)
}

.ch:last-of-type {
  border-bottom: 0
}

.ch .k {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600
}

.ch .v {
  font-family: var(--display);
  font-size: 1.1rem;
  word-break: break-word
}

.ch a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong)
}

.ch a:hover {
  color: var(--delft);
  border-bottom-color: var(--delft)
}

.copy {
  background: none;
  border: 1px solid var(--rule-strong);
  padding: 5px 10px;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  justify-self: start;
  margin-top: 5px;
  transition: all .2s
}

.copy:hover {
  color: var(--ink);
  border-color: var(--ink)
}

/* ---------- lightbox ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
  padding: max(18px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(18px, env(safe-area-inset-bottom, 0px)) var(--gutter);
}

.lb-in {
  max-width: 1020px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: center
}

.lb-img {
  background: var(--mount);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0
}

.lb-img img {
  max-height: min(72vh, 660px);
  width: auto;
  max-width: 100%;
  object-fit: contain
}

.lb-info h3 {
  font-size: clamp(1.45rem, 2.8vw, 2rem)
}

.lb-dl {
  margin: 18px 0 0;
  border-top: 1px solid var(--rule)
}

.lb-dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: .86rem
}

.lb-dl dt {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .66rem;
  color: var(--ink-soft);
  font-weight: 600
}

.lb-dl dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums
}

.lb-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  width: 40px;
  height: 40px;
  line-height: 1;
  font-size: 1.1rem
}

.lb-nav {
  display: flex;
  gap: 10px;
  margin-top: 20px
}

.lb-nav button {
  background: none;
  border: 1px solid var(--rule-strong);
  width: 42px;
  height: 42px;
  font-size: 1rem
}

.lb-nav button:hover {
  border-color: var(--ink)
}

.lb-cta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.lb-gal {
  margin-top: 14px;
  font-size: .86rem;
  color: var(--ink-soft)
}

.lb-gal a {
  color: var(--delft)
}

@media (max-width:820px) {
  .lb-in {
    grid-template-columns: 1fr;
    align-content: start
  }

  .lb-img img {
    max-height: 44vh
  }
}

/* ---------- footer ---------- */
.foot {
  background: var(--mount);
  border-top: 1px solid var(--rule)
}

.foot-in {
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
  padding-block: 52px 34px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 34px
}

@media (max-width:760px) {
  .foot-in {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

.foot h4 {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-weight: 600
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: .9rem
}

.foot a {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .2s
}

.foot a:hover {
  color: var(--ink)
}

.foot-bar {
  border-top: 1px solid var(--rule);
  max-width: var(--wide);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
  padding-block: 18px 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--ink-soft)
}

.draft-note {
  font-style: italic;
  font-family: var(--display);
  font-size: .84rem
}

@media (prefers-reduced-motion:no-preference) {
  .rise {
    animation: rise .85s cubic-bezier(.2, .7, .25, 1) backwards
  }

  .d1 {
    animation-delay: .05s
  }

  .d2 {
    animation-delay: .14s
  }

  .d3 {
    animation-delay: .23s
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px)
    }

    to {
      opacity: 1;
      transform: none
    }
  }
}

/* ---------- added for the multi-page layout ---------- */

/* current page marker in the nav */
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.mobile-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* page header used at the top of each inner page */
.page-head {
  padding-block: clamp(34px, 5vw, 60px) clamp(26px, 3.5vw, 40px);
}

.page-head h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  letter-spacing: -.012em;
  margin-top: 14px;
}

.page-head .lead {
  font-family: var(--display);
  font-size: clamp(1.04rem, 1.7vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-top: 16px;
}

/* first section on an inner page sits under the page head, so no extra rule */
.section.first {
  border-top: 1px solid var(--rule);
}

/* home: the two big entry cards */
.home-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.4vw, 26px);
  margin-top: clamp(28px, 4vw, 44px);
}

@media (max-width:620px) {
  .home-doors {
    grid-template-columns: 1fr
  }
}

.home-door {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  background: var(--mount);
  border: 1px solid var(--rule-strong);
  padding: clamp(20px, 3vw, 30px);
  transition: background .25s, border-color .25s, transform .25s;
}

.home-door:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.home-door .door-t {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.1;
}

/* about teaser on the home page */
.about-teaser {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

@media (max-width:760px) {
  .about-teaser {
    grid-template-columns: 1fr
  }
}

.about-teaser .quote-lead {
  font-family: var(--display);
  font-size: clamp(1.18rem, 2vw, 1.46rem);
  line-height: 1.5;
}

.about-teaser p+p {
  margin-top: 15px;
  color: var(--ink-soft);
  font-size: .98rem;
}

/* enquiry prefill notice on the contact page */
.prefill {
  border: 1px solid var(--delft);
  background: var(--mount);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: .9rem;
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
}

.prefill b {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 4vw, 40px);
}

/* ---------- home: the rotating slideshow ---------- */
.slideshow {
  position: relative;
  background: var(--mount);
  aspect-ratio: 4/3;
  overflow: hidden;
  box-shadow: 0 18px 44px -26px var(--shadow);
}

.slideshow img {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.slideshow img.on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow img {
    transition: none
  }
}

/* ---------- mobile: hold the desktop rhythm ---------- */
@media (max-width:820px) {

  /* a full-bleed hero image on a phone swamps everything under it */
  .hero-art {
    max-width: 440px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width:760px) {
  .about-portrait {
    max-width: 320px;
  }

  .comm-ex img {
    max-width: 440px;
  }
}

@media (max-width:560px) {

  /* two up rather than one giant card per screen */
  .grid {
    gap: 14px;
  }

  .patch {
    column-gap: 10px;
  }

  .tile {
    margin-bottom: 10px;
  }

  .card-title {
    font-size: 1rem;
  }

  .card-spec,
  .card-size {
    font-size: .68rem;
  }

  .status {
    font-size: .52rem;
    padding: 3px 6px;
    top: 9px;
    right: 9px;
  }

  .band img {
    aspect-ratio: 1/1;
  }

  .hero-art {
    max-width: 340px;
  }

  .about-portrait {
    max-width: 260px;
  }
}

/* the band already draws a full-width rule along its bottom edge; the next
   section's own top rule is inset to the content width, so the two stack and
   the translucent colour doubles over that stretch. Keep the band's. */
.band+.section {
  border-top: 0
}

/* the two doors, sitting under the quote inside the band */
.band-doors {
  grid-column: 1 / -1;
  margin-top: clamp(12px, 2.2vw, 26px);
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--rule);
}

/* the band is already --mount, so the doors need the paper tone to read */
.band-doors .home-door {
  background: var(--paper);
}

.band-doors .home-door:hover {
  background: var(--mount);
}

/* ================================================================
   v2 — Desireé's restructure
   The home page is deliberately bare: one canvas, the tagline, and
   three ways to reach her. Everything that used to crowd it (the hero
   copy, the detail band, the two doors, the about teaser) is gone.
   ================================================================ */

.home-one {
  padding-block: clamp(32px, 5vw, 64px) clamp(34px, 5vw, 60px);
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vw, 44px);
}

/* One canvas, sized to stay whole on a phone and generous on a desktop.
   The frame rule comes from .framed; the image fills it. */
.hero-one {
  margin: 0;
  width: min(100%, 620px);
}

.hero-one .framed {
  background: var(--mount);
  box-shadow: var(--shadow);
}

.hero-one img {
  display: block;
  width: 100%;
  height: auto;
}

.tagline {
  font-family: var(--display);
  font-size: clamp(1.45rem, 3.6vw, 2.3rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  text-align: center;
  /* the whole line now reads as one voice — the blue italic that used to
     be only the second half. The <em> in the markup stays for emphasis
     but no longer changes how it looks. */
  font-style: italic;
  color: var(--delft);
  /* the <br> sets the one break that matters; a width tight enough to force
     a second one breaks it after "life's", which reads badly. */
  max-width: 38ch;
  margin: 0;
}

/* ---------- home: side by side on desktop only ----------
   Everything above is the phone layout and stays untouched, because that
   is the only view Desireé reviews from. This block is additive and fires
   from 900px up: the canvas and the tagline sit as two columns, the text
   left-aligned against it rather than centred under it.

   On desktop the column width below is what sizes the canvas — .hero-one's
   own min(100%, 620px) cap only governs phone and tablet from here on. */
@media (min-width:1160px) {
  .home-one {
    /* max-content + justify-content centres the painting and the tagline
       as a single pair, rather than anchoring them left and leaving the
       right third of the window empty. */
    grid-template-columns: minmax(0, 520px) max-content;
    justify-content: center;
    align-items: center;
    justify-items: start;
    gap: clamp(40px, 5vw, 80px);
    padding-block: clamp(44px, 5.5vw, 84px);
  }

  .hero-one {
    width: 100%;
  }

  .tagline {
    text-align: left;
    /* "Capturing life's brightest moments;" needs 29ch to stay on one
       line — 30 leaves a little margin. The <br> then makes the only
       other break, so the tagline reads as two lines, not four. */
    max-width: 30ch;
  }
}

/* ---------- connect ---------- */
.connect {
  border-top: 1px solid var(--rule-strong);
  background: var(--mount);
}

.connect-in {
  padding-block: clamp(30px, 4vw, 48px);
  display: grid;
  gap: 22px;
}

.connect-h {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}

.connect-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
}

.connect-item {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  padding: 18px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}

.connect-item:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}

.connect-item .k {
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}

.connect-item .v {
  font-family: var(--display);
  font-size: clamp(.98rem, 1.6vw, 1.1rem);
  color: var(--delft);
  overflow-wrap: anywhere;
}

@media (max-width:700px) {
  .connect-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- archive sub-headings ----------
   The six headings are h2 here (they are the page's real structure, not
   decoration inside a section), so mirror the h3 sizing they had. */
.cat-head h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
}

@media (prefers-reduced-motion: reduce) {
  .connect-item {
    transition: none;
  }

  .connect-item:hover {
    transform: none;
  }
}