/* ==========================================================================
   Lophy Sophy · portfolio of Sofia Lucarelli
   Vanilla CSS, no build step. Palette and type scale are fixed by design.
   ========================================================================== */

:root {
  --white: #FFFFFF;
  --ink: #10302E;
  --tiffany: #0ABAB5;
  --tiffany-deep: #078682;
  --aqua-gray: #6E9693;
  --aqua-mist: #EAF7F6;
}

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

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  /* Sticky footer: on short pages main grows to push the footer to the very
     bottom of the viewport instead of leaving it floating mid-screen. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
  /* Contain full-bleed children (e.g. the edu timeline rail) to the visible
     width, so 100vw elements reach both page edges without adding a horizontal
     scrollbar. clip (unlike hidden) creates no scroll container. */
  overflow-x: clip;
}

.site-footer {
  flex-shrink: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--ink);
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}

a:focus-visible {
  outline: 2px solid var(--tiffany);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Type scale (hierarchy by weight, not size)
   -------------------------------------------------------------------------- */

.kicker {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--aqua-gray);
}

.section-title {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.4;
}

.page-title {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.4;
}

.greeting {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.4;
}

.caption {
  font-size: 12px;
  color: var(--aqua-gray);
}

/* Subtitle chips: one term per chip, same 5px radius as the buttons */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chip {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--aqua-gray);
  background: var(--aqua-mist);
  border-radius: 5px;
  /* Asymmetric on purpose: Comfortaa ink sits 1px high in its line box,
     and letter-spacing leaves 2px of dead space after the last letter */
  padding: 9px 14px 7px 16px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 60px;
  background: var(--white);
  border-bottom: 1px solid var(--aqua-mist);
}

.header-inner {
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0 28px; /* full-width nav, edges matching the homepage corners */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Equal flex on the two sides keeps the category nav truly centered */
.header-side {
  flex: 1 1 0;
  display: flex;
  align-items: center;
}

.header-side.right {
  justify-content: flex-end;
}

.wordmark {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--tiffany);
}

.wordmark-sub {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--aqua-gray);
  margin-top: 2px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--aqua-gray);
  text-decoration: none;
  padding: 12px 8px;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--tiffany);
}

.site-nav a:active {
  color: var(--tiffany-deep);
}

.site-nav a[aria-current="page"] {
  color: var(--tiffany-deep);
}

/* Homepage only: the name (left) and Showreel/About (right) stay fixed over the
   full-screen intro. The category bar (.site-header) lives just below the hero
   and pins to the top on scroll — when it pins, these corners sit in the same
   row, so they read as one merged nav bar. */
.hero-corners {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 60px;
  pointer-events: none; /* only the links are interactive, not the empty middle */
  transition: background-color 0.3s ease;
}

.corners-inner {
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0 28px; /* hug the screen edges, no centered max-width gutter */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.corners-inner .wordmark,
.corners-inner .corner-right,
.corners-inner .menu-toggle {
  pointer-events: auto;
}

/* Over the video the corners are white for contrast; once the bar pins (or the
   mobile menu opens) they return to the ink palette on a white background. */
.hero-corners .wordmark {
  color: var(--white);
}

.hero-corners .wordmark-sub {
  color: rgba(255, 255, 255, 0.82);
}

.hero-corners .corner-right a,
.hero-corners .menu-toggle {
  color: var(--white);
}

body.nav-pinned .hero-corners .wordmark,
body.menu-open .hero-corners .wordmark {
  color: var(--ink);
}

body.nav-pinned .hero-corners .wordmark-sub,
body.menu-open .hero-corners .wordmark-sub {
  color: var(--aqua-gray);
}

body.nav-pinned .hero-corners .corner-right a,
body.nav-pinned .hero-corners .menu-toggle,
body.menu-open .hero-corners .menu-toggle {
  color: var(--aqua-gray);
}

/* Hamburger (mobile only) */
.menu-toggle {
  display: none;
  position: relative; /* the bars are absolutely positioned inside it */
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--aqua-gray); /* default on solid headers; white over the hero video */
}

/* The three bars are pinned by absolute `top` rather than a flex column + gap.
   That way the open X collapses both diagonals onto the exact same center line
   (top: 19px) instead of reconstructing it via two independent translateY
   values — the latter relied on the rendered gap and rounded off-center on iOS,
   leaving the strokes misaligned/blurry. */
.menu-toggle span {
  position: absolute;
  left: 8px; /* (40 - 24) / 2 */
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

.menu-toggle span:nth-child(1) {
  top: 13px;
}

.menu-toggle span:nth-child(2) {
  top: 19px;
}

.menu-toggle span:nth-child(3) {
  top: 25px;
}

.menu-toggle.open span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

/* Dropdown menu holding every section (mobile only) */
/* On most pages the bar is a solid sticky header, so the dropdown slides down
   below it (top: 60px). On the homepage the bar is transparent over the video,
   so the .mobile-menu--hero variant starts at the very top and reserves the bar
   row behind the fixed name/hamburger — there the bar background and the
   dropdown grow and collapse together as a single white sheet. */
.mobile-menu {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 19; /* below .hero-corners (20): name + hamburger sit on the sheet */
  overflow: hidden; /* clips the inner panel so it rolls down/up cleanly */
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-bottom: 1px solid var(--aqua-mist);
  box-shadow: 0 14px 28px rgba(16, 48, 46, 0.14);
}

.mobile-menu--hero {
  top: 0;
}

.mobile-menu--hero .mobile-menu-inner {
  padding-top: 60px; /* the bar row the fixed name/hamburger overlay */
}

.mobile-menu a {
  padding: 15px 24px; /* left edge matches the wordmark and the page content gutter */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}

.mobile-menu a:hover,
.mobile-menu a:active {
  color: var(--tiffany);
  background: var(--aqua-mist);
}

/* --------------------------------------------------------------------------
   Hero and reel placeholder
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100vh;  /* fallback */
  height: 100svh; /* full-screen intro; the nav sits just below and pins on scroll */
  overflow: hidden;
}

.hero img,
.hero video {
  width: 100%;
  height: 100%;
  /* Zoom to fill the whole banner, cropping top/bottom as needed — never
     letterbox with empty space at the sides. */
  object-fit: cover;
  display: block;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(16, 48, 46, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease;
}

.play-button:hover {
  background: var(--tiffany);
}

.play-button:active {
  background: var(--tiffany-deep);
}

.play-button svg {
  width: 26px;
  height: 26px;
  fill: var(--white);
  margin-left: 4px;
}

.reel-placeholder {
  position: relative;
}

.reel-placeholder img {
  width: 100%;
  height: auto;
}

.reel-caption {
  text-align: center;
  margin-top: 12px;
}

/* Ready for the embed that replaces the placeholder when the reel is online */
.reel-embed {
  position: relative;
  aspect-ratio: 16 / 9;
}

.reel-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.tagline {
  text-align: center;
  padding: 32px 24px 0;
}

/* --------------------------------------------------------------------------
   Hello section (homepage)
   -------------------------------------------------------------------------- */

.hello {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 24px 16px;
  text-align: left;
}

.hello .greeting {
  margin-bottom: 16px;
}

.hello .lead {
  font-weight: 600;
  margin-bottom: 12px;
}

.hello p {
  text-align: left;
}

/* --------------------------------------------------------------------------
   Discipline sections and mosaic tiles
   -------------------------------------------------------------------------- */

.discipline {
  padding-top: 56px;
}

.discipline-head {
  text-align: center;
  margin-bottom: 28px;
  padding: 0 24px;
}

.discipline-head .kicker {
  margin-top: 12px;
}

/* Mosaic tiles are navigation links sharing one row at a fixed height. At rest
   every tile is an equal crop window: the image overflows it and is clipped,
   centered. On hover the tile expands to exactly its own image's full width at
   the row height, so the whole image is revealed with nothing cropped — the
   expansion is sized per image (--ar = width/height, set by gallery.js), not a
   fixed symmetric amount. Siblings give up the freed space and crop tighter. */
.mosaic {
  --row-h: min(30vw, 380px);
  display: flex;
  height: var(--row-h);
  margin-top: 28px;
}

.tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: flex 0.45s ease;
}

.tile img,
.tile video {
  height: 100%;
  width: auto;
  max-width: none;
  flex: none;
  display: block;
}

/* The hover width is set per tile by gallery.js to max(current, full image
   width): it grows smoothly to reveal the whole image and never shrinks when
   there is already enough room. */

.tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 48, 46, 0);
  transition: background-color 0.4s ease;
}

.tile-label {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--aqua-mist);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tile:hover .tile-overlay,
.tile:focus-visible .tile-overlay {
  background: rgba(16, 48, 46, 0.6);
}

.tile:hover .tile-label,
.tile:focus-visible .tile-label {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Gallery pages
   -------------------------------------------------------------------------- */

.page-head {
  max-width: 680px;
  margin: 0 auto;
  text-align: center; /* titles centered; the intro description stays left */
  padding: 56px 24px 0;
}

.page-head .page-title {
  margin-bottom: 12px;
}

.intro {
  max-width: 680px;
  margin: 28px auto 0;
  padding: 0 24px;
}

.intro p {
  text-align: left;
}

/* Artwork is never cropped: full boards, single column, full bleed edge to edge */
.gallery {
  margin-top: 48px;
  display: grid;
  gap: 40px;
}

.gallery img,
.gallery video {
  width: 100%;
  height: auto;
  display: block;
}

.reel-block {
  margin-top: 48px;
}

/* --------------------------------------------------------------------------
   More work
   -------------------------------------------------------------------------- */

.more-work {
  padding-top: 80px;
  text-align: center;
}

.more-grid {
  display: flex;
  height: 34vw; /* tall enough that 16:9 sources keep covering the widened tile */
  margin-top: 24px;
}

.more-grid:hover .tile {
  flex-grow: 0.72;
}

.more-grid .tile:hover {
  flex-grow: 1;
}

.email-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.email-link:hover {
  color: var(--tiffany);
}

.email-link:active {
  color: var(--tiffany-deep);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 5px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 13px 28px;
}

.btn:hover {
  background: var(--tiffany);
  border-color: var(--tiffany);
  color: var(--white);
}

.btn:active {
  background: var(--tiffany-deep);
  border-color: var(--tiffany-deep);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

/* Two-column editorial layout: a designed portrait card on the left, the bio on
   the right. The tanuki sits on a soft tiffany-tinted panel so it reads as an
   intentional portrait, not a sketch dropped onto the page. */
.about-layout {
  max-width: 980px;
  margin: 64px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: center;
}

.about-figure {
  margin: 0;
  text-align: center;
}

.about-figure img {
  width: 100%;
  height: auto;
}

.about-text .kicker {
  margin-bottom: 12px;
}

.about-text .greeting {
  font-size: 30px;
  margin-bottom: 20px;
}

.about-text p {
  margin-bottom: 18px;
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn--solid {
  background: var(--tiffany);
  border-color: var(--tiffany);
  color: var(--white);
}

.btn--solid:hover {
  background: var(--tiffany-deep);
  border-color: var(--tiffany-deep);
  color: var(--white);
}

/* Education: tidy cards, replacing the plain list. */
.list-section {
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
  padding: 0 24px;
}

/* The Education heading sits directly in <main> (full page width), so its
   28px left padding lines it up exactly with the header wordmark. */
.edu-heading {
  padding: 72px 28px 0;
  margin: 0 0 20px;
  box-sizing: border-box;
}

/* Timeline of study, earliest first. Horizontal on desktop: a rail across the
   full width of the section, with the two nodes balanced over equal-height
   cards; it folds to a vertical rail on narrow screens (see the mobile query). */
.edu-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  align-items: stretch; /* items share the tallest height */
  gap: 24px;
}

/* The rail: one continuous line running edge to edge of the page (full-bleed),
   behind the nodes. The timeline sits centred in the viewport, so a viewport-wide
   line centred on it reaches both page edges. */
.edu-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top: 6px; /* node centre */
  height: 2px;
  background: rgba(10, 186, 181, 0.35); /* soft tiffany rail */
}

.edu-item {
  position: relative;
  flex: 1; /* equal share of the width, so the nodes sit balanced at 1/4 and 3/4 */
  display: flex;
  flex-direction: column;
  padding-top: 30px; /* room above for the node */
}

/* The node, centred over its card so the pair reads balanced across the row. */
.edu-item::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tiffany);
  box-shadow: 0 0 0 4px var(--aqua-mist); /* halo masks the rail behind the node */
}

.edu-time {
  display: block;
  text-align: center;
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--tiffany-deep);
  margin-bottom: 10px;
}

.edu-body {
  flex: 1; /* both cards stretch to the tallest — equal heights */
  background: var(--aqua-mist);
  border-radius: 14px;
  padding: 16px 20px;
}

.edu-body .school {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.edu-body .meta {
  color: var(--aqua-gray);
  font-size: 13px;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 48px 24px;
  margin-top: 80px;
  font-size: 12px;
  color: var(--aqua-gray);
  background: var(--aqua-mist);
}

.icon-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  vertical-align: -3px;
}

.site-footer a {
  color: var(--aqua-gray);
  text-decoration: none;
  padding: 12px 2px; /* keeps tap targets comfortable on touch screens */
}

.site-footer a:hover {
  color: var(--tiffany);
}

.site-footer a:active {
  color: var(--tiffany-deep);
}

/* --------------------------------------------------------------------------
   Work grid (category pages)
   A full-bleed grid of cells, one per project folder. Each cell links into
   the project; hovering cycles through the folder's images. The folder name
   rises in an overlay while the images scroll.
   -------------------------------------------------------------------------- */

.work-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* always two across; one column on mobile */
  gap: 0; /* flush, full-screen mosaic */
}

.grid-cell {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink);
}

/* Fills the cell edge to edge; the full resolution lives on the project page.
   Video projects stack one layer per clip and switch with an instant opacity
   cut (no transition) so the cadence matches the image grids exactly. */
.grid-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(16, 48, 46, 0.6), rgba(16, 48, 46, 0) 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.grid-cell:hover .grid-overlay,
.grid-cell:focus-visible .grid-overlay {
  opacity: 1;
}

.grid-label {
  display: block;
  width: 100%;
  padding: 22px 24px;
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Project page (full pieces + subfolder grids)
   -------------------------------------------------------------------------- */

/* Pieces shown at full resolution, single column, full bleed edge to edge. */
.project-gallery {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  gap: 0;
}

/* GIF projects (Duel, Les Legendaires…) get a vertical gap between rows. */
.project-gallery--spaced {
  gap: 24px;
}

/* A base piece and its variant(s) side by side, variant(s) to the right. The
   base sets the row height; the variants differ in resolution, so they are
   cropped at the sides (object-fit: cover) just enough to line up perfectly. */
.pair-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  align-items: stretch;
}

.pair-row img,
.pair-row video {
  display: block;
  width: 100%;
}

.pair-row > img:first-child,
.pair-row > video:first-child {
  height: auto;
}

.pair-row > img:not(:first-child),
.pair-row > video:not(:first-child) {
  height: 100%;
  object-fit: cover;
}

/* Embedded YouTube film closing an animation project: a tidy, centered card
   (not full-bleed), with a label above and a rounded frame. */
.video-block {
  max-width: 880px;
  margin: 56px auto 0;
  padding: 0 24px;
  text-align: center;
}

.video-heading {
  margin-bottom: 16px;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-block .video-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(16, 48, 46, 0.2);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Dedicated showreel page: the reel fills the width, with a still standing in
   until the YouTube embed is dropped in. */
.reel-stage {
  margin-top: 40px;
}

.reel-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crumb {
  color: var(--aqua-gray);
  text-decoration: none;
}

.crumb:hover {
  color: var(--tiffany);
}

.group-block {
  margin-top: 72px;
}

.group-title {
  text-align: center;
  margin-bottom: 28px;
}

/* Mega grid for a subfolder (e.g. a storyboard): a real grid so frames read
   left to right in index order, with breathing room between frames. */
.story-grid {
  max-width: none;
  margin: 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.story-grid img {
  width: 100%;
  height: auto;
  display: block;
}

.story-grid .zoomable {
  cursor: zoom-in;
}

.back-row {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Fullscreen lightbox (storyboard frames)
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 24, 23, 0.94);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-btn {
  position: absolute;
  background: none;
  border: 0;
  color: var(--white);
  font-family: 'Comfortaa', sans-serif;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.lightbox-btn:hover {
  opacity: 1;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 44px;
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

.lightbox-close {
  top: 18px;
  right: 20px;
  width: 46px;
  height: 46px;
  font-size: 32px;
}

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

@media (max-width: 768px) {
  /* Every page collapses its inline nav into the hamburger + dropdown on mobile,
     leaving a clean single-row bar with the name and the hamburger. */
  .site-header {
    height: 60px;
  }

  .header-inner {
    padding: 0 24px; /* line the wordmark up with the page content gutter */
  }

  .nav-center,
  .header-side.right,
  .corner-right {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  /* Homepage on mobile: the pinning category bar is gone; the name and hamburger
     sit over the intro via .hero-corners instead. */
  .site-header--home {
    display: none;
  }

  /* Apple-style slide: the panel rolls down/up via max-height alone — no
     cross-fade. The exact open height is set in JS, so the close has no dead
     time before the panel starts moving. */
  .mobile-menu {
    display: block;
    max-height: 0;
    pointer-events: none;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.6, 1);
  }

  .mobile-menu.open {
    pointer-events: auto;
  }

  .corners-inner {
    padding: 0 24px; /* keep the homepage wordmark aligned with the content too */
  }

  /* Once scrolled past the intro the corners get a solid bar so the name and
     icon stay readable. (When the menu is open, the sheet itself is the bar.) */
  body.nav-pinned .hero-corners {
    background: var(--white);
    border-bottom: 1px solid var(--aqua-mist);
  }

  .wordmark {
    font-size: 16px;
  }

  .site-nav {
    gap: 2px;
  }

  .site-nav a {
    font-size: 13px;
    padding: 14px 6px;
  }

  /* No hover on touch: the squeeze is off, tiles stack and show full images */
  .mosaic {
    flex-direction: column;
    height: auto;
  }

  .tile {
    flex: none;
  }

  .tile img,
  .tile video {
    width: 100%;
    height: auto;
  }

  /* Match the mobile header gutter (24px) so the heading stays aligned. */
  .edu-heading {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Education timeline folds to a vertical rail on narrow screens. */
  .edu-timeline {
    display: block;
    max-width: 620px;
  }

  .edu-timeline::before {
    display: none; /* the full-width horizontal rail is desktop-only */
  }

  .edu-item {
    display: block;
    padding: 0 0 30px 34px;
  }

  .edu-item:last-child {
    padding-bottom: 0;
  }

  /* Per-item vertical rail, running down into the next entry. */
  .edu-item::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    width: 2px;
    height: 100%;
    background: rgba(10, 186, 181, 0.35);
  }

  .edu-item:last-child::before {
    display: none;
  }

  .edu-item::after {
    left: 0;
    top: 3px;
    transform: none;
  }

  .edu-time {
    text-align: left;
  }

  /* Folders become a single-column list on mobile */
  .work-grid {
    grid-template-columns: 1fr;
  }

  .grid-label {
    font-size: 17px;
    padding: 18px 18px;
  }

  .story-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 0 14px;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }

  .hero {
    height: 100svh;
  }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-figure {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }

}

@media (max-width: 480px) {
  .wordmark {
    font-size: 15px;
  }

  .site-nav a {
    font-size: 11px;
    padding: 15px 4px;
  }
}