/* =========================================================
   FADI AZRA — MAIN.CSS
   One shared stylesheet for: About, Artist Statement,
   Painting Series, Stop-Motion, Moroccan Lamp, MSI, Corpse Bride
   ========================================================= */

/* ---------- Theme / Base ---------- */
:root{
  --content: min(92vw, 1100px);
  --maxw: 1100px;
  --bg: #f8f3ef;
  --fg: #0a0a0a;
  --muted: #5a5a5a;
  --accent: #b36a70; /* pink */
  --line: rgba(0,0,0,.12);
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; }
body{
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  font-family: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3{ font-family: "Playfair Display", Georgia, serif; font-weight:700; }
.subhead,.subtitle{ font-family:"Playfair Display", Georgia, serif; font-style:italic; color:rgba(0,0,0,.5); }

/* ---------- Header / Page intro ---------- */
header.hero{
  padding: 8vh 0 6vh;
  width: min(92vw, var(--maxw));
  margin-inline: auto;
}
header.hero h1{
  font-size: clamp(28px, 4vw, 48px);
  margin:0; line-height:1.05; text-align:left;
}
header.hero .subhead{ font-size: clamp(14px, 1.8vw, 20px); margin-top:.3rem; text-align:left; }

/* Generic section/wrap widths */
.wrap, .section, .intro, section.statement{ width:min(92vw,var(--maxw)); margin-inline:auto; }

/* ---------- Artist Statement (2-column copy) ---------- */
section.statement{ padding: 2rem 0 2.5rem; }
.statement .copy{
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.05rem; line-height:1.7; text-align:justify; color:var(--fg);
  column-count:2; column-gap:3rem; column-fill:balance;
}
.statement .copy p{ margin:0 0 1.2em; break-inside:avoid; }
.statement .copy p:nth-child(odd){ text-indent:1rem; }
.statement .copy p:nth-child(even){ margin-left:1.5rem; }
.statement .copy p + p::before{
  content:""; display:block; height:.25rem; width:2.25rem; margin:.4rem 0 .6rem;
  background: linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,0));
}
@media (max-width:800px){
  .statement .copy{ column-count:1; column-gap:0; }
  .statement .copy p:nth-child(even){ margin-left:0; }
}

/* ---------- Project Cards / Galleries (Painting, MSI, Corpse Bride) ---------- */
.art-card{ position:relative; margin-bottom:16vh; }

.art-title{
  text-align:center; margin:3rem auto 1.5rem; width:100%;
  font-family:"Playfair Display", Georgia, serif; font-weight:600;
  font-size: clamp(18px, 2.4vw, 28px); line-height:1.2; color: var(--accent);
}

/* Safe single-media container (no flex/grid so images behave consistently) */
.art-media{
  position:relative; width: var(--content); margin-inline:auto;
  background:#fff; overflow:hidden;
}
.art-img{ width:100%; height:auto; display:block; object-fit:contain; border:0; background:none; }

/* Allow videos inside .art-media */
.art-media iframe{ width:100%; aspect-ratio:16/9; display:block; border:0; }

/* Info area under media */
.art-info{ position:static; margin:1rem auto 0; width:var(--content); background:none; border:0; padding:0; }

.art-meta{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:1rem;
  font-family:"Playfair Display", Georgia, serif; font-size:1rem; letter-spacing:.02em; color:var(--muted);
}
.art-meta-left,.art-meta-right{ display:flex; flex-direction:column; gap:.25rem; }
.art-meta-right{ text-align:right; align-items:flex-end; }

.art-desc, .intro-copy, .bio p, figcaption{
  font-family:"Playfair Display", Georgia, serif; font-size:1.05rem; line-height:1.7;
}
hr.divider{ border:0; border-top:1px solid #ccc; margin:7vh auto; width:60vw; }

/* Image grids used across MSI/Corpse Bride */
.art-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  width: min(92vw, var(--maxw));
  margin: 0 auto 2.5rem;
  justify-items: center;
}
.art-grid img{ width:100%; height:auto; object-fit:cover; background:#fff; }
.art-grid figure{ width:100%; margin:0; }
.art-grid figcaption{ font-size:.9rem; color:#5a5a5a; text-align:center; margin-top:.4rem; }

/* ---------- Corpse Bride & MSI intro rows (two images etc.) ---------- */
.intro{ margin: 3vh auto 7vh; }
.intro-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
  justify-items: center;
}
.intro-grid img{ width:100%; height:auto; object-fit:cover; border-radius:0; background:#fff; }
.intro-text{ font-family:"Playfair Display", Georgia, serif; font-size:1.05rem; line-height:1.7; text-align:justify; margin:1.2rem 0 3rem; }

/* ---------- Stop-Motion ---------- */
.wrap{ padding: 8vh 0 6vh; }
header.wrapless{ margin-bottom:40px; } /* noop helper if needed */

h2{ color: var(--accent); font-size: clamp(22px, 3vw, 28px); margin: 42px 0 16px; font-weight:700; }
h3{ color: var(--accent); font-size:20px; margin:28px 0 12px; font-weight:600; }
p{ margin:0 0 14px; }

/* two-up stills */
.stills{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:720px){ .stills{ grid-template-columns: 1fr 1fr; } }
.still,.photo{ width:100%; height:auto; border-radius:0; border:1px solid var(--line); display:block; }

/* three-up media grid */
.media3{ display:grid; grid-template-columns:1fr; gap:16px; margin:48px 0; }
@media (min-width:680px){ .media3{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:980px){ .media3{ grid-template-columns: repeat(3, 1fr); } }
.media3 figure{ margin:0; }
.media3 img{ width:100%; height:auto; border:1px solid var(--line); display:block; }

/* two-column text */
.cols{ column-count:1; column-gap:36px; }
@media (min-width:980px){ .cols{ column-count:2; } }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:980px){ .cols2{ grid-template-columns:1fr; } }

/* video frame (stop-motion) */
.video-frame{ position:relative; width:100%; max-width:860px; aspect-ratio:16/9; border:1px solid var(--line); overflow:hidden; margin:48px auto 8px; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Moroccan Lamp ---------- */
.grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem; width: min(92vw, var(--maxw)); margin:0 auto;
}
figure{ margin:0; background:transparent; }
figure img{ width:100%; height:auto; display:block; object-fit:cover; }
figcaption{ font-family:"Playfair Display", Georgia, serif; font-size:.98rem; color:#333; padding:.5rem .25rem .8rem; }

/* 16:9 video container (lamp) */
.video-container{
  position: relative; width:min(92vw, var(--maxw)); max-width:100%;
  margin:24px auto 0; border-radius:0px; overflow:hidden; background:#000;
}
.video-container::before{ content:""; display:block; padding-top:56.25%; }
.video-container iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Lightbox (lamp) */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.86); display:none; align-items:center; justify-content:center; z-index:9999; padding:4vmin; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:96vw; max-height:92vh; width:auto; height:auto; box-shadow:0 10px 30px rgba(0,0,0,.5); background:#fff; }
.lightbox .lb-caption{
  position:fixed; left:50%; transform:translateX(-50%); bottom:2vmin;
  color:#eee; font-family:"Playfair Display", Georgia, serif; font-size:1rem; text-align:center;
  padding:.4rem .8rem; background:rgba(0,0,0,.45)
}
.lb-close{ position:fixed; top:14px; right:18px; color:#fff; background:rgba(0,0,0,.55); border:1px solid #fff; padding:.2rem .55rem; cursor:pointer; font-size:18px; }
.thumb{ cursor:zoom-in; }

/* ---------- MSI (locked images) ---------- */
.locked-img{
  position: relative;
  display: inline-block;
  overflow: hidden;      /* trims Chrome’s edge artifact */
  isolation: isolate;    /* keeps any blending inside */
}
.locked-img img{
  opacity: .8;
  filter: blur(4px);               /* keep your blur here (on the IMG) */
  pointer-events: none;

  /* Chrome artifact fixes */
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.03) translateZ(0);  /* push edges off-screen + force GPU */
  backface-visibility: hidden;
  will-change: transform;
}
.locked-img::after{
  content:"locked until public announcement";
  position:absolute; top:45%; left:0; width:100%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  font-family:"Playfair Display", Georgia, serif;
  font-size: clamp(11px, 1vw, 15px); font-weight:500; letter-spacing:.05em;
  color:#000; text-transform:lowercase; text-align:center; pointer-events:none;
}

/* ---------- About ---------- */
section.about{
  width:min(92vw,var(--maxw)); margin-inline:auto; padding:0 0 8vh;
  display:grid; grid-template-columns: 420px 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items:start;
}
.portrait{ background:#fff; border-radius:0; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.05); }
.portrait img{ display:block; width:100%; height:auto; }
.bio h2{ font-family:"Playfair Display", Georgia, serif; font-weight:700; margin:0 0 .25rem; font-size: clamp(22px, 2.6vw, 30px); }
.bio .role{ font-family:"Playfair Display", Georgia, serif; font-style:italic; color: rgba(0,0,0,.55); margin-bottom:1.25rem; }
.links{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.9rem 1.5rem; font-size:.98rem; }
@media (max-width:860px){
  section.about{ grid-template-columns:1fr; }
  .portrait{ max-width:420px; }
  .portrait, .bio{ margin-inline:auto; }
}

/* ---------- Reveal micro-animation (safe) ---------- */
.reveal{ transform: translateY(4px); transition: transform .45s ease; will-change: transform; }
.reveal.in{ transform: none; }
.art-media.reveal, .art-media.reveal.in{ transform: none !important; }
@media (prefers-reduced-motion: reduce){ .reveal{ transform:none !important; transition:none !important; } }

/* ---------- Footer ---------- */
footer{
  padding: 12vh 0 10vh;
  color: #8a8a8a;
  text-align: center;
  font-size: .9rem;
  font-family: "Georgia", serif;
}
/* STOP-MOTION: About (left) + Poster (right) */
#about.intro{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: start;
  width: min(92vw, var(--maxw));
  margin-inline: auto;
}

/* Poster image styling */
.poster{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

@media (max-width: 1023px){
  #about.intro{
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
    text-align: left;
  }
  /* put the poster above on small screens (optional) */
  #about.intro > div:last-child{ order: -1; max-width: 420px; }
}
#about.intro p,
.intro-text p,
.section p,
.cols p,
.cols2 p,
.wrap p,
.media3 p,
.stills + figcaption,
.media3 figcaption {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--fg);
}
a {
  color: var(--accent);                   /* same pink shade */
  text-decoration: none;                  /* remove underline */
  font-weight: 500;                       /* stable weight, no jump */
  transition: color 0.25s ease, font-weight 0.25s ease;
}

a:hover {
  color: #000;                            /* turns black on hover */
  font-weight: 600;                       /* slightly bolder but smoother */
}

/* Keep special button links consistent but without underlines */
.btn, .links a, .footer-link {
  text-decoration: none;
  font-weight: 600;
  color: var(--accent);
  transition: color 0.25s ease;
}

.btn:hover, .links a:hover, .footer-link:hover {
  color: #000;
}
.bio p a,
.bio p a:visited {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;                /* consistent with link row */
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.bio p a:hover {
  color: #000;                     /* turns black on hover */
  text-decoration: underline;      /* underline appears */
  text-decoration-color: #000;     /* black underline */
  text-underline-offset: 2px;      /* neat spacing under text */
}
@media (min-width:1023px){
  .page-home{
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
  }
}

/* Put each piece in its column */
.page-home .sidebar{ grid-column: 1; }
.page-home .stage  { grid-column: 2; }

/* Safety: if you ever added margin-left for .stage before, remove it */
.stage{ margin-left: 0 !important; }

/* Make sure the hero actually shows */
.home-hero img{
  display: block;
  max-width: 100%;
  height: auto;
  opacity: 1 !important;   /* in case a reveal animation set it to 0 */
  visibility: visible !important;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 32px 24px 24px;
  background: var(--bg);
  border-right: 1px solid rgba(0,0,0,.06);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
}

.brand {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
}

.side-nav .nav-root { list-style: none; padding: 0; margin: 8px 0 0; }
.side-nav a {
  display: block;
  padding: 6px 0;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color .25s ease;
}
.side-nav a:hover {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Subtabs */
.has-children > a { margin-bottom: 2px; }

.subnav li a {
  font-weight: 500;
  color: var(--accent);
  opacity: .9;
  padding: 4px 0 4px 12px;
}
.subnav li a:hover { color: #000; }

/* Sidebar footer info */
.side-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.meta-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.meta-link:hover {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Stage */
.stage { background: var(--bg); padding: 40px 4vw 56px; }
.home-hero img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.06);
}
.home-intro h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 4vw, 48px);
  margin: 6px 0 8px;
}
.home-intro .intro-copy {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60ch;
}
.home-intro .btn {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color .25s ease;
}
.home-intro .btn:hover {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.has-children{ margin-bottom: 4px; }

/* Section heads ("Art", "Engineering", "About") */
.nav-head{
  all: unset;
  display: block;
  width: 100%;
  padding: 6px 0;
  cursor: pointer;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-decoration: none;
  transition: color .25s ease;
}

/* hover: turns black, no underline */
.nav-head:hover{
  color: #000;
  text-decoration: none; /* no underline */
}

/* "About" behaves the same */
a.nav-head.single:hover{
  color:#000;
  text-decoration: none; /* no underline */
}
.subnav li a{
  font-family: "Playfair Display", Georgia, serif;  /* was Inter */
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 0 4px 12px;
  transition: color .25s ease;
}
.subnav li a:hover{
  color:#000;
  text-decoration: none;
  text-underline-offset: 2px;
}
.has-children.open > .nav-head{
  color:#000;
  text-decoration: none;
  text-underline-offset: 2px;
}
/* === Subnav: slower OPEN, faster CLOSE === */

/* base (used for closing) — fast */
.subnav{
  display: block !important;
  list-style: none;
  padding: 0;
  margin: 0 0 4px 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  will-change: max-height, opacity;
  transition: max-height .22s ease, opacity .14s ease; /* fast close */
}

/* open state target values */
.has-children.open .subnav{
  max-height: 240px;  /* adjust if you add more items */
  opacity: 1;
}

/* when OPENING, use longer durations */
.has-children.opening .subnav{
  transition: max-height .65s ease, opacity .45s ease; /* slow open */
}

/* when CLOSING, ensure the fast timing is used (base applies) */
.has-children.closing .subnav{
  transition: max-height .22s ease, opacity .14s ease; /* fast close */
}

/* subtle item fade (keeps it gentle) */
.subnav li{
  opacity: 0;
  transform: translateY(1px);
  transition: opacity .28s ease, transform .28s ease;
}
.has-children.open .subnav li{
  opacity: 1;
  transform: translateY(0);
}

/* tiny stagger */
.has-children.open .subnav li:nth-child(1){ transition-delay: 25ms; }
.has-children.open .subnav li:nth-child(2){ transition-delay: 50ms; }
.has-children.open .subnav li:nth-child(3){ transition-delay: 75ms; }
.has-children.open .subnav li:nth-child(4){ transition-delay: 100ms; }
.has-children.open .subnav li:nth-child(5){ transition-delay: 125ms; }

@media (prefers-reduced-motion: reduce){
  .subnav, .subnav li{
    transition: none !important;
    transform: none !important;
    max-height: none !important;
    opacity: 1 !important;
  }
}
.social-icons {
  display: flex;
  flex-direction: column;   /* stack vertically */
  gap: 12px;                /* space between icons */
  margin-top: 32px;
}

.social-icons a {
  color: var(--accent);
  font-size: 18px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #000;
}

/* Base: centered, fixed readable width */
.with-sidebar .stage{
  width: min(92vw, var(--maxw));
  margin-inline: auto;
  padding: 40px 4vw 56px;
}

/* Phones + iPad portrait: full width of column with inner gutters */
@media (max-width: 1023px){
  .with-sidebar .stage{
    width: 100%;
    max-width: 720px;       /* visual center column */
    margin: 0 auto;
    padding: 0 16px 56px;
    box-sizing: border-box;
  }
}

/* iPad landscape to small desktop: fill the right column and keep nice padding */
@media (min-width: 1023px) and (max-width: 1300px){
  .with-sidebar .stage{
    width: 100%;
    margin: 0;
    padding: 40px 24px 56px;
  }
}


/* Sidebar grid only from 1023px up */
@media (min-width: 1023px){
  body.with-sidebar{
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
  }
}

/* make sure cards/images don't overflow that width */
@media (min-width: 1024px){
  body.with-sidebar .gallery,
  body.with-sidebar .art-card,
  body.with-sidebar .art-media{
    width: min(92vw, var(--maxw));
    margin-inline: auto;
  }
}
body.with-sidebar img.art-img{
  display: block;
  max-width: 100%;
  height: auto;
}



/* when the screen is narrower than the content width, tuck it to the edge */
@media (max-width: 700px){
  .site-logo{ left: 16px; top: 16px; }
}

/* fixed logo — same spot as home brand */
.site-logo{
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 2000;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  text-decoration: none;
  color: #000;
  transition: color .2s ease;
}
.site-logo:hover{ color:#ff69b4; font-weight: inherit;  }

/* home page: place the logo relative to the sidebar so it aligns with nav text */
.page-home .sidebar{ position: fixed; } /* if not already */
.page-home .sidebar .site-logo{
  position: absolute;
  top: 24px;     /* nudge to taste */
  left: 24px;    /* matches the sidebar’s inner padding */
}
/* all other pages that use the sidebar */
.with-sidebar .sidebar .site-logo{ position: absolute; top: 24px; left: 24px; }
.with-sidebar .side-nav{ margin-top: 56px; }

/* push the nav down so 'Art' doesn't overlap the logo */
.page-home .side-nav{ margin-top: 56px; }
@media (min-width: 1024px){
  .hero,
  .section,
  .statement,
  .gallery,
  .art-card,
  .wrap {
    width: min(92vw, 1100px);
    margin-inline: auto;
  }
}

/* unified top spacing for every page header */
header.hero{ padding: 8vh 0 6vh; }
.media2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  body.fade-enter-active { transition: none; }
}
/* ===== HOMEPAGE ONLY: fully static (no scroll) ===== */
html, body {
  overflow: auto; /* default for all pages */
}

/* Apply scroll lock ONLY to home */
body.page-home {
  height: 100vh;
  overflow: hidden;
  position: fixed;           /* locks it completely */
  width: 100%;
  top: 0;
  left: 0;
}

/* Stage area */
.page-home .stage {
  height: 100vh;
  padding: 0;
  overflow: hidden;
}

/* Center hero image with space above and below */
.page-home .home-hero {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 0;            /* top/bottom breathing room */
  box-sizing: border-box;
}

/* Hero image */
.page-home .home-hero img {
  height: 90vh;
  width: auto;
  object-fit: contain;
  display: block;
  border: none;
}
@media (prefers-reduced-motion: no-preference) {
  body {
    /* 'both' = starts from 0 opacity (backwards) and ends at 1 (forwards) */
    animation: siteFadeIn 0.3s ease-out both;
  }
}

@keyframes siteFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.subnav li a.active,
.subnav li a.active:hover {
  color: #000 !important;
  font-weight: 500 !important; /* normal weight */
  text-decoration: none !important;
}

/* Top-level single link (About) when active */
a.nav-head.single.active,
a.nav-head.single.active:hover {
  color: #000 !important;
  font-weight: 700 !important; /* keep section titles consistent */
  text-decoration: none !important;
}

/* Keep the parent section (Art/Engineering) black when it contains the active page */
.has-children:has(.subnav a.active) > .nav-head {
  color: #000 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
/* Current page link in the sidebar */
.side-nav a.active{
  color: #000;              /* black */
  text-decoration: none;    /* no underline */
  font-weight: 500;         /* not bold */
}
/* ===== Mobile drawer + centered content ===== */
.menu-btn{
  display:none;
  position:fixed;
  left:12px;
  top:12px;
  z-index:1002;
  background:transparent;
  border:0;
  padding:6px;
  line-height:0;
  cursor:pointer;
}
.site-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
  z-index:1001;
}

/* Phones and small tablets */
@media (max-width:1023px){
  /* show the hamburger */
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; }

  /* any page using the sidebar becomes single-column */
  body.with-sidebar{ display:block; }

  /* turn sidebar into a left drawer (hidden by default) */
  #sidebar.sidebar{
    position:fixed;
    top:0; left:0;
    height:100dvh;
    width:280px;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:1003;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    background:var(--bg);
    border-right:1px solid rgba(0,0,0,.06);
    padding:32px 24px 24px;
  }
  #sidebar.sidebar.open{ transform:translateX(0); }

  /* center the main content column */
  .with-sidebar .stage,
  .with-sidebar main,
  .with-sidebar .page-content{
    width:100%;
    max-width:720px;     /* adjust if you want wider/narrower */
    margin:0 auto;       /* centers */
    padding:0 16px 56px; /* side gutters + bottom space */
    box-sizing:border-box;
  }

  /* prevent background scroll when drawer is open */
  body.menu-open{ overflow:hidden; touch-action:none; }

  /* give room so the button doesn't overlap a header/logo if you have one */
  header{ padding-left:44px; }
    /* ===== HOME (page-home) on phones: remove the 2-col grid and center content ===== */
  body.page-home { display: block; }          /* stop using the 2-col grid */
  .page-home { grid-template-columns: none; } /* no reserved 280px column */

  .page-home .stage {
    width: 100%;
    max-width: 720px;      /* tweak if you want wider/narrower */
    margin: 0 auto;        /* center horizontally */
    padding: 0 16px;       /* side gutters */
    box-sizing: border-box;
  }
    body.with-sidebar header.hero,
  body.with-sidebar .hero,
  body.with-sidebar .section,
  body.with-sidebar section.statement,
  body.with-sidebar .gallery,
  body.with-sidebar .art-card,
  body.with-sidebar .art-media,
  body.with-sidebar .art-info,
  body.with-sidebar .art-grid,
  body.with-sidebar .intro,
  body.with-sidebar .intro-grid,
  body.with-sidebar .video-container,
  body.with-sidebar .media3,
  body.with-sidebar .wrap,
  body.with-sidebar .grid,
  body.with-sidebar section.about {
    width: 100% !important;
    max-width: 720px;
    margin-inline: auto !important;
  }
}

@media (prefers-reduced-motion: reduce){
  #sidebar.sidebar{ transition:none; }
}

@supports (padding: max(0px)){
  .menu-btn{ left:max(12px, env(safe-area-inset-left)); top:max(12px, env(safe-area-inset-top)); }
  #sidebar.sidebar{ padding-top:max(24px, env(safe-area-inset-top)); }
}
/* home painting click area */
.home-hero a {
  display: inline-block;
  cursor: pointer;
}

.home-hero a img {
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* ===== Home hero hover overlay ===== */
.home-hero { position: relative; display: inline-block; }
.hero-link { display: inline-block; position: relative; outline: none; }
.home-hero-img { display: block; width: 100%; height: auto; transition: transform .35s ease, opacity .35s ease; }


/* base overlay */
.hero-overlay{
  position: absolute; inset: 0;
  display: grid; place-content: center;      /* default centering; variants will override */
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  padding: 1rem; text-align: left;
  color: rgba(0,0,0,.85);                     /* adjust for your image; use #111 or #fff if needed */
  mix-blend-mode: normal;                     /* keep it clean; change to 'difference' for experimental */
}

.hero-overlay .overlay-line{ font-size: clamp(16px, 2.6vw, 28px); line-height: 1.1; }
.hero-overlay .overlay-line.small{ font-size: clamp(14px, 2.1vw, 22px); opacity: .9; }

/* show overlay on hover/focus; dim image just a touch */
@media (hover:hover){
  .hero-link:hover .home-hero-img,
  .hero-link:focus-visible .home-hero-img{
    transform: none !important;
    opacity: 1 !important;   /* or 0.96 if you like a tiny fade */
  }
}

/* Accessible fallback for touch devices (no hover):
   keep image normal and reveal a subtle bottom label instead (handled in Option B) */
@media (hover: none) {
  .overlay--center { opacity: 1; } /* if you prefer always-visible on mobile, keep this; or remove to hide */
}

/* ---------- VARIANTS (pick one by setting the overlay class) ---------- */

/* OPTION A: overlay--center (centered title card) */
.overlay--center { place-content: center; }
.overlay--center { text-align: left; }

/* OPTION B: overlay--label (bottom-left label that slides up) */
.overlay--label{
  place-content: end start;                   /* bottom-left */
  transform: translateY(10px);
}
@media (hover: hover) {
  .hero-link:hover .overlay--label,
  .hero-link:focus-visible .overlay--label { transform: translateY(0); }
}
.overlay--label .overlay-line { background: rgba(255,255,255,.85); padding: .15rem .4rem; display: inline-block; }
.overlay--label { color: #111; }              /* darker text over light chips */

/* OPTION C: overlay--underline (minimal, with an underline animating under the last line) */
.overlay--underline { place-content: center; text-align: left; }
.overlay--underline .overlay-line.small{
  position: relative; display: inline-block;
}
.overlay--underline .overlay-line.small::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin:left;
  transition: transform .35s ease;
}
@media (hover:hover){
  .hero-link:hover .overlay--split,
  .hero-link:focus-visible .overlay--split{
    opacity:1;
  }

  /* no zoom, just a gentle fade */
  .hero-link:hover .home-hero-img,
  .hero-link:focus-visible .home-hero-img{
    opacity:0.96;
    transform:none;
  }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .home-hero-img, .hero-overlay, .overlay--label .overlay-line.small::after { transition: none; }
}
/* ===== Split overlay refined ===== */
.overlay--split{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.25);
  font-family:var(--heading-font, Georgia, "Times New Roman", serif);
}
.overlay--split{
  color:rgba(255,255,255,0.9);
  text-shadow:0 1px 6px rgba(0,0,0,0.25);
}
/* lighter, calmer typography */
.overlay--split .overlay-line{
  font-weight:400;          /* not bold */
  line-height:1.1;
  letter-spacing:0.3px;
}

.overlay--split .overlay-line.small{
  font-weight:400;
  font-size:clamp(14px,1.5vw,19px);
  opacity:.9;
}

/* left group (Art + Engineering) */
.overlay--split .overlay-left{
  position:absolute;
  top:5%;       /* move up */
  left:34%;      /* move left, onto lilac corner */
  text-align:left;
  font-size:clamp(17px,2vw,26px);
}

/* right group (in Dialogue) */
.overlay--split .overlay-right{
  position:absolute;
  top:10%;       /* slightly lower than the left group */
  right:10%;     /* adjust until it visually aligns with "Engineering" */
  text-align:right;
  font-size:clamp(15px,1.5vw,20px);
}

/* hover reveal */
@media (hover:hover){
  .hero-link:hover .overlay--split,
  .hero-link:focus-visible .overlay--split{opacity:1;}
  .hero-link:hover .home-hero-img,
  .hero-link:focus-visible .home-hero-img{opacity:.96;transform:scale(1.01);}
}

/* visible on touch */
@media (hover:none){.overlay--split{opacity:1;}}

/* ===== MOBILE LOGO: match desktop FADI AZRA ===== */
.mobile-logo {
  display: none;
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 2000;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;

  color: #000;
  font-weight: 400; /* same visual thickness as sidebar logo */
  transition: color 0.2s ease; /* identical timing to .site-logo */
}

.mobile-logo:hover {
  color: #ff69b4; /* same hover pink as .site-logo */
  font-weight: inherit; /* prevents any bold flicker */
}

/* show only on small screens */
@media (max-width: 1023px) {
  .mobile-logo {
    display: block;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
  }
}

/* fade-out when menu opens */
body.menu-open .mobile-logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Hamburger button: fade out while menu is open */
.menu-btn{
  transition: opacity var(--fade) ease, transform .25s ease;
}
body.menu-open .menu-btn{
  opacity: 0;
  pointer-events: none;
}


.site-overlay{
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
}
.site-overlay.is-visible{
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fade) ease;
}

/* === Home: restrict tap/click to only the image itself === */
.page-home .home-hero { 
  pointer-events: none !important;           /* ignore taps on the flex wrapper */
}
.page-home .home-hero .hero-link,
.page-home .home-hero .hero-link * {
  pointer-events: auto !important;           /* re-enable only on the link & its children */
}

/* ensure the link box = image box exactly (no stray whitespace) */
.page-home .home-hero .hero-link { 
  display: inline-block !important; 
  line-height: 0;                             /* removes inline gaps */
}
.page-home .home-hero .hero-link img { 
  display: block !important;                  /* no inline whitespace */
}



/* ===== Home hero: center and constrain by the right column ===== */
body.page-home .stage {
  display: grid;           /* easy centering */
  place-items: center;     /* centers the hero horizontally & vertically */
  padding: 0;              /* you already do this, safe to keep */
}

/* The hero container should be limited by the column, not the viewport */
body.page-home .home-hero {
  margin: 0 auto;
  width: min(92%, var(--maxw));
}

/* Make the link fill the container so the image can be 100% width */
body.page-home .home-hero .hero-link {
  display: block;
  width: 100%;
}

/* Final image sizing: never exceed the container; only up to 90vh tall */
body.page-home .home-hero .home-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  margin: 0 auto;          /* belt-and-suspenders centering */
}
/* === In-content links on the right column (e.g., "Download PDF") === */
/* This will NOT touch the sidebar/nav because those aren't inside .stage */
.stage a,
.stage .btn,
.stage .footer-link {
  font-family: "Playfair Display", Georgia, serif; /* make them all match */
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color .25s ease, text-decoration-color .25s ease;
}

.stage a:hover,
.stage .btn:hover,
.stage .footer-link:hover {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Default: two halves side-by-side, right half right-aligned */
.art-meta{
  display: flex;
  flex-wrap: wrap;          /* allow wrap when space is tight */
  gap: .5rem 2rem;
  align-items: flex-start;
}
.art-meta-left,
.art-meta-right{
  display: grid;
  gap: .25rem;
  flex: 1 1 320px;          /* side-by-side until ~320px each */
}
.art-meta-right{
  text-align: right;        /* desktop/iPad wide */
  align-items: end;
}

/* When they no longer fit next to each other, align everything left */
@media (max-width: 1100px){
  .art-meta-right{
    text-align: left;       /* <-- this is the fix you want */
    align-items: start;
  }
}

/* Phones: single column (you already had similar) */
@media (max-width: 768px){
  .art-meta{
    display: block;
  }
  .art-meta-left, .art-meta-right{
    display: grid;
    gap: 6px;
    margin-top: 8px;
  }
}
/* Desktop/tablet landscape: real sidebar (no drawer transform) */
@media (min-width: 1023px){
  #sidebar.sidebar{
    position: sticky;
    top: 0;
    height: 100dvh;
    width: 280px;
    transform: none !important;
    box-shadow: none;
    border-right: 1px solid rgba(0,0,0,.06);
    padding: 32px 24px 24px;
  }
}
/* Tablet (landscape) centering: width relative to the stage column, not viewport */
@media (min-width: 1023px) and (max-width: 1300px){
  body.with-sidebar .hero,
  body.with-sidebar .section,
  body.with-sidebar .statement,
  body.with-sidebar .gallery,
  body.with-sidebar .art-card,
  body.with-sidebar .art-media,
  body.with-sidebar .art-info,
  body.with-sidebar hr.divider,
  body.with-sidebar .art-grid,
  body.with-sidebar .intro,
  body.with-sidebar .intro-grid,
  body.with-sidebar .intro-text,
  body.with-sidebar .video-container,
  body.with-sidebar .media3,
  body.with-sidebar .wrap,
  body.with-sidebar .grid,
  body.with-sidebar section.about {
    width: min(92%, var(--maxw)) !important;
    margin-inline: auto !important;
  }

  /* About: flexible first column */
  body.with-sidebar section.about{
    grid-template-columns: minmax(300px, 38%) 1fr;
    gap: clamp(16px, 3vw, 28px);
  }
}
/* ===== FINAL MOBILE/TABLET CENTER LOCK — put this as the LAST rules in the file ===== */
@media (max-width:1023px){
  /* 1) Center the right column itself and cap it */
  .with-sidebar .stage{
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 16px 56px !important;
    box-sizing: border-box !important;

    /* make any components that use --content stop using 92vw */
    --content: 100% !important;
  }

  /* 2) Force all common inner wrappers to match the stage width */
  .with-sidebar .stage header.hero,
  .with-sidebar .stage .hero,
  .with-sidebar .stage .section,
  .with-sidebar .stage section.statement,
  .with-sidebar .stage .gallery,
  .with-sidebar .stage .art-card,
  .with-sidebar .stage .art-media,
  .with-sidebar .stage .art-info,
  .with-sidebar .stage .art-grid,
  .with-sidebar .stage .intro,
  .with-sidebar .stage .intro-grid,
  .with-sidebar .stage .video-container,
  .with-sidebar .stage .media3,
  .with-sidebar .stage .wrap,
  .with-sidebar .stage .grid,
  .with-sidebar .stage section.about,
  .with-sidebar .stage hr.divider{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ===== HOME PAGE — FINAL CENTER LOCK (put last) ===== */

/* keep components that rely on --content from using the viewport */
.page-home .stage{ --content: 100% !important; }

/* Desktop / iPad-landscape and up */
@media (min-width:1023px){
  /* Ensure the 2-col layout exists (sidebar + stage) */
  .page-home{
    display: grid !important;
    grid-template-columns: 280px minmax(0,1fr) !important;
  }

  /* Center everything in the right column */
  .page-home .stage{
    display: grid !important;
    place-items: center !important;   /* centers horizontally & vertically */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Constrain the hero to a nice centered column */
  .page-home .home-hero{
    width: min(92%, var(--maxw)) !important;
    margin: 0 auto !important;
  }

  /* Make the link/image fill that column exactly */
  .page-home .home-hero .hero-link{
    display: block !important;
    width: 100% !important;
    line-height: 0 !important; /* no inline gap */
  }
  .page-home .home-hero .home-hero-img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }
}
/* ==== HOMEPAGE FINAL CENTERING PATCH ==== */
@media (min-width:1023px){
  /* Keep the left rail fixed and sized */
  .page-home .sidebar{
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    height: 100dvh !important;
  }

  /* Make the right column explicitly occupy the remaining width */
  .page-home .stage{
    position: fixed !important;
    left: 280px !important;                    /* start right after the sidebar */
    top: 0 !important;
    width: calc(100vw - 280px) !important;     /* fill the rest of the viewport */
    height: 100vh !important;

    display: grid !important;
    place-items: center !important;            /* <-- hard center */
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Constrain the hero nicely inside that right column */
  .page-home .home-hero{
    width: min(92%, var(--maxw)) !important;
    margin: 0 auto !important;
  }
  .page-home .home-hero .hero-link{
    display: block !important;
    width: 100% !important;
  }
  .page-home .home-hero .home-hero-img{
    width: 100% !important;
    height: auto !important;
    max-height: 90vh !important;
    object-fit: contain !important;
  }
}