/* ============================================================
   07 · Split Screen — fixed identity panel (left) + scrolling
   content (right). Trend: the "half static / half scroll"
   personal site. Ink panel, bone content, one coral accent.
   ============================================================ */
:root{
  --ink:#161514; --ink-2:#2a2825; --bone:#f6f3ee; --bone-2:#ece7de;
  --text:#1c1a18; --dim:#6c655c; --faint:#a49b8e; --line:#ddd5c8;
  --line-d:rgba(255,255,255,.12); --accent:#ec5a34;
  --disp:"Syne",ui-sans-serif,system-ui,sans-serif; --body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --pad:clamp(22px,3.4vw,52px); --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.66;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.eyebrow{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.layout{display:grid;grid-template-columns:38% 62%}
@media(max-width:860px){.layout{grid-template-columns:1fr}}

/* ---- left fixed panel ---- */
.panel{position:sticky;top:0;height:100vh;background:var(--ink);color:var(--bone);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,3.4vw,52px);overflow:hidden}
@media(max-width:860px){.panel{position:static;height:auto;min-height:70svh}}
.panel::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(236,90,52,.5),transparent 66%);top:-120px;right:-120px;filter:blur(20px)}
.panel .top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.panel .avatar{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:22px}
.lang{display:inline-flex;gap:2px}
.lang button{font-family:var(--disp);font-size:11px;font-weight:600;padding:6px 10px;border:1px solid var(--line-d);background:transparent;color:var(--bone);cursor:pointer;border-radius:6px}
.lang button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.panel .mid{position:relative;z-index:1;margin-top:auto}
.panel h1{font-family:var(--disp);font-weight:800;font-size:clamp(38px,5vw,72px);line-height:.98;letter-spacing:-.02em;margin:0 0 14px}
.panel .role{font-size:15px;color:var(--bone);opacity:.72;max-width:32ch}
.panel nav{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;margin-top:26px}
.panel nav a{font-family:var(--disp);font-size:14px;font-weight:600;padding:7px 0;color:var(--bone);opacity:.62;display:flex;align-items:center;gap:12px;transition:.2s var(--ease)}
.panel nav a::before{content:"";width:16px;height:1px;background:var(--accent);transition:width .2s var(--ease)}
.panel nav a:hover{opacity:1}.panel nav a:hover::before{width:34px}
.panel .social{position:relative;z-index:1;display:flex;gap:16px;margin-top:26px}
.panel .social a{font-size:12px;letter-spacing:.06em;color:var(--bone);opacity:.6}
.panel .social a:hover{opacity:1;color:var(--accent)}

/* ---- right content ---- */
.content{padding:clamp(48px,7vw,110px) var(--pad)}
.block{margin-bottom:clamp(56px,9vw,120px)}
.block:last-child{margin-bottom:0}
.lede{font-family:var(--disp);font-weight:600;font-size:clamp(24px,3.2vw,40px);line-height:1.28;letter-spacing:-.01em}
.lede em{font-style:normal;color:var(--accent)}
.block h2{font-family:var(--disp);font-weight:700;font-size:clamp(15px,1.6vw,18px);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:26px;display:flex;align-items:center;gap:14px}
.block h2::before{content:"";width:26px;height:2px;background:var(--accent)}
.block p.body{color:var(--dim);font-size:16.5px;margin-bottom:16px;max-width:52ch}

/* work list */
.work a{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line);transition:.2s var(--ease)}
.work a:last-child{border-bottom:1px solid var(--line)}
.work a:hover{padding-left:10px}
.work .idx{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--accent)}
.work h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.01em}
.work p{color:var(--dim);font-size:14.5px;margin-top:5px}
.work .yr{font-family:var(--disp);font-size:13px;color:var(--faint);white-space:nowrap}
@media(max-width:520px){.work a{grid-template-columns:auto 1fr}.work .yr{display:none}}

/* experience */
.xp{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.xp .when{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--faint)}
.xp h4{font-family:var(--disp);font-weight:700;font-size:17px}
.xp p{color:var(--dim);font-size:14.5px;margin-top:3px}
@media(max-width:520px){.xp{grid-template-columns:1fr;gap:4px}}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{font-family:var(--disp);font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:999px;background:var(--bone-2);color:var(--dim)}

/* contact card */
.cta{background:var(--ink);color:var(--bone);border-radius:18px;padding:clamp(28px,4vw,48px)}
.cta h3{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.6vw,44px);letter-spacing:-.02em;margin-bottom:16px}
.cta a.mail{color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:2px;font-size:clamp(16px,2vw,20px)}
.cta .row{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px}
.cta .row a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);opacity:.72}
.cta .row a:hover{opacity:1;color:var(--accent)}
.tpl-note{color:var(--faint);font-size:12.5px;font-style:italic;margin-top:26px}

html.js [data-rise]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-rise].in{opacity:1;transform:none}
html.js [data-rise][data-d="1"]{transition-delay:.08s}html.js [data-rise][data-d="2"]{transition-delay:.16s}html.js [data-rise][data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}html.js [data-rise]{opacity:1;transform:none;transition:none}}