/* Shared theme, small ink accents, and image-safe transformation placeholders. */
:root { color-scheme:light;--surface:#f3f4f4;--skeleton:#e4e5e2;--skeleton-line:#d1d2ce; }
.theme-switch { flex:0 0 44px;height:44px;display:grid;place-items:center;background:var(--paper);color:var(--ink);border:1px solid var(--ink);font-size:23px;line-height:1; }
.theme-switch:hover,.theme-switch:focus-visible { background:var(--yellow);color:#111; }
.header { gap:18px; }
.header nav { gap:22px; }
.media-shell { position:relative; }
.media-skeleton { display:none;position:absolute;inset:0;z-index:5;background:var(--surface);padding:8%;pointer-events:none; }
.media-skeleton i { display:block;background:var(--skeleton);height:12%;margin-bottom:5%; }
.media-skeleton i:first-child { height:58%;border:1px solid var(--skeleton-line);background:linear-gradient(135deg,var(--skeleton) 49.7%,var(--skeleton-line) 50%,var(--skeleton) 50.3%); }
.media-skeleton i:last-child { width:62%; }
[data-media] .media-skeleton { display:block; }
[data-media=skeleton] .media-shell img { visibility:hidden!important; }
[data-mode=simple] .project-link:hover .image-window { transform:none; }
[data-mode=simple] .project-art { overflow:hidden; }
[data-mode=simple] .section-heading h2:before { content:'';display:inline-block;width:12px;height:24px;background:var(--yellow);border-bottom:5px solid #111;margin-right:12px; }
[data-theme=dark] { color-scheme:dark;--paper:#141414;--ink:#f3f3ed;--muted:#aaa;--line:#3e3e3a;--surface:#222320;--skeleton:#343530;--skeleton-line:#53544c; }
[data-theme=dark] .header,[data-theme=dark][data-mode=simple] .header { background:#141414f5; }
[data-theme=dark] :is(.section-heading,.project-info,.work-toolbar),[data-theme=dark][data-mode=simple] .project-link { background:var(--paper);color:var(--ink); }
[data-theme=dark] :is(.project-link,.project-art,.project-proof,.hero,.capabilities,.capabilities>div) { border-color:var(--line); }
[data-theme=dark] :is(.project-art,.case-cover,.case-section figure),[data-theme=dark][data-mode=simple] :is(.project-art,.case-cover) { background:var(--surface); }
[data-theme=dark] .image-window { background:#e9eae5; }
[data-theme=dark][data-mode=simple] .image-window { background:transparent; }
[data-theme=dark] :is(.hero-intro p,.project-info p,.project-proof span,.journal-heading p,.note-intro,.case-deck,.case-section p,.case-source p,.case-meta p,.form-help,.form-status,.contact-intro p),[data-theme=dark][data-mode=simple] :is(.hero-intro p,.project-info p,.about-copy p,.about-top) { color:#bcbdb6; }
[data-theme=dark] :is(.project-info .text-link,.light-link),[data-theme=dark][data-mode=simple] :is(.light-link,.about-title h2 em,.about-copy .large-copy) { color:var(--ink);border-color:var(--line); }
[data-theme=dark] .about-section,[data-theme=dark][data-mode=simple] .about-section { background:#1c1d19;color:var(--ink);border-color:var(--line); }
[data-theme=dark] .contact-section,[data-theme=dark][data-mode=simple] .contact-section { background:var(--paper); }
[data-theme=dark] :is(input,textarea) { color:var(--ink);border-color:#686962; }
[data-theme=dark] :is(input,textarea)::placeholder { color:#92948b; }
[data-theme=dark] :is(.identity>span,.project-info>.mono,.case-facts .mono,.case-meta .mono,.hero-rail,.muted,.note-topic,.note-byline,.case-section figcaption,.note-row>.mono,.copyright) { color:#aeb0a7; }
[data-theme=dark][data-mode=expressive] .contact-intro h2>span { color:#111; }
[data-theme=dark] :is(.button-dark,.mode-switch) { background:var(--yellow);color:#111;border-color:var(--yellow); }
[data-theme=dark] :is(.button-dark,.mode-switch):hover { background:#f3f3ed;color:#111; }
[data-theme=dark] .next-project,[data-theme=dark][data-mode=simple] .next-project { background:#222320;color:var(--ink); }
[data-theme=dark] .next-project:hover h2 { color:var(--yellow); }
[data-theme=dark] .note-row:hover { background:#303127; }
[data-theme=dark] .hero h1 .highlight { color:var(--ink); }
[data-theme=dark][data-mode=expressive] .hero h1 .highlight { color:#111; }
[data-theme=dark][data-mode=expressive] .hero h1 { text-shadow:5px 3px 0 #ffffff22; }
[data-theme=dark] .noise-piece { color:#111; }
[data-theme=dark] :is(.work-callout,.interlude,.ticker,.print-stamp,.art-label,.art-scale,.print-label,.project-index,.noise-ribbon,.mouse-satellite) { color:#111; }
[data-theme=dark] .ticker { background:var(--yellow); }
[data-theme=dark] .heatmap-panel { background:#20211e;color:var(--ink);border-color:#666; }
[data-theme=dark] .heatmap-toggle { background:#20211e;color:var(--ink); }
[data-theme=dark] .heatmap-panel :is(p,.heatmap-meta,.heatmap-empty) { color:#bcbdb6; }
[data-theme=dark] .heatmap-actions button { color:#111; }
@media(max-width:760px) {
  .header,[data-mode=simple] .header { gap:8px; }
  .theme-switch { flex-basis:34px;height:34px;font-size:20px; }
  .header nav { gap:20px; }
}
/* Profile links live in the header as icons; the footer keeps only the essentials. */
.nav-social { display:flex;align-items:center;gap:2px;border-left:1px solid var(--line);padding-left:18px; }
/* Scoped past the mobile nav's a:nth-child rules, which target the text links. */
.header nav .nav-social .nav-icon { display:grid;place-items:center;width:40px;height:40px; }
.nav-icon { color:var(--ink); }
.nav-icon svg { width:18px;height:18px; }
[data-mode=expressive] .nav-icon:hover { background:var(--yellow);color:#111; }
.note-placeholder { pointer-events:none; }
.note-placeholder h3 { color:var(--muted); }
footer { display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 4.2%; }
footer .copyright { border:0;padding:0;font-size:9px; }
footer .to-top { border:0;padding:0; }
@media(max-width:760px) {
  .header nav .nav-social { margin-left:auto;border:0;padding:0; }
  .header nav .nav-social .nav-icon { width:36px;height:36px; }
  footer { padding:24px 6%; }
}
/* Captioned clips and images inside a post. Clips are 16:9, so space is reserved before they load. */
.note-figure { margin:12px 0 40px; }
.note-figure :is(video,img) { display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#111; }
.note-figure figcaption { margin-top:12px;color:var(--muted);font-size:11px;line-height:1.5;letter-spacing:.02em;text-transform:none; }
[data-mode=simple] .note-figure figcaption { color:var(--s-subtle); }
/* Tablet widths: the single-row header (name, nav, profile icons, two buttons) no longer fits
   below about 1000px, so it uses the phone layout's two rows: name and buttons, then nav. */
@media (min-width:761px) and (max-width:1000px) {
  .header,[data-mode=simple] .header { height:112px;flex-wrap:wrap;align-content:center;gap:10px 18px;padding-top:14px;padding-bottom:10px; }
  .header .identity { flex:1; }
  .header nav { order:3;flex-basis:100%;justify-content:flex-start;margin:0; }
  .header nav .nav-social { margin-left:auto;border:0;padding:0; }
  .noise-layer { top:112px; }
  html { scroll-padding-top:130px; }
}
/* Phones: four nav links plus three profile icons need tighter spacing to stay on one line. */
@media (max-width:480px) {
  .header nav,[data-mode=simple] .header nav { gap:10px;font-size:12px; }
  .header nav>a { white-space:nowrap; }
  .header nav .nav-social { gap:0; }
  .header nav .nav-social .nav-icon { width:32px;height:32px; }
}
/* Post body blocks: section headings, lists, code, and links inside running text. */
.note-body h2 { font-size:28px;line-height:1.2;letter-spacing:-.03em;margin:48px 0 16px; }
.note-body h2:first-child { margin-top:0; }
.note-body ul { margin:0 0 25px;padding-left:1.1em; }
.note-body li { font-size:18px;line-height:1.75;margin-bottom:10px;padding-left:4px; }
.note-body li::marker { color:var(--muted); }
.note-body p a,.note-body li a { text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--muted);transition:text-decoration-color .2s; }
.note-body p a:hover,.note-body li a:hover { text-decoration-color:currentColor; }
.note-body :is(p,li) code { font-family:'IBM Plex Mono',monospace;font-size:.85em;padding:.1em .35em;background:color-mix(in srgb,currentColor 8%,transparent); }
.note-code { margin:0 0 28px;padding:18px 20px;overflow-x:auto;background:#141414;color:#f3f3ed;font:13px/1.65 'IBM Plex Mono',monospace;white-space:pre; }
[data-theme=dark] .note-code { background:#222320;border:1px solid var(--line); }
[data-mode=simple] .note-body li::marker { color:var(--s-subtle); }
[data-mode=simple] .note-body :is(p,li) a { text-decoration-color:var(--s-line-strong); }
@media (max-width:760px) {
  .note-body h2 { font-size:24px;margin-top:40px; }
  .note-body li { font-size:17px; }
  .note-code { font-size:12px;padding:14px 16px; }
}