/* FIELDWORK 1.1 — paper, ink, and one directional intervention. */
:root {
  --paper:#f1f0e7; --surface:#faf9f3; --ink:#242621; --muted:#62655d;
  --rule:#bfc2b5; --accent:#b53728; --wash:#e7e8dc; --blue:#245971;
  --jade:#416c5c; --on-dark:#bec3b0; --sans:Arial,Helvetica,sans-serif;
  --mono:'Courier New',Courier,monospace; --max:1376px;
  --gutter:clamp(20px,4.2vw,72px); --ease:cubic-bezier(.2,.7,.2,1);
  --feedback:140ms; --transition:240ms; --comparison:360ms; --settle:480ms;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
/* A page transition already supplies motion on return; land on its card immediately. */
html:has(.project:target) { scroll-behavior:auto; }
body { margin:0; border-top:5px solid var(--ink); color:var(--ink); background:var(--paper); font:1rem/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
::selection { color:var(--paper); background:var(--accent); }
a { color:inherit; text-underline-offset:5px; text-decoration-thickness:1px; transition:color var(--feedback),border-color var(--feedback); }
button,input { font:inherit; }
button,a,input { touch-action:manipulation; }
button { color:inherit; cursor:pointer; border-radius:0; }
button:disabled { cursor:default; }
[hidden] { display:none!important; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.primary:focus-visible,.skip-link:focus-visible,.small-button[aria-pressed=true]:focus-visible { outline-color:var(--ink); }
.perspective :focus-visible { outline-color:var(--paper); }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { overflow-wrap:anywhere; }
svg,img { display:block; max-width:100%; }
.wrap { max-width:var(--max); margin:auto; padding-inline:var(--gutter); }
.eyebrow { font:0.75rem/1.5 var(--mono); letter-spacing:.035em; text-transform:uppercase; }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px 16px; background:var(--ink); color:var(--paper); z-index:30; }
.skip-link:focus { top:12px; outline-color:var(--paper); }
.header { display:flex; justify-content:space-between; align-items:center; gap:32px; min-height:96px; padding-block:16px; border-bottom:1px solid var(--ink); }
.identity { display:flex; align-items:center; gap:16px; min-height:44px; min-width:0; text-decoration:none; }
.mark { flex:none; width:34px; height:38px; color:var(--accent); }
.identity strong { display:block; font-size:1.125rem; line-height:1.3; letter-spacing:-.025em; overflow-wrap:anywhere; }
.identity small { display:block; font:0.75rem/1.5 var(--mono); color:var(--muted); margin-top:4px; }
.nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px 28px; }
.nav a { position:relative; display:flex; align-items:center; gap:8px; min-height:44px; font-size:.875rem; text-decoration:none; }
.nav a:hover { color:var(--accent); }
.hero { padding-top:24px; }
.hero-kicker { display:flex; justify-content:space-between; gap:24px; color:var(--muted); }
.kicker-dot { display:inline-block; width:6px; height:6px; background:var(--accent); margin:0 8px 2px 0; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; padding-block:40px; }
.hero-copy { min-width:0; }
.profile-name { font-size:1.75rem; font-weight:700; letter-spacing:-.035em; line-height:1.2; }
.profile-role { margin-top:8px; font-size:1rem; color:var(--muted); }
.hero h1 { font-size:clamp(64px,6.45vw,94px); font-weight:700; line-height:.99; letter-spacing:-.055em; max-width:10ch; margin:28px 0 24px; }
.red { color:var(--accent); }
.hero-intro { font-size:1.0625rem; color:var(--muted); line-height:1.65; max-width:48ch; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; margin-top:24px; }
.button,.small-button,.close-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:44px; min-width:44px; padding:10px 16px; border:1px solid var(--ink); background:transparent; font-size:.875rem; line-height:1.5; text-decoration:none; transition:background-color var(--feedback),color var(--feedback),border-color var(--feedback),transform var(--feedback) var(--ease); }
.button:active,.small-button:active,.close-button:active { transform:translateY(1px); }
.primary { color:var(--paper); background:var(--ink); }
.button:hover,.close-button:hover { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.text-link { position:relative; display:inline-flex; align-items:center; gap:16px; min-height:44px; padding:4px 0; font-size:.875rem; line-height:1.5; border-bottom:1px solid var(--ink); text-decoration:none; }
.text-link::after,.nav a::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--feedback) var(--ease); pointer-events:none; }
.nav a::after { bottom:4px; }
.text-link:is(:hover,:focus-visible)::after,.nav a:is(:hover,:focus-visible)::after { transform:scaleX(1); }
.text-link:hover { color:var(--accent); border-color:var(--accent); }
.text-link span,.button span { display:inline-block; transition:transform var(--feedback) var(--ease); }
.text-link:is(:hover,:focus-visible) span,.button:is(:hover,:focus-visible) span { transform:translate(3px,-3px); }
.profile-links { margin-top:12px; display:flex; gap:24px; flex-wrap:wrap; }
.profile-links .text-link { color:var(--muted); border-bottom-color:var(--rule); }
.study { min-width:0; border:1px solid var(--rule); background:var(--wash); }
.study-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--rule); }
.study-top span:last-child { color:var(--muted); }
.stage { position:relative; aspect-ratio:1.35; overflow:hidden; background-image:linear-gradient(#62655d0c 1px,transparent 1px),linear-gradient(90deg,#62655d0c 1px,transparent 1px); background-size:40px 40px; }
.stage:after { content:''; position:absolute; inset:16px; border:1px solid var(--rule); pointer-events:none; }
.stage canvas,.stage .fallback { position:absolute; inset:0; width:100%; height:100%; }
.stage .fallback svg { width:100%; height:100%; }
.stage canvas { opacity:0; touch-action:pan-y; cursor:grab; }
.stage canvas:active { cursor:grabbing; }
.stage.ready canvas { opacity:1; }
.stage.ready .fallback { visibility:hidden; }
.stage-label { position:absolute; font:10px/1.5 var(--mono); color:var(--muted); pointer-events:none; }
.stage-label.top { top:28px; left:28px; }
.stage-label.bottom { right:28px; bottom:28px; text-align:right; }
.study-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:12px; border-top:1px solid var(--rule); }
.mode-group,.rotation-controls { display:flex; gap:4px; }
.small-button { padding:8px 12px; font-family:var(--mono); border-color:var(--muted); }
.small-button[aria-pressed=true] { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.small-button:hover { border-color:var(--ink); background:var(--surface); }
.small-button[aria-pressed=true]:hover { background:var(--ink); }
.range-label { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.875rem; }
input[type=range] { width:100px; min-height:44px; accent-color:var(--accent); cursor:pointer; }
.study-caption { padding:12px 16px; border-top:1px solid var(--rule); font-size:.8125rem; line-height:1.5; color:var(--muted); }
.research-axes { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--ink); }
.axis { display:flex; align-items:center; gap:16px; padding:16px 0; font-size:.875rem; font-weight:700; }
.axis+.axis { border-left:1px solid var(--rule); padding-left:24px; }
.number { font:0.75rem/1.5 var(--mono); color:var(--accent); }
.section { padding-top:96px; }
.section-heading { position:relative; display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:32px; }
.section-heading::after { content:''; position:absolute; bottom:-33px; left:0; width:64px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--settle) var(--ease); pointer-events:none; }
.section-heading.is-in-view::after { transform:scaleX(1); }
.section-heading>div { max-width:760px; }
.section .eyebrow,.contact .eyebrow { color:var(--accent); }
.section h2,.contact h2 { font-size:clamp(32px,3.8vw,54px); line-height:1.08; letter-spacing:-.035em; margin-top:16px; }
.section-heading>.text-link { flex:none; }
.heading-note { max-width:32ch; font-size:1rem; color:var(--muted); }
.project { min-width:0; padding:32px 0 40px; border-top:1px solid var(--ink); scroll-margin-top:24px; }
.project-card { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:48px; background:var(--paper); transform:none; transition:transform var(--transition) var(--ease),box-shadow var(--transition) var(--ease); }
.project:is(:hover,:focus-within) .project-card { box-shadow:0 14px 28px -14px #24262145; }
.project-art { min-width:0; background:var(--wash); border:1px solid var(--rule); transition:border-color var(--feedback); }
.project:is(:hover,:focus-within) .project-art { border-color:var(--muted); }
.project-visual { position:relative; overflow:hidden; background:var(--wash); }
.project-art img { width:100%; height:auto; aspect-ratio:720/424; object-fit:contain; }
.motion-cover { position:relative; overflow:hidden; width:100%; aspect-ratio:720/424; background:var(--wash); isolation:isolate; }
.motion-cover>.motion-base,.gbc-motion-layer,.tele-aloha-caller,.tele-aloha-caller img { position:absolute; inset:0; display:block; width:100%; height:100%; }
.project-visual .motion-cover img { aspect-ratio:auto; object-fit:contain; background:transparent; }
.gbc-motion-layer { z-index:1; }
.gbc-sight-line { stroke:var(--rule); stroke-width:6; stroke-linecap:round; stroke-dasharray:24 16; }
.gbc-presence-stroke { stroke:#176b9d; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; opacity:1; }
.gbc-pulse { fill:none; stroke:var(--accent); stroke-width:4; opacity:0; transform-box:fill-box; transform-origin:center; }
.tele-aloha-caller { z-index:1; opacity:0; will-change:opacity; }
.tele-aloha-person { z-index:0; }
.tele-aloha-arm { z-index:1; transform:none; transform-origin:42% 55%; will-change:transform; }
.motion-cover.is-returning .gbc-presence-stroke { transition:stroke-dashoffset 320ms var(--ease),opacity 320ms var(--ease); }
.motion-cover.is-returning .tele-aloha-caller { transition:opacity 360ms var(--ease); }
.motion-cover.is-returning .tele-aloha-arm { transition:transform 360ms var(--ease); }
.tele-aloha-motion.is-resting .tele-aloha-caller { opacity:1; }
.tele360-motion { display:block; width:100%; height:auto; aspect-ratio:720/424; background:var(--wash); }
.tele360-performer { transform-box:view-box; transform-origin:var(--tele360-pivot); animation:tele360-sway 2.8s ease-in-out infinite; animation-play-state:paused; }
.tele360-flow { animation:tele360-travel 1.6s linear infinite; animation-play-state:paused; }
@keyframes gbc-flow { to { stroke-dashoffset:-40; } }
@keyframes gbc-presence-1 { 0% { stroke-dashoffset:0; } .01% { stroke-dashoffset:1; animation-timing-function:cubic-bezier(.2,.7,.25,1); } 21.1% { stroke-dashoffset:0; } 73.6% { stroke-dashoffset:0; animation-timing-function:cubic-bezier(.55,0,.8,.3); } 94.6%,100% { stroke-dashoffset:1; } }
@keyframes gbc-presence-2 { 0% { stroke-dashoffset:0; } .01% { stroke-dashoffset:1; } 7.5% { stroke-dashoffset:1; animation-timing-function:cubic-bezier(.2,.7,.25,1); } 32.1% { stroke-dashoffset:0; } 62.5% { stroke-dashoffset:0; animation-timing-function:cubic-bezier(.55,0,.8,.3); } 87.1%,100% { stroke-dashoffset:1; } }
@keyframes gbc-presence-3 { 0% { stroke-dashoffset:0; } .01% { stroke-dashoffset:1; } 13.9% { stroke-dashoffset:1; animation-timing-function:cubic-bezier(.2,.7,.25,1); } 29.6% { stroke-dashoffset:0; } 65% { stroke-dashoffset:0; animation-timing-function:cubic-bezier(.55,0,.8,.3); } 80.7%,100% { stroke-dashoffset:1; } }
@keyframes gbc-presence-4 { 0% { stroke-dashoffset:0; } .01% { stroke-dashoffset:1; } 20% { stroke-dashoffset:1; animation-timing-function:cubic-bezier(.2,.7,.25,1); } 28.2% { stroke-dashoffset:0; } 66.4% { stroke-dashoffset:0; animation-timing-function:cubic-bezier(.55,0,.8,.3); } 74.6%,100% { stroke-dashoffset:1; } }
@keyframes gbc-presence-5 { 0% { stroke-dashoffset:0; } .01% { stroke-dashoffset:1; } 23.8% { stroke-dashoffset:1; animation-timing-function:cubic-bezier(.2,.7,.25,1); } 31.3% { stroke-dashoffset:0; } 63.4% { stroke-dashoffset:0; animation-timing-function:cubic-bezier(.55,0,.8,.3); } 70.9%,100% { stroke-dashoffset:1; } }
@keyframes gbc-presence-6 { 0% { stroke-dashoffset:0; } .01% { stroke-dashoffset:1; } 27.7% { stroke-dashoffset:1; animation-timing-function:cubic-bezier(.2,.7,.25,1); } 34.8% { stroke-dashoffset:0; } 59.8% { stroke-dashoffset:0; animation-timing-function:cubic-bezier(.55,0,.8,.3); } 67%,100% { stroke-dashoffset:1; } }
@keyframes gbc-presence-7 { 0% { stroke-dashoffset:0; } .01% { stroke-dashoffset:1; } 31.4% { stroke-dashoffset:1; animation-timing-function:cubic-bezier(.2,.7,.25,1); } 37.5% { stroke-dashoffset:0; } 57.1% { stroke-dashoffset:0; animation-timing-function:cubic-bezier(.55,0,.8,.3); } 63.2%,100% { stroke-dashoffset:1; } }
@keyframes gbc-pulse { 0% { opacity:0; transform:scale(.72); } .01% { opacity:.42; } 8%,100% { opacity:0; transform:scale(2.15); } }
@keyframes tele-aloha-call { 0%,7% { opacity:0; } 28%,74% { opacity:1; } 92%,100% { opacity:0; } }
@keyframes tele-aloha-wave { 0%,30%,74%,100% { transform:rotate(0); } 40% { transform:rotate(-.7deg); } 50% { transform:rotate(.4deg); } 59% { transform:rotate(-.24deg); } 68% { transform:rotate(.1deg); } }
@keyframes tele360-travel { to { stroke-dashoffset:-47; } }
@keyframes tele360-sway {
  0%,50%,100% { transform:translateY(0) rotate(0); }
  25% { transform:translateY(-.8px) rotate(.7deg); }
  75% { transform:translateY(-.8px) rotate(-.7deg); }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .project-art:hover .tele360-motion .cover-motion { animation-play-state:running; }
  .project:is(:hover,:focus-within) .project-card {
    transform:perspective(1200px) translate3d(0,-6px,0) rotateX(calc(var(--pointer-y,0)*-2.5deg)) rotateY(calc(var(--pointer-x,0)*2.5deg)) scale(1.018);
  }
  .project.is-tilting .project-card { transition-duration:var(--feedback); }
}
@media(prefers-reduced-motion:no-preference) {
  .project-dialog[open] .cover-motion,.standalone .cover-motion { animation-play-state:running; }
  :where(.project-art.is-playing,.project-dialog[open],.standalone) .gbc-sight-line { animation:gbc-flow 3.2s linear infinite; }
  :where(.project-art.is-playing,.project-dialog[open],.standalone) .gbc-presence-stroke { animation:var(--gbc-animation) 5.6s linear infinite both; }
  :where(.project-art.is-playing,.project-dialog[open],.standalone) .gbc-pulse { animation:gbc-pulse 5.6s ease-out infinite; }
  :where(.project-art.is-playing,.project-dialog[open],.standalone) .tele-aloha-caller { animation:tele-aloha-call 3.63s var(--ease) infinite; }
  :where(.project-art.is-playing,.project-dialog[open],.standalone) .tele-aloha-arm { animation:tele-aloha-wave 3.63s var(--ease) infinite; }
}
.is-navigating .project-card { transform:none!important; transition:none!important; }
.detail-art figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; padding:12px 16px; border-top:1px solid var(--rule); color:var(--muted); background:var(--paper); font:0.8125rem/1.5 var(--mono); }
.project-content { min-width:0; }
.project-content h3 { font-size:clamp(24px,2.2vw,32px); line-height:1.2; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance; }
.project-content h3 a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; text-decoration:none; }
.project-arrow { flex:none; font-size:28px; color:var(--accent); }
.project:is(:hover,:focus-within) h3 a { color:var(--accent); }
.summary { font-size:1rem; color:var(--muted); line-height:1.65; }
.project:nth-of-type(even) .project-art { order:2; }
.project:nth-of-type(even) .project-content { order:1; }
.work-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font:0.75rem/1.5 var(--mono); color:var(--muted); }
.project-content>.work-meta,.detail>.work-meta,.paper-title-block>.work-meta { margin-bottom:16px; color:var(--accent); font-size:.8125rem; font-weight:700; letter-spacing:.02em; }
.status { display:inline-block; border:1px solid var(--muted); padding:2px 8px; color:var(--ink); }
.authors { font-size:.8125rem; color:var(--muted); line-height:1.6; margin-top:16px; }
.authors strong { font-weight:700; color:var(--ink); }
.project-links,.resources { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:16px; }
.publication-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.publication { position:relative; display:grid; grid-template-columns:72px 1fr auto; gap:24px; padding:24px 0; border-bottom:1px solid var(--rule); transition:background-color var(--feedback); }
.publication::before { content:''; position:absolute; left:-12px; top:24px; bottom:24px; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform var(--feedback) var(--ease); }
.publication:is(:hover,:focus-within)::before { transform:scaleY(1); }
.publication:hover,.publication:focus-within { background:var(--surface); }
.publication-year { font:0.875rem/1.5 var(--mono); color:var(--accent); padding-top:4px; }
.publication h3 { font-size:1.125rem; line-height:1.4; letter-spacing:-.015em; font-weight:600; }
.publication h3 a { text-decoration:none; }
.publication h3 a:hover { color:var(--accent); text-decoration:underline; }
.publication .authors { margin-top:8px; font-size:.875rem; }
.publication .work-meta { margin-top:8px; }
.publication-links { align-self:center; }
.perspective { margin-top:80px; background:var(--ink); color:var(--paper); border-right:8px solid var(--accent); }
.perspective-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:48px; }
.perspective .eyebrow { color:var(--on-dark); }
.perspective h2 { font-size:clamp(32px,3.4vw,48px); line-height:1.12; letter-spacing:-.035em; font-weight:400; max-width:13ch; margin-top:24px; }
.perspective-copy { align-self:end; color:var(--on-dark); }
.process { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; border-top:1px solid var(--muted); padding-top:24px; margin-top:24px; font:0.8125rem/1.5 var(--mono); }
.about-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:64px; border-top:1px solid var(--ink); padding-top:32px; }
.about-location { margin-top:24px; color:var(--muted); font-size:.875rem; }
.about-copy>p { font-size:1.125rem; line-height:1.65; max-width:66ch; }
.about-copy>p+p { margin-top:20px; color:var(--muted); }
.education { list-style:none; padding:0; margin:32px 0 0; border-top:1px solid var(--rule); }
.education li { display:grid; grid-template-columns:100px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--rule); }
.education li .eyebrow { color:var(--muted); padding-top:4px; }
.education h3 { font-size:1rem; line-height:1.5; }
.education p { font-size:.875rem; color:var(--muted); margin-top:4px; }
.contact { display:grid; grid-template-columns:.7fr 1.3fr; gap:64px; margin-top:80px; padding:32px 0 48px; border-top:1px solid var(--ink); }
.contact h2 { font-size:clamp(32px,3.2vw,44px); max-width:14ch; }
.contact-right { align-self:center; min-width:0; }
.contact-right>p { color:var(--muted); font-size:.875rem; }
.contact-email { display:inline-block; min-height:44px; font-size:clamp(18px,2.2vw,30px); letter-spacing:-.025em; overflow-wrap:anywhere; margin-top:8px; }
.contact-email:hover { color:var(--accent); }
.external-links { display:flex; flex-wrap:wrap; gap:24px; margin-top:16px; }
.footer { display:flex; justify-content:space-between; align-items:start; gap:24px; padding:24px 0; border-top:1px solid var(--rule); font:0.75rem/1.6 var(--mono); color:var(--muted); }
.footer>a { min-height:44px; display:flex; align-items:center; gap:8px; }
.footer>a span { transition:transform var(--feedback) var(--ease); }
.footer>a:is(:hover,:focus-visible) span { transform:translateY(-3px); }
.footer-right { text-align:right; }
.no-script { font-size:.875rem; padding-bottom:24px; color:var(--muted); }
.project-dialog { padding:0; border:1px solid var(--ink); background:var(--paper); color:var(--ink); max-width:960px; width:calc(100% - 48px); max-height:90dvh; overscroll-behavior:contain; }
.project-dialog::backdrop { background:#151912bd; }
.project-dialog[open] { animation:dialog-open var(--transition) var(--ease); }
.project-dialog[open]::backdrop { animation:backdrop-open var(--transition) var(--ease); }
/* Native close/Escape/focus behavior is unchanged. Browsers with discrete
   transitions also keep the outgoing dialog in the top layer while it settles. */
@supports (transition-behavior:allow-discrete) {
  .project-dialog {
    opacity:0; transform:translateY(12px) scale(.985);
    transition:opacity var(--transition) var(--ease),transform var(--transition) var(--ease),display var(--transition) allow-discrete,overlay var(--transition) allow-discrete;
  }
  .project-dialog[open] { opacity:1; transform:none; animation:none; }
  .project-dialog::backdrop { opacity:0; transition:opacity var(--transition),display var(--transition) allow-discrete,overlay var(--transition) allow-discrete; }
  .project-dialog[open]::backdrop { opacity:1; animation:none; }
  @starting-style {
    .project-dialog[open] { opacity:0; transform:translateY(12px) scale(.985); }
    .project-dialog[open]::backdrop { opacity:0; }
  }
}
body:has(.project-dialog[open]),body:has(.figure-dialog[open]) { overflow:hidden; }
.dialog-top { display:flex; justify-content:flex-end; align-items:center; padding:12px 24px; border-bottom:1px solid var(--ink); position:sticky; top:0; background:var(--paper); z-index:2; }
.detail { padding:32px 40px 40px; }
.detail>h1,.project-dialog .detail>h2 { max-width:30ch; font-size:clamp(30px,3.2vw,42px); line-height:1.12; letter-spacing:-.035em; margin:0 0 20px; text-wrap:balance; }
.detail-art { margin:32px 0; border:1px solid var(--rule); }
.detail-art img { width:100%; height:auto; aspect-ratio:720/424; object-fit:contain; background:var(--wash); }
.detail>h2,.detail>h3 { font-size:1.5rem; line-height:1.3; margin:28px 0 12px; letter-spacing:-.025em; }
.detail>p { max-width:68ch; margin-inline:auto; }
.detail .scope-note { margin-top:28px; padding-top:20px; border-top:1px solid var(--rule); color:var(--muted); font-size:.875rem; }
.quick-look-section { max-width:68ch; margin:28px auto 0; }
.quick-look-section h3 { font-size:1.5rem; line-height:1.3; margin-bottom:12px; letter-spacing:-.025em; }
.quick-look-section p { max-width:68ch; line-height:1.7; }
.quick-look-section p+p { margin-top:16px; }
.dialog-page-link { margin:24px auto 0; }
.standalone .detail { max-width:1000px; margin:24px auto; padding:24px 0; }
.back-link { display:inline-flex; min-height:44px; align-items:center; margin-top:24px; font-size:.875rem; }