/* Force side-by-side bands when content area is landscape, regardless of device orientation */
body.content-landscape.article-anarch .dynamic-content#Anarch {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: stretch !important;
  column-gap: 24px !important;
}

body.content-landscape.article-anarch #Anarch .anarch-visual {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* override right-justify */
}

body.content-landscape.article-anarch #Anarch .anarch-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Ensure no right-shift remains in content-landscape mode */
body.content-landscape.article-anarch #Anarch .anarch-visual { justify-items: center !important; }
body.content-landscape.article-anarch #Anarch .anarch-visual .three-embed { margin-left: 0 !important; margin-right: 0 !important; }

/* Intro: side-by-side when content area is landscape */
body.content-landscape.article-intro .content-area .intro-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  column-gap: 24px !important;
}
body.content-landscape.article-intro .intro-visual { grid-column: 1 !important; display: grid !important; place-items: center !important; }
body.content-landscape.article-intro .intro-copy   { grid-column: 2 !important; }

/* Reel: side-by-side when content area is landscape */
body.content-landscape.article-reel #reel .reel-grid,
body.content-landscape.article-reel .content-area .reel-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  column-gap: 24px !important;
}
body.content-landscape.article-reel .reel-video-container { grid-column: 1 !important; }
body.content-landscape.article-reel .reel-copy { grid-column: 2 !important; }

/* Projects: side-by-side when content area is landscape */
body.content-landscape.article-projects .projects-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  column-gap: 24px !important;
}
body.content-landscape.article-projects .projects-visual { grid-column: 1 !important; }
body.content-landscape.article-projects .projects-text   { grid-column: 2 !important; }

/* Contact: treat as single column but center blocks; no right-shift */
body.content-landscape.article-contact .contact-copy { margin: 0 auto !important; }
/* Phase 3: lock page scroll, allow momentum inside content area */
body.phase3,
html.phase3 {
  height: 100%;
  overflow: hidden;
}

body.phase3 { overscroll-behavior: none; }

/* Mobile Landing Page: Prevent scrolling on Phase1/Phase2 */
@media (max-width: 1024px) {
  body.phase1,
  body.phase2,
  html.phase1,
  html.phase2 {
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Prevent mobile bounce/scroll on landing page */
  body.phase1,
  body.phase2 {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }
}

/* Phase 3: lock page scroll, allow momentum inside content area */
body.phase3,
html.phase3 {
  height: 100%;
  overflow: hidden;
}
body.phase3 { 
  overscroll-behavior: none; 
}

/* Keep scroll containment hints only; let the canonical .content-area size/position via vars */
body.phase3 .content-area {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Keep the close X fixed and stable */
body.phase3 .ankh-circle {
  position: fixed !important;
  transform: none !important;
}

/* While in Phase 3, prevent banner from reacting to hover/pointer */
body.phase3 #header .content {
  pointer-events: none !important;
}
/* =========================
   Production Debug Defaults
   Hide all debug layers by default; enable with body.debug-enabled:not(.content-hidden).phase-3
   ========================= */
.debug-page-areas,
.debug-banner-elements,
.debug-trimmed-elements,
.debug-content-elements,
.content-area-debug,
.content-area-debug-visual {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Show only when debug-on AND not hidden by phase/content flags */
body.debug-enabled:not(.content-hidden).phase-3:not(.phase1-hidden) .debug-page-areas,
body.debug-enabled:not(.content-hidden).phase-3:not(.phase1-hidden) .debug-banner-elements {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.debug-enabled:not(.content-hidden).phase-3:not(.phase2-hidden) .debug-trimmed-elements {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Old debug system removed - using new unified system */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

/* ------------------------------------------------------------------ */
/* Reset / Base                                                        */
/* ------------------------------------------------------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: 'Open Sans', sans-serif;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
  font-family: 'Open Sans', sans-serif;
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  background: #1b1f22;
  -webkit-text-size-adjust: none;
  /* Prevent ghosting and trailing during window resize */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: ''; }

table { border-collapse: collapse; border-spacing: 0; }

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

@-ms-viewport { width: device-width; }
@media (max-width:480px){ html, body { min-width:320px; } }

body.is-preload *, body.is-preload *::before, body.is-preload *::after {
  animation: none !important;
  transition: none !important;
}



/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */

:root {
  --banner-scale: 0.8;
  --global-scale: 1.0;
  --menu-ankh-scale: 0.9;
  --copyright-scale: 0.9;
  --transition-delay: 0.3s;
  
  /* Default positioning values to prevent menu offset on initial load */
  --nav-area-top: 50vh;
  --nav-area-height: 60px;
  --ankh-area-top: 50vh;
  --ankh-area-height: 60px;
  
  /* OOMAA Brand Colors */
  --oomaa-pink: #ED1F83;
  
  /* Logo scaling relationships */
  --oomaa-logo-height: 150px;
  --japanese-logo-height: 112.5px; /* 75% of OOMAA logo */
  --ankh-height: 112.5px; /* Same as Japanese logo */
  
  
  /* Border-First Layout System */
  --safe-zone-left: 5vw;
  --safe-zone-top: 5vh;
  --safe-zone-width: 95vw; /* Increased from 90vw to allow larger videos */
  --safe-zone-height: 90vh;
  --safe-zone-max-width: 95vw; /* Increased from 90vw to allow larger videos */
  --safe-zone-max-height: 90vh;
  
  /* Page Areas (Stage 1) - Grey debug areas */
  --page-top-section-top: 5vh;
  --page-top-section-height: 22.5vh;
  --page-banner-section-top: 27.5vh;
  --page-banner-section-height: 45vh;
  --page-bottom-section-top: 72.5vh;
  --page-bottom-section-height: 22.5vh;
  --page-copyright-top: 96vh;
  --page-copyright-height: 4vh;
  
  /* Current Areas (Stage 3) - Colored debug areas */
  --top-section-top: 5vh;
  --top-section-height: 22.5vh;
  --banner-section-top: 27.5vh;
  --banner-section-height: 45vh;
  --bottom-section-top: 72.5vh;
  --bottom-section-height: 22.5vh;
  --copyright-top: 96vh;
  --copyright-height: 4vh;
  
  /* Banner element areas */
  --banner-element-1-top: var(--banner-section-top);
  --banner-element-1-height: 22.5vh;
  --banner-element-2-top: calc(var(--banner-section-top) + var(--banner-element-1-height));
  --banner-element-2-height: 13.5vh;
  --banner-element-3-top: calc(var(--banner-section-top) + var(--banner-element-1-height) + var(--banner-element-2-height));
  --banner-element-3-height: 9vh;
  
  /* Individual banner element area heights (for debug display) */
  --oomaa-area-height: 22.5vh;
  --japanese-area-height: 13.5vh;
  --tagline-area-height: 9vh;
  
  /* Debug borders */
  --debug-border-top: 1px dashed rgba(255, 255, 0, 0.9);
  --debug-border-banner: 1px dashed rgba(0, 128, 0, 0.9);
  --debug-border-bottom: 1px dashed rgba(255, 0, 0, 0.9);
  --debug-border-copyright: 1px dashed rgba(128, 0, 128, 0.9);
  
  /* Phase 3 Layout Variables */
  --phase3-ankh-area-top: 0px;
  --phase3-ankh-area-height: 0px;
  --phase3-content-area-top: 0px;
  --phase3-content-area-height: 0px;
  --phase3-nav-area-top: 0px;
  --phase3-nav-area-height: 0px;
  
  /* Phase 3 Ankh Transformation */
  --ankh-phase3-scale: 0.75;
  --ankh-phase3-hover-scale: 1.0;
  --ankh-phase3-bg-blur: 10px; /* Blur effect for background */
  --ankh-phase3-symbol-color: #ffffff; /* White */
  
  /* Phase 3 Content Area */
--content-area-bg: rgba(0, 0, 0, 0.3);
--content-area-border: 1px solid rgba(255, 255, 255, 0.2);

/* Resize optimization - disable transitions during resize to prevent flickering */
--resize-transition-duration: 0.3s;

/* Optimize transitions during resize to prevent flickering */
body.resizing * {
	transition: none !important;
	animation: none !important;
}

/* Smooth transitions when not resizing */
body:not(.resizing) .content-area {
	transition: all var(--resize-transition-duration) ease-in-out;
}

body:not(.resizing) .ankh-circle,
body:not(.resizing) nav {
	transition: all var(--resize-transition-duration) ease-in-out;
}
}

html { font-size: 16pt; }
@media (max-width:1680px){ html { font-size: 12pt; } }
@media (max-width:736px){ html { font-size: 11pt; } }
@media (max-width:360px){ html { font-size: 10pt; } }

body, input, select, textarea { 
  color: #ffffff; 
  font-family: 'Open Sans', sans-serif; 
  font-weight: 400; 
  font-size: 1rem; 
  line-height: 1.65; 
}

a {
  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-bottom-color .2s ease-in-out;
  border-bottom: dotted 1px rgba(255,255,255,.5);
  text-decoration: none;
  color: inherit;
}

a:hover { 
  border-bottom-color: transparent; 
  color: #ffffff !important; 
}

strong, b { 
  color: #ffffff; 
  font-weight: 600; 
}

em, i { 
  font-style: italic; 
}

p { 
  margin: 0 0 2rem 0; 
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: .2rem;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 
  color: inherit; 
  text-decoration: none; 
}

h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
  border-bottom: none !important; /* Remove underline */
  width: max-content;
  padding-bottom: 0;
  margin: 0 0 0.5rem 0;
  /* Responsive sizing: maximum current size, minimum 50% of current size */
  font-size: clamp(1.4rem, 4vw, 2.8rem); /* Scales from 50% of current size (1.4rem) to current size (2.8rem) */
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-family: 'Open Sans', sans-serif;
}

/* ------------------------------------------------------------------ */
/* Image                                                              */
/* ------------------------------------------------------------------ */

.image {
  border-radius: 4px;
  border: 0;
  display: inline-block;
  position: relative;
}

.image img {
  border-radius: 4px;
  display: block;
}

.image.left,
.image.right {
  max-width: 40%;
}

.image.left {
  float: left;
  margin: 0 1.5rem 1rem 0;
  top: .25rem;
}

.image.right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  top: .25rem;
}

.image.fit {
  display: block;
  margin: 0 0 2rem 0;
  width: 100%;
}



/* ------------------------------------------------------------------ */
/* Background                                                         */
/* ------------------------------------------------------------------ */

#bg {
  transform: scale(1.0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#bg::before, #bg::after { 
  content:''; 
  display:block; 
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
}

#bg::before {
  transition: background-color 2.5s ease-in-out; 
  transition-delay:.75s;
  background-image: linear-gradient(to top, rgba(25,22,19,.85), rgba(19,21,25,.85)), url("../../images/overlay.png");
  background-size: auto, 256px 256px;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  z-index:2;
}

#bg::after {
  transform: scale(1.325);
  transition: transform .325s ease-in-out, filter .325s ease-in-out;
  background-image: url("../../images/bg_dark.jpg");
  background-position:center; 
  background-size:cover; 
  background-repeat:no-repeat;
  z-index:1;
}

body.is-preload #bg::before { 
  background-color:#000; 
}

/* ------------------------------------------------------------------ */
/* Wrapper                                                             */
/* ------------------------------------------------------------------ */

#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------------ */
/* Header / Landing Page                                              */
/* ------------------------------------------------------------------ */

#header {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 1000 !important;
  /* Prevent ghosting and trailing during window resize */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Real Functional Areas - Positioning Containers */
.functional-area {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important; /* Prevent interference with layout */
  width: var(--safe-zone-width) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.ankh-functional-area {
  top: var(--ankh-area-top) !important;
  height: var(--ankh-area-height) !important;
}

.nav-functional-area {
  top: var(--nav-area-top) !important;
  height: var(--nav-area-height) !important;
  /* Prevent flickering during project switching */
  transition: top 0.05s ease-out, height 0.05s ease-out !important;
  will-change: auto !important;
}

/* Ankh - positioned within its functional area */
.ankh-circle {
  position: fixed !important;
  top: calc(var(--ankh-area-top) + (var(--ankh-area-height) / 2)) !important; /* Center within functional area */
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: var(--ankh-circle-size, 15vh) !important; /* Use dedicated circle size property */
  height: var(--ankh-circle-size, 15vh) !important; /* Use dedicated circle size property */
  max-width: var(--safe-zone-max-width) !important; /* Never exceed safe-zone width */
  max-height: var(--safe-zone-max-height) !important; /* Never exceed safe-zone height */
  min-width: 20px !important;
  min-height: 20px !important;
  background: transparent !important; /* Remove debug background */
  border: 1px solid #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  transition: all var(--transition-delay) ease !important;
  /* Prevent ghosting and trailing during window resize */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Debug Controls */
.debug-button {
  position: fixed !important;
  top: 20px !important;
  z-index: 999999 !important; /* Higher z-index to be above everything */
  background: #222 !important; /* Black by default (OFF state) */
  color: #fff !important;
  border: 1px solid #555 !important; /* Always dark grey outline */
  padding: 8px 12px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-family: monospace !important;
  font-size: 12px !important;
  pointer-events: auto !important;
  user-select: none !important;
  opacity: 0.9 !important;
  visibility: visible !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
}

/* Active state - green background */
.debug-button.active {
  background: #2a4 !important; /* Green when active (ON state) */
  border-color: #555 !important; /* Always dark grey outline */
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Ensure all active buttons have consistent green background on hover */
.debug-button.active:hover {
  background: #3b5 !important; /* Darker green on hover when active */
}

/* Hover state for inactive buttons */
.debug-button:hover { 
  opacity: 1 !important; 
  background: #3b5 !important; /* Dark green on hover when inactive */
}

/* Abs button - same as other buttons (no special styling) */

/* Position each button vertically on the left side with consistent width */
#absolute-toggle,
#content-toggle,
#phase1-toggle,
#phase2-toggle,
#bg-toggle,
#loading-debug-toggle {
  width: auto !important;
  min-width: 60px !important;
  max-width: 120px !important;
  padding: 8px 12px !important;
  left: 20px !important;
  right: auto !important;
  height: auto !important;
  max-height: 40px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#phase1-toggle {
  top: 70px !important;
}

#phase2-toggle {
  top: 110px !important;
}

#content-toggle {
  top: 150px !important;
}

#absolute-toggle {
  top: 190px !important;
}

#bg-toggle {
  top: 230px !important;
}

#loading-debug-toggle {
  top: 270px !important;
}

.debug-controls {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 99999 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Hide BG button completely */
#bg-toggle {
  display: none !important;
}

/* Debug Loading Text - Bottom Left */
.debug-loading-text {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 5px !important;
  padding: 15px !important;
  font-family: monospace !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  max-width: 300px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.debug-loading-text.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.debug-loading-title {
  font-weight: bold !important;
  margin-bottom: 8px !important;
  color: #ED1F83 !important; /* OOMAA Pink */
}

.debug-loading-list {
  max-height: 150px !important;
  overflow-y: auto !important;
}

.debug-loading-item {
  margin-bottom: 4px !important;
  padding: 2px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.debug-loading-item:last-child {
  border-bottom: none !important;
}

.debug-loading-item.loaded {
  color: #00ff00 !important; /* Green for loaded items */
}

.debug-loading-item.loading {
  color: #ffff00 !important; /* Yellow for currently loading items */
}

.debug-loading-item.pending {
  color: #cccccc !important; /* Grey for pending items */
}

.debug-controls label {
  display: block !important;
  margin-bottom: 8px !important;
  color: white !important;
}

.debug-input {
  width: 80px !important;
  padding: 5px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid white !important;
  border-radius: 3px !important;
  color: black !important;
  font-family: monospace !important;
  font-size: 12px !important;
}

.debug-button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Debug Areas Hidden State */
.debug-hidden .section-border {
  display: none !important;
}

/* Content Background Hidden State - REMOVED - background always visible */

/* Ankh circle is a logo element, not a debug area - always keep it visible */
.debug-hidden .ankh-circle {
  /* Keep everything visible - ankh is not a debug element */
}

/* Phase 3 Layout Styles */
.phase-3 .ankh-circle {
  /* Phase 3 ankh transformation */
  background: transparent !important;
  border: 1px solid #fff !important; /* Same white outline as ankh (1px) */
  outline: none !important; /* Remove any default outline */
  box-shadow: none !important; /* Remove any default box shadow */
  transform: translate(-50%, -50%) scale(var(--ankh-phase3-scale)) !important;
  transition: all 0.5s ease !important;
  cursor: pointer !important;
}

.phase-3 .ankh-circle:hover {
  transform: translate(-50%, -50%) scale(var(--ankh-phase3-hover-scale)) !important;
}

.phase-3 .ankh-circle img {
  filter: none !important; /* Remove filter to show original X button color */
  transition: filter 0.5s ease, transform 0.6s ease !important;
  transform-origin: center !important;
}

/* Phase 3 Content Area */
.content-area {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--safe-zone-width) !important;
  /* Default top position to prevent jumping when phase-3 class is removed */
  top: var(--phase3-content-area-top, 50vh) !important;
  /* Default height to prevent layout shifts */
  height: var(--phase3-content-area-height, 60vh) !important;
  background: rgba(0, 0, 0, 0.1) !important; /* 90% transparent */
  border: none !important; /* No border */
  border-radius: 8px !important;
  padding: 20px !important;
  z-index: 5 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  overflow-y: auto !important; /* Will be overridden for wide screens */
  /* Ensure proper text flow */
  word-wrap: break-word !important;
  text-align: left !important;
  /* Ensure content area doesn't block navigation clicks */
  pointer-events: auto !important;
}

/* Let .content-area own the scroll; do NOT clip children here */
.content-inner {
  width: 100% !important;
  height: 100% !important;
  display: block !important;      /* keeps grid children honest */
  overflow: visible !important;   /* <-- critical: no clipping here */
  position: relative !important;
  max-height: none !important;    /* allow internal grids to size naturally */
}

/* Contact form specific constraints */
body.article-contact .content-inner {
  overflow-y: auto !important; /* Allow scrolling within content area */
  max-height: 100% !important; /* Strict height constraint */
}

/* Ensure contact form content fits within content area */
body.article-contact .dynamic-content {
  max-height: 100% !important; /* Prevent content from exceeding content area */
  overflow-y: auto !important; /* Allow scrolling if needed */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Ensure content area doesn't overlap navigation in Phase 3 */
.phase-3 .content-area {
  /* Ensure content area stops before navigation area */
  max-height: calc(var(--phase3-nav-area-top, 100vh) - var(--phase3-content-area-top, 0px)) !important;
  /* Ensure content area doesn't extend beyond navigation area */
  bottom: auto !important;
}

/* When not in Phase 3, the content overlay must never intercept clicks */
body:not(.phase-3) .content-area,
body:not(.phase-3) .content-area * {
  pointer-events: none !important;
}

/* Only allow the 3D container to receive events while in Phase 3 */
.three-embed { pointer-events: none; }
body.phase-3 .three-embed { pointer-events: auto; }

/* On mobile, prioritize scrolling over 3D model interactions */
@media (max-width: 768px), (pointer: coarse) {
  body.phase-3 .three-embed { 
    pointer-events: none !important; 
    touch-action: pan-y !important; /* Allow vertical scrolling only */
  }
}

/* Content area fade transitions for article switching */
body:not(.resizing) .content-area.article-transition {
  transition: opacity 0.3s ease !important;
}

body:not(.resizing) .content-area.article-transition.fade-out {
  opacity: 0 !important;
}
body:not(.resizing) .content-area.article-transition.fade-in {
  opacity: 1 !important;
}

/* Content area fade-out transition - maintain position */
.content-area.fade-out {
  transition: opacity 0.3s ease-out !important;
  opacity: 0 !important;
  /* Keep all positioning and sizing during fade-out */
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--safe-zone-width) !important;
  /* NO height constraints during fade-out to prevent jumping */
  /* max-height: var(--phase3-content-area-height) !important; */
}

.phase-3 .content-area {
  top: var(--phase3-content-area-top) !important;
  max-height: var(--phase3-content-area-height) !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* Ensure transitions are preserved in Phase 3 */
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Phase 3 Banner Elements - Hide in Phase 3 */
.phase-3 .content {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: blur(8px) !important; /* Add blur effect when fading out */
  transform: scale(0.9) !important; /* Scale down to 90% when fading out */
  transition: opacity 0.5s ease, visibility 0.5s ease, filter 0.5s ease, transform 0.5s ease !important;
}

/* Ensure banner content transitions work consistently */
body.phase-3 .content {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: blur(8px) !important; /* Add blur effect when fading out */
  transform: scale(0.9) !important; /* Scale down to 90% when fading out */
  transition: opacity 0.5s ease, visibility 0.5s ease, filter 0.5s ease, transform 0.5s ease !important;
}

/* Banner blur-in effect when returning to Phase 2 */
.content.banner-blur-in {
  filter: blur(8px) !important; /* Start with blur */
  transform: scale(0.9) !important; /* Start scaled down to 90% */
  transition: opacity 0.5s ease, visibility 0.5s ease, filter 0.5s ease, transform 0.5s ease !important;
}

.content.banner-blur-in.clearing {
  filter: blur(0px) !important; /* Clear the blur */
  transform: scale(1) !important; /* Scale up to 100% */
}

/* Phase 3 Functional Areas - Use Phase 3 positioning */
.phase-3 .ankh-functional-area {
  top: var(--phase3-ankh-area-top) !important;
  height: var(--phase3-ankh-area-height) !important;
}

.phase-3 .nav-functional-area {
  top: var(--phase3-nav-area-top) !important;
  height: var(--phase3-nav-area-height) !important;
  /* Prevent flickering during project switching in Phase 3 */
  transition: top 0.05s ease-out, height 0.05s ease-out !important;
  will-change: auto !important;
}

/* Debug visibility for functional areas */
body:not(.phase2-hidden) .ankh-functional-area,
body:not(.phase2-hidden) .nav-functional-area {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Phase 3 Ankh and Nav Positioning - Use Phase 3 variables */
.phase-3 .ankh-circle {
  top: calc(var(--phase3-ankh-area-top) + (var(--phase3-ankh-area-height) / 2)) !important;
}

.phase-3 #header nav {
  top: calc(var(--phase3-nav-area-top) + (var(--phase3-nav-area-height) / 2)) !important;
  /* position tweaks or variables are fine here, but not 'transition' */
}

/* Phase 3 Debug Areas */
.phase-3 .debug-trimmed-elements .ankh-trimmed-area {
  top: var(--phase3-ankh-area-top) !important;
  height: var(--phase3-ankh-area-height) !important;
  border-color: var(--ankh-phase3-bg-color) !important;
}

.phase-3 .debug-trimmed-elements .nav-trimmed-area {
  top: var(--phase3-nav-area-top) !important;
  height: var(--phase3-nav-area-height) !important;
}

/* Content Area Debug */
.content-area-debug {
  position: fixed !important;
  pointer-events: none !important; /* Prevent interference with layout */
  /* NO positioning by default - only set in Phase 3 */
  /* top: var(--phase3-content-area-top) !important; */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--safe-zone-width) !important;
  /* NO height by default - only set in Phase 3 */
  /* height: var(--phase3-content-area-height) !important; */
  border: 2px dashed rgba(0, 255, 255, 0.8) !important;
  background: rgba(0, 255, 255, 0.1) !important;
  z-index: 4 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Content area debug visibility control */
.content-area-debug {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Content Debug Elements - Dashed black lines with dimensions */
.debug-content-elements {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important; /* Above everything except debug buttons */
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Content debug now controlled by new unified system */

/* Content Debug Areas - Base styling */
.debug-content-elements [class*="-area"]:not(.projects-text-area) {
  position: absolute !important;
  border: 2px dashed #000000 !important;
  background: rgba(0, 0, 0, 0.1) !important;
  pointer-events: none !important;
}

/* Phase 3 Content Debug Areas - Different colors and 1px borders */
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .anarch-title-area {
  border: 1px solid #00ff00 !important; /* Green for title */
  background: transparent !important;
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .anarch-visual-area {
  border: 1px solid #ff0000 !important; /* Red for visual/3D model */
  background: transparent !important;
}

/* Anarch embed/container debug areas - visible only with Content debug (C) */
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .anarch-embed-area {
  border: 1px solid rgba(0, 0, 0, 0.5) !important;
  background: rgba(0, 0, 0, 0.05) !important; /* 5% background */
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .anarch-container-area {
  border: 1px dashed rgba(0, 0, 0, 0.5) !important;
  background: rgba(0, 0, 0, 0.1) !important; /* 10% background */
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .anarch-copy-area {
  border: 1px solid #0000ff !important; /* Blue for copy/text */
  background: transparent !important;
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .intro-title-area {
  border: 1px solid #00ff00 !important; /* Green for title */
  background: transparent !important;
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .intro-image-area {
  border: 1px solid #ff0000 !important; /* Red for image */
  background: transparent !important;
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .intro-text-area {
  border: 1px solid #0000ff !important; /* Blue for text */
  background: transparent !important;
}

/* Reel Debug Areas - Different colors */
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .reel-video-area {
  border: 1px solid #ff00ff !important; /* Magenta for video */
  background: transparent !important;
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .reel-text-area {
  border: 1px solid #ffff00 !important; /* Yellow for text */
  background: transparent !important;
}

/* Projects Debug Areas - Different colors */
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .projects-text-area {
  border: 1px solid #00ffff !important; /* Cyan for projects text */
  background: transparent !important;
}

/* Contact Debug Areas - Different colors */
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .contact-text-area {
  border: 1px solid #ffa500 !important; /* Orange for contact text */
  background: transparent !important;
}

/* Content Debug Labels - Show dimensions */
.debug-content-elements [class*="-area"]:not(.projects-text-area)::after {
  content: attr(data-dimensions) !important;
  position: absolute !important;
  top: -25px !important;
  left: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-family: monospace !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  white-space: nowrap !important;
  z-index: 100000 !important;
}

/* Color-specific labels to match border colors */
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .anarch-title-area::after,
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .intro-title-area::after {
  color: #00ff00 !important; /* Green for title areas */
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .anarch-visual-area::after,
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .intro-image-area::after {
  color: #ff0000 !important; /* Red for visual/image areas */
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .anarch-copy-area::after,
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .intro-text-area::after {
  color: #0000ff !important; /* Blue for copy/text areas */
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .reel-video-area::after {
  color: #ff00ff !important; /* Magenta for video area */
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .reel-text-area::after {
  color: #ffff00 !important; /* Yellow for reel text area */
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .projects-text-area::after {
  color: #00ffff !important; /* Cyan for projects text area */
}

body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements .contact-text-area::after {
  color: #ffa500 !important; /* Orange for contact text area */
}

/* Intro Article Debug */
.content-debug-intro {
  display: none !important;
}

body.article-intro:not(.content-hidden) .content-debug-intro {
  display: block !important;
}

/* Reel grid sits inside the phase-3 content area */
.reel-grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(var(--phase3-content-area-height, 60vh) - 40px);
  width: 100%;
  gap: 1rem;
  padding: 0;
  overflow: hidden;            /* never show a scrollbar in this article */
}

/* Title aligns to the same left edge as the video */
.reel-grid h1.major {
  width: 95%;
  margin: 0 auto;
  text-align: left;
}

/* Video container – drop shadow hugs the actual player box */
.reel-video-container {
  --reel-ar: calc(239/100);    /* fallback; JS overwrites from data-ar */
  width: 95%;
  aspect-ratio: var(--reel-ar);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  border-radius: 0;
  margin: 0 auto;
  max-height: calc(100% - 2rem);
  height: auto;
}

/* Make the iframe fill the box exactly */
.reel-video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* No scrolling specifically for the Reel article */
body.article-reel .content-area { overflow: hidden !important; }

/* Reel: maximize horizontal space in article mode */
body.article-reel .content-area { padding: 0 !important; }

/* Anarch section - no unnecessary scrollbars on wide screens */
@media (min-width: 1024px) and (orientation: landscape) {
  /* removed: was blocking scroll on desktop */
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .reel-grid {
    height: calc(var(--phase3-content-area-height, 50vh) - 20px);
    gap: 0.75rem;
  }
}
@media (max-width: 480px) {
  .reel-grid {
    height: calc(var(--phase3-content-area-height, 45vh) - 10px);
    gap: 0.5rem;
  }
}

/* Project Video Container (matches Reel styling) */
.project-video-container {
  margin: 1.5rem auto;
  max-width: 1200px !important;
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  aspect-ratio: 2.35/1;
  overflow: visible;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-radius: 0;
}

.project-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Reel Article Debug */
.content-debug-reel {
  display: none !important;
}

body.article-reel:not(.content-hidden) .content-debug-reel {
  display: block !important;
}

/* Anarch Article Debug */
.content-debug-anarch {
  display: none !important;
}

body.article-anarch:not(.content-hidden) .content-debug-anarch {
  display: block !important;
}

/* Projects Article Debug */
.content-debug-projects {
  display: none !important;
}

body.article-projects:not(.content-hidden) .content-debug-projects {
  display: block !important;
}

/* Contact Article Debug */
.content-debug-contact {
  display: none !important;
}

body.article-contact:not(.content-hidden) .content-debug-contact {
  display: block !important;
}

/* Only show content area debug when Phase 2 debug is active AND we're in Phase 3 */
body:not(.phase2-hidden).phase-3 .content-area-debug {
  opacity: 0 !important;
  visibility: hidden !important;
}



/* Show ONLY when Phase 2 debug is enabled (body does NOT have .phase2-hidden) */
.phase-3:not(.phase2-hidden) .content-area-debug {
  opacity: 1 !important;
  visibility: visible !important;

  /* position it to the actual content area */
  top: var(--phase3-content-area-top) !important;
  height: var(--phase3-content-area-height) !important;
}


/* Phase 3 Content Styling */
.phase3-content {
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
}

.phase3-content h1.major,
.phase3-content h2.main,
.phase3-content h3.main,
.phase3-content h4.main {
  color: #ffffff !important;
  font-weight: 500 !important; /* Match project title weight */
  font-size: clamp(1.4rem, 4vw, 2.8rem) !important; /* Responsive: max current size, min 50% of current size */
  line-height: 1.3 !important; /* Match project title line height */
  letter-spacing: -0.02em !important; /* Match project title letter spacing */
  border-bottom: none !important; /* Remove any underlines */
  margin: 0 0 0.5rem 0 !important; /* Match project title margin */
  text-transform: none !important; /* Remove uppercase */
  font-family: 'Open Sans', sans-serif !important;
}

.phase3-content p {
  margin: 0 0 1rem 0 !important;
  line-height: 1.65 !important;
}

.phase3-content .image {
  border-radius: 4px !important;
  border: 0 !important;
  display: inline-block !important;
  position: relative !important;
}

.phase3-content .image img {
  border-radius: 4px !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.phase3-content form {
  margin: 0 !important;
}

.phase3-content .fields {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

.phase3-content .field {
  flex: 1 1 200px !important;
}

.phase3-content .field.half {
  flex: 1 1 calc(50% - 0.5rem) !important;
}

.phase3-content input,
.phase3-content textarea {
  width: 100% !important;
  padding: 0.5rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

.phase3-content .actions {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 0 0 !important;
  display: flex !important;
  gap: 1rem !important;
}

.phase3-content .actions li {
  margin: 0 !important;
}

.phase3-content .actions input {
  padding: 0.5rem 1rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}

.phase3-content .actions input.primary {
  background: rgba(237, 31, 131, 0.8) !important;
  border-color: rgba(237, 31, 131, 0.8) !important;
}

.phase3-content .icons {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 0 0 !important;
  display: flex !important;
  gap: 1rem !important;
}

.phase3-content .icons li {
  margin: 0 !important;
}

.phase3-content .icons a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 1.2rem !important;
}

/* Social Media Icons - SVG styling */
.social-icon {
  display: inline-block !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  border-radius: 4px !important;
  padding: 4px !important;
  text-decoration: none !important; /* Remove underline */
  border: none !important; /* Remove any borders */
  outline: none !important; /* Remove focus outline */
}

.social-icon:hover {
  transform: scale(1.1) !important;
  opacity: 0.8 !important;
  text-decoration: none !important; /* Remove underline on hover */
  border: none !important; /* Remove any borders on hover */
  outline: none !important; /* Remove focus outline on hover */
}

.social-icon:focus {
  text-decoration: none !important; /* Remove underline on focus */
  border: none !important; /* Remove any borders on focus */
  outline: none !important; /* Remove focus outline */
}

.social-icon img {
  display: block !important;
  width: 36px !important; /* 25% smaller (48px * 0.75) */
  height: 36px !important; /* 25% smaller (48px * 0.75) */
  filter: none !important; /* Remove all filters to show original SVG colors */
  transition: filter 0.3s ease !important;
  border: none !important; /* Remove any borders */
  outline: none !important; /* Remove focus outline */
}

.social-icon:hover img {
  filter: drop-shadow(0 0 8px rgba(237, 31, 131, 0.8)) !important; /* Add OOMAA pink glow on hover */
  border: none !important; /* Remove any borders on hover */
  outline: none !important; /* Remove focus outline on hover */
}

/* Ensure no underlines on the list items */
.icons li {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}

.icons li a {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}

/* Social Media Icons for dynamic-content (Contact form) */
.dynamic-content .icons {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 2rem 0 !important; /* Increased bottom margin to ensure visibility */
  display: flex !important;
  justify-content: center !important;
  gap: 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* Ensure icons are always visible */
  position: relative !important;
  z-index: 10 !important;
}

.dynamic-content .icons li {
  margin: 0 !important;
  flex-shrink: 0 !important; /* Prevent icons from shrinking */
}

.dynamic-content .icons a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 1.2rem !important;
  display: block !important; /* Ensure proper display */
}

/* Dynamic Content Form Styling (Contact Form) */
.dynamic-content {
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
}

.dynamic-content h1.major,
.dynamic-content h2.main,
.dynamic-content h3.main,
.dynamic-content h4.main {
  color: #ffffff !important;
  font-weight: 500 !important; /* Match project title weight */
  font-size: clamp(1.4rem, 4vw, 2.8rem) !important; /* Responsive: max current size, min 50% of current size */
  line-height: 1.3 !important; /* Match project title line height */
  letter-spacing: -0.02em !important; /* Match project title letter spacing */
  border-bottom: none !important; /* Remove any underlines */
  margin: 0 0 0.5rem 0 !important; /* Match project title margin */
  text-transform: none !important; /* Remove uppercase */
  font-family: 'Open Sans', sans-serif !important;
}

.dynamic-content p {
  margin: 0 0 1rem 0 !important;
  line-height: 1.65 !important;
}

.dynamic-content form {
  margin: 0 !important;
}

.dynamic-content .fields {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

.dynamic-content .field {
  flex: 1 1 200px !important;
}

.dynamic-content .field.half {
  flex: 1 1 calc(50% - 0.5rem) !important;
}

.dynamic-content input,
.dynamic-content textarea {
  width: 100% !important;
  padding: 0.5rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

.dynamic-content .actions {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 0 0 !important;
  display: flex !important;
  gap: 1rem !important;
}

.dynamic-content .actions li {
  margin: 0 !important;
}

.dynamic-content .actions input {
  padding: 0.5rem 1rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}

.dynamic-content .actions input.primary {
  background: rgba(237, 31, 131, 0.8) !important;
  border-color: rgba(237, 31, 131, 0.8) !important;
}

/* Button hover effects for contact form */
.dynamic-content .actions input[type="submit"],
.dynamic-content .actions input[type="reset"] {
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

/* Ensure contact section content area doesn't cut off social icons */
body.article-contact .content-area {
  /* Ensure content area can scroll to show all content */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Contact section dynamic content */
body.article-contact .dynamic-content {
  /* No extra padding - let content flow naturally */
}

/* Ensure social icons have proper spacing at bottom */
body.article-contact .dynamic-content .social {
  margin-bottom: 2rem !important; /* Add margin to social icons instead of padding to content */
}

/* Specific fix for iPad Pro contact section */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  body.article-contact .dynamic-content .social {
    margin-bottom: 3rem !important; /* Extra margin for iPad Pro */
  }
}

/* Mobile-specific contact section fixes */
@media screen and (max-width: 1023px) {
  body.article-contact .content-area {
    padding-bottom: 6rem !important; /* Extra padding for mobile */
  }
  
  body.article-contact .dynamic-content {
    padding-bottom: 6rem !important; /* Extra padding for mobile */
  }
  
  body.article-contact .dynamic-content .icons {
    margin-bottom: 4rem !important; /* Extra margin for mobile */
  }
}

.dynamic-content .actions input[type="submit"]:hover {
  background: rgba(237, 31, 131, 0.9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(237, 31, 131, 0.3) !important;
}

.dynamic-content .actions input[type="reset"]:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2) !important;
}

.phase3-content .project-article {
  margin-bottom: 2rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.phase3-content .project-article:last-child {
  border-bottom: none !important;
}

.phase3-content .projects-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
}

.phase3-content .dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
}

.phase3-content .dot.active {
  background: rgba(237, 31, 131, 0.8) !important;
}

/* Disable transitions during window resize to prevent ghosting */
@media (max-width: 9999px) {
  /* This media query is always true, but helps with specificity */
  /* TARGETED: Only pause non-interactive layers during resize */
  .resizing #bg::before,
  .resizing #bg::after,
  .resizing .section-border,
  .resizing .debug-page-areas *,
  .resizing .debug-banner-elements *,
  .resizing .debug-trimmed-elements * {
    transition: none !important;
    animation: none !important;
  }
  
  /* EXPLICITLY ALLOW transitions for interactive pieces during/after resize */
  .resizing .content-area,
  .resizing .content,
  .resizing .ankh-circle,
  .resizing .ankh-ripple {
    transition: initial !important;
    animation: initial !important;
  }
  
  /* Ensure menu elements remain visible during resize */
  .resizing #header nav ul,
  .resizing #header nav ul li,
  .resizing #header nav ul li a {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }
}
/* Section Border Containers - Foundation of Layout */
.section-border {
  position: fixed !important;
  left: 0 !important;
  width: 100vw !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Section Border Containers - Foundation of Layout */
.section-border {
  position: fixed !important;
  left: 0 !important;
  width: 100vw !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.section-border.safe-zone {
  position: fixed !important;
  left: var(--safe-zone-left) !important;
  top: var(--safe-zone-top) !important;
  width: var(--safe-zone-width) !important;
  height: var(--safe-zone-height) !important;
  border: 1px dashed rgba(255, 192, 203, 0.9) !important; /* 1px thin with longer dashes - pink border */
  /* CSS borders do not support dash length; keep dashed style only */
  pointer-events: none !important;
  z-index: 5 !important; /* Above other borders to make it visible */
}

/* Safe zone dimension label */
.section-border.safe-zone::after {
  content: "Safe Zone (w) " attr(data-width) " (h) " attr(data-height);
  position: fixed !important;
  top: calc(var(--safe-zone-top) - 25px) !important; /* Position above the safe zone border */
  left: var(--safe-zone-left) !important;
  background: rgba(255, 192, 203, 0.9) !important; /* Pink background to match border */
  color: #000 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Banner constraint areas - content must fit within these */
.section-border.banner-element-1 {
  position: fixed !important;
  left: var(--safe-zone-left) !important;
  top: var(--banner-element-1-top) !important;
  width: var(--safe-zone-width) !important;
  height: var(--banner-element-1-height) !important;
  border: 1px dashed rgba(255, 165, 0, 0.9) !important; /* 1px thin with longer dashes - OOMAA constraint */
  /* CSS borders do not support dash length; keep dashed style only */
  background: rgba(255, 165, 0, 0.05) !important; /* Light orange background for debugging */
  z-index: 7 !important;
  pointer-events: none !important;
}

.section-border.banner-element-2 {
  position: fixed !important;
  left: var(--safe-zone-left) !important;
  top: var(--banner-element-2-top) !important;
  width: var(--safe-zone-width) !important;
  height: var(--banner-element-2-height) !important;
  border: 1px dashed rgba(0, 255, 255, 0.9) !important; /* 1px thin with longer dashes - Japanese constraint */
  /* CSS borders do not support dash length; keep dashed style only */
  background: rgba(0, 255, 255, 0.05) !important; /* Light cyan background for debugging */
  z-index: 7 !important;
  pointer-events: none !important;
}

.section-border.banner-element-3 {
  position: fixed !important;
  left: var(--safe-zone-left) !important;
  top: var(--banner-element-3-top) !important;
  width: var(--safe-zone-width) !important;
  height: var(--banner-element-3-height) !important;
  border: 1px dashed rgba(255, 255, 0, 0.9) !important; /* 1px thin with longer dashes - Tagline constraint */
  /* CSS borders do not support dash length; keep dashed style only */
  background: rgba(255, 255, 0, 0.05) !important; /* Light yellow background for debugging */
  z-index: 7 !important;
  pointer-events: none !important;
}

/* 3 major areas - fit within safe-zone */
.section-border.top {
  position: fixed !important;
  left: var(--safe-zone-left) !important;
  top: var(--top-section-top) !important;
  width: var(--safe-zone-width) !important;
  height: var(--top-section-height) !important;
  border: var(--debug-border-top) !important;
  /* CSS borders do not support dash length; keep dashed style only */
  background: rgba(255, 255, 0, 0.05) !important; /* Light yellow background for debugging */
  z-index: 2 !important;
  pointer-events: none !important;
}

.section-border.banner {
  position: fixed !important;
  left: var(--safe-zone-left) !important;
  top: var(--banner-section-top) !important;
  width: var(--safe-zone-width) !important;
  height: var(--banner-section-height) !important;
  border: var(--debug-border-banner) !important;
  /* CSS borders do not support dash length; keep dashed style only */
  z-index: 2 !important;
  pointer-events: none !important;
}

.section-border.bottom {
  position: fixed !important;
  left: var(--safe-zone-left) !important;
  top: var(--bottom-section-top) !important;
  width: var(--safe-zone-width) !important;
  height: var(--bottom-section-height) !important;
  border: none !important; /* Remove grey line at bottom */
  background: transparent !important; /* Remove background */
  z-index: 2 !important;
  pointer-events: none !important;
}

.section-border.copyright {
  position: fixed !important;
  left: 0 !important; /* Full width, outside safe-zone */
  top: var(--copyright-top) !important;
  width: 100vw !important; /* Full viewport width */
  height: var(--copyright-height) !important;
  border: var(--debug-border-copyright) !important;
  /* CSS borders do not support dash length; keep dashed style only */
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ===== Ankh/X: perfectly centered + cross-fade while rotating ===== */
.ankh-circle{
  /* you already position the circle itself; this locks centering of the icon(s) */
  display:grid; 
  place-items:center;
  transform: translate(-50%, -50%) rotate(var(--icon-rot, 0deg)) !important;
  overflow:visible;
}

/* stacked icons (ankh + X), both perfectly centered inside the ring */
.ankh-circle .icon,
.ankh-circle > img{                 /* supports current single <img> before we stack */
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:var(--icon-size, 62%);      /* tweak size as needed */
  height:var(--icon-size, 62%);
  object-fit:contain;
  pointer-events:none;
}

.ankh-circle .icon{ opacity:0; transition:opacity 220ms ease; }
.ankh-circle .icon-ankh{ opacity:1; }        /* default visible */
.ankh-circle .icon-close{ opacity:0; }       /* default hidden */
.ankh-circle.show-close .icon-ankh{ opacity:0; }
.ankh-circle.show-close .icon-close{ opacity:1; }

/* Symbol mode: Circle 15% smaller than base size, but ankh symbol stays same size */
.ankh-circle:not(.show-close) {
  width: var(--ankh-symbol-size, 12.75vh) !important; /* 15% smaller than base circle */
  height: var(--ankh-symbol-size, 12.75vh) !important; /* 15% smaller than base circle */
}

.ankh-circle:not(.show-close) .icon-ankh {
  width: 75% !important; /* Larger relative to smaller circle */
  height: 75% !important; /* Larger relative to smaller circle */
}

.ankh-circle:not(.show-close) .icon-close {
  width: 63.75% !important; /* Standard size for X button in symbol mode */
  height: 63.75% !important; /* Standard size for X button in symbol mode */
}

/* Button mode: Entire button 15% smaller than base size */
.ankh-circle.show-close {
  width: var(--ankh-button-size, 12.75vh) !important; /* 15% smaller than base circle */
  height: var(--ankh-button-size, 12.75vh) !important; /* 15% smaller than base circle */
}

.ankh-circle.show-close .icon-close {
  width: 63.75% !important; /* Standard size for X button in button mode */
  height: 63.75% !important; /* Standard size for X button in button mode */
}

.ankh-circle img {
  width: 63.75% !important; /* 15% smaller than 75% (75% * 0.85 = 63.75%) */
  height: 63.75% !important; /* 15% smaller than 75% (75% * 0.85 = 63.75%) */
  transition: all var(--transition-delay) ease !important;
  /* Smooth icon transition */
  transition: all 0.3s ease !important;
}



.connector-vertical {
  position: absolute !important;
  left: 50% !important;
  width: 1px !important;
  background: #fff !important;
  z-index: 5 !important;
  transform: translateX(-0.5px) !important;
  opacity: 0 !important;
  transition: top 0.2s ease, height 0.2s ease !important;
}

/* Rule 3: Hero banner elements positioned within constraint areas */
#header .content {
  position: fixed !important;
  top: 0 !important; /* Remove centering - elements will be positioned individually */
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 6 !important;
  pointer-events: none !important; /* Allow clicks to pass through to elements */
}

/* OOMAA Logo - strictly within element-1 area */
#header .content .image.main {
  position: fixed !important;
  top: var(--banner-element-1-top) !important; /* Top of element-1 area */
  left: 50% !important;
  transform: translateX(-50%) !important; /* Center horizontally only */
  width: var(--safe-zone-width) !important; /* Match constraint area width */
  height: var(--banner-element-1-height) !important; /* Full height of element-1 area */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 8 !important;
  pointer-events: auto !important;
  /* Force strict containment */
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: all var(--transition-delay) ease !important;
}

/* Japanese Logo - strictly within element-2 area */
#header .content .image.main.logo-half {
  position: fixed !important;
  top: var(--banner-element-2-top) !important; /* Top of element-2 area */
  left: 50% !important;
  transform: translateX(-50%) !important; /* Center horizontally only */
  width: var(--safe-zone-width) !important; /* Match constraint area width */
  height: var(--banner-element-2-height) !important; /* Full height of element-2 area */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 8 !important;
  pointer-events: auto !important;
  /* Force strict containment */
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: all var(--transition-delay) ease !important;
}

/* Tagline - strictly within element-3 area (treated as scalable object) */
#header .content h1 {
  position: fixed !important;
  top: var(--banner-element-3-top) !important; /* Top of element-3 area */
  left: 50% !important;
  transform: translateX(-50%) !important; /* Center horizontally only */
  width: var(--safe-zone-width) !important; /* Match constraint area width */
  height: var(--banner-element-3-height) !important; /* Full height of element-3 area */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 8 !important;
  pointer-events: auto !important;
  transition: all var(--transition-delay) ease !important;
  
  /* Text styling */
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1rem !important;
  white-space: nowrap !important;
  text-align: center !important;
  
  /* Scalable object properties - let JavaScript handle all scaling */
  overflow: hidden !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* OOMAA logo - strictly constrained to element-1 area */
#header .content .image.main img {
  max-width: 100% !important; /* Never exceed container width */
  max-height: 100% !important; /* Never exceed container height */
  width: auto !important;
  height: auto !important; /* Let natural scaling happen */
  object-fit: contain !important; /* Maintain aspect ratio, scale to fit */
  transition: all var(--transition-delay) ease !important;
  /* Force strict containment */
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* Prevent content scaling - use original size */
  min-width: 0 !important;
  min-height: 0 !important;
  /* Remove conflicting transform */
}

/* Japanese logo - let JavaScript handle all scaling */
#header .content .image.main.logo-half img {
  max-width: 100% !important; /* Use full container width */
  max-height: 100% !important; /* Use full container height */
  width: auto !important;
  height: auto !important; /* Let natural scaling happen */
  object-fit: contain !important; /* Maintain aspect ratio */
  transition: all var(--transition-delay) ease !important;
  box-sizing: border-box !important;
  /* Let JavaScript handle all scaling - no minimum size constraints */
}



/* Ensure content fills designated areas properly - First instance */
#header .content .image.main img,
#header .content .image.main.logo-half img {
  /* Let JavaScript handle width/height - don't force 100% */
  object-fit: contain !important;
  object-position: center !important;
}





/* Ensure tagline container can handle dynamic sizing */
#header .content .inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}


/* Canonical nav transitions */
:root {
  --nav-slide-duration: 500ms;         /* tweakable */
  --nav-fade-duration: 600ms;          /* tweakable */
  --nav-timing: ease-in-out;
}

/* Rule 4: Menu positioning - center of functional nav area */
#header nav {
  position: fixed !important;
  top: calc(var(--nav-area-top) + (var(--nav-area-height) / 2)) !important; /* Center of functional nav area */
  left: 50% !important;
  transform: translate(-50%, -50%) !important; /* Center both horizontally and vertically */
  z-index: 99998 !important; /* Very high z-index to render on top of everything except debug controls */
  transition:
    top var(--nav-slide-duration) var(--nav-timing),
    opacity var(--nav-fade-duration) ease-out !important;
  will-change: top, opacity;
  background: transparent !important;
  overflow: hidden !important;
  /* Prevent ghosting and trailing during window resize */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}



#header nav ul {
  display: flex !important;
  flex-direction: row !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important; /* Fixed font size - no dynamic scaling */
  white-space: nowrap !important;
  background: rgba(0, 0, 0, 0.1) !important;
  overflow: visible !important;
  border: 1px solid #fff !important;
  border-radius: 6px !important; /* Fixed border radius */
  transition: all var(--transition-delay) ease !important;
  z-index: 99998 !important; /* Very high z-index to render on top of everything except debug controls */
  pointer-events: auto !important; /* Ensure clickability */
  /* Prevent ghosting and trailing during window resize */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#header nav ul li { 
  position: relative !important;
  border-right: 0.5px solid #fff !important; /* Use 0.5px for sharpness */
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

#header nav ul li:last-child { 
  border-right: none !important; 
}

#header nav ul li::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

#header nav ul li:hover::before{ 
  opacity: 1; 
}

#header nav ul li a{
  position: relative !important;
  z-index: 99998 !important; /* Very high z-index to render on top of everything except debug controls */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1rem !important; /* Fixed padding - no dynamic scaling */
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 300 !important;
  font-family: 'Open Sans', sans-serif !important;
  transform: none !important;
  transition: all 0.3s ease !important;
}

/* Menu item hover - OOMAA pink background with 30% opacity */
#header nav ul li a:hover {
  background: rgba(237, 31, 131, 0.3) !important; /* OOMAA pink background with 30% opacity */
  color: #ffffff !important; /* Keep white text */
}

/* Active navigation item - OOMAA pink */
#header nav ul li a.active {
  color: #ED1F83 !important; /* OOMAA pink for active menu item */
  font-weight: 300 !important; /* Keep same weight to prevent resizing */
  position: relative !important;
}

/* Active state - no background, only pink text */

/* Copyright text - centered in purple area */
.copyright-text {
  position: fixed !important;
  top: calc(var(--copyright-top) + (var(--copyright-height) / 2)) !important; /* Center of copyright area */
  left: 50% !important;
  transform: translate(-50%, -50%) !important; /* Center both horizontally and vertically */
  z-index: 10 !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 300 !important;
  opacity: 0.75 !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  /* Ensure the entire content (symbol + text) is treated as one unit for centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Prevent text selection */
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Mobile copyright positioning - reverted to match web behavior */
@media screen and (max-width: 1023px) {
  .copyright-text {
    /* Keep same positioning as web - no mobile-specific adjustments */
    font-size: 0.7rem !important; /* Slightly smaller on mobile */
  }
}

/* iPhone-specific fixes */
@media screen and (max-width: 767px) {
  .copyright-text {
    /* Keep same positioning as web - no mobile-specific adjustments */
    font-size: 0.65rem !important; /* Smaller on phones */
  }
}

/* Copyright symbol - make it 25% bigger total (15% + 10% more) */
.copyright-text::before {
  content: "©\00a0" !important; /* \00a0 is a non-breaking space for visible spacing */
  font-size: 0.94875rem !important; /* 0.75rem * 1.35 * 1.30 = 0.94875rem (25% bigger total) */
  opacity: 0.75 !important;
  /* Ensure symbol aligns properly with text */
  line-height: 1 !important;
  vertical-align: baseline !important;
}

/* Global text selection prevention - make all text non-selectable */
* {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Allow text selection for interactive elements that need it */
button, input, textarea, [role="button"], .debug-button {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* ------------------------------------------------------------------ */
/* Mobile Responsive                                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
  #header nav ul {
    flex-direction: row !important; /* Keep horizontal on mobile */
    flex-wrap: nowrap !important; /* Prevent wrapping to keep horizontal layout */
    width: 90vw !important; /* 90% of viewport width */
    max-width: 90vw !important; /* Ensure it doesn't exceed 90% of window width */
    margin: 0 auto !important; /* Center horizontally */
    justify-content: space-between !important; /* Distribute items evenly */
    gap: 0 !important; /* Remove gap to fill space completely */
  }
  
  #header nav ul li {
    border-right: 0.5px solid #fff !important; /* Keep right borders, use 0.5px for sharpness */
    border-bottom: none !important; /* Remove bottom borders */
    flex: 1 !important; /* Equal width distribution */
    min-width: 0 !important; /* Allow shrinking */
    display: flex !important; /* Ensure proper flex behavior */
  }
  
  #header nav ul li:last-child {
    border-right: none !important; /* Remove right border from last item */
  }
  
  /* Make text smaller on mobile to fit horizontally */
  #header nav ul li a {
    font-size: 0.75rem !important; /* Smaller text for better fit */
    padding: 0.4rem 0.2rem !important; /* Reduced padding for better fit */
    text-align: center !important; /* Center text within each item */
  }
}

/* Debug Areas - OLD STYLES REMOVED - Using new styles below */

/* Debug Areas - Current Areas (Stage 3) - Colored full alpha */

/* OLD DEBUG TEXT CSS REMOVED - Using new styles below */

/* Ensure content fills designated areas properly - Second instance */
#header .content .image.main img,
#header .content .image.main.logo-half img {
  /* Let JavaScript handle width/height - don't force 100% */
  object-fit: contain !important;
  object-position: center !important;
}

/* OLD INDIVIDUAL BANNER ELEMENT CSS REMOVED - Using new styles below */

/* OLD DEBUG TEXT CSS FOR INDIVIDUAL BANNER ELEMENTS REMOVED - Using new styles below */

/* OLD PHASE VISIBILITY CSS REMOVED - Using new styles below */

/* Debug Button Styling - REMOVED DUPLICATE - using the main .debug-button rule above */

/* Old positioning rules removed - using new left-side positioning above */

/* Debug Areas - Grey outlines for Stage 1 areas */
.debug-page-areas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 999;
	opacity: 1;
	visibility: visible;
}

.debug-page-areas .page-top-area,
.debug-page-areas .page-banner-area,
.debug-page-areas .page-bottom-area {
	position: absolute;
	left: 0; /* Align to page left edge, not safe-zone */
	width: 100vw; /* Full viewport width */
	background: transparent;
	border: 1px dashed rgba(128, 128, 128, 0.8);
}

.debug-page-areas .page-top-area {
	top: var(--page-top-section-top);
	height: var(--page-top-section-height);
}

.debug-page-areas .page-banner-area {
	display: none !important; /* debug-test: BANNER area removed from P2 debug */
}

.debug-page-areas .page-bottom-area {
	top: var(--page-bottom-section-top);
	height: var(--page-bottom-section-height);
}

.debug-page-areas .page-copyright-area {
	position: absolute;
	left: 0;
	top: var(--page-copyright-top);
	width: 100%;
	height: var(--page-copyright-height);
	background: transparent;
	border: 1px dashed rgba(128, 128, 128, 0.8);
}

/* Individual Banner Element Debug Areas */
.debug-banner-elements {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 998;
}

.debug-banner-elements .page-oomaa-area,
.debug-banner-elements .page-japanese-area,
.debug-banner-elements .page-tagline-area {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw; /* Phase 1 should span full viewport width, not safe-zone */
	background: transparent;
	border: 1px dashed rgba(128, 128, 128, 0.8);
}

.debug-banner-elements .page-oomaa-area {
	top: var(--phase1-banner-element-1-top);
	height: var(--phase1-banner-element-1-height);
}

.debug-banner-elements .page-japanese-area {
	top: var(--phase1-banner-element-2-top);
	height: var(--phase1-banner-element-2-height);
}

.debug-banner-elements .page-tagline-area {
	top: var(--phase1-banner-element-3-top);
	height: var(--phase1-banner-element-3-height);
}

/* Debug Areas - Trimmed Ankh and Navigation Areas (Phase 2) */
.debug-trimmed-elements {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 997;
}

.debug-trimmed-elements .ankh-trimmed-area {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: var(--safe-zone-width);
    top: var(--ankh-area-top); /* Shows functional ankh area position */
    height: var(--ankh-area-height);
    background: transparent;
    border: 1px dashed rgba(255, 0, 255, 0.8); /* Magenta for ankh functional area */
}

.debug-trimmed-elements .nav-trimmed-area {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: var(--safe-zone-width);
	top: var(--nav-area-top); /* Shows functional nav area position */
	height: var(--nav-area-height);
	background: transparent;
	border: 1px dashed rgba(0, 255, 255, 0.8); /* Cyan for nav functional area */
}

/* Debug Text for Trimmed Areas */
.debug-trimmed-elements .ankh-trimmed-area::after {
	content: attr(data-note) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(255, 0, 255, 0.9);
	color: black;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

.debug-trimmed-elements .nav-trimmed-area::after {
	content: attr(data-note) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(0, 255, 255, 0.9);
	color: black;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

/* Debug Text for Grey Areas (Phase 1) - Left side */
.debug-page-areas .page-top-area::after {
	content: "1- Top (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(128, 128, 128, 0.9);
	color: white;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

.debug-page-areas .page-banner-area::after {
	content: "1- Banner (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(128, 128, 128, 0.9);
	color: white;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

.debug-page-areas .page-bottom-area::after {
	content: "1- Bottom (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(128, 128, 128, 0.9);
	color: white;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

.debug-banner-elements .page-oomaa-area::after {
	content: "1- OOMAA (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(128, 128, 128, 0.9);
	color: white;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}
.debug-banner-elements .page-japanese-area::after {
	content: "1- Japanese (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(128, 128, 128, 0.9);
	color: white;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

.debug-banner-elements .page-tagline-area::after {
	content: "1- Tagline (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(128, 128, 128, 0.9);
	color: white;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

/* Debug Text for Colored Areas (Phase 2) - CSS ::after elements like Phase 1 */
/* Only show debug text when Phase 2 is visible */
body:not(.phase2-hidden) .section-border.top::after {
	content: "2- Top (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(255, 165, 0, 0.9);
	color: black;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

body:not(.phase2-hidden) .section-border.banner::after {
	display: none !important; /* debug-test: Banner label removed from P2 debug visuals */
}

body:not(.phase2-hidden) .section-border.bottom::after {
	content: "2- Bottom (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(255, 165, 0, 0.9);
	color: black;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

body:not(.phase2-hidden) .section-border.banner-element-1::after {
	content: "2- OOMAA (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(255, 165, 0, 0.9);
	color: black;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

body:not(.phase2-hidden) .section-border.banner-element-2::after {
	content: "2- Japanese (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(0, 255, 255, 0.9);
	color: black;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

body:not(.phase2-hidden) .section-border.banner-element-3::after {
	content: "2- Tagline (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: 0px; /* debug-test: justified to top border */
	left: 50%; /* debug-test: horizontal center */
	transform: translateX(-50%); /* debug-test: horizontal center */
	background: rgba(255, 255, 0, 0.9);
	color: black;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1001;
}

/* Phase 1 and Phase 2 Debug Visibility */
.phase1-hidden .debug-page-areas,
.phase1-hidden .debug-banner-elements {
	display: none !important;
}

.phase2-hidden .debug-trimmed-elements {
	display: none !important;
}

/* Phase 2 controls the colored section-border areas (actual content constraint areas) */
body.phase2-hidden .section-border {
	display: none !important;
}

/* Phase 2 controls the content area debug visual (same pattern as other debug areas) */
body.phase2-hidden .content-area-debug-visual {
	display: none !important;
}

/* Phase 2 Content Area Debug - Pink dashed line around content area (between Ankh and Navigation functional areas) */
.content-area-debug-visual {
	position: fixed;
	pointer-events: none !important; /* Prevent interference with layout */
	top: 0px; /* Will be set by JavaScript */
	left: 50%;
	transform: translateX(-50%);
	width: 0px; /* Will be set by JavaScript */
	height: 0px; /* Will be set by JavaScript */
	border: 1px solid #ff69b4; /* Pink solid line - 1px for clear visibility */
	border-radius: 8px;
	background: transparent;
	z-index: 1002; /* Above all other debug visuals (1001) */
	pointer-events: none;
	box-sizing: border-box;
	transition: opacity 0.3s ease;
}

/* Content Area Debug Label */
.content-area-debug-visual::after {
	content: "CONTENT AREA (between Ankh and Navigation) (w) " attr(data-width) " (h) " attr(data-height);
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	background: #ff69b4; /* Pink background */
	color: white;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: bold;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 1003; /* Above the border */
	pointer-events: none;
}

/* Custom Scrollbar Styling - Site-wide */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(237, 31, 131, 0.4) !important; /* OOMAA fuchsia */
  border-radius: 3px !important;
  transition: background 0.3s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(237, 31, 131, 0.6) !important; /* OOMAA fuchsia - more opaque on hover */
}

::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Firefox */
* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(237, 31, 131, 0.4) rgba(0, 0, 0, 0.1) !important; /* OOMAA fuchsia */
}

/* Mobile Scrollbar Styling - OOMAA Pink */
@media (max-width: 1024px) {
  /* Webkit mobile browsers */
  ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(237, 31, 131, 0.6) !important; /* OOMAA pink - more visible on mobile */
    border-radius: 4px !important;
    transition: background 0.3s ease !important;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(237, 31, 131, 0.8) !important; /* OOMAA pink - more opaque on hover */
  }
  
  ::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Content area specific mobile scrollbar styling */
  .content-area::-webkit-scrollbar {
    width: 6px !important;
  }
  
  .content-area::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 3px !important;
  }
  
  .content-area::-webkit-scrollbar-thumb {
    background: rgba(237, 31, 131, 0.5) !important; /* OOMAA pink for content areas */
    border-radius: 3px !important;
  }
  
  .content-area::-webkit-scrollbar-thumb:hover {
    background: rgba(237, 31, 131, 0.7) !important;
  }
}

/* Content area specific scrollbar styling */
.content-area::-webkit-scrollbar {
  width: 4px !important; /* Even thinner for content areas */
}

.content-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 2px !important;
}

.content-area::-webkit-scrollbar-thumb {
  background: rgba(237, 31, 131, 0.3) !important; /* OOMAA fuchsia - slightly more subtle for content areas */
  border-radius: 2px !important;
}

.content-area::-webkit-scrollbar-thumb:hover {
  background: rgba(237, 31, 131, 0.5) !important; /* OOMAA fuchsia - more opaque on hover */
}

/* Ripple animation effect */
.ankh-ripple {
  position: fixed !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important; /* White border - 0.5 alpha */
  border-radius: 50% !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 99999 !important; /* Very high z-index to render on top of everything */
  box-sizing: border-box !important;
  /* Size and animation will be handled by JavaScript */
  /* Border will stay thin even when scaled due to transform */
}

/* Phase 3 Ankh Transformation - Close Button */
.phase-3 .ankh-circle {
  background: transparent !important;
  border: 1px solid #fff !important; /* Same white outline as ankh (1px) */
  outline: none !important; /* Remove any default outline */
  box-shadow: none !important; /* Remove any default box shadow */
  cursor: pointer !important;
  transition: all var(--transition-delay) ease !important;
  position: relative !important;
}

/* Loading Animation Styles */
body.loading {
  overflow: hidden;
  background: #000 !important; /* Black background during loading */
  transition: none !important; /* No transition during loading */
}

/* FORCE HIDE ALL CONTENT during loading - more specific selectors */
body.loading #wrapper,
body.loading #header nav,
body.loading #header .hero-banner,
body.loading .content,
body.loading #main,
body.loading #bg {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep header container visible but hide only navigation and banner */
body.loading #header {
  /* Keep header visible for ankh positioning */
}

/* BUT keep ankh circle and progress ring visible during loading */
body.loading .ankh-circle,
body.loading .ankh-progress-ring,
body.loading .ankh-progress-ring * {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Force black background on ALL elements during loading */
body.loading *,
body.loading *::before,
body.loading *::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Hide specific elements during loading, but allow ankh and progress ring */
body.loading #bg,
body.loading .content-area,
body.loading .functional-area,
body.loading .section-border,
body.loading .debug-page-areas,
body.loading .debug-banner-elements,
body.loading .debug-trimmed-elements,
body.loading .debug-content-elements,
body.loading .content-area-debug-visual,
body.loading .content-area-debug,
body.loading #header nav,
body.loading .nav-circle,
body.loading .connector-line,
body.loading .nav-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important; /* Disable clicks during loading */
}

/* Keep ankh circle visible during loading for progress ring */
body.loading .ankh-circle {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Ensure progress ring is always visible during loading */
body.loading .ankh-progress-ring,
body.loading .ankh-progress-ring * {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* ===== LOADING COMPLETE STATE: SMOOTH TRANSITION TO LANDING PAGE ===== */

/* Ensure black background during loading-complete transition */
body.loading-complete {
  background: #000 !important;
}

/* Disable ALL transitions during loading for performance */
body.loading * {
  transition: none !important;
  animation: none !important;
}

/* Only enable specific transitions during loading-complete */
body.loading-complete {
  transition: background 1s ease-out !important;
}

body.loading-complete .ankh-circle {
  transition: all 1.5s ease-out !important;
}

body.loading-complete #bg,
body.loading-complete .content-area,
body.loading-complete .functional-area {
  transition: opacity 1s ease-out !important;
}

/* Smooth fade-in for final state - minimal transitions */
body:not(.loading):not(.loading-complete) {
  background: #1b1f23 !important; /* Dark background - same as #bg */
  transition: background 0.5s ease-in-out !important;
}

/* Hide ALL debug elements during loading */
body.loading .debug-page-areas,
body.loading .debug-banner-elements,
body.loading .debug-trimmed-elements,
body.loading .debug-content-elements,
body.loading .content-area-debug-visual,
body.loading .content-area-debug,
body.loading .content-debug-intro,
body.loading .content-debug-reel,
body.loading .content-debug-anarch,
body.loading .content-debug-projects,
body.loading .content-debug-contact,
body.loading .section-border,
body.loading .project-top-area::before,
body.loading .project-middle-area::before,
body.loading .project-bottom-area::before,
body.loading .project-main-area::before,
body.loading .project-extra-area::before {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Hide content areas during loading to prevent flash */
body.loading .projects-three-areas,
body.loading .project-top-area,
body.loading .project-middle-area,
body.loading .project-bottom-area,
body.loading .project-main-area,
body.loading .project-extra-area {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Debug elements should be visible after loading-complete, controlled by debug buttons */
/* Removed the rule that was hiding all debug elements during loading-complete */

/* Initial loading ankh state */
body.loading .ankh-circle {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 50vmin !important; /* 50% of shortest edge (width or height) */
  height: 50vmin !important; /* 50% of shortest edge (width or height) */
  z-index: 9999;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  /* Ensure 1:1 aspect ratio on all screen sizes */
  aspect-ratio: 1 / 1 !important;
  min-width: 50vmin !important;
  min-height: 50vmin !important;
  max-width: 50vmin !important;
  max-height: 50vmin !important;
  /* Hardware acceleration for smooth animations */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

body.loading .ankh-circle img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  /* Ensure 1:1 aspect ratio */
  aspect-ratio: 1 / 1 !important;
}

/* Circular progress ring */
.ankh-progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ankh-progress-ring circle {
  fill: none;
  stroke: var(--oomaa-pink); /* OOMAA pink progress bar */
  stroke-width: 1.97; /* 10% thicker than 1.79 (1.79 * 1.1 = 1.97) */
  stroke-linecap: round;
  stroke-dasharray: 0 283; /* Start at 0% progress */
  transition: stroke-dasharray 0.2s ease-out;
  will-change: stroke-dasharray; /* Optimize for animation */
}

/* Ensure progress ring animations are always smooth */
body.loading .ankh-progress-ring circle {
  transition: stroke-dasharray 0.2s ease-out !important;
  animation: none !important;
}

/* Loading completion states */
body.loading-complete .ankh-circle {
  transition: all 0.27s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* 3x faster with slow ease-in at end */
}

/* Background fades in first (slower) */
body.loading-complete #bg {
  transition: opacity 2s ease-in-out !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Banner fades in when background is at 50% (1s delay) - Higher specificity to override loading state */
body.loading-complete .content {
  transition: opacity 2s ease-in-out 1s, filter 2s ease-in-out 1s, transform 0.3s ease !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: blur(0px) !important;
  transform: scale(1) !important;
}

/* Ensure banner is visible when loading-complete is active - Even higher specificity */
body:not(.loading).loading-complete .content {
  opacity: 1 !important;
  visibility: visible !important;
  filter: blur(0px) !important;
  transform: scale(1) !important;
}

/* Banner click functionality */
.content {
  cursor: pointer !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.content:hover {
  transform: scale(1.02) !important; /* Subtle scale on hover */
  opacity: 0.9 !important; /* Slight fade on hover */
}

/* Banner fade-out effect for Phase 3 transition - Higher specificity to override phase-3 rules */
body.phase-3 .content.banner-blur-out[style] {
  opacity: 0 !important;
  visibility: hidden !important; /* Ensure complete hiding */
  display: none !important; /* Remove from layout flow completely */
  filter: blur(10px) !important;
  transform: scale(0.95) !important;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out, display 0.5s ease-out, filter 0.5s ease-out, transform 0.5s ease-out !important;
  pointer-events: none !important; /* Disable clicks when faded out */
}

/* Banner restoration - Override loading-complete transition delay */
body.loading-complete .content.banner-restored {
  opacity: 1 !important;
  visibility: visible !important;
  filter: blur(0px) !important;
  transform: scale(1) !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important; /* Allow hover transitions */
}

/* Banner hover effect - Higher specificity to override all other rules */
body.loading-complete .content:hover {
  transform: scale(1.02) !important; /* Subtle scale on hover */
  opacity: 0.9 !important; /* Slight fade on hover */
}

/* Banner hover effect - Even higher specificity for banner-restored */
body.loading-complete .content.banner-restored:hover {
  transform: scale(1.02) !important; /* Subtle scale on hover */
  opacity: 0.9 !important; /* Slight fade on hover */
}

/* Nav functional area transitions */
body.loading-complete .nav-functional-area {
  transition: top 0.5s ease-in-out, height 0.5s ease-in-out !important; /* Force nav area transitions */
}

/* During loading, we can hide/disable pointer events, but DO NOT redefine 'transition' */
body.loading #header nav {
  opacity: 0;
  pointer-events: none;
}

/* When loading completes, fade in—no new 'transition' decl here */
body.loading-complete #header nav {
  opacity: 1;
  pointer-events: auto;
}

/* Better menu system - simple and reliable */
body.loading-complete #header nav {
  display: block !important;
}

/* Menu ready state - will be applied by JavaScript */
body.menu-ready #header nav {
  opacity: 1 !important;
  pointer-events: auto !important;
}


body.loading-complete #header nav a {
  display: flex !important; /* Use flex to match base style and prevent text shifting */
  align-items: center !important;
  justify-content: center !important;
}

/* Disable nav functionality during loading only */
body.loading #header nav {
  pointer-events: none !important;
}

/* Re-enable nav functionality after loading completes - but not during loading-complete */
body:not(.loading):not(.loading-complete) #header nav {
  pointer-events: auto !important;
}

/* Hide nav during loading only (not loading-complete) */
body.loading #header nav {
  display: none !important; /* Hidden during loading */
}

body.loading #header nav a {
  display: none !important; /* Hidden during loading */
}

/* Keep nav during loading only (not loading-complete) */
body.loading #header nav {
  display: block !important; /* Hidden during loading */
}

body.loading #header nav a {
  display: flex !important; /* Hidden during loading */
}

/* Keep debug elements visible during loading but hide content area debug */
body.loading .content-area-debug {
  display: none !important;
}

/* Ensure debug buttons are always visible and clickable */
body.loading .debug-button,
body.loading-complete .debug-button {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 999999 !important; /* Highest z-index to ensure visibility above everything */
}

/* ANARCH layout - FIXED to match Intro section */
.anarch-grid { 
  display: grid; 
  gap: 1.5rem; 
}
.anarch-copy   { 
  grid-area: copy; 
}
.anarch-visual { 
  grid-area: visual; 
}

/* Desktop Landscape (min-width: 1024px) - Side by side layout like Intro using CSS Grid */
@media (min-width: 1024px) and (orientation: landscape) {
  body.article-anarch .content-area { 
    overflow: hidden !important; 
    padding-top: 0 !important; 
    padding-left: 20px !important; 
    padding-right: 20px !important; 
    padding-bottom: 20px !important; 
  }
  body.article-anarch .content-inner { 
    justify-content: center !important; 
    align-items: center !important; 
  }
  
  /* Use CSS Grid like Intro section - with maximum specificity */
  body.article-anarch .dynamic-content#Anarch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: var(--phase3-content-area-height, 60vh) !important;
    max-height: var(--phase3-content-area-height, 60vh) !important;
    overflow: hidden !important;
  }
  
  /* Override any conflicting flex rules */
  body.article-anarch .dynamic-content#Anarch.anarch-grid { 
    display: grid !important;
  }
  
  /* Visual on the left */
  body.article-anarch #Anarch .anarch-visual {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
  }
  
  body.article-anarch #Anarch .anarch-visual .three-embed {
    max-width: 100% !important;
    width: 100% !important; /* Fill the container width */
    height: auto !important; /* Let aspect decide height */
    display: block !important;
    box-sizing: border-box !important;
    margin-left: auto !important; 
    pointer-events: none !important;
    touch-action: none !important;
  }
  
  /* Text content on the right - create a container for proper vertical centering */
  body.article-anarch #Anarch .text-container {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    align-items: stretch !important;
    height: 100% !important;
    width: 100% !important;
  }
  
  /* Inner wrapper centers the block vertically and scrolls as one */
  body.article-anarch #Anarch .text-container .text-container-inner {
    margin: auto 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  body.article-anarch #Anarch .text-container h1.major { 
    margin: 0 0 0.5rem 0 !important; 
    width: 100% !important;
    text-align: left !important;
  }
  
  body.article-anarch #Anarch .text-container p { 
    margin: 0 !important; 
    width: 100% !important;
    text-align: left !important;
  }
}
/* Mobile Landscape (max-width: 768px) - Side by side layout using CSS Grid */
@media (max-width: 768px) and (orientation: landscape) {
  body.article-anarch .content-area { 
    padding: 10px !important; 
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    touch-action: pan-y !important; 
  }
  body.article-anarch .content-inner { 
    justify-content: flex-start !important; 
    align-items: stretch !important; 
  }
  
  /* Use CSS Grid for mobile landscape too - with maximum specificity */
  body.article-anarch .dynamic-content#Anarch { 
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 15px !important; 
    width: 100% !important; 
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: var(--phase3-content-area-height, 60vh) !important;
    max-height: var(--phase3-content-area-height, 60vh) !important; /* Ensure max-height is respected */
    overflow: hidden !important; /* Prevent grid container from overflowing */
  }
  
  /* Override any conflicting flex rules */
  body.article-anarch .dynamic-content#Anarch.anarch-grid { 
    display: grid !important;
  }
  
  /* Visual on the left */
  body.article-anarch #Anarch .anarch-visual {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    display: flex !important; 
    align-items: stretch !important; 
    justify-content: flex-end !important; 
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important; 
    padding: 0 !important;
    pointer-events: none !important; 
    touch-action: none !important;
  }
  
  body.article-anarch #Anarch .anarch-visual .three-embed {
    width: 100% !important; 
    height: 100% !important; 
    max-width: 100% !important;
    max-height: 100% !important; 
    display: block !important; 
    box-sizing: border-box !important;
    pointer-events: none !important; 
    touch-action: none !important;
  }
  
  /* Text content on the right */
  body.article-anarch #Anarch h1.major { 
    grid-column: 2 !important;
    margin: 0 0 0.5rem 0 !important; 
    width: 100% !important;
    box-sizing: border-box !important; 
  }
  
  body.article-anarch #Anarch p { 
    grid-column: 2 !important;
    margin: 0 0 0.75rem 0 !important; 
    width: 100% !important;
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    box-sizing: border-box !important; 
  }
  
  body.article-anarch #Anarch * { 
    box-sizing: border-box !important; 
  }
}

/* iPad Landscape (min-width: 769px and max-width: 1024px) - Side by side layout using CSS Grid */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  body.article-anarch .content-area { 
    padding: 15px !important; 
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    touch-action: pan-y !important; 
  }
  body.article-anarch .content-inner { 
    justify-content: flex-start !important; 
    align-items: stretch !important; 
  }
  
  /* Use CSS Grid for iPad landscape too - with maximum specificity */
  body.article-anarch .dynamic-content#Anarch { 
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 20px !important; 
    width: 100% !important; 
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: var(--phase3-content-area-height, 60vh) !important;
    max-height: var(--phase3-content-area-height, 60vh) !important; /* Ensure max-height is respected */
    overflow: hidden !important; /* Prevent grid container from overflowing */
  }
  
  /* Override any conflicting flex rules */
  body.article-anarch .dynamic-content#Anarch.anarch-grid { 
    display: grid !important;
  }
  
  /* Visual on the left */
  body.article-anarch #Anarch .anarch-visual {
    grid-column: 1 !important;
    display: flex !important; 
    align-items: stretch !important; 
    justify-content: flex-end !important; 
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important; 
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  body.article-anarch #Anarch .anarch-visual .three-embed { 
    width: 100% !important; 
    height: 100% !important; 
    max-width: 100% !important;
    max-height: 100% !important; 
    display: block !important; 
    box-sizing: border-box !important; 
  }
  
  /* Text content on the right */
  body.article-anarch #Anarch h1.major { 
    grid-column: 2 !important;
    margin: 0 0 0.5rem 0 !important; 
    width: 100% !important;
    box-sizing: border-box !important; 
  }
  
  body.article-anarch #Anarch p { 
    grid-column: 2 !important;
    margin: 0 0 0.75rem 0 !important; 
    width: 100% !important;
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    box-sizing: border-box !important; 
  }
  
  body.article-anarch #Anarch * { 
    box-sizing: border-box !important; 
  }
}

/* Mobile Portrait (max-width: 768px) - Stacked layout using CSS Grid */
@media (max-width: 768px) and (orientation: portrait) {
  body.article-anarch .content-area { 
    padding: 15px !important; 
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    touch-action: pan-y !important; 
    overscroll-behavior: contain !important; 
  }
  body.article-anarch .content-inner { 
    justify-content: flex-start !important; 
    align-items: stretch !important; 
    height: auto !important; 
    min-height: 100% !important; 
  }
  
  /* Use CSS Grid for mobile portrait - single column with maximum specificity */
  body.article-anarch .dynamic-content#Anarch { 
    display: grid !important; 
    grid-template-columns: 1fr !important; 
    grid-template-rows: auto 1fr auto !important; 
    gap: 15px !important; 
    height: auto !important; 
    width: 100% !important; 
    box-sizing: border-box !important; 
  }
  
  /* Override any conflicting rules */
  body.article-anarch .dynamic-content#Anarch.anarch-grid { 
    display: grid !important;
  }
  
  /* Title at the top */
  body.article-anarch #Anarch h1.major { 
    grid-row: 1 !important;
    grid-column: 1 !important;
    margin: 0 0 1rem 0 !important; 
    text-align: left !important; 
    width: 100% !important;
    order: 1 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Visual in the middle */
  body.article-anarch #Anarch .anarch-visual { 
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    pointer-events: none !important;
    touch-action: none !important;
    min-height: 250px !important;
  }
  
  body.article-anarch #Anarch .anarch-visual .three-embed {
    max-width: 100% !important; 
    max-height: 100% !important; 
    width: 100% !important; 
    height: 100% !important; 
    display: block !important; 
    pointer-events: none !important; 
    touch-action: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
  
  /* Text at the bottom - ensure it's directly in the grid container */
  body.article-anarch #Anarch p { 
    grid-row: 3 !important;
    grid-column: 1 !important;
    margin: 0 0 1rem 0 !important; 
    text-align: left !important; 
    width: 100% !important;
    order: 3 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* In portrait mode, make text-container participate in grid layout */
  body.article-anarch #Anarch .text-container {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: block !important;
    order: 1 !important;
  }
  
  /* Ensure title is positioned correctly within text-container */
  body.article-anarch #Anarch .text-container h1.major {
    grid-row: 1 !important;
    grid-column: 1 !important;
    order: 1 !important;
  }
  
  /* Ensure text is positioned correctly within text-container */
  body.article-anarch #Anarch .text-container p {
    grid-row: 2 !important;
    grid-column: 1 !important;
    order: 2 !important;
  }
}

/* Desktop Portrait - Fix content overflow */
@media (min-width: 769px) and (orientation: portrait) {
  body.article-anarch .content-area { 
    padding: 20px !important; 
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch !important; 
    touch-action: pan-y !important; 
    max-height: var(--phase3-content-area-height, 60vh) !important;
  }
  
  body.article-anarch .content-inner { 
    justify-content: flex-start !important; 
    align-items: stretch !important; 
    height: auto !important; 
    min-height: 100% !important; 
  }
  
  /* Use CSS Grid for desktop portrait - single column with maximum specificity */
  body.article-anarch .dynamic-content#Anarch {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 20px !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  
  /* Override any conflicting rules */
  body.article-anarch .dynamic-content#Anarch.anarch-grid { 
    display: grid !important;
  }
  
  /* Title at the top - ensure it's directly in the grid container */
  body.article-anarch #Anarch h1.major {
    grid-row: 1 !important;
    grid-column: 1 !important;
    margin: 0 0 1rem 0 !important; 
    text-align: left !important; 
    width: 100% !important;
    order: 1 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Visual in the middle */
  body.article-anarch #Anarch .anarch-visual {
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    pointer-events: none !important;
    touch-action: none !important;
    max-height: 60vh !important;
    overflow: hidden !important;
    min-height: 300px !important;
    order: 2 !important;
  }
  
  body.article-anarch #Anarch .anarch-visual .three-embed {
    max-width: 100% !important; 
    max-height: 100% !important; 
    width: 100% !important; 
    height: 100% !important; 
    display: block !important; 
    pointer-events: none !important; 
    touch-action: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
  
  /* Text at the bottom - ensure it's directly in the grid container */
  body.article-anarch #Anarch p { 
    grid-row: 3 !important;
    grid-column: 1 !important;
    margin: 0 0 1rem 0 !important; 
    text-align: left !important; 
    width: 100% !important;
    max-height: 30vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    order: 3 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Override text-container positioning for portrait mode */
  body.article-anarch #Anarch .text-container {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: block !important;
    order: 1 !important;
  }
  
  /* Ensure title is positioned correctly within text-container */
  body.article-anarch #Anarch .text-container h1.major {
    grid-row: 1 !important;
    grid-column: 1 !important;
    order: 1 !important;
  }
  
  /* Ensure text is positioned correctly within text-container */
  body.article-anarch #Anarch .text-container p {
    grid-row: 2 !important;
    grid-column: 1 !important;
    order: 2 !important;
  }
  
  /* In portrait mode, make text-container participate in grid layout */
  body.article-anarch #Anarch .text-container {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: block !important;
    order: 1 !important;
  }
  
  /* Ensure title is positioned correctly within text-container */
  body.article-anarch #Anarch .text-container h1.major {
    grid-row: 1 !important;
    grid-column: 1 !important;
    order: 1 !important;
  }
  
  /* Ensure text is positioned correctly within text-container */
  body.article-anarch #Anarch .text-container p {
    grid-row: 2 !important;
    grid-column: 1 !important;
    order: 2 !important;
  }
}

/* 3D viewer container styling - aspect ratio controlled by media queries */
.anarch-visual .three-embed {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
  border: none; /* No border */
  min-height: 0 !important; /* allow portrait aspect to compute height from width */
  min-width: 0 !important;
}

/* Ensure 3D container is properly sized when Anarch article is active */
#Anarch.active .three-embed {
  display: block !important;
  width: 100% !important;
  height: auto !important; /* Let aspect ratio control height */
  visibility: visible !important;
  position: relative !important;
  opacity: 1 !important;
  background: transparent !important; /* No background */
}

/* 3D container styling - consistent 1:1.3 aspect ratio */
/* Removed conflicting width/aspect rules - now controlled by media queries */

/* Base anarch-visual styling - removed conflicting min-width/height */
.anarch-visual {
  display: block !important;
  position: relative !important;
}

/* Anarch title styling */
.anarch-title {
  display: none; /* Hidden by default */
}

/* Horizontal Layout: Hide separate title, show title in copy */
@media (min-width: 1024px) and (orientation: landscape) {
  .anarch-title {
    display: none !important;
  }
  
  .anarch-copy h1 {
    display: block !important;
  }
}

/* Vertical Layout: Show separate title, hide title in copy */
@media (orientation: portrait) {
  .anarch-title {
    display: block !important;
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 1rem;
  }
  
  .anarch-copy h1 {
    display: none !important;
  }
}

/* Ensure visual width never exceeds safe-zone and centers in any mode */
body.article-anarch #Anarch .anarch-visual {
  width: min(100%, var(--safe-zone-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ====== FINAL UNIFIED RULES FOR INTRO + ANARCH ====== */
/* PORTRAIT: single column, Title → Visual → Text; visuals centered; width = 100% of content area */
@media (orientation: portrait) {
  /* Intro */
  body.article-intro .intro-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    row-gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
    height: auto !important;
  }
  body.article-intro .intro-title { order: 1 !important; }
  body.article-intro .intro-visual { order: 2 !important; display: grid !important; place-items: center !important; }
  body.article-intro .intro-copy   { order: 3 !important; }
  /* Intro visual uses intrinsic ratio: image fills width, height auto */
  body.article-intro .intro-visual img {
    display: block !important;
    width: 100% !important;
    height: auto !important; /* intrinsic aspect preserved */
    margin: 0 auto !important;
  }

  /* Anarch */
  body.article-anarch #Anarch {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important; /* title, visual, text */
    row-gap: 16px !important;
    height: auto !important;
  }
  body.article-anarch #Anarch .anarch-title { order: 1 !important; }
  body.article-anarch #Anarch .anarch-visual { order: 2 !important; display: grid !important; place-items: center !important; }
  body.article-anarch #Anarch .anarch-copy   { order: 3 !important; }
  body.article-anarch #Anarch .anarch-visual .three-embed {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 5 / 6 !important; /* Anarch portrait ratio */
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
  }
  body.article-anarch #Anarch .anarch-visual .three-embed canvas {
    position: absolute !important;
    top: 0; left: 0; width: 100% !important; height: 100% !important;
    object-fit: contain !important;
  }
}

/* LANDSCAPE: two columns; Visual LEFT (content justified right), Text RIGHT (scrolls); fit, no crop */
@media (min-width: 1024px) and (orientation: landscape) {
  /* Intro */
  body.article-intro .intro-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 24px !important;
    align-items: center !important;
    height: var(--phase3-content-area-height, 60vh) !important;
  }
  body.article-intro .intro-visual { display: grid !important; justify-items: end !important; }
  body.article-intro .intro-visual img { height: 100% !important; width: auto !important; max-height: 100% !important; }
  body.article-intro .intro-copy { overflow: auto !important; }

  /* Anarch */
  body.article-anarch #Anarch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 24px !important;
    align-items: stretch !important;
    height: var(--phase3-content-area-height, 60vh) !important;
  }
  body.article-anarch #Anarch .anarch-visual { display: grid !important; justify-items: end !important; }
  body.article-anarch #Anarch .anarch-visual .three-embed,
  body.article-anarch #Anarch .anarch-visual canvas {
    height: 100% !important; width: auto !important; max-height: 100% !important;
  }
  body.article-anarch #Anarch .text-container { overflow-y: auto !important; overflow-x: hidden !important; }
}

/* Grid area assignment for 3D container */
.anarch-grid .anarch-visual {
  grid-area: visual !important;
}

/* Ensure anarch section works within content area constraints */
#Anarch.dynamic-content {
  height: auto !important;
  width: 100% !important;
}

/* Force correct order for horizontal layout with maximum specificity */
@media (min-width: 1024px) and (orientation: landscape) {
  #Anarch .anarch-grid {
    flex-direction: row !important; /* Ensure row direction */
  }
  
  #Anarch .anarch-grid .anarch-copy {
    order: 2 !important; /* Text on RIGHT */
  }
  
  #Anarch .anarch-grid .anarch-visual {
    order: 1 !important; /* 3D container on LEFT */
  }
  
  /* Hide scrollbar on wide screens for Anarch section (horizontal layout) */
  #Anarch .content-area {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    max-height: none !important;
  }
}



/* Ensure Three.js canvas is visible and properly positioned */
.three-embed canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  background: transparent !important; /* No background */
  min-height: 200px !important; /* Ensure minimum height for 3D canvas */
  min-width: 200px !important; /* Ensure minimum width for 3D canvas */
}

/* Fix stacking context issue: ensure 3D viewer containers don't interfere with navigation */
.anarch-visual,
.three-embed {
  z-index: 1 !important; /* Keep 3D viewer containers at low z-index */
  position: relative !important; /* Maintain positioning but create controlled stacking context */
}

/* Ensure navigation is always above 3D viewer content on all screen sizes */
#header nav {
  z-index: 999999 !important; /* Highest z-index - always on top of everything */
  position: fixed !important; /* Fixed positioning maintains stacking context */
  pointer-events: auto !important; /* Always allow pointer events */
  /* Prevent navigation position flickering during project switching */
  transition: top 0.1s ease-out !important; /* Smooth but fast transition */
}



/* Ensure navigation is always clickable in all phases and states */
#header nav,
#header nav ul,
#header nav ul li,
#header nav ul li a {
  z-index: 999999 !important; /* Highest z-index - always on top of everything */
  pointer-events: auto !important; /* Always allow pointer events */
}



/* Additional safeguards for navigation during transitions and resize */
.phase-3 #header nav,
.phase-3 #header nav ul,
.phase-3 #header nav ul li,
.phase-3 #header nav ul li a {
  z-index: 999999 !important; /* Highest z-index - always on top of everything */
  pointer-events: auto !important;
}

/* Stabilize navigation position in Phase 3 to prevent flickering */
.phase-3 #header nav {
  transition: top 0.05s ease-out !important; /* Very fast transition to minimize flickering */
  will-change: auto !important; /* Optimize for position changes */
}

/* Completely stabilize nav functional area during project switching */
body.project-switching .nav-functional-area {
  transition: top 0.5s ease-in-out, height 0.5s ease-in-out !important; /* Allow smooth transitions */
  will-change: auto !important;
}

/* Stabilize nav functional area in all phases */
.nav-functional-area {
  backface-visibility: hidden !important; /* Prevent visual glitches */
  -webkit-backface-visibility: hidden !important;
}

.resizing #header nav,
.resizing #header nav ul,
.resizing #header nav ul li,
.resizing #header nav ul li a {
  z-index: 999999 !important; /* Highest z-index - always on top of everything */
  pointer-events: auto !important;
}

/* === CANONICAL: Intro grid (v1) === */
.intro-grid {
  display: flex;
  gap: 2rem;
  align-items: center; /* Center both sections vertically within content area */
  height: var(--phase3-content-area-height, 60vh);
  /* Grid container for stable layout - left-aligned in landscape mode */
}





/* Apply maximum image size constraint only when content area is large enough */
@media (min-height: 740px) {
  .intro-visual img {
    max-height: 700px; /* Maximum image height when content area is tall enough */
  }
}

/* Ensure layout stability and prevent size jumping */
.intro-grid {
  /* Prevent layout shifts */
  contain: layout style;
  /* Ensure consistent sizing */
  will-change: auto;
}

/* ===== Intro: two content areas (left/right) ===== */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;       /* two equal content areas */
  column-gap: 30px;                     /* 15px + 15px seam (your "trim to center") */
  height: var(--phase3-content-area-height, 60vh);
  align-items: stretch;                  /* children fill the area */
  width: 100%;
}

/* Make children allow scrolling layouts to shrink properly in grid */
.intro-visual,
.intro-copy { min-width: 0; min-height: 0; }

/* Left content area: image fits (no overflow), vertically centered, right-justified */
.intro-visual {
  padding-right: 15px;                  /* 15px inward from the center seam */
  display: flex;
  align-items: center;                   /* vertical centering */
  justify-content: flex-end;             /* right-justify image to center seam */
  overflow: hidden;                      /* prevent image from overflowing container */
  /* Ensure container respects grid boundaries */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.intro-visual img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;                          /* let image scale naturally */
  object-fit: contain;                   /* never overflow */
  /* Dynamic resizing: fit maximum content area height or 700px (whichever is smaller) */
  max-height: min(100%, 700px);
  /* Always center vertically and justify to right side of content left */
  display: block;
  margin: auto 0;                        /* vertical centering */
  /* Ensure image stays within content LEFT boundaries */
  box-sizing: border-box;
  /* Force image to respect container constraints */
  overflow: hidden;
}

/* Right content area: vertical middle for title+text as a unit, but scroll if too tall */
.intro-copy {
  padding-left: 15px;                    /* 15px inward from the center seam */
  display: flex;
  align-items: stretch;                  /* let inner box control scroll */
  width: 100%;
}
.intro-copy-inner {
  margin: auto 0;                        /* vertical centering as a single block */
  max-height: 100%;                      /* never exceed the right area height */
  overflow: auto;                        /* if too tall → scroll */
}

/* Title spacing; text is left-justified by default */
.intro-title .major,
.intro-title h1,
.intro-title h2 { margin: 0 0 1rem 0; }

/* ===== Portrait / narrow: Title → Image → Text (stacked) ===== */
@media (orientation: portrait) {
  .intro-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    height: auto;
    row-gap: 1.25rem;
  }
  .intro-title  { order: 1; }
  .intro-visual { order: 2; padding-right: 0; }
  .intro-copy   { order: 3; padding-left: 0; }
  .intro-visual img {
    width: 100%;
    height: auto;                        /* width-first on portrait */
    max-height: min(100%, 700px);        /* same height constraint as landscape */
  }
  .intro-copy-inner {
    margin: 0;                           /* top-align when stacked */
    max-height: 80vh;                    /* Allow scrolling on mobile if content is tall */
    overflow: auto;                      /* Enable scrolling on mobile */
  }
}

/* Prevent text container from causing layout issues */
.intro-copy {
  /* Ensure text container is stable */
  contain: layout style;
  /* Prevent text from breaking layout */
  min-width: 0;
  max-width: 100%;
}
/* Portrait / narrow: stacked Title → Image → Text */
@media (orientation: portrait) {
  .intro-grid { 
    flex-direction: column; 
    height: auto; 
    justify-content: flex-start; /* Stack elements from top */
  }
  .intro-title  { order: 1; }
  .intro-visual { 
    order: 2; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; /* Prevent image from overflowing container */
    width: 100%; /* Image conforms to content area width */
  }
  .intro-copy   { 
    order: 3; 
    /* Text container properties inherited from unified .intro-copy rules above */
    overflow-y: auto; /* Vertical scrollbar for text if needed */
    overflow-x: hidden; /* No horizontal scrollbar */
    width: 100%; /* Text takes full width */
  }
  .intro-visual img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    /* Image conforms to content area width */
  }
}





/* Title spacing, mirrors Anarch headings */
.intro-title .major,
.intro-title h1,
.intro-title h2 { margin: 0 0 .5rem 0; }

/* Unified text container - all text elements in single resizing box */
.intro-copy {
  /* Base text container properties */
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  
  /* Text spacing and layout */
  gap: 0.75rem;
  
  /* Ensure text container is robust */
  box-sizing: border-box;
  word-wrap: break-word;
  hyphens: auto;
}

/* All text elements inherit consistent sizing from parent */
.intro-copy h1,
.intro-copy h2,
.intro-copy p,
.intro-copy .major {
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  /* Ensure text elements are robust */
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Title gets slightly larger but proportional */
.intro-copy h1,
.intro-copy .major {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  /* Ensure title doesn't break layout */
  max-width: 100%;
  overflow-wrap: break-word;
}







/* === fixes3: Intro grid canonical === */
/* Note: Duplicate rules removed - using canonical version above */
/* Responsive overflow: only show scrollbar when needed */
.phase-3 .content-area {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Ensure consistent scrolling behavior across all sections */
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 31, 131, 0.3) rgba(0, 0, 0, 0.1);
}

/* Consistent scrolling for all content areas */
.content-area {
  /* Ensure consistent scrolling behavior */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 31, 131, 0.3) rgba(0, 0, 0, 0.1);
  /* Ensure content area respects viewport boundaries */
  max-height: 100vh;
  max-height: 100dvh; /* Use dynamic viewport height on mobile */
  box-sizing: border-box;
}

/* Mobile-specific viewport handling */
@media screen and (max-width: 1023px) {
  .content-area {
    /* Use safe area insets on mobile */
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    /* Ensure content doesn't overflow */
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  /* Phase 3 content area mobile fixes */
  body.phase3 .content-area {
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* iOS-specific viewport fixes */
@supports (-webkit-touch-callout: none) {
  .content-area {
    /* iOS-specific viewport handling */
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  
  body.phase3 .content-area {
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* On wide screens, show scrollbar when content overflows */
@media (min-width: 1024px) and (orientation: landscape) {
  .phase-3 .content-area {
    overflow-y: auto !important;
  }
}




/* === fixes3: Anarch portrait ordering === */
@media (min-width:1024px) and (orientation:landscape){
  .anarch-title{display:none;}
  .anarch-copy > .major{display:block;}
}
@media (max-width:1023.98px), (orientation:portrait){
  .anarch-title{display:block;order:1;}
  .anarch-visual{order:2;}
  .anarch-copy{order:3;}
  .anarch-copy > .major{display:none;}
}


/* fixes3: ensure content-area receives wheel/touch */
.phase-3 .content-area, .phase-3 .content-area * { pointer-events: auto; }

/* === Projects Three-Area Structure === */
.projects-three-areas {
	/* height and width will be set by JavaScript */
	box-sizing: border-box;
	/* JavaScript will set dimensions and positioning dynamically */
	/* Use CSS Grid for precise layout control */
	display: grid;
	grid-template-columns: 1fr;
	/* JavaScript will set position: absolute and coordinates */
	z-index: 10;
	/* FIXED: Constrain to 1400px maximum for consistent project widths */
	max-width: 1400px !important;
	max-height: 100%;
	overflow: hidden !important;
	/* Remove margin since we're using absolute positioning */
	margin: 0;
	/* Ensure responsive behavior */
	transition: width 0.3s ease, height 0.3s ease;
}

/* Project Top Area - JavaScript will set height dynamically */
.project-top-area {
  /* height will be set by JavaScript */
  min-height: 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; /* Needed for ::before pseudo-element positioning */
  /* Grid positioning */
  grid-row: 1;
  grid-column: 1;
  /* JavaScript will set dimensions dynamically */
  /* Ensure area fills grid cell */
  width: 100% !important;
  height: 100% !important;
  /* Smooth transitions for responsive behavior */
  transition: width 0.3s ease, height 0.3s ease;
}

/* Project Bottom Area - JavaScript will set height dynamically */
.project-bottom-area {
  /* height will be set by JavaScript */
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Needed for ::before pseudo-element positioning */
  /* Grid positioning */
  grid-row: 3;
  grid-column: 1;
  /* JavaScript will set dimensions dynamically */
  /* Ensure area fills grid cell */
  width: 100% !important;
  height: 100% !important;
  /* Smooth transitions for responsive behavior */
  transition: width 0.3s ease, height 0.3s ease;
}

/* Project Middle Area - remaining space */
.project-middle-area {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-y: auto !important; /* Allow vertical scrolling */
  overflow-x: hidden !important; /* Prevent horizontal scrolling */
  position: relative; /* Needed for ::before pseudo-element positioning */
  /* Grid positioning */
  grid-row: 2;
  grid-column: 1;
  /* JavaScript will set dimensions dynamically */
  /* Ensure area fills grid cell */
  width: 100% !important;
  height: 100% !important;
  /* Smooth transitions for responsive behavior */
  transition: width 0.3s ease, height 0.3s ease;
  /* Enable touch scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Project Main Area - sized for video content */
.project-main-area {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-align: center;
  overflow-y: auto !important; /* Allow vertical scrolling when content overflows */
  overflow-x: hidden !important; /* Prevent horizontal scrolling */
  position: relative; /* Needed for ::before pseudo-element positioning */
  
  /* CRITICAL: Ensure main area can accommodate fixed video dimensions */
  min-width: 1200px !important;
  width: 100% !important;
  
  /* Smooth transitions for responsive behavior */
  transition: width 0.3s ease, height 0.3s ease;
  /* Enable touch scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Allow scrolling in Main area for mobile compatibility */
.project-main-area * {
  overflow: visible !important; /* Allow content to be scrollable */
}

/* Video container styling - EXACT DIMENSIONS FOR ALL PROJECTS */
.project-main-area .video-container {
  width: min(1200px, 100%) !important;
  height: auto !important;          /* let JS set height on the container */
  padding: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.project-main-area .video-container iframe {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  border: none !important;
  width: 100% !important;
  height: 100% !important;          /* match container height exactly */
  max-width: none !important;
  max-height: none !important;
  min-width: none !important;
  min-height: none !important;
  box-sizing: border-box !important;
}


/* Project Extra Area - remaining space */
.project-extra-area {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-align: center;
  overflow: hidden;
  position: relative; /* Needed for ::before pseudo-element positioning */
  flex: 1; /* Take remaining space */
  
  /* Smooth transitions for responsive behavior */
  transition: width 0.3s ease, height 0.3s ease;
}

/* Extra content scaling system - updated for fluid scaling */
.extra-content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform-origin: center center;
  opacity: 1;
  transform: scale(1);
}

/* Legacy classes for backward compatibility - now handled by JavaScript */
.extra-content.scaled {
  /* Styles now applied directly via JavaScript for fluid scaling */
}

.extra-content.hidden {
  /* Styles now applied directly via JavaScript for fluid scaling */
}

/* Extra area images */
.extra-content img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

/* Extra area text */
.extra-content p {
  margin: 10px 0;
  line-height: 1.4;
}

/* Projects debug overlays - only visible when content debug is enabled */
body:not(.content-hidden) .project-top-area::before {
  content: "TOP (w) " attr(data-width) " (h) " attr(data-height);
  position: absolute;
  top: 5px;
  left: 10px;
  background: #ff0000;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10000;
  white-space: nowrap;
  display: block !important;
}

body:not(.content-hidden) .project-middle-area::before {
  content: "MIDDLE (w) " attr(data-width) " (h) " attr(data-height);
  position: absolute;
  top: 5px;
  left: 10px;
  background: #ff0000;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10000;
  white-space: nowrap;
  display: block !important;
}

body:not(.content-hidden) .project-bottom-area::before {
  content: "BOTTOM (w) " attr(data-width) " (h) " attr(data-height);
  position: absolute;
  top: 5px;
  left: 10px;
  background: #ff0000;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10000;
  white-space: nowrap;
  display: block !important;
}

/* Project Main Area - Yellow debug label on right side */
body:not(.content-hidden) .project-main-area::before {
  content: "MAIN (w) " attr(data-width) " (h) " attr(data-height);
  position: absolute;
  top: 5px;
  right: 10px;
  background: #ffff00;
  color: black;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10000;
  white-space: nowrap;
  display: block !important;
}

/* Project Extra Area - Yellow debug label on right side */
body:not(.content-hidden) .project-extra-area::before {
  content: "EXTRA (w) " attr(data-width) " (h) " attr(data-height);
  position: absolute;
  top: 5px;
  right: 10px;
  background: #ffff00;
  color: black;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10000;
  white-space: nowrap;
  display: block !important;
}

/* Projects debug overlays - draw on top via ::before so content never moves */
body:not(.content-hidden) .project-top-area,
body:not(.content-hidden) .project-middle-area,
body:not(.content-hidden) .project-bottom-area,
body:not(.content-hidden) .project-main-area,
body:not(.content-hidden) .project-extra-area {
  position: relative !important; /* establish containing block for overlay */
}

body:not(.content-hidden) .project-top-area::before,
body:not(.content-hidden) .project-middle-area::before,
body:not(.content-hidden) .project-bottom-area::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  outline: 0.5px dashed #ff0000 !important; /* red for containers */
  background: transparent !important; /* debug-test: ensure no background blocks content */
  pointer-events: none !important;
  z-index: 1000;
  transition: none !important; /* debug-test: prevent flashing */
}

/* Yellow debug overlays for new areas */
body:not(.content-hidden) .project-main-area::before,
body:not(.content-hidden) .project-extra-area::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  outline: 0.5px dashed #ffff00 !important; /* yellow for inner areas */
  background: transparent !important; /* debug-test: ensure no background blocks content */
  pointer-events: none !important;
  z-index: 1000;
  transition: none !important; /* debug-test: prevent flashing */
}

/* Hide debug elements when not in debug mode */
body.content-hidden .project-top-area::before,
body.content-hidden .project-middle-area::before,
body.content-hidden .project-bottom-area::before,
body.content-hidden .project-main-area::before,
body.content-hidden .project-extra-area::before {
  display: none;
}

body.content-hidden .project-top-area,
body.content-hidden .project-middle-area,
body.content-hidden .project-bottom-area,
body.content-hidden .project-main-area,
body.content-hidden .project-extra-area {
  border: none;
  background: transparent;
}

/* Hide placeholder text when content debug is OFF */
body.content-hidden .project-top-area h2,
body.content-hidden .project-top-area p,
body.content-hidden .project-middle-area h2,
body.content-hidden .project-middle-area p,
body.content-hidden .project-main-area h2,
body.content-hidden .project-main-area p,
body.content-hidden .project-extra-area h2,
body.content-hidden .project-extra-area p {
  display: none;
}

/* Hide dots when content debug is OFF */
body.content-hidden .projects-dots {
  display: none;
}

/* Phase3B debug styles removed - using Phase 1+2+3 only */

/* Hide all absolute coordinate elements by default */
.corner-tl, .corner-tr, .corner-bl, .corner-br {
  display: none !important;
}

/* Absolute positioning coordinates - only show when Absolute button is active */
body.absolute-active .section-border .corner-tl,
body.absolute-active .content-area-debug .corner-tl,
body.absolute-active .project-top-area .corner-tl,
body.absolute-active .project-main-area .corner-tl,
body.absolute-active .project-extra-area .corner-tl,
body.absolute-active .project-bottom-area .corner-tl,
body.absolute-active .ankh-functional-area .corner-tl,
body.absolute-active .nav-functional-area .corner-tl {
  display: block !important;
  position: absolute;
  top: 0px;
  left: 0px;
  color: white; /* debug-test: white font color */
  font-size: 10px;
  background: #0066ff; /* debug-test: blue background */
  padding: 2px 4px;
  border-radius: 2px;
  z-index: 1002; /* debug-test: higher z-index to render on top */
  pointer-events: none;
  font-family: monospace;
  text-shadow: none;
}

body.absolute-active .section-border .corner-tr,
body.absolute-active .content-area-debug .corner-tr,
body.absolute-active .project-top-area .corner-tr,
body.absolute-active .project-main-area .corner-tr,
body.absolute-active .project-extra-area .corner-tr,
body.absolute-active .project-bottom-area .corner-tr,
body.absolute-active .ankh-functional-area .corner-tr,
body.absolute-active .nav-functional-area .corner-tr {
  display: block !important;
  position: absolute;
  top: 0px;
  right: 0px;
  color: white; /* debug-test: white font color */
  font-size: 10px;
  background: #0066ff; /* debug-test: blue background */
  padding: 2px 4px;
  border-radius: 2px;
  z-index: 1002; /* debug-test: higher z-index to render on top */
  pointer-events: none;
  font-family: monospace;
  text-shadow: none;
}

body.absolute-active .section-border .corner-bl,
body.absolute-active .content-area-debug .corner-bl,
body.absolute-active .project-top-area .corner-bl,
body.absolute-active .project-main-area .corner-bl,
body.absolute-active .project-extra-area .corner-bl,
body.absolute-active .project-bottom-area .corner-bl,
body.absolute-active .ankh-functional-area .corner-bl,
body.absolute-active .nav-functional-area .corner-bl {
  display: block !important;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white; /* debug-test: white font color */
  font-size: 10px;
  background: #0066ff; /* debug-test: blue background */
  padding: 2px 4px;
  border-radius: 2px;
  z-index: 1002; /* debug-test: higher z-index to render on top */
  pointer-events: none;
  font-family: monospace;
  text-shadow: none;
}

body.absolute-active .section-border .corner-br,
body.absolute-active .content-area-debug .corner-br,
body.absolute-active .project-top-area .corner-br,
body.absolute-active .project-main-area .corner-br,
body.absolute-active .project-extra-area .corner-br,
body.absolute-active .project-bottom-area .corner-br,
body.absolute-active .ankh-functional-area .corner-br,
body.absolute-active .nav-functional-area .corner-br {
  display: block !important;
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: white; /* debug-test: white font color */
  font-size: 10px;
  background: #0066ff; /* debug-test: blue background */
  padding: 2px 4px;
  border-radius: 2px;
  z-index: 1002; /* debug-test: higher z-index to render on top */
  pointer-events: none;
  font-family: monospace;
  text-shadow: none;
}

/* Hide original project elements - they should not be visible */
.project-article {
  display: none !important;
}

/* Projects dots styling - positioned absolutely within bottom area */
.projects-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  /* Remove height/width constraints - let absolute positioning handle it */
  /* Ensure dots stay within the 40px bottom area */
  max-height: 40px !important;
  overflow: hidden !important;
  /* Override any conflicting margin rules */
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure dots are properly contained and centered vertically */
  box-sizing: border-box !important;
}

.projects-dots .dot {
  width: 7px; /* 30% smaller than selected (10px * 0.7) */
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  /* Ensure dots fit within 40px height */
  flex-shrink: 0;
}

.projects-dots .dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.projects-dots .dot.active {
  /* Selected project - full size */
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.9);
  /* Remove the scale transform since we're using actual size difference */
}

/* Video thumbnail styling */
.video-thumbnail-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
}

.video-thumbnail-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: #fff;
	transition: all 0.3s ease;
	z-index: 10;
	cursor: pointer;
}

.video-play-button:hover {
	background: rgba(0, 0, 0, 0.9);
	transform: translate(-50%, -50%) scale(1.1);
}


/* ===== V2: Projects dots pinned to BOTTOM area center ===== */
.projects-article .project-bottom-area{ position: relative; }
.projects-article .project-bottom-area .projects-dots{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

/* ---- Projects sizing safety ---- */
.projects-article .project-middle-area {
  overflow: hidden; /* no inner scroll; we size to fit */
}
.projects-article .project-main-area {
  overflow: hidden; /* no inner scroll; we size to fit */
  order: 1; /* ensure main area comes first */
}
.projects-article .project-extra-area {
  overflow: visible; /* allow extra content to be visible */
  /* Phase 3B controls visibility and sizing */
  min-height: 0; /* let Phase 3B control height */
  flex-shrink: 1; /* allow shrinking when no content */
  order: 2; /* ensure it comes after main area (order: 1) */
}


/* Bottom area is the anchor */
.project-bottom-area {
  position: relative;
  height: 40px; /* match engine */
}

/* Center dots inside bottom */
.projects-dots {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  gap: 10px;
}

/* Grey (60% of active) */
.projects-dots .dot {
  width: 8px; 
  height: 8px; 
  border-radius: 50%;
  background:#777; 
  opacity:.9; 
  cursor:pointer;
  transition: transform .15s, width .15s, height .15s, opacity .15s;
}

/* Grow to 125% on hover */
.projects-dots .dot:hover { 
  transform: scale(1.25); 
}

/* Active (pink) */
.projects-dots .dot.active { 
  width:14px; 
  height:14px; 
  background:#ff2e83; 
  opacity:1; 
}

/* ================================================================== */
/* NEW SIMPLE VERTICAL SCROLL PROJECTS LAYOUT                        */
/* ================================================================== */

/* Projects container - simple vertical layout (no internal scroll) */
#Projects {
  overflow-x: hidden;
  overflow-y: visible;
  height: auto;
  padding: 2rem 0;
  /* Ensure Projects can use full available width */
  width: 100% !important;
  max-width: none !important;
}

/* Projects page title spacing - when inside project item */
.project-item h1.major {
  margin-bottom: 1rem !important; /* Space before project title */
  text-align: left; /* Left align like project titles */
  margin-top: 0 !important; /* Remove top margin */
  padding: 0; /* No padding - inherits from project-item */
  position: relative; /* For pink line positioning */
}
/* Individual project items */
.project-item {
  margin-bottom: 6rem; /* Increased vertical spacing */
  padding: 0 2rem;
  max-width: 1400px !important; /* Force 1400px max width */
  width: 100%; /* Use full available space within content area (120% bigger than 95%) */
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Pink lines between projects - better responsive approach */
.project-item:not(:last-child)::after {
  content: '';
  display: block;
  width: 50%;
  height: 1px;
  background-color: #ED1F83; /* OOMAA pink */
  margin: 4rem auto 0 auto; /* More space above the line */
}

/* Responsive: Adjust line width on smaller screens */
@media (max-width: 768px) {
  .project-item:not(:last-child)::after {
    width: 80%; /* Wider on mobile to look better */
    margin: 3rem auto 0 auto; /* Less spacing on mobile but still more than before */
  }
  
  #Projects h1.major + .pink-line {
    width: 80%;
    margin: 2rem auto 2rem auto; /* Keep same spacing for top line */
  }
}

@media (max-width: 480px) {
  .project-item:not(:last-child)::after {
    width: 90%; /* Even wider on very small screens */
    margin: 2.5rem auto 0 auto; /* Even less spacing but still more than before */
  }
  
  #Projects h1.major + .pink-line {
    width: 90%;
    margin: 1.5rem auto 1.5rem auto; /* Keep same spacing for top line */
  }
}

/* Pink line below "Projects" main title - full page width */
#Projects h1.major {
  margin-bottom: 0; /* Remove bottom margin */
}

/* Add a separate line element after the Projects title */
#Projects h1.major + .pink-line {
  display: block;
  width: 50%;
  height: 1px;
  background-color: #ED1F83; /* OOMAA pink */
  margin: 2rem auto 2rem auto; /* Add space above and below the line */
}

/* Pink line between main PROJECTS title and first project */
.project-item:first-child {
  margin-top: 0; /* Remove top margin to get closer to Projects title */
}


.project-item:last-child {
  margin-bottom: 2rem;
}

/* Project titles - Better typography approach */
.project-title {
  font-size: 1.4rem; /* Slightly larger but more readable */
  font-weight: 500; /* Medium weight for better readability */
  color: #ffffff;
  margin-bottom: 0.5rem;
  line-height: 1.2; /* Better line height for wrapped text readability */
  letter-spacing: -0.02em; /* Tighter letter spacing for modern look */
  font-family: 'Open Sans', sans-serif;
}

.project-subtitle {
  font-size: 1rem; /* Standard readable size */
  font-weight: 400;
  color: #cccccc;
  margin-bottom: 0.5rem;
  line-height: 0.84; /* 20% more spacious than 0.7 */
  letter-spacing: 0.01em; /* Slightly looser for body text */
  font-family: 'Open Sans', sans-serif;
}

.project-category {
  font-size: 0.85rem; /* More readable than before */
  font-weight: 300;
  color: #999999;
  margin-bottom: 0.3rem;
  line-height: 0.9; /* 20% more spacious than 0.75 */
  letter-spacing: 0.02em; /* Looser spacing for small text */
  text-transform: uppercase; /* Make categories more distinctive */
  font-family: 'Open Sans', sans-serif;
}

/* Project video container - ENABLED: JavaScript needs to find these */
.project-video {
  margin: 1.5rem auto;
  max-width: 1200px !important;
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  aspect-ratio: 2.35/1;
  overflow: visible;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border-radius: 0;
}

/* 2.35:1 project video container */
.project-video[data-aspect-ratio="2.35:1"] {
  aspect-ratio: 2.35/1;
  overflow: visible; /* Allow Vimeo controls to show */
  box-shadow: none; /* Remove duplicate shadow - container handles it */
  border-radius: 8px;
  position: relative;
}

/* 2.35:1 project video container - inner container */
.project-video[data-aspect-ratio="2.35:1"] .project-video-container {
  aspect-ratio: 2.35/1;
  overflow: visible; /* Allow Vimeo controls to show */
  position: relative;
  width: 100%;
  height: 100%;
}

/* Direct video styling - ENABLED: JavaScript needs to find these */
/* Generic iframe defaults (keeps the drop shadow & width) */
.project-video iframe {
  width: 100%;
  aspect-ratio: 16/9; /* default */
  border: none;
  box-shadow: none; /* Remove shadow - container handles it */
  display: block;
  margin: 0 auto;
  /* JavaScript will replace this with fixed dimensions */
}

/* 21:9 videos (e.g., For The Remainder) */
.project-video[data-aspect-ratio="21:9"] iframe {
  aspect-ratio: 21/9 !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;   /* ensure no absolute hack */
  object-fit: contain !important;
}

/* 2.35:1 videos (e.g., For The Remainder) - match Reel styling exactly */
.project-video[data-aspect-ratio="2.35:1"] .project-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* 2.388:1 videos (e.g., Reel) */
.project-video[data-aspect-ratio="2.388:1"] iframe {
  aspect-ratio: 2.388/1 !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
  object-fit: contain !important;
}

.project-video[data-aspect-ratio="1920:804"] {
  max-width: 1200px !important;
  width: 100% !important;
}

.project-video[data-aspect-ratio="21:9"] iframe {
  aspect-ratio: 21/9 !important;
  width: 100% !important;
}

.project-video[data-aspect-ratio="16:9"] iframe {
  aspect-ratio: 16/9 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 1200px !important;
}

/* 1920:804 videos (treat same as 21:9) */
.project-video[data-aspect-ratio="1920:804"] iframe {
  aspect-ratio: 1920/804 !important; /* ≈ 2.387:1 */
  width: 100% !important;
  height: auto !important;
  position: static !important;
  object-fit: contain !important;
}

/* Video thumbnail containers - Let JavaScript handle all dimensions */
.video-thumbnail-container {
  margin: 0 auto;
  box-sizing: border-box;
  /* Dimensions will be set by JavaScript */
}

.video-thumbnail-container img {
  object-fit: cover;
  box-sizing: border-box;
  /* Dimensions will be set by JavaScript */
}

/* Project images (laurels, winner badges) */
.project-image {
  margin: 1rem 0;
  text-align: center;
}

.project-image img {
  max-width: 100%;
  width: auto;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.project-image img:hover {
  opacity: 1;
}

/* Pass winner image - maximum 25% of content area width */
.project-image img[alt="Pass festival laurels"],
.project-image img[src*="pass_winner.png"] {
  max-width: 25% !important;
  width: auto !important;
  height: auto !important;
}

/* Vimeo link styling */
.vimeo-link {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: none; /* Remove grey line above More on VIMEO */
}

.vimeo-link a {
  color: #ff2e83;
  text-decoration: none !important;
  border-bottom: none !important; /* Remove dotted underline */
  font-size: 1.1rem;
  font-weight: 400;
  transition: color 0.3s ease;
}

.vimeo-link a:hover {
  color: #ffffff;
}

/* Responsive adjustments */
@media screen and (max-width: 980px) {
  .project-item {
    padding: 0 1.5rem;
    margin-bottom: 3rem;
  }
  
  .project-title {
    font-size: 1.25rem; /* Slightly smaller for tablet */
  }
  
  .project-subtitle {
    font-size: 0.9rem; /* Readable on tablet */
  }
  
  .project-category {
    font-size: 0.8rem; /* Readable on tablet */
  }
}

@media screen and (max-width: 736px) {
  .project-item {
    padding: 0 1rem;
    margin-bottom: 2.5rem;
  }
  
  .project-title {
    font-size: 1.1rem; /* Readable on mobile */
  }
  
  .project-subtitle {
    font-size: 0.85rem; /* Readable on mobile */
  }
  
  .project-category {
    font-size: 0.75rem; /* Readable on mobile */
  }
  
  .project-image img {
    max-width: 100%;
    width: auto;
    height: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Animated Logo Styles                                               */
/* ------------------------------------------------------------------ */
.animated-logo {
  position: relative;
  display: inline-block;
}

.animated-logo svg {
  max-width: 100%;
  height: auto;
}

/* Animation styles - 5 copies with 0.1s delay and accumulating opacity */
/* Animated path CSS removed - using static logos */

/* Animation code removed - using static logos */
/* Japanese animation code removed - using static logos */

/* Animation keyframes and triggers removed - using static logos */

/* Guardrail: never clip Vimeo UI in Projects */
#Projects .project-video-container,
#Projects .project-video[data-aspect-ratio="2.35:1"],
#Projects .project-video[data-aspect-ratio="2.35:1"] .project-video-container {
  overflow: visible !important;
}

/* Project 1 - exact ratio (40:17 = 1920:816) */
.project-video[data-aspect-ratio="40:17"] .project-video-container {
  aspect-ratio: 40 / 17;
}

/* Projects 2-5 - 16:9 ratio with drop shadows */
.project-video[data-aspect-ratio="16:9"] .project-video-container {
  aspect-ratio: 16 / 9;
}

/* Keep the iframe filling the box */
.project-video .project-video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ensure background fades before banner right after loading */
body.loading-complete.background-priority #bg {
  opacity: 1 !important; /* Start background fade immediately */
}

body.loading-complete.background-priority .content {
  opacity: 0 !important; /* Hold banner hidden briefly */
  visibility: hidden !important;
  /* Ensure banner cannot start its default 1s-delayed fade while prioritized */
  transition-delay: 0s !important;
}

/* When background-priority removed (via JS), banner fades in quickly */
body.loading-complete:not(.background-priority) .content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Reel: make video/iframe always fit the container */
.reel .video-container {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;       /* Safari-friendly modern property */
  position: relative;
}
.reel .video-container iframe,
.reel .video-container video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;        /* letterboxing when needed, no cropping */
  position: absolute;
  inset: 0;
}

/* Phase 3: ensure article content can scroll when taller than content-area */
.content-area {
  position: relative;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  contain: layout paint; /* ensure scroll container owns its layout */
}

/* Intro/Anarch: let grids expand and be measured for scrolling */
.article-intro .intro-grid,
.article-anarch .anarch-grid,
.article-intro .intro-copy-inner {
  height: auto !important;
  min-height: max-content;
}

@media (orientation: portrait) {
  .article-intro .intro-grid { height: auto !important; }
}

/* Orientation-aware layouts for Intro (p_line) and Anarch */
@media (orientation: portrait) {
  /* Intro: stack image above copy; fit within content area */
  body.article-intro .intro-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    row-gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* PORTRAIT ORDER: VISUAL -> TITLE -> TEXT */
  body.article-intro .intro-visual {
    order: 1 !important;
    width: 100% !important;
    max-height: 50vh !important;
  }
  
  body.article-intro .intro-copy {
    order: 2 !important;
    width: 100% !important;
    padding: 12px 0 0 !important;
  }
  
  body.article-intro .intro-visual img {
    width: 100% !important;
    height: auto !important;
    max-width: min(90vw, var(--safe-zone-width)) !important;
    max-height: 50vh !important;
    object-fit: contain !important;
    aspect-ratio: 1/1 !important; /* 1:1 ratio for INTRO */
  }
  
  body.article-intro .intro-copy-inner {
    max-height: calc(var(--phase3-content-area-height, 60vh) - 200px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Ensure INTRO content area can scroll in portrait */
  body.article-intro .content-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 100vh !important;
  }
}

/* Web Portrait: Ensure scrollbar works on desktop/tablet portrait */
@media (min-width: 769px) and (orientation: portrait) {
  body.article-intro .content-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  body.article-intro .intro-copy-inner {
    max-height: calc(var(--phase3-content-area-height, 60vh));
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* CRITICAL: Override landscape overflow hidden for portrait mode */
@media (orientation: portrait) {
  body.article-intro .content-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* CRITICAL: Override ALL landscape rules for portrait mode - must come after landscape rules */
@media (orientation: portrait) {
  body.article-intro .content-area {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    /* CRITICAL: Ensure content area has proper height constraints */
    max-height: var(--phase3-content-area-height, 60vh) !important;
    height: var(--phase3-content-area-height, 60vh) !important;
  }
  
  body.article-intro .content-inner {
    justify-content: flex-start !important;
    align-items: stretch !important;
    /* CRITICAL: Ensure content-inner respects content-area height */
    max-height: 100% !important;
    overflow: hidden !important;
  }
  
  /* Force portrait layout for INTRO */
  body.article-intro .intro-grid {
    grid-template-columns: 1fr !important;  /* Force single column in portrait */
    grid-auto-rows: auto !important;
    row-gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
  }
  
  /* PORTRAIT ORDER: VISUAL -> TITLE -> TEXT */
  body.article-intro .intro-visual {
    order: 1 !important;
    width: 100% !important;
    max-height: 50vh !important;
  }
  
  body.article-intro .intro-copy {
    order: 2 !important;
    width: 100% !important;
    padding: 12px 0 0 !important;
  }
  
  /* Ensure INTRO content area can scroll in portrait */
  body.article-intro .content-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 100vh !important;
  }
  
  /* CRITICAL: Ensure dynamic content is constrained and scrollable */
  body.article-intro .dynamic-content {
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

  /* Anarch (portrait): stack top→bottom (viewer, title, text) - PRODUCTION VERSION */
  body.article-anarch .content-area { padding: 12px; }
  body.article-anarch .anarch-grid {
    flex-direction: column; 
    gap: 1.5rem; 
    display: flex !important; 
    width: calc(var(--safe-zone-width, 90vw) - 40px) !important; 
  }
  
  body.article-anarch .anarch-title { 
    margin-bottom: 1rem; 
    order: 1 !important; 
    width: 100% !important; 
    display: block !important; 
  }
  
  body.article-anarch .anarch-visual { 
    order: 2 !important; 
    width: calc(var(--safe-zone-width, 90vw) - 40px) !important; 
    height: auto !important; 
  }
  
  body.article-anarch .anarch-visual .three-embed { 
    width: 100% !important; 
    max-width: 100% !important; 
    aspect-ratio: 5 / 6 !important; /* Anarch portrait ratio */
    height: auto !important; 
    min-height: 0 !important; 
    position: relative !important; 
  }
  
  body.article-anarch .anarch-copy { 
    overflow-y: visible; 
    padding-right: 0px; 
    order: 3 !important; 
    width: calc(var(--safe-zone-width, 90vw) - 40px) !important; 
  }
  
  body.article-anarch .anarch-copy > .major { 
    display: none !important; 
  }
  
  body.article-anarch #Anarch .content-area { 
    overflow-y: auto !important; 
    max-height: calc(var(--phase3-content-area-height, 60vh) - 40px) !important; 
  }
}

/* Strong scroll containment overrides for Intro/Anarch */
.article-intro .content-area,
.article-anarch .content-area {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Intro: add inner breathing room in article mode */
body.article-intro .content-area { padding: 20px !important; }

/* Intro: use full safe-zone width in landscape (remove outer padding) */
@media (min-width: 1024px) and (orientation: landscape) {
  body.article-intro .content-area { 
    padding: 20px !important; 
    overflow: hidden !important; /* Prevent content-area scrollbar */
  }
  
  /* LANDSCAPE ORDER: VISUAL -> TITLE above TEXT */
  body.article-intro .intro-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Two equal columns */
    column-gap: 30px !important;
    height: var(--phase3-content-area-height, 60vh) !important;
    max-height: var(--phase3-content-area-height, 60vh) !important;
    align-items: center !important;
  }
  
  body.article-intro .intro-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Center the image */
    height: 100% !important;
    padding-right: 15px !important;
    width: 100% !important; /* Fill the entire column */
  }
  
  body.article-intro .intro-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Start from top to prevent cutoff */
    align-items: flex-start !important;
    height: 100% !important;
    padding-left: 15px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 0 !important; /* Remove top padding to prevent cutoff */
  }
  
  /* INTRO image in landscape - 1:1 aspect ratio */
  body.article-intro .intro-visual img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1/1 !important; /* 1:1 ratio for INTRO */
    object-fit: contain !important;
    display: block !important;
  }
  
  /* Fix INTRO text scrolling - ensure content starts from top */
  body.article-intro .intro-copy-inner {
    padding-top: 0 !important; /* Remove top padding */
    margin-top: 0 !important; /* Remove top margin */
    scroll-padding-top: 0 !important; /* Remove scroll padding */
  }
}

  /* Anarch (landscape): 3D model on left, text on right - PRODUCTION VERSION */
  
  /* Prefer grid so we can control column proportion (image ~42% / text ~58%) */
  body.article-anarch .anarch-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    align-items: center; 
    column-gap: 24px; 
    height: calc(var(--phase3-content-area-height, 60vh) - 40px) !important; 
  }
  
  /* Removed conflicting rules - now handled by grid-based approach above */

  /* Ensure underlying canvas follows container height (no aspect lock) */
  body.article-anarch .anarch-visual canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 none !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  
  body.article-anarch .anarch-copy { 
    padding-left: 2rem; 
    min-width: 0px; 
    height: calc(var(--phase3-content-area-height, 60vh) - 40px) !important; 
    overflow: auto !important; 
    width: auto !important; 
    grid-column: 2; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    align-items: flex-start !important; 
    text-align: left !important; 
  }
  
  body.article-anarch .anarch-title { 
    display: none !important; 
  }
  
  body.article-anarch .anarch-copy h1,
  body.article-anarch .anarch-copy > .major { 
    display: block !important; 
  }
  
  #Anarch .anarch-grid { 
    flex-direction: row !important; 
  }
  
  #Anarch .anarch-grid .anarch-copy { 
    order: 2 !important; 
  }
  
  #Anarch .anarch-grid .anarch-visual { 
    order: 1 !important; 
  }
  
  #Anarch .content-area { 
    overflow: hidden visible !important; 
    max-height: none !important; 
  }
}

/* FINAL LANDSCAPE OVERRIDES TO MATCH PRODUCTION EXACTLY */
@media (min-width: 1024px) and (orientation: landscape) {
  /* Removed conflicting desktop landscape rules - now handled by grid-based approach above */
}

/* INTRO: LANDSCAPE FIT BEHAVIOR (match production) */
@media (min-width: 1024px) and (orientation: landscape) {
  /* Fix content-area to prevent double scrollbars */
  body.article-intro .content-area {
    overflow: hidden !important; /* Remove content-area scrollbar */
  }
  
  /* Fix content-inner to center content vertically */
  body.article-intro .content-inner {
    justify-content: center !important; /* Center content vertically */
    align-items: center !important; /* Center content horizontally */
  }
  
  /* Remove top padding that pushes content down */
  body.article-intro .content-area {
    padding-top: 0 !important; /* Remove top padding */
    padding-left: 20px !important; /* Keep side padding */
    padding-right: 20px !important; /* Keep side padding */
    padding-bottom: 20px !important; /* Keep bottom padding */
  }
  
  /* Fix basic element margins that push content down */
  body.article-intro h1.major {
    margin: 0 0 0.5rem 0 !important; /* Keep small bottom margin for title */
  }
  
  body.article-intro p {
    margin: 0 0 1rem 0 !important; /* Reduce paragraph margins from 2rem to 1rem */
  }
  
  body.article-intro .image.left {
    top: 0 !important; /* Remove image top offset */
    margin: 0 1rem 1rem 0 !important; /* Keep right margin, remove others */
  }
  
  /* Simple fix: just remove the problematic margins and positioning */
  body.article-intro .dynamic-content {
    /* Keep the natural flow, just remove problematic spacing */
  }
}

/* removed conflicting max-content block for content-area children */

.article-intro .intro-grid { display: grid !important; }

/* Production Anarch Base Styles */
.anarch-grid { 
  display: grid; 
  gap: 1.5rem; 
}

.anarch-copy { 
  grid-area: copy; 
}

.anarch-visual { 
  grid-area: visual; 
  display: block !important; 
  position: relative !important; 
}

.anarch-visual .three-embed { 
  width: 100%; 
  position: relative; 
  overflow: hidden; 
  border-radius: 4px; 
  background: transparent; 
  border: none; /* No border */
  min-height: 0 !important; /* allow portrait aspect to compute height from width */
  min-width: 0 !important;
}
/* removed ANARCH auto height overrides for the 3D container */

.anarch-title { 
  display: none; 
}
.anarch-visual, .three-embed { 
  z-index: 1 !important; 
  position: relative !important; 
}

#Anarch.dynamic-content { 
  height: auto !important; 
  width: 100% !important; 
}

/* Mobile scroll priority - ensure scrolling works over 3D interaction */
@media (max-width: 1023.98px) {
  body.article-anarch .anarch-visual .three-embed,
  body.article-anarch .anarch-visual canvas,
  body.article-anarch #Anarch .three-embed,
  body.article-anarch #Anarch canvas,
  #Anarch.active .three-embed,
  #Anarch.active canvas {
    touch-action: pan-y !important;
    pointer-events: none !important;
  }
}

@media (orientation: portrait) {
  body.article-anarch .anarch-visual .three-embed,
  body.article-anarch .anarch-visual canvas,
  body.article-anarch #Anarch .three-embed,
  body.article-anarch #Anarch canvas,
  #Anarch.active .three-embed,
  #Anarch.active canvas {
    touch-action: pan-y !important;
    pointer-events: none !important;
  }
}

/* Portrait hover-capable devices: allow 3D interaction while preserving scroll */
@media (orientation: portrait) and (hover: hover) and (pointer: fine) {
  body.article-anarch .anarch-visual .three-embed,
  body.article-anarch .anarch-visual canvas,
  body.article-anarch #Anarch .three-embed,
  body.article-anarch #Anarch canvas,
  #Anarch.active .three-embed,
  #Anarch.active canvas {
    pointer-events: auto !important;
    touch-action: auto !important;
  }
}

/* INTRO LANDSCAPE FIXES — match production layout precisely */
@media (min-width: 1024px) and (orientation: landscape) {
  body.article-intro .intro-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 24px;
    height: var(--phase3-content-area-height, 60vh) !important;
    max-height: var(--phase3-content-area-height, 60vh) !important;
  }
  
  /* Revert to grid-driven centering; let grid align-items control vertical centering */
  body.article-intro .intro-copy {
    display: block !important;
    height: auto !important;
  }
}

  body.article-intro .intro-visual img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block;
    margin: 0 0 0 auto; /* Right-align the image within its column */
  }

  body.article-intro .intro-copy-inner,
  body.article-intro .intro-copy {
    max-height: 100% !important;
    overflow: auto !important;
    text-align: left !important;
  }
}

/* ANARCH LANDSCAPE FIXES — match Intro layout precisely */
@media (min-width: 1024px) and (orientation: landscape) {
  body.article-anarch .dynamic-content#Anarch {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 24px;
    height: var(--phase3-content-area-height, 60vh) !important;
    max-height: var(--phase3-content-area-height, 60vh) !important;
  }

  body.article-anarch #Anarch .anarch-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Right-align the 3D model within its column */
    height: 100% !important;
    width: 100% !important;
    min-height: 300px !important; /* Ensure minimum height for 3D model */
    margin: 0 !important;
    padding: 0 !important;
  }

  body.article-anarch #Anarch .anarch-visual .three-embed {
    max-width: 100% !important;
    width: 100% !important; /* Fill the container width */
    height: auto !important; /* Let aspect decide height */
    display: block !important;
    box-sizing: border-box !important;
    margin-left: auto !important; 
    pointer-events: none !important;
    touch-action: none !important;
  }

  /* Ensure 3D model canvas elements are properly sized */
  body.article-anarch #Anarch .anarch-visual .three-embed canvas {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  body.article-anarch #Anarch .text-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: auto !important;
    text-align: left !important;
  }

  body.article-anarch #Anarch .text-container h1.major {
    margin: 0 0 0.5rem 0 !important;
    text-align: left !important;
  }

  body.article-anarch #Anarch .text-container p {
    margin: 0 !important;
    text-align: left !important;
  }
}

/* MOBILE INTRO FIXES */
/* Mobile Landscape: Fix element shifting and image cropping - ONLY for actual mobile devices */
@media (max-width: 768px) and (orientation: landscape) {
  body.article-intro .content-area {
    padding: 10px !important; /* Reduce padding on mobile */
    overflow-y: auto !important; /* Allow scrolling */
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  body.article-intro .content-inner {
    justify-content: flex-start !important; /* Don't center on mobile landscape */
    align-items: stretch !important;
  }
  
  /* CRITICAL: Target the actual HTML structure with maximum specificity */
  body.article-intro #intro {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    height: 100% !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Override base image rules with maximum specificity */
  body.article-intro #intro .image.left {
    flex: 0 0 auto !important;
    width: 40% !important;
    max-width: 40% !important;
    float: none !important;
    margin: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Right-align the image container */
    position: relative !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Override the base float rule with maximum specificity */
  body.article-intro #intro .image.left {
    float: none !important;
    display: flex !important;
  }
  
  body.article-intro #intro .image.left img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  
  body.article-intro #intro h1.major {
    margin: 0 0 0.5rem 0 !important;
    flex: 1 !important;
    box-sizing: border-box !important;
  }
  
  body.article-intro #intro p {
    margin: 0 0 0.75rem 0 !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Override any conflicting rules */
  body.article-intro #intro * {
    box-sizing: border-box !important;
  }
}

/* iPad Landscape: Fix elements shifted up and cropped */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  body.article-intro .content-area {
    padding: 15px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  body.article-intro .content-inner {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  /* CRITICAL: Target the actual HTML structure with maximum specificity */
  body.article-intro #intro {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    height: 100% !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  body.article-intro #intro .image.left {
    flex: 0 0 auto !important;
    width: 45% !important;
    max-width: 45% !important;
    float: none !important;
    margin: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Right-align the image container */
    position: relative !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Override the base float rule with maximum specificity */
  body.article-intro #intro .image.left {
    float: none !important;
    display: flex !important;
  }
  
  body.article-intro #intro .image.left img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  
  body.article-intro #intro h1.major {
    margin: 0 0 0.5rem 0 !important;
    flex: 1 !important;
    box-sizing: border-box !important;
  }
  
  body.article-intro #intro p {
    margin: 0 0 0.75rem 0 !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Override any conflicting rules */
  body.article-intro #intro * {
    box-sizing: border-box !important;
  }
}

/* MOBILE ANARCH LANDSCAPE - match Intro layout */
@media (max-width: 768px) and (orientation: landscape) {
  body.article-anarch .content-area {
    padding: 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  body.article-anarch .content-inner {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  /* CRITICAL: Target the actual HTML structure with maximum specificity */
  body.article-anarch #Anarch {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    height: 100% !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Override base 3D model rules with maximum specificity */
  body.article-anarch #Anarch .anarch-visual {
    flex: 0 0 auto !important;
    width: 40% !important;
    max-width: 40% !important;
    float: none !important;
    margin: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Right-align the 3D model container */
    position: relative !important;
    box-sizing: border-box !important;
    /* Disable touch interactions on mobile for scrolling */
    pointer-events: none !important;
    touch-action: none !important;
  }
  
  /* CRITICAL: Override the base float rule with maximum specificity */
  body.article-anarch #Anarch .anarch-visual {
    float: none !important;
    display: flex !important;
  }
  
  body.article-anarch #Anarch .anarch-visual .three-embed {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important; /* Fill the container width */
    height: 100% !important; /* Fill available height */
    display: block !important;
    box-sizing: border-box !important;
    margin-left: auto !important; /* Force right alignment within flex container */
    object-fit: fill !important; /* Fill container completely, may distort but no cropping */
    /* Disable touch interactions on mobile for scrolling */
    pointer-events: none !important;
    touch-action: none !important;
  }
  
  body.article-anarch #Anarch .text-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }
  
  body.article-anarch #Anarch .text-container h1.major {
    margin: 0 0 0.5rem 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  
  body.article-anarch #Anarch .text-container p {
    margin: 0 !important;
    text-align: left !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    flex: 1 !important;
  }
  
  /* CRITICAL: Override any conflicting rules */
  body.article-anarch #Anarch * {
    box-sizing: border-box !important;
  }
}

/* Mobile Portrait: Fix scrolling issues - ONLY for actual mobile devices */
@media (max-width: 768px) and (orientation: portrait) {
  body.article-intro .content-area {
    padding: 15px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }
  
  body.article-intro .content-inner {
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 100% !important;
  }
  
  body.article-intro .dynamic-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    height: auto !important;
  }
  
  /* Override base image rules with higher specificity */
  body.article-intro .dynamic-content .image.left {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 15px 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Center the image in portrait mode */
    position: relative !important;
  }
  
  body.article-intro .dynamic-content .image.left img {
    max-width: 100% !important;
    max-height: 50vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  body.article-intro h1.major {
    margin: 0 0 1rem 0 !important;
    text-align: center !important;
  }
  
  body.article-intro p {
    margin: 0 0 1rem 0 !important;
    text-align: left !important;
  }
}

/* iPad ANARCH LANDSCAPE - match Intro layout */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  body.article-anarch .content-area {
    padding: 15px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
  
  body.article-anarch .content-inner {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  
  /* CRITICAL: Target the actual HTML structure with maximum specificity */
  body.article-anarch #Anarch {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    height: 100% !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  body.article-anarch #Anarch .anarch-visual {
    flex: 0 0 auto !important;
    width: 45% !important;
    max-width: 45% !important;
    float: none !important;
    margin: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Right-align the 3D model container */
    position: relative !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Override the base float rule with maximum specificity */
  body.article-anarch #Anarch .anarch-visual {
    float: none !important;
    display: flex !important;
  }
  
  body.article-anarch #Anarch .anarch-visual .three-embed {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important; /* Fill the container width */
    height: 100% !important; /* Fill available height */
    display: block !important;
    box-sizing: border-box !important;
    margin-left: auto !important; /* Force right alignment within flex container */
    object-fit: fill !important; /* Fill container completely, may distort but no cropping */
  }
  
  body.article-anarch #Anarch .text-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }
  
  body.article-anarch #Anarch .text-container h1.major {
    margin: 0 0 0.5rem 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  
  body.article-anarch #Anarch .text-container p {
    margin: 0 !important;
    text-align: left !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    flex: 1 !important;
  }
  
  /* CRITICAL: Override any conflicting rules */
  body.article-anarch #Anarch * {
    box-sizing: border-box !important;
  }
}

/* MOBILE ANARCH PORTRAIT - match Intro layout */
@media (max-width: 768px) and (orientation: portrait) {
  body.article-anarch .content-area {
    padding: 15px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }
  
  body.article-anarch .content-inner {
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 100% !important;
  }
  
  body.article-anarch .dynamic-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    height: auto !important;
  }
  
  /* Override base 3D model rules with higher specificity */
  body.article-anarch .dynamic-content .anarch-visual {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 15px 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Center the 3D model in portrait mode */
    position: relative !important;
    /* Disable touch interactions on mobile for scrolling */
    pointer-events: none !important;
    touch-action: none !important;
  }
  
  body.article-anarch .dynamic-content .anarch-visual .three-embed {
    max-width: 100% !important;
    max-height: 50vh !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    /* Disable touch interactions on mobile for scrolling */
    pointer-events: none !important;
    touch-action: none !important;
  }
  
  body.article-anarch h1.major {
    margin: 0 0 1rem 0 !important;
    text-align: center !important;
  }
  
  body.article-anarch p {
    margin: 0 0 1rem 0 !important;
    text-align: left !important;
  }
}

/* Debug Visuals - Hidden by default, shown only when enabled */
.section-border,
.content-area-debug,
.content-area-debug-visual,
.debug-content-elements,
.debug-page-areas,
.debug-banner-elements,
.debug-trimmed-elements,
.ankh-functional-area,
.nav-functional-area {
  display: none !important;
}

/* Show debug elements only when debug is enabled AND respective phases are active */
body.debug-enabled:not(.phase2-hidden) .section-border {
  display: block !important;
}
body.debug-enabled:not(.content-hidden).phase-3 .content-area-debug {
  display: block !important;
}
body.debug-enabled:not(.content-hidden).phase-3 .content-area-debug-visual {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.debug-enabled:not(.content-hidden).phase-3 .debug-content-elements {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.debug-enabled:not(.phase2-hidden) .ankh-functional-area,
body.debug-enabled:not(.phase2-hidden).phase-3 .ankh-functional-area {
  display: block !important;
}
body.debug-enabled:not(.phase2-hidden) .nav-functional-area,
body.debug-enabled:not(.phase2-hidden).phase-3 .nav-functional-area {
  display: block !important;
}
body.debug-enabled:not(.phase1-hidden) .debug-page-areas {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.debug-enabled:not(.phase1-hidden) .debug-banner-elements {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.debug-enabled:not(.phase2-hidden) .debug-trimmed-elements {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==== CANONICAL ANARCH LAYOUT (last-wins) ==== */

/* The content area is the scroll container in portrait, and the fixed viewport in landscape */
.article-anarch .content-area {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Make sure inner wrapper can shrink so scrolling works (important for Safari/grid) */
.article-anarch .content-area .content-inner,
.article-anarch #Anarch {
  min-height: 0 !important;
  height: 100% !important;
}

/* ===== Landscape (>=1024px, side-by-side) ===== */
@media (min-width:1024px) and (orientation: landscape) {
  /* Grid: visual | copy */
  body.article-anarch #Anarch {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center;
    column-gap: 24px;
    height: var(--phase3-content-area-height) !important; /* fill the band */
  }

  /* Visual column fills the band height; no aspect lock here */
  body.article-anarch #Anarch .anarch-visual {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    place-items: center end;       /* right align the card like INTRO */
  }

  /* The 3D/canvas fills the visual column height, keeps its own aspect */
  body.article-anarch #Anarch .anarch-visual .three-embed,
  body.article-anarch #Anarch .anarch-visual canvas {
    width: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Copy column scrolls internally when needed */
  body.article-anarch #Anarch .text-container {
    grid-column: 2;
    min-width: 0;                  /* allow internal scroll */
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
}
/* ===== Portrait (stack, whole content-area scrolls) ===== */
@media (orientation: portrait) {
  /* content-area remains the single scroll container */
  body.article-anarch .content-area {
    padding: 12px 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.article-anarch #Anarch {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important; /* VISUAL, TITLE, TEXT */
    row-gap: 16px;
    height: auto !important;
    min-height: 0 !important;
  }

  /* PORTRAIT ORDER: VISUAL -> TITLE -> TEXT */
  body.article-anarch #Anarch .anarch-visual { 
    grid-row: 1 !important; 
    order: 1 !important;
    height: 400px !important; /* Fixed height for portrait */
    min-height: 400px !important; /* Ensure 3D viewer has minimum height */
    max-height: 60vh !important; /* Cap height to prevent overflow */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    background: transparent !important; /* debug-test: moved to C debug overlay */
  }
  
  body.article-anarch #Anarch .anarch-title { 
    grid-row: 2 !important; 
    order: 2 !important;
    display: block !important;
  }
  
  body.article-anarch #Anarch .anarch-copy { 
    grid-row: 3 !important; 
    order: 3 !important;
    overflow: visible !important;
  }

  /* 3D viewer container - ensure it's visible and properly sized */
  body.article-anarch #Anarch .anarch-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 400px !important; /* Fixed height instead of min-height */
    min-height: 400px !important; /* Ensure minimum height for 3D viewer */
    max-height: 60vh !important; /* Cap height */
    position: relative !important;
    background: transparent !important; /* debug-test: moved to C debug overlay */
  }

  /* 3D embed container — intrinsic height via aspect-ratio to avoid collapse */
  body.article-anarch #Anarch .anarch-visual .three-embed {
    width: 100% !important;           /* define width so aspect-ratio can compute height */
    height: auto !important;          /* let aspect-ratio decide height */
    aspect-ratio: 5 / 6 !important;   /* ANARCH card proportion */
    min-height: 200px !important;     /* floor so it never disappears */
    max-height: 100% !important;      /* never exceed the visual container */
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important; /* debug-test: moved to C debug overlay */
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3D canvas elements - scale 1.6x within embed area */
  body.article-anarch #Anarch .anarch-visual .three-embed canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: contain !important;
    min-height: 200px !important; /* Ensure canvas has minimum height for card */
    /* Remove CSS scaling - let Three.js handle proper 3D scaling via camera */
  }
}

/* CRITICAL: Override landscape rules for portrait mode - must come after landscape rules */
@media (orientation: portrait) {
  /* ANARCH portrait layout */
  body.article-anarch #Anarch {
    grid-template-columns: 1fr !important;  /* Force single column in portrait */
    grid-template-rows: auto auto 1fr !important;  /* Force stacked layout */
    align-items: start !important;
    height: auto !important; /* Allow content to determine height */
  }
  
  /* ANARCH visual container - ensure proper height in portrait */
  body.article-anarch #Anarch .anarch-visual {
    height: 400px !important; /* Fixed height for portrait */
    min-height: 400px !important;
    max-height: 60vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    background: transparent !important; /* debug-test: moved to C debug overlay */
  }
  
  /* INTRO portrait layout */
  body.article-intro .intro-grid {
    grid-template-columns: 1fr !important;  /* Force single column in portrait */
    grid-auto-rows: auto !important;
    row-gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Ensure both sections have consistent portrait behavior */
  body.article-intro .content-area,
  body.article-anarch .content-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 100vh !important;
  }
  
  /* Force consistent orientation detection */
  body.article-intro,
  body.article-anarch {
    /* Ensure both sections use same orientation logic */
  }
}

/* Touch: prioritize page scroll over 3D pointer capture on phones */
@media (max-width: 1023.98px) {
  body.article-anarch .anarch-visual .three-embed,
  body.article-anarch .anarch-visual canvas {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }
}

/* Optional – make scrollbars visible in WebKit so it's obvious overflow works */
.article-anarch .content-area::-webkit-scrollbar { width: 8px; }
.article-anarch .content-area::-webkit-scrollbar-track { background: rgba(255,255,255,.1); }
.article-anarch .content-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 4px; }

/* ===== ANARCH: FINAL AUTHORITATIVE LAYOUT ===== */

/* Base: let the content area own scrolling; inner grid must be free to grow */
body.article-anarch .content-area {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* ANARCH: Match INTRO typography exactly */
body.article-anarch .anarch-copy {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important;
  line-height: 1.6 !important;
  gap: 0.75rem !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
}

/* All ANARCH text elements inherit consistent sizing from parent */
body.article-anarch .anarch-copy h1,
body.article-anarch .anarch-copy h2,
body.article-anarch .anarch-copy p,
body.article-anarch .anarch-copy .major {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ANARCH title gets slightly larger but proportional (match INTRO) */
body.article-anarch .anarch-copy h1,
body.article-anarch .anarch-copy .major {
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  font-weight: 600 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

/* Canonical grid container */
body.article-anarch #Anarch {
  display: grid !important;
  grid-auto-flow: row !important;
  gap: 20px !important;
  height: 100% !important;        /* fill the content-area */
  min-height: 0 !important;        /* allow shrink */
  min-width: 0 !important;
}

/* Landscape: 2 columns — visual ~42%, copy ~58% */
@media (min-width: 1024px) and (orientation: landscape) {
  body.article-anarch #Anarch {
    grid-template-columns: 0.42fr 0.58fr !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    height: var(--phase3-content-area-height, 60vh) !important;
    max-height: var(--phase3-content-area-height, 60vh) !important;
  }
  
  /* LANDSCAPE ORDER: VISUAL -> TITLE above TEXT */
  body.article-anarch #Anarch .anarch-visual { 
    grid-column: 1 !important; 
    grid-row: 1 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Center the 3D viewer */
    height: 100% !important;
    min-height: 400px !important;
    width: 100% !important; /* Fill the entire column */
    background: transparent !important; /* debug-test: moved to C debug overlay */
  }
  
  body.article-anarch #Anarch .anarch-copy { 
    grid-column: 2 !important; 
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 20px !important; /* Add spacing from visual */
  }
  
  /* 3D viewer in landscape — intrinsic height by aspect-ratio, bounded by container */
  body.article-anarch #Anarch .anarch-visual .three-embed {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 6 !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background: transparent !important; /* debug-test: moved to C debug overlay */
    min-height: 200px !important;
    max-height: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  body.article-anarch #Anarch .anarch-visual .three-embed canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: contain !important;
    min-height: 200px !important; /* Ensure canvas has minimum height for card */
    /* Remove CSS scaling - let Three.js handle proper 3D scaling via camera */
  }
}

/* Portrait (and narrow landscape): Title → Visual → Copy (scrolls) */
@media (orientation: portrait) {
  body.article-anarch #Anarch {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important; /* title, visual, copy */
    align-items: start !important;
  }
  body.article-anarch #Anarch .anarch-copy .anarch-title-wrap { order: 1 !important; }
  body.article-anarch #Anarch .anarch-visual { order: 2 !important; }
  body.article-anarch #Anarch .anarch-copy   { order: 3 !important; }
}

/* Visual column box */
body.article-anarch #Anarch .anarch-visual {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;  /* scrolling priority */
}

/* The actual 3D/embed/canvas/img — fit the box, keep aspect */
body.article-anarch #Anarch .anarch-visual .three-embed,
body.article-anarch #Anarch .anarch-visual canvas,
body.article-anarch #Anarch .anarch-visual img,
body.article-anarch #Anarch .anarch-visual model-viewer {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;   /* no cropping, no distortion */
}

/* Portrait: cap visual height so copy remains reachable; content-area will scroll */
@media (orientation: portrait) {
  body.article-anarch #Anarch .anarch-visual {
    height: 400px !important; /* Fixed height to prevent 0px */
    min-height: 400px !important; /* Ensure minimum height for 3D model */
    max-height: 60vh !important; /* Cap height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    background: transparent !important; /* debug-test: moved to C debug overlay */
  }
}

/* Copy column */
body.article-anarch #Anarch .anarch-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Title */
body.article-anarch #Anarch .anarch-copy .anarch-title-wrap h1.major {
  margin: 0 0 0.75rem 0 !important;
  text-align: left !important;
}

/* Body text gets the scrolling, not the whole page */
body.article-anarch #Anarch .anarch-copy p {
  margin: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 1 auto !important;
}

/* Always show a scrollbar track/thumb when overflow happens */
body.article-anarch #Anarch .anarch-copy p::-webkit-scrollbar { width: 8px; }
body.article-anarch #Anarch .anarch-copy p::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); }
body.article-anarch #Anarch .anarch-copy p::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.32); border-radius: 4px; }

/* ==== ANARCH: canonical layout (two columns landscape, stack portrait) ==== */

/* The content band is the only scroller */
body.phase-3 .content-area {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
} /* already present but safe to reiterate */

/* Baseline: ensure these can shrink (Safari/grid quirk) */
body.article-anarch #Anarch,
body.article-anarch #Anarch .anarch-visual,
body.article-anarch #Anarch .text-container {
  min-height: 0 !important;
}

/* ===== Landscape (>=1024px) — side-by-side ===== */
@media (min-width: 1024px) {
  body.article-anarch #Anarch {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    column-gap: 24px !important;
    align-items: stretch !important;
    height: var(--phase3-content-area-height) !important; /* fill band */
  }

  /* left track holds the artwork at full band height */
  body.article-anarch #Anarch .anarch-visual {
    display: grid !important;
    place-items: center end;
    height: 100% !important;
  }

  /* any of these forms of "visual" will fit the track without distortion */
  body.article-anarch #Anarch .anarch-visual .three-embed,
  body.article-anarch #Anarch .anarch-visual canvas,
  body.article-anarch #Anarch .anarch-visual img,
  body.article-anarch #Anarch .anarch-visual video {
    display: block !important;
    width: auto !important;           /* preserve aspect */
    height: 100% !important;          /* fill track vertically */
    max-width: 100% !important;       /* don't overflow horizontally */
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* right track can scroll internally when copy is long */
  body.article-anarch #Anarch .text-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Portrait — stack and let the whole band scroll ===== */
@media (orientation: portrait) {
  body.article-anarch #Anarch {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important; /* title, visual, text */
    row-gap: 16px !important;
    height: auto !important;
  }

  /* Authoritative order: Title (row 1), Visual (row 2), Text (row 3) */
  body.article-anarch #Anarch h1.major,
  body.article-anarch #Anarch .anarch-title { grid-row: 1 !important; order: 1 !important; }
  body.article-anarch #Anarch .anarch-visual { grid-row: 2 !important; order: 2 !important; }
  body.article-anarch #Anarch .anarch-copy,
  body.article-anarch #Anarch .text-container { grid-row: 3 !important; order: 3 !important; }

  body.article-anarch #Anarch .anarch-visual {
    display: grid !important;
    place-items: center;
    /* Container height follows embed size in portrait */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure the immediate 3D container has a concrete height for its absolutely-positioned canvas */
  body.article-anarch #Anarch .anarch-visual .three-embed {
    display: block !important;
    width: 100% !important;
    /* Embed dictates height via aspect ratio; overrideable via CSS var */
    aspect-ratio: var(--anarch-embed-aspect, 3 / 4) !important;
    height: auto !important;               /* let aspect-ratio compute block-size */
    min-height: 0 !important;              /* prevent width collapse via height floor */
    position: relative !important;
    justify-self: stretch !important;
    align-self: start !important;
    box-sizing: border-box !important;
  }

  /* 3D canvas should fill width and allow height overflow with scrollbar */
  body.article-anarch #Anarch .anarch-visual .three-embed canvas {
    width: 100% !important;
    height: 100% !important; /* fill the embed which sets aspect ratio */
    object-fit: contain !important;
    position: absolute !important;
    top: 0; left: 0;
  }

  body.article-anarch #Anarch .anarch-visual .three-embed,
  body.article-anarch #Anarch .anarch-visual canvas,
  body.article-anarch #Anarch .anarch-visual img,
  body.article-anarch #Anarch .anarch-visual video {
    display: block !important;
    width: 100% !important;           /* fit width */
    height: auto !important;          /* grow by aspect */
    max-height: var(--phase3-content-area-height) !important;
    object-fit: contain !important;
  }

  /* the band (.content-area) is the single scroller in portrait */
  body.article-anarch #Anarch .text-container { overflow: visible !important; }
}

/* Remove any rogue "auto height" rules that collapse the visual */
#Anarch.active .three-embed { height: unset !important; }

/* ===== Final authoritative portrait overrides (stability) ===== */
@media (orientation: portrait) {
  /* Intro: one portrait rule, single scroll container */
  body.article-intro .content-area {
    position: relative !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    height: var(--phase3-content-area-height, 60vh) !important;
    max-height: var(--phase3-content-area-height, 60vh) !important;
  }
  body.article-intro .intro-grid,
  body.article-intro .content-area > * {
    min-height: 0 !important;
    overflow: visible !important;
  }
  body.article-intro .intro-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    row-gap: 16px !important;
    align-items: start !important;
    height: auto !important;
    width: 100% !important;
  }

  /* Anarch: embed fills content width and defines height via 5:6 aspect */
  body.article-anarch #Anarch .anarch-visual { 
    width: 100% !important; 
    height: auto !important; 
  }
  body.article-anarch #Anarch .anarch-visual .three-embed {
    width: var(--safe-zone-width) !important; /* match content-area width exactly */
    max-width: 100% !important;              /* if container narrower, don't overflow */
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    aspect-ratio: 5 / 6 !important; /* requested aspect */
    height: auto !important;
    min-height: 0 !important;       /* do not force a floor; prevents width collapse */
  }
  body.article-anarch #Anarch .anarch-visual .three-embed canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 0; left: 0;
  }
}

/* === 2025-10-07: Authoritative fixes from automated analysis === */
@media (orientation: portrait) {
  /* Intro: ensure scroll and center image */
  body.article-intro .content-area { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
  body.article-intro .intro-visual { display: flex !important; justify-content: center !important; align-items: center !important; }
  body.article-intro .intro-visual img { display:block !important; width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; margin: 0 auto !important; }
  body.article-intro .intro-copy .text-container { overflow-y: auto !important; }

  /* Anarch: container uses safe-zone width; embed fills with 5:6 aspect; canvas fits */
  body.article-anarch #Anarch .anarch-visual { width: var(--safe-zone-width) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
  body.article-anarch #Anarch .anarch-visual .three-embed { width: 100% !important; aspect-ratio: 5 / 6 !important; min-height: 200px !important; position: relative !important; }
  body.article-anarch #Anarch .anarch-visual canvas { width: 100% !important; height: 100% !important; object-fit: contain !important; }
}

@media (orientation: landscape) {
  /* Intro: right-justify visual */
  body.article-intro .intro-visual { display: grid !important; place-items: center end !important; height: 100% !important; }
  body.article-intro .intro-visual img { width: auto !important; height: 100% !important; max-width: 100% !important; object-fit: contain !important; }

  /* Anarch: enforce two columns, prevent overlap, right-justify visual */
  body.article-anarch #Anarch { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; column-gap: 24px !important; align-items: stretch !important; height: var(--phase3-content-area-height) !important; }
  body.article-anarch #Anarch .anarch-visual { display: grid !important; place-items: center end !important; height: 100% !important; }
  body.article-anarch #Anarch .text-container { overflow-y: auto !important; overflow-x: hidden !important; }
  body.article-anarch #Anarch .anarch-visual .three-embed,
  body.article-anarch #Anarch .anarch-visual canvas,
  body.article-anarch #Anarch .anarch-visual img { width: auto !important; height: 100% !important; max-width: 100% !important; object-fit: contain !important; }
}

/* Pointer events policy for 3D */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) { body.article-anarch #Anarch .anarch-visual canvas { pointer-events: none !important; touch-action: pan-y !important; } }
@media (hover: hover) and (pointer: fine) { body.article-anarch #Anarch .anarch-visual canvas { pointer-events: auto !important; } }

/* === 2025-10-07: Minimal final normalization === */
:root { --anarch-embed-aspect: 5 / 6; }

@media (orientation:/

/* === Contact form validation states === */
.is-invalid { outline: 2px solid #e53935; outline-offset: 2px; }
.is-valid { outline: 2px solid #2e7d32; outline-offset: 2px; }
.field-error-text { color: #e53935; font-size: 0.9rem; min-height: 1.2em; }
.form-status { margin-top: 0.75rem; font-size: 0.95rem; }
.form-status.ok { color: #2e7d32; }
.form-status.error { color: #e53935; }
.form-status.loading { opacity: 0.7; }


/* === Contact success toast (matches 'Send Message' button style) === */
#contact-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.9rem 1.4rem;
  border: 2px solid rgba(237, 31, 131, 0.8);
  background: rgba(237, 31, 131, 0.9);
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  z-index: 9999;
}
#contact-toast.show { opacity: 1; }



/* ===== v80 Reel Fixes ===== */
:root{
  --reel-max: 1280px;
  --reel-pad: clamp(12px, 2vw, 24px);
}

/* Shared frame so title and video left edges always align */
.dynamic-content#reel .reel-grid{
  width: min(92vw, var(--reel-max));
  margin-inline: auto;
  padding: var(--reel-pad);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(10px, 1.2vw, 18px);
  contain: inline-size;
}

/* Prevent vertical letter wrap glitch */
.dynamic-content#reel h1.major{
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* Stable aspect ratio box for Vimeo (1920x816 ~ 2.353:1) */
.dynamic-content#reel .reel-video-container{
  width: 100%;
  aspect-ratio: 1920 / 816;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Force the injected Vimeo wrappers to fill the box */
.dynamic-content#reel .reel-video-container > iframe,
.dynamic-content#reel .reel-video-container > div,
.dynamic-content#reel .reel-video-container .player,
.dynamic-content#reel .reel-video-container .vp-wrap{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}

/* Side-by-side layout already handled elsewhere; no change needed. */



/* ===== v81: Hard overrides for REEL single-column & title integrity ===== */

/* Force REEL to be single column at all times (title above video) */
body.article-reel .content-area .dynamic-content#reel .reel-grid {
  display: block !important;
}
/* Also defeat the landscape rule that made two columns */
body.content-landscape.article-reel .content-area .dynamic-content#reel .reel-grid {
  display: block !important;
  grid-template-columns: none !important;
}

/* Title should never wrap into vertical stack even if container is transiently narrow */
.dynamic-content#reel h1.major {
  white-space: nowrap !important;
  overflow: visible !important;
  width: auto !important;
  display: block !important;
}

/* Ensure the whole REEL frame uses full available width and centers itself */
.dynamic-content#reel .reel-grid {
  width: min(92vw, var(--reel-max)) !important;
  margin-inline: auto !important;
  padding-left: var(--reel-pad) !important;
  padding-right: var(--reel-pad) !important;
}

/* Stable aspect ratio box and forcing children to fill (from v80, keep it) */
.dynamic-content#reel .reel-video-container {
  width: 100% !important;
  aspect-ratio: 1920 / 816 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #000 !important;
  border-radius: 16px !important;
}
.dynamic-content#reel .reel-video-container > iframe,
.dynamic-content#reel .reel-video-container > div,
.dynamic-content#reel .reel-video-container .player,
.dynamic-content#reel .reel-video-container .vp-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}



/* ===== v82: Ultra overrides to stop Reel title stacking and grid flip ===== */

/* Kill ANY grid two-column for Reel regardless of selector specificity */
body.article-reel #reel .reel-grid,
body.content-landscape.article-reel #reel .reel-grid,
#reel .reel-grid {
  display: block !important;
  grid-template-columns: none !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  contain: inline-size !important;
}

/* Make sure #reel itself doesn't inherit weird grid sizing */
body.article-reel #reel {
  display: block !important;
}

/* Title integrity and alignment */
#reel h1.major {
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 0 clamp(10px,1.5vw,18px) 0 !important;
}

/* Reel frame sizing (aligns title & video left edges) */
#reel .reel-grid {
  width: min(92vw, var(--reel-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--reel-pad) !important;
  padding-right: var(--reel-pad) !important;
}

/* Ensure the AR box remains solid even during transitions */
#reel .reel-video-container {
  width: 100% !important;
  aspect-ratio: 1920 / 816 !important;
  position: relative !important;
  background: #000 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  min-height: 120px !important; /* prevents zero-height during extreme calc */
}

#reel .reel-video-container > iframe,
#reel .reel-video-container > div,
#reel .reel-video-container .player,
#reel .reel-video-container .vp-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}


/* v87: ensure video container aligns to left within the reel frame */
#reel .reel-video-container { margin-left: 0 !important; }