/* ==========================================================================
   identity.css — 2026-06-05 official brand layer (ADDITIVE)
   Source: ملف الهويه حق ابو عمر و b22 / BO 3OMAR22 BRANDING PRESENTATION
   - Official palette: #3A6FB7 / #EE3026 / #F9C0D2 / #0F8853 / #E6CC54
   - Official type: Lyon Arabic Display (AR display), Anisette (EN sub), Aeonik (EN body)
   - All fonts load with graceful fallback: if a file is missing the site
     falls back to Fatimah/Bricolage with zero visual breakage.
   - DEPLOY NOTE: official .otf files are copied into assets/fonts/.
   ========================================================================== */

@font-face {
  font-family: 'Lyon Arabic Display';
  src: url('../fonts/LyonArabicDisplay-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anisette';
  src: url('../fonts/Anisette-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --navh: 102px; /* desktop bar (72) + jokes tape (30) */
  --id-blue: #3A6FB7;
  --id-red: #EE3026;
  --id-pink: #F9C0D2;
  --id-green: #0F8853;
  --id-gold: #E6CC54;
  --font-display-ar: 'Lyon Arabic Display', 'Fatimah', 'Bricolage Grotesque', sans-serif;
  --font-anisette: 'Anisette', 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-aeonik: 'Aeonik', 'Inter', sans-serif;
}

/* ---------- the display voice: big Arabic headlines get the brand face ---- */
.poster-title,
.poster-section-head h2,
.craft-title h2,
.recommend-copy h2,
.journal-title h2,
.mb-title,
.mb-sec-head h2,
.mb-craft h2,
.mb-recs-head h2,
.mb-journal-copy h2,
.ip-hero h1,
.ip-mani-hero h1,
.ip-sec-head h2,
.ip-stage-head h2,
.ip-cta h2 {
  font-family: var(--font-display-ar);
  letter-spacing: 0;
}

/* latin labels pick up Anisette's wide poster caps */
.mb-rail span,
.mb-bts strong,
.mb-journal-photo span,
.side-label,
.film-rail span {
  font-family: var(--font-anisette), var(--font-latin);
}

/* ==========================================================================
   PACING — tighter vertical rhythm on every page (heroes keep their own)
   ========================================================================== */
section { padding-block: clamp(1.7rem, 4vw, 3.2rem); }
section.tall { padding-block: clamp(2rem, 5vw, 4rem); }
section.tight { padding-block: clamp(1.1rem, 2.4vw, 1.8rem); }

/* ==========================================================================
   MARQUEE DIVIDERS — giant scroll-driven type strips
   ========================================================================== */
.id-marquee {
  position: relative;
  overflow: hidden;
  padding: 0.7rem 0;
  background: #080806;
  border-block: 1px solid rgba(247, 241, 220, 0.12);
  white-space: nowrap;
}
.id-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  will-change: transform;
  direction: ltr;
}
.id-marquee-track span {
  font-family: var(--font-anisette), var(--font-latin);
  font-size: clamp(1.7rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--paper-3);
  transform: skewX(-7deg);
  display: inline-block;
}
.id-marquee-track span.o {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(247, 241, 220, 0.55);
}
.id-marquee-track i {
  font-style: normal;
  color: var(--id-red);
  font-size: clamp(1rem, 2.4vw, 1.7rem);
}
.id-marquee.tilt { transform: rotate(-1.2deg); margin-block: -0.4rem; }

/* ==========================================================================
   STATS BAND — big counting cards, no dead space
   ========================================================================== */
.id-stats {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.8rem) 0;
  background:
    radial-gradient(circle at 84% 18%, rgba(249, 192, 210, 0.06), transparent 40%),
    radial-gradient(circle at 12% 85%, rgba(58, 111, 183, 0.08), transparent 45%),
    #0d0d0b;
}
.id-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.id-stat {
  position: relative;
  display: grid;
  gap: 0.45rem;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: clamp(160px, 17vw, 230px);
  padding: 1.4rem 1rem;
  background: linear-gradient(165deg, #151512, #0f0f0d);
  border: 1px solid rgba(247, 241, 220, 0.14);
  border-radius: 14px;
  overflow: hidden;
}
.id-stat::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 5px;
}
.id-stat.red::before { background: var(--id-red); }
.id-stat.pink::before { background: var(--id-pink); }
.id-stat.blue::before { background: var(--id-blue); }
.id-stat.gold::before { background: var(--id-gold); }
.id-stat b {
  font-family: var(--font-anisette), var(--font-latin);
  font-size: clamp(3rem, 5.6vw, 4.8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--paper-3);
  transform: skewX(-5deg);
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.id-stat span {
  font-size: 0.95rem;
  color: rgba(247, 241, 220, 0.7);
  line-height: 1.5;
}
.id-stat.red b { color: var(--id-red); }
.id-stat.pink b { color: var(--id-pink); }
.id-stat.blue b { color: #7da7e0; }
.id-stat.gold b { color: var(--id-gold); }

/* mobile flavor of the stats band */
@media (max-width: 760px) {
  .id-stats { padding: 1.1rem 0; }
  .id-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    padding: 0 1.15rem;
  }
  .id-stat {
    min-height: 138px;
    padding: 1rem 0.7rem;
    border-radius: 12px;
  }
  .id-stat b { font-size: 2.7rem; }
  .id-stat span { font-size: 0.78rem; }

  .id-marquee { padding: 0.45rem 0; }
}

/* ==========================================================================
   identity accents woven into the mobile rebuild
   ========================================================================== */
@media (max-width: 760px) {
  /* official red for the lockup stamp + flags */
  .mb-lockup .latin { background: var(--id-red); }
  .mb-flag { background: var(--id-gold); }
  .mb-sticky-note { background: var(--id-gold); }

  /* pink polaroid pin + one pink back face — straight from the palette */
  .mb-mini:nth-child(2) .mb-mini-face.back { background: var(--id-blue); }
  .mb-mini:nth-child(3) .mb-mini-face.back { background: var(--id-green); }

}


/* ==========================================================================
   FIXED TOP BAR — logo + nav links, follows you everywhere (mobile)
   ========================================================================== */
@media (max-width: 760px) {
  .mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 64px;
    padding: 0.5rem 0.95rem;
    background: rgba(7, 8, 6, 0.93);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(247, 241, 220, 0.14);
    direction: rtl;
  }
  .mobile-logo {
    order: 0;
    flex: none;
    width: auto;
    height: 42px;
    display: grid;
    place-items: center;
  }
  .mobile-logo img {
    height: 38px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
  }
  .mobile-links {
    display: flex;
    align-items: center;
    gap: 1.05rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    direction: rtl;
    /* fade only the far edge — the first link stays fully clear of the logo */
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 100%);
  }
  .mobile-links::-webkit-scrollbar { display: none; }
  .mobile-links a {
    font-size: 0.84rem;
    font-weight: 800;
    color: rgba(247, 241, 220, 0.85);
    padding: 0.45rem 0;
  }

  /* inner-page footer (من الرياض، للعالم) tidy on mobile */
  .poster-footer .footer-poster-grid {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
  }
  .poster-footer .footer-lockup img { width: 92px; }
  .poster-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1rem;
  }
}

/* nav logo never escapes the top bar — every page, every size */
.nav .nav-logo img {
  max-height: 46px;
  width: auto !important;
  object-fit: contain;
}

/* ==========================================================================
   ONE BAR EVERYWHERE — the home bar look, unified on every page (desktop)
   ========================================================================== */
@media (min-width: 761px) {
  .nav {
    background: rgba(7, 8, 6, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(247, 241, 220, 0.12);
  }
  .nav.scrolled {
    background: rgba(7, 8, 6, 0.93);
    border-bottom-color: rgba(247, 241, 220, 0.16);
    backdrop-filter: blur(16px);
  }
  .nav .nav-link,
  .nav.scrolled .nav-link,
  .nav.scrolled .nav-logo { color: var(--paper-3); }
  .nav .nav-link.active {
    color: var(--paper-3);
    box-shadow: inset 0 -2px 0 var(--id-red);
  }
}

/* mobile top bar: bigger, 3 pill links + the rest behind the lines button.
   bar (64) + the fixed news tape (30) = 94px of fixed header everywhere */
@media (max-width: 760px) {
  :root { --navh: 94px; }

  .mobile-links { gap: 0.4rem; padding-inline-start: 0.15rem; }
  .mobile-links a {
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(247, 241, 220, 0.8);
    border: 1px solid transparent;
  }
  .mobile-links a.on {
    /* 2026-07-02 softened: the logo is the only heavy red mark in the bar.
       Active = red text + thin underline, not a loud red pill. */
    color: #e0564a;
    font-weight: 900;
    border-radius: 0;
    border-block-end: 2px solid var(--id-red);
    padding-inline: 0.55rem;
  }

  /* the three-lines button + its dropdown */
  .mobile-menu { flex: none; position: relative; }
  .mobile-menu summary {
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    gap: 5px;
    list-style: none;
    cursor: pointer;
    border: 1px solid rgba(247, 241, 220, 0.22);
    border-radius: 9px;
    background: rgba(247, 241, 220, 0.06);
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--paper-3);
  }
  .mobile-menu-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    right: auto;
    width: 190px;
    padding: 0.45rem;
    display: grid;
    background: #14140f;
    border: 1px solid rgba(247, 241, 220, 0.18);
    border-radius: 12px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  }
  .mobile-menu-panel a {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid rgba(247, 241, 220, 0.1);
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--paper-3);
  }
  .mobile-menu-panel a:last-child { border-bottom: 0; }

}

/* ==========================================================================
   THE JOKES TAPE — black strip, white type, fixed under the bar,
   on EVERY page, desktop AND mobile. Drifts RIGHT so Arabic reads naturally.
   ========================================================================== */
.mb-ticker {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 390;
  display: flex;
  align-items: stretch;
  height: 30px;
  background: #000;
  border-block: 0;
  border-bottom: 1px solid rgba(247, 241, 220, 0.18);
  overflow: hidden;
}
.mb-ticker-view {
  overflow: hidden;
  flex: 1;
  direction: ltr;
  display: flex;
  align-items: center;
}
.mb-ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: idTicker 44s linear infinite;
}
.mb-ticker-track span {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  direction: rtl;
}
.mb-ticker-track span::after {
  content: '✶';
  margin: 0 0.85rem;
  color: var(--id-red);
  font-size: 0.6rem;
}
/* right-drift: start pulled back, slide forward */
@keyframes idTicker {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (max-width: 760px) {
  .mb-ticker { top: 64px; }
}

/* ==========================================================================
   FREE-SPINNING REELS — film turning everywhere (injected by fx.js)
   ========================================================================== */
/* the official white-on-black letter logo: screen blend melts the black
   away on our dark surfaces, leaving the white mark floating */
.logo-b,
.footer-lockup img { mix-blend-mode: screen; }

/* the stats band headline */
.id-stats-head {
  text-align: center;
  margin-bottom: clamp(1rem, 2.4vw, 1.8rem);
  padding: 0 var(--pad);
}
.id-stats-head h2 {
  font-family: var(--font-display-ar);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 900;
  color: var(--paper-3);
  line-height: 1.25;
}
.id-stats-head p {
  margin-top: 0.2rem;
  font-size: clamp(0.88rem, 1.6vw, 1.05rem);
  color: rgba(247, 241, 220, 0.65);
}

/* omdah: guaranteed-visible wordmark on its dark ticket */
.mb-ticket.omdah .mb-ticket-wordmark {
  font-family: var(--font-anisette), var(--font-latin);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--paper-3);
}
.brand-ticket.omdah .brand-logo-img {
  filter: brightness(0) invert(1);
  width: 120px;
  min-height: 44px;
  opacity: 1;
}

/* ==========================================================================
   THE FILM RUNS WITH YOU — sprocket strips that move on every scroll,
   on every page (fx.js feeds --gshift from scrollY)
   ========================================================================== */
.mb-perf,
.mb-works::before, .mb-works::after,
.mb-brands::before, .mb-brands::after,
.film-perf,
.poster-page .page-hero::after {
  background-position-x: var(--gshift, 0px);
}
.id-stats::before, .id-stats::after,
.mb-products::before, .mb-products::after,
.products-drop::before, .products-drop::after {
  content: '';
  display: block;
  height: 22px;
  margin: 0.55rem 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 9px, rgba(247, 241, 220, 0.14) 9px 21px, transparent 21px 29px);
  background-position-x: var(--gshift, 0px);
}

/* the real katsu curry — from togarashi's own menu */
.mb-ticket-art.photo,
.brand-ticket.togarashi .ticket-art.katsu {
  background: url('https://firebasestorage.googleapis.com/v0/b/togarashi-sa.appspot.com/o/menu%2F1744822203617_chicken%20katsu%20curry.jpg?alt=media') center / cover no-repeat !important;
  border-radius: 50%;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
}
.mb-ticket-art.photo {
  display: block;
  width: 150px;
  height: 150px;
  margin-top: 0.5rem;
}

/* ==========================================================================
   THE CRAFT SECTION — an old black & white film frame, not a beige box
   ========================================================================== */
@media (max-width: 760px) {
  .mb-craft {
    position: relative;
    margin: 0.9rem 0 !important;
    border-radius: 0 !important;
    background: #0c0c0a !important;
    color: #f0ece0 !important;
    padding: 1.7rem 1.6rem 1.5rem !important;
    overflow: hidden;
    isolation: isolate;
    box-shadow: none !important;
  }
  .mb-craft::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('../images/bts/optimized/IMG_5610-2.jpg') center / cover no-repeat;
    filter: grayscale(1) contrast(1.15) brightness(0.38);
    transform: none;
    writing-mode: initial;
  }
  /* sprocket holes running down both sides — the strip itself */
  .mb-craft::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    writing-mode: initial;
    transform: none;
    letter-spacing: 0;
    color: transparent;
    background:
      repeating-linear-gradient(0deg, transparent 0 10px, rgba(240, 236, 224, 0.4) 10px 22px, transparent 22px 32px) left top / 12px 100% no-repeat,
      repeating-linear-gradient(0deg, transparent 0 10px, rgba(240, 236, 224, 0.4) 10px 22px, transparent 22px 32px) right top / 12px 100% no-repeat;
  }
  .mb-craft > * { position: relative; z-index: 1; }
  .mb-craft h2 { color: #f5f2e8 !important; }
  /* the scribble goes silver — old film, no color */
  .mb-craft .mb-scribble {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 12'%3E%3Cpath d='M2 8 C 25 3, 50 10, 75 6 S 115 4, 128 7' fill='none' stroke='%23f0ece0' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  /* disciplines = frames of the reel */
  .mb-craft .mb-craft-grid { gap: 0.6rem; }
  .mb-craft .mb-craft-grid article {
    border: 1px solid rgba(240, 236, 224, 0.55) !important;
    border-left: 1px solid rgba(240, 236, 224, 0.55) !important;
    border-bottom: 1px solid rgba(240, 236, 224, 0.55) !important;
    background: rgba(5, 5, 4, 0.45);
    padding: 0.85rem 0.8rem 0.9rem;
  }
  .mb-craft .mb-craft-grid b { color: #f5f2e8 !important; }
  .mb-craft .mb-craft-grid span { color: rgba(240, 236, 224, 0.75) !important; }
}
@media (min-width: 761px) {
  .craft-strip {
    position: relative;
    background: #0c0c0a !important;
    isolation: isolate;
    overflow: hidden;
  }
  .craft-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('../images/bts/optimized/IMG_5610-2.jpg') center / cover no-repeat;
    filter: grayscale(1) contrast(1.15) brightness(0.35);
  }
  .craft-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(0deg, transparent 0 12px, rgba(240, 236, 224, 0.35) 12px 26px, transparent 26px 38px) left top / 16px 100% no-repeat,
      repeating-linear-gradient(0deg, transparent 0 12px, rgba(240, 236, 224, 0.35) 12px 26px, transparent 26px 38px) right top / 16px 100% no-repeat;
  }
  .craft-strip > * { position: relative; z-index: 1; }
  .craft-strip .craft-panel { background: transparent !important; color: #f0ece0 !important; }
  .craft-strip .craft-title h2 { color: #f5f2e8 !important; }
  .craft-strip .red-underline { background: #f0ece0 !important; }
  .craft-strip .craft-items article {
    border: 1px solid rgba(240, 236, 224, 0.5) !important;
    background: rgba(5, 5, 4, 0.45);
    padding: 1rem 0.95rem;
  }
  .craft-strip .craft-items h3 { color: #f5f2e8 !important; }
  .craft-strip .craft-items p { color: rgba(240, 236, 224, 0.75) !important; }
  .craft-strip .side-label { color: rgba(240, 236, 224, 0.4) !important; }
}

/* ==========================================================================
   HOME RECOMMENDATIONS (mobile) — unified with the dark site, not beige
   ========================================================================== */
@media (max-width: 760px) {
  .mb-recs {
    background:
      radial-gradient(circle at 20% 16%, rgba(201, 58, 50, 0.12), transparent 42%),
      radial-gradient(circle at 85% 88%, rgba(108, 127, 67, 0.12), transparent 45%),
      #0d0d0b !important;
    color: var(--paper-3) !important;
  }
  .mb-recs-head h2 { color: var(--paper-3) !important; }
  .mb-recs-head p { color: rgba(247, 241, 220, 0.7) !important; }
}

/* ==========================================================================
   PRODUCTS — every card its own color, like the brand tickets
   ========================================================================== */
.mb-product:nth-child(1), .product-card:nth-child(1) {
  background: var(--blue) !important;
}
.mb-product:nth-child(1) *, .product-card:nth-child(1) * { color: #11201f !important; }
.mb-product:nth-child(2), .product-card:nth-child(2) {
  background: var(--id-gold) !important;
}
.mb-product:nth-child(2) *, .product-card:nth-child(2) * { color: #171713 !important; }
.mb-product:nth-child(3), .product-card:nth-child(3) {
  background: #14140f !important;
  border: 1px solid rgba(247, 241, 220, 0.25) !important;
}
.mb-product:nth-child(3) *, .product-card:nth-child(3) * { color: var(--paper-3) !important; }
.mb-product:nth-child(4), .product-card:nth-child(4) {
  background: var(--red) !important;
}
.mb-product:nth-child(4) *, .product-card:nth-child(4) * { color: var(--paper-3) !important; }

/* ==========================================================================
   BRAND TICKETS — filmiyah goes logo-brown, locals goes lizard-green
   ========================================================================== */
.mb-ticket.filmiyah, .brand-ticket.filmiyah {
  background: #7a4e2e !important;
  color: #f3e9d8 !important;
}
.mb-ticket.filmiyah em, .brand-ticket.filmiyah em {
  color: #f3e9d8 !important;
  border-color: rgba(243, 233, 216, 0.5) !important;
}
.mb-ticket.locals, .brand-ticket.locals {
  background: #5e7c3a !important;
  color: #f3efdf !important;
}
.mb-ticket.locals em, .brand-ticket.locals em {
  color: #f3efdf !important;
  border-color: rgba(243, 239, 223, 0.5) !important;
}

/* ==========================================================================
   RECOMMENDATIONS PAGE — plain page, the tickets carry the show
   ========================================================================== */
/* desktop tickets match the approved mobile proportions */
@media (min-width: 761px) {
  .tk-stack { max-width: 660px; gap: 1.4rem; }
  .tk { min-height: 225px; grid-template-columns: 26px minmax(0, 1fr) 30px 148px 26px; --stubx: calc(26px + 148px); }
  .tk-main h2 { font-size: 2.3rem; }
  .tk-stub { gap: 0.5rem; }
}
/* ---- THE TICKET, exactly after the reference: big section with the
   category title (the MOVIE TICKET area), vertical B22 CINEMA on the far
   edge, ENJOY THE PICKS along the perforation, and a small stub holding
   only "تصفح القائمة" + camera + barcode (the BLOCKBUSTER stub). ---- */
.tk-stack {
  display: grid;
  gap: 1.2rem;
  max-width: 900px;
  margin-inline: auto;
}
.tk {
  direction: ltr;
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 36px clamp(132px, 18vw, 176px) 30px;
  align-items: stretch;
  min-height: clamp(138px, 18vw, 176px);
  --stubx: calc(30px + clamp(132px, 18vw, 176px));
  background:
    /* the punched perforation holes along the stub line */
    radial-gradient(circle 3.6px at 4.5px 9px, #d9cfa6 0 3.6px, transparent 4.2px)
      right var(--stubx) top 10px / 9px 18px repeat-y,
    radial-gradient(circle at 16% 24%, rgba(63, 74, 40, 0.06), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(179, 64, 58, 0.05), transparent 38%),
    #efe5c6;
  color: #4a3f26;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.28));
  /* scalloped bites on ALL four edges, like the reference */
  -webkit-mask:
    radial-gradient(circle 4px at 8px 0, transparent 4.5px, #000 5px) top left / 16px 8px repeat-x,
    radial-gradient(circle 4px at 8px 8px, transparent 4.5px, #000 5px) bottom left / 16px 8px repeat-x,
    radial-gradient(circle 4px at 0 8px, transparent 4.5px, #000 5px) left top / 8px 16px repeat-y,
    radial-gradient(circle 4px at 8px 8px, transparent 4.5px, #000 5px) right top / 8px 16px repeat-y,
    linear-gradient(#000 0 0) 7px 7px / calc(100% - 14px) calc(100% - 14px) no-repeat;
  mask:
    radial-gradient(circle 4px at 8px 0, transparent 4.5px, #000 5px) top left / 16px 8px repeat-x,
    radial-gradient(circle 4px at 8px 8px, transparent 4.5px, #000 5px) bottom left / 16px 8px repeat-x,
    radial-gradient(circle 4px at 0 8px, transparent 4.5px, #000 5px) left top / 8px 16px repeat-y,
    radial-gradient(circle 4px at 8px 8px, transparent 4.5px, #000 5px) right top / 8px 16px repeat-y,
    linear-gradient(#000 0 0) 7px 7px / calc(100% - 14px) calc(100% - 14px) no-repeat;
  transition: translate 0.25s var(--ease);
}
.tk:hover { translate: 0 -4px; }
.tk:nth-child(odd) { rotate: 0.4deg; }
.tk:nth-child(even) { rotate: -0.4deg; }

/* far-left vertical brand (CITY CINEMA spot) */
.tk-cinema,
.tk-admit {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: center;
  align-self: center;
  font-family: var(--font-anisette), var(--font-latin);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: rgba(74, 63, 38, 0.65);
  white-space: nowrap;
  overflow: visible;
}
.tk-cinema { margin-left: 12px; }   /* tucked inward, clear of the bites */
.tk-admit { color: #b3403a; font-size: 0.66rem; margin-right: 12px; }

/* the big section */
.tk-main {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.5rem;
  padding: 1rem 0.4rem;
}
.tk-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-anisette), var(--font-latin);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  color: #4a3f26;
}
.tk-top i { font-style: normal; color: #b3403a; font-size: 0.55rem; }
.tk-main h2 {
  direction: rtl;
  text-align: center;
  margin: 0 !important;
  font-family: var(--font-display-ar);
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  font-weight: 900;
  line-height: 1.15;
  color: #3e3320 !important;
}
.tk-row {
  direction: rtl;
  display: flex;
  justify-content: center;
  border-top: 2px solid rgba(74, 63, 38, 0.55);
  margin-top: 0.15rem;
}
.tk-row span {
  padding: 0.32rem 0.85rem;
  border-inline-start: 1.5px solid rgba(74, 63, 38, 0.45);
  font-size: 0.72rem;
  font-weight: 800;
  color: #4a3f26;
  white-space: nowrap;
}
.tk-row span:first-child { border-inline-start: 0; }

/* perforation column text — same proven recipe as the side verticals */
.tk-enjoy {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: center;
  align-self: center;
  font-family: var(--font-anisette), var(--font-latin);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: rgba(74, 63, 38, 0.55);
  white-space: nowrap;
  margin-left: 14px; /* breathing room away from the punch holes */
}

/* the stub: camera, red banner, browse button, barcode */
.tk-stub {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.45rem;
  padding: 0.6rem 0.4rem;
  text-align: center;
}
.tk-stub .tk-cam { width: 36px; height: auto; color: #b3403a; }
.tk-stub i {
  font-style: normal;
  font-family: var(--font-anisette), var(--font-latin);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #efe5c6;
  background: #b3403a;
  padding: 0.16rem 0.55rem;
}
.tk-stub b {
  direction: rtl;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 900;
  color: #3e3320;
}
.tk-bar {
  width: 62px;
  height: 16px;
  background: repeating-linear-gradient(90deg,
    #3e3320 0 2px, transparent 2px 4px,
    #3e3320 4px 7px, transparent 7px 9px,
    #3e3320 9px 10px, transparent 10px 13px);
  opacity: 0.85;
}
.tk-stub em {
  font-style: normal;
  font-family: var(--font-anisette), var(--font-latin);
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  color: rgba(74, 63, 38, 0.75);
}

/* phones: the ticket keeps its shape, just tighter — and dead centered */
@media (max-width: 760px) {
  .tk {
    grid-template-columns: 18px minmax(0, 1fr) 22px 108px 18px;
    min-height: 128px;
    --stubx: calc(18px + 108px);
    width: 100%;
  }
  .tk-main { min-width: 0; padding: 0.85rem 0.2rem; }
  .tk-row { flex-wrap: wrap; }
  .tk-row span { padding: 0.24rem 0.45rem; font-size: 0.6rem; }
  .tk-top { gap: 0.45rem; font-size: 0.53rem; letter-spacing: 0.18em; }
  .tk-stub { padding: 0.5rem 0.2rem; }
  .tk-stub .tk-cam { width: 26px; }
  .tk-bar { width: 52px; }
  .ip-recs .wrap { padding-inline: 0.9rem; }
}

/* no red line behind the section heading on the tickets page */
.ip-recs .ip-sec-head h2::before,
.ip-recs .ip-sec-head h2::after,
.ip-recs .ip-sec-head::before,
.ip-recs .ip-sec-head::after { display: none !important; }

/* the lists page rows */
.list-block {
  max-width: 820px;
  margin: 0 auto 1.6rem;
  background: #fcf9ef;
  color: #1c2113;
  padding: 1.2rem 1.3rem 1.1rem;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}
.list-block:nth-child(odd) { rotate: 0.4deg; }
.list-block:nth-child(even) { rotate: -0.4deg; }
.list-block h2 {
  font-family: var(--font-display-ar);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: #1c2113;
  margin: 0 0 0.3rem;
}
.list-block > span {
  font-family: var(--font-anisette), var(--font-latin);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  color: var(--id-red);
}
.list-block ul {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.list-block li {
  padding: 0.6rem 0.85rem;
  background: rgba(63, 74, 40, 0.06);
  border-right: 3px solid var(--id-red);
  font-weight: 700;
  font-size: 0.95rem;
}

/* desktop recommendations stay dead still (the approved original look) */
@media (min-width: 761px) {
  .recommend-poster .main-rec,
  .recommend-poster .mini-polaroid,
  .recommend-poster .sticky-small {
    animation: none !important;
  }
}

/* reduced motion: tapes freeze */
@media (prefers-reduced-motion: reduce) {
  .id-marquee-track, .mb-ticker-track { animation: none !important; }
}

/* ==========================================================================
   BRAND TICKETS — deep, dark, logo-true colors (easy on the eyes)
   ========================================================================== */
.mb-ticket.togarashi, .brand-ticket.togarashi { background: #6e1b14 !important; color: #f0e7d4 !important; }
.mb-ticket.togarashi b, .mb-ticket.togarashi small,
.brand-ticket.togarashi b, .brand-ticket.togarashi small { color: #f0e7d4 !important; }
.mb-ticket.togarashi em, .brand-ticket.togarashi em { color: #f0e7d4 !important; border-color: rgba(240, 231, 212, 0.5) !important; }

.mb-ticket.filmiyah, .brand-ticket.filmiyah { background: #3c2817 !important; color: #f0e7d4 !important; }
.mb-ticket.filmiyah b, .mb-ticket.filmiyah small,
.brand-ticket.filmiyah b, .brand-ticket.filmiyah small { color: #f0e7d4 !important; }
.mb-ticket.filmiyah em, .brand-ticket.filmiyah em { color: #f0e7d4 !important; border-color: rgba(240, 231, 212, 0.5) !important; }

.mb-ticket.locals, .brand-ticket.locals { background: #25401d !important; color: #eee9d6 !important; }
.mb-ticket.locals b, .mb-ticket.locals small,
.brand-ticket.locals b, .brand-ticket.locals small { color: #eee9d6 !important; }
.mb-ticket.locals em, .brand-ticket.locals em { color: #eee9d6 !important; border-color: rgba(238, 233, 214, 0.5) !important; }

.mb-ticket.omdah, .brand-ticket.omdah {
  background: linear-gradient(150deg, #1a1a20, #060608 55%, #121218) !important;
  color: var(--paper-3) !important;
  border: 1px solid rgba(247, 241, 220, 0.2) !important;
}
.mb-ticket.omdah em, .brand-ticket.omdah em { color: var(--paper-3) !important; border-color: rgba(247, 241, 220, 0.4) !important; }

/* ==========================================================================
   PRODUCTS — the same ticket family as the brands (unified design)
   ========================================================================== */
.mb-product, .product-card {
  position: relative;
  display: grid !important;
  gap: 0.3rem;
  justify-items: center;
  text-align: center;
  padding: 1.3rem 0.9rem 1rem !important;
  border-radius: 14px !important;
  border: 0 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden;
}
.mb-product:nth-child(1), .product-card:nth-child(1),
.mb-product:nth-child(2), .product-card:nth-child(2) {
  background: #25401d !important; /* locals — lizard green, dark */
}
.mb-product:nth-child(3), .product-card:nth-child(3),
.mb-product:nth-child(4), .product-card:nth-child(4) {
  background: linear-gradient(150deg, #17171c, #070709 55%, #101014) !important; /* smfn — gloss black */
  border: 1px solid rgba(247, 241, 220, 0.16) !important;
}
.mb-product *, .product-card * { color: #ece7d6 !important; }
.mb-product span, .product-card .product-card span { letter-spacing: 0.18em; }
.mb-product span, .product-card span {
  font-family: var(--font-anisette), var(--font-latin);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: rgba(236, 231, 214, 0.7) !important;
}
.mb-product b, .product-card strong {
  position: relative;
  width: 100%;
  margin-top: 0.4rem;
  padding-top: 0.55rem;
  border-top: 2px dashed rgba(236, 231, 214, 0.45);
  font-weight: 900;
}
.mb-product b::before, .product-card strong::before,
.mb-product b::after, .product-card strong::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0a0a08;
}
.mb-product b::before, .product-card strong::before { right: -1.5rem; }
.mb-product b::after, .product-card strong::after { left: -1.5rem; }

/* ==========================================================================
   DESKTOP CINEMA PALACE — the whole desktop becomes an old movie house
   ========================================================================== */
@media (min-width: 761px) {
  /* the room: grain + vignette over everything, under the bars */
  html::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0.55;
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.10'/%3E%3C/svg%3E"),
      radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.42) 100%);
  }

  /* the velvet curtains framing the opening scene */
  body.poster-home .film-rail { display: none; }
  body.poster-home .poster-hero::before,
  body.poster-home .poster-hero::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 92px;
    z-index: 4;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 85%),
      repeating-linear-gradient(90deg, #4e1210 0 13px, #6e1d18 13px 25px, #3c0d0b 25px 39px);
    box-shadow: inset -20px 0 34px rgba(0, 0, 0, 0.65);
  }
  body.poster-home .poster-hero::before { left: 0; }
  body.poster-home .poster-hero::after { right: 0; transform: scaleX(-1); }

  /* a slow spotlight sweeping the hall */
  body.poster-home .hero-bg::after {
    content: '';
    position: absolute;
    inset: -25%;
    pointer-events: none;
    mix-blend-mode: screen;
    background: conic-gradient(from 8deg at 50% -12%,
      transparent 0 38deg, rgba(255, 238, 190, 0.12) 48deg, transparent 58deg 360deg);
    animation: idSpot 8s ease-in-out infinite alternate;
  }

  /* the marquee sign: the main title in lights */
  body.poster-home .poster-title-block {
    position: relative;
    padding: 2.4rem 3.4rem 2.1rem;
    background: linear-gradient(180deg, #14130e, #0a0a07);
    border: 3px solid #2e2b1f;
    border-radius: 18px;
    box-shadow:
      0 0 0 6px #100f0b,
      0 34px 90px rgba(0, 0, 0, 0.65),
      inset 0 0 46px rgba(0, 0, 0, 0.55);
  }
  body.poster-home .poster-title-block::before,
  body.poster-home .poster-title-block::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    height: 10px;
    background: radial-gradient(circle 3.4px at 10px 5px, #ffe9a8 0 3px, rgba(255, 233, 168, 0.18) 4px, transparent 5px) 0 0 / 26px 10px repeat-x;
    animation: idBulbs 1.6s steps(2) infinite;
  }
  body.poster-home .poster-title-block::before { top: 9px; }
  body.poster-home .poster-title-block::after { bottom: 9px; animation-delay: 0.8s; }

  /* NOW SHOWING: the featured film gets a lit lobby frame */
  body.poster-home .hero-feature {
    border: 9px solid #14130e;
    outline: 2px solid rgba(247, 241, 220, 0.4);
    outline-offset: -13px;
    border-radius: 10px;
    box-shadow: 0 0 44px rgba(255, 183, 0, 0.12), 0 26px 64px rgba(0, 0, 0, 0.6);
  }
  body.poster-home .hero-feature-copy span {
    background: var(--id-red);
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 3px;
    letter-spacing: 0.06em;
    box-shadow: 0 0 18px rgba(238, 48, 38, 0.65);
    animation: idNeon 2.4s ease-in-out infinite;
  }

  /* lobby poster frames */
  body.poster-home .work-poster {
    border: 12px solid #161510;
    outline: 2px solid rgba(247, 241, 220, 0.3);
    outline-offset: -16px;
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  }
  body.poster-home .work-poster:hover {
    transform: translateY(-8px) rotate(-0.4deg);
    box-shadow: 0 38px 92px rgba(0, 0, 0, 0.66), 0 0 54px rgba(255, 183, 0, 0.1);
  }

  /* theatre plaque rows of little lights under section titles */
  body.poster-home .poster-section-head h2 { position: relative; padding-bottom: 0.6rem; }
  body.poster-home .poster-section-head h2::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 0;
    width: 128px;
    height: 6px;
    background: radial-gradient(circle 2.4px at 7px 3px, rgba(255, 233, 168, 0.85) 0 2.2px, transparent 3px) 0 0 / 18px 6px repeat-x;
    animation: idBulbs 1.6s steps(2) infinite;
  }
}
@keyframes idSpot { to { transform: rotate(26deg); } }
@keyframes idBulbs { 50% { opacity: 0.4; } }
@keyframes idNeon { 50% { box-shadow: 0 0 6px rgba(238, 48, 38, 0.35); } }

/* THE END — the closing card before the credits */
.the-end {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  margin-bottom: 1.7rem;
}
.the-end b {
  font-family: var(--font-display-ar);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 900;
  color: var(--paper-3);
  border: 3px double rgba(247, 241, 220, 0.5);
  border-radius: 50%;
  padding: 1.5rem 2.6rem 1.7rem;
  line-height: 1;
}
.the-end span {
  font-family: var(--font-anisette), var(--font-latin);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(247, 241, 220, 0.55);
}

/* 2026-07-02 fix: the official mark is white-on-black; the invert filter was
   flattening it into a white box at the top (unscrolled) nav state.
   Screen blending alone melts the black away — on every dark bar. */
.poster-nav .nav-logo img.logo-b,
.nav-over-dark .nav:not(.scrolled) .nav-logo img.logo-b,
.poster-page .nav:not(.scrolled) .nav-logo img.logo-b { filter: none; }