:root{
  --mat:#356249;
  --mat-deep:#264734;
  --mat-line: rgba(230, 214, 140, .22);
  --grid-major: rgba(230, 214, 140, .32);
  --paper:#f1ead9;
  --ink:#1c1912;
  --rust:#c0552c;
  --dust:#dcc267;
  --brown:#5d4430;
  --glass-fill: rgba(255,255,255,.035);
  --glass-fill-strong: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.38);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--mat);
  color:var(--paper);
  font-family:'Work Sans', sans-serif;
  overflow-x:hidden;
}
::selection{ background:var(--rust); color:var(--paper);}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mat-bg{
  background-color:var(--mat);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* GLASS UTILITY */
.glass{
  background:var(--glass-fill);
  backdrop-filter:blur(8px)  ;
  -webkit-backdrop-filter:blur(8px)  ;
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px rgba(0,0,0,.16);
}

.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:110px 6vw 60px;
  position:relative;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dust);
  margin-bottom:22px;
}

.headline{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:.85;
  font-size:clamp(3.6rem, 12vw, 8.5rem);
  color:var(--paper);
  letter-spacing:-.01em;
}
.headline .accent{ color:var(--rust); }

.sub{
  margin-top:20px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:.04em;
  color:rgba(241,234,217,.65);
}

/* ---- LIQUID GLASS CARD SHELF ---- */
/* POP ART CUTOUT — draggable easter egg, sits behind hero content */
.hero-content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pop-cutout{
  position: absolute;
  top: 110px;
  right: 6vw;
  width: 220px;
  z-index: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: filter .2s ease, transform .15s ease;
  opacity: .9;
}
.pop-cutout:hover{ transform: rotate(-2deg); opacity: 1; }
.pop-cutout:active{
  cursor: grabbing;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.4));
}
.pop-cutout img{
  width: 100%; height: auto; display: block;
  pointer-events: none;
}
@media (max-width: 720px){
  .pop-cutout{ width: 140px; top: 80px; right: 4vw; }
}

/* ROTARY DIAL — a glass take on a rotary phone dial.
   Holes are positioned by JS (never rotated as a group) so their labels
   always stay upright no matter where the dial has been spun to. */
.dial-hint{
  margin-top:44px;
  font-family:'IBM Plex Mono', monospace;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(241,234,217,.4);
}
.dial-stage{
  margin-top:18px;
  display:flex; justify-content:center;
}
.dial{
  --dial-size:288px;
  position:relative;
  width:var(--dial-size);
  height:var(--dial-size);
  border-radius:50%;
  cursor:grab;
  touch-action:none;
  outline:none;
  user-select:none;
  -webkit-user-select:none;
  background:radial-gradient(circle at 50% 32%, rgba(255,255,255,.07), rgba(255,255,255,.02) 62%, transparent 72%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -18px 40px rgba(0,0,0,.14), 0 18px 44px rgba(0,0,0,.2);
}
.dial.is-dragging{ cursor:grabbing; }
.dial:focus-visible{ border-color:rgba(255,255,255,.7); }

/* the finger stop, marking the slot that counts as "selected" */
.dial-stop{
  position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%;
  background:var(--dust);
  box-shadow:0 0 12px rgba(220,194,103,.5);
  opacity:.85;
}
/* faint groove the holes ride along */
.dial-track{
  position:absolute; inset:34px;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.12);
}
.dial-holes{ position:absolute; inset:0; }

.dial-hole{
  position:absolute; top:50%; left:50%;
  width:62px; height:62px; margin:-31px 0 0 -31px;
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:rgba(255,255,255,calc(.03 + .07 * var(--near, 0)));
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,calc(.28 + .45 * var(--near, 0)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px rgba(0,0,0,calc(.1 + .14 * var(--near, 0)));
  color:var(--paper);
  cursor:pointer;
  font:inherit;
  text-decoration:none;
  will-change:transform;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* the one hole that leaves the site wears the accent instead of the dust gold */
.dial-hole.is-external.is-active .hole-num{ color:var(--rust); }
.dial-hole .hole-word{
  font-family:'IBM Plex Mono', monospace;
  font-size:6.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(241,234,217,calc(.4 + .5 * var(--near, 0)));
}
.dial-hole .hole-num{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900; font-size:1.05rem; line-height:.9;
  color:rgba(241,234,217,calc(.55 + .45 * var(--near, 0)));
}
.dial-hole.is-active .hole-num{ color:var(--dust); }

.dial-center{
  position:absolute; top:50%; left:50%;
  width:118px; height:118px; margin:-59px 0 0 -59px;
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 12px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease;
}
.dial-center:hover{ transform:scale(1.03); border-color:rgba(255,255,255,.65); }
.center-role{
  font-family:'IBM Plex Mono', monospace;
  font-size:7.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(241,234,217,.55);
}
.center-name{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800; font-size:1.15rem; line-height:1; text-transform:uppercase;
  margin-top:3px; color:var(--paper);
}
.center-role, .center-name{ transition:opacity .16s ease; }
.dial-center.swapping .center-role,
.dial-center.swapping .center-name{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .dial-hole, .dial-center{ transition:none; }
}

/* ARCHIVE TABS */
.archive-tabs{
  position:fixed;
  right:14px; top:50%; transform:translateY(-50%);
  z-index:30;
  display:flex; flex-direction:column;
  border-radius:16px;
  overflow:hidden;
}
.archive-tabs a{
  font-family:'IBM Plex Mono', monospace;
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(241,234,217,.6); text-decoration:none;
  background:transparent;
  padding:11px 8px 11px 12px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:background .2s, color .2s;
}
.archive-tabs a:last-child{ border-bottom:none; }
.archive-tabs a:hover, .archive-tabs a.active{ background:rgba(192,85,44,.22); color:var(--paper); }

/* SECOND SECTION */
.section-paper{
  background:var(--paper);
  color:var(--ink);
  min-height:70vh;
  padding:100px 8vw 100px;
}
.section-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:44px; }
.section-head .num{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--rust); }
.section-head h2{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900; text-transform:uppercase; font-size:clamp(2rem,4.5vw,3rem);
}
/* WHAT WE COULD MAKE — pitch grid */
.make-section{
  padding:70px 8vw 120px;
  position:relative;
}
.section-intro{
  max-width:480px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:rgba(241,234,217,.6);
  margin-bottom:40px;
  line-height:1.6;
}
.pitch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px;
}
.pitch-card{
  border-radius:20px;
  padding:22px 20px;
  background:transparent;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border:1.5px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.pitch-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 20px 34px rgba(0,0,0,.22);
}
.pitch-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.pitch-card.playing .pitch-video{ opacity:1; }
.pitch-card::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,13,9,.15) 0%, rgba(15,13,9,.55) 100%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.pitch-card.playing::after{ opacity:1; }
.pitch-tag{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dust);
  border:1px solid rgba(220,194,103,.4);
  padding:4px 10px; border-radius:20px;
  margin-bottom:16px;
  position:relative; z-index:2;
}
.pitch-card h3{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800; font-size:1.4rem; text-transform:uppercase;
  color:var(--paper); line-height:1.05; margin-bottom:8px;
  position:relative; z-index:2;
}
.pitch-card p{
  font-size:.85rem; line-height:1.5;
  color:rgba(241,234,217,.65);
  position:relative; z-index:2;
}
.pitch-card .pitch-num{
  position:absolute; top:20px; right:20px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:10px;
  color:rgba(241,234,217,.3);
}
.pitch-card.pending{ cursor:default; }
.pitch-card .pending-badge{
  position:absolute; bottom:18px; right:20px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:8px; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(241,234,217,.35);
  border:1px solid rgba(255,255,255,.18);
  padding:3px 8px; border-radius:20px;
}

/* SKILLS + MASTERY */
.skills-section{
  padding:70px 8vw 120px;
  background:var(--paper);
  color:var(--ink);
}
.skills-section .section-intro{
  color:rgba(28,25,18,.55);
}
.skills-section .section-head h2{ color:var(--ink); }
.skill-group{
  margin-bottom:38px;
}
.skill-group:last-child{ margin-bottom:0; }
.skill-group-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rust);
  margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.skill-group-label::after{
  content:"";
  flex:1; height:1px;
  background:rgba(28,25,18,.12);
}
.skill-tags{
  display:flex; flex-wrap:wrap; gap:10px;
}
.skill-tag{
  font-family:'Work Sans', sans-serif;
  font-size:.85rem; font-weight:500;
  color:var(--ink);
  background:rgba(53,98,73,.06);
  border:1.5px solid rgba(28,25,18,.16);
  padding:8px 16px;
  border-radius:20px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
  cursor:default;
}
.skill-tag:hover{
  border-color:var(--rust);
  background:rgba(192,85,44,.08);
  transform:translateY(-2px);
}

/* THE KIT — merged skills + tool box */
.stamp-groups{
  margin-bottom: 44px;
}
.stamp-group{
  margin-bottom: 22px;
}
.stamp-group-label{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--dust);
  margin-bottom: 10px;
  display:flex; align-items:center; gap:10px;
}
.stamp-group-label::after{
  content:"";
  flex:1; height:1px;
  background: rgba(241,234,217,.15);
}
.stamp-row{
  display:flex; flex-wrap:wrap; gap:10px;
}
.stamp{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing:.02em;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px dashed var(--rust);
  border-radius: 30px;
  padding: 7px 13px;
  transform: rotate(-2deg);
}
.stamp:nth-child(2n){ transform: rotate(1.5deg); }
.stamp:nth-child(3n){ transform: rotate(-1deg); }
.stamp:nth-child(4n){ transform: rotate(2.2deg); }
.stamp:hover{ transform: rotate(0deg) scale(1.04); }

.kit-divider{
  display:flex; align-items:center; gap:12px;
  margin: 8px 0 26px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(241,234,217,.45);
}
.kit-divider::before, .kit-divider::after{
  content:"";
  flex:1; height:1px;
  background: rgba(241,234,217,.15);
}

/* TOOL BOX */
.toolbox-section{
  padding:70px 8vw 120px;
  position:relative;
}
.toolbox-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:14px;
}
.tool-card{
  border-radius:18px;
  padding:20px 16px;
  background:transparent;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border:1.5px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s ease, border-color .25s ease;
  display:flex; flex-direction:column; gap:14px;
}
.tool-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.6);
}
.tool-icon{
  width:30px; height:30px;
  color:var(--dust);
}
.tool-icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.tool-card .tool-name{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800; font-size:1.05rem; text-transform:uppercase;
  color:var(--paper); line-height:1.05;
}
.tool-card .tool-cat{
  font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(241,234,217,.5);
  margin-top:-8px;
}
.app-icon{
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:11px;
  color:#fff;
}
.tool-card.stat-card{
  background:rgba(192,85,44,.1);
  border-color:rgba(220,194,103,.4);
  justify-content:center;
}
.tool-card.stat-card .tool-name{ font-size:1.4rem; color:var(--dust); }
.tool-card.stat-card .tool-cat{ color:rgba(241,234,217,.7); }

/* ABOUT ME */
.aboutme-section{
  padding:70px 8vw 120px;
  background:var(--paper);
  color:var(--ink);
}
.aboutme-section .section-intro{ color:rgba(28,25,18,.55); }
.aboutme-section .section-head h2{ color:var(--ink); }
.aboutme-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr;
  gap:60px;
  align-items:center;
  margin-top:20px;
}
.aboutme-bio{
  font-size:1.1rem;
  line-height:1.75;
  color:rgba(28,25,18,.8);
}
.aboutme-bio .drop{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  font-size:3.2rem;
  float:left;
  line-height:.8;
  margin:4px 6px 0 0;
  color:var(--rust);
}

/* REEL VIDEO FRAME */
.reel-frame{
  position:relative;
  width:100%;
  max-width:280px;
  aspect-ratio:9/16;
  margin:0 auto;
  border-radius:28px;
  overflow:hidden;
  border:3px solid var(--ink);
  background:linear-gradient(160deg, var(--mat-deep), var(--brown));
  box-shadow:0 24px 50px rgba(0,0,0,.28);
}
.reel-frame video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* belt and braces: some browsers still paint their own overlay play button */
.reel-frame video::-webkit-media-controls,
.reel-frame video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none;
}

/* VIDEO WORK */
.video-section{
  padding:70px 8vw 120px;
  position:relative;
}
/* Featured stage + thumbnail strip.
   The stage is a fixed HEIGHT and takes its width from whichever clip is
   loaded, so landscape plays wide and vertical plays tall — every clip fills
   the frame edge to edge, no cropping and no black bars. */
.works-showcase{
  display:flex; flex-direction:column; align-items:center;
  gap:26px;
}
.works-stage{
  --stage-h:min(58vh, 520px);
  position:relative;
  height:var(--stage-h);
  aspect-ratio:var(--stage-ratio, 480/270);
  max-width:100%;
  border-radius:22px;
  overflow:hidden;
  cursor:pointer;
  border:1.5px solid rgba(255,255,255,.32);
  background:linear-gradient(160deg, var(--mat-deep), var(--brown));
  box-shadow:0 26px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3);
  transition:aspect-ratio .45s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.works-stage:hover{ border-color:rgba(255,255,255,.6); }
.stage-video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .28s ease;
}
.works-stage.swapping .stage-video{ opacity:0; }
.stage-expand{
  position:absolute; top:14px; right:14px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.32);
  color:var(--paper);
  opacity:0; transition:opacity .2s ease;
}
.works-stage:hover .stage-expand{ opacity:1; }
.stage-expand svg{ width:14px; height:14px; }

.works-strip{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  max-width:100%;
}
.works-thumb{
  height:74px;
  aspect-ratio:var(--ratio);
  padding:0;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  background:var(--mat-deep);
  border:1.5px solid rgba(255,255,255,.22);
  opacity:.5;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease;
}
.works-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.works-thumb:hover{ opacity:.85; transform:translateY(-4px); }
.works-thumb.is-current{
  opacity:1;
  border-color:var(--dust);
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,.26);
}
.works-thumb:focus-visible{ outline:2px solid var(--dust); outline-offset:3px; }

@media (max-width:560px){
  .works-stage{ --stage-h:min(46vh, 380px); }
  .works-thumb{ height:56px; gap:8px; }
}
@media (prefers-reduced-motion: reduce){
  .works-stage, .works-thumb, .stage-video{ transition:none; }
}

/* MODAL */
.reel-modal{
  position:fixed; inset:0; z-index:100;
  background:rgba(15,13,9,.88);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.reel-modal.open{ opacity:1; pointer-events:all; }
.reel-modal .modal-frame{
  width:min(88vw, 360px);
  aspect-ratio:9/16;
  border-radius:26px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.3);
  box-shadow:0 40px 80px rgba(0,0,0,.5);
  transform:scale(.95);
  transition:transform .25s ease;
}
.reel-modal.open .modal-frame{ transform:scale(1); }
.reel-modal video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-modal .modal-close{
  position:absolute; top:24px; right:24px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.3);
  color:var(--paper);
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* INFLUENCER MODE */
.influencer-section{
  padding:70px 8vw 120px;
  background:var(--paper);
  color:var(--ink);
}
.influencer-section .section-intro{ color:rgba(28,25,18,.55); }
.influencer-section .section-head h2{ color:var(--ink); }
.influencer-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
  align-items:center;
  margin-top:10px;
}
.featured-reel{
  position:relative;
  width:100%;
  max-width:300px;
  aspect-ratio:9/16;
  margin:0 auto;
  border-radius:30px;
  overflow:hidden;
  border:1.5px solid rgba(28,25,18,.18);
  background:linear-gradient(160deg, var(--mat-deep), var(--brown));
  box-shadow:0 30px 60px rgba(0,0,0,.2);
}
.featured-reel video{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-reel .reel-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:.06em;
  background:rgba(0,0,0,.45); color:var(--paper);
  border:1px solid rgba(255,255,255,.3);
  padding:4px 10px; border-radius:20px;
  display:flex; align-items:center; gap:5px;
}
.featured-reel .reel-tag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--rust);
}
.personality-line{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--rust);
  margin-bottom:18px;
}
.influencer-copy h3{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900; text-transform:uppercase;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1;
  margin-bottom:20px;
}
.personality-tags{
  display:flex; flex-wrap:wrap; gap:10px;
}
.personality-tags span{
  font-family:'Work Sans', sans-serif;
  font-size:.82rem; font-weight:500;
  background:rgba(53,98,73,.06);
  border:1.5px solid rgba(28,25,18,.16);
  padding:7px 14px; border-radius:20px;
}

.film-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:18px;
}
.film-card{
  background:rgba(53,98,73,.35);
  backdrop-filter:blur(6px);
  color:var(--paper);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px; padding:16px; position:relative; overflow:hidden;
}
.film-card .thumb{
  height:140px; border-radius:12px; margin-bottom:12px;
  background:linear-gradient(135deg, var(--brown), var(--mat-deep));
}
.film-card h3{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700; font-size:1.05rem; text-transform:uppercase;
}

/* DOCK NAV — LIQUID GLASS */
.dock-wrap{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:60;
  display:flex; flex-direction:column; align-items:center;
  /* The wrapper stays as tall as the (closed, invisible) menu, so left clickable
     it would sit over the hero dial and swallow its clicks. Only the parts you
     can actually see take pointer events. */
  pointer-events:none;
}
.dock-pill{ pointer-events:auto; }
.dock-menu{
  background:var(--glass-fill);
  backdrop-filter:blur(10px)  ;
  -webkit-backdrop-filter:blur(10px)  ;
  border:1px solid var(--glass-border);
  box-shadow:0 16px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.4);
  border-radius:20px;
  padding:8px;
  margin-bottom:10px;
  width:230px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; transform:translateY(10px) scale(.97);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.dock-wrap.open .dock-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.dock-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-radius:13px; cursor:pointer;
  font-size:12.5px; color:var(--paper); transition:background .15s;
}
.dock-row:hover{ background:rgba(255,255,255,.07); }
.dock-row .code{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--dust); margin-right:9px; }
.dock-row .toggle{
  width:30px; height:17px; border-radius:20px;
  background:rgba(255,255,255,.1); position:relative; flex-shrink:0;
  border:1px solid rgba(255,255,255,.2);
}
.dock-row .toggle::after{
  content:""; position:absolute; top:2px; left:2px;
  width:13px; height:13px; border-radius:50%;
  background:rgba(255,255,255,.8);
  transition:transform .15s, background .15s;
}
.dock-row:hover .toggle::after{ background:var(--rust); transform:translateX(13px); }

.dock-pill{
  background:var(--glass-fill);
  backdrop-filter:blur(10px)  ;
  -webkit-backdrop-filter:blur(10px)  ;
  border:1px solid var(--glass-border);
  border-radius:40px;
  padding:10px 18px;
  display:flex; align-items:center; gap:9px;
  cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(241,234,217,.9);
  box-shadow:0 12px 26px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.4);
}
.dock-pill .grabber{ width:22px; height:3px; border-radius:3px; background:rgba(241,234,217,.7); }
.dock-pill .chev{ transition:transform .2s; color:var(--dust); }
.dock-wrap.open .dock-pill .chev{ transform:rotate(180deg); }

@media (max-width: 720px){
  .archive-tabs{ display:none; }
  .dial{ --dial-size:250px; }
  .dial-hole{ width:56px; height:56px; margin:-28px 0 0 -28px; }
  .dial-center{ width:104px; height:104px; margin:-52px 0 0 -52px; }
  .dial-track{ inset:29px; }
}