@font-face {
  font-family: 'Mona Sans';
  src: url('/assets/fonts/mona-sans.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
:root { --font-body: 'Mona Sans', system-ui, sans-serif; }
.button:hover:not(:disabled):not(:active) { filter: none; }

/* Shared dimensional controls across the brand sites, including Otherworldly. */
.button:is(.is-primary, .is-tertiary) {
  border: 0;
  border-radius: 15px;
  background: linear-gradient(color-mix(in srgb, var(--_tone) 92%, white), var(--_tone));
  box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--_tone) 78%, black), inset 0 0 0 1px color-mix(in srgb, var(--_tone) 75%, white), inset 0 -5px 0 color-mix(in srgb, var(--_tone) 85%, white), 0 2px 1px #0000001a, 0 5px 20px #0000001a;
}
.button.is-primary {
  background: linear-gradient(#f3621d, #e95914);
  box-shadow: inset 0 -4px 0 #bc3d00, inset 0 0 0 1px #ff7736, inset 0 -5px 0 #f27032, 0 2px 1px #0000001a, 0 5px 20px #0000001a;
}
.button.is-primary:hover { background: linear-gradient(#ff7230, #fa6019); }
.button.is-tertiary:hover { background: linear-gradient(color-mix(in srgb, var(--_tone) 80%, white), color-mix(in srgb, var(--_tone) 92%, white)); }

/* Join the open mobile menu to the logo row without a dark seam. */
@media (max-width: 800px) {
  .navbar.is-floating:is(:has(> .navbar-menu.is-active), :not(.is-enhanced)) { row-gap: 0; padding-bottom: 0; }
  .navbar.is-floating:is(:has(> .navbar-menu.is-active), :not(.is-enhanced)) > .navbar-brand.has-background { margin-bottom: 0; border-bottom-left-radius: 0; }
}

@font-face { font-family: 'FatFrank'; src: url('/assets/fonts/fatfrank.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'CC Mild Mannered'; src: url('/assets/fonts/ccmildmannered-bold-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
.brand-site {
  --font-heading: 'FatFrank', 'Mona Sans', sans-serif;
  --primary: #f56317; --link: #a84010; --accent: var(--link);
  --navbar-brand-background: #ff6428;
  --ink: #363632; --muted: #73736d;
  --dark-background: #000; --dark-surface: #333; --dark-surface-secondary: #252525;
  --dark-link: #ffc889; --dark-muted: #d0d0ce;
  --h1-size: clamp(42px, 5vw, 70px); --h2-size: clamp(36px, 4vw, 56px);
  --h3-size: 32px; --quote-accent-color: #98571e;
  --proof-item-width: 300px; --radius: 24px;
  font-size: 20px; line-height: 1.45;
}
.brand-site :is(h1,h2,h3,h4,h5,h6,.like-h3,.like-h4) { font-weight: 400; letter-spacing: -.025em; line-height: 1.05; }
.brand-site :is(h1,h2) em { font-family: 'CC Mild Mannered', 'Mona Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; }
.brand-site .navbar { --surface: #292929; --ink: #fff; --border-color: transparent; --nav-hover-color: #414141; --navbar-sublogo-width: 150px; }
.brand-site .navbar.is-floating { --navbar-padding: 8px; padding-block: var(--navbar-padding); border: 0; border-radius: 14px; }
.brand-site .navbar.is-floating > .navbar-brand.has-background { border-radius: 14px 0 0 14px; margin-block: -8px; padding-block: 16px; }
.brand-site .navbar-menu > .button { background: #fff; color: #30373b; border-color: #fff; font-family: var(--font-body); font-weight: 600; }
.brand-site .button { font-family: var(--font-heading); font-weight: 400; }
.brand-site .button-subline { font-family: var(--font-body); }
.brand-site .brand-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #222; }
.brand-site .brand-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.brand-site .brand-footer { max-width: none; padding-block: 48px; font-size: 14px; --dark-muted: #bfc5d0; }
.brand-footer .footer-signatures { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; }
.brand-footer img { display: block; max-width: 100%; height: auto; margin: 0; }
.brand-footer .footer-mre { width: 170px; }
.brand-footer .footer-growthcandy { width: 75px; }
.brand-footer .footer-combined { width: min(320px, 100%); }
.brand-footer p { color: var(--muted); }
.brand-footer a { color: inherit; }
.footer-contact { padding: 0; margin-left: 8px; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
#brand-contact, #brand-studies, #brand-talent { width: min(640px, calc(100% - 30px)); text-align: center; }
#brand-contact form, #brand-talent form { text-align: left; }
.brand-site .proof-item { background: #fff; color: #484848; border: 1px solid #e3e3df; border-radius: 15px; box-shadow: inset 0 -3px 4px #0000000a; padding: 18px; }
.brand-site .quote { gap: 12px; }
.brand-site .quote blockquote { font-family: var(--font-body); font-weight: 400; line-height: 1.35; }
.brand-site .quote .media-content { line-height: 1.25; }
.brand-site .quote .media-content > span { font-style: italic; }
.brand-site .quote .media-content > strong { color: #171717; }
.brand-site .quote.is-accented blockquote strong { background: #ffdda4; color: inherit; font-weight: 700; }
.brand-site .accordion summary { font-family: var(--font-heading); font-weight: 400; }
@media (max-width: 1000px) and (min-width: 801px) {
  .brand-site .navbar-menu { gap: 0; }
  .brand-site .navbar-menu > a:not(.button) { padding-inline: 6px; }
  .brand-site .navbar-brand img { max-width: 130px; }
}
@media (max-width: 800px) {
  .brand-site { --group-space: 60px; font-size: 18px; }
  .brand-site .navbar.is-floating { padding-inline: 0; gap: 8px; padding-block: 5px; }
  .brand-site .navbar.is-floating > .navbar-brand.has-background { margin-block: -5px; padding: 13px 10px; border-radius: 14px 0 0 14px; }
  .brand-site .navbar-toggle { margin-right: 12px; }
  .brand-site .navbar-menu.is-active { padding: 12px 16px 16px; border-radius: 0 0 14px 14px; }
  .brand-site .navbar-menu > .button { border-color: #cdd6e1; }
  .brand-footer p { font-size: 14px; }
}

/* ARTISTCSS PROPOSED UPDATES
   Move these framework-level refinements into Artistcss when reviewed. */
a.card { text-decoration: none; }

/* Opt-in image zoom for linked cards; the image frame stays fixed. */
a.card.has-image-zoom > .figure { overflow: hidden; }
a.card.has-image-zoom > .figure.is-rounded { border-radius: var(--radius); }
@media (prefers-reduced-motion: no-preference) {
  a.card.has-image-zoom > .figure > img { transition: transform var(--motion-slow) var(--motion-ease); }
  a.card.has-image-zoom:focus-visible > .figure > img { transform: scale(1.04); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.card.has-image-zoom:hover > .figure > img { transform: scale(1.04); }
}

/* Editorial quote panels: separate testimony from surrounding body copy. */
.quote.is-panel {
  padding: clamp(28px, 4vw, 56px);
  background: var(--surface-secondary);
}
.content > .quote.is-panel { margin-block: var(--layout-gap); }
.quote.is-panel > blockquote { font-weight: 400; }
.quote.is-panel > figcaption { font-size: var(--size-compact); }

/* Buttons that open dialogs while retaining inline link presentation. */
button.text-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* Opt-in mobile exhibit: introduction, then uncropped artwork. */
.exhibit > .mobile-artwork { display: none; }
@media (max-width: 800px) {
  .group.exhibit.is-mobile-stacked {
    --ink: inherit; --muted: inherit; --surface: inherit;
    --surface-secondary: inherit; --border-color: inherit; --accent: inherit;
    display: flex; flex-direction: column; min-height: 0;
    padding: 128px 0 0; border-radius: 0;
    background: var(--surface); color: var(--ink);
  }
  .exhibit.is-mobile-stacked > .artwork { display: none; }
  .exhibit.is-mobile-stacked > .container { display: block; padding-top: 0; }
  .exhibit.is-mobile-stacked > .mobile-artwork {
    display: block; position: static; width: 100%; height: auto;
    margin: 32px 0 0; border-radius: 0; z-index: auto;
  }
  .exhibit.is-mobile-stacked > .mobile-artwork img { width: 100%; height: auto; }
}

/* Match the trailing CTA inset to the floating navbar’s vertical padding. */
@media (min-width: 801px) {
  .navbar.is-floating:has(> .navbar-menu > .button:last-child) { padding-inline-end: var(--navbar-padding, 12px); }
  .navbar.is-floating:has(> .navbar-menu > .button:last-child) > .navbar-menu,
  .navbar.is-floating > .navbar-menu > .button:last-child { align-self: stretch; }
}

/* ARTISTCSS PROPOSED UPDATE: content-aware navbar collapse.
   Paired with navbar-fit.js; remove this block and its optional JS hook together.
   The existing 800px mobile rules remain the fallback without JavaScript. */
@media (min-width: 801px) {
  .navbar.is-floating.is-compact {
    display: grid; grid-template-columns: max-content minmax(0, 1fr) auto;
    grid-auto-rows: max-content; align-content: start;
    padding: 0; column-gap: 20px; row-gap: 0;
  }
  .navbar.is-floating.is-compact:has(> .navbar-menu > .button:last-child) { padding-inline-end: 0; }
  .navbar.is-floating.is-compact > .navbar-brand.has-background { margin-block: 0; border-bottom-left-radius: 0; }
  .navbar.is-floating.is-compact:not(:has(> .navbar-menu.is-active)) > .navbar-brand.has-background { border-bottom-left-radius: inherit; }
  .navbar.is-compact > .navbar-toggle { display: inline-flex; margin: 0 12px 0 0; }
  .navbar.is-compact > .navbar-menu {
    --surface: var(--navbar-mobile-menu-surface); --ink: var(--navbar-mobile-menu-ink);
    --muted: var(--navbar-mobile-menu-muted); --border-color: var(--navbar-mobile-menu-border);
    --nav-hover-color: var(--navbar-mobile-menu-hover);
    grid-column: 1 / -1; width: auto; margin: 0;
    background: var(--surface); color: var(--ink);
  }
  .navbar.is-compact > .navbar-menu:not(.is-active) { display: none; }
  .navbar.is-compact > .navbar-menu.is-active {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px 16px 16px; border-radius: 0 0 14px 14px;
    max-height: calc(100dvh - 130px); overflow-y: auto;
  }
  .navbar.is-compact .navbar-menu > a:not(.button) { padding: 12px; }
  .navbar.is-compact .navbar-menu > .button { border-color: #cdd6e1; }
}
/* Intrinsic desktop measurement only; never displayed as a painted state. */
.navbar.is-measuring { display: flex !important; flex-wrap: nowrap !important; }
.navbar.is-measuring > :not(.navbar-toggle) { flex-shrink: 0; }
.navbar.is-measuring > .navbar-toggle { display: none !important; }
.navbar.is-measuring > .navbar-menu { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: max-content !important; margin-left: 0; }
.navbar.is-measuring > .navbar-menu > * { flex-shrink: 0; white-space: nowrap; }