/* ============================================================================
   ShiShi — site.css
   Site-wide corrections layered on top of the compiled Astro stylesheet
   (/_astro/about.*.css). Kept in a separate, hand-maintained file so the
   generated bundle stays untouched.

   Loaded after the Astro stylesheet on every page, so equal-specificity
   rules here win by source order.

   Sections:
     1. Accessibility — skip link
     2. Accessibility — colour contrast (WCAG AA for small text)
     3. Layout — horizontal overflow guard
     4. Navigation — current-section state
     5. Touch targets
     6. Motion — prefers-reduced-motion
     7. Shop — "in development" concept cards
   ========================================================================= */


/* --- 1. Skip link ---------------------------------------------------------
   Visually hidden until focused, then pinned to the top-left above the
   sticky header (which sits at z-index 20). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--color-bg-lift);
  color: var(--color-fg);
  border: 1px solid var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Programmatically focused <main> should not draw a focus ring. */
main:focus {
  outline: none;
}

/* Available to assistive technology, absent from the visual layout. Used for
   section headings that the design expresses through layout rather than text. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --- 2. Colour contrast ---------------------------------------------------
   --color-accent (#8b1c26) measures 2.10:1 on --color-bg-lift and 2.18:1 on
   --color-bg. That is fine for fills, borders and glows, but fails WCAG AA
   (4.5:1) wherever the accent is used as *text*.

   --color-accent-text is a lighter tone of the same red, reserved for
   foreground text: 4.88:1 on #08080c and 4.70:1 on #0e0e14.

   Only the text utilities are retargeted. Backgrounds, borders, fills and
   glows keep the original deep red, so the restrained visual identity is
   unchanged. */
:root {
  --color-accent-text: #d4515c;
  --color-muted-text: #85858e;
}

.text-\[var\(--color-accent\)\],
.\[var\(--color-accent\)\],
.section-label-accent,
.hover\:text-\[var\(--color-accent\)\]:hover,
.group-hover\:text-\[var\(--color-accent\)\]:is(:where(.group):hover *),
.prose-a\:text-\[var\(--color-accent\)\] :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose-em\:text-\[var\(--color-accent\)\] :where(em):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--color-accent-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-\[var\(--color-accent\)\]\/70 {
    color: color-mix(in oklab, var(--color-accent-text) 78%, transparent);
  }
}

/* The 70%-opacity accent variant composites down to roughly 3.3:1, which is
   below AA. Resolved to a solid tone instead so the softer weight survives
   without the contrast loss. */
.text-\[var\(--color-accent\)\]\/70 {
  color: #c4626b;
}

/* --color-muted (#787880) lands at 4.39:1 on --color-bg-lift — just short of
   AA at the 10-12px sizes used for meta labels, dates and tag lists. */
.text-\[var\(--color-muted\)\],
.section-label,
a.text-\[var\(--color-muted\)\]:not(:hover) {
  color: var(--color-muted-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-\[var\(--color-muted\)\]\/60 {
    color: color-mix(in oklab, var(--color-muted-text) 82%, transparent);
  }
}

/* Same problem one step further down: 60% of the muted grey lands at ~4.0:1.
   This is the colour that opacity would have produced, only opaque, so it
   still reads as the quieter of the two greys. */
.text-\[var\(--color-muted\)\]\/60 {
  color: #7e7e86;
}

/* Accent text on an accent-coloured fill must stay light, not the new red. */
.bg-\[var\(--color-accent\)\] .text-\[var\(--color-accent\)\],
.bg-\[var\(--color-accent\)\].text-\[var\(--color-fg\)\] {
  color: var(--color-fg);
}


/* --- 3. Horizontal overflow guard -----------------------------------------
   Grid and flex tracks are sized by their content's min-content width, so a
   single long unbreakable token (a social handle, a URL, a hyphenless title)
   widens its track and pushes the document past the viewport.

   `overflow-wrap: anywhere` — unlike `break-word` — reduces the min-content
   contribution, so the track can shrink and the token wraps inside its card.
   This removed the 12-15px overflow measured on the home page at 768px,
   caused by the "@seriousblackcat" heading in the three-column social grid. */
h1, h2, h3, h4, h5, h6,
.h-page, .h-section, .h-card,
.text-lead, .text-body,
figcaption, blockquote, dd, dt, li, p {
  overflow-wrap: anywhere;
}

/* Long-token wrapping should not apply to the intentionally single-line
   marquee strips, which are already clipped by their own wrapper. */
.marquee-wrapper, .marquee-wrapper * {
  overflow-wrap: normal;
}

/* The animated headline wraps every letter in an inline block. Keep the
   accented final word together, and slightly reduce the type on the narrowest
   phones so the second sentence does not leave an orphaned character. */
[data-letter-reveal] .red-glow-text {
  white-space: nowrap;
}

[data-letter-reveal] .hero-headline-line {
  white-space: nowrap;
}

@media (max-width: 374px) {
  h1[data-letter-reveal] {
    font-size: clamp(1.65rem, 8.3vw, 2rem);
  }
}

/* Keep the commercial path above the first scroll on phones. The biography
   and release facts stay below the primary actions, while desktop keeps the
   original editorial sequence. */
@media (max-width: 767px) {
  .home-hero-content {
    display: flex;
    flex-direction: column;
  }

  .home-hero-actions {
    order: 3;
    margin-top: 2rem;
  }

  .home-hero-details {
    order: 4;
    margin-top: 2.5rem;
  }
}

/* Grid/flex children default to a min-width of auto; zeroing it lets any
   remaining wide child (tables, embeds, <pre>) shrink instead of pushing
   the page sideways. */
.grid > *, .flex > * {
  min-width: 0;
}


/* --- 4. Current-section navigation state ----------------------------------
   The header and mobile menu now mark the active section with
   aria-current="page". */
nav a[aria-current="page"],
[data-mobile-menu] a[aria-current="page"] {
  color: var(--color-accent-text);
}

header nav a[aria-current="page"] {
  position: relative;
}

header nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 1px;
  background: var(--color-accent);
}


/* --- 4b. Fragments tag filter ---------------------------------------------
   /fragments/ used to render a "Filter by:" bar and per-entry tag links that
   pointed at #hash targets which did not exist anywhere on the page. The tags
   are now real filter buttons; the selected one is marked with aria-pressed. */
.fragment-filter-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.fragment-filter-btn[aria-pressed="true"] {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Filtering hides entries with the hidden attribute; utility classes that set
   a display value would otherwise win. */
[hidden] {
  display: none !important;
}


/* --- 5. Touch targets -----------------------------------------------------
   Mobile menu entries and the menu buttons get a comfortable hit area
   without changing how they look. */
@media (max-width: 767px) {
  [data-mobile-menu] a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }

  [data-mobile-menu-toggle],
  [data-mobile-menu-close] {
    min-height: 44px;
    min-width: 44px;
  }
}


/* --- 5b. Mobile fan navigation -------------------------------------------
   The header persists during Astro page transitions, so the full-screen menu
   is intentionally controlled by the delegated listener in nav-current.js.
   The overlay scrolls independently on short iPhones; the five most useful
   destinations remain one tap away in the fixed bottom navigation. */
.mobile-bottom-nav {
  display: none;
}

.mobile-menu {
  z-index: 60;
  height: 100vh;
  height: 100dvh;
  isolation: isolate;
}

.mobile-menu-header {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  border-bottom: 1px solid var(--color-subtle);
}

.mobile-menu-scroll {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: 1.25rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.mobile-menu-kicker {
  margin: 0 0 0.65rem;
  color: var(--color-muted-text);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mobile-menu-primary {
  margin: 0;
  border-top: 1px solid var(--color-subtle);
}

.mobile-menu-primary li {
  border-bottom: 1px solid var(--color-subtle);
}

.mobile-menu-primary a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 54px !important;
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 7vw, 1.7rem);
  line-height: 1.15 !important;
}

.mobile-menu-primary a::after {
  content: "\2192";
  color: var(--color-muted-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.mobile-menu-primary a[aria-current="page"]::after {
  content: "\2022";
  color: var(--color-accent-text);
}

.mobile-menu-explore {
  margin-top: 1.6rem;
}

.mobile-menu-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.mobile-menu-secondary a {
  display: flex !important;
  align-items: center;
  min-height: 46px !important;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-subtle);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  line-height: 1.25 !important;
  text-transform: uppercase;
}

.mobile-menu-secondary a[aria-current="page"] {
  border-color: var(--color-accent);
}

.mobile-menu-listen {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-subtle);
}

.mobile-menu-listen-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.15rem;
}

.mobile-menu-listen a {
  min-height: 44px !important;
  color: var(--color-muted-text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  line-height: 44px !important;
  text-transform: uppercase;
}

.mobile-menu-listen a::after {
  content: " \2197";
  color: var(--color-accent-text);
}

.mobile-menu-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

@media (max-width: 767px) {
  body.has-mobile-bottom-nav {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 5px 4px env(safe-area-inset-bottom);
    border-top: 1px solid var(--color-subtle);
    background: rgba(8, 8, 12, 0.94);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 54px;
    padding: 3px 1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-muted-text);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .mobile-bottom-nav a[aria-current="page"],
  .mobile-bottom-nav button[data-current] {
    color: var(--color-accent-text);
  }

  .mobile-bottom-nav-icon {
    min-height: 20px;
    font-size: 1rem;
    line-height: 20px;
  }
}

@media (max-width: 767px) and (max-height: 700px) {
  .mobile-menu-header {
    min-height: 58px;
  }

  .mobile-menu-scroll {
    padding-top: 0.8rem;
  }

  .mobile-menu-primary a {
    min-height: 48px !important;
    font-size: 1.25rem;
  }

  .mobile-menu-explore,
  .mobile-menu-listen {
    margin-top: 1rem;
  }
}


/* --- 6. Reduced motion ----------------------------------------------------
   The compiled stylesheet only quiets the VHS layers and view transitions.
   Everything else — the rotating ring, marquees, grain, flicker, pulse,
   glitch, ambient grid — kept animating for users who asked for less motion.

   Entrance transitions are collapsed rather than removed so that content
   which starts at opacity 0 still ends up visible. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto !important;
  }

  /* Belt and braces: anything revealed by IntersectionObserver or by the
     letter-reveal script is forced visible, so a skipped animation can
     never leave text hidden. */
  .reveal,
  [data-letter-reveal] span {
    opacity: 1 !important;
    transform: none !important;
  }

  .ambient-grid,
  .vhs-roll,
  .vhs-noise,
  .vhs-glitch-bar {
    animation: none !important;
  }
}


/* --- 7. Shop — concept cards ----------------------------------------------
   Styling for the "in development" state of /shop/. These pieces are
   deliberately typographic: there is no product photography yet, so the
   cards use linework and type only.

   See SHOPIFY_SETUP.md for how this page becomes commerce-ready later. */

/* Card shell. */
.concept-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-subtle);
  background: var(--color-bg-lift);
  transition: border-color 0.25s ease;
}

.concept-card:hover,
.concept-card:focus-within {
  border-color: var(--color-accent);
}

/* Drawn placeholder area. No photography, no mock-ups — a numbered plate
   with the same linework vocabulary used elsewhere on the site. */
.concept-plate {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 11px,
      rgba(139, 28, 38, 0.07) 11px 12px
    ),
    var(--color-bg);
  border-bottom: 1px solid var(--color-subtle);
}

.concept-plate::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid var(--color-subtle);
}

.concept-plate svg {
  position: relative;
  width: 58%;
  height: auto;
  color: var(--color-muted);
  opacity: 0.85;
}

.concept-index {
  position: absolute;
  top: 0.75rem;
  left: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--color-muted-text);
}

/* Status chip — every concept card carries one. */
.concept-status {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  display: inline-block;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--color-accent);
  background: rgba(8, 8, 12, 0.85);
  color: var(--color-accent-text);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: right;
}

.concept-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.6rem;
}

.concept-spec {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-subtle);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-text);
  line-height: 1.8;
}

.concept-spec dt {
  color: var(--color-fg);
  opacity: 0.62;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.62rem;
}

.concept-spec dd {
  margin: 0 0 0.6rem;
}

.concept-spec dd:last-child {
  margin-bottom: 0;
}

/* Process steps: Concept → Sample → Final. */
.process-step {
  position: relative;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--color-subtle);
}

.process-step[data-state="current"] {
  border-top-color: var(--color-accent);
}

.process-step .process-marker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted-text);
}

.process-step[data-state="current"] .process-marker {
  color: var(--color-accent-text);
}

/* Visuals: responsive YouTube player and fan route. */
.visuals-video-hud {
  padding: 0.75rem 1.25rem;
}

.visuals-video-channel {
  margin-left: 0;
}

.visuals-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.visuals-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.visuals-video-details {
  display: grid;
  gap: 1.75rem;
  padding: 1.5rem;
}

.visuals-video-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.visuals-route-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .visuals-video-actions {
    flex-direction: row;
  }

  .visuals-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .visuals-video-hud {
    padding-inline: 1.75rem;
  }

  .visuals-video-channel {
    margin-left: auto;
  }

  .visuals-video-details {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 2.5rem;
  }

  .visuals-video-actions {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .visuals-route-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Homepage film premiere banner. Kept outside Tailwind so the downloaded
   production bundle remains responsive without rebuilding the Astro source. */
.premiere-banner-section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.premiere-banner-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .premiere-banner-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .premiere-banner-layout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Newsletter consent stays readable and easy to tap on mobile. */
.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--color-muted-text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.newsletter-consent input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  accent-color: var(--color-accent);
}

.newsletter-consent:focus-within {
  color: var(--color-fg);
}

/* MailerLite keeps subscriptions and double opt-in inside the existing dark UI. */
.newsletter-mailerlite {
  min-height: 8rem;
}

.newsletter-mailerlite .ml-form-embedContainer,
.newsletter-mailerlite .ml-form-align-center,
.newsletter-mailerlite .ml-form-embedWrapper.embedForm {
  width: 100% !important;
  max-width: none !important;
}

.newsletter-mailerlite .ml-form-align-center {
  text-align: left !important;
}

.newsletter-mailerlite .ml-form-embedWrapper.embedForm {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.newsletter-mailerlite .ml-form-embedBody {
  padding: 0 !important;
}

.newsletter-mailerlite .ml-form-embedContent {
  display: none !important;
}

.newsletter-mailerlite .ml-form-formContent,
.newsletter-mailerlite .ml-form-fieldRow {
  margin: 0 !important;
}

.newsletter-mailerlite .ml-form-fieldRow input.form-control {
  width: 100% !important;
  min-height: 3.25rem !important;
  padding: 1rem !important;
  color: var(--color-fg) !important;
  background: transparent !important;
  border: 1px solid var(--color-subtle) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-mono) !important;
  font-size: 0.875rem !important;
}

.newsletter-mailerlite .ml-form-fieldRow input.form-control::placeholder {
  color: var(--color-muted) !important;
  opacity: 1 !important;
}

.newsletter-mailerlite .ml-form-fieldRow input.form-control:focus {
  border-color: var(--color-accent) !important;
  outline: 2px solid transparent !important;
}

.newsletter-mailerlite .ml-form-embedSubmit {
  margin: 0.75rem 0 0 !important;
}

.newsletter-mailerlite .ml-form-embedSubmit button.primary {
  min-height: 3.25rem !important;
  padding: 0.9rem 1.75rem !important;
  color: var(--color-fg) !important;
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: background-color 160ms ease, color 160ms ease !important;
}

.newsletter-mailerlite .ml-form-embedSubmit button.primary:hover,
.newsletter-mailerlite .ml-form-embedSubmit button.primary:focus-visible {
  color: var(--color-accent) !important;
  background: transparent !important;
}

.newsletter-mailerlite .ml-form-successBody {
  padding: 1.25rem !important;
  color: var(--color-fg) !important;
  background: var(--color-bg-lift) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
}

.newsletter-fallback {
  padding: 1rem;
  border: 1px solid var(--color-subtle);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: center;
}

.newsletter-fallback a {
  color: var(--color-accent);
  text-decoration: underline;
}

@media (min-width: 640px) {
  .newsletter-mailerlite .ml-block-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: stretch;
  }

  .newsletter-mailerlite .ml-form-embedSubmit {
    min-width: 10rem;
    margin: 0 !important;
  }

  .newsletter-mailerlite .ml-form-embedSubmit button.primary {
    height: 100% !important;
  }
}