/* ===== SHANA PORTFOLIO – PROJECT PAGE STYLES ===== */
/* Using Typekit-hosted URW DIN font */
@import url('https://use.typekit.net/dac3dnr.css');

:root {
  --page-max: 1200px;
  --content-max: 1200px;
  --outer-pad: 24px;
  --gap: 24px;
  --gap-lg: 32px;
  --pad: 24px;
  --topbar-h: 48px; /* Top nav height */

  /* BRAND COLORS */
  --bg: #000000;          /* Deep black background */
  --ink: #F5F5F7;         /* Off-white primary text */
  --accent: #9B5DE5;      /* Violet accent */
  --muted: #86868B;       /* Muted gray text */
  --rule: rgba(245,245,247,0.15); /* subtle divider */

  /* Typography (pt → px exact values per your spec) */
  --h1-d: 112px;   /* 112pt desktop */
  --h1-t: 80px;    /* 80pt tablet */
  --h1-m: 56px;    /* 56pt mobile */
  --body-dt: 24px; /* 24pt desktop/tablet */
  --body-m: 19px;  /* 19pt mobile */
}

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

body {
  margin: 0;
  font-family: 'urw-din', DIN, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.35;
  padding-top: var(--topbar-h); /* keep content clear of fixed topbar */
}

/* ===== LAYOUT ===== */
.page { 
  display: grid;
  grid-template-columns: 1fr min(var(--content-max), calc(100% - 2 * var(--outer-pad))) 1fr;
  padding: 40px var(--outer-pad) 120px;
}
.page > * { grid-column: 2; }

/* Top navigation bar */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: #000000; /* explicit per spec */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2em;   /* right padding per spec */
  z-index: 1000;
}

/* Two square image links on the right */
.topbar__links { display: flex; gap: 10px; }     /* 10px gutter */
.topbar__icon { width: 32px; height: 32px; display: inline-flex; }
.topbar__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Header & type */
header { margin-bottom: var(--gap-lg); }

h1 { 
  font-weight: 700; 
  line-height: 0.9; 
  margin: 0 0 8px; 
  font-size: var(--h1-d); 
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-top: 1em;
}

h2 { 
  font-weight: 700; 
  line-height: 1.1; 
  margin: 0 0 8px; 
  font-size: var(--h1-m); 
  letter-spacing: -0.02em;
  color: var(--ink);
}

.link
  a { text-decoration: none; color: var(--ink); }
  a:hover { color: var(--accent); }

.subnav { 
  display:flex; 
  gap:12px; 
  align-items:center; 
  color: var(--muted); 
  font-size: 14px;
}

/* ===== UTILITIES ===== */
.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stack { display: grid; gap: var(--gap); }

.rule { height: 1px; background: var(--rule); margin: var(--gap-lg) 0; }

.eyebrow { 
  text-transform: uppercase; 
  letter-spacing: 0.08em; 
  font-size: 12px; 
  color: var(--muted);
  padding-top: 5em;
  padding-bottom: 0.5em;
}

/* ===== TYPOGRAPHY ===== */
p { margin: 0; padding-bottom: 1em; font-size: var(--body-dt); font-weight: 400; color: var(--ink); }
.meta { color: var(--muted); font-size: 14px; }

/* ===== MEDIA BOXES ===== */
figure { margin: 0; } /* Remove default margins to align media perfectly */



.media-box-tall { 
  position: relative; 
  background: rgba(155,93,229,0.08); 
  width: 100%; 
  border-radius: 12px; 
  overflow: hidden; 
  aspect-ratio: 9 / 36.96;
  border: 1px solid rgba(245,245,247,0.1);
}

.media-box-userflow { 
    position: relative; 
    background: rgba(155,93,229,0.08); 
    width: 100%; 
    border-radius: 12px; 
    overflow: hidden; 
    aspect-ratio: 9 / 12.59;
    border: 1px solid rgba(245,245,247,0.1);
  }

.media-box-userflow > img,
.media-box-userflow > video,
.media-box-tall > img,
.media-box-tall > video { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

.media-box { 
  position: relative; 
  background: rgba(155,93,229,0.08); 
  width: 100%; 
  border-radius: 12px; 
  overflow: hidden; 
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(245,245,247,0.1);
}
.media-box > img,
.media-box > video { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}
.caption { margin-top: 6px; font-size: 12px; color: var(--muted); }


/* ===== BUTTONS ===== */
/* ===== CTA BUTTON ===== */
.cta-btn {
  display: inline-block;
  font-size: var(--body-dt);   /* matches established body size */
  font-weight: 400;
  font-family: inherit;
  color: var(--ink);            /* text color on default = black background */
  background: transparent;
  border: 2px solid var(--ink);  /* #f5f5f7 outline */
  border-radius: 12px;
  padding: 12px 28px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: all 0.3s ease;
  margin: 1em 0 1.5em 0;

  /* NEW */
  max-width: 200px;
  width: 100%;          /* allows it to shrink on mobile, but never exceed 200px */
  text-align: center;   /* keeps label centered */
}

/* Hover state */
.cta-btn:hover {
  background: var(--muted);
  color: var(--ink);
  border-color: var(--muted);
}

/* Active state */
.cta-btn:active {
  background: var(--rule);
  color: var(--ink);
  border: none;
}






/* ===== SECTION LAYOUT ===== */
.header-row { display: grid; gap: var(--gap); grid-template-columns: 2fr 1fr; align-items: end; }



.about { 
  display:grid; 
  grid-template-columns: 1fr 2fr; 
  gap: var(--gap-lg); 
  align-items: start; 
}
.about > *:first-child { 
  justify-self: start; /* pins copy to left grid line */
  margin: 0; 
}

.robots { grid-template-columns: repeat(2, 1fr); }
.social { grid-template-columns: repeat(3, 1fr); }
.immersive { grid-template-columns: repeat(2, 1fr); }

/* ===== PROJECT NAVIGATION (bottom) ===== */
.project-nav {
  position: fixed; 
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.9);
  border-top: 1px solid rgba(155,93,229,0.3);
  display: grid; 
  grid-template-columns: 1fr auto 60px; 
  align-items: center;
  padding: 14px var(--pad);
}
.nav-btn { 
  justify-self: start; 
  appearance: none; 
  border: none; 
  background: none; 
  padding: 10px; 
  cursor: pointer; 
  border-radius: 10px; 
  color: var(--accent);
  transition: transform 0.2s ease, color 0.3s ease;
}
.nav-btn:hover { 
  color: var(--ink);
  transform: translateY(-2px);
}
.nav-btn--next { justify-self: end; }
.nav-label { font-weight: 700; color: var(--ink); letter-spacing: 0.05em; margin-right: 10px; }
.nav-btn svg { width: 28px; height: 28px; }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  h1 { font-size: var(--h1-t); }
  p { font-size: var(--body-dt); }
  .header-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  h1 { font-size: var(--h1-m); }
  p { font-size: var(--body-m); }
  .about, .robots, .social, .immersive, .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .page { padding-bottom: 140px; }
}