/* A quieter visual system; the existing palette and layout remain. */
:root { --border: 2px solid var(--ink); --sh: 4px 4px 0 var(--ink); --sh-yel: 4px 4px 0 var(--yellow); }
body { font-family: 'Inter', system-ui, sans-serif; }
h1.hero-name, .hero-surname, h2.st, .contact-shout, .pcard-name,
.project-stat-value, .nav-logo { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; }
h1.hero-name { font-size: clamp(2.4rem, 10vw, 8rem); letter-spacing: -0.065em; line-height: 1; }
.hero-surname { letter-spacing: -0.05em; -webkit-text-stroke: 0; }
h2.st { font-size: clamp(2.3rem, 5.5vw, 4.5rem); letter-spacing: -0.045em; line-height: 1.06; }
h2.st em, #skills h2.st em { -webkit-text-stroke: 0; }
.contact-shout { font-size: clamp(2.2rem, 8vw, 7rem); letter-spacing: -0.055em; line-height: 1.04; }
.contact-shout em { -webkit-text-stroke: 0; }
.pcard-name { font-size: clamp(1.35rem, 2.5vw, 1.8rem); letter-spacing: -0.035em; }
.pcard-desc, .hero-desc, .panel-text, .contact-desc { font-weight: 400; }
.panel-text strong, .hero-desc strong { font-weight: 600; }
.nav-links a, .btn, .pcard-link, .pcard-visit-btn, .section-num,
.speech-bubble, .nav-badge, .panel-caption, .side-dot[title]::after, .mini-label, .mini-val, .chip,
.pcard-tag, .project-stat-label, .skill-tag, footer {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
}
.nav-links a { font-size: 0.78rem; letter-spacing: 0.04em; padding: 10px 16px; }
.nav-logo { font-size: 1.7rem; letter-spacing: -0.06em; transform: none; }
.nav-logo:hover { transform: none; }
.nav-links a:hover { color: var(--ink); }
.nav-badge { color: var(--ink); font-size: 0.65rem; letter-spacing: 0.06em; animation: none; }
.section-num { font-size: 0.68rem; letter-spacing: 0.12em; }
.btn { font-size: 0.85rem; letter-spacing: 0.04em; padding: 15px 24px; }
.btn-sm, .pcard-link { font-size: 0.75rem; letter-spacing: 0.04em; }
.pcard-visit-btn { font-size: 0.85rem; letter-spacing: 0.06em; }
.chip, .pcard-tag { font-size: 0.65rem; letter-spacing: 0.03em; }
.project-stat-label { font-size: 0.62rem; letter-spacing: 0.06em; }
.project-stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.mini-label { font-size: 0.65rem; letter-spacing: 0.1em; }
.mini-val { font-size: 1.35rem; letter-spacing: -0.03em; }
.skill-tag { font-size: 0.9rem; letter-spacing: 0.01em; border-width: 1px; padding: 12px 18px; }
footer { font-size: 0.7rem; letter-spacing: 0.05em; }
.speech-bubble { cursor: default; font-size: 0.68rem; letter-spacing: 0.06em; transform: none; box-shadow: none; padding: 10px 14px; }
.speech-bubble::before, .speech-bubble::after, h1.hero-name::before, h1.hero-name::after { display: none; }
.speech-bubble:hover, .speech-bubble:active { transform: none; box-shadow: none; }
#hero::before { background: radial-gradient(ellipse at 50% 45%, rgba(0,180,216,.06), transparent 65%); }
.hero-blob { animation: none; }
.hero-desc { box-shadow: none; border-width: 1px; }
.hero-desc:hover, .contact-desc:hover, .section-num:hover { transform: none; }
.pcard, .panel { border-width: 2px; }
.pcard, .mini-panel, .project-stat { box-shadow: 3px 3px 0 var(--ink); }
.pcard:hover { box-shadow: 3px 5px 0 var(--ink); }
@media (max-width: 600px) {
  .nav-links a { font-size: 0.62rem; letter-spacing: 0; padding-inline: 1px; }
  .nav-logo { font-size: 1.4rem; }
  .hero-btns .btn, .contact-btns .btn { font-size: 0.8rem; }
  .mini-val { font-size: 1.1rem; }
}

/* Each page scrolls internally. Only a group boundary changes the page. */
:root { --group-pages: 1; }
html.story-mode, .story-mode body { height: 100%; overflow: hidden; }
.story-mode #page-stage {
  position: fixed; inset: var(--nav-offset) 0 0;
  overflow: hidden; isolation: isolate; background: var(--ink);
}
.story-mode .page-group {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior-y: contain; scrollbar-gutter: stable;
  background: var(--paper); visibility: hidden; pointer-events: none; display: none;
  isolation: isolate; contain: paint; z-index: 0; overflow-anchor: none;
  scroll-behavior: auto;
}
.story-mode .page-group.is-active, .story-mode .page-group.is-visible { visibility: visible; display: block; }
.story-mode .page-group.is-active { pointer-events: auto; }
.story-mode.is-transitioning .page-group {
  pointer-events: none; overflow-y: hidden; will-change: clip-path, opacity;
}
.story-mode section[id] {
  min-height: calc(100svh - var(--nav-offset)); min-height: calc(100dvh - var(--nav-offset));
  display: flex; flex-direction: column; justify-content: center;
}
.story-mode #hero { align-items: center; padding-top: 48px; }
.story-mode #contact { align-items: center; }
.story-mode #contact > .reveal { width: min(100%, 1120px); }
.story-mode .tear { display: none; }
.story-mode [data-page-group="contact"] { background: var(--yellow); }
.story-mode .reveal, .story-mode .reveal-left, .story-mode .reveal-right,
.story-mode .hero-content > * { opacity: 1; transform: none; transition: none; animation: none; }

/* One reusable shutter surface; content remains stationary behind it. */
#page-transition {
  position: fixed; inset: var(--nav-offset, 80px) 0 0; z-index: 10002;
  display: none; grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden; pointer-events: none;
}
#page-transition.is-running { display: grid; }
#page-transition > span {
  background: var(--ink); transform: translateY(101%); margin-right: -1px;
  position: relative; will-change: transform;
}
#page-transition > span::after {
  content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--cyan);
}
.transition-defs { position: absolute; overflow: hidden; pointer-events: none; }
@media (max-width: 700px) {
  #page-transition { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #page-transition > span:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #page-transition.is-running { display: none; }
}