/* Everything after the face animation. Fonts and colours follow the
   reference portfolio: Bricolage Grotesque for display, Inter for body,
   Baskervville italic for the one emphasised word. */
:root {
  --page: #f1f8f8;
  --text: #2a2a2a;
  --muted: #777;
  --folio: #fff8f7;
  --lime: #d7f205;
  --sans: "Bricolage Grotesque", Inter, system-ui, -apple-system, sans-serif;
  --serif: "Baskervville", "Baskerville", Georgia, serif;
  --body: Inter, system-ui, -apple-system, sans-serif;
}

body { margin: 0; -webkit-tap-highlight-color: transparent; }
html.lb-lock, html.lb-lock body { overflow: hidden; }

.page { color: var(--text); }
/* The page starts one screen early, over the hero's last frame: the
   intro is transparent there, so it only shows once the mouth has filled
   the screen with the page colour, with no blank screen in between. */
.page { position: relative; z-index: 1; margin-top: -100svh; }
.aesthetics, .folders { background: var(--page); }
.rm .page { margin-top: 0; }   /* no reveal to wait for */
.page em, .foot em { font-family: var(--serif); font-style: italic; font-weight: 400; }

.wrap {
  max-width: 1196px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

.aes-card, .folder-art, .logo-card, .otr-tile, .folder-open {
  border: 0; padding: 0; background: none; font: inherit; color: inherit;
  cursor: zoom-in;
}
:is(.aes-card, .folder-art, .logo-card, .otr-tile, .folder-open):focus-visible {
  outline: 3px solid var(--text); outline-offset: 4px;
}

.sec-title {
  margin: 0;
  font: 500 32px/1.2 var(--sans);
  color: var(--text);
}
.sec-sub {
  margin: 8px 0 0;
  font: 400 14px/1.4 var(--body);
  color: var(--muted);
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  z-index: 50;
  top: clamp(12px, 2vw, 30px);
  left: 50%;
  display: flex;
  gap: 6px;
  padding: 8px;
  border-radius: 40px;
  background: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translate(-50%, -24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, transform .35s;
}
.nav.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.nav a {
  padding: 12px 26px;
  border-radius: 40px;
  background: #fff;
  color: var(--text);
  font: 400 16px/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
@media (hover: hover) { .nav a:not(.nav-mark):hover { background: #f6ffca; } }
.nav .nav-mark {
  display: flex; align-items: center;
  padding-top: 0; padding-bottom: 0;
  background: #024b53;                  /* the logo's own teal */
}
.nav .nav-mark img { display: block; width: auto; height: 34px; }
.nav a.on:not(.nav-mark) { background: #e5dcc8; font-weight: 600; }

/* ---------- always cr(eat)ing ---------- */

.intro { position: relative; box-sizing: border-box; min-height: 100svh; padding: clamp(110px, 20vh, 220px) 0 clamp(60px, 10vh, 120px); overflow: hidden; }
.intro .wrap, .intro .marquee { position: relative; z-index: 1; }

/* a short hello from Arshmeet under the band, set in from the left as
   the reference's intro is */
.hi-row { margin-top: clamp(50px, 9vh, 100px); }
.hi { max-width: 560px; margin-left: 32%; }
.hi-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.hi-pic { position: relative; flex: none; width: 92px; height: 92px; }
.hi-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; border-radius: 18px; }
.hi-pic i {
  position: absolute; right: -4px; bottom: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #6fd41a; border: 3px solid var(--page);
}
.hi-name { margin: 0 0 4px; font: 600 18px/1.2 var(--body); color: #000; }
.hi-role { margin: 0; font: 400 18px/1.2 var(--body); color: var(--muted); }
.hi-text { margin: 0; font: 400 18px/1.45 var(--body); letter-spacing: .01em; color: var(--text); }

/* images dropped along the cursor's path, as in the reference hero */
.trail-img {
  position: absolute;
  z-index: 2;
  top: 0; left: 0;
  width: clamp(120px, 12vw, 190px);
  height: auto;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.intro-title {
  margin: 0;
  font: 500 clamp(60px, 13vw, 196px)/.98 var(--sans);
  white-space: nowrap;
  letter-spacing: -0.035em;
  color: var(--text);
}
.intro-title .w { display: block; }
.intro-title em {
  display: inline-block;
  margin: 0 .02em;
  letter-spacing: -0.01em;
  transform-origin: 50% 80%;
}

.marquee {
  margin-top: clamp(50px, 9vh, 100px);
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  animation: slide 38s linear infinite;
}
.marquee span {
  font: 500 clamp(26px, 3vw, 40px)/1 var(--sans);
  color: var(--muted);
}
.marquee i {
  width: 12px; height: 12px;
  margin: 0 clamp(20px, 2.4vw, 34px);
  border-radius: 50%;
  background: #d9d9d9;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- other aesthetics ---------- */

.aes-pin {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 5vh, 50px);
  overflow: hidden;
}
.aes-head { width: 100%; }
.aes-strip {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  width: max-content;
  padding: 20px max(clamp(16px, 4vw, 40px), (100vw - 1196px) / 2 + 40px);
}
.aes-card {
  flex: none;
  height: min(62svh, 620px);
  transform: rotate(var(--r));
}
.aes-card img {
  display: block;
  height: 100%;
  width: auto;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(42, 42, 42, .16);
  transition: transform .3s;
}
@media (hover: hover) { .aes-card:hover img { transform: translateY(-8px); } }

/* ---------- folders ---------- */

.folders {
  --stick: 96px;               /* clears the fixed nav */
  --tabh: 52px;
  padding-top: clamp(40px, 8vh, 90px);
}
/* Each folder sticks under the nav, so the next one slides up over it.
   Every tab has its own slot along the row and the row itself is
   transparent, so the tabs of the folders underneath stay visible —
   a filing cabinet. */
.folder {
  position: sticky;
  top: var(--stick);
}
.folder-tabrow { height: var(--tabh); }
.folders-more { padding: clamp(50px, 9vh, 90px) clamp(16px, 4vw, 40px); background: var(--page); text-align: center; }
.folder-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  height: 100%;
  margin-left: calc(var(--tab) * 20%);
  border-radius: 20px 20px 0 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 clamp(12px, 1.3vw, 20px)/1 var(--sans);
  letter-spacing: .01em;
  white-space: nowrap;
}
.folder-body {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--stick) - var(--tabh));
  padding: clamp(24px, 5vh, 60px) 0;
  background: var(--bg);
}
.folder-body > .wrap { width: 100%; }
.folder-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 70px);
}

.folder-art {
  position: relative;
  justify-self: center;
  /* never taller than the space under the nav, so a stuck folder fits */
  width: min(100%, calc((100svh - var(--stick) - var(--tabh) - 150px) * 1.25));
  aspect-ratio: 5 / 4;
  perspective: 1400px;
  isolation: isolate;
}
.f-back {
  position: absolute;
  inset: 10% 2% 0 2%;
  z-index: 1;
  border-radius: 0 24px 24px 24px;
  background: color-mix(in srgb, var(--ink) 30%, var(--bg));
}
.f-back::before {
  content: "";
  position: absolute;
  left: 0; bottom: 100%;
  width: 36%; height: 13%;
  border-radius: 18px 18px 0 0;
  background: inherit;
}
.paper {
  position: absolute;
  z-index: 2;
  left: 24%;
  top: 4%;
  width: 52%;
  height: 80%;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.paper-2 { z-index: 3; }
.paper img { display: block; width: 100%; height: 100%; object-fit: cover; }
.f-front {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; bottom: 0;
  height: 56%;
  display: flex;
  align-items: flex-end;
  padding: clamp(16px, 2.4vw, 30px);
  border-radius: 20px 20px 24px 24px;
  background: color-mix(in srgb, var(--ink) 55%, var(--bg));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .12);
  transform-origin: 50% 100%;
}
.f-front span {
  font: 500 clamp(18px, 2vw, 28px)/1 var(--sans);
  color: var(--bg);
}

.folder-count { margin: 0 0 6px; font: 400 20px/1.3 var(--body); color: var(--muted); }
.folder-info h3 { margin: 0 0 12px; font: 500 clamp(28px, 2.6vw, 36px)/1.1 var(--sans); color: var(--text); }
.folder-text { margin: 0 0 18px; font: 400 clamp(17px, 1.4vw, 20px)/1.25 var(--body); letter-spacing: .01em; color: #000; }
.tags { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0 0 26px; padding: 0; list-style: none; }
.tags li {
  padding: 0 20px;
  border-left: 2px solid var(--ink);
  font: 400 16px/1.1 var(--body);
  letter-spacing: .01em;
  color: var(--ink);
}
.tags li:first-child { padding-left: 0; border-left: 0; }
.folder-open {
  font: 700 16px/1 var(--body);
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
}

/* ---------- logo folio ---------- */

.logos-folio { background: var(--folio); }
.logo-stage { position: relative; height: 100svh; overflow: hidden; }
.logo-label {
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font: 500 clamp(28px, 2.4vw, 36px)/.95 var(--sans);
  color: var(--text);
}
.logo-label span { display: block; }
.logo-label span:first-child { padding-left: 1.05em; }
.logo-card {
  position: absolute;
  z-index: 2;
  top: 0;
  --cw: clamp(130px, calc(var(--w) * 1vw), 320px);
  left: min(var(--x), calc(100% - var(--cw) - 12px));
  width: var(--cw);
  transform: translateY(110svh);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(42, 42, 42, .14);
  cursor: zoom-in;
}
.logo-card img { display: block; width: 100%; height: auto; }

/* ---------- off the record ---------- */

.off-record { background: #fff; padding: clamp(40px, 7vh, 60px) 0 60px; }
.otr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2.4vw, 30px);
  margin-top: 42px;
}
.otr-tile { aspect-ratio: 1; border-radius: 16px; overflow: hidden; }
.otr-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
@media (hover: hover) { .otr-tile:hover img { transform: scale(1.05); } }

/* ---------- footer ---------- */

.foot { background: var(--text); color: #fff; padding-bottom: 40px; }
.hello { overflow: hidden; padding: clamp(60px, 10vh, 90px) 0 clamp(40px, 7vh, 70px); }
.hello-track {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  animation: slide 24s linear infinite;
}
.hello span { font: 400 clamp(52px, 7.5vw, 110px)/1 var(--sans); margin-right: .3em; }
.hello em { font-size: clamp(66px, 9.5vw, 140px); line-height: 1; color: var(--lime); margin-right: .3em; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid #fff;
  border-radius: 12px;
  color: #fff;
  font: 500 clamp(16px, 1.6vw, 22px)/1 var(--sans);
  text-decoration: none;
  transition: background .2s, color .2s;
}
@media (hover: hover) { .foot-btn:hover { background: #fff; color: var(--text); } }
.foot-mark { font: 600 22px/1 var(--sans); letter-spacing: .02em; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.foot-icon { display: inline-flex; color: #fff; transition: transform .2s; }
@media (hover: hover) { .foot-icon:hover { transform: translateY(-3px); } }

/* ---------- shared bits for the inner pages ---------- */

.more-link {
  font: 700 18px/1 var(--body);
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}
.more-link span { display: inline-block; transition: transform .2s; }
@media (hover: hover) { .more-link:hover span { transform: translateX(5px); } }

/* arrow carousel (Off the Clock, her photos) */
.car { position: relative; overflow: hidden; }
.car-track { position: relative; width: 100%; height: 100%; }
.car-slide {
  position: absolute; inset: 0;
  border: 0; padding: 0; background: none; cursor: zoom-in;
  opacity: 0; transition: opacity .45s;
}
.car-slide.on { opacity: 1; z-index: 1; }
.car-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.car-nav {
  position: absolute; z-index: 2; left: 50%; bottom: 14px;
  display: flex; gap: 8px; transform: translateX(-50%);
}
.car-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  transition: background .2s;
}
@media (hover: hover) { .car-btn:hover { background: rgba(255, 255, 255, .8); color: var(--text); } }
.car-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.inner { padding-top: clamp(120px, 20vh, 200px); padding-bottom: clamp(80px, 14vh, 160px); }
.inner em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.inner-page .nav { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- work page ---------- */

.work-page { background: var(--page); color: var(--text); }
.work-title, .about-title {
  margin: 0;
  font: 500 clamp(44px, 5vw, 72px)/1.05 var(--sans);
  letter-spacing: -0.02em;
  color: #000;
}
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(16px, 2vw, 24px);
  margin-top: clamp(40px, 7vh, 70px);
}
.work-col { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 36px); }
.work-col:first-child { padding-top: clamp(60px, 7vw, 100px); }  /* the stagger */
.work-card {
  display: block;
  padding: 14px 14px 26px;
  border: 0; border-radius: 16px;
  background: var(--bg);
  color: inherit; font: inherit; text-align: left;
  cursor: zoom-in;
}
.work-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.work-shot { aspect-ratio: 256 / 208; border-radius: 12px; overflow: hidden; }
.work-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
@media (hover: hover) { .work-card:hover .work-shot img { transform: scale(1.04); } }
.work-meta { padding: 22px 4px 0; }
.work-meta .folder-count { font-size: 18px; }
.work-meta h2 { margin: 0 0 10px; font: 500 clamp(24px, 2vw, 30px)/1.15 var(--sans); color: var(--text); }
.work-meta .folder-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 18px;
}
.work-meta .tags { margin: 0; }
.work-meta .tags li { color: var(--text); border-left-color: var(--ink); }

/* ---------- about page ---------- */

.about-page { background: #fff; color: var(--text); }
.ab-top {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr auto;
  align-items: start;
  gap: 24px;
}
.ab-photo { aspect-ratio: 2 / 3; border-radius: 16px; }
/* her photos are shown whole, never cropped; the portrait frame fits the
   portrait shots exactly and the landscape one sits inside it */
.ab-photo .car-slide img { object-fit: contain; }
/* the uncropped frame can leave white around a photo, so its arrows
   need a dark tint to stay visible */
.ab-photo .car-btn { background: rgba(42, 42, 42, .45); }
.ab-photo img { filter: grayscale(1); transition: filter .5s; }
@media (hover: hover) { .ab-photo:hover img { filter: none; } }
.ab-where { margin: 0; font: 400 20px/1 var(--body); color: #000; word-spacing: .6em; }
.about-title { margin-top: clamp(60px, 11vh, 120px); font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.22; letter-spacing: -0.01em; color: var(--text); }
.ab-text { margin: 36px 0 0; font: 400 20px/1.4 var(--body); letter-spacing: .01em; color: #000; max-width: 70ch; }

.ab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: clamp(60px, 11vh, 120px);
}
.ab-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 16px;
  background: var(--bg);
}
.ab-card h2 { margin: 0; font: 400 32px/1.2 var(--sans); color: var(--text); }
.ab-card p { margin: 10px 0 0; font: 400 20px/1.4 var(--body); color: #000; }
.ab-media { order: -1; margin-bottom: 44px; border-radius: 16px; aspect-ratio: 526 / 398; }
.ab-card .ab-head { order: 0; }
.ab-card.globe h2 { order: -2; margin-bottom: 40px; }
.ab-card.globe .ab-media { order: -1; margin: 0; }
.ab-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ab-go {
  flex: none;
  display: grid; place-items: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--ink); color: #fff;
  transition: transform .25s;
}
@media (hover: hover) { .ab-go:hover { transform: scale(1.06) rotate(-8deg); } }

/* LinkedIn card: a little profile card */
.li-card {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px; border-radius: 16px;
  background: #0a66c2; color: #fff;
}
.li-card img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 4px solid #fff; }
.li-card b { display: block; margin-top: 16px; font: 600 26px/1.1 var(--sans); }
.li-card span { display: block; margin-top: 6px; font: 400 17px/1.3 var(--body); opacity: .85; }

/* Instagram card: a 3x3 feed of recent work */
.ig-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf 85%, #4f5bd5);
}
.ab-media.ig-grid { aspect-ratio: auto; }
.ig-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }

/* clients across the globe */
.globes { display: block; width: 100%; height: auto; border-radius: 16px; background: #f8cc85; }
.globes text { font-family: var(--body); }

/* ---------- lightbox ---------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 16px;
  background: rgba(20, 20, 20, .94);
}
.lb.open { display: grid; }
.lb-fig { margin: 0; display: flex; justify-content: center; }
.lb-fig img { max-width: 100%; max-height: 84svh; border-radius: 12px; }
.lb button {
  border: 0; background: none; color: #fff; cursor: pointer;
  font: 300 44px/1 var(--sans); padding: 10px 16px;
}
.lb-close { position: absolute; top: 12px; right: 14px; }
.lb.single .lb-nav { visibility: hidden; }
.lb-count {
  position: absolute; left: 0; right: 0; bottom: 14px; margin: 0;
  text-align: center; font: 400 14px/1 var(--body); color: #bbb;
}

/* ---------- reduced motion: everything shown in its settled state ---------- */

.rm .marquee-track, .rm .hello-track { animation: none; }
.rm .paper-0 { transform: translate(-40%, -2%) rotate(-12deg); }
.rm .paper-1 { transform: translate(40%, -6%) rotate(11deg); }
.rm .paper-2 { transform: translateY(-14%); }
.rm .f-front { transform: rotateX(-32deg); }
.rm .logo-stage {
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px;
  padding: 120px clamp(16px, 4vw, 40px) 80px;
}
.rm .logo-label { position: static; transform: none; grid-column: 1 / -1; justify-self: center; margin-bottom: 20px; }
.rm .logo-card { position: static; width: auto; transform: none; }

/* ---------- small screens ---------- */

@media (max-width: 809px) {
  .folder-grid { grid-template-columns: 1fr; }
  .folders { --stick: 64px; --tabh: 38px; }
  .folder-tab { width: 25%; margin-left: calc(var(--tab) * 25%); border-radius: 12px 12px 0 0; font-size: 13px; }
  .hi { margin-left: 0; }
  .folder-art { width: min(100%, calc((100svh - var(--stick) - var(--tabh) - 330px) * 1.25)); }
  .folder-info h3 { margin-bottom: 8px; }
  .folder-text { margin-bottom: 12px; font-size: 15px; }
  .tags { margin-bottom: 14px; }
  .folder-count { font-size: 16px; }
  .tags li { padding: 0 12px; font-size: 14px; }
  .otr-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-card { --cw: calc(var(--w) * 2.1vw); }
  .aes-card { height: min(54svh, 460px); }
}
@media (max-width: 540px) {
  /* thumb-sized tabs: at least 40px tall */
  .nav { gap: 3px; padding: 5px; max-width: calc(100vw - 24px); }
  .nav a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; font-size: 13px; }
  .nav .nav-mark img { height: 30px; }
  /* footer: email on its own line, the icons in a row under it */
  .foot-row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .foot-links { gap: 14px; }
  .foot-btn { flex-basis: 100%; justify-content: center; font-size: 17px; padding: 12px 14px; }
  .foot-links { width: 100%; }
  .foot-icon { padding: 4px; }
  /* viewer: the photo gets the full width, arrows float at the bottom */
  .lb { grid-template-columns: 1fr; padding: 56px 10px 70px; }
  .lb-nav { position: absolute; bottom: 8px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-count { bottom: 26px; }
}
@media (max-width: 359px) {
  .nav a { padding: 0 9px; font-size: 12px; }
  .nav .nav-mark img { height: 28px; }
}
@media (max-width: 809px) {
  .work-grid, .ab-grid { grid-template-columns: 1fr; }
  .work-col { display: contents; }   /* cards fall back into their own order */
  .work-grid { gap: 20px; }
  .ab-top { grid-template-columns: 1fr auto; }
  .ab-photo { grid-column: 1 / -1; max-width: 340px; }
  .ab-card { padding: 20px; }
  .ab-card h2 { font-size: 26px; }
  .ab-card p, .ab-text, .work-meta .folder-text { font-size: 17px; }
  .ab-go { width: 64px; height: 64px; }
}