@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Roboto+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap');


/* Reset padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fonts and Color Palette */
:root {
  --color-bg: #0a0a0a;
  --color-text: #e8e8e8;
  --color-accent: #4dd0b1;
  --color-accent2: #4d7dd0;
  --color-accentcomp: #d04d6c;
  --color-accenttriad1: #d0b14d;
  --color-accenttriad2: #b14dd0;
  --color-muted: #888;
  --font-main: 'Poppins', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}

/*  Scroll behavior */
html {
  scroll-behavior: smooth;
}

/*  Body styles */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
}

/* Nav Bar */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  gap: 2rem;
  padding: 1.5rem 3rem;
  background-color: var(--color-bg);
  z-index: 100;
}

/* Nav Style */
nav a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 1.00rem;
  letter-spacing: 0.05em;
}

/* Nav Hover Effect */
nav a:hover {
  color: var(--color-accent);
}

/* Section Styles */
section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-text);
  border-bottom: 1px solid #1a1a1a;
}

/* hero section */
#hero {
  position: relative;
  padding-bottom: 40vh;
}

.hero-content {
  text-align: center;
  z-index: 1;
}

#hero h1 {
  font-size: 7rem;
  font-weight: 600;
  letter-spacing: 2.2px;
  color: var(--color-text);
  text-shadow: rgba(0, 0, 0, 0.3) 1px 3px 11px;
}

#hero .tagline {
  margin-top: 0.1rem;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 2.2px;
  color: var(--color-accent);
}

/* About Section */
.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  max-width: 540px;
  padding: 0 1.5rem;
  margin-top: 15rem;
}

.about-body {
  font-family: 'IBM Plex Sans', var(--font-main);
  font-size: 1.2rem;
  color: #b9c2c0;
  line-height: 1.75;
  text-align: left;
  margin-top: .5rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

.about-photo {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  mask-image: radial-gradient(circle closest-side, black 72%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle closest-side, black 90%, transparent 100%);
}

/* Wider about text on desktop */
@media (min-width: 768px) {
  .about-content {
    max-width: 780px;
    margin-top: 0;
  }

  .about-photo {
    max-width: 220px;
  }
}

/* Skills Section */
/* The section stays one screen tall (the 3D background depends on it),
   so the list scrolls inside the section if it doesn't fit. */
.skills-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 10rem);  /* clear the nav (top) and continue button (bottom) */
  overflow-y: auto;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: #2a2a2a transparent;
}

/* Slim scrollbar (Chrome, Edge, Safari) */
.skills-content::-webkit-scrollbar {
  width: 4px;
}

.skills-content::-webkit-scrollbar-track {
  background: transparent;
}

.skills-content::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 999px;
}

.skills-content:hover::-webkit-scrollbar-thumb {
  background: var(--color-accent);
}

.skills-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  text-align: left;
  width: 100%;
}

.skills-heading {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
}

.skills-note {
  color: var(--color-muted);
  text-transform: none;
  letter-spacing: 0.05em;
}

.skills-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.skills-items li {
  font-family: 'IBM Plex Sans', var(--font-main);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #b9c2c0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

.skills-items strong {
  color: var(--color-text);
  font-weight: 500;
}

/* Skills on mobile: one column, clear the higher continue button */
@media (max-width: 767px) {
  .skills-content {
    max-height: calc(100vh - 15rem);
    margin-bottom: 4rem;
    padding: 0 1rem;
  }

  .skills-groups {
    grid-template-columns: 1fr;
    gap: 2rem;                        /* space between groups (was 1.25rem) */
  }
}

/* Projects Section */
/* The section is padded to clear the fixed nav (top) and the continue button (bottom).
   The content column fills the space in between and spreads the title,
   subtitle and gallery evenly down it. */
#projects {
  flex-direction: column;
  padding: 4.5rem 1.5rem 4rem;
}

.projects-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-width: 960px;
  height: 100%;
}

/* Let the title and subtitle act as separate items in the spacing above */
.project-header {
  display: contents;
}

.project-title,
.project-sub {
  max-width: 720px;
  text-align: center;
}

.project-title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: var(--color-text);
  /* dark halo pushes the spheres back behind the letters,
     faint teal glow ties the title into the site's accent color */
  text-shadow:
    0 0 6px rgba(10, 10, 10, 0.95),
    0 0 18px rgba(10, 10, 10, 0.9),
    0 0 36px rgba(77, 208, 177, 0.35);
  transform: translateY(0px);   /* negative = up, positive = down */
}

.project-sub {
  font-family: 'IBM Plex Sans', var(--font-main);
  font-size: 1rem;
  line-height: 1.65;
  color: #b9c2c0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
  transform: translateY(40px);
}

/* Swipe gallery: one photo at a time, like Instagram.
   Width is capped by screen height so the whole section fits on one screen. */
.gallery {
  position: relative;
  width: min(100%, 720px, calc((100vh - 450px) * 4 / 3));
}

.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;            /* Firefox */
  border: 1px solid #2a2a2a;
  background: var(--color-bg);
}

.gallery-track::-webkit-scrollbar {
  display: none;                    /* Chrome, Safari */
}

.gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  scroll-snap-align: center;
}

/* Arrows only on devices with a mouse; phones swipe */
.gallery-arrow {
  display: none;
}

@media (hover: hover) {
  .gallery-arrow {
    display: block;
    position: absolute;
    top: calc(50% - 1.55rem);       /* centered on the photo, not the thumbnails */
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-muted);
    background: rgba(10, 10, 10, 0.7);
    color: var(--color-text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
  }

  .gallery-prev { left: 0.75rem; }
  .gallery-next { right: 0.75rem; }

  .gallery-arrow:hover {
    border-color: var(--color-accenttriad1);
  }

  .gallery-arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }
}

.gallery-thumbs {
  display: flex;
  justify-content: safe center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.gallery-thumb {
  flex: 0 0 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid #2a2a2a;
  background: var(--color-bg);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb.active {
  opacity: 1;
  border-color: var(--color-accent);
}

@media (hover: hover) {
  .gallery-thumb:hover {
    opacity: 1;
  }
}

.gallery-arrow:focus-visible,
.gallery-thumb:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Contact Section */
#contact {
  flex-direction: column;
  gap: 1.5rem;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 320px;
  width: 100%;
  transform: translateY(-6rem);     /* sit higher than center */
}

.contact-info {
  text-align: center;
}

.contact-name {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 2px;
  margin-bottom: 0.2rem;
}

.contact-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
}

.contact-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.contact-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.2s;
}

.contact-link:hover {
  opacity: 0.7;
}

/* Dog Section */
#dog {
  flex-direction: column;
  gap: 1.5rem;
  justify-content: flex-start;      /* start near the top instead of centered */
  padding-top: 7rem;                /* clear the ☰ menu, with some breathing room */
  padding-bottom: 8rem;             /* stop the text just above the ☰ button */
}

.dog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 320px;
  width: 100%;
  flex: 1;                          /* fill the section so the text can sit at the bottom */
}

.dog-photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;              /* square box → circle */
  object-fit: cover;
  object-position: top;             /* keep her face and ears, drop the blanket */
  /* soft circular fade, same style as the About photo.
     Raise "black 82%" for a crisper circle, lower it for a softer fade. */
  --penny-fade: radial-gradient(circle closest-side, black 82%, transparent 100%);
  mask-image: var(--penny-fade);
  -webkit-mask-image: var(--penny-fade);
}

.dog-info {
  text-align: center;
  margin-top: auto;                 /* push the text down to sit on the ☰ button */
}

/* Phones: the ☰ button sits higher, so stop the text higher too */
@media (max-width: 767px) {
  #dog {
    padding-bottom: 10rem;             /* was 12rem; follows the ☰ button down */
  }
}

.dog-name {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 2px;
  margin-bottom: 0.2rem;
}

.dog-title {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.85rem;
}

.dog-desc {
  font-family: 'IBM Plex Sans', var(--font-main);
  font-size: 1rem;
  color: #b9c2c0;
  line-height: 1.75;
  max-width: 300px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

/* Nav Button */
.nav-btn {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text);
  border: 1px solid var(--color-muted);
  padding: 0.5rem 1.25rem;
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
  .nav-btn:hover {
    color: var(--color-text);
    border-color: var(--color-accenttriad1);
  }
}

.nav-btn:active {
  color: var(--color-text);
  border-color: var(--color-accenttriad1);
}

/* Small ☰ button at the end of the page; opens the nav menu */
.menu-btn {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text);
  background: none;
  border: 1px solid var(--color-muted);
  cursor: pointer;
  transition: border-color 0.2s;
}

@media (hover: hover) {
  .menu-btn:hover {
    border-color: var(--color-accenttriad1);
  }
}

.menu-btn:active {
  border-color: var(--color-accenttriad1);
}

@media (max-width: 767px) {
  .menu-btn {
    bottom: 6.5rem;                    /* was 8.5rem */
  }
}

/* Home page buttons: "guided tour" stacked above "self-guided tour".
   The container sits where the single button used to, and the buttons inside
   stack normally instead of each being pinned to the bottom. */
.hero-buttons {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.hero-buttons .nav-btn {
  position: static;
  transform: none;
  border-radius: 999px;             /* fully rounded ends */
}

.self-guided-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text);
  background: none;
  border: 1px solid var(--color-muted);
  border-radius: 0px;             /* square */
  padding: 0.5rem 1.25rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  white-space: nowrap;
    transition: color 0.2s ease, border-color 0.3s ease;
}

/* Phones: "choose your own / adventure" wraps to two lines; keep them snug */
@media (max-width: 767px) {
  .self-guided-btn {
    line-height: 1.5;
  }
}

/* Phones: tapping "choose your own adventure" fades it out (see nav.js)... */
.self-guided-btn.fade-out {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* ...and fades in this section menu in its place */
.hero-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.1rem;
  width: 280px;
  animation: hero-menu-in 0.2s ease;
}

.hero-menu[hidden] {
  display: none;
}

.hero-menu a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.hero-menu a:active,
.hero-menu a:hover {
  color: var(--color-accent);
}

@keyframes hero-menu-in {
  from { opacity: 0; }
}

@media (hover: hover) {
  .self-guided-btn:hover {
    border-color: var(--color-accenttriad1);
  }
}

.self-guided-btn:active {
  border-color: var(--color-accenttriad1);
}

/* background canvas */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: block;
}


/* MOBILE STYLES */


@media (max-width: 767px) {
  #hero {
    padding-bottom: 40vh;
  }
  #hero h1 {
    font-size: 16vw;
    transform: translateY(-4rem);
  }
  #hero .tagline {
    font-size: 4.5vw;
    transform: translateY(-4rem);
  }
  .nav-btn,
  .hero-buttons {
    bottom: 7rem;
  }
}

/* Collapsible nav (☰), used on all screen sizes */
#nav-mobile {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: auto;                      /* only as wide as its contents */
  max-width: 100%;
  padding: 0.5rem 1rem;             /* was 1rem 1.5rem */
  gap: 1rem;                        /* was 2rem, inherited from nav */
  background-color: var(--color-bg);
  z-index: 100;
}

#nav-toggle {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 1.5rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* Bigger ☰ icon on desktop */
@media (min-width: 768px) {
  #nav-toggle {
    font-size: 2.25rem;
  }
}

#nav-links {
  overflow: hidden;
  max-height: 0;
  /* closed: zero width too, so the nav's black background shrinks to just the ☰.
     The width change waits 0.4s so the close animation can finish first. */
  max-width: 0;
  transition: max-height 0.4s ease, max-width 0s 0.4s;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;             /* rows closer together, same side spacing */
}

#nav-links.open {
  max-height: 200px;
  max-width: 100vw;
  transition: max-height 0.4s ease, max-width 0s;   /* full width right away when opening */
}

@media (max-width: 767px) {
  nav a {
    font-size: 0.8rem;
  }
}

/* Projects on mobile: square photos like Instagram, sized to fit one screen */
@media (max-width: 767px) {
  #projects {
    padding: 3.75rem 1rem 9rem;     /* continue button sits higher on mobile */
  }

  .project-title {
    font-size: 1.15rem;
  }

  .project-sub {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .gallery {
    width: min(100%, calc(100vh - 480px));
  }

  .gallery-slide {
    aspect-ratio: 1 / 1;
  }
}

/* Short phones (e.g. iPhone SE): tighten text */
@media (max-width: 767px) and (max-height: 740px) {
  .project-sub {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  .gallery {
    width: min(100%, calc(100vh - 445px));
  }
}

/* ---------- Phone layout fixes ----------
   Every section is exactly one screen tall (the 3D background depends on it),
   so on phones the content is sized down to fit between the ☰ menu (top)
   and the continue button (bottom). */
@media (max-width: 767px) {
  /* About: smaller photo and text; if it still doesn't fit, it scrolls
     inside the section like Skills does */
  #about {
    flex-direction: column;
    justify-content: flex-start;
    /* bottom space = the continue button + a small gap. The (100vh - 100svh) part
       covers Safari's bottom toolbar, and is 0 on phones without one */
    padding: 4rem 0 calc(100vh - 100svh + 4.25rem);
  }

  /* Continue buttons: as low as they go, 1rem above the bottom of the visible
     screen. Measured from the smallest visible screen height (100svh) so
     Safari's toolbar never covers them. */
  #about .nav-btn,
  #skills .nav-btn,
  #projects .nav-btn,
  #contact .nav-btn {
    bottom: auto;
    top: calc(100svh - 1rem);
    transform: translate(-50%, -100%);
    font-size: 0.65rem;                 /* smaller than desktop (0.75rem) */
    padding: 0.35rem 0.9rem;
  }

  /* Projects and Contact: a little higher than About/Skills */
  #projects .nav-btn,
  #contact .nav-btn {
    top: calc(100svh - 2.5rem);
  }

  /* Skills and Projects: content fills the space down to the button
     (the (100vh - 100svh) part covers Safari's toolbar; 0 elsewhere) */
  #skills {
    flex-direction: column;
    justify-content: flex-start;
    padding: 6.5rem 0 calc(100vh - 100svh + 4.25rem);   /* top: room below the ☰ for the half moon */
  }

  .skills-content {
    max-height: 100%;
    margin-bottom: 0;
  }

  #projects {
    padding-bottom: calc(100vh - 100svh + 4.25rem);
  }

  .about-content {
    margin-top: 0;
    gap: 0.75rem;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2a2a2a transparent;
  }

  .about-content::-webkit-scrollbar {
    width: 4px;
  }

  .about-content::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 999px;
  }

  .about-photo {
    max-width: 120px;
    flex-shrink: 0;
  }

  .about-body {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 0;
  }

  /* Penny: smaller photo so her text clears the ☰ button */
  #dog {
    padding-top: 4.5rem;
  }

  .dog-photo {
    max-width: 180px;
  }

  .dog-name {
    font-size: 1.6rem;
  }

  .dog-desc {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* Projects: drop the desktop nudge that pushes the description onto the gallery */
  .project-sub {
    transform: none;
  }
}


/* Phones: home buttons near the bottom of the screen. Measured from the
   smallest visible screen height (100svh) so Safari's bottom toolbar
   never covers them. Lower "3rem" to move them further down. */
@media (max-width: 767px) {
  .hero-buttons {
    bottom: auto;
    top: calc(100svh - 3rem);
    transform: translate(-50%, -100%);
    gap: 1.75rem;                       /* more space lifts GUIDED TOUR */
  }

  .hero-buttons .nav-btn {
    text-transform: uppercase;          /* GUIDED TOUR */
    font-size: 0.85rem;
    padding: 0.6rem 1.5rem;
  }

  /* "choose your own adventure": smaller and quieter than GUIDED TOUR */
  .self-guided-btn {
    font-size: 0.65rem;
    padding: 0.35rem 0.9rem;
  }
}

/* No free scrolling between sections (desktop and phones). The page itself
   is only one screen tall, so there's nothing for wheel, keyboard, touch or
   pinch-zoom to scroll. All the sections live in <main>, which is pinned to
   the screen and slid up and down by pager.js when the buttons and menus are
   used. Scrollable areas inside a section (About text, Skills list, robot
   gallery) still scroll, and stop at their ends. */
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;           /* smooth slides between sections */
}

.about-content,
.skills-content,
.gallery-track {
  overscroll-behavior: contain;
}

/* Desktop: if the About text is taller than the screen, it scrolls inside
   its section (phones already do this) */
@media (min-width: 768px) {
  .about-content {
    max-height: calc(100vh - 10rem);  /* clear the ☰ menu and the continue button */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2a2a2a transparent;
  }

  .about-content::-webkit-scrollbar {
    width: 4px;
  }

  .about-content::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 999px;
  }
}

/* ---------- Mobile: move text and photos by hand ----------
   Format is "translate: X Y;"
   X: positive = right, negative = left
   Y: positive = down,  negative = up
   e.g. "translate: 0 -1rem;" moves a block up 1rem (about 16px).
   This stacks on top of any existing positioning, and only affects phones. */
@media (max-width: 767px) {
  /* Home */
  #hero h1          { translate: 0 0; }   /* "Alex Main" */
  #hero .tagline    { translate: 0 0; }   /* line under your name */

  /* About */
  .about-photo      { translate: 0 -1.5rem; }
  .about-body       { translate: 0 0rem; }   /* all three paragraphs together */

  /* Skills */
  .skills-content   { translate: 0 0; }   /* "Skills" title + the whole list */

  /* Projects */
  .project-title    { translate: 0 -2rem; }   /* "Self-Balancing Robot" */
  .project-sub      { translate: 0 2rem; }   /* description under the title */
  .gallery          { translate: 0 0; }   /* robot photos + thumbnails */

  /* Contact */
  .contact-info     { translate: 0 -2.5rem; }   /* name + location */
  .contact-links    { translate: 0 -2.5rem; }   /* "Contact" label + links */

  /* Penny */
  .dog-photo        { translate: 0 0; }   /* was 0 4rem; Penny now lays out evenly on every phone (see bottom of file) */
  .dog-info         { translate: 0 0; }   /* name, O.A.P.C, description (was 0 -5rem) */
}

/* About/Skills "continue" is greyed out until the text is scrolled to the end
   (see nav.js), then fades to white. Still clickable while grey. */
#about .nav-btn,
#skills .nav-btn {
  transition: color 0.5s, border-color 0.5s;
}

.nav-btn.dim {
  color: #555;
  border-color: #2a2a2a;
}

/* About text and Skills list: soft fade at the top and bottom edges of their
   scroll areas, so scrolled content melts away instead of being sliced off.
   The fades only show when there's something to fade (see nav.js):
   the top fade appears once you scroll down ("scrolled-down"), and the bottom
   fade disappears once you reach the end ("at-end"). At rest, the top is clean.
   "--edge" is the fade height. */
@property --fade-top    { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fade-bottom { syntax: '<length>'; inherits: false; initial-value: 0px; }

.about-content,
.skills-content {
  --edge: 1.5rem;
  --fade-top: 0px;
  --fade-bottom: var(--edge);
  --edge-fade: linear-gradient(to bottom, transparent, black var(--fade-top), black calc(100% - var(--fade-bottom)), transparent);
  mask-image: var(--edge-fade);
  -webkit-mask-image: var(--edge-fade);
  padding-top: var(--edge);
  padding-bottom: var(--edge);
  transition: --fade-top 0.25s ease, --fade-bottom 0.25s ease;
}

.about-content.scrolled-down,
.skills-content.scrolled-down {
  --fade-top: var(--edge);
}

.about-content.at-end,
.skills-content.at-end {
  --fade-bottom: 0px;
}

/* ---------- Desktop: move text, photos and buttons by hand ----------
   Same format as the phone controls: "translate: X Y;"
   X: positive = right, negative = left
   Y: positive = down,  negative = up
   e.g. "translate: 0 -1rem;" moves a block up 1rem (about 16px).
   Add "scale: 0.9;" to a line to shrink it 10% (1.1 = 10% bigger).
   Stacks on top of any existing positioning, and only affects desktop
   (768px wide and up). Moving something doesn't move the space it takes up,
   so check nothing slides under a button. */
@media (min-width: 768px) {
  /* Home */
  #hero h1              { translate: 0 -5rem; }   /* "Alex Main" */
  #hero .tagline        { translate: 0 -7rem; }   /* line under your name */
  .hero-buttons         { translate: 0 -5rem; }   /* GUIDED TOUR + choose your own adventure / section menu */

  /* About */
  .about-photo          { translate: 0 -1rem; }
  .about-body           { translate: 0 -1.5rem; }   /* all three paragraphs together */
  #about .nav-btn       { translate: 0 0; }   /* continue */

  /* Skills */
  .skills-content       { translate: 0 0; }   /* "Skills" title + the whole list */
  #skills .nav-btn      { translate: 0 0; }   /* continue */

  /* Projects */
  .project-title        { translate: 0 0; }   /* "Self-Balancing Robot" */
  .project-sub          { translate: 0 0; }   /* description under the title */
  .gallery              { translate: 0 0; }   /* robot photos + thumbnails */
  #projects .nav-btn    { translate: 0 0; }   /* continue */

  /* Contact */
  .contact-info         { translate: 0 -3rem; }   /* name + location */
  .contact-links        { translate: 0 -3rem; }   /* "Contact" label + links */
  #contact .nav-btn     { translate: 0 -3rem; }   /* continue */

  /* Penny */
  .dog-photo            { translate: 0 0; }
  .dog-info             { translate: 0 0; }   /* name, O.A.P.C, description */
  .menu-btn             { translate: 0 0; }   /* ☰ button at the bottom */
}

/* Desktop home buttons: same pairing as phones. GUIDED TOUR is the main,
   larger button; "choose your own / adventure" sits on two lines in a
   smaller font so it stays smaller than GUIDED TOUR. */
@media (min-width: 768px) {
  .hero-buttons .nav-btn {
    text-transform: uppercase;          /* GUIDED TOUR */
    font-size: 0.85rem;
    padding: 0.6rem 1.5rem;
  }

  .self-guided-btn {
    font-size: 0.6rem;
    padding: 0.3rem 0.75rem;
    line-height: 1.4;
  }
}

/* Phones: collapsible Skills groups (see nav.js). The whole heading is the
   button; a small sign on the right shows + when closed and − when open. */
@media (max-width: 767px) {
  .collapse-on-phones .skills-heading {
    position: relative;
    padding-right: 1.75rem;           /* room for the + */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: margin-bottom 0.3s ease;
  }

  .skills-toggle {
    position: absolute;
    right: 0.1rem;
    top: -0.15rem;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-accent);       /* + is teal while closed */
    transition: color 0.3s ease;
  }

  .collapse-on-phones:not(.collapsed) .skills-toggle {
    color: var(--color-muted);        /* − is grey while open */
  }

  .collapse-on-phones .skills-items {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }

  .collapse-on-phones.collapsed .skills-items {
    max-height: 0;
    opacity: 0;
  }

  .collapse-on-phones.collapsed .skills-heading {
    margin-bottom: 0;
  }
}

/* ---------- Penny: consistent layout on every screen ----------
   Photo and text stay together as one block with fixed spacing (room for
   the ring of spheres around her photo), centered in the space above the ☰
   button. The photo is 260px on desktop / 180px on phones, and only shrinks
   on screens too short to fit photo, ring and text. */
#dog {
  justify-content: center;
  padding-top: 4rem;                  /* clear the ☰ menu at the top */
  padding-bottom: 8rem;               /* ☰ button (3.5rem from bottom, 2.5rem tall) + 2rem gap */
  --penny-photo: min(260px, calc((100vh - 392px) / 1.7));
}

.dog-card {
  flex: 0 0 auto;                     /* just as tall as the photo + text */
}

.dog-photo {
  max-width: var(--penny-photo);
}

.dog-info {
  margin-top: calc(var(--penny-photo) * 0.49 - 1.25rem);   /* photo to text: about half the photo's height, room for the ring */
}

@media (max-width: 767px) {
  #dog {
    padding-top: 3.5rem;
    /* ☰ button (2.5rem from the visible bottom, 2.5rem tall) + 1.5rem gap;
       the (100vh - 100svh) part covers Safari's toolbar */
    padding-bottom: calc(100vh - 100svh + 6.5rem);
    --penny-photo: min(180px, calc((100svh - 350px) / 1.7));
  }

  .menu-btn {
    bottom: auto;
    top: calc(100svh - 2.5rem);       /* same height as the Projects/Contact continue buttons */
    transform: translate(-50%, -100%);
  }
}

/* ---------- Phones held sideways ----------
   The site is one screen per section, which doesn't fit a phone turned
   sideways (only ~330-400px tall). On touch screens in landscape that short,
   cover the page with a prompt to turn the phone upright. Desktops, laptops
   and tablets never see this. */
#rotate-notice {
  display: none;
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotate-notice {
    position: fixed;
    inset: 0;
    z-index: 1000;                    /* above the menu and everything else */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--color-bg);
    text-align: center;
  }

  /* outline of a phone that tips from sideways to upright, on a loop */
  .rotate-phone {
    width: 2.2rem;
    height: 3.8rem;
    border: 2px solid var(--color-accent);
    border-radius: 0.45rem;
    margin-bottom: 0.9rem;
    animation: rotate-phone 2.4s ease-in-out infinite;
  }

  .rotate-text {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .rotate-sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--color-muted);
  }
}

@keyframes rotate-phone {
  0%, 20%   { transform: rotate(-90deg); }
  50%, 85%  { transform: rotate(0deg); }
  100%      { transform: rotate(-90deg); }
}