/* Direction A: the portfolio as one continuous 35mm negative.
   Vertical scroll drives horizontal film transport. */

:root{
  --frame-h:min(58vh,calc(100svh - 300px));
  --rail:58px;          /* perforated film edge, top and bottom */
  --gap:14px;           /* inter-frame gap on the negative */
  --strip-top:calc((100svh - var(--frame-h) - 2*var(--rail))/2);
}

html{scroll-behavior:auto}
body{overflow-x:hidden}

/* The tall element exists only to donate scroll distance to the transport. */
.scroll-space{height:var(--scroll-len,600vh)}

.stage{position:fixed;inset:0;overflow:hidden}

.masthead{position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px var(--gutter);height:72px}
.wordmark{font-family:var(--sans);font-size:14px;letter-spacing:0;text-decoration:none;color:var(--muted);transition:color .25s var(--ease)}
.wordmark:hover{color:var(--ink)}
.masthead nav{display:flex;gap:26px;align-items:center}
.masthead nav a{font-family:var(--sans);font-size:14px;letter-spacing:0;text-decoration:none;
  color:var(--muted);transition:color .25s var(--ease)}
.masthead nav a:hover{color:var(--ink)}

/* ---- the negative ------------------------------------------------------ */
.transport{position:absolute;top:var(--strip-top);left:0;height:calc(var(--frame-h) + 2*var(--rail));
  will-change:transform}
.negative{display:flex;align-items:stretch;height:100%;padding-right:34vw}

.rail{position:absolute;left:0;right:0;height:var(--rail);background:#000;z-index:2;pointer-events:none}
.rail--top{top:0}
.rail--bottom{bottom:0}
/* Perforations repeat along the whole roll and travel with it. */
.rail::before{content:"";position:absolute;left:0;right:0;height:26px;
  background:repeat-x left center/64px 26px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26'%3E%3Crect x='18' y='1' width='28' height='24' rx='3' fill='%23171718' stroke='%232f3029' stroke-width='.8'/%3E%3C/svg%3E")}
.rail--top::before{bottom:6px}
.rail--bottom::before{top:6px}

.frame{position:relative;flex:none;height:100%;padding-block:var(--rail);margin-right:var(--gap)}
.frame-img{position:relative;height:100%;background:var(--shade,#141416) center/cover no-repeat;overflow:hidden}
.frame-img img{height:100%;width:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.frame-img img.is-loaded{opacity:1}
.frame button.frame-hit{position:absolute;inset:var(--rail) 0;z-index:3;width:100%}
.frame button.frame-hit::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .2s var(--ease)}
.frame button.frame-hit:hover::after,.frame button.frame-hit:focus-visible::after{border-color:var(--accent)}

/* Edge printing, the way a real stock carries its code along the sprocket margin. */
.edge{position:absolute;left:0;right:0;height:var(--rail);z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8a7a52}
.edge--top{top:0}
.edge--bottom{bottom:0}
.edge span{position:absolute;bottom:5px;left:6px}
.edge--bottom span{bottom:auto;top:6px}
.edge span:last-child{left:auto;right:6px;color:#5d5a4a}

/* ---- project slate ----------------------------------------------------- */
.slate{flex:none;height:100%;padding:var(--rail) 0;margin-right:var(--gap);width:min(46vw,520px)}
.slate-body{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
  padding:30px 32px;background:#000;border-left:1px solid var(--line)}
.slate h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.3vw,44px);line-height:1;margin:0;
  letter-spacing:-.022em;text-transform:uppercase}
.slate dl{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;margin:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.slate dt{color:var(--dim)}
.slate dd{margin:0;color:var(--muted)}

/* ---- opening and closing ----------------------------------------------- */
.opening,.closing{flex:none;height:100%;padding:var(--rail) 0;margin-right:var(--gap);width:min(84vw,1080px)}
.opening-body,.closing-body{height:100%;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:0 clamp(14px,3vw,48px)}
.opening h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,9.4vw,132px);line-height:.92;
  margin:0;text-transform:uppercase;letter-spacing:-.026em}
.opening h1 span{display:block}
.opening p{max-width:46ch;margin:0;color:var(--muted);font-size:clamp(15px,1.5vw,19px);line-height:1.45}
.closing-body{justify-content:center;gap:18px}
.closing h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.2vw,60px);line-height:1;margin:0;
  text-transform:uppercase;letter-spacing:-.024em}
.closing a.contact{font-size:clamp(18px,2vw,28px);text-decoration:none;border-bottom:1px solid var(--line);
  align-self:flex-start;padding-bottom:3px;transition:color .2s var(--ease)}
.closing a.contact:hover{border-color:var(--ink)}

/* ---- transport readout ------------------------------------------------- */
.readout{position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px var(--gutter) 22px}
.now{display:flex;align-items:baseline;gap:14px;min-width:0}
.now-code{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.now-title{font-family:var(--display);font-weight:400;font-size:clamp(14px,1.5vw,19px);text-transform:uppercase;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.index{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.index button{width:22px;height:4px;background:#33332d;transition:background .25s var(--ease),transform .25s var(--ease)}
.index button:hover{background:var(--muted)}
.index button[aria-current=true]{background:var(--ink);transform:scaleY(2)}

.hint{position:absolute;bottom:74px;left:var(--gutter);z-index:20;font-family:var(--sans);font-size:13px;
  color:var(--dim);
  opacity:1;transition:opacity .6s var(--ease)}
.hint[data-hidden=true]{opacity:0}

@media (max-width:820px){
  :root{--frame-h:min(46svh,calc(100svh - 250px));--rail:40px;--gap:10px}
  .rail::before{height:18px;background-size:46px 18px}
  .rail--top::before{bottom:4px}
  .rail--bottom::before{top:4px}
  .edge{font-size:7px;letter-spacing:.08em}
  .slate{width:76vw}
  .slate-body{padding:20px 22px}
  .masthead nav{gap:16px}
  .index button{width:14px}
}