/* ONLYDROP v172 — balanced chromatic identity.
   The five-color reference is a palette of ACCENTS, not a command to dye every
   surface. White and near-black are the primary resting materials.
   IMPORTANT: Do not override category display lettering (including bespoke
   3D SVGs), artwork, original photos, videos, font identities or camera FX.
   Exception: the PROJECTS cutout lettering is intentionally recolored. */

:root {
  /* New reference palette */
  --od-electric:#1600FF;
  --od-ice:#DFEDFF;
  --od-signal:#D1FF00;
  --od-solar:#FFDF2C;
  --od-lavender:#6B65AB;
  /* Neutrals, essential breathing room */
  --od-black:#09090C;
  --od-near-black:#111116;
  --od-white:#FFFFFF;
  --od-gray:#BFC0CA;
  --od-rule:rgba(255,255,255,.20);
  /* Existing CSS uses these aliases. */
  --od-brand:#D1FF00;
  --od-brand-ink:#09090C;
  --od-bg:#09090C;
  --od-surface:#15151B;
  --od-surface-raised:#202029;
  --od-ink:#FFFFFF;
  --od-muted:#BFC0CA;
  --od-cool:#DFEDFF;
  --od-hot:#FFDF2C;
  --od-acid:#D1FF00;
  --od-violet:#6B65AB;
  --od-line:rgba(255,255,255,.21);
  --od-editorial-ink:#FFFFFF;
  --od-editorial-muted:#BFC0CA;
  --od-editorial-signal:#D1FF00;
  --od-editorial-line:rgba(255,255,255,.20);
  --night:#09090C; --deep:#111116; --panel:#15151B;
  --ink:#09090C; --ink2:#15151B; --txt:#FFFFFF; --ice:#FFFFFF;
  --muted:#BFC0CA; --sky:#DFEDFF; --cyan:#DFEDFF;
  --cobalt:#1600FF; --amber:#FFDF2C; --acid:#D1FF00;
  --yellow:#FFDF2C; --coral:#6B65AB; --pink:#6B65AB;
  --violet:#6B65AB; --peach:#FFFFFF; --maroon:#6B65AB;
}
html { background:#09090C !important; color-scheme:dark !important; }
html body,html body .views,html body #views,html body #views .view-panel {
  background-color:#09090C !important;
  color:#FFFFFF !important;
}
html body :focus-visible { outline-color:#D1FF00 !important; }

/* INDEX — preserve the city and its longer gentle fade; return to neutral
   black-to-white underneath the image, without the saturated blue/violet
   stripes that competed with the cards. */
html body #views #home .index-screen {
  background-color:#FFFFFF !important;
  background-image:linear-gradient(
    to bottom,
    #0B0C10 0,
    #17181D 18svh,
    #424450 40svh,
    #A5A7B2 59svh,
    #ECEEF2 74svh,
    #FFFFFF 88svh,
    #FFFFFF 100%
  ) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}
html body #home .index-intro::before {
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.43) 25%,
    rgba(9,9,12,.17) 55%,
    transparent 100%
  ) !important;
}
html body #home .index-atmosphere {
  background-color:transparent !important;
  filter:none !important;
}

/* The owner's name is white; ONLYDROP has the single concentrated lime
   highlight. This is deliberate priority, not two simultaneous neon titles. */
html body #home .index-name-block h1.index-name-lockup .name-line-primary {
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
html body #home .index-name-block h1.index-name-lockup .name-line-secondary {
  color:#D1FF00 !important;
  -webkit-text-fill-color:#D1FF00 !important;
}
html body #home .index-name-block .index-alias,
html body #home .index-topline,
html body #home .index-description > p,
html body #home .index-description .od-bio-copy {
  color:#F3F4F7 !important;
  -webkit-text-fill-color:#F3F4F7 !important;
}
html body #home .index-description .od-bio-heading,
html body #home .menu-heading {
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
html body #home .index-description > p { border-left-color:#6B65AB !important; }
html body #home .index-description::before { background:#6B65AB !important; }

/* HANDMADE CATEGORY TITLES:
   No rules for h2 .type-lettering, SVG heading images or .story-amp here.
   Their unique artwork, original shadows and original title inks survive
   from the existing typography sheets, except PROJECTS below.
   Only media framing, caption chrome and small arrows use neutral UI tones. */
html body #views #home .category-menu > a.category-card .category-visual {
  border-color:rgba(255,255,255,.22) !important;
}
html body #views #home .category-menu > a.category-card > h2.category-title > .type-lettering-readable {
  background:#09090C !important;
  background-color:#09090C !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.20) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  text-shadow:none !important;
  box-shadow:none !important;
  filter:none !important;
}
html body #views #home .category-menu > a.category-card .category-info {
  background:rgba(9,9,12,.83) !important;
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.16) !important;
  border-left-color:#6B65AB !important;
  box-shadow:none !important;
}
html body #views #home .category-menu > a.category-card .category-info p {
  color:#DFEDFF !important;
  -webkit-text-fill-color:#DFEDFF !important;
}
html body #views #home .category-menu > a.category-card .category-arrow {
  color:#DFEDFF !important;
  -webkit-text-fill-color:#DFEDFF !important;
}
/* If preview media fail to load, the frame should sit quietly. */
html body #home .category-menu > a.category-card .category-visual:not(.has-media) {
  background-color:#17171E !important;
  background-image:linear-gradient(135deg,#17171E,#24232E) !important;
}

/* Only the intentionally collaged PROJECTS headline receives the new colors.
   The other four labels remain completely untouched. */
html body #views #home .category-menu > a.cat-projects > h2.category-title .collage-piece.piece-one {
  background:#1600FF !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
html body #views #home .category-menu > a.cat-projects > h2.category-title .collage-piece.piece-two {
  background:#6B65AB !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
html body #views #home .category-menu > a.cat-projects > h2.category-title .collage-piece.piece-three {
  background:#FFDF2C !important;
  color:#09090C !important;
  -webkit-text-fill-color:#09090C !important;
}
html body #views #home .category-menu > a.cat-projects > h2.category-title .collage-piece.piece-four {
  background:#D1FF00 !important;
  color:#09090C !important;
  -webkit-text-fill-color:#09090C !important;
}

/* INDEX FOOTER — it sits on the white part of the city's fade. White space
   here must look deliberately light and remain legible. */
html body #views #home .index-footer.od-footer-v76 {
  color:#09090C !important;
  border-top-color:rgba(9,9,12,.18) !important;
}
html body #views #home .index-footer.od-footer-v76 .od-footer-contact > a,
html body #views #home .index-footer.od-footer-v76 .od-footer-contact > a *,
html body #views #home .index-footer.od-footer-v76 .od-social-links > a,
html body #views #home .index-footer.od-footer-v76 .od-social-links > a svg {
  color:#09090C !important;
  -webkit-text-fill-color:#09090C !important;
}
html body #views #home .index-footer.od-footer-v76 .od-social-links > a {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html body #views #home .index-footer.od-footer-v76 .od-social-links > a:hover,
html body #views #home .index-footer.od-footer-v76 .od-footer-contact > a:hover {
  color:#1600FF !important;
  -webkit-text-fill-color:#1600FF !important;
}

/* NAVIGATION — monochrome idle state; the current tab is unmistakable.
   The existing three-column EN/ES alignment rules are not modified. */
html body #nav.portfolio-navigation > a.view-link {
  background:#09090C !important;
  background-color:#09090C !important;
  border-color:transparent !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  box-shadow:none !important;
}
html body #nav.portfolio-navigation > a.view-link.active,
html body #nav.portfolio-navigation > a.view-link[aria-current="page"] {
  background:#D1FF00 !important;
  color:#09090C !important;
  -webkit-text-fill-color:#09090C !important;
  border-color:#D1FF00 !important;
}
html body #nav.portfolio-navigation > a.view-link:hover:not(.active):not([aria-current="page"]) {
  background:#DFEDFF !important;
  color:#09090C !important;
  -webkit-text-fill-color:#09090C !important;
}
html body .language-switch {
  background:transparent !important;
  color:#FFFFFF !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
html body .language-switch button.language-choice:not(.is-current) {
  background:transparent !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
html body .language-switch button.language-choice.is-current,
html body .language-switch button.language-choice[aria-pressed="true"],
html body .language-switch button.language-choice.is-current:hover,
html body .language-switch button.language-choice[aria-pressed="true"]:hover {
  background:#D1FF00 !important;
  color:#09090C !important;
  -webkit-text-fill-color:#09090C !important;
}
html body .language-switch .language-divider { color:#FFFFFF !important; }

/* FX stays compact and functional, without introducing another huge neon
   surface. Its OFF state uses yellow instead of the previous out-of-palette pink. */
html body #motionToggle.global-motion-toggle,
html body #motionToggle.global-motion-toggle:hover {
  background:#09090C !important;
  color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.2) !important;
  box-shadow:none !important;
}
html body #motionToggle.global-motion-toggle .motion-toggle-label {
  color:#FFFFFF !important;
}
html body #motionToggle.global-motion-toggle .motion-toggle-tag {
  background:#D1FF00 !important;
  color:#09090C !important;
}
html body #motionToggle.global-motion-toggle[aria-pressed="false"],
html body #motionToggle.global-motion-toggle[aria-pressed="false"]:hover {
  background:#16161C !important;
}
html body #motionToggle.global-motion-toggle[aria-pressed="false"] .motion-toggle-tag {
  background:#FFDF2C !important;
  color:#09090C !important;
}

/* WORK / ABOUT / CONTACT — black becomes the canvas; violet and blue are
   supporting signals, not full-screen wall-to-wall fills. */
html body #views #work .work-section,
html body #work[data-cat] .work-section {
  background:#09090C !important;
  background-image:radial-gradient(
    ellipse 44% 48% at 98% 4%,
    rgba(107,101,171,.12) 0%,
    transparent 80%
  ) !important;
  color:#FFFFFF !important;
}
html body #views #about .about-section,
html body #views #contact .contact-section {
  background:#09090C !important;
  background-image:radial-gradient(
    ellipse 45% 43% at 92% 10%,
    rgba(107,101,171,.105) 0%,
    transparent 82%
  ) !important;
  color:#FFFFFF !important;
}
html body #work .section-heading h2,
html body #work #workHeading,
html body #about .about-content h2,
html body #contact .contact-section h2 {
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
html body #about .about-content h2 em {
  color:#DFEDFF !important;
  -webkit-text-fill-color:#DFEDFF !important;
}
html body #work .section-aside,
html body #about .about-copy,
html body #about .skills span,
html body #contact .contact-bottom,
html body #work .project-meta .project-type,
html body #work .project-meta p,
html body #work .work-topline,
html body #contact .contact-stamp {
  color:#DFEDFF !important;
  -webkit-text-fill-color:#DFEDFF !important;
}
html body #work .work-topline > *,
html body #work .back-index,
html body #about .back-index,
html body #contact .back-index {
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  background:#111116 !important;
  border-color:rgba(255,255,255,.16) !important;
}
html body #work .back-index:hover,
html body #about .back-index:hover,
html body #contact .back-index:hover {
  color:#D1FF00 !important;
  -webkit-text-fill-color:#D1FF00 !important;
}
html body #work .project-grid .project-card {
  background:#101015 !important;
  border-color:rgba(255,255,255,.16) !important;
}
html body #work .project-grid .project-card .project-image:not(.has-demo-media) {
  background-color:#16161C !important;
}
html body #work .project-meta { color:#FFFFFF !important; }
html body #work .project-meta h3 {
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  text-shadow:2px 2px 0 #09090C !important;
}
html body #work .project-meta .arrow {
  border-color:#DFEDFF !important;
  color:#DFEDFF !important;
}
html body #work .project-card:hover .project-meta .arrow {
  border-color:#FFDF2C !important;
  color:#FFDF2C !important;
}

/* Discipline rail — mostly neutral until a category is actually selected. */
html body #work > .category-switcher {
  background:#09090C !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-left-color:#6B65AB !important;
  box-shadow:none !important;
}
html body #work > .category-switcher::before { color:#BFC0CA !important; }
html body #work > .category-switcher > .filter {
  background:#17171E !important;
  border-color:rgba(255,255,255,.13) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  box-shadow:none !important;
}
html body #work > .category-switcher > .filter:hover:not(.active):not([aria-pressed="true"]) {
  background:#DFEDFF !important;
  color:#09090C !important;
  -webkit-text-fill-color:#09090C !important;
  border-color:#DFEDFF !important;
}
html body #work > .category-switcher > .filter.active,
html body #work > .category-switcher > .filter[aria-pressed="true"] {
  background:#D1FF00 !important;
  color:#09090C !important;
  -webkit-text-fill-color:#09090C !important;
  border-color:#D1FF00 !important;
  border-left-color:#D1FF00 !important;
}
html body #about .skills > span {
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.24) !important;
  color:#DFEDFF !important;
}
html body #about .portrait-tech-frame {
  border-color:#6B65AB !important;
  background:#111116 !important;
}
html body #contact .contact-email {
  color:#FFDF2C !important;
  -webkit-text-fill-color:#FFDF2C !important;
  border-color:#6B65AB !important;
}
html body #contact .contact-email > span,
html body #contact .social-links a:hover { color:#D1FF00 !important; }
html body #contact .social-links a { color:#FFFFFF !important; }
html body #contact .contact-stamp {
  border-color:rgba(255,255,255,.28) !important;
  background:#111116 !important;
}

/* Detail pop-up — strong whitespace and one clear neon primary action. */
html body .project-dialog,
html body .project-dialog[open] {
  background:#09090C !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border-color:#6B65AB !important;
}
html body .project-dialog .dialog-body,
html body .project-dialog .dialog-fig { background:#09090C !important; }
html body .project-dialog h2 {
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
html body .project-dialog .dialog-index { color:#FFDF2C !important; }
html body .project-dialog p,
html body .project-dialog .eyebrow { color:#DFEDFF !important; }
html body .project-dialog .dialog-rule { background:#6B65AB !important; }
html body .project-dialog .dialog-close {
  background:#17171E !important;
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.22) !important;
}
html body .project-dialog .dialog-actions a {
  background:#D1FF00 !important;
  color:#09090C !important;
  -webkit-text-fill-color:#09090C !important;
}

/* Activity palettes are limited to the five chosen accent colors.
   These do not override bespoke typography of the HOME category tiles. */
html body #work[data-cat="animation2d"],html body .project-dialog[data-cat="animation2d"] { --acc:#FFDF2C !important; }
html body #work[data-cat="animation3d"],html body .project-dialog[data-cat="animation3d"] { --acc:#DFEDFF !important; }
html body #work[data-cat="art2d"],html body .project-dialog[data-cat="art2d"] { --acc:#D1FF00 !important; }
html body #work[data-cat="storyboard"],html body .project-dialog[data-cat="storyboard"] { --acc:#6B65AB !important; }
html body #work[data-cat="projects"],html body .project-dialog[data-cat="projects"] { --acc:#D1FF00 !important; }

/* Decoration is secondary. The drawings are kept as authored but quieter. */
html body #home .visual-language-layer .collage-deco,
html body #views :is(#work,#about,#contact) .section-decor img {
  opacity:.23 !important;
}
html body #home .od-cross,
html body #home .od-plus-corner {
  color:#DFEDFF !important;
}

/* On long phone pages, stop the image where it naturally ends and let the
   surrounding page become white. The title remains luminous at the top. */
@media (max-width:700px) {
  html body #views #home .index-screen {
    background-image:linear-gradient(
      to bottom,
      #0B0C10 0,#17181D 15svh,#555763 30svh,
      #BFC1CD 49svh,#EEF0F3 65svh,#FFFFFF 80svh,
      #FFFFFF 100%
    ) !important;
  }
  html body #home .index-intro::before {
    background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(9,9,12,.28) 56%,transparent 100%) !important;
  }
  html body #views #home .index-footer.od-footer-v76,
  html body #views #home .index-footer.od-footer-v76 a {
    color:#09090C !important;
  }
}

/* v175 — Preserve the deliberate interactive cross-to-edge flourish on
   the five card previews. Only the obsolete tilted static corner crosses
   remain removed; previews and title artwork are otherwise untouched. */

/* Avoid bringing back old peach, cyan and violet gradients on preview frames.
   Never filter/color-grade the artist's true art, photos or video. */
html body #views #home .category-menu > a.category-card > .category-visual.has-media {
  background:#09090C !important;
  background-image:none !important;
}
html body #views #home .category-menu > a.category-card > .category-visual.has-media::before,
html body #views #home .category-menu > a.category-card > .category-visual.has-media::after {
  content:none !important;
  display:none !important;
}
html body #views #home .category-menu > a.category-card > .category-visual.has-media .category-slides,
html body #views #home .category-menu > a.category-card > .category-visual.has-media .category-slide {
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}
/* Use the same black / light gray chrome around every discipline. */
html body #views #home .category-menu > a.category-card .category-visual {
  border-color:rgba(255,255,255,.24) !important;
}
html body #views #home .category-menu > a.category-card > h2.category-title > .type-lettering-readable {
  background:#09090C !important;
  background-image:none !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Unify empty/loading cards. This is not applied when the media is loaded. */
html body #views #home .category-menu > a.category-card > .category-visual:not(.has-media) {
  background:#111116 !important;
  background-image:linear-gradient(145deg,#111116 5%,#24232D 100%) !important;
}
html body #views #home .category-menu > a.category-card > .category-visual:not(.has-media)::before,
html body #views #home .category-menu > a.category-card > .category-visual:not(.has-media)::after {
  content:none !important;
  display:none !important;
}

/* 2D animation — restrained high-contrast silhouette. */
html body #home .cat-anim2d .category-visual:not(.has-media) > .anim2d-silhouette {
  background:linear-gradient(130deg,#6B65AB 0%,#1600FF 80%) !important;
  box-shadow:inset 7px 0 0 rgba(223,237,255,.28),10px 4px 0 rgba(0,0,0,.4) !important;
}
html body #home .cat-anim2d .category-visual:not(.has-media) > .anim2d-silhouette::before {
  background:linear-gradient(145deg,#FFFFFF 0%,#DFEDFF 62%,#6B65AB 100%) !important;
  box-shadow:inset -8px -6px 0 rgba(22,0,255,.25) !important;
}
html body #home .cat-anim2d .category-visual:not(.has-media) > .anim2d-silhouette::after {
  background:linear-gradient(90deg,transparent,#FFDF2C,transparent) !important;
  box-shadow:none !important;
}

/* 3D — silver/ice and violet facets instead of warm pink metal. */
html body #home .cat-anim3d .category-visual:not(.has-media) > .anim3d-poly {
  background:linear-gradient(128deg,#FFFFFF 0%,#DFEDFF 25%,#6B65AB 59%,#1600FF 100%) !important;
  filter:drop-shadow(10px 12px 5px rgba(0,0,0,.3)) !important;
}
html body #home .cat-anim3d .category-visual:not(.has-media) > .anim3d-poly::before {
  background:linear-gradient(115deg,transparent 0 45%,rgba(255,255,255,.5) 47%,transparent 49% 100%) !important;
}

/* 2D art — neutral and lavender cutouts, no stray peach or turquoise. */
html body #home .cat-art2d .category-visual:not(.has-media) > .art2d-shape.shape-a {
  background:linear-gradient(132deg,#DFEDFF,#6B65AB 62%,#1600FF 100%) !important;
  filter:drop-shadow(7px 10px 8px rgba(0,0,0,.24)) !important;
}
html body #home .cat-art2d .category-visual:not(.has-media) > .art2d-shape.shape-b {
  background:transparent !important;
  border-color:#FFFFFF !important;
}
html body #home .cat-art2d .category-visual:not(.has-media) > .art2d-pixels {
  background:linear-gradient(90deg,transparent 25%,#D1FF00 25% 50%,transparent 50% 75%,#FFFFFF 75%),
    linear-gradient(transparent 25%,#FFDF2C 25% 50%,transparent 50% 75%,#6B65AB 75%) !important;
  background-size:20px 20px !important;
  mix-blend-mode:normal !important;
}

/* Storyboard — monochrome frames with two restrained accent materials. */
html body #home .cat-story .category-visual:not(.has-media) > .story-thumb {
  background:linear-gradient(140deg,#FFFFFF,#DFEDFF) !important;
  border-color:#09090C !important;
  box-shadow:5px 6px 0 rgba(0,0,0,.3) !important;
}
html body #home .cat-story .category-visual:not(.has-media) > .story-thumb.thumb-b {
  background:linear-gradient(140deg,#6B65AB,#1600FF) !important;
}
html body #home .cat-story .category-visual:not(.has-media) > .story-thumb.thumb-c {
  background:linear-gradient(140deg,#FFDF2C,#6B65AB) !important;
}
html body #home .cat-story .category-visual:not(.has-media) > .story-thumb::after {
  border-color:rgba(9,9,12,.58) !important;
}

/* Projects — its lettering is the deliberate multicolor exception.
   For its fallback decorative disc, use only actual theme swatches. */
html body #home .cat-projects .category-visual:not(.has-media) > .projects-disc {
  background:conic-gradient(#1600FF 0 25%,#6B65AB 25% 50%,#FFDF2C 50% 75%,#D1FF00 75% 100%) !important;
  box-shadow:inset -13px -13px 22px rgba(0,0,0,.4),0 10px 25px rgba(0,0,0,.24) !important;
}
html body #home .cat-projects .category-visual:not(.has-media) > .projects-orbit {
  border-color:#DFEDFF !important;
}
html body #home .cat-projects .category-visual:not(.has-media) > .projects-pixels {
  background:radial-gradient(#D1FF00 2px,transparent 3px) !important;
  background-size:9px 9px !important;
}