/* =====================================================
   Design system
   Palette: warm amber + slate on dark charcoal (light theme: cool white + deep blue).
   Checked for WCAG AA text contrast and for protan, deutan
   and tritan separation. Meaning is never carried by colour
   alone: shapes, dashes, hatching, labels and fills back it up.
   ===================================================== */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --serif: Calibri, Carlito, "Noto Sans Malayalam", "Noto Sans Devanagari", "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --sans: Calibri, Carlito, "Noto Sans Malayalam", "Noto Sans Devanagari", "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: Calibri, Carlito, "Noto Sans Malayalam", "Noto Sans Devanagari", "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --bg: #0c0a09; --bg2: #110e0c; --surface: #171412;
  --line: rgba(255,238,215,.12); --line2: rgba(255,238,215,.22); --cline: rgba(240,228,210,.16);
  --text: #f0eae2; --muted: #c2bab0; --a: #e8a33d; --b: #86a9c2; --n: #aaa196; --on-a: #1a1105; --hover: rgba(255,238,215,.06);
  --shadow: 0 24px 60px rgba(0,0,0,.45);
}
[data-theme="light"] {
  --bg: #f4f7fa; --bg2: #e9eef4; --surface: #ffffff;
  --line: rgba(15,30,55,.14); --line2: rgba(15,30,55,.26); --cline: rgba(15,30,55,.16);
  --text: #0f1722; --muted: #435062; --a: #1b4f9c; --b: #4a6382; --n: #526071; --on-a: #ffffff; --hover: rgba(15,30,55,.06);
  --shadow: 0 24px 60px rgba(15,30,55,.14);
}
:root { --a-soft: color-mix(in srgb, var(--a) 14%, transparent); --b-soft: color-mix(in srgb, var(--b) 22%, transparent); }

* { box-sizing: border-box; }
html { font-size: 106%; scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
html.locked { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 1.1rem; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--a); color: var(--on-a); }
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 2000; padding: 10px 16px; background: var(--a); color: var(--on-a); border-radius: 8px; text-decoration: none; font-weight: 600; transition: top .3s; }
.skip:focus { top: 16px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; margin: 0; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: .35em; }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.sec { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.sec.alt { background: var(--bg2); }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 640px; line-height: 1.6; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .86rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.eyebrow .n { color: var(--a); font-weight: 700; }
/* Label bar and underline: a straight vertical bar before the text. On hover, press or focus an underline sweeps through left to right, then drains out and returns to normal. */
@property --f1 { syntax: '<percentage>'; initial-value: 0%; inherits: false; }
@property --f2 { syntax: '<percentage>'; initial-value: 0%; inherits: false; }
.eyebrow { position: relative; padding-bottom: 8px; cursor: default; width: fit-content; max-width: 100%; }
.eyebrow::before { content: ""; flex: none; align-self: stretch; width: 3px; margin-bottom: 8px; background: var(--a); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease) .25s; }
.eyebrow.visible::before, .ready .eyebrow.fade::before { transform: none; }
.eyebrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-image: linear-gradient(90deg, transparent var(--f1), var(--a) var(--f1), var(--a) var(--f2), transparent var(--f2)); }
.eyebrow:hover::after, .eyebrow:active::after, .eyebrow:focus-within::after { animation: pipeflow .9s ease-in-out both; }
@keyframes pipeflow { 0% { --f1: 0%; --f2: 0%; } 50% { --f1: 0%; --f2: 100%; } 62% { --f1: 0%; --f2: 100%; } 100% { --f1: 100%; --f2: 100%; } }
.em, .hl { color: var(--a); }
.rule { height: 1px; background: var(--line); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease); }
.rule.visible { transform: none; }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; }
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .6s, color .6s, border-color .6s, fill .6s, stroke .6s !important; }

#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 120; background: var(--a); }

/* ---------- Page curtain and loader ---------- */
.pt { position: fixed; inset: 0; z-index: 950; background: var(--bg); transform: translateY(100%); display: grid; place-items: center; pointer-events: none; }
.pt b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 5vw, 3.2rem); opacity: 0; letter-spacing: -.01em; }
.pt i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--a); transform-origin: left; transform: scaleX(0); }
.pt.entering { transform: none; transition: transform .42s var(--ease-io); pointer-events: all; }
.pt.entering b { opacity: 1; transition: opacity .2s .18s; } .pt.entering i { transform: scaleX(1); transition: transform .42s .05s var(--ease-io); }
.pt.cover { transform: none; } .pt.cover b { opacity: 1; } .pt.cover i { transform: scaleX(1); }
.pt.leaving { transform: translateY(-100%); transition: transform .6s var(--ease-io) .08s; } .pt.leaving b { opacity: 0; transition: opacity .25s; } .pt.leaving i { transform: scaleX(1); }
#loader { position: fixed; inset: 0; z-index: 1000; }
#loader .panel { position: absolute; left: 0; right: 0; height: 50.2%; background: #0c0a09; transition: transform 1.05s var(--ease-io); }
#loader .top { top: 0; } #loader .bottom { bottom: 0; }
#loader .l-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: #f0eae2; transition: opacity .45s; }
.l-name { font-family: var(--serif); font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -.02em; }
.l-line { width: min(280px, 60vw); height: 1px; background: rgba(255,238,215,.2); overflow: hidden; } .l-line i { display: block; height: 100%; width: 0; background: #e8a33d; }
.l-pct { font-family: var(--mono); font-size: .8rem; letter-spacing: .2em; color: #b3aa9e; font-variant-numeric: tabular-nums; }
#loader.done .l-content { opacity: 0; } #loader.done .top { transform: translateY(-100%); } #loader.done .bottom { transform: translateY(100%); }

/* ---------- Pointer ring and label ---------- */
#cur-ring, #cur-label { position: fixed; top: 0; left: 0; z-index: 880; pointer-events: none; width: 0; height: 0; transition: opacity .3s; }
#cur-ring i { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid var(--a); opacity: .7; transition: transform .45s var(--ease), background .3s, opacity .3s; }
#cur-ring.big i { transform: scale(1.7); background: var(--a-soft); opacity: 1; }
#cur-ring.down i { transform: scale(.75); }
#cur-label span { position: absolute; left: 26px; top: 22px; padding: 4px 10px; border-radius: 4px; background: var(--text); color: var(--bg); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform: scale(0); transform-origin: left top; transition: transform .35s var(--ease); }
#cur-label.on span { transform: none; }
.cur-hide { opacity: 0 !important; }

/* ---------- Navigation ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(20px, 5vw, 56px); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transition: transform .55s var(--ease); }
.nav.hide { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.2rem; text-decoration: none; }
.logo { width: 34px; height: 34px; border: 1.5px solid var(--text); display: grid; place-items: center; font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .02em; position: relative; transition: background .4s, color .4s; }
.logo::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--a); opacity: 0; transform: scale(1.3); transition: .5s var(--ease); }
.brand:hover .logo { background: var(--text); color: var(--bg); } .brand:hover .logo::after { opacity: 1; transform: none; }
.menu { position: relative; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 72%, transparent); isolation: isolate; overflow: hidden; --mx: 50%; }
.menu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(130px circle at var(--mx) 50%, var(--a-soft), transparent 72%); opacity: 0; transition: opacity .4s; }
.menu:hover::before { opacity: 1; }
.menu a { position: relative; z-index: 1; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .96rem; font-weight: 600; letter-spacing: .01em; transition: color .3s, opacity .6s var(--ease), transform .6s var(--ease); opacity: 0; transform: translateY(-10px); transition-delay: 0s, calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms); }
.ready .menu a { opacity: 1; transform: none; }
.menu a .t { position: relative; display: block; height: 1.35em; line-height: 1.35em; overflow: hidden; }
.menu a .t > span { display: block; transition: transform .5s var(--ease); }
.menu a .t > span + span { position: absolute; left: 0; top: 100%; color: var(--text); }
.menu a:hover .t > span, .menu a:focus-visible .t > span { transform: translateY(-100%); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--text); }
.menu a[aria-current="page"] { font-weight: 700; }
.menu a[aria-current="page"]::before { content: ""; flex: none; width: 6px; height: 6px; margin-inline-end: 9px; background: var(--a); transform: rotate(45deg); animation: dpulse 2.4s ease-in-out infinite; }
@keyframes dpulse { 50% { transform: rotate(45deg) scale(1.5); opacity: .6; } }
.menu .ind { position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; border-radius: 999px; background: var(--a-soft); border: 1px solid color-mix(in srgb, var(--a) 60%, transparent); box-shadow: 0 0 22px var(--a-soft); transition: transform .6s var(--ease), width .6s var(--ease), opacity .3s; pointer-events: none; }
.tools { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--text); display: grid; place-items: center; padding: 0; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.icon-btn:hover { background: var(--hover); border-color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }
.sm { width: 22px !important; height: 22px !important; transition: transform .8s var(--ease); }
.sm .core { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease); }
.sm .cut { transition: transform .6s var(--ease); }
.sm .rays { transform-origin: 12px 12px; transition: transform .7s var(--ease), opacity .4s; }
[data-theme="dark"] .sm { transform: rotate(40deg); }
[data-theme="dark"] .sm .core { transform: scale(1.7); } [data-theme="dark"] .sm .cut { transform: translate(-13px, 6px); }
[data-theme="dark"] .sm .rays { opacity: 0; transform: rotate(-90deg) scale(.4); }
.burger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; padding: 0; position: relative; }
.burger i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--text); transition: .4s var(--ease); }
.burger i:nth-child(1) { top: 14px; } .burger i:nth-child(2) { top: 19px; } .burger i:nth-child(3) { top: 24px; }
body.menu-open .burger i:nth-child(1) { top: 19px; transform: rotate(45deg); } body.menu-open .burger i:nth-child(2) { opacity: 0; } body.menu-open .burger i:nth-child(3) { top: 19px; transform: rotate(-45deg); }
html.nc .burger { display: block; }
html.nc .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: 10px clamp(20px, 5vw, 56px) 26px; background: var(--bg); border-bottom: 1px solid var(--line); clip-path: inset(0 0 100% 0); transition: clip-path .65s var(--ease-io); }
html.nc body.menu-open .menu { clip-path: inset(0); }
html.nc .menu .ind { display: none; }
html.nc .menu a { font-family: var(--serif); font-size: 1.6rem; padding: 10px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-16px); transition: .55s var(--ease); }
html.nc .menu a[aria-current="page"]::before { content: "\2192\00a0"; color: var(--a); }
html.nc body.menu-open .menu a { opacity: 1; transform: none; }
html.nc .menu a:nth-child(2) { transition-delay: .04s; }
html.nc .menu a:nth-child(3) { transition-delay: .08s; }
html.nc .menu a:nth-child(4) { transition-delay: .12s; }
html.nc .menu a:nth-child(5) { transition-delay: .16s; }
html.nc .menu a:nth-child(6) { transition-delay: .2s; }
html.nc .menu a:nth-child(7) { transition-delay: .24s; }
html.nc .menu a:nth-child(8) { transition-delay: .28s; }
.share-wrap { position: relative; }
.share-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 262px; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line2); box-shadow: var(--shadow); transform-origin: top right; transform: translateY(-8px) scale(.96); opacity: 0; pointer-events: none; transition: .35s var(--ease); }
.share-menu.open { transform: none; opacity: 1; pointer-events: auto; }
.share-menu p { margin: 8px 12px 6px; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.share-menu .it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 8px; border: 0; background: none; color: var(--text); text-decoration: none; font-family: var(--sans); font-size: .92rem; text-align: left; transition: background .25s, padding .3s var(--ease); }
.share-menu .it:hover { background: var(--hover); padding-left: 18px; }
.share-menu .it svg { width: 18px; height: 18px; color: var(--a); }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 970; transform: translate(-50%, 24px); opacity: 0; padding: 12px 22px; border-radius: 6px; background: var(--text); color: var(--bg); font-family: var(--mono); font-size: .82rem; letter-spacing: .04em; pointer-events: none; transition: .5s var(--ease); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Text and reveal motion ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.w > span { display: inline-block; transform: translateY(112%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 65ms); }
[data-split].in .w > span, .ready .hero-split .w > span { transform: none; }
.fade { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.ready .fade { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal[data-anim="left"] { transform: translateX(-48px); } .reveal[data-anim="right"] { transform: translateX(48px); } .reveal[data-anim="zoom"] { transform: scale(.94); }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Buttons and links ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; background: var(--a); color: var(--on-a); font-family: var(--sans); font-weight: 600; font-size: .95rem; text-decoration: none; border: 1.5px solid var(--a); overflow: hidden; transition: transform .45s var(--ease), background .3s, color .3s, border-color .3s; }
.btn svg { width: 17px; height: 17px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line2); }
.btn.ghost:hover { border-color: var(--text); background: var(--hover); }
.btn:not(.ghost):hover { background: transparent; color: var(--a); }
.link { position: relative; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease), color .3s; padding-bottom: 2px; }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Home hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 130px 0 130px; }
canvas.contours { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.grat { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 112px 112px; opacity: .55; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 72%); }
.scan { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: linear-gradient(transparent, var(--a), transparent); opacity: .5; animation: scan 18s linear infinite; pointer-events: none; }
@keyframes scan { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } }
.vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 70% at 28% 52%, var(--bg) 8%, color-mix(in srgb, var(--bg) 60%, transparent) 45%, transparent 78%); }
.hero-inner { position: relative; z-index: 2; will-change: transform, opacity; }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 6.4rem); letter-spacing: -.03em; max-width: 12.5em; margin-bottom: .3em; }
.hero .lead { margin-bottom: 34px; }
.focus-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(48px, 8vw, 90px) 0 0; border-top: 1px solid var(--line2); max-width: 900px; }
.focus-dl div { padding: 18px 20px 0 0; }
.focus-dl dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.focus-dl dd { margin: 4px 0 0; font-family: var(--serif); font-size: 1.2rem; }
@media (max-width: 640px) { .focus-dl { grid-template-columns: 1fr; } .focus-dl div { padding-bottom: 10px; border-bottom: 1px solid var(--line); } }
.readout { position: absolute; z-index: 3; right: clamp(20px, 5vw, 56px); bottom: 28px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--muted); text-align: right; line-height: 1.7; }
.readout b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.cartouche { position: absolute; z-index: 3; left: clamp(20px, 5vw, 56px); bottom: 24px; display: flex; align-items: flex-end; gap: 22px; color: var(--muted); }
.cartouche svg { display: block; overflow: visible; }
.cartouche .north { animation: sway 8s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes sway { 50% { transform: rotate(5deg); } }
.hero .readout, .hero .cartouche { transition: opacity 1s 1.2s; opacity: 0; } .ready .hero .readout, .ready .hero .cartouche { opacity: 1; }
@media (max-width: 760px) { .cartouche { display: none; } }

/* ---------- Inner page header ---------- */
.phero { position: relative; overflow: hidden; padding: clamp(150px, 20vw, 220px) 0 clamp(70px, 9vw, 110px); border-bottom: 1px solid var(--line); }
.phero canvas.contours { opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 70%); mask-image: linear-gradient(90deg, transparent 5%, #000 70%); }
.phero .wrap { position: relative; z-index: 2; }
.phero h1 { font-size: clamp(2.8rem, 7.6vw, 6rem); letter-spacing: -.03em; margin-bottom: .25em; }
.phero .tag { position: absolute; right: clamp(20px, 5vw, 56px); bottom: 20px; z-index: 2; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--muted); }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; border-bottom: 1px solid var(--line); padding: 26px 0; background: var(--bg); }
.ticker .track { display: flex; align-items: center; gap: 48px; width: max-content; animation: scroll 60s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.ticker span.t { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.3rem); color: var(--muted); white-space: nowrap; transition: color .3s; }
.ticker span.t:hover { color: var(--text); }
.ticker i.d { width: 9px; height: 9px; background: var(--a); transform: rotate(45deg); flex: none; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- Section header ---------- */
.shead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: clamp(36px, 6vw, 70px); }
.shead .lead { margin: 0; justify-self: end; }
@media (max-width: 820px) { .shead { grid-template-columns: 1fr; gap: 12px; } .shead .lead { justify-self: start; } }

/* ---------- Focus cards and illustrations ---------- */
.focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: border-color .4s, transform .6s var(--ease), box-shadow .6s var(--ease); }
.fcard:hover { border-color: var(--a); transform: translateY(-6px); box-shadow: var(--shadow); }
.fcard .art { position: relative; aspect-ratio: 8 / 5; background: var(--bg2); border-bottom: 1px solid var(--line); overflow: hidden; }
.fcard .art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; opacity: .5; }
.fcard .body { padding: 26px 26px 30px; }
.fcard .no { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; color: var(--a); }
.fcard h3 { margin: 6px 0 8px; } .fcard p { color: var(--muted); margin: 0; font-size: .96rem; }
svg.ill { position: absolute; inset: 0; width: 100%; height: 100%; }
.ill .gl { stroke: var(--line2); stroke-width: 1; fill: none; }
.ill .ax { stroke: var(--muted); stroke-width: 1.2; fill: none; }
.ill text { font-family: var(--mono); font-size: 8px; fill: var(--muted); letter-spacing: .06em; }
.ill .vec { stroke: var(--b); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 5; animation: dash 1.4s linear infinite; }
.ill .vech { stroke: var(--b); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ill .front { stroke: var(--a); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-dasharray: 8 5; animation: dash 1.8s linear infinite reverse; }
.ill .heat { fill: var(--a-soft); stroke: var(--a); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: breathe 3.6s ease-in-out infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
@keyframes breathe { 50% { transform: scale(1.25); opacity: .55; } }
.ill .mk { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .7s var(--ease); transition-delay: calc(var(--i) * 90ms + 200ms); }
.fcard.on .ill .mk { transform: scale(1); }
.ill .mk.c { fill: var(--a); } .ill .mk.s { fill: var(--b); } .ill .mk.t { fill: var(--n); } .ill .mk.dm { fill: none; stroke: var(--a); stroke-width: 2; }
.ill .rowline { stroke: var(--line2); stroke-width: 1; }
.ill .band { fill: var(--a-soft); } .ill .s1 { stroke: var(--a); stroke-width: 2.4; fill: none; } .ill .s2 { stroke: var(--b); stroke-width: 2.4; fill: none; stroke-dasharray: 8 5; } .ill .s3 { stroke: var(--n); stroke-width: 2.4; fill: none; stroke-dasharray: 2 5; stroke-linecap: round; }
.ill .wipe { clip-path: inset(0 100% 0 0); transition: clip-path 2s var(--ease-io) .2s; } .fcard.on .ill .wipe { clip-path: inset(0); }

/* ---------- Index rows ---------- */
.rows { border-top: 1px solid var(--line2); }
.row { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.1fr) 56px; align-items: center; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--line); text-decoration: none; overflow: hidden; }
.row::before { content: ""; position: absolute; inset: 0; background: var(--hover); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.row:hover::before { transform: none; }
.row > * { position: relative; }
.row .rn { font-family: var(--mono); font-size: .8rem; color: var(--a); letter-spacing: .1em; }
.row h3 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); transition: transform .6s var(--ease), color .3s; }
.row:hover h3 { transform: translateX(14px); color: var(--a); }
.row p { margin: 0; color: var(--muted); }
.row .go { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; transition: .5s var(--ease); }
.row .go svg { width: 20px; height: 20px; }
.row:hover .go { background: var(--a); color: var(--on-a); border-color: var(--a); transform: rotate(-45deg); }
@media (max-width: 760px) { .row { grid-template-columns: 44px 1fr 44px; gap: 14px; } .row p { display: none; } }

/* ---------- Metrics, bars, rose, charts ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--line2); }
.metric { padding: 30px 24px 30px 0; border-bottom: 1px solid var(--line); }
.metric b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 6vw, 4.8rem); line-height: 1; letter-spacing: -.03em; }
.metric span { display: block; margin-top: 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 5vw, 70px); align-items: center; }
.bars { display: grid; gap: 22px; }
.brow { display: grid; grid-template-columns: 140px 1fr 52px; gap: 16px; align-items: center; font-size: .95rem; }
.brow .tr { position: relative; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.brow .tr i { position: absolute; inset: 0; background: var(--a); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease-io); }
.brow.on .tr i { transform: scaleX(var(--v)); }
.brow output { font-family: var(--mono); font-size: .82rem; text-align: right; }
.bio p { color: var(--muted); max-width: 640px; }
.chart-card { position: relative; padding: 28px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.chart-card h3 { margin: 0 0 4px; font-size: 1.35rem; } .chart-card small { color: var(--muted); font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0 4px; font-size: .86rem; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 8px; } .lg svg { width: 28px; height: 14px; overflow: visible; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.chart .gl { stroke: var(--line); stroke-width: 1; } .chart .ax { stroke: var(--line2); stroke-width: 1; }
.chart text { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.chart .lab { font-family: var(--sans); font-size: 12px; font-weight: 600; }
.chart .la { fill: var(--a); } .chart .lb { fill: var(--b); }
.chart .band { fill: var(--a-soft); } .chart .sa { fill: none; stroke: var(--a); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; } .chart .sb { fill: none; stroke: var(--b); stroke-width: 2.6; stroke-dasharray: 7 5; stroke-linejoin: round; }
.chart .ma { fill: var(--surface); stroke: var(--a); stroke-width: 2.4; } .chart .mb { fill: var(--surface); stroke: var(--b); stroke-width: 2.4; }
.chart .mk { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: .5s var(--ease); transition-delay: calc(var(--i) * 110ms + 900ms); }
.chart-card.on .mk { opacity: 1; transform: none; } .chart .mk.hot { transform: scale(1.5); }
.chart .band { opacity: 0; transition: opacity 1.4s 1s; } .chart-card.on .band { opacity: 1; }
.chart .guide { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .2s; } .chart .guide.on { opacity: .6; }
.chart .bar-a { fill: var(--a); } .chart .bar-b { stroke: var(--b); stroke-width: 2; }
.chart .bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 80ms); }
.chart-card.on .bar { transform: none; }
.chart .val { opacity: 0; transition: opacity .6s; transition-delay: calc(var(--i) * 80ms + 900ms); font-size: 10.5px; fill: var(--text); text-anchor: middle; } .chart-card.on .val { opacity: 1; }
.tip { position: absolute; z-index: 5; pointer-events: none; padding: 10px 14px; background: var(--text); color: var(--bg); border-radius: 6px; font-size: .8rem; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; white-space: nowrap; }
.tip.on { opacity: 1; transform: none; } .tip b { font-family: var(--mono); font-weight: 500; }
.rose { width: min(420px, 90%); margin: auto; display: block; overflow: visible; }
.rose .rg { fill: none; stroke: var(--line2); stroke-width: 1; } .rose .rl { stroke: var(--line); stroke-width: 1; }
.rose text { font-family: var(--mono); font-size: 10px; fill: var(--muted); text-anchor: middle; dominant-baseline: middle; } .rose .card-l { font-size: 12px; fill: var(--text); font-weight: 500; }
.rose .pa { fill: var(--a); fill-opacity: .88; stroke: var(--bg); stroke-width: 1; } .rose .pb { fill: none; stroke: var(--b); stroke-width: 2.2; stroke-dasharray: 5 4; }
.rose .petal { transform-box: view-box; transform: scale(0); transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.rose.on .petal { transform: scale(1); }
.rose .sweep { transform-origin: 160px 160px; animation: rot 12s linear infinite; } @keyframes rot { to { transform: rotate(360deg); } }
.rose .sw { stroke: var(--a); stroke-width: 1.5; opacity: .6; }

/* ---------- Showcase (horizontal scroll) ---------- */
.hscroll { height: 440vh; background: var(--bg2); border-bottom: 1px solid var(--line); }
.sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.h-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 70px; }
.h-head h2 { margin: 0; }
.h-count { font-family: var(--mono); font-size: .85rem; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; } .h-count b { color: var(--text); font-weight: 500; font-size: 1.4rem; }
.h-track { display: flex; gap: 28px; padding: 0 clamp(20px, 5vw, 56px); will-change: transform; }
.h-card { flex: 0 0 min(70vw, 600px); position: relative; }
.h-card .im { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); }
.h-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); will-change: transform; filter: saturate(.85) contrast(1.04); }
.h-card .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 2px 0; }
.h-card h3 { font-size: 1.35rem; } .h-card .no { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; color: var(--a); }
.h-card p { margin: 4px 0 0; color: var(--muted); font-size: .94rem; }
.h-progress { margin: 0 clamp(20px, 5vw, 56px) 34px; height: 1px; background: var(--line2); position: relative; }
.h-progress i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--a); }
@media (max-width: 720px) { .hscroll { height: auto; padding: 80px 0; } .sticky { position: static; height: auto; overflow: visible; } .h-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; } .h-card { scroll-snap-align: center; flex-basis: 82vw; } .h-progress { display: none; } }
.hscroll.simple { height: auto; padding: 80px 0; } .hscroll.simple .sticky { position: static; height: auto; overflow: visible; } .hscroll.simple .h-track { overflow-x: auto; } .hscroll.simple .h-progress { display: none; }

/* ---------- Gallery ---------- */
.seg { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--line2); border-radius: 999px; margin-bottom: 40px; background: var(--surface); }
.seg button { position: relative; z-index: 1; padding: 9px 22px; border: 0; background: none; color: var(--muted); font-family: var(--sans); font-size: .88rem; font-weight: 500; border-radius: 999px; transition: color .3s; }
.seg button[aria-pressed="true"] { color: var(--on-a); font-weight: 600; }
.seg .seg-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; background: var(--a); border-radius: 999px; transition: transform .55s var(--ease), width .55s var(--ease); }
.figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 34px 26px; }
.fig { margin: 0; cursor: pointer; }
.fig.hide { display: none; }
.fig.pop { animation: pop .7s var(--ease) both; } @keyframes pop { from { opacity: 0; transform: translateY(24px); } }
.fig .fi { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-io); }
.fig.visible .fi { clip-path: inset(0); }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.3); transition: transform 1.8s var(--ease); filter: saturate(.88); }
.fig.visible img { transform: scale(1); } .fig:hover img { transform: scale(1.06); transition-duration: .9s; }
.fig .ex { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: var(--bg); color: var(--text); display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: .45s var(--ease); }
.fig .ex svg { width: 16px; height: 16px; } .fig:hover .ex { opacity: 1; transform: none; }
.fig figcaption { display: flex; gap: 14px; padding-top: 14px; opacity: 0; transform: translateY(10px); transition: .9s var(--ease) .4s; } .fig.visible figcaption { opacity: 1; transform: none; }
.fig figcaption b { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--a); white-space: nowrap; padding-top: 4px; }
.fig figcaption span { color: var(--muted); font-size: .94rem; line-height: 1.5; }
.lightbox { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 500; padding: 24px; }
.lightbox.open { display: flex; animation: fadein .35s; } @keyframes fadein { from { opacity: 0; } }
.lightbox img { max-width: 90vw; max-height: 74vh; border-radius: 4px; background: var(--surface); min-width: 280px; min-height: 200px; animation: zoomin .6s var(--ease); } @keyframes zoomin { from { transform: scale(.94); opacity: 0; } }
.lightbox p { max-width: 720px; text-align: center; margin: 16px 0 0; color: var(--muted); } .lightbox p b { font-family: var(--mono); font-weight: 500; color: var(--text); margin-right: 10px; letter-spacing: .1em; }
.lb-btn { position: absolute; top: 50%; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line2); background: var(--surface); color: var(--text); font-size: 1.4rem; transition: .3s; } .lb-btn:hover { border-color: var(--text); background: var(--hover); }
.lb-prev { left: 22px; } .lb-next { right: 22px; } .lb-close { top: 22px; right: 22px; }
.lb-count { position: absolute; top: 30px; left: 30px; font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; color: var(--muted); }

/* ---------- Compare, spotlight ---------- */
.compare { position: relative; max-width: 1000px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; border: 1px solid var(--line2); user-select: none; margin-bottom: 90px; background: var(--surface); }
.compare .layer { position: absolute; inset: 0; } .compare .layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .a img { filter: saturate(.35) contrast(1.05); } .compare .b { clip-path: inset(0 0 0 50%); }
.chip { position: absolute; top: 14px; z-index: 2; padding: 5px 12px; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; border: 1px solid var(--line2); } .chip.l { left: 14px; } .chip.r { right: 14px; }
.handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--text); z-index: 3; pointer-events: none; }
.handle .knob { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text); display: grid; place-items: center; color: var(--text); animation: nudge 3s ease-in-out infinite; }
.handle .knob svg { width: 22px; height: 22px; } @keyframes nudge { 50% { transform: scale(1.1); } }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 4; margin: 0; }
.spot { position: relative; max-width: 1000px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; border: 1px solid var(--line2); --sx: 50%; --sy: 50%; background: var(--surface); }
.spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .spot .base { filter: grayscale(1) brightness(.6) contrast(.95); }
.spot .top { -webkit-mask-image: radial-gradient(circle 120px at var(--sx) var(--sy), #000 66%, transparent 100%); mask-image: radial-gradient(circle 120px at var(--sx) var(--sy), #000 66%, transparent 100%); }
.spot .lens { position: absolute; left: var(--sx); top: var(--sy); width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; border: 1.5px solid var(--text); pointer-events: none; }
.spot .lens::before, .spot .lens::after { content: ""; position: absolute; background: var(--text); } .spot .lens::before { left: 50%; top: -9px; width: 1.5px; height: 18px; } .spot .lens::after { top: 50%; left: -9px; height: 1.5px; width: 18px; }

/* ---------- Pipeline ---------- */
.pipe { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); --p: 0; }
.pipe::before { content: ""; position: absolute; top: 17px; left: 12.5%; right: 12.5%; height: 2px; background: var(--line2); }
.pipe .prog { position: absolute; top: 17px; left: 12.5%; right: 12.5%; height: 2px; background: var(--a); transform-origin: left; transform: scaleX(var(--p)); }
.pipe .flow { position: absolute; top: 12px; left: 12.5%; width: 10px; height: 10px; background: var(--a); transform: rotate(45deg); animation: flow 5s linear infinite; }
@keyframes flow { 0% { left: 12.5%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(87.5% - 10px); opacity: 0; } }
.pstep { position: relative; padding: 62px 16px 0; text-align: center; }
.pstep .node { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line2); background: var(--bg); display: grid; place-items: center; font-family: var(--mono); font-size: .78rem; font-weight: 500; transition: .6s var(--ease); }
.pstep.on .node { background: var(--a); border-color: var(--a); color: var(--on-a); transform: translateX(-50%) scale(1.15); box-shadow: 0 0 0 7px var(--a-soft); }
.pstep .ic { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 6px; border: 1px solid var(--line2); display: grid; place-items: center; color: var(--muted); transition: .6s var(--ease); }
.pstep .ic svg { width: 28px; height: 28px; } .pstep.on .ic { color: var(--a); border-color: var(--a); }
.pstep h3 { margin-bottom: 6px; } .pstep p { color: var(--muted); font-size: .94rem; margin: 0; }
.pstep { opacity: .45; transition: opacity .7s; } .pstep.on { opacity: 1; }
.pstep.on .gear { animation: rot 7s linear infinite; transform-origin: 12px 12px; } .pstep.on .bell { animation: ring 2.4s ease-in-out infinite; transform-origin: 12px 4px; } .pstep.on .dbp { animation: bob 2.4s ease-in-out infinite; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 8%, 24% { transform: rotate(12deg); } 16%, 32% { transform: rotate(-12deg); } 40% { transform: rotate(0); } } @keyframes bob { 50% { transform: translateY(-2px); } }
@media (max-width: 820px) {
  .pipe { grid-template-columns: 1fr; gap: 6px; } .pipe::before { top: 18px; bottom: 18px; left: 17px; right: auto; width: 2px; height: auto; }
  .pipe .prog { top: 18px; bottom: 18px; left: 17px; right: auto; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--p)); } .pipe .flow { display: none; }
  .pstep { text-align: left; padding: 0 0 38px 64px; } .pstep .node { left: 0; transform: none; } .pstep.on .node { transform: scale(1.12); } .pstep .ic { margin: 0 0 12px; }
}

/* ---------- Timeline ---------- */
.tl { position: relative; max-width: 920px; }
.tl-line { position: absolute; left: 168px; top: 10px; bottom: 30px; width: 2px; background: var(--line2); } .tl-fill { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--a); }
.t-item { position: relative; display: grid; grid-template-columns: 140px 1fr; gap: 56px; padding-bottom: 56px; }
.t-item::before { content: ""; box-sizing: border-box; position: absolute; left: 162px; top: 12px; width: 14px; height: 14px; background: var(--bg); border: 2px solid var(--line2); transform: rotate(45deg); transition: .6s var(--ease); }
.t-item.visible::before { background: var(--a); border-color: var(--a); box-shadow: 0 0 0 6px var(--a-soft); }
.t-item .yr { font-family: var(--serif); font-size: 2.2rem; line-height: 1; letter-spacing: -.02em; text-align: right; }
.t-item h3 { margin: 0 0 6px; } .t-item p { color: var(--muted); margin: 0; max-width: 520px; }
.t-item .now { display: inline-block; margin-left: 10px; padding: 2px 8px; border: 1px solid var(--b); color: var(--a); font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; vertical-align: middle; }
@media (max-width: 640px) { .t-item { grid-template-columns: 76px 1fr; gap: 36px; } .tl-line { left: 98px; } .t-item::before { left: 92px; } .t-item .yr { font-size: 1.4rem; } }

/* ---------- Contact ---------- */
.big-mail { display: inline-block; font-family: var(--serif); font-size: clamp(1.9rem, 6.2vw, 5rem); letter-spacing: -.03em; line-height: 1.1; text-decoration: none; word-break: break-all; background: linear-gradient(var(--a), var(--a)) 0 100% / 0 3px no-repeat; transition: background-size .8s var(--ease), color .3s; padding-bottom: 6px; }
.big-mail:hover { background-size: 100% 3px; color: var(--a); }
.lrows { margin-top: 70px; border-top: 1px solid var(--line2); }
.lrow { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; overflow: hidden; }
.lrow::before { content: ""; position: absolute; inset: 0; background: var(--hover); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .lrow:hover::before { transform: none; }
.lrow > * { position: relative; } .lrow svg { width: 22px; height: 22px; } .lrow b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; } .lrow span.h { font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.lrow .arr { transition: transform .5s var(--ease); } .lrow:hover .arr { transform: translate(4px, -4px); }
@media (max-width: 640px) { .lrow { grid-template-columns: 36px 1fr 30px; } .lrow span.h { display: none; } }

/* ---------- Socials, pager, footer ---------- */
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.soc { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line2); color: var(--text); text-decoration: none; transition: transform .45s var(--ease), background .3s, color .3s, border-color .3s; }
.soc svg { width: 19px; height: 19px; } .soc:hover { transform: translateY(-4px); background: var(--text); color: var(--bg); border-color: var(--text); }
.soc::after { content: attr(data-label); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); padding: 4px 10px; border-radius: 4px; background: var(--text); color: var(--bg); font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; white-space: nowrap; opacity: 0; pointer-events: none; transition: .3s; } .soc:hover::after { opacity: 1; transform: translate(-50%, 0); }
.pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line2); }
.pager a { position: relative; display: block; padding: clamp(36px, 6vw, 70px) clamp(20px, 5vw, 56px); text-decoration: none; overflow: hidden; border-right: 1px solid var(--line); }
.pager a:last-child { border-right: 0; } .pager a::before { content: ""; position: absolute; inset: 0; background: var(--hover); transform: scaleX(0); transition: transform .7s var(--ease); } .pager .prev::before { transform-origin: right; } .pager .next::before { transform-origin: left; } .pager a:hover::before { transform: none; }
.pager small { position: relative; display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .pager b { position: relative; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 4.4vw, 3.4rem); letter-spacing: -.02em; transition: color .3s; } .pager a:hover b { color: var(--a); }
.pager .next { text-align: right; grid-column: 2; } .pager .prev { grid-column: 1; } .pager a:only-child { grid-column: 1 / -1; }
@media (max-width: 640px) { .pager { grid-template-columns: 1fr; } .pager .next, .pager .prev { grid-column: 1; border-right: 0; border-bottom: 1px solid var(--line); } }
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px; padding: 64px clamp(20px, 5vw, 56px) 44px; border-top: 1px solid var(--line2); background: var(--bg2); }
.foot h4 { margin: 0 0 14px; font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.foot .name { font-family: var(--serif); font-size: 1.7rem; letter-spacing: -.01em; margin-bottom: 4px; } .foot p { color: var(--muted); margin: 0 0 16px; }
.foot .links { display: flex; flex-direction: column; gap: 6px; } .foot .links a { width: fit-content; text-decoration: none; color: var(--muted); transition: color .3s, transform .4s var(--ease); } .foot .links a:hover { color: var(--text); transform: translateX(6px); }
.copy { padding: 20px clamp(20px, 5vw, 56px); color: var(--muted); background: var(--bg2); border-top: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; }
#totop { position: fixed; right: 22px; bottom: 22px; width: 50px; height: 50px; z-index: 80; border: 0; background: var(--surface); border-radius: 50%; color: var(--text); font-size: 1.1rem; opacity: 0; transform: translateY(18px); pointer-events: none; transition: .5s var(--ease); box-shadow: var(--shadow); }
#totop.show { opacity: 1; transform: none; pointer-events: auto; } #totop svg { position: absolute; inset: 0; transform: rotate(-90deg); width: 50px; height: 50px; } #totop circle { fill: none; stroke-width: 2; } #totop .bg { stroke: var(--line2); } #totop .fg { stroke: var(--a); stroke-dasharray: 138.2; stroke-dashoffset: 138.2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal, .fade { opacity: 1; transform: none; } .w > span { transform: none; } .rule { transform: none; }
  .fig .fi { clip-path: none; } .fig img { transform: none; } .fig figcaption { opacity: 1; transform: none; }
  .brow .tr i { transform: scaleX(var(--v)); } .chart .mk, .chart .band, .chart .val { opacity: 1; transform: none; } .chart .bar { transform: none; }
  .rose .petal { transform: none; } .ill .mk { transform: scale(1); } .ill .wipe { clip-path: none; } .pstep { opacity: 1; }
}
@media (forced-colors: active) { .btn, .icon-btn, .soc { border: 1px solid ButtonText; } .menu .ind { background: Highlight; } }

/* anandu.fire wordmark with loading dots */
.wm { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.wm em { font-style: normal; color: var(--a); }
.pt b.wm { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; }
.pt .wm { font-size: clamp(1.8rem, 6vw, 3.4rem); }
#loader .l-name.wm { color: #f0eae2; } #loader .l-name.wm em { color: #e8a33d; }
.wm .ld { margin-left: 2px; letter-spacing: 0; }
.wm .ld u { text-decoration: none; display: inline-block; opacity: .15; animation: ldot .6s ease-in-out infinite; }
.wm .ld u:nth-child(2) { animation-delay: .15s; } .wm .ld u:nth-child(3) { animation-delay: .3s; }
@keyframes ldot { 0%, 100% { opacity: .15; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-.12em); } }

/* ---------- Header tools: language, text size, full screen ---------- */
.sz { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; overflow: hidden; }
.sz button { border: 0; background: none; color: var(--text); width: 38px; height: 38px; font-family: var(--sans); font-weight: 700; line-height: 1; padding: 0; transition: background .3s; }
.sz button:hover:not(:disabled) { background: var(--hover); } .sz button:disabled { opacity: .35; }
.lang-btn { width: auto; min-width: 40px; padding: 0 12px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--text); }
.lang-btn svg { width: 17px; height: 17px; }
.lang-menu { width: 210px; }
.lang-menu .it[aria-checked="true"] { background: var(--a-soft); font-weight: 700; }
.lang-menu .it .code { margin-left: auto; font-size: .72rem; color: var(--muted); letter-spacing: .1em; }
.fs-btn .i-exit { display: none; } html.is-fs .fs-btn .i-enter { display: none; } html.is-fs .fs-btn .i-exit { display: block; }
.nav { gap: 10px; }
@media (max-width: 560px) { .fs-btn { display: none; } .tools { gap: 5px; } .brand span:last-child { display: none; } .sz button { width: 34px; height: 36px; } .nav { padding-inline: 14px; } }

/* ---------- Right-to-left (Arabic) ---------- */
html[lang="ar"] *, html[lang="ml"] .eyebrow, html[lang="hi"] .eyebrow { letter-spacing: 0 !important; }
html[dir="rtl"] body { text-align: start; }
html[dir="rtl"] .share-menu { right: auto; left: 0; transform-origin: top left; }
html[dir="rtl"] .share-menu .it { text-align: right; } html[dir="rtl"] .share-menu .it:hover { padding-left: 12px; padding-right: 18px; }
html[dir="rtl"] .lang-menu .it .code { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .toast { direction: rtl; }
html[dir="rtl"] :is(.tl, .compare, .spot, .h-track, .pipe, .seg, svg, .legend svg, .cartouche, .readout, .ticker, .lightbox, .big-mail, .h-progress, .brow .tr) { direction: ltr; }
html[dir="rtl"] :is(.tl, .pipe, .compare, .h-card, .seg, .lightbox) :is(h3, p, span, b, small, figcaption) { direction: rtl; unicode-bidi: plaintext; }
html[dir="rtl"] .t-item p, html[dir="rtl"] .t-item h3 { text-align: right; }
html[dir="rtl"] .readout { text-align: left; }
html[dir="rtl"] .row .go svg, html[dir="rtl"] .lrow .arr svg, html[dir="rtl"] .btn svg { transform: scaleX(-1); }
html[dir="rtl"] .row:hover h3 { transform: translateX(-14px); }
html[dir="rtl"] .pager .next { text-align: left; }

.nav .brand, .nav .menu a, .nav .tools { white-space: nowrap; flex: none; } .nav .menu { flex: none; }
.keep { text-transform: none; letter-spacing: .04em; }
.brand > span:last-child, .nt, .keep { unicode-bidi: isolate; }
html[dir="rtl"] .brand > span:last-child, html[dir="rtl"] .nt { direction: ltr; }
html[dir="rtl"] .sz, html[dir="rtl"] .lang-btn { direction: ltr; }
h1, h2, h3, p, .lead, figcaption, .row p, .metric span, .t-item { overflow-wrap: break-word; hyphens: auto; }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; }
@media (max-width: 560px) { .seg button { padding: 9px 13px; } }
.shead > *, .two > *, .focus-grid > *, .metrics > * { min-width: 0; }
.w, .w > span { max-width: 100%; } .w > span { overflow-wrap: anywhere; hyphens: auto; }

html.nc .menu { border: 0; border-radius: 0; overflow: visible; background: var(--bg); gap: 0; }
html.nc .menu::before { display: none; }
html.nc .menu a .t > span + span { display: none; } html.nc .menu a:hover .t > span { transform: none; } html.nc .menu a .t { height: auto; line-height: 1.2; overflow: visible; }
html.nc .menu a { border-radius: 0; transition-delay: 0s; }
html.nc .menu a[aria-current="page"]::before { width: auto; height: auto; background: none; transform: none; animation: none; margin: 0; }
/* tools: A- / A+ and full screen, centred in their circles */
.sz { display: inline-flex; gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.sz button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: transparent; color: var(--text); transition: background .3s, border-color .3s; }
.sz button + button { border-left: 1px solid var(--line2); }
.sz button:hover:not(:disabled) { background: var(--hover); border-color: var(--text); } .sz button:disabled { opacity: .35; }
.sz button svg { width: 22px; height: 22px; display: block; }
.fs-btn > span { display: grid; place-items: center; width: 19px; height: 19px; } .fs-btn > span svg { width: 19px; height: 19px; display: block; }
.fs-btn .i-exit { display: none; } html.is-fs .fs-btn .i-enter { display: none; } html.is-fs .fs-btn .i-exit { display: grid; }
.icon-btn { line-height: 0; }
@media (max-width: 560px) { .sz button { width: 36px; height: 36px; } .sz { gap: 5px; } }

/* ---------- Content components: chips, definition rows, publications, workshops, research ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 7px 15px; border: 1px solid var(--line2); border-radius: 4px; background: var(--surface); font-size: .95rem; font-weight: 600; transition: border-color .3s, transform .5s var(--ease), background .3s; }
.chips li:hover { border-color: var(--a); background: var(--a-soft); transform: translateY(-3px); }
.dl { border-top: 1px solid var(--line2); margin: 0; }
.dl-row { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr); gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); position: relative; }
.dl-row::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--a); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.dl-row:hover::before { transform: none; }
.dl dt { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a); }
.dl dd { margin: 0; } .dl dd a { color: var(--text); }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border: 1px solid var(--a); color: var(--a); border-radius: 3px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.badge.alt { border-color: var(--b); color: var(--b); }
.badge i { width: 8px; height: 8px; background: currentColor; display: inline-block; } .badge i.c { border-radius: 50%; } .badge i.d { transform: rotate(45deg); } .badge i.o { background: none; border: 2px solid currentColor; border-radius: 50%; width: 9px; height: 9px; }
.pubs { border-top: 1px solid var(--line2); }
.pub { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 28px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.pub::before { content: ""; position: absolute; inset: 0; background: var(--hover); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.pub:hover::before { transform: none; } .pub > * { position: relative; }
.pub .yr { font-family: var(--serif); font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; }
.pub .yr small { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a); margin-top: 4px; }
.pub h3 { font-size: 1.3rem; line-height: 1.3; margin: 0 0 8px; letter-spacing: 0; font-weight: 700; }
.pub .au, .pub .ve { margin: 0; color: var(--muted); } .pub .au b { color: var(--text); } .pub .ve { font-style: italic; margin-top: 6px; }
.pub .act { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.pub .tag2 { font-size: .78rem; color: var(--muted); }
.sub-h { margin: 70px 0 8px; }
.yh { display: flex; align-items: center; gap: 22px; margin: 70px 0 28px; } .yh:first-child { margin-top: 0; }
.yh h3 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.03em; } .yh::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.wks { display: grid; gap: 18px; }
.wk { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 30px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow: hidden; transition: border-color .4s, transform .6s var(--ease), box-shadow .6s var(--ease); }
.wk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--a); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease); }
.wk:hover { border-color: var(--line2); transform: translateX(6px); box-shadow: var(--shadow); } .wk:hover::before { transform: none; }
.wk .when { font-weight: 700; color: var(--a); font-size: .95rem; line-height: 1.5; } .wk .when .badge { margin-bottom: 12px; display: flex; width: fit-content; }
.wk h3 { font-size: 1.25rem; line-height: 1.35; letter-spacing: 0; font-weight: 700; margin-bottom: 8px; }
.wk p { margin: 0; color: var(--muted); } .wk p b { color: var(--text); font-weight: 600; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.rcard { padding: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); transition: border-color .4s, transform .6s var(--ease), box-shadow .6s var(--ease); }
.rcard:hover { border-color: var(--a); transform: translateY(-5px); box-shadow: var(--shadow); }
.rcard.big { grid-column: 1 / -1; }
.rcard h3 { font-size: 1.6rem; margin: 12px 0 10px; line-height: 1.2; } .rcard h4 { margin: 22px 0 8px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--a); }
.rcard p { color: var(--muted); margin: 0 0 8px; } .rcard .who { color: var(--text); font-size: .95rem; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ol { counter-reset: o; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ol li { counter-increment: o; position: relative; padding-inline-start: 44px; color: var(--muted); } .ol li::before { content: counter(o, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: 0; font-weight: 700; color: var(--a); font-size: .9rem; letter-spacing: .08em; }
@media (max-width: 760px) { .pub { grid-template-columns: 1fr; gap: 12px; } .pub .act { align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-items: center; } .wk { grid-template-columns: 1fr; gap: 12px; } .dl-row { grid-template-columns: 1fr; gap: 6px; } .rgrid { grid-template-columns: 1fr; } }
html[dir="rtl"] .wk:hover { transform: translateX(-6px); }

/* Motion: every moving part is a transform or opacity change on its own layer, so the compositor can run at the display refresh rate (120 Hz where available). */
#cur-ring,.ind,.menu a,.btn,.fcard,.rcard,.pub,.wk,.fig{backface-visibility:hidden}
#cur-ring,.ind{will-change:transform}
:root{--ease:cubic-bezier(.22,1,.36,1)}
/* CJK: system fonts, no letter-spacing or capitals, which do not apply to these scripts */
:root{--cjk:"Noto Sans SC","PingFang SC","Microsoft YaHei","Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo"}
html[lang="zh"]{--serif:Calibri,Carlito,"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;--sans:var(--serif);--mono:var(--serif)}
html[lang="ja"]{--serif:Calibri,Carlito,"Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",system-ui,sans-serif;--sans:var(--serif);--mono:var(--serif)}
html[lang="zh"] *,html[lang="ja"] *{letter-spacing:0!important}
html[lang="zh"] .eyebrow,html[lang="ja"] .eyebrow{letter-spacing:.06em!important}
html[lang="zh"] body,html[lang="ja"] body{line-break:strict;word-break:normal;overflow-wrap:anywhere}
html[lang="zh"] h1,html[lang="ja"] h1{font-size:clamp(2rem,5.2vw,4.2rem)!important;line-height:1.25}
html[lang="zh"] h2,html[lang="ja"] h2{line-height:1.3}

/* Voice assistant button */
.voice-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%}
.voice-btn svg{width:22px;height:22px;display:block}
.voice-btn .w1,.voice-btn .w2{opacity:.55;transition:opacity .3s}
.voice-btn.speaking{color:var(--on-a);background:var(--a);border-color:var(--a)}
.voice-btn.speaking .w1,.voice-btn.speaking .w2{animation:vwave 1s ease-in-out infinite}
.voice-btn.speaking .w2{animation-delay:.18s}
.voice-btn.speaking::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--a);animation:vring 1.6s var(--ease) infinite;pointer-events:none}
.voice-btn.paused{border-color:var(--a);color:var(--a)}
.voice-btn.paused .w1,.voice-btn.paused .w2{opacity:.25}
@keyframes vwave{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes vring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
@media (max-width:560px){.voice-btn{width:36px;height:36px}}

/* Contact page: compact emails and profile chips */
.contact-compact{max-width:760px}
.contact-compact .cdl .dl-row{padding:9px 0;gap:16px;grid-template-columns:minmax(90px,130px) minmax(0,1fr);align-items:baseline}
.contact-compact .cdl dt{font-size:.74rem}
.contact-compact .cdl dd{font-size:.95rem;overflow-wrap:anywhere}
.btn.cbtn{padding:7px 16px;font-size:.82rem;gap:6px}
.lrows{margin-top:10px;border-top:0;display:flex;flex-wrap:wrap;gap:8px}
.lrow{display:inline-flex;grid-template-columns:none;gap:8px;padding:6px 12px 6px 10px;border:1px solid var(--line2);border-radius:999px;font-size:.84rem;overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.lrow:hover{border-color:var(--a);transform:translateY(-2px)}
.lrow svg{width:16px;height:16px}
.lrow b{font-family:var(--sans);font-size:.84rem;font-weight:600}
.lrow span.h,.lrow .arr{display:none}

/* Footer: copyright line only */
.copy{text-align:center;padding:26px clamp(20px,5vw,56px);font-size:.82rem;letter-spacing:.04em}
/* Terminal style boot screen and page transition */
#loader .l-content{padding:20px}
.term{width:min(640px,92vw);border:1px solid rgba(255,238,215,.22);border-radius:10px;background:#0a0807;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;font-family:"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",Menlo,monospace;text-align:left}
.tbar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid rgba(255,238,215,.14);color:#aaa196;font-size:.74rem}
.tbar i{width:9px;height:9px;border-radius:50%;background:#3b352f}.tbar i:nth-child(1){background:#e8a33d}.tbar i:nth-child(2){background:#86a9c2}
.tbar span{margin-left:auto;margin-right:auto;letter-spacing:.06em}
.tbody{padding:16px 18px 18px;min-height:210px;font-size:clamp(.74rem,2.3vw,.92rem);line-height:1.75;color:#d9d1c6}
#term-out .cmd{color:#f0eae2}#term-out .ln b{color:#e8a33d;font-weight:600}
.tprog{margin-top:10px;color:#86a9c2;white-space:pre}.tprog #l-pct{color:#f0eae2}
.cur{display:inline-block;width:.55em;height:1.05em;margin-left:3px;vertical-align:-.15em;background:#e8a33d;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pt .pr{color:var(--b);margin-right:.4em}
.pt b.wm{display:inline-flex;align-items:center}
.pt .cur{background:var(--a)}
.pt b.wm,.pt .pr{font-family:"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",Menlo,monospace;font-weight:500}

/* Footer: copyright on the left, social buttons on the right; brand colours on hover and touch */
.copy{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;text-align:left}
.copy .cp{margin-right:auto}
.copy .socials{margin-left:auto;gap:8px;justify-content:flex-end}
.copy .soc{width:38px;height:38px}
.soc{--bc:var(--a)}
.soc:hover,.soc:focus-visible,.soc:active{background:var(--bc);border-color:var(--bc);color:#fff;transform:translateY(-4px) scale(1.06)}
.soc[data-label="GitHub"]:hover,.soc[data-label="X"]:hover,.soc[data-label="GitHub"]:active,.soc[data-label="X"]:active{border-color:rgba(255,255,255,.55)}
.soc[data-label="ORCID"]:hover,.soc[data-label="ORCID"]:active{color:#1a2a05}
.soc::after{background:var(--bc);color:#fff;border:0}
.soc[data-label="ORCID"]::after{color:#1a2a05}
html[dir="rtl"] .copy{direction:ltr}
html[dir="rtl"] .copy .cp{direction:rtl}
@media (max-width:620px){.copy{justify-content:center}.copy .cp,.copy .socials{margin:0;justify-content:center;text-align:center}}
.copy{padding-right:clamp(84px,9vw,110px)}@media (max-width:620px){.copy{padding-right:clamp(20px,5vw,56px);padding-bottom:78px}}
/* Footer copyright: slow, faint light sweep and a soft glow on the name, always running */
.copy .cp{background:linear-gradient(100deg,var(--muted) 0%,var(--muted) 42%,var(--text) 50%,var(--muted) 58%,var(--muted) 100%);background-size:260% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:cpsweep 7s ease-in-out infinite}
.copy .cp .nt{font-weight:600;animation:cpglow 4.5s ease-in-out infinite}
@keyframes cpsweep{0%{background-position:120% 0}55%,100%{background-position:-20% 0}}
@keyframes cpglow{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 10px color-mix(in srgb,var(--a) 38%,transparent)}}
@media (prefers-reduced-motion:reduce){.copy .cp{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--muted)}.copy .cp .nt{animation:none}}

/* Gallery: masonry at each photo's own proportions, no dark boxes */
.gal{columns:3 300px;column-gap:28px}
.gi{display:block;break-inside:avoid;margin:0 0 34px;cursor:pointer}
.gi[hidden]{display:none}
.gi.pop{animation:gpop .8s var(--ease) both}
@keyframes gpop{from{opacity:0;transform:translateY(26px) scale(.98)}}
.gwrap{position:relative}
.gimg{position:relative;overflow:hidden;border-radius:6px;z-index:1;line-height:0}
.gimg img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
.gi:hover .gimg img,.gi:focus-visible .gimg img{transform:scale(1.045)}
.gi.multi .gwrap{padding:0 10px 10px 0}
.gi.multi .gwrap::before,.gi.multi .gwrap::after{content:"";position:absolute;border:1px solid var(--line2);border-radius:6px;background:var(--bg2);transition:transform .5s var(--ease)}
.gi.multi .gwrap::before{inset:10px 0 0 10px;z-index:0}
.gi.multi .gwrap::after{inset:5px 5px 5px 5px;z-index:0}
.gi.multi:hover .gwrap::before{transform:translate(4px,4px)}
.gi.multi:hover .gwrap::after{transform:translate(2px,2px)}
.gbadge{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--bg);color:var(--text);font:600 .76rem/1 var(--sans);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.gbadge svg{width:13px;height:13px}
.gi figcaption{display:flex;gap:12px;align-items:baseline;padding-top:12px}
.gi figcaption b{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--a);white-space:nowrap}
.gi figcaption span{color:var(--muted);font-size:.92rem;line-height:1.5}
.gal-empty{margin:40px 0 0;color:var(--muted)}
.lightbox img{background:none!important;min-width:0!important;min-height:0!important;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
html[lang="zh"] .gi figcaption b,html[lang="ja"] .gi figcaption b{letter-spacing:.04em}
@media (max-width:640px){.gal{columns:1}}

/* Milestones timeline: teal instead of amber */
:root{--tl:#3fb8a6;--tl-soft:rgba(63,184,166,.18)}
[data-theme="light"]{--tl:#0b6b5e;--tl-soft:rgba(11,107,94,.16)}
.tl-fill{background:var(--tl)!important}
.t-item.visible::before{background:var(--tl)!important;border-color:var(--tl)!important;box-shadow:0 0 0 6px var(--tl-soft)!important}
.dl a,.who a{text-decoration-thickness:1px;text-underline-offset:3px}
.who a{color:inherit}
.dl a:hover,.who a:hover{color:var(--a)}

/* Gallery event carousel: smooth sliding track (transform only) */
.gi.multi .gimg{background:var(--bg2)}
.gtrack{display:flex;width:100%;height:100%;position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.65,0,.25,1);will-change:transform}
.gi.multi .gimg .gtrack img{position:static;flex:0 0 100%;width:100%;height:100%;object-fit:cover;opacity:1;transform:none;transition:none}
.gi.multi:hover .gimg img{transform:none}
.gnav{position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(10,10,10,.55);color:#fff;cursor:pointer;opacity:0;z-index:3;backdrop-filter:blur(6px);transition:opacity .4s,background .3s}
.gnav svg{width:16px;height:16px}.gnav.prev{left:10px}.gnav.next{right:10px}
.gnav:hover{background:rgba(10,10,10,.8)}
.gi.multi:hover .gnav,.gnav:focus-visible{opacity:1}
@media (hover:none){.gnav{opacity:.85}}
.gdots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:3;line-height:0}
.gdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.2);cursor:pointer;transition:width .6s var(--ease),background .6s var(--ease)}
.gdots i.on{width:18px;border-radius:3px;background:#fff}
@media (prefers-reduced-motion:reduce){.gtrack{transition:none}}

/* Gallery: loading bar, skeleton tiles, refined reveal and settle animation */
.gload{margin:0 0 30px;max-width:420px;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.gload.done{opacity:0;transform:translateY(-6px)}
.gl-top{display:flex;justify-content:space-between;font:600 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.gl-p{color:var(--a);font-variant-numeric:tabular-nums}
.gl-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.gl-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--a),var(--b));border-radius:3px;transition:transform .5s var(--ease)}
.gi .gimg{background:linear-gradient(100deg,var(--bg2) 30%,var(--surface) 50%,var(--bg2) 70%) 0 0/250% 100%;animation:gsk 1.6s linear infinite}
.gi.ready .gimg{animation:none;background:var(--bg2)}
.gi:not(.ready) .gimg img{opacity:0}
.gi.ready .gimg>img,.gi.ready .gtrack{animation:gimg 1.2s var(--ease) both}
@keyframes gsk{to{background-position:-150% 0}}
@keyframes gimg{from{opacity:0;filter:blur(10px);transform:scale(1.04)}}
.gi.pop{animation:gpop .9s var(--ease) both}
@keyframes gpop{from{opacity:0;transform:translateY(28px)}}
.gi figcaption{transition:opacity .8s var(--ease) .15s,transform .8s var(--ease) .15s}
.gi:not(.ready) figcaption{opacity:0;transform:translateY(6px)}
.gtrack img.on{animation:gsettle 5.6s cubic-bezier(.2,.6,.2,1) both}
@keyframes gsettle{from{transform:scale(1.09)}to{transform:scale(1)}}
.gi.multi .gimg{box-shadow:0 14px 34px rgba(0,0,0,.28)}
[data-theme="light"] .gi.multi .gimg,[data-theme="light"] .gi .gimg{box-shadow:0 14px 34px rgba(15,30,55,.16)}
@media (prefers-reduced-motion:reduce){.gi .gimg,.gtrack img.on{animation:none}}

/* Footer name: clearly visible but calm shimmer and glow */
.copy .cp .nt{background:linear-gradient(100deg,var(--a) 0%,var(--a) 30%,var(--text) 50%,var(--a) 70%,var(--a) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:700;letter-spacing:.01em;animation:ntshine 4.2s ease-in-out infinite,cpglow2 3.2s ease-in-out infinite;filter:drop-shadow(0 0 0 transparent)}
@keyframes ntshine{0%{background-position:130% 0}60%,100%{background-position:-30% 0}}
@keyframes cpglow2{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--a) 70%,transparent))}}
@media (prefers-reduced-motion:reduce){.copy .cp .nt{animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--a);filter:none}}

/* Like (heart) buttons: tile and lightbox */
.glike,.lb-like{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(10,10,10,.5);color:#fff;backdrop-filter:blur(6px);transition:transform .35s var(--ease),background .3s,opacity .4s}
.glike{position:absolute;left:10px;top:10px;z-index:4;opacity:0}
.gi:hover .glike,.glike:focus-visible,.glike.on{opacity:1}
@media (hover:none){.glike{opacity:.9}}
.glike svg,.lb-like svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;transition:fill .3s,stroke .3s}
.glike:hover,.lb-like:hover{transform:scale(1.1);background:rgba(10,10,10,.75)}
.glike.on svg,.lb-like.on svg{fill:#ef4466;stroke:#ef4466}
.glike.on,.lb-like.on{animation:glpop .5s var(--ease)}
@keyframes glpop{0%{transform:scale(.8)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.lb-like{position:absolute;top:22px;right:84px;z-index:5;width:42px;height:42px}
.lb-like svg{width:22px;height:22px}
.gfly{position:fixed;z-index:3000;pointer-events:none;color:#ef4466;font-style:normal;font-size:16px;line-height:1;transform:translate(-50%,-50%);animation:gfly 1.1s cubic-bezier(.2,.7,.3,1) var(--d,0s) forwards}
@keyframes gfly{from{opacity:1;transform:translate(-50%,-50%) scale(.6)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.3)}}
@media (prefers-reduced-motion:reduce){.glike.on,.lb-like.on{animation:none}}

/* Carousel slides whose shape differs from the first photo: whole photo shown over a soft blurred copy */
.gslide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;background:var(--bg2)}
.gslide i{position:absolute;inset:-8%;background-size:cover;background-position:center;filter:blur(22px) saturate(1.1);opacity:.7;transform:scale(1.05)}
.gi.multi .gimg .gtrack .gslide img.ct{position:relative;width:100%;height:100%;object-fit:contain;z-index:1}

/* Gallery grid: strict left-to-right, row by row, newest first. Uniform 3:2 tiles. */
.gal{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
.gi{margin:0;break-inside:auto}
.gimg{aspect-ratio:3/2}
.gimg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gimg.fillbox>img{object-fit:contain;z-index:1}
.gfill{position:absolute;inset:-8%;background-size:cover;background-position:center;filter:blur(22px) saturate(1.1);opacity:.7}
.gi figcaption span time{display:block;font:600 .76rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:2px}
@media (max-width:960px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gal{grid-template-columns:1fr}}

/* Caption line: CATEGORY | date | text */
.gi figcaption{display:block;line-height:1.55}
.gi figcaption b,.gi figcaption time,.gi figcaption span{display:inline}
.gi figcaption b.cat-phd{text-transform:none;letter-spacing:.06em}
.gi figcaption time{font:600 .76rem/inherit var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin:0}
.gi figcaption .sep{font-style:normal;color:var(--line2);margin:0 .6em;font-weight:300}
.gi figcaption span{color:var(--muted)}
html[lang="zh"] .gi figcaption time,html[lang="ja"] .gi figcaption time{letter-spacing:.02em}
.gi figcaption time{line-height:inherit;vertical-align:baseline}
.gi figcaption b{font-size:.7rem}
.gi figcaption time{font-family:var(--mono);font-weight:600;font-size:.74rem;line-height:inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.gi figcaption span{font-size:.92rem}

/* Lightbox autoplay controls */
.lightbox img{animation:none!important}
.lb-prog{position:absolute;left:0;right:0;top:0;height:3px;background:transparent;z-index:6;pointer-events:none}
.lb-prog i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--a),var(--b))}
.lb-play{position:absolute;top:22px;right:140px;z-index:5;width:42px;height:42px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;background:rgba(10,10,10,.5);color:#fff;backdrop-filter:blur(6px);transition:transform .35s var(--ease),background .3s}
.lb-play:hover{transform:scale(1.1);background:rgba(10,10,10,.75)}
.lb-play svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.lb-play svg path[d^="M8"]{fill:none}
.lightbox{overflow:hidden}

/* Contact form */
.cform{display:grid;gap:14px;max-width:560px;margin-top:6px}
.frow{display:grid;gap:6px}
.frow label{font:600 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cform input,.cform textarea{width:100%;font:inherit;font-size:1rem;color:var(--text);background:var(--surface);border:1px solid var(--line2);border-radius:8px;padding:11px 14px;transition:border-color .3s,box-shadow .3s}
.cform textarea{resize:vertical;min-height:120px}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px var(--a-soft)}
.hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.fact{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fstat{font-size:.92rem;color:var(--muted)}.fstat.bad{color:#d9534f}
.cform .btn:disabled{opacity:.6;cursor:progress}
html[lang="zh"] .frow label,html[lang="ja"] .frow label{letter-spacing:.02em}

/* Contact: emails on the left, message form on the right */
.contact-compact{max-width:1100px}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.cgrid .cform{max-width:none}
@media (max-width:820px){.cgrid{grid-template-columns:1fr}}

/* ---------- Mobile layer (phones and small tablets, same URL) ---------- */
.mtools { display: none; }
html.nc .nav .sz, html.nc .nav .fs-btn { display: none !important; }
html.nc .mtools { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
html.nc .mtools button { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--text); font: 600 .95rem var(--sans); cursor: pointer; }
html.nc .mtools button:active, html.nc .mtools button:hover { background: var(--hover); }
html.nc .mtools .mv { flex: 1 1 100%; }
html.nc .menu { max-height: calc(100dvh - 72px); overflow-y: auto; }
html.nc body.menu-open { overflow: hidden; }
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }
  .wrap, .w-pad { padding-inline: 18px; }
  /* header: logo, language, share, theme, menu only */
  .nav { gap: 6px; padding-inline: 12px; }
  .tools { gap: 6px; margin-inline-start: auto; }
  .icon-btn, .burger, .lang-btn { height: 42px; min-width: 42px; }
  .icon-btn:not(.lang-btn), .burger { width: 42px; }
  .voice-btn { width: 42px; height: 42px; }
  .brand .logo { width: 42px; height: 42px; }
  .share-menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: 70vh; overflow: auto; }
  .share-menu .it { min-height: 48px; }
  /* menu panel */
  html.nc .menu { max-height: calc(100dvh - 64px); overflow-y: auto; padding-bottom: 30px; }
  html.nc .menu a { font-size: 1.5rem; padding: 14px 0; min-height: 52px; }
  .mtools { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
  .mtools button { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--text); font: 600 .95rem var(--sans); }
  .mtools button:active { background: var(--hover); }
  .mtools .mv { flex: 1 1 100%; }
  /* hero */
  .hero { min-height: auto; padding: 108px 0 96px; }
  .hero .readout { display: none; }
  .hero .cartouche { left: 18px; bottom: 18px; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .btn { min-height: 48px; }
  /* gallery filter: one scrollable row with edge fade */
  .seg { display: flex; max-width: calc(100vw - 36px); margin-bottom: 26px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .seg button { flex: none; min-height: 42px; padding: 9px 16px; scroll-snap-align: start; }
  /* gallery tiles */
  .gal { gap: 14px; }
  .glike, .lb-like { width: 44px; height: 44px; }
  .gnav { width: 42px; height: 42px; margin-top: -21px; opacity: .9; }
  .gdots { bottom: 12px; gap: 8px; } .gdots i { width: 8px; height: 8px; } .gdots i.on { width: 22px; }
  /* lightbox */
  .lb-btn { width: 48px; height: 48px; top: auto; bottom: 22px; } .lb-prev { left: 18px; } .lb-next { right: 18px; }
  .lb-close { top: 14px; right: 14px; width: 48px; height: 48px; } .lb-like { top: 14px; right: 70px; }
  .lb-count { top: 26px; left: 18px; }
  .lightbox p { padding: 0 18px 80px; font-size: .95rem; }
  /* contact */
  .big-mail, .cgrid a[href^="mailto"] { overflow-wrap: anywhere; word-break: normal; }
  .cform input, .cform textarea, .cform select { font-size: 16px; min-height: 48px; }
  .cform .btn, .cform button[type="submit"] { width: 100%; justify-content: center; }
  /* content */
  .pager a { padding: 22px 18px; }
  .copy { text-align: center; }
}
@media (max-width: 380px) {
  .lang-btn span#lang-code { display: none; } .lang-btn { padding: 0; width: 42px; justify-content: center; }
}
@media (max-width: 700px) {
  html.nc .menu { height: calc(100dvh - 64px); }
  body.menu-open { overflow: hidden; }
  .cgrid a[href^="mailto"] { font-size: .92rem; overflow-wrap: anywhere; }
}

/* ---------- About: portrait ---------- */
.portrait { display: none; }
.portrait-m { display: none; }
@media (min-width: 700px) {
  .portrait { display: block; position: absolute; z-index: 2; right: clamp(36px, 6vw, 120px); top: 50%; width: clamp(200px, 24vw, 330px); margin: 0; transform: translateY(-46%); }
  .portrait::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--a); border-radius: 4px; z-index: -1; opacity: .8; }
  .portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1122 / 1292; object-fit: cover; border-radius: 4px; border: 1px solid var(--line2); box-shadow: 0 24px 60px -24px rgba(0,0,0,.55); }
  .phero:has(.portrait) .lead { max-width: min(640px, calc(100% - clamp(250px, 30vw, 400px))); }
  .phero:has(.portrait) h1 { max-width: calc(100% - clamp(250px, 30vw, 400px)); }
}
@media (max-width: 699px) {
  .portrait-m { display: block; width: 100%; height: auto; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: 50% 20%; border-radius: 6px; border: 1px solid var(--line2); margin: 0 0 24px; }
}

/* ---------- Tablet layer (701px to 1100px; iPad portrait and landscape) ---------- */
@media (min-width: 701px) and (max-width: 1100px) {
  .wrap { padding-inline: clamp(28px, 4.5vw, 48px); }
  .nav { padding-inline: 24px; gap: 10px; }
  .tools { margin-inline-start: auto; gap: 8px; }
  html.nc .menu a { font-size: 1.7rem; padding: 14px 0; }
  html.nc .menu { padding-inline: clamp(28px, 4.5vw, 48px); }
  .mtools button { min-height: 48px; }
  .hero { min-height: 86vh; }
  .hero h1 { font-size: clamp(3.4rem, 9vw, 5.2rem); }
  .phero { padding: clamp(130px, 17vw, 170px) 0 70px; }
  .phero h1 { font-size: clamp(3rem, 8.4vw, 4.8rem); }
  .btn { min-height: 48px; }
  .seg button { min-height: 44px; }
  .pager a { padding: 26px 28px; }
  .cform input, .cform textarea, .cform select { font-size: 16px; min-height: 48px; }
}
@media (max-width: 900px) { .two { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 701px) and (max-width: 1100px) and (pointer: coarse) {
  .icon-btn, .burger, .lang-btn { height: 44px; min-width: 44px; }
  .glike, .lb-like { width: 44px; height: 44px; }
  .gnav { width: 42px; height: 42px; margin-top: -21px; opacity: .9; }
  .gdots i { width: 8px; height: 8px; } .gdots i.on { width: 22px; }
  .lb-btn { width: 52px; height: 52px; }
  .lb-close { width: 52px; height: 52px; }
}

/* ---------- About: bio and details columns start level and end level ---------- */
@media (min-width: 901px) {
  .two:has(> .bio) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: stretch; gap: clamp(36px, 5vw, 80px); }
  .two:has(> .bio) > .bio { display: flex; flex-direction: column; justify-content: flex-start; }
  .two:has(> .bio) > .bio .socials { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line2); }
  .two:has(> .bio) .dl-row { grid-template-columns: minmax(104px, 150px) minmax(0, 1fr); gap: 22px; padding: 18px 0; }
}
@media (min-width: 901px) { .two:has(> .bio) > .bio .eyebrow { margin: 0 0 16px; } .two:has(> .bio) > .bio h2 { margin: 0 0 24px; } }
.sec:has(> .wrap > .two > .bio) { padding-top: clamp(56px, 6vw, 84px); }

/* ---------- Gallery: use the full width on large screens ---------- */
@media (min-width: 1100px) {
  main:has(#gallery) .wrap { max-width: min(1920px, 100%); }
}
@media (min-width: 1280px) {
  .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 1600px) {
  .gal { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 26px; }
  .gi figcaption span { font-size: .88rem; }
}

/* ---------- Gallery: centred filter bar, tighter space under the heading ---------- */
@media (min-width: 701px) {
  main:has(#gallery) .phero { padding-bottom: clamp(48px, 5vw, 64px); }
  main:has(#gallery) .sec:has(#gallery) { padding-top: clamp(36px, 3.4vw, 52px); }
  main:has(#gallery) .seg { display: flex; width: fit-content; margin: 0 auto 36px; justify-content: center; }
}

/* About: interests under the bio */
.bio-int { margin-top: 26px; }
.bio-int .lbl { display: block; margin-bottom: 14px; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a); }
.bio-int .chips { gap: 10px; }
@media (min-width: 901px) { .two:has(> .bio) > .bio .socials { margin-top: auto; } .two:has(> .bio) > .bio .bio-int { margin-bottom: 28px; } }
@media (min-width: 901px) {
  .two:has(> .bio) > div:last-child { display: flex; flex-direction: column; }
  .two:has(> .bio) .dl { flex: 1; display: flex; flex-direction: column; }
  .two:has(> .bio) .dl-row { flex: 1 1 auto; align-items: center; }
}

/* Gallery captions: justified, with hyphenation so lines never open up into wide gaps */
.gi figcaption{text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:5 2 2;text-wrap:pretty;word-spacing:0}
.gi figcaption span{text-align:inherit}
#lb-cap{text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:5 2 2;text-wrap:pretty}
@media (max-width:380px){.gi figcaption,#lb-cap{text-align:left}}
.gi figcaption{text-align:left}
.gi figcaption .gmeta{display:block;text-align:left;word-spacing:normal;margin-bottom:4px}
.gi figcaption .gmeta b,.gi figcaption .gmeta time{display:inline}
.gi figcaption .gcap{display:block;text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:5 2 2;text-wrap:pretty;word-spacing:0}

/* header brand as a code prompt: $Anandu.Prabhakaran */
.brand .prompt { font-family: var(--mono); font-size: 1rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; display: inline-flex; align-items: baseline; direction: ltr; unicode-bidi: isolate; }
.brand .prompt i { font-style: normal; color: var(--a); margin-inline-end: 1px; }
.brand .prompt em { font-style: normal; color: var(--a); }
.brand .caret { display: inline-block; width: .55em; height: 1.05em; margin-inline-start: 3px; background: var(--a); transform: translateY(.18em); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand .caret { animation: none; } }
@media (max-width: 560px) { .brand .prompt { font-size: .9rem; } }
@media (max-width: 380px) { .brand .prompt { font-size: .78rem; } }
@media (max-width: 560px) { .brand span.prompt:last-child { display: inline-flex; } }
.brand .prompt u { text-decoration: none; }
@media (max-width: 400px) { .brand .prompt .sur { font-size: 0; } .brand .prompt .sur::after { content: "P"; font-size: .9rem; } .brand .caret { width: .5em; margin-inline-start: 2px; } }
.brand .tx { display: inline; min-height: 1em; }
.brand .tx em { font-style: normal; color: var(--a); }
.brand .caret.busy { animation: none; opacity: 1; }
.brand .prompt { min-width: 0; }
/* reserve the full width of the typed name so the menu never shifts while it types and deletes */
.brand .slot { display: inline-block; white-space: nowrap; min-width: calc(18ch + .55em + 3px); text-align: start; }
@media (max-width: 400px) { .brand .slot { min-width: calc(8ch + .5em + 2px); } }
.nocaps { text-transform: none !important; }

.tprog .welcome{margin-top:10px;color:#f0eae2;font-weight:600;letter-spacing:.02em}

/* page transition: a short plain fade, no wordmark and no sliding panel */
.pt { transform: none !important; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.pt b, .pt i { display: none !important; }
.pt.entering, .pt.cover { opacity: 1; visibility: visible; transition: opacity .18s ease; pointer-events: all; }
.pt.leaving { opacity: 0; visibility: visible; transition: opacity .3s ease, visibility 0s .3s; pointer-events: none; }
@media (max-width: 560px) { .brand .prompt .slot { display: inline-block; } }

.brand .slot { flex: none; overflow: visible; }
.nav .brand { flex: none; }

/* first-visit wave around the theme button (same ring as the voice button) */
.theme-toggle { position: relative; }
.theme-toggle.hint::before, .theme-toggle.hint::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--a); animation: vring 1.6s var(--ease) infinite; pointer-events: none; }
.theme-toggle.hint::after { animation-delay: .8s; }
/* disclosure line under the footer */
.ainote { margin: 0; padding: 0 clamp(20px, 5vw, 56px) 22px; background: var(--bg2); text-align: center; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; line-height: 1.6; color: var(--muted); }
@media (max-width: 560px) { .ainote { padding-bottom: 84px; } }

.copy .cpwrap { margin-right: auto; }
.copy .upd { margin-top: 6px; font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--muted); }
.copy .upd:empty { display: none; }
@media (max-width: 620px) { .copy .cpwrap { margin: 0; text-align: center; } }

/* transition screen text: $Anandu.<page> typed in the middle */
.pt .ptl { display: inline-flex; align-items: baseline; font-family: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-weight: 500; font-size: clamp(1.4rem, 5.5vw, 2.6rem); letter-spacing: -.01em; color: var(--text); direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.pt .ptl .pd, .pt .ptl em { color: var(--a); font-style: normal; }
.pt .ptl .pd { margin-inline-end: 2px; }
.pt .ptc { display: inline-block; width: .55em; height: 1.05em; margin-inline-start: 4px; background: var(--a); transform: translateY(.18em); animation: blink 1.1s steps(1) infinite; }
.pt .ptc.busy { animation: none; opacity: 1; }

.postal { display: block; font-style: normal; line-height: 1.75; margin-top: 12px; color: var(--muted); }
.postal b { color: var(--text); font-weight: 600; }

/* content protection: no selection, no touch callout, no image dragging, blank print */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
img, a { -webkit-user-drag: none; }
@media print { body * { display: none !important; } body::before { content: "Printing is disabled on this site."; display: block; font: 16px sans-serif; color: #000; padding: 24px; } }

/* right-click shortcut menu */
.ctxm { position: fixed; z-index: 960; min-width: 250px; padding: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line2); box-shadow: var(--shadow); opacity: 0; transform: scale(.97); transform-origin: top left; transition: opacity .12s ease, transform .12s ease; -webkit-user-select: none; user-select: none; }
.ctxm.open { opacity: 1; transform: none; }
.ctxm button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); font-family: var(--sans); font-size: .9rem; text-align: left; cursor: pointer; }
.ctxm button:hover, .ctxm button:focus-visible { background: var(--a-soft); outline: none; }
.ctxm kbd { flex: none; min-width: 66px; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--a); }
.ctxm .cl { flex: 1; }
.ctxm .cs { font-family: var(--mono); font-size: .7rem; color: var(--muted); }

/* copy and share buttons on the contact page */
.cpy { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-inline-start: 10px; vertical-align: middle; border-radius: 50%; border: 1px solid var(--line2); background: none; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.cpy svg { width: 15px; height: 15px; }
.cpy:hover, .cpy:focus-visible { color: var(--a); border-color: var(--a); background: var(--a-soft); outline: none; }
.cbtn .bi { display: inline-flex; margin-inline-end: 8px; } .cbtn .bi svg { width: 16px; height: 16px; }
.apwrap { position: relative; display: inline-block; }
.share-menu.pop { top: calc(100% + 8px); right: auto; left: 0; transform-origin: top left; z-index: 60; }

.toast { width: max-content; max-width: min(92vw, 540px); text-align: center; line-height: 1.5; }

/* boot screen: faster panels, larger centred welcome line */
#loader .panel { transition: transform .55s var(--ease-io); }
#loader .l-content { transition: opacity .3s; }
.tprog .welcome { display: block; width: 100%; margin-top: 22px; text-align: center; white-space: normal; font-size: clamp(1.15rem, 4.6vw, 2rem); font-weight: 700; letter-spacing: .02em; color: #fff; text-shadow: 0 0 18px rgba(232,163,61,.35); animation: welin .35s ease both; }
@keyframes welin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* photos under a workshop entry */
.wk-pics { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.wk-pics img { display: block; width: min(100%, 250px); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* boot screen follows the theme: black with green terminal text in dark, white with dark text in light */
#loader .panel { background: #040704; }
#loader .l-content { color: #d6f5df; }
.term { background: #020502; border-color: rgba(80,255,150,.28); box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 40px rgba(60,220,130,.08); }
.tbar { border-bottom-color: rgba(80,255,150,.2); color: #8fcba6; }
.tbody { color: #43d98a; }
#term-out .cmd { color: #8dffbc; }
#term-out .ln b { color: #b6ff9a; }
.tprog { color: #43d98a; } .tprog #l-pct { color: #d6f5df; }
.cur { background: #43d98a; }
.tprog .welcome { color: #fff; text-shadow: 0 0 18px rgba(67,217,138,.55); }

html[data-theme="light"] #loader .panel { background: #f4f7fa; }
html[data-theme="light"] #loader .l-content { color: #14301f; }
html[data-theme="light"] .term { background: #ffffff; border-color: rgba(15,30,55,.28); box-shadow: 0 24px 60px rgba(15,30,55,.16); }
html[data-theme="light"] .tbar { border-bottom-color: rgba(15,30,55,.14); color: #475569; }
html[data-theme="light"] .tbody { color: #14532d; }
html[data-theme="light"] #term-out .cmd { color: #0b2a17; font-weight: 600; }
html[data-theme="light"] #term-out .ln b { color: #15803d; }
html[data-theme="light"] .tprog { color: #166534; } html[data-theme="light"] .tprog #l-pct { color: #0f172a; }
html[data-theme="light"] .cur { background: #15803d; }
html[data-theme="light"] .tprog .welcome { color: #0f172a; text-shadow: none; }

/* workshop photos: equal tiles, up to three per row */
.wk-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; max-width: 800px; }
.wk-pics img { width: 100%; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; }

.wk-pics img[data-full] { cursor: zoom-in; transition: transform .3s var(--ease), box-shadow .3s; } .wk-pics img[data-full]:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
#wk-lb img { max-height: 86vh; max-width: 92vw; }
#wk-lb [hidden] { display: none; }

/* @pagestamp contact.html */
/* appointment request */
.appt { margin-top: 12px; } .appt-note { color: var(--muted); max-width: 760px; margin: 0 0 18px; }
.appt-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.appt-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .appt-nav b { font-weight: 600; letter-spacing: .04em; } .appt-nav .btn { padding: 6px 14px; min-width: 0; }
.appt-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.appt-cal .wd { text-align: center; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--muted); padding: 4px 0; }
.ad, .as { border: 1px solid var(--line2); background: var(--surface); color: var(--text); border-radius: 8px; font: inherit; cursor: pointer; transition: .2s; }
.ad { aspect-ratio: 1; font-size: .92rem; } .ad:hover:not(:disabled), .as:hover { border-color: var(--text); background: var(--hover); }
.ad.off { opacity: .32; cursor: not-allowed; background: none; } .ad.on, .as.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.apd { margin: 18px 0 8px; font-weight: 600; } .apt { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; } .as { padding: 9px 0; font-family: var(--mono); font-size: .86rem; }
.appt-sel { font-weight: 600; margin-bottom: 14px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: 8px; }
@media (max-width: 820px) { .appt-cols { grid-template-columns: 1fr; gap: 24px; } }
.appt-len { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 18px; } .appt-len .lbl-s { font-weight: 600; } .rd { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .rd input { width: auto; accent-color: var(--text); }

.appt-note, .appt-sel { text-align: justify; text-justify: inter-word; hyphens: auto; } .appt-note { max-width: none; }
.apd { text-align: left; }
#ap-send, #cf-send { min-width: 210px; justify-content: center; transition: background .3s, color .3s, border-color .3s, transform .45s var(--ease); }
#ap-send .apl, #cf-send .apl { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
#ap-send::before, #cf-send::before { content: ""; position: absolute; inset: 0; width: 0; background: var(--a); z-index: 0; }
#ap-send.sending, #ap-send.done, #cf-send.sending, #cf-send.done { opacity: 1 !important; cursor: progress; background: transparent; color: var(--a); }
#ap-send.sending::before, #cf-send.sending::before { background: color-mix(in srgb, var(--a) 38%, transparent); width: 88%; transition: width 7s cubic-bezier(.1, .6, .2, 1); }
#ap-send.sending, #cf-send.sending { color: var(--text); }
#ap-send.done, #cf-send.done { background: #2e9d57; border-color: #2e9d57; color: #fff; cursor: default; }
#ap-send.done::before, #cf-send.done::before { width: 100%; background: #2e9d57; transition: width .35s ease-out; }
#ap-send .apl svg, #cf-send .apl svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: ap-tick .45s .15s ease-out forwards; }
@keyframes ap-tick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { #ap-send.sending::before, #cf-send.sending::before { transition: none; width: 50%; } #ap-send .apl svg, #cf-send .apl svg { animation: none; stroke-dashoffset: 0; } }
.as.taken { opacity: .42; text-decoration: line-through; cursor: not-allowed; background: none; border-style: dashed; } .as.taken:hover { border-color: var(--line2); background: none; } .ad.full { opacity: .6; }
.otp { margin: -4px 0 16px; } .otp-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .otp-note { font-size: .78rem; color: var(--muted); line-height: 1.4; } .otp-note.ok { color: #2e9d57; font-weight: 600; } .otp-note.bad { color: #d9534f; } .otp-note.warn { color: #b7791f; font-weight: 600; }
.otp-ver { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: stretch; } .otp-in { width: 9.5em; text-align: center; letter-spacing: .38em; font-family: var(--mono); font-size: 1.05rem; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--text); }
.otp .btn { padding: 8px 18px; font-size: .82rem; min-height: 0; } .otp .btn:disabled { opacity: .5; cursor: not-allowed; } .otp-locked { opacity: .55; cursor: not-allowed; } .otp-fixed { opacity: .75; cursor: not-allowed; background-image: none; } 
.otp .btn { position: relative; overflow: hidden; } .otp .btn .apl { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; } .otp .btn::before { content: ""; position: absolute; inset: 0; width: 0; background: var(--a); z-index: 0; }
.otp .btn.sending, .otp .btn.done { opacity: 1 !important; cursor: progress; background: transparent; color: var(--text); }
.otp .btn.sending::before { background: color-mix(in srgb, var(--a) 38%, transparent); width: 88%; transition: width 5s cubic-bezier(.1, .6, .2, 1); }
.otp .btn.frozen { cursor: not-allowed; } .otp .btn.done { background: #2e9d57; border-color: #2e9d57; color: #fff; cursor: default; } .otp .btn.done::before { width: 100%; background: #2e9d57; transition: width .35s ease-out; }
.otp .btn .apl svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: ap-tick .45s .1s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .otp .btn.sending::before { transition: none; width: 50%; } .otp .btn .apl svg { animation: none; stroke-dashoffset: 0; } }
.cform input:disabled, .cform textarea:disabled { opacity: .5; cursor: not-allowed; }
/* @endpagestamp */

/* Photo watermark (SITE.watermark in script.js). Tiles and workshop pictures use a corner text drawn by CSS; the enlarged view uses .wm-lb placed by script.js. The About page profile picture is not in any of these places. */
.wk-pics .wmw { display: block; position: relative; }
html.wmk .gimg, html.wmk .wk-pics .wmw { container-type: inline-size; }
html.wmk .gimg::after, html.wmk .wk-pics .wmw::after { content: var(--wm-text); position: absolute; right: 2%; bottom: 3.5%; z-index: 4; pointer-events: none; font: 500 clamp(8px, 3cqw, 24px) / 1 var(--sans, Arial, sans-serif); color: rgba(255, 255, 255, .45); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); letter-spacing: .01em; white-space: nowrap; }
.wm-lb { position: absolute; z-index: 7; pointer-events: none; color: rgba(255, 255, 255, .45); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); font-family: var(--sans, Arial, sans-serif); font-weight: 500; line-height: 1; white-space: nowrap; user-select: none; }
.wm-lb[hidden] { display: none; }

.bio p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }

.wk .when { scroll-margin-top: 110px; } .wk { scroll-margin-top: 110px; }
.wk.wk-hit { border-color: var(--a); box-shadow: 0 0 0 4px var(--a-soft); }

:root { --my: #5fb89a; --on-my: #06130f; } :root[data-theme="light"] { --my: #0e7a66; --on-my: #ffffff; }
.seg .seg-my { margin-left: 14px; color: var(--my); font-weight: 600; }
.seg .seg-my::before { content: ''; position: absolute; left: -9px; top: 22%; bottom: 22%; width: 1px; background: var(--line2); }
.seg .seg-my[aria-pressed="true"] { color: var(--on-my); }
.seg.my-on .seg-ind { background: var(--my); }

/* ---------- Newsletter pop-up (contact page) ---------- */
.nl-pop { position: fixed; right: 22px; bottom: 22px; z-index: 880; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 44px); overflow-y: auto; padding: 22px 20px 20px; background: var(--surface); border: 1px solid var(--line2); border-radius: 16px; box-shadow: var(--shadow); transform: translateY(26px); opacity: 0; pointer-events: none; transition: transform .45s var(--ease), opacity .35s var(--ease); }
.nl-pop.show { transform: none; opacity: 1; pointer-events: auto; }
.nl-pop[hidden] { display: none; }
.nl-pop .nl-t { margin: 0 34px 6px 0; font-size: 1.15rem; font-weight: 600; }
.nl-pop .nl-p { margin: 0 0 14px; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.nl-pop .nl-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.nl-pop .nl-x:hover { background: var(--hover); color: var(--text); }
.nl-pop .nl-grab { display: none; width: 40px; height: 4px; border-radius: 4px; background: var(--line2); margin: -8px auto 12px; }
.nl-pop .nl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); border-radius: 0 0 16px 16px; overflow: hidden; }
.nl-pop .nl-bar i { display: block; height: 100%; background: var(--a); transform-origin: left; }
@media (max-width: 560px) { .nl-pop { left: 12px; right: 12px; bottom: 12px; width: auto; } .nl-pop .nl-grab { display: block; } }
.fstat.ok{color:#2e8b57}
.otp [hidden] { display: none !important; }

/* My Space button fills while its photos load in the background */
.seg .seg-my.filling::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: color-mix(in srgb, var(--my) 34%, transparent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .5s var(--ease); }
.seg .seg-my.filling[aria-pressed="true"]::after { background: rgba(255, 255, 255, .38); }

/* Institute links (IISER Kolkata, IIT Roorkee): bold, same size; on hover the colour changes and an underline sweeps in from left to right */
a.inst { font: inherit; font-weight: 700; color: inherit; text-decoration: none; background: linear-gradient(var(--a), var(--a)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease), color .3s; padding-bottom: 1px; }
a.inst:hover, a.inst:focus-visible { color: var(--a); background-size: 100% 2px; }

.apwk { margin: 0 0 10px; padding: 9px 12px; border-left: 3px solid #b7791f; background: #fff6e0; color: #6b4a0a; font-size: .9rem; border-radius: 4px; }
[data-theme="dark"] .apwk { background: #3a2f12; color: #f0d9a0; border-color: #d9a84a; }