/* Rahil Doshi, personal site. Cinema theme. One stylesheet for every page. */
:root { --black:#0B0B0C; --ivory:#EDE8DC; --grey:#9A968C; --amber:#FFB000; --red:#8E1B2C; --deep:#5A1120; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { position:relative; min-height:100vh; margin:0; background:var(--black); color:var(--ivory); font-family:'Jost', system-ui, sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--amber); outline-offset:4px; }
.mono { font-family:'Courier Prime','Courier New',monospace; }

/* ceiling lights and seats */
.lights { position:absolute; left:0; right:0; top:0; height:300px; background:url(lights.svg) repeat-x center top; pointer-events:none; z-index:0; }
.seats { position:absolute; left:0; right:0; bottom:0; height:150px; background:url(seats.svg) repeat-x center top; pointer-events:none; z-index:3; }
.home .lights { height:380px; }
.home .seats { height:210px; }

/* header and tabs */
.site { position:relative; z-index:3; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 32px; padding:26px 5% 0; }
.brand { display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-transform:uppercase; font-size:18px; letter-spacing:.3em; }
.brand i, .dot { display:inline-block; border-radius:50%; background:var(--amber); }
.brand i { width:8px; height:8px; margin-left:.4em; }
.tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 38px; }
.tabw { display:flex; flex-direction:column; align-items:center; gap:6px; }
.tab { display:inline-flex; align-items:center; min-height:44px; padding:0 6px 10px 12px; font-size:15px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; box-shadow:inset 0 -3px 0 var(--amber); transition:box-shadow .2s; }
.tab:hover, .tab[aria-current="page"] { box-shadow:inset 0 -6px 0 var(--amber); }
.sub { font-family:'Courier Prime','Courier New',monospace; font-size:13px; color:var(--grey); }

/* ---------- home ---------- */
.home { position:relative; overflow:hidden; min-height:100vh; padding-bottom:150px; }
.title { position:relative; z-index:3; text-align:center; padding:58px 5% 0; }
.name { margin:0; font-weight:700; text-transform:uppercase; font-size:clamp(34px,6.4vw,64px); letter-spacing:.34em; padding-left:.34em; line-height:1; }
.name .dot { width:.12em; height:.12em; margin-left:.22em; }
.role { margin-top:20px; font-size:clamp(11px,1.4vw,15px); font-weight:500; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em; color:var(--grey); }
.role b { color:var(--amber); font-weight:400; }
.title .tabs { margin-top:26px; }
.stage { position:relative; z-index:2; width:min(1060px,74%); margin:56px auto 0; }
.screen { position:relative; aspect-ratio:2.39 / 1; overflow:hidden; background:#3F86D4; box-shadow:0 0 0 6px #050505, 0 0 150px 24px rgba(255,214,150,.30); }
.screen > svg, .screen > .photo { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.vignette { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.40) 100%); }
.veil { position:absolute; inset:0; background:rgba(18,50,96,.24); }
.sunglow { position:absolute; inset:0; background:radial-gradient(circle at 74% 64%, rgba(255,213,74,.60) 0, rgba(255,213,74,.22) 24%, rgba(255,213,74,0) 46%); }
.credits { position:absolute; inset:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
.ctrack { animation:roll 80s linear infinite; }
.credits:hover .ctrack, .credits.paused .ctrack { animation-play-state:paused; }
@keyframes roll { from { transform:translateY(0); } to { transform:translateY(-50%); } }
.grp { padding-top:21%; padding-bottom:40px; }
.cr { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,3vw,34px); margin-bottom:clamp(22px,4.4vw,46px); padding:0 clamp(10px,4vw,40px); }
.crole { text-align:right; font-weight:500; font-size:clamp(9px,1.25vw,13px); letter-spacing:.3em; text-transform:uppercase; color:#FFE08A; padding-top:.5em; text-shadow:0 1px 8px rgba(6,30,70,.8); }
.who { text-align:left; font-size:clamp(14px,2.4vw,25px); line-height:1.5; color:#fff; text-shadow:0 1px 8px rgba(6,30,70,.8); }
.theend { text-align:center; font-family:'Courier Prime',monospace; font-weight:700; font-size:clamp(12px,1.7vw,18px); letter-spacing:.2em; text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(6,30,70,.8); padding:70px 0 160px; }
.ctl { display:flex; justify-content:flex-end; margin-bottom:10px; }
.ctlbtn { min-height:44px; padding:0 4px; font-family:'Courier Prime','Courier New',monospace; font-size:14px; color:var(--grey); text-decoration:underline; text-decoration-color:var(--amber); text-underline-offset:5px; text-decoration-thickness:2px; }

/* ---------- inner pages ---------- */
.page { position:relative; z-index:2; padding:clamp(56px,8vw,120px) 5% 210px; max-width:1500px; margin:0 auto; }
.eyebrow { font-family:'Courier Prime','Courier New',monospace; font-weight:700; font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.pt { margin:14px 0 0; font-weight:700; text-transform:uppercase; font-size:clamp(38px,7vw,104px); letter-spacing:.16em; line-height:1.02; }
.pt .dot { width:.13em; height:.13em; margin-left:.12em; }
.lead { max-width:820px; margin:clamp(28px,3.5vw,52px) 0 0; font-size:clamp(24px,2.8vw,40px); line-height:1.3; font-weight:500; }
.copy { max-width:680px; margin:24px 0 0; font-size:clamp(18px,1.6vw,22px); line-height:1.65; color:#D9D4C7; }
.ulink { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-decoration-color:var(--amber); text-decoration-thickness:3px; text-underline-offset:7px; }
.ulink:hover { text-decoration-thickness:6px; }
.links { display:flex; flex-wrap:wrap; gap:8px 40px; margin-top:clamp(28px,3.5vw,48px); font-size:17px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }

/* the story */
.places { display:flex; flex-wrap:wrap; gap:44px 64px; margin-top:clamp(56px,7vw,104px); max-width:1200px; }
.place { flex:1 1 240px; min-width:0; }
.place h2 { display:flex; align-items:center; gap:12px; margin:0 0 12px; font-size:clamp(22px,2.2vw,30px); font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.place h2::before { content:""; flex:0 0 auto; width:.4em; height:.4em; border-radius:50%; background:var(--amber); }
.place p { margin:0; max-width:300px; font-size:19px; line-height:1.65; color:#D9D4C7; }
.closing { max-width:760px; margin-top:clamp(52px,6vw,88px); }
.closing p { margin:0; font-size:clamp(18px,1.6vw,22px); line-height:1.7; color:#D9D4C7; }
.closing p + p { margin-top:22px; }
.inl { text-decoration:underline; text-decoration-color:var(--amber); text-decoration-thickness:3px; text-underline-offset:5px; }
.post { margin-top:clamp(40px,5vw,72px); }
.post q { display:block; margin-top:12px; quotes:none; font-style:italic; font-weight:400; font-size:clamp(24px,2.8vw,40px); line-height:1.3; color:var(--ivory); }

/* scenes */
.proof { max-width:1200px; margin-top:clamp(28px,3.5vw,52px); }
.proof-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 40px; padding:clamp(14px,2vw,28px) 0; }
.fig { flex:0 1 auto; font-weight:700; font-size:clamp(40px,7vw,104px); line-height:1; letter-spacing:.06em; }
.lab { flex:1 1 280px; min-width:0; font-size:clamp(20px,2vw,30px); line-height:1.3; font-weight:500; color:var(--amber); }
.h2 { margin:clamp(56px,7vw,104px) 0 0; font-weight:700; text-transform:uppercase; font-size:clamp(26px,3.2vw,46px); letter-spacing:.16em; }
.h2.first { margin-top:clamp(36px,4.5vw,64px); }
.script { margin-top:clamp(24px,3vw,40px); max-width:900px; font-family:'Courier Prime','Courier New',monospace; }
.fade { margin:0 0 14px; font-size:clamp(15px,1.5vw,19px); font-weight:700; letter-spacing:.04em; color:var(--grey); }
.fade.out { text-align:right; margin:22px 0 0; }
.scene summary { list-style:none; display:flex; align-items:center; gap:clamp(10px,1.6vw,20px); min-height:56px; padding:12px 0; cursor:pointer; }
.scene summary::-webkit-details-marker { display:none; }
.sn { flex:0 0 1.4em; font-weight:700; font-size:clamp(15px,1.7vw,21px); }
.sn.r { text-align:right; }
.st { flex:1 1 auto; font-weight:700; text-transform:uppercase; font-size:clamp(14px,1.7vw,21px); line-height:1.5; }
.st span { -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background .2s; }
.scene summary:hover .st span { background:rgba(255,176,0,.35); }
.scene[open] .st span { background:var(--amber); color:#0B0B0C; padding:0 6px; }
.logo { position:relative; flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:#fff; color:#0B0B0C; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; font-family:'Jost',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em; }
.logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; }
.action { padding:2px 0 clamp(20px,2.6vw,34px) calc(1.4em + 52px + clamp(20px,3.2vw,40px)); max-width:760px; }
.cue { margin:0 0 14px; font-weight:700; font-size:clamp(14px,1.5vw,19px); line-height:1.4; }
.par { display:block; font-weight:400; color:var(--grey); }
.action p { margin:0 0 12px; font-size:clamp(15px,1.5vw,19px); line-height:1.6; }
.credits-list { max-width:1000px; margin-top:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:26px; }
.cl-row { display:flex; flex-wrap:wrap; gap:4px 56px; }
.cl-who { flex:1 1 260px; font-size:clamp(20px,2vw,28px); font-weight:500; line-height:1.2; }
.cl-who small { display:block; margin-top:8px; font-family:'Courier Prime',monospace; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); font-weight:400; }
.cl-what { flex:2 1 380px; font-size:clamp(18px,1.6vw,22px); line-height:1.6; color:#D9D4C7; }

/* call sheet */
.sheet { max-width:980px; margin:clamp(36px,4.5vw,64px) 0 0; display:flex; flex-direction:column; }
.row { display:grid; grid-template-columns:minmax(120px,200px) 1fr; gap:6px 32px; align-items:baseline; padding:clamp(14px,2vw,24px) 0; }
.row dt { font-family:'Courier Prime','Courier New',monospace; font-weight:700; font-size:clamp(13px,1.3vw,16px); letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.row dd { margin:0; font-size:clamp(20px,2.4vw,34px); line-height:1.25; font-weight:500; overflow-wrap:anywhere; }
.row.big dd { font-size:clamp(24px,4vw,58px); }
.sheet .ulink { min-height:0; text-underline-offset:8px; }

@media (max-width:800px) {
  .stage { width:92%; }
  .lights { height:240px; }
  .row { grid-template-columns:1fr; }
  .action { padding-left:0; }
  .sn.r { display:none; }
  .tabs { gap:4px 22px; }
  .tab { letter-spacing:.2em; font-size:13px; padding-left:8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ctrack { animation:none; }
  .grp + .grp { display:none; }
  .credits { overflow:auto; -webkit-mask-image:none; mask-image:none; }
}