/* A quieter layout built around Kuro's actual work. */
:root {
  --bg: #12151b;
  --surface: #1a1e27;
  --surface-2: #222834;
  --text: #f1f0ed;
  --muted: #b1b7c5;
  --accent: #bacbff;
  --line: #343a47;
}

body::before { background: radial-gradient(ellipse at 90% 5%, #536a8720, transparent 40%); }
.site-header { background: #12151bee; border-color: #343a4780; }
.brand-avatar, .about-avatar { border-color: #7b8ba7; }
.brand-avatar img { transform: none; }
.nav-wrap { min-height: 82px; }
.eyebrow { font: 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.section { padding-block: 78px; }
.section-heading { margin-bottom: 32px; }
.section-heading h2 { font-size: clamp(2.1rem, 3.8vw, 3.7rem); }
.section-heading .eyebrow { margin-bottom: 14px; }
.section-heading > p { max-width: 360px; font-size: 14px; }
.button { border-radius: 6px; }
.primary:hover { background: #d3deff; }
.secondary { border-color: #51596a; background: #1c222a60; }
.secondary:hover { background: #2c3441; }
.tags span { border-color: #414957; color: #c0c7d5; }
.service-icon { border-color: #535f75; background: #bacbff08; }

.hero { padding-top: 66px; }
.hero-grid { grid-template-columns: 1.05fr 1fr; min-height: 590px; gap: 62px; }
.hero h1 { font-size: clamp(4.6rem, 7.7vw, 7rem); margin-bottom: 28px; line-height: 1.02; }
.hero-eyebrow { font-size: 16px; color: var(--text); margin-bottom: 24px; }
.hero-role { white-space: normal; max-width: 510px; line-height: 1.85; }
.hero-intro { font-size: 15px; max-width: 440px; }
.hero-bottom { margin-top: 40px; font: 12px/1.6 var(--sans); letter-spacing: 0; color: var(--muted); }
.hero-bottom a { color: var(--accent); }
.hero-work { position: relative; padding: 70px 0 38px; min-width: 0; }
.hero-shot { display: block; border: 1px solid #626d81; border-radius: 7px; overflow: hidden; background: #191d24; box-shadow: 0 20px 40px #0003; transition: transform .35s ease, border-color .35s ease; }
.hero-shot img { width: 100%; height: auto; display: block; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }
.hero-shot > span { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; color: #dce2ed; font: 11px var(--mono); }
.hero-shot-back { width: 88%; position: absolute; top: 0; right: 0; transform: rotate(5deg); opacity: .82; }
.hero-shot-front { position: relative; margin-top: 45px; width: 100%; transform: rotate(-3deg); }
.hero-shot:hover { transform: rotate(0); border-color: var(--accent); }
.hero-work-note { font-size: 12px; margin: 28px 0 0 20px; color: var(--muted); }

.project-card { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.project-card:hover { transform: none; }
.project-preview { display: block; width: 100%; padding: 0; position: relative; background: #1b2028; border: 1px solid #424b5c; border-radius: 7px; overflow: hidden; text-align: left; isolation: isolate; }
.project-preview img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; transition: transform .4s ease; }
.project-preview:hover img { transform: scale(1.025); }
.preview-caption { display: inline-flex; align-items: center; gap: 12px; position: absolute; right: 12px; bottom: 12px; background: #10151def; color: #e9edf6; padding: 7px 12px; border: 1px solid #66728b; border-radius: 5px; font: 11px/1.5 var(--sans); }
.preview-caption .icon { width: 13px; height: 13px; }
.project-body { padding: 22px 2px 32px; }
.project-body h3 { font-size: 27px; margin-bottom: 12px; }
.project-body p { min-height: 0; margin-bottom: 14px; }
.project-body .project-url { margin-block: 13px 18px; color: #a4aec1; }
.project-meta { margin-bottom: 12px; font: 12px/1.5 var(--sans); letter-spacing: 0; color: #c0cbde; }
.card-link { padding-top: 14px; }
.project-grid { gap: 22px 36px; }
.home-projects { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 36px; }
.home-projects .project-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 38px; align-items: center; padding-bottom: 16px; }
.home-projects .project-card:first-child .project-body { padding: 24px 0; }
.home-projects .project-card:first-child h3 { font-size: 34px; }
.home-projects .project-card:first-child .project-body > p { font-size: 14px; }
.home-projects .project-card:last-child { grid-column: auto; display: block; }
.home-projects .project-body { padding: 22px 2px 30px; }
.section-bottom { padding-top: 12px; }

.about-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 70px; }
.about-copy .lead { font-size: 22px; }
.about-portrait { margin: 0; justify-self: center; width: min(100%, 250px); transform: rotate(2deg); }
.about-portrait > img { width: 100%; height: auto; display: block; border: 1px solid #667691; border-radius: 8px; }
.about-portrait figcaption { padding-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 5px 15px; font-size: 12px; color: var(--muted); }
.about-portrait strong { color: var(--text); font-size: 15px; }
.about-portrait .portrait-note { grid-column: 1 / -1; font-size: 11px; }
.service-card { padding: 28px 23px; background: transparent; border-top: 1px solid #556079; }
.service-card h3 { font: 23px/1.3 var(--sans); margin-block: 25px 17px; letter-spacing: -.03em; }
.service-card .text-link { font-size: 12px; }
.help-card { border-color: var(--line); background: #191e26; padding: 28px; }
.help-card .eyebrow { display: none; }
.help-card h3 { font-size: 27px; }
.collab-mark { color: #d4c4a2; }
.connect-mark { color: #b5c7e9; }
.voice-home { background: #191e26; }
.voice-home > div:last-child { padding: 38px; }
.voice-home h3 { font: 28px/1.3 var(--sans); }
.voice-home-art { background: radial-gradient(ellipse, #576b9340, transparent); }
.waveform i { background: linear-gradient(#b9caff, #6d769c); }
.testimonials { padding-top: 45px; padding-bottom: 40px; }
.testimonials .section-heading h2 { font-size: 30px; }
.testimonials .section-heading .eyebrow { display: none; }
.empty-testimonial { padding: 24px 0; }
.empty-testimonial h3 { font-size: 16px; color: var(--muted); }
.closing { text-align: left; padding-block: 70px; border-top: 1px solid var(--line); }
.closing::before { background: none; }
.closing h2 { font-size: clamp(2.4rem, 4.8vw, 4rem); margin-bottom: 22px; }
.closing p { max-width: 490px; }
.closing .button-row { justify-content: flex-start; }
.page-top { padding-block: 72px 42px; }
.page-top h1 { font-size: clamp(2.8rem, 5.4vw, 5rem); max-width: 1000px; }
.contact-card h3 { font-size: 22px; }
.contact-card .eyebrow { display: none; }
.contact-card .service-icon { margin-bottom: 24px; }
.contact-card:last-child .service-icon { grid-row: 1 / 4; }
.contact-card:last-child .contact-actions { grid-row: 1 / 4; }
.donate-story h2 { font-size: 38px; }
.site-footer { border-color: var(--line); }
.footer-top p { font-size: 12px; }
.footer-bottom { font-family: var(--sans); font-size: 11px; letter-spacing: 0; }
.toast { background: #242d3e; border-color: #7588b1; }

.screenshot-dialog { width: min(1420px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 18px; border: 1px solid #687896; border-radius: 10px; color: var(--text); background: #171c24; overflow: auto; }
.screenshot-dialog::backdrop { background: #080b11d9; backdrop-filter: blur(5px); }
.screenshot-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.screenshot-dialog-header h2 { font: 20px/1.5 var(--sans); margin: 0; letter-spacing: -.02em; }
.screenshot-close { border: 1px solid #60708a; border-radius: 6px; background: #2a3342; padding: 8px 14px; font-size: 13px; flex-shrink: 0; }
.screenshot-dialog > img { display: block; width: 100%; height: auto; border-radius: 4px; }
.screenshot-help { font-size: 11px; margin: 16px 0 0; }
body.preview-open { overflow: hidden; }

@media (max-width: 1200px) {
  .hero-grid { gap: 40px; }
  .hero h1 { font-size: 6rem; }
  .hero-work { padding-top: 55px; }
}
@media (max-width: 1000px) {
  .nav-wrap { min-height: 74px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; min-height: 520px; }
  .hero h1 { font-size: 5rem; }
  .hero-work { padding-top: 45px; }
  .hero-shot-front { margin-top: 28px; }
  .hero-role { font-size: 12px; }
  .home-projects .project-card:first-child { gap: 28px; }
  .about-grid { gap: 45px; }
  .service-card { padding-inline: 16px; }
  .service-card h3 { font-size: 21px; }
  .service-card .text-link { gap: 10px; }
  .contact-card:last-child .service-icon { margin-bottom: 0; }
}
@media (max-width: 700px) {
  .section { padding-block: 54px; }
  .hero { padding-top: 44px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero h1 { font-size: clamp(4.4rem, 15vw, 6rem); }
  .hero-eyebrow { font-size: 15px; }
  .hero-intro { font-size: 14px; }
  .hero-work { width: 100%; max-width: 440px; justify-self: center; padding: 42px 6px 0; }
  .hero-shot-back { right: 16px; width: 83%; }
  .hero-shot-front { width: 95%; margin-top: 30px; }
  .hero-work-note { margin-top: 20px; font-size: 11px; }
  .hero-bottom { margin-top: 30px; font-size: 11px; }
  .hero-bottom > span { display: none; }
  .section-heading h2 { font-size: clamp(2.1rem, 8vw, 3rem); }
  .section-heading > p { margin-top: 16px; }
  .project-grid, .home-projects { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-projects .project-card:first-child { display: block; grid-column: auto; padding-bottom: 0; }
  .home-projects .project-card:first-child .project-body { padding: 22px 2px 30px; }
  .home-projects .project-card:first-child h3 { font-size: 27px; }
  .project-preview img { aspect-ratio: 2 / 1; }
  .preview-caption { bottom: 9px; right: 9px; font-size: 10px; padding: 5px 9px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .about-portrait { justify-self: start; width: 210px; margin-left: 10px; }
  .about-copy .lead { font-size: 20px; }
  .service-card { padding: 27px 0; border: 0; border-top: 1px solid #515d72; border-radius: 0; }
  .service-card h3 { font-size: 24px; }
  .service-card p { font-size: 14px; }
  .service-card .text-link { font-size: 13px; }
  .service-grid { gap: 12px; }
  .voice-home > div:last-child { padding: 28px; }
  .voice-home h3 { font-size: 25px; }
  .testimonials { padding-top: 30px; padding-bottom: 45px; }
  .closing { padding-block: 54px; }
  .closing h2 { font-size: 2.65rem; }
  .page-top { padding-block: 52px 36px; }
  .page-top h1 { font-size: clamp(2.6rem, 9.5vw, 4rem); }
  .contact-card:last-child .service-icon { margin-bottom: 24px; }
  .screenshot-dialog { padding: 12px; }
  .screenshot-dialog-header { gap: 12px; }
  .screenshot-dialog-header h2 { font-size: 16px; }
}
@media (max-width: 360px) {
  .home-page .hero h1 { font-size: 3.9rem; }
  .closing h2 { font-size: 2.3rem; }
  .hero-shot > span { font-size: 10px; padding-inline: 12px; }
}