@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap");


/* ===========================
   Theme + base (keep your colorway)
   =========================== */
:root{
  --navy: #2B4167;
  --navy-deep: #000f4b;
  --bg: #FAF8F1;
  --ink: #19222d;
  --stroke: #e8e8ef;
  --shadow: 0 10px 24px rgba(0,0,0,.08);

  --cover-ratio: 16/9;  /* top cover */
  --shot-ratio: 16/9;  /* grid items */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 "Teachers", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Remove default figure spacing everywhere */
figure { margin: 0; padding: 0; }

/* ===================== */
/* Floating Sticky Navbar */
/* ===================== */
/* Defaults / design tokens for pills + ring */
.rounded-navbar{
  --pill-pad-y: .45rem;
  --pill-pad-x: .80rem;
  --pill-font: .95rem;
  --gap: .35rem;
  --icon: 1rem;

  --ring-width: 2px;       /* ring thickness */
  --ring-offset: -6px;     /* how far ring sits outside the pill */

  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-8px); /* slide in from top when shown */
  background: #000f4b;
  padding: 1vh 2vw;
  border-radius: 0 0 18px 18px; /* square top corners */
  z-index: 9999;

  opacity: 0;                     /* hidden on hero */
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* visible state after leaving the landing/hero */
.rounded-navbar.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* inner layout */
.rounded-navbar .nav{
  display: flex;
  gap: var(--gap);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* link pills */
.rounded-navbar .nav-link{
  position: relative;
  color:#fff !important;
  background: transparent;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border-radius:999px;
  font:600 var(--pill-font)/1 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-decoration:none;
  transition: background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  outline: none;
  border: none;
}
.rounded-navbar .nav-link i{ font-size: var(--icon); }

/* Soft hover tint (no layout change) */
.rounded-navbar .nav-link:hover{
  background: rgba(255,255,255,.12);
}

/* White ring — single source of truth (no size change) */
.rounded-navbar .nav-link::after{
  content: "";
  position: absolute;
  inset: var(--ring-offset);       /* expands outside pill without changing layout */
  border: var(--ring-width) solid #fff;
  border-radius: 9999px;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

/* Current page */
.rounded-navbar .nav-link.active::after,
.rounded-navbar .nav-link[aria-current="page"]::after{
  opacity: 1;
  transform: scale(1);
}

/* Always-visible variant for pages without hero/snap-scroll */
.rounded-navbar.always-on{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}


/* ====== Responsive tweaks ====== */
@media (min-width:1200px) and (max-width:1920px){
  .rounded-navbar{
    padding: 1.2rem 1.6rem;
    --pill-pad-y: .45rem;
    --pill-pad-x: .85rem;
    --pill-font: .95rem;
    --icon: 1.05rem;
  }
}


/* Tablet: widen bar + center contents + slightly smaller pills */
@media (min-width:768px) and (max-width:1200px){
  .rounded-navbar{
    width: min(60vw, 1100px);
    padding: 0.8rem 1.2rem;
    box-sizing: border-box;
    display: flex;
    --pill-pad-y: .40rem;
    --pill-pad-x: .70rem;
    --pill-font: .90rem;
    --icon: .95rem;
    --ring-offset: -1px; /* ring sits a bit tighter */
  }
  .rounded-navbar .nav{
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
  }
}

/* Phones: make the bar a bit wider and keep contents centered */
@media (max-width:768px){
  .rounded-navbar{
    width: min(60vw, 620px);   /* ⬅️ wider on phones */
    padding: .5rem .8rem;
    box-sizing: border-box;
    display: flex;

    /* keep your existing token tweaks */
    --pill-pad-y: .35rem;
    --pill-pad-x: .60rem;
    --pill-font: .85rem;
    --icon: .9rem;
    --gap: .25rem;
    --ring-offset: -5px;
  }
  .rounded-navbar .nav{
    width: 100%;
    justify-content: center;   /* center links inside the wider bar */
    flex-wrap: nowrap;
  }
}

/* Very small phones: stretch a touch more, hide labels if needed */
@media (max-width:500px){
  .rounded-navbar{ width: 60vw; }
  .rounded-navbar .nav-link span{ display:none; }
  .rounded-navbar .nav{gap:1.2rem;}
}

/* ===========================
   Unified Page Hero (contact baseline)
   =========================== */
.page-hero{
  background:#2B4167;              /* same as Contact */
  height:220px;                    /* contact baseline */
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:5vh;                 /* headroom for fixed navbar */
  text-align:center;
}

.page-hero__title{
  font-family:'Alfa Slab One', serif;
  color:#fff;
  font-weight:400;
  letter-spacing:.5px;
  font-size: clamp(32px, 6vw, 80px); /* same feel as Contact */
  margin:0;
  line-height:1;
}

/* Optional: actions row under the title (e.g., resume social buttons) */
.page-hero__inner{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.page-hero__actions{ display:flex; gap: clamp(10px, 1.8vw, 24px); }

/* 1080p-ish refinement (kept from your contact.css) */
@media (max-width:1920px){
  .page-hero__title{ font-size:64px; }
}

/* 4K upscale (kept from your contact.css) */
@media (min-width:3840px){
  .page-hero{ height:400px; }
  .page-hero__title{ font-size:140px; }
}

@media (max-width: 640px){
  .page-hero{ height: 180px; padding-top: 4vh; }
  .page-hero__title{ font-size: 48px; }
}

/* ===========================
   Layout wrapper (narrow, like your earlier page)
   =========================== */
.proj-wrap{ width:min(40vw, 1100px); margin: 24px auto 80px; }

/* Cover image (center-cropped, no radius) */
.project-media{
  width:100%; aspect-ratio: var(--cover-ratio);
  margin: 0 0 36px 0; box-shadow: var(--shadow);
  overflow:hidden; border-radius:0; background:#eef2ff;
}
.project-media img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 50%;
  border-radius:0 !important;
}

/* ===========================
   Meta two-column
   =========================== */
.meta-grid{ margin: 10px 0 46px; display: flex; justify-content: center;}
.meta{
  display:grid; grid-template-columns: 180px 1fr; gap: 8px 24px;  margin: 0 auto; max-width: 50vw; align-items: start;
}
.meta .row{ display:contents; }
.meta dt{
  color:#1F2937; letter-spacing:4px; font-size: clamp(16px, 1.2vw, 20px); line-height: 2.0;
}
.meta dd{ margin:0; color: #1F2937; font-size: clamp(16px, 1.2vw, 20px) ; display: flow-root; line-height: 2.0; }
.meta dd > :first-child { margin-top: 0; }
.meta dd ul { margin: 0; padding-left: 1rem; }
.meta dd li { margin: .25rem 0; line-height: inherit; }
.meta dd li:first-child { margin-top: 0; }
.meta a{ color:#1f3bb6; text-decoration:none; }
.meta a:hover{ text-decoration: underline; }
.meta ul{ margin:0; padding-left: 1rem; }
.meta li{ margin:.25rem 0; }

@media (max-width: 760px){
  .meta{ grid-template-columns: 1fr; }
  .meta dt{ margin-top: 6px; }
}

/* ===========================
   Screenshots grid (uniform, crop center)
   =========================== */
.screens-title{
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;               /* space inside the ring */
  font-weight: 700;
  letter-spacing:4px;
  font-size: clamp(16px, 1.2vw, 20px);
  text-transform: uppercase;       /* API SCREENSHOTS */
  color: #00135c;
  border: 2px solid #00135c;       /* the ring */
  border-radius: 999px;            /* pill ring */
  background: transparent;         /* or #fff if you want a chip */
}

.screen-grid{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 1vw, 1rem);
  padding-bottom: 10vh;
}
@media (max-width: 900px){ .screen-grid{ grid-template-columns: repeat(2, 1fr); } }

.screen{
  aspect-ratio: var(--shot-ratio);
  border: 1px solid var(--stroke);
  background:#fff; overflow:hidden; box-shadow: var(--shadow);
  position:relative; cursor: zoom-in; border-radius:0;
}
.screen img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 50%;
  user-select:none; -webkit-user-drag:none; border-radius:0 !important;
}


/* ===========================
Return to Projects – floating link
   =========================== */

.return-fab{
  position: fixed;
  left: clamp(24px, 4vw, 48px);
  bottom: calc(2vh + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: .02em;
  z-index: 9997; /* below your lightbox (99999) */
}

.return-fab__icon{
  width: 34px; height: 34px; min-width: 34px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  line-height: 0; /* keep icon snug in the circle */
  font-size: 14px;
}

.return-fab__label{
  font-family: "Teachers", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.return-fab:hover .return-fab__icon{
  transform: translateX(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

.return-fab:focus-visible{
  outline: 3px solid #c7cce4;
  outline-offset: 4px;
  border-radius: 999px;
}

@media (max-width: 520px){
  .return-fab__label{ font-weight: 700; }
}


/* ===========================
   Lightbox
   =========================== */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; place-items:center; z-index:99999; }
.lightbox.open{ display:grid; }

.lb-stage{
  width: min(92vw, 1400px);
  height: min(88vh, 900px);
  display:grid; grid-template-rows: 1fr auto; gap: 10px; position:relative;
}
.lb-figure{
  position:relative; overflow:hidden; background:#0b1022;
  border:1px solid rgba(255,255,255,.18); border-radius:0;
}
.lb-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:transparent; border-radius:0 !important;
}
.lb-ui{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:#fff; font:600 14px/1 "Montserrat", system-ui, sans-serif; opacity:.95;
}
.lb-btn{
  appearance:none; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; padding:10px 14px;
  border-radius:999px; transition: transform .12s ease, background .12s ease;
  font-weight:800; letter-spacing:.02em;
}
.lb-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.22); }
.lb-close{
  position:absolute; top:10px; right:10px; width:42px; height:42px;
  display:grid; place-items:center; border-radius:999px; font-size:22px; line-height:1;
}
.lb-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.lb-arrow{
  pointer-events:auto; width:48px; height:48px; margin:0 8px;
  border-radius:999px; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:22px; display:grid; place-items:center;
  cursor:pointer; transition: background .12s ease, transform .12s ease;
}
.lb-arrow:hover{ background:rgba(255,255,255,.24); transform:translateY(-1px); }


/* ============================
   Tablet (641–1400px)
   ============================ */
@media (min-width: 768px) and (max-width: 1400px){
  /* Layout width + rhythm */
  .proj-wrap{
    width: min(88vw, 980px);
    margin: 20px auto 72px;
  }

  .project-media{ margin-bottom: 28px; }

  /* Meta block stays 2-column but with tighter gutters */
  .meta-grid{ margin: 6px 0 40px; }
  .meta{
    max-width: 86vw;
    grid-template-columns: 140px 1fr;
    gap: 6px 18px;
  }
  .meta dt{ letter-spacing: 3px; line-height: 2.2; }
  .meta dd{ line-height: 2.2; }

  /* Screens */
  .screens-title{
    font-size: clamp(14px, 1.6vw, 18px);
    letter-spacing: .2em;
  }
  .screen-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: clamp(10px, 2.4vw, 20px);
  }

  /* Return button nudge */
  .return-fab{
    left: clamp(16px, 3vw, 32px);
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ============================
   Phones (≤640px)
   ============================ */
@media (max-width: 640px){
  /* Layout width + spacing */
  .proj-wrap{
    width: 92vw;
    margin: 16px auto 56px;
  }
  .project-media{
    aspect-ratio: 16 / 9;
    margin-bottom: 24px;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }

  /* Meta goes single-column and tighter type */
  .meta-grid{ margin: 2px 0 32px; }
  .meta{
    max-width: 80vw;
    gap: 4px 0;
  }
  .meta dt{
    font-size: clamp(12px, 3.6vw, 14px);
    letter-spacing: 2px;
    line-height: 1.4;          /* align to the top nicely */
  }
  .meta dd{
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.55;
  }
  .meta dd ul{ padding-left: 1rem; }
  .meta dd li{ margin: 2px 0; }

  /* Screens — one column */
  .screens{ margin-top: 4px; }
  .screens-title{
    display: inline-block;
    font-size: clamp(12px, 3.6vw, 14px);
    letter-spacing: .16em;
    padding: 4px 10px;
    border-width: 1.5px;
  }
  .screen-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .screen{ aspect-ratio: 16 / 9; }

  /* Return button scale */
  .return-fab{
    left: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: .5rem;
  }
  .return-fab__icon{ width: 30px; height: 30px; font-size: 13px; }
  .return-fab__label{ font-size: 13px; }
}

/* ============================
   Tiny phones (≤400px): icon-only
   ============================ */
@media (max-width: 400px){
  .return-fab__label{ display: none; }
  .return-fab__icon{ width: 36px; height: 36px; }
}

/* ============================
   Lightbox responsiveness
   ============================ */
@media (max-width: 640px){
  .lb-stage{ width: 96vw; height: 82vh; }
  .lb-arrow{ width: 40px; height: 40px; font-size: 20px; }
  .lb-close{ width: 36px; height: 36px; font-size: 20px; }
}