:root {
  color-scheme: light;
  --paper: #f5f0e6;
  --canvas: #eae5da;
  --surface: #fcf9f2;
  --text: #25251f;
  --muted: #605f55;
  --line: #25251f;
  --red: #cc3226;
  --blue: #194d90;
  --yellow: #f2c438;
  --on-color: #fffaf0;
  --on-yellow: #25251f;
  --focus: #194d90;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Manrope', Arial, sans-serif;
  --rule: 4px;
  --content-width: min(1280px, calc(100% - 80px));
}
html[data-theme='dark'] {
  color-scheme: dark;
  --paper: #22262a;
  --canvas: #191c1f;
  --surface: #2a2f33;
  --text: #f1ecdf;
  --muted: #c0bdb3;
  --line: #080b0d;
  --red: #bb352d;
  --blue: #254f84;
  --yellow: #e4b943;
  --on-color: #fffaf0;
  --focus: #f2c438;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
a:hover { text-decoration-color: var(--red); }
button, [role='button'] { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
::selection { background: var(--yellow); color: var(--on-yellow); }
img, video { display: block; max-width: 100%; height: auto; }
iframe { display: block; width: 100%; border: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
h1, h2 { font-family: var(--display); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(36px, 4.2vw, 56px); }
h3 { font-family: var(--body); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.035em; }
p { margin-bottom: 18px; }
p:last-child { margin-bottom: 0; }
.skip-link { position: fixed; left: 24px; top: 12px; z-index: 200; padding: 12px 20px; background: var(--yellow); color: var(--on-yellow); width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { width: auto; height: auto; overflow: visible; clip-path: none; }
.page-shell { position: relative; overflow: clip; }
.site-header { width: var(--content-width); margin: 0 auto; }
.site-header__inner { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: var(--rule) solid var(--line); }
.site-brand { display: inline-flex; align-items: center; gap: 15px; font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; }
.brand-composition { display: grid; grid-template-columns: 13px 12px 12px; grid-template-rows: 23px 12px; gap: 3px; border: 3px solid var(--line); background: var(--line); }
.brand-composition i:nth-child(1) { grid-column: 1 / 3; background: var(--paper); }
.brand-composition i:nth-child(2) { background: var(--yellow); }
.brand-composition i:nth-child(3) { background: var(--red); }
.brand-composition i:nth-child(4) { background: var(--blue); }
.brand-composition i:nth-child(5) { background: var(--paper); }
.site-header__actions { display: flex; align-items: center; gap: 30px; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { position: relative; display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; font-weight: 600; text-decoration: none; }
.site-nav a::after { position: absolute; content: ''; left: 0; right: 0; bottom: 5px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.site-nav a:hover::after, .site-nav a[aria-current='page']::after { transform: scaleX(1); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 2px solid var(--text); background: var(--paper); color: var(--text); font-size: 13px; font-weight: 600; }
.theme-toggle:hover { background: var(--yellow); color: var(--on-yellow); border-color: var(--on-yellow); }
.theme-toggle__icon { width: 15px; height: 15px; border: 1.7px solid currentColor; background: currentColor; position: relative; }
.theme-toggle__icon::after { content: ''; position: absolute; inset: 0 0 0 50%; background: var(--paper); }
.theme-toggle:hover .theme-toggle__icon::after { background: var(--yellow); }
html[data-theme='dark'] .theme-toggle__icon::after { inset: 0 50% 0 0; }
.nav-toggle { display: none; }
.site-main { width: var(--content-width); margin: 0 auto; padding: 32px 0 0; }
.hero-panel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); border: var(--rule) solid var(--line); background: var(--paper); }
.hero-copy { padding: 54px 48px 50px; align-self: center; }
.hero-role { max-width: 38ch; margin-bottom: 30px; font-size: 14px; font-weight: 600; line-height: 1.65; }
.hero-title { margin-bottom: 24px; font-size: clamp(76px, 8.6vw, 124px); font-weight: 500; line-height: .94; letter-spacing: -.055em; white-space: nowrap; }
.hero-subtitle { max-width: 47ch; font-size: 16px; line-height: 1.8; margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button, .button-secondary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; font-size: 13px; font-weight: 700; border: 2px solid var(--text); text-decoration: none; transition: transform 180ms ease, background-color 180ms ease; }
.button { background: var(--red); color: var(--on-color); border-color: var(--red); }
.button-secondary { background: transparent; }
.button:hover { background: var(--blue); border-color: var(--blue); }
.button-secondary:hover { background: var(--yellow); color: var(--on-yellow); border-color: var(--on-yellow); }
.button:active, .button-secondary:active, .theme-toggle:active { transform: translateY(2px); }
.hero-visual { min-width: 0; height: 520px; min-height: 0; border-left: var(--rule) solid var(--line); }
.portrait-card { height: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 56px; grid-template-rows: 42px minmax(280px, 1fr) 100px; gap: var(--rule); background: var(--line); }
.portrait-color--blue { grid-column: 1; grid-row: 1 / 4; background: var(--blue); }
.portrait-color--red { grid-column: 2 / 4; grid-row: 1; background: var(--red); }
.portrait-color--yellow { grid-column: 3; grid-row: 2 / 4; background: var(--yellow); }
.portrait-card img { grid-column: 2; grid-row: 2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; min-height: 0; }
.portrait-badge { display: flex; align-items: center; grid-column: 2; grid-row: 3; padding: 18px 24px; background: var(--paper); font-family: var(--display); font-size: 24px; line-height: 1.15; }
.stats-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; border-top: var(--rule) solid var(--line); }
.stat-card { display: grid; grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 30px 32px; }
.stat-card + .stat-card { border-left: var(--rule) solid var(--line); }
.stat-card strong { font-family: var(--display); font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.stat-card span { max-width: 36ch; font-size: 14px; line-height: 1.8; }
.stat-card:nth-child(2) { background: var(--yellow); color: var(--on-yellow); }
.section-panel { margin-top: 96px; }
.section-header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 32px; }
.section-label { /* taste-skill-ignore: preserve existing content labels as requested. */ display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.section-header h2 { margin-bottom: 0; }
.project-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border: var(--rule) solid var(--line); background: var(--paper); }
.project-card { position: relative; display: flex; flex-direction: column; align-items: start; padding: 36px 30px 30px; min-width: 0; }
.project-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 10px; background: var(--red); transform-origin: left; transition: transform 240ms ease; }
.project-card:hover::before { transform: scaleY(1.6); }
.project-card:nth-child(2)::before { background: var(--blue); }
.project-card:nth-child(3)::before { background: var(--yellow); }
.project-card + .project-card { border-left: var(--rule) solid var(--line); }
.project-card > .pill { margin-bottom: 24px; color: var(--muted); font-size: 13px; }
.project-card h3 { margin-bottom: 20px; }
.project-card p { font-size: 16px; line-height: 1.85; }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: auto 0 24px; padding-top: 16px; font-size: 13px; font-weight: 600; }
.pill-row .pill { display: inline-block; }
.project-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.project-links a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-size: 14px; font-weight: 700; }
.skills-panel { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); border: var(--rule) solid var(--line); background: var(--paper); }
.skills-panel .section-header { margin: 0; padding: 36px; align-items: start; background: var(--blue); color: var(--on-color); border-right: var(--rule) solid var(--line); }
.skills-panel h2 { font-size: clamp(40px, 4.6vw, 64px); }
.skill-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 26px 30px; }
.skill-row + .skill-row { border-top: 3px solid var(--line); }
.skill-label { font-size: 13px; font-weight: 700; line-height: 1.7; }
.skill-values { font-size: 16px; line-height: 1.85; }
.contact-panel { display: grid; grid-template-columns: .7fr 1.6fr; border: var(--rule) solid var(--line); background: var(--paper); }
.contact-panel .section-header { align-items: start; margin: 0; padding: 36px; background: var(--yellow); color: var(--on-yellow); border-right: var(--rule) solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 1fr; }
.contact-card { display: grid; grid-template-columns: 90px 1fr; gap: 24px; align-items: center; padding: 22px 30px; }
.contact-card + .contact-card { border-top: 3px solid var(--line); }
.contact-card h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.contact-card p { margin: 0; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.contact-card a { display: inline-block; padding: 7px 0; }
.site-footer { width: var(--content-width); margin: 96px auto 32px; }
.site-footer__inner { display: flex; align-items: center; gap: 28px; padding: 28px 0; border-top: var(--rule) solid var(--line); }
.footer-brand { font-family: var(--display); font-size: 42px; line-height: 1; text-decoration: none; }
.site-footer p { margin: 0 0 0 auto; font-size: 13px; color: var(--muted); }
.back-to-top { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--text); }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover { background: var(--yellow); color: var(--on-yellow); border-color: var(--on-yellow); }
.footer-composition { display: grid; grid-template-columns: 2.4fr .6fr 1fr 1.4fr; gap: var(--rule); height: 24px; background: var(--line); border: var(--rule) solid var(--line); }
.footer-composition span:nth-child(1) { background: var(--paper); }
.footer-composition span:nth-child(2) { background: var(--red); }
.footer-composition span:nth-child(3) { background: var(--yellow); }
.footer-composition span:nth-child(4) { background: var(--blue); }
/* Inner pages keep the same composition, with quieter reading surfaces. */
.content-panel { margin-bottom: 60px; padding: 44px; border: var(--rule) solid var(--line); background: var(--paper); }
.page-title { font-size: clamp(72px, 9vw, 116px); margin-bottom: 24px; }
.content-panel > h2 { max-width: 30ch; margin-bottom: 32px; font-size: clamp(32px, 3.6vw, 48px); }
.content-panel > p { max-width: 80ch; font-size: 17px; line-height: 1.9; }
.about-intro { position: relative; border-top: 16px solid var(--blue); }
.about-intro > p { max-width: 85ch; margin-bottom: 36px; }
.project-summary { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 44px; }
.project-summary p { line-height: 1.9; }
.project-summary ul { padding-left: 22px; margin: 20px 0 0; }
.project-summary li { margin: 12px 0; padding-left: 4px; font-size: 16px; line-height: 1.85; }
.project-summary li::marker { color: var(--red); }
.meta-list { display: grid; align-content: start; gap: 24px; padding: 28px; background: var(--surface); border-left: var(--rule) solid var(--line); }
.meta-item { font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.meta-item strong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.meta-item .project-links { gap: 0 20px; }
.about-intro .project-summary { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 0; border: var(--rule) solid var(--line); }
.about-portrait-frame { background: var(--yellow); padding: 24px 42px 0 24px; border: 0; }
.about-portrait { width: 100%; height: 470px; object-fit: cover; object-position: 50% 35%; border: var(--rule) solid var(--line); border-bottom: 0; }
.about-intro .meta-list { padding: 32px; gap: 20px; background: var(--paper); }
.timeline { display: grid; grid-template-columns: 1fr 1fr; border: var(--rule) solid var(--line); }
.timeline-card { position: relative; padding: 30px; min-width: 0; background: var(--surface); }
.timeline-card:nth-child(even) { border-left: var(--rule) solid var(--line); }
.timeline-card:nth-child(n+3) { border-top: var(--rule) solid var(--line); }
.timeline-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.timeline-date { font-weight: 700; font-size: 14px; }
.timeline-brand { width: 62px; height: 52px; object-fit: contain; padding: 5px; background: #fcf9f2; }
.timeline-card h3 { max-width: 30ch; font-size: 23px; margin-bottom: 16px; }
.timeline-card p { font-size: 16px; line-height: 1.85; }
.timeline-card--founder { border: var(--rule) solid var(--line); border-bottom: 0; }
.timeline-card--founder p { max-width: 85ch; margin-bottom: 12px; }
.timeline-brand--notipala { width: 80px; height: 80px; padding: 0; background: transparent; }
.founder-product { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; }
.timeline-card--founder::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--red); }
.project-page-title { position: relative; padding-right: 160px; border-left: 20px solid var(--yellow); }
.project-page-title h1 { margin: 0; font-size: clamp(58px, 7.5vw, 96px); }
.project-page-title::after { position: absolute; content: ''; top: 0; bottom: 0; right: 0; width: 96px; background: var(--red); border-left: var(--rule) solid var(--line); }
.project-detail { border-top: 12px solid var(--red); scroll-margin-top: 24px; }
.project-detail:nth-of-type(3n) { border-top-color: var(--blue); }
.project-detail:nth-of-type(3n+1) { border-top-color: var(--yellow); }
.project-detail > .section-label { /* taste-skill-ignore: preserve existing project labels as requested. */ margin-bottom: 18px; }
.project-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.project-showcase:has(> :only-child) { grid-template-columns: 1fr; }
.media-frame { min-width: 0; overflow: hidden; }
.project-showcase .media-frame { aspect-ratio: 16 / 9; max-height: 560px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 3px solid var(--line); }
.media-frame iframe { aspect-ratio: 16/9; }
.media-frame video { width: 100%; height: 100%; max-height: 560px; object-fit: contain; }
.project-showcase .media-frame img { width: 100%; height: 100%; max-height: 560px; object-fit: contain; }
.expandable-image { cursor: zoom-in; }
.lightbox { position: fixed; z-index: 100; inset: 0; display: none; background: rgba(8,11,13,.94); }
.lightbox.is-open { display: block; }
.lightbox__backdrop { height: 100%; display: flex; align-items: center; justify-content: center; padding: 76px 32px 32px; }
.lightbox__image { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--surface); border: var(--rule) solid var(--line); }
.lightbox__close { position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; border: 2px solid #f5f0e6; background: var(--red); color: #fffaf0; font-size: 32px; line-height: 1; }
body.lightbox-open { overflow: hidden; }
/* A flat brush traces a geometric contour before the colour wash appears. */
.paint-click { position: fixed; inset: 0; z-index: 150; overflow: clip; pointer-events: none; }
.paint-click__drawing { position: absolute; left: var(--x); top: var(--y); width: 160px; height: 160px; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.paint-click__stroke { fill: none; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; }
.paint-click__wash { opacity: 0; transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.paint-click__brush { opacity: 0; }
.paint-click__handle { fill: var(--paper); stroke: var(--text); stroke-width: 1.2; stroke-linejoin: round; }
.paint-click__nib { fill: var(--text); stroke: var(--text); stroke-width: .7; }
@keyframes composition-enter { from { transform: translateY(14px); } to { transform: translateY(0); } }
.reveal.is-revealed { animation: composition-enter 600ms cubic-bezier(.2,.65,.2,1) both; }
.hero-visual.is-revealed { animation-delay: 80ms; }
@media (min-width: 1600px) { .hero-copy { padding: 58px; } }
@media (max-width: 1100px) {
  :root { --content-width: calc(100% - 48px); }
  .site-header__actions { gap: 22px; }
  .site-nav { gap: 22px; }
  .hero-copy { padding: 40px 32px; }
  .hero-title { font-size: 9vw; }
  .hero-role { font-size: 13px; }
  .hero-visual { height: 500px; }
  .portrait-card { grid-template-columns: 24px minmax(0, 1fr) 34px; }
  .portrait-badge { font-size: 22px; padding: 16px; }
  .stat-card { padding: 26px; }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .project-card:last-child { grid-column: 1 / -1; border-left: 0; border-top: var(--rule) solid var(--line); display: grid; grid-template-columns: 1fr 1.25fr; gap: 0 32px; }
  .project-card:last-child > .pill { grid-column: 1; }
  .project-card:last-child h3 { grid-column: 1; }
  .project-card:last-child p { grid-column: 2; grid-row: 1 / 3; }
  .project-card:last-child .pill-row { grid-column: 1; }
  .project-card:last-child .project-links { grid-column: 2; align-items: end; }
  .skill-row { grid-template-columns: 125px 1fr; gap: 18px; padding: 24px; }
  .skills-panel .section-header, .contact-panel .section-header { padding: 30px; }
  .content-panel { padding: 32px; }
  .project-summary { gap: 28px; }
}
@media (max-width: 769px) {
  :root { --rule: 3px; --content-width: calc(100% - 40px); }
  .site-header__inner { position: relative; min-height: 90px; }
  .site-brand { font-size: 28px; gap: 10px; }
  .brand-composition { transform: scale(.85); transform-origin: left center; margin-right: -5px; }
  .site-header__actions { gap: 12px; }
  .theme-toggle { min-width: 44px; padding: 0 11px; }
  .theme-toggle__label { display: none; }
  .nav-toggle { display: grid; align-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; border: 2px solid var(--text); background: var(--paper); color: var(--text); }
  .nav-toggle span { display: block; height: 2px; background: currentColor; transition: transform 180ms ease; }
  .nav-toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-nav { display: none; position: absolute; z-index: 30; top: calc(100% - 3px); left: 0; right: 0; gap: 0; background: var(--paper); border: var(--rule) solid var(--line); }
  .site-nav.is-open { display: grid; grid-template-columns: 1fr 1fr; }
  .site-nav a { min-height: 58px; padding: 12px 20px; }
  .site-nav a::after { left: 20px; right: 20px; bottom: 9px; }
  .site-nav a + a { border-left: var(--rule) solid var(--line); }
  .site-nav a:nth-child(3) { border-left: 0; }
  .site-nav a:nth-child(n+3) { border-top: var(--rule) solid var(--line); }
  .site-main { padding-top: 24px; }
  .hero-panel { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding: 32px 26px 36px; }
  .hero-role { font-size: 13px; max-width: 32ch; margin-bottom: 25px; }
  .hero-title { font-size: clamp(62px, 13vw, 96px); margin-bottom: 22px; }
  .hero-subtitle { font-size: 16px; line-height: 1.85; max-width: 49ch; }
  .hero-actions { margin-top: 24px; gap: 8px; }
  .button, .button-secondary { padding: 10px 12px; font-size: 13px; min-height: 44px; }
  .hero-visual { min-height: 0; height: 340px; border-left: 0; border-top: var(--rule) solid var(--line); }
  .portrait-card { grid-template-columns: minmax(20px, .22fr) minmax(0, 1fr) minmax(34px, .25fr); grid-template-rows: 28px minmax(0, 1fr) 68px; }
  .portrait-card img { object-position: 50% 32%; }
  .portrait-badge { font-size: 21px; padding: 10px 16px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { grid-template-columns: 106px 1fr; align-items: center; padding: 24px; gap: 24px; }
  .stat-card + .stat-card { border-left: 0; border-top: var(--rule) solid var(--line); }
  .stat-card strong { font-size: 29px; line-height: 1.05; }
  .stat-card span { font-size: 14px; }
  .section-panel { margin-top: 64px; }
  .section-header { margin-bottom: 24px; }
  h2 { font-size: 40px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { padding: 32px 26px 24px; }
  .project-card + .project-card { border-left: 0; border-top: var(--rule) solid var(--line); }
  .project-card > .pill { margin-bottom: 16px; }
  .project-card h3 { max-width: 24ch; font-size: 25px; margin-bottom: 16px; }
  .project-card p { font-size: 16px; }
  .project-card:last-child { display: flex; }
  .pill-row { margin-bottom: 12px; }
  .skills-panel, .contact-panel { grid-template-columns: minmax(0, 1fr); }
  .skills-panel .section-header, .contact-panel .section-header { padding: 26px; border-right: 0; border-bottom: var(--rule) solid var(--line); }
  .skills-panel h2 { font-size: 44px; }
  .skill-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 26px; }
  .skill-label { font-size: 14px; }
  .contact-card { grid-template-columns: 64px 1fr; gap: 18px; padding: 20px 26px; }
  .contact-card p { font-size: 13px; }
  .site-footer { margin-top: 64px; margin-bottom: 24px; }
  .site-footer__inner { flex-wrap: wrap; gap: 18px; padding: 24px 0; }
  .footer-brand { font-size: 34px; }
  .site-footer p { font-size: 13px; }
  .back-to-top { margin-left: auto; }
  .content-panel { padding: 26px; margin-bottom: 36px; }
  .page-title { font-size: 76px; }
  .content-panel > p { font-size: 16px; }
  .project-summary { grid-template-columns: 1fr; gap: 26px; }
  .about-intro .project-summary { grid-template-columns: 1fr; }
  .about-portrait-frame { padding: 20px 38px 0 20px; }
  .about-portrait { height: 340px; }
  .about-intro .meta-list { border-left: 0; border-top: var(--rule) solid var(--line); padding: 24px; }
  .timeline { grid-template-columns: 1fr; }
  .timeline-card { padding: 26px; }
  .timeline-card:nth-child(even) { border-left: 0; }
  .timeline-card + .timeline-card { border-top: var(--rule) solid var(--line); }
  .timeline-card h3 { font-size: 22px; }
  .timeline-card p { font-size: 16px; }
  .project-page-title { padding: 30px 48px 30px 24px; border-left-width: 12px; }
  .project-page-title h1 { font-size: 54px; }
  .project-page-title::after { width: 22px; }
  .content-panel > h2 { font-size: 33px; max-width: 100%; }
  .project-detail > h2 { font-size: clamp(25px, 5.8vw, 36px); letter-spacing: -.035em; }
  .project-summary p { font-size: 16px; }
  .project-summary li { font-size: 16px; }
  .meta-list { padding: 22px; gap: 20px; }
  .project-showcase { grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
  .lightbox__backdrop { padding: 80px 16px 24px; }
}
@media (max-width: 374px) {
  :root { --content-width: calc(100% - 28px); }
  .hero-copy { padding: 28px 20px; }
  .hero-actions { gap: 7px; }
  .button, .button-secondary { padding: 9px 10px; font-size: 13px; }
  .hero-title { font-size: 60px; }
  .stat-card { padding: 20px; gap: 16px; grid-template-columns: 92px 1fr; }
  .site-header__actions { gap: 8px; }
  .site-brand { font-size: 25px; }
  .content-panel { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .paint-click { display: none; }
}
@media print {
  .theme-toggle, .nav-toggle, .back-to-top, .paint-click { display: none; }
  :root { --content-width: 100%; }
  body { background: white; color: black; }
  .content-panel { break-inside: avoid; }
}