/* Phase 1: approved foundations and header/footer composition. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/art-direction/fonts/cormorant-garamond-regular.woff") format("woff");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/art-direction/fonts/cormorant-garamond-italic.woff") format("woff");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/art-direction/fonts/inter-regular.woff") format("woff");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/art-direction/fonts/inter-medium.woff") format("woff");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/art-direction/fonts/inter-semibold.woff") format("woff");
}
:root {
  --ink: #2e191b;
  --wine-900: #46171d;
  --wine-800: #551c2b;
  --wine-700: #6b2230;
  --wine: var(--wine-800);
  --rust: #a34d3b;
  --parchment: #f6f1e7;
  --cream: #fbf7f0;
  --peach: #e8cdb6;
  --border: #d6c5b5;
  --line: var(--border);
  --muted: #675957;
  --gold: #aa8973;
  --accent: var(--gold);
  --paper: var(--parchment);
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: Inter, Arial, Helvetica, sans-serif;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --radius: 0;
  --layer-wash: -2;
  --layer-botanical: -1;
  --layer-content: 1;
  --layer-foreground: 2;
  --motion-subtle: 220ms;
  --motion-medium: 480ms;
  --motion-reveal: 700ms;
  --ease-editorial: cubic-bezier(.22,.65,.3,1);
  --ease-organic: cubic-bezier(.37,0,.35,1);
  font-family: var(--font-body);
  background: var(--parchment);
  color: var(--ink);
}
body {
  overflow-x: clip;
  font-family: var(--font-body);
  background: var(--parchment);
  color: var(--ink);
}
h1, h2, h3, .brand, .footer-word { font-family: var(--font-display); }
p { font-size: 1rem; }
.brand span { font-family: var(--font-body); }
.eyebrow, .number { letter-spacing: .12em; }
::selection { color: var(--cream); background: var(--wine-700); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 4px;
}
.hero :where(a, button):focus-visible,
footer a:focus-visible { outline-color: var(--cream); }

/* A quiet white masthead opens the painted composition. */
header {
  padding: .5rem max(12vw,calc((100vw - 1400px)/2));
  min-height: 72px; gap: 1.5rem; position: relative; isolation: isolate;
  border-bottom: 1px solid var(--border); background: #fff;
}
header::before { content: none; }
.brand { color: var(--ink); font-size: 1.875rem; line-height: 1; letter-spacing: -.035em; }
.brand span { margin-top: .35rem; font-size: .5625rem; letter-spacing: .13em; }
nav a { min-height: 44px; display: inline-flex; align-items: center; }
nav { gap: clamp(1.25rem,2.5vw,2.75rem); }
nav, .languages { font-size: .875rem; }
nav a, .languages button { transition: color .18s, border-color .18s; }
nav a:hover, .languages button:hover { color: var(--wine-700); }
.languages button { min-height: 44px; min-width: 36px; }
.languages button[aria-pressed=true] { font-weight: 600; }
.skip { z-index: 20; }

/* Live HTML controls inherit the system; SVG specimens are not interactive UI. */
.button {
  min-height: 52px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.button.light {
  background: var(--cream);
  border-color: var(--border);
  color: var(--wine-800);
}
.button.light:hover { background: var(--parchment); border-color: var(--gold); }
.inquiry .button.light {
  background: var(--wine-800);
  border-color: var(--wine-800);
  color: var(--cream);
}
.inquiry .button.light:hover { background: var(--wine-700); border-color: var(--wine-700); }
.text-link { color: var(--wine-700); font-size: .875rem; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }
.hero-controls button { min-width: 44px; border-radius: var(--radius); }
.hero-controls button:hover { background: rgba(251,247,240,.1); }
.work, .artist, .process, .faq { background: var(--parchment); }
.occasions { background: var(--cream); }
.inquiry { background: var(--peach); color: var(--ink); }
.inquiry h2 em { color: var(--wine-700); }
.inquiry p, .inquiry .small, .inquiry .eyebrow { color: var(--muted); }
label { font-size: .875rem; line-height: 1.5; }
.inquiry input, .inquiry select, .inquiry textarea {
  border: 1px solid #a58b7b;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--cream);
  color-scheme: light;
  padding: .75rem;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}
.inquiry :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--wine-700);
  outline-offset: 2px;
}
.inquiry select option { background: var(--cream); color: var(--ink); }
.inquiry .copy-button {
  min-height: 44px;
  color: var(--wine-800);
  background: var(--cream);
  border-color: #a58b7b;
  border-radius: var(--radius);
}
.inquiry .copy-button:hover { background: var(--parchment); }
#message-result { border-color: #a58b7b; }
.art-open {
  border: 1px solid var(--border);
  background: #eee4d7;
  transition: background .18s, border-color .18s;
}
.art-open:hover { background: #e9dccb; border-color: var(--gold); }
.art-expand { background: var(--cream); color: var(--wine-800); }
.work-card figcaption, .steps article, .occasion-grid>a, .faq details { border-color: var(--border); }
.work-card figcaption { font-size: .875rem; }
.work-card small { font-size: .75rem; }
.faq details { padding: 0; }
.faq summary { list-style: none; position: relative; padding: 1.25rem .25rem 1.25rem 1.75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  position: absolute;
  top: 1.25rem;
  left: .125rem;
  color: var(--wine-700);
  font-weight: 600;
}
.faq details[open] summary::before { content: "−"; }
.faq details p { margin: 0 0 1.25rem 1.75rem; font-size: 1rem; }
#art-viewer { background: var(--cream); }
#art-media img { height: auto; max-height: 75svh; }
.viewer-toolbar button { border-color: var(--border); }
.viewer-toolbar button:hover { background: var(--parchment); }

/* The title and fox occupy separate columns, clear of the paper transition. */
footer {
  box-shadow: inset 0 22px 20px -15px var(--parchment);
  border-top: 0;
  padding-top: clamp(90px, 7vw, 135px);
  padding-bottom: 2rem;
  color: var(--cream);
  background: transparent;
}
/* A single painted surface overlaps the shared paper; no solid-color seam. */
footer::before {
  content: "";
  position: absolute;
  inset: -64px 0 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--wine-900);
  background-image: url("assets/art-direction/footer/sanguine-artz-footer-background@1x.webp");
  background-image: image-set(
    url("assets/art-direction/footer/sanguine-artz-footer-background@1x.webp") 1x,
    url("assets/art-direction/footer/sanguine-artz-footer-background@2x.webp") 2x,
    url("assets/art-direction/footer/sanguine-artz-footer-background@3x.webp") 3x,
    url("assets/art-direction/footer/sanguine-artz-footer-background@4x.webp") 4x
  );
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom,transparent,#000 128px);
  mask-image: linear-gradient(to bottom,transparent,#000 128px);
}

footer .footer-signature {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  gap: 1rem;
}
footer .footer-signature .footer-word {
  width: auto;
  min-width: 0;
  font-size: clamp(2.25rem,5.7vw,6rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  color: var(--cream);
  white-space: normal;
}
footer .footer-signature .footer-mascot {
  position: static;
  width: clamp(200px,20vw,280px);
  justify-self: center;
  align-self: center;
  margin: 0;
  transform: none;
  pointer-events: none;
}
footer .footer-signature .footer-mascot img {
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
}
footer .footer-bottom { color: #ead7d0; border-color: rgba(251,247,240,.28); margin-top: 1.5rem; font-size: .75rem; }
footer .footer-bottom a { color: var(--cream); text-underline-offset: 4px; }
footer .footer-bottom a:hover { text-decoration: underline; }
@media (max-width:760px) {
  .brand { font-size: 1.875rem; }
  .brand span { font-size: .75rem; letter-spacing: .08em; }
  header { padding: .75rem 6vw .35rem; gap: .5rem; min-height: 0; }
  header .brand { font-size: 1.75rem; }
  header .brand span { font-size: .5rem; margin-top: .35rem; }
  header nav { width: 100%; justify-content: space-between; }
  .languages { margin-left: auto; gap: 3px; }
  nav { gap: 12px; flex-wrap: wrap; }
  footer { padding-top: 150px; padding-bottom: 1.5rem; }
  footer::before { background-size: cover; }
  footer .footer-signature { grid-template-columns: 1fr; gap: 1rem; }
  footer .footer-signature .footer-word { font-size: clamp(2.75rem,10vw,4.5rem); text-align: center; }
  footer .footer-signature .footer-mascot { width: min(64%, 235px); }
  footer .footer-bottom { gap: .75rem 1.5rem; margin-top: 1.25rem; }
  .hero-controls button { min-height: 36px; }
}
@media (prefers-reduced-motion:reduce) {
  nav a, .languages button, .button, .art-open { transition: none; }
  .button:hover { transform: none; }
}