/* ONLYDROP / ART DIRECTION 158
   A quieter editorial system built around the actual artwork.
   This file deliberately loads last. Existing media, hand-made wordmarks,
   clip geometry, precise edge alignment and navigation remain intact. */

:root {
  --od-editorial-ink: #f0eee8;
  --od-editorial-muted: #a7b4b6;
  --od-editorial-signal: #d2ff4a;
  --od-editorial-line: rgba(214,226,220,.19);
}

/* Remove template-like overlay art while keeping the custom city wallpaper,
   portrait/helmet art, WebGL object and precision card-edge cross. */
html body #home .visual-language-layer,
html body #home .od-tribal,
html body #home .od-slash,
html body #home .od-fog,
html body #work .work-decor,
html body #about .about-decor,
html body #contact .contact-decor {
  display: none !important;
}

/* Site navigation: quiet typography, clear active item, no ornamental box. */
html body #nav.portfolio-navigation {
  gap: clamp(14px, 2.1vw, 32px);
}
html body #nav.portfolio-navigation a.view-link {
  letter-spacing: .045em !important;
  font-weight: 600 !important;
}
html body #nav.portfolio-navigation a.view-link:not(.active):not([aria-current="page"]) {
  opacity: .76;
}
html body #nav.portfolio-navigation a.view-link:hover,
html body #nav.portfolio-navigation a.view-link:focus-visible {
  opacity: 1;
}

/* The name is the brand. Its custom Dirtyline glyphs are left untouched.
   Supporting typography shares one rhythm instead of competing with it. */
html body #home .index-topline,
html body #home .index-alias,
html body #home .index-description,
html body #home .index-description p {
  text-shadow: none !important;
}
html body #home .index-topline {
  color: var(--od-editorial-muted) !important;
  letter-spacing: .095em !important;
  font-weight: 600 !important;
}
html body #home .index-name-block .index-alias {
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  color: var(--od-editorial-ink) !important;
}
html body #home .index-description {
  max-width: 390px !important;
}
html body #home .index-description > p {
  max-width: 39ch !important;
  line-height: 1.55 !important;
  color: #d7dcda !important;
  letter-spacing: -.01em !important;
}
html body #home .index-description::before {
  width: 2px !important;
  background-color: var(--od-editorial-signal) !important;
}
html body #home .od-bio-heading {
  letter-spacing: -.035em !important;
}

/* Make the art windows read as a deliberately edited portfolio:
   an anchor portrait, two cinematic bands, two secondary studies.
   Not five generic cards in equal columns. */
@media (min-width: 901px) {
  html body #views #home .index-screen {
    gap: clamp(8px, 1.05vh, 14px) !important;
  }
  html body #views #home .index-intro {
    gap: clamp(18px, 2.25vw, 44px) !important;
    grid-template-columns: minmax(0,1.18fr) minmax(230px,.84fr) minmax(125px,.48fr);
  }
  html body #views #home .category-menu {
    grid-template-columns: minmax(0,1fr) minmax(0,1.33fr) minmax(0,1.06fr) !important;
    grid-template-rows: minmax(0,1.12fr) minmax(0,.88fr) !important;
    column-gap: clamp(12px, 1.45vw, 24px) !important;
    row-gap: clamp(12px, 1.6vh, 20px) !important;
  }
  /* A light optical offset gives the rows an editorial cadence, not a
     random skew. The precise clip/cross positioning is preserved. */
  html body #views #home .category-menu > a.cat-story > h2.category-title {
    left: clamp(17px, 1.5vw, 27px) !important;
  }
  html body #views #home .category-menu > a.cat-projects > h2.category-title {
    left: clamp(13px, 1.25vw, 22px) !important;
  }
}

/* Remove the generically boxed micro-caption under each distinctive heading.
   Preserve its function as a small, readable category identifier. */
html body #views #home .category-menu > a.category-card > h2.category-title > .type-lettering-readable {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: clamp(5px, .65vh, 9px) !important;
  font-size: clamp(9px, .72vw, 11px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .085em !important;
  color: #f0eee8 !important;
  -webkit-text-fill-color: #f0eee8 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.85) !important;
}

/* Quiet until interaction: the media is the event, not the hover gimmick. */
html body #views #home .category-menu > a.category-card {
  transition: none !important;
}
html body #views #home .category-menu > a.category-card .category-visual {
  box-shadow: none !important;
}
html body #views #home .category-menu > a.category-card:focus-visible {
  outline: 2px solid var(--od-editorial-signal) !important;
  outline-offset: 5px !important;
}

/* WORK: precise, restrained editorial information rather than five copies
   of a marketing card. Respect large/wide cards and existing filtering. */
html body #work .work-topline {
  color: var(--od-editorial-muted) !important;
  letter-spacing: .07em !important;
}
html body #work .work-topline a.back-index {
  color: var(--od-editorial-ink) !important;
}
html body #work .section-heading {
  margin-bottom: clamp(18px, 2.5vw, 34px) !important;
}
html body #work .project-grid {
  column-gap: clamp(16px, 2vw, 30px) !important;
  row-gap: clamp(24px, 3.5vw, 48px) !important;
}
html body #work .project-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
html body #work .project-card .project-image {
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body #work .project-card .project-meta {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding-top: clamp(10px, 1.1vw, 16px) !important;
}
html body #work .project-card .project-type {
  color: var(--od-editorial-muted) !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
}
html body #work .project-card h3 {
  line-height: 1.12 !important;
  letter-spacing: -.045em !important;
}
html body #work .project-card .arrow {
  color: var(--od-editorial-signal) !important;
  font-weight: 500 !important;
}
html body #work .project-card .project-open:focus-visible {
  outline: 2px solid var(--od-editorial-signal) !important;
  outline-offset: 4px !important;
}

/* Individual disciplines keep their own title art, but their interfaces
   share the same material and calm navigation. */
html body #work .category-switcher .filter {
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}

/* ABOUT: portrait and text form a real editorial spread.
   Decorative frame chrome is removed, not the photograph itself. */
html body #about .about-portrait {
  margin: 0 !important;
}
html body #about .portrait-tech-frame {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html body #about .about-content h2 {
  letter-spacing: -.055em !important;
  line-height: 1.02 !important;
}
html body #about .about-copy {
  max-width: 54ch !important;
  line-height: 1.65 !important;
  color: #d6dddb !important;
}
html body #about .skills > span {
  background: transparent !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-right: clamp(8px, 1.1vw, 18px) !important;
  color: var(--od-editorial-muted) !important;
  letter-spacing: .065em !important;
}

/* CONTACT: one strong typographic gesture; no dashboard decoration. */
html body #contact .contact-section h2 {
  letter-spacing: -.068em !important;
}
html body #contact .contact-email {
  text-decoration-thickness: 1px;
  text-underline-offset: .12em;
}
html body #contact .social-links {
  gap: clamp(14px, 2vw, 30px) !important;
}

/* On compact screens, do not attempt to squeeze the desktop editorial grid.
   Keep the existing responsive art windows and custom display letterforms. */
@media (max-width: 900px) {
  html body #home .index-description {
    max-width: min(390px, 92%) !important;
  }
  html body #home .index-description > p {
    max-width: 100% !important;
  }
  html body #views #home .category-menu > a.category-card > h2.category-title > .type-lettering-readable {
    font-size: 9px !important;
    margin-top: 6px !important;
  }
  html body #work .project-grid {
    column-gap: 14px !important;
    row-gap: 24px !important;
  }
}
@media (max-width: 600px) {
  html body #home .index-topline {
    letter-spacing: .06em !important;
  }
  html body #home .index-description {
    max-width: 79% !important;
  }
  html body #home .index-description > p {
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
  html body #work .project-grid {
    row-gap: 20px !important;
  }
  html body #work .project-card .project-meta {
    padding-top: 10px !important;
  }
  html body #about .about-copy {
    line-height: 1.58 !important;
  }
}

/* Accessibility: never let decorative motion override user's motion choice. */
@media (prefers-reduced-motion: reduce) {
  html body #views #home .category-menu > a.category-card {
    animation: none !important;
  }
}
html.motion-paused body #views #home .category-menu > a.category-card {
  animation: none !important;
}