/* ── Sense Architects · Light / Dark Theme ── */

html {
  --nav-radius: 100px;
}

body,
.content-panel .proj-section,
.content-panel .about-sect,
.content-panel .cat-sect,
.content-panel .team-sect,
.content-panel .news-sect {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

html[data-theme="light"] {
  --bg: #f2f2f0;
  --bg2: #ffffff;
  --paper: #ffffff;
  --ink: #111111;
  --muted: #888888;
  --border: #e0e0dc;
  --line: #e0e0dc;
  --pill: #e8e8e4;
  --pill-text: #444444;
  --surface: #f2f2f0;
  --surface-2: #ececea;
  --media-bg: #e0e0dc;
  --shell-shadow: 0 26px 80px rgba(0, 0, 0, 0.08);
  --nav-backdrop: rgba(242, 242, 240, 0.94);
  --logo-filter: none;
  --logo-blend: normal;
  --panel-bg: #ffffff;
  --panel-ink: #111111;
  --panel-muted: #888888;
  --panel-border: #e0e0dc;
  --panel-pill: #e8e8e4;
  --panel-shadow: 0 -8px 48px rgba(0, 0, 0, 0.08);
  --panel-section: #f2f2f0;
  --panel-section-alt: #ffffff;
  --panel-collapse-border: rgba(17, 17, 17, 0.22);
  --panel-collapse-bg: rgba(255, 255, 255, 0.72);
  --panel-collapse-color: #111111;
  --panel-collapse-hover: rgba(0, 0, 0, 0.06);
  --fw-bg: #f2f2f0;
  --fw-alt: #ffffff;
  --fw-text: #111111;
  --fw-muted: #888888;
  --fw-muted-2: #666666;
  --fw-card-bg: #e8e8e4;
  --fw-cap: #666666;
  --fw-side: rgba(17, 17, 17, 0.55);
  --fw-arrow-bg: rgba(255, 255, 255, 0.82);
  --fw-arrow-border: rgba(17, 17, 17, 0.18);
  --fw-arrow-color: #111111;
  --fw-overlay: rgba(242, 242, 240, 0.55);
  --ab2-lead: #666666;
  --ab2-block-h: #111111;
  --ab2-block-p: #888888;
  --ab2-contact: #666666;
  --ab2-link: #111111;
  --sv-text: #111111;
  --sv-meta: #888888;
  --sv-marks: #aaaaaa;
  --sv-cap: #888888;
  --sv-desc: #888888;
  --sv-menu-bar: #111111;
  --sv-icon-filter: invert(0);
  --footer-bg: #111111;
  --footer-ink: #ffffff;
  --card-hover-bg: #f0f0ec;
  --pic-bg: #e0e0dc;
  --npill-text: #444444;
  --npill-hover: #ddddd8;
  --desc-en: rgba(17, 17, 17, 0.45);
  --mail-bg: #e8e8e4;
  --mail-hover: #ddddd8;
  --note-color: #9a9a96;
  --toggle-bg: #e8e8e4;
  --toggle-hover: #ddddd8;
  --toggle-icon: #444444;
  --case-hero-overlay: linear-gradient(90deg, rgba(242, 242, 240, 0.98) 0%, rgba(242, 242, 240, 0.88) 42%, rgba(242, 242, 240, 0.5) 100%);
  --case-hero-overlay-mobile: linear-gradient(180deg, rgba(242, 242, 240, 0.96), rgba(242, 242, 240, 0.72));
  --case-summary: #666666;
  --side-nav-hover: #ddddd8;
  --hero-panel-veil: rgba(255, 255, 255, 0.68);
}

html[data-theme="dark"] {
  --bg: #000000;
  --bg2: #0b0b0b;
  --paper: #0b0b0b;
  --ink: #f5f5f5;
  --muted: rgba(255, 255, 255, 0.58);
  --border: rgba(255, 255, 255, 0.14);
  --line: rgba(255, 255, 255, 0.14);
  --pill: rgba(255, 255, 255, 0.12);
  --pill-text: #e8e8e8;
  --surface: #000000;
  --surface-2: #0b0b0b;
  --media-bg: #111111;
  --shell-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
  --nav-backdrop: #000000;
  --logo-filter: brightness(0) invert(1);
  --logo-blend: difference;
  --panel-bg: #000000;
  --panel-ink: #f5f5f5;
  --panel-muted: rgba(255, 255, 255, 0.6);
  --panel-border: rgba(255, 255, 255, 0.16);
  --panel-pill: rgba(255, 255, 255, 0.1);
  --panel-shadow: 0 -8px 48px rgba(0, 0, 0, 0.28);
  --panel-section: #000000;
  --panel-section-alt: #0c0c0c;
  --panel-collapse-border: rgba(255, 255, 255, 0.4);
  --panel-collapse-bg: rgba(255, 255, 255, 0.05);
  --panel-collapse-color: #f5f5f5;
  --panel-collapse-hover: rgba(255, 255, 255, 0.18);
  --fw-bg: #0c0c0c;
  --fw-alt: #0c0c0c;
  --fw-text: #ffffff;
  --fw-muted: #bdbdbd;
  --fw-muted-2: #cacaca;
  --fw-card-bg: #171717;
  --fw-cap: #d8d8d8;
  --fw-side: rgba(255, 255, 255, 0.72);
  --fw-arrow-bg: rgba(12, 12, 12, 0.55);
  --fw-arrow-border: rgba(255, 255, 255, 0.4);
  --fw-arrow-color: #ffffff;
  --fw-overlay: rgba(18, 18, 18, 0.46);
  --ab2-lead: #c7c7c7;
  --ab2-block-h: #ffffff;
  --ab2-block-p: #bdbdbd;
  --ab2-contact: #c7c7c7;
  --ab2-link: #ffffff;
  --sv-text: #ffffff;
  --sv-meta: #bcbcbc;
  --sv-marks: #7a7a7a;
  --sv-cap: #cfcfcf;
  --sv-desc: #b2b2b2;
  --sv-menu-bar: #ffffff;
  --sv-icon-filter: brightness(0) invert(1);
  --footer-bg: #111111;
  --footer-ink: #ffffff;
  --card-hover-bg: #252525;
  --pic-bg: #1e1e1e;
  --npill-text: #e8e8e8;
  --npill-hover: rgba(255, 255, 255, 0.18);
  --desc-en: rgba(255, 255, 255, 0.46);
  --mail-bg: rgba(255, 255, 255, 0.1);
  --mail-hover: rgba(255, 255, 255, 0.16);
  --note-color: #9a9a96;
  --toggle-bg: rgba(255, 255, 255, 0.12);
  --toggle-hover: rgba(255, 255, 255, 0.2);
  --toggle-icon: #e8e8e8;
  --case-hero-overlay: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.66));
  --case-hero-overlay-mobile: linear-gradient(180deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.66));
  --case-summary: rgba(255, 255, 255, 0.62);
  --side-nav-hover: rgba(255, 255, 255, 0.18);
  --hero-panel-veil: rgba(0, 0, 0, 0.38);
}

/* ── Theme toggle button ── */
.theme-toggle {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--toggle-bg);
  color: var(--toggle-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
  font-family: inherit;
  position: relative;
  z-index: 1;
}
.theme-toggle:hover {
  background: var(--toggle-hover);
  transform: scale(1.06);
}
/* Homepage: always visible over hero imagery */
body.home-page .nav-links .theme-toggle {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
body.home-page .nav-links .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.34);
}
.theme-toggle svg {
  width: 15px;
  height: 15px;
  display: block;
}
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.nav-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.language-toggle {
  border: 0;
  color: inherit;
  font-family: var(--font);
  cursor: pointer;
}

/* Case pages: larger toggle to match pills */
.shell .theme-toggle,
nav .theme-toggle.pill-size {
  width: clamp(38px, 4vw, 42px);
  height: clamp(34px, 3.3vw, 42px);
  border-radius: var(--nav-radius);
}
.shell .theme-toggle svg {
  width: 16px;
  height: 16px;
}

/* Logo filter per theme */
.logo img,
.nav-logo {
  transition: filter 0.35s ease, mix-blend-mode 0.35s ease;
}
html[data-theme="light"] .shell .logo img,
html[data-theme="light"] .subpage .logo img {
  filter: none !important;
  mix-blend-mode: normal !important;
}
html[data-theme="dark"] .shell .logo img,
html[data-theme="dark"] .subpage .logo img {
  filter: brightness(0) invert(1) !important;
  mix-blend-mode: difference !important;
}
/* Homepage nav stays over hero imagery */
body.home-page .nav-logo {
  filter: brightness(0) invert(1) !important;
  mix-blend-mode: difference !important;
}
html[data-theme="light"] body.panel-open.home-page .nav-logo {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ── Case study pages ── */
.shell {
  background: var(--bg) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shell-shadow) !important;
  color: var(--ink);
}
.shell nav,
.shell > nav {
  background: var(--bg) !important;
}
html[data-theme="light"] .shell nav,
html[data-theme="light"] .shell > nav {
  border-bottom: 1px solid var(--line);
}
.shell .hero {
  background: var(--case-hero-overlay), var(--hero-bg) center/cover no-repeat !important;
  color: var(--ink);
}
.shell .summary {
  color: var(--case-summary) !important;
}
.shell .eyebrow,
.shell .info-k,
.shell .gallery-k {
  color: var(--muted) !important;
}
.shell h1,
.shell .gallery-title,
.shell .info-v,
.shell .cta {
  color: var(--ink);
}
.shell .below,
.shell .gallery {
  background: var(--bg) !important;
}
.shell .info {
  background: var(--paper) !important;
  border: 1px solid var(--line);
}
html[data-theme="light"] .shell .info {
  border-color: var(--line);
}
html[data-theme="dark"] .shell .info {
  border-color: transparent;
}
.shell .media,
.shell .gallery-figure {
  background: var(--media-bg) !important;
}
.shell .pill {
  color: var(--pill-text);
}
.shell .side-nav {
  color: var(--ink);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
}
.shell .side-nav:hover {
  background: var(--side-nav-hover) !important;
}
@media (max-width: 720px) {
  .shell nav,
  .shell > nav {
    background: var(--nav-backdrop) !important;
  }
  .shell .hero {
    background: var(--case-hero-overlay-mobile), var(--hero-bg) center/cover no-repeat !important;
  }
  html[data-theme="light"] .shell .side-nav {
    background: var(--pill) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── Case page enter animation ── */
body.case-page:not(.case-ready) .shell {
  opacity: 0;
  transform: translateY(22px);
}
body.case-page.case-ready .shell {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.22, 1.1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1.1, 0.36, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}
body.case-page:not(.case-ready) nav {
  opacity: 0;
  transform: translateY(-10px);
}
body.case-page.case-ready nav {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.65s ease 0.08s, transform 0.65s ease 0.08s, background 0.35s ease !important;
}
body.case-page:not(.case-ready) .copy .eyebrow,
body.case-page:not(.case-ready) .copy h1,
body.case-page:not(.case-ready) .copy .summary,
body.case-page:not(.case-ready) .copy .cta,
body.case-page:not(.case-ready) .media {
  opacity: 0;
  transform: translateY(20px);
}
body.case-page.case-ready .copy .eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s cubic-bezier(0.22, 1.1, 0.36, 1) 0.18s, transform 0.75s cubic-bezier(0.22, 1.1, 0.36, 1) 0.18s;
}
body.case-page.case-ready .copy h1 {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.22, 1.1, 0.36, 1) 0.28s, transform 0.8s cubic-bezier(0.22, 1.1, 0.36, 1) 0.28s;
}
body.case-page.case-ready .copy .summary {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s cubic-bezier(0.22, 1.1, 0.36, 1) 0.4s, transform 0.75s cubic-bezier(0.22, 1.1, 0.36, 1) 0.4s;
}
body.case-page.case-ready .copy .cta {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1.1, 0.36, 1) 0.52s, transform 0.7s cubic-bezier(0.22, 1.1, 0.36, 1) 0.52s;
}
body.case-page.case-ready .media {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.85s cubic-bezier(0.22, 1.1, 0.36, 1) 0.22s, transform 0.85s cubic-bezier(0.22, 1.1, 0.36, 1) 0.22s;
}
body.case-page:not(.case-ready) .side-nav {
  opacity: 0;
}
body.case-page.case-ready .side-nav {
  opacity: 1;
  transition: opacity 0.55s ease 0.45s, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}
body.case-page .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.72s ease, transform 0.72s cubic-bezier(0.22, 0.75, 0.2, 1);
}
body.case-page .reveal.visible {
  opacity: 1;
  transform: none;
}
body.case-page.page-leaving .shell {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.28s ease, transform 0.28s ease !important;
}
body.case-page.page-leaving nav,
body.case-page.page-leaving .side-nav {
  opacity: 0;
  transition: opacity 0.2s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  body.case-page .shell,
  body.case-page nav,
  body.case-page .copy .eyebrow,
  body.case-page .copy h1,
  body.case-page .copy .summary,
  body.case-page .copy .cta,
  body.case-page .media,
  body.case-page .side-nav,
  body.case-page .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Generic subpage enter ── */
body.animate-page:not(.is-ready):not(.case-page) > nav {
  opacity: 0;
  transform: translateY(-8px);
}
body.animate-page.is-ready:not(.case-page) > nav {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease 0.06s, transform 0.6s ease 0.06s, background 0.35s ease, border-color 0.35s ease !important;
}
body.animate-page:not(.is-ready) main > .kicker,
body.animate-page:not(.is-ready) main > h1,
body.animate-page:not(.is-ready) main > .lede,
body.animate-page:not(.is-ready) main > p.lede {
  opacity: 0;
  transform: translateY(18px);
}
body.animate-page.is-ready main > .kicker {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1.1, 0.36, 1) 0.14s, transform 0.7s cubic-bezier(0.22, 1.1, 0.36, 1) 0.14s;
}
body.animate-page.is-ready main > h1 {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.22, 1.1, 0.36, 1) 0.24s, transform 0.8s cubic-bezier(0.22, 1.1, 0.36, 1) 0.24s;
}
body.animate-page.is-ready main > .lede,
body.animate-page.is-ready main > p.lede {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s cubic-bezier(0.22, 1.1, 0.36, 1) 0.36s, transform 0.75s cubic-bezier(0.22, 1.1, 0.36, 1) 0.36s;
}
body.animate-page:not(.is-ready) header.hero .fade-up {
  opacity: 0;
  transform: translateY(18px);
}
body.animate-page .fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.72s cubic-bezier(0.22, 1.1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1.1, 0.36, 1);
}
body.animate-page .fade-up.visible {
  opacity: 1;
  transform: none;
}
body.animate-page.page-leaving:not(.case-page) > nav,
body.animate-page.page-leaving:not(.case-page) main,
body.animate-page.page-leaving:not(.case-page) footer {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.24s ease, transform 0.24s ease !important;
}

/* ── Homepage hero enter ── */
body.home-page.animate-page:not(.is-ready) .hero-content {
  opacity: 0;
  transform: translateY(18px);
}
body.home-page.animate-page.is-ready .hero-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.95s cubic-bezier(0.22, 1.1, 0.36, 1) 0.2s, transform 0.95s cubic-bezier(0.22, 1.1, 0.36, 1) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  body.animate-page:not(.case-page) > nav,
  body.animate-page main > .kicker,
  body.animate-page main > h1,
  body.animate-page main > .lede,
  body.animate-page main > p.lede,
  body.animate-page .fade-up,
  body.home-page .hero-content {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Homepage content panel ── */
.content-panel {
  background-color: var(--panel-bg) !important;
  color: var(--panel-ink) !important;
  box-shadow: var(--panel-shadow) !important;
  transition: transform 1.15s cubic-bezier(0.22, 1.12, 0.36, 1), background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important;
}
.content-panel.open {
  transform: translateY(0) !important;
}
.content-panel::before {
  background: var(--panel-bg) !important;
}
.content-panel .proj-section,
.content-panel .proj-section.fw,
.content-panel .about-sect,
.content-panel .about-sect.ab2,
.content-panel .cat-sect,
.content-panel .news-sect,
.content-panel .team-sect,
.content-panel .ticker {
  background: var(--panel-section) !important;
}
.panel-head-gap,
.proj-section.fw,
.about-sect.ab2 {
  background: var(--fw-bg) !important;
  color: var(--fw-text) !important;
}
.proj-section.fw .sec-kicker,
.about-sect.ab2 .sec-kicker,
.fw-nav a,
.ab2-nav a {
  color: var(--fw-text) !important;
}
.fw-date,
.fw-names {
  color: var(--fw-muted) !important;
}
.fw-desc p {
  color: var(--fw-muted-2) !important;
}
.fw-fig {
  color: var(--fw-text) !important;
}
.fw-fig .ph {
  background: var(--fw-card-bg) !important;
}
.fw-fig .ph::after {
  background: var(--fw-overlay) !important;
  color: var(--fw-text) !important;
}
.fw-side {
  color: rgba(255, 255, 255, 0.9) !important;
}
.fw-cap {
  color: var(--fw-cap) !important;
}
.fw-arrow {
  border-color: var(--fw-arrow-border) !important;
  background: var(--fw-arrow-bg) !important;
  color: var(--fw-arrow-color) !important;
}
.fw-arrow:hover {
  background: var(--toggle-hover) !important;
}
.ab2-img {
  background: var(--fw-card-bg) !important;
}
.ab2-copy .ab2-lead {
  color: var(--ab2-block-p) !important;
}
.ab2-copy .ab2-lead:first-child {
  color: var(--ab2-block-h) !important;
}
.ab2-contact {
  color: var(--ab2-contact) !important;
}
.ab2-contact a {
  color: var(--ab2-link) !important;
  border-bottom-color: var(--line) !important;
}
.cat-sect {
  background: var(--panel-section-alt) !important;
  color: var(--sv-text) !important;
}
.cat-sect .sec-kicker,
.sv-name {
  color: var(--sv-text) !important;
}
.sv-meta {
  color: var(--sv-meta) !important;
}
.sv-marks {
  color: var(--sv-marks) !important;
}
.sv-menu span {
  background: var(--sv-menu-bar) !important;
}
.sv-icon {
  filter: var(--sv-icon-filter);
  transition: filter 0.35s ease;
}
.sv-figure {
  background: var(--media-bg) !important;
}
.sv-cap {
  color: var(--sv-cap) !important;
}
.sv-desc p {
  color: var(--sv-desc) !important;
}
.panel-collapse {
  border-color: var(--panel-collapse-border) !important;
  background: var(--panel-collapse-bg) !important;
  color: var(--panel-collapse-color) !important;
}
.panel-collapse:hover {
  background: var(--panel-collapse-hover) !important;
}
.content-panel footer {
  background: var(--footer-bg) !important;
  color: var(--footer-ink) !important;
}
.content-panel footer .fcta,
.content-panel footer .fcity,
.content-panel footer .fbtn {
  color: #ffffff !important;
}
.content-panel footer .flogo img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* Philosophy / design-process subpages */
body {
  background: var(--bg);
  color: var(--ink);
}
.npill {
  color: var(--npill-text) !important;
}
.npill:hover {
  background: var(--npill-hover) !important;
}
html[data-theme="light"] .npill.dk {
  background: var(--ink) !important;
  color: #fff !important;
}
html[data-theme="light"] .npill.dk:hover {
  background: #333 !important;
}
html[data-theme="dark"] .npill.dk {
  background: #ffffff !important;
  color: #111111 !important;
}
html[data-theme="dark"] .npill.dk:hover {
  background: #e8e8e8 !important;
  color: #111111 !important;
}
.desc-en {
  color: var(--desc-en) !important;
}
.note {
  color: var(--note-color) !important;
}

/* ── Unified nav button radius (site-wide) ── */
.npill,
.pill,
.mail,
.nicon,
nav .theme-toggle,
.nav-links .theme-toggle,
.shell .theme-toggle,
.shell nav .theme-toggle {
  border-radius: var(--nav-radius) !important;
}

/* Simple index pages (projects, news, contact…) */
.mail {
  background: var(--mail-bg) !important;
  color: var(--ink) !important;
}
.mail:hover {
  background: var(--mail-hover) !important;
}
.card:hover .body {
  background: var(--card-hover-bg) !important;
}
.pic {
  background: var(--pic-bg) !important;
}
.card {
  background: transparent;
}

/* Projects masonry card body uses --paper from theme */
.body {
  background: var(--paper);
}

/* ── Unified site footer (subpages + case pages) ── */
.site-foot {
  padding: clamp(24px, 4.5vw, 40px) clamp(16px, 4vw, 36px) clamp(20px, 3.5vw, 32px);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vw, 14px);
  text-align: center;
}
.site-foot-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(88px, 20vw, 128px);
  max-width: 42vw;
  opacity: 0.88;
  transition: opacity 0.2s ease;
}
.site-foot-logo:hover {
  opacity: 1;
}
.site-foot-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(14px, 2.2vw, 20px);
  object-fit: contain;
  object-position: center;
  filter: var(--logo-filter, none);
  mix-blend-mode: normal;
}
.site-foot-copy {
  margin: 0;
  font-size: clamp(0.58rem, 1.5vw, 0.68rem);
  letter-spacing: 0.08em;
  color: var(--muted);
  line-height: 1.5;
  max-width: 36em;
}
.site-foot--wide {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}
.site-foot--wide .site-foot-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.5vw, 10px);
}
.site-foot--wide .site-foot-logo {
  width: clamp(88px, 18vw, 120px);
}
.site-foot-tag {
  font-size: clamp(0.62rem, 1.4vw, 0.7rem);
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.site-foot--case {
  background: #000;
  border-top-color: var(--line);
}
.site-foot--case .site-foot-logo {
  width: clamp(80px, 16vw, 112px);
}
.site-foot--case .site-foot-logo img {
  max-height: clamp(13px, 1.9vw, 18px);
  filter: brightness(0) invert(1);
}
.site-foot--case .site-foot-copy {
  color: rgba(255, 255, 255, 0.52);
}
@media (max-width: 640px) {
  .site-foot--wide {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .site-foot-logo {
    width: clamp(76px, 28vw, 108px);
  }
}