/* ==========================================================================
   Homepage in the Portavia layout (loaded after home.css). A floating pill
   for navigation; a hero with the role in giant capitals on both sides of
   the photo; About me with big accent numbers beside the ID badge; a contact
   block; and an accent footer band. The case study shelves and the artwork
   wall keep their own design; only their section titles follow this page.

   Type: section titles Antonio 700 capitals 60px; the hero words Antonio 700
   up to 120px; text Inter 300 18px; small text Inter 300 14px.
   Width: one column of 1120px, centered.
   ========================================================================== */

.pv {
  --pv-w: 1120px;
}
.pv .container,
.pv .pv-hero,
.pv .pv-about,
.pv .pv-contact {
  width: 100%;
  max-width: calc(var(--pv-w) + 2 * var(--gx));
  margin-inline: auto;
  padding-inline: var(--gx);
}
.pv-main .sections > section {
  padding-block: clamp(80px, 12vh, 140px);
}

/* ---- navigation: a floating pill --------------------------------------- */
.pv .pv-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 50;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  translate: -50% 0;
}
.pv-nav__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}
.pv-nav__me img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.pv-nav__links {
  display: flex;
  gap: 4px;
  padding-inline: 8px;
}
.pv-nav__links a {
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
}
.pv-nav__links a:hover,
.pv-nav__links a[aria-current] {
  color: var(--accent-text);
}
.pv-nav__cta {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--ink);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--bg);
  text-decoration: none;
}
.pv-nav__cta:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.pv-nav .cp-bar__end {
  gap: 4px;
}
.pv-nav .icon-button {
  width: 40px;
  height: 40px;
}
.pv-nav a:focus-visible,
.pv-nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* the phone menu button only on phones */
.pv-nav .menu-button {
  display: none;
}

/* ---- section titles (also on the case studies and artwork) ------------- */
.pv-h2,
.pv .doc-head__title {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}
.pv .doc-head {
  margin-bottom: 40px;
}
.pv .doc-head::before,
.pv .doc-head::after {
  content: none;
}
.pv .doc-head__title small {
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 300;
  vertical-align: super;
  color: var(--accent-text);
}
.pv-lede {
  max-width: 520px;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}

/* ---- hero ---------------------------------------------------------------- */
.pv-main .sections > .pv-hero {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: 120px 80px;
}
.pv-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px) minmax(0, 1fr);
  grid-template-areas:
    "name  photo .   "
    "w1    photo w2  "
    ".     photo lede";
  align-items: center;
  column-gap: clamp(16px, 2vw, 32px);
  width: 100%;
}
.pv-hero__name {
  grid-area: name;
  align-self: end;
  justify-self: end;
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(1.25rem, 0.9rem + 1vw, 2rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
}
.pv-hero__title {
  display: contents;
}
.pv-hero__w1,
.pv-hero__w2 {
  font-family: var(--heading-font);
  font-size: clamp(3.5rem, 1.5rem + 6.5vw, 7.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.pv-hero__w1 {
  grid-area: w1;
  justify-self: end;
}
.pv-hero__w2 {
  grid-area: w2;
  justify-self: start;
}
.pv-hero__photo {
  grid-area: photo;
  margin: 0;
}
.pv-hero__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 20px;
}
.pv-hero__lede {
  grid-area: lede;
  align-self: start;
  max-width: 340px;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}
/* the accent circle with the hand-drawn "hello", over the photo's corner */
.pv-hi {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--accent);
}
.pv-hi svg {
  width: 78%;
  height: auto;
}
.pv-hi path {
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pv-hero__grid > .pv-hi {
  grid-area: photo;
  align-self: end;
  justify-self: start;
  translate: -45% 30%;
}

/* ---- case studies: the shelves stay; only the title follows the page --- */
.pv .work .container,
.pv .artwork .container {
  max-width: calc(var(--pv-w) + 2 * var(--gx));
}

/* ---- about me ------------------------------------------------------------ */
.pv-main .sections > .pv-about {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.pv-about__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pv-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.pv-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 200px;
}
.pv-stats b {
  font-family: var(--heading-font);
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text);
}
.pv-stats span {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.pv-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 0;
}
.pv-info div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pv-info dt {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.pv-info dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
}
.pv-info a {
  color: inherit;
}
.pv-social {
  display: flex;
  gap: 16px;
  margin: 0;
}
.pv-social a,
.pv-footer__icons a {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--ink);
}
.pv-social svg,
.pv-footer__icons svg {
  width: 22px;
  height: 22px;
}
.pv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.pv-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--accent-text);
  border-radius: 999px;
  background: none;
  font-family: var(--heading-font);
  font-size: 1.375rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  cursor: pointer;
}
.pv-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.pv-btn--fill {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.pv-btn--quiet {
  border-color: var(--line);
  color: var(--ink);
}
.pv-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.pv-about__badge {
  display: grid;
  justify-items: center;
}

/* ---- contact ------------------------------------------------------------- */
.pv-main .sections > .pv-contact {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.pv-contact__photo {
  position: relative;
  margin: 0;
}
.pv-contact__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 20px;
}
.pv-contact__photo .pv-hi {
  position: absolute;
  left: 0;
  bottom: 0;
  translate: -35% 25%;
}
.pv-contact__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- footer: an accent band ---------------------------------------------- */
.pv-footer {
  margin-top: 40px;
  background: var(--accent);
  color: var(--on-accent);
}
.pv-footer__inner {
  max-width: calc(var(--pv-w) + 2 * var(--gx));
  margin-inline: auto;
  padding: 40px var(--gx) 32px;
}
.pv-footer__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px 48px;
}
.pv-footer__cols p {
  margin: 0 0 4px;
  font-size: 0.875rem;
  font-weight: 300;
}
.pv-footer a {
  font-size: 1.125rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
.pv-footer a:hover {
  text-decoration: underline;
}
.pv-footer__icons {
  display: flex;
  gap: 12px;
}
.pv-footer__icons a {
  color: inherit;
}
.pv-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--on-accent) 20%, transparent);
  font-size: 0.875rem;
}
.pv-footer__legal p {
  margin: 0;
}
.pv-footer__legal a {
  font-size: 0.875rem;
  font-weight: 400;
}

/* ---- phones and tablets -------------------------------------------------- */
@media (max-width: 860px) {
  .pv-nav__links,
  .pv-nav__cta {
    display: none;
  }
  .pv-nav .menu-button {
    display: inline-grid;
  }
  .pv-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "w1"
      "w2"
      "photo"
      "lede";
    row-gap: 8px;
    justify-items: start;
  }
  .pv-hero__name,
  .pv-hero__w1 {
    justify-self: start;
  }
  .pv-hero__photo {
    width: min(100%, 340px);
    margin-top: 16px;
  }
  .pv-hero__grid > .pv-hi {
    translate: -10% 30%;
    width: 96px;
    height: 96px;
  }
  .pv-hero__lede {
    margin-top: 40px;
  }
  .pv-main .sections > .pv-about,
  .pv-main .sections > .pv-contact {
    grid-template-columns: minmax(0, 1fr);
  }
  .pv-contact__photo {
    max-width: 300px;
  }
  .pv-contact__photo .pv-hi {
    width: 96px;
    height: 96px;
    translate: -10% 25%;
  }
}
/* the three numbers always share one row */
.pv-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.pv-stats li {
  max-width: none;
}

/* ---- hero without the photo: the name, the role in giant capitals with
   the accent "hello" beside it, one line about me, then the quick summary
   for recruiters right there ------------------------------------------- */
.pv-main .sections > .pv-hero {
  min-height: auto;
  padding-block: clamp(140px, 22vh, 220px) clamp(64px, 10vh, 120px);
  place-items: start;
}
.pv-hero__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.pv-hero .pv-hero__title {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(3.75rem, 1.5rem + 8vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.pv-hero__title .pv-hi {
  flex: none;
  width: clamp(80px, 9vw, 130px);
  height: clamp(80px, 9vw, 130px);
  rotate: -8deg;
}
.pv-hero .pv-hero__lede {
  max-width: 520px;
  margin: 8px 0 0;
}
.pv-hero__summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.pv-hero__note {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--muted);
}
@media (max-width: 860px) {
  .pv-hero .pv-hero__title {
    flex-wrap: wrap;
  }
}
.pv-hero__stack .pv-hero__name {
  align-self: flex-start;
}
/* the "md." mark at the start of the pill */
.pv-nav__me.bar-mark {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 40px;
  padding-inline: 8px;
  font-size: 1.375rem;
  text-decoration: none;
}

/* the pill spreads across the page like the old top bar: the mark on the
   left, the links in the middle, Contact and the buttons on the right */
.pv .pv-nav {
  left: 0;
  right: 0;
  translate: none;
  padding-inline: var(--gx);
}
.pv-nav__pill {
  justify-content: space-between;
  max-width: calc(var(--pv-w, 1120px) + 48px);
  margin-inline: auto;
  padding: 6px 6px 6px 12px;
}
.pv-nav__links {
  flex: 1;
  justify-content: center;
}
.pv-nav__right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pv-nav__me.bar-mark {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  line-height: 40px;
}

/* ==========================================================================
   About page, in the same system as the homepage
   ========================================================================== */
.pv-about-page .sections > .pv-about--top {
  padding-top: clamp(130px, 18vh, 180px);
}
.pv-h1 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: clamp(3.75rem, 1.5rem + 7vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.pv-name,
.pv-h3 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}
.pv .pv-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--pv-w) + 2 * var(--gx));
  margin-inline: auto;
  padding-inline: var(--gx);
}

/* skills: numbered rows that open, like Portavia's services */
.pv-accs {
  display: flex;
  flex-direction: column;
  max-width: 720px;
}
.pv-acc {
  border-bottom: 1px solid var(--line);
}
.pv-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.pv-acc > summary::-webkit-details-marker {
  display: none;
}
.pv-acc > summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent-text);
}
.pv-acc[open] > summary::after {
  content: "\2212";
}
.pv-acc h3 {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}
.pv-acc ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 0 20px 1.2em;
}
.pv-acc li {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}
.pv-acc li::marker {
  color: var(--accent-text);
}
.pv-acc > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* education and experience: by place, newest first */
.pv-chapters {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 16px;
}
.pv-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 8px 48px;
}
.pv-chapter__when {
  grid-column: 1;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--muted);
}
.pv-chapter__place {
  grid-column: 1;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}
.pv-chapter__intro {
  grid-column: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text);
}
.pv-chapter .pv-jobs {
  grid-column: 2;
  grid-row: 1 / span 3;
}
.pv-jobs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pv-job {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pv-job__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.pv-job__role {
  margin: 0;
  font-family: var(--body-font);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.pv-job__when {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--muted);
}
.pv-job__org {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-text);
}
.pv-job__desc {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text);
}
.pv-job__desc a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.pv-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.pv-two > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 860px) {
  .pv-chapter,
  .pv-two {
    grid-template-columns: minmax(0, 1fr);
  }
  .pv-chapter .pv-jobs {
    grid-column: 1;
    grid-row: auto;
    margin-top: 16px;
  }
}
/* the place, its dates and intro stay together at the top of the chapter */
.pv-chapter {
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
}
.pv-chapter .pv-jobs {
  grid-row: 1 / span 4;
}
@media (max-width: 860px) {
  .pv-chapter {
    grid-template-rows: none;
  }
  .pv-chapter .pv-jobs {
    grid-row: auto;
  }
}

/* the pause-motion button in the pill, on every page: pause while things
   move, play once they are paused; aria-pressed tells screen readers which */
.motion-toggle {
  color: var(--ink);
}
.motion-toggle .icon-play,
.motion-paused .motion-toggle .icon-pause {
  display: none;
}
.motion-paused .motion-toggle .icon-play {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .motion-toggle {
    display: none;
  }
}
/* paused: the ID badge stops swaying too */
:root.motion-paused .badge__swing {
  animation-play-state: paused !important;
}

/* ==========================================================================
   Nav links: on hover the word rolls up and the same word rises from
   underneath, pure CSS. The outer span is a one-line window; the inner
   span holds the word and, under it, its copy (::after, from data-text),
   and slides up one line. The page or section you are on is a filled
   pill in the accent, easy to spot.
   ========================================================================== */
.pv-nav__links a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.pv-nav__links .roll {
  display: block;
  height: 1.3em;
  overflow: hidden;
  line-height: 1.3;
}
.pv-nav__links .roll > span {
  display: grid;
  transition: translate 0.4s cubic-bezier(0.6, 0, 0.2, 1);
}
.pv-nav__links .roll > span::after {
  content: attr(data-text);
}
.pv-nav__links a:hover .roll > span,
.pv-nav__links a:focus-visible .roll > span {
  translate: 0 -1.3em;
}
.pv-nav__links a:hover {
  color: var(--accent-text);
}
.pv-nav__links a[aria-current],
.pv-nav__links a[aria-current]:hover {
  background: var(--accent);
  color: var(--on-accent);
}
@media (prefers-reduced-motion: reduce) {
  .pv-nav__links .roll > span {
    transition: none;
  }
}

/* the earlier hero, back under the pill bar: the name in its skill rings,
   then the quick summary for recruiters right under it */
.pv-main .sections > .hero {
  padding-block: 96px 48px;
}
.hero__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-inline: var(--gx);
  text-align: center;
}
.hero__summary .pv-actions {
  justify-content: center;
}
/* the summary sits clear of the rings, and above them */
.hero__summary {
  position: relative;
  z-index: 3;
  margin-top: clamp(56px, 9vh, 104px);
}
.hero__summary {
  margin-top: clamp(176px, 26vh, 260px);
}
@media (max-width: 860px) {
  .hero__summary {
    margin-top: 72px;
  }
}

/* the quick summary for recruiters: its own soft card under the name, the
   note on the left and the two buttons on the right */
.hero__summary {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  width: min(100% - 2 * var(--gx), 760px);
  margin-inline: auto;
  padding: 22px 22px 22px 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  text-align: left;
}
.hero__summary .pv-hero__note {
  flex: 1 1 260px;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}
.hero__summary .pv-actions {
  flex: none;
  justify-content: flex-end;
}
@media (max-width: 640px) {
  .hero__summary {
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
    text-align: center;
  }
  .hero__summary .pv-actions {
    justify-content: center;
  }
}

/* Artwork viewer: laid out like the case study picture viewer. The count
   sits top left and close top right, with previous and next on either side
   of the artwork (below it on phones). The bar's buttons join the dialog's
   grid directly. */
.pv .lightbox {
  height: 100dvh;
  padding: clamp(12px, 3vw, 24px);
  background: #08080a;
}
.pv .lightbox[open] {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "count . close"
    "prev  img next";
  gap: 12px clamp(8px, 2vw, 24px);
  place-items: center;
}
.pv .lightbox__bar {
  display: contents;
}
.pv .lightbox img {
  grid-area: img;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 0;
}
.pv .lightbox__count {
  grid-area: count;
  justify-self: start;
  min-width: 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.pv .lightbox [data-close] {
  grid-area: close;
  justify-self: end;
}
.pv .lightbox [data-step="-1"] {
  grid-area: prev;
}
.pv .lightbox [data-step="1"] {
  grid-area: next;
}
.pv .lightbox .icon-button {
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  color: #f2f2ee;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pv .lightbox .icon-button svg {
  width: 22px;
  height: 22px;
}
.pv .lightbox .icon-button:hover {
  border-color: #d0ff71;
  background: #d0ff71;
  color: #0b0b0c;
}
.pv .lightbox .icon-button:focus-visible {
  outline: 3px solid #d0ff71;
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .pv .lightbox[open] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "count close"
      "img   img"
      "prev  next";
  }
  .pv .lightbox [data-step="-1"] {
    justify-self: end;
  }
  .pv .lightbox [data-step="1"] {
    justify-self: start;
  }
}

/* A plain top bar instead of the floating pill: full width at the very
   top, the page colour with a hairline under it, and the content lined up
   with the page. */
.pv .pv-nav {
  top: 0;
  padding: 0 var(--gx);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.pv-nav__pill {
  min-height: 72px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Homepage: like Portavia, each section gets a screen to itself, with its
   content in the middle, so you see one section at a time. */
.pv-main:not(.pv-about-page) .sections > section:not(.hero) {
  min-height: 100svh;
  padding-block: clamp(120px, 18vh, 200px);
}
.pv-main:not(.pv-about-page) .sections > :is(.work, .artwork) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pv-main:not(.pv-about-page) .sections > :is(.work, .artwork) > * {
  width: 100%;
}
.pv-main:not(.pv-about-page) .sections > :is(.pv-about, .pv-contact) {
  align-content: center;
}

/* Tooltips for the pause and theme buttons: the label (aria-label, which
   site.js keeps current) appears under the button on hover or keyboard
   focus. It shares the button's grid cell and is moved down, so no
   absolute positioning; it lines up with the button's right edge, since the
   buttons sit at the right of the bar. */
:is(.motion-toggle, .theme-toggle) {
  display: grid;
  /* one cell the size of the button, so the wider label cannot stretch it
     and push the icon off centre */
  grid-template: 100% / 100%;
  place-items: center;
  overflow: visible;
}
:is(.motion-toggle, .theme-toggle) > svg {
  grid-area: 1 / 1;
}
:is(.motion-toggle, .theme-toggle)::after {
  content: attr(aria-label);
  grid-area: 1 / 1;
  align-self: end;
  justify-self: unsafe end;
  width: max-content;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--body-font);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: 0 calc(100% + 14px);
  transition: opacity 0.15s ease, translate 0.15s ease;
}
:is(.motion-toggle, .theme-toggle):is(:hover, :focus-visible)::after {
  opacity: 1;
  translate: 0 calc(100% + 8px);
}
@media (hover: none) {
  :is(.motion-toggle, .theme-toggle):hover:not(:focus-visible)::after {
    opacity: 0;
  }
}
/* the homepage's one-time motion tip sits below the full-width bar */
.pv .motion-tip {
  top: 84px;
}
/* the hidden labels must never widen the page */
.cp-bar {
  overflow-x: clip;
}