/* styles.css */

/* =========================
   TOKENS
========================= */
:root{
  /* Color */
  --text:#111418;
  --muted:rgba(17,20,24,.72);
  --muted-strong:rgba(17,20,24,.82);
  --line:rgba(17,20,24,.16);
  --line-strong:rgba(17,20,24,.28);

  --accent:#1f4bd8;
  
  --pink:#ff4fd8;
  --blue:#3aa0ff;
  --yellow:#ffd84a;
  --green:#45f0a8;
  --purple:#8b5cff;

  /* Nav-specific neutrals (grayscale) */
  --nav-accent: rgba(17,20,24,.78);   /* neutral “active” indicator */
  --nav-wash: rgba(17,20,24,.04);     /* neutral active/hover wash */
  --nav-ring: 0 0 0 3px rgba(17,20,24,.18);

  /* Surfaces */
  --paper: rgba(255,255,255,.78);

  /* Chrome background (single token) */
  --bg:
    radial-gradient(1200px 900px at 20% -10%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgba(255,255,255,.65), transparent 60%),
    linear-gradient(135deg,
      #f8f8f8 0%,
      #d9d9d9 18%,
      #ffffff 32%,
      #bfc0c2 52%,
      #f2f2f2 72%,
      #c9c9c9 88%,
      #ffffff 100%
    );

  /* Layout */
  --max: 860px;
  --r: 10px;
  --s1:8px;
  --s2:12px;
  --s3:16px;
  --s4:24px;
  --s5:40px;
  --s6:64px;

  /* Type (base + labels) */
  --base: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial,
          "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --label: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", "Arial", sans-serif;

  /* “Novelty” stacks (installed fonts only) */
  --impact: Impact, Haettenschweiler, "Arial Black", "Segoe UI Black", sans-serif;
  --papyrus: Papyrus, "Bradley Hand", "Comic Sans MS", "Marker Felt", cursive;
  --comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Marker Felt", cursive;
  --script: "Parisienne", "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;

  /* Effects */
  --ring: 0 0 0 3px rgba(31,75,216,.18); /* global ring can stay blue */
  --shadow: 0 14px 32px rgba(0,0,0,.10);
  --blur: blur(10px);

  /* Sticky header clearance (prevents modal touching menu bar) */
  --nav-clearance: 86px;
}

/* =========================
   RESET + BASE
========================= */
*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

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

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; height:auto; display:block; }

/* Subtle “metal grain” overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.014) 0px,
      rgba(0,0,0,.014) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: .28;
}

/* Links */
a{
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}

.container a:not(.btn):hover{ text-decoration: underline; }

/* Focus */
a:focus-visible,
button:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 8px;
}

/* Layout container */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s5) var(--s4);
  position: relative;
  z-index: 1;
}

/* =========================
   ACCESSIBILITY
========================= */
.skip-link{
  position:absolute;
  left:-9999px;
  top:var(--s2);
  background: var(--text);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  z-index:999;
  font-family: var(--label);
}
.skip-link:focus{ left: var(--s4); }

/* =========================
   TYPOGRAPHY
========================= */

h1,h2,h3{
  margin: 0 0 var(--s3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

h1,h2{
  /*macro text styling*/
  font-family: var(--impact);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  color: #fff;
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}

h1 { 
  /* taller */
  transform-origin: center;
  transform: scaleY(1.4) scaleX(1);

  /*hero settings (check) */
  display: flex;
  margin: 0 auto 14px;
  width: 100%;
  padding-bottom: 16px;
}

h3{
  font-size: 1.05rem;
  font-family: var(--base);
  font-weight: 700;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 var(--s3); color: var(--muted); }

.lede{
  font-size: 1.05rem;
  max-width: 74ch;
}

/* =========================
   GLOBAL LAYOUT RHYTHM
========================= */
.section{
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}

/* =========================
   HEADER / NAV
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);

  /* Make header focus ring neutral (no blue glow up here) */
  --ring: var(--nav-ring);
}

.nav{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s1) var(--s4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s3);
}

.brand{
  display:inline-flex;
  align-items:baseline;
  gap: 10px;
  text-decoration:none;
  color: var(--text);
  font-family: var(--base);
  font-weight: 700;
  letter-spacing: .1px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap: var(--s3);
  font-family: var(--label);
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nav-links a{
  color: var(--muted-strong);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}

.nav-links a:hover{
  border-bottom-color: var(--line-strong);
  color: var(--text);
}

.nav-links a[aria-current="page"]{
  color: var(--text);
  border-bottom-color: var(--nav-accent); /* neutral underline, not blue */
}

.nav-toggle{
  display:none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--label);
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 720px){
  .nav-toggle{ display:inline-flex; }

  /* Dropdown panel */
  .nav-links{
    display:none;

    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    min-width: 0;

    flex-direction: column;
    align-items: stretch;
    gap: 0;


    background: rgba(255,255,255,.90);
    backdrop-filter: blur(14px);

    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;

    box-shadow: none;
  }

  .nav-links[data-open="true"]{ display:flex; }

  /* Make mobile links read like desktop: text + underline cue */
  .nav-links a{
    padding: 12px var(--s4);

    color: var(--muted-strong);
    text-decoration: none;

    /* underline language, not pills */
    border-bottom: 1px solid transparent;
  }

  /* subtle separator, but not the “main” visual */
  .nav-links a + a{
    border-top: 1px solid rgba(17,20,24,.08);
  }

  .nav-links a:hover{
    color: var(--text);
    border-bottom-color: var(--line-strong);
    background: transparent;
  }

  .nav-links a:focus-visible{
    box-shadow: var(--nav-ring);
    border-radius: 10px;
    margin: 2px var(--s4);
    padding: 10px calc(var(--s4) - 2px);
  }

  .nav-links a[aria-current="page"]{
    color: var(--text);
    border-bottom-color: var(--nav-accent); /* same as desktop active underline */
    background: transparent;
  }
}

/* =========================
   BUTTONS / ACTIONS
========================= */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: var(--s3);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  color: var(--text);
  text-decoration: none;
  font-family: var(--label);
  letter-spacing: .06em;
  font-weight: 650;
  backdrop-filter: blur(10px);
}

.btn:hover{
  border-color: rgba(17, 20, 24, 0.4);
}

/* =========================
   GRID
========================= */
.grid{ display:grid; gap: var(--s4); align-items: stretch; }
.grid.cols-1{ grid-template-columns: 1fr; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

@media (max-width: 900px){
  .grid.cols-2,
  .grid.cols-3{ grid-template-columns: 1fr; }
}

/* =========================
   CARDS / WORK
========================= */
.card{
  background: var(--paper);
  border: 1px solid rgba(17,20,24,.18);
  border-radius: var(--r);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}

.tile{ padding: var(--s4); }

.work-card{
  padding: 0;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}

.work-thumb{
  display:block;
  border-bottom: 1px solid var(--line);
  background: rgba(17,20,24,.03);
}

.work-thumb img{
  width:100%;
  height: 170px;
  object-fit: cover;
  display:block;
}

.work-body{
  padding: var(--s4);
  display:flex;
  flex-direction:column;
  gap: var(--s2);
  flex: 1;
}

.work-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: var(--s2);
  margin-bottom: var(--s3);
}

.tag{
  font-family: var(--label);
  font-size: .82rem;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: rgba(17,20,24,.78);
  background: rgba(255,255,255,.9);
}

/* =========================
   TEXT STYLING UTILITIES
========================= */
.text-impact{
  font-family: var(--impact);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
}

.text-papyrus{
  font-family: var(--papyrus);
  letter-spacing: .01em;
}

.text-comic{
  font-family: var(--comic);
  letter-spacing: .01em;
}

.text-script{
  font-family: var(--script);
  letter-spacing: .01em;
  font-size: 1.25em;
  line-height: 1.05;
}

.text-clean{
  font-family: var(--label);
  letter-spacing: .01em;
}

/* =========================
   FOOTER
========================= */
.footer{
  border-top: 1px solid var(--line);
  padding: var(--s5) 0 0;
  color: rgba(17,20,24,.62);
  font-family: var(--label);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .92rem;
}

/* =========================
   HERO
========================= */
.hero .lede{
  font-size: 1.1rem;
  max-width: 68ch;
  margin-bottom: 14px;
}

/* =========================
   CLICK POP
========================= */
.click-pop{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.18));
}

@media (prefers-reduced-motion: reduce){
  .click-pop{ display:none; }
}

/* =========================
   MEDIA GRID + TILES
   One system: shared behavior + explicit variants
========================= */

/* ---- GRID ---- */
.media-grid{
  display: grid;
  gap: var(--s4);
  margin-top: var(--s3);
}

/* List layout (Clients/Projects): 1 column */
.media-grid--list{
  grid-template-columns: 1fr;
}

/* Poster layout (Gallery): 3 columns desktop → 2 → 1 */
.media-grid--posters{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
  .media-grid--posters{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ---- TILE (base) ---- */
.media-tile{
  position: relative;
  width: 100%;
  aspect-ratio: var(--tile-aspect, 21 / 9);
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow: hidden;

  box-shadow: var(--shadow);
  cursor: pointer;

  background:
    var(--poster),
    radial-gradient(900px 500px at 10% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(700px 500px at 90% 20%, rgba(255,255,255,.40), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(255,255,255,.12));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  will-change: transform;
}

/* shared hover glaze overlay */
.media-tile::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 20% 8%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 55%);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.media-tile:hover,
.media-tile:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  border-color: rgba(17,20,24,.26);
}

.media-tile:hover::before,
.media-tile:focus-visible::before{
  opacity: 1;
}

/* ---- TILE: normalize link vs button ---- */
.media-tile--link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.media-tile--button{
  display: block;
  padding: 0;
  border: 0;
  background-color: transparent;
  text-align :inherit;
  font: inherit;
}

/* ---- TILE: explicit aspect variants ---- */
.media-tile--wide{ --tile-aspect: 21 / 9; }
.media-tile--poster{ --tile-aspect: 3 / 4; }
.media-tile--square{ --tile-aspect: 1 / 1; }

/* ---- LABEL (hover title for client tiles) ---- */
.media-tile__label{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(12px, 3vw, 24px);
  z-index: 2;
  pointer-events: none;

  font-family: var(--impact);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);

  color: #fff;
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);

  background: transparent;
  border: 0;

  opacity: 1;
  transform: scale(.98);
}

.media-tile:hover .media-tile__label,
.media-tile:focus-visible .media-tile__label{
  transform: scaleY(1.4);
}

/* ---- VIDEO play icon (only for video tiles) ---- */
.media-tile--video::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96, .93);

  width: clamp(64px, 9vw, 96px);
  height: clamp(64px, 9vw, 96px);

  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;

  background: rgba(255,255,255,.92);

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 5.9c0-.9 1-1.4 1.8-.9l9.2 6.1c.7.5.7 1.6 0 2.1l-9.2 6.1c-.8.5-1.8 0-1.8-.9V5.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 5.9c0-.9 1-1.4 1.8-.9l9.2 6.1c.7.5.7 1.6 0 2.1l-9.2 6.1c-.8.5-1.8 0-1.8-.9V5.9z'/%3E%3C/svg%3E") center / contain no-repeat;

  filter: drop-shadow(0 10px 26px rgba(0,0,0,.28))
          drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

.media-tile--video:hover::after,
.media-tile--video:focus-visible::after{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1, .96);
}

/* =========================
   MODAL
========================= */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease;

  display: grid;
  place-items: center;

  padding: calc(var(--nav-clearance) + 12px) 0 12px;
}

.video-modal[aria-hidden="false"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.video-modal__dialog{
  position: relative;
  width: min(980px, 92vw);

  max-height: 100%;
  overflow: auto;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0,0,0,.30);

  padding: var(--s4);
}

.video-modal__top{
  top: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  background: rgba(255,255,255,.0);
}

.video-modal__body{
  display: grid;
  gap: var(--s3);
}

.video-modal__media{
  position: relative;
  max-height: 58vh;
}

.video-modal__player{
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
  background: #000;
  border-radius: 12px;
}

/* Meta block under media (card-ish) */
.video-modal__meta{
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

.video-modal__title{
  margin: 0 0 var(--s2) 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.video-modal__desc{
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
}

.video-modal__desc li{
  margin: .35em 0;
}

/* =========================
   IMAGE GRID
========================= */
.img-grid{
  display: grid;
  gap: var(--s4);
  margin-top: var(--s3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px){
  .img-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.img-thumb{
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255,255,255,.55);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.img-thumb img{
  display: block;
  width: 100%;
  height: auto;
}

.img-thumb:hover,
.img-thumb:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  border-color: rgba(17,20,24,.26);
}

/* =========================
   HERO BANNER
========================= */
.hero-banner{
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);

  background:
    var(--poster),
    radial-gradient(900px 500px at 10% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(700px 500px at 90% 20%, rgba(255,255,255,.40), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(255,255,255,.12));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-banner__title{
  position: absolute;
  inset: 0;
  margin: 0;

  display: grid;
  place-items: center;
  text-align: center;

  padding: clamp(16px, 3vw, 28px);
  z-index: 1;

  color: #fff;
}

/* =========================
   STROKE UTILITIES
========================= */
.stroke-pink   { -webkit-text-stroke-color: var(--pink); }
.stroke-blue   { -webkit-text-stroke-color: var(--blue); }
.stroke-yellow { -webkit-text-stroke-color: var(--yellow); }
.stroke-green  { -webkit-text-stroke-color: var(--green); }
.stroke-purple { -webkit-text-stroke-color: var(--purple); }

.stroke-pink,
.stroke-blue,
.stroke-yellow,
.stroke-green,
.stroke-purple{
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}

/* =========================
   CUSTOM LISTS
========================= */
.bullet-list{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.bullet-list li{
  position: relative;
  padding-left: 1.8em;
  margin: .35em 0;
  line-height: inherit;
}

/* default: emoji/text bullet */
.bullet-list li::before{
  content: var(--b, "•");
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4em;
  text-align: center;
}

/* if an icon URL is provided, override into icon bullet */
.bullet-list li[style*="--bi:"]::before{
  content: "";
  top: 0.5em;
  height: 1em;
  background-image: var(--bi);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 1em;
}