/* =====================================================================
anoushka — portfolio
Reference: "website reference pdf" (7 pages).
Voice: typewriter mono for everything structural, handwriting for the
asides, book italic for captions. Paper background sitewide, colour
only in the logo/nav stickers and in the photographs themselves.
===================================================================== */
/* ---------- tokens ---------- */
:root{
color-scheme:light;
--paper:#f2efe8; /* the shade from p.2 — used on every page */
--paper-deep:#e9e4d8; /* inset panels, film-index rails */
--ink:#151412;
--ink-70:rgba(21,20,18,.70); /* 6.9:1 on paper */
--ink-dim:rgba(21,20,18,.62); /* 4.7:1 — the quietest text allowed anywhere */
--ink-25:rgba(21,20,18,.25); /* rules and hairlines only, never text */
--grey:#3b3a36; /* p.5: "font colour would be a dark grey" */
--rule:rgba(21,20,18,.16);
/* p.7 (about + contact) is the one reference page set in a grotesque
rather than the typewriter, and its whole column is printed red. */
--sans:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
--red:#9c3a33; /* 6:1 on paper — picker option 01 */
--red-deep:#6a2724; /* hover / pressed */
/* the only colour in the UI — logo + nav stickers */
--pink:#ff8fb1;
--cyan:#6cc8e6;
--violet:#b09aff;
--yellow:#ffd84d;
--green:#8ad98f;
/* Type scale. The small labels had drifted across fourteen values between
.62 and .92rem — differences of a third of a pixel that read as noise
rather than hierarchy. Four steps, used by role. */
--fs-2xs:.66rem; /* 10.6px — micro labels, counters, laurel captions */
--fs-xs:.72rem; /* 11.5px — mono labels, nav, credits, meta */
--fs-sm:.8rem; /* 12.8px — captions, index titles, table rows */
--fs-md:.88rem; /* 14.1px — body copy */
--pad:clamp(18px,3.6vw,54px);
--ease:cubic-bezier(.22,.61,.36,1);
--fade:520ms;
/* jagged sticker edge, shared by the logo and every nav chip */
--burst:polygon(0% 38%,5% 24%,17% 30%,23% 12%,37% 23%,50% 4%,63% 23%,77% 12%,83% 30%,95% 24%,100% 38%,93% 50%,100% 62%,95% 76%,83% 70%,77% 88%,63% 77%,50% 96%,37% 77%,23% 88%,17% 70%,5% 76%,0% 62%,7% 50%);
}
/* =====================================================================
PHONE TYPE SCALE
The desktop scale was built for a screen two feet from your face. On a
phone held at arm's length the same tokens render 10.6–14px, which is
what made the whole site read as a laptop page shrunk down — every label,
every caption, every nav item. The four tokens are redefined once here
and the entire site lifts with them.
===================================================================== */
@media (max-width:640px){
:root{
--fs-2xs:.78rem; /* 12.5px — tracked caps, counters, laurel captions */
--fs-xs:.84rem; /* 13.4px — mono labels, nav, credits, meta */
--fs-sm:.94rem; /* 15px — captions, index titles, table rows */
--fs-md:1.05rem; /* 16.8px — body copy */
--pad:clamp(20px,5.4vw,30px);
}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--paper);color:var(--ink);
min-height:100svh;display:flex;flex-direction:column;
font-family:"Courier Prime",ui-monospace,"Courier New",monospace;
font-size:15px;line-height:1.55;
-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
picture{display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}
/* keyboard: jump past the sticker nav straight to the work */
.skip{
position:absolute;left:-9999px;top:0;z-index:99;
padding:12px 18px;background:var(--ink);color:var(--paper);
font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:var(--pad);top:var(--pad)}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ---------- type helpers ---------- */
.mono-label{ /* the Teller index voice — p.4 */
font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
}
.hand{ /* the felt-pen asides — p.2 */
font-family:"Caveat",cursive;font-weight:700;
font-size:clamp(1.4rem,2.5vw,2.1rem);line-height:1.1;letter-spacing:.01em;
}
/* EB Garamond runs small optically, so the location/date line sits just above
the scale's --fs-md on purpose. The only deliberate exception. */
.cap-italic{ /* location + date — p.4 */
font-family:"EB Garamond",Georgia,serif;font-style:italic;
font-size:.92rem;letter-spacing:.01em;color:var(--ink-70);
}
/* =====================================================================
HEADER — sticker logo left, live date, sticker nav right
===================================================================== */
.hdr{
position:relative;z-index:20;
display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
padding:calc(var(--pad) + env(safe-area-inset-top,0px))
calc(var(--pad) + env(safe-area-inset-right,0px)) 0
calc(var(--pad) + env(safe-area-inset-left,0px));
}
.hdr-left{display:flex;flex-direction:column;gap:10px}
.logo{
display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
align-self:flex-start; /* .hdr-left is a column flex: the hit
area must not stretch to its width */
justify-content:center;min-height:44px; /* thumb target; the mark keeps its size */
rotate:-2deg; /* `rotate:`, never `transform:` — see .rise */
line-height:1;text-decoration:none;color:var(--ink);
transition:opacity 300ms var(--ease);
}
.logo:hover{opacity:.72}
.logo-word{
font-family:"Caveat",cursive;font-weight:700;
font-size:1.62rem;letter-spacing:.005em;
}
/* .319em of the mark's size — the same 8px dash the option sheet drew. The box
is almost nothing; `non-scaling-stroke` keeps the 2px line at full weight
however far the path is squashed, and that stroke IS the mark. */
.logo-rule{
display:block;width:.319em;height:auto;overflow:visible;
font-size:1.62rem;
}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding-top:4px}
.chip{
position:relative;display:inline-flex;align-items:center;justify-content:center;
min-height:44px;padding:8px 16px; /* 44px tap target, small visible badge */
font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;
transition:transform 300ms var(--ease);
}
.chip:active{transform:scale(.97)}
.chip::before,.chip::after{content:"";position:absolute;inset:0;clip-path:var(--burst);z-index:-1}
.chip::before{background:var(--ink);inset:-2px}
.chip::after{background:var(--c)}
.chip:nth-child(1){--c:var(--pink);transform:rotate(-2deg)}
.chip:nth-child(2){--c:var(--cyan);transform:rotate(1.5deg)}
.chip:nth-child(3){--c:var(--violet);transform:rotate(-1deg)}
.chip:nth-child(4){--c:var(--yellow);transform:rotate(2deg)}
.chip:nth-child(5){--c:var(--green);transform:rotate(-1.5deg)}
.chip:hover,.chip:focus-visible{transform:rotate(0deg) scale(1.06)}
.chip[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
/* =====================================================================
HOME — two panels stacked in one fixed frame (p.2 then p.3).
A 200svh rail behind them supplies the scroll travel and the snap
points; scrolling scrubs the crossfade. Reduced motion drops the rail
and the two panels simply stack as an ordinary page.
===================================================================== */
.home-stack{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.panels{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.panel{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.home-rail{display:none}
@media (prefers-reduced-motion:no-preference){
.home-stack{position:fixed;inset:0;z-index:2}
.panel{position:absolute;inset:0;will-change:opacity}
.panel-feat{opacity:0}
.panel.is-off{visibility:hidden;pointer-events:none}
.home-rail{display:block;height:200svh}
.home-rail i{display:block;height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
html.snap{scroll-snap-type:y mandatory}
}
@media (prefers-reduced-motion:reduce){
.panel{min-height:100svh}
}
.panel-hero{position:relative;overflow:hidden;padding:0 var(--pad)}
/* the row takes every pixel the header leaves; the photo is bottom-anchored
inside it, so her cut-off edge meets the bottom of the page at any size */
.hero-row{
flex:1 1 auto;min-height:0;
display:flex;align-items:stretch;justify-content:center;
gap:clamp(10px,3vw,58px);
}
/* The figure takes its width from the photograph's own shape (1080x1380) times
the height the row gives it, and the picture fills it absolutely. Letting the
![]()
size the figure instead works in Chrome but not Safari: Safari sizes the
figure from the file's intrinsic 1080px width, pins the photo to its left edge
and hangs the role words off a box twice her width. This is a ratio on the
wrapper, not on the image, and the image is eager, so the lazy-load trap in
CLAUDE.md does not apply. Re-measure if the portrait is replaced. */
.portrait{
margin:0;position:relative;z-index:2;min-height:0;flex:0 1 auto;
aspect-ratio:1080/1380;max-width:100%;
height:100%; /* Safari only derives the width from the ratio off a stated
height — the row's stretch alone leaves it 0px wide */
}
.portrait picture{position:absolute;inset:0;display:block}
.portrait img{
width:100%;height:100%;
object-fit:contain;object-position:bottom center;
}
.role{ /* positioned against the photo, not the page */
position:absolute;z-index:3;
left:var(--x);top:var(--y);transform:translate(-50%,-50%);
text-align:center;font-size:var(--fs-xs);letter-spacing:.1em;color:var(--ink);
white-space:nowrap;pointer-events:none;
}
.role b{display:block;font-weight:400}
.role i{display:block;font-style:normal;font-size:var(--fs-2xs);margin-top:3px}
.hand-note{flex:1 1 0;align-self:center;z-index:4;max-width:26ch}
/* the same top margin on both, so with align-self:center their middles sit on
one line: "hi! i'm a…" level with the middle of the two-line location note,
as on the phone (her ask, 2026-10-05; the left one was 9vh) */
.hand-note.left{margin-left:auto;text-align:right;transform:rotate(-2deg);margin-top:3vh}
.hand-note.right{margin-right:auto;text-align:center;transform:rotate(1.5deg);margin-top:3vh}
.roles-line{display:none}
/* the written scroll cue */
.cue{
position:absolute;z-index:5;
right:calc(var(--pad) + env(safe-area-inset-right,0px));
bottom:calc(clamp(12px,2.4vh,26px) + env(safe-area-inset-bottom,0px));
display:flex;flex-direction:column;align-items:center;gap:1px;
color:var(--ink);text-align:center;
text-shadow:0 0 9px var(--paper),0 0 18px var(--paper);
}
.cue-arrow{filter:drop-shadow(0 0 6px var(--paper)) drop-shadow(0 0 12px var(--paper))}
.cue .hand{font-size:clamp(1.05rem,1.5vw,1.4rem);transform:rotate(-2deg);line-height:1.1}
.cue-arrow{width:clamp(15px,1.5vw,21px);height:auto}
@media (prefers-reduced-motion:no-preference){
.cue-arrow{animation:cue-bob 2.6s var(--ease) infinite}
@keyframes cue-bob{0%,100%{translate:0 0}50%{translate:0 5px}}
}
.cue:hover .hand{text-decoration:underline;text-underline-offset:4px}
.cue-back{margin:0 0 10px}
/* =====================================================================
PAGE FURNITURE — shared by every inner page
===================================================================== */
.wrap{padding:0 var(--pad);flex:1 1 auto}
.page-head{
display:flex;align-items:baseline;justify-content:space-between;gap:24px;
flex-wrap:wrap;
padding:clamp(34px,7vh,72px) 0 clamp(20px,4vh,36px);
}
.page-title{
margin:0;font-weight:400;font-size:clamp(1rem,1.5vw,1.15rem);
letter-spacing:.2em;text-transform:uppercase;
}
.back{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-70)}
.back:hover{color:var(--ink)}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.foot{
display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
align-items:baseline;
padding:clamp(48px,9vh,96px) calc(var(--pad) + env(safe-area-inset-right,0px))
calc(var(--pad) + 6px + env(safe-area-inset-bottom,0px))
calc(var(--pad) + env(safe-area-inset-left,0px));
font-size:var(--fs-2xs);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-dim);
}
.foot a:hover{color:var(--ink)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
/* =====================================================================
PHOTOGRAPHY — p.4: magazine index, title card = name + one photo,
italic location/date set vertically along the plate, like the book.
===================================================================== */
.index-block{
display:grid;grid-template-columns:auto 1fr auto;gap:4px 18px;
align-items:baseline;max-width:52ch;margin-bottom:clamp(40px,8vh,86px);
}
.index-block .ix-h{grid-column:1/-1;margin-bottom:14px}
.index-row{display:contents}
.index-row > *{padding:5px 0;border-bottom:1px solid var(--rule)}
.index-row .num{font-size:var(--fs-xs);letter-spacing:.1em;color:var(--ink-dim)}
.index-row .nm{font-size:var(--fs-sm);letter-spacing:.13em;text-transform:uppercase}
.index-row .pl{font-size:var(--fs-xs);color:var(--ink-dim);font-variant-numeric:tabular-nums}
.index-row:hover .nm{text-decoration:underline;text-underline-offset:4px}
.plates{
display:grid;grid-template-columns:repeat(12,1fr);
gap:clamp(28px,5vw,72px) clamp(20px,3vw,48px);
padding-bottom:clamp(40px,8vh,90px);
}
.plate{margin:0;position:relative;display:flex;gap:14px;align-items:flex-start}
.plate-media{flex:1 1 auto;min-width:0}
.plate img{width:100%;height:auto;background:var(--paper-deep)}
.plate figcaption{
flex:0 0 auto;writing-mode:vertical-rl;
font-family:"EB Garamond",Georgia,serif;font-style:italic;font-size:var(--fs-sm);
color:var(--ink-70);letter-spacing:.02em;max-height:100%;
}
.plate-title{
display:block;margin-bottom:10px;
font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;
}
.plate-title .rn{color:var(--ink-dim);margin-right:12px}
.plate a:hover .plate-title{text-decoration:underline;text-underline-offset:4px}
.plate img{transition:opacity 520ms var(--ease)}
.plate a:hover img{opacity:.86}
/* asymmetric magazine placement */
.plate:nth-child(1){grid-column:1/6}
.plate:nth-child(2){grid-column:7/12;margin-top:clamp(30px,7vw,120px)}
.plate:nth-child(3){grid-column:2/7}
.plate:nth-child(4){grid-column:8/13;margin-top:clamp(-40px,-3vw,0px)}
.plate:nth-child(5){grid-column:4/10}
/* series page — "aligned in different sizes, not all the same size" */
.series-head{max-width:60ch;padding-bottom:clamp(24px,5vh,48px)}
.series-head h1{
margin:0 0 10px;font-weight:400;font-size:clamp(1.3rem,3vw,2.2rem);
letter-spacing:.06em;text-transform:uppercase;
}
.spread{
display:grid;grid-template-columns:repeat(12,1fr);
gap:clamp(26px,4vw,64px) clamp(18px,2.6vw,44px);
padding-bottom:clamp(50px,10vh,110px);
}
.spread figure{margin:0}
.spread img{width:100%;height:auto;background:var(--paper-deep)}
.spread figcaption{
margin-top:8px;font-family:"EB Garamond",Georgia,serif;font-style:italic;
font-size:var(--fs-sm);color:var(--ink-dim);
}
.spread figure:nth-child(6n+1){grid-column:1/7}
.spread figure:nth-child(6n+2){grid-column:8/13;align-self:end}
.spread figure:nth-child(6n+3){grid-column:3/8;margin-top:clamp(10px,3vw,50px)}
.spread figure:nth-child(6n+4){grid-column:9/13}
.spread figure:nth-child(6n+5){grid-column:2/6}
.spread figure:nth-child(6n+6){grid-column:6/12}
.series-nav{
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding-bottom:clamp(20px,4vh,40px);
font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-70);
}
.series-nav a{min-height:44px;display:inline-flex;align-items:center}
.series-nav a:hover{color:var(--ink)}
/* =====================================================================
FILMS — p.5: index right (No / Title / Duration), clips left,
the clicked one enlarges. Paper ground, dark-grey type.
===================================================================== */
.films{flex:1 1 auto;color:var(--grey);display:grid;grid-template-columns:minmax(210px,27%) 1fr;
gap:clamp(24px,4vw,64px);padding:0 var(--pad);align-items:start}
.reel{
position:sticky;top:var(--pad);max-height:calc(100svh - var(--pad) * 2);
overflow-y:auto;overscroll-behavior:contain;
display:flex;flex-direction:column;gap:10px;padding-right:4px;
scrollbar-width:thin;
}
.reel-item{
position:relative;display:block;width:74%;margin-left:auto;border:0;padding:0;background:none;
cursor:pointer;opacity:.45;filter:saturate(.5);
transition:opacity 480ms var(--ease),filter 480ms var(--ease),width 480ms var(--ease);
}
.reel-item[data-active="true"]{width:100%}
.reel-item img,.reel-item video{width:100%;height:auto;aspect-ratio:auto 16/9;object-fit:cover}
.reel-item[data-active="true"]{opacity:1;filter:none}
.reel-item:hover{opacity:.85}
.reel-item .rl{
display:flex;justify-content:space-between;gap:12px;
padding:7px 1px 0;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
color:var(--grey);opacity:0;transition:opacity 340ms var(--ease);
}
.reel-item[data-active="true"] .rl{opacity:1}
/* The index sits in the vertical middle of its column, beside the reel. It
once started level with the first clip instead; centred is her call
(2026-10-04). Phones stack it under the reel, where this does not apply. */
.filmography{
min-height:0;
display:flex;flex-direction:column;justify-content:center;
}
.fx-head,.fx-row{
display:grid;grid-template-columns:3.2rem 1fr 9rem;gap:16px;align-items:baseline;
}
.fx-head{
font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:14px;
}
.fx-row{
width:100%;text-align:left;border:0;background:none;cursor:pointer;color:var(--grey);
font:inherit;padding:7px 0;font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;
transition:color 300ms var(--ease),opacity 300ms var(--ease);opacity:.78;
}
.fx-row .kind{font-size:var(--fs-xs);letter-spacing:.08em;color:var(--ink-dim)}
.fx-row[data-active="true"] .kind{color:var(--grey)}
.fx-row:hover{opacity:.94}
.fx-row[data-active="true"]{opacity:1;color:var(--ink)}
.fx-list{border-bottom:1px solid var(--rule);padding-bottom:12px}
.open-film{
display:inline-block;margin-top:18px;font-family:"Caveat",cursive;font-weight:700;
font-size:1.35rem;color:var(--ink);
}
.open-film:hover{text-decoration:underline;text-underline-offset:4px}
/* =====================================================================
FILMS — cinema index: a stack of poster cards into the sheets
===================================================================== */
.posters{
display:flex;flex-direction:column;gap:clamp(44px,8vh,104px);
padding:clamp(26px,5vh,58px) 0 clamp(50px,9vh,110px);
}
.poster{margin:0;width:min(100%,760px)}
.poster:nth-child(even){margin-left:auto}
.poster a{display:block}
.poster-media{
position:relative;display:block;background:var(--paper-deep);overflow:hidden;
}
.poster-media img{
width:100%;height:auto;aspect-ratio:auto 16/9;object-fit:cover;display:block;
transition:opacity 520ms var(--ease),scale 720ms var(--ease);
}
.poster-media::after{
content:"";position:absolute;inset:0;
background:radial-gradient(120% 100% at 50% 45%,rgba(0,0,0,.10),rgba(0,0,0,.48));
}
.poster-title{
position:absolute;inset:0;z-index:2;display:grid;place-items:center;
padding:0 7%;text-align:center;text-wrap:balance;
font-family:"Caveat Brush",cursive;line-height:.92;color:#f7f3ea;
font-size:clamp(1.9rem,4.6vw,3.6rem);
}
.poster a:hover .poster-media img{opacity:.92;scale:1.015}
.poster-foot{
display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;
padding-top:11px;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-70);
}
.poster-no{color:var(--ink-dim)}
.poster-line{margin:9px 0 0;max-width:48ch;font-size:var(--fs-sm);color:var(--ink-dim);line-height:1.7}
/* =====================================================================
FILM PAGE — p.6: the still is the ground, the title is the subject,
"a film by anoushka" always in the same place, laurels below.
===================================================================== */
.film-sheet{
position:relative;flex:1 1 auto;min-height:100svh;
overflow:hidden;background:#0d0c0b;
}
/* one film. Two of these overlap while the fade runs. */
.film-layer{
position:absolute;inset:0;
display:flex;flex-direction:column; /* nav / body / laurels */
padding:calc(var(--pad) + env(safe-area-inset-top,0px))
calc(var(--pad) + env(safe-area-inset-right,0px))
calc(var(--pad) + env(safe-area-inset-bottom,0px))
calc(var(--pad) + env(safe-area-inset-left,0px));
color:#f6f2e9;
}
@media (prefers-reduced-motion:no-preference){
/* the same cross-fade the photography viewer uses between plates */
.film-layer{transition:opacity var(--fade) var(--ease);will-change:opacity}
.film-layer.is-in,.film-layer.is-out{opacity:0}
}
/* The wrapper is the box that covers the sheet, and the still fills it. With
the wrapper as display:contents Safari resolved the still's height:100%
against nothing, drew it at its natural 16:9-ish height and left the laurel
band sitting on the bare dark sheet underneath. */
.still-wrap{position:absolute;inset:0;display:block}
.film-layer .still{
display:block;width:100%;height:100%;object-fit:cover;
filter:saturate(.92) contrast(1.03);
}
.film-layer::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,.12),rgba(0,0,0,.55));
}
.film-body{
position:relative;z-index:2;text-align:center;
width:min(1100px,100%);margin:auto; /* centres in what is left */
}
/* The title is her own artwork. It is never scaled past its encoded width, so
it stays crisp; small marks simply sit smaller on the sheet. */
.film-title{
margin:0;line-height:0;
height:clamp(160px,31vh,310px); /* one slot, every film */
display:flex;align-items:center;justify-content:center;
}
.film-title a{display:flex;align-items:center;justify-content:center;height:100%}
.film-art{
display:block;max-width:86vw;max-height:100%;
object-fit:contain;margin:0 auto;
}
.film-title a:hover .film-art{opacity:.88}
.film-watch{
margin-top:clamp(14px,2.2vh,22px);min-height:44px;
font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase;
}
/* "Watch" and "Coming soon" are the same line in two states, so they are
styled together — no rule under either of them. */
.film-watch a,.film-soon{
color:rgba(246,242,233,.9);
display:inline-flex;min-height:44px;align-items:center;
}
.film-watch a{transition:color 300ms var(--ease)}
.film-watch a:hover{color:#fff}
.film-soon{color:rgba(246,242,233,.66)} /* nothing to click yet, so quieter */
.film-by{
margin:clamp(18px,3vh,34px) 0 0;
font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;color:rgba(246,242,233,.86);
}
.film-meta{
margin-top:8px;font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
color:rgba(246,242,233,.78);
}
/* Always rendered, even for a film with no laurels, and with one row's height
reserved — that is what keeps the title block sitting at the same height on
all seven sheets instead of drifting with the festival count. */
.laurels{
position:relative;z-index:2;flex:none;width:100%;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:clamp(13px,1.9vh,24px) clamp(18px,3.2vw,52px);
padding-top:clamp(16px,3vh,32px);
/* the reserve has to include the band's own padding, or an empty band comes
out shorter than a filled one and the title block drifts between films */
min-height:calc(clamp(44px,6.4vh,74px) + clamp(16px,3vh,32px));
}
/* The festival artwork itself, normalised to one ink. Height is set and width
left auto so each mark keeps its own proportions. */
.laurel{
display:block;width:auto;height:clamp(44px,6.4vh,74px);
opacity:.88;flex:none;
pointer-events:none; /* belt and braces: a mark never eats a click */
}
.film-sheet :focus-visible{outline-color:#f6f2e9}
.film-nav{
position:relative;z-index:3;width:100%;flex:none;
/* `space-between` only centres the counter when the two outer items happen to
be the same width, and they never are — "Home" is a third of "Prev / Next",
which pushed the count 42px left. Equal fr columns centre it by construction. */
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:rgba(246,242,233,.75);
}
.film-nav a:hover{color:#fff}
.film-nav > :first-child{justify-self:start}
.film-nav > :last-child{justify-self:end}
.film-nav > *{white-space:nowrap}
.film-step{display:inline-flex;align-items:center;gap:clamp(8px,1.4vw,16px)}
.film-sep{font-style:normal;opacity:.45}
.film-count{
justify-self:center;text-align:center;
color:rgba(246,242,233,.6);font-variant-numeric:tabular-nums;
}
/* =====================================================================
FEATURED — p.3: left information + plates, right a portrait
===================================================================== */
/* The photograph holds the right of the panel and its left edge dissolves into
the paper the words stand on — a soft seam instead of the hard half-and-half
split, without stretching the picture.
It occupies 58% rather than the full width on purpose: spanning the whole
panel forced a 1108px-wide portrait to cover 1440px, magnifying it 1.30x —
soft, and cropped down to a face. At 58% it renders at about 0.75x, under
its native size, so it stays sharp and the framing survives.
Below 900px the same idea runs vertically (see the phone block). */
.split{position:relative;flex:1 1 auto;min-height:0;display:block}
.panel-feat{overflow:hidden}
.split-r{
position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0;
background:var(--paper-deep);
}
.split-r img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 30%;filter:grayscale(1);
}
.split-r::after{ /* the seam: paper dissolving into picture */
content:"";position:absolute;inset:0;pointer-events:none;
/* Two layers. The top one is a short, much lighter fade that softens the
photograph's hard top edge; the second is the main left-to-right seam. */
background:
linear-gradient(to bottom,
var(--paper) 0%, rgba(242,239,232,.74) 2%,
rgba(242,239,232,.32) 6%, rgba(242,239,232,0) 12%),
linear-gradient(to right,
var(--paper) 0%, var(--paper) 10%,
rgba(242,239,232,.88) 28%, rgba(242,239,232,.42) 46%,
rgba(242,239,232,.10) 64%, rgba(242,239,232,0) 78%);
}
.split-l{
position:relative;z-index:1;height:100%;width:min(56%,780px);
display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,3vh,40px);
padding:clamp(24px,4vh,56px) clamp(24px,3vw,56px) clamp(24px,4vh,48px) var(--pad);
min-height:0;overflow:hidden;
}
.exhibit-title{
margin:0 0 14px;font-weight:400;font-size:clamp(1.1rem,2vw,1.5rem);
letter-spacing:.14em;text-transform:uppercase;
}
.exhibit-copy{max-width:40ch;font-size:var(--fs-md);color:var(--ink-70);line-height:1.8}
/* With no description, no date and no footnote, these two are the only thing
in the column besides the title and the contact row — so they take its full
width rather than sitting in it as thumbnails. */
.exhibit-plates{
display:flex;gap:clamp(16px,2.2vw,30px);align-items:flex-start;
width:100%;margin:0;
}
.exhibit-plates figure{margin:0;flex:1 1 0;min-width:0}
.exhibit-plates img{width:100%;height:auto;display:block;background:var(--paper-deep)}
.exhibit-plates figcaption{
margin-top:7px;font-family:"EB Garamond",Georgia,serif;font-style:italic;
font-size:var(--fs-sm);color:var(--ink-dim);
}
.exhibit-links{
display:flex;flex-wrap:wrap;gap:6px 20px;margin:18px 0 0;padding:0;list-style:none;
font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
}
.exhibit-links a:hover{color:var(--ink)}
/* =====================================================================
ABOUT + CONTACT — p.7: justified block, portrait, contact
===================================================================== */
.about{
flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
padding:clamp(20px,4vh,44px) var(--pad) clamp(40px,8vh,90px);
}
.about-col{
width:100%;max-width:46ch;
font-family:var(--sans);color:var(--red);
}
.justif{ /* the stretched alignment from p.7 */
text-align:justify;text-align-last:justify;-webkit-hyphens:none;hyphens:none;
}
/* Each .ln is one line that site.js broke early, so it is both the first and the
last line of its own block — text-align-last is what actually stretches it. */
.about-col .ln{display:block;text-align:justify;text-align-last:justify}
/* p.7's scatter comes from fitting FEWER words on a line, not from any spacing
trick: justification then has to open each gap much wider. The column stays
put (46ch of the inherited 15px) and the type grows into it — the name until
its second line breaks, the copy until a line holds ~45 characters, which is
what the reference measures. */
.about-name{
/* left block and right block, each stacked, pushed to the outer edges */
display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
margin:0 0 clamp(10px,1.8vh,18px);font-weight:500;
font-size:1.6rem;letter-spacing:0;line-height:1.24;
}
.about-name .hl{display:flex;flex-direction:column;min-width:0}
.about-name .hl-line{display:block}
.about-name .hl-r{text-align:right}
.about-photo{margin:0 0 clamp(10px,1.8vh,18px)}
.about-photo img{width:100%;height:auto}
.about-copy{font-size:1.05rem;line-height:1.52;letter-spacing:.005em}
.about-copy p{margin:0 0 1.1em}
.contact-list{
margin:clamp(28px,6vh,60px) 0 0;padding:0;list-style:none;
display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;
}
.contact-list a{color:var(--red)}
.contact-list a:hover{color:var(--red-deep);text-decoration:underline;text-underline-offset:4px}
/* =====================================================================
MOTION — soft, slow, once. Nothing slides.
===================================================================== */
/* The reveal uses the standalone `translate` property, NOT `transform` — .role
carries its own transform:translate(-50%,-50%) for centring, and a `.rise.in`
rule setting transform:none would silently win and knock every label
off-centre (equal-specificity classes: the later rule takes it). */
.rise{opacity:0;translate:0 10px;
transition:opacity var(--fade) var(--ease),translate var(--fade) var(--ease)}
.rise.in{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
.rise{opacity:1;translate:none}
}
/* =====================================================================
RESPONSIVE — phone layouts are their own layout, not a squeeze
===================================================================== */
@media (max-width:900px){
/* the flanking hero needs real width for the notes AND the photo's natural
width — below this it becomes a column: roles, notes, then the photo taking
whatever height is left and standing on the bottom edge of the screen */
.hero-row{flex-direction:column;align-items:stretch;gap:4px}
.hand-note,.hand-note.left,.hand-note.right{
max-width:none;margin:0;align-self:auto;flex:0 0 auto;
}
.hand-note.left{align-self:flex-start;text-align:left;transform:rotate(-2deg)}
.hand-note.right{align-self:flex-end;text-align:right;transform:rotate(1.5deg);order:2}
.portrait{order:3;flex:1 1 auto;width:100%;height:auto;min-height:0;aspect-ratio:auto}
/* she fills the width here, so the cue lands on the coat — give it a soft pool
of paper to sit on (invisible where the paper already shows) */
.cue{
align-items:center;padding:4px 8px 2px;
background:radial-gradient(closest-side at 50% 52%,
var(--paper) 40%, rgba(242,239,232,.82) 70%, rgba(242,239,232,0) 100%);
}
.role{display:none}
.roles-line{
display:flex;flex-wrap:wrap;justify-content:center;gap:3px 14px;
margin:0;padding:4px 0 2px;font-size:var(--fs-2xs);letter-spacing:.09em;color:var(--ink-70);
}
.roles-line span{display:inline-flex;gap:6px;align-items:center}
.plates,.spread{grid-template-columns:repeat(6,1fr)}
.plate:nth-child(1),.plate:nth-child(3){grid-column:1/5}
.plate:nth-child(2),.plate:nth-child(4){grid-column:3/7;margin-top:0}
.plate:nth-child(5){grid-column:1/6}
.spread figure:nth-child(6n+1),.spread figure:nth-child(6n+3),
.spread figure:nth-child(6n+5){grid-column:1/5}
.spread figure:nth-child(6n+2),.spread figure:nth-child(6n+4),
.spread figure:nth-child(6n+6){grid-column:3/7;margin-top:0}
.films{grid-template-columns:1fr}
.reel{position:static;max-height:none;flex-direction:row;overflow-x:auto;
scroll-snap-type:x proximity;padding-bottom:6px}
.reel-item{flex:0 0 74%;scroll-snap-align:center}
/* phone featured: the photograph is the ground, the words sit on a paper fade
over its lower half — nothing has to be trimmed to make one screen */
.split{display:block;position:relative;flex:1 1 auto;min-height:0;height:100%}
/* width:auto is required — the base rule's width:58% otherwise wins over
inset's left/right pair and the photograph stops dead mid-screen */
.split-r{position:absolute;inset:0;width:auto;z-index:0;aspect-ratio:auto}
.split-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-r::after{ /* the paper fade the words sit on */
content:"";position:absolute;pointer-events:none;
left:0;right:0;top:0;bottom:0;height:auto;
background:
/* same short top fade as desktop, so the photograph has no hard edge
under the stickers */
linear-gradient(to bottom,
var(--paper) 0%, rgba(242,239,232,.6) 2%, rgba(242,239,232,0) 8%),
linear-gradient(to bottom,
rgba(242,239,232,.06) 0%, rgba(242,239,232,.55) 34%,
rgba(242,239,232,.93) 52%, var(--paper) 66%);
}
.split-l{
position:relative;z-index:1;height:100%;overflow:hidden;
justify-content:flex-end;gap:clamp(10px,2vh,18px);
padding:clamp(14px,2.6vh,26px) var(--pad)
calc(clamp(16px,3vh,28px) + env(safe-area-inset-bottom,0px));
}
.exhibit-plates{display:none}
.split-r img{position:relative;height:100%}
.about{grid-template-columns:1fr}
}
@media (max-width:640px){
/* phones read prose at 16px — only the labels stay small */
.exhibit-copy,.about-copy{font-size:1rem;line-height:1.75}
.about-name{font-size:1.45rem}
.foot,.exhibit-links{font-size:var(--fs-sm)}
.fx-row{font-size:var(--fs-md)}
.laurel span{font-size:var(--fs-2xs)}
/* phone header: the sticker must not stretch to the full column width */
.hdr{flex-direction:column;align-items:flex-start;gap:15px}
.logo{align-self:flex-start}
.chips{justify-content:flex-start;padding-top:0}
.chip{padding:9px 15px 10px}
.plates,.spread{grid-template-columns:1fr;gap:34px}
.plate,.plate:nth-child(n),.spread figure,.spread figure:nth-child(n){
grid-column:1/-1;margin-top:0}
.plate figcaption{writing-mode:horizontal-tb;margin-top:8px}
.plate{flex-direction:column;gap:0;align-items:stretch}
.exhibit-plates{flex-direction:column;align-items:stretch}
/* ---- phone film sheet ----
No laurels: at this width they are four to seven marks a few millimetres
tall, unreadable, and they crowd the only two controls on the page. The
title takes the middle of the screen and the three lines under it keep
their order and their size, moved to the foot where a thumb reaches them.
The sheet's own safe-area padding keeps them clear of the home indicator
on iPhone and the gesture bar on Samsung. */
.laurels{display:none}
/* the nav leaves the flow so .film-body spans the whole content box — the
title is centred against that, and it has to be the screen's centre, not
the centre of whatever is left under the nav */
.film-nav{
position:absolute;width:auto;
top:calc(var(--pad) + env(safe-area-inset-top,0px));
left:calc(var(--pad) + env(safe-area-inset-left,0px));
right:calc(var(--pad) + env(safe-area-inset-right,0px));
}
.film-body{
flex:1 1 auto;min-height:0;width:100%;margin:0;
display:flex;flex-direction:column;
}
/* Centred on the screen itself, not on the space between the nav and the
lines — those two bands are different heights, so flowing it would sit the
title ~48px high. The