/* ==========================================================================
   JoyTown Productions
   Palette and materials taken from the Overthinking It set: sage panelling,
   tungsten practicals, script paper, and the red thread on the evidence board.
   ========================================================================== */

:root{
  --ink:#0C110F;            /* green-biased near black */
  --ink-2:#131A17;
  --ink-3:#1B231F;
  --sage:#4E5F53;
  --sage-dim:#8FA093;
  --bone:#F0EADD;           /* script paper */
  --bone-2:#E4DCCB;
  --bone-dim:#B6AF9F;
  --on-ink:#F0EADD;
  --on-ink-dim:#A9A79C;
  --on-bone:#17201B;
  --on-bone-dim:#5A6259;
  --bulb:#F0AC5B;           /* tungsten practical */
  --bulb-deep:#8A5312;
  --thread:#E4644A;         /* pinboard string */
  --thread-deep:#A63525;

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --read:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --d1:clamp(3.1rem,10.6vw,11rem);
  --d2:clamp(2.5rem,7vw,6.6rem);
  --d3:clamp(1.9rem,4.2vw,3.5rem);
  --d4:clamp(1.5rem,2.6vw,2.3rem);
  --lede:clamp(1.16rem,1.85vw,1.62rem);
  --body:clamp(1.02rem,1.05vw,1.14rem);

  --gut:clamp(1.25rem,5vw,4.5rem);
  --max:80rem;
  --ease:cubic-bezier(.19,1,.22,1);
  --nav-h:5.4rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--on-ink);
  font-family:var(--read);font-size:var(--body);line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  animation:pagein .5s var(--ease) both;
}
@keyframes pagein{from{opacity:0}to{opacity:1}}
body.is-leaving{opacity:0;transition:opacity .18s ease}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--bone);color:var(--on-bone);
  padding:.8rem 1.2rem;font-family:var(--sans);font-size:.9rem}
.skip:focus{left:.6rem;top:.6rem}
:focus-visible{outline:2px solid var(--bulb);outline-offset:3px}

/* ---------- structure ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.wrap--wide{max-width:104rem}
.panel{padding-block:clamp(4.5rem,11vw,10rem)}
.panel--tight{padding-block:clamp(3rem,7vw,6rem)}
.panel--tall{padding-block:clamp(6.5rem,16vw,15rem)}
.paper{background:var(--bone);color:var(--on-bone)}
.paper .dim{color:var(--on-bone-dim)}
.dim{color:var(--on-ink-dim)}
.sage{background:var(--sage);color:var(--bone)}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:400;line-height:.94;letter-spacing:-.018em;margin:0;
  text-wrap:balance}
.d1{font-size:var(--d1);line-height:.9;letter-spacing:-.028em}
.d2{font-size:var(--d2)}
.d3{font-size:var(--d3);line-height:1.02}
.d4{font-size:var(--d4);line-height:1.12}
.italic{font-style:italic}
.lede{font-size:var(--lede);line-height:1.45;margin:0;font-weight:400}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.measure{max-width:34rem}
.measure--wide{max-width:44rem}

/* small caption / interface type — sans, not mono. Mono is reserved for
   genuine production metadata so that it keeps its meaning. */
.cap{font-family:var(--sans);font-size:.82rem;letter-spacing:.02em;line-height:1.5;margin:0;
  color:var(--on-ink-dim)}
.paper .cap{color:var(--on-bone-dim)}
.eyebrow{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 1.5rem;color:var(--sage-dim)}
.paper .eyebrow{color:var(--on-bone-dim)}
.eyebrow--bulb{color:var(--bulb)}
.paper .eyebrow--bulb{color:var(--bulb-deep)}

/* mono, used sparingly: slate strips, credits, fact sheets */
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}

/* ---------- links ---------- */
.link{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .42s var(--ease)}
.link:hover,.link:focus-visible{background-size:100% 1px}
.arrow{display:inline-flex;align-items:baseline;gap:.55em;text-decoration:none;
  font-family:var(--sans);font-size:.95rem;letter-spacing:.01em;color:var(--bulb)}
.paper .arrow{color:var(--bulb-deep)}
.arrow span{transition:transform .45s var(--ease);display:inline-block}
.arrow:hover span,.arrow:focus-visible span{transform:translateX(.4em)}
.arrow::before{content:"";position:absolute}
.arrow{position:relative;padding-bottom:.35rem}
.arrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease)}
.arrow:hover::after,.arrow:focus-visible::after{transform:scaleX(1)}

/* ---------- navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;
  transition:background-color .45s var(--ease),backdrop-filter .45s var(--ease),
             border-color .45s var(--ease);
  border-bottom:1px solid transparent}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:var(--nav-h);transition:height .45s var(--ease)}
.nav.is-stuck{background:rgba(12,17,15,.82);backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:rgba(240,234,221,.11)}
.nav.is-stuck .nav__in{height:4.1rem}
.mark em{font-style:italic}
.nav__links{display:flex;gap:clamp(1.1rem,2.4vw,2.4rem);list-style:none;margin:0;padding:0;
  align-items:center}
.nav__link{font-family:var(--sans);font-size:.92rem;text-decoration:none;color:var(--on-ink);
  opacity:.72;transition:opacity .35s var(--ease);position:relative;padding-block:.35rem}
.nav__link:hover,.nav__link:focus-visible{opacity:1}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--bulb);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--ease)}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{opacity:1}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--on-ink);opacity:.35}
.burger{display:none;background:none;border:0;color:var(--on-ink);font-family:var(--sans);
  font-size:.92rem;cursor:pointer;padding:.6rem 0;align-items:center;gap:.55rem}
.burger__bars{display:inline-block;width:1.15rem;height:.5rem;position:relative}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:currentColor;transition:transform .4s var(--ease)}
.burger__bars::before{top:0}.burger__bars::after{bottom:0}
.menu{position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.menu.is-open{opacity:1;visibility:visible}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.menu a{font-family:var(--serif);font-size:clamp(2.1rem,9vw,3.4rem);text-decoration:none;
  line-height:1.18;display:block}
.menu .cap{margin-top:2.5rem}

/* ---------- full-height hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 45%);
  animation:heroin 1.8s var(--ease) both}
@keyframes heroin{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(12,17,15,.93) 0%,rgba(12,17,15,.6) 28%,rgba(12,17,15,.1) 58%,rgba(12,17,15,.44) 100%),
    linear-gradient(to right,rgba(12,17,15,.66) 0%,rgba(12,17,15,.3) 44%,rgba(12,17,15,0) 72%)}
@media (max-width:760px){
  .hero::after{background:linear-gradient(to top,rgba(12,17,15,.94) 0%,rgba(12,17,15,.6) 34%,rgba(12,17,15,.16) 66%,rgba(12,17,15,.44) 100%)}
}
.hero__in{position:relative;padding-bottom:clamp(2.6rem,6vw,5rem);padding-top:calc(var(--nav-h) + 2rem);
  width:100%}
.hero__title{max-width:16ch}
.hero__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:.85rem 2rem;
  margin-top:clamp(1.8rem,4vw,3rem);padding-top:1.4rem;
  border-top:1px solid rgba(240,234,221,.18)}
.hero--mid{min-height:78svh}
.scrollcue{position:absolute;right:var(--gut);bottom:clamp(2.6rem,6vw,5rem);
  writing-mode:vertical-rl;font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-ink-dim)}
@media (max-width:760px){.scrollcue{display:none}}

/* ---------- full-bleed image bands ---------- */
.band{position:relative;overflow:hidden;background:var(--ink-2)}
.band img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.band--tall{height:min(92svh,60rem)}
.band--mid{height:min(72svh,46rem)}
.band--strip{height:min(38svh,24rem)}
.band__cap{position:absolute;left:var(--gut);bottom:1.4rem;right:var(--gut);
  color:var(--on-ink);text-shadow:0 1px 14px rgba(0,0,0,.65)}

/* ---------- editorial compositions ---------- */
.statement{display:grid;gap:clamp(2rem,5vw,4.5rem)}
.statement__lead{grid-column:1/-1}
@media (min-width:900px){
  .statement{grid-template-columns:repeat(12,1fr);align-items:start}
  .statement__lead{grid-column:1/9}
  .statement__aside{grid-column:9/13;padding-top:.9rem}
  .statement--offset .statement__lead{grid-column:3/11}
}
.split{display:grid;gap:clamp(2rem,5vw,4.5rem)}
@media (min-width:860px){
  .split{grid-template-columns:repeat(12,1fr);align-items:center}
  .split__a{grid-column:1/7}
  .split__b{grid-column:8/13}
  .split--flip .split__a{grid-column:7/13;order:2}
  .split--flip .split__b{grid-column:1/6;order:1}
  .split--lead .split__a{grid-column:1/8}
  .split--lead .split__b{grid-column:9/13}
  .split--top{align-items:start}
}
/* two images at deliberately different scales */
.duo{display:grid;gap:clamp(1.4rem,3.5vw,3rem)}
@media (min-width:860px){
  .duo{grid-template-columns:repeat(12,1fr);align-items:end}
  .duo__big{grid-column:1/8}
  .duo__small{grid-column:9/12;padding-bottom:clamp(2rem,6vw,6rem)}
  .duo--flip .duo__big{grid-column:6/13}
  .duo--flip .duo__small{grid-column:2/5}
}
.stack{display:grid;gap:clamp(1.1rem,2vw,1.7rem);align-content:start}
.stack--s{gap:.7rem}
.stack--l{gap:clamp(2rem,4vw,3.4rem)}

/* offset portrait that bleeds off the edge */
.bleed-left{margin-left:calc(var(--gut) * -1)}
.bleed-right{margin-right:calc(var(--gut) * -1)}
@media (min-width:860px){
  .bleed-left{margin-left:calc(50% - 50vw)}
  .bleed-right{margin-right:calc(50% - 50vw)}
}

/* ---------- figures ---------- */
figure{margin:0}
.fig__frame{overflow:hidden;background:var(--ink-2)}
.fig__frame img{width:100%;transition:transform .8s var(--ease)}
a:hover .fig__frame img,.fig:hover .fig__frame img{transform:scale(1.028)}
figcaption{margin-top:.85rem;font-family:var(--sans);font-size:.8rem;line-height:1.5;
  color:var(--on-ink-dim);max-width:32rem}
.paper figcaption{color:var(--on-bone-dim)}

/* ---------- production metadata ---------- */
.slatebar{display:flex;flex-wrap:wrap;gap:.5rem clamp(1rem,3vw,2.4rem);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-ink-dim);border-top:1px solid rgba(240,234,221,.16);padding-top:.9rem}
.paper .slatebar{color:var(--on-bone-dim);border-top-color:rgba(23,32,27,.18)}
.slatebar b{font-weight:500;color:var(--bulb)}
.paper .slatebar b{color:var(--bulb-deep)}

.specs{margin:0;font-family:var(--mono);font-size:.82rem;line-height:1.6}
.specs__row{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.85rem 0;
  border-top:1px solid rgba(240,234,221,.14)}
.paper .specs__row{border-top-color:rgba(23,32,27,.16)}
.specs__row:last-child{border-bottom:1px solid rgba(240,234,221,.14)}
.paper .specs__row:last-child{border-bottom-color:rgba(23,32,27,.16)}
.specs dt{color:var(--on-ink-dim);letter-spacing:.09em;text-transform:uppercase;font-size:.7rem}
.paper .specs dt{color:var(--on-bone-dim)}
.specs dd{margin:0}
@media (min-width:620px){
  .specs__row{grid-template-columns:11rem 1fr;gap:1.5rem;align-items:baseline}
}

/* ---------- press kit ---------- */
.kit{border-top:1px solid rgba(23,32,27,.16);padding-top:1.5rem;margin-top:2.5rem}
.kit:first-of-type{margin-top:0}
.kit__head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.copy{font-family:var(--sans);font-size:.8rem;letter-spacing:.02em;background:none;cursor:pointer;
  border:1px solid rgba(23,32,27,.3);color:inherit;padding:.42rem .95rem;border-radius:0;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.copy:hover{background:var(--on-bone);color:var(--bone);border-color:var(--on-bone)}
.copy.is-done{background:var(--bulb-deep);border-color:var(--bulb-deep);color:var(--bone)}

/* ---------- contact routes ---------- */
.routes{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:820px){.routes{grid-template-columns:repeat(3,1fr)}}
.route{border-top:1px solid rgba(23,32,27,.2);padding-top:1.4rem}
.route__val{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.14;
  margin:.5rem 0 .8rem}

/* ---------- footer ---------- */
.foot{background:var(--ink);border-top:1px solid rgba(240,234,221,.12);
  padding-block:clamp(3rem,6vw,4.5rem)}
.foot__in{display:grid;gap:2rem}
@media (min-width:760px){.foot__in{grid-template-columns:1fr auto;align-items:end}}
.foot__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.7rem clamp(1.1rem,2.5vw,2rem);font-family:var(--sans);font-size:.86rem}
.foot__mark{font-family:var(--serif);font-size:1.5rem;margin:0 0 .5rem}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-img .fig__frame img,.rv-img.band img{clip-path:inset(0 0 14% 0);transform:scale(1.05);
  transition:clip-path 1s var(--ease),transform 1.2s var(--ease)}
.rv-img.is-in .fig__frame img,.rv-img.is-in.band img{clip-path:inset(0 0 0 0);transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .rv-img .fig__frame img,.rv-img.band img{clip-path:none;transform:none}
  .hero__media img{animation:none}
  body{animation:none}
}



/* ---------- logo lockup ---------- */
.mark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--on-ink);
  font-family:var(--serif);font-size:1.3rem;letter-spacing:-.005em;white-space:nowrap;line-height:1}
.mark__glyph{flex:0 0 auto;color:var(--bulb);transition:transform .7s var(--ease),color .4s var(--ease)}
.mark:hover .mark__glyph{transform:rotate(120deg)}
body.talent .mark__glyph{color:var(--bulb-deep)}
.mark--foot{font-size:1.5rem;gap:.7rem}
.mark--foot .mark__glyph{width:32px;height:32px}

/* ---------- project index cards ---------- */
.projects{display:grid;gap:clamp(3rem,7vw,6rem)}
.project{display:grid;gap:clamp(1.2rem,3vw,2.4rem);text-decoration:none;color:inherit}
@media (min-width:860px){
  .project{grid-template-columns:repeat(12,1fr);align-items:center}
  .project__media{grid-column:1/8}
  .project__body{grid-column:8/13}
  .project:nth-child(even) .project__media{grid-column:6/13;order:2}
  .project:nth-child(even) .project__body{grid-column:1/6;order:1}
}
.project__title{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.02;
  margin:.5rem 0 .9rem;letter-spacing:-.018em}
.project__meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-ink-dim)}
.paper .project__meta{color:var(--on-bone-dim)}
.project .fig__frame{background:var(--ink-2)}
.project:hover .fig__frame img{transform:scale(1.028)}

/* ---------- status pill: the one place semantic colour is used ---------- */
.status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bulb)}
.paper .status,body.talent .status{color:var(--bulb-deep)}
.status::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor}

/* ---------- talent page: a separate entity, on paper rather than film black ---
   Every panel on that page carries .paper, so the existing on-bone rules do the
   work. Only the body, nav and footer need their own light treatment. -------- */
body.talent{background:var(--bone);color:var(--on-bone)}
body.talent .nav.is-stuck{background:rgba(240,234,221,.86);
  border-bottom-color:rgba(23,32,27,.14)}
body.talent .mark,body.talent .nav__link{color:var(--on-bone)}
body.talent .nav__link::after{background:var(--bulb-deep)}
body.talent .nav__link[aria-current="page"]::after{background:var(--on-bone)}
body.talent .burger{color:var(--on-bone)}
body.talent .menu{background:var(--bone);color:var(--on-bone)}
body.talent .foot{background:var(--bone);color:var(--on-bone);
  border-top-color:rgba(23,32,27,.18)}
body.talent .foot .cap{color:var(--on-bone-dim)}
body.talent .skip{background:var(--on-bone);color:var(--bone)}
body.talent :focus-visible{outline-color:var(--bulb-deep)}
.nav__out{font-size:.78em;vertical-align:.15em;margin-left:.28em;opacity:.75}

/* ---------- responsive nav ---------- */
@media (max-width:820px){
  :root{--nav-h:4.4rem}
  .nav__links{display:none}
  .burger{display:inline-flex}
  .mark{font-size:1.16rem}
}
@media (max-width:520px){
  .mark{font-size:1.04rem}
  .hero__title{max-width:11ch}
}