:root{--paper:#f4f1e6;--ink:#55483b;--gap:clamp(12px,1.25vw,24px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:36px}body{margin:0;background:var(--paper) url('assets/paper.png') repeat;color:var(--ink);font-family:'Courier New',Courier,monospace;font-size:clamp(14px,.9vw,17px);line-height:1.45;-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:5px}button{color:inherit;font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}figure,p,h1,h2{margin:0}h1,h2{font-size:inherit;font-weight:400}img{display:block;width:100%;height:auto}button{border:0;padding:0;background:none}.wrap{width:88%;max-width:1688px;margin-inline:auto}.skip{position:absolute;top:-80px;left:6%;z-index:10;background:var(--paper);padding:12px}.skip:focus{top:12px}.site-header{display:flex;justify-content:space-between;align-items:center;padding-top:40px}.wordmark{font-family:'Times New Roman',Times,serif;font-size:28px;line-height:1;text-decoration:none}.site-header nav{display:flex;gap:32px;font-size:12px;letter-spacing:.02em}.site-header nav a{text-decoration:none}.site-header nav a:hover{text-decoration:underline}.index-heading span,.section-heading h2 span{display:block}.index-heading,.section-heading{font-size:clamp(14px,.95vw,18px);line-height:1.5}.about{padding-top:125px;padding-bottom:125px;min-height:calc(100svh - 68px)}.about .index-heading{margin-bottom:70px}.about-layout{display:grid;grid-template-columns:55% 1fr;column-gap:12.5%;align-items:start}.about-image{border-radius:12px;overflow:hidden;opacity:.96}.about-copy{padding-top:26px;max-width:445px}.about-copy p+p{margin-top:12px}.project{padding-top:44px;padding-bottom:90px}.section-heading{display:flex;justify-content:space-between;align-items:start;gap:25px;margin-bottom:20px}.section-heading p{text-align:right;font-size:clamp(12px,.84vw,16px)}.film-player,.film-image{width:100%}.poster{display:block;position:relative;width:100%;cursor:pointer}.play{position:absolute;left:50%;top:50%;translate:-50% -50%;color:#fffff8;font-family:Arial,sans-serif;font-size:24px;line-height:1;filter:drop-shadow(0 1px 4px #0004);transition:scale .2s}.poster:hover .play{scale:1.12}.video-mount:empty{display:none}.video-mount{position:relative;width:100%;aspect-ratio:16/9;background:#151512}.video-mount iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.player-tools{display:flex;justify-content:space-between;padding:12px 0 0;font-size:12px}.player-tools[hidden]{display:none}.close-film{cursor:pointer}.project-copy{padding-block:26px;line-height:1.5}.stills{display:grid;gap:var(--gap);align-items:start}.hamsafar-stills{grid-template-columns:1.109fr 1fr 1fr}.open-door-stills{grid-template-columns:1.8935fr 2.2037fr 1.7663fr}figcaption{font-size:clamp(11px,.74vw,14px);line-height:1.5;margin-top:12px}.amber-stills{grid-template-columns:680fr 280fr 680fr}.amber-centre{display:flex;flex-direction:column;gap:14px}.amber-centre figcaption{margin-top:8px}.selected{padding-top:50px;padding-bottom:100px}.selected .index-heading{margin-bottom:60px}.selected-row{display:grid;grid-template-columns:var(--columns);gap:var(--gap);align-items:start}.selected-row+.selected-row{margin-top:62px}.selected-row figcaption{font-size:clamp(11px,.84vw,16px);margin-top:18px}.contact{display:grid;grid-template-columns:1fr 30%;gap:12%;padding-top:65px;padding-bottom:120px;align-items:start}.contact-intro{margin-top:64px}.contact-cta{display:inline-flex;gap:20px;text-decoration:none;margin-top:65px}.contact-cta span:first-child{border-bottom:1px solid var(--ink);padding-bottom:6px}.email{display:block;text-decoration:none;margin-top:22px;width:max-content;max-width:100%;overflow-wrap:anywhere}.email:hover{text-decoration:underline}.contact-portrait figcaption{margin-top:10px;font-size:clamp(11px,.84vw,16px)}
@media(min-width:1600px){.contact-portrait{max-width:504px;margin-left:auto}.contact{padding-bottom:200px}}
@media(max-width:1000px){.about{padding-top:95px;min-height:auto;padding-bottom:90px}.about .index-heading{margin-bottom:45px}.about-layout{grid-template-columns:53% 1fr;gap:7%}.about-copy{padding-top:0}.about-copy p+p{margin-top:10px}.project{padding-bottom:55px}.contact{grid-template-columns:1fr 34%;gap:8%}.contact-intro{margin-top:45px}.contact-cta{margin-top:42px}.contact-portrait figcaption{font-size:11px}.desktop-break{display:none}}
@media(max-width:700px){body{font-size:14px}.site-header{padding-top:26px}.wordmark{font-size:25px}.site-header nav{gap:17px;font-size:10px}.about{padding-top:76px;padding-bottom:76px}.about .index-heading{margin-bottom:27px}.about-layout{display:flex;flex-direction:column;gap:32px}.about-copy{max-width:none;order:0;line-height:1.55}.about-image{order:1;width:88%;border-radius:9px}.about-copy p+p{margin-top:10px}.project{padding-top:22px;padding-bottom:56px}.section-heading{font-size:13px;gap:15px;margin-bottom:16px}.section-heading p{font-size:10px;max-width:42%}.play{font-size:22px}.project-copy{padding-block:22px;font-size:13px}.project-copy p+p{margin-top:12px}.hamsafar-stills,.open-door-stills{grid-template-columns:1fr 1fr}.hamsafar-stills figure:last-child,.open-door-stills figure:last-child{grid-column:1/-1;width:70%;margin-left:auto}.stills{gap:22px 12px}figcaption{font-size:10px;margin-top:8px}.amber-stills{grid-template-columns:1fr 1fr}.amber-centre{display:contents}.amber-stills>figure:last-child{grid-column:2;grid-row:2}.amber-centre figure:first-child{grid-column:2;grid-row:1}.amber-centre figure:last-child{grid-column:1;grid-row:2}.selected{padding-top:10px;padding-bottom:70px}.selected .index-heading{margin-bottom:28px}.selected-row{grid-template-columns:1fr 1fr!important;gap:28px 14px}.selected-row:first-of-type{grid-template-columns:1fr!important;gap:30px}.selected-row:first-of-type figure:nth-child(2){width:82%;margin-left:auto}.selected-row+.selected-row{margin-top:35px}.selected-row figcaption{font-size:11px;line-height:1.4;margin-top:10px}.contact{display:flex;flex-direction:column;gap:36px;padding-top:25px;padding-bottom:70px}.contact-intro{margin-top:28px}.contact-cta{margin-top:32px}.email{font-size:13px;margin-top:17px}.contact-portrait{width:min(76%,360px);align-self:flex-end}.contact-portrait figcaption{font-size:10px;margin-top:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.play{transition:none}}
/* Section-by-section desktop navigation. Preserve natural image proportions. */
html{scroll-padding-top:0;scroll-snap-type:y mandatory}
.about,.project,.selected,.contact{scroll-snap-align:start;scroll-snap-stop:always;min-height:100svh}
.panel-inner{width:var(--panel-width,100%);margin-inline:auto}
.site-header{position:absolute;top:0;left:6%;z-index:5}
@media(min-width:701px){
 .films.wrap{width:100%;max-width:none}
 .project{width:88%;max-width:1688px;margin-inline:auto}
 .about,.project,.selected,.contact{height:auto;padding-top:84px;padding-bottom:44px;display:flex;align-items:center}
 .about{padding-top:132px}
 .about .panel-inner{align-self:center}
 .contact .panel-inner{display:grid;grid-template-columns:1fr 30%;column-gap:12%;align-items:start}
 .contact-portrait{max-width:504px;margin-left:auto}
 .contact .panel-inner{padding-block:20px}
 .project-copy{padding-block:24px}
 .project-copy p{font-size:inherit}
 .selected{padding-block:64px 44px}
 .oversized{min-height:100svh;height:auto}
}
html.free-panel-scroll{scroll-snap-type:y proximity}
@media(max-width:700px){
 html{scroll-snap-type:y proximity}
 .about,.project,.selected,.contact{height:auto;min-height:100svh;scroll-snap-stop:normal}
 .site-header{position:relative;left:auto}
 .about{padding-top:76px}
 .panel-inner{width:100%!important}
 .contact{display:block}
 .contact .panel-inner{display:flex;flex-direction:column;gap:36px}
 .contact-portrait{align-self:flex-end}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:y proximity}}

/* All six projects remain visible; only supplied films have watch links. */
.selected-image-link{display:block}.selected-watch{display:inline-block;margin-top:8px;font-size:.9em}.selected-image-link:hover{opacity:.92}

.selected-watch.inactive{text-decoration:underline;text-underline-offset:5px;cursor:default}

/* Phone compositions: even image rows and content-led section heights. */
@media(max-width:700px){
 html,html.free-panel-scroll{scroll-snap-type:y mandatory}
 .about,.project,.selected,.contact{min-height:0;height:auto;scroll-snap-stop:always;scroll-margin-top:20px}
 .about{padding-top:18px;padding-bottom:48px}
 .project{padding-top:28px;padding-bottom:40px}
 .selected{padding-top:28px;padding-bottom:48px}
 .stills{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
 .stills figure{min-width:0}
 .stills img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center}
 .hamsafar-stills figure:last-child,.open-door-stills figure:last-child{grid-column:1/-1;width:calc((100% - 12px)/2);margin-inline:auto}
 .amber-centre{display:contents}
 .amber-centre img{width:100%!important}
 .amber-stills>figure:last-child{grid-column:2;grid-row:2}
 .amber-centre figure:first-child{grid-column:2;grid-row:1}
 .amber-centre figure:last-child{grid-column:1;grid-row:2}
 .stills figcaption,.amber-centre figcaption{margin-top:8px}
 .selected-row{gap:24px 14px;align-items:start}
 .selected-row:first-of-type{grid-template-columns:1fr!important;gap:28px}
 .selected-row:first-of-type figure:nth-child(2){width:100%;margin-inline:0}
 .selected-row img{aspect-ratio:3/2;object-fit:cover;object-position:center}
 .selected-row+.selected-row{margin-top:28px}
 .selected-row figcaption{min-height:3.9em}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 html,html.free-panel-scroll{scroll-snap-type:y proximity}
}

/* Matching Amber centre frames, including after resizing between layouts. */
.amber-centre figure{min-width:0}
@media(max-width:700px){
 .amber-centre img{width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover}
}

/* Full-width desktop compositions, consistent with About and Contact. */
@media(min-width:701px){
 .panel-inner{width:100%}
 .about,.project,.selected,.contact{padding-top:64px;padding-bottom:48px}
 .about{padding-top:132px}
 .selected .index-heading{margin-bottom:38px}
 .selected-row+.selected-row{margin-top:38px}
}
/* A drawn triangle avoids iOS rendering the text glyph as a blue emoji. */
.poster{appearance:none;-webkit-appearance:none;border-radius:0;-webkit-tap-highlight-color:transparent}
.play{display:block;width:24px;height:28px;font-size:0;pointer-events:none}
.play svg{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:700px){.play{width:22px;height:26px}}