.page-home main { padding-top: 0; }
.obsession-hero { position: relative; isolation: isolate; margin: 0 -24px; padding: 26px 24px 0; overflow: clip; }
.obsession-field { position: relative; aspect-ratio: 1.7; container-type: inline-size; overflow: visible; background: transparent; border: 0; }
.obsession-field::before { content: ""; position: absolute; inset: 0; z-index: 24; pointer-events: none; opacity: .12; background: url('/images/obsession/paper-fibers.svg'); mix-blend-mode: multiply; }
.field-coordinate { position: absolute; top: 12px; left: 4px; z-index: 25; font: 8px/1.5 var(--mono); letter-spacing: 1.5px; color: var(--muted); writing-mode: vertical-rl; }
.fragment { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: rotate(var(--r)); z-index: var(--z); opacity: var(--opacity,1); transition: transform .18s ease, filter .18s ease; }
.fragment img { display: block; width: 100%; height: auto; }
.fragment-cover { filter: saturate(.62) sepia(.25) brightness(.87); box-shadow: 0 4px 12px #0004; }
.fragment-portrait { filter: var(--photo-filter); mask-image: linear-gradient(180deg,#000 78%,transparent 100%); }
.fragment-portrait img { aspect-ratio: .8; object-fit: cover; object-position: center top; }
.fragment-scan, .fragment-linework { mix-blend-mode: var(--print-blend); filter: var(--print-filter); }
.fragment-film { opacity: .8; box-shadow: 0 2px 8px #0003; }
.fragment-album { filter: saturate(.95) contrast(1.03) brightness(.95); box-shadow: 4px 5px 12px #0005; }
.fragment-album img { aspect-ratio: 1; }
.fragment:hover, .fragment:focus-visible { z-index: 40; opacity: 1; transform: rotate(0deg) scale(1.045); }
.fragment:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.fragment-cover:hover { filter: saturate(.9) sepia(.1); }
.fragment-label { position: absolute; bottom: 0; left: 0; width: max-content; max-width: 220px; padding: 5px 8px; background: var(--ink); color: var(--paper); font: 10px/1.5 var(--mono); opacity: 0; pointer-events: none; transform: translateY(100%); }
.fragment:hover .fragment-label, .fragment:focus-visible .fragment-label { opacity: 1; }
.fragment-scan .fragment-label, .fragment-linework .fragment-label, .fragment-portrait .fragment-label { display: none; }
.f-turing-paper { --x: 3%; --y: -6%; --w: 23%; --r: -15deg; --z: 1; --opacity: .52; }
.f-lorenz { --x: 26%; --y: -8%; --w: 48%; --r: 14deg; --z: 0; --opacity: .4; }
.f-spectrum { --x: -3%; --y: 61%; --w: 32%; --r: -5deg; --z: 1; --opacity: .55; }
.f-rings { --x: 71%; --y: 66%; --w: 26%; --r: 12deg; --z: 3; --opacity: .8; }
.f-mandelbrot { --x: -3%; --y: 24%; --w: 36%; --r: 12deg; --z: 2; --opacity: .36; }
.f-gradient { --x: 30%; --y: 65%; --w: 42%; --r: -8deg; --z: 5; --opacity: .7; }
.f-shannon { --x: 3%; --y: 18%; --w: 34%; --r: -4deg; --z: 5; --opacity: .9; }
.f-mlp { --x: 36%; --y: 20%; --w: 28%; --r: -10deg; --z: 4; --opacity: .75; }
.f-strang { --x: 14%; --y: 0%; --w: 18%; --r: -13deg; --z: 6; }
.f-rudin { --x: 1%; --y: 55%; --w: 13%; --r: -7deg; --z: 11; }
.f-watermelon { --x: 29%; --y: 70%; --w: 15%; --r: 11deg; --z: 16; }
.f-ideology { --x: 79%; --y: 36%; --w: 19%; --r: 13deg; --z: 15; }
.f-d2l { --x: 48%; --y: 33%; --w: 21%; --r: -12deg; --z: 17; }
.f-sicp { --x: 35%; --y: 3%; --w: 30%; --r: 7deg; --z: 8; }
.f-turing { --x: 68%; --y: -3%; --w: 22%; --r: -5deg; --z: 6; }
.f-hinton { --x: 50%; --y: 65%; --w: 21%; --r: 8deg; --z: 14; }
.f-lacan { --x: 87%; --y: 7%; --w: 15%; --r: 6deg; --z: 9; }
.f-crimson { --x: 31%; --y: 21%; --w: 18%; --r: -6deg; --z: 12; }
.f-neural { --x: 2%; --y: 84%; --w: 32%; --r: 7deg; --z: 15; }
.f-gru { --x: 66%; --y: 86%; --w: 34%; --r: -5deg; --z: 18; }
.f-transformer { --x: 65%; --y: 21%; --w: 21%; --r: 4deg; --z: 10; --opacity: .92; }
.hero-name { position: absolute; left: 5%; top: 38%; z-index: 20; pointer-events: none; }
.hero-name .eyebrow { display: inline-block; margin: 0 0 14px; padding: 2px 4px; background: var(--sheet); color: var(--accent); font-size: 9px; }
.hero-name h1 { position: relative; margin: 0; font: 800 9.5cqw/1 var(--sans); letter-spacing: -.075em; color: var(--ink); transform: rotate(-2deg); transform-origin: left; }
.hero-name h1 span { color: var(--accent); }
.wordmark { display: block; overflow: visible; }
.wordmark-echo { color: var(--ink); opacity: .38; }
.identity-avatar { display: block; flex: none; width: 42px; height: 42px; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--sheet); outline: 1px solid var(--line); box-shadow: 2px 2px 0 var(--edge-shadow); }
.masthead-brand { align-items: center; gap: 12px; }
.hero-signature { display: flex; align-items: center; gap: 1.3cqw; }
.hero-signature .identity-avatar { width: 8cqw; height: 8cqw; transform: rotate(4deg); border-width: 4px; }
.hero-name .wordmark { width: 49cqw; height: auto; color: var(--accent); }
.masthead-brand .wordmark { width: 170px; height: auto; color: var(--ink); }
.masthead-brand .wordmark-echo, .masthead-brand .wordmark-swash { display: none; }
.reference-album { filter: saturate(.88); }
.references-other .piece-2 { width: 58%; left: 19%; top: 6%; transform: rotate(-8deg); }
.name-footnote { display: inline-block; margin: 15px 0 0; padding: 3px 5px; background: var(--sheet); color: var(--body); font: 8px/1.5 var(--mono); letter-spacing: 1.4px; }
.code-fragment { position: absolute; left: 27%; top: 53%; z-index: 19; padding: 9px 12px; background: var(--sheet); color: var(--body); border: 1px solid var(--line); font: 9px/1.6 var(--mono); transform: rotate(-7deg); box-shadow: 2px 3px 12px #0003; }
.code-fragment span { color: var(--muted); }
.code-fragment b { color: var(--accent); font-weight: 500; }
.margin-words { position: absolute; right: 29%; top: 5%; z-index: 9; color: var(--accent); font: 700 9px/1.6 var(--mono); letter-spacing: 2px; transform: rotate(90deg); transform-origin: right top; }
.field-axis { position: absolute; inset: auto 0 8px; z-index: 26; display: flex; justify-content: space-between; pointer-events: none; color: var(--muted); font: 8px/1.5 var(--mono); letter-spacing: 1.5px; }
.field-axis span { padding: 2px 5px; background: var(--sheet); }
.hero-afterword { position: relative; z-index: 28; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin: 18px 12px 8px; padding: 18px 24px; background: var(--sheet); background-image: url('/images/obsession/paper-fibers.svg'); border-left: 3px solid var(--accent); box-shadow: 3px 4px 0 var(--edge-shadow); }
.hero-afterword p { margin: 0; font: 14px/1.75 var(--sans); }
.hero-afterword p span { color: var(--muted); }
.hero-links { display: flex; gap: 18px; flex-wrap: wrap; font: 11px/1.5 var(--mono); }
.hero-links a { color: var(--accent); text-decoration: underline; }
@media (max-width: 1120px) { .hero-name .eyebrow { font-size: 8px; } .code-fragment { font-size: 8px; padding: 7px; } .hero-afterword p { font-size: 14px; } }
@media (max-width: 860px) { .obsession-field { aspect-ratio: 1.25; } .hero-name { top: 39%; } .f-hinton { --y: 61%; } .f-rudin { --y: 62%; } .f-watermelon { --y: 75%; } .f-gradient { --y: 70%; } }
@media (max-width: 560px) {
  .page-home main { padding-top: 0; }
  .obsession-hero { margin-inline: -14px; padding: 18px 14px 0; }
  .obsession-field { aspect-ratio: .63; margin-inline: -9px; }
  .field-coordinate { font-size: 6px; left: 2px; top: 16px; }
  .hero-name { left: 3%; top: 37%; }
  .hero-name h1 { font-size: 15.5cqw; }
  .hero-name .wordmark { width: 70cqw; }
  .hero-signature { gap: 3cqw; }
  .hero-signature .identity-avatar { width: 13cqw; height: 13cqw; border-width: 2px; }
  .masthead-brand { gap: 9px; }
  .masthead-brand .wordmark { width: 132px; }
  .masthead-brand .identity-avatar { width: 32px; height: 32px; }
  .hero-name .eyebrow { font-size: 7px; margin-bottom: 12px; }
  .name-footnote { margin-top: 12px; font-size: 6px; letter-spacing: 1px; }
  .f-turing-paper { --x: 0%; --y: 2%; --w: 35%; }
  .f-strang { --x: 12%; --y: 0%; --w: 27%; }
  .f-sicp { --x: 31%; --y: 9%; --w: 47%; --r: 5deg; }
  .f-turing { --x: 61%; --y: -2%; --w: 33%; }
  .f-lacan { --x: 79%; --y: 20%; --w: 22%; --r: -5deg; }
  .f-crimson { --x: 2%; --y: 21%; --w: 33%; --r: -8deg; }
  .f-lorenz { --x: 30%; --y: 4%; --w: 66%; }
  .f-shannon { --x: -2%; --y: 22%; --w: 54%; }
  .f-mlp { --x: 28%; --y: 20%; --w: 45%; }
  .f-mandelbrot { --x: -9%; --y: 34%; --w: 58%; }
  .f-transformer { --x: 56%; --y: 24%; --w: 32%; }
  .f-d2l { --x: 63%; --y: 44%; --w: 32%; --r: 9deg; }
  .f-ideology { --x: 4%; --y: 59%; --w: 30%; --r: -12deg; }
  .f-hinton { --x: 31%; --y: 58%; --w: 37%; --r: 6deg; }
  .f-rudin { --x: 1%; --y: 80%; --w: 20%; --r: -9deg; }
  .f-watermelon { --x: 68%; --y: 70%; --w: 28%; }
  .f-neural { --x: 16%; --y: 88%; --w: 53%; }
  .f-gru { --x: 58%; --y: 88%; --w: 43%; }
  .f-gradient { --x: 24%; --y: 75%; --w: 65%; }
  .f-rings { --x: 57%; --y: 76%; --w: 43%; }
  .f-spectrum { --x: -6%; --y: 72%; --w: 44%; }
  .code-fragment { left: 28%; top: 53%; font-size: 6px; padding: 5px; }
  .margin-words { display: none; }
  .hero-afterword { gap: 16px; margin: 12px 0 6px; padding: 16px; }
  .hero-afterword p { font-size: 14px; }
  .hero-links { font-size: 10px; gap: 24px; }
  .fragment-label { font-size: 8px; max-width: 150px; }
}
@media print { .obsession-field { display: none; } .hero-afterword { display: block; } }

@media print {
  :root, :root[data-theme] { --paper: #fff; --surface: #f5f5f5; --sheet: #fff; --sheet-alt: #fff; --edge-shadow: transparent; --ink: #000; --body: #111; --muted: #444; --line: #ccc; --accent: #111; }
  .section-head, .subject-index a, .hero-afterword, .github-calendar, .site-footer, .page-head h1, .page-head .lead { background: white; box-shadow: none; }
}