/* Light editorial theme: warm paper, readable ink and a restrained project palette. */
:root {
    --bg: #f6f1e8;
    --bg-elevated: #fffdf8;
    --bg-soft: #ece5d9;
    --paper: #fffdf8;
    --paper-soft: #f0e9dd;
    --ink: #1d1821;
    --muted: #6a6570;
    --muted-dark: #59545f;
    --line: rgba(29, 24, 33, .14);
    --violet: #6f3dc0;
    --violet-bright: #925be2;
    --coral: #e45e43;
    --lime: #aeca45;
    --sky: #83a6d9;
    --shadow-hard: 12px 12px 0 rgba(29, 24, 33, .12);
}

html, body { background: var(--bg); color: var(--ink); }
body::before { opacity: .025; mix-blend-mode: multiply; }
body::after { background: radial-gradient(circle at 86% 4%, rgba(146,91,226,.11), transparent 30rem), radial-gradient(circle at 8% 72%, rgba(228,94,67,.08), transparent 25rem); }
.skip-link { color: var(--paper); background: var(--ink); }
.site-header { border-bottom-color: transparent; background: rgba(246,241,232,.84); backdrop-filter: blur(18px); }
.site-header.is-scrolled { border-color: var(--line); background: rgba(246,241,232,.96); }
.brand { color: var(--ink); }
.brand img { box-shadow: 0 0 0 1px rgba(29,24,33,.16); }
.main-nav > a { color: var(--muted-dark); }
.main-nav > a:hover, .main-nav > a:focus-visible, .main-nav > a.is-active { color: var(--ink); }
.nav-action { border-color: rgba(29,24,33,.24); color: var(--ink) !important; }
.nav-action:hover, .nav-action:focus-visible { color: var(--paper) !important; background: var(--ink); border-color: var(--ink); }
.menu-toggle { color: var(--ink); border-color: var(--line); }
.language-switcher summary { color: var(--ink); border-color: var(--line); }
.language-switcher summary::after { color: var(--muted); }
.language-options { border-color: var(--line); background: var(--paper); box-shadow: 0 20px 50px rgba(29,24,33,.14); }
.language-options a { color: var(--muted); }
.language-options a:hover, .language-options a:focus-visible, .language-options a[aria-current="true"] { color: var(--ink); background: var(--bg-soft); }
.language-flag, .language-current-flag { font-size: 1rem; line-height: 1; }
.language-options a { display: flex; align-items: center; gap: .6rem; }
.flash { color: var(--ink); background: var(--paper); box-shadow: 0 12px 30px rgba(29,24,33,.12); }
.site-footer { border-color: rgba(255,253,248,.16); color: rgba(255,253,248,.7); background: var(--ink); }
.site-footer .brand, .site-footer .footer-brand .brand { color: var(--paper); }
.site-footer .footer-nav a:hover, .site-footer .footer-nav a:focus-visible, .site-footer .footer-meta a:hover, .site-footer .footer-meta a:focus-visible { color: var(--lime); }
.site-footer .footer-meta strong { color: var(--paper); }
.site-footer .footer-bottom { border-color: rgba(255,253,248,.16); }

.section-title, .hero-copy h1, .project-detail-header h1, .article-header h1, .about-grid h2, .team-page-member h2, .team-close h2 { color: var(--ink); }
.section-title strong, .hero-copy h1 em { color: var(--violet); }
.section-kicker { color: var(--violet); }
.section-intro, .hero-lede, .hero-note, .page-hero > p:last-child, .project-detail-lede, .article-standfirst, .project-detail-context, .about-grid p:not(.eyebrow), .team-page-member p, .article-section p { color: var(--muted); }
.button { color: var(--paper); background: var(--ink); }
.button:hover, .button:focus-visible { color: var(--paper); background: var(--violet); }
.button-secondary { color: var(--ink); border-color: var(--line-dark); background: transparent; }
.button-secondary:hover, .button-secondary:focus-visible { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.button-coral { color: var(--paper); background: var(--coral); }
.button-light { color: var(--ink); background: var(--paper); }
.text-link:hover, .text-link:focus-visible { color: var(--violet); }

.hero-stage { background: var(--bg); }
.hero-stage::before { background-image: linear-gradient(rgba(29,24,33,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(29,24,33,.08) 1px, transparent 1px); opacity: .42; }
.hero-stage::after { background: radial-gradient(circle, rgba(146,91,226,.2), rgba(146,91,226,0) 68%); }
.hero-panel { border-color: rgba(255,253,248,.42); background: linear-gradient(135deg, #7140c3, #e45e43); box-shadow: var(--shadow-hard); }
.hero-panel::before { border-color: rgba(255,253,248,.36); box-shadow: 0 0 0 3rem rgba(255,253,248,.08), 0 0 0 6rem rgba(255,253,248,.05); }
.hero-panel-top, .hero-panel-bottom { color: rgba(255,253,248,.86); }
.hero-panel-logo img { box-shadow: 10px 10px 0 rgba(29,24,33,.2); }
.hero-panel-name { color: var(--paper); }
.hero-badge { border-color: var(--paper); color: var(--paper); background: var(--ink); box-shadow: 5px 5px 0 rgba(29,24,33,.18); }
.hero-photo { border-color: var(--bg); box-shadow: 10px 10px 0 rgba(29,24,33,.14); }

.section-dark, .section-paper { background: var(--bg); color: var(--ink); }
.section-paper { background: var(--paper); }
.section-paper .section-title { color: var(--ink); }

.about-skills { padding-block: var(--space-8); }
.about-tech-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.about-tech-item { display: flex; align-items: flex-start; gap: .9rem; min-height: 9.5rem; padding: 1.35rem; background: var(--bg-elevated); }
.about-tech-item img { flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; }
.about-tech-item strong, .about-tech-item span, .about-tech-item p { display: block; }
.about-tech-item strong { color: var(--ink); font-size: 1rem; }
.about-tech-item span { margin-top: .2rem; color: var(--violet); font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.about-tech-item p { margin: .65rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
@media (max-width: 860px) { .about-tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .about-tech-grid { grid-template-columns: 1fr; } .about-tech-item { min-height: 0; } }
.section-paper .section-intro { color: var(--muted); }
.section-paper .section-kicker { color: var(--violet); }
.project-stage { background: var(--bg-soft); }
.project-stage::before { color: rgba(29,24,33,.05); }
.project-feature { color: var(--ink); background: var(--paper); box-shadow: 0 14px 35px rgba(29,24,33,.08); }
.project-feature + .project-feature { background: #edf1f5; }
.project-feature-copy p, .project-card p, .team-intro p, .team-person-info p { color: var(--muted); }
.meta-tag { color: var(--muted-dark); border-color: var(--line); }
.project-feature-arrow { border-color: var(--line); }
.project-feature:hover { box-shadow: 0 25px 70px rgba(29,24,33,.14); }
.project-visual { background: #dcd0f0; }
.project-visual::before { background-image: linear-gradient(rgba(29,24,33,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(29,24,33,.14) 1px, transparent 1px); opacity: .18; }
.project-visual::after { border-color: rgba(29,24,33,.18); box-shadow: 0 0 0 2rem rgba(255,253,248,.18), 0 0 0 5rem rgba(255,253,248,.1); }
.project-visual-orthoplay { background: #d5ece7; }
.project-visual-orthoplay::after { border-color: rgba(111,61,192,.4); }
.project-visual-content { overflow: hidden; }
.project-visual-content img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; transform: none; object-fit: cover; filter: saturate(.92); }
.project-feature:hover .project-visual-content img { transform: scale(1.035); }
.project-visual-content::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(29,24,33,.5)); pointer-events: none; }
.project-visual-label { position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 2; color: var(--paper); font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.project-grid .project-card { color: var(--ink); background: var(--paper); box-shadow: 0 14px 35px rgba(29,24,33,.08); }
.project-grid .project-card::before { background: radial-gradient(circle at 80% 20%, rgba(146,91,226,.16), transparent 38%), linear-gradient(135deg, transparent 50%, rgba(228,94,67,.1)); }
.project-grid .project-card:nth-child(2)::before { background: radial-gradient(circle at 20% 20%, rgba(131,166,217,.22), transparent 40%), linear-gradient(135deg, transparent 50%, rgba(174,202,69,.14)); }
.project-grid .project-card:hover { background: #fffaf2; }
.project-card-number { color: var(--violet); }
.team-stage { background: var(--paper); }
.team-person-portrait { background: var(--bg-soft); }
.team-person-portrait::after { border-color: rgba(29,24,33,.16); }
.team-person-info h3 { color: var(--ink); }
.team-person-role { color: var(--coral); }
.article-stage { background: var(--bg-soft); }
.article-stage .section-title { color: var(--ink); }
.article-stage .section-intro { color: var(--muted); }
.article-stage .section-kicker { color: var(--violet); }
.article-list-card { color: var(--ink); background: var(--paper); }
.article-list-card p { color: var(--muted); }
.article-feature { box-shadow: 0 14px 35px rgba(29,24,33,.12); }
.cta-band { background: var(--violet); }
.form-control { color: var(--ink); border-color: var(--line); }
.form-control::placeholder { color: #8b8590; }
.form-result { color: var(--ink); background: rgba(174,202,69,.16); }

.project-detail, .article-page, .contact-layout, .about-grid, .team-page-list { color: var(--ink); }
.breadcrumb { color: var(--muted); }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--violet); }
.project-detail-header { border-color: var(--line); }
.project-detail-meta { border-color: var(--coral); }
.project-detail-meta strong, .project-facts strong { color: var(--ink); }
.project-detail-hero-visual { background: #dcd0f0; box-shadow: 0 18px 50px rgba(29,24,33,.1); }
.project-detail-hero-visual::before { background-image: linear-gradient(rgba(29,24,33,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(29,24,33,.12) 1px, transparent 1px); }
.project-detail-hero-visual img { top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; transform: none; object-fit: cover; }
.project-detail-hero-visual::after { z-index: 1; border-color: rgba(255,253,248,.42); }
.project-facts, .roadmap-section, .team-page-member, .article-toc { border-color: var(--line); }
.project-facts span, .project-detail-copy h2, .team-page-member h2, .article-section h2 { color: var(--ink); }
.check-list li { color: var(--muted); }
.check-list li::before { color: var(--violet); }
.roadmap-step { background: var(--paper); box-shadow: 0 12px 30px rgba(29,24,33,.06); }
.roadmap-step h3 { color: var(--ink); }
.roadmap-step p { color: var(--muted); }
.article-header h1 { color: var(--ink); }
.article-aside { color: var(--ink); background: var(--paper); box-shadow: 0 12px 30px rgba(29,24,33,.06); }
.article-aside p, .article-toc a { color: var(--muted); }
.article-toc strong { color: var(--violet); }
.article-toc a:hover, .article-toc a:focus-visible { color: var(--ink); }
.contact-aside h2, .contact-email { color: var(--ink); }
.contact-list, .contact-privacy, .form-help { color: var(--muted); }
.team-page-photo { background: var(--bg-soft); }
.team-page-member .member-skills { color: var(--violet); }
.team-page-member .member-skills span { border-color: rgba(111,61,192,.22); }
.principle-grid { background: var(--line); }
.principle { background: var(--paper); }
.principle h2 { color: var(--ink); }
.principle p { color: var(--muted); }

.error-page { min-height: 76vh; text-align: left; }
.error-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 8vw, 8rem); align-items: center; width: 100%; }
.error-copy h1 { max-width: 700px; margin: .7rem 0 1.2rem; color: var(--ink); font: 400 clamp(4.5rem, 9vw, 9rem)/.78 var(--serif); letter-spacing: -.08em; }
.error-copy p:not(.eyebrow) { max-width: 500px; color: var(--muted); }
.error-mascot { position: relative; max-width: 620px; aspect-ratio: 1.18; overflow: visible; }
.error-mascot img { display: block; width: 100%; height: 100%; border-radius: 48% 52% 46% 54%; object-fit: cover; box-shadow: 16px 16px 0 rgba(29,24,33,.12); transform: rotate(3deg); animation: mascot-float 4.8s ease-in-out infinite; }
.error-wave { position: absolute; top: 6%; right: 8%; width: 6rem; height: 6rem; border: 2px solid var(--coral); border-radius: 50%; background: var(--paper); transform-origin: 30% 80%; animation: wave 1.8s ease-in-out infinite; }
.error-wave::before, .error-wave::after { content: ""; position: absolute; left: 50%; width: 2rem; height: 1px; background: var(--coral); transform-origin: left center; }
.error-wave::before { top: 1.55rem; transform: rotate(-35deg); }
.error-wave::after { top: 2.4rem; transform: rotate(35deg); }
.error-spark { position: absolute; color: var(--violet); font: 2.5rem var(--serif); animation: spark 2.5s ease-in-out infinite; }
.error-spark-one { top: 0; left: 8%; }
.error-spark-two { right: 1%; bottom: 8%; animation-delay: .7s; }

.legal-page { padding-bottom: var(--space-8); }
.legal-hero { padding-bottom: 4rem; }
.legal-hero h1 { max-width: 1000px; color: var(--ink); }
.legal-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 8vw, 9rem); align-items: start; }
.legal-aside { position: sticky; top: 8rem; padding: 1.5rem; border-top: 3px solid var(--violet); background: var(--paper); box-shadow: 0 12px 30px rgba(29,24,33,.06); }
.legal-aside p { color: var(--muted); font-size: .92rem; }
.legal-sections { min-width: 0; }
.legal-section { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.legal-number { color: var(--coral); font: .72rem var(--mono); }
.legal-section h2 { margin: 0 0 .65rem; color: var(--ink); font: 400 clamp(2rem, 4vw, 3.8rem)/.9 var(--serif); letter-spacing: -.05em; }
.legal-section p, .legal-sources p { max-width: 680px; color: var(--muted); }
.legal-sources { margin-top: 2rem; padding: 1.5rem; background: var(--paper-soft); }
.legal-sources a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: .2em; }
.legal-back { margin-top: 3rem; }

@keyframes wave { 0%,100% { transform: rotate(-8deg); } 25% { transform: rotate(18deg); } 50% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes mascot-float { 0%,100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-10px); } }
@keyframes spark { 0%,100% { opacity: .35; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(15deg); } }

@media (max-width: 860px) {
    .main-nav { background: rgba(246,241,232,.98); }
    .error-layout, .legal-layout { grid-template-columns: 1fr; }
    .error-mascot { max-width: 560px; margin-inline: auto; }
    .legal-aside { position: static; }
}

@media (max-width: 560px) {
    .error-page { min-height: auto; padding-top: 9rem; padding-bottom: 5rem; }
    .error-copy h1 { font-size: clamp(4rem, 18vw, 6.4rem); }
    .error-mascot { margin-top: 2rem; }
    .error-wave { width: 4.5rem; height: 4.5rem; }
    .legal-section { grid-template-columns: 2.5rem 1fr; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .error-mascot img, .error-wave, .error-spark { animation: none; }
}