@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:        #FAFAF6;
  --bg-panel:  #F1ECDF;
  --line:      #E3DDCB;
  --text:      #1B1A15;
  --text-mute: #726C58;
  --accent:    #A8611F;
  --sidebar-w: 240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
img{ max-width:100%; display:block; }

/* ---------------- layout: sidebar + main ---------------- */
.layout{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  position:sticky; top:0; height:100vh;
  border-right:1px solid var(--line);
  padding:32px 28px;
  display:flex; flex-direction:column;
}
.sidebar .brand{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  font-size:21px;
  line-height:1.05;
  text-decoration:none;
  color:var(--text);
  margin-bottom:6px;
}
.sidebar .brand span{ color:var(--accent); }
.sidebar .role-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--text-mute);
  margin-bottom:6px;
}
.sidebar .location-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--text-mute);
  opacity:0.75;
  margin:0 0 40px;
}

.sidebar nav ul{ list-style:none; margin:0 0 auto; padding:0; }
.sidebar nav li{ margin-bottom:4px; }
.sidebar nav a{
  display:block;
  text-decoration:none;
  font-size:15px;
  color:var(--text-mute);
  padding:8px 0;
  transition:color .15s ease;
}
.sidebar nav a:hover{ color:var(--text); }
.sidebar nav a.active{ color:var(--accent); }

.sidebar .lang-switch{
  display:flex; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  margin:32px 0 24px;
}
.sidebar .lang-switch a{ text-decoration:none; color:var(--text-mute); }
.sidebar .lang-switch a.active{ color:var(--accent); font-weight:600; }
.sidebar .lang-switch span{ color:var(--line); }

.sidebar .sidebar-contact{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--text-mute);
  border-top:1px solid var(--line);
  padding-top:20px;
}
.sidebar .sidebar-contact a{ text-decoration:none; display:block; margin-bottom:6px; }
.sidebar .sidebar-contact a:hover{ color:var(--accent); }

main{ flex:1; min-width:0; }
.wrap{ max-width:900px; padding:0 48px; }

/* ---------------- hero carousel ---------------- */
.carousel{
  position:relative;
  height:560px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--bg-panel);
}
.slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 1.1s ease;
}
.slide.is-active{ opacity:1; }
.slide .scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,9,6,0.78) 0%, rgba(10,9,6,0.18) 55%, rgba(10,9,6,0.05) 100%);
}
.slide .caption{
  position:absolute; left:48px; right:48px; bottom:36px;
  color:#F5F1E6;
}
.slide .caption .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  opacity:0.85;
  margin:0 0 6px;
}
.slide .caption h2{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  font-size:clamp(28px, 4vw, 44px);
  margin:0 0 10px;
}
.slide .caption a{
  text-decoration:none;
  font-size:13.5px;
  border-bottom:1px solid #F5F1E6;
  padding-bottom:2px;
}
.slide .caption a:hover{ opacity:0.75; }

.carousel-dots{
  position:absolute; right:48px; bottom:36px;
  display:flex; gap:8px;
}
.carousel-dots button{
  width:8px; height:8px; border-radius:50%;
  border:1px solid #F5F1E6; background:transparent;
  padding:0; cursor:pointer;
}
.carousel-dots button.is-active{ background:#F5F1E6; }

/* ---------------- sections ---------------- */
section{ padding:60px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }

.section-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--text-mute);
  margin:0 0 28px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.about-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; }
.about-grid p{ margin:0 0 18px; max-width:56ch; }
.about-grid p:last-child{ margin-bottom:0; }

.info-list{ list-style:none; margin:0; padding:0; font-family:'IBM Plex Mono', monospace; font-size:14px; }
.info-list li{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.info-list li span:first-child{ color:var(--text-mute); }
.info-list li a{ text-decoration:none; }
.info-list li a:hover{ color:var(--accent); }

/* ---------------- equipment ---------------- */
.gear-groups{ display:grid; grid-template-columns:repeat(2, 1fr); gap:40px 48px; }
.gear-group h3{ font-family:'Big Shoulders Display', sans-serif; font-size:20px; font-weight:600; margin:0 0 14px; color:var(--accent); }
.gear-group ul{ list-style:none; margin:0; padding:0; font-family:'IBM Plex Mono', monospace; font-size:13.5px; color:var(--text-mute); }
.gear-group li{ padding:6px 0; border-bottom:1px dashed var(--line); }
.gear-group li:last-child{ border-bottom:none; }

/* ---------------- portfolio grid ---------------- */
.log-intro{ color:var(--text-mute); max-width:60ch; margin:0 0 36px; }
.port-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px 32px; }
.port-card{ display:block; text-decoration:none; color:var(--text); }
.port-thumb{
  position:relative;
  aspect-ratio:1/1;
  background:var(--bg-panel);
  border:1px solid var(--line);
  overflow:hidden;
  margin-bottom:14px;
}
.port-thumb img{ width:100%; height:100%; object-fit:cover; }
.port-thumb .placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Big Shoulders Display', sans-serif;
  font-size:15px; font-weight:600;
  color:var(--text-mute);
  text-align:center;
  padding:16px;
}
.port-card h3{ font-family:'Big Shoulders Display', sans-serif; font-size:19px; font-weight:600; margin:0 0 4px; }
.port-card .meta{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--text-mute); }
.port-card .status{ color:var(--accent); }

/* ---------------- footer ---------------- */
footer{ padding:40px 0 56px; }
footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--text-mute);
}
footer a{ text-decoration:none; }
footer a:hover{ color:var(--accent); }

/* ---------------- buttons ---------------- */
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:12px 22px; border-radius:2px;
  text-decoration:none; font-size:14px; font-weight:500;
  border:1px solid var(--line); transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.btn.primary{ background:var(--accent); color:#FAF7EF; border-color:var(--accent); }
.btn.primary:hover{ background:#8f5019; }
.btn.ghost:hover{ border-color:var(--text-mute); }

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .layout{ flex-direction:column; }
  .sidebar{ position:static; height:auto; width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; padding:20px 24px; gap:16px 28px; }
  .sidebar .role-tag{ margin-bottom:0; width:100%; }
  .sidebar .location-tag{ margin-bottom:0; width:100%; }
  .sidebar nav ul{ display:flex; gap:20px; margin:0; }
  .sidebar .lang-switch{ margin:0; }
  .sidebar .sidebar-contact{ border-top:none; padding-top:0; display:flex; gap:16px; }
  .sidebar .sidebar-contact a{ margin-bottom:0; }
  .wrap{ padding:0 24px; }
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .gear-groups{ grid-template-columns:1fr; }
  .port-grid{ grid-template-columns:1fr; }
  .carousel{ height:420px; }
  .slide .caption{ left:24px; right:24px; }
  .carousel-dots{ right:24px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .slide{ transition:none; }
}