/* ============================================================
   CSS RESET — Meyer v2.0
   http://meyerweb.com/eric/tools/css/reset/
   ============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }


/* ============================================================
   BASE
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  scroll-behavior: smooth;
  line-height: 1.25;
  font-display: swap;
  box-sizing: border-box;
}

body {
  background-color: white;
  cursor: none;
}

img  { width: 100%; }
video { width: 100%; }

#loadOverlay { display: none; }


/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: "Authentic-Sans-90";
  src: url("fonts/authentic-sans-90.otf") format("opentype");
}
@font-face {
  font-family: "Authentic-Sans-130";
  src: url("fonts/authentic-sans-130.otf") format("opentype");
}
@font-face {
  font-family: "Authentic-Sans-150";
  src: url("fonts/authentic-sans-150.otf") format("opentype");
}
@font-face {
  font-family: "Authentic-Sans-Cond-90";
  src: url("fonts/authentic-sans-condensed-90.otf") format("opentype");
}
@font-face {
  font-family: "Authentic-Sans-Cond-130";
  src: url("fonts/authentic-sans-condensed-130.otf") format("opentype");
}
@font-face {
  font-family: "Authentic-Sans-Cond-150";
  src: url("fonts/authentic-sans-condensed-150.otf") format("opentype");
}


/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  /* Colors */
  --accent:      #4c16ff;
  --lightaccent: rgb(120, 192, 238);
  --reg:         #141414;
  --gridcolor:   #242424;

  /* Type scale */
  --h1: 2.5rem;
  --h2: 2.0rem;
  --h3: 1.6rem;
  --h4: 1.25rem;
  --p:  1rem;
  --small: .8rem;

  /* Fonts */
  --headerfam:          "Authentic-Sans-90",   sans-serif;
  --paragraphfam:       "Authentic-Sans-90",   sans-serif;
  --emphasisfam:        "Authentic-Sans-130",  sans-serif;
  --secondaryfamfine:   "Authentic-Sans-Cond-130";
  --secondaryfamregular:"Authentic-Sans-Cond-130";

  /* Weights */
  --regular:       400;
  --bold:          500;
  --emphasisweight: 500;

  /* Scroll dark-mode thresholds (pages override as needed) */
  --dark-start: 2;   /* disabled by default; scroll ratio never exceeds 1 */
  --dark-end:   1;   /* 1 = no upper bound */
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1 { color: var(--reg); font-family: var(--headerfam);         font-size: var(--h1); font-weight: var(--bold); }
h2 { color: var(--reg); font-family: var(--headerfam);         font-size: var(--h2); font-weight: var(--bold); }
h3 { color: var(--reg); font-family: var(--secondaryfamregular); font-size: var(--h3); }
h4 { color: var(--reg); font-family: var(--emphasisfam);       font-size: var(--h4); font-weight: var(--bold); letter-spacing: -.5px; }
h5 { color: var(--reg); font-family: var(--secondaryfamregular); font-size: var(--p); }

p {
  color: var(--reg);
  font-family: var(--paragraphfam);
  font-size: var(--p);
  font-weight: var(--regular);
}

small p {
  color: var(--reg);
  font-family: var(--paragraphfam);
  font-size: var(--small);
  letter-spacing: 0;
}

.emphasis { color: var(--reg); font-weight: var(--emphasisweight); }

a             { color: var(--reg); text-decoration: none; }
a:hover       { color: var(--accent); text-decoration: underline; }


/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.wholepagemargin {
  margin: 0 auto;
  padding: 0 1rem;
  max-width: 90rem;
}


/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 9999;
  pointer-events: none;
}

.site-wide { width: 40px; height: 40px; }

#cursor-site-wide {
  background-size: contain;
  background-repeat: no-repeat;
}
#cursor-site-wide.cursor-hover { display: none; }


/* ============================================================
   NAVIGATION
   ============================================================ */
.header {
  width: 100%;
  position: relative;
  background-position: center;
  background-size: cover;
}

.cookie { width: 55px; }

nav {
  display: flex;
  padding: 25px 0;
  justify-content: space-between;
  align-items: center;
  position: sticky;
}

nav img { width: 80px; transition: transform .3s ease-in-out; }
nav img:hover { transform: rotate(-30deg); }
nav a div img:hover { transform: none; }

/* Nav logo: gif swaps in on hover via JS (gbnav1/gbnav2 in shared.js) */
.nav-logo-gif  { display: none; }
.nav-logo-static { display: block; }

.nav-links {
  flex: 1;
  text-align: right;
}

.nav-links ul li {
  list-style: none;
  display: inline-block;
  position: relative;
}

.nav-links ul li a {
  font-family: var(--secondaryfamregular);
  color: var(--reg);
  text-decoration: none;
  font-size: var(--h4);
  transition: .3s;
  margin-left: 50px;
}

.nav-links ul li a:hover { color: var(--accent); }

.currentpage {
  font-family: var(--secondaryfamfine);
  color: var(--accent);
  text-decoration: underline;
}

nav .fa { display: none; }


/* ============================================================
   DIVIDERS & UTILITY
   ============================================================ */
.divider {
  height: 1px;
  background-color: var(--reg);
  border: none;
}

.hideonmobile { /* handled in mobile query */ }


/* ============================================================
   HOVER SWAP (pure CSS — replaces inline JS gb/gb2 pattern)
   Add class "hover-swap" to the container, "still" and
   "moving" to the two child images/videos.
   ============================================================ */
.hover-swap .moving  { display: none; }
.hover-swap:hover .still  { display: none; }
.hover-swap:hover .moving { display: block; }


/* ============================================================
   GRADIENT BAR (optional, currently commented out in pages)
   ============================================================ */
@keyframes scroll-gradient {
  0% { background-position: calc(200vw / sin(90deg)) 0; }
}

.top-thing {
  height: 5px;
  position: fixed;
  width: 100vw;
  background: repeating-linear-gradient(
    90deg,
    var(--lightaccent), #4c16ff, #ffe89b, #faffdf, #d9f9ff, var(--lightaccent) 200vw
  );
  background-size: calc(200vw / sin(90deg)) 100%;
  animation: scroll-gradient 15s linear infinite reverse;
  top: 0;
  overflow: hidden;
  z-index: 1;
}

.top-thing2 {
  height: 5px;
  position: fixed;
  width: 100vw;
  background: repeating-linear-gradient(90deg, var(--accent), #4c16ff, #ffe89b 150vw);
  background-size: calc(150vw / sin(90deg)) 100%;
  top: 0;
  overflow: hidden;
  z-index: 1;
}


/* ============================================================
   DARK / LIGHT MODE ANIMATION
   ============================================================ */
.wholepagedark {
  animation: to-dark .5s ease-in both;
  background-size: 2% .7%;
  background-image:
    linear-gradient(var(--gridcolor) .5px, transparent .5px, transparent calc(100% - .5px), var(--gridcolor) calc(100% - .5px)),
    linear-gradient(90deg, var(--gridcolor) .5px, transparent .5px, transparent calc(100% - .5px), var(--gridcolor) calc(100% - .5px));
}

.wholepagelight {
  animation: to-light .5s ease-out both;
  background-size: 2% .7%;
  background-image:
    linear-gradient(var(--gridcolor) .5px, transparent .5px, transparent calc(100% - .5px), var(--gridcolor) calc(100% - .5px)),
    linear-gradient(90deg, var(--gridcolor) .5px, transparent .5px, transparent calc(100% - .5px), var(--gridcolor) calc(100% - .5px));
}

@keyframes to-dark {
  0%   { background-color: white;   --reg: #141414; --gridcolor: white;   }
  100% { background-color: #141414; --reg: white;   --gridcolor: #242424; }
}
@keyframes to-light {
  0%   { background-color: #141414; --reg: white;   --gridcolor: #242424; }
  100% { background-color: white;   --reg: #141414; --gridcolor: white;   }
}


/* ============================================================
   HOVER TEASER (hidden overlay image on nav hover)
   ============================================================ */
.hovertarget {
  display: none;
  position: absolute;
  width: 70vw;
  top: -2%;
  left: 5vw;
}
.hovertrigger:hover .hovertarget { display: block; }


/* ============================================================
   LAYOUT GRID HELPERS
   ============================================================ */
.topper { padding: 2rem 0; }

.bot-align    { align-items: flex-end; }
.top-align    { align-items: flex-start; }
.center-align { align-items: center; }

/* Two-column flex */
.two-column-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 16px;
  row-gap: 16px;
}
.two-column-flex > div        { width: calc(50% - 8px); }
.two-column-flex div a h5     { margin-top: 15px; }
.two-column-flex div a h4     { margin-top: 5px; }

/* Three-column flex */
.three-column-flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 16px;
}
.three-column-flex > div { width: calc(33.33% - 5.3px); }

/* Showreel embed (homepage desktop) */
.showreel {
  position: relative;
  width: calc(50% - 8px);
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.showreel iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 125%;
  transform: translate(-50%, -50%);
  border: 0;
}


/* ============================================================
   PORTFOLIO (homepage desktop cards)
   ============================================================ */
.projectcard        { margin-top: 3rem; }
.projectcard a      { text-decoration: none; }
.projectcard:hover * { color: var(--accent); }

.portfolio-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 16px;
  row-gap: 16px;
}
.portfolio-flex-text { flex: 2; }
.portfolio-flex-tag  { flex: 1; }

.portfolio-image-flex {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  column-gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  height: 25rem;
  scrollbar-width: thin;
}
.portfolio-image-flex img,
.portfolio-image-flex video { height: 100%; width: auto; }


/* ============================================================
   PORTFOLIO (homepage mobile — hover-swap project cards)
   ============================================================ */
.project          { text-decoration: none; color: var(--reg); }
.project:hover h1,
.project:hover h4,
.project:hover h5 { color: var(--accent); }


/* ============================================================
   CASE STUDY LAYOUT
   ============================================================ */
.titletextbox { color: var(--reg); margin-top: 20px; }

.titletextbox .leftside {
  margin-top: 35px;
  color: var(--accent);
}
.titletextbox .leftside p span:hover {
  text-decoration: underline;
  color: var(--lightaccent);
  cursor: pointer;
}

.leftside {
  width: calc(12% - 25px);
  color: var(--reg);
  padding-top: 25px;
}

.rightpart            { width: calc(88% - 25px); }
.rightpart img        { margin: 10px 0; }
.rightpart video      { margin: 10px 0; width: 100%; }
.rightpart video:hover { cursor: auto; }
.rightpart object     { margin: 10px 0; }

.rightside { display: flex; flex-direction: row; }

.textspace  { width: 30vw; margin: 10px 0; }

.otherspace {
  width: 45vw;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-left: 50px;
  padding-right: 50px;
  justify-content: left;
  column-gap: 75px;
}
.otherspace img,
.otherspace video { width: 35vw; }

.rightleft {
  display: flex;
  flex-direction: row;
  column-gap: 50px;
}
.rightleft h1   { margin-bottom: 15px; }
.rightleft p    { margin-bottom: 15px; }
.rightleft h3   {
  font-size: var(--h3);
  font-family: var(--headerfam);
  font-weight: var(--bold);
  margin-top: 15px;
  margin-bottom: 15px;
}

.casestudydivider {
  border-top: 1px var(--reg) solid;
  border-bottom: 1px var(--reg) solid;
  padding: 15px 0;
  text-align: center;
  margin: 30px 0;
  color: var(--accent);
}

/* Photo grids */
.photosflex {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: 10px 0;
  column-gap: 20px;
}
.photosflex > div            { flex: 1; object-fit: contain; }
.photosflex > div img        { object-fit: contain; width: 100%; margin: 10px 0; }

/* Zero-gap photo grid for book scans */
.photosflex2 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  line-height: 0;
}
.photosflex2 > div     { flex: 1; object-fit: contain; line-height: 0; }
.photosflex2 > div img { object-fit: contain; width: 100%; margin: 0; }

.imgmargin { width: 100%; margin: 25px 0; }


/* ============================================================
   PLAY PAGE — TRIFLEX LAYOUT
   ============================================================ */
.triflex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: top;
  gap: 20px;
}

.singleflex {
  width: 32%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.triflex .playitems         { width: 100%; border: 1px solid var(--reg); }
.triflex .playitems-emphasis { width: 64%; border: 1px solid var(--reg); }
.triflex .playitems video   { width: 100%; }
.triflex .playitems video:hover { cursor: auto; }

.triflex .playclickable { border: 1px solid var(--lightaccent); color: var(--lightaccent); }
.triflex .playclickable .link {
  font-size: var(--p);
  font-family: var(--paragraphfam);
  font-weight: var(--regular);
  color: var(--lightaccent);
  text-decoration: none;
}
.triflex .playclickable .link:hover { cursor: pointer; }

.triflex p {
  font-family: var(--paragraphfam);
  font-weight: var(--regular);
  font-size: var(--p);
  color: var(--reg);
  padding: 10px 10px 20px;
}

/* Slideshow containers */
.slideshow-container {
  width: 100%;
  position: relative;
  border: 1px solid var(--reg);
}
.slideshow-container-clickable {
  width: 100%;
  position: relative;
  border: 1px solid var(--lightaccent);
}
.slideshow-container-emphasis {
  width: 64%;
  position: relative;
  border: 1px solid var(--reg);
}
.slideshow-container img { border-radius: 0; border: none; }

/* Slides (hidden by default; JS shows active one) */
.mySlides { display: none; }

/* Slideshow prev/next buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: var(--bold);
  font-size: 18px;
  transition: .6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background-color: var(--accent); }

/* Slideshow dots */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: var(--lightaccent);
  border-radius: 50%;
  display: inline-block;
  transition: background-color .6s ease;
}
.active, .dot:hover { background-color: var(--accent); }

.blockpage  { margin: 0 100px; display: block; }
.blockitems { width: 100%; height: max-content; }
.vimeovideo { margin: 0 100px; }


/* ============================================================
   DRAGGABLE MISC SECTION (homepage mobile / index3.html)
   ============================================================ */
.misc {
  position: relative;
  height: 180vh;
}

.miscimages {
  width: 300px;
  position: absolute;
  max-height: min-content;
}
.miscimages:hover { cursor: move; }

.miscimages img   { outline: solid 1px white; display: block; }
.miscimages video { width: 300px; outline: solid 1px white; display: block; }

.misc p {
  position: absolute;
  font-family: var(--paragraphfam);
  font-weight: var(--regular);
  font-size: var(--p);
  width: 100%;
  outline: solid 1px white;
  padding: 5px;
  background-color: var(--gridcolor);
}

/* Misc item positions */
.pos1  { top:   5vh; left: 56%; }
.pos2  { top:  10vh; left: 26%; }
.pos3  { top:  20vh; left:  5%; }
.pos4  { top:  30vh; left: 20%; }
.pos5  { top:  40vh; left: 63%; }
.pos6  { top:  50vh; left: 62%; }
.pos7  { top:  60vh; left: 38%; }
.pos8  { top:  70vh; left: 43%; }
.pos9  { top:  80vh; left:  3%; }
.pos10 { top:  90vh; left: 47%; }
.pos11 { top: 100vh; left:  9%; }
.pos12 { top: 110vh; left: 41%; }
.pos13 { top: 120vh; left: 14%; }
.pos14 { top: 130vh; left: 54%; }
.pos15 { top: 140vh; left: 19%; }
.pos16 { top: 150vh; left: 43%; }


/* ============================================================
   BUTTON (homepage mobile)
   ============================================================ */
.button {
  width: fit-content;
  padding: 10px 15px;
  margin: 50px 0 50px 30px;
  border: 1px var(--reg) solid;
  text-align: center;
  background-color: #141414;
}
.button-content {
  font-size: var(--h2);
  font-family: var(--secondaryfamregular);
  font-weight: var(--bold);
  text-decoration: none;
  color: white;
}
.button:hover {
  padding: 15px 20px;
  transition-duration: .2s;
  border: 1px var(--lightaccent) solid;
  cursor: pointer;
}
.button:hover .button-content {
  color: var(--lightaccent);
  transition-duration: .2s;
  cursor: pointer;
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  margin: 30px 0 30px;
  font-family: var(--paragraphfam);
  font-weight: var(--regular);
  font-size: var(--p);
  color: var(--reg);
}

.footerlink       { color: var(--reg); text-decoration: none; }
.footerlink:hover {
  color: var(--lightaccent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}


/* ============================================================
   MOBILE — max-width: 1025px
   ============================================================ */
@media (max-width: 1025px) {
  * {
    overflow-x: clip;
    --colorturnpoint: 1.5;
    --colorturnpointplay: 0;
    --gridcolor: #161616;
  }

  @media (max-width: 539px) {
    nav { margin-top: 20px; }
  }

  .wholepagemargin { padding: 5px; }
  .hideonmobile    { display: none; }

  /* Nav hamburger */
  nav .fa { display: inline-flex; color: var(--reg); margin: 10px; font-size: var(--h3); }
  nav .fa-times { margin: 30px; }

  .nav-links {
    position: absolute;
    background-color: white;
    background-size: cover;
    border-left: 1px solid var(--reg);
    height: 100vh;
    width: 80vw;
    top: 0;
    right: -100vw;
    z-index: 1;
    opacity: 1;
    transition: .5s;
  }
  .nav-links ul {
    padding-left: 15px;
    width: 40vw;
    text-align: left;
  }
  .nav-links ul li a {
    display: block;
    font-size: var(--h3);
    font-weight: var(--bold);
  }

  .fixed-position { overflow: hidden; touch-action: none; }

  /* Two-column becomes single */
  .two-column-flex        { display: block; }
  .two-column-flex > div  { width: 100%; margin: 50px 0; }

  /* Dark/light grid — denser on mobile */
  .wholepagedark,
  .wholepagelight {
    background-size: 5% .5%;
  }

  /* Gradient bars */
  .top-thing, .top-thing2 { height: 3px; }

  /* Footer */
  .footer { margin-bottom: 50px; height: 15vh; }

  /* Play page */
  .blockitems  { height: auto; }
  .projecthome { border: none; }
  .playparagraph { margin: 20px; }
  .singleflex  { width: auto; padding: 1px; }
  .triflex     { display: block; margin: 10px; }
  .triflex .playitems { width: 100%; }

  /* Draggable misc — reflows into grid on mobile */
  .misc {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    width: 100vw;
    max-height: min-content;
    row-gap: 3.3vw;
    column-gap: 3.3vw;
    padding: 0;
    height: auto;
  }
  .miscimages {
    position: static;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 45vw;
    align-self: center;
  }
  .miscimages img,
  .miscimages video {
    outline: none;
    display: flex;
    width: 45vw;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    justify-content: center;
    flex-wrap: wrap;
    border: solid 1px white;
  }
  .miscimages img:hover {
    scale: 200%;
    position: absolute;
    left: 50%;
    transform: translateX(-25%);
  }
  .misc p {
    position: static;
    width: 45vw;
    border: solid 1px white;
    outline: none;
  }

  /* Case study layout */
  .titletextbox .leftside { display: none; }
  .leftside   { margin-right: 20px; width: 100vw; }
  .leftside p { font-size: var(--h5); margin-bottom: 10px; color: var(--accent); }
  .rightpart  { width: 100vw; }
  .rightpart img { margin: 0; }
  .rightside  { flex-wrap: wrap; }
  .photosflex { margin: 10px 0; column-gap: 5px; flex-wrap: wrap; }
  .textspace  { width: 100vw; }
  .otherspace {
    width: 100vw;
    column-gap: 5vw;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-left: 0;
  }
  .otherspace img       { margin: 0; }
  .otherspace video source { width: 100%; margin: 0; }
  .rightleft  { width: 100%; flex-wrap: wrap; }
  .slideshow-container img { margin: 0; }
  .imgmargin  { padding: 0; margin: 0; }
}