/* ===== Local fonts (drop .woff2 files in /fonts) ===== */
@font-face{
  font-family:"Bicubik";
  src:url("fonts/Bicubik.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Supertext 03";
  src:url("fonts/ST01R.TTF") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* Global fallbacks (keep Inter as body fallback) */
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }


/* =========================
   THEME
========================= */
:root{
  --bg:#181a19;
  --panel:#232623;
  --panel-2:#5a5d61; /* grey page for About/Experience look */
  --ink:#f5f7f5;
  --muted:#c9cbc8;
  --mono:#d8d9d7;
  --lime:#d7ff45;     /* neon lime like your mock */
  --lime-dk:#7f8f2a;
  --stroke:#313431;
  --max:1100px;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: "Supertext 03", sans-serif;
  line-height:1.6;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}
img{max-width:100%; display:block}

/* Typography */
.mono{font-family:"SF Mono", monospace; font-size: .9rem; font-weight:400;}
.mono-bold{font-family:"SF Mono", monospace; font-size: .9rem; font-weight:700;}
.eyebrow{font-family:"Orbitron", sans-serif; letter-spacing:.12em;text-transform:uppercase;color:#d6d7d5;font-size:.9rem; margin: 2; /* Remove default paragraph margins */}
.micro{font-size:.85rem;color:#d0d1cf}
.section{max-width:var(--max); margin:0 auto; padding:64px 18px}
.section-title{
  font-family: Orbitron, sans-serif;
  font-size: clamp(28px,5.5vw,44px);
  text-align:center; margin:0 0 18px; color:var(--lime);
}

/* =========================
   HEADER & NAV
========================= */
.hdr{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:16px 18px; /* Increased padding for more vertical space */ border-bottom:1px solid var(--stroke);
  background:rgba(24,26,25,.9); backdrop-filter: blur(6px);
}
.hdr::after{
  content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:2px;
  background: linear-gradient(90deg, transparent 0, var(--lime) 10%, var(--lime) 90%, transparent 100%);
  opacity:.9; pointer-events:none;
}
.brand{display:flex; align-items:flex-start; /* Align to top to allow logo to grow */ gap:10px; color:inherit; text-decoration:none}
.mark{
  height: 52px; /* Final size increase */
  width: auto;
}
.brand-lines strong{font-family: "SF Mono", monospace; font-size:.9rem; letter-spacing:.08em}
.brand-lines small{font-family: "SF Mono", monospace; display:block; font-size:.7rem; color:#bfc0bd}

.pill{
  display:inline-block; padding:8px 14px; border-radius:999px;
  border:1px solid rgba(215,255,69,.45); color:#e7e8e6; text-decoration:none; 
  font-family: "SF Mono", monospace;
  font-size:.7rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.pill:hover{background:var(--lime); color:#0e120e; border-color:transparent}
.pill.active{background:var(--lime); color:#0e120e; font-weight:700}

.pill--resume {
  background: var(--lime);
  color: #101410;
  border-color: transparent;
  border-radius: 12px;
  padding: 14px 22px; /* from .pill--big */
  text-transform: uppercase; /* from .pill--big */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  transition: transform 0.2s ease-in-out;
}

.pill--resume:hover {
  transform: scale(1.05);
}

.pill--resume .pdf-icon {
  width: 16px;
  height: 16px;
  fill: currentColor; /* Icon color will match text color */
}
.nav{display:flex; gap:10px}

/* mobile menu */
.menu-toggle{display:none}
.hamburger{display:none; width:38px; height:28px; position:relative; cursor:pointer}
.hamburger span, .hamburger span::before, .hamburger span::after{
  content:""; position:absolute; left:6px; right:6px; height:3px; background:#eaeaea; border-radius:2px;
}
.hamburger span{top:50%; transform:translateY(-50%)}
.hamburger span::before{top:-9px}
.hamburger span::after{bottom:-9px}
@media (max-width:800px){
  .hamburger{display:block}
  .nav{
    position:absolute; left:18px; right:18px; top:60px; display:none; flex-direction:column;
    background:var(--panel); border:1px solid var(--stroke); border-radius:14px; padding:10px;
  }
  .menu-toggle:checked ~ .nav{display:flex}
}

/* =========================
   HERO
========================= */
.hero{
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 70px 18px 90px;
  min-height: 90vh; /* Make hero fill the viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;           /* new stacking context so z-index is clean */
}

/* headline + eyebrow on top of the logos */
.eyebrow, .headline, .micro, .round-cta{
  font-family: "Orbitron", system-ui, sans-serif; 
  position: relative; 
  z-index: 2; 
  line-height: 1;
}

.headline{
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: clamp(46px, 7.7vw, 144px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 35px 0; /* Add small top/bottom margin to control spacing */
}
.headline .line{ display:block; }

@media (max-width: 640px) {
  .headline .line { display: inline; }
}
.headline .accent{ color: var(--lime); }

/* center bottom CTA */
.round-cta{
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--lime); color: #0f130f; font-weight: 800; text-decoration: none;
  box-shadow: 0 0 0 0 rgba(215,255,69,.35);
  transition: box-shadow .2s ease, transform .12s ease;
}
.round-cta:hover{ transform: translateX(-50%) translateY(-1px); box-shadow: 0 0 0 10px rgba(215,255,69,.25); }

/* ---------- Background logos (match Figma placement) ---------- */
/* tweak these two variables to ‘nudge’ sizes if needed */
:root{
  --dg-right-size: min(60vw, 820px);
  --dg-left-size:  min(58vw, 760px);
}

/* big right logo */
.big-dg{
  position: absolute;
  z-index: -1;                   /* behind text but inside hero */
  pointer-events: none; user-select: none;
  width: var(--dg-right-size);
  right: -20vw;                 /* push slightly off canvas */
  bottom: -3vw;
  transform: rotate(17deg);
}
.big-dg img{ display:block; width:100%; height:auto; opacity: 0.18; }
.big-dg--left{
  width: var(--dg-left-size);
  left: -25vw;                  /* more off canvas on the left */
  bottom: -35vw;
  right: auto;
  transform: rotate(-117deg);
}

/* ---------- Responsive nudges ---------- */
@media (max-width: 1000px){
  :root{
    --dg-right-size: min(70vw, 760px);
    --dg-left-size:  min(66vw, 680px);
  }
  .big-dg{ right: -12vw; bottom: -10vw; }
  .big-dg--left{ left: -26vw; bottom: -18vw; }
}
@media (max-width: 640px){
  :root{
    --dg-right-size: 95vw;
    --dg-left-size:  90vw;
  }
  .big-dg{ right: -28vw; bottom: -22vw; opacity: .14; }
  .big-dg--left{ left: -40vw; bottom: -30vw; opacity: .14; }
}

/* =========================
   ABOUT
========================= */
.about{
  background:var(--panel-2);
  position:relative; 
  z-index: 2; 
  min-height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.about__grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
@media (max-width:900px){ .about__grid{grid-template-columns:1fr; } }
.card{
  background: transparent ; border:0px solid #3a3d42; border-radius:20px; padding:18px;
  text-align: justify;
}
.frame{border-radius:20px; overflow:hidden; border:0px solid #3a3d42; background:#222}
.about__photo.frame { aspect-ratio: 1 / 1;}

.about__photo img{width:100%; height:100%; display:block; object-fit:cover; /* Fill container, crop if needed */}

/* Toolkit Box Styles */
.toolkit-box {
  background: #D9D9D9; /* Light grey from mockup */
  color: #181a19; /* Dark text */
  border-radius: 16px;
  padding: 16px 20px;
  margin: 24px auto;
  text-align: center;
  max-width: 480px;
}
.toolkit-box h4 {
  margin: 0 0 16px;
  font-size: .8rem;
  overflow-x: auto;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.toolkit-icons {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 6px 12px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  gap: 10px;
}
/* each item is a snap target and fixed width */
.toolkit-icons figure{
  flex: 0 0 60px;              /* width of each “tile” */
  scroll-snap-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.toolkit-icons img {
  width: 52px;
  height: 52px;
}

/* optional: hide scrollbar while keeping scrollability */
.toolkit-icons{ scrollbar-width: none; }
.toolkit-icons::-webkit-scrollbar{ display: none; }
.toolkit-icons figcaption {
  font-family: "SF Mono", monospace;
  font-size: .75rem;
  color: #333;
}

/* =========================
   PROJECTS + FILTERS
========================= */
.filters{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:10px 0 20px;
}
.pill--big{padding:14px 22px; border-radius:26px; font-weight:700; text-transform:uppercase}
.projects > input, .experience input {display:none}
#show-all:checked ~ .filters label[for="show-all"],
#show-uiux:checked ~ .filters label[for="show-uiux"],
#show-graphic:checked ~ .filters label[for="show-graphic"],
#show-product:checked ~ .filters label[for="show-product"],
#show-illustration:checked ~ .filters label[for="show-illustration"] {
  background: var(--lime);
  color: #101410;
  border-color: transparent;
}

.grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width:780px){ .grid{grid-template-columns:1fr} }

.tile{
  display:block; background:#222; border:1px solid #333; border-radius:22px; overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tile:hover{ border-color:#454; box-shadow:0 10px 30px rgba(0,0,0,.3) }
.tile__label{display:flex; justify-content:space-between; align-items:center; padding:10px 14px}
.tile__label h3{margin:0; font-size:1.05rem}
.chip{font-size:.75rem; padding:4px 8px; border:1px solid #3a3b3a; border-radius:999px; color:#d6d7d6}

/* CSS-only filtering */
#show-uiux:checked ~ .grid .tile:not(.cat-uiux){ display:none }
#show-graphic:checked ~ .grid .tile:not(.cat-graphic){ display:none }
#show-product:checked ~ .grid .tile:not(.cat-product){ display:none }
#show-illustration:checked ~ .grid .tile:not(.cat-illustration){ display:none }

/* =========================
   EXPERIENCE
========================= */
.experience {
  background: var(--panel-2);
  z-index: 2;
}
.experience .xp{margin:18px 0}

/* Experience Filters */
#show-xp-all:checked ~ .filters label[for="show-xp-all"],
#show-work:checked ~ .filters label[for="show-work"],
#show-leadership:checked ~ .filters label[for="show-leadership"] {
  background: var(--lime);
  color: #101410;
  border-color: transparent;
}

#show-work:checked ~ .xp:not(.cat-work) { display: none; }
#show-leadership:checked ~ .xp:not(.cat-leadership) { display: none; }
.card--row{display:grid; grid-template-columns:1fr .55fr; gap:18px; align-items:center}
@media (max-width:900px){ .card--row{grid-template-columns:1fr} }
.xp__role{margin:.2rem 0 .6rem; font-family:Orbitron, sans-serif}
.org{color:var(--lime); font-size:.85rem; margin-left:.5rem}
.bullets{margin:0; padding-left:1.2rem}
.xp__photo img{width:100%; height:auto}

/* =========================
   DETAIL PAGE (Project)
========================= */
.detail-page .section{padding-top:34px}
.project__head{
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align:left; margin:0 auto 16px; max-width:var(--max); padding:0 18px
}

.project__head--split {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}

.project__sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.project__title{
  font-family: Orbitron, sans-serif; text-transform:uppercase;
  font-size: clamp(36px, 6vw, 64px); margin:0;
  display: block; /* Ensure title is a block element */
}
.ribbon{
  display:inline-block; margin-top:10px; padding:8px 14px; border-radius:999px;
  border:1px solid #3a3c39; color:#d9dad7; background:#1e2121
}
.project__meta{
  max-width:var(--max); margin:0 auto; padding:0 18px;
  display:grid; gap:16px; grid-template-columns:1fr 2fr 1fr;
}
@media (max-width:980px){ .project__meta{grid-template-columns:1fr} }

.x-pill-box{
  background:#222; border:1px solid #333; border-radius:40px; padding:16px;
}
.pill-box{
  background:#222; border:1px solid #333; border-radius:22px; padding:16px;
}
.pill-box h3{margin:.1rem 0 .4rem}
.pill-box--highlight{ background:#2b2e33; border-color:#3a3d42 }
.pill-box-transparent{
  background:transparent; border:0px solid #333; border-radius:22px; padding:16px;
}
.gallery{
  max-width:var(--max); margin:16px auto; padding:18px; border-radius: 20px; background: #D9D9D9;
}
.gallery img{width:100%; height:auto; display:block}

/*Image scroll container (landscape)*/
.image-scroll-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 16px 0;
  margin-bottom: 16px;
}


.image-scroll-container figure {
  margin: 0;
  flex-shrink: 0;
  scroll-snap-align: center;
}

.image-scroll-container--flex-start {
  justify-content: flex-start;
}

.image-scroll-container img {
  width: auto;
  border-radius: 12px;
}

.image-scroll-container--tall img {
  height: 400px;
}

.image-scroll-container figcaption {
  color: var(--panel);
  padding-top: 8px;
  font-size: 0.9rem;
}

.sticker-gallery img {
  height: 300px;
}

.story-highlights-gallery .placeholder-box img {
  height: 100px !important;
  width: 100px !important;
  border-radius: 50%;
  object-fit: cover;
}

/* Hide scrollbar */
.image-scroll-container { scrollbar-width: none; }
.image-scroll-container::-webkit-scrollbar { display: none; }

/*Image container (portrait)*/
.image-container {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 16px 0;
}


.image-container figure {
  margin: 0;
  flex-shrink: 0;
}

.image-container img {
  height: 735px; /* Or whatever height you prefer */
  width: auto;
  object-fit: cover;
  border-radius: 12px;
}

.image-container figcaption {
  color: var(--panel);
  padding-top: 8px;
  font-size: 0.9rem;
}

/* Hide scrollbar */
.image-container { scrollbar-width: none; }
.image-container::-webkit-scrollbar { display: none; }
.pdf-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 4px; /* Optional: adds a slight curve to the embed itself */
}
.grid-2{ display:grid; gap:16px; grid-template-columns:1fr 1fr }
@media (max-width:760px){ .grid-2{grid-template-columns:1fr} }

.project__section{max-width:var(--max); margin:0 auto; padding:0 18px}
.back{display:inline-block; margin-top:6px}

/* Site Preview Link */
.site-preview-link a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: transform .2s ease;
}
.site-preview-link a:hover {
  transform: translateY(-4px);
}
.site-preview-link img {
  border: 0px solid var(--stroke);
  margin-bottom: 1rem;
}
.site-preview-link span {
  display: inline-block;
  padding: 10px 18px;
  background: var(--panel);
  border-radius: 999px;
  border: 1px solid var(--stroke);
}

/* Slideshow container for mobile */
.wireframes-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  background-color: transparent;
}

/* Slideshow container for mobile */
.slideshow-container {
  max-width: 250px;
  position: relative;
  margin: auto;
}

.slideshow-container.frame {
  background: transparent;
}

/* Slideshow container for web */
.slideshow-container-web {
  max-width: 600px; /* Increased width for web wireframes */
  position: relative;
  margin: auto;
}

.slideshow-container-web.frame {
  background: transparent;
}

/* Slides */
.mobile-slide, .web-slide {
  display: none;
}

/* Next & previous buttons */
.prev-mobile, .next-mobile, .prev-web, .next-web {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.4);
}

/* Position the "next button" to the right */
.next-mobile, .next-web {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev-mobile:hover, .next-mobile:hover, .prev-web:hover, .next-web:hover {
  background-color: rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot-mobile, .dot-web {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot-mobile:hover, .dot-web:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* =========================
   FOOTER
========================= */
.ftr{ text-align:center; padding:40px 18px; color:#cfcfcf; border-top:1px solid var(--stroke) }

/* =========================
   DDZ CASE STUDY
========================= */

.sub-nav {
  position: sticky;
  top: 90px; /* Adjust based on main header height */
  background: rgba(24, 26, 25, .9);
  backdrop-filter: blur(6px);
  z-index: 20;
  padding: 10px 18px;
  margin: 2rem auto 2rem;
  max-width: 470px;
  border-radius: 999px;
  border: 0px solid var(--stroke);
  border-top: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.case-study-section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--stroke);
}

.case-study-section:last-of-type {
  border-bottom: none;
}

.placeholder-box {
  background: transparent;
  border: 0px dashed #4a4d52;
  border-radius: 16px;
  color: var(--muted);
  font-family: "SF Mono", monospace;
  font-size: .9rem;
  padding: 1rem;
  overflow: hidden; /* Ensure image corners are clipped */
  border-radius: 16px;
  overflow: hidden;
}

.grid-3 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 760px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.cta-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 10px 18px;
  background: var(--panel);
  border-radius: 999px;
  border: 1px solid var(--stroke);
  color: var(--lime);
  text-decoration: none;
  transition: background .2s ease;
}

.cta-link:hover {
  background: var(--lime);
  color: #101410;
}

.nametag-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 16px;
  padding: 16px 0;
  scrollbar-width: none; /* Hide scrollbar */
}

.nametag-gallery::-webkit-scrollbar { 
  display: none; /* Hide scrollbar for Chrome/Safari */
}

.nametag-gallery img {
  height: 250px; /* Adjust height as needed */
  width: auto;
  border-radius: 12px;
}

/* =========================
   GAPYEARSG PAGE
========================= */
.project__section {
  margin-bottom: 3rem;
}

.ig-grid {
  display: block;
  margin-bottom: 2rem;
}

.ig-post {
  display: block;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--stroke);
}

.ig-post img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .3s ease;
}

.ig-post:hover img {
  transform: scale(1.05);
}

.comic-strip-gallery a {
  flex: 0 0 24%;
  min-width: 220px;
}

.comic-strip-gallery img {
  width: 100%;
  height: auto;
}

.gallery-wrapper {
  position: relative;
}

.scroll-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  animation: pulse-right 1.5s infinite;
  z-index: 10;
}

@keyframes pulse-right {
  0% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(5px); }
  100% { transform: translateY(-50%) translateX(0); }
}

.webinar-item img {
  border-radius: 12px;
  border: 0px solid var(--stroke);
}

.webinar-slides-gallery a {
  flex: 0 0 40%; /* Show ~2.5 items */
  min-width: 320px;
}

.webinar-slides-gallery img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.podcast-grid .podcast-asset {
  background: var(--panel);
  border: 0px solid var(--stroke);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.podcast-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photocard-strip-gallery a {
  flex: 0 0 auto; /* Let the width be determined by the image content */
}

/* Override the default height for the photocard strip */
.photocard-strip-gallery img {
  height: 150px; /* Set a smaller, fixed height for photocards */
  width: auto;
}

.social-icons{
  display:flex; justify-content:center; gap:1rem; margin-top:0.5rem;
}
.social-icons .icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  color:#eaeaea; background:#1a1a1a;
  transition:transform .15s ease, box-shadow .15s ease;
}
.social-icons .icon:hover,
.social-icons .icon:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

.icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  background:#111; color:#fff;
}
.icon img{ display:block; width: 20px; height: 20px; }        /* for the Simple Icons <img> */
.icon i{ font-size:22px; line-height:1; }  /* for Font Awesome */

/* --- Rotate Device Overlay --- */
#rotate-device-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  color: var(--ink);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Orbitron", sans-serif;
}

.rotate-device-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.rotate-icon {
  width: 60px;
  height: 60px;
  opacity: 0.5;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.desktop-notice {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: -10px; /* Pull it closer to the main message */
}

/* Media Query for mobile portrait mode */
@media only screen and (max-width: 768px) and (orientation: portrait) {
  #main-content {
    display: none;
  }
  #rotate-device-overlay {
    display: flex;
  }
}

/* Media Query for mobile landscape mode (redundant but good practice) */
@media only screen and (max-width: 768px) and (orientation: landscape) {
  #main-content {
    display: block;
  }
  #rotate-device-overlay {
    display: none;
  }
}