/* ===== reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, video { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; }
a { color: inherit; text-decoration: none; -webkit-user-drag: none; }

:root {
  --sidebar-w: 220px;
  --ink: #111;
  --muted: #7a7a7a;
  --line: #ececec;
  --bg: #ffffff;
  /* Heading Now — condensed (28), Heavy weight lives at 700 in this kit */
  --head: "heading-condensed", "Inter", system-ui, sans-serif;
  /* title colours */
  --title-dark: #0e3a2b;   /* very dark green — light-mode titles */
  --title-light: #a8e0bd;  /* light green — dark-mode titles */
  --title-color: var(--title-dark);
}
body.theme-dark { --title-color: var(--title-light); }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ===== sidebar ===== */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 22px;
  z-index: 100;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.brand { display: block; margin-bottom: 34px; }
/* Sidebar name: ALWAYS one line. JS scales it to fill the sidebar width. */
.brand-name { display: block; font-family: var(--head); font-weight: 700; font-size: 34px; text-transform: uppercase; letter-spacing: .5px; line-height: 0.95; color: var(--title-light); white-space: nowrap; }
.brand-role { display: block; font-size: 12px; color: #9a9a9a; margin-top: 2px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  font-size: 13.5px;
  color: #b8b8b8;
  padding: 6px 0;
  transition: color .18s ease;
}
.nav a:hover { color: #fff; }
.nav a.active { color: #fff; font-weight: 500; }

.sidebar-bottom { display: flex; flex-direction: row; align-items: center; gap: 18px; }
.sidebar-bottom a { color: #8f8f8f; display: inline-flex; transition: color .18s ease; }
.sidebar-bottom a:hover { color: #fff; }
.sidebar-bottom .ci { width: 22px; height: 22px; }

/* ===== content ===== */
.content {
  margin-left: var(--sidebar-w);
  padding: 0 clamp(24px, 5vw, 72px);
}

.hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0 40px;
}

/* ===== hero background pattern (shared: homepage + experiments) ===== */
/* Outer layer: fixed to the hero. Its mask is the ONLY thing that fades the
   pattern out, so there is no hard box edge. It does not move. */
.hero-pattern {
  position: absolute;
  top: 0;
  left: calc(-1 * clamp(24px, 5vw, 72px));
  width: calc(100% + 2 * clamp(24px, 5vw, 72px));   /* full-bleed */
  height: 100%;
  z-index: 0;
  overflow: hidden;                                 /* clips the inner headroom only, hidden under the transparent mask */
  opacity: 0.45;                                    /* strength — customisable */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 72%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  pointer-events: none;
}
/* Inner layer: the actual tiles. Only this moves for parallax. */
.hero-pattern-inner {
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 180%;                                     /* headroom so parallax never reveals an edge */
  display: block;
  will-change: transform;
}
/* everything in the hero except the pattern sits above it */
.hero > :not(.hero-pattern) { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--head);
  font-size: clamp(56px, 9.5vw, 132px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0;
  max-width: 18ch;
  color: var(--title-color);
}
.hero-sub { margin-top: 18px; font-size: clamp(15px, 1.4vw, 19px); color: var(--muted); max-width: 52ch; }

.hero-contact {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  font-size: 15px;
}
.hero-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  transition: color .18s ease, opacity .18s ease;
}
.hero-contact a:hover { opacity: 0.6; }

/* recolourable icons: the Cloudinary SVG is used as a mask, filled with currentColor */
.ci {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background-color: currentColor;   /* recolour here, no new SVG needed */
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.hero-contact a.icon-only .ci { width: 23px; height: 23px; }
.ci-ig { -webkit-mask-image: url("https://res.cloudinary.com/dx8xajlz/image/upload/owen-portfolio/icons/instagram.svg"); mask-image: url("https://res.cloudinary.com/dx8xajlz/image/upload/owen-portfolio/icons/instagram.svg"); }
.ci-li { -webkit-mask-image: url("https://res.cloudinary.com/dx8xajlz/image/upload/owen-portfolio/icons/linkedin.svg");  mask-image: url("https://res.cloudinary.com/dx8xajlz/image/upload/owen-portfolio/icons/linkedin.svg"); }
.ci-ph { -webkit-mask-image: url("https://res.cloudinary.com/dx8xajlz/image/upload/owen-portfolio/icons/phone.svg");     mask-image: url("https://res.cloudinary.com/dx8xajlz/image/upload/owen-portfolio/icons/phone.svg"); }
.ci-gm { -webkit-mask-image: url("https://res.cloudinary.com/dx8xajlz/image/upload/owen-portfolio/icons/gmail.svg");     mask-image: url("https://res.cloudinary.com/dx8xajlz/image/upload/owen-portfolio/icons/gmail.svg"); }

/* homepage hero only: big name + wide-kerned subtitle matching the title width */
.hero:not(.exp-hero) h1 {
  white-space: nowrap;      /* one line */
  width: fit-content;
  line-height: 0.9;
  font-size: 12vw;          /* fallback; JS fits it to the width */
}
.hero:not(.exp-hero) .hero-sub {
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 22px);
  color: var(--ink);
  max-width: none;
  white-space: nowrap;
  /* letter-spacing is set by JS (fitHero) to spread letters across the title width */
}

/* ===== sections ===== */
.section { padding: 56px 0; }
.section-head { margin-bottom: 26px; }
.section-head h2 {
  font-family: var(--head);
  font-size: clamp(44px, 6.5vw, 96px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--title-color);
}
.section-note { margin-top: 6px; font-size: 14px; color: var(--muted); }

.sub {
  /* normal Inter copy font, not the big heading face */
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  margin: 30px 0 14px;
}

/* ===== grids ===== */
/* auto-fit + 1fr means tracks always stretch to fill the full width,
   so nothing ever gets "shoved" to the left. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 22px;
}
.grid-tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid-feature { grid-template-columns: 1fr; }

/* ===== cards ===== */
.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #ddd;
}
.card-media video { width: 100%; height: 100%; object-fit: cover; }

/* full-bleed item: spans every column, edge to edge (minus sidebar) */
.card.wide { grid-column: 1 / -1; }
.card.wide .card-media { aspect-ratio: 16 / 9; }

/* all video media is 16:9 landscape */
.video-card .card-media { aspect-ratio: 16 / 9; }

.card-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px 0;
}
.card-label span { font-size: 14px; font-weight: 500; }
.card-label em { font-size: 12.5px; font-style: normal; color: var(--muted); white-space: nowrap; }

.card { transition: transform .25s ease; }
.card:hover { transform: translateY(-3px); }

/* mute button on videos */
.video-card .card-media { background: #111; }
/* ===== custom video controls ===== */
.v-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity .2s ease;
}
.video-card:hover .v-controls,
.video-card:focus-within .v-controls { opacity: 1; }
.v-btn {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 0; padding: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.v-btn svg { width: 22px; height: 22px; display: block; }
.v-seek {
  position: relative;
  flex: 1 1 auto;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  cursor: pointer;
}
.v-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 4px; }
.v-vol {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  cursor: pointer;
}
.v-vol-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; border-radius: 4px; }
@media (max-width: 560px) { .v-vol { width: 54px; } .v-controls { gap: 8px; padding: 10px 12px; } }

/* ===== placeholder colour boxes ===== */
.c1{background:#ff5a3c}.c2{background:#2b59ff}.c3{background:#12b886}.c4{background:#ffb020}
.c5{background:#9b5de5}.c6{background:#0ca4a5}.c7{background:#ef476f}.c8{background:#3a3a3a}
.c9{background:#1e6091}.c10{background:#e07a5f}.c11{background:#81b29a}.c12{background:#f2542d}
.c13{background:#5f0f40}.c14{background:#0f4c5c}.c15{background:#fb8b24}.c16{background:#0b132b}
.c17{background:#e63946}.c18{background:#457b9d}.c19{background:#2a9d8f}.c20{background:#00aeef}
.c21{background:#7cb518}.c22{background:#d00000}.c23{background:#3d348b}.c24{background:#f4a261}
.c25{background:#e5383b}.c26{background:#264653}.c27{background:#e76f51}.c28{background:#2a6f97}
.c29{background:#ffba08}.c30{background:#6a040f}.c31{background:#118ab2}.c32{background:#c9184a}
.c33{background:#386641}.c34{background:#5a189a}.c35{background:#ff6d00}.c36{background:#b5179e}
.c37{background:#023e8a}
.card-media[class*="c"] { }

/* ===== full-bleed stop-motion video ===== */
.stopmotion-full {
  position: relative;
  margin-left: calc(-1 * clamp(24px, 5vw, 72px));
  margin-right: calc(-1 * clamp(24px, 5vw, 72px));
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.stopmotion-full video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
/* on landscape/16:9 windows the full-bleed video gets too big, so cap it
   and centre it (padding either side). Square/portrait windows stay full-bleed. */
@media (min-aspect-ratio: 13 / 10) {
  .stopmotion-full {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(72vh * 16 / 9);
  }
}

/* ===== image grid (Tate, College) ===== */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 560px) { .media-grid { grid-template-columns: 1fr; } }
.media-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #f2f2f2;
}
.media-grid figure { margin: 0; }
.media-grid figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }


/* ===== site footer (black, big name, social either side) ===== */
.site-footer {
  margin: 100px calc(-1 * clamp(24px, 5vw, 72px)) 0;
  padding: 64px clamp(24px, 5vw, 72px);
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
}
.footer-name {
  font-family: var(--head);
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  font-size: clamp(38px, 8vw, 130px);
  line-height: 1;
  white-space: nowrap;
}
.footer-social { display: flex; gap: 18px; flex: 0 0 auto; }
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  font-size: clamp(14px, 1.1vw, 18px);
}
.footer-contact a { color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.footer-contact .ci { width: 20px; height: 20px; flex: 0 0 auto; }
.site-footer a { color: #fff; display: inline-flex; transition: opacity .18s ease; }
.site-footer a:hover { opacity: 0.6; }
.site-footer .ci { width: 26px; height: 26px; }
@media (max-width: 700px) {
  .site-footer { flex-wrap: wrap; gap: 22px; padding: 44px 24px; }
  .footer-name { order: -1; width: 100%; text-align: center; font-size: clamp(44px, 15vw, 96px); }
  .footer-social { width: 100%; justify-content: center; }
  .footer-contact { width: 100%; align-items: center; text-align: center; }
}

/* ===== clickable section heading ===== */
.section-link {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  transition: opacity .18s ease;
}
.section-link:hover { opacity: .75; }
.section-arrow {
  font-size: 13px;
  color: var(--muted);
  transform: translateY(-2px);
}

/* ===== poster marquee: JS-driven auto-scroll, drag to browse ===== */
.banner {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px 0;
  /* run full-bleed to both edges of the content block */
  margin-left: calc(-1 * clamp(24px, 5vw, 72px));
  margin-right: calc(-1 * clamp(24px, 5vw, 72px));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  cursor: grab;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* Firefox: hide scrollbar */
}
.banner::-webkit-scrollbar { display: none; }   /* WebKit: hide scrollbar */
.banner.dragging { cursor: grabbing; }
.marquee-track {
  display: flex;
  width: max-content;
}
.banner-item {
  flex: 0 0 auto;
  height: 630px;               /* 50% bigger */
  margin-right: 18px;          /* margin (not gap) keeps the loop seamless */
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  transition: transform .25s ease;
}
.banner-item:hover { transform: translateY(-4px); }
.banner-item img {
  height: 100%;
  width: auto;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;        /* clicks go to the <a>, never get "stuck" on the img */
}

/* ===== back to top ===== */
.to-top {
  position: fixed;
  bottom: 26px;
  left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2);
  transform: translateX(-50%) translateY(10px);
  z-index: 90;
  border: 0;
  background: #000;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 22px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .18s ease;
}
.to-top.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.to-top:hover { background: #333; }

/* ===== hamburger button + backdrop (hidden on desktop) ===== */
.menu-btn { display: none; }
.menu-backdrop { display: none; }

/* ===== responsive: sidebar becomes a slide-in menu ===== */
@media (max-width: 820px) {
  :root { --sidebar-w: 0px; }

  /* hamburger */
  .menu-btn {
    display: flex;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 120;
    width: 46px;
    height: 46px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #000;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
  }
  .menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    transition: transform .25s ease, opacity .25s ease;
  }
  body.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  body.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* sidebar slides in from the left */
  .sidebar {
    width: 250px;
    height: 100vh;
    z-index: 115;
    transform: translateX(-100%);
    transition: transform .28s ease;
  }
  body.menu-open .sidebar { transform: translateX(0); }

  /* dim the page behind the open menu */
  .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }

  .content {
    margin-left: 0;
    padding-top: 74px;           /* clear the fixed hamburger */
  }
  .hero { min-height: 44vh; }

  /* keep the back-to-top clear of thumbs, centered on the full width */
  .to-top { left: 50%; }

  /* homepage hero: centre the subtitle + contact */
  .hero:not(.exp-hero) .hero-sub {
    text-align: center;
    white-space: normal;
    letter-spacing: 0.12em;
  }
  .hero-contact {
    justify-content: center;
    text-align: center;
    row-gap: 18px;
    font-size: 19px;
  }
  .hero-contact .ci { width: 28px; height: 28px; }
  .hero-contact a.icon-only .ci { width: 32px; height: 32px; }
  /* phone and email each on their own centred line; insta + linkedin share line 1 */
  .hero-contact a[href^="tel:"],
  .hero-contact a[href^="mailto:"] { flex: 0 0 100%; justify-content: center; }

  /* project section titles: bigger + centred, still clearly under OWEN WOOLLEY */
  .section-head { text-align: center; }
  .section-head h2 { font-size: clamp(48px, 11vw, 72px); }
  .section-link { flex-direction: column; align-items: center; gap: 6px; }
}