:root{
  --bg:#10151B;
  --bg-panel:#161C24;
  --bg-panel-2:#1C232C;
  --paper:#EDE6D8;
  --paper-dim:#C9C2B4;
  --muted:#8B96A0;
  --accent:#C64A3A;
  --accent-soft:rgba(198,74,58,.16);
  --line:rgba(237,230,216,.14);
  --line-strong:rgba(237,230,216,.28);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:'Source Serif 4', Georgia, serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}
h1,h2,.stencil{
  font-family:'Big Shoulders Display', sans-serif;
  letter-spacing:.01em;
  margin:0;
}
a{color:inherit;}
.wrap{max-width:800px; margin:0 auto; padding:0 28px;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

/* nav */
.site-nav{
  position:sticky; top:0; z-index:30;
  background:rgba(16,21,27,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  gap:20px;
}
.brand-mark{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700; font-size:15px; letter-spacing:.06em;
  color:var(--paper);
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
  text-decoration:none;
}
.rec-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px 1px var(--accent-soft);
  flex-shrink:0;
}
.nav-links{
  display:flex; gap:22px; overflow-x:auto; white-space:nowrap;
  scrollbar-width:none; flex:1; justify-content:center;
}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:500; font-size:14px; letter-spacing:.04em;
  color:var(--muted); text-decoration:none;
}
.nav-links a:hover{color:var(--paper);}
.lang-toggle{display:flex; gap:2px; border:1px solid var(--line-strong); border-radius:3px; overflow:hidden; flex-shrink:0;}
.lang-toggle button{
  background:transparent; border:none; color:var(--muted);
  font-family:'Big Shoulders Display', sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.05em; padding:6px 12px; cursor:pointer;
}
.lang-toggle button.active{background:var(--paper); color:var(--bg);}

@media (max-width:640px){
  .nav-links{justify-content:flex-start;}
  .site-nav{padding:12px 18px;}
}

/* hero */
.hero{
  min-height:88svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:70px 28px 70px;
  position:relative;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(237,230,216,.035) 0 2px, transparent 2px 34px);
  pointer-events:none;
}
.hero-inner{max-width:800px; margin:0 auto; width:100%; position:relative;}
.slate-row{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:600; font-size:13px; letter-spacing:.08em;
  color:var(--muted); margin-bottom:22px;
}
.slate-row .role-cycle{
  color:var(--accent); min-width:190px; display:inline-block;
  transition:opacity .35s ease;
}
.hero h1{
  font-size:clamp(52px, 12vw, 108px);
  font-weight:800; line-height:.92; color:var(--paper);
}
.hero .tagline{
  margin-top:26px; font-size:clamp(19px, 3vw, 24px);
  font-style:italic; color:var(--paper-dim); max-width:540px; font-weight:400;
}
.hero .subline{
  margin-top:18px;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:500; font-size:14px; letter-spacing:.04em; color:var(--muted);
}

section{padding:88px 0;}
section.tight{padding:64px 0;}
.eyebrow-line{display:flex; align-items:baseline; gap:16px; margin-bottom:40px;}
.eyebrow-line h2{font-size:34px; font-weight:700; color:var(--paper);}
.eyebrow-line .num{font-family:'Big Shoulders Display',sans-serif; font-weight:600; color:var(--muted); font-size:15px;}
.eyebrow-line::after{content:""; flex:1; height:1px; background:var(--line);}

.about p{font-size:18px; color:var(--paper-dim); max-width:640px;}

/* experience log */
.log{border-top:1px solid var(--line);}
.log-item{display:grid; grid-template-columns:150px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line);}
.log-item .tag{
  font-family:'Big Shoulders Display', sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.05em; color:var(--accent); text-transform:uppercase; padding-top:3px;
}
.log-item h3{font-family:'Source Serif 4', serif; font-weight:600; font-size:19px; color:var(--paper); margin:0 0 6px 0;}
.log-item p{margin:0; color:var(--muted); font-size:16px; max-width:480px;}

/* gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:130px;
  gap:10px;
}
.frame{
  position:relative; grid-column:span 1; grid-row:span 2;
  overflow:hidden; display:block;
  background:var(--bg-panel);
  border:1px solid var(--line);
  text-decoration:none;
}
.frame:nth-child(1),.frame:nth-child(6){grid-column:span 2; grid-row:span 3;}
.frame img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.frame:hover img{transform:scale(1.05);}
.frame .frame-num{
  position:absolute; top:8px; left:10px;
  font-family:'Big Shoulders Display', sans-serif; font-size:12px; letter-spacing:.05em;
  color:var(--paper-dim); background:rgba(16,21,27,.55); padding:2px 7px;
}
.frame .frame-label{
  display:none; position:absolute; inset:0;
  border:1px dashed var(--line-strong);
  align-items:center; justify-content:center; text-align:center; padding:10px;
  font-family:'Big Shoulders Display', sans-serif; font-size:12px; letter-spacing:.04em;
  color:var(--muted);
}
.frame.empty .frame-label{display:flex;}
.frame.empty img{display:none;}

@media (max-width:640px){
  .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px;}
  .frame:nth-child(1),.frame:nth-child(6){grid-column:span 2; grid-row:span 2;}
}

/* education */
.edu-block{
  display:flex; justify-content:space-between; gap:24px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:24px 0; flex-wrap:wrap;
}
.edu-block .left h3{font-size:20px; color:var(--paper); font-weight:600; margin:0 0 4px 0;}
.edu-block .left p{margin:0; color:var(--muted); font-size:15px;}
.edu-block .right{font-family:'Big Shoulders Display', sans-serif; color:var(--muted); font-size:14px; letter-spacing:.04em; white-space:nowrap;}

/* skills */
.skills-grid{display:flex; flex-wrap:wrap; gap:10px;}
.skill-pill{border:1px solid var(--line-strong); padding:9px 16px; border-radius:2px; font-size:15px; color:var(--paper-dim);}

/* contact */
.contact-panel{background:var(--bg-panel); border:1px solid var(--line); padding:44px 36px; border-radius:2px;}
.contact-panel h2{font-size:30px; margin-bottom:14px; color:var(--paper);}
.contact-panel p{color:var(--paper-dim); max-width:460px; margin-bottom:26px;}
.contact-links{display:flex; flex-direction:column; gap:10px;}
.contact-links a{
  font-family:'Big Shoulders Display', sans-serif; font-weight:600; font-size:20px; letter-spacing:.02em;
  color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; width:fit-content;
}
.contact-links a:hover{border-color:var(--accent);}

/* footer */
.site-footer{border-top:1px solid var(--line); background:var(--bg-panel-2);}
.footer-grid{
  max-width:800px; margin:0 auto; padding:56px 28px 30px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px;
}
.footer-col h4{
  font-family:'Big Shoulders Display', sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.05em; color:var(--paper-dim); margin:0 0 14px 0;
}
.footer-col p{color:var(--muted); font-size:14px; margin:0; max-width:220px;}
.footer-col a{display:block; color:var(--muted); text-decoration:none; font-size:14px; margin-bottom:8px;}
.footer-col a:hover{color:var(--paper);}
.footer-bottom{
  max-width:800px; margin:0 auto; padding:20px 28px 34px;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); color:var(--muted); font-size:12.5px;
  font-family:'Big Shoulders Display', sans-serif; letter-spacing:.04em; flex-wrap:wrap; gap:10px;
}
.footer-bottom a{color:var(--muted); text-decoration:none;}
.footer-bottom a:hover{color:var(--accent);}

@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr; gap:26px;}
}

@media (max-width:560px){
  .log-item{grid-template-columns:1fr; gap:6px;}
  .edu-block{flex-direction:column;}
  .contact-panel{padding:32px 22px;}
}