@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap');

:root {
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --paper: #ffffff;
  --ink: #1A1A1A;
  --divider: #E8E4DC;
  --accent: #FF5436;
  --desk: #8D8CB6;
  --menu-ink: #ffffff;

  /* light around an object on hover; icons sit on a white screen, so they glow in colour */
  --glow: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 14px rgba(255, 255, 255, 0.75))
          drop-shadow(0 0 32px rgba(255, 255, 255, 0.45));
  --glow-icon: drop-shadow(0 0 3px rgba(124, 92, 255, 0.9))
               drop-shadow(0 0 10px rgba(124, 92, 255, 0.55));

  /* the shadow layer is painted in the desk colour and darkened by blending, as in the drawing file */
  --shadow-blend: multiply;
  --shadow-opacity: 0.5;

  --c-wiserwork: #7C5CFF;
  --c-joyskin: #D98A8A;
  --c-peinirli: #FF7A33;
  --c-100mentors: #1B2A4A;
  --c-island: #C9A227;
  --c-illustration: #FF5436;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* the bar is positioned against the body, so it lines up inside the scrollbar too */
  position: relative;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-body);
  height: 100%;
}

/* Body is the only scroll container, and it always reserves the scrollbar's width,
   so the bar and the content line up identically on every page. */
body {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* Every page shares one container: this width, and 56px of air at the sides. */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* --scrollbar-width is only set on the desk, which has no scrollbar of its own */
  padding: 20px calc(56px + var(--scrollbar-width, 0px)) 20px 56px;
}

.topbar__logo {
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  display: block;
  height: 72px;
  width: auto;
  -webkit-user-drag: none;
}

.desk-hint {
  position: fixed;
  /* lines up with the menu above it, scrollbar allowance included */
  right: calc(56px + var(--scrollbar-width, 0px));
  bottom: 32px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--menu-ink);
  opacity: 0.9;
  pointer-events: none;
}


.site-nav {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  align-items: center;
  display: flex;
  gap: 22px;
}

.site-nav__tab {
  color: var(--menu-ink);
  text-decoration: none;
  font-size: 1.2rem;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.site-nav__tab:hover,
.site-nav__tab:focus-visible {
  opacity: 1;
}

/* The page you're on is simply the bold one. */
.site-nav__tab.is-current {
  opacity: 1;
  font-weight: 700;
}

.social {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  align-items: center;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: block;
  color: var(--menu-ink);
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.social a:hover,
.social a:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

/* Solid marks, each fitted inside the same square so they line up optically. */
.social svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

/* The burger only exists on a phone; the media query at the end switches it on. */
.nav-toggle {
  display: none;
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--menu-ink);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Open, the three lines fold into a cross. */
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*
  About and work pages: same desk colour, but normal pages that scroll. The scrollbar
  space is always reserved, so filtering the grid can't shift the page sideways.
*/
body.page-about,
body.page-work {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.topbar__home {
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  line-height: 0;
}

/* Sits under the menu on the scrolling pages, same pill as the one inside a project.
   It lives inside the page container, so it stays aligned on very wide screens too. */
.page-back {
  display: inline-flex;
  margin: 0 0 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--menu-ink);
  border-radius: 999px;
  padding: 9px 20px;
  color: var(--menu-ink);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.page-back svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-back:hover {
  background: var(--menu-ink);
  color: var(--desk);
}

.work {
  max-width: 1720px;
  margin: 0 auto;
  padding: 116px 56px 120px;
}

/* Title on the left, filters on the right; they stack on a narrow screen. */
.work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin: 0 0 56px;
}

.work__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--menu-ink);
  margin: 0;
}

.work__title em {
  font-style: italic;
}

.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.work-filter {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  padding: 9px 20px;
  color: var(--menu-ink);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.work-filter:hover {
  border-color: var(--menu-ink);
}

.work-filter.is-active {
  background: var(--menu-ink);
  border-color: var(--menu-ink);
  color: var(--desk);
}

.work-card[hidden] {
  display: none;
}

/* Back to top: appears once you've scrolled a screenful or so. */
.to-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 20;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
  color: var(--menu-ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, visibility 0.25s;
}

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

.to-top:hover {
  background: rgba(255, 255, 255, 0.35);
}

.to-top svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .to-top { right: 20px; bottom: 20px; width: 60px; height: 60px; }
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* Each card is the project's cover with its number, field and name laid over it. */
.work-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  color: var(--menu-ink);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.15);
}

.work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

/* Keeps the white type readable whatever the photo underneath is doing. */
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 32%),
    linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 45%);
}

.work-card:hover img,
.work-card:focus-visible img {
  transform: scale(1.04);
}

.work-card__tag,
.work-card__name {
  position: absolute;
  z-index: 1;
}

.work-card__tag {
  top: 16px;
  right: 22px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 6px 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
}

.work-card__name {
  left: 22px;
  bottom: 20px;
  right: 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
}

@media (max-width: 900px) {
  .work-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

@media (max-width: 640px) {
  .work { padding: 92px 24px 80px; } /* .about gets the same, further down, after its own rules */
  .page-back { margin-bottom: 32px; }
  .work-grid { gap: 20px; }
  .work-filter { font-size: 0.85rem; padding: 7px 16px; }
}

.about {
  max-width: 1720px;
  margin: 0 auto;
  padding: 116px 56px 120px;
  color: var(--menu-ink);
}

.about__intro {
  display: grid;
  grid-template-columns: auto 1fr; /* photos first, then the words */
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

.about__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 28px;
}

.about__title em {
  font-style: italic;
}

.about p {
  max-width: 100%;
  font-size: 1.15rem;
  line-height: 1.75;
  margin: 0 0 20px;
}

/* Two snapshots, tilted and overlapping, as if dropped on the desk. */
.about__photos {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.about__photo {
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

.about__photo--one {
  width: 240px;
  height: 280px;
  transform: rotate(-6deg);
}

.about__photo--two {
  width: 240px;
  height: 215px;
  margin-left: -36px;
  transform: rotate(5deg);
  position: relative;
  z-index: 1;
}

.about__section {
  margin-bottom: 80px;
}

.about__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 32px;
}

/* The two roles sit side by side. */
.about__jobs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 900px) {
  .about__jobs {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.job {
  margin: 0;
}

.job__title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.job__title span {
  font-weight: 400;
  opacity: 0.85;
}

/* Scoped to .about so it beats the general paragraph rule above. */
.about .job__dates {
  font-size: 1rem;
  opacity: 0.5;
  margin: 0 0 16px;
}

.job__list {
  margin: 0;
  padding-left: 22px;
  font-size: 1.2rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .about__intro {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about__photos { justify-content: flex-start; }
}

@media (max-width: 640px) {
  /* Same side margin as the work page. It has to sit after the rules above,
     or the wider desktop padding would win and push the words off the screen. */
  .about { padding: 92px 24px 80px; }

  .about__intro { gap: 32px; }
  .about__intro > * { min-width: 0; } /* a photo can't stretch the column any more */

  /* The pair is sized against the screen, so it always fits with its tilt. */
  .about__photos { max-width: 100%; }

  .about__photo--one {
    width: 46%;
    height: auto;
    aspect-ratio: 6 / 7;
  }

  .about__photo--two {
    width: 46%;
    height: auto;
    aspect-ratio: 28 / 25;
    margin-left: -6%;
  }
}

/* ---------- the screen that covers the first load of the desk ---------- */

/*
  The drawings arrive one by one and shuffle into place, which looks messy, so
  the desk is kept behind this until they are all in. If scripting never runs,
  the animation below still takes the screen away after 14 seconds.
*/
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 24px;
  background: #575690;
  transition: opacity 0.5s ease, visibility 0.5s;
  animation: loader-give-up 0s linear 14s forwards;
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
}

/* display:flex above would otherwise beat the hidden attribute */
.loader[hidden] { display: none; }

@keyframes loader-give-up {
  to { opacity: 0; visibility: hidden; }
}

.loader__logo {
  width: min(300px, 58vw);
  height: auto;
  -webkit-user-drag: none;
}

/* A word about how the desk works, while there is time to read it. */
.loader__tips {
  width: min(780px, 88vw);
  text-align: center;
}

.loader__tips-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--menu-ink);
  opacity: 0.9;
}

.loader__tip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.loader__tip {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--menu-ink);
  opacity: 0.8;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
}

.loader__tip svg {
  flex: 0 0 auto;
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loader__bar {
  position: relative;
  width: min(520px, 76vw);
}

.loader__track {
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

/* Barber-pole stripes, drifting while you wait. */
.loader__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    -45deg,
    #ffffff 0 14px,
    var(--desk) 14px 28px
  );
  animation: loader-stripes 0.9s linear infinite;
  transition: width 0.35s ease;
}

@keyframes loader-stripes {
  to { background-position: -40px 0; }
}

.loader__note {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: translateX(-100%);
  color: var(--menu-ink);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: left 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .loader__fill { animation: none; }
}

@media (max-width: 640px) {
  .loader { gap: 24px; }
  .loader__logo { width: min(220px, 62vw); }
  .loader__track { height: 18px; }
  .loader__tips-title { font-size: 1.3rem; margin-bottom: 14px; }

  .loader__tip { font-size: 0.9rem; }

  .loader__tip svg { width: 22px; height: 22px; }
}

.scene-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--desk);
}

.scene {
  position: absolute;
  inset: 0;
  /* the parallax transform isolates blending, so the colour the shadows darken must live in here */
  background: var(--desk);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: transform 0.2s ease-out;
}

/*
  The desk fills the screen, but never crops into the drawing: it may lose at most
  15% of its width per side and 7% of its height per side (the drawing sits inside
  those margins). Past that it shrinks, and the flat desk colour fills the rest.
  The 3% extra covers the parallax drift.
*/
.scene__frame {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 3000 / 1850;
  width: min(
    max(103vw, calc(103vh * 1.6216)),
    calc(100vw / 0.7),
    calc(100vh * 1.6216 / 0.86)
  );
}

.desk-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.desk-line path {
  fill: none;
  stroke: #000;
  stroke-opacity: 0.45;
  stroke-width: 2.2;
}

/* Centred on the drawing, placed in canvas terms (y 326 on the 3000x1850 canvas) so it scales with the desk.
   It has to end above the wavy frame at y 554; the space above it is kept for the logo. */
.desk-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 19.2%;
  margin: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: var(--menu-ink);
  font-weight: 400; /* it is an h1, so the small lines would inherit bold */
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* The three lines write themselves onto the wall, one after another, when the page opens. */
.desk-title__line {
  opacity: 0;
  transform: translateY(10px);
  animation: wall-line-in 0.65s cubic-bezier(0.16, 0.8, 0.3, 1) both;
}

.desk-title__welcome { animation-delay: 0.1s; }
.desk-title__main    { animation-delay: 0.6s; }
.desk-title__sub     { animation-delay: 1.5s; }

/* The last line is typed out a character at a time by script.js, with a blinking caret. */
.desk-title__sub.is-typing::after {
  content: "|";
  margin-left: 1px;
  animation: caret-blink 0.75s steps(1, end) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

@keyframes wall-line-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .desk-title__line { animation: none; opacity: 1; transform: none; }
}

.desk-title__welcome {
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  letter-spacing: 0.02em;
}

.desk-title__main {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.9vw, 4.6rem);
  line-height: 1;
}

.desk-title__main em {
  font-style: italic;
}

/* Only the typing effect on this one - no fade, no rise. The height is held so the line
   doesn't jump into place once script.js empties it ready for typing. */
.desk-title__sub {
  margin-top: 2.2rem;
  min-height: 1.2em;
  font-size: clamp(0.85rem, 1.3vw, 1.25rem);
  animation: none;
  opacity: 1;
  transform: none;
}

/*
  Phone or tablet held upright: the desk shrinks to a band across the middle of the
  screen and the wall the lettering used to sit on goes with it. The three lines move
  into the clear space above the drawing, sized against the screen so they stay large
  without running into the frames or the cat.
*/
@media (max-width: 1024px) and (max-aspect-ratio: 13 / 10) {
  .desk-title {
    /* the desk's own size, repeated from .scene__frame so the text can follow it */
    --frame-w: min(
      max(103vw, calc(103vh * 1.6216)),
      calc(100vw / 0.7),
      calc(100vh * 1.6216 / 0.86)
    );
    --frame-h: calc(var(--frame-w) / 1.6216);

    position: fixed;
    top: auto;
    /* The cat's head starts a quarter of the way down the drawing; the lettering
       sits as low as it can and stops just above her. */
    bottom: calc(50vh + var(--frame-h) * 0.245 + 12px);
  }

  .desk-title__welcome { font-size: clamp(1.35rem, 4.6vw, 2rem); }
  .desk-title__main    { font-size: clamp(2.4rem, 8.6vw, 4rem); }

  .desk-title__sub {
    margin-top: clamp(1.4rem, 3.2vw, 2.2rem);
    font-size: clamp(0.95rem, 2.9vw, 1.35rem);
  }
}

/*
  Lying on its side, the drawing fills the screen instead, so there is no clear space
  to move into: the lettering stays on the wall and simply sits in front of everything,
  rather than disappearing behind the cat.
*/
@media (max-width: 1100px) and (min-aspect-ratio: 13 / 10) {
  .desk-title {
    top: 20%; /* clear of the logo above it */
    z-index: 3;
  }

  .desk-title__welcome { font-size: clamp(1.2rem, 2.8vh, 1.9rem); }
  .desk-title__main    { font-size: clamp(2.2rem, 6vh, 3.8rem); }

  .desk-title__sub {
    margin-top: clamp(1.1rem, 2.6vh, 2rem);
    font-size: clamp(0.9rem, 2vh, 1.3rem);
  }
}

.layer {
  position: absolute;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  z-index: 2; /* in front of the wall lettering */
}

/* The wall and its shadows sit behind the lettering; everything on the desk stays in front. */
.layer[data-layer="shadows"],
.layer[data-layer="back-things"] {
  z-index: 0;
}

.layer[data-layer="shadows"] {
  mix-blend-mode: var(--shadow-blend);
  opacity: var(--shadow-opacity);
}

.layer--glow {
  opacity: 0;
  filter: var(--glow);
  transition: opacity 0.25s ease;
}

.layer--glow[data-layer="wiserwork"],
.layer--glow[data-layer="portfolio"],
.layer--glow[data-layer="100mentors"] {
  filter: var(--glow-icon);
}

.layer--glow.is-lit {
  opacity: 1;
}

/* Invisible stand-ins over each object: the pointer is handled in script.js from the
   drawing itself; these carry the label and let the keyboard reach every object. */
.hotspot {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  pointer-events: none;
  z-index: 5;
}

.hotspot:focus-visible {
  outline: none;
}

.hotspot__label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hotspot.is-lit .hotspot__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
  .topbar { padding: 16px 24px; }
  .topbar__logo { height: 52px; }
  .desk-hint { display: none; }

  .nav-toggle { display: block; }

  /* The tabs and the icons leave the bar's top row and wait underneath it. */
  .site-nav,
  .social {
    grid-column: 1 / -1;
    justify-self: center;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease, visibility 0.3s;
  }

  .site-nav {
    grid-row: 2;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .social {
    grid-row: 3;
    gap: 26px;
    /* the panel clips what sticks out, so leave room for the hover lift */
    padding: 6px 0;
  }

  .site-nav__tab { font-size: 1.25rem; }
  .social svg { width: 24px; height: 24px; }

  /* Open, the bar becomes a panel in the deeper purple. */
  body.nav-open .topbar {
    background: #575690;
    border-radius: 0 0 28px 28px; /* softens the panel where it meets the page */
  }

  body.nav-open .site-nav,
  body.nav-open .social {
    max-height: 200px;
    opacity: 1;
    visibility: visible;
    margin-top: 44px;
  }

  body.nav-open .social {
    margin-top: 38px; /* 44 less the padding above */
    margin-bottom: 38px;
  }
}