/* ==============================
   Global stylesheet — Sumit M Pujar
   ============================== */

/* Font */
@font-face{
  font-family:'League Spartan';
  src:url('fonts/LeagueSpartan-VariableFont_wght.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* Tokens */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:#c6c6c6;
  --max:1100px;

  /* header height (approx; used to push content below fixed header) */
  --header-h: 84px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'League Spartan', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.5;

  /* keep content below the fixed header */
  padding-top: var(--header-h);
}

a{ color:var(--fg); text-decoration:none; }
a:hover{ opacity:.85; }

/* ==============================
   Header (fixed, solid black)
   ============================== */

/* The element injected by include-header.js has class "site-header" */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:#000;                              /* ← always solid black */
  color:var(--fg);
  padding:16px 24px;
  /* add safe-area breathing room on iOS */
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
  box-shadow:0 1px 0 rgba(255,255,255,0.06);    /* subtle divider line */
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Inner layout from your header.html */
.site-header > .header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;          /* brand | spacer | nav */
  align-items:center;
  gap:28px;
}

/* Brand block: two rows sharing width */
.brand-group{
  display:inline-grid;
  grid-auto-flow:row;
  justify-items:stretch;
  align-items:start;
  width:max-content;
  min-width:0;
}
.brand, .tagline{ width:100%; margin:0; text-align:left; }

.brand{
  font-weight:400;
  letter-spacing:.02em;
  font-size:clamp(24px,3.2vw,34px);
  line-height:1;
}

.tagline{
  margin-top:6px;
  font-weight:300;
  color:var(--fg);
  letter-spacing:.18em;
  font-size:clamp(12px,1.6vw,16px);
  white-space:nowrap;
}

/* Nav pinned right */
.nav{
  justify-self:end;
  display:flex;
  gap:24px;
  white-space:nowrap;
}
.nav a{ display:inline-block; }
.nav .active{ opacity:.6; }

/* Phones: center header content & account for taller safe-area */
@media (max-width:560px){
  :root{ --header-h: calc(84px + env(safe-area-inset-top, 0px)); }

  .site-header > .header-inner{
    grid-template-columns:1fr;
    justify-items:center;
    row-gap:10px;
  }
  .brand-group{
    justify-items:center;
    text-align:center;
    width:100%;
  }
  .brand, .tagline{ text-align:center; }
  .nav{ justify-self:center; }
}

/* ==============================
   Page containers
   ============================== */
.container{ max-width:var(--max); margin:40px auto; padding:0 24px; }
.container.narrow{ max-width:1100px; }
.container.full{ max-width:none; margin:0; padding:0; }

/* ==============================
   Index grid tiles
   ============================== */
.grid{
  display:flex;
  flex-direction:column; /* stacked list */
  gap:0;
}

.tile{ position:relative; }
.tile img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:0;
  transition:filter .25s ease;
}

/* Over-image label (desktop baseline) */
.tile .label{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-weight:700;
  font-size:24px;
  color:#fff;
  z-index:2;
  opacity:0;
  transition:opacity .2s;
  white-space:nowrap;       /* single line by default */
  text-align:center;
}
.tile:hover img{ filter:brightness(40%); }
.tile:hover .label{ opacity:1; }

/* Phone: nicer wrapping/centering for labels (homepage only) */
@media (max-width:640px){
  .homepage .tile .label{
    white-space:normal;
    line-height:1.25;
    max-width:14ch;
    margin:0 auto;
    text-wrap:balance;
  }
}

/* ==============================
   CV page
   ============================== */
.cv-section h2{
  margin:28px 0 14px;
  font-weight:700;
  color:var(--fg);
  font-size:clamp(22px,2.2vw,30px);
  letter-spacing:.01em;
}

.cv-list{ list-style:none; margin:0; padding-left:0; }
.cv-list li{ margin:18px 0 22px; }

.cv-title{
  color:var(--fg);
  font-weight:800;
  font-size:clamp(18px,2vw,26px);
  line-height:1.25;
}
.cv-role{
  color:var(--fg);
  margin-top:6px;
  font-weight:400;
  font-size:clamp(16px,1.7vw,22px);
  line-height:1.35;
  opacity:.95;
}

/* ==============================
   Work page header (per‑project)
   ============================== */
.project-head{ margin:10px 0 18px; }

.project-title{
  font-size:clamp(28px,4vw,40px);
  line-height:1.1;
  margin:0;
}
.project-title em{
  font-style:normal;
  font-weight:400;
  opacity:1;
  color:var(--fg);
}

.project-meta{
  margin-top:8px;
  color:var(--fg);
  font-size:clamp(16px,1.6vw,22px);
  letter-spacing:.02em;
}
.project-roles{
  margin-top:12px;
  font-weight:600;
  letter-spacing:.02em;
  font-size:clamp(18px,1.8vw,26px);
  color:var(--fg);
}

/* ==============================
   Hero media (image/video)
   ============================== */
.project-hero img,
.project-hero video,
.project-hero .plyr,
.project-hero .plyr--video{
  width:100%;
  max-width:100%;
  border-radius:12px;
  display:block;
  margin:8px 0 16px;
}

/* Wider work pages on desktop */
@media (min-width:900px){
  .container.narrow{ max-width:1200px; }
}

/* Phone sanity for videos */
@media (max-width:640px){
  .project-hero video,
  .project-hero .plyr,
  .project-hero .plyr--video{
    width:100%;
    margin-left:0;
  }
}

/* ==============================
   Project pagination
   ============================== */
.project-nav{
  display:flex;
  justify-content:space-between;
  margin-top:2rem;
}
.project-nav a{
  background-color:rgba(255,255,255,.1);
  padding:.5rem 1rem;
  font-weight:700;
  border-radius:4px;
  color:#fff;
  transition:background-color .3s;
}
.project-nav a:hover{ background-color:rgba(255,255,255,.3); }

/* ==============================
   Connect page (reuses footer icons)
   ============================== */
.connect-page{ text-align:center; margin-top:72px; }
.connect-title{
  font-size:clamp(36px,7vw,80px);
  font-weight:800;
  margin:0;
  color:var(--fg);
}

/* Pull the shared footer up and remove its divider */
.connect-page + #site-footer{
  margin-top:10px;
  padding-top:10px;
  border-top:none;
}
.connect-page + #site-footer .social{ gap:24px; }
.connect-page + #site-footer .social a{ font-size:44px; }

/* Mobile tweaks for connect */
@media (max-width:560px){
  .connect-page{ margin-top:56px; }
  .connect-page + #site-footer .social{ gap:20px; }
  .connect-page + #site-footer .social a{ font-size:40px; }
}

/* ==============================
   Footer (shared)
   ============================== */
.site-footer{
  border-top:none;
  padding:12px 24px;
  margin-top:20px;
  text-align:center;
}
.site-footer .social{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:8px;
}
.site-footer .social a{
  font-size:36px;
  color:var(--fg);
  transition:opacity .2s ease;
}
.site-footer .social a:hover{ opacity:.8; }