:root {
  --bg: #0f1016;
  --bg-2: #171824;
  --panel: rgba(24, 26, 37, 0.78);
  --panel-solid: #181a25;
  --text: #f4f2fb;
  --muted: #b3b0c2;
  --line: rgba(214, 208, 239, 0.12);
  --accent: #b38cff;
  --accent-2: #93a1cc;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --peach: #ffd7c3;
  --lavender: #e2d6ff;
  --peach-line: rgba(255, 215, 195, 0.5); /* --peach at 50% */
  --border-gradient: linear-gradient(135deg, #b38cff 0%, #d8d5df 52%, #ffd7c3 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(179, 140, 255, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(147, 161, 204, 0.14), transparent 24%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* Phone-width column on every screen, centred on desktop (like Instagram).
   Layout rules below use container queries on this column, not the window. */
.site-shell {
  width: min(480px, calc(100% - 20px));
  container-type: inline-size;
  margin: 0 auto;
  padding: 24px 0 40px;
  position: relative;
  z-index: 1;
}

.footer,
.hero,
.card,
.project-tile {
  backdrop-filter: blur(18px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px 62px 16px 18px;
}

/* Hamburger menu: follows the visitor at the bottom of the screen, then comes to
   rest just above the footer links so it never covers them.
   Desktop: it sits beside the content column, just outside its right edge. */
.site-menu {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  width: fit-content;
  margin: -44px -60px 0 auto;
}

.site-menu__toggle {
  list-style: none;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box,
    var(--border-gradient) border-box;
}

.site-menu__toggle::-webkit-details-marker { display: none; }

/* Back-to-top button: same round style as the menu button, stacked 10px above it.
   It shows once the visitor has scrolled down (see menu.js). The margins cancel its
   own height so it rests above the menu without pushing the footer down. */
.to-top {
  position: sticky;
  bottom: 70px; /* 16px menu offset + 44px menu button + 10px gap */
  z-index: 29; /* under the open menu panel */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -98px -60px 54px auto;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box,
    var(--border-gradient) border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.to-top.is-visible { opacity: 1; visibility: visible; }

.to-top svg { width: 20px; height: 20px; }

.site-menu__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
}

/* Lines turn into an X while the menu is open */
.site-menu[open] .site-menu__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-menu[open] .site-menu__toggle span:nth-child(2) { opacity: 0; }
.site-menu[open] .site-menu__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-menu__panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  display: grid;
  min-width: 200px;
  padding: 8px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}

.site-menu__panel a {
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 600;
}

.site-menu__panel a:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.site-menu__panel a[aria-current="page"] { color: var(--peach); }

/* Flower beside the current page's name in the menu */
.site-menu__panel a[aria-current="page"]::after {
  content: "";
  display: inline-block;
  width: 13.5px;
  height: 13.5px;
  margin-left: 8px;
  vertical-align: -2px;
  background: url("assets/flower.svg") center / contain no-repeat;
}

.brand {
  font-family: Manrope, sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.08;
  /* The name fades from peach to purple */
  background: linear-gradient(90deg, var(--peach), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--muted);
}

.nav a:hover,
.footer {
  margin-top: 40px;
  padding: 24px 0 8px;
  border-top: 1px solid var(--line);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  color: var(--accent);
  font-size: 0.82rem;
}

.footer__links a[aria-current="page"] { color: var(--peach); }

/* Bar separator between footer links */
.footer__links a + a::before {
  content: "|";
  display: inline-block;
  margin: 0 14px;
  color: var(--muted);
}

.footer__links a:hover { color: var(--peach); }

.footer__logo {
  display: block;
  margin: 20px auto 0;
}

main { padding: 24px 0; }

.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 22px;
  padding: 34px;
}

.hero--simple {
  grid-template-columns: 1fr;
}

.hero--plain {
  border: 1px solid var(--line);
  background: var(--panel);
}

.hero--center {
  text-align: center;
  justify-items: center;
}

.hero h1,
.section-heading h2,
.feature h2,
.project-tile h3,
.page-hero h1 {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  line-height: 1.08;
}

.hero h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  max-width: 10ch;
}

.hero--center h1 {
  max-width: none;
  color: var(--peach);
}

.profile-bubble {
  width: 170px;
  height: 170px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid transparent;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box,
    var(--border-gradient) border-box;
}

.profile-bubble--large {
  width: 184px;
  height: 184px;
}

.profile-bubble--resume {
  margin: 0 auto 32px;
}

.eyebrow.profile-tagline {
  margin: 0 0 24px;
  color: var(--lavender);
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.12em;
  /* Shrinks with the column so the line never wraps (text is ~51em wide) */
  font-size: min(0.76rem, calc((100cqw - 8px) / 51));
}

/* Resume page: even 24px gaps between photo, name and Hello card */
.topbar.topbar--resume {
  justify-content: center;
  padding: 0 18px;
  margin-bottom: 18px;
}

/* Outline flower to the right of the name on every page; absolute so the name stays centred */
.topbar .brand { position: relative; }

.topbar .brand::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  width: 16px;
  height: 16px;
  margin-top: -12px;
  background: url("assets/flower-outline.svg") center / contain no-repeat;
}

.main--resume { padding-top: 0; }

/* Inner pages: same space below the name as above it (39px each) */
.topbar + main { padding-top: 7px; }

.main--resume > .page-hero:first-child { margin-top: 0; }

/* Home page buttons sit first, right under the tagline, above the Hello card */
.main--resume > .section--home-links { padding: 0 0 18px; } /* + the card's 16px = 34px, like the other pages */

/* Home page links: iPhone-style app icons with the page name underneath */
.app-icons {
  /* Everything scales with the column width (cqi), capped at full size, so a row of five
     icons and their names always fits on one line, even on the smallest phones */
  --tile: min(64px, 16cqi);
  display: flex;
  justify-content: center;
  gap: min(14px, 2.6cqi);
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(8px, 1.6cqi);
  flex: none;
  min-width: var(--tile);
}

.app-icon__tile {
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: calc(var(--tile) * 0.234); /* iOS icon corner: about 23% of the width */
  /* Dark fill with a gradient outline, like the old pill buttons */
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box,
    var(--border-gradient) border-box;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}

.app-icons__defs { position: absolute; }

/* Home page: icons inside the Hello card, under the intro text */
.app-icons--in-card { margin-top: 20px; }

/* Icons in the card that aren't links (Retail, Supply chain) are see-through, so the card's own
   background shows inside them; linked icons keep the dark fill so they read as buttons.
   The gradient outline is drawn by a ring cut out of a gradient layer. */
.app-icons--in-card span.app-icon .app-icon__tile {
  position: relative;
  background: none;
}
.app-icons--in-card span.app-icon .app-icon__tile::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: var(--border-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Inner pages: same breathing room under the icons as on the home page */
.app-icons + .page-hero { margin-top: 34px; } /* room for the current-page flower */

.app-icon__glyph { width: calc(var(--tile) * 0.47); height: calc(var(--tile) * 0.47); }
/* Logos from an image (OCAD University): the image's shape is filled with the gradient */
.app-icon__logo {
  width: calc(var(--tile) * 0.72);
  height: calc(var(--tile) * 0.72);
  background: var(--border-gradient);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.app-icon__logo--ocad { --logo: url("assets/ocad-logo.png"); }
/* Simple symbols are drawn smaller, closer to the size of the line icons */
.app-icon__logo--claude { --logo: url("assets/claude-logo.svg"); width: calc(var(--tile) * 0.53); height: calc(var(--tile) * 0.53); }
.app-icon__logo--bambulab { --logo: url("assets/bambulab-logo.svg"); width: calc(var(--tile) * 0.5); height: calc(var(--tile) * 0.5); }

/* Symbols are drawn in the same gradient (defined once in the page) */
.app-icon__glyph--line { fill: none; stroke: url(#app-icon-gradient); }
.app-icon__glyph--fill { fill: url(#app-icon-gradient); }

/* The page you're on: a small gradient flower under its icon's name, like the one in the menu.
   It hangs below the row so it doesn't push the page down. */
.app-icon[aria-current="page"] { position: relative; }
.app-icon[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: url("assets/flower.svg") center / contain no-repeat;
}

/* Inverted: gradient fill with a dark symbol.
   Shown on hover (mouse) and while tapped (touch), so a tapped icon doesn't stay inverted on phones. */

@media (hover: hover) {
  a.app-icon:hover .app-icon__tile { background: var(--border-gradient) border-box; }
  a.app-icon:hover .app-icon__glyph--line { stroke: #16151d; }
  a.app-icon:hover .app-icon__glyph--fill { fill: #16151d; }
  a.app-icon:hover .app-icon__logo { background: #16151d; }
}
@media (hover: none) {
  a.app-icon:active .app-icon__tile { background: var(--border-gradient) border-box; }
  a.app-icon:active .app-icon__glyph--line { stroke: #16151d; }
  a.app-icon:active .app-icon__glyph--fill { fill: #16151d; }
  a.app-icon:active .app-icon__logo { background: #16151d; }
}

.app-icon__name {
  white-space: nowrap; /* "Supply chain" stays on one line */
  font-size: min(0.8rem, 3.15cqi);
  letter-spacing: 0.02em;
  color: var(--text);
}

.app-icon:focus-visible { outline: none; }
.app-icon:focus-visible .app-icon__tile { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Lift on hover (mouse), shrink a little while tapped, like pressing an app on a phone */
@media (hover: hover) {
  a.app-icon:hover .app-icon__tile { transform: translateY(-3px); }
}
a.app-icon:active .app-icon__tile { transform: scale(0.92); }

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

/* Even 24px gap between the Hello card and Present Interests */
.main--resume > .page-hero + .details-grid { margin-top: 24px; }

/* Home page: Hello card uses the same purple tint as Present Interests */
.main--resume > .page-hero {
  background: linear-gradient(145deg, rgba(179,140,255,0.18), rgba(147,161,204,0.10));
}

/* Home page: Hello text and Present Interests share one size */
.main--resume .page-hero .lede,
.main--resume .list-card ul {
  font-size: 14px;
  line-height: 1.7;
}

/* Home page: centre Present Interests to match the Hello card */
.main--resume .list-card { text-align: center; }
.main--resume .list-card ul {
  padding-left: 0;
  list-style-position: inside;
}

/* Home page: Hello and Present Interests titles in light grey */
.main--resume .page-hero .eyebrow,
.main--resume .list-card .section-label { color: #b8b5c0; }

/* Home page: the "About Me" title card looks like the title cards on the other pages */
.main--resume > .page-hero.page-hero--title { background: var(--panel); }
.main--resume .page-hero--title .eyebrow { color: var(--accent-2); }

.profile-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop to match LinkedIn: head and shoulders, face slightly left of centre */
  transform-origin: 68% 42%;
  transform: scale(2);
}

.eyebrow,
.section-label {
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  color: var(--accent-2);
  font-weight: 700;
}

.lede,
.feature p,
.project-tile p,
.page-copy p,
.stat strong,
.footer p { color: var(--muted); }

.lede { font-size: 1.08rem; max-width: 58ch; line-height: 1.7; }

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.hero__stats {
  display: grid;
  gap: 14px;
}

.stat {
  padding: 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
}

.stat span {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  margin-bottom: 8px;
}

.stat strong { display: block; font-size: 1rem; line-height: 1.5; }

.grid,
.cards {
  display: grid;
  gap: 18px;
}

.cards--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-heading--center {
  text-align: center;
  margin-bottom: 10px;
}

.section-heading--center .section-label {
  margin-bottom: 8px;
}

.cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--intro { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }

.feature {
  padding: 28px;
  min-height: 220px;
}

.feature--dark {
  background: linear-gradient(145deg, rgba(179,140,255,0.18), rgba(147,161,204,0.10));
  color: #fff;
}

.feature--dark p,
.feature--dark .section-label { color: rgba(255,255,255,0.72); }

.section { padding: 26px 0 8px; }

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

.section-heading h2,
.page-hero h1,
.feature h2 { font-size: clamp(2rem, 4vw, 3.2rem); }

.cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.project-tile {
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.project-tile--centered { text-align: center; }

.project-tile__soon { margin: 0; font-size: 14px; }

.project-tile__desc { margin: 0 0 18px; line-height: 1.7; }

/* Project names stand out from the description text, like the client names on the Design page */
.project-tile__desc strong { color: var(--text); font-weight: 700; }

/* No trailing gap when a label is the only thing in its card */
.eyebrow:last-child,
.project-tile__tag:last-child { margin-bottom: 0; }

.project-tile__tag {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(179,140,255,0.16);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.page-hero {
  padding: 34px;
  margin-top: 16px;
}

.page-hero--centered {
  border: 1px solid var(--line);
  background: var(--panel);
}

.page-hero .lede { max-width: 62ch; }

.page-hero + .cards { margin-top: 18px; }

.page-hero--centered {
  text-align: center;
}

.page-hero--centered .lede {
  margin-left: auto;
  margin-right: auto;
}

.intro-points {
  width: min(100%, 700px);
  margin: 22px auto 0;
  padding-left: 20px;
  text-align: left;
  color: var(--muted);
  line-height: 1.8;
}

.hero--center .lede {
  margin-left: auto;
  margin-right: auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.screenshot-card {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.screenshot-card img {
  display: block;
  width: 100%;
  height: auto;
}

.screenshot-card figcaption {
  padding: 12px 14px 14px;
  font-size: 0.88rem;
  color: var(--muted);
}

.gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
}

/* Photo work: transparent square box, each photo scaled down to fit inside it */
.gallery--photo figure {
  background: transparent;
  box-shadow: none;
}

.gallery--photo img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 28px;
}

/* Centre any leftover photos on the last row */
.gallery.gallery--photo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery--photo figure { width: calc((100% - 48px) / 4); }

@container (max-width: 1024px) {
  .gallery--photo figure { width: calc((100% - 16px) / 2); }
}

@container (max-width: 760px) {
  .gallery--photo figure { width: 100%; }
  /* Phones: keep the square box, with a slimmer inset */
  .gallery--photo img { padding: 16px; }
}

/* Design page: one card per client, matching the original site's order */
.design-client {
  margin-top: 18px;
  padding: 34px;
  text-align: center;
}

.design-client__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 16px 24px;
  border-radius: 18px;
  /* White tile with the same gradient ring as the profile photo */
  border: 4px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--border-gradient) border-box;
}

.design-client__logo img {
  display: block;
  max-width: min(100%, 480px);
  max-height: 90px;
  width: auto;
  height: auto;
}

/* Card titles that use the hobby project tag style (Design clients, home page Hello and
   Present Interests) sit on their own line, centred */
.design-client > .project-tile__tag,
.page-hero > .project-tile__tag,
.list-card > .project-tile__tag {
  display: flex;
  width: fit-content;
  margin: 0 auto 14px;
}

/* Single-brand logos: same-size white square */
.design-client__logo--square {
  width: 128px;
  height: 128px;
  padding: 18px;
}

.design-client__logo--square img {
  max-width: 100%;
  max-height: 100%;
}

.design-client__desc {
  max-width: 62ch;
  margin: 0 auto 24px;
  color: var(--muted);
  line-height: 1.7;
}

/* Client and business names stand out from the description text */
.design-client__desc strong {
  color: var(--text);
  font-weight: 700;
}

.design-client__desc a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Each design piece sits whole on a white square, one per row */
.gallery.gallery--design {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.gallery--design figure {
  flex: none;
  width: min(520px, 100%);
  border: 0;
  background: none;
  box-shadow: none;
}

.design-tile {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}

/* Each piece keeps its own shape inside the square, with a thin black outline */
.gallery--design img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border: 2px solid #000;
}

.gallery--design figcaption { text-align: center; }

.gallery figcaption {
  padding: 12px 14px 14px;
  font-size: 0.88rem;
  color: var(--muted);
}

.details-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  margin-top: 18px;
}

.details-grid--single {
  grid-template-columns: 1fr;
}

.list-card {
  padding: 24px;
}

.list-card ul {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

@container (max-width: 1024px) {
  .hero,
  .grid--intro,
  .cards--four,
  .cards--two,
  .cards--three,
  .gallery,
  .details-grid { grid-template-columns: 1fr 1fr; }
}

@container (max-width: 760px) {
  .topbar,
  .footer,
  .hero,
  .page-hero { padding: 18px; }
  .topbar { position: static; flex-wrap: wrap; justify-content: center; }
  .nav { width: 100%; order: 3; justify-content: center; }
  .hero,
  .grid--intro,
  .cards--four,
  .cards--two,
  .cards--three,
  .gallery,
  .details-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 100%; }
}

/* Contact page: stacked cards matching the home page's Present Interests */
.about-cards {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.about-card p:not(.section-label),
.about-card ul {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.about-card ul { margin: 0; }

.about-card a {
  color: var(--accent);
}

.about-card a:hover { color: var(--peach); }

/* Soft peach outline on every card and photo tile (gradient outlines are left alone) */
.card,
.gallery--photo figure { border-color: var(--peach-line); }

@container (max-width: 480px) {
  /* Keep all five footer links on one line on phones (shrinks with the column) */
  .footer__links { font-size: min(0.78rem, calc((100cqw - 48px) / 25)); flex-wrap: nowrap; white-space: nowrap; }
  .footer__links a + a::before { margin: 0 6px; }
}

/* Short pages: fill the screen so the footer links sit near the bottom of the phone */
.site-shell--fill {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.site-shell--fill > main { flex: 1 0 auto; }

/* Phones: no room beside the column, so the menu sits inside it on its own row */
@media (max-width: 760px) {
  .to-top { margin: 24px 0 0 auto; }
  .site-menu { margin: 24px 0 0 auto; }
  .to-top + .site-menu { margin-top: 10px; }

  .site-menu + .footer { margin-top: 16px; }
}

/* Hobby projects: AI game and 3D Notebook, with the start screen large and the other screens as small shots below */
.game-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.game-shots figure {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
}

.game-shots figure:first-child {
  grid-column: 1 / -1;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.game-shots img {
  display: block;
  width: 100%;
  aspect-ratio: 2720 / 1483;
  object-fit: cover;
}

/* 3D Notebook screenshots are wider than the game's; the large one shows in full */
.game-shots--notebook img { aspect-ratio: 2 / 1; object-position: top left; }
.game-shots--notebook figure:first-child img { aspect-ratio: auto; }

/* Images that open in the full-screen viewer (lightbox.js) */
.is-zoomable {
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}

.is-zoomable:hover { opacity: 0.88; }

.is-zoomable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.has-lightbox { overflow: hidden; }

.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  background: var(--bg);
  outline: none;
}

.lightbox::backdrop { background: var(--bg); }

/* One photo per screen; swipe or scroll sideways to move between them */
.lightbox__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.lightbox__track::-webkit-scrollbar { display: none; }

.lightbox__slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 64px 16px 56px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Images grow to fill the screen, but stop at the size they'd be on a 15-inch laptop
   (about 1440 x 900) so small originals don't get stretched blurry on big monitors */
.lightbox__slide img {
  display: block;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  max-width: 1296px;
  max-height: 780px;
  object-fit: contain;
}

/* Wider screens: keep the photo clear of the side arrows */
@media (min-width: 761px) {
  .lightbox__slide { padding-left: 72px; padding-right: 72px; }
}

.lightbox__slide figcaption {
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.lightbox__count {
  position: absolute;
  top: 22px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  font-size: 0.88rem;
  color: var(--muted);
}

.lightbox__close,
.lightbox__arrow {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(24, 26, 37, 0.8);
  font: 400 28px/1 Inter, sans-serif;
  cursor: pointer;
}

.lightbox__close:hover,
.lightbox__arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lightbox__close { top: 12px; right: 12px; }

.lightbox__arrow { top: 50%; transform: translateY(-50%); }
.lightbox__arrow--prev { left: 12px; }
.lightbox__arrow--next { right: 12px; }
.lightbox__arrow:disabled { opacity: 0.3; cursor: default; }
.lightbox__arrow[hidden] { display: none; }

/* Phones: swiping does the work, so the arrows move out of the way to the bottom corners */
@media (max-width: 760px) {
  .lightbox__arrow { top: auto; bottom: 10px; transform: none; }
}

/* Discourage saving images (protect-images.js blocks the right-click menu and dragging) */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* no "Save Image" on a long press on iPhone */
}

/* Headings between cards (Intro on the home page; Hobby projects and Client work on Design),
   in the same soft peach as the card outlines */
.group-heading { margin-top: 34px; }
.group-heading + .cards,
.group-heading + .page-hero,
.group-heading + .design-client { margin-top: 0; }
.group-heading .section-label { color: var(--peach-line); }