/* =========================================================
   InkPenguin · 墨企鵝 — 個人技術實驗室
   東方水墨 × 現代技術感
   ========================================================= */

:root{
  /* fixed palette (do not swap with theme) */
  --ink-900:#16130f;   /* 濃墨 */
  --ink-700:#2c2620;   /* 重墨 */
  --ink-500:#5a5148;   /* 灰墨 */
  --ink-300:#948a7d;   /* 淡墨 */
  --ink-100:#c7bfb2;   /* 飛白灰 */
  --paper:#f4efe4;     /* 宣紙 — always cream, used as fixed mat/backing */
  --paper-2:#ebe3d4;   /* 陰影紙 */
  --seal:#b5341f;      /* 印泥朱 — always vermilion */
  --seal-dark:#8f2417;
  --gold:#b08540;      /* 金 */
  --gold-soft:#c9a765;

  /* semantic — theme reactive */
  --bg:var(--paper);
  --bg-2:var(--paper-2);
  --text:var(--ink-900);
  --text-dim:var(--ink-500);
  --text-faint:var(--ink-300);
  --line:rgba(22,19,15,.14);
  --ink-wash:var(--ink-900);   /* decorative brush strokes drawn on page bg */
  --accent:var(--seal);        /* interactive accent: red (light) / gold (dark) */
  --card:rgba(255,255,255,.35);
  --shadow:rgba(22,19,15,.28);

  --font-brush:'LXGW WenKai TC','Noto Serif TC', serif;
  --font-kai:'LXGW WenKai TC','Noto Serif TC', serif;
  --font-serif:'Noto Serif TC', serif;
  --font-en:'Cormorant Garamond', 'Noto Serif TC', serif;
  --font-mono:'Space Mono','Noto Serif TC', monospace;

  --edge:clamp(20px, 5vw, 92px);
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"]{
  --bg:#131110;
  --bg-2:#1c1815;
  --text:#ece4d6;
  --text-dim:#b7ab98;
  --text-faint:#7d7266;
  --line:rgba(236,228,214,.14);
  --ink-wash:#c9a765;          /* 泥金 — gold ink on dark ground */
  --accent:#d9b567;
  --card:rgba(255,255,255,.075);
  --shadow:rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-serif);
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(120% 90% at 100% 0%, rgba(176,133,64,.06), transparent 45%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.05), transparent 55%);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
}
html[data-theme="dark"] body{
  background-image:
    radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,.035), transparent 55%),
    radial-gradient(120% 90% at 100% 0%, rgba(201,167,101,.08), transparent 45%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.4), transparent 55%);
}
a{color:var(--text);text-decoration:none;transition:color .3s var(--ease)}
a:hover{color:var(--accent)}
img,svg{display:block}
::selection{background:var(--accent);color:var(--ink-900)}

/* ---------- paper grain overlay ---------- */
.paper-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.62;mix-blend-mode:multiply}
html[data-theme="dark"] .paper-overlay{opacity:.6;mix-blend-mode:soft-light}
.paper-overlay svg{width:100%;height:100%}
/* ink edge vignette — deepens the ground toward the frame */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 220px 30px rgba(22,19,15,.12), inset 0 0 60px 0 rgba(22,19,15,.06)}
html[data-theme="dark"] body::before{box-shadow:inset 0 0 240px 50px rgba(0,0,0,.55), inset 0 0 90px 0 rgba(0,0,0,.35)}

/* ---------- cursor ink ---------- */
.cursor-ink{position:fixed;top:0;left:0;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,var(--text),transparent 70%);
  transform:translate(-50%,-50%) scale(0);opacity:.32;pointer-events:none;z-index:9998;
  transition:transform .4s var(--ease),opacity .6s var(--ease)}
@media (hover:hover){body:hover .cursor-ink{transform:translate(-50%,-50%) scale(1)}}

/* ==================== NAV ==================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--edge);
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease)}
.nav.scrolled{background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(12px);
  padding-top:12px;padding-bottom:12px;box-shadow:0 1px 0 var(--line)}

.brand{display:flex;align-items:center;gap:12px}
.brand__seal{width:34px;height:34px;flex:none;display:block;transition:transform .5s var(--ease)}
.brand:hover .brand__seal{transform:rotate(-6deg) scale(1.06)}
.mini-seal{width:100%;height:100%}
.brand__word{display:flex;flex-direction:column;line-height:1}
.brand__cn{font-family:var(--font-brush);font-weight:700;font-size:22px;letter-spacing:.12em;color:var(--text)}
.brand__en{font-family:var(--font-en);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--text-dim);margin-top:3px}

.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.nav__links a{position:relative;font-size:15px;letter-spacing:.06em;display:flex;flex-direction:column;align-items:center;line-height:1.2}
.nav__links a i{font-family:var(--font-mono);font-size:9px;font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-top:2px;transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:1.5px;background:var(--accent);transition:width .35s var(--ease),left .35s var(--ease)}
.nav__links a:hover::after{width:100%;left:0}
.nav__links a:hover i{color:var(--accent)}
.nav__gh i{color:var(--gold) !important}

.theme-toggle{font-family:var(--font-brush);width:36px;height:36px;border-radius:8px;flex:none;
  display:grid;place-items:center;background:var(--text);color:var(--bg);font-size:16px;
  cursor:pointer;border:none;transition:.4s var(--ease)}
.theme-toggle:hover{background:var(--accent);color:var(--ink-900)}

.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav__toggle span{width:24px;height:2px;background:var(--text);transition:.3s var(--ease)}

.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;visibility:hidden;transition:.4s var(--ease)}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--font-serif);font-weight:700;font-size:28px;letter-spacing:.05em}
.mobile-menu .theme-toggle{margin-top:10px;width:44px;height:44px;font-size:18px}

/* ==================== shared bits ==================== */
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
main{position:relative;z-index:5}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:16px;
  letter-spacing:.08em;padding:14px 30px;border-radius:2px;transition:.4s var(--ease);position:relative;overflow:hidden}
.btn i{font-style:normal;transition:transform .4s var(--ease)}
.btn--ink{background:var(--text);color:var(--bg)}
.btn--ink:hover{background:var(--accent);color:var(--ink-900)}
.btn--ink:hover i{transform:translateX(6px)}
.btn--ghost{border:1px solid var(--text-faint);color:var(--text)}
.btn--ghost:hover{border-color:var(--text);background:var(--text);color:var(--bg)}

.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}

/* ink portrait — mounted as an album-leaf painting (natural on light & dark) */
.ink-portrait{position:relative;display:block;
  background:
    radial-gradient(120% 120% at 50% 40%, #f6f1e6 0%, #efe7d6 62%, #e6dcc6 100%);
  border-radius:3px;
  padding:clamp(20px,3vw,40px);
  box-shadow:
    0 0 0 1px rgba(120,96,54,.28),
    0 0 0 9px var(--mount-silk, #efe7d6),
    0 0 0 10px rgba(120,96,54,.34),
    0 34px 70px -34px var(--shadow);
}
.ink-portrait::before{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
  box-shadow:inset 0 0 46px rgba(90,72,40,.14);z-index:2}
.ink-portrait img{position:relative;z-index:1;width:100%;height:auto;display:block;mix-blend-mode:multiply}
.ink-portrait--lg{width:min(392px,70vw);margin:0 auto}
.ink-portrait--art{width:min(420px,86%);position:relative;z-index:1}
html[data-theme="dark"]{--mount-silk:#e8dec9}
html[data-theme="dark"] .ink-portrait{
  box-shadow:
    0 0 0 1px rgba(201,167,101,.4),
    0 0 0 9px #e8dec9,
    0 0 0 10px rgba(201,167,101,.5),
    0 40px 80px -30px rgba(0,0,0,.7);
}

/* corner flourishes (plum / bamboo) */
.corner{position:fixed;z-index:2;pointer-events:none;opacity:.4;mix-blend-mode:multiply}
html[data-theme="dark"] .corner{opacity:.5;mix-blend-mode:screen}
.corner svg{width:100%;height:auto;display:block}
.corner--tr{top:0;right:0;width:clamp(120px,15vw,224px)}
.corner--bl{bottom:0;left:0;width:clamp(118px,14vw,208px)}

/* ==================== HERO wrapper ==================== */
.hero{min-height:100vh;display:none;align-items:center;padding:120px var(--edge) 80px;position:relative}
body[data-hero="a"] .heroA{display:flex}
body[data-hero="b"] .heroB{display:flex}

/* ---- HERO A : 留白中軸 ---- */
.heroA{overflow:hidden}
.heroA-splash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0;pointer-events:none}
.heroA-splash svg{width:min(900px,120vw);height:auto}
.heroA-grid{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.heroA-mark{position:relative;display:flex;justify-content:center}
.heroA-stamp{position:absolute;right:6%;bottom:-4%;width:88px;z-index:3}
.heroA-copy{max-width:520px}
.heroA-title{font-family:var(--font-kai);font-weight:700;
  font-size:clamp(58px,8.4vw,120px);line-height:1.04;letter-spacing:.1em;margin:22px 0 18px;
  display:flex;gap:.3em}
.heroA-title span{writing-mode:vertical-rl;text-orientation:upright}
.heroA-en{font-family:var(--font-en);font-style:italic;font-size:clamp(20px,2.4vw,30px);color:var(--text-dim);letter-spacing:.02em}

/* ---- HERO B : 橫向敘事 ---- */
.heroB-grid{max-width:var(--maxw);margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,80px);align-items:center}
.heroB-copy{max-width:600px}
.heroB-wordmark{display:inline-flex;flex-direction:column;align-items:stretch;margin:20px 0 6px;line-height:.9}
.heroB-en{display:block;font-family:var(--font-en);font-weight:600;font-style:italic;
  font-size:clamp(52px,8.2vw,112px);letter-spacing:.005em;color:var(--text);
  text-shadow:0.5px 0.5px 0 var(--text-dim),-0.4px 0.3px 0 rgba(0,0,0,.12)}
.heroB-cn{display:flex;justify-content:space-between;font-family:var(--font-brush);font-weight:700;
  font-size:clamp(52px,7.6vw,104px);color:var(--text);margin-top:.04em;
  -webkit-text-stroke:.6px var(--text);text-shadow:0 0 1px rgba(22,19,15,.25)}
.heroB-cn i{font-style:normal;display:block}
.heroB-tagline{font-family:var(--font-kai);font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:.16em;
  color:var(--accent);margin-top:22px}
.heroB-intro{font-size:clamp(15px,1.3vw,18px);color:var(--text-dim);max-width:44ch;margin-top:18px;line-height:1.9}

.heroB-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:min(60vh,520px)}
.heroB-mountains{display:none}

/* atmospheric ink washes (潑墨) */
.ink-splash{position:absolute;pointer-events:none;z-index:0;mix-blend-mode:multiply}
html[data-theme="dark"] .ink-splash{mix-blend-mode:screen}
html[data-theme="dark"] .ink-splash path{fill:#c9a765 !important}
.ink-splash--hero{inset:-12% -10% -12% -8%;width:120%;height:124%}
.contact{position:relative;overflow:hidden}
.ink-splash--contact{top:-6%;left:50%;transform:translateX(-50%);width:min(680px,120%);height:120%}
.contact-inner{position:relative;z-index:1}

/* ==================== THEME TRANSITION (View Transitions ink reveal) ==================== */
/* content stays live the whole time; the new theme is revealed through an ink-shaped clip */
::view-transition-old(root),
::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* white -> black : new (dark) theme blooms from the centre */
html.vt-dark::view-transition-new(root){animation:vtGrow 1s cubic-bezier(.42,0,.18,1) forwards;z-index:2}
html.vt-dark::view-transition-old(root){z-index:1}
/* black -> white : old (dark) theme recedes to the centre, paper shows in from the edges */
html.vt-light::view-transition-old(root){animation:vtShrink 1s cubic-bezier(.42,0,.18,1) forwards;z-index:2}
html.vt-light::view-transition-new(root){z-index:1}
@keyframes vtGrow{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(145% at 50% 50%)}}
@keyframes vtShrink{from{clip-path:circle(145% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}}
@media (prefers-reduced-motion:reduce){
  html.vt-dark::view-transition-new(root),
  html.vt-light::view-transition-old(root){animation:none}
}
.heroB-stamp{position:absolute;right:4%;bottom:-4%;width:88px;z-index:3}

/* seal stamp animation */
.seal-stamp svg{width:100%;height:auto}
.seal-stamp.stamp-in{animation:stampIn .5s var(--ease) both}
@keyframes stampIn{
  0%{opacity:0;transform:scale(1.5) rotate(-14deg)}
  55%{opacity:1;transform:scale(.94) rotate(-8deg)}
  75%{transform:scale(1.03) rotate(-6deg)}
  100%{opacity:1;transform:scale(1) rotate(-6deg)}
}

/* ==================== SECTIONS ==================== */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,10vw,140px) var(--edge)}
.section-head{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(36px,6vw,64px)}
.section-idx{font-family:var(--font-kai);font-weight:700;font-size:clamp(38px,5vw,64px);color:var(--accent);line-height:.8}
.section-kicker{font-family:var(--font-mono);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px)}
.about-title{font-family:var(--font-kai);font-weight:700;font-size:clamp(38px,5vw,66px);line-height:1.42;letter-spacing:.08em}
.about-body p{font-size:clamp(16px,1.3vw,19px);color:var(--text-dim);margin-bottom:20px;line-height:2}
.about-sign{font-family:var(--font-kai);font-weight:700;color:var(--accent);font-size:clamp(20px,2.3vw,26px);letter-spacing:.24em}

/* brush divider */
.brush-divider{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge)}
.brush-divider svg{width:100%;height:40px}
.brush-line{stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 1.6s var(--ease);stroke:var(--ink-wash);stroke-width:5}
.brush-divider.in .brush-line{stroke-dashoffset:0}

/* RESEARCH */
.research-list{list-style:none}
.research-item{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:20px;
  padding:26px 8px;border-top:1px solid var(--line);transition:.45s var(--ease);position:relative}
.research-item:last-child{border-bottom:1px solid var(--line)}
.research-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--text);z-index:-1;transition:width .5s var(--ease)}
.research-item:hover{padding-left:26px;color:var(--bg)}
.research-item:hover::before{width:100%}
.research-item:hover .ri-num{color:var(--gold-soft)}
.research-item:hover .ri-en{color:var(--bg-2)}
.ri-num{font-family:var(--font-mono);font-size:18px;color:var(--accent);transition:color .4s}
.ri-cn{font-family:var(--font-kai);font-weight:700;font-size:clamp(25px,2.7vw,36px);letter-spacing:.18em}
.ri-en{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;color:var(--text-faint);text-align:right;transition:color .4s}

/* WORKS */
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.work-card{position:relative;overflow:hidden;padding:clamp(28px,3vw,44px);
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  display:flex;flex-direction:column;min-height:230px;transition:.5s var(--ease);isolation:isolate}
.work-card--wide{grid-column:1 / -1}
.work-card:hover{transform:translateY(-4px);border-color:var(--text);color:var(--bg)}
.wc-ink{position:absolute;inset:0;z-index:-1;background:var(--text);
  clip-path:circle(0% at 50% 50%);transition:clip-path .6s var(--ease)}
.work-card:hover .wc-ink{clip-path:circle(150% at 50% 50%)}
.wc-idx{font-family:var(--font-kai);font-weight:700;font-size:32px;color:var(--accent);line-height:1}
.work-card:hover .wc-idx{color:var(--gold-soft)}
.wc-title{font-family:var(--font-en);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:.01em;margin-top:14px}
.wc-cn{font-family:var(--font-kai);font-weight:700;font-size:19px;letter-spacing:.12em;color:var(--text-dim);margin-top:2px;transition:color .4s}
.work-card:hover .wc-cn{color:var(--bg-2)}
.wc-desc{font-size:15px;color:var(--text-dim);margin-top:14px;line-height:1.8;flex:1;transition:color .4s}
.work-card:hover .wc-desc{color:var(--bg-2)}
.wc-tag{align-self:flex-start;margin-top:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);padding:5px 12px;border:1px solid currentColor;border-radius:999px;transition:.4s}
.work-card:hover .wc-tag{color:var(--gold-soft);border-color:var(--gold)}

/* CONTACT */
.contact{position:relative;text-align:center}
.contact-inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.contact-title{font-family:var(--font-kai);font-weight:700;font-size:clamp(42px,6vw,84px);line-height:1.34;letter-spacing:.08em;margin:18px 0 8px}
.contact-en{font-family:var(--font-en);font-style:italic;font-size:clamp(20px,2.4vw,28px);color:var(--text-dim)}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,54px);margin-top:44px}
.contact-links a{display:flex;flex-direction:column;gap:4px}
.contact-links a span{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.contact-links a i{font-style:normal;font-size:clamp(16px,1.6vw,20px);color:var(--text);border-bottom:1px solid transparent;transition:.35s}
.contact-links a:hover i{border-color:var(--text)}
.contact-seal{margin-top:60px;width:100px;position:relative}
.contact-seal-cn{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  font-family:var(--font-brush);font-size:14px;letter-spacing:.3em;color:var(--text-faint);white-space:nowrap}

/* ==================== FOOTER ==================== */
.footer{position:relative;z-index:5;border-top:1px solid var(--line);
  padding:clamp(48px,7vw,80px) var(--edge) 40px;max-width:var(--maxw);margin:0 auto}
.footer-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px}
.footer-brand{display:flex;flex-direction:column;line-height:1}
.fb-cn{font-family:var(--font-brush);font-weight:700;font-size:30px;letter-spacing:.16em}
.fb-en{font-family:var(--font-en);font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--text-dim);margin-top:4px}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap}
.footer-nav a{font-size:14px;letter-spacing:.06em;color:var(--text-dim)}
.footer-egg{display:flex;align-items:center;gap:14px;margin:40px 0 24px;opacity:.6;transition:opacity .5s var(--ease);cursor:default}
.footer-egg:hover{opacity:1}
.egg-seal{width:30px;height:30px;flex:none;display:grid;place-items:center;background:var(--seal);color:var(--paper);
  font-family:var(--font-brush);font-size:16px;border-radius:5px;transition:transform .5s var(--ease)}
.footer-egg:hover .egg-seal{transform:rotate(-8deg)}
.egg-text{font-family:var(--font-kai);font-weight:400;font-size:clamp(15px,1.8vw,20px);letter-spacing:.14em;color:var(--text-dim)}
.footer-meta{margin-top:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--text-faint)}

/* ==================== HERO SWITCH / THEME (floating pills) ==================== */
.hero-switch{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:8px;padding:8px 10px 8px 16px;
  background:rgba(22,19,15,.9);backdrop-filter:blur(8px);border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.24)}
.hs-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-100);margin-right:4px}
.hero-switch button{font-family:var(--font-serif);font-size:13px;letter-spacing:.08em;color:var(--paper-2);
  background:none;border:none;padding:7px 14px;border-radius:999px;cursor:pointer;transition:.3s var(--ease)}
.hero-switch button.is-active{background:var(--accent);color:var(--ink-900)}

/* ==================== reveal ==================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  .brush-line{stroke-dashoffset:0}
}

/* ==================== RESPONSIVE ==================== */
@media (max-width:900px){
  .corner{opacity:.28;width:clamp(88px,20vw,150px)}
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav__toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle.open span:nth-child(2){opacity:0}
  .nav__toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .heroA-grid,.heroB-grid,.about-grid{grid-template-columns:1fr;text-align:center}
  .heroA-copy,.heroB-copy{margin:0 auto}
  .heroA-title{justify-content:center}
  .heroB-intro{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .heroA-mark{order:-1;margin-bottom:20px}
  .heroB-art{order:-1;min-height:44vh;margin-bottom:10px}
  .about-body{text-align:left}
  .works-grid{grid-template-columns:1fr}
  .research-item{grid-template-columns:56px 1fr;gap:12px}
  .ri-en{grid-column:2;text-align:left;margin-top:2px}
}
@media (max-width:520px){
  .heroA-title{font-size:clamp(48px,16vw,72px)}
  .heroB-en{font-size:clamp(48px,15vw,72px)}
  .section-head{flex-direction:row;align-items:center}
  .hero-switch{bottom:14px;padding:6px 8px 6px 12px}
  .hs-label{display:none}
  .footer-top{flex-direction:column;align-items:flex-start}
}