/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --ink:      #0A1B2E;   /* page background — blueprint navy */
  --panel:    #0F2740;   /* raised panel background */
  --line:     #4A87AC;   /* blueprint linework blue */
  --line-dim: rgba(74,135,172,0.28);
  --paper:    #E8F0F5;   /* primary text / linework white-blue */
  --paper-dim:#9FB6C7;   /* secondary text */
  --amber:    #E7A23D;   /* accent — highlights, active states */
  --redline:  #D6543E;   /* secondary accent — revision marks, sparingly */

  --font-display: "Big Shoulders Display", sans-serif;
  --font-mono:    "Space Mono", monospace;
  --font-body:    "IBM Plex Sans", sans-serif;

  --header-h: 76px;
  --grid-major: 96px;
  --grid-minor: 24px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:
    linear-gradient(var(--line-dim) 1px, transparent 1px) 0 0/var(--grid-minor) var(--grid-minor),
    linear-gradient(90deg, var(--line-dim) 1px, transparent 1px) 0 0/var(--grid-minor) var(--grid-minor),
    linear-gradient(rgba(74,135,172,0.5) 1px, transparent 1px) 0 0/var(--grid-major) var(--grid-major),
    linear-gradient(90deg, rgba(74,135,172,0.5) 1px, transparent 1px) 0 0/var(--grid-major) var(--grid-major),
    var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
ul{ list-style:none; }
img,svg{ display:block; }

::selection{ background: var(--amber); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 clamp(20px,4vw,48px);
  background: rgba(10,27,46,0.86);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-dim);
  z-index: 500;
}

.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); }
.brand-mark{ color:var(--amber); font-size:1.1rem; }
.brand-text{ font-size:0.82rem; letter-spacing:0.12em; }

.main-nav{ display:flex; gap: clamp(14px,2vw,28px); }
.nav-link{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  position: relative;
  padding: 6px 2px;
  transition: color 0.2s ease;
}
.nav-link::before{
  content: attr(data-sheet);
  color: var(--amber);
  margin-right: 6px;
}
.nav-link:hover, .nav-link:focus-visible{ color: var(--paper); }
.nav-link::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--amber);
  transition: right 0.25s ease;
}
.nav-link:hover::after{ right:0; }

.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px; height:38px;
  background:none; border:1px solid var(--line-dim);
  cursor:pointer;
}
.burger span{
  display:block; height:1px; width:18px; margin:0 auto;
  background: var(--paper);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--ink);
  z-index: 400;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 28px clamp(20px,6vw,48px) 40px;
  transform: translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.mobile-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-nav nav{ display:flex; flex-direction:column; gap:4px; }
.mobile-link{
  font-family:var(--font-display);
  font-weight:600;
  font-size: clamp(1.6rem,7vw,2.2rem);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dim);
  color: var(--paper);
}
.mobile-link:hover{ color: var(--amber); }
.mobile-nav-foot{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
}

@media (max-width: 860px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
}

/* =========================================================
   LAYOUT / SHEETS
   ========================================================= */
main{ padding-top: var(--header-h); }

.sheet{
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(64px,10vw,120px) clamp(20px,6vw,48px) clamp(80px,10vw,120px);
  border-bottom: 1px solid var(--line-dim);
}

.sheet-label{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-bottom: 10px;
}

.sheet-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  letter-spacing: 0.01em;
  margin-bottom: clamp(32px,5vw,56px);
  text-transform: uppercase;
}

/* =========================================================
   COVER SHEET
   ========================================================= */
.sheet--cover{
  min-height: calc(100vh - var(--header-h));
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom: 1px solid var(--line-dim);
}

.crop{ position:absolute; width:22px; height:22px; opacity:0.6; }
.crop::before,.crop::after{ content:""; position:absolute; background: var(--line); }
.crop::before{ width:100%; height:1px; top:50%; }
.crop::after{ width:1px; height:100%; left:50%; }
.crop-tl{ top:18px; left:18px; }
.crop-tr{ top:18px; right:18px; }
.crop-bl{ bottom:18px; left:18px; }
.crop-br{ bottom:18px; right:18px; }

.compass{
  position:absolute;
  top: clamp(70px,10vh,110px);
  right: clamp(20px,6vw,64px);
  width: 84px; height:84px;
  color: var(--line);
}
.compass svg{ width:100%; height:100%; }
.compass text{ fill: var(--line); font-family: var(--font-mono); }

@media (max-width: 640px){ .compass{ display:none; } }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--paper-dim);
  margin-bottom: 22px;
}

.cover-name{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.6rem, 12vw, 8.4rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  max-width: 14ch;
}

.cover-roles{
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.6vw, 1rem);
  letter-spacing: 0.08em;
  color: var(--amber);
  margin-top: 26px;
}
.cover-roles .slash{ color: var(--line); margin: 0 4px; }

.cover-tagline{
  max-width: 46ch;
  margin-top: 24px;
  color: var(--paper-dim);
  font-size: 1.02rem;
}

.scroll-cue{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: clamp(48px,8vh,80px);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--paper-dim);
  width: fit-content;
}
.scroll-cue svg{ animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

/* =========================================================
   PROFILE
   ========================================================= */
.callout-block{ max-width: 760px; }
.callout-lead{ font-size: 1.08rem; color: var(--paper); margin-bottom: 34px; }

.note-list{ display:flex; flex-direction:column; gap:16px; }
.note-list li{
  display:flex; gap:16px;
  padding: 16px 0;
  border-top: 1px solid var(--line-dim);
  color: var(--paper-dim);
}
.note-tag{
  font-family: var(--font-mono);
  color: var(--amber);
  flex-shrink:0;
}

/* =========================================================
   EXPERIENCE / TIMELINE
   ========================================================= */
.timeline{ position:relative; }

.tl-row{
  display:grid;
  grid-template-columns: 100px 24px 1fr;
  gap: 20px;
  padding-bottom: 56px;
}
.tl-row:last-child{ padding-bottom: 0; }

.tl-year{
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--paper);
  line-height:1.3;
}
.tl-year span{ color: var(--paper-dim); font-size: 0.78rem; }

.tl-line{
  position: relative;
  display:flex;
  justify-content:center;
}
.tl-line::before{
  content:"";
  position:absolute;
  top:6px; bottom:-56px;
  width:1px;
  background: var(--line-dim);
}
.tl-row:last-child .tl-line::before{ display:none; }
.tl-dot{
  width:9px; height:9px;
  border-radius:50%;
  border: 1.4px solid var(--line);
  background: var(--ink);
  margin-top: 3px;
}
.tl-dot--filled{ background: var(--amber); border-color: var(--amber); }

.tl-content h3{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing:0.01em;
}
.tl-meta{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--amber);
  margin: 6px 0 10px;
  letter-spacing:0.04em;
}
.tl-content p{ color: var(--paper-dim); max-width: 60ch; }
.tl-content strong{ color: var(--paper); }

@media (max-width: 560px){
  .tl-row{ grid-template-columns: 70px 20px 1fr; gap:12px; }
}

/* =========================================================
   PROJECTS / DETAIL CARDS
   ========================================================= */
.detail-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-dim);
  border: 1px solid var(--line-dim);
}
.detail-card{
  background: var(--ink);
  padding: 30px 26px;
  transition: background 0.25s ease;
}
.detail-card:hover{ background: var(--panel); }

.detail-card-head{ display:flex; align-items:center; gap:12px; margin-bottom: 14px; }
.detail-bubble{
  width:30px; height:30px;
  border: 1px solid var(--amber);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  color: var(--amber);
  font-size: 0.82rem;
  flex-shrink:0;
}
.detail-card-head h3{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.2rem;
  text-transform: uppercase;
  line-height:1.15;
}
.detail-role{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  margin-bottom: 14px;
}
.detail-card p:last-child{ color: var(--paper-dim); font-size: 0.94rem; }

.preview-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top: 18px;
  padding: 9px 14px;
  background:none;
  border: 1px solid var(--line);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.preview-btn:hover, .preview-btn:focus-visible{
  background: var(--amber);
  color: var(--ink);
}
.preview-btn-icon{ font-size: 0.62rem; }

@media (max-width: 780px){
  .detail-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   SKILLS
   ========================================================= */
.sub-label{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  margin: 36px 0 16px;
  text-transform: uppercase;
}
.sub-label:first-of-type{ margin-top:0; }

.tag-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 8px 14px;
  border: 1px solid var(--line);
  color: var(--paper);
}
.tag--soft{ border-color: var(--line-dim); color: var(--paper-dim); }

.ruler{ margin-top: 8px; display:flex; flex-direction:column; gap:22px; max-width: 640px; }
.ruler-row{ display:grid; grid-template-columns: 100px 1fr 70px; align-items:center; gap:16px; }
.ruler-name{ font-family: var(--font-mono); font-size:0.82rem; }
.ruler-track{
  position:relative;
  height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--line-dim) 0 1px, transparent 1px 10%);
  border-bottom: 1px solid var(--line);
}
.ruler-fill{
  position:absolute; left:0; top:0; bottom:0;
  width: var(--fill);
  background: var(--amber);
  opacity: 0.85;
}
.ruler-level{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--amber);
  text-align:right;
}

/* =========================================================
   EDUCATION / STAMP
   ========================================================= */
.stamp-card{
  display:flex;
  align-items:center;
  gap: 28px;
  max-width: 640px;
  padding: 30px;
  border: 1px solid var(--line-dim);
}
.stamp{ width:74px; height:74px; color: var(--amber); flex-shrink:0; }
.stamp svg{ width:100%; height:100%; }
.stamp-content h3{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.stamp-years{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--paper-dim);
  margin-top: 8px;
}
.stamp-status{
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

/* =========================================================
   CONTACT
   ========================================================= */
.sheet--contact{ border-bottom:none; padding-bottom: clamp(160px,20vh,220px); }
.contact-lead{ color: var(--paper-dim); max-width: 52ch; margin-bottom: 40px; font-size:1.02rem; }

.contact-links{ display:flex; flex-direction:column; gap:0; max-width:640px; }
.contact-link{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding: 22px 4px;
  border-top: 1px solid var(--line-dim);
  transition: color 0.2s ease;
}
.contact-links a:last-child{ border-bottom: 1px solid var(--line-dim); }
.contact-label{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--paper-dim);
}
.contact-value{
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  text-transform: uppercase;
}
.contact-link:hover .contact-value{ color: var(--amber); }

/* =========================================================
   TITLE BLOCK (signature element)
   ========================================================= */
.title-block{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 250px;
  background: rgba(15,39,64,0.92);
  border: 1px solid var(--line);
  backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  z-index: 300;
  box-shadow: 0 0 0 1px var(--ink);
}
.tb-row--top{
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-dim);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
}
.tb-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.tb-cell{
  padding: 8px 10px;
  border-top: 1px solid var(--line-dim);
  border-right: 1px solid var(--line-dim);
  display:flex; flex-direction:column; gap:3px;
}
.tb-cell:nth-child(2n){ border-right:none; }
.tb-k{ font-size: 0.58rem; letter-spacing: 0.1em; color: var(--paper-dim); }
.tb-v{ font-size: 0.76rem; color: var(--amber); }

@media (max-width: 640px){
  .title-block{ left:12px; right:12px; width:auto; bottom:12px; }
}

/* =========================================================
   PREVIEW MODALS
   ========================================================= */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(5,14,24,0.86);
  backdrop-filter: blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }

.modal{
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px var(--ink), 0 30px 60px rgba(0,0,0,0.5);
  transform: translateY(10px);
  transition: transform 0.25s ease;
}
.modal-overlay.is-open .modal:not([hidden]){ transform: translateY(0); }

.modal-head{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:start;
  gap: 10px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line-dim);
}
.modal-eyebrow{
  grid-column: 1 / 2;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--amber);
  margin-bottom: 6px;
}
.modal-head h3{
  grid-column: 1 / 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  text-transform: uppercase;
}
.modal-close{
  grid-row: 1 / 3;
  grid-column: 2;
  width: 34px; height:34px;
  background:none;
  border: 1px solid var(--line-dim);
  color: var(--paper);
  font-size: 0.9rem;
  cursor:pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.modal-close:hover, .modal-close:focus-visible{ border-color: var(--amber); color: var(--amber); }

.modal-body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-dim);
}
.modal-caption{
  padding: 12px 26px 20px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
}

@media (max-width: 760px){
  .modal-body{ grid-template-columns: 1fr; }
}

/* ---- Blender-style viewport ---- */
.viewport{
  position: relative;
  background: #081420;
  min-height: 320px;
  overflow: hidden;
  perspective: 700px;
}
.viewport-tab{
  position:absolute; top:0; left:0;
  padding: 5px 10px;
  background: var(--panel);
  border-right: 1px solid var(--line-dim);
  border-bottom: 1px solid var(--line-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--paper-dim);
  z-index: 2;
}
.viewport-floor{
  position:absolute;
  left:50%; top:68%;
  width:420px; height:420px;
  margin-left:-210px; margin-top:-210px;
  background-image:
    linear-gradient(var(--line-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dim) 1px, transparent 1px);
  background-size: 26px 26px;
  transform: rotateX(75deg);
  opacity: 0.55;
}
.viewport-rig{
  position:absolute;
  left:50%; top:52%;
  transform-style: preserve-3d;
  color: var(--amber);
  animation: rig-orbit 9s ease-in-out infinite;
}
@keyframes rig-orbit{
  0%   { transform: translate(-50%,-50%) rotateY(-20deg) rotateX(6deg)  scale(0.82); }
  50%  { transform: translate(-50%,-50%) rotateY(38deg)  rotateX(11deg) scale(1.18); }
  100% { transform: translate(-50%,-50%) rotateY(-20deg) rotateX(6deg)  scale(0.82); }
}
.rig-line{ fill:none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rig-joint{ fill: currentColor; }

.viewport-gizmo{
  position:absolute; top:14px; right:14px;
  display:flex; flex-direction:column; gap:6px;
  z-index:2;
}
.gizmo-dot{
  width:16px; height:16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--ink);
  font-weight:700;
}
.gizmo-x{ background: var(--redline); }
.gizmo-y{ background: #6FBF73; }
.gizmo-z{ background: var(--line); }

.viewport-stats{
  position:absolute; left:10px; bottom:8px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  z-index:2;
}

/* ---- Code panel ---- */
.code-panel{
  position: relative;
  background: #081420;
  min-height: 320px;
  padding-top: 30px;
  overflow: hidden;
}
.code-panel-tab{
  position:absolute; top:0; left:0; right:0;
  padding: 5px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--paper-dim);
}
.code-block{
  padding: 16px 18px;
  height: 290px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--paper);
  white-space: pre-wrap;
  word-break: break-word;
}
.code-block code{ color: inherit; }
.code-cursor{
  color: var(--amber);
  animation: blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---- Translator panels ---- */
.modal-body--translator{ background: var(--line-dim); }
.lang-panel{
  background: #081420;
  padding: 24px 22px;
  min-height: 220px;
}
.lang-label{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  margin-bottom: 14px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.lang-check{ color: var(--amber); }
.lang-text{
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--paper);
  min-height: 2.6em;
}
.lang-arrow{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: #081420;
  color: var(--amber);
  padding: 14px 10px;
}
.lang-arrow-label{
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
  writing-mode: horizontal-tb;
}
@media (max-width: 760px){
  .lang-arrow{ flex-direction: row; }
  .lang-arrow svg{ transform: rotate(90deg); }
}