/* ==========================================================================
   ULTRA CARNE - THE STARK FRAKAS GRID BLACK EDITION (STYLE SYSTEM)
   ========================================================================== */

/* Font Definitions */
@font-face {
  font-family: 'Bernard MT Condensed';
  src: url('./Bernard MT Condensed Regular/Bernard MT Condensed Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Exclusive Typography Rule: Default is Bernard MT Condensed styled fine and delicate */
* {
  font-family: 'Bernard MT Condensed', 'Impact', 'Arial Black', sans-serif !important;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background-color: transparent;
  user-select: none;
  -webkit-user-drag: none;
}

html, body {
  background-color: #000000;
  color: #ffffff;
  overflow-x: hidden;
  scroll-behavior: smooth;
  width: 100%;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #000000;
  border-left: 1px solid #ffffff;
}
::-webkit-scrollbar-thumb {
  background: #ffffff;
  border: 1px solid #000000;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

/* ==========================================================================
   STICKY 7-COLUMN NAVIGATION GRID (MINIMAL FLOATING SYSTEM)
   ========================================================================== */

.nav-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: transparent;
  padding: 30px 40px;
  transition: background 0.3s ease;
}

.nav-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-hamburger {
  display: none;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-cell {
  font-family: 'Avenir', 'Avenir Next', 'Montserrat', 'Segoe UI', Arial, sans-serif !important;
  border-right: none;
  padding: 0;
  text-align: center;
  text-decoration: none;
  font-size: 11px; /* Smaller, delicate tracking size */
  letter-spacing: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 300;
}

.nav-cell:hover {
  background: transparent;
  color: #ffffff !important;
  opacity: 1;
}

.nav-cell.logo {
  font-family: 'Bernard MT Condensed', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 20px; /* Elegant display logo size */
  justify-content: flex-start;
  padding-left: 0;
  letter-spacing: 5px;
  color: #ffffff !important;
  font-weight: normal;
  opacity: 1;
}

@media (max-width: 1024px) {
  .nav-grid {
    flex-direction: column;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.95);
    padding: 20px 30px;
    position: fixed;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .nav-header-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10000;
    outline: none;
  }
  
  .nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  }
  
  /* Hamburger turning into an X */
  .nav-hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 0; /* Collapsed Drawer */
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.85, 0, 0.15, 1), padding 0.4s ease;
    padding: 0;
    gap: 0;
  }
  
  .nav-menu.open {
    max-height: 420px; /* Expanded smoothly */
    padding: 25px 0 15px 0;
  }
  
  .nav-menu .nav-cell {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
    letter-spacing: 4px;
    justify-content: center;
  }
  
  .nav-menu .nav-cell:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   SITE CONTAINER
   ========================================================================== */

.site-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 0; /* Hero is 100vh fullscreen background */
  border-left: none;
  border-right: none;
}

@media (max-width: 1024px) {
  .site-container {
    padding-top: 0;
    border-left: none;
    border-right: none;
  }
}

/* ==========================================================================
   SECTION RULES
   ========================================================================== */

.zine-section {
  width: 100%;
  position: relative;
  background-color: #000000;
}

.section-title {
  font-size: 24px; /* Thinner, delicate, smaller */
  letter-spacing: 8px; /* Elegant wide tracking */
  font-weight: normal;
  padding: 25px 40px;
  border-bottom: none;
  text-transform: uppercase;
  background-color: #000000;
  opacity: 0.8;
}

/* ==========================================================================
   1. SECTION — ULTRA CARNE (Hero Opening - Fullpage Overlay Video)
   ========================================================================== */

.hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  border-bottom: none;
}

.hero-header-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  width: 100%;
  padding: 0;
  border-bottom: none;
}

.hero-header-box h1 {
  font-family: 'Bernard MT Condensed', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 11vw;
  line-height: 1.0;
  letter-spacing: 12px;
  text-transform: uppercase;
  color: #000000 !important; /* Pure black text superimposed over hero video */
  margin: 0;
  text-shadow: none;
}

.hero-video-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #000000;
  cursor: pointer;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none;
}

.hero-video.active {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   2. SECTION — ABOUT (Dual-Column Art Manifesto & Biography)
   ========================================================================== */

#section-about {
  background-color: #000000;
  display: flex;
  flex-direction: column;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 80px 60px;
  background-color: #000000;
}

.about-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.about-text {
  font-family: 'Avenir', 'Avenir Next', 'Montserrat', 'Segoe UI', Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 300;
  text-align: justify;
}

@media (max-width: 1024px) {
  .about-grid {
    gap: 50px;
    padding: 60px 40px;
  }
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 50px 30px;
  }
  
  .about-text {
    font-size: 13px;
    line-height: 1.6;
    text-align: left; /* Better reading layout on very narrow viewports */
  }
}

/* ==========================================================================
   3. SECTION — FANZINE (Tactile 3D Page-Flipping Book Mockup)
   ========================================================================== */

#section-fanzine {
  border-bottom: none;
  display: flex;
  flex-direction: column;
}

.fanzine-mockup-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  background: #000000;
  border-bottom: none;
  overflow: hidden; /* Prevent 3D rotations from causing body scrollbars */
}

.fanzine-book-container {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1.414 / 1; /* Fixed landscape spread aspect ratio (A4 landscape) */
  border: none;
  position: relative;
  background: #000000;
  perspective: 2000px; /* High perspective depth for 3D realism */
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 30px 70px rgba(0,0,0,0.8);
  will-change: transform;
}

/* Horizontal shifting to center the cover or back cover singly */
.fanzine-book-container.closed-cover {
  transform: translateX(-25%);
}

.fanzine-book-container.open-spread {
  transform: translateX(0);
}

.fanzine-book-container.closed-back {
  transform: translateX(25%);
}

.fanzine-spine {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  z-index: 999; /* Always sits directly in the center fold line */
  pointer-events: none;
}

/* Individual physical sheets (leaves) */
.book-leaf {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
  will-change: transform;
}

/* Front & Back sides of each leaf */
.leaf-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.leaf-front {
  z-index: 2;
  transform: rotateY(0deg);
  border-right: none;
}

.leaf-back {
  transform: rotateY(180deg);
  border-left: none;
}

.leaf-side img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: contrast(1.1) brightness(0.95);
  pointer-events: none; /* Let clicks pass through to parent leaves */
  transition: filter 0.3s ease;
}

.leaf-side:hover img {
  filter: contrast(1.2) brightness(1.02);
}

.fanzine-arrows {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  z-index: 100;
}

.arrow-btn {
  background: #000000;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px 30px;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.arrow-btn:hover {
  background: #ffffff;
  color: #000000 !important;
}

.purchase-button-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #000000;
  border-top: none;
  padding: 40px 20px;
}

.btn-acquista {
  width: 100%;
  max-width: 500px; /* Centered framed purchase button */
  padding: 18px 30px;
  font-size: 20px;
  letter-spacing: 6px;
  background: #000000;
  border: 1px solid #ffffff; /* Frame border */
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-transform: uppercase;
  font-weight: normal;
}

.btn-acquista:hover {
  background: #ffffff;
  color: #000000 !important;
}

.purchase-note {
  font-family: 'Bernard MT Condensed', sans-serif !important;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 20px;
  text-align: center;
  text-transform: uppercase;
  max-width: 600px;
  line-height: 1.5;
  pointer-events: none;
}

/* Responsive Portrait Mobile View Fallback */
@media (max-width: 768px) {
  .fanzine-book-container {
    max-width: 450px;
    aspect-ratio: 0.707 / 1 !important; /* Portrait A4 ratio for mobile */
    transform: none !important; /* Disable dynamic translations */
    border: none;
  }
  
  .fanzine-book-container.closed-cover,
  .fanzine-book-container.open-spread,
  .fanzine-book-container.closed-back {
    transform: none !important;
  }

  .fanzine-spine {
    display: none; /* Hide spine fold in portrait page view */
  }

  .book-leaf {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
    display: none;
  }

  .book-leaf.active-leaf {
    display: block !important;
  }

  /* Single portrait page toggle states on mobile */
  .book-leaf.active-leaf .leaf-front.mobile-visible {
    display: flex !important;
    transform: none !important;
    width: 100% !important;
    z-index: 10;
  }

  .book-leaf.active-leaf .leaf-front.mobile-hidden {
    display: none !important;
  }

  .book-leaf.active-leaf .leaf-back.mobile-visible {
    display: flex !important;
    transform: none !important;
    width: 100% !important;
    z-index: 10;
  }

  .book-leaf.active-leaf .leaf-back.mobile-hidden {
    display: none !important;
  }
}

/* ==========================================================================
   3. SECTION — VIDEOS (Landscape Autoplay Panels)
   ========================================================================== */

#section-videos {
  border-bottom: none;
}

.horizontal-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

.video-tile {
  width: 100%;
  height: 45vh;
  border-right: none;
  overflow: hidden;
  background: #000000;
}

.video-tile:last-child {
  border-right: none;
}

.video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.15) brightness(0.9);
}

@media (max-width: 1024px) {
  .horizontal-videos-grid {
    grid-template-columns: 1fr;
  }
  .video-tile {
    border-right: none;
    border-bottom: none;
    height: 35vh;
  }
  .video-tile:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   4. SECTION — MONITORS (CRT vertical exhibition)
   ========================================================================== */

#section-monitors {
  border-bottom: none;
}

.crt-wall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

.crt-monitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 30px;
  border-right: none;
  background: #000000;
}

.crt-monitor:last-child {
  border-right: none;
}

.monitor-cabinet {
  width: 100%;
  max-width: 300px;
  height: 530px; /* Taller, elegant aspect ratio */
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15); /* Sleek, thin Frakas-style grid border line */
  padding: 0; /* Cover screen borderless */
  position: relative;
}

.monitor-screen-bezel {
  width: 100%;
  height: 100%;
  background: #000000;
  border: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monitor-crt-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monitor-crt-screen video {
  position: absolute;
  object-fit: cover;
}

.video-rotated-90 {
  transform: rotate(90deg);
  width: 530px !important; /* Original width equals container height */
  height: 300px !important; /* Original height equals container width */
  object-fit: cover;
  transform-origin: center;
}

.video-rotated-270 {
  transform: rotate(270deg);
  width: 530px !important;
  height: 300px !important;
  object-fit: cover;
  transform-origin: center;
}

.monitor-glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
  z-index: 5;
}

.monitor-label {
  font-size: 15px; /* Thinner, delicate, smaller */
  letter-spacing: 5px;
  margin-top: 20px;
  text-transform: uppercase;
  opacity: 0.8;
  font-weight: normal;
}

@media (max-width: 1024px) {
  .crt-wall-grid {
    grid-template-columns: 1fr;
  }
  .crt-monitor {
    border-right: none;
    border-bottom: none;
    padding: 40px 20px;
  }
  .crt-monitor:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   5. SECTION — EVENT (Gapless photographic grid)
   ========================================================================== */

#section-event {
  border-bottom: none;
}

.event-photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

.photo-tile {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-right: none;
  border-bottom: none;
  overflow: hidden;
  background: #000000;
  cursor: pointer;
}

.photo-tile:nth-child(4n) {
  border-right: none;
}

.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.photo-tile:hover img {
  transform: scale(1.05);
  filter: contrast(1.15) brightness(1.05);
}

@media (max-width: 1024px) {
  .event-photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .photo-tile:nth-child(4n) {
    border-right: none;
  }
  .photo-tile:nth-child(3n) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .event-photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .photo-tile:nth-child(3n) {
    border-right: none;
  }
  .photo-tile:nth-child(2n) {
    border-right: none;
  }
}

/* ==========================================================================
   6. SECTION — ARCHIVE (Museum fanzine pages minimal grid)
   ========================================================================== */

#section-archive {
  border-bottom: none;
}

.archive-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

.archive-tile {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-right: none;
  border-bottom: none;
  overflow: hidden;
  background: #000000;
  cursor: pointer;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.archive-tile:nth-child(3n) {
  border-right: none;
}

.archive-tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.2) brightness(0.9);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.archive-tile:hover img {
  transform: scale(1.03);
  filter: grayscale(0) contrast(1.1) brightness(1);
}

@media (max-width: 1024px) {
  .archive-photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .archive-tile:nth-child(3n) {
    border-right: none;
  }
  .archive-tile:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .archive-photos-grid {
    grid-template-columns: 1fr;
  }
  .archive-tile {
    border-right: none;
  }
}

/* ==========================================================================
   7. SECTION — CONTACT (Brutalist footer blocks)
   ========================================================================== */

#section-contact {
  background: #000000;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

.contact-cell {
  border-right: none;
  padding: 30px;
  text-align: center;
  text-decoration: none;
  font-size: 18px; /* Thinner, delicate, smaller */
  letter-spacing: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  border-top: none;
  border-left: none;
  border-bottom: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-transform: uppercase;
  font-weight: normal;
}

.contact-cell:last-child {
  border-right: none;
}

.contact-cell:hover {
  background: #ffffff;
  color: #000000 !important;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-cell {
    border-right: none;
    border-bottom: none;
  }
  .contact-cell:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   LIGHTBOX INSPECTION MODAL
   ========================================================================== */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  cursor: pointer;
  padding: 40px;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: none;
}

.lightbox.open {
  display: flex;
}

/* ==========================================================================
   MINIMAL PURCHASE OVERLAY MODAL
   ========================================================================== */

.purchase-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  padding: 20px;
}

.purchase-modal.open {
  display: flex;
}

.modal-content {
  background: #000000;
  border: 1px solid #ffffff;
  width: 100%;
  max-width: 500px;
  padding: 40px;
  position: relative;
}

.form-group {
  margin-bottom: 25px;
}

.form-group input {
  width: 100%;
  background: #000000;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 15px;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  outline: none;
  transition: background 0.15s, color 0.15s;
}

.form-group input::placeholder {
  color: #888888;
}

.form-group input:focus {
  background: #ffffff;
  color: #000000 !important;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.modal-submit-btn {
  flex-grow: 1;
  background: #000000;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 15px;
  font-size: 22px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-transform: uppercase;
}

.modal-submit-btn:hover {
  background: #ffffff;
  color: #000000 !important;
}

.modal-close-btn {
  background: #000000;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 15px 25px;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.modal-close-btn:hover {
  background: #ffffff;
  color: #000000 !important;
}

/* ==========================================================================
   TRANSITION CURTAIN WIPE
   ========================================================================== */

#transition-curtain {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  border-top: none;
  border-bottom: none;
  z-index: 99999;
  pointer-events: none;
}