/* =========================================================================
   Marie-Pierre Arpin Bott — atelier
   A quiet gallery: alabaster ground, antique gold hairlines, no pure black.
   ========================================================================= */

:root{
  --alabaster: #F3EBDD;   /* primary background */
  --ivory: #FAF7EF;       /* artwork / card mounting background */
  --parchment: #E9DDC7;   /* secondary background, used sparingly */
  --espresso: #2A211B;    /* primary text + darkest tone in the palette (no black) */
  --taupe: #6E5D4D;       /* secondary text */
  --gold: #B99558;        /* antique champagne gold — fine borders, active states, numbering */
  --gold-light: #CBAE7E;  /* muted, lighter gold tint for accents on dark grounds */
  --olive: #41483A;       /* natural accent, used extremely sparingly (oil section) */
  --hair: rgba(42,33,27,0.14);
  --hair-soft: rgba(42,33,27,0.08);

  /* mounting shadows — soft, warm, never grey */
  --lift-1: 0 2px 6px -2px rgba(42,33,27,0.10);
  --lift-2: 0 18px 40px -22px rgba(42,33,27,0.30);
  --lift-3: 0 44px 88px -38px rgba(42,33,27,0.36);

  --ease: cubic-bezier(.22,.61,.36,1);
  --measure: 64ch;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important; animation-iteration-count:1 !important;}
}

body{
  background: var(--alabaster);
  color: var(--espresso);
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Palatino, Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

/* the faintest laid-paper tooth — barely there, but it stops the ground
   reading as flat screen-white and gives the mounts something to sit on */
body::before{
  /* sits above the page furniture but below the lightbox (500). It must NOT
     be paired with a z-index on body's children: that would make <main> a
     stacking context and trap the lightbox beneath the fixed header. */
  content:''; position:fixed; inset:0; z-index:400; pointer-events:none;
  opacity:0.5; mix-blend-mode:multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
::selection{ background: var(--gold); color: var(--alabaster); }
a{ color: inherit; }
img{ max-width:100%; display:block; }

.label{
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe);
}

h1,h2,h3{
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-weight: 350;
  font-optical-sizing: auto;
  letter-spacing: -0.008em;
  color: var(--espresso);
  text-wrap: balance;
}

p{ text-wrap: pretty; }

.hairline{ height:1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }

.chapter-mark{
  font-family:'Fraunces', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 13px; letter-spacing: 0.3em; color: var(--gold);
  margin-bottom: 16px; text-align:center;
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--espresso); color: var(--ivory); padding: 12px 20px;
  font-family:'Inter', system-ui, sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  z-index: 999; text-decoration:none;
}
.skip-link:focus{ left: 16px; top: 16px; }

/* ============ NAV ============
   NOTE: the blur lives on ::before, never on the header itself. A
   backdrop-filter on the header would make it the containing block for
   position:fixed descendants, which would trap the mobile menu inside the
   header bar instead of letting it cover the screen. */
header.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px 5vw;
  transition: padding 0.5s var(--ease);
}
header.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(to bottom, rgba(243,235,221,0.97), rgba(243,235,221,0.86) 70%, rgba(243,235,221,0));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* once the page has moved, the bar firms up and lays down a gold hairline */
header.site-header.scrolled{ padding: 17px 5vw; }
header.site-header.scrolled::before{
  background: rgba(243,235,221,0.94);
  box-shadow: 0 1px 0 0 rgba(185,149,88,0.28), var(--lift-1);
}

.mark{
  font-family:'Fraunces', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 20px; letter-spacing: 0.03em; color: var(--espresso);
  text-decoration:none; white-space: nowrap;
  display:flex; align-items:center; min-height: 44px;
}
.mark em{ color: var(--gold); font-style: normal; }

nav.links{ display:flex; gap: 38px; }
nav.links a{
  font-family:'Inter', system-ui, sans-serif; font-weight: 400;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration:none; color: var(--taupe);
  position:relative; padding-bottom: 5px;
  transition: color 0.4s var(--ease);
}
nav.links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--gold); transition: width 0.5s var(--ease);
}
nav.links a:hover{ color: var(--espresso); }
nav.links a:hover::after, nav.links a:focus-visible::after, nav.links a.active::after{ width:100%; }
nav.links a.active{ color: var(--gold); }

.lang-toggle{
  display:flex; align-items:center; gap: 6px;
  font-family:'Inter', system-ui, sans-serif; font-size: 11px; letter-spacing:0.15em;
}
.lang-toggle button{
  background:none; border:none; cursor:pointer;
  min-width: 44px; min-height: 44px;              /* real tap target */
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--taupe); font-family: inherit; font-size: inherit; letter-spacing: inherit;
  position: relative;
  transition: color 0.4s var(--ease);
}
.lang-toggle button::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%); bottom: 11px;
  width:0; height:1px; background: var(--gold); transition: width 0.4s var(--ease);
}
.lang-toggle button.active{ color: var(--gold); }
.lang-toggle button.active::after{ width: 22px; }
.lang-toggle button:hover{ color: var(--espresso); }
.lang-toggle .div{ color: var(--hair); }
.lang-toggle button:focus-visible, nav.links a:focus-visible, .mark:focus-visible,
.nav-burger:focus-visible{ outline: 1px solid var(--gold); outline-offset: 3px; }

.nav-burger{
  display:none; background:none; border:1px solid var(--hair); border-radius: 50%;
  width:44px; height:44px; cursor:pointer; color: var(--espresso);
  font-size: 15px; line-height:1;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.nav-burger:hover{ border-color: var(--gold); color: var(--gold); }

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

@media (max-width: 900px){
  header.site-header{ padding: 16px 5vw; }
  header.site-header.scrolled{ padding: 12px 5vw; }

  /* full-screen menu — an ivory page that slides down over the work */
  nav.links{
    position:fixed; inset: 0; z-index: 200;
    background: var(--ivory);
    flex-direction: column; align-items:center; justify-content:center; gap: 0;
    transform: translateY(-101%);
    transition: transform 0.66s var(--ease);
    padding: 96px 8vw 40px;
    overflow-y: auto;
  }
  nav.links.open{ transform: translateY(0); }
  nav.links a{
    font-family:'Fraunces', Georgia, serif; font-style: italic;
    font-size: clamp(24px, 7vw, 34px); font-weight: 350;
    letter-spacing: 0.01em; text-transform: none; color: var(--espresso);
    padding: 15px 8px; min-height: 44px; display:flex; align-items:center;
    opacity: 0; transform: translateY(12px);
  }
  nav.links a::after{ left:50%; transform:translateX(-50%); bottom: 9px; }
  nav.links a.active{ color: var(--gold); }
  nav.links.open a{ animation: menuIn 0.62s var(--ease) both; }
  nav.links.open a:nth-child(1){ animation-delay: 0.10s; }
  nav.links.open a:nth-child(2){ animation-delay: 0.16s; }
  nav.links.open a:nth-child(3){ animation-delay: 0.22s; }
  nav.links.open a:nth-child(4){ animation-delay: 0.28s; }
  nav.links.open a:nth-child(5){ animation-delay: 0.34s; }
  nav.links.open a:nth-child(6){ animation-delay: 0.40s; }

  .nav-burger{ display:block; position: relative; z-index: 210; }
  /* the monogram and the language pair ride above the menu so the page
     keeps its signature and the reader can still switch tongue mid-menu */
  .lang-toggle{ position: relative; z-index: 210; }
  .mark{ position: relative; z-index: 210; }
}
@keyframes menuIn{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

/* a hairline rule under the menu items, drawn only on the phone menu */
@media (max-width: 900px){
  nav.links::after{
    content:''; width: 44px; height:1px; background: var(--gold);
    margin-top: 30px; opacity: 0; transition: opacity 0.5s var(--ease) 0.5s;
  }
  nav.links.open::after{ opacity: 1; }
}

/* ============ HERO (home) — framed, gallery-wall treatment ============ */
.hero-framed{
  padding: 200px 6vw 128px;
  background:
    radial-gradient(ellipse 900px 600px at 88% 8%, rgba(185,149,88,0.12), transparent 60%),
    radial-gradient(ellipse 700px 500px at 4% 95%, rgba(65,72,58,0.05), transparent 60%),
    var(--alabaster);
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 9vw; align-items:center;
}
.hero-text .label{ margin-bottom: 26px; }
.hero-text h1{
  font-weight: 300; font-style: italic; color: var(--espresso);
  font-size: clamp(38px, 4.6vw, 66px); line-height: 1.13; letter-spacing: -0.012em;
}
.hero-text .lede{
  margin-top: 30px; max-width: 40ch; font-size: 19.5px; color: var(--taupe);
  line-height: 1.72;
}
.hero-text .cta{
  display:inline-block; margin-top: 46px; font-family:'Inter', system-ui, sans-serif; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; text-decoration:none;
  color: var(--espresso); border-bottom: 1px solid var(--gold);
  padding: 10px 2px 12px; transition: letter-spacing 0.5s var(--ease), color 0.5s var(--ease);
}
.hero-text .cta:hover{ letter-spacing: 0.32em; color: var(--gold); }

.hero-art{ position:relative; }
.hero-art-frame{
  padding: 18px; border: 1px solid var(--gold); background: var(--ivory);
  box-shadow: var(--lift-3);
}
.hero-art-inner{ padding: 3px; border: 1px solid var(--parchment); }
.hero-art-frame .swatch{ aspect-ratio: 1/1; overflow:hidden; }
.hero-art-frame img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-art-cap{
  margin-top: 22px; text-align:center;
  font-family:'Inter', system-ui, sans-serif; font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--taupe);
}

/* slow, quiet entrance — respects prefers-reduced-motion via the global rule above */
@keyframes riseIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
.hero-text > *{ animation: riseIn 1.1s var(--ease) both; }
.hero-text .label{ animation-delay: 0.05s; }
.hero-text h1{ animation-delay: 0.18s; }
.hero-text .lede{ animation-delay: 0.34s; }
.hero-text .cta{ animation-delay: 0.5s; }
.hero-art{ animation: riseIn 1.3s var(--ease) 0.3s both; }

@media (max-width: 900px){
  .hero-framed{ padding: 140px 7vw 84px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 52px; }
  .hero-art{ max-width: 420px; margin: 0 auto; order: -1; }
  .hero-text h1{ font-size: clamp(33px, 9vw, 46px); }
  .hero-text .lede{ font-size: 18px; }
}

/* ============ PAGE HERO (interior pages) ============ */
.page-hero{
  padding: 200px 6vw 104px;
  background:
    radial-gradient(ellipse 1000px 600px at 50% 0%, rgba(185,149,88,0.12), transparent 62%),
    var(--alabaster);
  text-align:center;
}
.page-hero.tone-light{
  background:
    radial-gradient(ellipse 1000px 600px at 50% 0%, rgba(185,149,88,0.10), transparent 62%),
    var(--ivory);
}
.page-hero.tone-warm{
  background:
    radial-gradient(ellipse 1000px 600px at 50% 0%, rgba(65,72,58,0.08), transparent 62%),
    var(--parchment);
}
.page-hero .label{ margin-bottom: 22px; }
.page-hero h1{ font-size: clamp(40px, 6vw, 70px); font-weight: 300; font-style: italic; letter-spacing:-0.012em; }
.page-hero .rule{ width: 56px; height:1px; background: var(--gold); margin: 30px auto 0; }
.page-hero .intro{
  max-width: 62ch; margin: 40px auto 0; color: var(--taupe); font-size: 18.5px; line-height: 1.9;
  text-align:left;
}
section.tone-light{ background: var(--ivory); }
section.tone-warm{ background: var(--parchment); }

/* ============ SECTION SHELL ============ */
main{ display:block; }
section{ padding: 132px 6vw; position:relative; }
.section-inner{ max-width: 1240px; margin: 0 auto; }

/* ============ GALLERY ============ */
.gallery-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 64px 44px;
  counter-reset: piece;
}
.piece{ cursor:pointer; }
.piece .frame{
  padding: 14px; border: 1px solid var(--hair);
  background: var(--ivory);
  box-shadow: var(--lift-1);
  transition: border-color 0.55s var(--ease), box-shadow 0.55s var(--ease), transform 0.55s var(--ease);
}
.piece:hover .frame, .piece:focus-within .frame{
  border-color: var(--gold);
  box-shadow: var(--lift-2);
  transform: translateY(-3px);
}
/* a hair of mat board inside the frame — the bevel a real mount would cast */
.piece .swatch{
  aspect-ratio: 4/5; position:relative; overflow:hidden;
  box-shadow: inset 0 0 0 1px var(--hair-soft);
}
.piece .swatch img{
  width:100%; height:100%; object-fit: cover; display:block;
  transition: transform 1.1s var(--ease);
}
.piece:hover .swatch img{ transform: scale(1.03); }
.piece .info{ padding: 20px 4px 4px; text-align:left; }
.piece .p-title{ font-family:'Fraunces', Georgia, serif; font-style: italic; font-size: 19px; font-weight: 350; line-height:1.35; }
.piece .p-title::before{
  counter-increment: piece;
  content: "N° " counter(piece, decimal-leading-zero) "  ";
  font-family:'Inter', system-ui, sans-serif; font-style:normal; font-size: 0.5em;
  letter-spacing: 0.14em; color: var(--gold); vertical-align: middle;
}
.piece .p-meta{ font-family:'Inter', system-ui, sans-serif; font-size: 10px; letter-spacing:0.12em; margin-top:9px; text-transform: uppercase; color: var(--taupe);}
.piece .p-desc{ margin-top: 10px; font-size: 15px; color: var(--taupe); font-style: italic; }
.piece .p-meta .tbd{ color: var(--gold); opacity: 0.8; }
.piece button.p-open{
  all:unset; cursor:pointer; display:block; width:100%;
}
.piece button.p-open:focus-visible{ outline: 1px solid var(--gold); outline-offset: 4px; }

/* oil section: numbering and tiny accents shift from gold to olive */
.oil-tone .piece .p-title::before{ color: var(--olive); }
.oil-tone .piece .p-meta .tbd{ color: var(--olive); }

/* ============ QUIET REVEAL ON SCROLL ============ */
.reveal{ opacity: 0; transform: translateY(18px); }
.reveal.in{ opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ============ LIGHTBOX ============ */
.lightbox{
  position: fixed; inset:0; z-index: 500; display:none;
  background: rgba(28,22,18,0.96);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items:center; justify-content:center;
  padding: 6vh 6vw;
}
.lightbox.open{ display:flex; animation: lbFade 0.45s var(--ease) both; }
@keyframes lbFade{ from{opacity:0} to{opacity:1} }
.lightbox-inner{ max-width: 1100px; width:100%; text-align:center; }
.lightbox-inner img{
  max-height: 76vh; max-width: 100%; margin: 0 auto; object-fit: contain;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.75);
  animation: lbRise 0.6s var(--ease) both;
}
@keyframes lbRise{ from{opacity:0; transform: scale(0.985)} to{opacity:1; transform:none} }
.lightbox-cap{ color: var(--ivory); margin-top: 26px; }
.lightbox-cap .lb-title{ font-family:'Fraunces', Georgia, serif; font-style:italic; font-size: 22px; font-weight:350; }
.lightbox-cap .lb-meta{ font-family:'Inter', system-ui, sans-serif; font-size: 11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--gold-light); margin-top:9px; }
.lightbox-cap .lb-count{
  font-family:'Inter', system-ui, sans-serif; font-size: 10px; letter-spacing: 0.22em;
  color: rgba(250,247,239,0.42); margin-top: 14px; text-transform: uppercase;
}
.lb-close, .lb-prev, .lb-next{
  position:fixed; background:none; border:1px solid rgba(250,247,239,0.34); color: var(--ivory);
  cursor:pointer; border-radius:50%; width:48px; height:48px;
  font-family:'Inter', system-ui, sans-serif; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.lb-close{ top: 24px; right: 5vw; }
.lb-prev{ left: 4vw; top:50%; transform: translateY(-50%); }
.lb-next{ right: 4vw; top:50%; transform: translateY(-50%); }
.lb-close:hover{ background: rgba(250,247,239,0.1); border-color: var(--gold-light); transform: rotate(90deg); }
.lb-prev:hover, .lb-next:hover{ background: rgba(250,247,239,0.1); border-color: var(--gold-light); }
.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible{ outline: 1px solid var(--gold-light); outline-offset: 3px; }
@media (max-width: 700px){
  .lightbox{ padding: 7vh 4vw 15vh; }
  .lightbox-inner img{ max-height: 58vh; }
  /* on a phone the plate fills the width, so the arrows move out from behind
     it into a thumb-reachable pair at the foot of the screen (swipe also works) */
  .lb-prev, .lb-next{ top:auto; bottom: 26px; transform:none; }
  .lb-prev{ left: calc(50% - 62px); }
  .lb-next{ right: calc(50% - 62px); }
  .lb-close{ right: 14px; top: 14px; }
  .lb-prev, .lb-next, .lb-close{ width: 46px; height: 46px; }
  .lightbox-cap{ margin-top: 20px; }
  .lightbox-cap .lb-title{ font-size: 19px; }
}

/* ============ ABOUT ============ */
.about-grid{
  display:grid; grid-template-columns: 0.76fr 1.24fr; gap: 100px; align-items:start;
}
.portrait-frame{ padding: 18px; border: 1px solid var(--gold); background: var(--ivory); position: sticky; top: 128px; box-shadow: var(--lift-2); }
.portrait-inner{ padding: 3px; border: 1px solid var(--parchment); }
.portrait-block{ aspect-ratio: 4/5; position:relative; overflow:hidden; }
.portrait-block img{ width:100%; height:100%; object-fit:cover; display:block; }
.portrait-block .cap{
  position:absolute; bottom:0; left:0; right:0; padding: 34px 16px 14px; color: var(--ivory);
  background: linear-gradient(to top, rgba(28,22,18,0.62), transparent);
  font-family:'Inter', system-ui, sans-serif; font-size: 10.5px; letter-spacing:0.15em; text-transform:uppercase;
}
.bio p{ margin-bottom: 26px; color: var(--taupe); font-size: 18.5px; max-width: 62ch; }
.bio p:first-of-type{ font-size: 21.5px; color: var(--espresso); font-family:'Fraunces', Georgia, serif; font-weight: 350; font-style: italic; line-height: 1.55; }
.pull-quote{
  margin: 56px 0 60px; padding-left: 30px; border-left: 1px solid var(--gold);
  max-width: 34ch;
}
.pull-quote p{
  font-family:'Fraunces', Georgia, serif; font-style: italic; font-weight: 350; color: var(--espresso);
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.4; margin:0;
}
.facts-tags{ display:flex; flex-wrap:wrap; gap: 16px; margin-top: 12px; margin-bottom: 44px; }
.facts-tags span{
  font-family:'Inter', system-ui, sans-serif; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--taupe); padding-bottom: 3px; border-bottom: 1px solid var(--gold-light);
}
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; gap: 50px; }
  .portrait-frame{ position:static; max-width: 380px; margin: 0 auto; }
  .bio p:first-of-type{ font-size: 20px; }
}

/* ============ EXHIBITIONS ============ */
.expo-country{ margin-bottom: 80px; }
.expo-country h2{ font-size: 30px; font-weight: 350; font-style: italic; margin-bottom: 28px; }
.expo-row{
  display:grid; grid-template-columns: 90px 1fr 1fr; gap: 20px; align-items:baseline;
  padding: 26px 0; border-bottom: 1px solid var(--hair);
  transition: background 0.4s var(--ease);
}
.expo-country .expo-row:first-of-type{ border-top: 1px solid var(--hair); }
.expo-row .yr{ font-family:'Inter', system-ui, sans-serif; color: var(--gold); font-size: 12.5px; letter-spacing: 0.08em; }
.expo-row .ttl{ font-family:'Fraunces', Georgia, serif; font-size: 18px; font-weight: 350; font-style: italic; color: var(--taupe); }
.expo-row .loc{ font-family:'Inter', system-ui, sans-serif; font-size: 11px; letter-spacing:0.08em; color: var(--taupe); text-align:right; text-transform: uppercase; opacity: 0.7;}
.expo-note{
  margin-top: 70px; padding-top: 28px; border-top: 1px solid var(--gold-light);
  font-family:'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 16.5px; color: var(--taupe);
  max-width: 60ch;
}
@media (max-width: 700px){
  .expo-row{ grid-template-columns: 55px 1fr; }
  .expo-row .loc{ grid-column: 2; text-align:left; margin-top: 4px; opacity: 0.6; }
}

/* ============ SECTION HEAD (generic) ============ */
.section-head{ margin-bottom: 78px; max-width: 68ch; }
.section-head .label{ margin-bottom: 18px; display:block; }
.section-head h2{ font-size: clamp(32px, 3.6vw, 46px); font-weight: 320; }
.section-head p{ margin-top: 24px; color: var(--taupe); font-size: 18px; line-height: 1.9; max-width: 70ch; }

/* ============ CONTACT / CTA STRIP ============ */
.cta-strip{
  background: linear-gradient(160deg, var(--espresso) 0%, #221a15 100%);
  color: var(--ivory); text-align:center;
}
.cta-strip .section-inner{ max-width: 680px; }
.cta-strip .label{ color: var(--gold-light); }
.cta-strip h2{ color: var(--ivory); font-size: clamp(32px,4.4vw,48px); font-weight: 320; margin-top: 18px; font-style: italic; }
.cta-strip p{ color: rgba(250,247,239,0.7); margin: 24px auto 40px; max-width: 46ch; font-family:'Cormorant Garamond', Georgia, serif; font-size:17px; }
.cta-btn{
  display:inline-block; font-family:'Inter', system-ui, sans-serif; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; text-decoration:none;
  color: var(--ivory); background: none; border: 1px solid var(--gold);
  padding: 18px 44px;
  transition: background 0.5s var(--ease), color 0.5s var(--ease), letter-spacing 0.5s var(--ease);
}
.cta-btn:hover{ background: var(--gold); color: var(--espresso); letter-spacing: 0.28em; }
.cta-btn:focus-visible{ outline: 1px solid var(--gold-light); outline-offset: 4px; }

/* ============ FOOTER ============ */
footer.site-footer{
  padding: 48px 6vw; display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 18px;
  background: var(--espresso); color: rgba(250,247,239,0.5);
  font-family:'Inter', system-ui, sans-serif; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
footer.site-footer .fmark{ font-family:'Fraunces', Georgia, serif; font-style:italic; color: var(--ivory); font-size:15px; letter-spacing:0.02em; text-transform:none; }
footer.site-footer .flinks{ display:flex; gap: 26px; flex-wrap:wrap; }
footer.site-footer a{ text-decoration:none; color: inherit; transition: color 0.4s var(--ease); display:inline-flex; align-items:center; min-height: 34px; }
footer.site-footer a:hover{ color: var(--gold-light); }
footer.site-footer a:focus-visible{ outline: 1px solid var(--gold-light); outline-offset: 3px; }
@media (max-width: 640px){
  footer.site-footer{ flex-direction: column; text-align:center; gap: 22px; padding: 44px 6vw; }
  footer.site-footer .flinks{ justify-content:center; gap: 22px; }
}

/* ============ RESPONSIVE GALLERY ============ */
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); gap: 46px 26px; }
  section{ padding: 104px 6vw; }
}
@media (max-width: 560px){
  section{ padding: 84px 7vw; }
  .page-hero{ padding: 140px 7vw 66px; }
  .page-hero h1{ font-size: clamp(34px, 10vw, 46px); }
  .page-hero .intro{ font-size: 17.5px; line-height: 1.85; }
  .gallery-grid{ grid-template-columns: 1fr; gap: 54px; }
  .expo-row{ grid-template-columns: 1fr; row-gap: 4px; }
  .expo-row .loc{ grid-column: 1; text-align:left; }
  .piece .p-title{ font-size: 20px; }
  .theme-head{ gap: 16px; }
  .pull-quote{ margin: 44px 0 48px; padding-left: 22px; }
}

/* ============ THEMED SUB-COLLECTIONS (within a gallery page) ============ */
.theme-section{ margin-bottom: 112px; }
.theme-section:last-child{ margin-bottom: 0; }
.theme-head{ margin-bottom: 48px; display:flex; align-items:baseline; gap: 22px; }
.theme-head h3{
  font-family:'Fraunces', Georgia, serif; font-style: italic; font-weight: 350;
  font-size: clamp(23px, 2.4vw, 30px); color: var(--espresso); white-space: nowrap;
}
.theme-head .theme-line{ flex:1; height:1px; background: var(--hair); }
.theme-head .theme-count{
  font-family:'Inter', system-ui, sans-serif; font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--gold); text-transform: uppercase; white-space: nowrap;
}
.oil-tone .theme-head .theme-count{ color: var(--olive); }

/* ============ INQUIRY STRIP ============ */
.inquiry-strip{
  margin-top: 44px; padding: 50px 6vw; text-align:center;
  border-top: 1px solid var(--hair);
}
.inquiry-strip p{
  font-family:'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px;
  color: var(--taupe); margin-bottom: 20px;
}
.inquiry-strip a.inquire{
  display:inline-block; font-family:'Inter', system-ui, sans-serif; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; text-decoration:none;
  color: var(--espresso); border-bottom: 1px solid var(--gold);
  padding: 10px 2px 10px; transition: letter-spacing 0.5s var(--ease), color 0.5s var(--ease);
}
.inquiry-strip a.inquire:hover{ letter-spacing: 0.3em; color: var(--gold); }
.inquiry-strip a.inquire:focus-visible{ outline: 1px solid var(--gold); outline-offset: 4px; }

/* ============ FRAME VARIANTS — match the box to the painting's own orientation ============ */
.piece .swatch.landscape{ aspect-ratio: 5/4; }
.piece .swatch.wide{ aspect-ratio: 3/2; }
.piece .swatch.panorama{ aspect-ratio: 2/1; }
.hero-art-frame .swatch.wide{ aspect-ratio: 3/2; }

/* ============ MINI QUOTE (interstitial, between gallery groups) ============ */
.mini-quote{ text-align:center; margin: 104px auto; max-width: 46ch; }
.mini-quote .rule{ width: 40px; height:1px; background: var(--gold); margin: 0 auto 30px; }
.mini-quote p{
  font-family:'Fraunces', Georgia, serif; font-style: italic; font-weight: 350;
  font-size: clamp(21px, 2.3vw, 27px); color: var(--espresso); line-height: 1.55;
}

/* ============ PRINT — a clean sheet, no furniture ============ */
@media print{
  header.site-header, .lightbox, .nav-burger, .lang-toggle, .skip-link, body::before{ display:none !important; }
  body{ background:#fff; color:#000; }
  section{ padding: 24px 0; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); gap: 18px; }
  .piece .frame{ box-shadow:none; border:1px solid #ccc; }
  a{ text-decoration:none; }
}