@font-face{font-family:Seasons;src:url('assets/fonts/TheSeasons-Bd.woff2') format('woff2');font-display:swap;font-weight:400 700}
@font-face{font-family:Script;src:url('assets/fonts/SloopScriptPro-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:Display;src:url('assets/fonts/BebasNeueCyrillic.woff2') format('woff2');font-display:swap}
@font-face{font-family:Spartan;src:url('assets/fonts/LeagueSpartan-Bold.woff2') format('woff2');font-display:swap}
:root{--paper:#f8f7f1;--ink:#51140d;--red:#aa1f0e}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:12px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Seasons,Georgia,serif}p,h1,h2,h3,ul{margin:0}h2,h3,strong{font-weight:400}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:5px}img{display:block;max-width:100%}.red{color:var(--red)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:10px;left:10px;z-index:50;padding:12px;background:var(--paper);transform:translateY(-160%)}.skip-link:focus{transform:none}
.page{position:relative;width:100%;max-width:1800px;margin:0 auto;aspect-ratio:1190.25/842.25;container-type:inline-size;overflow:hidden;font-size:1.6635cqw;line-height:1.4;letter-spacing:-.0075cqw}.placed{position:absolute}.page-title{position:absolute;inset:0 0 auto;z-index:2;pointer-events:none;line-height:0}.page-title svg{display:block;width:100%;height:auto;overflow:visible;font-kerning:none;font-variant-ligatures:none}.page p{text-wrap:pretty}.portrait{position:absolute;left:7.07%;top:29.87%;width:33.3%;height:62.8%;object-fit:cover}.about-intro{left:50%;top:8.2%;width:43.86%;text-align:justify}.hello{height:5.88cqw;display:flex;align-items:baseline;gap:.65cqw;text-align:left;white-space:nowrap}.hello strong{font:7.195cqw/1 Display,sans-serif;color:var(--red)}.about-study{left:42.42%;top:43.2%;width:44.9%}.about-life{left:50%;top:59.65%;width:43.86%;text-align:justify}.about-outro{right:1.04%;top:82.8%;width:44%;text-align:right}.timeline{position:absolute;left:15.65%;right:14.5%;top:41.5%;height:31%}.timeline-line{position:absolute;top:48.9%;left:0;width:100%;height:.28cqw;background:#111}.school{position:absolute;text-align:center;width:36%;color:var(--red);top:58.2%}.school h3{font:inherit}.school-first{left:-1.8%}.school-middle{left:31%;top:-1%;color:var(--ink)}.school-last{left:64.2%}.dot{position:absolute;left:50%;top:-2.45cqw;width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--red);transform:translateX(-50%)}.school-middle .dot{top:10.5cqw}.education-summary{left:7.07%;top:77.3%;width:85.86%;color:#080808;text-align:justify}.panxing-intro{left:68.16%;top:4.8%;width:29.67%;text-align:justify}.panxing-work{left:51.12%;top:41.1%;width:43.6%}.panxing-work>p{width:94%}.panxing-work ul{padding-left:2.8cqw;margin-top:2.5cqw;text-align:justify}.panxing-work li{padding-left:0}.panxing-devices{position:absolute;left:5.51%;top:43.3%;width:44.5%;height:54.9%}.monitor{position:relative}.monitor>img{width:100%;height:auto}.panxing-devices .monitor{width:91.1%}.monitor-screen{position:absolute;left:2.45%;top:3.05%;width:95.1%;height:69.5%;object-fit:cover;background:white}.phone{position:relative;padding:3.4% 4.3%;background:#080808;border:.17cqw solid #877cae;box-shadow:inset 0 0 0 .15cqw #ccc;border-radius:14% / 7%;aspect-ratio:540/1082}.phone video{width:100%;height:100%;display:block;object-fit:cover;border-radius:10% / 5%;background:white}.panxing-devices .phone{position:absolute;right:0;top:35.4%;width:28.6%;height:auto;padding:1.25% 1.7%}.project-intro{left:4.7%;top:33.45%;width:29.67%;text-align:justify}.gommoni-device{position:absolute;left:40.2%;top:38.4%;width:16.7%;padding:.55% .7%}.project-details{left:63.65%;top:7.55%;width:32.5%}.project-details p+p{margin-top:2.7cqw}.herencia .project-details{top:13.75%;width:33.6%}.herencia-concept{text-align:right}.herencia-role{color:#050505}.herencia-outro{text-align:center}.herencia .project-details p+p{margin-top:2.55cqw}.presentation{position:absolute;left:7.2%;top:54.5%;width:40.5%;transition:filter .2s}.presentation-label{position:absolute;left:2.45%;top:3.05%;width:95.1%;height:69.5%;display:flex;justify-content:center;align-items:center;font-family:Spartan,Arial,sans-serif;font-size:3.025cqw;color:#000}.presentation-hint{position:absolute;bottom:8%;font:1.1cqw/1.4 Seasons,serif;padding:.6em 1em;border-radius:20px;background:var(--paper);opacity:0;transform:translateY(5px);transition:.2s}.presentation:hover .presentation-hint,.presentation:focus-visible .presentation-hint{opacity:1;transform:none}.skills-art{position:absolute;left:6.67%;top:32.5%;width:22.67%;mix-blend-mode:normal}.skills-list{left:40.18%;top:9.45%;width:55.5%}.skills-list h3{font:inherit}.skills-list ul{padding-left:2.8cqw}.skills-list li{padding:0}.menu-toggle{position:fixed;right:18px;top:16px;z-index:30;width:38px;height:38px;padding:10px;border:1px solid #51140d25;border-radius:50%;background:#f8f7f1d9;backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;gap:5px}.menu-toggle span{height:1px;background:var(--ink);width:100%;transition:transform .25s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}nav{position:fixed;z-index:25;right:14px;top:64px;padding:24px 30px;background:#f8f7f1f5;border:1px solid #51140d22;box-shadow:0 12px 45px #51140d12;display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s;font-size:20px}nav.open{opacity:1;visibility:visible;transform:none}nav a:hover{color:var(--red);text-decoration:underline;text-underline-offset:4px}
/* Block native image dragging and touch save menus; gestures remain available. */
img, picture, svg[role="img"], .poster-art {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Transform and opacity animate without changing the PDF's final layout. */
.js-motion .reveal {
  --reveal-x: 0px;
  --reveal-y: 46px;
  --reveal-scale: 1;
  opacity: 0;
  transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale));
  transition: opacity 850ms ease, transform 1100ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: 0ms;
}
.js-motion .reveal[data-reveal="title"] { --reveal-x: -36px; --reveal-y: 24px; }
.js-motion .reveal[data-reveal="image"] { --reveal-y: 64px; --reveal-scale: .96; }
.js-motion .reveal[data-reveal="line"] { --reveal-y: 0px; --reveal-scale: .7; transform-origin: left center; }
.js-motion .reveal.visible {
  opacity: 1;
  transform: none;
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion .reveal:focus-within { opacity: 1; transform: none; transition-delay: 0ms; }
@media(max-width:900px) {
  .js-motion .reveal { --reveal-y: 32px; }
  .js-motion .reveal[data-reveal="image"] { --reveal-y: 44px; }
  .js-motion .reveal[data-reveal="title"] { --reveal-x: -20px; --reveal-y: 16px; }
}

@media(min-width:1800px){.page{font-size:29.94px}}
@media(max-width:600px){
 html{scroll-padding-top:20px}.page{aspect-ratio:auto;overflow:hidden;container-type:normal;font-size:18px;line-height:1.45;letter-spacing:normal;padding:30px 24px 55px;display:flex;flex-direction:column;gap:24px;min-height:0}.placed{position:static;width:auto!important;text-align:left}.page p{text-wrap:wrap}.page-title{position:relative;inset:auto;margin:-15px -24px -5px;flex:none;z-index:2}.page-title svg{width:100%;height:auto}.portrait{position:relative;left:auto;top:auto;width:72%;height:auto;aspect-ratio:3/4;object-fit:cover;margin-top:-25px}.about .page-title{order:0}.about .portrait{order:1}.about-intro{order:2}.about-study{order:3}.about-life{order:4}.about-outro{order:5}.hello{height:auto;display:flex;align-items:baseline;gap:8px;margin-bottom:12px}.hello strong{font-size:64px;line-height:1}.desktop-break{display:none}.timeline{position:relative;inset:auto;height:auto;margin:0 0 8px 8px;padding:8px 0 8px 26px;display:flex;flex-direction:column;gap:30px}.timeline-line{left:0;top:0;height:100%;width:2px}.school{position:relative;inset:auto;width:100%;text-align:left}.dot,.school-middle .dot{left:-26px;top:8px;width:10px;height:10px}.education-summary{color:#080808}.panxing-intro{order:1}.panxing-devices{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:530/580;order:2;margin-top:8px}.panxing-work{order:3}.panxing-work>p{width:auto}.panxing-work ul{padding-left:23px;margin-top:24px;text-align:left}.panxing-work li+li{margin-top:8px}.phone{border-width:2px}.panxing-devices .phone{top:34%;width:29%;padding:1.25% 1.7%}.panxing-devices{aspect-ratio:530/495}.project-intro{order:1}.gommoni-device{position:relative;inset:auto;width:56%;max-width:250px;align-self:center;padding:6px 8px;order:2}.project-details{order:3}.project-details p+p,.herencia .project-details p+p{margin-top:25px}.presentation{position:relative;inset:auto;width:100%;order:2}.presentation-label{font-size:27px}.presentation-hint{font-size:13px;opacity:1;transform:none}.herencia-concept,.herencia-outro{text-align:left}.skills-art{position:relative;inset:auto;width:52%;max-width:230px;margin-top:-20px}.skills-list ul{padding-left:23px;margin-bottom:20px}.skills-list h3{color:var(--red)}.skills-list li+li{margin-top:5px}.menu-toggle{right:12px;top:12px;width:34px;height:34px}.education .page-title{margin-bottom:6px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}}
@media(max-width:900px){.portrait{object-fit:cover}}

/* The pink rectangle is the entire opening section. */
.cover.hannah-poster {
  container-type: inline-size;
  display: block;
  width: 100%; max-width: none;
  height: max(820px, 100svh); min-height: 0; aspect-ratio: auto;
  margin: 0; padding: 0;
  overflow: hidden;
  color: #191b1a;
  background: #e79798 url('assets/images/pink-paper.webp') repeat;
  background-size: 150px 200px;
  letter-spacing: -.025em;
}
.poster-composition { position: absolute; inset: 0; }
.poster-art {
  position: absolute; left: 50%; top: 0;
  height: 100%; aspect-ratio: 736 / 1041;
  /* Translate via an independent property so reveal transforms stay separate. */
  translate: -50% 0;
  pointer-events: none;
}
.poster-name { position: absolute; left: 6%; top: 7%; font: clamp(28px, 2.6cqw, 44px)/1.1 Seasons, Georgia, serif; }
.poster-tagline { position: absolute; left: 6%; top: 12.5%; font: clamp(17px, 1.45cqw, 24px)/1.3 Seasons, Georgia, serif; }
.poster-film {
  position: absolute; left: 40.75%; top: 12.5%; width: 18.5%; height: 75%;
  display: grid; grid-template-rows: repeat(4, 1fr); gap: .65%;
  background: #e8dfcd;
  transform-origin: 50% 50%;
  animation: film-strip-sway 10s ease-in-out infinite;
}
.poster-film-frame { display: block; min-width: 0; min-height: 0; overflow: hidden; }
.poster-film img {
  width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 40%;
}
@keyframes film-strip-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.js-motion .poster-art:not(.visible) .poster-film { animation-play-state: paused; }
.poster-lettering { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.poster-contact {
  position: absolute; right: 5%; top: 48.5%; width: 28%;
  font: normal clamp(18px, 1.5cqw, 25px)/1.35 Seasons, Georgia, serif;
  text-align: right; letter-spacing: -.025em;
}
.poster-contact a { display: block; width: fit-content; max-width: 100%; margin-left: auto; padding: 8px 0; overflow-wrap: anywhere; }
.poster-bio {
  position: absolute; left: 6%; bottom: 7%; width: 23%; max-width: 330px;
  font: 500 clamp(18px, 1.35cqw, 23px)/1.3 Arial, sans-serif;
  letter-spacing: -.025em; text-align: left;
}
.poster-social { position: absolute; right: 5%; bottom: 19%; padding: 12px 0; font: clamp(21px, 1.8cqw, 30px)/1.2 Seasons, Georgia, serif; }
.hannah-poster a { z-index: 3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hannah-poster a:hover { opacity: .65; }
.hannah-poster a:focus-visible { outline: 2px solid #191b1a; outline-offset: 5px; }
@media(max-width:1100px) {
  .poster-composition { position: relative; inset: auto; }
  .cover.hannah-poster { height: auto; padding: 0 0 24px; }
  .poster-art { position: relative; top: auto; left: auto; translate: none; width: 100%; max-width: 736px; height: auto; margin: 0 auto; aspect-ratio: 736/1041; }
  .poster-name { left: 7%; top: 25px; font-size: clamp(21px, 3.3vw, 32px); z-index: 2; }
  .poster-tagline { left: 7%; top: 60px; width: 56%; font-size: clamp(13px, 1.9vw, 18px); z-index: 2; }
  .poster-bio { position: relative; left: auto; bottom: auto; width: auto; max-width: 650px; margin: 0 auto 24px; padding: 0 7%; font-size: 17px; line-height: 1.45; }
  .poster-contact { position: relative; right: auto; top: auto; width: auto; max-width: 650px; margin: 0 auto 24px; padding: 0 7%; text-align: left; font-size: 17px; }
  .poster-contact a { margin-left: 0; min-height: 44px; }
  .poster-social { position: relative; display: block; right: auto; bottom: auto; width: fit-content; margin: 0 7%; font-size: 20px; min-height: 44px; }
}

/* Keep the artwork proportional; use the full phone height for the surrounding copy. */
@media(max-width:900px) {
  .cover.hannah-poster {
    aspect-ratio: auto; height: 100svh; height: 100dvh;
    min-height: max(640px, 165cqw); padding: 0;
  }
  .poster-composition {
    position: absolute; inset: 0; translate: none;
    width: 100%; height: 100%; aspect-ratio: auto;
  }
  .poster-art {
    position: absolute; inset: auto 0; top: 50%; translate: 0 -50%;
    width: 100%; max-width: none; height: auto; aspect-ratio: 736 / 1041; margin: 0;
  }
  .poster-name { left: 10%; top: 6.4%; font-size: clamp(23px, 6cqw, 36px); }
  .poster-tagline { left: 10%; top: calc(6.4% + 8cqw); width: 76%; font-size: clamp(12px, 3.1cqw, 19px); }
  .poster-bio {
    position: absolute; left: 5%; top: auto; bottom: 6.4%;
    width: 31%; max-width: none; margin: 0; padding: 0;
    font-size: clamp(9.5px, 2.55cqw, 15px); line-height: 1.15; font-weight: 600;
  }
  .poster-contact {
    position: absolute; right: 3.8%; top: calc(50% + 27cqw); bottom: auto; width: 33%;
    max-width: none; margin: 0; padding: 0;
    font-size: clamp(11px, 2.85cqw, 17px); line-height: 1.3; text-align: right;
  }
  .poster-contact a { margin-left: auto; min-height: 0; padding: .2em 0; }
  .poster-social {
    position: absolute; right: 3.8%; top: auto; bottom: 5%;
    margin: 0; padding: .4em 0; min-height: 0; font-size: clamp(14px, 3.6cqw, 22px);
  }
  .hannah-poster a { text-decoration-thickness: .5px; text-underline-offset: 2px; }
}

/* Live slides inside the monitor; the expanded viewer uses the same controls. */
.presentation-viewer {
  position: absolute; left: 2.45%; top: 3.05%; width: 95.1%; height: 69.5%;
  display: flex; flex-direction: column; overflow: hidden; background: #161616; color: #f8f7f1;
  font: 13px/1.2 Arial, sans-serif; letter-spacing: normal;
}
.slide-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; place-items: center; touch-action: pan-y pinch-zoom; }
.slide-image { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.slide-toolbar { display: flex; align-items: center; flex: 0 0 38px; gap: 4px; padding: 2px 5px; background: #161616; }
.slide-toolbar[hidden], .slide-loading[hidden], .slide-error[hidden] { display: none; }
.slide-toolbar button, .slide-pdf {
  display: grid; place-items: center; min-width: 32px; height: 32px; padding: 4px 7px;
  border: 0; border-radius: 3px; background: transparent; color: inherit; font: 18px/1 Arial, sans-serif;
}
.slide-toolbar button:hover, .slide-pdf:hover { background: #ffffff22; }
.slide-toolbar button:disabled { opacity: .3; cursor: default; }
.slide-toolbar button:focus-visible, .slide-pdf:focus-visible, .slide-number:focus-visible { outline-color: #fff; outline-offset: -2px; }
.slide-toolbar-spacer { flex: 1; }
.slide-pagination { display: flex; align-items: center; gap: 3px; font-size: 12px; white-space: nowrap; }
.slide-number { width: 34px; border: 1px solid #ffffff33; border-radius: 3px; background: #ffffff12; color: inherit; padding: 5px 2px; text-align: center; font: inherit; appearance: textfield; }
.slide-number::-webkit-inner-spin-button, .slide-number::-webkit-outer-spin-button { appearance: none; margin: 0; }
.slide-pdf { font-size: 11px; white-space: nowrap; }
.slide-loading { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; padding: 7px 12px; border-radius: 20px; background: #161616dd; white-space: nowrap; font-size: 12px; }
.slide-error { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; background: #161616ee; text-align: center; padding: 12px; }
.slide-error button { padding: 8px 14px; border: 1px solid #ffffff66; border-radius: 4px; background: transparent; color: white; }
.slide-transcript { display: none; }
.slide-noscript { position: absolute; bottom: 0; padding: 8px; background: #161616; color: white; }
.presentation-dialog {
  width: 96vw; max-width: 1800px; height: 94dvh; max-height: 1100px; padding: 0; border: 1px solid #ffffff33;
  border-radius: 8px; background: #161616; color: white; overflow: hidden;
}
.presentation-dialog::backdrop { background: #160d0bef; backdrop-filter: blur(6px); }
.presentation-dialog .presentation-viewer { position: relative; inset: auto; width: 100%; height: 100%; }
.presentation-dialog .slide-toolbar { flex-basis: 52px; padding: 4px 14px; gap: 8px; }
.presentation-dialog .slide-toolbar button, .presentation-dialog .slide-pdf { min-width: 44px; height: 44px; }
.presentation-dialog .slide-pagination, .presentation-dialog .slide-pdf { font-size: 14px; }
.presentation-dialog .slide-transcript { display: block; flex: 0 0 auto; max-height: 24%; overflow: auto; padding: 8px 18px; border-top: 1px solid #ffffff22; font: 14px/1.5 Arial, sans-serif; }
.slide-transcript summary { cursor: pointer; }
.slide-transcript p { padding: 10px 0; white-space: pre-wrap; }
body.presentation-open { overflow: hidden; }
@media(max-width:600px) {
  .presentation-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .presentation-dialog .slide-toolbar { padding: 4px 6px; gap: 4px; }
}

/* Separate the editorial sections without changing their internal composition. */
main > .page + .page { margin-top: clamp(96px, 9vw, 160px); }
@media(max-width:900px) {
  main > .page + .page { margin-top: 64px; }
}


/* First visit: ink on pink paper, followed by the photobooth and editorial copy. */
.cover-intro-pending #home .reveal {
  transition: none;
}
.cover-intro-pending #home .poster-art {
  opacity: 1;
  transform: none;
}
.cover-intro-pending .poster-lettering path {
  visibility: hidden;
}
.cover-intro-pending .menu-toggle,
.cover-intro-pending #home .poster-film,
.cover-intro-pending #home .poster-composition > .reveal:not(.poster-art) {
  opacity: 0;
}
.cover-intro-running .poster-lettering path:not(.poster-ink-dot) {
  visibility: visible;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: write-portfolio var(--ink-duration) linear var(--ink-delay) both;
}
.cover-intro-running .poster-ink-dot {
  visibility: visible;
  transform-box: fill-box;
  transform-origin: center;
  animation: ink-dot 350ms ease-out 2600ms both;
}
.cover-intro-running #home .poster-film {
  animation: film-strip-sway 10s ease-in-out infinite,
             introduce-film 1000ms cubic-bezier(.16, 1, .3, 1) 2650ms both;
}
.cover-intro-running #home .poster-composition > .reveal:not(.poster-art) {
  animation: introduce-copy 850ms cubic-bezier(.16, 1, .3, 1) var(--intro-delay) both;
}
.cover-intro-running .menu-toggle {
  animation: introduce-copy 650ms ease-out 3650ms both;
}
@keyframes write-portfolio {
  /* Hide the round stroke caps while each letter is waiting to be drawn. */
  0% { opacity: 0; stroke-dashoffset: 1; }
  1% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes ink-dot { from { opacity: 0; } to { opacity: 1; } }
@keyframes introduce-film {
  from { opacity: 0; translate: 0 16px; clip-path: inset(0 0 12% 0); }
  to { opacity: 1; translate: 0 0; clip-path: inset(0); }
}
@keyframes introduce-copy {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media(prefers-reduced-motion:reduce) {
  .cover-intro-pending .poster-lettering path { visibility: visible; stroke-dashoffset: 0; }
  .cover-intro-pending .menu-toggle,
  .cover-intro-pending #home .poster-film,
  .cover-intro-pending #home .poster-composition > .reveal:not(.poster-art) { opacity: 1; transform: none; }
}


/* Tablet pages retain the PDF composition. Narrow project pages keep its
   left/right relationships, allowing text to determine the necessary height. */
@media(max-width:600px) {
  .page:is(.panxing, .gommoni, .herencia) {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: min-content min-content 1fr;
    align-items: start;
    gap: 22px 18px;
    padding: 24px 16px 36px;
    font-size: clamp(11px, 2.9vw, 16px);
    line-height: 1.4;
  }
  :is(.panxing, .gommoni, .herencia) .page-title {
    grid-column: 1; grid-row: 1;
    margin: 0 -6px; width: calc(100% + 12px);
  }
  :is(.gommoni, .herencia) .project-intro {
    grid-column: 1; grid-row: 2; margin: 0; text-align: left;
  }
  :is(.gommoni, .herencia) .project-details {
    grid-column: 2; grid-row: 1 / 4; margin: 0;
  }
  :is(.gommoni, .herencia) .project-details p + p { margin-top: 1.6em; }
  .gommoni-device {
    grid-column: 1; grid-row: 3;
    width: 62%; max-width: none; justify-self: center; align-self: start;
    padding: 3px 4px; border-width: 1px;
  }
  .herencia .presentation {
    grid-column: 1; grid-row: 3; width: 100%; margin: 0;
  }
  .page.panxing { grid-template-rows: min-content 1fr; }
  .panxing-intro { grid-column: 2; grid-row: 1; }
  .panxing-work { grid-column: 2; grid-row: 2; }
  .panxing-work ul { margin-top: 1.6em; padding-left: 1.1em; }
  .panxing-work li + li { margin-top: .6em; }
  .panxing-devices {
    grid-column: 1; grid-row: 2;
    width: 100%; margin: 0; aspect-ratio: 530 / 495;
  }
  .panxing-devices .phone { border-width: 1px; }
}

@media(max-width:700px) {
  .herencia .slide-toolbar { flex-basis: 30px; padding: 0 2px; gap: 0; }
  .herencia .slide-toolbar button { min-width: 30px; height: 30px; padding: 2px; font-size: 16px; }
  .herencia .slide-pagination, .herencia .slide-pdf { display: none; }
}

/* Text labels keep presentation controls consistent with the navigation. */
.slide-toolbar button { font-size: 11px; }
.herencia .slide-toolbar button { font-size: 10px; }
.presentation-dialog .slide-toolbar button { font-size: 14px; }