/* =========================================================
   Theme + overrides on top of Bootstrap 5.3
   (loaded AFTER vendor/bootstrap.min.css)
   ========================================================= */
:root{
  --paper:#EEF1F4;
  --ink:#16202E;
  --muted:#5B6675;
  --rule:#CFD6DE;
  --surface:#fff;                       /* cards, chips, hover rows */
  --tint-rgb:238,241,244;               /* colour of the tint laid over background images */
  --hover-tint:rgba(22,32,46,.08);
  --active-tint:rgba(22,32,46,.12);
  --contact-bg:#16202E;--contact-fg:#EEF1F4;--footer-fg:#9AA5B4;
  --ui:#2F4BFF;   --ui-edge:#1E33C4;   --on-ui:#fff;
  --api:#5CCFB0;  --api-edge:#38A98B;  --on-api:#16202E;
  --data:#FFC93C; --data-edge:#D9A017; --on-data:#16202E;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Point Bootstrap's own theme variables at our palette */
  --bs-body-font-family:var(--body);
  --bs-body-font-size:1.0625rem;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.6;
  --bs-body-color:var(--ink);
  --bs-body-color-rgb:22,32,46;
  --bs-body-bg:var(--paper);
  --bs-body-bg-rgb:238,241,244;
  --bs-border-color:var(--rule);
  --bs-tooltip-bg:var(--ink);
  --bs-tooltip-color:var(--paper);
  --bs-tooltip-font-size:.85rem;
}
/* ---------- Dark theme (toggled with the button, or follows the OS) ---------- */
:root[data-bs-theme="dark"]{
  --paper:#0C1424;
  --ink:#E8EDF3;
  --muted:#93A0B2;
  --rule:#25314A;
  --surface:#15203A;
  --tint-rgb:12,20,36;
  --hover-tint:rgba(255,255,255,.08);
  --active-tint:rgba(255,255,255,.12);
  --contact-bg:#070C17;--contact-fg:#E8EDF3;--footer-fg:#7D8AA0;
  --ui:#5A73FF;--ui-edge:#3A52E0;
  --bs-body-color-rgb:232,237,243;
  --bs-body-bg-rgb:12,20,36;
}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
a{color:inherit}
:focus-visible{outline:3px solid var(--ui);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline:3px solid var(--ui);outline-offset:3px;box-shadow:none}

/* Bootstrap's .container: same width and padding as the original design */
.container{max-width:1120px;--bs-gutter-x:clamp(40px,10vw,96px)}
.block{padding-block:clamp(56px,9vw,112px)}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.03em}
h2{font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.1;font-weight:700}

/* ---------- Buttons: Bootstrap .btn restyled via its CSS variables ---------- */
.btn{
  --bs-btn-padding-x:22px;--bs-btn-padding-y:12px;
  --bs-btn-font-size:1.0625rem;--bs-btn-font-weight:600;--bs-btn-line-height:1.6;
  --bs-btn-border-width:2px;--bs-btn-border-radius:999px;
}
.btn-dark{
  --bs-btn-color:var(--paper);--bs-btn-bg:var(--ink);--bs-btn-border-color:var(--ink);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--ui);--bs-btn-hover-border-color:var(--ui);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--ui);--bs-btn-active-border-color:var(--ui);
}
.btn-outline-dark{
  --bs-btn-color:var(--ink);--bs-btn-border-color:var(--ink);
  --bs-btn-hover-color:var(--paper);--bs-btn-hover-bg:var(--ink);--bs-btn-hover-border-color:var(--ink);
  --bs-btn-active-color:var(--paper);--bs-btn-active-bg:var(--ink);--bs-btn-active-border-color:var(--ink);
}

/* ---------- Hero ---------- */
.hero-bg{position:relative;isolation:isolate;background-color:var(--paper)}
.hero{padding-block:clamp(40px,7vw,88px)}
.hero-row{
  --bs-gutter-x:clamp(24px,5vw,72px);--bs-gutter-y:40px;
  min-height:calc(min(92vh,860px) - 2 * clamp(40px,7vw,88px));
}
@media (max-width:991.98px){.hero-row{min-height:0}}
h1{font-size:clamp(3.4rem,10.5vw,8.25rem);line-height:.9;font-weight:700;letter-spacing:-.05em}
.tagline{max-width:34ch;margin:28px 0 0;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45;color:var(--muted)}
.actions{gap:12px;margin-top:32px}

/* ---------- The stack ---------- */
.stack-wrap{gap:20px}
.stack{
  position:relative;--size:clamp(190px,30vw,290px);--step:clamp(58px,8vw,92px);
  height:calc(var(--step) * 2 + var(--size) * .71 + 70px);perspective:1400px;
}
.slab{
  --c:var(--c0);--edge:var(--e0);
  position:absolute;left:50%;top:calc(var(--row) * var(--step) - var(--size) * .145 + 36px);
  width:var(--size);height:var(--size);margin-left:calc(var(--size) / -2);
  border-radius:22px;background:var(--c);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.4);
  transform-style:preserve-3d;
  transform:rotateX(60deg) rotateZ(-40deg) translateZ(var(--lift,0px));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),background-color .3s;
  animation:drop .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--delay);
}
.slab::before,.slab::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--edge);transform:translateZ(-8px);transition:background-color .3s}
.slab::after{transform:translateZ(-16px)}
.slab.on{--lift:34px}
.stack[data-active] .slab:not(.on){--c:color-mix(in srgb,var(--c0) 28%,var(--paper));--edge:color-mix(in srgb,var(--e0) 28%,var(--paper))}
@keyframes drop{from{translate:0 -70px;opacity:0}}

/* Layer buttons (Bootstrap .btn-outline-dark + our pressed colours) */
.layer-btn{
  --bs-btn-padding-x:8px;--bs-btn-padding-y:12px;--bs-btn-border-radius:12px;
  --bs-btn-font-size:1rem;--bs-btn-line-height:1.5;
  --bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--hover-tint);--bs-btn-hover-border-color:var(--ink);
  --bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--active-tint);--bs-btn-active-border-color:var(--ink);
}
.layer-btn[aria-pressed="true"][data-k="ui"]  {background-color:var(--ui);  border-color:var(--ui);  color:var(--on-ui)}
.layer-btn[aria-pressed="true"][data-k="api"] {background-color:var(--api); border-color:var(--api); color:var(--on-api)}
.layer-btn[aria-pressed="true"][data-k="data"]{background-color:var(--data);border-color:var(--data);color:var(--on-data)}

.panel{min-height:8.5rem;color:var(--muted)}
.panel strong{color:var(--ink);font-family:var(--display);font-size:1.25rem;letter-spacing:-.02em;font-weight:700}
.panel p{margin:4px 0 12px}
.chips li{font-size:.95rem;color:var(--ink);background-color:var(--surface)}

/* ---------- Work (Bootstrap .list-group-flush) ---------- */
.section-head{gap:8px 32px;margin-bottom:32px}
.section-head p{margin:0;color:var(--muted);max-width:44ch}
.projects{
  --bs-list-group-bg:transparent;--bs-list-group-color:var(--ink);
  --bs-list-group-border-color:var(--rule);
  --bs-list-group-item-padding-x:12px;--bs-list-group-item-padding-y:28px;
  margin:0;border-top:2px solid var(--ink);
}
.project{gap:8px 32px;transition:opacity .3s,background-color .2s}
.projects>.project:last-child{border-bottom-width:1px}
.project:hover{background-color:var(--surface)}
.projects[data-active] .project:not(.match){opacity:.35}
.project h3{font-size:1.5rem;font-weight:700;line-height:1.2}
.project p{margin:6px 0 0;color:var(--muted);max-width:56ch}
.meta{gap:20px}
.pips{gap:6px}
.pip{width:16px;height:16px;border-radius:5px;border:2px solid var(--rule)}
.pip.ui{background:var(--ui);border-color:var(--ui)}
.pip.api{background:var(--api);border-color:var(--api)}
.pip.data{background:var(--data);border-color:var(--data)}
.pip.hi{outline:2px solid var(--ink);outline-offset:2px}
.project .links{gap:16px;font-weight:600}
.project .links a{text-underline-offset:4px}

/* ---------- Experience ---------- */
.roles{margin:0;padding:0 0 0 28px;list-style:none;border-left:2px solid var(--ink)}
.role{position:relative;gap:4px 32px;padding-bottom:36px}
.role::before{content:"";position:absolute;left:-35px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.role:first-child::before{background:var(--ui);border-color:var(--ui)}
.role time{color:var(--muted);font-weight:500;padding-top:2px}
@media (min-width:768px){.role time{flex:0 0 150px}}
.role h3{font-size:1.25rem;font-weight:700}
.role p{margin:4px 0 0;color:var(--muted);max-width:56ch}

/* ---------- Contact + footer ---------- */
.contact{background:var(--contact-bg);color:var(--contact-fg)}
.contact h2{font-size:clamp(2.4rem,7vw,5.5rem);line-height:.95;letter-spacing:-.045em}
.contact .mail{display:inline-block;margin-top:28px;font:700 clamp(1.25rem,3vw,2rem)/1.2 var(--display);letter-spacing:-.02em;text-underline-offset:8px;text-decoration-thickness:3px;text-decoration-color:var(--data)}
.contact .mail:hover{text-decoration-color:var(--api)}
.social{margin:32px 0 0;padding:0;gap:8px 28px}
.social a{text-underline-offset:4px}
.contact :focus-visible{outline-color:var(--data)}
footer{background:var(--contact-bg);color:var(--footer-fg);padding:0 0 32px;font-size:.9rem}

/* ---------- Photo + background image ---------- */
.photo{display:block;width:clamp(88px,12vw,124px);aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:24px;box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--ui)}
/* The tint (--bg-overlay) keeps text readable; lower it to show more of the image */
.has-bg .hero-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(var(--tint-rgb),0) 50%,var(--paper) 100%),                                 /* melts into the page */
    linear-gradient(to right,rgba(var(--tint-rgb),.6) 0%,rgba(var(--tint-rgb),0) 70%),                        /* keeps the text side readable */
    linear-gradient(rgba(var(--tint-rgb),var(--bg-overlay,.86)),rgba(var(--tint-rgb),var(--bg-overlay,.86))), /* overall tint */
    var(--bg-image) center top/cover no-repeat;
}
.has-bg-page body{background:linear-gradient(rgba(var(--tint-rgb),var(--bg-overlay,.86)),rgba(var(--tint-rgb),var(--bg-overlay,.86))),var(--bg-image) center/cover no-repeat}
.has-bg-page .hero-bg{background:none}
@media (min-width:992px){.has-bg-page body{background-attachment:fixed}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slab{animation:none;transition:none}
  *{transition-duration:.01ms!important}
}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  position:fixed;z-index:1030;
  top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));
  width:44px;height:44px;padding:0;display:grid;place-items:center;
  --bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-width:2px;
  background-color:var(--surface);
}
:root[data-bs-theme="dark"] .icon-moon{display:none}
:root:not([data-bs-theme="dark"]) .icon-sun{display:none}

/* Phones: leave room above the headline for the theme button */
@media (max-width:575.98px){ .hero{padding-top:76px} }