/* ============================================================
   theapostrophe — brass & ink
   ============================================================ */
:root{
  --ink:#0b0906;
  --coal:#141008;
  --coal-2:#1b1610;
  --bone:#efe7d7;
  --bone-dim:rgba(239,231,215,.56);
  --bone-faint:rgba(239,231,215,.28);
  --brass:#c8a24a;
  --brass-bright:#e8c96a;
  --midnight:#274768;
  --line:rgba(239,231,215,.14);
  --line-brass:rgba(200,162,74,.4);
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease-silk:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-intro{overflow:hidden}
::selection{background:var(--midnight);color:var(--bone)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:none;color:inherit}

@media (hover:hover) and (pointer:fine){
  html,body,a,button,*{cursor:none!important}
}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--coal-2);border-radius:5px;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--brass)}

/* ---------- grain overlay ---------- */
.grain{
  position:fixed;inset:-100%;z-index:60;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}12%{transform:translate(-4%,3%)}25%{transform:translate(3%,-6%)}
  37%{transform:translate(-6%,-2%)}50%{transform:translate(5%,5%)}62%{transform:translate(-3%,4%)}
  75%{transform:translate(6%,-3%)}87%{transform:translate(-5%,1%)}
}

/* ---------- custom cursor ---------- */
#cursor,#cursor-dot{position:fixed;top:0;left:0;z-index:200;pointer-events:none;will-change:transform}
#cursor{
  font-family:var(--font-display);
  font-size:30px;line-height:1;color:var(--brass-bright);
  transform:translate(-50%,-58%);
  transition:opacity .3s;
  text-shadow:0 0 14px rgba(200,162,74,.45);
}
#cursor .glyph{display:inline-block;transition:transform .35s var(--ease-out)}
#cursor-dot{
  width:5px;height:5px;border-radius:50%;background:var(--bone);
  transform:translate(-50%,-50%);
  transition:width .3s,height .3s,background .3s;
}
#cursor.is-hover .glyph{transform:scale(1.7) rotate(-24deg)}
#cursor.is-view{
  font-size:15px;font-family:var(--font-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--brass-bright);
  width:74px;height:74px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
  text-shadow:none;
}
#cursor.is-view .glyph{transform:none}
#cursor-dot.is-hover{width:0;height:0}
@media (hover:none),(pointer:coarse){#cursor,#cursor-dot{display:none}}

/* ---------- intro ---------- */
#intro{
  position:fixed;inset:0;z-index:100;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#intro .intro-frame{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;transform:translateY(-2vh)}
#intro svg.apos-draw{width:clamp(70px,12vw,130px);height:auto;overflow:visible}
#intro svg.apos-draw path{
  fill:none;stroke:var(--brass);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
#intro svg.apos-draw path.fillable{fill:var(--brass);fill-opacity:0;stroke:none}
#intro .intro-brand{
  font-family:var(--font-display);
  font-size:clamp(34px,7.4vw,96px);
  font-weight:340;letter-spacing:-.02em;line-height:1;
  display:flex;overflow:hidden;
}
#intro .intro-brand .w{display:inline-block;transform:translateY(110%)}
#intro .intro-brand .apos-char{color:var(--brass);font-style:italic}
#intro .intro-tag{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--bone-dim);
  opacity:0;transform:translateY(10px);
}
#intro .intro-count{
  position:absolute;left:28px;bottom:24px;font-size:11px;letter-spacing:.3em;color:var(--bone-faint);
}
#intro .intro-hint{
  position:absolute;right:28px;bottom:24px;font-size:11px;letter-spacing:.3em;color:var(--bone-faint);
  text-transform:uppercase;opacity:0;
}
#intro .curtain{
  position:absolute;inset:0;background:var(--coal);
  transform:translateY(100%);pointer-events:none;
}
#intro .brass-line{
  position:absolute;left:0;right:0;top:50%;height:2px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;
}

/* ---------- nav ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,4vw,52px);
  mix-blend-mode:difference;
  transform:translateY(-100%);
}
#nav .logo{font-family:var(--font-display);font-size:22px;letter-spacing:-.01em}
#nav .logo em{color:var(--brass-bright);font-style:italic}
#nav ul{display:flex;gap:clamp(14px,3vw,38px);list-style:none;align-items:center}
#nav ul a{
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;position:relative;padding:6px 2px;
}
#nav ul a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass-bright);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
#nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
#nav a.contact-chip{
  border:1px solid var(--bone-faint);padding:8px 18px;border-radius:2px;
  transition:border-color .3s,background .3s,color .3s;
}
#nav a.contact-chip:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
#nav a.contact-chip::after{display:none}

/* ---------- hero ---------- */
#hero{position:relative;height:100svh;min-height:640px;overflow:hidden}
#hero .slide{
  position:absolute;inset:0;opacity:0;
}
#hero .slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);
  filter:saturate(.92) contrast(1.02);
}
#hero .slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,9,6,.88) 0%,rgba(11,9,6,.25) 42%,rgba(11,9,6,.35) 100%);
}
#hero .hero-title{
  position:absolute;left:clamp(18px,4vw,52px);bottom:clamp(96px,16vh,170px);z-index:5;
  pointer-events:none;
}
#hero .hero-title .row{overflow:hidden;display:block}
#hero .hero-title .row>span{
  display:inline-block;transform:translateY(110%);
  font-family:var(--font-display);font-weight:340;
  font-size:clamp(52px,10.5vw,150px);line-height:.98;letter-spacing:-.025em;
}
#hero .hero-title .apos-char{color:var(--brass);font-style:italic}
#hero .hero-sub{
  position:absolute;left:clamp(18px,4.2vw,56px);bottom:clamp(64px,12vh,128px);z-index:5;
  font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--bone-dim);
  opacity:0;
}
#hero .hero-meta{
  position:absolute;right:clamp(18px,4vw,52px);bottom:clamp(24px,5vh,48px);z-index:6;
  text-align:right;opacity:0;
}
#hero .hero-meta .cap-series{
  font-family:var(--font-display);font-style:italic;font-size:clamp(18px,2.2vw,26px);color:var(--brass-bright);
  display:block;overflow:hidden;
}
#hero .hero-meta .cap-who{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-dim)}
#hero .slide-dots{
  position:absolute;left:clamp(18px,4vw,52px);bottom:clamp(24px,5vh,48px);z-index:6;
  display:flex;gap:10px;opacity:0;
}
#hero .slide-dots button{
  width:34px;height:2px;background:var(--bone-faint);position:relative;overflow:hidden;display:block;
}
#hero .slide-dots button i{
  position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:left;
}
#hero .scroll-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--bone-faint);
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;
}
#hero .scroll-hint .tick{width:1px;height:34px;background:var(--brass);display:block;animation:tick 1.8s var(--ease-silk) infinite}
@keyframes tick{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:16px 0;background:var(--ink);position:relative;z-index:4;
}
.marquee .track{display:flex;gap:0;width:max-content;animation:marq 26s linear infinite}
.marquee span{
  font-family:var(--font-display);font-style:italic;font-size:clamp(16px,2vw,22px);
  color:var(--bone-dim);padding:0 .8em;white-space:nowrap;
}
.marquee b{color:var(--brass);font-weight:400}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- section chrome ---------- */
section{position:relative;padding:clamp(72px,11vh,130px) clamp(18px,4vw,52px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,6vh,64px);flex-wrap:wrap}
.sec-kicker{font-size:11px;letter-spacing:.44em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:14px}
.sec-title{
  font-family:var(--font-display);font-weight:340;letter-spacing:-.02em;
  font-size:clamp(38px,6.4vw,84px);line-height:1;
}
.sec-title .it{font-style:italic;color:var(--brass)}
.sec-note{max-width:340px;color:var(--bone-dim);font-size:14px}
[data-reveal]{opacity:0;transform:translateY(34px)}

/* ---------- work ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.chips button{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);
  border:1px solid var(--line);padding:9px 16px;border-radius:2px;
  transition:all .35s var(--ease-out);
}
.chips button:hover{border-color:var(--brass);color:var(--brass-bright)}
.chips button.on{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.work-grid{columns:3 300px;column-gap:16px}
.work-item{
  break-inside:avoid;margin-bottom:16px;position:relative;overflow:hidden;background:var(--coal);
  opacity:0;transform:translateY(40px);
}
.work-item img{width:100%;height:auto;transition:transform 1.1s var(--ease-out),filter .6s;filter:saturate(.9)}
.work-item:hover img{transform:scale(1.06);filter:saturate(1.05)}
.work-item .wi-cap{
  position:absolute;inset:auto 0 0 0;padding:44px 16px 14px;
  background:linear-gradient(to top,rgba(11,9,6,.9),transparent);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  transform:translateY(30%);opacity:0;transition:all .5s var(--ease-out);
}
.work-item:hover .wi-cap{transform:none;opacity:1}
.wi-cap .t{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--brass-bright)}
.wi-cap .p{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-dim)}
.work-item .wi-mark{
  position:absolute;top:12px;right:14px;font-family:var(--font-display);font-size:26px;color:var(--brass-bright);
  opacity:0;transform:translateY(-8px) rotate(20deg);transition:all .45s var(--ease-out);
}
.work-item:hover .wi-mark{opacity:1;transform:none}
.work-item.hidden{display:none}

/* ---------- series ---------- */
#series{background:var(--coal);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.series-block{
  display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:clamp(20px,3vw,48px);
  padding:clamp(34px,6vh,60px) 0;border-top:1px solid var(--line);
}
.series-block:first-of-type{border-top:none}
.series-meta{position:sticky;top:110px;align-self:start}
.series-meta .idx{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--brass)}
.series-meta h3{
  font-family:var(--font-display);font-weight:340;font-size:clamp(26px,3vw,40px);
  letter-spacing:-.01em;line-height:1.05;margin:8px 0 12px;
}
.series-meta .who{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:14px}
.series-meta .who b{color:var(--brass-bright);font-weight:500}
.series-meta p{color:var(--bone-dim);font-size:14px;max-width:300px}
.series-meta .cnt{margin-top:16px;font-size:11px;letter-spacing:.24em;color:var(--bone-faint);text-transform:uppercase}
.strip{
  display:flex;gap:14px;overflow-x:auto;padding:4px 4px 18px;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--brass) transparent;
  -webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar{height:4px}
.strip::-webkit-scrollbar-thumb{background:var(--line-brass)}
.strip figure{
  flex:0 0 auto;height:min(58vh,520px);position:relative;overflow:hidden;scroll-snap-align:start;
  border:1px solid var(--line);background:var(--ink);
}
.strip figure img{height:100%;width:auto;transition:transform 1s var(--ease-out),filter .5s;filter:saturate(.88)}
.strip figure:hover img{transform:scale(1.05);filter:saturate(1.05)}
.strip figure::after{
  content:"’";position:absolute;top:8px;right:12px;font-family:var(--font-display);font-size:24px;color:var(--brass-bright);
  opacity:0;transition:opacity .4s;
}
.strip figure:hover::after{opacity:1}
.strip-hint{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-faint);margin-top:4px}
@media (max-width:860px){
  .series-block{grid-template-columns:1fr}
  .series-meta{position:static}
}

/* ---------- persons ---------- */
#persons .person-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;
}
.person-card{position:relative;overflow:hidden;background:var(--coal)}
.person-card img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(.85) saturate(.8);transition:filter .7s,transform 1s var(--ease-out)}
.person-card:hover img{filter:grayscale(0) saturate(1);transform:scale(1.05)}
.person-card .pc-name{
  position:absolute;left:0;right:0;bottom:0;padding:38px 14px 12px;
  background:linear-gradient(to top,rgba(11,9,6,.92),transparent);
  display:flex;flex-direction:column;gap:2px;
}
.pc-name b{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:.01em}
.pc-name span{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim)}
.person-card .owner-tag{
  position:absolute;top:10px;left:10px;background:var(--brass);color:var(--ink);
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;padding:5px 9px;
}
.person-card::before,.person-card::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid var(--brass);z-index:2;
  transition:all .4s var(--ease-out);opacity:0;
}
.person-card::before{top:8px;left:8px;border-right:none;border-bottom:none}
.person-card::after{bottom:8px;right:8px;border-left:none;border-top:none}
.person-card:hover::before,.person-card:hover::after{opacity:1}

/* ---------- about ---------- */
#about{background:var(--ink)}
.about-grid{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:clamp(28px,5vw,80px)}
.about-left{position:sticky;top:120px;align-self:start}
.about-left .big-apostrophe{
  font-family:var(--font-display);font-size:clamp(120px,16vw,240px);line-height:.8;color:var(--brass);
  display:block;text-shadow:0 0 60px rgba(200,162,74,.25);
}
.about-left .sig{margin-top:18px;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--bone-dim)}
.about-right p{
  font-family:var(--font-display);font-weight:340;
  font-size:clamp(19px,2.3vw,29px);line-height:1.45;letter-spacing:.002em;
  margin-bottom:1.2em;color:var(--bone);
}
.about-right p em{color:var(--brass-bright)}
.about-right .fine{font-family:var(--font-body);font-size:13px;color:var(--bone-dim);letter-spacing:.04em}
.about-stats{display:flex;gap:clamp(20px,4vw,56px);margin-top:44px;flex-wrap:wrap}
.about-stats div b{
  font-family:var(--font-display);font-weight:340;font-size:clamp(30px,3.6vw,52px);color:var(--brass-bright);display:block;line-height:1;
}
.about-stats div span{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--bone-dim)}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.about-left{position:static}}

/* ---------- contact box ---------- */
#contact{padding-bottom:clamp(90px,12vh,150px)}
.contact-box{
  position:relative;border:1px solid var(--line-brass);outline:1px solid var(--line);outline-offset:8px;
  padding:clamp(40px,7vw,90px) clamp(24px,5vw,80px);
  background:linear-gradient(140deg,var(--coal) 0%,var(--ink) 70%);
  transform:rotate(-.6deg);
  text-align:center;overflow:hidden;
}
.contact-box::before,.contact-box::after{
  content:"’";position:absolute;font-family:var(--font-display);color:var(--brass);opacity:.16;font-size:220px;line-height:1;
}
.contact-box::before{top:-40px;left:8px}
.contact-box::after{bottom:-90px;right:16px}
.contact-box .kicker{font-size:11px;letter-spacing:.44em;text-transform:uppercase;color:var(--brass);margin-bottom:20px}
.contact-box h2{
  font-family:var(--font-display);font-weight:340;font-size:clamp(30px,5vw,64px);line-height:1.08;letter-spacing:-.015em;
  margin-bottom:34px;
}
.contact-box h2 em{color:var(--brass-bright)}
.contact-links{display:flex;gap:clamp(18px,4vw,54px);justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.contact-links a,.contact-links span{
  font-size:clamp(14px,1.6vw,18px);letter-spacing:.06em;position:relative;padding-bottom:6px;color:var(--bone);
}
.contact-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.contact-links a:hover::after{transform:scaleX(1);transform-origin:left}
.contact-links .lab{display:block;font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:6px}
.contact-links a:hover{color:var(--brass-bright)}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);padding:26px clamp(18px,4vw,52px);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-faint);
}
footer em{color:var(--brass);font-style:italic}

/* ---------- lightbox ---------- */
#lightbox{
  position:fixed;inset:0;z-index:120;background:rgba(8,6,4,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out);
  backdrop-filter:blur(6px);
}
#lightbox.open{opacity:1;pointer-events:auto}
#lightbox figure{max-width:min(1200px,92vw);text-align:center;transform:scale(.96);transition:transform .45s var(--ease-out)}
#lightbox.open figure{transform:scale(1)}
#lightbox img{max-height:80vh;max-width:92vw;margin:0 auto;border:1px solid var(--line-brass);box-shadow:0 30px 90px rgba(0,0,0,.6)}
#lightbox figcaption{
  margin-top:16px;display:flex;gap:18px;justify-content:center;align-items:baseline;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim);
}
#lightbox figcaption .t{font-family:var(--font-display);font-style:italic;font-size:18px;letter-spacing:.02em;text-transform:none;color:var(--brass-bright)}
#lightbox .lb-btn{
  position:fixed;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:34px;color:var(--bone-dim);
  padding:20px;transition:color .3s,transform .3s;z-index:2;
}
#lightbox .lb-btn:hover{color:var(--brass-bright)}
#lightbox .lb-prev{left:12px}
#lightbox .lb-next{right:12px}
#lightbox .lb-close{top:18px;right:20px;transform:none;font-size:16px;letter-spacing:.3em;text-transform:uppercase;font-family:var(--font-body)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}