/*
  Site refinement pass - September 2026
  Shared overrides for hellosb.cc.
  Direction: minimal / editorial / artwork-first.
*/

/* --------------------------------------------------------------------------
   1. No divider-rule treatment anywhere
   -------------------------------------------------------------------------- */
.projects-section-head,
.home-footer,
.home-footer-base,
.home-footer-links a,
.cs-section,
.cs-section:last-child,
.project-nav,
.site-footer .links a,
.site-footer .meta {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

hr { display: none !important; border: 0 !important; }
.nav-links a.active::after,
.scroll-cue::before { content: none !important; display: none !important; }

/* Active nav remains legible without an underline. */
.nav-links a.active { font-weight: 560; }

/* --------------------------------------------------------------------------
   2. Living coded gradient header
   The former CSS background-position animation is disabled. A WebGL canvas
   is injected by site-refinement.js. The solid background is only a fallback.
   -------------------------------------------------------------------------- */
.hero,
.project-hero,
.about-hero {
  position: relative;
  isolation: isolate;
  background: #efe6e4 !important;
  background-image: none !important;
  animation: none !important;
}

.hero::before,
.hero::after,
.project-hero::before,
.project-hero::after,
.about-hero::before,
.about-hero::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.living-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.hero > :not(.living-gradient),
.project-hero > :not(.living-gradient),
.about-hero > :not(.living-gradient) {
  position: relative;
  z-index: 1;
}

/* Prevent the fixed nav from visually fighting the moving field. */
.site-nav.scrolled {
  background: rgba(244, 239, 232, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}

/* --------------------------------------------------------------------------
   3. Layout / type refinement
   -------------------------------------------------------------------------- */
.hero {
  min-height: min(72vh, 700px) !important;
  padding-top: 132px;
  padding-bottom: 64px !important;
}
.hero-content { max-width: 1040px; }
.hero-headline {
  font-size: clamp(44px, 5.2vw, 78px) !important;
  line-height: 0.99 !important;
  text-wrap: balance;
}
.hero-sub { max-width: 660px !important; }
.hero-headline .accent {
  /* Text treatment stays restrained; the living field provides the motion. */
  background: linear-gradient(92deg, #7650d4, #a86bd0 58%, #c2859c) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.projects-section-head,
.projects-grid,
.home-footer-grid,
.home-footer-base {
  width: min(100%, 1600px);
  margin-left: auto;
  margin-right: auto;
}
.projects-section-head { padding-bottom: 0 !important; margin-bottom: 52px; }
.projects-grid { gap: clamp(38px, 4vw, 72px) clamp(24px, 3vw, 48px); }

.project-card-media {
  border-radius: 6px;
  background: #161412;
}
.project-card-meta {
  gap: 20px;
  line-height: 1.35;
}
.project-card-action { display: none; }

.project-hero-grid { width: min(100%, 1480px); }
.project-hero-role { max-width: 580px; }
.project-hero-image { max-width: 1500px; }
.project-hero-image-inner { background: transparent; }
.project-hero-image img,
.project-hero-image video {
  object-fit: contain !important;
  width: 100%;
  height: auto !important;
}

.case-study { max-width: 1320px; }
.cs-section { padding-block: 42px; }
.cs-section + .cs-section { margin-top: 4px; }

.project-nav a,
.home-footer-links a,
.site-footer .links a,
.nav-links a {
  -webkit-tap-highlight-color: transparent;
}

/* Horizontal links no longer use rule/underline feedback. */
.home-footer-links a,
.site-footer .links a { transition: opacity .2s ease, transform .2s ease !important; }
.home-footer-links a:hover,
.site-footer .links a:hover { opacity: .68; }

/* Very wide screens: keep editorial measure rather than stretching cards. */
@media (min-width: 1700px) {
  .hero { padding-left: max(64px, calc((100vw - 1760px) / 2)); padding-right: max(64px, calc((100vw - 1760px) / 2)); }
  .projects-section,
  .home-footer { padding-left: max(64px, calc((100vw - 1760px) / 2)); padding-right: max(64px, calc((100vw - 1760px) / 2)); }
}

/* --------------------------------------------------------------------------
   4. Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero { min-height: min(70vh, 620px) !important; }
  .projects-section { padding-inline: 28px; }
  .project-hero { padding-inline: 28px; }
  .project-hero-image { padding-inline: 28px; }
  .case-study,
  .cs-gallery,
  .section-rail,
  .midstory,
  .dsystem-4col { padding-left: 28px; padding-right: 28px; }
}

/* --------------------------------------------------------------------------
   5. Mobile / touch - artwork is never blindly cropped
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-nav { padding: 18px 20px !important; }
  .nav-logo { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
  .nav-links { gap: 10px !important; }
  .nav-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px !important; }

  .hero {
    min-height: auto !important;
    align-items: flex-start !important;
    padding: 110px 20px 50px !important;
  }
  .hero-greeting { font-size: clamp(17px, 5vw, 21px) !important; margin-bottom: 12px; }
  .hero-headline {
    font-size: clamp(38px, 11.6vw, 52px) !important;
    line-height: 0.99 !important;
    letter-spacing: -0.025em;
  }
  .hero-sub { font-size: 15px !important; line-height: 1.5; margin-top: 18px !important; }
  .hero-tags { margin-top: 18px !important; gap: 8px !important; }
  .hero-tags span { padding: 7px 12px !important; }
  .hero .scroll-cue { display: none !important; }

  .projects-section { padding: 58px 20px 64px !important; }
  .projects-section-head { margin-bottom: 34px !important; justify-content: flex-start !important; }
  .projects-section-head h2 { display: none !important; }
  .projects-section-head > span { font-size: 10px; letter-spacing: .16em; }
  .projects-grid { grid-template-columns: 1fr !important; gap: 44px !important; }

  /* Natural media ratio on small screens: no 4:3 crop box. */
  .project-card:not(.is-app) .project-card-media,
  .cs-gallery-media,
  .cs-gallery-item.full .cs-gallery-media,
  .banner-card-media,
  .dsystem-card-media,
  .journey-card-img,
  .midstory-previews > div,
  .about-portrait {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .project-card:not(.is-app) .project-card-media { overflow: hidden; }
  .cs-gallery-media,
  .banner-card-media,
  .dsystem-card-media,
  .journey-card-img,
  .midstory-previews > div,
  .about-portrait { overflow: visible !important; }

  .project-card:not(.is-app) .project-card-media img,
  .project-card:not(.is-app) .project-card-media video,
  .cs-gallery-media img,
  .cs-gallery-media video,
  .banner-card-media img,
  .banner-card-media video,
  .dsystem-card-media img,
  .dsystem-card-media video,
  .journey-card-img img,
  .journey-card-img video,
  .midstory-previews img,
  .midstory-previews video,
  .about-portrait img,
  .about-portrait video {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
  }

  .project-card-media { border-radius: 5px; }
  .project-card-meta {
    margin-top: 13px !important;
    align-items: start;
    font-size: 15px !important;
  }
  .project-card-meta .num { padding-top: 1px; }
  .project-card-action {
    display: inline-flex;
    min-height: 48px;
    width: max-content;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    padding: 0 18px;
    border-radius: 999px;
    background: #efe8db;
    color: #131211;
    font-size: 15px;
    font-weight: 570;
    line-height: 1;
  }
  .project-card.is-app .project-card-action { background: #fff; }

  /* Desktop hover caption is intentionally not part of touch UX. */
  .project-card-media::after { content: none !important; display: none !important; }
  .project-card:hover .project-card-media img,
  .project-card:hover .project-card-media video { transform: none !important; }

  .project-hero { padding: 108px 20px 48px !important; }
  .project-hero-grid { gap: 28px !important; }
  .project-hero-title { font-size: clamp(44px, 14vw, 64px) !important; }
  .project-hero-title .sub { font-size: .42em !important; margin-top: 12px; }
  .project-hero-role { padding: 24px !important; border-radius: 10px; }
  .project-hero-role h3 { font-size: 20px; }
  .project-hero-image { padding: 0 20px 42px !important; width: 100% !important; }
  .project-hero-image-inner { padding: 0 !important; overflow: visible !important; border-radius: 6px; }
  .project-hero-image img,
  .project-hero-image video { max-height: none !important; height: auto !important; object-fit: contain !important; }

  .section-rail { padding: 64px 20px 40px !important; text-align: left; }
  .section-rail .sub { margin-left: 0; }
  .banner-grid { padding: 0 20px 58px !important; gap: 34px !important; }
  .midstory,
  .dsystem-4col,
  .case-study { padding: 58px 20px !important; }
  .case-study-blurb { margin-bottom: 34px; }
  .cs-section { gap: 10px !important; padding: 30px 0 !important; }
  .cs-section h2 { font-size: 26px; }
  .cs-section .body { line-height: 1.65; }
  .cs-gallery { padding: 56px 20px !important; }
  .cs-gallery-inner { gap: 34px !important; }

  .project-nav { padding: 48px 20px !important; gap: 12px !important; }
  .project-nav a {
    width: min(100%, 390px);
    min-height: 50px;
    justify-content: center;
    padding: 14px 20px !important;
  }

  .site-footer { padding: 50px 20px 30px !important; }
  .site-footer-grid { align-items: flex-start; }
  .site-footer .links { align-items: flex-start !important; }
  .site-footer .links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 !important; }
  .site-footer .meta { margin-top: 38px !important; padding-top: 0 !important; }

  .home-footer { padding: 60px 20px 36px !important; }
  .home-footer-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 !important; }
  .home-footer-base { margin-top: 54px !important; padding-top: 0 !important; gap: 8px; flex-direction: column; }

  .about-hero { min-height: auto !important; padding: 112px 20px 58px !important; }
  .about-hero-grid { gap: 34px !important; }
  .about-hero h1 { font-size: clamp(44px, 13vw, 62px) !important; }
  .about-portrait::before { display: none !important; content: none !important; }
}

/* Touch devices, including landscape phones/tablets wider than 760px. */
@media (hover: none), (pointer: coarse) {
  .project-card-media::after { content: none !important; display: none !important; }
  .project-card:hover .project-card-media img,
  .project-card:hover .project-card-media video,
  .banner-card:hover,
  .journey-card:hover .journey-card-img img,
  .project-nav a:hover { transform: none !important; }
  .project-card-action {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 0 18px;
    border-radius: 999px;
    background: #efe8db;
    color: #131211;
    font-size: 15px;
    font-weight: 570;
  }
}

/* Narrow phones: preserve breathing room without shrinking text to illegibility. */
@media (max-width: 350px) {
  .site-nav { padding-left: 16px !important; padding-right: 16px !important; }
  .hero,
  .projects-section,
  .home-footer,
  .project-hero,
  .project-hero-image,
  .case-study,
  .cs-gallery,
  .section-rail,
  .midstory,
  .dsystem-4col,
  .site-footer,
  .project-nav { padding-left: 16px !important; padding-right: 16px !important; }
  .hero-headline { font-size: clamp(36px, 11.8vw, 42px) !important; }
  .project-card-meta { font-size: 14px !important; }
}

/* Landscape mobile: use the available width without making the hero excessively tall. */
@media (max-height: 500px) and (min-width: 600px) and (hover: none) {
  .hero { min-height: auto !important; padding-top: 94px !important; padding-bottom: 38px !important; }
  .hero-content { max-width: 82vw; }
  .hero-headline { font-size: clamp(34px, 6.5vw, 50px) !important; }
  .project-hero { padding-top: 94px !important; }
}

/* Touch-first correction also covers landscape phones and tablets wider than
   the 760px mobile breakpoint. */
@media (hover: none), (pointer: coarse) {
  .site-nav a,
  .home-footer-links a,
  .site-footer .links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .project-card:not(.is-app) .project-card-media,
  .cs-gallery-media,
  .cs-gallery-item.full .cs-gallery-media,
  .banner-card-media,
  .dsystem-card-media,
  .journey-card-img,
  .midstory-previews > div,
  .about-portrait {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .project-card:not(.is-app) .project-card-media img,
  .project-card:not(.is-app) .project-card-media video,
  .cs-gallery-media img,
  .cs-gallery-media video,
  .banner-card-media img,
  .banner-card-media video,
  .dsystem-card-media img,
  .dsystem-card-media video,
  .journey-card-img img,
  .journey-card-img video,
  .midstory-previews img,
  .midstory-previews video,
  .about-portrait img,
  .about-portrait video,
  .project-hero-image img,
  .project-hero-image video {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
  }
}