/* Soft colours that are easy on the eyes. Panels are frosted glass over the cover photo, like an iPhone wallpaper.
   Dark mode follows the phone, or the button in the top bar. */
:root{
  --bg:#f5f2ea;--surface:#fffdf8;--ink:#22313a;--mute:#52636a;--line:#e3ddd0;
  --accent:#3a7a73;--accent-ink:#ffffff;--soft:#dcebe6;--warm:#a9663f;--warn:#8a4b1f;--bad:#a23b3b;
  --glass:rgba(255,253,248,.74);--glass-line:rgba(255,255,255,.7);--veil:rgba(245,242,234,.80);--shadow:0 10px 34px rgba(30,50,60,.14);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#121b1f;--surface:#1f2b30;--ink:#eaf0f0;--mute:#b0bdc0;--line:#2f3d43;--accent:#7cc4b8;--accent-ink:#10201e;--soft:#233b39;--warm:#e0a47e;--warn:#f0c08a;--bad:#f09a9a;--glass:rgba(22,33,38,.66);--glass-line:rgba(255,255,255,.14);--veil:rgba(12,20,24,.80);--shadow:0 10px 34px rgba(0,0,0,.35)}
}
:root[data-theme="dark"]{--bg:#121b1f;--surface:#1f2b30;--ink:#eaf0f0;--mute:#b0bdc0;--line:#2f3d43;--accent:#7cc4b8;--accent-ink:#10201e;--soft:#233b39;--warm:#e0a47e;--warn:#f0c08a;--bad:#f09a9a;--glass:rgba(22,33,38,.66);--glass-line:rgba(255,255,255,.14);--veil:rgba(12,20,24,.80);--shadow:0 10px 34px rgba(0,0,0,.35)}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;color:var(--ink);font:1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari","Noto Sans JP",sans-serif}

/* the whole page sits on a blurred, softened copy of the cover photo */
body::before{content:"";position:fixed;inset:-40px;z-index:-2;background:var(--bg) url(/cover-sm.jpg) center/cover no-repeat;filter:blur(26px) saturate(1.2);transform:scale(1.08)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--veil)}
@media(min-width:900px){body::before{background-image:url(/cover.jpg)}}

a{color:var(--accent)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,8vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,5vw,2.1rem)}
h3{font-size:1.2rem}h4{font-size:1.05rem}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:0 0 10px 0;z-index:20}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:6px}

/* frosted glass: one look for every panel */
.card,.facts li,.form,.cta,.msg,.hero-panel,.top{
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:var(--shadow);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.facts li,.form,.cta,.msg,.hero-panel,.top{background:var(--surface)}
}

/* top bar */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));border-width:0 0 1px;border-radius:0;box-shadow:none}
.brand{position:relative;overflow:hidden;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;letter-spacing:.02em;border:2px solid var(--glass-line)}
.brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.brand img[hidden]{display:none}
.menu-btn{min-height:44px;padding:0 16px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass);color:var(--ink);font:inherit}
nav{display:none;width:100%;flex-direction:column;gap:4px;padding-bottom:8px}
nav.open{display:flex}
nav a{padding:12px 8px;color:var(--ink);text-decoration:none;border-radius:10px;min-height:44px}
nav a:hover{background:var(--soft)}
nav a.pill{background:var(--accent);color:var(--accent-ink);text-align:center}
@media(min-width:760px){
  .menu-btn{display:none}
  nav{display:flex;flex-direction:row;width:auto;align-items:center;padding:0;gap:2px}
  nav a{padding:10px 14px}
}

main{max-width:980px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}

/* hero: the photo, with one glass panel on top */
.hero{position:relative;isolation:isolate;overflow:hidden;margin:14px 0 0;border-radius:28px;min-height:min(calc(100svh - 112px),780px);display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 40%;transform-origin:62% 40%;animation:drift 40s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(8,18,26,.5),rgba(8,18,26,0) 55%)}
.hero-panel{width:100%;margin:14px;padding:20px;border-radius:24px;display:grid;gap:4px;animation:rise .9s .1s both cubic-bezier(.2,.7,.2,1)}
@media(min-width:760px){.hero{min-height:min(calc(100svh - 112px),680px)}.hero-panel{width:auto;max-width:620px;margin:28px;padding:28px}}
.who{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.eyebrow{color:var(--warm);font-weight:600;margin:0 0 2px}
.who h1{margin:0}
.lead{font-size:1.15rem;color:var(--mute);max-width:36ch;margin:6px 0 0}
.photo{position:relative;flex:none;width:92px;aspect-ratio:1;border-radius:50%;background:var(--soft);display:grid;place-items:center;border:3px solid var(--glass-line);box-shadow:0 6px 20px rgba(0,0,0,.18);overflow:hidden}
.photo .initials{font-size:1.9rem;font-weight:700;color:var(--accent)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo img[hidden]{display:none}
@media(min-width:760px){.photo{width:116px}}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:2px solid var(--accent);border-radius:14px;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.btn.alt{background:transparent;color:var(--accent)}
.btn.sm{min-height:44px;padding:0 16px;font-size:.98rem}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0 0}
.chips li{background:var(--soft);color:var(--ink);padding:6px 14px;border-radius:99px;font-size:.98rem}
.chips small{color:var(--mute)}

/* sections */
.block{padding:40px 0 8px}
.two{display:grid;gap:0 32px}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
.facts{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
@media(min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts li{border-radius:18px;padding:14px 16px;display:grid;gap:2px}
.facts b{color:var(--warm);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.cards.big{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.card{border-radius:20px;padding:18px}
.card p{color:var(--mute);margin:0 0 .6em}
.card.lang{text-align:center}
.card.lang h4{margin:0}
.proj{display:flex;flex-direction:column;gap:2px}
.proj .btn{margin-top:auto;align-self:flex-start}
.tags{font-size:.92rem;color:var(--warm)!important}
.sub{margin:28px 0 12px}
.note,.more{color:var(--mute)}
.more{margin-top:18px}

.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--soft)}
.timeline li{position:relative;padding:0 0 22px 18px;display:grid;gap:2px}
.timeline li::before{content:"";position:absolute;left:-27px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}
.timeline time{color:var(--warm);font-weight:600;font-size:.95rem}
.timeline span{color:var(--mute)}

.cta{margin:28px 0 0;padding:36px 20px;text-align:center;border-radius:26px}
.cta p{color:var(--mute)}

footer{text-align:center;padding:26px 16px calc(26px + env(safe-area-inset-bottom));color:var(--mute)}
footer p{margin:0 0 4px}
footer a{display:inline-block;padding:12px 8px;min-height:44px}

/* contact page */
.page{max-width:640px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
.form{border-radius:22px;padding:20px}
label{display:block;font-weight:600;margin:14px 0 6px}
label small{font-weight:400;color:var(--mute)}
input,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:48px}
textarea{min-height:160px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.status{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--soft)}
.status.bad{background:#a23b3b22;color:var(--bad)}
.count{font-size:.9rem;color:var(--mute);text-align:right;margin:4px 0 0}
.back,.side a{display:inline-block;padding:10px 4px;min-height:44px}
.side{margin-top:22px;color:var(--mute)}
.msg{border-radius:16px;padding:14px;margin:0 0 10px;overflow-wrap:anywhere}
.msg time,.msg small{color:var(--mute)}
.msg pre{white-space:pre-wrap;font:inherit;margin:8px 0}

/* header tools: language, light/dark, menu */
.tools{display:flex;align-items:center;gap:8px}
.sel{width:auto;min-height:44px;padding:0 10px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass);color:var(--ink);font:inherit;font-size:1rem}
.icon-btn{min-width:44px;min-height:44px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass);color:var(--ink);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.proj .row .btn{margin:0}
@media(min-width:760px){.brand{margin-right:auto}nav{order:2}.tools{order:3}}

/* a little movement, only a little: the photo drifts slowly, the panel rises once, sections fade in as you scroll */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.1) translate(-1.2%,-1%)}}
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-img,.hero-panel{animation:none}
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}