/* Publications, toolkit orbit, background, contact. Supporting text stays at least 14px. */
.detail-section{padding:clamp(56px,6vw,96px) var(--gutter);color:var(--ink);scroll-margin-top:90px}
.detail-section p,.detail-section h2,.detail-section h3,.detail-section h4{margin:0}
.detail-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.detail-heading h2,.detail-contact h2{font-size:var(--fs-h2);font-weight:600;line-height:1.08;letter-spacing:-.055em}
.detail-heading>p{font-size:var(--fs-body);line-height:1.65;color:var(--muted);max-width:44ch}

/* Publications: one scannable row each, year → title → type. */
.pub-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.pub-list>li{display:grid;grid-template-columns:80px minmax(0,1fr) max-content;gap:10px clamp(24px,3vw,48px);padding:28px 0 30px;border-top:1px solid var(--line)}
.pub-year{font:var(--fs-meta)/2.2 var(--mono);color:var(--muted)}
.pub-main h3{font-size:var(--fs-lede);font-weight:500;line-height:1.38;letter-spacing:-.02em;max-width:62ch;text-wrap:pretty}
.pub-main h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pub-main h3 span{white-space:nowrap;color:var(--accent)}
.detail-section .pub-venue{font-size:var(--fs-small);line-height:1.6;margin-top:8px}
.detail-section .pub-type{font:500 var(--fs-small)/1.6 var(--sans);letter-spacing:-.005em;color:var(--muted);text-align:right;white-space:nowrap}
.pub-status{display:block;color:var(--accent);margin-top:4px}

/* Toolkit orbit. The SVG is generated by scripts/build.py: keep the 500px core,
   160px slots in step with the W, LABEL and SLOT constants there. */
.orbit{display:grid;grid-template-columns:minmax(0,1fr) 500px minmax(0,1fr);padding-bottom:12px}
.orbit-centre{grid-column:2;grid-row:1}
.orbit-left{grid-column:1;grid-row:1;text-align:right}
.orbit-right{grid-column:3;grid-row:1}
.orbit-map{display:block;width:500px;height:640px;overflow:visible}
.orbit-side ul{list-style:none;margin:0;padding:0}
.orbit-group{height:160px}
.orbit-left .orbit-group{padding-right:20px}
.orbit-right .orbit-group{padding-left:20px}
.detail-section .orbit-group h3{font-size:var(--fs-lede);line-height:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px;transition:color .2s}
.detail-section .orbit-group p{font-size:var(--fs-small);line-height:1.55;color:var(--muted)}
.orbit-group:hover h3{color:var(--accent)}
.orbit-ring{fill:none;stroke:var(--line);stroke-width:1.2}
.orbit-dash{stroke:var(--muted);stroke-dasharray:2 7;opacity:.55}
.orbit-words{font:11px var(--mono);letter-spacing:.1em;fill:var(--muted)}
.orbit-sweep{fill:var(--accent);opacity:.14}
.orbit-wave{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.orbit-core{fill:var(--accent)}
.orbit-link line{stroke:var(--link,var(--line));stroke-width:1.2;transition:stroke .2s}
.orbit-halo{fill:var(--sheet);stroke:var(--link,var(--line));stroke-width:1.2;transition:stroke .2s}
.orbit-node{fill:var(--link,var(--ink));transition:fill .2s}
.orbit:has([data-n="0"]:hover) .n0,.orbit:has([data-n="1"]:hover) .n1,.orbit:has([data-n="2"]:hover) .n2,.orbit:has([data-n="3"]:hover) .n3,.orbit:has([data-n="4"]:hover) .n4,.orbit:has([data-n="5"]:hover) .n5,.orbit:has([data-n="6"]:hover) .n6,.orbit:has([data-n="7"]:hover) .n7{--link:var(--accent)}
/* Group text is a row of items with dot separators; it is the same full text at every width (the logos never replace names). */
.items .q{display:block;font-style:normal;margin-top:4px}
/* The dot hangs on the end of the previous item, so a wrapped line never starts with one. */
.items>span:not(:last-of-type)::after{content:"\00a0· "}
@media(min-width:1200px){.honeycomb{display:none}}
/* Watch-face cluster of tool logos (19 bubbles, positions and sizes from build.py: fisheye, centre largest). Flat in-page circles, unlabelled
   (names are aria-labels only), resting in muted grey so the group text leads; a logo turns ink when its group is hovered, and on a fine pointer when hovered itself. */
.honeycomb{position:relative;width:min(340px,86vw);margin:0 auto}
.hc-icon{position:absolute;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--well);color:var(--muted);transition:background-color .18s ease,color .18s ease,translate .45s cubic-bezier(.2,.9,.25,1.4),scale .25s ease}
.hc-icon svg{width:46%;height:46%;fill:currentColor}
@media(hover:hover) and (pointer:fine){
  .orbit:has([data-n="0"]:hover) .hc-icon[data-n="0"],.orbit:has([data-n="1"]:hover) .hc-icon[data-n="1"],.orbit:has([data-n="2"]:hover) .hc-icon[data-n="2"],.orbit:has([data-n="3"]:hover) .hc-icon[data-n="3"],.orbit:has([data-n="4"]:hover) .hc-icon[data-n="4"],.orbit:has([data-n="5"]:hover) .hc-icon[data-n="5"],.orbit:has([data-n="6"]:hover) .hc-icon[data-n="6"],.orbit:has([data-n="7"]:hover) .hc-icon[data-n="7"]{background:var(--ink);color:var(--paper)}
}
/* Fine pointer: a logo turns ink, grows, wiggles once and leans toward the cursor (app.js sets --mx/--my). */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hc-icon{translate:var(--mx,0px) var(--my,0px)}
  .hc-icon:hover{z-index:1;scale:1.12;background:var(--ink);color:var(--paper);animation:hc-wiggle .5s ease;transition:background-color .18s ease,color .18s ease,translate .12s linear,scale .25s cubic-bezier(.2,.9,.25,1.4)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.hc-icon:hover{background:var(--ink);color:var(--paper)}}
@keyframes hc-wiggle{0%,100%{rotate:0deg}20%{rotate:-10deg}40%{rotate:8deg}60%{rotate:-5deg}80%{rotate:2deg}}
@media(max-width:1199px){
  .orbit{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(32px,5vw,64px)}
  .orbit-centre{grid-column:1/-1;grid-row:auto}
  .orbit-map{display:none}
  .orbit-left,.orbit-right{grid-column:auto;grid-row:auto;text-align:left}
    .orbit-side ul{display:grid;gap:26px}
  .orbit-group{height:auto}
  .orbit-left .orbit-group,.orbit-right .orbit-group{padding:0}
}
@media(max-width:640px){.orbit{grid-template-columns:1fr;row-gap:26px}.orbit-centre{margin-bottom:14px}}

/* Background bento: both degrees side by side, then experience as a 2×2 across two-thirds and interests in the last third. */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"msc msc msc msc msc msc be be be be be be" "diz diz diz diz sch sch sch sch out out out out" "for for for for sat sat sat sat out out out out";gap:14px}
.bento-msc{grid-area:msc}.bento-diz{grid-area:diz}.bento-sch{grid-area:sch}.bento-for{grid-area:for}.bento-be{grid-area:be}.bento-sat{grid-area:sat}.bento-out{grid-area:out}
.bento-tile{display:flex;flex-direction:column;min-width:0;padding:26px 28px 28px;border-radius:24px;background:var(--well)}
.bento-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:60px;margin-bottom:18px}
.bento .bento-label{font:var(--fs-meta)/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.bento-logo.bento-logo-square{height:60px}
.bento-logo{display:block;height:52px;width:auto;padding:5px 8px;border-radius:12px}
.bento .bento-badge{display:inline-flex;white-space:nowrap;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:600 var(--fs-small)/1.2 var(--sans)}
.bento .bento-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.bento h3{font-size:var(--fs-lede);font-weight:500;line-height:1.3;letter-spacing:-.02em;text-wrap:pretty}
.bento .bento-msc h3,.bento .bento-be h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.035em}
.bento .bento-org{font-size:var(--fs-small);font-weight:600;line-height:1.5;margin-top:6px}
.bento .bento-date{font:var(--fs-meta)/1.6 var(--mono);color:var(--muted);margin-top:4px}
.bento .bento-desc{font-size:var(--fs-small);line-height:1.6;color:var(--muted);margin-top:auto;padding-top:18px;max-width:56ch}

.bento-org span{white-space:nowrap}
.bento-desc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.interests{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:4px 0 0;padding:0}
.interests li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;padding:14px 8px;border-radius:16px;background:var(--sheet);font-size:16px;font-weight:600;letter-spacing:-.01em;text-align:center}
.interests svg{flex-shrink:0;width:40px;height:40px;padding:9px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.interests li:hover svg{transform:translateY(-3px) rotate(-6deg)}
:root[data-theme=dark] .bento-logo{background:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .bento-logo{background:#fff}}
@media(max-width:1099px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"msc be" "diz sch" "for sat" "out out"}}
@media(max-width:600px){.interests{grid-template-columns:repeat(2,minmax(0,1fr))}.interests li{padding:12px 6px;font-size:15px}.bento{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:12px}.bento>*{grid-area:auto}.bento-tile,.bento-msc{padding:22px;border-radius:20px}.bento-logo{height:42px}}
@media(prefers-reduced-motion:reduce){.bento-tile,.interests svg{transition:none}.bento-tile:hover,.interests li:hover svg{transform:none}}

/* Contact */
.detail-contact{padding-bottom:25px}
.detail-contact-main{display:flex;align-items:center;justify-content:space-between;gap:36px}
.detail-contact-main>div>p:last-child{font-size:var(--fs-body);line-height:1.65;color:var(--muted);margin-top:19px;max-width:47ch}
.contact-reach{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}
.detail-email{flex-shrink:0;min-height:64px;padding:16px 30px;font-size:var(--fs-lede);white-space:normal;overflow-wrap:anywhere}
.detail-section .contact-location{display:flex;align-items:center;gap:7px;font:var(--fs-meta)/1.5 var(--mono);color:var(--muted);margin:0 14px 0 0}
.contact-location svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;flex-shrink:0}
.detail-contact-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:var(--fs-small);line-height:1.8;margin-top:48px;padding-top:20px;border-top:1px solid var(--line)}
/* Profile icons: filled ink circles that take their brand colour (--brand/--brand-fg) and a soft glow (--glow) on hover. */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.social a{--glow:var(--brand);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.social a:is(:hover,:focus-visible){background:var(--brand);color:var(--brand-fg);box-shadow:0 4px 20px color-mix(in srgb,var(--glow) 40%,transparent);transform:translateY(-2px)}
.social svg{width:20px;height:20px;fill:currentColor}
.social-github{--brand:#181717;--brand-fg:#fff}.social-linkedin{--brand:#0a66c2;--brand-fg:#fff}.social-x{--brand:#000;--brand-fg:#fff}.social-scholar{--brand:#4285f4;--brand-fg:#fff}.social-hf{--brand:#ffd21e;--brand-fg:#1b1b1b}
:root[data-theme=dark] .social-github{--brand:#f0f6fc;--brand-fg:#0d1117}:root[data-theme=dark] .social-x{--glow:#e6e9e3}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .social-github{--brand:#f0f6fc;--brand-fg:#0d1117}:root:not([data-theme]) .social-x{--glow:#e6e9e3}}
@media(prefers-reduced-motion:reduce){.social a{transition:none}.social a:is(:hover,:focus-visible){transform:none}}
@media(max-width:1100px){.detail-contact-main{align-items:flex-start;flex-direction:column;gap:28px}.contact-reach{align-items:flex-start;max-width:100%}.detail-section .contact-location{margin:0 0 0 4px}.detail-email{flex-shrink:1}.detail-heading{gap:30px}}
@media(max-width:900px){.detail-heading{display:block}.detail-heading>p{margin-top:20px;max-width:60ch}.pub-list>li{grid-template-columns:64px minmax(0,1fr)}.detail-section .pub-type{grid-column:2;text-align:left}.pub-status{display:inline;margin:0 0 0 8px}}
@media(max-width:540px){.detail-section{padding-block:48px;scroll-margin-top:76px}.detail-heading{margin-bottom:28px}.pub-list>li{grid-template-columns:1fr;gap:8px;padding-block:24px}.detail-section .pub-type{grid-column:auto}.pub-year{color:var(--ink)}.detail-contact{border-radius:24px 24px 0 0}.detail-email{padding:14px 20px;max-width:100%}.detail-contact-bottom{align-items:flex-start;flex-direction:column;gap:14px;margin-top:32px}}
@media(max-width:540px){.detail-section .pub-type{white-space:normal;color:var(--accent);font-weight:600}}

/* Desktop scroll snap (kept last so it overrides section spacing): subtle (proximity, never mandatory). Home, Selected research, Toolkit and Background
   are sized to fit one screen and settle with their top edge flush to the viewport: the floating nav sits over the
   section's own top padding, so nothing from the previous section shows behind it. Anchor links land the same way. */
@media(min-width:1100px) and (min-height:700px) and (hover:hover) and (pointer:fine){
  html{scroll-snap-type:y proximity}
  html.nav-enhanced{scroll-padding-top:0}
  .hero,#work,#skills,#about{scroll-snap-align:start}
  #home{scroll-margin-top:200px}
  #work,#skills,#about{padding-top:calc(var(--nav-anchor-offset,90px) + 6px)}
  #skills,#about{min-height:100svh}
  #skills{padding-bottom:40px}
  .work-heading,#about .detail-heading{margin-bottom:22px}
  .work-feature h3{margin-bottom:16px}
  .work-figure>:is(a,button,.work-figure-frame){height:clamp(170px,26vh,250px)}
  .work-story p{line-height:1.55;margin-bottom:10px}
  .work-story p.work-question{margin-bottom:10px}
  .work-links{margin-top:14px}
  #about .bento{gap:12px}
  #about .bento-tile{padding:18px 24px 20px}
  #about .bento-top{min-height:0;margin-bottom:10px}
  #about .bento-logo{height:42px}
  #about .bento-logo.bento-logo-square{height:48px}
  #about .interests li{padding:8px 6px}
  #about .bento .bento-desc{padding-top:8px}
  #about .interests li{padding:10px 8px;gap:6px}
}
@media(max-width:359px){.interests{grid-template-columns:1fr}.interests li{flex-direction:row;justify-content:flex-start;padding:8px 12px}}
.accent-dot{color:var(--accent)}