@import url('https://fonts.googleapis.com/css2?family=BJCree&display=swap');

:root{
  --ink:#0e0e0f;
  --paper:#ffffff;
  --bone:#dfdbd1;
  --graphite:#6d6a64;
  --signal:#e0432a;
  --line: rgba(14,14,15,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'BJCree', serif;
  font-weight:400;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3{ font-weight:bold; line-height:1.05; }

.eyebrow{
  font-size:11px;
  letter-spacing:0.01em;
  text-transform:lowercase;
  color:var(--graphite);
}

/* header */
.site-heading{
  text-align:center;
  font-size:14px;
  font-weight:bold;
  padding:24px 0;
}
.site-heading a{ color:inherit; text-decoration:none; }

/* intro block */
.page-intro{ padding:100px 48px 60px; max-width:900px; }
.page-intro h1{ font-size:clamp(36px,6vw,64px); margin-bottom:20px; }
.page-intro p{ font-size:16px; line-height:1.7; color:var(--graphite); max-width:640px; }

/* single-stage highlight card */
.stage-solo{
  margin:0 48px 100px;
  max-width:440px;
  border:1px solid var(--line);
  padding:40px 36px 48px;
}
.stage-solo .stage-tag{
  font-size:12px;
  color:var(--signal);
  display:block;
  margin-bottom:24px;
}
.stage-solo h2{ font-size:26px; margin-bottom:14px; }
.stage-solo .stage-role{
  font-size:10px;
  letter-spacing:0.01em;
  text-transform:lowercase;
  color:var(--graphite);
  display:block;
  margin-bottom:16px;
}
.stage-solo p{ font-size:14px; line-height:1.6; color:var(--graphite); }
.stage-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stage-solo--grid{ margin:0; }

/* work grid (reused) */
.section{ padding:0 48px 120px; }
.section-head{ margin-bottom:48px; }
.section-head h2{ font-size:clamp(28px,4vw,44px); margin-top:10px; }
.work-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:28px;
}
.work-item{ grid-column:span 6; }
.work-item.wide{ grid-column:span 12; }
.work-thumb{
  aspect-ratio:4/3;
  width:100%;
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--bone) 0px, var(--bone) 2px, transparent 2px, transparent 14px),
    linear-gradient(160deg, #d7d3c8, #b8b3a6);
  margin-bottom:18px;
}
.work-thumb::after{
  content: attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px;
  font-size:11px; letter-spacing:0.01em; text-transform:lowercase;
  color:rgba(14,14,15,0.55);
  background:rgba(242,241,236,0.35);
}
.work-tc{
  position:absolute; top:14px; left:14px;
  font-size:10px; color:rgba(14,14,15,0.5);
  background:rgba(242,241,236,0.7); padding:3px 7px;
}
.work-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line); padding-top:14px;
}
.work-meta .title{ font-size:16px; }
.work-meta .tag{ font-size:10px; letter-spacing:0.01em; text-transform:lowercase; color:var(--graphite); }

/* reel strip (production only) */
.reel{
  background:var(--ink);
  color:var(--paper);
  padding:100px 48px;
  overflow:hidden;
  margin-bottom:120px;
}
.reel .eyebrow{ color:rgba(255,255,255,0.5); margin-bottom:24px; }
.marquee-track{ display:flex; white-space:nowrap; animation:scroll 26s linear infinite; }
.marquee-track span{
  font-style:italic; font-weight:400;
  font-size:clamp(32px,6vw,72px);
  padding-right:50px;
  color:rgba(255,255,255,0.9);
}
.marquee-track span i{
  font-style:normal; color:var(--signal);
  padding-right:50px; font-size:22px; vertical-align:middle;
}
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* about-only: roles list + contact */
.intro-list{ padding:0 48px 100px; max-width:900px; }
.intro-row{
  display:flex; justify-content:space-between;
  padding:22px 0; border-bottom:1px solid var(--line); gap:24px;
}
.intro-row:first-child{ border-top:1px solid var(--line); }
.intro-row .role{ font-size:17px; }
.intro-row .desc{ color:var(--graphite); font-size:14px; max-width:340px; text-align:right; line-height:1.5; }

.contact{ padding:0 48px 80px; border-top:1px solid var(--line); padding-top:80px; }
.contact h2{ font-size:clamp(32px,5vw,56px); margin-bottom:30px; }
.contact h2 a{ border-bottom:1px solid var(--ink); }
.credits{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:50px; }
.credits .col .k{ font-size:10px; letter-spacing:0.01em; text-transform:lowercase; color:var(--graphite); margin-bottom:8px; display:block; }
.credits .col .v{ font-size:14px; line-height:1.7; }

@media (max-width:900px){
  .page-header, .page-intro, .section, .stage-solo, .intro-list, .contact, .reel{ padding-left:24px; padding-right:24px; }
  .work-item, .work-item.wide{ grid-column:span 12; }
  .intro-row .desc{ text-align:left; }
  .credits{ grid-template-columns:repeat(2,1fr); gap:30px 20px; }
  .stage-row{ grid-template-columns:1fr; }
}

/* ============ HOME PAGE ============ */
.hero{
    min-height:100svh;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:64px;
    padding:80px 32px;
  }
  .hero-room{
    flex:1.1 1 520px;
    width:100%;
    max-width:840px;
  }
  .hero-room canvas{
    width:100%;
    height:auto;
    display:block;
    image-rendering:pixelated;
    image-rendering:-moz-crisp-edges;
    image-rendering:crisp-edges;
  }

  .paper-menu{
    position:relative;
    flex:1 1 480px;
    width:100%;
    max-width:760px;
    align-self:flex-start;
    margin-top:60px;
  }
  .paper-bg{
    display:block;
    width:100%;
    height:auto;
  }
  .paper-item{
    position:absolute;
    left:15%;
    transform:translateY(-100%);
    font-family:'BJCree', serif;
    font-size:14px;
    letter-spacing:0.01em;
    text-transform:lowercase;
    color:#101010;
    transition:color 0.2s ease;
  }
  .paper-item:hover{ color:var(--signal); }

  .paper-content{
    position:absolute;
    top:6%;
    left:12%;
    right:11%;
    padding-top:calc(var(--line-gap) * 0.62);
    font-family:'BJCree', serif;
    color:#101010;
    --line-gap:20px;
  }
  .paper-content h2{
    font-size:clamp(15px,2vw,18px);
    font-weight:bold;
    line-height:var(--line-gap);
    margin:0 0 var(--line-gap);
  }
  .paper-content .blank-word{
    display:inline-block;
    width:4.6ch;
    margin:0 10px 0 3px;
    border-bottom:1px solid var(--ink);
    padding:0 3px;
    text-align:center;
    opacity:1;
    transition:opacity 0.25s ease;
  }
  .paper-content .blank-word.swap{ opacity:0; }
  .paper-content p{
    font-size:clamp(12px,1.4vw,14px);
    line-height:var(--line-gap);
    margin:0 0 var(--line-gap);
  }
  .paper-content ul{
    list-style:none;
    margin:0 0 var(--line-gap);
  }
  .paper-content li{
    font-size:clamp(12px,1.4vw,14px);
    line-height:var(--line-gap);
  }
  .paper-content .closing-line{
    display:block;
    font-size:clamp(12px,1.4vw,14px);
    margin-top:var(--line-gap);
  }
  .paper-content .closing-line:first-of-type{
    margin-top:0;
  }
  .paper-content a{
    display:inline-block;
    font-size:clamp(12px,1.4vw,14px);
    font-weight:bold;
    color:#101010;
  }
  .paper-content a.underline-word{
    border-bottom:1px solid #101010;
  }
  .paper-content a:hover{ color:var(--signal); border-color:var(--signal); }

  @media (max-width:900px){
    .hero{ flex-direction:column; gap:32px; padding:60px 24px; }
  }