:root{
  --bg:#0f1218;
  --panel:#151a22;
  --line:#262d39;
  --text:#d9dde4;
  --dim:#8b94a3;
  --amber:#ffb454;
  --mint:#7fd6b0;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.65 var(--mono);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--amber);text-decoration:underline;text-decoration-color:#ffb45459;text-underline-offset:3px}
a:hover{text-decoration-color:var(--amber)}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
::selection{background:var(--amber);color:var(--bg)}

.wrap{max-width:880px;margin:0 auto;padding:0 20px}
section{padding:56px 0 0}
section:first-of-type{padding-top:56px}

h2{margin:0 0 20px;font-size:clamp(20px,3.4vw,26px);line-height:1.2;font-weight:700;letter-spacing:-.01em}

/* hero */
.hero{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start}
h1{margin:0 0 8px;font-size:clamp(34px,6.4vw,56px);line-height:1.08;font-weight:700;letter-spacing:-.02em}
.role{margin:0 0 24px;color:var(--amber);font-size:clamp(15px,2.4vw,18px)}
.lead{margin:0 0 24px;max-width:54ch}
.meta{margin:0 0 28px;color:var(--dim);font-size:15px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-block;padding:10px 16px;border:1px solid var(--amber);color:var(--bg);background:var(--amber);
  text-decoration:none;font-weight:700;font-size:15px;border-radius:3px
}
.btn.alt{background:transparent;color:var(--amber)}
.btn:hover{filter:brightness(1.1)}
.btn.alt:hover{background:#ffb4541a;filter:none}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.photo{margin:0;border:1px solid var(--line);background:var(--panel);border-radius:4px;overflow:hidden}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;filter:saturate(.9) contrast(1.03)}

/* stack list */
.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.rows .k{color:var(--amber)}
.rows .v{color:var(--text)}
.rows .v small{display:block;color:var(--dim);font-size:14px}

/* work */
.work{margin:0;padding:0;list-style:none}
.work li{padding:16px 0 16px 20px;border-left:2px solid var(--line);margin-left:2px;position:relative}
.work li::before{content:"";position:absolute;left:-6px;top:26px;width:10px;height:10px;background:var(--bg);border:2px solid var(--amber);border-radius:50%}
.work strong{display:block;font-weight:700}
.work span{color:var(--dim);font-size:15px}

/* how */
.how{margin:0;padding:0;list-style:none}
.how li{padding:4px 0}
.how li::before{content:"– ";color:var(--amber)}

/* log */
.log{margin:0;padding:0;list-style:none;font-size:15px}
.log li{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:6px 0}
.log time{color:var(--amber)}
.log span{color:var(--dim)}
.log b{color:var(--text);font-weight:400}

/* contact + footer */
.contact{font-size:clamp(18px,3vw,24px);line-height:1.9}
.contact a{font-weight:700}
footer{margin-top:72px;border-top:1px solid var(--line);padding:24px 0 48px;color:var(--dim);font-size:13px;line-height:1.7}
footer p{margin:0 0 8px;max-width:78ch}
footer b{color:var(--text);font-weight:400}

@media (max-width:720px){
  .hero{grid-template-columns:1fr;gap:0}
  .hero>div{display:contents}
  .hero h1{order:1}
  .hero .role{order:2}
  .photo{order:3;max-width:260px;margin:0 0 28px}
  .hero .lead{order:4}
  .hero .meta{order:5}
  .hero .btns{order:6}
  .photo img{aspect-ratio:3/4;object-position:50% 20%}
  .rows li{grid-template-columns:1fr;gap:2px}
  .log li{grid-template-columns:1fr;gap:0}
}

/* language switch */
.lang{display:flex;justify-content:flex-end;gap:14px;padding-top:18px;font-size:14px;color:var(--dim)}
.lang a{color:var(--dim);text-decoration:none}
.lang a:hover{color:var(--amber)}
.lang [aria-current]{color:var(--amber)}