/* ==========================================================================
   The Colour Club
   One typeface (Dia Regular), one size, one colour, sentence case — only the name,
   THE COLOUR CLUB, is set in caps. One 12-column grid on every page: the brand, the left
   column and the footer start on column 1; the nav, the hairline and the work on column 5.
   Colour belongs to the club alone — the
   member dots and the club card. Pages don't transition; shared elements move.
   ========================================================================== */
@font-face{font-family:'Dia';src:url('/fonts/Dia-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:block}

:root{
  --ink:#101014;          /* the only type colour */
  --paper:#ffffff;
  --line:#e4e5e9;         /* hairlines and the resting dot — never type */
  --plate:#f4f4f5;        /* image placeholder while loading */
  --s1:6px; --s2:12px; --s3:18px; --s4:24px; --s5:36px; --s6:48px; --s7:72px; --s8:96px; --s9:144px;
  --edge:18px; --gut:18px; --bar:49px;            /* 49 = a 21px line centred on a whole pixel (14px above and below) */
  --foot:45px;            /* footer height: the sticky column stops short of it, so nothing slides under the block */
  /* the corner block: from the page edge to the end of column 2 (later rules size it; it is square everywhere) */
  --col:calc((100vw - var(--edge) * 2 - var(--gut) * 11) / 12);
  --cw:calc(var(--edge) + var(--col) * 2 + var(--gut));
  --ch:calc(var(--cw) * 1.25);
  --ease:cubic-bezier(.32,.94,.35,1);
  /* One motion language. Two curves: --ease (settle) for anything arriving, opening or changing state; --ease-move for
     anything travelling, gathering or closing. Three durations: --t-leave for going away and small state changes,
     --t-settle for appearing, --t-move for anything that changes place, size or length (lines included). One 40ms step. */
  --ease-move:cubic-bezier(.65,0,.35,1); --t-leave:.28s; --t-settle:.45s; --t-move:.6s;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font:400 17px/21px 'Dia',Arial,sans-serif;letter-spacing:-.008em;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{background:var(--paper)}
h1,h2,h3,p,dl,dt,dd,ol,ul,li,figure,figcaption,blockquote,summary,small{font:inherit;color:inherit}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
a:hover,button:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer;text-align:left}
img,video{display:block;max-width:100%;height:auto}
.sub,.t-s,.t-m,.t-xs,.t-l{color:inherit;font:inherit}   /* legacy hooks: one size, one colour */

/* The brand: the TCC block, pinned in the top-left corner on every page. It takes the page's colour
   (the member in view on home, the member on a project) and carries across pages as the same object. */
.corner{position:fixed;top:0;left:0;z-index:60;width:var(--cw);height:var(--ch);display:flex;align-items:flex-end;padding:0 var(--s2) var(--s2) var(--edge);background:var(--c);color:var(--ink);container-type:inline-size;transition:background-color var(--t-move) var(--ease);view-transition-name:card}
.corner span{font-size:40cqw;line-height:.74;letter-spacing:-.02em}   /* bottom-left, on column 1 */
.corner:hover{text-decoration:none}
.chrome [aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Links inside prose are underlined (one colour means the line does the work) */
p a,dd a,.of-list a,.of-idx a,.of-text a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:var(--s1);z-index:99;background:var(--paper)}
.skip:focus{left:var(--edge)}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* ---------- Header: never moves ---------- */
.chrome{position:fixed;inset:0 0 auto;z-index:50;height:var(--bar);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center;padding:0 var(--edge);background:var(--paper);view-transition-name:chrome}
.chrome nav{grid-column:5/13;display:flex;gap:var(--s3)}

/* ---------- The plan: what it is (left, fixed) · the work (right), no rule between (Mark, 30 Oct) ---------- */
.mem,.pj{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:0 var(--edge)}
.mem-side,.pj-side{grid-column:1/5;position:sticky;top:var(--ch);margin-top:var(--ch);align-self:start;height:calc(100svh - var(--ch) - var(--foot));overflow:auto;scrollbar-width:none;padding:var(--s5) calc(var(--gut) / 2) var(--s4) 0;display:flex;flex-direction:column;gap:var(--s5)}   /* the description sits below the block */
.mem-side::-webkit-scrollbar,.pj-side::-webkit-scrollbar{display:none}
.mem-main,.pj-media{grid-column:5/13;position:relative;min-height:100svh;padding:calc(var(--ch) + var(--s5)) 0 var(--s8)}   /* the work starts level with the left column's first line (Nick, 6 Nov) */
.mem-h,.pj-h,.hs-h{max-width:24em}
.of-lead,.mem-lead,.pj-text p,.hs-strat{max-width:32em}
.hs-strat,.mem-f,.pj-nav,.of-go{margin-top:auto}
.mem-lead{margin-bottom:var(--s6)}

/* Spec tables */
.pj-spec div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut)}
.pj-spec dd{grid-column:2/5}
.pj-spec div + div{margin-top:var(--s1)}

/* ---------- Colour: the club card and the member dots, nothing else ---------- */
.mem-list i,.hs-list i,.dot{display:inline-block;width:8px;height:8px;border-radius:0;background:var(--c);margin-right:var(--s1);vertical-align:1px}
.dot{margin:0 0 0 var(--s1)}
.hs-list i{background:var(--line);transition:background-color var(--t-leave) var(--ease)}
.hs-list li.is-on i,.hs-list a:hover i{background:var(--c)}

/* ---------- Home: the members scroll on the right ---------- */
.hs-main{display:flex;flex-direction:column;gap:var(--s9)}
.hs-p{display:flex;flex-direction:column;gap:var(--gut);scroll-margin-top:calc(var(--bar) + var(--s4))}
.hs-ph,.sch-ph{display:block;overflow:hidden;background:var(--plate)}
.hs-ph img,.sch-ph img{width:100%}
.hs-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:end}
.hs-crop img{aspect-ratio:4/5;height:auto;object-fit:cover}
.hs-cap{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--gut)}
.hs-cap > :nth-child(2){grid-column:2/7}
.hs-go{grid-column:7/9;justify-self:end}

/* ---------- Schedule: images at their own proportions, each on its row's line ---------- */
.sch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:0}
.sch-i{grid-row:span 2;display:grid;grid-template-rows:subgrid}
.sch-i > a{display:grid;grid-row:span 2;grid-template-rows:subgrid}
.sch-ph{align-self:end}
.sch-3{grid-template-columns:repeat(4,minmax(0,1fr))}
.sch-ph{width:var(--pw,100%)}
/* hover: the images stay at full strength; the one under the pointer takes a frame in its member's colour */
.sch-ph{position:relative}
.sch-ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--c);transition:box-shadow var(--t-leave) var(--ease);pointer-events:none}
.sch-i.is-hot .sch-ph::after{box-shadow:inset 0 0 0 6px var(--c)}
.sch-cap{display:grid;grid-template-columns:var(--s5) minmax(0,1fr);align-content:start;padding:var(--s1) 0 var(--s7)}
.is-out{display:none!important}
.mem-f button.is-on{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- Project ---------- */
.pj-media{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s7);align-content:start}
.pj-media > *{grid-column:1/-1}
.pj-media img,.pj-media video{width:100%}
.pj-media figure.p{grid-column:span 4}
.embed{aspect-ratio:16/9}
.embed iframe{width:100%;height:100%;border:0;overflow:hidden}   /* the film never scrolls inside its frame */
.pj-text p + p,.pj-more p,.of-text p + p{margin-top:var(--s2)}
.pj-more summary,.of-faq summary{cursor:pointer;list-style:none}
.pj-more summary::-webkit-details-marker,.of-faq summary::-webkit-details-marker{display:none}
.pj-more summary{margin-top:var(--s2)}
.pj-more[open] summary{display:none}
.pj-q{margin:0}
.pj-nav{display:flex;flex-wrap:wrap;gap:0 var(--s3)}

/* ---------- Sections: rows on the grid (right column = page columns 5–12, as 8) ----------
   numbers on column 5 · titles from column 6 · descriptions from column 9 — on every page */
.of-main{display:flex;flex-direction:column;gap:var(--s8)}
.of-sec{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--gut);padding-top:var(--s2);box-shadow:inset 0 1px 0 var(--line)}
.of-sec > *{grid-column:2/9}
.of-sec > h2{grid-column:1/-1;margin-bottom:var(--s3)}   /* label sits on its rows */
.of-sec > .sch,.of-sec.of-full > *{grid-column:1/-1}
.of-list,.of-idx,.hc-list{grid-column:1/-1!important;display:grid;grid-template-columns:subgrid}
.r{grid-column:1/-1;display:grid;grid-template-columns:subgrid;padding:var(--s1) 0 var(--s2);box-shadow:inset 0 -1px 0 var(--line)}
.r-n{grid-column:1}
.r-t{grid-column:2/5}
.r-d{grid-column:5/9}
.r-t:last-child{grid-column:2/9}
.of-text p + p{margin-top:var(--s2)}
.of-faq details{box-shadow:inset 0 -1px 0 var(--line);padding:var(--s1) 0}
.of-faq summary::after{content:' +'}
.of-faq details[open] summary::after{content:' −'}
.of-faq details p{margin-top:var(--s1)}
.of-q{margin-bottom:var(--s4)}
.of-q footer{margin-top:var(--s1)}
.hc-lead,.mem-lead{grid-column:1/7;max-width:none}
.mem-lead{margin-bottom:var(--s7)}

/* ---------- Enquiry ---------- */
.enq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--gut)}
.enq label{display:grid;gap:var(--s1)}
.enq .wide{grid-column:1/-1}
.enq input,.enq select,.enq textarea{width:100%;padding:var(--s1) 0;box-shadow:inset 0 -1px 0 var(--line);appearance:none}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:none;box-shadow:inset 0 -1px 0 var(--ink)}
.enq textarea{resize:vertical}

/* ---------- Footer: one line ---------- */
.foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s1);padding:var(--s2) var(--edge);box-shadow:inset 0 1px 0 var(--line)}
.foot > span:first-child{grid-column:1/5}
.foot-l{grid-column:5/13}
.foot-l{display:flex;flex-wrap:wrap;gap:0 var(--s3)}

/* ---------- The reel (Studio only) ---------- */
dialog.reel{border:0;padding:0;margin:0;width:100vw;max-width:none;height:100svh;max-height:none;background:#000}
dialog.reel::backdrop{background:#000}
dialog.reel video{width:100%;height:100%;object-fit:contain}
dialog.reel form{position:absolute;top:var(--s2);right:var(--edge)}
dialog.reel button{background:var(--paper);padding:0 var(--s1)}

/* ---------- No page transition: the same things keep their names and move ---------- */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:var(--t-move);animation-timing-function:var(--ease-move)}
@keyframes vt-out{to{opacity:0}}
::view-transition-new(root){animation:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .corner,.hs-list i,.sch-ph img{transition:none}
}

/* ---------- Phones ---------- */
@media (max-width:760px){
  .long{display:none}
  :root{--cw:96px;--ch:120px}
  .chrome{transition:transform var(--t-settle) var(--ease)}
  .tuck .chrome{transform:translateY(-100%)}              /* the nav bar slides away; the TCC block stays put */
  .chrome{grid-template-columns:1fr;padding-left:calc(var(--cw) + var(--s2))}
  .chrome nav{grid-column:auto}
  .chrome nav{justify-content:flex-end;gap:var(--s2)}
  .mem,.pj{display:block}
  .mem-side,.pj-side{position:static;margin-top:0;height:auto;overflow:visible;padding-right:0;padding-top:calc(var(--ch) + var(--s3))}
  .mem-main,.pj-media{box-shadow:inset 0 1px 0 var(--line);padding:var(--s4) 0 var(--s8);margin-top:var(--s4);min-height:0}
  .mem-main::before,.pj-media::before{display:none}
  .of-sec,.pj-media{display:block}
  .pj-media > * + *{margin-top:var(--s5)}
  .of-sec > h2{margin-bottom:var(--s2)}
  .of-list,.of-idx,.hc-list{display:block}
  .r{grid-template-columns:var(--s5) minmax(0,1fr)}
  .r-t,.r-d,.r-t:last-child{grid-column:2}
  .hs-cap{grid-template-columns:var(--s5) minmax(0,1fr)}
  .hs-cap > :nth-child(2){grid-column:2}
  .hs-go{grid-column:2;justify-self:start}
  .foot{display:flex;flex-wrap:wrap;justify-content:space-between}
  .hs-strat,.mem-f,.pj-nav,.of-go{margin-top:0}
  .sch,.sch-3{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
  .sch-cap{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s1);padding-bottom:var(--s6)}
  .pj-media figure.p{width:100%}
  .enq{grid-template-columns:1fr}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Arrival: content waits, then comes in in sequence (site.js); things that carried over are already there */
.seq .mem-side > *,.seq .pj-side > *,.seq .of-sec,.seq .hs-p,.seq .pj-media > figure,.seq .mem-main > *:not(.of-main):not(.hs-p){opacity:0}
.seq [style*="view-transition-name"],.seq :is(.mem-side,.pj-side,.pj-media) > :has([style*="view-transition-name"]){opacity:1!important}
.seq-main :is(.mem-main > *:not(.of-main),.of-sec,.pj-media > figure){opacity:0}   /* page to page: the main column waits for its turn */
.seq-main :is([style*="view-transition-name"],.of-tabs),.seq-main :is(.pj-media,.mem-main) > :has([style*="view-transition-name"]){opacity:1!important}
.of-sec > .of-text:has(> .of-idx){display:contents}   /* Index: rows join the section grid */
.of-main > .of-sec:first-child{padding-top:0;box-shadow:none}   /* both columns start on the same line */

/* Fixtures: the left column's bottom line never moves between pages — only its words change */
.pj-nav{view-transition-name:pj-nav}
.of-go{view-transition-name:go}
.mem-f{view-transition-name:filter}
.hs-strat{view-transition-name:strat}
.seq .pj-nav,.seq .of-go,.seq .mem-f,.seq .hs-strat{opacity:1!important}

/* Left column rhythm: related lines sit together; space only between groups */
.mem-side > .k + .mem-h,.pj-h + p,.hs-list + p{margin-top:calc(var(--s1) - var(--s5))}
.mem-h + .of-lead{margin-top:calc(var(--s2) - var(--s5))}
/* 4 · a readable measure for the Work intro */
.mem-lead{max-width:34em}

/* Phones, by eye */
@media (max-width:760px){
  .mem-side,.pj-side{gap:var(--s4)}
  .mem-side > .k + .mem-h,.pj-h + p,.hs-list + p{margin-top:calc(var(--s1) - var(--s4))}
  .mem-h + .of-lead{margin-top:calc(var(--s2) - var(--s4))}
  .hs-main{gap:var(--s7)}
  .pj-spec div{grid-template-columns:7.5em minmax(0,1fr)}
  .pj-spec dd{grid-column:2}
  /* Work: the frames carry their names; the filter comes straight after the label */
  .mem:not(.pj-like):not(.hs) .mem-list{display:none}
  /* Project: the hero first, under the block — then the name, spec and story — then the rest of the work */
  .pj{display:flex;flex-direction:column}
  .pj-media{display:contents}
  .pj-hero{order:-1;margin-top:calc(var(--ch) + var(--s3))}
  .pj-side{padding-top:var(--s4)}
  .pj-media > figure:not(.pj-hero){margin-top:var(--s5)}
  .pj-media > figure:not(.pj-hero):first-of-type{margin-top:0}
  .pj-side{order:0}
  .pj-media > *:not(.pj-hero){order:1}
  .pj-side + *{margin-top:0}
}
a[href^="tel:"]{white-space:nowrap}

/* ---------- Typographic system: clean rags, no machine hyphens, aligned figures ---------- */
html{font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1;font-optical-sizing:auto}
body{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal}
p,li,dd,summary,figcaption,blockquote{text-wrap:pretty}                 /* no single-word last lines */
h1,h2,.r-t,.sch-cap,.hs-cap,.of-lead,.hs-h{text-wrap:balance}         /* short lines break evenly */
.r-n,.sch-cap > :first-child,.hs-cap > :first-child,.pj-spec dd,a[href^="tel:"]{font-variant-numeric:tabular-nums lining-nums}
a,button{text-decoration-skip-ink:auto}
.of-q p{text-indent:-.36em}                                             /* the opening quote hangs; the letters align */
select{text-overflow:ellipsis}
.pj-count{margin-top:auto;font-variant-numeric:tabular-nums lining-nums}
.pj-count + .pj-nav{margin-top:calc(var(--s1) - var(--s5))}   /* the count sits on the prev/next line */
.pj-count{view-transition-name:pj-count}
.seq .pj-count{opacity:1!important}
@media (max-width:760px){.pj-count{display:none}.pj-count + .pj-nav{margin-top:0}}

/* ---------- Home, Club view: six plates on the edges, turning one seat per member ----------
   Plates are the TCC block's size; the TCC block itself is the top-left seat. */
.vsw{position:absolute;right:var(--edge);top:0;line-height:var(--bar)}
.vsw button[aria-pressed="true"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html.v-list .hc{display:none}
html:not(.v-list) .home .hs{display:none}
html:not(.v-list) .home .chrome{background:transparent}            /* the top plates show through the bar */
.hc-pin{position:relative;height:calc(100svh + (var(--steps,6) + 1) * 36svh)}   /* one extra step: the outro, the line again */
.hc-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.hc-plates{position:absolute;inset:0}
.hc-plate{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);background:var(--c);will-change:transform}
/* the nav: still, one label per seat, centred, set at the TCC size of this view */
.hc-nav{position:absolute;inset:0;pointer-events:none;z-index:2}
.hc-l{position:absolute;width:var(--cw);height:var(--ch);display:flex;align-items:center;justify-content:center;padding:var(--s1);text-align:center;font-size:calc(var(--cw) * .22);line-height:1.05;letter-spacing:-.02em;pointer-events:auto;text-wrap:balance}
.hc-l:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.hc-s1{top:0;left:calc(50% - var(--cw) / 2)}.hc-s2{top:0;right:0}.hc-s3{bottom:0;right:0}.hc-s4{bottom:0;left:calc(50% - var(--cw) / 2)}.hc-s5{bottom:0;left:0}
html:not(.v-list) .home .corner span{font-size:calc(var(--cw) * .22);line-height:1}   /* TCC and the nav share one size in this view */
html:not(.v-list) .home .chrome{display:none}                      /* in the Club view the plates are the nav */
.hc-centre{position:absolute;inset:0;margin:auto;height:max-content;   /* centred without a transform, so the arrival rise can't jolt it */
  
  --sh:calc(100svh - var(--ch) * 2 - var(--s8));                 /* the height left between the top and bottom plates */
  width:min(44vw,calc(var(--sh) * 1.6 + var(--gut)))}
.hc-line{max-width:22em}
/* the paragraph and the member share one place, the member on top; new stills fade in over the last (0.6s, house ease) */
.hc-centre{display:grid}
.hc-line,.hc-member{grid-area:1/1;align-self:center;transition:opacity var(--t-settle) var(--ease)}
.hc-member{opacity:0;pointer-events:none}
.hc-member{position:relative;z-index:1;background:var(--paper)}                     /* the line stays put behind the work; the work covers it */
.hc.is-active .hc-line{pointer-events:none}
.hc.is-active .hc-member{opacity:1;pointer-events:auto}
.hc-stills{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.hc-stills span{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--plate)}
.hc-stills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t-settle) var(--ease)}
.hc-stills img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.hc-line,.hc-member,.hc-stills img{transition:none}}
.hc-cap{display:flex;justify-content:space-between;gap:var(--s2);padding-top:var(--s1)}
@media (max-width:760px){
  .vsw{position:fixed;top:auto;bottom:var(--s3);left:50%;right:auto;transform:translateX(-50%);line-height:21px;background:var(--paper);padding:var(--s1) var(--s2);z-index:70;white-space:nowrap}
  .hc-pin{height:calc(100svh + (var(--steps,6) + 1) * 30svh)}
  .hc-centre{width:calc(100vw - var(--edge) * 2);--sh:calc(100svh - var(--ch) * 2 - var(--s6))}
  .hc-stills{width:min(100%,calc(var(--sh) * 1.6))}
}
@media (prefers-reduced-motion:reduce){.hc-plate{transition:none}}
/* Club view: smaller plates (TCC shrinks with them — it's a seat), a larger centre */
html:not(.v-list) body.home{--cw:calc(var(--edge) + var(--col) * 1.25);--ch:calc(var(--cw) * 1.25)}
html:not(.v-list) .home .hc-centre{width:min(56vw,calc(var(--sh) * 1.6 + var(--gut)));--sh:calc(100svh - var(--ch) * 2 - var(--s7))}
@media (max-width:760px){
  html:not(.v-list) body.home{--cw:96px;--ch:120px}   /* room for the nav label at the one type size */
  .hc-plate:nth-child(n+5),.hc-s2,.hc-s3{display:none}                 /* phone: four seats, one per corner */
  .hc-s1{left:auto;right:0}.hc-s4{left:auto;right:0}
  html:not(.v-list) .home .hc-centre{width:calc(100vw - var(--edge) * 2);--sh:calc(100svh - var(--ch) * 2 - var(--s6))}
}
.seq .hc-plate,.seq .hc-l,.seq:not(.v-list) .home .hc-line > span{opacity:0}   /* held until site.js plays the line in, then the blocks */

/* Club view: no scrollbar — the scroll drives the tour, quietly */
html:not(.v-list):has(body.home){scrollbar-width:none}
html:not(.v-list):has(body.home)::-webkit-scrollbar{display:none}

/* ---------- Club view, visual pass: one size, one alignment, a centre locked to the plates ----------
   TCC, the nav and the caption share the body size; everything in a plate is centred (TCC too, in this view);
   each still is exactly two plates wide, the pair centred on the top-middle plate's axis, with even air above and below. */
.hc-l{font-size:inherit;letter-spacing:inherit;line-height:inherit;padding:var(--s2)}
html:not(.v-list) .home .corner{align-items:center;justify-content:center;padding:var(--s2)}
html:not(.v-list) .home .corner span{font-size:inherit;line-height:inherit;letter-spacing:inherit;transform:none}
html:not(.v-list) .home .hc-centre{
  --stw:min(calc(var(--cw) * 2), calc((100svh - var(--ch) * 2 - var(--s8) * 2 - 21px - var(--s1)) * .8), calc((100vw - var(--edge) * 2 - var(--gut)) / 2));
  width:calc(var(--stw) * 2 + var(--gut))}
.hc-line{max-width:none}
@media (max-width:760px){html:not(.v-list) .home .hc-centre{--stw:min(calc((100vw - var(--edge) * 2 - var(--gut)) / 2), calc((100svh - var(--ch) * 2 - var(--s6) * 2 - 21px) * .8))}}

/* Club view, proportions: smaller plates, a bigger centre (the stills take the height the plates leave) */
html:not(.v-list) body.home{--cw:calc(var(--edge) + var(--col) * .8);--ch:calc(var(--cw) * 1.25)}
html:not(.v-list) .home .hc-centre{
  --stw:min(calc((100svh - var(--ch) * 2 - var(--s7) * 2 - 21px - var(--s1)) * .8), calc((100vw - var(--cw) * 2 - var(--s7) * 2 - var(--gut)) / 2));
  width:calc(var(--stw) * 2 + var(--gut))}
@media (max-width:760px){
  html:not(.v-list) body.home{--cw:84px;--ch:105px}
  html:not(.v-list) .home .hc-centre{--stw:min(calc((100vw - var(--edge) * 2 - var(--gut)) / 2), calc((100svh - var(--ch) * 2 - var(--s5) * 2 - 21px) * .8))}
}
.hc-line{max-width:24em;justify-self:center}   /* the opening paragraph: a readable measure on the centre axis */

/* ---------- The homepage view switch (Club ⇄ List), choreographed ----------
   During a switch only the TCC block carries over. Its word is separate: it fades out at one size and back in at
   the other, so it never stretches. Everything else joins the sequence. */
.corner span{view-transition-name:tcc-word}
.vt-switch [style*="view-transition-name"],.vt-switch .chrome,.vt-switch .pj-nav,.vt-switch .of-go,.vt-switch .mem-f,.vt-switch .hs-strat{view-transition-name:none!important}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
::view-transition-group(card){animation-duration:var(--t-move);animation-timing-function:var(--ease-move)}
::view-transition-group(tcc-word){animation:none}
::view-transition-old(tcc-word){animation:vt-fade-out var(--t-leave) var(--ease) both}                 /* page to page: an even crossfade (invisible when TCC is unchanged) */
::view-transition-new(tcc-word){animation:vt-fade-in var(--t-leave) var(--ease) both}

/* Pixel pass: hover never underlines whole captions; the filter sits up top; an overflowing column fades, never cuts */
.sch-i a:hover,.hs-ph:hover{text-decoration:none}
.mem-f{margin-top:0;order:0}
.mem-side.is-clipped,.pj-side.is-clipped{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--s6)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--s6)),transparent)}
.mem-side.is-clipped.at-end,.pj-side.is-clipped.at-end{-webkit-mask-image:none;mask-image:none}
.mem-h + .mem-f{margin-top:calc(var(--s2) - var(--s5))}   /* the filter belongs to its heading */

/* ---------- Whole pixels: the grid snaps to integer columns (site.js measures the window and sets --colpx and
   the two margins, splitting the 0–11px remainder evenly). Inner grids divide evenly from it, so every column
   line, hairline and block edge lands on a pixel. Before the script runs, the fluid grid is the fallback. ---------- */
.chrome,.mem,.pj,.foot{grid-template-columns:repeat(12,var(--colpx,minmax(0,1fr)));padding-left:var(--edge-l,var(--edge));padding-right:var(--edge-r,var(--edge))}
:root{--cw:round(nearest,calc(var(--edge-l,var(--edge)) + var(--col) * 2 + var(--gut)),1px);--ch:round(nearest,calc(var(--cw) * 1.25),1px)}
html:not(.v-list) body.home{--cw:round(nearest,calc(var(--edge-l,var(--edge)) + var(--col) * .8),1px);--ch:round(nearest,calc(var(--cw) * 1.25),1px)}
.corner{padding-left:var(--edge-l,var(--edge))}
@media (max-width:760px){
  .chrome,.mem,.pj,.foot{grid-template-columns:none;padding-left:var(--edge);padding-right:var(--edge)}
  :root{--cw:96px;--ch:120px}
  html:not(.v-list) body.home{--cw:84px;--ch:105px}
  .chrome{grid-template-columns:1fr;padding-left:calc(var(--cw) + var(--s2))}
  .corner{padding-left:var(--edge)}
}
.mem-side,.pj-side{padding-right:var(--s6)}   /* the left column stands clear of the hairline */
@media (max-width:760px){.mem-side,.pj-side{padding-right:0}}

/* ---------- One movement around the site ----------
   Everything that travels (the TCC block, carried-over images, names, dots, and the left column riding the block's
   edge) moves on one duration and one curve: 0.6s, ease-in-out. The old page leaves in 0.2s; new content settles
   in place (opacity only). The header fades when it appears or leaves, never pops. */
::view-transition-group(*){animation-duration:var(--t-move);animation-timing-function:var(--ease-move)}
::view-transition-group(card){animation-duration:var(--t-move);animation-timing-function:var(--ease-move)}
::view-transition-old(root){animation:vt-out var(--t-settle) var(--ease) both}   /* page to page: one even dissolve, old into new, */
::view-transition-new(root){animation:vt-fade-in var(--t-settle) var(--ease) both}   /* same time, same curve: never a blank frame */
/* things on only one side of the change behave like the page itself: the old leave with the old page, the new settle in
   with the new content — nothing left over hangs above the next page, nothing pops in ahead of it */
/* a travelling image crops to its frame as the frame changes shape (portrait into a wide hero), never stretches or spills */
::view-transition-group(*.pic){overflow:clip}
::view-transition-old(*.pic),::view-transition-new(*.pic){height:100%;object-fit:cover}
::view-transition-old(*):only-child{animation:vt-out var(--t-leave) var(--ease) both}
::view-transition-new(*):only-child{animation:vt-fade-in var(--t-settle) var(--ease) .04s both}
/* the TCC word: an even crossfade when the block keeps its size; when it resizes, out small, then in at the new size */
html:active-view-transition-type(resize)::view-transition-old(tcc-word){animation:vt-fade-out var(--t-leave) var(--ease) both}
html:active-view-transition-type(resize)::view-transition-new(tcc-word){animation:vt-fade-in var(--t-settle) var(--ease) .36s both}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* the header: identical page to page → the default crossfade (invisible); only when it appears or leaves
   (to and from the Club view) does it fade on its own */
::view-transition-group(chrome){animation:none}
::view-transition-old(chrome):only-child{animation:vt-fade-out var(--t-leave) var(--ease) both}
::view-transition-new(chrome):only-child{animation:vt-fade-in var(--t-settle) var(--ease) .04s both}

/* ---------- The logo never moves: one TCC block, one size, everywhere ----------
   The Club-view size on every page and in both homepage views; TCC centred at the one type size.
   Between pages only its colour changes; the left column always starts in the same place beneath it. */
:root,html:not(.v-list) body.home{--cw:round(nearest,calc(var(--edge-l,var(--edge)) + var(--col) * .8),1px);--ch:round(nearest,calc(var(--cw) * 1.25),1px)}
.corner,html:not(.v-list) .home .corner{align-items:center;justify-content:center;padding:var(--s2)}
.corner span,html:not(.v-list) .home .corner span{font-size:inherit;line-height:inherit;letter-spacing:inherit;transform:none}
@media (max-width:760px){
  :root,html:not(.v-list) body.home{--cw:84px;--ch:105px}
  .corner{padding:var(--s2)}
}

/* No white over the TCC block during a page change: the bar's white starts at the block's right edge (so its
   transition snapshot holds nothing above the block), and the block's layer always sits above the bar's. */
.chrome{background:linear-gradient(to right,transparent var(--cw),var(--paper) var(--cw))}
html:not(.v-list) .home .chrome{background:transparent}
::view-transition-group(card){z-index:3}
::view-transition-group(tcc-word){z-index:4}
::view-transition-group(chrome){z-index:2}
html:not(.settled) .corner{transition:none}   /* the block takes its first colour instantly; easing begins once the page has settled */

/* ---------- Details ---------- */
html{scrollbar-width:thin;scrollbar-color:#cfd0d4 transparent}
::selection{background:color-mix(in srgb,var(--page,#e4e5e9) 55%,#fff);color:var(--ink)}
/* images arrive on a tint of their member's colour, never on grey */
.sch-ph,.hs-ph,.pj-media figure,.hc-stills span{background:color-mix(in srgb,var(--c,#e4e5e9) 20%,#fff)}
/* keyboard: every block and label shows a clean inset focus */
.corner:focus-visible,.hc-l:focus-visible{outline:1px solid var(--ink);outline-offset:-6px}
.hc-stills{cursor:pointer}

/* ---------- Dropdowns, in the site's language ---------- */
.dd{position:relative}
.dd-native{position:absolute;inset:0;opacity:0;pointer-events:none}
.dd-btn{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:var(--s1) 0;box-shadow:inset 0 -1px 0 var(--line);text-align:left;transition:box-shadow var(--t-leave) var(--ease)}
.dd-btn::after{content:'+';flex:none}
.dd.open .dd-btn::after{content:'\2212'}
.dd-btn:hover{text-decoration:none}
.dd.open .dd-btn,.dd-btn:focus-visible{outline:none;box-shadow:inset 0 -1px 0 var(--ink)}
.dd.dd-invalid .dd-btn{box-shadow:inset 0 -1px 0 var(--ink)}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + var(--s1));z-index:30;max-height:min(22em,60svh);overflow:auto;list-style:none;padding:var(--s1) 0;background:var(--paper);box-shadow:0 0 0 1px var(--line);
  opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity var(--t-leave) var(--ease),transform var(--t-settle) var(--ease),visibility 0s var(--t-settle);scrollbar-width:thin}
.dd.open .dd-list{opacity:1;transform:none;visibility:visible;transition:opacity var(--t-leave) var(--ease),transform var(--t-settle) var(--ease),visibility 0s}
.dd-list:focus{outline:none}
.dd-opt{display:flex;align-items:baseline;gap:var(--s1);padding:var(--s1) var(--s2);cursor:pointer}
.dd-opt::before{content:'';width:8px;height:8px;border-radius:0;flex:none;align-self:center;background:transparent}
.dd-opt[aria-selected="true"]::before{background:var(--page,var(--ink))}          /* the chosen option carries the page-colour dot */
.dd-opt.is-active{background:color-mix(in srgb,var(--page,#e4e5e9) 18%,#fff)}
@media (prefers-reduced-motion:reduce){.dd-list,.dd.open .dd-list{transition:none}}
.hc-line{text-align:center}   /* the opening paragraph, centred on the club's axis */
/* The logo is one size everywhere: in a view switch the TCC word simply stays (no hand-off, no blink) */
html.vt-switch::view-transition-old(tcc-word),html.vt-switch::view-transition-new(tcc-word){animation:none}
html.vt-switch::view-transition-old(tcc-word){display:none}

/* ---------- Phones, reflecting the site ----------
   The desktop schedule's mixed sizes become a single editorial column: landscapes full width, portraits at
   two-thirds, alternating left and right. The Club view's centre shows one still, as large as the plates allow.
   The bar is solid, so nothing shows through when the TCC block tucks away. */
@media (max-width:760px){
  .chrome{background:var(--paper)}
  .sch,.sch-3{grid-template-columns:minmax(0,1fr);row-gap:0}
  .sch-i > a{justify-items:start}
  .sch-ph{width:100%}
  .sch-p .sch-ph,.sch-s .sch-ph{width:66%}
  .sch-i:nth-child(4n+2).sch-p > a,.sch-i:nth-child(4n+2).sch-s > a,.sch-i:nth-child(4n+3).sch-p > a,.sch-i:nth-child(4n+3).sch-s > a{justify-items:end}
  .sch-i:nth-child(4n+2).sch-p .sch-cap,.sch-i:nth-child(4n+2).sch-s .sch-cap,.sch-i:nth-child(4n+3).sch-p .sch-cap,.sch-i:nth-child(4n+3).sch-s .sch-cap{width:66%}
  .sch-cap{width:100%;padding-bottom:var(--s7)}
  /* Club view: one still, exactly as wide as the white between the corner blocks, so its edges line up with their
     inner edges; centred top to bottom, so the air above and below match. A short screen narrows it to keep that air. */
  html:not(.v-list) .home .hc-centre{width:calc(100vw - var(--cw) * 2)}
  .hc-stills{grid-template-columns:minmax(0,1fr);justify-items:center}
  .hc-stills span{width:min(100%,calc((100svh - var(--ch) * 2 - var(--s6) * 2 - 42px) * .8))}
  .hc-stills span:nth-child(2){display:none}
  .hc-cap{width:min(100%,calc((100svh - var(--ch) * 2 - var(--s6) * 2 - 42px) * .8));margin:0 auto;flex-direction:column;align-items:flex-start;gap:0}   /* name, then the link: always two lines, so every member sits at the same height */
  .hc-cap > *{white-space:nowrap}
}

/* The pointer label in the Club view: one size, one colour, follows the cursor, fades in and out */
.hc-tip{position:fixed;left:0;top:0;z-index:80;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity var(--t-leave) var(--ease)}
.hc-tip.on{opacity:1}
html.v-list .hc-tip{display:none}

/* ---------- Club view, 22 Oct: square plates, a larger line, scroll that rests ---------- */
/* the TCC block is one square on every page and every view; after the arrival it only ever changes colour */
:root,html:not(.v-list) body.home{--ch:var(--cw)}
/* the line in sentence case, at display size: two statements, one per block, tracked a touch tight as display
   type wants, close leading, balanced rag */
.hc-line{font-size:clamp(22px,2.4vw,40px);line-height:1.12;letter-spacing:-.015em;font-kerning:normal;max-width:20em;text-wrap:balance}
.hc-line > span{display:block;text-wrap:balance}
.hc-line > span + span{margin-top:.4em}
.hc-stills{background:var(--paper)}                                 /* the gutter between the stills covers the line too */
/* the scroll always comes to rest on a member (or the line), never with the plates mid-move: site.js places the marks */
html:not(.v-list):has(body.home){scroll-snap-type:y mandatory}
.hc-snap{position:absolute;left:0;top:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
/* the Club view has no footer bar: at the end of the tour the footer's details join the line (below) */
html:not(.v-list) .home .foot{display:none}
/* the member covers the line rather than dissolving over it: a wipe up as the tour starts, and back down at its end */
.hc-member{opacity:1;clip-path:inset(100% 0 0 0);transition:clip-path var(--t-move) var(--ease)}
.hc.is-active .hc-member{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.hc-member{transition:none}}
/* the arrival opens on white with the line in place; the blocks (TCC with them) wait off the edges until site.js
   brings them in */
html.seq:not(.v-list) body.home .corner{transform:translateY(-100%);background:var(--arrive,var(--c))}

/* ---------- Work: the Gallery view (to compare with the schedule) ----------
   Two sizes only: standard members three to a row in one 4:5 frame; hero members full width at 16:9. */
.gal{display:none;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s6);list-style:none;margin:0;padding:0}
html.v-gal .gal{display:grid}
html.v-gal .sch{display:none}
.gal-i .sch-ph{display:block;width:100%;aspect-ratio:4/5;overflow:hidden}
.gal-f{grid-column:1/-1}
.gal-f .sch-ph{aspect-ratio:16/9}
.gal-i img{width:100%;height:100%;object-fit:cover;display:block}
.gal-cap{display:flex;justify-content:space-between;gap:var(--s2);padding-top:var(--s1)}
.mem-v button[aria-pressed="true"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (max-width:760px){
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s5)}
  .gal-cap{flex-direction:column;gap:0}
}

/* ---------- Work: the Grid view in rows ----------
   Rows of four (two on phones): every frame the column's full width at its own height, all of a row's frames
   ending on one line (the row's subgrid puts the frame on its foot), so the captions start together. */
.sch-rows .sch-ph{width:100%!important}
.sch-rows .sch-ph img{display:block;width:100%;height:auto}
.sch-rows .sch-i > a{justify-items:stretch!important}
.sch-rows .sch-cap{width:100%!important}
@media (max-width:760px){
  .sch.sch-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sch-rows .sch-cap{padding-bottom:var(--s5)}
}
/* the gallery uses the same caption as the grid */
.gal-i .sch-cap{padding:var(--s1) 0 0}
/* the hero image arrives from the page before (it carries over); its frame has no tint, so no empty box waits for it */
.pj-media figure.pj-hero{background:none}
/* Grid ⇄ Gallery: the frames travel (0.7s, the house in-out), each keeping its crop as it changes shape;
   the old captions fade out quickly and the new ones settle in behind the moving work */
html.vt-move::view-transition-group(*){animation-duration:var(--t-move);animation-timing-function:var(--ease-move)}
html.vt-move::view-transition-old(*),html.vt-move::view-transition-new(*){height:100%;object-fit:cover;overflow:clip}
html.vt-move::view-transition-old(root){animation:vt-fade-out var(--t-leave) var(--ease) both}
html.vt-move::view-transition-new(root){animation:vt-fade-in var(--t-settle) var(--ease) .3s both}

/* Homepage, the end of the tour: the line holds the centre and the footer's details settle into the four white
   gaps between the blocks, each centred in its gap and on its row's centre line, a small tracked-caps label over
   the detail. They arrive together once the line is back (opacity only), and go at once when you scroll up.
   On phones the gaps are too narrow: the details sit just inside the rows, two under the top, two over the bottom. */
.hc-gaps{position:absolute;inset:0;pointer-events:none;z-index:3}
.hc-gap{position:absolute;margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s1);text-align:center;white-space:nowrap;
  opacity:0;visibility:hidden;transition:opacity var(--t-leave) var(--ease),visibility 0s var(--t-leave)}   /* leaving: a soft fade, never a cut */
.hc-g1,.hc-g2{top:calc(var(--ch) / 2);transform:translate(-50%,-50%)}
.hc-g3,.hc-g4{bottom:calc(var(--ch) / 2);transform:translate(-50%,50%)}
.hc-g1,.hc-g3{left:calc(25% + var(--cw) / 4)}       /* midway between the corner block and the middle one */
.hc-g2,.hc-g4{left:calc(75% - var(--cw) / 4)}
.hc-k{font-size:12px;line-height:15px;letter-spacing:.12em;text-transform:uppercase}
.hc-gap a{text-decoration:none}
.hc-gap a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hc.is-end .hc-gap{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--t-settle) var(--ease) .6s,visibility 0s}   /* all four together, as the work finishes clearing: the house ease, unhurried */
@media (max-width:760px){
  .hc-gap{font-size:15px;line-height:19px;transform:none}
  .hc-g1,.hc-g2{top:calc(var(--ch) + var(--s4))}
  .hc-g3,.hc-g4{bottom:calc(var(--ch) + var(--s4))}
  .hc-g1,.hc-g3{left:var(--edge);align-items:flex-start;text-align:left}
  .hc-g2,.hc-g4{left:auto;right:var(--edge);align-items:flex-end;text-align:right}
}
@media (prefers-reduced-motion:reduce){.hc-gap,.hc.is-end .hc-gap{transition:none}}
/* service pages: a line under "Work" saying what the work shows */
.of-wl{max-width:34em;margin:var(--s1) 0 var(--s5)}
/* Work: the view switch shares the lead's first line, at the right edge of the work */
.mem-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s5);margin-bottom:var(--s7)}
.mem-top .mem-lead{margin-bottom:0}
.mem-v{margin:0;white-space:nowrap}
@media (max-width:760px){.mem-top{flex-direction:column;gap:var(--s3);margin-bottom:var(--s5)}}
/* Phones, tighter: the column, the hairline and the work sit closer (each gap one step smaller on the scale) */
@media (max-width:760px){
  .mem-side,.pj-side{padding-bottom:var(--s2)}
  .mem-main,.pj-media{margin-top:var(--s3);padding-top:var(--s3);padding-bottom:var(--s7)}
  .mem-top{gap:var(--s2);margin-bottom:var(--s4)}
  .sch-rows .sch-cap{padding-bottom:var(--s4)}
  .gal{row-gap:var(--s4)}
}
/* service-page grids: names only */
.sch-cap-nn{display:block}
/* Studio and long reads: a comfortable measure */
.of-main .of-text,.of-main .of-q{max-width:27.5em}   /* about 65 characters in Dia, the site's reading measure */
/* "Watch the reel" reads as the link it is */
.of-go button{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;padding:0;cursor:pointer}
/* the enquiry button: solid, in the page's tile colour */
.enq-go{background:var(--page,var(--c,#e4e5e9));color:var(--ink);padding:var(--s2) var(--s3);cursor:pointer;transition:filter var(--t-leave) var(--ease)}
.enq-go:hover{text-decoration:none;filter:brightness(.94)}

/* ---------- Project pages: the dock ----------
   The count and the way through sit in one fixed place: pinned to the foot of the left column on desktop (it never
   rides up or down with the story), a slim bar at the foot of the screen on phones. Previous holds the left edge,
   "All members" the centre, next the right edge, so nothing shifts with the length of a name. It carries over
   between projects as one piece, like the TCC block. */
.pj-dock{position:sticky;bottom:calc(var(--s4) * -1);margin-top:auto;margin-bottom:calc(var(--s4) * -1);padding:var(--s3) 0 var(--s4);background:var(--paper);
  display:flex;flex-direction:column;gap:var(--s1);view-transition-name:pj-dock;z-index:1}
.pj-dock .pj-count,.pj-dock .pj-nav{margin:0;view-transition-name:none}
.pj-dock .pj-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s3);align-items:baseline}
.pj-dock .pj-nav a{display:flex;white-space:nowrap;min-width:0;max-width:100%}
.pj-dock .pj-nav a span{overflow:hidden;text-overflow:ellipsis;min-width:0}   /* a long name is trimmed (its arrow stays), never runs into the next */
.pj-dock .pv{justify-self:start}.pj-dock .al{justify-self:center}.pj-dock .nx{justify-self:end;text-align:right}
.seq .pj-dock{opacity:1!important}
/* the column's fade sits just above the dock, so the dock itself is never faded */
.pj-side.is-clipped{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 94px - var(--s6)),transparent calc(100% - 94px),#000 calc(100% - 94px));mask-image:linear-gradient(to bottom,#000 calc(100% - 94px - var(--s6)),transparent calc(100% - 94px),#000 calc(100% - 94px))}
@media (max-width:760px){
  .pj-dock{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:45;
    padding:var(--s2) max(var(--edge),env(safe-area-inset-right,0px)) calc(var(--s2) + env(safe-area-inset-bottom,0px)) max(var(--edge),env(safe-area-inset-left,0px));box-shadow:inset 0 1px 0 var(--line)}
  .pj-dock .pj-count{display:none}
  body:has(.pj-dock){padding-bottom:calc(45px + env(safe-area-inset-bottom,0px))}   /* the last image never hides under the bar */
}
/* service pages: the group's pages in one line across the top of the work, the current one underlined;
   it stays put as you click through (carried over between pages) */
.of-tabs{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);view-transition-name:of-tabs}
.of-tabs a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.of-main > .of-tabs + .of-sec{margin-top:calc(var(--s6) - var(--s8))}   /* the first section follows the line closely */
.seq .of-tabs{opacity:1!important}
/* Studio: Nick's portrait, when it arrives — a 4:5 frame at the reading measure's width */
.of-portrait{margin:0 0 var(--s4);max-width:20em}
.of-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* One fade for the whole page: content of every page but home dissolves into the paper at the foot of the screen,
   across both columns, on the line where the left column stops. The footer and the project dock sit above it.
   It is a real element with its own transition name, so it stays on top while pages change instead of popping back. */
.veil{position:fixed;left:0;right:0;bottom:0;z-index:20;pointer-events:none;view-transition-name:veil;
  height:calc(var(--foot) + var(--s6));background:linear-gradient(to bottom,transparent,var(--paper) var(--s6))}
::view-transition-group(veil){z-index:5}
body:not(.home) .foot{position:relative;z-index:21;background-color:var(--paper)}
body:not(.home) .pj-dock{z-index:21}
body:not(.home) .mem-side.is-clipped,body:not(.home) .mem-side.is-clipped.at-end{-webkit-mask-image:none;mask-image:none;padding-bottom:var(--s6)}
@media (min-width:761px){body:not(.home) :is(.mem-side,.pj-side){padding-bottom:calc(var(--s6) + var(--s2))}}   /* the column's last line (the offer, the project nav) stands clear of the fade */
@media (max-width:760px){
  .veil{height:var(--s6);background:linear-gradient(to bottom,transparent,var(--paper))}
  body:has(.pj-dock) .veil{bottom:calc(45px + env(safe-area-inset-bottom,0px))}
  body:not(.home) .pj-dock{z-index:45}
}

/* Keys as colour chips: on desktop each member's square hangs in the left margin, flush to the screen edge and one line tall,
   and the left column's type starts on the same line as the TCC letters: the word is centred in the block and
   is 30.9px wide in Dia at 17px, so its left edge is half the block less half the word — set in CSS, so nothing moves after first paint. */
@media (min-width:761px){
  .mem-side,.pj-side{--E:var(--edge-l,var(--edge));--tx:round(nearest,calc(var(--cw) / 2 - 15.45px),1px);margin-left:calc(var(--E) * -1);padding-left:var(--tx)}
  .mem-list li,.hs-list li{position:relative}
  .mem-list i,.hs-list i{position:absolute;left:calc(var(--tx) * -1);top:50%;--q:clamp(8px,calc(var(--tx) - var(--s2)),21px);width:var(--q);height:var(--q);margin:calc(var(--q) / -2) 0 0}
}

/* arriving from the Club view: no square shows in place before it comes out of TCC */
.dots-wait :is(.mem-list,.hs-list) i,.dots-wait .pj-spec .dot{visibility:hidden}

/* Selected / All projects, beside the view switch: the current one underlined */
.mem-sw{display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap;flex-shrink:0}   /* Show over View: two lines, on the description's two lines */
.mem-s{margin:0;white-space:nowrap}
.mem-s a{text-decoration:none}
.mem-s a[aria-current="page"],.mem-s a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hs-main > .mem-top{margin-bottom:calc(var(--s7) - var(--s9))}
.hs-end{margin:0}
@media (max-width:760px){
  .hs-main > .mem-top{margin-bottom:calc(var(--s5) - var(--s7))}
}

/* ---------- Lines draw in ----------
   Every divider is one 1px line drawn left to right (--draw, 0 → 1) on the site's easing, in step with the content
   settling in: on load with the page's sequence, further down as each comes into view (site.js). The hairline between
   the columns draws top to bottom on arrival, but is left in place when the last page had it too, so it never blinks. */
@property --draw{syntax:'<number>';inherits:false;initial-value:1}
.of-sec,.foot,.r,.of-faq details,.enq input,.enq select,.enq textarea,.dd-btn{box-shadow:none;
  background-image:linear-gradient(var(--line),var(--line));background-repeat:no-repeat;background-size:calc(var(--draw) * 100%) 1px;
  transition:--draw var(--t-move) var(--ease-move)}
.of-sec,.foot{background-position:left top}
.r,.of-faq details,.enq input,.enq select,.enq textarea,.dd-btn{background-position:left bottom}
.dd-btn{transition:--draw var(--t-move) var(--ease-move),box-shadow var(--t-leave) var(--ease)}
html:is(.seq,.seq-lines) :is(.of-sec,.foot,.r,.of-faq details,.enq input,.enq select,.enq textarea,.dd-btn),.ln-wait{--draw:0}   /* undrawn from the first frame */
.mem-main::before,.pj-media::before{transform-origin:top;transition:transform var(--t-move) var(--ease-move)}
html:is(.seq,.seq-lines):not(.hair-on) :is(.mem-main,.pj-media)::before{transform:scaleY(0)}
@media (max-width:760px){
  .mem-main,.pj-media{box-shadow:none;background-image:linear-gradient(var(--line),var(--line));background-repeat:no-repeat;background-position:left top;background-size:calc(var(--draw) * 100%) 1px;transition:--draw var(--t-move) var(--ease-move)}
  .pj-dock{box-shadow:none;background-image:linear-gradient(var(--line),var(--line));background-repeat:no-repeat;background-position:left top;background-size:calc(var(--draw) * 100%) 1px;transition:--draw var(--t-move) var(--ease-move)}
  html:is(.seq,.seq-lines):not(.hair-on) :is(.mem-main,.pj-media,.pj-dock){--draw:0}
}
@media (prefers-reduced-motion:reduce){.ln-wait{--draw:1}}

/* Leaving a page: its lines draw out the way they came (towards the right) on the leave timing, then the next page
   draws its own in. The column hairline only goes when the next page has none (home). */
html.ln-out :is(.of-sec,.foot,.r,.of-faq details,.enq input,.enq select,.enq textarea,.dd-btn){--draw:0;background-position-x:right;transition:--draw var(--t-leave) var(--ease-move)!important;transition-delay:0s!important}
html.ln-out-all :is(.mem-main,.pj-media)::before{transform-origin:bottom;transform:scaleY(0);transition:transform var(--t-leave) var(--ease-move)}
@media (max-width:760px){html.ln-out-all :is(.mem-main,.pj-media,.pj-dock){--draw:0;background-position-x:right;transition:--draw var(--t-leave) var(--ease-move)!important}}

/* TCC changing colour between pages turns through clean colour (oklch), never a muddy crossfade: it arrives in the last
   page's colour, so the block is identical across the change, then turns to this page's on the move timing. */
@property --cp{syntax:'<number>';inherits:false;initial-value:1}
html.c-arrive body:not(.home) .corner{--cp:0}
html.c-in body:not(.home) .corner{background:color-mix(in oklch,var(--arrive) calc(100% - var(--cp) * 100%),var(--c));transition:--cp var(--t-move) var(--ease)}
/* the block is the same block across the change (same place, same starting colour), so only the live one shows:
   no snapshot of the old colour fading over the new one while it turns */
::view-transition-old(card){display:none}
::view-transition-new(card){animation:none}

/* back home in the same visit: TCC is already in place (it doesn't drop in again); the blocks come out of it */
html.home-back.seq:not(.v-list) body.home .corner{transform:none}
/* a page change never swallows a click: the transition layer lets the pointer through to the page beneath it,
   so the menu and buttons answer the first time, even while the last change is still settling */
::view-transition{pointer-events:none}

/* option: the stills' squares sit over the last image until the new one takes over */
.hc-stills canvas.hc-px{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
/* option: no wipe — the work is there at once, on white, and its squares build it; it leaves on the leave timing */
html[data-px] .hc-member{clip-path:none;opacity:0;transition:opacity var(--t-leave) var(--ease)}
html[data-px] .hc.is-active .hc-member{opacity:1;transition:none}
html[data-px] .hc-stills span{background:var(--paper)}
/* the studio in one sentence, under a page's lead: belongs with it */
.of-about{max-width:32em}
.of-lead + .of-about{margin-top:calc(var(--s2) - var(--s5))}
@media (max-width:760px){.of-lead + .of-about{margin-top:calc(var(--s2) - var(--s4))}}
/* the first section's rule only divides it from a line of links above it (a page's tabs); with nothing above, no rule */
.of-main > .of-sec:first-child{background-image:none}

/* the enquiry form's spam trap: off-screen, never seen or tabbed to by people */
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the enquiry dropdowns: the field's name is the prompt and opens it; the line below stays empty until something is chosen */
.enq-dd > span:first-child{cursor:pointer}
/* the news opt-in: a small square in the site's own language, ticked in the page colour */
.enq .enq-opt{display:flex;gap:var(--s2);align-items:baseline;cursor:pointer}
.enq .enq-opt input{appearance:none;-webkit-appearance:none;flex:none;width:12px;height:12px;margin:0;padding:0;border:1px solid var(--ink);background:none;box-shadow:none;cursor:pointer;transform:translateY(1px)}
.enq .enq-opt input:checked{background:var(--page,var(--ink));border-color:var(--ink)}
.enq .enq-opt input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
/* Index on phones: Grid is the even two-up (the gallery list, two across); Gallery is one member per row, full width */
@media (max-width:760px){
  html:not(.v-gal) .mem:has(.gal) .sch{display:none}
  html:not(.v-gal) .mem .gal{display:grid}
  html.v-gal .gal{grid-template-columns:minmax(0,1fr)}
  html.v-gal .gal-cap{flex-direction:row}
  .gal-i{order:var(--no)}
  html:not(.v-gal) .gal-f{grid-column:auto}
  html:not(.v-gal) .gal-f .sch-ph{aspect-ratio:4/5}   /* member order: the hero members first, full width, then the rest in twos */
}
/* Index on phones: the description comes straight after the heading, the filter under it (it shows once, in the side) */
.mem-lead-m{display:none}
.mem-h + .mem-lead-m + .mem-f{margin-top:calc(var(--s2) - var(--s5))}   /* hidden on a wide screen: the filter still belongs to its heading */
@media (max-width:760px){
  .mem-lead-m{display:block;margin:calc(var(--s2) - var(--s4)) 0 0}   /* the description belongs to its heading, like a lead */
  .mem-h + .mem-lead-m + .mem-f{margin-top:0}
  .mem:has(.mem-lead-m) .mem-top > .mem-lead{display:none}
}