:root {
  --corp020-nav-ink: #bdbdbd;
  --corp020-nav-bg: #000;
  --corp020-text-scale: 1;
  --corp020-background-edge-blur: 9px;
  --corp020-background-centre-blur: 12px;
}

html[data-theme="light"] {
  --corp020-nav-ink: #222;
  --corp020-nav-bg: #ffffff;
}

.corp020-menu {
  position: fixed;
  right: clamp(12px, 3vw, 42px);
  top: clamp(10px, 2.2vh, 24px);
  z-index: 2147482000;
  width: 28px;
  height: 76px;
  color: var(--corp020-nav-ink);
  font: 300 calc(10px * var(--corp020-text-scale))/1.1 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: lowercase;
}

.corp020-menu-toggle {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 25px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.corp020-menu-toggle::before {
  content: "≡";
  display: block;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .48s cubic-bezier(.16,1,.3,1), filter .25s ease;
}

.corp020-menu.is-open .corp020-menu-toggle::before { transform: translateY(-1px) rotate(90deg); }
@media (hover: hover) {
  .corp020-menu:hover .corp020-menu-toggle::before,
  .corp020-menu:focus-within .corp020-menu-toggle::before { transform: translateY(-1px) rotate(90deg); }
}
.corp020-menu-toggle:hover::before,
.corp020-menu-toggle:focus-visible::before { filter: blur(.35px); }

.corp020-menu-links {
  position: absolute;
  right: 36px;
  top: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  min-height: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  white-space: nowrap;
}

.corp020-menu-links li {
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transform: translateX(15px);
  transition:
    opacity .26s ease,
    clip-path .52s cubic-bezier(.16,1,.3,1),
    transform .56s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--nav-i) * 38ms);
}

.corp020-menu.is-open .corp020-menu-links { pointer-events: auto; }
.corp020-menu.is-open .corp020-menu-links li {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateX(0);
}
@media (hover: hover) {
  .corp020-menu:hover .corp020-menu-links,
  .corp020-menu:focus-within .corp020-menu-links { pointer-events: auto; }
  .corp020-menu:hover .corp020-menu-links li,
  .corp020-menu:focus-within .corp020-menu-links li {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

.corp020-menu a,
.corp020-menu-sfx,
.corp020-menu-theme,
.corp020-menu-background {
  display: block;
  padding: 4px 0;
  color: inherit !important;
  background: transparent !important;
  font: inherit !important;
  letter-spacing: .06em !important;
  text-decoration: none;
  white-space: nowrap;
  opacity: .7;
  transition: opacity .2s ease, filter .2s ease;
}

.corp020-menu a:hover,
.corp020-menu a:focus-visible,
.corp020-menu a[aria-current="page"],
.corp020-menu-sfx:hover,
.corp020-menu-sfx:focus-visible,
.corp020-menu-theme:hover,
.corp020-menu-theme:focus-visible,
.corp020-menu-background:hover,
.corp020-menu-background:focus-visible { opacity: 1; filter: blur(.15px); text-decoration: underline; }

.corp020-menu-sfx,
.corp020-menu-theme,
.corp020-menu-background {
  border: 0;
  cursor: pointer;
}

.corp020-menu-theme {
  position: absolute;
  right: 0;
  top: 27px;
  width: max-content;
  min-width: 28px;
  padding: 2px 0;
  text-align: right;
}

.corp020-menu-background {
  position: absolute;
  right: 0;
  top: 50px;
  width: 28px;
  min-width: 28px;
  padding: 0;
  text-align: center;
  font-size: 13px !important;
  line-height: 18px;
}

.corp020-has-menu [data-theme-toggle] { display: none !important; }

.corp020-background-layer {
  position: fixed;
  inset: -14px;
  z-index: -1;
  background-position: center;
  background-size: cover;
  opacity: 0;
  filter: blur(var(--corp020-background-edge-blur)) saturate(.72) brightness(.48);
  transform: scale(1.025);
  pointer-events: none;
  transition: opacity .72s ease, filter .72s ease;
}

.corp020-background-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-position: inherit;
  background-size: inherit;
  filter: blur(var(--corp020-background-centre-blur));
  opacity: .72;
  -webkit-mask-image: radial-gradient(ellipse 47% 63% at 50% 48%, #000 0 38%, rgba(0,0,0,.82) 53%, transparent 84%);
  mask-image: radial-gradient(ellipse 47% 63% at 50% 48%, #000 0 38%, rgba(0,0,0,.82) 53%, transparent 84%);
  pointer-events: none;
}

html[data-theme="light"] .corp020-background-layer {
  filter: blur(var(--corp020-background-edge-blur)) saturate(.64) brightness(.94);
}

html.corp020-background-on .corp020-background-layer { opacity: .46; }
html.corp020-background-on[data-theme="light"] .corp020-background-layer { opacity: .35; }
html.corp020-background-on body { position: relative; isolation: isolate; }
html.corp020-background-dual .corp020-background-layer { opacity: .46; }
html.corp020-background-dual[data-theme="light"] .corp020-background-layer { opacity: .35; }

.corp020-guide-lines {
  position: fixed;
  inset: 0;
  z-index: 2147480000;
  background:
    linear-gradient(90deg, transparent calc(25% - .5px), currentColor 25%, transparent calc(25% + .5px)),
    linear-gradient(90deg, transparent calc(75% - .5px), currentColor 75%, transparent calc(75% + .5px)),
    linear-gradient(0deg, transparent calc(33.333% - .5px), currentColor 33.333%, transparent calc(33.333% + .5px)),
    linear-gradient(0deg, transparent calc(66.666% - .5px), currentColor 66.666%, transparent calc(66.666% + .5px));
  color: var(--corp020-nav-ink);
  opacity: 0;              /* hidden from users (was .026 — showed over backgrounds when zoomed) */
  pointer-events: none;
}

html.corp020-route-dark::after,
html.corp020-route-light::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0;
  animation: corp020-route-cover .65s ease forwards;
}
html.corp020-route-dark::after { background: #000; }
html.corp020-route-light::after { background: #ffffff; }
@keyframes corp020-route-cover { to { opacity: 1; } }

.corp020-user-drop {
  position: absolute;
  z-index: 2147481000;
  width: min(280px, 34vw);
  min-width: 54px;
  margin: 0;
  cursor: move;
  outline: 0;
  touch-action: none;
  user-select: none;
}

.corp020-user-drop.is-fresh { transform: translate(-50%, -50%); }
.corp020-user-drop:focus-visible { outline: 1px dotted currentColor; outline-offset: 4px; }
.corp020-user-drop img { display: block; width: 100%; max-height: 70vh; object-fit: contain; pointer-events: none; }

body.corp020-drop-active::after {
  content: "drop image anywhere";
  position: fixed;
  inset: 12px;
  z-index: 2147483640;
  display: grid;
  place-items: center;
  color: var(--corp020-nav-ink);
  background: color-mix(in srgb, var(--corp020-nav-bg) 76%, transparent);
  border: 1px dashed currentColor;
  font: 300 11px 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .06em;
  pointer-events: none;
}

@media (max-width: 720px) {
  .corp020-menu { right: 8px; top: 8px; }
  .corp020-user-drop { width: min(220px, 52vw); }
}
@media (max-width: 720px) and (hover: hover) {
  /* Narrow desktop window: pop out horizontally (leftward from the toggle), same
     as desktop. Must stay nowrap: the menu box is only 28px wide, so any
     flex-wrap here collapses the row into a vertical stack. */
  .corp020-menu-links { right: 34px; top: 0; flex-wrap: nowrap; gap: 9px; }
  .corp020-menu.is-open .corp020-menu-links,
  .corp020-menu:focus-within .corp020-menu-links { padding: 5px 7px; background: var(--corp020-nav-bg); }
}

/* --- Native-to-site dropdowns: kill the OS chrome on every select and draw a
   currentColor caret so all menus match the site UI. --- */
.gallery-sort select,
.mini-radio-selects select,
.player-selects select,
select.corp020-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color: inherit;
  background-color: color-mix(in srgb, currentColor 7%, transparent) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position: calc(100% - 9px) center, calc(100% - 5px) center !important;
  background-size: 4px 4px, 4px 4px !important;
  background-repeat: no-repeat !important;
  padding-right: 16px !important;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 0;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.gallery-sort select:focus,
.mini-radio-selects select:focus,
.player-selects select:focus,
select.corp020-select:focus { outline: 1px solid currentColor; outline-offset: 1px; }
/* The popped-open option list: follow the page theme rather than OS default. */
html[data-theme="dark"] .gallery-sort select,
html[data-theme="dark"] .mini-radio-selects select,
html[data-theme="dark"] .player-selects select,
html[data-theme="dark"] select.corp020-select { color-scheme: dark; }
html[data-theme="light"] .gallery-sort select,
html[data-theme="light"] .mini-radio-selects select,
html[data-theme="light"] .player-selects select,
html[data-theme="light"] select.corp020-select { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  .corp020-menu-links li { transition-duration: .01ms; }
}

/* --- Cursor trail + click ripple (all pages): tiny crosses that just fade,
   no blur. Colour follows the theme ink. --- */
.corp020-cursor-mark {
  position: fixed;
  z-index: 2147481000;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  color: var(--corp020-nav-ink, #9a9a9a);
  pointer-events: none;
}
.corp020-cursor-mark::before,
.corp020-cursor-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.corp020-cursor-mark::before { width: 1px; height: 100%; }
.corp020-cursor-mark::after { width: 100%; height: 1px; }
.corp020-cursor-mark.is-trail { animation: corp020-cursor-fade .34s linear forwards; }
.corp020-cursor-mark.is-ripple { animation: corp020-cursor-ripple .42s ease-out forwards; }
@keyframes corp020-cursor-fade { from { opacity: .7; } to { opacity: 0; } }
@keyframes corp020-cursor-ripple { from { opacity: .9; } to { opacity: 0; transform: scale(2.4); } }
@media (prefers-reduced-motion: reduce) { .corp020-cursor-mark { display: none; } }

/* --- Mobile declutter: the draggable desktop toys (notepad, kettenkrad helper,
   dropped-image layers) and the idle ascii/tweet decoration are pointer-driven
   and just crowd a phone screen. Content + nav only. --- */
@media (max-width: 700px) {
  .floating-note,
  .kettenkrad-helper,
  .corp020-guide-lines { display: none !important; }
  .gutter-tools { pointer-events: none; }
  .ascii-idle,
  .tweet-ghost { display: none !important; }
  .corp020-cursor-mark { display: none; }
}

/* --- Typography: Cute Font for titles/headings, Doto for everything else.
   Both are size-adjusted in fonts/fonts.css to match the old Helvetica optical
   size, so existing font-size values still hold. --- */
h1, h2, h3, h4,
.wordmark,
.archive-heading,
.gallery-head > span,
.about-head > span,
.portfolio-head > span,
.nodal-title,
.orb-head > span,
.site-title {
  font-family: 'Cute Font', 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: .04em;
}

/* --- Light mode legibility: body copy was too faint, header ink too heavy. --- */
html[data-theme="light"] { --corp020-nav-ink: #4a4a4a; }
html[data-theme="light"] body { color: #1a1a1a; }
html[data-theme="light"] .gallery-note,
html[data-theme="light"] .portfolio-note,
html[data-theme="light"] .nodal-hint,
html[data-theme="light"] .microcopy { opacity: .78; }
html[data-theme="light"] .gallery-tags button,
html[data-theme="light"] .nodal-tags button,
html[data-theme="light"] .portfolio-tags button { opacity: .72; }
html[data-theme="light"] .gallery-tags button:hover,
html[data-theme="light"] .gallery-tags button.is-active,
html[data-theme="light"] .nodal-tags button:hover,
html[data-theme="light"] .nodal-tags button.is-active,
html[data-theme="light"] .portfolio-tags button:hover,
html[data-theme="light"] .portfolio-tags button.is-active { opacity: 1; }
html[data-theme="light"] .socials,
html[data-theme="light"] .about-bio { opacity: .92; }
html[data-theme="light"] .gallery-head,
html[data-theme="light"] .about-head,
html[data-theme="light"] .portfolio-head,
html[data-theme="light"] .nodal-head,
html[data-theme="light"] .orb-head { color: #4a4a4a; }

@media (hover: none) {
  /* Touch: the hamburger opens a centred popup — same shell as the gallery
     password gate — instead of flying the links out sideways. The colour-mode
     and background buttons are moved inside it by 020corp-shared.js, so the
     corner holds nothing but the ≡ and page headers have room to breathe. */
  .corp020-menu { right: 8px; top: 8px; width: 28px; height: 28px; }
  .corp020-menu.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(13px);
  }
  .corp020-menu.is-open .corp020-menu-links {
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(280px, calc(100vw - 36px));
    padding: 18px;
    color: #bdbdbd;
    background: rgba(0,0,0,.88);
    border: 1px dotted currentColor;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .corp020-menu.is-open .corp020-menu-links::before {
    content: "menu";
    order: -1;
    margin-bottom: 13px;
    font-size: 12px;
    opacity: .55;
  }
  .corp020-menu.is-open .corp020-menu-links li {
    clip-path: none;
    transform: none;
    transition: opacity .2s ease;
  }
  .corp020-menu-links a,
  .corp020-menu-links .corp020-menu-theme,
  .corp020-menu-links .corp020-menu-background {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 9px 0;
    font-size: calc(13px * var(--corp020-text-scale)) !important;
    line-height: 1.2;
    text-align: center;
    opacity: .82;
  }
  .corp020-menu-tool { margin-top: 6px; padding-top: 6px; border-top: 1px dotted currentColor; }
  .corp020-menu-tool + .corp020-menu-tool { margin-top: 0; padding-top: 0; border-top: 0; }
  /* Page headers keep clear of the ≡ in the corner. */
  .gallery-head, .nodal-head, .about-head, .portfolio-head, .orb-head, .player-head { padding-right: 34px; }
}