/* ==========================================================================
   Debbi Homola Fine Art — shared foundation
   Two skins share this file:
     .theme-studio  (home + artist pages)   after sawyerberson.com
     .theme-store   (gallery store pages)   after nickeykehoe.com/collections/furniture
   ========================================================================== */

/* ---------- metric-matched fallbacks ----------
   Shown until the Google webfonts arrive (display=swap). size-adjust matches each local face's average
   advance width to EB Garamond / Montserrat (measured with fontTools on running text), and the overrides
   carry the webfont's own ascent/descent, so the swap neither re-wraps lines nor moves the page. */
@font-face { font-family: "EB Garamond Fallback Iowan"; src: local("Iowan Old Style Roman"), local("IowanOldStyle-Roman"), local("Iowan Old Style");
  size-adjust: 84.98%; ascent-override: 118.5%; descent-override: 35.07%; line-gap-override: 0%; }
@font-face { font-family: "EB Garamond Fallback Iowan"; font-style: italic; src: local("Iowan Old Style Italic"), local("IowanOldStyle-Italic");
  size-adjust: 84.98%; ascent-override: 118.5%; descent-override: 35.07%; line-gap-override: 0%; }
@font-face { font-family: "EB Garamond Fallback Palatino"; src: local("Palatino Linotype"), local("PalatinoLinotype-Roman"), local("Palatino"), local("Palatino-Roman");
  size-adjust: 85.51%; ascent-override: 117.76%; descent-override: 34.85%; line-gap-override: 0%; }
@font-face { font-family: "EB Garamond Fallback Palatino"; font-style: italic; src: local("Palatino Linotype Italic"), local("PalatinoLinotype-Italic"), local("Palatino Italic"), local("Palatino-Italic");
  size-adjust: 85.51%; ascent-override: 117.76%; descent-override: 34.85%; line-gap-override: 0%; }
@font-face { font-family: "EB Garamond Fallback Georgia"; src: local("Georgia");
  size-adjust: 86.24%; ascent-override: 116.77%; descent-override: 34.55%; line-gap-override: 0%; }
@font-face { font-family: "EB Garamond Fallback Georgia"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 86.24%; ascent-override: 116.77%; descent-override: 34.55%; line-gap-override: 0%; }
/* Montserrat is ~13% wider than Arial in running text and ~5% in letter-spaced caps; 110% splits the difference */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("HelveticaNeue");
  size-adjust: 110%; ascent-override: 88%; descent-override: 22.82%; line-gap-override: 0%; }

:root {
  /* studio palette — measured from sawyerberson.com */
  --sb-bg: #474e52;
  --sb-bg-inner: #474e52;   /* inner studio pages use the same slate as home */
  --sb-bg-deep: rgba(47, 52, 54, 0.96);
  --sb-ink: #ebece7;
  --sb-accent: #b2c5cf;
  --sb-footer: #56616a;   /* sawyerberson uses #7c8990; deepened for 4.5:1 text contrast */
  --sb-scrim-rgb: 35, 39, 41;

  /* store palette — measured from nickeykehoe.com */
  --nk-bg: #fffdf6;
  --nk-ink: #3e3e3e;
  --nk-muted: #6f6c66;
  --nk-line: #eceae4;
  --nk-line-strong: #dcd9d1;
  --nk-footer: #1d222a;
  --nk-olive: #4b4e33;
  --nk-sale: #9b3434;

  /* type */
  --serif: "EB Garamond", "EB Garamond Fallback Iowan", "EB Garamond Fallback Palatino", "EB Garamond Fallback Georgia", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --serif-store: Palatino, "Palatino Linotype", "Book Antiqua", "EB Garamond", "EB Garamond Fallback Georgia", Georgia, serif;
  --sans: Montserrat, "Montserrat Fallback", "Helvetica Neue", Arial, sans-serif;
  --sans-store: "Avenir Next", Avenir, Montserrat, "Montserrat Fallback", "Helvetica Neue", Arial, sans-serif;

  /* layout — viewport-fit=cover (kept for the bottom safe area of sticky bars) means landscape iPhones lay the
     page under the sensor housing, so side spacing never drops below the left/right safe-area insets */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --gutter: max(clamp(20px, 2.5vw, 36px), var(--safe-l), var(--safe-r));
  --sb-header-h: 60px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
hr { border: 0; height: 1px; margin: 0; }
[hidden] { display: none !important; }
main:focus { outline: none; }

/* ---------- accessibility ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px;
  background: #111; color: #fff; font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* ---------- layout helpers ---------- */
.gutter { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- wordmarks ---------- */
.monogram {
  display: inline-flex; align-items: center; gap: .32em;
  font: 500 26px/1 var(--serif); letter-spacing: .02em;
}
.monogram__bar { display: inline-block; width: 1px; height: 1.05em; background: currentColor; opacity: .9; }
.wordmark { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--serif); text-transform: uppercase; }
.wordmark--bar { letter-spacing: .22em; gap: .55em; }
.wordmark__bar { display: inline-block; width: 1px; height: .95em; background: currentColor; }
.wordmark--store { font-family: var(--serif-store); letter-spacing: .26em; gap: .35em; }
.wordmark--store .enso { width: .95em; height: .95em; margin: 0 .05em 0 -.05em; opacity: .85; }

/* ---------- scroll reveal (sawyerberson-style: fade + 15px rise) ---------- */
html.js .reveal { opacity: 0; transform: translate3d(0, 15px, 0); transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); }
html.js .reveal--fade { transform: none; }
html.js .reveal.is-revealed { opacity: 1; transform: none; }
html.js .reveal-line { transform-origin: left center; transform: scaleX(0); transition: transform 2s var(--ease-out); }
html.js .reveal-line.is-revealed { transform: scaleX(1); }

/* ---------- menu drawer (skinned in studio.css / store.css) ---------- */
.menu-drawer { position: fixed; inset: 0; z-index: 900; }
.menu-drawer__scrim { position: absolute; inset: 0; background: rgba(20, 22, 24, .35); opacity: 0; transition: opacity .5s var(--ease); }
.menu-drawer__panel {
  position: absolute; top: 0; bottom: 0; width: min(460px, 100vw); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; transition: transform .6s var(--ease-out);
}
.menu-drawer.is-open .menu-drawer__scrim { opacity: 1; }
body.is-locked { overflow: hidden; }

/* ---------- product palette swatches ---------- */
.swatch { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* ---------- lightweight toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 1200; transform: translate(-50%, 20px); opacity: 0;
  width: max-content; max-width: calc(100vw - 32px - var(--safe-l) - var(--safe-r)); text-align: center;
  padding: 16px 24px; background: #1d222a; color: #fffdf6; font: 600 14px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  transition: opacity .3s, transform .3s var(--ease-out); pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { padding: 0; }
/* while a drawer or viewer is open, drop in from the top so it never covers the footer buttons (Checkout / View cart) */
body.is-locked .toast { top: calc(20px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -20px); }
body.is-locked .toast.is-visible { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js .reveal, html.js .reveal-line { opacity: 1; transform: none; }
}