/* ==========================================================================
   STUDIO skin — home + artist pages, after sawyerberson.com
   slate #474e52 · bone #ebece7 · mist #b2c5cf · garamond display · montserrat labels
   ========================================================================== */

html { background: var(--sb-bg); }
/* inner studio pages sit on sawyerberson's darker charcoal (#232729); the home page keeps slate */
html:has(body.theme-studio:not(.page-home)) { background: var(--sb-bg-inner); }
body.theme-studio:not(.page-home) { --sb-bg: var(--sb-bg-inner); }
body.theme-studio {
  background: var(--sb-bg); color: var(--sb-ink);
  font: 400 21px/1.5 var(--serif);
}
.theme-studio ::selection { background: var(--sb-accent); color: var(--sb-bg); }

/* ---------- type scale (measured at 1440px) ---------- */
.sb-display  { font: 400 clamp(32px, 3.5vw, 50px)/1.25 var(--serif); letter-spacing: .005em; }   /* 48/60 */
.sb-h2       { font: 400 clamp(40px, 4.2vw, 62px)/1.22 var(--serif); letter-spacing: .005em; }    /* 60/75 */
.sb-h3       { font: 400 clamp(34px, 3.2vw, 47px)/1.25 var(--serif); letter-spacing: .005em; }    /* 45/56 */
.sb-h4       { font: 400 clamp(27px, 2.5vw, 36px)/1.35 var(--serif); letter-spacing: .005em; }    /* 34/47.6 */
.sb-h4-italic{ font: italic 400 clamp(28px, 2.6vw, 38px)/1.4 var(--serif); letter-spacing: .005em; } /* 36/50.4 */
.sb-h5       { font: 400 clamp(22px, 1.9vw, 28px)/1.4 var(--serif); letter-spacing: .005em; }    /* 26/32.5 */
.sb-body     { font: 400 22px/1.5 var(--serif); }
.sb-measure  { max-width: 920px; }

.label-sb {
  font: 600 15px/1.4 var(--sans); letter-spacing: .09em; text-transform: uppercase;
}
.small-label-sb {
  font: 600 14px/1.45 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-accent);
}
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 16px/1.4 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--sb-accent);
  transition: color .2s;
}
.arrow-link .icon-arrow { width: 20px; height: 14px; transition: transform .35s var(--ease-out); }
.arrow-link:hover { color: var(--sb-ink); }
.arrow-link:hover .icon-arrow { transform: translateX(4px); }
.sb-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(235, 236, 231, .45); transition: text-decoration-color .2s; }
.sb-link:hover { text-decoration-color: currentColor; }

/* section rhythm: 140px between blocks on desktop */
.sb-section { margin-bottom: clamp(80px, 9.7vw, 140px); }
.sb-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.sb-rule { background: var(--sb-accent); height: 1px; margin: clamp(14px, 1.4vw, 20px) 0 clamp(28px, 3.2vw, 45px); }

/* pipe-separated tag list: "LARGE ORIGINAL | 36 × 48 IN | $2,600" */
.sb-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; font: 600 15px/1.5 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--sb-accent); }
.sb-tags li + li::before { content: "|"; margin: 0 .7em 0 .6em; opacity: .9; }

/* ---------- header ---------- */
.sb-header {
  position: fixed; inset: 0 0 auto 0; z-index: 800; height: var(--sb-header-h);
  background: var(--sb-bg); color: var(--sb-ink); transition: background-color 1s var(--ease), transform .5s var(--ease-out);
}
.sb-header--overlay { background: transparent; }
.sb-header--overlay.is-scrolled { background: var(--sb-bg); }
/* soft shade so the white links stay readable over pale paintings */
.sb-header--overlay::before {
  content: ""; position: absolute; inset: 0 0 -70px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(35, 39, 41, .62), rgba(35, 39, 41, .3) 55%, rgba(35, 39, 41, 0));
  transition: opacity .6s var(--ease);
}
.sb-header--overlay.is-scrolled::before { opacity: 0; }
.sb-header--overlay:not(.is-scrolled) { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.sb-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.sb-header__logo { display: inline-flex; padding: 6px 0; }
.sb-header__menu { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0 10px 16px; transition: opacity .2s; }
/* desktop (>=1000px, same switch as the store header): every link visible in the bar (client request);
   the MENU drawer is for phones/tablets */
.sb-header__nav { display: none; }
.sb-header__nav ul { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); }
.sb-nav-link {
  display: inline-block; padding: 8px 0; font: 600 14px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sb-ink);
  background: linear-gradient(var(--sb-accent), var(--sb-accent)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease), color .2s;
}
.sb-nav-link:hover, .sb-nav-link.is-active { background-size: 100% 1px; color: #fff; }
@media (min-width: 1000px) {
  .sb-header__nav { display: block; }
  .sb-header__menu { display: none; }
}
:root { --sb-header-h: 64px; }
@media (min-width: 1000px) { :root { --sb-header-h: 72px; } .monogram { font-size: 28px; } }
.sb-header__menu:hover { opacity: .7; }
.sb-header-spacer { height: var(--sb-header-h); }

/* ---------- drawer skin (slides from the right) ---------- */
.menu-drawer--studio .menu-drawer__panel {
  right: 0; transform: translateX(100%); background: var(--sb-bg-deep); color: var(--sb-ink);
  padding: 0 var(--gutter) 40px; backdrop-filter: blur(6px);
}
.menu-drawer--studio.is-open .menu-drawer__panel { transform: none; }
.menu-drawer--studio .menu-drawer__head { height: var(--sb-header-h); display: flex; align-items: center; justify-content: flex-end; flex: none; }
.menu-drawer--studio .menu-drawer__close { min-height: 44px; padding: 10px 0 10px 16px; }
.menu-drawer--studio .menu-drawer__rule { background: rgba(235, 236, 231, .35); flex: none; }
.menu-drawer--studio .menu-drawer__nav { padding-top: 10px; flex: 1 0 auto; }
.menu-drawer--studio .menu-drawer__primary a { display: inline-block; font: 400 clamp(34px, 3.1vw, 45px)/1.25 var(--serif); letter-spacing: .005em; transition: color .2s, opacity .2s; }
.menu-drawer--studio .menu-drawer__primary a:hover,
.menu-drawer--studio .menu-drawer__primary a[aria-current] { color: var(--sb-accent); }
.menu-drawer--studio .menu-drawer__secondary { margin: 34px 0 40px; columns: 2; column-gap: 24px; }
.menu-drawer--studio .menu-drawer__secondary a { display: inline-block; padding: 4px 0; font: 600 14px/1.6 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sb-accent); }
.menu-drawer--studio .menu-drawer__secondary a:hover { color: var(--sb-ink); }
.menu-drawer--studio .menu-drawer__feature-link { display: grid; grid-template-columns: 1fr 132px; gap: 20px; padding-top: 14px; }
.menu-drawer--studio .menu-drawer__feature-text { display: flex; flex-direction: column; }
.menu-drawer--studio .menu-drawer__eyebrow { font: 600 14px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.menu-drawer--studio .menu-drawer__feature-title { margin-top: auto; font: 400 30px/1.25 var(--serif); }
.menu-drawer--studio .menu-drawer__feature-meta { font: 400 19px/1.5 var(--serif); color: var(--sb-accent); }
/* the painting is never cropped: the box takes the work's own ratio (--r) inside a 132 × 160 frame */
.menu-drawer--studio .menu-drawer__feature-img { display: flex; align-items: flex-end; justify-content: center; }
.menu-drawer--studio .menu-drawer__feature-img img {
  width: min(132px, calc(160px * var(--r, 1))); max-width: 100%; height: auto; aspect-ratio: var(--r, 1); object-fit: contain;
}
.menu-drawer--studio .menu-drawer__social { display: flex; gap: 18px; margin-top: 30px; color: var(--sb-accent); }
.menu-drawer--studio .menu-drawer__social a:hover { color: var(--sb-ink); }

/* ---------- footer ---------- */
.sb-footer { background: var(--sb-footer); color: var(--sb-ink); padding: 33px 0 30px; }
.sb-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sb-footer__logo { font-size: 24px; }
.sb-footer__links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; font: 500 13px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.sb-footer__links a { transition: opacity .2s; }
.sb-footer__links a:hover { opacity: .7; }
.sb-footer__social { display: flex; gap: 14px; }
.sb-footer__legal { margin-top: 22px; font: 400 14px/1.6 var(--sans); letter-spacing: .01em; max-width: 960px; } /* full ink: 5.34:1 on --sb-footer */

@media (max-width: 767px) {
  /* phones: the home header sits on its own slate band, so the shade stays inside the header box
     instead of darkening the top of the painting below */
  .sb-header--overlay::before { inset: 0; }
  .sb-footer__inner { flex-direction: column; align-items: flex-start; }
  .sb-tags { justify-content: flex-start; }
  .menu-drawer--studio .menu-drawer__secondary { columns: 1; }
}