:root{
  --bg: #f7f3ec;
  --bg-warm: #f2ecdf;
  --ink: #1c1a17;
  --ink-soft: #57524a;
  --brown: #543923;
  --chartreuse: #0086ff;
  --red: #d13333;
  --purple: #c275d3;
  --orange: #dd9c0b;
  --favicon-yellow: #d0f800; /* matches assets/favicon.png */
  --nav-w: 25%;
  --nav-min: 300px;
  --intro-fade: 150px;
  --serif-head: "Prata", serif;
  --body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --serif-body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --gallery-max-w: calc(100vw - max(var(--nav-min), var(--nav-w)) - 8vw);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}
img,video{display:block;max-width:100%;}
a{color:inherit;}

#app{display:flex;min-height:100vh;}

/* ---------- NAV ---------- */
.nav{
  position: fixed;
  left:0; top:0; bottom:0;
  width: max(var(--nav-min), var(--nav-w));
  background: var(--bg);
  color: var(--ink);
  border-right: 1px solid rgba(84,57,35,0.14);
  display:block;
  padding: 1.5rem 1.5rem 1.5rem;
  z-index: 40;
}
.corner{display:flex;align-items:center;}
.corner-tl{position:absolute; top:1.5rem; left:1.5rem; right:1.5rem;}
.corner-bl{position:absolute; bottom:1.4rem; left:1.5rem; right:1.5rem;}

.site-name{
  font-family: var(--serif-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  cursor: pointer;
  line-height: 1.05;
  color: var(--brown);
}

/* Mobile-only header echo of the site name: the real nav (with its own
   "Emily Taylor") lives off-canvas until the hamburger opens it, so on
   mobile we surface a plain, non-fixed copy at the top of the page --
   it scrolls away with the rest of the content, no anchoring needed. */
.mobile-site-name{ display:none; }

/* About: fixed to the whole page, top right */
.about-fixed{
  position: fixed;
  top: 1.5rem; right: 1.7rem;
  z-index: 96;
}
.about-btn{
  font-family: var(--serif-head);
  font-weight: 800;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--brown);
  padding-bottom: 3px;
  border-bottom: 1.5px solid rgba(84,57,35,0.4);
  transition: color .2s ease, border-color .2s ease;
}
.about-btn:hover{ color: var(--red); border-color: var(--red); }
.about-btn.open{
  color: var(--orange);
  border-color: transparent;
  line-height: 1;
  padding-bottom: 0;
  letter-spacing: 0;
  display:inline-flex;
  align-items:center;
}
.about-btn.open svg{ width:20px; height:20px; shape-rendering: crispEdges; }
.about-btn.open:hover{ opacity: 0.75; }

.nav-list{
  margin-top: 6.6rem;
  overflow-y:auto;
  max-height: calc(100vh - 7.5rem);
  padding-bottom: 1rem;
}
.nav-list::-webkit-scrollbar{width:0;}

.nav-section{ margin-bottom: 0; }

/* Index-style rows: every header and every subsection sits on its own thin
   brown rule, full nav width. The rule under whichever row is current bolds
   and takes that section's color (set via JS -- see setActiveNav). */
.nav-section-title{
  display:block;
  width:100%;
  text-align:left;
  font-family: var(--serif-head);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  padding: 0.36rem 0;
  position: relative;
  transition: opacity .2s ease;
  opacity: 0;
  transform: translateY(-30px) scale(0.97);
  clip-path: inset(0 100% 0 0);
}
.nav-section-title::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background: rgba(84,57,35,0.4);
  transition: height .2s ease, background-color .2s ease;
}
.nav-section-title:hover::after{
  height:2.5px;
  background-color: currentColor;
}
.nav-section-title.row-in{ animation: unfold .4s steps(6, end) forwards; }
.nav-section-title.active::after{
  height:2.5px;
  background-color: currentColor;
}
.nav-section-title.active{
  font-weight: 800;
}

@keyframes unfold{
  0%{ opacity:0; transform: translateY(-30px) scale(0.97); clip-path: inset(0 100% 0 0); }
  20%{ opacity:1; }
  100%{ opacity:1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0); }
}

.nav-sub-list{
  list-style:none;
  margin:0; padding: 0;
}
.nav-sub-item{
  display:block;
  font-size: 0.76rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.24rem 0;
  color: var(--brown);
  position: relative;
  cursor:pointer;
  transition: opacity .2s ease;
  opacity: 0;
  transform: translateY(-30px) scale(0.97);
  clip-path: inset(0 100% 0 0);
}
.nav-sub-item::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background: rgba(84,57,35,0.4);
  transition: height .2s ease, background-color .2s ease;
}
.nav-sub-item:hover::after{
  height:2.5px;
  background-color: var(--nav-accent, var(--brown));
}
.nav-sub-item.row-in{ animation: unfold .36s steps(6, end) forwards; }
.nav-sub-item.active{
  opacity: 1;
  font-weight: 700;
}
.nav-sub-item.active::after{
  height:2.5px;
  background-color: var(--nav-accent, var(--brown));
}

/* palette cycle for section headers, assigned via JS */
.accent-red{ color: var(--red); }
.accent-chartreuse{ color: var(--chartreuse); }
.accent-purple{ color: var(--purple); }

/* ---------- WIDGET ---------- */
.widget{
  display:flex;
  align-items:center;
  gap: 0.7rem;
}
.widget-clock{
  flex: 0 0 auto;
  width: 58px; height:58px;
}
.widget-clock circle.face{ fill: var(--bg); stroke: var(--brown); stroke-width: 1.4; }
.widget-clock line{ stroke: var(--brown); stroke-linecap: round; }
.widget-clock line.hand-min{ stroke-width: 1.6; }
.widget-clock line.hand-hr{ stroke-width: 2.2; }
.widget-clock circle.pin{ fill: var(--brown); }
.widget-clock .tick{ stroke: rgba(84,57,35,0.35); stroke-width: 1; }

.widget-text{
  display:flex;
  flex-direction: column;
  gap: 0.32rem;
}
.widget-date{
  font-size: 0.68rem;
  letter-spacing:0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height:1.3;
}
.widget-weather{
  font-size: 0.72rem;
  letter-spacing:0.01em;
  color: var(--ink-soft);
  line-height:1.3;
}

/* ---------- RAIL / CONTENT ---------- */
.rail{
  position:relative;
  margin-left: max(var(--nav-min), var(--nav-w));
  width: calc(100% - max(var(--nav-min), var(--nav-w)));
  min-height:100vh;
  background: var(--bg);
}

/* Splash intro: a solid green curtain sits over the first viewport of
   content while the nav rows waterfall in, then lifts up and out of the
   way (see initIntro() in app.js). Its own bottom edge fades to
   transparent so the lift reads as a soft gradient wipe rather than a
   hard line sliding up. */
.intro-overlay{
  position:absolute;
  top:0; left:0; right:0;
  /* taller than the viewport by --intro-fade: the extra bit at the bottom
     is where the gradient fades to transparent, and it sits below the
     fold at rest, so the first frame the user sees is solid green with
     no fade showing through. The fade band only scrolls into view -- as
     the trailing edge of the curtain -- once the lift transition starts. */
  height: calc(100vh + var(--intro-fade));
  background: linear-gradient(to bottom, #d8f723 0%, #d8f723 calc(100% - var(--intro-fade)), rgba(216,247,35,0) 100%);
  z-index:30;
  pointer-events:none;
  transition: transform 900ms cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.intro-overlay.lift{
  transform: translateY(-100%);
}

.content{
  display:block;
  transform: translateY(calc(100vh + var(--intro-fade)));
  transition: transform 900ms cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.content.lift{
  transform: translateY(0);
}

.section-block{
  padding: 4.5rem 4vw 2rem 4vw;
  border-top: 1px solid rgba(28,26,23,0.08);
}
.section-block:first-child{border-top:none;}
.section-block.tinted{ background: var(--bg-warm); }

.section-head{
  max-width: 780px;
  margin-bottom: 2.2rem;
}
.section-title{
  font-family: var(--serif-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.9rem 0;
}
.section-intro{
  font-family: var(--serif-body);
  font-size: 0.95rem;
  line-height:1.6;
  color: var(--ink-soft);
  max-width: 640px;
}

.hero-media{
  position: relative;
  margin: 1.6rem 0 0.5rem 0;
  border-radius: 6px;
  overflow:hidden;
  max-width: 900px;
}
.hero-media video, .hero-media img{width:100%; height:auto; border-radius:6px;}
.hero-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background: rgba(255,255,255,0.28);
  z-index:2;
}
.hero-progress-bar{ height:100%; width:0%; background: var(--chartreuse); }
.hero-controls{
  position:absolute; right:10px; bottom:10px;
  display:flex; gap:0.4rem;
  z-index:3;
}
.hero-btn{
  width:30px; height:30px; border-radius:50%;
  background: rgba(28,26,23,0.55);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.hero-btn svg{ width:14px; height:14px; }

.subsection{ margin-bottom: 3.2rem; }
.project-title{
  font-family: var(--serif-head);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.6rem 0;
}
.project-copy{
  font-family: var(--serif-body);
  font-size: 0.8rem;
  line-height:1.6;
  color: var(--ink-soft);
  max-width: 560px;
  white-space: pre-line;
  margin-bottom: 0.8rem;
}
.project-credits{
  font-size: 0.65rem;
  letter-spacing:0.02em;
  color: rgba(28,26,23,0.5);
  line-height:1.6;
  margin-bottom:1.2rem;
}

/* ---------- GALLERY (true-size, uncropped) ---------- */
.gallery-wrap{ position:relative; }
.gallery{
  display:flex;
  align-items:center;
  gap: 2.25rem;
  overflow-x:auto;
  overflow-y: hidden;
  overflow-anchor: none;
  scroll-snap-type: x proximity;
  padding-bottom: 0.4rem;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar{display:none;}
.gallery-item{
  flex: 0 0 auto;
  max-height: 460px;
  max-width: var(--gallery-max-w);
  border-radius: 4px;
  overflow:visible;
  background: transparent;
  scroll-snap-align: start;
  overflow-anchor: none;
  cursor: pointer;
  position:relative;
  display:flex;
  align-items:flex-end;
}
.gallery-item img, .gallery-item video{
  max-height: 460px;
  max-width: var(--gallery-max-w);
  width:auto; height:auto;
  object-fit: contain;
}
.gallery-item.media-padded img, .gallery-item.media-padded video{
  padding: 2.75rem 0;
}
.gallery-item .sound-badge{
  position:absolute; right:8px; bottom:8px;
  width:26px; height:26px; border-radius:50%;
  background: rgba(28,26,23,0.55);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.gallery-item .sound-badge svg{ width:14px; height:14px; }
.gallery-item .pause-badge{
  position:absolute; left:8px; bottom:8px;
  width:26px; height:26px; border-radius:50%;
  background: rgba(28,26,23,0.55);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.gallery-item .pause-badge svg{ width:14px; height:14px; }
.gallery-item .video-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background: rgba(255,255,255,0.28);
  display:none;
}
.gallery-item.is-playing .video-progress{ display:block; }
.gallery-item .video-progress-bar{
  height:100%; width:0%;
  background: var(--nav-accent, var(--chartreuse));
}
.gallery-item .play-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.gallery-item.is-playing .play-overlay{ display:none; }
.play-overlay-icon{
  width:52px; height:52px; border-radius:50%;
  background: rgba(28,26,23,0.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.play-overlay-icon svg{ width:20px; height:20px; margin-left:2px; }
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width: 42px; height:42px; border-radius:50%;
  background: var(--nav-accent, var(--brown));
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  z-index:5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background .2s ease, color .2s ease;
}
.gallery-arrow svg{ width:14px; height:14px; shape-rendering: crispEdges; }
.gallery-prev svg{ transform: scaleX(-1); }
.gallery-arrow:hover{ background: var(--brown); color: var(--nav-accent, var(--chartreuse)); }
.gallery-wrap.accent-red .gallery-arrow,
.gallery-wrap.accent-purple .gallery-arrow{ color:#fff; }
.gallery-wrap.accent-red .gallery-arrow:hover,
.gallery-wrap.accent-purple .gallery-arrow:hover{ color:#fff; }
.gallery-prev{left:-14px;}
.gallery-next{right:-14px;}

.gallery-embeds{ align-items: flex-start; }
.embed-item{
  width: 340px;
  max-width: var(--gallery-max-w);
  max-height: none;
  cursor: default;
}
.embed-item .instagram-media{ margin: 0 !important; }
.embed-fallback{
  width: 340px; height: 420px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 0.9rem;
  background: var(--bg-warm);
  border: 1px solid rgba(84,57,35,0.16);
  border-radius: 6px;
  text-align:center;
  padding: 1.5rem;
}
.embed-fallback-mark{
  width:38px; height:38px; border-radius:50%;
  background: var(--nav-accent, var(--brown));
  color: var(--ink);
  font-family: var(--serif-head); font-weight:800; font-size:0.68rem;
  display:flex; align-items:center; justify-content:center;
}
.embed-fallback a{
  font-family: var(--body);
  font-size: 0.78rem;
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.embed-fallback a:hover{ color: var(--nav-accent, var(--red)); }

/* ---------- ABOUT PANEL (lives inside the right/work section, not a full-page modal) ---------- */
.about-panel{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: max(var(--nav-min), var(--nav-w));
  background: var(--brown);
  z-index: 90;
  overflow-y: auto;
  clip-path: circle(0% at 100% 0%);
  transition: clip-path .55s cubic-bezier(.2,.9,.25,1);
  pointer-events: none;
}
.about-panel.open{
  clip-path: circle(150% at 100% 0%);
  pointer-events: auto;
}
.about-panel-inner{
  min-height: 100%;
  padding: 6.5rem 5vw 4rem 5vw;
  max-width: 720px;
}
.about-lead{
  font-family: var(--serif-head);
  font-weight: 800;
  color: var(--favicon-yellow);
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.35;
  margin: 0 0 1.2rem 0;
}
.about-copy-p{
  font-family: var(--body);
  color: #fff;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.1rem 0;
}
.about-social{
  display:flex;
  gap: 1.1rem;
  margin-top: 1.6rem;
}
.about-social a{
  display:inline-flex;
  color: rgba(255,255,255,0.7);
  transition: color .2s ease, opacity .2s ease;
}
.about-social a:hover{ color: var(--chartreuse); }

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background: rgba(15,13,11,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .3s ease;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox-content{ max-width:92vw; max-height:88vh; }
.lightbox-content img, .lightbox-content video{
  max-width:92vw; max-height:88vh; width:auto; height:auto; margin:0 auto; border-radius:4px;
  object-fit: contain;
}
.lightbox-content iframe{ width:min(500px,92vw); height:80vh; border:0; }
.lightbox-close{ position:absolute; top:1.4rem; right:1.6rem; color: var(--chartreuse); display:flex; }
.lightbox-close svg{ width:32px; height:32px; shape-rendering: crispEdges; }
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  color:#fbf6ea; padding: 0.5rem 1rem;
  display:flex;
}
.lightbox-arrow svg{ width:26px; height:26px; shape-rendering: crispEdges; }
.lightbox-prev svg{ transform: scaleX(-1); }
.lightbox-prev{left:0.5rem;}
.lightbox-next{right:0.5rem;}

/* ---------- MOBILE ---------- */
.hamburger{
  display:none;
  position:fixed; top:1.2rem; right:1.2rem; z-index:60;
  width:40px; height:40px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background: var(--brown); border-radius:50%;
}
.hamburger span{ width:18px; height:2px; background:#fbf6ea; transition: all .25s ease; }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


.accent-orange{ color: var(--orange); }

.gallery-arrow.is-hidden{ display: none; }

@media (max-width: 860px){
  :root{ --nav-min: 260px; --gallery-max-w: calc(100vw - 8vw); }
  .hamburger{ display:flex; }
  .nav{
    transform: translateX(-100%);
    transition: transform .35s ease;
    width: min(84vw, 340px);
  }
  .nav.open{ transform: translateX(0); }
  .rail{ margin-left:0; width:100%; }
  .about-fixed{ right: 4.4rem; }
  .about-panel{ left: 0; }

  .mobile-site-name{
    display:block;
    position:relative;
    z-index: 31; /* above the intro curtain, so it reads immediately */
    padding: 1.15rem 5rem 0.5rem 1.2rem;
    font-family: var(--serif-head);
    font-weight: 800;
    font-size: clamp(1.3rem, 5vw, 1.7rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--brown);
    cursor: pointer;
  }

  .gallery-item{ height: 320px; }
  /* Cap media to the item's own height so tall (portrait) videos scale
     down to fit entirely in view instead of getting clipped by the
     gallery's overflow. */
  .gallery-item img, .gallery-item video{ max-height: 320px; }

  /* Instagram embeds have their own fixed intrinsic height (set by
     Instagram's embed script, not by us) that's usually well over
     320px -- forcing them into the same fixed-height box as the media
     galleries just clips them. Let embed cells size to their natural
     height instead, same as they already do on desktop, so the
     surrounding gallery grows to match instead of cropping them. */
  .gallery-item.embed-item{ height: auto; }
}