/* ══════════════════════════════════════════
   RESET & TOKENS
   ══════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --black : #000;
  --white : #fff;
  --font  : 'Press Start 2P', 'Courier New', monospace;
  --fs-hero   : clamp(2rem,   5.5vw,  5rem);
  --fs-menu   : clamp(1rem,   2.2vw,  1.9rem);
  --fs-tiny   : clamp(0.38rem,0.75vw, 0.58rem);
  --fs-mid    : clamp(0.55rem,1.2vw,  0.92rem);
  --fs-section: clamp(1rem,   2.2vw,  1.85rem);
  --fs-body   : clamp(0.42rem,0.85vw, 0.65rem);
}

html, body {
  width:100%; height:100%;
  overflow:hidden;
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  -webkit-font-smoothing:none;
  font-smooth:never;
  image-rendering:pixelated;
}

/* ══════════════════════════════════════════
   CRT
   ══════════════════════════════════════════ */
.crt-scanlines {
  position:fixed; inset:0; pointer-events:none; z-index:9000;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,.18) 3px, rgba(0,0,0,.18) 4px
  );
}
.crt-vignette {
  position:fixed; inset:0; pointer-events:none; z-index:9001;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.9) 100%);
}
@keyframes crt-flicker {
  0%,88%{opacity:1}89%{opacity:.82}90%{opacity:1}93%{opacity:.88}94%{opacity:1}
}
body { animation:crt-flicker 9s step-end infinite; }

/* ══════════════════════════════════════════
   UTILITY ANIMATIONS
   ══════════════════════════════════════════ */
@keyframes blink-hide { 0%,49%{opacity:1}50%,100%{opacity:0} }
.blink { animation:blink-hide 350ms step-end infinite; }

@keyframes px-jitter {
  0%  {transform:translate(0,0)} 20%{transform:translate(1px,0)}
  40% {transform:translate(0,0)} 60%{transform:translate(-1px,1px)}
  80% {transform:translate(1px,-1px)} 100%{transform:translate(0,0)}
}
.jitter { animation:px-jitter 100ms step-end infinite; }

/* ══════════════════════════════════════════
   BOOT FLASH
   ══════════════════════════════════════════ */
#boot-flash {
  position:fixed; inset:0; background:var(--white);
  z-index:8000; opacity:0; pointer-events:none;
}

/* ══════════════════════════════════════════
   STARFIELD
   ══════════════════════════════════════════ */
#starfield {
  position:fixed; inset:0; width:100%; height:100%;
  opacity:0; image-rendering:pixelated;
  transition:opacity 1.2s ease; z-index:1;
}

/* ══════════════════════════════════════════
   NEOGEO LINES
   ══════════════════════════════════════════ */
.hline {
  position:fixed; left:0; width:100%; height:3px;
  background:var(--white); z-index:50; opacity:0;
  transition:opacity .6s step-end;
}
#hline-top    { top:9%; }
#hline-bottom { bottom:9%; }
.hline::after {
  content:''; position:absolute; top:6px; left:0;
  width:100%; height:1px; background:var(--white);
}
#vline {
  position:fixed; left:38%; top:9%; bottom:9%;
  width:2px; background:var(--white);
  z-index:50; opacity:0; transition:opacity .4s step-end;
}
#vline::after {
  content:''; position:absolute; top:0; bottom:0;
  left:4px; width:1px; background:var(--white); opacity:.3;
}

/* ══════════════════════════════════════════
   ANIMATION STAGE
   ══════════════════════════════════════════ */
#stage { position:fixed; inset:0; z-index:100; pointer-events:none; }
.seg {
  position:absolute; font-family:var(--font);
  white-space:nowrap; line-height:1;
  opacity:0; color:var(--white);
  image-rendering:pixelated; -webkit-font-smoothing:none;
}

/* ══════════════════════════════════════════
   HUD — PERSISTENT
   ══════════════════════════════════════════ */
#boot-header {
  position:fixed; top:3%; left:0; width:100%;
  display:flex; justify-content:center;
  font-size:var(--fs-tiny); letter-spacing:.15em;
  color:var(--white); z-index:300;
  opacity:0; transition:opacity .5s ease;
}

/* Credits group (hint + display stacked) */
#credits-group {
  position:fixed; bottom:3.2%; right:2%;
  z-index:300; display:flex; flex-direction:column;
  align-items:flex-end; gap:9px;
  opacity:0; transition:opacity .5s ease;
}

/* Speech-bubble hint above credits */
#credits-hint {
  position:relative;
  border:1px solid rgba(255,255,255,.75);
  border-radius:3px;
  padding:.34em .62em;
  font-size:calc(var(--fs-tiny) * 0.82);
  letter-spacing:.1em;
  line-height:1.7;
  color:var(--white);
  opacity:.92;
  white-space:nowrap;
  transform:translateY(-6px) scale(1);
  transform-origin:85% 100%;
  background:rgba(0,0,0,.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;
  animation:hint-bubble-pulse 1.9s step-end infinite;
}
/* Downward arrow */
#credits-hint::after {
  content:'';
  position:absolute;
  bottom:-6px; right:18px;
  width:7px; height:7px;
  background:rgba(0,0,0,.72);
  border-right:1px solid rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.75);
  transform:rotate(45deg);
}
@keyframes hint-bubble-pulse {
  0%,100% { transform:translateY(-6px) scale(1); }
  50%     { transform:translateY(-6px) scale(1.06); }
}

#credits-display {
  font-size:var(--fs-tiny); letter-spacing:.12em;
  color:var(--white); user-select:none;
}

#bottom-left {
  position:fixed; bottom:3.2%; left:2%;
  font-size:var(--fs-tiny); color:var(--white); z-index:300;
  opacity:0; transition:opacity .5s ease;
  letter-spacing:.1em; line-height:1.8;
}

#insert-coin {
  position:fixed; bottom:3.2%; left:50%;
  transform:translateX(-50%);
  font-size:var(--fs-mid); letter-spacing:.18em;
  color:var(--white); z-index:400; display:none;
}
#insert-coin.active { display:block; }

#nav-legend {
  position:fixed; bottom:3.2%; left:50%;
  transform:translateX(-50%);
  font-size:var(--fs-tiny); letter-spacing:.12em;
  color:var(--white); opacity:.3; z-index:300;
  white-space:nowrap; display:none;
}

/* ══════════════════════════════════════════
   INTRO SCREEN
   ══════════════════════════════════════════ */
#intro-screen {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:200; opacity:0; pointer-events:none;
  transition:opacity .4s step-end;
}
#intro-screen.visible { opacity:1; pointer-events:all; }

#intro-subtitle {
  font-size:var(--fs-tiny); letter-spacing:.15em;
  color:var(--white); opacity:.6; margin-bottom:2.4rem;
  transition:opacity .3s ease;
}
#intro-title {
  font-size:var(--fs-hero); letter-spacing:.25em;
  color:var(--white); position:relative;
}
#intro-title::before,#intro-title::after {
  content:''; position:absolute;
  top:-12px; bottom:-12px; width:6px;
  border-top:3px solid var(--white); border-bottom:3px solid var(--white);
  transition:opacity .3s step-end;
}
#intro-title::before { left:-16px; border-left:3px solid var(--white); }
#intro-title::after  { right:-16px; border-right:3px solid var(--white); }
#intro-title.corner-mode::before,
#intro-title.corner-mode::after { opacity:0; }

#press-start {
  margin-top:3rem; font-size:var(--fs-mid);
  letter-spacing:.18em; color:var(--white);
}

/* ══════════════════════════════════════════
   CORNER LOGO
   ══════════════════════════════════════════ */
#corner-logo {
  position:fixed; top:3%; right:2%;
  font-size:calc(var(--fs-tiny) * 1.18); letter-spacing:.24em;
  color:var(--white); z-index:500;
  opacity:0; transition:opacity .3s step-end;
  user-select:none; line-height:1;
  text-shadow:0 0 0 #fff, 0 0 7px rgba(255,255,255,.22);
}

/* ══════════════════════════════════════════
   MENU SCREEN — DESKTOP
   ══════════════════════════════════════════ */
#menu-screen {
  position:fixed; inset:0; z-index:200;
  display:none;
  align-items:center; justify-content:flex-start;
}
#menu-screen.active { display:flex; }

#menu-list {
  position:relative; left:7%;
  display:flex; flex-direction:column;
  gap:clamp(1.2rem,3.2vh,2.5rem);
  list-style:none;
}

.menu-item {
  font-size:var(--fs-menu); letter-spacing:.2em;
  color:var(--white); cursor:pointer; user-select:none;
  white-space:nowrap; position:relative;
  padding-left:0; line-height:1;
  transition:padding-left .06s step-end, font-size .06s step-end;
}
.menu-item::before {
  content:'▶'; position:absolute;
  left:-1.8em; opacity:0; font-size:.65em;
  top:50%; transform:translateY(-50%);
  transition:opacity .06s step-end;
}
.menu-item.selected {
  animation:blink-hide 280ms step-end infinite;
  padding-left:1.2em;
  font-size:calc(var(--fs-menu)*1.1);
}
.menu-item.selected::before { opacity:1; }
.menu-item:not(.selected):hover {
  text-shadow:1px 0 0 #fff,-1px 0 0 #fff;
}

#menu-hint {
  position:absolute; right:5%; top:50%;
  transform:translateY(-50%);
  text-align:right; opacity:.48;
  pointer-events:none; user-select:none;
  line-height:2.3; font-size:var(--fs-tiny); letter-spacing:.1em;
  text-shadow:1px 0 0 rgba(255,255,255,.35);
}

/* ══════════════════════════════════════════
   SECTIONS CONTAINER
   ══════════════════════════════════════════ */
#sections-container {
  position:fixed; inset:0; z-index:250; display:none;
}
#sections-container.active { display:block; }

.section-panel {
  position:absolute; inset:0;
  display:none; flex-direction:column;
  padding:11% 5% 11% 5%;
  overflow-y:auto; scrollbar-width:none;
}
.section-panel::-webkit-scrollbar { display:none; }
.section-panel.active { display:flex; }

.section-title {
  font-size:var(--fs-section); letter-spacing:.3em;
  color:var(--white); margin-bottom:clamp(.8rem,2vh,1.6rem);
  position:relative; padding-bottom:.65rem; flex-shrink:0;
}
.section-title::after {
  content:''; position:absolute; bottom:0; left:0;
  width:100%; height:2px; background:var(--white);
}
.section-title .tag {
  font-size:.44em; opacity:.4; margin-left:.8em; letter-spacing:.1em;
}

/* Project tabs sit directly under the title baseline line. */
.projects-tabs {
  display:flex;
  gap:clamp(.35rem,.8vw,.6rem);
  margin-top:calc(clamp(.8rem,2vh,1.6rem) * -1 + .62rem);
  margin-bottom:clamp(.65rem,1.2vh,1.05rem);
  flex-shrink:0;
}
.project-tab {
  appearance:none;
  border:2px solid var(--white);
  border-top:none;
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  font-size:clamp(.38rem,.75vw,.56rem);
  letter-spacing:.1em;
  line-height:1;
  padding:.62rem .72rem .56rem;
  cursor:pointer;
  white-space:nowrap;
  transition:background .08s step-end, color .08s step-end, opacity .08s step-end;
}
.project-tab.selected,
.project-tab[aria-selected='true'] {
  background:var(--white);
  color:var(--black);
}
.project-tab:not(.selected):hover {
  opacity:.72;
}

/* Hidden class is used by project filtering without re-rendering cards. */
.hidden {
  display:none !important;
}

.section-body {
  font-size:var(--fs-body); letter-spacing:.08em;
  line-height:2.4; color:var(--white); opacity:.85; flex:1;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.section-body p { margin:.25em 0; }

/* ══════════════════════════════════════════
   PROJECT GRID  (desktop: 2-col, tall cards)
   ══════════════════════════════════════════ */
.project-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(.7rem,1.5vw,1.2rem);
  margin-top:.3rem;
}

.project-card {
  display:flex; flex-direction:row;
  min-height:180px;
  border:2px solid var(--white);
  position:relative; overflow:hidden;
}

/* Left: text content */
.card-left {
  flex:1; display:flex; flex-direction:column;
  padding:clamp(.8rem,1.5vw,1.2rem) clamp(.7rem,1.2vw,1rem)
          clamp(.8rem,1.5vw,1.2rem) clamp(.9rem,1.6vw,1.2rem);
  position:relative;
}
/* Dotted stripe along left edge */
.card-left::before {
  content:''; position:absolute;
  top:0; left:0; width:5px; height:100%;
  background:repeating-linear-gradient(
    to bottom, var(--white) 0, var(--white) 4px,
    transparent 4px, transparent 8px
  );
}

.card-meta { flex:1; }

.card-title {
  font-size:clamp(.52rem,1.05vw,.82rem); letter-spacing:.14em;
  margin-bottom:.55rem;
  color:var(--white);
}
.card-desc {
  font-size:clamp(.38rem,.78vw,.6rem); line-height:2;
  opacity:.6; margin-bottom:.6rem;
}
.card-tags { display:flex; flex-wrap:wrap; gap:.3rem; }
.card-tag {
  border:1px solid rgba(255,255,255,.5);
  padding:.12em .4em;
  font-size:clamp(.32rem,.65vw,.5rem);
  opacity:.6;
}
.card-links {
  margin-top:.55rem;
  display:flex;
  flex-wrap:wrap;
  gap:.38rem;
}
.project-link {
  border:2px solid var(--white);
  background:var(--white);
  color:var(--black);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:.18em .58em;
  min-height:2.2em;
  font-size:clamp(.32rem,.62vw,.5rem);
  letter-spacing:.11em;
  opacity:1;
  font-weight:700;
  text-transform:uppercase;
  box-shadow:2px 2px 0 rgba(255,255,255,.55);
  transition:background .08s step-end, color .08s step-end, opacity .08s step-end, box-shadow .08s step-end, transform .08s step-end;
}
.project-link:hover {
  background:var(--black);
  color:var(--white);
  opacity:1;
  box-shadow:0 0 0 rgba(255,255,255,0);
  transform:translate(2px,2px);
}
.project-link.disabled {
  background:rgba(255,255,255,.18);
  color:rgba(255,255,255,.75);
  opacity:.8;
  border-color:rgba(255,255,255,.3);
  box-shadow:none;
  cursor:not-allowed;
}
.card-year {
  font-size:clamp(.3rem,.6vw,.48rem); opacity:.3;
  letter-spacing:.12em; margin-top:auto; padding-top:.5rem;
}

/* Right: pixel art image panel */
.card-image {
  width:clamp(170px,28%,290px);
  flex-shrink:0;
  border-left:2px solid var(--white);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  background:#000;
}
/* Subtle scanline overlay on image */
.card-image::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 2px,
    rgba(0,0,0,.25) 2px, rgba(0,0,0,.25) 3px
  );
  z-index:2;
}
.card-image svg {
  width:80%; height:80%;
  display:block; flex-shrink:0;
  image-rendering:pixelated;
}
.card-image img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right bottom;
  display:block;
  padding:4px 4px 4px 0;
  box-sizing:border-box;
  image-rendering:auto;
}

/* ══════════════════════════════════════════
   CAREER TABS CONTENT
   ══════════════════════════════════════════ */
.career-panels {
  display:block;
}
.career-panel {
  display:block;
}
.career-intro {
  margin:0 0 .9rem;
  opacity:.72;
  line-height:2.15;
}

.career-links {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.15rem 0 1rem;
}
.career-link {
  border:1px solid rgba(255,255,255,.65);
  color:var(--white);
  text-decoration:none;
  padding:.14em .58em;
  font-size:clamp(.32rem,.62vw,.5rem);
  letter-spacing:.08em;
  opacity:.82;
  transition:background .08s step-end, color .08s step-end;
}
.career-link:hover {
  background:var(--white);
  color:var(--black);
}

.career-item {
  margin:0 0 1rem;
}
.career-item-kind {
  margin:0 0 .32rem;
  font-size:clamp(.32rem,.6vw,.48rem);
  letter-spacing:.14em;
  opacity:.42;
}

.cert-card {
  width:100%;
  border:2px solid var(--white);
  display:flex;
  min-height:170px;
  margin:.65rem 0 .95rem;
  overflow:hidden;
}
.cert-content {
  flex:1;
  padding:clamp(.65rem,1.3vw,1rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.55rem;
}
.cert-title {
  font-size:clamp(.45rem,.95vw,.72rem);
  letter-spacing:.12em;
  line-height:1.6;
}
.cert-desc {
  font-size:clamp(.36rem,.75vw,.57rem);
  opacity:.7;
  line-height:2;
}
.cert-image {
  width:clamp(130px,30%,230px);
  border-left:2px solid var(--white);
  margin:3px 3px 3px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  align-self:stretch;
  font-size:clamp(.34rem,.62vw,.5rem);
  letter-spacing:.09em;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.16) 0,
    rgba(255,255,255,.16) 2px,
    transparent 2px,
    transparent 5px
  );
}
.cert-image img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  image-rendering:auto;
}
.cert-image-label {
  display:block;
  text-align:center;
  padding:.25rem;
  opacity:.55;
}

.event-gallery {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.52rem;
  margin-top:.2rem;
}
.event-shot {
  min-height:124px;
  height:124px;
  border:2px solid rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-size:clamp(.3rem,.55vw,.45rem);
  letter-spacing:.1em;
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.12),
    rgba(255,255,255,.03)
  );
}
.event-shot img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  image-rendering:pixelated;
}
.event-shot-label {
  display:block;
  text-align:center;
  padding:.2rem;
  opacity:.58;
}

.contact-row {
  display:block;
  margin:.32rem 0;
}
.contact-link {
  color:var(--white);
  display:inline-block;
  max-width:100%;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);
  opacity:.84;
  transition:opacity .08s step-end, border-color .08s step-end;
}
.contact-link:hover {
  opacity:1;
  border-bottom-color:rgba(255,255,255,.75);
}

/* ══════════════════════════════════════════
   STAT BARS (career)
   ══════════════════════════════════════════ */
.stat-row { display:flex; align-items:center; gap:.8rem; margin:.45rem 0; }
.stat-label {
  width:clamp(55px,11vw,130px); font-size:calc(var(--fs-body)*.85);
  flex-shrink:0; opacity:.65;
}
.stat-bar {
  flex:1; height:7px; border:1px solid rgba(255,255,255,.3); overflow:hidden;
}
.stat-fill {
  height:100%; background:var(--white);
  animation:grow-bar .9s step-end forwards;
}
@keyframes grow-bar { from{width:0} to{width:var(--pct)} }

/* ══════════════════════════════════════════
   BACK BUTTON
   ══════════════════════════════════════════ */
.back-btn {
  margin-top:clamp(.7rem,1.8vh,1.4rem);
  font-size:calc(var(--fs-body)*1.05); letter-spacing:.14em;
  color:var(--white); cursor:pointer; display:inline-block;
  border:2px solid var(--white); padding:.45em .9em;
  user-select:none; flex-shrink:0;
  transition:background .1s step-end, color .1s step-end;
}
.back-btn:hover { background:var(--white); color:var(--black); }


/* ══════════════════════════════════════════════════════
   MOBILE  (≤ 768px)  — completely different layout
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  html, body { overflow:hidden; }

  /* Hide desktop-only chrome */
  #stage,
  #boot-flash,
  #intro-screen,
  #credits-group,
  #credits-hint,
  #bottom-left,
  #insert-coin,
  #nav-legend,
  #vline,
  #menu-hint,
  .crt-vignette        { display:none !important; }

  /* Keep starfield but show it immediately */
  #starfield { opacity:1 !important; transition:none; }

  /* Lines show right away */
  .hline { opacity:1 !important; transition:none; }

  /* Header */
  #boot-header {
    font-size:clamp(.32rem,.9vw,.5rem);
    opacity:.4 !important; transition:none;
  }

  /* Corner logo → center top label */
  #corner-logo {
    position:fixed;
    top:50%; left:50%; right:auto;
    transform:translate(-50%, -280%);
    font-size:clamp(1rem,5.5vw,1.8rem);
    letter-spacing:.22em;
    opacity:1 !important; transition:none;
    text-align:center;
    white-space:nowrap;
  }

  /* Menu: center everything */
  #menu-screen {
    align-items:center;
    justify-content:center;
  }
  #menu-list {
    left:0;
    align-items:center;
    gap:clamp(1.4rem,5vh,3rem);
  }
  .menu-item {
    font-size:clamp(1rem,5vw,1.5rem);
    letter-spacing:.2em;
    text-align:center;
  }
  .menu-item::before { left:-1.6em; }

  /* Section panels: full viewport */
  .section-panel {
    padding:16% 6% 14% 6%;
  }

  .projects-tabs {
    gap:.35rem;
    margin-top:calc(clamp(.8rem,4.5vw,1.3rem) * -1 + .55rem);
    margin-bottom:.75rem;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .projects-tabs::-webkit-scrollbar { display:none; }
  .project-tab {
    font-size:clamp(.36rem,2.2vw,.52rem);
    padding:.52rem .6rem .46rem;
    flex:0 0 auto;
  }

  /* Projects: single column, no image */
  .project-grid {
    grid-template-columns:1fr;
    gap:.9rem;
  }
  .project-card {
    min-height:auto;
    flex-direction:column;
  }
  .card-image { display:none; }
  .card-left {
    padding:.8rem .8rem .8rem 1rem;
  }
  .card-title {
    font-size:clamp(.55rem,3.5vw,.85rem);
  }
  .card-desc {
    font-size:clamp(.4rem,2.5vw,.6rem);
  }
  .card-tag {
    font-size:clamp(.32rem,2vw,.5rem);
  }
  .card-links {
    gap:.45rem;
  }
  .project-link {
    min-height:2.6em;
    padding:.32em .7em;
  }

  .cert-card {
    flex-direction:column;
    min-height:auto;
  }
  .cert-image {
    width:100%;
    min-height:88px;
    border-left:none;
    border-top:2px solid var(--white);
  }
  .event-gallery {
    grid-template-columns:repeat(2, 1fr);
  }
  .event-shot {
    min-height:94px;
    height:94px;
  }

  .contact-row {
    margin:.28rem 0;
  }

  /* Stat bars */
  .stat-label { width:80px; font-size:clamp(.35rem,2.2vw,.55rem); }

  /* Back button */
  .back-btn { font-size:clamp(.42rem,2.5vw,.65rem); }

  /* Section title */
  .section-title {
    font-size:clamp(.8rem,4.5vw,1.3rem);
    letter-spacing:.16em;
    line-height:1.5;
  }
  .section-title .tag {
    display:block;
    margin-left:0;
    margin-top:.3rem;
    letter-spacing:.08em;
  }

  /* Body text */
  .section-body { font-size:clamp(.38rem,2.2vw,.6rem); }
}

/* Very small phones */
@media (max-width: 380px) {
  .menu-item { font-size:clamp(.85rem,4.5vw,1.2rem); }
  #corner-logo { font-size:clamp(.8rem,4.5vw,1.4rem); }
  .section-panel { padding:18% 6% 15% 6%; }
  .project-link {
    min-height:2.8em;
    letter-spacing:.08em;
  }
}