/* =========================================================================
   LILY BISSET — Modern Brutalist Portfolio
   styles.css
   ========================================================================= */

:root{
  --pink:#c41f86;
  --pink-deep:#a3186e;
  --ink:#0d0d0c;
  --ink-2:#141413;
  --paper:#e9e5db;
  --paper-2:#e0dccf;
  --paper-line:#11110f;
  --white:#f4f1ea;
  --muted:#9c968a;
  --hero-h: clamp(600px, 93vh, 1000px);
  --pad: clamp(20px, 4.4vw, 84px);
  --font-display:"Anton", Impact, sans-serif;
  --font-head:"Archivo", "Arial Narrow", sans-serif;
  --font-mono:"Space Mono", ui-monospace, monospace;
  --accent-orange:#e8852c;
  --accent-teal:#1fa89a;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--pink);color:#fff;}

/* ---- shared bits ------------------------------------------------------- */
.mono-label{
  font-family:var(--font-mono);
  font-size:clamp(10px,0.78vw,13px);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.tag-square{
  display:inline-block;width:.72em;height:.72em;background:var(--pink);
  vertical-align:baseline;margin-right:.6em;
}

/* grain overlay used on dark areas */
.grain{position:relative;}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:40;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.16;mix-blend-mode:overlay;
}
.grain--paper::after{opacity:.5;mix-blend-mode:multiply;}

/* duotone image treatments */
.duo{position:relative;background:#0d0d0c;overflow:hidden;}
.duo img{filter:grayscale(1) contrast(1.08) brightness(1.06);}
.duo::after{content:"";position:absolute;inset:0;background:var(--pink);mix-blend-mode:multiply;pointer-events:none;}
.gs img{filter:grayscale(1) contrast(1.06) brightness(1.02);}

/* =========================================================================
   TOP NAV
   ========================================================================= */
.topnav{
  position:absolute;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  padding:clamp(16px,2vw,26px) var(--pad);
}
.brandmark{display:flex;align-items:center;gap:14px;}
.eye{width:34px;height:22px;flex:none;}
.swatches{display:flex;gap:5px;}
.swatches i{width:11px;height:11px;display:block;background:var(--white);}
.swatches i:first-child{background:var(--pink);}
.nav-div{width:1px;height:18px;background:#4a4843;margin:0 4px;}
.topnav nav{display:flex;align-items:center;gap:.9em;color:var(--white);}
.topnav nav b{font-weight:700;}
.topnav .dot{color:var(--pink);}
.topnav .spacer{flex:1;}
.nav-corner{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--muted);}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;width:100%;height:var(--hero-h);
  background:#0c0b0a;overflow:hidden;
  border-bottom:2px solid #000;
}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;}
.hero__vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,9,8,.96) 0%, rgba(10,9,8,.88) 20%, rgba(10,9,8,.42) 38%, rgba(10,9,8,0) 54%),
    linear-gradient(0deg, rgba(10,9,8,.5) 0%, rgba(10,9,8,0) 26%);
}

/* giant recreated wordmark */
.hero__word{
  position:absolute;z-index:2;top:-4.5%;right:0;width:86%;
  text-align:right;font-family:var(--font-display);
  color:var(--pink);line-height:.74;letter-spacing:.005em;
  text-transform:uppercase;-webkit-text-stroke:0;
  mix-blend-mode:normal;user-select:none;
  filter:saturate(1.05);
}
.hero__word .l1{font-size:24vw;}
.hero__word .l2{font-size:28vw;letter-spacing:.04em;margin-top:-.08em;}
.hero__word::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  mix-blend-mode:overlay;opacity:.35;
}

/* checker + star overlay */
.hero__checkers{position:absolute;z-index:5;top:5%;left:35%;width:54.4%;pointer-events:none;}

/* woman cutout */
.hero__woman{
  position:absolute;z-index:5;bottom:0;right:5%;height:90.2%;width:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
}

/* scribbles */
.hero__squigs{position:absolute;z-index:6;left:21%;bottom:5%;width:25%;aspect-ratio:1163/750;overflow:hidden;pointer-events:none;opacity:.95;}
.hero__squigs img{position:absolute;top:0;left:0;width:133.4%;height:auto;max-width:none;}

/* right vertical text */
.hero__vtext{
  position:absolute;z-index:7;right:clamp(8px,1.1vw,20px);bottom:6%;
  writing-mode:vertical-rl;font-family:var(--font-mono);font-weight:700;
  letter-spacing:.42em;font-size:clamp(11px,0.95vw,15px);color:var(--pink);
  text-transform:uppercase;display:flex;align-items:center;gap:1.2em;
}
.hero__vtext .arrows{letter-spacing:0;color:var(--white);opacity:.85;}

/* 1982 + play */
.hero__year{
  position:absolute;z-index:7;right:6.5%;top:28%;
  display:flex;align-items:center;gap:.7em;color:var(--white);
  font-family:var(--font-mono);font-size:clamp(13px,1.05vw,17px);letter-spacing:.16em;
}
.hero__year .tri{color:var(--pink);font-size:1.1em;}
.hero__year .play{
  width:0;height:0;border-left:11px solid var(--pink);
  border-top:7px solid transparent;border-bottom:7px solid transparent;
}

/* left icon rail */
.hero__rail{
  position:absolute;z-index:7;left:clamp(16px,1.9vw,30px);top:8%;
  display:flex;flex-direction:column;gap:clamp(16px,1.9vw,28px);color:#cfcabf;
}
.hero__rail svg{width:26px;height:26px;display:block;opacity:.85;}

/* bottom-left mini bars */
.hero__bars{
  position:absolute;z-index:7;left:var(--pad);bottom:5.5%;
  display:flex;align-items:center;gap:7px;
}
.hero__bars span{height:13px;display:block;}
.hero__bars .b1{width:13px;background:var(--pink);}
.hero__bars .b2{width:44px;background:repeating-linear-gradient(90deg,#bdb8ad 0 3px,#3a3833 3px 6px);}
.hero__bars .b3{width:24px;border:1.5px solid #bdb8ad;background:transparent;}

/* left copy block */
.hero__copy{
  position:absolute;z-index:9;left:var(--pad);top:50%;transform:translateY(-47%);
  width:min(43%,560px);max-width:560px;
}
.hero__copy .kicker{
  color:var(--pink);font-family:var(--font-mono);font-weight:700;
  font-size:clamp(11px,0.9vw,14px);letter-spacing:.24em;line-height:1.9;margin:0 0 .7em;
  text-transform:uppercase;
}
.hero__copy .kicker.k2{font-weight:400;color:var(--pink);opacity:.92;margin-bottom:2em;font-size:clamp(9.5px,0.78vw,12.5px);letter-spacing:.18em;line-height:1.85;}
.hero__copy h1{
  font-family:var(--font-head);font-weight:800;font-stretch:condensed;
  font-size:clamp(26px,2.6vw,44px);line-height:1.04;letter-spacing:-.01em;
  margin:0 0 .85em;color:var(--white);text-wrap:balance;
}
.hero__copy h1 .pinkword{color:var(--pink);}
.hero__copy p{
  font-family:var(--font-mono);font-size:clamp(12px,0.92vw,14.5px);
  line-height:1.65;color:#d7d2c8;margin:0 0 1.6em;max-width:46ch;text-wrap:pretty;
}
.hero__copy .cta{
  display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.16em;font-size:12.5px;
  text-transform:uppercase;color:var(--white);
  border:1.5px solid var(--white);padding:.85em 1.4em;transition:.22s ease;
}
.hero__copy .cta .arr{transition:transform .22s ease;}
.hero__copy .cta:hover{background:var(--pink);border-color:var(--pink);color:#fff;}
.hero__copy .cta:hover .arr{transform:translateX(5px);}

/* =========================================================================
   FEATURES (cream, 3 columns)
   ========================================================================= */
.features{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--paper);color:var(--ink);
  border-bottom:2px solid #000;
}
.feature{
  position:relative;padding:clamp(26px,3vw,56px) var(--pad) clamp(30px,3.4vw,60px);
  border-right:2px solid #000;display:flex;flex-direction:column;min-height:clamp(300px,24vw,380px);
}
.features .feature:last-child{border-right:0;}
.feature__num{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(15px,1.2vw,20px);
  letter-spacing:.1em;margin-bottom:clamp(14px,1.6vw,26px);
}
.feature__title{
  font-family:var(--font-head);font-weight:800;font-stretch:condensed;
  text-transform:uppercase;line-height:.92;letter-spacing:-.01em;
  font-size:clamp(34px,3.6vw,58px);margin:0 0 auto;
}
.feature__desc{
  font-family:var(--font-mono);font-size:clamp(12px,0.9vw,14.5px);line-height:1.55;
  color:#33312c;margin:clamp(16px,1.8vw,26px) 0 clamp(18px,2vw,28px);max-width:30ch;
}
.feature__link{
  display:inline-flex;align-items:center;gap:.9em;align-self:flex-start;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.12em;font-size:12.5px;
  text-transform:uppercase;border-bottom:2px solid transparent;padding-bottom:3px;
  transition:.2s ease;
}
.feature__link .arr{transition:transform .2s ease;}
.feature__link:hover{border-color:var(--ink);}
.feature__link:hover .arr{transform:translateX(6px);color:var(--pink);}
.feature__art{position:absolute;right:var(--pad);bottom:clamp(64px,7vw,104px);width:clamp(74px,8vw,120px);height:clamp(74px,8vw,120px);}
.feature__art svg{width:100%;height:100%;overflow:visible;}

/* =========================================================================
   MIDBAND (substack dark + studio cream)
   ========================================================================= */
.midband{display:grid;grid-template-columns:33% 67%;border-bottom:2px solid #000;}

.substack{
  background:var(--ink);color:var(--white);position:relative;
  padding:clamp(26px,3vw,52px) var(--pad);display:flex;flex-direction:column;
}
.substack__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(22px,3vw,44px);}
.substack__head .new{color:var(--pink);font-weight:700;letter-spacing:.2em;font-size:12px;}
.substack h3{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(20px,1.9vw,30px);
  line-height:1.12;margin:0 0 .7em;color:var(--white);
}
.substack p{font-family:var(--font-mono);font-size:clamp(12px,0.9vw,14px);line-height:1.6;color:#bdb8ad;margin:0 0 1.4em;max-width:34ch;}
.substack__lead em{color:var(--pink);font-style:normal;}
.substack__posts{
  list-style:none;margin:0 0 auto;padding:0;border-top:1px solid #36342f;
}
.substack__post{border-bottom:1px solid #36342f;}
.substack__post a{
  display:flex;align-items:center;gap:clamp(12px,1.3vw,20px);
  padding:clamp(13px,1.5vw,18px) 2px;transition:padding-left .22s ease;
}
.substack__post a:hover{padding-left:9px;}
.substack__post .pidx{flex:none;font-family:var(--font-mono);font-weight:700;color:var(--pink);font-size:13px;}
.substack__post .pbody{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
.substack__post .ptitle{font-family:var(--font-mono);font-weight:700;color:var(--white);font-size:clamp(13px,1vw,15.5px);line-height:1.22;transition:color .2s;}
.substack__post .pmeta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.substack__post a:hover .ptitle{color:var(--pink);}
.substack__post .parr{flex:none;color:var(--muted);transition:transform .2s ease, color .2s ease;}
.substack__post a:hover .parr{transform:translateX(4px);color:var(--pink);}
.substack__link{
  display:inline-flex;align-items:center;gap:.9em;margin-top:clamp(20px,2.4vw,34px);
  font-family:var(--font-mono);font-weight:700;letter-spacing:.12em;font-size:12.5px;
  text-transform:uppercase;transition:.2s;align-self:flex-start;
}
.substack__link .arr{transition:transform .2s;}
.substack__link:hover{color:var(--pink);}
.substack__link:hover .arr{transform:translateX(6px);}
.substack__art{margin-top:clamp(22px,2.6vw,34px);width:clamp(150px,15vw,220px);aspect-ratio:3/4;align-self:flex-start;border:2px solid #000;}
.substack__art img{width:100%;height:100%;object-fit:cover;}

.studio{
  position:relative;overflow:hidden;
  background:var(--paper);color:var(--ink);
  padding:clamp(30px,3.4vw,60px) var(--pad);
  display:flex;flex-direction:column;gap:clamp(22px,2.8vw,44px);
  min-height:clamp(420px,34vw,560px);
}
.studio::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, var(--paper) 0%, rgba(233,229,219,.94) 17%, rgba(233,229,219,.58) 37%, rgba(233,229,219,.12) 60%, rgba(233,229,219,0) 78%);
}
.studio__head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(18px,2.4vw,40px);flex-wrap:wrap;}
.studio__intro{display:flex;flex-direction:column;}
.studio__intro .lbl{font-weight:700;letter-spacing:.16em;margin-bottom:clamp(18px,2vw,30px);display:flex;align-items:center;}
.studio__intro .lbl .sq{width:.8em;height:.8em;background:var(--ink);margin-right:.7em;}
.studio__intro h3{
  font-family:var(--font-head);font-weight:800;font-stretch:condensed;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,72px);line-height:.94;margin:0;letter-spacing:-.012em;
  text-wrap:balance;
}
.studio__intro h3 .pinkw{color:var(--pink);}
.studio__link{
  position:absolute;z-index:3;
  left:var(--pad);bottom:clamp(30px,3.4vw,60px);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.14em;
  font-size:13px;text-transform:uppercase;
  color:#fff;background:var(--pink);
  border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:.9em 1.35em;
  transition:transform .16s ease,box-shadow .16s ease,background .2s ease;
}
.studio__link .arr{transition:transform .2s ease;}
.studio__link:hover{
  background:var(--ink);color:#fff;border-color:var(--ink);
  transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);
}
.studio__link:hover .arr{transform:translateX(4px);}

.studio__figure{position:absolute;inset:0;z-index:0;width:100%;height:100%;}
.studio__figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

.studio__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(80px,7vw,122px);gap:clamp(7px,0.8vw,13px);
}
.studio__grid figure{margin:0;overflow:hidden;border:2px solid #000;background:#000;height:100%;position:relative;}
.studio__grid figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.studio__grid figure:hover img{transform:scale(1.07);}
.g-big{grid-column:span 2;grid-row:span 2;}
.g-w2{grid-column:span 2;}

/* =========================================================================
   STUDIO TICKER (full-width auto-scroll marquee)
   ========================================================================= */
.ticker{
  position:relative;background:var(--ink);overflow:hidden;
  border-bottom:2px solid #000;display:flex;align-items:stretch;
}
.ticker__tag{
  flex:none;z-index:4;background:var(--pink);color:#fff;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;
  padding:0 clamp(16px,1.6vw,26px);
  width:clamp(140px,14vw,175px);
  font-family:var(--font-mono);
}
.ticker__tag__head{
  font-weight:700;letter-spacing:.16em;
  font-size:clamp(10px,0.72vw,11px);text-transform:uppercase;line-height:1.3;
}
.ticker__tag__sub{
  font-weight:400;letter-spacing:.03em;
  font-size:clamp(9px,0.65vw,10.5px);line-height:1.45;opacity:.85;
}
.ticker__tag .dotpulse{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.ticker__viewport{position:relative;flex:1;overflow:hidden;}
.ticker__track{display:flex;width:max-content;animation:tickerScroll 80s linear infinite;}
.ticker:hover .ticker__track{animation-play-state:paused;}
.ticker figure{
  flex:none;margin:0;height:clamp(112px,12vw,168px);aspect-ratio:16/9;
  border-right:2px solid #000;overflow:hidden;position:relative;background:#000;
}
.ticker figure img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(1.02);
  transition:filter .45s ease, transform .55s ease;
}
.ticker figure:hover img{filter:grayscale(0) contrast(1.05);transform:scale(1.06);}
.ticker__edge{position:absolute;top:0;bottom:0;width:clamp(48px,6vw,120px);z-index:3;pointer-events:none;}
.ticker__edge.l{left:0;background:linear-gradient(90deg,var(--ink),transparent);}
.ticker__edge.r{right:0;background:linear-gradient(270deg,var(--ink),transparent);}
@keyframes tickerScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.ticker__track{animation:none;}}

/* =========================================================================
   FOOTER
   ========================================================================= */
.sitefoot{
  background:var(--ink);color:var(--white);
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
}
.foot-logo{
  background:var(--pink);color:#fff;font-family:var(--font-display);
  font-size:clamp(26px,2.4vw,40px);display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,1.8vw,28px) clamp(20px,1.8vw,30px);letter-spacing:.04em;
}
.foot-id{padding:clamp(16px,1.7vw,26px) clamp(20px,2vw,34px);display:flex;flex-direction:column;justify-content:center;border-right:1px solid #2a2926;align-items:flex-start;}
.foot-id b{font-family:var(--font-mono);font-weight:700;letter-spacing:.14em;font-size:clamp(13px,1vw,16px);}
.foot-id span{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-top:4px;}
.foot-mail{padding:clamp(16px,1.7vw,26px) clamp(20px,2vw,34px);display:flex;flex-direction:column;justify-content:center;border-right:1px solid #2a2926;}
.foot-mail span{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.foot-mail a{font-family:var(--font-mono);font-size:clamp(12px,0.95vw,14px);color:var(--white);background:none;border:0;cursor:pointer;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-align:left;padding:0;}
.foot-mail a:hover{color:var(--pink);}
.foot-art{display:flex;align-items:center;justify-content:center;padding:clamp(10px,1.2vw,18px) clamp(18px,2vw,30px);border-right:1px solid #2a2926;}
.foot-art img{width:clamp(56px,5vw,74px);height:auto;display:block;transition:transform .28s cubic-bezier(.2,.7,.2,1);}
.foot-art:hover img{transform:rotate(-5deg) scale(1.07);}
.foot-art:focus-visible{outline:2px solid var(--pink);outline-offset:-2px;}
.foot-spacer{flex:1;}
.foot-social{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);padding:clamp(16px,1.7vw,26px) clamp(20px,2vw,34px);}
.foot-social a{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;color:var(--white);transition:.2s;}
.foot-social a:hover{color:var(--pink);}
.foot-copy{padding:clamp(16px,1.7vw,26px) clamp(20px,2vw,34px);display:flex;flex-direction:column;justify-content:center;text-align:right;border-left:1px solid #2a2926;}
.foot-copy span{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--muted);}

/* =========================================================================
   CONTACT MODAL (MailerLite form)
   ========================================================================= */
.cmodal{position:fixed;inset:0;z-index:300;display:none;}
.cmodal.is-open{display:block;}
.cmodal__backdrop{position:absolute;inset:0;background:rgba(12,11,10,.72);backdrop-filter:blur(3px);}
.cmodal__panel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(540px,calc(100vw - 36px));max-height:calc(100vh - 48px);
  background:var(--white);border:2px solid #000;box-shadow:10px 10px 0 var(--pink);
  display:flex;flex-direction:column;overflow:hidden;
}
.cmodal__close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:36px;height:36px;border:1.6px solid #16140f;background:var(--white);
  font-family:var(--font-mono);font-size:15px;color:#16140f;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.cmodal__close:hover{background:var(--pink);border-color:var(--pink);color:#fff;}
.cmodal__head{padding:clamp(24px,3vw,34px) clamp(24px,3vw,34px) clamp(14px,1.6vw,18px);border-bottom:2px solid #000;}
.cmodal__eyebrow{
  font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pink-deep);margin:0 0 .8em;
}
.cmodal__title{
  font-family:var(--font-display);font-size:clamp(28px,3.4vw,42px);
  text-transform:uppercase;line-height:.9;color:#16140f;margin:0;
}
.cmodal__body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#f4f1ea;}
.cmodal__framewrap{position:relative;height:clamp(380px,54vh,520px);}
.cmodal__placeholder{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;text-align:center;
  padding:clamp(24px,4vw,40px);background:#f4f1ea;
}
.cmodal__spinner{
  width:30px;height:30px;border:2.5px solid #d8d2c6;border-top-color:var(--pink);
  border-radius:50%;animation:cmspin 0.9s linear infinite;
}
.cmodal__placeholder.is-settled .cmodal__spinner{display:none;}
@keyframes cmspin{to{transform:rotate(360deg);}}
.cmodal__phlede{
  font-family:var(--font-mono);font-size:13px;line-height:1.6;color:#5a554a;
  margin:0;max-width:34ch;
}
.cmodal__cta{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.14em;font-size:12.5px;
  text-transform:uppercase;color:#fff;background:var(--pink);
  border:2px solid #16140f;box-shadow:4px 4px 0 #16140f;padding:.95em 1.5em;
  transition:transform .16s ease, box-shadow .16s ease, background .2s ease;
}
.cmodal__cta:hover{background:#16140f;transform:translate(2px,2px);box-shadow:2px 2px 0 #16140f;}
.cmodal__frame{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;
  background:transparent;display:block;
}
@media (max-width:560px){
  .cmodal__panel{box-shadow:6px 6px 0 var(--pink);}
}

/* =========================================================================
   ENTRANCE — lower sections only
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .js .reveal.in{opacity:1;transform:none;}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1100px){
  .midband{grid-template-columns:1fr;}
  .studio{grid-template-columns:1fr;gap:clamp(20px,4vw,32px);}
  .studio__intro{max-width:none;}
  .studio__grid{grid-template-columns:repeat(4,1fr);}
  .studio__link{position:static;margin-top:8px;align-self:flex-start;box-shadow:3px 3px 0 var(--ink);}
}
@media (max-width:860px){
  :root{--hero-h:auto;}
  .topnav nav{display:none;}
  .hero{display:flex;flex-direction:column;}
  .hero__bg{position:absolute;}
  .hero__visual{position:relative;width:100%;height:62vw;min-height:320px;}
  .hero__word{top:6%;width:96%;right:2%;}
  .hero__word .l1{font-size:24vw;}
  .hero__word .l2{font-size:26vw;}
  .hero__woman{height:86%;right:-4%;}
  .hero__checkers{top:8%;left:30%;width:70%;}
  .hero__copy{position:relative;width:auto;max-width:none;inset:auto;transform:none;
    padding:clamp(26px,7vw,44px) var(--pad) clamp(36px,9vw,56px);background:var(--ink);z-index:9;}
  .hero__copy h1{font-size:clamp(26px,6.4vw,40px);}
  .hero__rail,.hero__year,.hero__bars{display:none;}
  .hero__vtext{display:none;}
  .features{grid-template-columns:1fr;}
  .feature{
    border-right:0;border-bottom:2px solid #000;
    align-items:center;text-align:center;
    min-height:0;padding:clamp(36px,7vw,52px) var(--pad);
  }
  .feature__art{
    position:static;order:-1;
    width:clamp(72px,15vw,96px);height:clamp(72px,15vw,96px);
    margin:0 0 clamp(16px,3vw,24px);
  }
  .feature__num{margin-bottom:.6em;}
  .feature__title{font-size:clamp(40px,10vw,64px);}
  .feature__desc{max-width:none;}
  .feature__link{align-self:center;}
  .studio{min-height:clamp(460px,60vw,540px);}
  .sitefoot{flex-direction:column;}
  .foot-id,.foot-mail,.foot-copy{border:0;border-top:1px solid #2a2926;text-align:center;}
  .foot-id{align-items:center;}
  .foot-mail{align-items:center;}
  .foot-mail a{text-align:center;}
  .foot-art{border:0;border-top:1px solid #2a2926;justify-content:center;}
  .foot-copy{align-items:center;}
  .foot-social{justify-content:center;border-top:1px solid #2a2926;width:100%;}
  /* ticker: tag stacks above the photo carousel */
  .ticker{flex-direction:column;}
  .ticker__tag{
    width:100%;flex-direction:row;align-items:center;justify-content:center;
    gap:0;padding:clamp(12px,2vw,16px) var(--pad);
  }
  .ticker__tag__head{font-size:clamp(10px,2.6vw,13px);letter-spacing:.08em;}
  .ticker__tag__head::after{content:" —";}
  .ticker__tag__sub{font-size:clamp(10px,2.6vw,13px);letter-spacing:.04em;opacity:1;font-weight:700;}
  .ticker__viewport{width:100%;}
}
@media (max-width:520px){
  .studio__grid{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================================
   COOKIE CONSENT BANNER
   ========================================================================= */
/* Lily Bisset — GDPR cookie consent banner (brutalist, bottom-right card).
   Reuses the site palette; falls back to literals if the tokens aren't present. */
.ccbar{
  position:fixed; z-index:400;
  right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px);
  width:min(340px, calc(100vw - 32px));
  background:var(--paper,#e9e5db); color:var(--ink,#0d0d0c);
  border:2px solid #16140f; box-shadow:6px 6px 0 #16140f;
  padding:18px 18px 16px;
  /* visible end-state is the base; animate IN from hidden */
  animation:ccBarIn .3s cubic-bezier(.2,.7,.2,1) both;
}
.ccbar.is-out{ animation:ccBarOut .25s ease forwards; }
@keyframes ccBarIn{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }
@keyframes ccBarOut{ from{opacity:1;transform:none;} to{opacity:0;transform:translateY(12px);} }

.ccbar__title{
  margin:0 0 6px; font-family:var(--font-mono,"Space Mono",monospace);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:12px;
  color:var(--ink,#0d0d0c);
}
.ccbar__text{
  margin:0 0 14px; font-family:var(--font-mono,"Space Mono",monospace);
  font-size:12.5px; line-height:1.55;
}
.ccbar__actions{ display:flex; gap:10px; }
.ccbar__btn{
  flex:1 1 0; cursor:pointer;
  font-family:var(--font-mono,"Space Mono",monospace);
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px;
  padding:.85em 1em; border:2px solid #16140f;
  transition:transform .14s ease, box-shadow .14s ease, background .2s ease, color .2s ease;
}
.ccbar__btn--reject{ background:var(--white,#f4f1ea); color:#16140f; box-shadow:3px 3px 0 #16140f; }
.ccbar__btn--reject:hover{ background:#16140f; color:#fff; transform:translate(2px,2px); box-shadow:1px 1px 0 #16140f; }
.ccbar__btn--accept{ background:var(--pink,#c41f86); color:#fff; box-shadow:3px 3px 0 #16140f; }
.ccbar__btn--accept:hover{ background:#16140f; color:#fff; transform:translate(2px,2px); box-shadow:1px 1px 0 #16140f; }
.ccbar__btn:focus-visible{ outline:3px solid var(--pink,#c41f86); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .ccbar, .ccbar.is-out{ animation:none; }
}
@media (max-width:520px){
  .ccbar{ right:12px; left:12px; bottom:12px; width:auto; box-shadow:4px 4px 0 #16140f; }
}

/* =========================================================================
   MINIATURE ART MODAL (gallery background + play buttons)
   ========================================================================= */
.mini{position:fixed;inset:0;z-index:320;display:none;}
.mini.is-open{display:flex;align-items:center;justify-content:center;}
.mini__backdrop{position:absolute;inset:0;background:rgba(12,11,10,.82);backdrop-filter:blur(3px);}
.mini__stage{
  position:relative;z-index:1;
  width:min(1180px, calc(92vh * 16 / 9));max-width:95vw;aspect-ratio:16/9;
  border:2px solid #16140f;box-shadow:10px 10px 0 var(--pink);
  background:#0d0d0c;
}
.mini__img{display:block;width:100%;height:100%;object-fit:cover;}
.mini__close{
  position:absolute;top:-2px;right:-2px;z-index:3;
  width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);
  border:2px solid #16140f;background:var(--white);color:#16140f;
  font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.mini__close:hover{background:var(--pink);border-color:var(--pink);color:#fff;}
/* play buttons */
.mini__play{
  position:absolute;z-index:2;transform:translate(-50%,-50%);
  width:clamp(52px,5.6vw,78px);aspect-ratio:1;border-radius:50%;
  border:2px solid #16140f;background:var(--pink);
  box-shadow:4px 4px 0 rgba(13,13,12,.55);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, background .2s ease;
}
.mini__play svg{width:38%;height:38%;display:block;margin-left:9%;fill:#fff;}
.mini__play:hover{background:#16140f;transform:translate(-50%,-50%) scale(1.1);box-shadow:6px 6px 0 rgba(13,13,12,.6);}
.mini__play:focus-visible{outline:3px solid var(--white);outline-offset:3px;}
.mini__play::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--pink);pointer-events:none;
  animation:miniPulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion:reduce){ .mini__play::after{animation:none;opacity:.5;} }
@keyframes miniPulse{0%{transform:scale(1);opacity:.7;}70%{transform:scale(1.5);opacity:0;}100%{opacity:0;}}
/* desktop play positions (% of 16:9 stage) */
.mini__play--1{left:47%;top:35%;}
.mini__play--2{left:72.5%;top:30%;}
.mini__play--3{left:88%;top:66%;}
@media (max-width:760px){
  .mini__stage{width:calc(100vw - 24px);height:100dvh;aspect-ratio:unset;max-width:calc(100vw - 24px);box-shadow:none;border:none;overflow:hidden;}
  .mini__stage picture{position:absolute;inset:0;display:block;width:100%;height:100%;}
  .mini__img{object-position:center center;}
  .mini__play--1{left:67%;top:25.5%;}
  .mini__play--2{left:18%;top:50%;}
  .mini__play--3{left:83%;top:73.5%;}
}

/* =========================================================================
   VIDEO MODAL (YouTube player, opens on top of the gallery)
   ========================================================================= */
.vmodal{position:fixed;inset:0;z-index:340;display:none;}
.vmodal.is-open{display:flex;align-items:center;justify-content:center;}
.vmodal__backdrop{position:absolute;inset:0;background:rgba(12,11,10,.9);backdrop-filter:blur(4px);}
.vmodal__panel{
  position:relative;z-index:1;
  width:min(960px,92vw);aspect-ratio:16/9;max-height:88vh;
  border:2px solid #16140f;box-shadow:10px 10px 0 var(--pink);background:#000;
}
.vmodal__close{
  position:absolute;top:-2px;right:-2px;z-index:3;
  width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);
  border:2px solid #16140f;background:var(--white);color:#16140f;
  font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.vmodal__close:hover{background:var(--pink);border-color:var(--pink);color:#fff;}
.vmodal__panel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}