/* Guy Gibson — Service Designer */
/* Identity: Quiet confidence. Every detail considered. */

:root {
  --bg: #FFFFFF;
  --text: #1A1A1A;
  --text-body: #444444;
  --text-light: #666666;
  --border: #E8E8E8;
  --soft: #F5F5F3;
  --focus: #2563EB;
  --accent: #1A1A1A;
  --font: 'Outfit', -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Outfit', sans-serif;
  --max-w: 820px;
  --gap: 1.25rem;
  --gap-section: 2rem;
}
[data-theme="dark"] {
  --bg: #141414;
  --text: #F0F0F0;
  --text-body: #B8B8B8;
  --text-light: #888888;
  --border: #2A2A2A;
  --soft: #1E1E1E;
  --focus: #60A5FA;
  --accent: #F0F0F0;
}
/* Color theme — Australian ochre: landscape, warmth, human-centered design, First Nations connection */
[data-color="ochre"] { --bg:#FFFBEB; --text:#713F12; --text-body:#92400E; --text-light:#B45309; --border:#FDE68A; --soft:#FEF3C7; --accent:#A16207; }
[data-theme="dark"][data-color="ochre"] { --bg:#1C1108; --text:#FEF3C7; --text-body:#FDE68A; --text-light:#D97706; --border:#713F12; --soft:#422006; --accent:#FBBF24; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
html.snap-scroll { scroll-snap-type: y mandatory; }
html.snap-scroll [id] { scroll-margin-top: 0; }
[id] { scroll-margin-top: 65px; }
body { font-family: var(--font); padding-bottom: env(safe-area-inset-bottom, 0px); color: var(--text-body); background: var(--bg); line-height: 1.75; overflow-x: hidden; opacity: 1; transition: opacity 0.25s ease, background 0.4s ease, color 0.4s ease; }
img { max-width: 100%; height: auto; display: block; }

/* Skip link */
.skip-link { position: absolute; top: -100%; left: 1rem; background: var(--text); color: var(--bg); padding: 0.5rem 1rem; font-size: 0.85rem; z-index: 200; border-radius: 0 0 4px 4px; text-decoration: none; }
.skip-link:focus { top: 0; }

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px;
}
/* High contrast mode */
@media (prefers-contrast: more) {
  :root { --text-body: #222222; --text-light: #444444; --border: #999999; }
  [data-theme="dark"] { --text-body: #E0E0E0; --text-light: #BBBBBB; --border: #666666; }
  .accent-word::after { height: 3px; }
}

/* ==================== */
/* TYPOGRAPHY           */
/* ==================== */
h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 12vw, 9rem); font-weight: 700; line-height: 1.0; letter-spacing: -0.05em; color: var(--text); }
h2 { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-light); margin-bottom: var(--gap); }
h3 { font-size: 1.25rem; font-weight: 500; color: var(--text); line-height: 1.4; margin-bottom: 0.3rem; }
h4 { font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
p { margin-bottom: 0.75rem; font-weight: 300; }
p:last-child { margin-bottom: 0; }
a { color: var(--text); }
strong, b { font-weight: 500; color: var(--text); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }

/* ==================== */
/* CUSTOM CURSOR         */
/* ==================== */
@media (pointer: fine) {
  html, body, * { cursor: none !important; }
  a, button, input, [role="button"] { cursor: none !important; }
  .cursor {
    position: fixed; top: 0; left: 0; z-index: 9999;
    pointer-events: none;
    transform: translate(-4px, -2px);
    transition: transform 0.15s ease, opacity 0.15s;
  }
  .cursor svg { width: 20px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); transition: transform 0.15s ease; }
  .cursor.hover-card svg { transform: scale(1.25); }
  .cursor.hover-link svg { transform: scale(1.15); }
  .cursor.clicking svg { transform: scale(0.85); }
}

/* Accent word — underline draws in to mark clarity */
.accent-word {
  color: var(--accent); transition: color 0.3s;
  position: relative; display: inline;
}
.accent-word::after {
  content: ''; position: absolute; left: 0; bottom: 0.04em;
  width: 0; height: 2px; background: var(--accent);
  transition: width 0.6s ease;
}
.accent-word.revealed::after { width: 100%; }
[data-theme="dark"] .accent-word { text-shadow: 0 0 20px rgba(240,240,240,0.3), 0 0 40px rgba(240,240,240,0.1); }
[data-theme="dark"][data-color="ochre"] .accent-word { text-shadow: 0 0 20px rgba(251,191,36,0.35), 0 0 40px rgba(251,191,36,0.15); }

/* ==================== */
/* GREETING ROTATOR      */
/* ==================== */
.greeting {
  font-size: 1.15rem; font-weight: 300;
  color: var(--accent); letter-spacing: 0.02em;
  height: 1.5em; overflow: hidden;
  font-style: italic;
  transition: opacity 0.3s ease;
}
.greeting.fading { opacity: 0; }
.greeting.typing::after {
  content: '|'; font-style: normal; font-weight: 300;
  color: var(--accent); margin-left: 1px;
  animation: blink 0.6s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ==================== */
/* KONAMI CONFETTI       */
/* ==================== */
.confetti-piece {
  position: fixed; width: 8px; height: 8px; z-index: 9998;
  pointer-events: none; border-radius: 1px;
  animation: confettiFall 1.5s ease-out forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ==================== */
/* KEYBOARD SHORTCUTS    */
/* ==================== */
.shortcuts-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.shortcuts-overlay.open { opacity: 1; pointer-events: auto; }
.shortcuts-panel {
  background: var(--bg); border-radius: 8px; padding: 2rem 2.5rem;
  max-width: 380px; width: 90%; border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
[data-theme="dark"] .shortcuts-panel { box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.shortcuts-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.2rem;
}
.shortcuts-panel h3 {
  font-size: 0.82rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text); margin: 0;
}
.shortcut-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.45rem 0; border-bottom: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 300; color: var(--text-body);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-key {
  display: inline-block; background: var(--soft); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.72rem;
  font-weight: 500; font-family: var(--font); color: var(--text); min-width: 1.8rem;
  text-align: center;
}

/* Pull quote followed by subsection gets extra breathing room */
.pq + .cs-text { margin-top: calc(var(--gap) * 2.5) !important; }

/* ==================== */
/* READING PROGRESS BAR  */
/* ==================== */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 200;
  background: var(--accent); width: 0%;
  transition: width 0.05s linear;
  pointer-events: none;
}

/* ==================== */
/* SCROLL TO TOP         */
/* ==================== */
.scroll-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 150;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--soft); border: 1px solid var(--border);
  color: var(--text-light); font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  transform: translateY(8px);
}
.scroll-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.scroll-top:hover { background: var(--border); color: var(--text); }
.scroll-top.spinning { animation: spinUp 0.5s ease; }
@keyframes spinUp { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@media (pointer: fine) { .scroll-top { cursor: none !important; } }

/* ==================== */
/* ACCENT COLOR PICKER   */
/* ==================== */
.accent-picker {
  display: flex; gap: 10px; align-items: center;
}
.nav-divider {
  width: 1px; height: 16px; background: var(--border);
  flex-shrink: 0;
}
.accent-dot {
  width: 12px; height: 12px; border-radius: 50%; border: none;
  transition: transform 0.2s, box-shadow 0.2s;
  background: var(--dot-color); position: relative;
}
.accent-dot:hover { transform: scale(1.3); }
@media (hover: none) { .accent-dot:hover { transform: none; } }
.accent-dot.active { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--dot-color); }
.accent-dot::after {
  content: attr(aria-label); position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  font-size: 0.6rem; font-family: var(--font); font-weight: 400;
  color: var(--text-light); letter-spacing: 0.02em;
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.15rem 0.45rem;
  opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 10;
}
.accent-dot:hover::after { opacity: 1; }
@media (pointer: fine) { .accent-dot { cursor: none !important; } }

/* ==================== */
/* NAV — shrinks on scroll*/
/* ==================== */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--bg); backdrop-filter: blur(12px); transition: background 0.3s, height 0.3s, box-shadow 0.3s; }
nav .container { display: flex; justify-content: space-between; align-items: center; height: 55px; border-bottom: 1px solid var(--border); transition: height 0.3s; }
nav.scrolled .container { height: 46px; }
nav.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
[data-theme="dark"] nav.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.2); }

/* ==================== */
/* PAGE TRANSITIONS      */
/* ==================== */
body.fade-out { opacity: 0; }

/* ==================== */
/* NAV LINKS             */
/* ==================== */
.nav-name { font-weight: 600; font-size: 0.85rem; text-decoration: none; color: var(--text); letter-spacing: 0.02em; transition: opacity 0.25s; }
.nav-name:hover { opacity: 0.6; }
.nav-links { display: flex; gap: 1.8rem; align-items: center; flex-shrink: 0; }
.nav-links a {
  font-size: 0.78rem; font-weight: 400; color: var(--text-light);
  text-decoration: none; letter-spacing: 0.01em;
  position: relative; transition: color 0.25s, transform 0.2s ease-out;
  display: inline-block;
}
.nav-links a::after {
  content: ''; position: absolute; left: 50%; bottom: -2px;
  width: 0; height: 1px; background: var(--text);
  transition: width 0.3s ease, left 0.3s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { width: 100%; left: 0; }
.nav-links a:hover::after { width: 100%; left: 0; }

/* Dark toggle */
.shortcuts-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--text-light); transition: color 0.25s, border-color 0.25s;
  font-size: 0.75rem; font-weight: 500; font-family: var(--font); line-height: 1; padding: 0;
}
.shortcuts-btn:hover { color: var(--text); border-color: var(--text-light); }
.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--text-light); transition: color 0.25s, border-color 0.25s;
  font-size: 0.8rem; line-height: 1; padding: 0;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-light); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ==================== */
/* HERO — full viewport  */
/* ==================== */
.hero-full {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding-top: calc(55px + 1rem);
  padding-bottom: calc(2rem + 48px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hero-full .container { text-align: center; }

/* Constellation — living network of drifting connected dots */
.dot-field {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden;
}
.dot-field canvas { display: block; }
.dot-field i {
  position: absolute; width: 4px; height: 4px;
  background: var(--accent); border-radius: 50%;
  opacity: 0.5; left: 0; top: 0;
  will-change: transform;
}
.hero-inner {
  position: relative; z-index: 2; display: inline-block; text-align: left;
  will-change: transform, opacity;
}

/* Greeting */
.hero-full .greeting {
  font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
  display: block;
}

/* Headline */
.hero-full h1 {
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  line-height: 1.18; letter-spacing: -0.035em;
  margin-bottom: 0;
  animation: fadeUp 0.6s ease both;
}

/* Scroll hint — hero version (absolute) */
.hero-full .scroll-hint {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
/* Persistent scroll hint — subtle chevron between snap sections */
.scroll-persist {
  position: fixed; bottom: 1.2rem; left: 50%;
  transform: translateX(-50%); z-index: 90;
  opacity: 0; transition: opacity 0.5s;
  pointer-events: none;
}
.scroll-persist.visible { opacity: 0.4; }
.scroll-persist svg {
  width: 26px; height: 14px;
  stroke: var(--accent); stroke-width: 1.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  animation: chevronBob 2s ease-in-out infinite;
}
@keyframes chevronBob {
  0%,100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(5px); opacity: 0.8; }
}
.scroll-mouse {
  width: 22px; height: 34px;
  border: 1.5px solid var(--text-light);
  border-radius: 11px; opacity: 0.3;
  position: relative;
}
.scroll-mouse::after {
  content: ''; display: block; width: 2.5px; height: 6px;
  background: var(--accent); border-radius: 2px;
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.8; }
  50% { transform: translateX(-50%) translateY(10px); opacity: 0.2; }
}
.scroll-label {
  font-size: 0.55rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--text-light); opacity: 0.3;
}

/* ==================== */
/* INTRO — full viewport */
/* ==================== */
.intro-full {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-top: 55px;
}
.intro-inner { max-width: 620px; }
.intro-text {
  font-size: 1.35rem; color: var(--text-light); font-weight: 300;
  line-height: 1.7; margin-bottom: 2rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease, color 1.2s ease;
}
.intro-text.visible { opacity: 1; transform: none; color: var(--text-body); }
.intro-line {
  width: 40px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s ease 0.3s;
}
.intro-text.visible + .intro-line { transform: scaleX(1); }

/* Entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== */
/* PROJECT CARDS         */
/* ==================== */
.projects { counter-reset: project; }
.projects > .container > h2 {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
  color: var(--text); margin-bottom: var(--gap-section);
}

.project-card {
  perspective: 900px;
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; color: var(--text);
  counter-increment: project; position: relative;
  min-height: 100vh; min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  padding-top: 55px;
  box-sizing: border-box;
}
.project-card:last-child { margin-bottom: 0; }
.project-card .card-img {
  width: 100%; border-radius: 5px; transform-origin: center center;
  opacity: 0; transition: opacity 0.4s ease, transform 0.6s ease, filter 0.6s ease;
  will-change: transform;
}
.project-card .card-img.blur-load { filter: blur(8px); transform: scale(1.02); }
.project-card .card-img.loaded { opacity: 1; filter: blur(0); transform: scale(1); }
.project-card:hover .card-img.loaded { transform: scale(1.015); }
.project-card .card-tags {
  font-size: 0.78rem; font-weight: 400; color: var(--text-light);
  margin-top: 0.2rem; margin-bottom: 0.5rem; letter-spacing: 0.01em;
}
.project-card .card-tags::before {
  content: counter(project, decimal-leading-zero) " — ";
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.project-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; margin-top: 1.2rem; margin-bottom: 0.15rem; transition: letter-spacing 0.3s; }
.project-card:hover h3 { letter-spacing: 0.03em; }
.project-card .card-desc { color: var(--text-body); font-size: 0.95rem; font-weight: 300; margin-bottom: 0.8rem; line-height: 1.65; }
.project-card .card-cta {
  font-size: 0.78rem; font-weight: 600; color: var(--text);
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: gap 0.3s ease;
}
.project-card .card-cta .cta-text {
  position: relative;
}
.project-card .card-cta .cta-text::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--accent);
  transition: width 0.4s ease;
}
.project-card:hover .card-cta { gap: 0.7rem; }
.project-card:hover .card-cta .cta-text::after { width: 100%; }

/* ==================== */
/* 16:9 MEDIA FRAME      */
/* ==================== */
.project-media {
  width: 100%; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: transparent; border-radius: 5px;
}
.project-media img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center center;
  display: block; opacity: 0; transition: opacity 0.4s ease;
}
.project-media img.blur-load { filter: blur(8px); transform: scale(1.02); }
.project-media img.loaded { opacity: 1; filter: blur(0); }

.project-media.shift-lofi img { transform: translate(-1.2%, -3.6%); }
.project-media.shift-olympic-hero img { transform: translate(-0.25%, -11.6%); }
.project-media.shift-parent-hero img { transform: translate(-1.2%, -12.4%); }
.project-media.photo img { object-fit: cover; }
.project-media.padded { padding: 1rem; border-radius: 6px; }

/* ==================== */
/* CASE STUDY HERO       */
/* ==================== */
.case-hero { padding: 100px 0 0; }
.case-hero h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 0.6rem; font-size: 2.6rem; animation: fadeUp 0.5s ease both; }
.case-hero .case-desc { font-size: 1.05rem; color: var(--text-body); font-weight: 300; margin-bottom: 0.5rem; line-height: 1.7; animation: fadeUp 0.5s ease 0.1s both; }
.reading-time { font-size: 0.75rem; font-weight: 500; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--gap); }
.case-meta { display: flex; gap: 3rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.meta-item .meta-label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-light); margin-bottom: 0.1rem; }
.meta-item p { font-size: 0.875rem; color: var(--text-body); font-weight: 300; margin: 0; }

/* ==================== */
/* SECTIONS + UNIFORM    */
/* ==================== */
.cs { padding: var(--gap-section) 0; }
.cs .container > * + * { margin-top: var(--gap); }
.cs .container > h2 {
  margin-top: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Extra breathing room before chapter headings when following content */
.cs .container > * + h2 { margin-top: calc(var(--gap) * 4.5); }
.cs .container > h2 + * { margin-top: 0; }

/* Process subsection dividers */
.cs-text h3 { margin-top: calc(var(--gap) * 1.5); padding-top: calc(var(--gap) * 0.8); border-top: 1px solid var(--border); }
.cs-text h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Stats */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-item { text-align: left; }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--text); display: block; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-desc { font-size: 0.875rem; color: var(--text-light); font-weight: 300; max-width: 200px; margin-top: 0.15rem; line-height: 1.5; }

/* ==================== */
/* HIGHLIGHT BOXES       */
/* ==================== */
.highlight-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.highlight-box {
  background: var(--soft); padding: 1.1rem; border-radius: 4px;
  border-left: 2px solid transparent;
  transition: border-color 0.3s ease;
}
.highlight-box:hover { border-left-color: var(--accent); }
.highlight-box h3 { font-size: 0.9375rem; margin-bottom: 0.2rem; font-weight: 600; }
.highlight-box p { font-size: 0.875rem; color: var(--text-body); margin: 0; line-height: 1.6; font-weight: 300; }

/* ==================== */
/* PULL QUOTE — editorial*/
/* ==================== */
.pq {
  font-size: 1.2rem; font-weight: 400; font-style: italic;
  line-height: 1.55; color: var(--text); padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--accent);
}

/* ==================== */
/* FEATURE BLOCKS        */
/* ==================== */
.feat + .feat { margin-top: calc(var(--gap) * 1.3); }
.feat h3 { font-size: 1rem; margin-bottom: 0.25rem; font-weight: 600; }
.feat p { font-size: 1rem; font-weight: 300; line-height: 1.7; }
.feat .project-media { margin-top: 0.5rem; }

/* ==================== */
/* FINDINGS LIST         */
/* ==================== */
.find-list { list-style: none; padding: 0; }
.find-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; font-weight: 300; line-height: 1.6; }
.find-list li strong { font-weight: 500; }
.find-list li:last-child { border-bottom: none; }

/* SUS */
.sus { display: inline-flex; align-items: center; gap: 1rem; padding: 1.1rem 1.6rem; background: var(--soft); border-radius: 4px; }
.sus-num { font-size: 2.6rem; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sus-text { font-size: 0.875rem; color: var(--text-light); line-height: 1.5; font-weight: 300; }

/* ==================== */
/* NEXT PROJECT          */
/* ==================== */
.next { padding: var(--gap-section) 0; border-top: 1px solid var(--border); }
.next .next-label { font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-light); margin-bottom: 0.2rem; }
.next a {
  font-size: 1.05rem; font-weight: 600; text-decoration: none;
  color: var(--text); letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 0.3rem;
  transition: gap 0.3s ease;
}
.next a:hover { gap: 0.6rem; }

/* ==================== */
/* ABOUT                 */
/* ==================== */
.about { padding: 0 0 calc(var(--gap-section) * 2); padding-top: calc(55px + 5rem); background: var(--bg); position: relative; z-index: 1; scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
.about::before {
  content: ''; display: block; position: absolute;
  top: calc(55px + 1rem); left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 4rem), var(--max-w));
  height: 1px; background: var(--border);
}
.about .container > * + * { margin-top: var(--gap); }
.about .container > h2 + * { margin-top: 0; }
.about-bio { font-size: 1rem; font-weight: 300; line-height: 1.75; color: var(--text-body); margin-bottom: 0; margin-top: 0; }

/* About intro: bio + education side-by-side on desktop */
.about-intro {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--gap) * 4);
  margin-bottom: calc(var(--gap) * 3);
}

.about-bio {
  flex: 3;
  min-width: 0;
  align-self: center;
}

.edu {
  flex: 2;
  min-width: 0;
}

/* About section title */
.about .container > h2:first-child {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--gap);
}
.skill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: calc(var(--gap) * 2.5);
  margin-top: 0;
}

.skill-col {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-items: start;
  padding: 0 calc(var(--gap) * 1.75);
  border-right: 1px solid var(--border);
}

.skill-col:first-child { padding-left: 0; }
.skill-col:last-child  { border-right: none; padding-right: 0; }


/* Children align to top of their row — don't stretch */
.skill-col h2,
.skill-desc,
.skill-col ul { align-self: start; }
.skill-col h2 {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 0.75rem;
  line-height: 1.3;
  align-self: start;
}
.skill-desc { font-size: 0.8rem; color: var(--text-light); font-weight: 300; font-style: italic; line-height: 1.65; margin-bottom: 1rem; }
.skill-col ul { list-style: none; padding-top: 0.15rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.skill-col li {
  font-size: 0.75rem; color: var(--text-body); font-weight: 400;
  line-height: 1; padding: 0.4rem 0.7rem;
  background: var(--soft); border-radius: 3px;
}
.edu {
  padding-left: calc(var(--gap) * 1.5);
  border-left: 2px solid var(--border);
}
.edu p { font-size: 0.875rem; color: var(--text-body); font-weight: 300; }

/* Education heading */
.edu h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: calc(var(--gap) * 0.75);
}
/* CV download link */
.cv-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: calc(var(--gap) * 1.25);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--text);
  padding-bottom: 1px;
  transition: opacity 0.2s;
}

.cv-link:hover { opacity: 0.5; }

[data-theme="dark"] .cv-link { color: var(--text); border-bottom-color: var(--text); }


/* ==================== */
/* CONTACT               */
/* ==================== */
.contact { text-align: center; scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; min-height: 100dvh; padding: 55px 0 0; box-sizing: border-box; display: flex; flex-direction: column; }
.contact h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; font-family: var(--font-display);
  letter-spacing: -0.03em; text-transform: none; color: var(--text); margin-bottom: 0.8rem; }
.contact p { font-size: 1rem; color: var(--text-body); font-weight: 300; margin-bottom: 1.2rem; }
.contact a {
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase;
  position: relative; padding-bottom: 3px;
  transition: color 0.25s;
}
.contact a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s ease;
}
.contact a:hover::after { transform: scaleX(1); transform-origin: left; }
.contact a:hover { letter-spacing: 0.14em; }

/* ==================== */
/* FOOTER                */
/* ==================== */
.contact > .container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.contact > footer { margin-top: auto; width: 100%; align-self: stretch; }
footer { padding: 1.5rem 0; border-top: 1px solid var(--border); }
footer .container { display: flex; justify-content: space-between; align-items: center; }
footer p { font-size: 0.72rem; color: var(--text-light); font-weight: 300; margin: 0; }
footer a { color: var(--text-body); text-decoration: none; font-weight: 400; position: relative; transition: color 0.25s; }
footer a::after {
  content: ''; position: absolute; left: 50%; bottom: -1px;
  width: 0; height: 1px; background: var(--text);
  transition: width 0.3s ease, left 0.3s ease;
}
footer a:hover { color: var(--text); }
footer a:hover::after { width: 100%; left: 0; }
.footer-hand { transition: opacity 0.3s; opacity: 0; font-style: normal; }
footer p:last-child:hover .footer-hand { opacity: 1; }

/* ==================== */
/* CUSTOM SELECTION      */
/* ==================== */
::selection { background: var(--accent); color: var(--bg); }

/* ==================== */
/* SCROLL REVEAL         */
/* ==================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}


/* Staggered card reveal — elements cascade into view */
.project-card.reveal { transform: none; transition: opacity 0.4s ease; }
.project-card.reveal > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.project-card.reveal.visible > * { opacity: 1; transform: none; }
.project-card.reveal.visible > :nth-child(1) { transition-delay: 0.05s; }
.project-card.reveal.visible > :nth-child(2) { transition-delay: 0.12s; }
.project-card.reveal.visible > :nth-child(3) { transition-delay: 0.19s; }
.project-card.reveal.visible > :nth-child(4) { transition-delay: 0.26s; }
.project-card.reveal.visible > :nth-child(5) { transition-delay: 0.33s; }
.a11y-motion .project-card.reveal > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Stagger children inside highlight rows and find lists */
.highlight-row .highlight-box { transition-delay: calc(var(--i, 0) * 0.1s); }
.find-list li { transition-delay: calc(var(--i, 0) * 0.05s); }

/* Stat row items stagger */
.stat-row .stat-item { transition-delay: calc(var(--i, 0) * 0.12s); }

/* ==================== */
/* ACCESSIBILITY         */
/* ==================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (pointer: coarse) {
  .nav-links a { padding: 0.6rem 0; min-height: 44px; display: inline-flex; align-items: center; }
  footer a { padding: 0.4rem 0; min-height: 44px; display: inline-flex; align-items: center; }
  .next a { padding: 0.5rem 0; min-height: 44px; display: inline-flex; align-items: center; }
  .a11y-row { padding: 0.8rem 0; min-height: 44px; }
}

/* ==================== */
/* RESPONSIVE            */
/* ==================== */
@media (max-width: 768px) {
  /* Snap */
  html.snap-scroll { scroll-snap-type: none; }
  .hero-full, .intro-full, .contact, .about, .project-card {
    scroll-snap-align: none; scroll-snap-stop: normal;
  }
  /* Spacing */
  :root { --gap: 1rem; --gap-section: 1.5rem; }
  .container { padding: 0 1.5rem; }
  .hero-full .container { padding: 0 1.5rem; }
  /* Nav — a11y to floating bubble, keep colour dots */
  .shortcuts-btn { display: none; }
  .a11y-btn { display: none !important; }
  .a11y-bubble { display: flex !important; }
  .nav-divider { height: 14px; }
  .accent-dot { width: 20px; height: 20px; position: relative; }
  .accent-dot::before { content: ''; position: absolute; inset: -12px; }
  .accent-picker { gap: 10px; }
  .accent-dot::after { display: none; }
  .nav-links { gap: 1.15rem; }
  .nav-links a { font-size: 0.82rem; }
  .nav-links a::after { display: none; }
  .theme-toggle { width: 32px; height: 32px; font-size: 0.85rem; }
  /* Layout */
  .dot-field i { width: 3px; height: 3px; opacity: 0.35; }
  .intro-full { min-height: 70vh; }
  .intro-text { font-size: 1.15rem; }
  .case-hero { padding: 95px 0 1.5rem; }
  .case-hero h1 { font-size: 2.1rem; margin-bottom: 0.5rem; }

.cs .container > h2 { font-size: 1.35rem; }
  .case-hero .case-desc { font-size: 0.95rem; line-height: 1.65; margin-bottom: 1rem; }
  .case-meta { flex-direction: column; gap: 0.6rem; }
  .stat-row { grid-template-columns: 1fr; gap: 0.8rem; }
  .highlight-row { grid-template-columns: 1fr; }
  /* About spacing fix */
  .about { min-height: auto; display: block; padding-top: calc(var(--gap-section) * 2); margin-top: 2rem; }

.about-intro {
  flex-direction: column;
  gap: calc(var(--gap) * 2.5);
}

.about-bio, .edu {
  flex: none;
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

.edu {
  border-left: none;
  border-top: 1px solid var(--border);
  padding-left: 0;
  padding-top: calc(var(--gap) * 1.5);
}
  .about::before { content: none; }
  .about { border-top: 1px solid var(--border); }
  .skill-grid {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: none;
  padding-top: calc(var(--gap) * 2);
}

.skill-col {
  display: block;
  grid-column: auto;
  grid-row: auto;
  padding: calc(var(--gap) * 1.5) 0;
  border-right: none;
  border-top: 1px solid var(--border);
}

.skill-col:first-child {
  border-top: none;
  padding-top: calc(var(--gap) * 0.5);
  padding-left: 0;
}

.skill-col:last-child {
  padding-right: 0;
}
  .project-card { margin-bottom: 3rem; min-height: auto; display: block; }
  .project-card:last-child { margin-bottom: 3rem; }
  .project-card h3 { font-size: 1.4rem; }
  .sus { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 1rem; }
  .sus-num { font-size: 2.2rem; }
  footer { margin-top: 3rem; padding-bottom: 1rem; }
  .contact > footer { margin-top: 3rem; }
  footer .container { justify-content: center; gap: 0.5rem; }
  footer p { font-size: 10px; opacity: 0.4; white-space: nowrap; }
  footer a::after { display: none; }
  .cursor { display: none; }
  .contact { min-height: auto; display: block; padding-top: calc(var(--gap-section) * 2); border-top: 1px solid var(--border); }
  .scroll-top { bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); right: 1.6rem; width: 32px; height: 32px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
  :root { --gap: 0.85rem; --gap-section: 1.2rem; }
  .container { padding: 0 1.1rem; }
  .hero-full h1 { font-size: clamp(2.4rem, 9vw, 4rem); }
  .hero-full .container { padding: 0 1.1rem; }
  .skill-col li { font-size: 0.875rem; padding: 0.3rem 0.5rem; }
  .scroll-label { font-size: 0.6rem; letter-spacing: 0.1em; }
  .intro-text { font-size: 1rem; }
  .intro-full { min-height: 60vh; }
  .case-hero { padding: 80px 0 1.2rem; }
  .case-hero h1 { font-size: 1.75rem; margin-bottom: 0.4rem; }

.cs .container > h2 { font-size: 1.15rem; }
  .case-hero .case-desc { font-size: 0.88rem; line-height: 1.6; }
  .project-card { margin-bottom: 2rem; }
  .project-card h3 { font-size: 1.25rem; }
  .pq { font-size: 1rem; padding-left: 1rem; }
  .nav-divider { height: 12px; }
  .nav-name { font-size: 0.8rem; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 0.82rem; }
  .theme-toggle { width: 28px; height: 28px; font-size: 0.75rem; }
  .accent-dot { width: 16px; height: 16px; }
  .accent-dot::before { inset: -14px; }
  .accent-picker { gap: 6px; }
  /* Nav a11y-large: scale text up but compress gap to prevent overflow */
  .a11y-large .nav-name { font-size: 14px !important; white-space: nowrap !important; }
  .a11y-large .nav-links a { font-size: 13.5px !important; }
  .a11y-large .nav-links { gap: 10px !important; }
  .a11y-large .accent-picker { gap: 5px !important; }
  .a11y-large .accent-dot { width: 15px !important; height: 15px !important; }
  /* Hero h1 in a11y-large: 2.7rem×18px=48.6px min is too wide for mobile (1 word/line) */
  html.a11y-large .hero-full h1 { font-size: clamp(2.4rem, 8vw, 3.5rem) !important; line-height: 1.2 !important; }
  footer .container { gap: 0.35rem; }
  footer p { font-size: 9px; }
}

/* Copy feedback tooltip */
.copy-feedback {
  position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 500; color: var(--accent);
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none; white-space: nowrap;
}
.copy-feedback.show { opacity: 1; }
footer a.email-link { position: relative; }

/* ==================== */
/* ACCESSIBILITY PANEL   */
/* ==================== */
.a11y-btn {
  background: none; border: 1px solid var(--border); border-radius: 20px;
  height: 28px; display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--text-light); transition: color 0.25s, border-color 0.25s;
  font-size: 0.72rem; font-weight: 500; font-family: var(--font);
  letter-spacing: 0.04em; padding: 0 0.7rem;
  text-transform: uppercase;
}
.a11y-btn:hover { color: var(--text); border-color: var(--text-light); }
.a11y-panel {
  position: fixed; top: env(safe-area-inset-top, 0px); right: -320px; z-index: 250;
  width: 300px; height: calc(100% - env(safe-area-inset-top, 0px)); background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(0,0,0,0.08);
  transition: right 0.35s ease;
  padding: 1.5rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 1rem;
}
[data-theme="dark"] .a11y-panel { box-shadow: -4px 0 20px rgba(0,0,0,0.3); }
.a11y-panel.open { right: 0; }
/* Sticky header — always visible with close button */
.a11y-header {
  position: sticky; top: -1.5rem; z-index: 2;
  background: var(--bg);
  margin: -1.5rem -1.5rem 0; padding: 1.5rem 1.5rem 0.6rem;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.a11y-header h3 {
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text); margin: 0;
}
.a11y-header p {
  font-size: 0.65rem; color: var(--text-light); font-weight: 300;
  line-height: 1.4; margin: 0.3rem 0 0; max-width: 200px;
}
.a11y-panel p.a11y-desc { display: none; }
.a11y-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
  gap: 1rem;
}
.a11y-row:last-child { border-bottom: none; }
.a11y-label { font-size: 0.78rem; font-weight: 400; color: var(--text-body); flex: 1; min-width: 0; }
.a11y-sub { display: block; font-size: 0.65rem; color: var(--text-light); font-weight: 300; margin-top: 0.15rem; }
/* Toggle switch */
.a11y-toggle {
  -webkit-appearance: none; appearance: none;
  position: relative; width: 36px; height: 20px; flex-shrink: 0;
  background: var(--border); border-radius: 10px; border: none;
  transition: background 0.25s; padding: 0; outline: none; line-height: 1 !important;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.a11y-toggle::before {
  content: ''; position: absolute; inset: -12px;
  z-index: 0;
}
.a11y-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); transition: transform 0.25s; transform: translateX(0) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  z-index: 1;
}
.a11y-toggle[aria-checked="true"] { background: var(--accent); }
.a11y-toggle[aria-checked="true"]::after { transform: translateX(16px) !important; }
.a11y-close {
  background: none; border: none; color: var(--text-light);
  font-size: 1.2rem; line-height: 1; padding: 0.25rem;
  transition: color 0.25s; flex-shrink: 0;
  min-width: 32px; min-height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.a11y-close:hover { color: var(--text); }
/* Accessibility modes */
.a11y-motion * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
.a11y-motion .dot-field { display: none !important; }
.a11y-motion .scroll-persist { display: none !important; }
.a11y-motion .scroll-mouse::after { animation: none !important; }
.a11y-contrast { --text-body: #111111 !important; --text-light: #333333 !important; }
[data-theme="dark"].a11y-contrast { --text-body: #F5F5F5 !important; --text-light: #DDDDDD !important; }
.a11y-large { font-size: 18px !important; }
.a11y-large h1 { line-height: 1.25 !important; }
.a11y-large .hero-full h1 {
  font-size: clamp(2.7rem, 9vw, 4.5rem) !important;
  line-height: 1.18 !important;
}
.a11y-spacing { letter-spacing: 0.03em; word-spacing: 0.08em; line-height: 1.9 !important; }
.a11y-spacing p, .a11y-spacing li { line-height: 1.9 !important; }
.a11y-spacing .card-tags,
.a11y-spacing .card-cta,
.a11y-spacing .meta-label,
.a11y-spacing footer,
.a11y-spacing .greeting,
.a11y-spacing .accent-word,
.a11y-spacing .a11y-bubble,
.a11y-spacing .stat-num,
.a11y-spacing .sus-num,
.a11y-spacing .shortcut-key,
.a11y-spacing .reading-time { letter-spacing: 0 !important; word-spacing: 0 !important; }
/* Panel isolation — prevent reading guide from expanding row content in the narrow
   panel label column (~200px desktop, ~160px mobile) */
/* Labels: allow letter-spacing (short text), only zero word-spacing to prevent line wrapping */
.a11y-spacing .a11y-label { word-spacing: 0 !important; }
/* Subs: zero both spacing properties — longer text that would wrap with extra width */
.a11y-spacing .a11y-sub { letter-spacing: 0 !important; word-spacing: 0 !important; }
/* Header: lock line-height so sticky header never grows and covers the first row */
.a11y-spacing .a11y-header h3 { letter-spacing: 0.12em !important; word-spacing: 0 !important; line-height: 1.2 !important; }
.a11y-spacing .a11y-header p { letter-spacing: 0 !important; word-spacing: 0 !important; line-height: 1.4 !important; }
/* Nav: preserve natural values — lock line-height to body default (1.75), not 1.9 */
.a11y-spacing nav,
.a11y-spacing nav * { line-height: 1.75 !important; }
.a11y-spacing .nav-name { letter-spacing: 0.02em !important; word-spacing: normal !important; }
.a11y-spacing .nav-links a { letter-spacing: 0.01em !important; word-spacing: normal !important; }
.a11y-spacing .nav-links { word-spacing: normal !important; }
.a11y-spacing .greeting { line-height: 1.3 !important; height: auto !important; overflow: visible !important; }
.a11y-spacing .skill-col li { letter-spacing: 0 !important; word-spacing: normal !important; }
.a11y-spacing .highlight-box p { line-height: 1.6 !important; }
.a11y-spacing .stat-desc { line-height: 1.4 !important; }
.a11y-spacing .pq { line-height: 1.7 !important; }
.a11y-spacing .case-desc { line-height: 1.7 !important; }
.a11y-spacing .contact p { line-height: 1.7 !important; }
.a11y-spacing .contact h2 { margin-bottom: 1rem !important; }
.a11y-spacing .about-bio { line-height: 1.8 !important; }

/* CTA protection: word-spacing from a11y-spacing breaks inline-flex CTA layout */
.a11y-spacing .project-card .card-cta,
.a11y-spacing .next a {
  word-spacing: 0 !important;
  white-space: nowrap !important;
}

.a11y-spacing .cs { padding-top: calc(var(--gap-section) * 1.3); padding-bottom: calc(var(--gap-section) * 1.3); }
.a11y-spacing .cs-text h3 { margin-top: calc(var(--gap) * 2); padding-top: calc(var(--gap) * 1); line-height: 1.5 !important; }
.a11y-spacing .stat-row { padding: 1.2rem 0; }
.a11y-spacing .case-meta { padding: 1.2rem 0; }
.a11y-large .sus-num { font-size: 2.2rem !important; }
.a11y-large .about { min-height: auto !important; }
.a11y-large .project-card { min-height: auto !important; }

.a11y-large .project-card .card-cta {
  white-space: nowrap !important;
  font-size: 1rem !important;
}
/* Next project CTA on case study pages — explicit boost */
.a11y-large .next a { font-size: 1.1rem !important; }
.a11y-large .stat-num { font-size: 1.8rem !important; line-height: 1.3 !important; }
.a11y-large h3 { line-height: 1.55 !important; }
.a11y-large p { line-height: 1.85 !important; }
.a11y-large li { line-height: 1.85 !important; }
.a11y-large .pq { line-height: 1.75 !important; }


.a11y-large .case-desc { line-height: 1.8 !important; }
.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px !important; }
.a11y-links .a11y-bubble { text-decoration: none !important; }
.a11y-links .scroll-top { text-decoration: none !important; }
.a11y-links .accent-dot { text-decoration: none !important; }
.a11y-links .nav-links a::after { display: none !important; }
.a11y-links .cv-link { border-bottom: none !important; }
.a11y-links .project-card { text-decoration: none !important; }
.a11y-links .project-card .cta-text { text-decoration: underline !important; text-underline-offset: 3px !important; }
.a11y-images img { display: none !important; }
.a11y-images .card-img { display: none !important; }
.a11y-images .project-media {
  aspect-ratio: auto !important; min-height: 0 !important;
  overflow: visible !important; display: block !important;
  border-radius: 0 !important; padding: 0 !important;
}
.a11y-images .project-card { min-height: auto !important; justify-content: flex-start !important; }
/* Image descriptions — visible when images hidden */
.img-desc {
  display: none; padding: 0.75rem 1rem; background: var(--soft);
  border: 1px dashed var(--border); border-radius: 4px;
  font-size: 0.75rem; color: var(--text-body); font-weight: 300;
  font-style: italic; line-height: 1.5; margin: 0.5rem 0;
  text-align: left; width: 100%; box-sizing: border-box;
}
.img-desc::before {
  content: 'Image: '; font-style: normal; font-weight: 500;
  color: var(--text-light); font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.a11y-images .img-desc { display: block; }
.a11y-spacing .img-desc { line-height: 1.5 !important; }
/* Reading line — horizontal bar tracks cursor to aid line-by-line reading */
.reading-line {
  position: fixed; left: 0; right: 0; height: 40px;
  pointer-events: none; z-index: 90;
  background: linear-gradient(
    to bottom,
    transparent 0%, rgba(0,0,0,0.04) 30%,
    rgba(0,0,0,0.04) 70%, transparent 100%
  );
  opacity: 0; transition: opacity 0.3s;
  display: none;
}
[data-theme="dark"] .reading-line {
  background: linear-gradient(
    to bottom,
    transparent 0%, rgba(255,255,255,0.06) 30%,
    rgba(255,255,255,0.06) 70%, transparent 100%
  );
}
.a11y-reading .reading-line { display: block; opacity: 1; }

@media (max-width: 768px) {
  .a11y-panel { width: 260px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* Fix greeting height */
  .a11y-large .greeting { height: auto !important; overflow: visible !important; }
  /* Nav a11y-large: scale text up but compress gap to prevent overflow */
  .a11y-large .nav-name { font-size: 14.5px !important; white-space: nowrap !important; }
  .a11y-large .nav-links a { font-size: 14px !important; }
  .a11y-large .nav-links { gap: 12px !important; }
  .a11y-large .accent-picker { gap: 5px !important; }
  .a11y-large .accent-dot { width: 16px !important; height: 16px !important; }
  /* Panel: scale text with 18px root */
  .a11y-large .a11y-label { font-size: 0.78rem !important; }
  .a11y-large .a11y-sub { font-size: 0.65rem !important; }
  .a11y-large .a11y-row { padding: 0.6rem 0 !important; min-height: auto !important; }
  /* Isolate sticky header from global a11y-large line-height expansion */
  /* Without this, header grows ~16px and covers the first row (overlap bug) */
  .a11y-large .a11y-header h3 { line-height: 1.2 !important; }
  .a11y-large .a11y-header p { line-height: 1.4 !important; }
}


/* Floating a11y bubble — Apple AssistiveTouch */
.a11y-bubble {
  position: fixed; z-index: 200;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: none; align-items: center; justify-content: center;
  touch-action: none; -webkit-user-select: none; user-select: none;
  will-change: transform;
  opacity: 0.35;
  font-size: 0.6rem; font-weight: 700; font-family: var(--font);
  letter-spacing: 0.03em; text-transform: uppercase;
}
[data-theme="dark"] .a11y-bubble { box-shadow: 0 2px 8px rgba(0,0,0,0.5); }

/* ==================== */
/* PRINT                 */
/* ==================== */
@media print {
  nav, .cursor, .progress-bar, .scroll-top, .scroll-hint, .a11y-panel, .a11y-btn,
  .shortcuts-overlay, .accent-picker, .shortcuts-btn, .theme-toggle, .a11y-bubble { display: none !important; }
  body { background: white; color: #1A1A1A; }
  .hero-full { min-height: auto; padding: 2rem 0; }
  .contact { padding: 2rem 0; }
  .intro-full { min-height: auto; padding: 1rem 0; }
  .project-card .card-img { opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .intro-text { opacity: 1 !important; transform: none !important; color: #444 !important; }
  a { text-decoration: underline; }
  a::after { display: none !important; }
  footer a::after { display: none !important; }
  .accent-word { color: #1A1A1A !important; text-decoration: underline; }
  .accent-word::after { display: none !important; }
}


/* a11y-motion extras */
.a11y-motion .greeting::after { animation: none !important; content: none !important; }
.a11y-motion .greeting.fading { opacity: 1 !important; }


/* === ENHANCED FOCUS: Visibly distinct from default focus === */
.a11y-focus *:focus-visible {
  outline: 4px solid #2563EB !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 8px 2px rgba(37, 99, 235, 0.5) !important;
}
[data-theme="dark"] .a11y-focus *:focus-visible {
  outline-color: #60A5FA !important;
  box-shadow: 0 0 0 2px #141414, 0 0 8px 2px rgba(96, 165, 250, 0.5) !important;
}

/* === TOGGLE ISOLATION: prevent line-height/font-size cascade distorting toggles === */
/* Transform handled by core rules with !important above — no override needed here */
.a11y-large .a11y-toggle,
.a11y-spacing .a11y-toggle {
  line-height: 1 !important;
  font-size: 16px !important;
}