:root{
  --yellow:#A85DF3; /* the site colour; same saturation and lightness as the original #F3E55D, hue turned to violet */
  --ink:#1c1c1c;
  --ink-soft:rgba(28,28,28,.6);
  --chrome:#2b2b2d;
  --chrome-text:#d9d9dc;
  --gap:22px;
  --row:118px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--yellow);color:var(--ink);font-family:"Archivo",system-ui,-apple-system,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- header / nav ---------- */
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 28px}
.brand{font-weight:900;letter-spacing:.14em;font-size:13px;text-transform:uppercase}
.nav{display:flex;gap:22px;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav a{padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--ink)}

/* ---------- homepage grid ---------- */
.spread{display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:var(--row);grid-auto-flow:dense;gap:var(--gap);padding:10px 28px 60px;max-width:1500px;margin:0 auto}
.tile{display:grid;grid-template-rows:auto auto auto;align-content:start;gap:8px;min-width:0;position:relative}
.tile.s{grid-column:span 1;grid-row:span 2}
.tile.m{grid-column:span 2;grid-row:span 4}
.tile.l{grid-column:span 2;grid-row:span 4}
.tile.s .img{aspect-ratio:4/5}
.tile.m .img{aspect-ratio:4/5}
.tile.l .img{aspect-ratio:3/4}
.tile.wide .img{aspect-ratio:4/3}
.tile .nums{display:flex;justify-content:space-between;font-weight:900;font-size:17px;letter-spacing:.02em}
.tile .img{position:relative;overflow:hidden;min-height:0}
.tile .img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02)}
.tile .img .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.tile .cap{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-align:center;line-height:1.4}
.tile:hover .img{transform:translateY(-2px);transition:transform .25s}
.tile .img{transition:transform .25s}

/* rotated variant: numbers + caption run down the right edge */
.tile.rot{grid-template-rows:auto;grid-template-columns:1fr auto;grid-template-areas:"img side"}
.tile.rot .img{grid-area:img}
.tile.rot .side{grid-area:side;display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:20px}
.tile.rot .side .nums{flex-direction:column;gap:6px}
.tile.rot .side .nums span{writing-mode:vertical-rl}
.tile.rot .side .cap{writing-mode:vertical-rl;text-align:left}

/* ---------- hero "window" ---------- */
.hero{grid-column:4 / span 2;grid-row:1 / span 4;align-self:stretch;display:flex;min-height:0}
.hero .window{display:flex;flex-direction:column;width:100%}
.hero .frame{flex:1;min-height:0;aspect-ratio:auto}
.window{background:var(--chrome);border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25);overflow:hidden;transition:transform .3s}
.hero:hover .window{transform:scale(1.012)}
.bar{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:11.5px;color:var(--chrome-text);letter-spacing:.02em}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;background:#5b5b5e;display:block}
.bar .title{flex:1;text-align:center;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .open{opacity:.7;font-size:11px}
.frame{aspect-ratio:504/664;background:#000;position:relative}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.frame .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:2;background:radial-gradient(ellipse at 50% 45%,#8a3a2f 0%,#c86b4e 45%,#e2a17f 100%)}
.frame .ph small{display:block;opacity:.75;letter-spacing:.08em;text-transform:none;font-size:11px}

/* ---------- inner pages ---------- */
.page{max-width:1100px;margin:0 auto;padding:20px 28px 90px}
.page h1{font-size:clamp(34px,6vw,76px);line-height:.95;letter-spacing:-.02em;font-weight:900;margin:30px 0 10px;text-transform:uppercase}
.meta{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:34px}
.meta .n{font-size:30px;font-weight:900;letter-spacing:0}
.credits{list-style:none;padding:0;margin:0 0 40px;font-size:13px;line-height:1.8;columns:2;column-gap:40px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;align-items:start}
.gallery.single{grid-template-columns:1fr;max-width:820px}
.gallery video{width:100%;display:block;background:#000}
.gallery img,.gallery .ph{width:100%;background:#222}
.gallery .ph{aspect-ratio:4/5;display:grid;place-items:center;color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.pager{display:flex;justify-content:space-between;margin-top:60px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-top:2px solid var(--ink);padding-top:16px}

.section{padding:50px 0;border-top:2px solid var(--ink)}
.section:first-of-type{border-top:0}
.section h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 26px;font-weight:900}
.bio{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:start}
.bio p{font-size:18px;line-height:1.55;margin:0 0 18px;max-width:52ch}
.bio .window{max-width:400px}

.list{list-style:none;margin:0;padding:0}
.list li{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(28,28,28,.25)}
.list .yr{font-weight:900;font-size:22px}
.list .t{font-size:17px;font-weight:700}
.list .c{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.list li:hover .t{text-decoration:underline}

form{display:grid;gap:16px;max-width:560px}
label{display:grid;gap:6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
input,textarea{font:inherit;font-size:16px;padding:12px 14px;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:0}
textarea{min-height:140px;resize:vertical}
button{font:inherit;font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:12px;padding:14px 22px;background:var(--ink);color:var(--yellow);border:0;cursor:pointer;justify-self:start}
.contact-side{font-size:14px;line-height:2}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:50px}

@media (max-width:1200px) and (min-width:901px){
  :root{--row:100px;--gap:18px}
  .spread{grid-template-columns:repeat(6,1fr)}
  .hero{grid-column:3 / span 2}
}

/* ---------- mobile ---------- */
@media (max-width:900px){
  :root{--row:auto}
  .top{padding:14px 18px}
  .nav{gap:14px;font-size:11px}
  .spread{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;padding:6px 18px 50px;gap:18px}
  .hero{grid-column:1 / -1;grid-row:1;width:100%;max-width:340px;margin:0 auto 10px}
  .hero .frame{aspect-ratio:504/664;flex:none}
  .tile,.tile.s,.tile.m,.tile.l{grid-column:span 1;grid-row:auto}
  .tile .img,.tile.s .img,.tile.m .img,.tile.l .img{aspect-ratio:4/5}
  .tile.rot{grid-template-rows:auto auto auto;grid-template-columns:1fr;grid-template-areas:none}
  .tile.rot .side{display:contents}
  .tile.rot .img{grid-area:auto;order:0}
  .tile.rot .side .nums{flex-direction:row;order:-1}
  .tile.rot .side .nums span,.tile.rot .side .cap{writing-mode:horizontal-tb;transform:none;text-align:center}
  .tile.rot .side .cap{order:3}
  .bio,.contact{grid-template-columns:1fr}
  .credits{columns:1}
  .gallery{grid-template-columns:1fr}
  .list li{grid-template-columns:56px 1fr;grid-template-rows:auto auto}
  .list .c{grid-column:2}
}