/* Shared visual rules for the first refinement pass. */
:root {
  --sub: #b0b6b1;
  --meta: #afb5af;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --section-space: 88px;
}
body { font-size: 16px; }
.site-header { position: sticky; top: 0; z-index: 20; height: 80px; background: #0f1010f5; backdrop-filter: blur(14px); }
.site-header .desktop-nav { margin: 0 0 0 auto; gap: 24px; }
.site-header nav a { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
.mobile-menu { display: none; }
.skip-link { position: fixed; z-index: 40; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
#work, #writing, #about, #hobbies, #reading, #contact, #music, #gaming { scroll-margin-top: 104px; }
.hero-name h1 { letter-spacing: -.075em; }
.hero-name-foot { gap: 2px 12px; margin-top: 24px; font-size: 11px; }
.hero-name-foot a { min-height: 44px; }
.hero-name-foot a+a::before { margin-right: 12px; }
.hero-name { padding-top: 32px; }
.hero-bottom { align-items: start; gap: var(--space-md); padding-top: var(--space-md); }
.hero-bottom p { font-size: 15px; line-height: 1.65; max-width: 570px; color: var(--sub); }
.hero-disciplines { font-size: 12px; line-height: 1.65; }
.section { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.section-top, .hero-label { font-size: 11px; color: var(--meta); }
.section-heading { gap: 40px; margin: 40px 0; }
.section-heading h2, .about h2 { font-size: clamp(40px, 5vw, 72px); letter-spacing: -.065em; line-height: 1.05; }
.section-heading>p { font-size: 15px; line-height: 1.65; max-width: 340px; color: var(--sub); }
.work-grid { gap: 32px 24px; }
.work-image { height: auto; aspect-ratio: 1.6; }
.work-meta { font-size: 11px; line-height: 1.5; flex-wrap: wrap; }
.work-info { padding-top: 18px; padding-bottom: 24px; }
.work-info h3 { font-size: clamp(29px, 3vw, 42px); letter-spacing: -.055em; margin-top: 20px; }
.work-info p, .post p, .hobby-copy p { font-size: 15px; line-height: 1.65; color: var(--sub); }
.image-number, .hunt-image-caption, .graph-base { font-size: 10px; }
.writing-grid { gap: 28px; }
.post-meta { font-size: 11px; line-height: 1.6; margin-top: 20px; }
.post h3 { letter-spacing: -.04em; line-height: 1.18; }
.note-art { height: auto; aspect-ratio: 1.12; }
.note-art figcaption { padding: 55px 18px 18px; }
.note-art figcaption strong { font-size: 14px; }
.note-art figcaption span { font-size: 11px; }
.writing-foot { font-size: 10px; line-height: 1.7; gap: 32px; }
.about-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 7%; padding-top: 48px; align-items: start; }
.about-copy p { font-size: 16px; line-height: 1.8; margin: 0 0 20px; }
.about-photo { height: auto; aspect-ratio: .83; }
.music-intro p { font-size: 16px; line-height: 1.75; }
.hobby-top, .reading-column-head { font-size: 11px; line-height: 1.5; }
.music-timeline figcaption span, .book-index, .book-note { font-size: 11px; line-height: 1.5; }
.music-timeline figcaption p { font-size: 14px; }
.game-list li { font-size: 12px; }
.game-list small { font-size: 11px; }
.reading-grid { gap: 28px; }
.book-title { font-size: clamp(20px, 2vw, 28px); letter-spacing: -.035em; }
.featured-book p { font-size: 14px; line-height: 1.6; }
.contact-identity p { font-size: 15px; }
.contact-links a>span, .resume-link, .resume-download, footer { font-size: 12px; }
.resume-download { min-height: 44px; padding: 12px 0; }
@media (max-width: 1000px) {
  .site-header .desktop-nav { gap: 16px; }
  .site-header nav a { font-size: 12px; }
  .section-heading { align-items: start; }
}
@media (max-width: 700px) {
  :root { --section-space: 64px; }
  .site-header { height: 68px; }
  .site-header .desktop-nav { display: none; }
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu summary { display: flex; align-items: center; gap: 20px; padding: 12px 0 12px 16px; min-height: 44px; cursor: pointer; font-size: 14px; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu[open] summary span { transform: rotate(45deg); }
  .site-header .mobile-menu nav { position: absolute; top: 67px; left: 0; right: 0; margin: 0; display: grid; gap: 0; padding: 16px 5% 24px; background: #151616; border-bottom: 1px solid #535953; box-shadow: 0 20px 30px #0006; }
  .site-header .mobile-menu nav a { font-size: 17px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  #work, #writing, #about, #hobbies, #reading, #contact, #music, #gaming { scroll-margin-top: 88px; }
  .hero-photo { width: min(100%, 270px); height: 290px; }
  .hero-name { min-height: 0; gap: 24px; padding: 28px 0 20px; }
  .hero-name h1 { font-size: clamp(43px, 12.5vw, 78px); }
  .hero-name-foot { font-size: 11px; margin-top: 0; }
  .hero-name-foot a { line-height: 1.6; }
  .hero-bottom { gap: 20px; }
  .section-heading { margin: 28px 0 32px; }
  .section-heading>p { max-width: 100%; }
  .work-grid { gap: 20px; }
  .work-meta { font-size: 10px; }
  .work-image { aspect-ratio: 1.3; }
  .writing-grid { gap: 40px; }
  .note-art { aspect-ratio: 1.1; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .about-photo { width: 100%; max-width: 440px; aspect-ratio: .95; }
  .hobby-top, .reading-column-head { font-size: 10px; }
  .music-intro p { font-size: 15px; }
  .reading-grid { gap: 32px; }
  .contact-card h2 { font-size: clamp(40px, 11vw, 60px); }
  .contact-links { grid-template-columns: 1fr; }
  .contact-links strong { font-size: 19px; }
}

/* Fixed chart artwork; no inline styles required. */
.graph-axis i:nth-child(1) { height:29%; }
.graph-axis i:nth-child(2) { height:38%; }
.graph-axis i:nth-child(3) { height:35%; }
.graph-axis i:nth-child(4) { height:61%; }
.graph-axis i:nth-child(5) { height:56%; }
.graph-axis i:nth-child(6) { height:82%; }
.graph-axis i:nth-child(7) { height:74%; }
.graph-axis i:nth-child(8) { height:93%; }

/* Reading notes share the portfolio's restrained editorial rhythm. */
.read-note, .note-back { display:inline-flex; align-items:center; gap:16px; min-height:44px; text-decoration:underline; text-underline-offset:5px; }
.note-page { max-width:850px; margin:0 auto; padding:48px 24px 88px; }
.note-heading { margin:40px 0; }
.note-heading h1 { font-size:clamp(36px,6vw,72px); letter-spacing:-.06em; line-height:1.08; overflow-wrap:anywhere; margin:20px 0; }
.note-summary { font-size:20px; color:var(--sub); line-height:1.6; }
.note-page .note-art { aspect-ratio:1.5; margin:0 0 48px; }
.note-body { font-size:18px; line-height:1.85; overflow-wrap:anywhere; }
.note-body h2, .note-body h3, .note-body h4 { line-height:1.25; margin:2em 0 .7em; letter-spacing:-.035em; }
.note-body p, .note-body ul, .note-body ol, .note-body blockquote { margin:0 0 1.4em; }
.note-body a { text-decoration:underline; text-underline-offset:4px; }
.note-body img { max-width:100%; height:auto; filter:grayscale(1); transition:filter .3s; }
.note-body pre { overflow:auto; padding:24px; background:#1c1e1c; }
.note-body code { font-family:'DM Mono',monospace; font-size:.85em; }
.note-body blockquote { border-left:2px solid var(--orange); padding-left:24px; color:var(--sub); }
.note-body table { display:block; overflow:auto; border-collapse:collapse; }
.note-body th, .note-body td { padding:12px; border:1px solid var(--line); }
.note-back { margin-top:32px; }
@media(hover:hover) and (pointer:fine) { .note-body img:hover { filter:none; } }
@media(max-width:700px) { .note-page { padding:24px 0 64px; } .note-summary { font-size:18px; } .note-body { font-size:17px; } }