:root {
  color-scheme: light;
  --page: #f7f3ec;
  --surface: #ffffff;
  --surface-raised: #fffcf7;
  --surface-soft: #eee8de;
  --ink: #20252b;
  --muted: #58636f;
  --subtle: #6d7782;
  --line: #ded8ce;
  --line-strong: #c8c0b5;
  --coral: #e86f51;
  --coral-hover: #d65d40;
  --coral-ink: #9c3a2a;
  --teal: #216b69;
  --teal-ink: #216b69;
  --violet: #7357b7;
  --violet-ink: #5a438f;
  --focus: #6145a5;
  --success: #26734f;
  --danger: #a3343b;
  --discipline-design: #b84b35;
  --discipline-programming: #216b69;
  --discipline-audio: #5a438f;
  --space-section: clamp(76px, 10vw, 132px);
  --radius-card: 22px;
  --motion-fast: 180ms;
  --motion-page: 420ms;
  --ease-editorial: cubic-bezier(.2,.7,.2,1);
  --shadow-soft: 0 12px 34px #44352012;
  --shadow-raised: 0 20px 50px #4435201a;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #111a22;
  --surface: #18232d;
  --surface-raised: #202d38;
  --surface-soft: #263540;
  --ink: #f3f1ec;
  --muted: #c3cbd0;
  --subtle: #aab5bc;
  --line: #394751;
  --line-strong: #53616b;
  --coral: #ff967a;
  --coral-hover: #ffad95;
  --teal: #74c6c1;
  --teal-ink: #74c6c1;
  --coral-ink: #ff967a;
  --violet: #b39ae8;
  --violet-ink: #b39ae8;
  --focus: #c6b3ff;
  --success: #82d6a8;
  --danger: #ff9ca1;
  --discipline-design: #ff9b82;
  --discipline-programming: #74c6c1;
  --discipline-audio: #b39ae8;
  --shadow-soft: 0 12px 34px #0003;
  --shadow-raised: 0 20px 50px #0005;
}
html:not([data-theme="dark"]) body[data-accent="sky"] { --coral: #79c7d5; --coral-hover: #66b5c4; }
html:not([data-theme="dark"]) body[data-accent="amber"] { --coral: #e86f51; --coral-hover: #d65d40; }
html:not([data-theme="dark"]) body[data-accent="rose"] { --coral: #df8ca0; --coral-hover: #d2768e; }
html[data-theme="dark"] body[data-accent="sky"] { --coral: #79cfe0; --coral-hover: #96deeb; }
html[data-theme="dark"] body[data-accent="amber"] { --coral: #ff967a; --coral-hover: #ffad95; }
html[data-theme="dark"] body[data-accent="rose"] { --coral: #f18baa; --coral-hover: #f7a5bc; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html:not([data-theme="dark"]) body {
  background: radial-gradient(ellipse 55% 40% at 86% 0%, #2f8c8a12, transparent 72%),
              radial-gradient(ellipse 44% 34% at 5% 40%, #7357b710, transparent 74%), var(--page);
  color: var(--ink);
}
html[data-theme="dark"] body { background: var(--page); color: var(--ink); }
html:not([data-theme="dark"]) .top {
  background: #f7f3ecef;
  border-color: var(--line);
  box-shadow: 0 4px 18px #4435200a;
}
html[data-theme="dark"] .top { background: #111a22ed; border-color: var(--line); }
.brand span, .bar nav a, .navright>a, .linkbutton { color: var(--muted); }
.bar nav a:hover, .navright>a:hover { color: var(--teal); }
.brand img { filter: none; }
.eyebrow { color: var(--teal-ink); }
.hero h1 { background-image: linear-gradient(110deg, var(--ink), var(--coral) 58%, var(--violet)); }
.page-title, .section h2, .section-head h2 { color: var(--ink); }
.lead, .muted, .hero-note { color: var(--muted); }
.section { border-color: var(--line); }

html:not([data-theme="dark"]) :is(.glass, .card, .service, .account-panel, .account-note, .form-card, .item-info-panel, .legal-slide, .legal-note) {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
}
html[data-theme="dark"] :is(.glass, .card, .service, .account-panel, .account-note, .form-card, .item-info-panel, .legal-slide, .legal-note) {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.card { overflow: hidden; }
.card:hover { border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); box-shadow: var(--shadow-raised); }
.cover { height: clamp(220px, 26vw, 330px); background: var(--surface-soft); }
.cardbody { color: var(--ink); }
.card h3, .card h3 a, .service h3 { color: var(--ink); }
.card p, .service p, .contact-hint { color: var(--muted); }
.work-kind-design .eyebrow { color: var(--coral-ink); }
.service-design>span { color: var(--coral); }
.work-kind-programming .eyebrow { color: var(--teal-ink); }
.service-programming>span { color: var(--teal); }
.work-kind-audio .eyebrow { color: var(--violet-ink); }
.service-audio>span { color: var(--violet); }
.item-cover, .gallery-image { border-color: var(--line); background: var(--surface-soft); }
.prose { color: var(--muted); }
.contact-card { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.contact-card b, .contact-detail { color: var(--ink); }
.contact-card small { color: var(--subtle); }

.button, .pill, .smallbtn {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}
.button:hover, .pill:hover, .smallbtn:hover { border-color: var(--teal); color: var(--ink); transform: translateY(-1px); }
.button.primary, .pill {
  border: 1px solid var(--coral);
  background: var(--coral);
  color: #20252b;
  box-shadow: 0 7px 18px #e86f5126;
}
.button.primary:hover, .pill:hover { background: var(--coral-hover); border-color: var(--coral-hover); color: #20252b; }
.button.danger-link, .danger-link { color: var(--danger); }
.button:disabled, button:disabled, select:disabled, input:disabled { opacity: .58; cursor: not-allowed; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.field, .filters input, .filters select, .adminsection select, .adminsection input, .adminsection textarea,
.admin-review-form input, .admin-review-form select, .admin-review-form textarea,
.admin-inline-form select, .admin-filter select, .admin-search input {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
.field::placeholder, input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
label, legend, .form-card label, .work-fields-grid>label, .work-kind-group>label { color: var(--ink); }
.work-fields-grid small, .work-kind-group small, .small, .admin-record-meta { color: var(--muted); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--teal); }
input[type="file"] { color: var(--muted); }
input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button {
  border-color: var(--coral);
  background: var(--coral);
  color: #20252b;
}
.flash.error { color: #70242b; background: #fde9e5; border-color: #d98980; }
.flash.ok { color: #185a3b; background: #e2f3e8; border-color: #7ab993; }
.status-published { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 11%, var(--surface)); }
.status-draft { color: #815323; border-color: #d8b579; background: #f8eedb; }
.sold-label { color: var(--violet); }
.footer { border-color: var(--line); color: var(--muted); }
.footer a:hover { color: var(--teal); }
.language, .notification-trigger, .account-avatar { border-color: var(--line); color: var(--ink); background: var(--surface); }
.language-options, .notification-popover, .account-menu-popover { color: var(--ink); border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-raised); }
.language-options a:hover, .account-menu-popover>a:hover { background: var(--surface-soft); }
.notification-item { color: var(--ink); border-color: var(--line); }
.notification-copy>span, .notification-copy small { color: var(--muted); }
.support-float { background: var(--coral); color: #20252b; box-shadow: var(--shadow-raised); }
.audio-dock { border-color: #46545f; background: #18232df2; box-shadow: 0 18px 48px #0004; color: #f3f1ec; }
.audio-dock .dock-track strong { color: #f3f1ec; }
.audio-dock .dock-track span, .audio-dock .dock-time, .audio-dock .dock-volume-icon { color: #c3cbd0; }
.audio-dock .dock-play { background: var(--coral); color: #20252b; }
.audio-dock .dock-seek, .audio-dock .dock-volume { accent-color: var(--coral); }
.audio-dock .dock-close { border-color: #53616b; color: #f3f1ec; }
.audio-dock:not([hidden]) ~ .support-float { bottom: 112px; }

/* The admin workspace follows the same light palette and keeps the optional night mode. */
html:not([data-theme="dark"]) body:has(.admin-shell) { background: var(--page); color: var(--ink); }
html:not([data-theme="dark"]) .admin-sidebar,
html:not([data-theme="dark"]) .admin-mobile-top { background: #eee8de; border-color: var(--line); color: var(--ink); }
html:not([data-theme="dark"]) .admin-mark,
html:not([data-theme="dark"]) .admin-sidebar-foot b,
html:not([data-theme="dark"]) .admin-page-head h1,
html:not([data-theme="dark"]) .admin-record-card h2 { color: var(--ink); }
html:not([data-theme="dark"]) .admin-nav-link { color: var(--muted); }
html:not([data-theme="dark"]) .admin-nav-link:hover,
html:not([data-theme="dark"]) .admin-nav-link.active { color: var(--ink); background: #ffffff; border-color: var(--line); }
html:not([data-theme="dark"]) .admin-nav-link.active>span,
html:not([data-theme="dark"]) .admin-text-link { color: var(--teal-ink); }
html:not([data-theme="dark"]) :is(.admin-panel, .admin-transaction, .admin-record-card, .admin-metric, .admin-quick, .admin-filter, .admin-details, .admin-message, .admin-empty) {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
html:not([data-theme="dark"]) :is(.admin-panel-head, .admin-transaction-head, .admin-detail-grid, .admin-card-actions, .admin-review-form, .admin-list-row, .admin-table th, .admin-table td) { border-color: var(--line); }
html:not([data-theme="dark"]) :is(.admin-page-head p, .admin-record-card>p, .admin-transaction>p, .admin-transaction-head p, .admin-detail-grid small, .admin-row-title small, .admin-record-meta, .admin-empty p) { color: var(--muted); }
html:not([data-theme="dark"]) :is(.admin-inline-form select, .admin-filter select, .admin-search input, .admin-review-form input, .admin-review-form select, .admin-review-form textarea, .admin-editor .field) {
  border-color: var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
}
html:not([data-theme="dark"]) .admin-order-card,
html:not([data-theme="dark"]) .admin-details,
html:not([data-theme="dark"]) .admin-request-files,
html:not([data-theme="dark"]) .admin-studio-previews { color: var(--ink); }
html:not([data-theme="dark"]) .admin-table th { color: var(--muted); background: var(--surface-soft); }
html:not([data-theme="dark"]) .audio-track-row { border-color: var(--line); }
html:not([data-theme="dark"]) .audio-track-row:hover { background: var(--surface-soft); }

.theme-toggle {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--teal); }
.theme-toggle-icon { font-size: 15px; }
.admin-mobile-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.audio-row-play.is-playing, .audio-preview.is-playing { background: var(--teal); color: #102328; }
.audio-track-row.is-playing { background: color-mix(in srgb, var(--teal) 10%, var(--surface)); }
.empty, .audio-empty, .admin-empty { color: var(--muted); }

/* Editorial composition: actual project imagery leads; brand accents stay restrained. */
html body { background-attachment: fixed; }
body::before { display:none!important; }
.wrap { width: min(1240px, calc(100% - 56px)); }
.top { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(16px); }
.hero.editorial-hero { min-height: min(690px, calc(100svh - 74px)); padding-block: clamp(46px,8vw,104px); gap: clamp(30px,7vw,100px); }
.editorial-hero .hero-copy { max-width: 620px; }
.editorial-hero .hero h1, .editorial-hero h1 { max-width: 12ch; font-size: clamp(54px,8.2vw,112px); line-height: .98; letter-spacing: -.065em; text-wrap: balance; }
.editorial-hero .lead { max-width: 44ch; font-size: clamp(17px,1.6vw,21px); line-height: 1.65; }
.hero-disciplines { display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:30px; }
.hero-disciplines a { display:inline-flex; align-items:center; gap:8px; min-height:34px; color:var(--muted); font-size:12px; font-weight:700; text-decoration:none; transition:color var(--motion-fast) ease; }
.hero-disciplines a:hover { color:var(--ink); }
.discipline-mark { width:9px; height:9px; display:inline-block; flex:0 0 auto; border-radius:50%; background:var(--teal); }
.design-mark { background:var(--discipline-design); }
.programming-mark { background:var(--discipline-programming); }
.audio-mark { background:var(--discipline-audio); }
.editorial-hero-art { position:relative; min-height:clamp(390px,48vw,590px); display:flex; align-items:center; justify-content:center; }
.hero-feature { position:relative; width:min(100%,510px); height:clamp(350px,43vw,530px); display:block; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-soft); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-raised); transform:rotate(1.6deg); transition:transform var(--motion-page) var(--ease-editorial), box-shadow var(--motion-page) var(--ease-editorial); }
.hero-feature:hover { transform:rotate(0) translateY(-4px); box-shadow:var(--shadow-raised); }
.hero-feature>img { width:100%; height:100%; display:block; object-fit:cover; }
.hero-feature::after { content:""; position:absolute; inset:42% 0 0; background:linear-gradient(transparent, color-mix(in srgb,var(--ink) 82%,transparent)); pointer-events:none; }
.hero-feature-label { position:absolute; z-index:1; inset:auto 24px 24px; display:grid; gap:6px; color:#fff; text-align:start; }
.hero-feature-label small { font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.78; }
.hero-feature-label b { font:600 clamp(24px,3vw,38px)/1.05 'Space Grotesk','IBM Plex Sans Arabic',sans-serif; }
.hero-feature-label i { font-size:12px; font-style:normal; opacity:.82; }
.hero-feature-empty { display:grid; place-items:center; transform:none; }
.hero-feature-empty>img { width:min(44%,220px); height:auto; max-height:45%; object-fit:contain; opacity:.88; }
.hero-feature-empty::after { inset:55% 0 0; }
.hero-listen { position:absolute; z-index:2; inset-block-start:18px; inset-inline-start:18px; min-width:48px; min-height:48px; display:flex; align-items:center; gap:8px; padding-inline:15px; border:0; border-radius:99px; background:var(--coral); color:#20252b; font-weight:700; cursor:pointer; box-shadow:var(--shadow-raised); }
.hero-listen.is-playing { background:var(--teal); }
.hero-art-index { position:absolute; inset-inline-end:2px; inset-block-end:1px; color:var(--muted); font:600 9px 'Space Grotesk',sans-serif; letter-spacing:.16em; }
.section { padding-block:var(--space-section); border-color:var(--line); }
.section-head { margin-bottom:clamp(22px,4vw,42px); }
.section-head h2 { font-size:clamp(32px,5.4vw,64px); line-height:1.03; letter-spacing:-.045em; text-wrap:balance; }
.section-head>div>p { max-width:48ch; line-height:1.7; }
.editorial-work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.work-slider.editorial-work-grid { display:flex; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:inline mandatory; padding:2px 2px 14px; }
.work-slider.editorial-work-grid>.card { flex:0 0 calc((100% - 36px) / 3); scroll-snap-align:start; }
.work-slider.editorial-work-grid>.card:only-child { flex-basis:min(720px,68%); }
.editorial-work-grid>.card { min-width:0; }
.card { border-radius:var(--radius-card); transition:transform var(--motion-page) var(--ease-editorial),border-color var(--motion-fast) ease,box-shadow var(--motion-page) var(--ease-editorial); }
.card:hover { transform:translateY(-4px); }
.card .cover { height:auto; aspect-ratio:1.18; object-fit:cover; transition:transform 600ms var(--ease-editorial); }
.card:hover .cover { transform:scale(1.025); }
.cardbody { padding:20px 21px 22px; }
.cardbody p { display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical; line-height:1.65; }
.service { min-height:250px; padding:clamp(23px,3vw,36px); border-radius:var(--radius-card); transition:transform var(--motion-page) var(--ease-editorial),border-color var(--motion-fast) ease; }
.service:hover { transform:translateY(-4px); }
.service-design { --service-accent:var(--discipline-design); }
.service-programming { --service-accent:var(--discipline-programming); }
.service-audio { --service-accent:var(--discipline-audio); }
.service>span:first-child { color:var(--service-accent); font-size:24px; }
.service h3 { margin-top:23px; font-size:clamp(23px,3vw,32px); }
.service-link { color:var(--service-accent); }
.editorial-empty { position:relative; overflow:hidden; min-height:250px; padding:clamp(26px,5vw,62px); border:1px solid var(--line); border-radius:var(--radius-card); background:linear-gradient(135deg,var(--surface),var(--surface-raised)); box-shadow:var(--shadow-soft); }
.editorial-empty h2,.editorial-empty h3 { max-width:18ch; margin:10px 0; color:var(--ink); font:600 clamp(27px,4vw,44px)/1.12 'Space Grotesk','IBM Plex Sans Arabic',sans-serif; letter-spacing:-.04em; }
.editorial-empty>p { max-width:65ch; color:var(--muted); line-height:1.85; }
.editorial-empty>.button { margin-top:14px; }
.discipline-empty { margin-top:28px; }
.empty-stamp { width:62px; height:62px; display:grid; place-items:center; margin-bottom:24px; border:1px solid var(--line); border-radius:50%; color:var(--discipline-design); font-size:25px; }
.discipline-programming .empty-stamp { color:var(--discipline-programming); }
.discipline-audio .empty-stamp { color:var(--discipline-audio); }
.capability-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.capability-list span,.work-tags li { padding:7px 11px; border:1px solid var(--line); border-radius:99px; background:var(--surface); color:var(--muted); font-size:11px; }
.discipline-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:34px; padding-block:clamp(40px,8vw,92px) 16px; }
.discipline-heading-copy { max-width:760px; }
.discipline-heading .eyebrow { display:flex; align-items:center; gap:10px; }
.discipline-heading .page-title { margin:13px 0 12px; font-size:clamp(44px,7vw,82px); line-height:1; letter-spacing:-.055em; }
.discipline-heading .lead { max-width:57ch; margin:0; line-height:1.7; }
.discipline-design .discipline-heading .eyebrow { color:var(--discipline-design); }
.discipline-programming .discipline-heading .eyebrow { color:var(--discipline-programming); }
.discipline-audio .discipline-heading .eyebrow { color:var(--discipline-audio); }
.discipline-filters { margin:10px 0 28px; }
.audio-editorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
.audio-editorial-grid:has(>.audio-release-card:only-child) { grid-template-columns:minmax(0,640px); }
.audio-release-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--shadow-soft); transition:transform var(--motion-page) var(--ease-editorial),box-shadow var(--motion-page) var(--ease-editorial),border-color var(--motion-fast) ease; }
.audio-release-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-raised); }
.audio-release-card.is-playing { border-color:var(--discipline-audio); box-shadow:0 0 0 2px color-mix(in srgb,var(--discipline-audio) 22%,transparent),var(--shadow-raised); }
.audio-release-art { position:relative; aspect-ratio:1.16; overflow:hidden; background:var(--surface-soft); }
.audio-release-art>a { position:absolute; inset:0; display:grid; place-items:center; }
.audio-release-art img { width:100%; height:100%; object-fit:cover; transition:transform 650ms var(--ease-editorial); }
.audio-release-card:hover .audio-release-art img { transform:scale(1.035); }
.audio-cover-placeholder { color:var(--discipline-audio); font-size:72px; }
.audio-release-play { position:absolute; inset-inline-start:15px; inset-block-end:15px; z-index:1; width:48px; height:48px; border:0; border-radius:50%; background:var(--coral); color:#20252b; font-size:16px; cursor:pointer; box-shadow:var(--shadow-raised); transition:transform var(--motion-fast) ease,background var(--motion-fast) ease; }
.audio-release-play:hover { transform:scale(1.06); }
.audio-release-play.is-playing { background:var(--discipline-audio); color:#fff; }
.audio-release-copy { padding:20px; }
.audio-release-meta { display:flex; justify-content:space-between; gap:12px; color:var(--discipline-audio); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.audio-release-copy h2 { margin:11px 0 2px; color:var(--ink); font:600 clamp(22px,2.6vw,30px)/1.12 'Space Grotesk','IBM Plex Sans Arabic',sans-serif; overflow-wrap:anywhere; }
.audio-release-copy h2 a { color:inherit; text-decoration:none; }
.audio-release-artist { margin:0; color:var(--muted); font-size:12px; }
.audio-release-description { min-height:3.2em; color:var(--muted); font-size:13px; line-height:1.65; white-space:pre-line; }
.work-tags { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; padding:0; list-style:none; }
.work-tags li { padding:5px 9px; font-size:10px; }
.audio-release-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:17px; padding-top:15px; border-top:1px solid var(--line); }
.text-link { color:var(--ink); font-size:11px; font-weight:700; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px; }
.text-link:hover { color:var(--discipline-audio); }
.item-tags { margin-block:16px; }
.prose { line-height:1.85; white-space:pre-line; }
.auth-return-note { margin:0 0 20px; padding:15px 17px; border:1px solid var(--line); border-inline-start:3px solid var(--coral); border-radius:12px; background:var(--surface-soft); color:var(--ink); }
.auth-return-note p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
.auth-page .form-card { color:var(--ink); background:var(--surface); border-color:var(--line); }
.audio-dock { background:var(--surface); color:var(--ink); border-color:var(--line-strong); box-shadow:var(--shadow-raised); backdrop-filter:blur(18px); }
.audio-dock .dock-track strong { color:var(--ink); }
.audio-dock .dock-track span,.audio-dock .dock-time,.audio-dock .dock-volume-icon { color:var(--muted); }
.audio-dock .dock-close { color:var(--ink); border-color:var(--line-strong); }
.audio-dock .dock-play { width:42px; height:42px; border-radius:50%; }
.support-float { background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); box-shadow:var(--shadow-soft); }
.support-float:hover { color:var(--coral-ink); border-color:var(--coral); }
.footer { padding-block:26px; }
body:has(.audio-dock:not([hidden])) .footer { padding-block-end:112px; }
.item-cover { border-radius:var(--radius-card); }
.legal-index a { color:var(--ink); }
.language-options,.notification-popover,.account-menu-popover { color:var(--ink); }
.button.primary,.pill { background:var(--coral); border-color:var(--coral); }
.button.primary:hover,.pill:hover { background:var(--coral-hover); border-color:var(--coral-hover); }
.button,.pill,.smallbtn { transition:transform var(--motion-fast) ease,border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease; }
.button:not(:disabled):active,.audio-release-play:active,.hero-listen:active { transform:scale(.98); }
.field:focus-visible,.filters input:focus-visible,.filters select:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* VISION home: the identity mark leads, the work takes the stage. */
.home-intro { min-height:0; display:grid; justify-items:center; padding-block:clamp(35px,6vw,76px) clamp(48px,8vw,100px); text-align:center; }
.home-logo-eye { width:clamp(125px,17vw,210px); aspect-ratio:1.45; display:grid; place-items:center; margin:0 auto 25px; position:relative; }
.eye-rim { width:100%; height:100%; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line-strong); border-radius:50% / 48%; background:var(--surface); box-shadow:var(--shadow-raised); }
.eye-rim img { width:78%; height:75%; object-fit:contain; }
.home-about { max-width:790px; transition:opacity .55s var(--ease-editorial),transform .65s var(--ease-editorial); }
.home-about h1 { margin:12px auto 15px; color:var(--ink); font:600 clamp(32px,5vw,62px)/1.08 'Space Grotesk','IBM Plex Sans Arabic',sans-serif; letter-spacing:-.05em; }
.home-about .lead { max-width:620px; margin-inline:auto; color:var(--muted); }
.home-about .actions { justify-content:center; }
.featured-stage-wrap { width:min(1320px,calc(100% - 56px)); margin:0 auto; padding-bottom:clamp(55px,8vw,105px); }
.featured-stage { height:min(70vh,660px); min-height:400px; position:relative; overflow:hidden; isolation:isolate; border:1px solid var(--line); border-radius:clamp(18px,3vw,34px); background:var(--surface-soft); box-shadow:var(--shadow-raised); }
.featured-stage-image { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
.featured-stage-image img { width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-editorial),filter .8s ease; }
.featured-stage:hover .featured-stage-image img { transform:scale(1.025); }
.featured-stage-placeholder { font:600 clamp(70px,15vw,190px) 'Space Grotesk',sans-serif; color:var(--muted); }
.featured-stage-shade { position:absolute; inset:35% 0 0; z-index:1; background:linear-gradient(transparent,color-mix(in srgb,#101411 83%,transparent)); pointer-events:none; }
.featured-stage-copy { position:absolute; z-index:2; inset-inline-start:clamp(22px,5vw,72px); inset-block-end:clamp(25px,5vw,64px); max-width:min(680px,75%); color:#fff; }
.featured-stage-copy .eyebrow { color:#f0b294; }
.featured-stage-copy h2 { margin:10px 0 6px; font:600 clamp(36px,7vw,82px)/1 'Space Grotesk','IBM Plex Sans Arabic',sans-serif; letter-spacing:-.06em; }
.featured-stage-copy h2 a { color:inherit; }
.featured-stage-copy p { max-width:58ch; margin:0; color:#f5eee4; font-size:clamp(13px,1.4vw,17px); }
.featured-stage-link { display:inline-block; margin-top:17px; color:#fff; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.featured-stage-play { position:absolute; z-index:3; inset-block-start:24px; inset-inline-start:24px; min-height:48px; padding:0 18px; border:0; border-radius:99px; background:var(--coral); color:#fff; font-weight:700; cursor:pointer; box-shadow:var(--shadow-raised); }
.featured-stage-play.is-playing { background:var(--teal); }
.featured-stage-index { position:absolute; z-index:2; inset-inline-end:24px; inset-block-end:22px; color:#fff; font:600 10px 'Space Grotesk',sans-serif; letter-spacing:.16em; }
.home-eye-bar { position:fixed; z-index:18; inset-inline:0; inset-block-end:0; min-height:62px; display:flex; align-items:center; gap:12px; padding:7px max(22px,calc((100vw - 1240px)/2)); border-top:1px solid var(--line); background:color-mix(in srgb,var(--surface) 92%,transparent); color:var(--ink); backdrop-filter:blur(18px); box-shadow:0 -10px 35px #1816120d; font:700 11px 'Space Grotesk',sans-serif; letter-spacing:.09em; }
.home-eye-bar small { display:block; margin-top:2px; color:var(--muted); font:600 8px 'DM Sans',sans-serif; letter-spacing:.15em; }
.home-eye-mark { width:44px; height:38px; position:relative; display:grid; place-items:center; overflow:hidden; }
.home-eye-mark img { width:100%; height:100%; object-fit:contain; }
.eyelid { position:absolute; inset-inline:0; height:52%; background:var(--surface); pointer-events:none; }
.eyelid.upper { inset-block-start:0; border-bottom:1px solid var(--coral); border-radius:0 0 50% 50%; transform:translateY(-105%) scaleY(.1); animation:vision-blink 5.4s infinite; }
.eyelid.lower { inset-block-end:0; border-top:1px solid var(--coral); border-radius:50% 50% 0 0; transform:translateY(105%) scaleY(.1); animation:vision-blink 5.4s infinite; }
.eye-bar-arrow { margin-inline-start:auto; color:var(--coral); font-size:19px; }
@keyframes vision-blink { 0%,43%,47%,100% { transform:translateY(var(--lid-open, -105%)) scaleY(.1); } 44%,46% { transform:translateY(0) scaleY(1); } }
.eyelid.lower { --lid-open:105%; }
body.has-left-home-intro .home-about { opacity:0; transform:translateY(-18px); }
body:has(.home-eye-bar) { padding-bottom:62px; }
body:has(.home-eye-bar) .support-float { inset-block-end:78px; }
body:has(.home-eye-bar) .audio-dock:not([hidden]) { inset-block-end:74px; }
.audio-player-page { display:grid; gap:28px; }
.audio-now-playing { display:grid; grid-template-columns:minmax(220px,34%) 1fr; gap:clamp(24px,5vw,64px); align-items:center; padding:clamp(20px,4vw,50px); border:1px solid var(--line); border-radius:var(--radius-card); background:linear-gradient(125deg,var(--surface),var(--surface-raised)); box-shadow:var(--shadow-soft); }
.audio-now-art { position:relative; width:100%; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; background:var(--surface-soft); box-shadow:var(--shadow-raised); }
.audio-now-art img { width:100%; height:100%; object-fit:cover; }
.audio-now-art>span { color:var(--discipline-audio); font-size:100px; }
.audio-art-orbit { position:absolute; inset:12%; border:1px solid #ffffff78; border-radius:50%; pointer-events:none; }
.audio-now-copy h2 { margin:8px 0; color:var(--ink); font:600 clamp(32px,5vw,58px)/1.08 'Space Grotesk','IBM Plex Sans Arabic',sans-serif; letter-spacing:-.05em; }
.audio-now-copy>p { color:var(--muted); }
.audio-now-feature { display:grid; justify-items:start; gap:4px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.audio-now-feature>span { color:var(--discipline-audio); font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.audio-now-feature>b { color:var(--ink); font-size:20px; }
.audio-now-feature>small { margin-bottom:10px; color:var(--muted); }
.audio-playlist { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.audio-playlist-head,.audio-playlist-row { display:grid; grid-template-columns:42px minmax(220px,1.4fr) minmax(120px,.7fr) 72px minmax(125px,.7fr); align-items:center; gap:12px; padding:11px 16px; }
.audio-playlist-head { color:var(--muted); background:var(--surface-soft); font-size:10px; font-weight:700; }
.audio-playlist-row { min-height:74px; border-top:1px solid var(--line); transition:background .2s ease; }
.audio-playlist-row:hover,.audio-playlist-row.is-playing { background:color-mix(in srgb,var(--discipline-audio) 8%,var(--surface)); }
.audio-playlist-index,.audio-playlist-duration { color:var(--muted); font-size:11px; }
.audio-playlist-track { min-width:0; display:flex; align-items:center; gap:12px; }
.audio-playlist-play { width:34px; height:34px; flex:none; border:0; border-radius:50%; background:var(--surface-soft); color:var(--ink); cursor:pointer; }
.audio-playlist-play:hover,.audio-playlist-play.is-playing { background:var(--discipline-audio); color:#fff; }
.audio-playlist-play.is-disabled { display:grid; place-items:center; cursor:default; }
.audio-playlist-cover { width:46px; height:46px; flex:none; display:grid; place-items:center; overflow:hidden; background:var(--surface-soft); color:var(--discipline-audio); }
.audio-playlist-cover img { width:100%; height:100%; object-fit:cover; }
.audio-playlist-title { min-width:0; display:grid; gap:3px; }
.audio-playlist-title b { overflow:hidden; color:var(--ink); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.audio-playlist-title small,.audio-playlist-album { color:var(--muted); font-size:11px; }
.audio-playlist-action { text-align:end; }
.audio-playlist-action a { color:var(--discipline-audio); font-size:11px; font-weight:700; }
.customer-phone { direction:ltr; text-align:start!important; white-space:nowrap; }
.customer-phone a { color:var(--teal-ink); text-decoration:underline; text-underline-offset:3px; }
.home-feature-help { display:block; margin:-5px 0 8px; color:var(--muted); font-size:10px; line-height:1.5; }
.admin-priority-panel { margin-block:18px 22px; }
.admin-priority-row .priority-payment { color:var(--coral-ink); background:color-mix(in srgb,var(--coral) 12%,var(--surface)); }
.admin-priority-row .priority-request { color:var(--teal-ink); background:color-mix(in srgb,var(--teal) 12%,var(--surface)); }
.admin-priority-empty { padding:24px; }
.home-eye-bar:hover { color:var(--coral-ink); }
@media(max-width:720px){.featured-stage-wrap{width:calc(100% - 28px)}.featured-stage{height:clamp(400px,72vh,570px);min-height:0}.featured-stage-copy{max-width:86%;inset-inline-start:20px;inset-block-end:25px}.featured-stage-copy h2{font-size:clamp(40px,12vw,68px)}.featured-stage-index{display:none}.audio-now-playing{grid-template-columns:1fr;gap:20px}.audio-now-art{width:min(100%,340px);margin-inline:auto}.audio-playlist-head{display:none}.audio-playlist-row{grid-template-columns:28px minmax(0,1fr) 48px;gap:8px;padding:9px}.audio-playlist-album{display:none}.audio-playlist-action{grid-column:2/4;justify-self:start;margin-inline-start:48px}.audio-playlist-title b{font-size:12px}.home-eye-bar{min-height:56px;padding-inline:16px}body:has(.home-eye-bar){padding-bottom:56px}.home-eye-mark{width:38px;height:34px}}
@media(prefers-reduced-motion:reduce){.eyelid{animation:none!important;transform:translateY(-105%) scaleY(.1)!important}.eyelid.lower{transform:translateY(105%) scaleY(.1)!important}.home-about,.featured-stage-image img,.audio-playlist-row{transition:none!important}}

@media (max-width: 900px) {
  .editorial-work-grid,.work-slider.editorial-work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-slider.editorial-work-grid>.card { flex-basis:calc((100% - 18px) / 2); }
  .work-slider.editorial-work-grid>.card:only-child { flex-basis:min(720px,82%); }
  .audio-editorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero.editorial-hero { min-height:auto; }
}
@media (max-width: 680px) {
  .wrap { width:min(100% - 32px, 1240px); }
  .hero.editorial-hero { padding-block:30px 52px; gap:10px; }
  .editorial-hero-art { grid-row:1; min-height:clamp(270px,78vw,430px); }
  .hero-feature { height:clamp(260px,74vw,400px); border-radius:18px; }
  .hero-feature-label { inset-inline:17px; inset-block-end:17px; }
  .hero-listen { inset-block-start:12px; inset-inline-start:12px; }
  .hero-art-index { inset-inline-end:0; inset-block-end:-19px; }
  .editorial-hero h1 { font-size:clamp(46px,13vw,72px); }
  .hero-disciplines { gap:6px 13px; margin-top:20px; }
  .section { padding-block:68px; }
  .editorial-work-grid { grid-template-columns:1fr; }
  .work-slider.editorial-work-grid { display:flex; }
  .work-slider.editorial-work-grid>.card { flex-basis:82vw; scroll-snap-align:start; }
  .audio-editorial-grid { grid-template-columns:1fr; gap:14px; }
  .audio-release-card { display:grid; grid-template-columns:minmax(100px,34%) minmax(0,1fr); }
  .audio-release-art { aspect-ratio:1; align-self:center; }
  .audio-release-copy { padding:14px; }
  .audio-release-description { min-height:0; font-size:12px; }
  .audio-release-copy h2 { font-size:22px; }
  .discipline-heading { align-items:stretch; flex-direction:column; gap:18px; padding-block:34px 8px; }
  .discipline-heading>.button { align-self:flex-start; }
  .discipline-heading .page-title { font-size:clamp(42px,12vw,64px); }
  .discipline-filters { display:grid; grid-template-columns:1fr auto; }
  .discipline-filters input[name=q] { grid-column:1/-1; }
  .editorial-empty { min-height:0; padding:24px; }
  body:has(.audio-dock:not([hidden])) .footer { padding-block-end:125px; }
  .audio-release-play { width:42px; height:42px; inset-inline-start:9px; inset-block-end:9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto!important; }
  .hero-feature,.card,.service,.audio-release-card,.audio-release-art img,.audio-release-play,.button { transition:none!important; }
  .hero-feature:hover,.card:hover,.service:hover,.audio-release-card:hover { transform:none!important; }
}
body[data-motion="reduced"] .hero-feature,body[data-motion="reduced"] .card,body[data-motion="reduced"] .service,body[data-motion="reduced"] .audio-release-card,body[data-motion="reduced"] .audio-release-art img,body[data-motion="reduced"] .audio-release-play,body[data-motion="reduced"] .button { transition:none!important; }
body[data-motion="reduced"] .hero-feature:hover,body[data-motion="reduced"] .card:hover,body[data-motion="reduced"] .service:hover,body[data-motion="reduced"] .audio-release-card:hover { transform:none!important; }

@media (max-width: 680px) {
  .cover { height: clamp(230px, 70vw, 360px); }
  .theme-toggle { min-width: 40px; min-height: 40px; padding: 8px; }
  .theme-toggle-label { display: none; }
  .audio-dock:not([hidden]) ~ .support-float { bottom: 100px; }
}
@media (max-width: 760px) {
  .admin-mobile-head .admin-mark { display:none; }
}
@media (min-width: 761px) {
  .admin-mobile-head .admin-menu-toggle { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body[data-motion="reduced"] *, body[data-motion="reduced"] *::before, body[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

html:not([data-theme="dark"]) :is(.work-editor-section, .work-editor-rail, .work-live-preview, .work-kind-group, .editor-group, .payment-guide-current, .payment-guide-picker, .admin-preview-picker) {
  color: var(--ink); border-color: var(--line); background: var(--surface);
}
html:not([data-theme="dark"]) .work-live-image { background: linear-gradient(135deg,#eee8de,#e4eeeb); color: var(--teal); }
html:not([data-theme="dark"]) .work-live-copy h3, html:not([data-theme="dark"]) .work-image-drop>b, html:not([data-theme="dark"]) .payment-guide-picker b { color: var(--ink); }
html:not([data-theme="dark"]) .work-live-copy p, html:not([data-theme="dark"]) .work-image-drop>small, html:not([data-theme="dark"]) .payment-guide-picker small { color: var(--muted); }
html:not([data-theme="dark"]) .work-image-tile, html:not([data-theme="dark"]) .payment-guide-current img { background: var(--surface-soft); border-color: var(--line); }
@media (min-width: 761px) { .admin-mobile-head .theme-toggle { align-self:flex-start; } }

/* Keep the new fixed home controls clear of each other and preserve reduced-motion content. */
@media (prefers-reduced-motion: reduce) {
  body.has-left-home-intro .home-about { opacity:1!important; transform:none!important; }
}
body[data-motion="reduced"].has-left-home-intro .home-about { opacity:1!important; transform:none!important; }
body:has(.home-eye-bar):has(.audio-dock:not([hidden])) .support-float { inset-block-end:162px; }
@media (max-width:680px) {
  body:has(.home-eye-bar):has(.audio-dock:not([hidden])) .support-float { inset-block-end:152px; }
}

/* VISION — final visual fixes (reviewed from Claude package) */
/* =========================================================
   VISION — final visual fixes (loaded LAST, after design-system.css)
   CSS-only: no markup, routes or behaviour were changed.
   ========================================================= */

/* 1) Logo: the artwork is white, so it vanished on the light theme */
html:not([data-theme="dark"]) .brand img,
html:not([data-theme="dark"]) .eye-rim img,
html:not([data-theme="dark"]) .home-eye-mark img { filter: invert(1) brightness(.12); }
html:not([data-theme="dark"]) .brand:hover img { filter: invert(1) brightness(.12) drop-shadow(0 0 10px #79c7d588); }
.brand { gap: 12px; }
.brand span { color: var(--muted); font-weight: 600; }

/* 2) Text on the accent (pale sky / coral) buttons must be dark */
.button.primary, .pill, .featured-stage-play, .hero-listen,
.audio-preview, .audio-release-play, .support-float:hover { color: #14202a; }
.button.primary:hover, .pill:hover { color: #0b141b; }
.pill { font-weight: 700; white-space: nowrap; }

/* 3) Footer: remove the dark gradient, make every link readable */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  padding-block: 28px 44px;
}
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-meta { border-bottom: 1px solid var(--line); flex-wrap: wrap; row-gap: 8px; }
.footer-legal { gap: 12px 24px; padding-top: 18px; }
.footer-legal a { font-size: 13px; }
body:has(.audio-dock:not([hidden])) .footer { padding-block-end: 120px; }

/* 4) Contact section: pale text on white cards */
.contact-intro .muted { color: var(--muted); font-size: 16px; }
.contact-signoff { color: var(--subtle); font-style: normal; font-size: 14px; }
.contact-card small { color: var(--subtle); font-size: 11px; }
.contact-card b { color: var(--ink); font-size: 21px; }
.contact-card .contact-detail { color: var(--teal-ink); font-size: 14px; font-weight: 700; }
.contact-card .contact-hint { color: var(--muted); font-size: 13px; }
.contact-card:hover .contact-hint { color: var(--ink); }

/* 5) Service cards: oversized, washed-out “Explore” links */
.service .service-link { font-size: 14px; font-weight: 700; letter-spacing: 0; }
.service-design .service-link { color: var(--discipline-design); }
.service-programming .service-link { color: var(--discipline-programming); }
.service-audio .service-link { color: var(--discipline-audio); }

/* 6) Back-to-top: was a full-width bar glued to the screen bottom,
      now a small pill that appears only after the intro */
.home-eye-bar {
  inset-inline: auto;
  inset-inline-start: max(16px, calc((100vw - 1240px) / 2));
  inset-block-end: 20px;
  min-height: 0;
  width: auto;
  gap: 10px;
  padding: 6px 16px 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
body.has-left-home-intro .home-eye-bar { opacity: 1; visibility: visible; transform: none; }
.home-eye-bar small { color: var(--subtle); }
body:has(.home-eye-bar) { padding-bottom: 0; }
body:has(.home-eye-bar) .support-float,
.support-float { inset-block-end: 20px; inset-inline-end: 20px; }
body:has(.audio-dock:not([hidden])) .support-float,
body:has(.audio-dock:not([hidden])) .home-eye-bar { inset-block-end: 96px; }
body:has(.home-eye-bar) .audio-dock:not([hidden]) { inset-block-end: 16px; }

/* 7) Auth / form details */
.form-card p a, .auth-page p a { color: var(--teal-ink); font-weight: 600; text-underline-offset: 3px; }
.legal-consent a { color: var(--teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-consent { color: var(--muted); line-height: 1.5; }
.google-unavailable + .small.muted { color: var(--subtle); font-size: 12.5px; }

/* 8) Price tag on the audio item page */
.license-card > b { display: inline-block; font-size: 22px; color: var(--ink); direction: ltr; unicode-bidi: isolate; }

/* 9) Header: crowded on phones */
@media (max-width: 760px) {
  .top .bar { flex-wrap: wrap; row-gap: 6px; column-gap: 10px; padding-block: 8px; }
  .brand img { width: 64px; height: 36px; }
  .brand span { display: none; }
  .navright { margin-inline-start: auto; gap: 8px; flex-wrap: nowrap; }
  .navright > a { font-size: 13px; white-space: nowrap; }
  .navright .pill { padding: 8px 14px; font-size: 13px; min-height: 36px; display: inline-flex; align-items: center; }
  .theme-toggle { min-width: 38px; min-height: 36px; padding: 0 10px; }
  .theme-toggle-label { display: none; }
  .bar nav { order: 3; width: 100%; display: flex; justify-content: space-between; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
  .bar nav a { font-size: 14px; padding: 8px 6px; }
  .footer-meta { flex-direction: column; align-items: flex-start; }
  .footer-meta > span:last-child { text-align: start; }
  .footer-legal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-eye-bar { inset-inline-start: 14px; inset-block-end: 14px; }
  .support-float { inset-inline-end: 14px; inset-block-end: 14px; }
}
@media (max-width: 380px) { .footer-legal { grid-template-columns: 1fr; } }

/* ---- pass 2 ---- */
.navright > a.pill, .bar .navright > a.pill { color: #14202a; }
.navright > a.pill:hover { color: #0b141b; }
.footer { padding-block-end: 92px; }
.contact-card { min-height: 170px; }
.contact-card .contact-hint { opacity: 1; }

/* ---- pass 3: legal pages / auth leftovers from the old dark theme ---- */
.legal-index a { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.legal-index a:hover { color: #14202a; background: var(--coral); border-color: var(--coral); }
.legal-slide { background: var(--surface); border-color: var(--line); box-shadow: none; }
.legal-slide[open] { border-color: var(--teal); box-shadow: var(--shadow-soft); }
.legal-slide summary { color: var(--ink); }
.legal-slide summary b { color: var(--teal-ink); border-color: var(--line-strong); background: var(--surface-soft); }
.legal-slide-body { color: var(--muted); }
.legal-note { background: var(--surface-soft); border-color: var(--line-strong); }
.legal-note p { color: var(--muted); }
.legal-note a { color: var(--teal-ink); font-weight: 600; }
.legal-consent span, .legal-consent { color: var(--muted); }
.auth-divider { color: var(--subtle); }
.auth-divider::before, .auth-divider::after { border-top-color: var(--line-strong); }
.contact-card .contact-hint, .contact-card span.contact-hint { color: var(--muted); }
.contact-signoff { color: var(--muted); }
.eye-bar-arrow { color: var(--teal-ink); }

/* ---- pass 4: form controls, drop zones and support chat in the light theme ---- */
select, select.field, textarea, textarea.field, .chat-compose textarea,
.adminsection select, .adminsection textarea {
  background-color: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 12px;
}
select, select.field { max-width: none; padding-inline-end: 34px; }
select option { background: var(--surface); color: var(--ink); }
.field:disabled, input:disabled { background: var(--surface-soft); color: var(--muted); opacity: 1; }
label { color: var(--ink); }
label small, fieldset small { color: var(--subtle); }
.settings-group legend, fieldset legend { color: var(--ink); font-weight: 700; }
.account-delete summary, .danger summary { color: var(--danger); font-weight: 600; }

.reference-dropzone, .audio-file-drop, .work-image-drop {
  background: var(--surface-soft); color: var(--ink);
  border: 1.5px dashed var(--line-strong);
}
.reference-dropzone:hover, .audio-file-drop:hover, .work-image-drop:hover { background: var(--surface); border-color: var(--teal); }
.reference-dropzone b, .audio-file-drop b { color: var(--ink); }
.reference-dropzone small, .audio-file-drop small { color: var(--muted); }

/* support chat */
.chat-layout { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-soft); overflow: hidden; color: var(--ink); }
.chat-inbox { background: var(--surface-soft); border-inline-end: 1px solid var(--line); color: var(--ink); }
.chat-inbox > header { border-bottom: 1px solid var(--line); color: var(--ink); }
.chat-view-tabs a { color: var(--muted); border-radius: 999px; }
.chat-view-tabs a.active { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chat-thread-row a { color: var(--ink); }
.chat-thread-row a small { color: var(--subtle); }
.chat-thread-row a.selected { background: var(--surface); box-shadow: inset 0 0 0 1px var(--teal); }
.chat-thread-row a b, .chat-window-head b { color: var(--ink); }
.chat-avatar { background: var(--teal); color: #fff; }
.chat-window { background: var(--surface); color: var(--ink); }
.chat-window-head { border-bottom: 1px solid var(--line); color: var(--ink); }
.chat-window-head small { color: var(--subtle); }
.chat-messages .muted, .chat-window .muted { color: var(--muted); }
.chat-bubble.theirs { background: var(--surface-soft); color: var(--ink); border: 1px solid var(--line); }
.chat-bubble.mine { background: var(--coral); color: #14202a; }
.chat-bubble.mine small, .chat-bubble.mine b { color: #14202a; }
.chat-bubble small { color: var(--subtle); }
.chat-compose { background: var(--surface); border-top: 1px solid var(--line); }
.chat-compose textarea { background: var(--surface-soft); }
.chat-attach { background: var(--surface-soft); color: var(--ink); border: 1px solid var(--line-strong); }

/* ---- pass 5: leftover pale text from the old dark theme (light theme only) ----
   Scoped to <main>, excluding the home hero (text over a photo stays white). */
html:not([data-theme="dark"]):not([data-x]) main > :not(.featured-stage-wrap) :is(h1,h2,h3,h4,legend,label,strong,b,th) { color: var(--ink); }
html:not([data-theme="dark"]):not([data-x]) main > :not(.featured-stage-wrap) :is(p,small,li,td,dd) { color: var(--muted); }
html:not([data-theme="dark"]):not([data-x]) main > :not(.featured-stage-wrap) :is(label small, .field-error) { color: var(--subtle); }
html:not([data-theme="dark"]):not([data-x]) main .field-error { color: var(--danger); }
html:not([data-theme="dark"]):not([data-x]) main :is(.admin-sidebar-foot a, .admin-metric small, .admin-quick span, .admin-list-row > span, .admin-type-icon, .admin-empty span, .chat-start-icon, .audio-file-plus, .work-section-ornament, .admin-nav-label, .admin-mark small) { color: var(--teal-ink); }
html:not([data-theme="dark"]):not([data-x]) main .admin-sidebar-foot > span,
html:not([data-theme="dark"]):not([data-x]) main .admin-mark small { color: var(--subtle); }
html:not([data-theme="dark"]):not([data-x]) main .admin-mark-icon { color: #fff; }
html:not([data-theme="dark"]):not([data-x]) main .admin-menu-toggle { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
html:not([data-theme="dark"]):not([data-x]) main .chat-bubble.mine :is(p,b,small) { color: #14202a; }
html:not([data-theme="dark"]):not([data-x]) main :is(.danger p, .account-delete p) { color: var(--muted); }
html:not([data-theme="dark"]):not([data-x]) main :is(.work-rail-label, .work-rail-feature, .license-translations label) { color: var(--ink); }
html:not([data-theme="dark"]):not([data-x]) main .editor-group > legend { color: var(--coral-ink); }
html:not([data-theme="dark"]):not([data-x]) main :is(.work-image-remove, .work-image-badge, .work-image-plus) { color: #fff; }
/* account dropdown (notifications / profile) */
html:not([data-theme="dark"]) .account-menu-popover a, html:not([data-theme="dark"]) .account-menu-popover .linkbutton { color: var(--ink); }
html:not([data-theme="dark"]) .account-menu-popover small { color: var(--subtle); }
html:not([data-theme="dark"]) .notification-popover button { color: var(--teal-ink); }

/* ---- pass 6: last small contrast items ---- */
html:not([data-theme="dark"]):not([data-x]) main .admin-nav-link > span { color: var(--teal-ink); }
html:not([data-theme="dark"]):not([data-x]) main :is(.admin-mark small, .admin-sidebar-foot > span, .admin-nav-label, .admin-metric > span, .chat-empty-list, .reference-dropzone small, .audio-file-drop small) { color: var(--muted); }
html[data-theme="dark"] main .admin-nav-label { color: var(--muted); }
html[data-theme="dark"] main .reference-plus { color: #14202a; }

/* ---- pass 7: tiny header text on phones ---- */
@media (max-width: 760px) {
  html body .top .navright > a { font-size: 13px; }
  html body .top .navright > a.pill { font-size: 13px; padding: 8px 14px; }
}

/* The compact return control should honor both system and saved motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .home-eye-bar { transition: none !important; }
}
body[data-motion="reduced"] .home-eye-bar { transition: none !important; }

/* A featured project should sit within the page rhythm, not dominate the viewport. */
.home-logo-eye {
  width: clamp(220px, 27vw, 300px);
  aspect-ratio: 1;
  margin-bottom: 14px;
}
.eye-rim {
  width: 100%;
  height: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.eye-rim img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: vision-mark-float 5.5s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
@keyframes vision-mark-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .eye-rim img { animation: none; }
}
body[data-motion="reduced"] .eye-rim img { animation: none; }

/* Detail page: keep the artwork in balance with useful product information. */
.item-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: clamp(24px, 4vw, 48px); }
.item-layout > :first-child { min-width: 0; }
.item-cover, .gallery-image { max-height: min(64vh, 520px); border-color: var(--line); background: var(--surface-soft); }
.item-delivery-note { margin-top: 18px; padding: 15px 17px; border: 1px solid color-mix(in srgb, var(--discipline-audio) 30%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--discipline-audio) 6%, var(--surface)); }
.item-delivery-note b { display: block; color: var(--ink); font-size: 13px; }
.item-delivery-note p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.license-card { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.license-card p { color: var(--muted); line-height: 1.7; }

/* Audio dock: named grid areas keep the close control away from the seek track. */
.audio-dock { grid-template-columns: 46px minmax(100px, 1fr) 42px auto minmax(120px, 2fr) auto 18px 76px 36px; grid-template-areas: "cover track play current seek duration volumeicon volume close"; }
.audio-dock > img { grid-area: cover; }
.audio-dock .dock-track { grid-area: track; }
.audio-dock #dock-play { grid-area: play; }
.audio-dock #dock-current { grid-area: current; }
.audio-dock #dock-seek { grid-area: seek; min-width: 0; }
.audio-dock #dock-duration { grid-area: duration; }
.audio-dock .dock-volume-icon { grid-area: volumeicon; }
.audio-dock #dock-volume { grid-area: volume; }
.audio-dock #dock-close { grid-area: close; justify-self: center; margin: 0; }
@media (max-width: 900px) {
  .audio-dock { grid-template-columns: 42px minmax(70px, 1fr) 40px auto minmax(90px, 1.5fr) auto 36px; grid-template-areas: "cover track play current seek duration close"; gap: 8px; }
  .audio-dock .dock-volume-icon, .audio-dock #dock-volume { display: none; }
}
@media (max-width: 760px) {
  .audio-dock { grid-template-columns: 40px minmax(0, 1fr) 38px 36px; grid-template-areas: "cover track play close" "seek seek seek seek"; grid-template-rows: 40px 14px; min-height: 78px; gap: 4px 8px; padding: 8px 10px 7px; }
  .audio-dock .dock-time, .audio-dock .dock-volume-icon, .audio-dock #dock-volume { display: none; }
  .audio-dock #dock-seek { width: 100%; margin: 0; }
  .audio-dock #dock-play { width: 36px; height: 36px; }
  .audio-dock #dock-close { width: 32px; min-width: 32px; height: 32px; border-radius: 10px; font-size: 17px; }
  .item-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .item-layout > :first-child, .item-copy { position: static; }
}
@media (max-width: 620px) {
  .item-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .item-cover, .gallery-image { max-height: min(62vh, 470px); }
  .item-copy .page-title { font-size: clamp(34px, 10vw, 48px); }
}

/* Restore readable ink and clear state surfaces in the light audio catalogue. */
html:not([data-theme="dark"]) .audio-table { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-soft); }
html:not([data-theme="dark"]) .audio-table-head { color: var(--muted); border-color: var(--line); background: var(--surface-soft); }
html:not([data-theme="dark"]) .audio-track-row { color: var(--muted); border-color: var(--line); }
html:not([data-theme="dark"]) .audio-track-row:hover { color: var(--ink); background: var(--surface-soft); }
html:not([data-theme="dark"]) .audio-track-copy b { color: var(--ink); }
html:not([data-theme="dark"]) .audio-track-copy small, html:not([data-theme="dark"]) .audio-track-duration { color: var(--muted); }
html:not([data-theme="dark"]) .audio-track-action a { color: var(--violet-ink); border-color: var(--line-strong); }
html:not([data-theme="dark"]) .audio-empty { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
html:not([data-theme="dark"]) .audio-empty p { color: var(--muted); }
html:not([data-theme="dark"]) .audio-dock { color: var(--ink); border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-raised); backdrop-filter: blur(18px); }
html:not([data-theme="dark"]) .audio-dock .dock-track strong { color: var(--ink); }
html:not([data-theme="dark"]) .audio-dock .dock-track span, html:not([data-theme="dark"]) .audio-dock .dock-time, html:not([data-theme="dark"]) .audio-dock .dock-volume-icon { color: var(--muted); }
html:not([data-theme="dark"]) .audio-dock .dock-close { color: var(--ink); border-color: var(--line-strong); }
html:not([data-theme="dark"]) .audio-dock .dock-close:hover { background: var(--surface-soft); }

/* Admin orders should remain legible in the light palette, including controls. */
html:not([data-theme="dark"]) body:has(.admin-shell) .admin-order-card { color: var(--ink); border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-soft); }
html:not([data-theme="dark"]) .admin-order-head h2 { color: var(--ink); }
html:not([data-theme="dark"]) .admin-order-head p, html:not([data-theme="dark"]) .admin-order-head small { color: var(--muted); }
html:not([data-theme="dark"]) .admin-details summary { color: var(--teal-ink); }
html:not([data-theme="dark"]) .admin-request-details, html:not([data-theme="dark"]) .admin-request-files, html:not([data-theme="dark"]) .admin-studio-previews { color: var(--ink); border-color: var(--line); background: var(--surface-raised); }
html:not([data-theme="dark"]) .admin-request-details h3, html:not([data-theme="dark"]) .admin-file-section-head h3, html:not([data-theme="dark"]) .admin-file-section-head p { color: var(--ink); }
html:not([data-theme="dark"]) .admin-request-details pre { color: var(--ink); }
html:not([data-theme="dark"]) .admin-attachment-card { color: var(--ink); border-color: var(--line); background: var(--surface); }
html:not([data-theme="dark"]) .admin-attachment-card small, html:not([data-theme="dark"]) .admin-attachment-card span { color: var(--muted); }
html:not([data-theme="dark"]) .admin-review-form label, html:not([data-theme="dark"]) .admin-payment-form label, html:not([data-theme="dark"]) .admin-stage-form label, html:not([data-theme="dark"]) .admin-private-note { color: var(--ink); }
html:not([data-theme="dark"]) .admin-payment-form select, html:not([data-theme="dark"]) .admin-payment-form input[type="file"], html:not([data-theme="dark"]) .admin-stage-form select { color: var(--ink); border-color: var(--line-strong); background: var(--surface-raised); }

/* Request form feedback and account next-step guidance. */
.request-form-panel form[data-request-form] { gap: 18px; }
.request-field { display: grid; min-width: 0; gap: 7px; }
.request-field>label { color: var(--ink); font-size: 12px; font-weight: 600; }
.request-planning-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.request-error-summary { padding: 12px 14px; border: 1px solid color-mix(in srgb,var(--danger) 45%,var(--line)); border-radius: 12px; background: color-mix(in srgb,var(--danger) 8%,var(--surface)); color: var(--ink); }
.request-error-summary p { margin: 5px 0 0; color: var(--danger); font-size: 12px; line-height: 1.6; }
.field.is-invalid { border-color: var(--danger)!important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--danger) 15%,transparent); }
.field-error { display: block; color: var(--danger); font-size: 11px; line-height: 1.5; }
.account-next-step { display: grid; gap: 4px; margin: 13px 0 8px; padding: 11px 13px; border-inline-start: 3px solid var(--teal); border-radius: 9px; background: color-mix(in srgb,var(--teal) 7%,var(--surface)); }
.account-next-step b { color: var(--teal-ink); font-size: 11px; }
.account-next-step p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.account-step-link { justify-self: start; margin-top: 2px; color: var(--teal-ink); font-size: 11px; font-weight: 700; text-underline-offset: 3px; }
.admin-order-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-filter { flex-wrap: wrap; }
.admin-filter select[name="sort"] { min-width: 150px; }
@media(max-width:760px) {
  .request-planning-grid { grid-template-columns: minmax(0,1fr); }
  .admin-filter { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-filter .admin-search { grid-column: 1/-1; min-width: 0; }
  .admin-filter select,.admin-filter .button { width: 100%; max-width: none; min-width: 0; }
  .admin-filter .admin-result-count { grid-column: 1/-1; }
  .admin-order-head { align-items: flex-start; }
  .admin-order-statuses { max-width: 44%; }
  .admin-order-statuses .status-chip { white-space: normal; text-align: center; }
}
@media(prefers-reduced-motion:reduce) {
  .audio-dock,.audio-dock *,.admin-filter select,.account-next-step { scroll-behavior: auto; transition-duration: .01ms!important; }
}
::selection { background: #216b69; color: #fff; }
html[data-theme="dark"] ::selection { background: #74c6c1; color: #102024; }
select option { color: var(--ink); background: var(--surface); }
input:focus-visible, textarea:focus-visible, select:focus-visible { scroll-margin-block: 110px; }
html:not([data-theme="dark"]) .admin-order-statuses .status-chip { color: var(--ink); border-color: var(--line-strong); background: var(--surface-soft); }
html:not([data-theme="dark"]) .admin-order-statuses .status-chip.status-published { color: #185a3b; border-color: #7ab993; background: #e2f3e8; }
html:not([data-theme="dark"]) .admin-order-statuses .status-chip.status-draft { color: #704414; border-color: #d8b579; background: #f8eedb; }
.featured-stage-wrap {
  width: min(1140px, calc(100% - 40px));
  padding-bottom: clamp(42px, 6vw, 72px);
}
.featured-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  height: clamp(300px, 34vw, 430px);
  min-height: 0;
  background: var(--surface);
}
.featured-stage-image {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.featured-stage-shade {
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 65%, color-mix(in srgb, var(--surface) 94%, transparent));
}
.featured-stage-copy {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  inset: auto;
  max-width: none;
  padding: clamp(22px, 3.4vw, 48px);
  color: var(--ink);
}
.featured-stage-copy .eyebrow { color: var(--coral-ink); }
.featured-stage-copy h2 { font-size: clamp(32px, 4vw, 56px); letter-spacing: -.045em; }
.featured-stage-copy h2 a { color: var(--ink); }
.featured-stage-copy p { color: var(--muted); }
.featured-stage-link { color: var(--teal-ink); }
.featured-stage-play { inset-block-start: 16px; inset-inline-start: 16px; min-height: 40px; }
.featured-stage-index { color: var(--muted); }

/* Keep contact cards legible even when the pointer is over one. */
.contact-cards { align-items: stretch; }
.contact-card {
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
}
.contact-card:is(:hover, :focus-visible) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.contact-card :is(small, b, strong, span) { position: relative; z-index: 1; }
.contact-card b { color: var(--ink); }
.contact-card .contact-detail { color: var(--teal-ink); overflow-wrap: anywhere; }
.contact-card .contact-hint { color: var(--muted); }
.contact-card:is(:hover, :focus-visible) .contact-hint { color: var(--ink); }
html:not([data-theme="dark"]) .contact-card::after {
  background: radial-gradient(circle at 100% 0, #e86f5110, transparent 42%);
}
html[data-theme="dark"] .contact-card:is(:hover, :focus-visible) {
  background: var(--surface-raised);
}

/* Make the service links present immediately; these are primary navigation, not decoration. */
.disciplines-section { padding-block: clamp(58px, 7vw, 92px); }
.disciplines-section .section-head { margin-bottom: clamp(22px, 3vw, 36px); }
.disciplines-section .grid.three { align-items: stretch; gap: clamp(12px, 2vw, 20px); }
.disciplines-section .service.reveal,
.disciplines-section .service.reveal:not(.is-visible) {
  opacity: 1;
  transform: none;
}
.disciplines-section .service {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.disciplines-section .service h3 { margin-top: 12px; }
.disciplines-section .service p { max-width: 38ch; color: var(--muted); }
.disciplines-section .service .service-link { margin-top: auto; padding-top: 10px; }
.contact-wrap { padding-block: clamp(58px, 7vw, 92px); }

/* Search and category controls must use the active theme, not legacy charcoal. */
.discipline-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(180px, .8fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(24px, 4vw, 42px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.discipline-filters input,
.discipline-filters select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--ink);
}
.discipline-filters input::placeholder { color: var(--subtle); opacity: 1; }
.discipline-filters select option { background: var(--surface); color: var(--ink); }
.discipline-heading { padding-block: clamp(28px, 4vw, 52px) 12px; margin-bottom: 22px; }
.discipline-heading .page-title { font-size: clamp(42px, 5.6vw, 70px); }
.discipline-page { padding-top: 0; }

@media (max-width: 760px) {
  .discipline-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .discipline-filters input { grid-column: 1 / -1; }
  .discipline-filters .button { min-height: 46px; }
  .disciplines-section .grid.three { grid-template-columns: 1fr; }
  .disciplines-section .service { min-height: 0; }
}

/* VISION motion system: editorial page rhythm with lightweight scroll reveals. */
:root {
  --motion-reveal: cubic-bezier(.18,.72,.24,1);
  --motion-duration: 620ms;
}
.scroll-progress {
  position: fixed;
  z-index: 100;
  inset: 0 auto auto 0;
  width: var(--scroll-progress, 0%);
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--coral), var(--violet));
  box-shadow: 0 0 16px color-mix(in srgb, var(--coral) 40%, transparent);
  transform-origin: left center;
  pointer-events: none;
  transition: width 90ms linear;
}
html[dir="rtl"] .scroll-progress { inset-inline: auto 0; transform-origin: right center; }
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--motion-duration) var(--motion-reveal) var(--reveal-delay, 0ms),
    transform var(--motion-duration) var(--motion-reveal) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
.disciplines-section .service.scroll-reveal,
.disciplines-section .service.scroll-reveal:not(.is-visible) {
  opacity: 1;
  transform: none;
}
.card, .service, .contact-card, .audio-playlist-row {
  transition:
    transform 260ms var(--motion-reveal),
    border-color 220ms ease,
    box-shadow 260ms ease,
    background-color 220ms ease;
}
.card:hover, .service:hover, .contact-card:hover {
  transform: translateY(-5px);
}
.featured-stage-image img, .cover, .item-cover, .gallery-image {
  transition: transform 700ms var(--motion-reveal), filter 500ms ease;
}
.featured-stage:hover .featured-stage-image img,
.card:hover .cover { transform: scale(1.035); }
.button, .pill, .smallbtn, .audio-playlist-play, .featured-stage-play {
  transition: transform 180ms var(--motion-reveal), box-shadow 220ms ease, background-color 200ms ease;
}
.button:not(:disabled):active, .pill:active, .audio-playlist-play:active { transform: scale(.97); }
.audio-playlist-row.is-playing { box-shadow: inset 3px 0 var(--discipline-audio); }
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
  .scroll-reveal, .scroll-reveal.is-visible,
  .featured-stage-image img, .cover, .item-cover, .gallery-image,
  .card, .service, .contact-card, .audio-playlist-row, .button, .pill {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }
}
body[data-motion="reduced"] .scroll-reveal,
body[data-motion="reduced"] .scroll-reveal.is-visible { opacity:1; transform:none; transition:none; }

/* Keep the audio page focused on its searchable, compact track list. */
.audio-player-page { gap: 0; }
.audio-playlist { box-shadow: var(--shadow-soft); }

@media (max-width: 760px) {
  .home-logo-eye { width: 220px; }
  .featured-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
  }
  .featured-stage-image {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 1.65 / 1;
  }
  .featured-stage-shade {
    inset-block-start: 0;
    inset-inline: 0;
    inset-block-end: auto;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, #101411 72%, transparent));
  }
  .featured-stage-copy {
    grid-column: 1;
    grid-row: 2;
    padding: 20px 22px 24px;
  }
  .featured-stage-copy h2 { margin-block: 7px; font-size: clamp(30px, 9vw, 46px); }
  .featured-stage-copy p { font-size: 13px; }
  .featured-stage-index { display: none; }
}

/* Light theme: contact cards stay readable on hover and keyboard focus. */
html:not([data-theme="dark"]) .contact-card {
  color: var(--ink);
  border-color: var(--line);
  background: linear-gradient(145deg, #fffdfa, #fbf8f2);
}
html:not([data-theme="dark"]) .contact-card:is(:hover, :focus-visible) {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--coral) 45%, var(--line));
  background: linear-gradient(145deg, #fffdfa, #f1ece3);
  box-shadow: 0 16px 36px #392b1b15;
}
html:not([data-theme="dark"]) .contact-card :is(b, .contact-detail) { color: var(--ink); }
html:not([data-theme="dark"]) .contact-card :is(small, .contact-hint) { color: var(--muted); }
html:not([data-theme="dark"]) .contact-card::after { background: #d78b5b0b; }
.contact-card .contact-detail { font-size: 12px; line-height: 1.5; }
.contact-card .contact-hint { font-size: 11px; }

/* Clear service selection and calm first-visit account state */
.service-choice-hint{display:block;margin-top:7px;color:var(--muted,#8993a3);font-size:11px;line-height:1.55}.account-empty{max-width:680px;min-height:180px;margin:12px auto;padding:28px;border:1px solid var(--line,#ffffff18);border-radius:18px;background:linear-gradient(145deg,#ffffff05,#ffffff01);text-align:center}.account-empty p{max-width:56ch;margin:0;color:var(--muted,#9ca6b5);line-height:1.7}.account-empty-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid #80cfff35;border-radius:13px;color:#9bdcff;background:#80cfff0b}


/* Final visual pass: tighten the home rhythm and strengthen light-theme controls. */
html:not([data-theme="dark"]) .top .bar nav a,
html:not([data-theme="dark"]) .top .navright > a:not(.pill),
html:not([data-theme="dark"]) .top .language,
html:not([data-theme="dark"]) .top .notification-trigger,
html:not([data-theme="dark"]) .top .account-avatar { color: #354047; }
html:not([data-theme="dark"]) .top .bar nav a:hover,
html:not([data-theme="dark"]) .top .bar nav a:focus-visible,
html:not([data-theme="dark"]) .top .navright > a:not(.pill):hover { color: #111a20; }
html:not([data-theme="dark"]) .top .theme-toggle,
html:not([data-theme="dark"]) .top .language,
html:not([data-theme="dark"]) .top .notification-trigger,
html:not([data-theme="dark"]) .top .account-avatar { border-color: #b8b0a4; background: #fffdf9; }
html:not([data-theme="dark"]) .top :is(button, a, summary):focus-visible { outline: 3px solid #176c68; outline-offset: 3px; }
html:not([data-theme="dark"]) .admin-order-views a { color: #45535a; border-color: #c8c1b7; background: #fffdf9; }
html:not([data-theme="dark"]) .admin-order-views a.active { color: #124f4c; border-color: #5c9c96; background: #e4f2ee; box-shadow: inset 0 -2px #23736d; }
html:not([data-theme="dark"]) .admin-order-views a:focus-visible { outline: 3px solid #176c68; outline-offset: 2px; }

.featured-stage-wrap { padding-block-end: clamp(24px, 3.2vw, 42px); }
.disciplines-section { padding-block-start: clamp(30px, 3.8vw, 48px); }
.featured-stage-image img { object-position: 50% 60%; }
.contact-card small { font-size: 12px; }
.contact-card .contact-detail { font-size: 13px; }
.contact-card .contact-hint { font-size: 12px; }

/* Let the floating controls get out of the way of the footer links. */
body.footer-is-visible .home-eye-bar,
body.footer-is-visible .support-float { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); }
body:has(.audio-dock:not([hidden])) { padding-block-end: 56px; }
body:has(.audio-dock:not([hidden])) .footer { padding-block-end: clamp(160px, 20vh, 210px); }
.audio-dock { z-index: 40; }

/* Search should fill its column; keep filters visually balanced at low result counts. */
.discipline-filters { grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto; }
.discipline-filters input#work-search { width: 100%; max-width: none; min-width: 0; }

.license-card { display: grid; gap: 14px; }
.license-terms { border-top: 1px solid var(--line); padding-top: 12px; }
.license-terms summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--teal-ink); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.license-terms summary::-webkit-details-marker { display: none; }
.license-terms summary::after { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); font-size: 16px; }
.license-terms[open] summary::after { content: "−"; }
.license-terms p { max-width: 66ch; margin: 12px 0 0; padding-inline-start: 12px; border-inline-start: 2px solid color-mix(in srgb, var(--discipline-audio) 45%, var(--line)); line-height: 1.75; }
.item-delivery-note p { max-width: 68ch; line-height: 1.75; }
.audio-purchase-license { max-width: 68ch; line-height: 1.75; }

.admin-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); align-items: start; }
.admin-content-thumb { aspect-ratio: 2.15; max-height: 205px; }
.admin-content-thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
  .featured-stage-wrap { width: calc(100% - 28px); padding-block-end: 24px; }
  .disciplines-section { padding-block-start: 28px; }
  .audio-dock { inset-block-end: max(10px, env(safe-area-inset-bottom)); }
  body:has(.audio-dock:not([hidden])) { padding-block-end: 88px; }
  body:has(.audio-dock:not([hidden])) .footer { padding-block-end: 175px; }
  .discipline-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .discipline-filters input#work-search { grid-column: 1 / -1; }
  .admin-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
}
@media (max-width: 460px) {
  .admin-card-grid { grid-template-columns: 1fr; }
  .license-card { padding: 16px; }
}

/* Fit small work libraries to their contents and keep admin thumbnails compact. */
.discipline-work-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.discipline-work-grid .card-media,
.discipline-work-grid .cover { aspect-ratio: 1.5; }
.discipline-work-grid > .card:only-child { width: min(100%, 760px); }
body:has(.admin-shell) .admin-category-items.admin-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
}
body:has(.admin-shell) .admin-content .admin-content-thumb {
  aspect-ratio: 2.2;
  max-height: 190px;
}
.new-chat-compose.chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; }
.new-chat-compose.chat-compose textarea { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 76px; }
@media (max-width: 760px) {
  .discipline-work-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  body:has(.admin-shell) .admin-category-items.admin-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; }
}
@media (max-width: 460px) {
  .discipline-work-grid { grid-template-columns: 1fr; }
  body:has(.admin-shell) .admin-category-items.admin-card-grid { grid-template-columns: 1fr !important; }
}

/* Home featured works: keep the carousel controlled by side arrows, without scrollbars. */
.selected-works { position: relative; }
.selected-works > .section-head { position: static; }
.selected-works .work-slider {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: default;
}
.selected-works .work-slider::-webkit-scrollbar { display: none; width: 0; height: 0; }
.selected-works .slider-controls {
  position: absolute;
  z-index: 5;
  inset-inline: -92px;
  top: calc(50% + 70px);
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.selected-works .slider-controls[hidden] { display: none !important; }
.selected-works .slider-arrow {
  flex: 0 0 auto;
  pointer-events: auto;
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 1250px) {
  .selected-works .slider-controls { inset-inline: 8px; }
}
@media (max-width: 680px) {
  .selected-works .slider-controls { inset-inline: 8px; }
  .selected-works .slider-arrow { width: 38px; height: 38px; }
}



/* Ensure the white palette wins over legacy high-specificity header rules. */
html:not([data-theme="dark"]) body .top .bar nav a { color: #354047 !important; opacity: 1 !important; }
html:not([data-theme="dark"]) body .top .bar nav a:hover,
html:not([data-theme="dark"]) body .top .bar nav a:focus-visible { color: #0d171c !important; }
html:not([data-theme="dark"]) body .top .brand img { opacity: 1 !important; filter: none !important; }
html:not([data-theme="dark"]) body .top .brand span { color: #4b585d !important; opacity: 1 !important; }
html:not([data-theme="dark"]) body .top .language,
html:not([data-theme="dark"]) body .top .theme-toggle,
html:not([data-theme="dark"]) body .top .notification-trigger,
html:not([data-theme="dark"]) body .top .account-avatar { color: #26343a !important; border-color: #aaa397 !important; background: #fffdf9 !important; }
html:not([data-theme="dark"]) body .top .navright > a:not(.pill) { color: #354047 !important; }
html:not([data-theme="dark"]) body:has(.admin-shell) .admin-category {
  border-color: #d8d1c5;
  background: linear-gradient(145deg, #fffdf9, #f4efe6);
}
html:not([data-theme="dark"]) body:has(.admin-shell) .admin-category-head h2 { color: #202a2e; }
html:not([data-theme="dark"]) body:has(.admin-shell) .admin-category-head small { color: #657176; }
html:not([data-theme="dark"]) body:has(.admin-shell) .admin-category-toggle {
  border-color: #c9c1b5;
  background: #fffdf9;
  color: #273237;
}
html:not([data-theme="dark"]) body .top :is(button, a, summary):focus-visible { outline: 3px solid #176c68 !important; outline-offset: 3px; }
html:not([data-theme="dark"]) body .admin-order-views a { color: #45535a !important; border-color: #c8c1b7 !important; background: #fffdf9 !important; }
html:not([data-theme="dark"]) body .admin-order-views a.active { color: #124f4c !important; border-color: #5c9c96 !important; background: #e4f2ee !important; box-shadow: inset 0 -2px #23736d; }



/* Make the monochrome brand mark and floating utility control read cleanly in light mode. */
html:not([data-theme="dark"]) body .top .brand img { filter: brightness(.16) contrast(1.25) !important; opacity: 1 !important; }
.home-eye-bar { width: 46px; height: 46px; min-height: 46px; justify-content: center; gap: 0; padding: 5px; border-radius: 50%; }
.home-eye-bar .home-eye-mark { width: 34px; height: 34px; flex: none; }
.home-eye-bar > span:not(.home-eye-mark) { display: none; }
@media (max-width: 760px) {
  .home-eye-bar { width: 42px; height: 42px; min-height: 42px; }
  .home-eye-bar .home-eye-mark { width: 31px; height: 31px; }
}


@media (min-width: 761px) and (max-width: 1120px) {
  body:has(.admin-shell) .admin-shell.wrap { grid-template-columns: 205px minmax(0, 1fr); }
  body:has(.admin-shell) .admin-filter .admin-search { flex: 1 1 100%; min-width: 0; }
  body:has(.admin-shell) .admin-filter select { flex: 1 1 0; max-width: none; min-width: 0; }
  body:has(.admin-shell) .admin-filter .button { min-width: 78px; }
  body:has(.admin-shell) .admin-result-count { margin-inline-start: 0; }
}