/* ---------------------------------------------------------------------------
   About v3: viewfinder + contact sheet.
   The portrait is shown as a camera monitor (frame lines, REC, running
   timecode); the on-set photos sit on a strip of film that pans as you scroll.
   --------------------------------------------------------------------------- */
.about { --edge: #E3A23C; }
.about-inner--story { align-items: start; }
.viewfinder { position: relative; aspect-ratio: 4 / 5; background: #000; overflow: hidden; }
@media (min-width: 900px) {
    .viewfinder { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* The story, cut as a scene list. The scene in view gets the playhead. */
.cut { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line); }
.cut li { position: relative; display: grid; grid-template-columns: 132px 1fr; gap: 20px; padding: 24px 0 24px 18px; border-bottom: 1px solid var(--line-2); }
.cut li::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px; background: var(--line); transition: background .4s ease, box-shadow .4s ease; }
.cut li.is-live::before { background: var(--edge); box-shadow: 0 0 12px rgba(227, 162, 60, .55); }
.cut-tc { font: 700 11px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--edge); font-variant-numeric: tabular-nums; padding-top: 4px; }
.cut-tc span { display: block; color: var(--muted); letter-spacing: .12em; margin-top: 4px; }
.cut h3 { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.cut p:not(.cut-tc) { font-size: 16px; line-height: 1.68; color: rgba(255, 252, 237, .84); margin-top: 8px; max-width: 600px; }
.cut.is-armed li { opacity: .55; transition: opacity .4s ease; }
.cut.is-armed li.is-live { opacity: 1; }
@media (max-width: 599px) {
    .cut li { grid-template-columns: 1fr; gap: 8px; }
    .cut-tc span { display: inline; margin: 0 0 0 10px; }
}
.viewfinder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-hud {
    position: absolute; inset: 0; pointer-events: none;
    font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
    color: var(--paper); font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 22%, transparent 78%, rgba(0, 0, 0, .5)),
        linear-gradient(rgba(255, 252, 237, .5), rgba(255, 252, 237, .5)) center / 1px 22px no-repeat,
        linear-gradient(rgba(255, 252, 237, .5), rgba(255, 252, 237, .5)) center / 22px 1px no-repeat;
}
.vf-hud::before { content: ""; position: absolute; inset: 11%; border: 1px dashed rgba(255, 252, 237, .3); }
.vf-c { position: absolute; width: 26px; height: 26px; border: 2px solid var(--paper); opacity: .9; }
.vf-c:nth-child(1) { top: 14px; left: 14px; border-width: 2px 0 0 2px; }
.vf-c:nth-child(2) { top: 14px; right: 14px; border-width: 2px 2px 0 0; }
.vf-c:nth-child(3) { bottom: 14px; left: 14px; border-width: 0 0 2px 2px; }
.vf-c:nth-child(4) { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; }
.vf-row { position: absolute; left: 26px; right: 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vf-row--top { top: 26px; }
.vf-row--bot { bottom: 26px; }
.vf-rec { display: inline-flex; align-items: center; gap: 8px; }
.vf-rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 10px rgba(229, 72, 77, .8); animation: vf-blink 1.2s steps(1) infinite; }
@keyframes vf-blink { 50% { opacity: .15; } }
.vf-dim { opacity: .72; }

/* Film strip -------------------------------------------------------------- */
.reel {
    position: relative; margin-top: clamp(64px, 7vw, 104px);
    background: #0B0C0E; padding: 34px 0 30px; overflow: hidden;
    border-block: 1px solid rgba(255, 252, 237, .06);
}
.reel::before, .reel::after {
    content: ""; position: absolute; left: 0; right: 0; height: 10px;
    background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 252, 237, .14) 12px 26px, transparent 26px 38px);
}
.reel::before { top: 11px; }
.reel::after { bottom: 11px; }
.reel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.reel-head .eyebrow { font-size: 12px; }
.reel-hint { font: 700 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--edge); }
.reel-track {
    --inset: calc(max(0px, (100vw - var(--content) - 2 * var(--gutter)) / 2) + var(--gutter));
    display: flex; gap: 22px; width: max-content; padding: 0 var(--inset);
    transform: translate3d(var(--drift, 0px), 0, 0); will-change: transform;
}
.still { flex: none; width: clamp(290px, 33vw, 470px); }
.still-edge { display: flex; justify-content: space-between; font: 700 10px/1 var(--sans); letter-spacing: .2em; color: var(--edge); padding: 0 2px 9px; font-variant-numeric: tabular-nums; }
.still-img { position: relative; aspect-ratio: 3 / 2; background: #000; overflow: hidden; }
.still-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.9) contrast(1.12) brightness(.85); transform: scale(1.04); transition: filter .7s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.still-img::after {
    content: ""; position: absolute; inset: -50%; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1s steps(4) infinite; transition: opacity .7s ease;
}
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
.still:hover .still-img img, .still:focus-within .still-img img, .still.is-lit .still-img img { filter: none; transform: scale(1); }
.still:hover .still-img::after, .still.is-lit .still-img::after { opacity: .06; }

.slate { display: grid; grid-template-columns: 74px 1fr; gap: 9px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 252, 237, .12); }
.slate dt { font: 700 10px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.slate dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--paper); }
.slate dd.slate-title { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.25; }

.still--next .still-img { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #121417 0 14px, #0E1012 14px 28px); box-shadow: inset 0 0 0 1px rgba(255, 252, 237, .12); }
.still--next .still-img::after { display: none; }
.still-next-copy { text-align: center; }
.still-next-copy strong { display: block; font-family: var(--serif); font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.015em; }
.still-next-copy a { display: inline-block; margin-top: 14px; color: var(--paper); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--edge); }

@media (max-width: 899px) {
    .viewfinder { max-width: 520px; }
    .reel-track { transform: none; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
    .reel-track::-webkit-scrollbar { display: none; }
    .still { width: min(82vw, 420px); scroll-snap-align: center; }
    .reel-hint { display: none; }
}
@media (max-width: 599px) {
    .vf-row { left: 20px; right: 20px; font-size: 10px; letter-spacing: .12em; }
    .vf-row--top { top: 20px; }
    .vf-row--bot { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .vf-rec::before, .still-img::after { animation: none; }
    .reel-track { transform: none; }
}

/* ---------------------------------------------------------------------------
   Kit: the camera package, laid out like a production's kit sheet.
   --------------------------------------------------------------------------- */
.kit { --edge: #E3A23C; padding: clamp(72px, 8vw, 120px) 0 clamp(80px, 8vw, 120px); }
.kit-head { max-width: 760px; }
.kit-head .eyebrow { font-size: 12px; }
.kit-title { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -.025em; margin-top: 20px; }
.kit-sub { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: rgba(255, 252, 237, .84); margin-top: 20px; max-width: 560px; }

.kit-grid {
    display: grid; grid-template-columns: repeat(12, 1fr); margin-top: clamp(40px, 4.4vw, 64px);
    border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.kit-cell { grid-column: span 3; position: relative; padding: 26px 26px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s ease; }
.kit-cell::before { content: ""; position: absolute; left: -1px; top: -1px; width: 0; height: 2px; background: var(--edge); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.kit-cell:hover { background: rgba(255, 252, 237, .025); }
.kit-cell:hover::before { width: calc(100% + 1px); }
.kit-cell--cam { grid-column: span 5; }
.kit-cell--glass { grid-column: span 7; }
.kit-cell--post { grid-column: span 6; }

.kit-code { font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--edge); }
.kit-make { font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 26px; }
.kit-hero { font-family: var(--serif); font-weight: 700; font-size: clamp(48px, 5vw, 76px); line-height: 1; letter-spacing: -.03em; margin-top: 8px; }
.kit-item { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; margin-top: 22px; }
.kit-line .kit-item { margin-top: 0; }
.kit-note { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 8px; max-width: 380px; }
.kit-line { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); }

.lenses { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lenses li { display: flex; flex-direction: column; }
.lens-mm { font-family: var(--serif); font-weight: 700; font-size: clamp(56px, 6.4vw, 96px); line-height: .9; letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.lens-mm small { font-size: .26em; letter-spacing: .02em; margin-left: 4px; color: var(--muted); font-weight: 600; }
.lens-f { font: 700 13px/1 var(--sans); letter-spacing: .12em; color: var(--edge); margin-top: 12px; }
.lens-name { font-size: 14px; color: var(--muted); margin-top: 6px; }
.lens-scale {
    display: flex; justify-content: space-between; margin-top: 26px; padding-top: 12px;
    font: 700 10px/1 var(--sans); letter-spacing: .08em; color: rgba(255, 252, 237, .5); font-variant-numeric: tabular-nums;
    background: repeating-linear-gradient(90deg, rgba(255, 252, 237, .35) 0 1px, transparent 1px 12px) top left / 100% 7px no-repeat;
}

.kit-spec { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font: 700 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--edge); font-variant-numeric: tabular-nums; }
.kit-apps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.kit-apps span { font-size: 13px; font-weight: 700; padding: 7px 12px; border: 1px solid var(--line); color: var(--paper); }

@media (max-width: 899px) {
    .kit-cell, .kit-cell--cam, .kit-cell--glass, .kit-cell--post { grid-column: span 12; }
    .kit-cell:not(.kit-cell--cam):not(.kit-cell--glass):not(.kit-cell--post) { grid-column: span 6; }
}
@media (max-width: 599px) {
    .kit-cell:not(.kit-cell--cam):not(.kit-cell--glass):not(.kit-cell--post) { grid-column: span 12; }
    .kit-cell { padding: 22px 20px 26px; }
}