/* Motion system: readable without JavaScript, and still readable when disabled. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); --motion-fast: 220ms; }
html { scroll-behavior: smooth; }
body { isolation: isolate; }
/* The original small-dot pattern: one layer, with a pointer-lit tint
   aligned to the same dot positions. No canvas or second grid. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgb(125 180 240 / .45) 1px, transparent 1.5px);
  background-size: 30px 30px;
  opacity: .55;
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .5) 75%, transparent 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgb(218 241 255 / 1) 1px, transparent 1.5px);
  background-size: 30px 30px;
  opacity: 0;
  transition: opacity 220ms ease;
  mask-image: radial-gradient(circle 520px at var(--dot-pointer-x, -1000px) var(--dot-pointer-y, -1000px), #000 0%, rgb(0 0 0 / .94) 10%, rgb(0 0 0 / .73) 24%, rgb(0 0 0 / .36) 46%, rgb(0 0 0 / .09) 70%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
  body.dots-active:not(.motion-disabled)::after { opacity: 1; }
}
html.motion-off body::after { opacity: 0 !important; }
.motion-progress { position: fixed; inset: 0 auto auto 0; z-index: 1200; width: 100%; height: 3px; background: linear-gradient(90deg, #7db4f0, #b6e8ea); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.motion-curtain { position: fixed; inset: 0; z-index: 1300; pointer-events: none; background: #10151c; transform: translateY(-101%); }
.motion-curtain::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: #7db4f0; box-shadow: 0 0 25px #7db4f0; }
.motion-intro { position: fixed; inset: 0; z-index: 1290; display: grid; place-items: center; pointer-events: none; background: #10151c; color: #ededed; font: 700 clamp(1.1rem, 4vw, 2.3rem)/1.1 Inter, system-ui, sans-serif; letter-spacing: .2em; text-align: center; }
.motion-intro span { display: block; max-width: 90vw; padding: 1rem; border-block: 1px solid rgb(125 180 240 / .5); }
.motion-intro small { display: block; margin-top: .7rem; color: #b4bdc8; font: 500 .68rem/1.3 Inter, system-ui, sans-serif; letter-spacing: .26em; text-transform: uppercase; }
.motion-enabled [data-reveal="true"] { opacity: 0; transform: translateY(34px); transition: opacity 700ms var(--motion-ease), transform 700ms var(--motion-ease); transition-delay: calc(var(--reveal-index, 0) * 70ms); }
.motion-enabled [data-reveal="true"].is-revealed { opacity: 1; transform: translateY(0); }
.motion-enabled [data-reveal="true"].is-revealed:hover { transform: translateY(-3px); }
.motion-split { overflow: hidden; }
.motion-split span[data-word] { display: inline-block; transform: translateY(108%); opacity: 0; transition: transform 850ms var(--motion-ease), opacity 500ms ease; transition-delay: calc(var(--split-index, 0) * 75ms); }
.motion-split.is-in span[data-word] { transform: translateY(0); opacity: 1; }
.motion-enabled :is(.hero-portrait-frame, .project-case-study .hero, .archive .hero) { transform-origin: 50% 50%; }

/* A conceptual, clearly labeled pipeline, rather than a purported clinical scan. */
.story-section { position: relative; width: 100vw; width: 100dvw; min-height: 100vh; min-height: 100svh; margin-inline: calc(50% - 50vw); margin-block: clamp(4rem, 10vw, 8rem); padding-block: clamp(1rem, 3vh, 2rem); overflow: hidden; display: flex; flex-direction: column; justify-content: center; border-block: 1px solid rgb(237 237 237 / .14); background: linear-gradient(145deg, rgb(35 61 86 / .38), rgb(12 17 24 / .78)); }
.story-section.story-pinned { height: 100vh; height: 100svh; margin-block: 0; }
.story-head { max-width: 1200px; margin: 0 auto 1.7rem; padding-inline: clamp(1rem, 4vw, 3rem); }
.story-head .section-kicker { color: #7db4f0; }
.story-head h2 { max-width: 850px; margin: .4rem 0; font: 500 clamp(2.1rem, 5vw, 4.6rem)/1.06 "Playfair Display", Georgia, serif; letter-spacing: -.035em; }
.story-head p:last-child { max-width: 700px; color: #b4bdc8; }
.story-viewport { width: 100%; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; }
.story-track { display: flex; gap: 0; width: max-content; padding: 1rem 0 1.25rem; }
.story-panel { position: relative; flex: 0 0 100vw; flex-basis: 100dvw; min-height: clamp(360px, 58svh, 740px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 4rem); overflow: hidden; padding: clamp(1.4rem, 6vw, 6rem); border: 0; border-radius: 0; background: radial-gradient(circle at 75% 35%, rgb(125 180 240 / .12), transparent 44%), #18212c; box-shadow: inset 0 1px rgb(125 180 240 / .24), inset 0 -1px rgb(125 180 240 / .24); scroll-snap-align: center; }
.story-panel::before { content: attr(data-step); position: absolute; top: 1.4rem; right: 1.8rem; color: rgb(125 180 240 / .45); font: 700 4rem/1 Inter, system-ui, sans-serif; }
.story-panel h3 { margin: .7rem 0 1rem; font: 500 clamp(2rem, 4vw, 3.7rem)/1.08 "Playfair Display", Georgia, serif; }
.story-panel p { max-width: 34rem; color: #c5ced9; }
.story-panel .story-kicker { color: #7db4f0; font: 700 .75rem/1.4 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.story-panel a { display: inline-flex; min-height: 44px; align-items: center; color: #c6e2ff; font-weight: 700; text-underline-offset: .35em; }
.story-visual { display: grid; place-items: center; min-height: 250px; border-radius: 50%; background: radial-gradient(circle, rgb(125 180 240 / .14), transparent 66%); }
.story-visual svg { width: min(100%, 330px); height: auto; overflow: visible; filter: drop-shadow(0 0 15px rgb(125 180 240 / .33)); }
.story-visual path, .story-visual circle, .story-visual rect { stroke: #9bc8f5; fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.story-visual .story-fill { fill: rgb(125 180 240 / .18); }
.story-controls { display: flex; justify-content: flex-end; gap: .7rem; max-width: 1200px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 3rem); }
.story-controls button { min-width: 48px; min-height: 48px; border: 1px solid rgb(125 180 240 / .35); border-radius: 50%; background: #202e3b; color: #ededed; font-size: 1.2rem; cursor: pointer; }
.story-controls button:hover { background: #36516c; }
.story-section.story-pinned .story-viewport { overflow: hidden; scroll-snap-type: none; flex: 1; display: flex; align-items: stretch; }
.story-section.story-pinned .story-track { padding: 0; }
.story-section.story-pinned .story-panel { min-height: 100%; }
.story-section.story-pinned .story-controls { visibility: hidden; }
/* A pinned story must fit within the available viewport height, rather
   than letting min-height on the slide hide its text below the fold. */
@media (min-width: 900px) {
  .story-section.story-pinned { box-sizing: border-box; min-height: 0; max-height: 100svh; }
  .story-section.story-pinned .story-viewport { min-height: 0; flex: 1 1 0; }
  .story-section.story-pinned .story-track { height: 100%; }
  .story-section.story-pinned .story-panel { height: 100%; min-height: 0; }
}
@media (min-width: 900px) and (max-height: 800px) {
  .story-section.story-pinned { padding-block: clamp(.6rem, 2vh, 1.2rem); }
  .story-section.story-pinned .story-head { margin-bottom: clamp(.5rem, 1.5vh, .9rem); }
  .story-section.story-pinned .story-head h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
  .story-section.story-pinned .story-panel { padding-block: clamp(1rem, 3vh, 2rem); }
  .story-section.story-pinned .story-visual { min-height: 0; }
  .story-section.story-pinned .story-visual svg { max-height: min(35svh, 260px); }
}

/* The former Research material now lives beside the project archive. */
.research-hub { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid rgb(237 237 237 / .14); }
.research-hub h2 { max-width: 850px; margin: .5rem 0 1.2rem; font: 500 clamp(2rem, 4.5vw, 3.7rem)/1.1 "Playfair Display", Georgia, serif; letter-spacing: -.025em; }
.research-lede { max-width: 800px; color: #b4bdc8; line-height: 1.75; }
.research-directions, .research-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.research-direction, .research-evidence-card { padding: clamp(1.3rem, 3vw, 2.1rem); border: 1px solid rgb(237 237 237 / .16); border-radius: 1.2rem; background: linear-gradient(145deg, rgb(255 255 255 / .055), rgb(255 255 255 / .015)); }
.research-direction h3, .research-evidence-card h3 { margin: .6rem 0 1rem; font: 500 clamp(1.5rem, 3vw, 2.3rem)/1.17 "Playfair Display", Georgia, serif; }
.research-direction p, .research-evidence-card :is(.context, .limitations, li) { color: #b4bdc8; }
.research-direction a, .research-evidence-card a, .research-approach a { display: inline-flex; min-height: 44px; align-items: center; color: #b6d9ff; text-underline-offset: .3em; }
.research-evidence, .research-approach { margin-top: clamp(4rem, 8vw, 7rem); }
.research-evidence-card:first-child { grid-column: 1 / -1; }
.research-evidence-card .project-metrics { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.3rem 0; }
.research-evidence-card .project-metric { min-width: 130px; padding: .6rem .8rem; border: 1px solid rgb(125 180 240 / .24); border-radius: .7rem; }
.research-evidence-card .project-metric :is(strong, span) { display: block; }
.research-evidence-card .project-metric strong { color: #7db4f0; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.research-evidence-card .project-metric span { color: #b4bdc8; font-size: .8rem; }
.research-evidence-card .research-methods { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 1.2rem 0; list-style: none; }
.research-evidence-card .research-methods li { padding: .35rem .7rem; border: 1px solid rgb(125 180 240 / .22); border-radius: 999px; font-size: .82rem; }
.research-evidence-card .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.research-evidence-card .limitations { border-left: 2px solid #7db4f0; padding-left: 1rem; }

@media (hover: hover) and (pointer: fine) {
  .motion-tilt { position: relative; overflow: hidden; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-3px) !important; transition: transform 320ms var(--motion-ease), border-color 220ms ease, box-shadow 220ms ease; }
  .motion-tilt::before { content: none; }
  .motion-tilt > * { position: relative; z-index: 1; }
  .motion-magnetic { translate: var(--mag-x, 0px) var(--mag-y, 0px); transition: translate 280ms var(--motion-ease); }
}

/* Top navigation stays visibly present; the mobile panel animates as one layer. */
:is(.site-nav, .nav) { transition: background-color 300ms ease, box-shadow 300ms ease; }
body.is-scrolled :is(.site-nav, .nav) { background: rgb(20 24 31 / .94); box-shadow: 0 12px 35px rgb(0 0 0 / .18); }
:is(.site-nav-links, .nav-links) a { position: relative; }
:is(.site-nav-links, .nav-links) a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1px; background: #7db4f0; transform: scaleX(0); transform-origin: right; transition: transform 360ms var(--motion-ease); }
:is(.site-nav-links, .nav-links) a:hover::after, :is(.site-nav-links, .nav-links) a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle-icon { display: inline-block; transition: transform 400ms var(--motion-ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { transform: rotate(90deg); }
.contact-form :is(input, textarea) { transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--motion-ease); }
.contact-form :is(input, textarea):focus { border-color: #7db4f0; box-shadow: 0 0 0 4px rgb(125 180 240 / .15); transform: translateY(-2px); }
.contact-form-status[data-state="loading"]::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: .6rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: motion-spin 700ms linear infinite; }
@keyframes motion-spin { to { transform: rotate(360deg); } }

@view-transition { navigation: auto; }
.projects-paginated { view-transition-name: projects; }
::view-transition-old(root) { animation: motion-out 420ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: motion-in 650ms var(--motion-ease) both; }
::view-transition-old(projects) { animation: motion-out 300ms ease-in both; }
::view-transition-new(projects) { animation: motion-in 500ms var(--motion-ease) both; }
@keyframes motion-out { to { opacity: .35; transform: translateY(-4vh) scale(.98); } }
@keyframes motion-in { from { opacity: .25; transform: translateY(6vh) scale(1.02); } }

@media (max-width: 899px) {
  /* Native horizontal touch scrolling, no ScrollTrigger or pinning. */
  .story-section { width: 100%; min-height: 0; margin-inline: 0; margin-block: 3rem; padding-block: 1.5rem; }
  .story-viewport { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .story-track { gap: .8rem; padding: .6rem 1rem 1rem; }
  .story-panel { flex: 0 0 min(86vw, 670px); min-height: 420px; border: 1px solid rgb(125 180 240 / .24); border-radius: 1.2rem; padding: clamp(1.2rem, 4vw, 2rem); box-shadow: none; }
}
@media (max-width: 767px) {
  .mobile-nav-ready .site-nav-links, .mobile-nav-ready .nav-links { display: flex; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-14px) scale(.98); transform-origin: top center; transition: opacity 280ms ease, transform 360ms var(--motion-ease), visibility 0s linear 360ms; }
  .mobile-nav-ready .site-nav-links[data-open="true"], .mobile-nav-ready .nav-links[data-open="true"] { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
  .story-panel { grid-template-columns: 1fr; min-height: 0; gap: .8rem; }
  .story-visual { min-height: 155px; grid-row: 1; }
  .story-visual svg { width: min(48vw, 170px); }
  .story-head h2 { font-size: clamp(1.8rem, 8vw, 3rem); }
  .story-panel h3 { font-size: clamp(1.7rem, 7vw, 2.6rem); }
  .research-directions, .research-projects { grid-template-columns: 1fr; }
  .research-evidence-card:first-child { grid-column: auto; }
}
@media (max-width: 440px) {
  .story-panel { flex-basis: 88vw; }
  .story-panel::before { font-size: 2.5rem; }
}
@media (hover: none), (pointer: coarse) {
  body::after { display: none; }
  .motion-tilt, .motion-magnetic { transform: none !important; translate: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}
html.motion-off, html.motion-off * { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
html.motion-off [data-reveal="true"], html.motion-off .motion-split span[data-word] { opacity: 1 !important; transform: none !important; }
html.motion-off body::after { display: none !important; }
html.motion-off::view-transition-old(root), html.motion-off::view-transition-new(root), html.motion-off::view-transition-old(projects), html.motion-off::view-transition-new(projects) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .motion-intro, .motion-curtain { display: none !important; }
  .motion-split span[data-word] { opacity: 1 !important; transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(projects), ::view-transition-new(projects) { animation: none !important; }
}

/* Compatibility with a previously cached JS bundle that still creates the retired control. */
.motion-toggle { display: none !important; }

/* Section-aware navigation and restrained FAQ disclosure choreography. */
.site-nav-links a[aria-current="location"] { color: #d5ebff; }
.site-nav-links a[aria-current="location"]::after { transform: scaleX(1); transform-origin: left; }
.faq-item { transition: border-color .3s ease, background .3s ease; }
.faq-item[open] { border-color: rgb(125 180 240 / .37); background: rgb(125 180 240 / .035); }
.faq-item[open] .faq-answer { animation: faq-answer-enter .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes faq-answer-enter { from { opacity: .35; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-answer { animation: none; } }

/* Featured project symbols remain decorative in layout but interactive by mouse, touch and keyboard. */
.project-card { position:relative; }
.project-card > .home-project-symbol { position:absolute; top:clamp(.7rem,2vw,1.25rem); right:clamp(.7rem,2vw,1.25rem); width:clamp(48px,7vw,76px); height:clamp(48px,7vw,76px); z-index:3; opacity:.73; display:grid; place-items:center; border-radius:50%; transition:opacity .25s ease, transform .3s ease; }
.project-card > .home-project-symbol:hover, .project-card > .home-project-symbol:focus-visible { opacity:1; transform:scale(1.04); }
.project-card > .home-project-symbol:focus-visible { outline:2px solid #a9d3ff; }
.project-card:has(.home-project-symbol) > .card-title { padding-right:clamp(2.2rem,8vw,5rem); }
@media(max-width:480px){ .project-card > .home-project-symbol { width:44px; height:44px; } }
@media(prefers-reduced-motion:reduce){ .home-project-symbol { transition:none!important; } }

/* Distinct project glyphs: subtle orbital dynamics without halo lighting. */
.project-symbol { appearance:none; border:0; padding:0; background:transparent; cursor:pointer; color:#aed5fa; outline-offset:4px; }
.archive .project .project-symbol { pointer-events:auto; z-index:2; display:grid; place-items:center; }
.archive .project .project-symbol:focus-visible { outline:2px solid #bce4ff; border-radius:50%; }
.project-symbol svg { display:block; width:100%; height:100%; overflow:visible; }
.project-symbol svg :is(path,rect,circle,ellipse,polygon) { vector-effect:non-scaling-stroke; }
.project-symbol svg .symbol-draw { stroke:#a5cff8; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.project-symbol svg .symbol-orbit { stroke:#74a9d8; stroke-width:1.1; }
.project-symbol svg .symbol-nodes { stroke:#b5ddff; fill:#1f3247; stroke-width:1.5; }
.project-symbol svg .symbol-core { stroke:#a5cff8; fill:#2e5a83; stroke-width:1.5; }
.project-symbol svg .symbol-pulse { stroke:#a5cff8; stroke-width:2; }
@media (prefers-reduced-motion: no-preference) {
  @media (hover:hover) and (pointer:fine) {
    .project-symbol:hover .symbol-orbit { animation:project-glyph-orbit 13s linear infinite; transform-origin:70px 70px; }
    .project-symbol:hover .symbol-core { animation:project-glyph-heartbeat 1.6s ease-in-out infinite; transform-origin:70px 70px; }
    .project-symbol:hover .symbol-draw { animation:project-glyph-sway 3.5s ease-in-out infinite alternate; transform-origin:70px 70px; }
  }
  .project-symbol.symbol-play svg { animation:project-glyph-pop .8s cubic-bezier(.2,.9,.2,1) both; }
  .project-symbol.symbol-play .symbol-orbit { animation:project-glyph-orbit 1s cubic-bezier(.2,.9,.2,1) both; transform-origin:70px 70px; }
  .project-symbol.symbol-play .symbol-core { animation:project-glyph-heartbeat .55s ease-in-out 2; transform-origin:70px 70px; }
}
@keyframes project-glyph-orbit { to { transform:rotate(360deg); } }
@keyframes project-glyph-heartbeat { 50% { transform:scale(1.3); opacity:.7; } }
@keyframes project-glyph-sway { to { transform:rotate(7deg); } }
@keyframes project-glyph-pop { 0% { transform:scale(.84); opacity:.6; } 55% { transform:scale(1.06); } 100% { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .project-symbol svg *, .project-symbol svg { animation:none!important; transition:none!important; } }

/* Brand identity for verified GitHub and Hugging Face external links. */
.brand-link-icon { display:inline-block; flex:none; width:1.14em; height:1.14em; vertical-align:-.18em; margin-right:.38em; color:inherit; }
.brand-link-icon.brand-hf { width:auto; height:auto; font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size:1.09em; line-height:1; vertical-align:-.08em; }
a[data-platform] { text-decoration-thickness:from-font; }
a[data-platform] .brand-link-icon { transition:transform .24s ease; }
a[data-platform]:hover .brand-link-icon { transform:translateY(-2px) scale(1.04); }
a[data-platform]:focus-visible .brand-link-icon { transform:translateY(-2px); }
a.surface-card[data-platform] .card-title .brand-link-icon { width:.94em; height:.94em; margin-right:.48em; }
a.surface-card[data-platform] .card-title .brand-hf { width:auto; height:auto; }
@media(prefers-reduced-motion:reduce){a[data-platform] .brand-link-icon{transition:none!important;transform:none!important;}}
/* Polished project tiles. No cursor halo: only borders and crisp, meaningful line-work. */
.project-symbol { --symbol-ink:#afdaff; --symbol-highlight:#e1f3ff; background:#253749; border:1px solid rgba(159,210,255,.28); border-radius:22%; color:var(--symbol-ink); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.project-symbol svg { padding:10%; }
.project-symbol svg .symbol-draw { stroke:var(--symbol-ink); stroke-width:1.85; }
.project-symbol svg .symbol-orbit { stroke:#7aaedc; stroke-width:1.3; }
.project-symbol svg .symbol-core { fill:#487ba9; stroke:var(--symbol-highlight); stroke-width:1.7; }
.project-symbol svg .symbol-nodes { stroke:var(--symbol-highlight); }
.project-symbol[data-project-symbol="medical-image-segmentation"],.project-symbol[data-project-symbol="cohortseal"],.project-symbol[data-project-symbol="jibay2-medical-v2"] { --symbol-ink:#9edfd8; --symbol-highlight:#cefff1; background:#223e45; }
.project-symbol[data-project-symbol="persian-lm-from-scratch"],.project-symbol[data-project-symbol="persian-wikipedia-cleaned-for-persian-NLP"],.project-symbol[data-project-symbol="nllb-en-fa-psych-translation"] { --symbol-ink:#c3ccff; --symbol-highlight:#edf0ff; background:#303550; }
.project-symbol[data-project-symbol="ai-research-assistant-platform"],.project-symbol[data-project-symbol="agent-guardrails"] { --symbol-ink:#e0c2ff; --symbol-highlight:#f2dfff; background:#393049; }
.archive .project .archive-sigil.project-symbol { opacity:1; border:1px solid rgba(157,210,255,.31); border-radius:20%; pointer-events:auto; background:#253749; }
.archive .project:hover .archive-sigil.project-symbol { transform:translateY(-3px) scale(1.035); opacity:1; }
.archive .project .archive-sigil.project-symbol svg { width:100%;height:100%;padding:9%; }
@media(hover:hover) and (pointer:fine){.project-symbol:hover{border-color:rgba(177,221,255,.65);}}
@media(max-width:700px){.archive .project .archive-sigil.project-symbol{width:68px;height:68px;top:1rem;right:1rem;}}
@media(prefers-reduced-motion:reduce){.archive .project .archive-sigil.project-symbol{transform:none!important;}}

/* JavaScript owns the animation while scrolling same-page anchors. */
html.motion-manual-scroll {
  scroll-behavior: auto !important;
}