/* ============================================================
   LOVE+ESCAPISM, style.css  v2
   Poster / contact-sheet build. Photography does the work.
   Colour is rationed: pillar tags, three duotone panels, nothing else.
   ============================================================ */

:root{
  /* ground, neutral, not tinted */
  --black:#0B0B0C;
  --ink:#000000;
  --paper:#EDEAE3;
  --smoke:#17171A;
  --line:#2A2A2E;
  --grey:#8E8E94;
  --white:#FFFFFF;

  /* spectrum, used sparingly */
  --lungs:#4100F5; --eyes:#0AA9E0; --mind:#7BF004; --hands:#F4FF1E;
  --throat:#FA6B05; --heart:#FC05B8; --spine:#FFFFFF;

  --logo:'Archivo Black', Impact, sans-serif;
  --display:'Bebas Neue', Impact, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --ui:'Archivo', system-ui, sans-serif;
  --edge:'DM Mono', ui-monospace, monospace;
  --hand:'Architects Daughter', cursive;

  /* colour belongs to the kind of update */
  --k-bts:#F4FF1E;     /* behind the scenes      */
  --k-poc:#7BF004;     /* proof of concepts      */
  --k-casting:#FC05B8; /* casting calls          */
  --k-event:#FA6B05;   /* event capture          */
  --k-client:#0AA9E0;  /* client work highlights */
  --k-wano:#4100F5;    /* the WANO partnership   */

  --gutter:34px;
  --max:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);color:var(--white);
  font-family:var(--ui);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section[id],header[id]{scroll-margin-top:72px}

/* type roles */
.edge{font-family:var(--edge);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.hand{font-family:var(--hand);color:var(--white)}
.big{
  font-family:var(--display);font-weight:400;
  line-height:.84;letter-spacing:.005em;text-transform:uppercase;
}
h2.big{font-size:clamp(46px,8vw,120px)}
h3{font-family:var(--display);font-size:26px;line-height:.94;letter-spacing:.01em;text-transform:uppercase}

/* film grain */
#grain{
  position:fixed;inset:-40%;z-index:60;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)'/></svg>");
  animation:gr .5s steps(2) infinite;mix-blend-mode:overlay;
}
@keyframes gr{0%{transform:translate(0,0)}50%{transform:translate(-2%,1%)}100%{transform:translate(1%,-2%)}}

/* the film-edge rails, left and right of the whole page */
.rail{
  position:fixed;top:0;bottom:0;width:34px;z-index:55;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.rail.l{left:0}.rail.r{right:0}
.rail span{
  font-family:var(--edge);font-size:9.5px;letter-spacing:.42em;color:rgba(255,255,255,.46);
  white-space:nowrap;text-transform:uppercase;
  mix-blend-mode:difference; /* flips itself to black over the paper block */
}
.rail.l span{writing-mode:vertical-rl;transform:rotate(180deg)}
.rail.r span{writing-mode:vertical-rl}
@media(max-width:900px){.rail{display:none}}

/* ---------------------------------------------------- nav */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gutter);
  background:rgba(11,11,12,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
#nav.scrolled{border-bottom-color:var(--line);background:rgba(11,11,12,.94)}
#nav .brand{font-family:var(--logo);font-size:15px;letter-spacing:-.02em}
#nav .join{
  font-family:var(--edge);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 16px;background:var(--white);color:var(--ink);
  transition:filter .2s;
}
#nav .join:hover{filter:invert(1)}
@media(max-width:640px){#nav .edge{display:none}}

/* ---------------------------------------------------- hero */
#hero{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:120px var(--gutter) 80px;
}
#hero .bg{position:absolute;inset:0}
#hero .bg video,#hero .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.62)}
#hero .veil{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 55%,rgba(0,0,0,.10),rgba(0,0,0,.72) 78%),
  linear-gradient(180deg,rgba(11,11,12,.78),rgba(11,11,12,.10) 34%,rgba(11,11,12,.92))}
/* faint blueprint grid, from the New Order reference */
#hero .mesh{position:absolute;inset:0;opacity:.22;background-image:
  linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:104px 104px}
#hero .stack{position:relative;z-index:3;width:100%;max-width:1180px;text-align:center}
.mark{
  font-family:var(--logo);text-transform:uppercase;
  font-size:clamp(34px,8.8vw,136px);line-height:.9;letter-spacing:-.035em;
  color:var(--white);text-shadow:0 8px 60px rgba(0,0,0,.6);
}
.mark .pl{color:var(--hands);padding:0 .04em}
.mark .row2{display:block;margin-top:-.04em}
#hero .sub{
  font-family:var(--edge);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-top:26px;
}
#hero .globe{
  margin-top:10px;color:rgba(255,255,255,.58);
}
#hero .globe b{font-weight:400;color:var(--hands)}
#hero .pill{
  display:inline-block;margin-bottom:26px;
  font-family:var(--edge);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--white);color:var(--ink);padding:7px 14px;transform:rotate(-1.6deg);
}
#hero .note{
  position:absolute;right:7%;bottom:11%;z-index:4;
  font-family:var(--hand);font-size:22px;line-height:1.2;color:var(--white);
  transform:rotate(-6deg);max-width:220px;text-align:left;
}
#hero .arrow{position:absolute;right:11%;bottom:21%;z-index:4;width:104px;opacity:.8;transform:rotate(14deg)}
#hero .cue{position:absolute;left:0;right:0;bottom:22px;z-index:4;text-align:center}
@media(max-width:820px){#hero .note,#hero .arrow{display:none}}
@media(prefers-reduced-motion:reduce){#grain{animation:none}}

/* the scan series, used as ground texture only, never explained, never labelled */
.scanbg{
  position:absolute;inset:0;pointer-events:none;
  background:url("../img/scan-sheet.jpg") center/cover no-repeat;
  opacity:.15;mix-blend-mode:screen;filter:grayscale(1) contrast(1.1);
}
.scanbg.soft{opacity:.07}

/* ---------------------------------------------------- statement */
#statement{padding-block:110px;position:relative;overflow:hidden}
#statement .in{max-width:900px;margin:0 auto;text-align:center;position:relative}
#statement p.q{
  font-family:var(--serif);font-size:clamp(30px,5.2vw,70px);line-height:1.06;
  color:var(--white);letter-spacing:-.01em;
}
#statement .circled{position:relative;display:inline-block;white-space:nowrap}
#statement .circled svg{position:absolute;left:-9%;top:-22%;width:118%;height:150%;pointer-events:none;overflow:visible}
#statement .body{
  font-size:16.5px;line-height:1.62;color:#B9B9BF;max-width:56ch;margin:34px auto 0;
}
/* the hero owns the yellow, so the statement takes the blue instead */
#statement .scribble{
  font-family:var(--hand);font-size:21px;color:var(--eyes);
  transform:rotate(-3deg);margin-top:30px;display:inline-block;
}


/* ---------------------------------------------------- the paper block
   The feed is printed. Torn top and bottom edges, ink instead of light. */
.paper{
  background:var(--paper);color:#141416;position:relative;
  padding-block:96px 104px;margin-block:0;
  clip-path:polygon(0.0% 7.7px, 2.27% 9.5px, 4.55% 15.7px, 6.82% 7.9px, 9.09% 8.6px, 11.36% 10.0px, 13.64% 3.1px, 15.91% 8.7px, 18.18% 10.7px, 20.45% 13.5px, 22.73% 1.6px, 25.0% 5.2px, 27.27% 1.5px, 29.55% 13.8px, 31.82% 11.8px, 34.09% 0.7px, 36.36% 16.7px, 38.64% 16.4px, 40.91% 11.1px, 43.18% 10.5px, 45.45% 2.7px, 47.73% 0.3px, 50.0% 9.0px, 52.27% 1.0px, 54.55% 3.2px, 56.82% 4.1px, 59.09% 0.5px, 61.36% 7.9px, 63.64% 7.5px, 65.91% 14.3px, 68.18% 8.8px, 70.45% 10.9px, 72.73% 8.5px, 75.0% 11.3px, 77.27% 7.8px, 79.55% 4.7px, 81.82% 17.0px, 84.09% 16.9px, 86.36% 14.3px, 88.64% 12.0px, 90.91% 5.4px, 93.18% 3.9px, 95.45% 4.9px, 97.73% 1.2px, 100.0% 13.0px, 100.0% calc(100% - 16.8px), 97.73% calc(100% - 1.7px), 95.45% calc(100% - 10.9px), 93.18% calc(100% - 14.5px), 90.91% calc(100% - 6.7px), 88.64% calc(100% - 3.6px), 86.36% calc(100% - 15.0px), 84.09% calc(100% - 5.2px), 81.82% calc(100% - 13.7px), 79.55% calc(100% - 16.5px), 77.27% calc(100% - 4.6px), 75.0% calc(100% - 3.6px), 72.73% calc(100% - 7.2px), 70.45% calc(100% - 2.0px), 68.18% calc(100% - 10.9px), 65.91% calc(100% - 2.2px), 63.64% calc(100% - 12.4px), 61.36% calc(100% - 3.2px), 59.09% calc(100% - 7.6px), 56.82% calc(100% - 9.5px), 54.55% calc(100% - 3.0px), 52.27% calc(100% - 13.5px), 50.0% calc(100% - 1.0px), 47.73% calc(100% - 1.7px), 45.45% calc(100% - 4.2px), 43.18% calc(100% - 2.0px), 40.91% calc(100% - 12.9px), 38.64% calc(100% - 16.4px), 36.36% calc(100% - 5.7px), 34.09% calc(100% - 1.5px), 31.82% calc(100% - 4.6px), 29.55% calc(100% - 13.2px), 27.27% calc(100% - 10.7px), 25.0% calc(100% - 1.2px), 22.73% calc(100% - 6.8px), 20.45% calc(100% - 16.7px), 18.18% calc(100% - 8.0px), 15.91% calc(100% - 15.5px), 13.64% calc(100% - 3.6px), 11.36% calc(100% - 0.0px), 9.09% calc(100% - 14.4px), 6.82% calc(100% - 16.3px), 4.55% calc(100% - 6.6px), 2.27% calc(100% - 14.4px), 0.0% calc(100% - 6.8px));
  background-image:
    repeating-linear-gradient(92deg,rgba(0,0,0,.020) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(4deg,rgba(0,0,0,.015) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 22% 12%,rgba(0,0,0,.05),transparent 46%),
    radial-gradient(circle at 84% 78%,rgba(0,0,0,.06),transparent 52%);
}
.paper .edge{color:#5C5C60}
.paper .big{color:#0B0B0C}
.paper .filters button{border-color:rgba(0,0,0,.22);color:#5C5C60}
.paper .filters button:hover{color:#0B0B0C;border-color:#0B0B0C}
.paper .filters button.on{background:#0B0B0C;border-color:#0B0B0C;color:var(--paper)}
.paper .print .frame{background:#FCFBF7;box-shadow:0 14px 30px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.16)}
.paper .print .scrawl{color:#141416}
.paper .print .below h3{color:#0B0B0C}
.paper .print .below .date{color:#6A6A6E}
.paper .print .below p{color:#4C4C50}
.paper .print .below .out{color:#0B0B0C}
.paper .print .cap{color:#8A8A8E}
.paper .empty{border-color:rgba(0,0,0,.2);color:#6A6A6E}
/* the sprocket strip, printed along the top of the sheet */
.sprockets{display:flex;gap:14px;margin-bottom:30px;flex-wrap:wrap}
.sprockets i{display:block;width:26px;height:15px;border-radius:2px;background:rgba(0,0,0,.13)}

/* ---------------------------------------------------- contact sheet feed */
#feed{position:relative}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-top:26px}
.filters button{
  font-family:var(--edge);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--line);color:var(--grey);
  transition:.2s;
}
.filters button:hover{color:var(--white);border-color:var(--grey)}
.filters button.on{background:var(--white);border-color:var(--white);color:var(--ink)}

.sheet{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:64px 26px;margin-top:62px;
}
/* every frame is a print: white border, drop shadow, small rotation */
.print{position:relative;transition:transform .4s cubic-bezier(.2,.7,.3,1),filter .4s}
.print:nth-child(3n+1){transform:rotate(-1.4deg)}
.print:nth-child(3n+2){transform:rotate(.9deg)}
.print:nth-child(3n+3){transform:rotate(-.5deg)}
.print:hover{transform:rotate(0deg) translateY(-7px) scale(1.015);filter:brightness(1.08);z-index:5}
.print .frame{
  background:var(--white);padding:11px 11px 46px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);position:relative;
}
.print .shot{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111}
.print .shot img,.print .shot video{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transition:filter .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);
}
.print:hover .shot img,.print:hover .shot video,
.print:focus-within .shot img,.print:focus-within .shot video{
  filter:grayscale(0) contrast(1.04) saturate(1.06);transform:scale(1.035);
}
.print .pending{
  position:absolute;inset:0;display:grid;place-items:center;background:#111;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px);
}
.print .pending span{font-family:var(--edge);font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.5);text-align:center;line-height:2}
.print .tag{
  position:absolute;top:20px;left:20px;z-index:3;color:var(--ink);
  font-family:var(--edge);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 9px;color:var(--ink);
}
/* the caption written on the white border, like a contact print */
.print .cap{
  position:absolute;left:14px;right:14px;bottom:12px;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--edge);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#4A4A4E;
}
/* the annotation sits in the margin around the print, like a note on a contact sheet */
.print .scrawl{
  position:absolute;z-index:6;left:2px;top:-26px;
  font-family:var(--hand);font-size:20px;line-height:1.15;color:var(--white);
  transform:rotate(-3deg);max-width:88%;pointer-events:none;
}
.print .below{padding:16px 4px 0}
.print .below .date{font-family:var(--edge);font-size:10px;letter-spacing:.16em;color:var(--grey)}
.print .below h3{margin-top:7px;color:var(--white)}
.print .below p{margin-top:8px;font-size:14px;line-height:1.5;color:#9A9AA0}
.print .below .out{margin-top:12px;color:var(--white);opacity:.55;transition:opacity .3s}
.print:hover .below .out{opacity:1}
a.print{display:block}
.empty{border:1px dashed var(--line);padding:42px;text-align:center;margin-top:44px}

/* ---------------------------------------------------- join */
#join{padding-block:100px;border-top:1px solid var(--line);position:relative;overflow:hidden}
#join .wrap{position:relative;z-index:2}
#join .grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
#join form{display:flex;gap:9px;margin-top:26px;flex-wrap:wrap}
#join input[type=email]{
  flex:1;min-width:230px;background:transparent;border:1px solid var(--line);color:var(--white);
  font-family:var(--edge);font-size:12px;letter-spacing:.06em;padding:16px 18px;
}
#join input[type=email]::placeholder{color:#5A5A60}
#join input[type=email]:focus{outline:none;border-color:var(--white)}
#join button[type=submit]{
  background:var(--white);color:var(--ink);
  font-family:var(--edge);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:16px 28px;
  transition:filter .2s;
}
#join button[type=submit]:hover{filter:invert(1)}
#join .small{margin-top:14px}
#join .side{position:relative}
#join .side img{width:100%;filter:grayscale(1) contrast(1.1);transition:filter .55s ease}
#join .side:hover img{filter:grayscale(0) contrast(1.05)}
#join .side .stamp{
  position:absolute;bottom:16px;left:-18px;background:var(--heart);color:var(--ink);
  font-family:var(--display);font-size:22px;letter-spacing:.04em;padding:10px 16px;transform:rotate(-4deg);
}
.hp{position:absolute;left:-9999px}
#formnote{margin-top:16px;font-family:var(--edge);font-size:11px;letter-spacing:.12em;color:var(--mind);display:none}
@media(max-width:860px){#join .grid2{grid-template-columns:1fr;gap:34px}}

/* ---------------------------------------------------- footer */
footer{padding-block:36px 64px;border-top:1px solid var(--line)}
footer .rows{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.perf{display:flex;gap:10px;margin-bottom:24px;align-items:center}
.perf i{display:block;width:8px;height:8px;border-radius:50%;background:var(--line)}

/* the aside sits as one block so the arrow can never cross the note */
#hero .hero-aside{
  position:absolute;right:6%;bottom:9%;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:260px;
}
#hero .hero-aside .arrow{position:static;width:132px;opacity:.8;transform:rotate(6deg);margin-right:26px}
#hero .hero-aside .note{position:static;transform:rotate(-4deg);max-width:240px;text-align:left}
@media(max-width:900px){#hero .hero-aside{display:none}}

/* a highlight with no photograph yet: the type carries it on its own */
#cover.no-figure .cv-figure{opacity:0;pointer-events:none}
#cover.no-figure .cv-plate{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,72vw);aspect-ratio:3/4;
  border:1px solid color-mix(in srgb, var(--cv-ink) 26%, transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  backdrop-filter:blur(2px);
}
#cover .cv-plate{display:none}
#cover.no-figure .cv-plate{display:block}
#cover.no-figure .cv-line.tl{top:26%}
#cover.no-figure .cv-line.tr{top:31%}
#cover.no-figure .cv-line b{font-size:clamp(21px,2.7vw,40px)}

/* ============================================================
   HIGHLIGHT 01, THE LISTENING PARTY. Magazine cover.
   ============================================================ */
#tlp{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  --cv-accent:#FA6B05;--cv-ink:#FFFFFF}
#tlp .cv-ground{position:absolute;inset:0;background:#0B0B0C}
#tlp .cv-scan{position:absolute;inset:0;background:url("../img/scan-sheet.jpg") center/cover no-repeat;opacity:.20;mix-blend-mode:screen;filter:grayscale(1) contrast(1.15)}
#tlp .cv-mesh{position:absolute;inset:0;opacity:.12;background-image:
  linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:78px 78px}
#tlp .cv-stage{position:relative;z-index:3;height:min(80svh,840px);display:grid;place-items:end center}
#tlp .cv-figure{position:relative;z-index:3;height:92%;width:auto;max-width:none;object-fit:contain;
  filter:grayscale(1) drop-shadow(0 34px 70px rgba(0,0,0,.65));transition:filter .6s ease}
#tlp:hover .cv-figure{filter:grayscale(0) drop-shadow(0 34px 70px rgba(0,0,0,.65))}
/* the contents strip, four frames from the sessions */
.cv-strip{position:absolute;left:0;right:0;bottom:56px;z-index:5;display:flex;gap:10px;justify-content:center;padding:0 var(--gutter)}
.cv-strip figure{width:clamp(112px,13vw,178px);background:#fff;padding:5px;box-shadow:0 14px 30px rgba(0,0,0,.55);transform:rotate(-1.2deg);transition:transform .35s ease}
.cv-strip figure:nth-child(even){transform:rotate(1.4deg)}
.cv-strip figure:hover{transform:rotate(0) translateY(-6px) scale(1.06);z-index:3}
.cv-strip figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);transition:filter .5s ease}
.cv-strip figure:hover img{filter:grayscale(0)}


/* ============================================================
   HIGHLIGHT 02, THE CHAIR. Type behind the figure, text columns
   laid over the top. From the We Run Crew reference.
   ============================================================ */
#chair{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;
  background:radial-gradient(ellipse at 60% 20%,#4A4A4F,#1B1B1E 62%,#0E0E10)}
#chair .ch-type{position:absolute;left:2%;top:16%;z-index:2;pointer-events:none;line-height:.78}
#chair .ch-type span{display:block;font-family:var(--logo);font-size:clamp(52px,13vw,196px);letter-spacing:-.045em;text-transform:uppercase}
#chair .ch-type span:nth-child(1){color:#0E0E10;margin-left:0}
#chair .ch-type span:nth-child(2){color:var(--k-casting);margin-left:.22em;margin-top:-.14em;
  text-shadow:0 0 60px rgba(252,5,184,.35)}
#chair .ch-type span:nth-child(3){color:#0E0E10;margin-left:.06em;margin-top:-.12em}
/* the marker outline is its own layer, so the photograph can stay black and
   white while the pink line around it does not */
/* the figure gets a width budget as well as a height one, so it can never
   grow into the text columns on a taller or narrower window */
#chair .ch-figwrap{position:absolute;right:3%;bottom:0;z-index:3;
  height:min(82%,760px);width:clamp(230px,38vw,520px);display:grid}
#chair .ch-figwrap img{grid-area:1/1;height:100%;width:100%;max-width:none;
  object-fit:contain;object-position:bottom right}
#chair .ch-edge{filter:drop-shadow(0 0 30px rgba(252,5,184,.45))}
#chair .ch-fig{filter:grayscale(1);transition:filter .6s ease}
#chair:hover .ch-fig{filter:grayscale(0)}
#chair .ch-cols{position:relative;z-index:4;width:100%;padding:0 var(--gutter) 118px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:min(820px,52vw)}
#chair .ch-cols p{font-size:13.5px;line-height:1.72;color:#DCDCE2;text-align:justify;hyphens:auto;
  background:rgba(14,14,16,.42);backdrop-filter:blur(2px);padding:14px 16px}
#chair .ch-kick{position:absolute;left:var(--gutter);bottom:70px;z-index:5;display:flex;gap:8px;flex-wrap:wrap}
#chair .ch-kick span{font-family:var(--edge);font-size:9px;letter-spacing:.16em;text-transform:uppercase;background:#0E0E10;color:#fff;padding:6px 10px;border:1px solid rgba(255,255,255,.5)}
#chair .ch-kick span:nth-child(2){background:#fff;color:#0E0E10;transform:rotate(-1.4deg)}
/* the casting result is the news, so it is set as the announcement it is */
#chair .ch-id{position:absolute;left:var(--gutter);top:104px;z-index:5;
  display:inline-flex;align-items:center;gap:12px;
  background:var(--k-casting);color:#0E0E10;padding:9px 18px 9px 14px;
  transform:rotate(-1.3deg);box-shadow:0 12px 40px rgba(252,5,184,.34)}
#chair .ch-id span{font-family:var(--display);font-weight:400;
  font-size:clamp(21px,2.5vw,36px);line-height:1;letter-spacing:.02em;text-transform:uppercase}
#chair .ch-id svg{width:26px;height:26px;flex:none}
#chair .ch-meta{position:absolute;right:var(--gutter);top:118px;z-index:6;text-align:right;max-width:230px}
#chair .ch-meta .t{font-family:var(--display);font-size:22px;text-transform:uppercase;color:#fff;line-height:.95}
#chair .ch-meta .s{font-family:var(--edge);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--k-casting);margin-top:8px}
#chair .ch-bar{position:absolute;left:0;right:0;bottom:22px;z-index:6;text-align:center}

/* ============================================================
   HIGHLIGHT 03, WE ARE NOT OK. Their brand, not ours.
   ============================================================ */
#wano{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;
  --plum:#4B2050;--rose:#D7A9B4;--offw:#F4F0EC;--char:#1A1618;--lav:#AC93CE;
  background:#1A1618}
#wano .wn-fur{position:absolute;inset:0;background:url("../img/wano-leopard.jpg") center/620px auto repeat;opacity:.92}
#wano .wn-dim{position:absolute;inset:0;background:
  radial-gradient(ellipse at 42% 52%,rgba(26,22,24,.22),rgba(26,22,24,.86) 72%),
  linear-gradient(180deg,rgba(26,22,24,.9),rgba(26,22,24,.24) 30%,rgba(26,22,24,.94))}
#wano .wrap{position:relative;z-index:5;width:100%;padding-block:120px}
.wn-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
/* torn print */
.wn-photo{position:relative}
.wn-photo .paperlayer{background:var(--offw);padding:14px;clip-path:polygon(0.0% 3.3px, 3.33% 1.4px, 6.67% 5.5px, 10.0% 2.2px, 13.33% 0.9px, 16.67% 5.6px, 20.0% 12.9px, 23.33% 11.2px, 26.67% 10.7px, 30.0% 3.1px, 33.33% 7.5px, 36.67% 3.9px, 40.0% 2.4px, 43.33% 1.5px, 46.67% 3.0px, 50.0% 13.0px, 53.33% 11.6px, 56.67% 11.3px, 60.0% 11.2px, 63.33% 2.7px, 66.67% 4.3px, 70.0% 8.8px, 73.33% 10.2px, 76.67% 12.0px, 80.0% 12.3px, 83.33% 1.2px, 86.67% 8.5px, 90.0% 9.4px, 93.33% 7.1px, 96.67% 2.5px, 100.0% 6.6px, calc(100% - 9.8px) 0.0%, calc(100% - 3.5px) 4.17%, calc(100% - 2.3px) 8.33%, calc(100% - 5.3px) 12.5%, calc(100% - 1.6px) 16.67%, calc(100% - 4.6px) 20.83%, calc(100% - 11.5px) 25.0%, calc(100% - 4.0px) 29.17%, calc(100% - 0.1px) 33.33%, calc(100% - 0.5px) 37.5%, calc(100% - 2.0px) 41.67%, calc(100% - 9.4px) 45.83%, calc(100% - 4.4px) 50.0%, calc(100% - 3.5px) 54.17%, calc(100% - 1.2px) 58.33%, calc(100% - 11.8px) 62.5%, calc(100% - 5.1px) 66.67%, calc(100% - 2.5px) 70.83%, calc(100% - 0.7px) 75.0%, calc(100% - 0.7px) 79.17%, calc(100% - 2.0px) 83.33%, calc(100% - 8.1px) 87.5%, calc(100% - 1.8px) 91.67%, calc(100% - 0.5px) 95.83%, calc(100% - 5.9px) 100.0%, 100.0% calc(100% - 10.5px), 96.67% calc(100% - 5.0px), 93.33% calc(100% - 3.9px), 90.0% calc(100% - 8.9px), 86.67% calc(100% - 2.8px), 83.33% calc(100% - 5.8px), 80.0% calc(100% - 2.7px), 76.67% calc(100% - 14.0px), 73.33% calc(100% - 4.8px), 70.0% calc(100% - 6.6px), 66.67% calc(100% - 7.5px), 63.33% calc(100% - 3.9px), 60.0% calc(100% - 8.8px), 56.67% calc(100% - 0.6px), 53.33% calc(100% - 0.6px), 50.0% calc(100% - 11.4px), 46.67% calc(100% - 4.3px), 43.33% calc(100% - 2.3px), 40.0% calc(100% - 6.0px), 36.67% calc(100% - 8.4px), 33.33% calc(100% - 5.8px), 30.0% calc(100% - 7.1px), 26.67% calc(100% - 11.9px), 23.33% calc(100% - 12.4px), 20.0% calc(100% - 8.0px), 16.67% calc(100% - 12.7px), 13.33% calc(100% - 4.2px), 10.0% calc(100% - 7.7px), 6.67% calc(100% - 12.1px), 3.33% calc(100% - 13.1px), 0.0% calc(100% - 1.3px), 7.4px 100.0%, 11.3px 95.83%, 4.9px 91.67%, 9.3px 87.5%, 11.6px 83.33%, 3.5px 79.17%, 0.2px 75.0%, 11.5px 70.83%, 8.8px 66.67%, 11.5px 62.5%, 10.8px 58.33%, 8.4px 54.17%, 0.5px 50.0%, 5.5px 45.83%, 2.1px 41.67%, 4.0px 37.5%, 2.8px 33.33%, 7.4px 29.17%, 9.2px 25.0%, 2.7px 20.83%, 0.7px 16.67%, 1.2px 12.5%, 10.9px 8.33%, 6.7px 4.17%, 3.8px 0.0%);box-shadow:0 30px 60px rgba(0,0,0,.6)}
/* WANO keeps its own colour. It is a guest brand, not part of the greyscale system. */
.wn-photo img.shot{width:100%;display:block;transition:transform .6s ease}
.wn-photo:hover img.shot{transform:scale(1.012)}
.wn-photo .tape{position:absolute;top:-12px;left:14%;width:120px;height:26px;background:rgba(215,169,180,.55);transform:rotate(-4deg);backdrop-filter:blur(1px)}
/* stickers cut from their own brand guide */
.wn-sym{position:absolute;pointer-events:none;z-index:6}
.wn-sym.butterfly{width:clamp(90px,11vw,170px);left:-6%;bottom:6%;opacity:.95;transform:rotate(-8deg)}
.wn-sym.star{width:clamp(80px,9vw,140px);right:-5%;top:-4%;transform:rotate(9deg)}
.wn-sym.lips{width:clamp(74px,8vw,124px);right:8%;bottom:-5%;transform:rotate(-5deg);opacity:.95}
.wn-copy{position:relative}
.wn-logo{width:clamp(150px,17vw,236px);filter:drop-shadow(0 6px 22px rgba(0,0,0,.6))}
.wn-kick{font-family:var(--edge);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);margin-top:22px}
.wn-h{font-family:var(--ui);font-weight:600;font-size:clamp(30px,3.9vw,54px);line-height:1.02;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--offw);margin-top:12px}
.wn-script{font-family:'Pinyon Script',cursive;font-size:clamp(28px,3.4vw,46px);color:var(--rose);line-height:1;margin-top:6px}
.wn-body{font-family:var(--ui);font-size:15px;line-height:1.62;color:#E4DCE2;max-width:44ch;margin-top:20px}
.wn-facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.wn-facts span{font-family:var(--edge);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--plum);color:var(--offw);padding:7px 11px}
.wn-facts span:nth-child(2){background:var(--rose);color:var(--char)}
.wn-facts span:nth-child(3){background:var(--lav);color:var(--char)}
.wn-cta{display:inline-block;margin-top:26px;font-family:var(--edge);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;background:var(--offw);color:var(--char);padding:13px 20px;transition:filter .25s}
.wn-cta:hover{filter:invert(1)}

/* ============================================================
   MOODBOARD. The photograph is the subject. The panel floats over
   it, and its three frames grow when you touch them.
   ============================================================ */
#moodboard{position:relative;overflow:hidden;min-height:104svh;display:flex;align-items:flex-end;
  justify-content:center;padding-block:90px 64px;padding-inline:var(--gutter);background:var(--black)}
#moodboard .mb-bg{position:absolute;inset:0;z-index:1}
#moodboard .mb-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
#moodboard .mb-veil{position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(11,11,12,.72),rgba(11,11,12,.04) 26%,rgba(11,11,12,.26) 56%,rgba(11,11,12,.92))}
#moodboard .mb-scan{position:absolute;inset:0;z-index:2;opacity:.07;
  background:url("../img/scan-sheet.jpg") center/cover no-repeat;mix-blend-mode:screen}
.mb-figure{position:absolute;z-index:3;left:50%;bottom:0;transform:translateX(-50%);height:100%;width:auto;
  object-fit:contain;filter:drop-shadow(0 30px 70px rgba(0,0,0,.6))}

/* the type sits straight on the photograph; only the frames get the glass,
   so the panel is as small as the three of them and no larger */
.mb-lay{position:relative;z-index:5;width:min(1000px,100%);margin-bottom:2vh}
.mb-head{max-width:min(640px,100%);text-shadow:0 2px 26px rgba(0,0,0,.85)}
.mb-panel{position:relative;width:min(600px,100%);padding:14px;margin-top:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.38);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 70px rgba(0,0,0,.5),0 30px 80px rgba(0,0,0,.62);
  transform:perspective(1700px) rotateY(-2deg) rotateX(1.4deg)}
.mb-panel:before{content:'';position:absolute;inset:6px;border:1px solid rgba(255,255,255,.16);pointer-events:none}
.mb-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.mb-top .l{font-family:var(--edge);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.mb-top .r{font-family:var(--edge);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#FFFFFF}
.mb-lock{margin:12px 0 4px;line-height:1}
.mb-lock .nm{display:block;font-family:var(--logo);font-size:clamp(30px,5vw,68px);letter-spacing:-.04em;color:#fff}
.mb-sub{font-size:14px;color:#E4DEE2;max-width:46ch;margin:12px 0 0}
.mb-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mb-thumbs .cell{position:relative;aspect-ratio:3/4;overflow:visible;border:0;background:none;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),z-index 0s;transform-origin:center bottom}
.mb-thumbs .cell .inner{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(255,255,255,.3);
  background:#111;transition:box-shadow .4s ease,border-color .4s ease}
.mb-thumbs .cell img,.mb-thumbs .cell video{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);transition:filter .5s ease,transform .5s ease}
.mb-thumbs .cell:hover{transform:scale(1.55) translateY(-7%);z-index:9}
.mb-thumbs .cell:hover .inner{border-color:#FFFFFF;box-shadow:0 0 0 1px #FFFFFF,0 0 40px rgba(255,255,255,.4),0 24px 50px rgba(0,0,0,.6)}
.mb-thumbs .cell:hover img,.mb-thumbs .cell:hover video{filter:grayscale(0)}
.mb-thumbs .cell.live .inner{border-color:#FFFFFF;box-shadow:0 0 0 1px #FFFFFF,0 0 26px rgba(255,255,255,.3)}
.mb-thumbs .cell.live video{filter:grayscale(0)}
.mb-thumbs .n{position:absolute;top:6px;left:6px;z-index:3;font-family:var(--edge);font-size:8px;
  letter-spacing:.14em;background:rgba(0,0,0,.62);color:#fff;padding:3px 5px}
.mb-scrub{display:flex;align-items:center;margin-top:12px}
.mb-scrub .track{flex:1;height:1px;background:rgba(255,255,255,.3);position:relative}
.mb-scrub .track i{position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transform:translateX(-50%)}
.mb-scrub .track i.on{background:#FFFFFF;box-shadow:0 0 12px #FFFFFF}
.mb-foot{margin-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--edge);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);
  text-shadow:0 2px 18px rgba(0,0,0,.9)}

/* ============================================================
   TEXTURE. A rotating ring of floating frames. No words.
   ============================================================ */
#texture{position:relative;overflow:hidden;padding-block:132px 140px;background:#08080A;border-top:1px solid var(--line)}
#texture .glowbed{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 52%,rgba(255,255,255,.05),transparent 62%)}
/* deeper perspective and more room, so a frame at the front is never clipped */
.gal-stage{position:relative;z-index:3;height:min(64svh,540px);perspective:2000px;margin-top:6px;
  cursor:grab;touch-action:pan-y;--gal-w:216px;--gal-h:300px}
.gal-stage.dragging{cursor:grabbing}
.gal-ring{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.gal-card{position:absolute;left:50%;top:50%;width:var(--gal-w);height:var(--gal-h);
  margin:calc(var(--gal-h) / -2) 0 0 calc(var(--gal-w) / -2);
  overflow:hidden;border:1px solid rgba(255,255,255,.34);border-radius:14px;
  background:rgba(255,255,255,.05);backdrop-filter:blur(2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 34px rgba(0,0,0,.5),0 20px 50px rgba(0,0,0,.55);
  transition:box-shadow .4s ease}
.gal-card img,.gal-card video{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);transition:filter .55s ease,transform .55s ease}
.gal-card:hover{box-shadow:0 0 0 1px #FFFFFF,0 0 52px rgba(255,255,255,.4),0 24px 60px rgba(0,0,0,.6)}
.gal-card:hover img,.gal-card:hover video{filter:grayscale(0);transform:scale(1.06)}
.gal-card:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 42%)}
@media(prefers-reduced-motion:reduce){.gal-ring{animation:none}}

/* ============================================================
   SUPPORT
   ============================================================ */
#support{position:relative;overflow:hidden;padding-block:110px;border-top:1px solid var(--line);background:#0B0B0C}
#support .sp-photo{position:absolute;right:0;top:0;bottom:0;width:46%;z-index:1}
#support .sp-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.55);transition:filter .6s ease}
#support:hover .sp-photo img{filter:grayscale(0) contrast(1.04) brightness(.7)}
#support .sp-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--black),rgba(11,11,12,.3) 50%,rgba(11,11,12,.75))}
#support .wrap{position:relative;z-index:3}
#support .lede{font-size:17px;line-height:1.62;color:#C2C2C8;max-width:44ch;margin-top:18px}
/* the two follows are a link, not a pitch, so they get an icon each */
.sp-social{display:flex;align-items:center;gap:12px;margin-top:30px}
.sp-icon{display:grid;place-items:center;width:52px;height:52px;flex:none;
  border:1px solid var(--line);background:rgba(11,11,12,.6);color:#fff;
  transition:border-color .25s ease,background .25s ease,transform .25s ease}
.sp-icon svg{width:23px;height:23px}
.sp-icon:hover,.sp-icon:focus-visible{border-color:#fff;background:#fff;color:var(--ink);transform:translateY(-3px)}
.sp-social .edge{margin-left:6px}

.sp-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:26px;max-width:760px}
.sp-card{border:1px solid var(--line);background:rgba(11,11,12,.6);backdrop-filter:blur(3px);
  padding:20px 18px;display:flex;flex-direction:column;gap:8px;transition:border-color .3s,transform .3s,background .3s}
.sp-card:hover{border-color:#fff;transform:translateY(-4px);background:rgba(23,23,26,.8)}
.sp-card .k{font-family:var(--edge);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--k-casting)}
.sp-card h3{font-size:22px;color:#fff}
.sp-card p{font-size:13.5px;line-height:1.5;color:#9A9AA0}
.sp-card .go{margin-top:auto;padding-top:10px;font-family:var(--edge);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.6}
.sp-card:hover .go{opacity:1}
.sp-form{margin-top:34px;max-width:560px}
.sp-form form{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.sp-form input[type=email]{flex:1;min-width:230px;background:transparent;border:1px solid var(--line);color:#fff;
  font-family:var(--edge);font-size:12px;letter-spacing:.06em;padding:16px 18px}
.sp-form input[type=email]::placeholder{color:#5A5A60}
.sp-form input[type=email]:focus{outline:none;border-color:#fff}
.sp-form button{background:#fff;color:#000;font-family:var(--edge);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:16px 28px;transition:filter .2s}
.sp-form button:hover{filter:invert(1)}

/* the cover typography, scoped to the Listening Party panel */
/* the title is the masthead, and it runs the full width like a cover logo.
   Nineteen characters, so it sets smaller than a short wordmark would. */
#tlp .masthead{
  position:absolute;top:20%;left:50%;z-index:2;
  font-family:var(--logo);font-size:clamp(17px,4.9vw,80px);line-height:.86;
  letter-spacing:-.038em;color:var(--cv-ink);white-space:nowrap;
  transform:translateX(-50%);
}
/* sized and lifted so her whole face sits clear of the strip below,
   with the cap crossing the masthead the way a cover subject should */
#tlp .cv-figure{height:clamp(300px,48svh,540px);margin-bottom:clamp(96px,15svh,160px)}
#tlp .cv-line{position:absolute;z-index:4;max-width:230px}
#tlp .cv-line .k{display:block;font-family:var(--edge);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cv-accent)}
#tlp .cv-line b{display:block;margin-top:7px;font-family:var(--display);font-weight:400;
  font-size:clamp(18px,2.2vw,32px);line-height:.96;text-transform:uppercase;color:var(--cv-ink);
  text-shadow:0 2px 20px rgba(0,0,0,.75)}
#tlp .cv-line.tl{top:33%;left:3.5%}
#tlp .cv-line.tr{top:33%;right:3.5%;text-align:right}
#tlp .cv-line.bl{bottom:30%;left:3.5%}
#tlp .cv-line.br{bottom:30%;right:3.5%;text-align:right}
#tlp .cv-bar{position:absolute;bottom:22px;left:0;right:0;z-index:6;text-align:center;
  color:var(--cv-ink);opacity:.8;text-shadow:0 2px 14px rgba(0,0,0,.8)}

/* ============================================================
   RESPONSIVE
   The desktop build leans on absolute positioning, which is right
   for a poster and wrong for a phone. Below 900px every stacked
   section drops into ordinary flow so nothing can overlap, and the
   reading order is set deliberately rather than inherited from
   whatever the desktop composition happened to need.
   ============================================================ */
@media(max-width:900px){
  :root{--gutter:20px}
  h2.big{font-size:clamp(40px,10vw,72px)}

  /* ---- The Listening Party: cover becomes a stacked spread ---- */
  #tlp{min-height:auto;padding-block:100px 40px}
  #tlp .cv-stage{height:auto;display:grid;grid-template-columns:1fr 1fr;
    gap:22px 16px;align-items:start;justify-items:stretch;padding:0 var(--gutter)}
  #tlp .masthead{position:static;transform:none;grid-column:1/-1;
    font-size:clamp(24px,7.4vw,52px);text-align:center;white-space:normal;line-height:.94}
  #tlp .cv-figure{position:static;grid-column:1/-1;justify-self:center;
    height:auto;width:min(74%,300px);margin:0}
  #tlp .cv-line{position:static;inset:auto;max-width:none;transform:none !important;text-align:left}
  #tlp .cv-line.tr,#tlp .cv-line.br{text-align:left}
  #tlp .cv-line b{font-size:clamp(17px,4.6vw,24px)}
  #tlp .cv-strip{position:static;grid-column:1/-1;display:flex;gap:8px;
    padding:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #tlp .cv-strip::-webkit-scrollbar{display:none}
  #tlp .cv-strip figure{flex:1 1 0;min-width:0;transform:none}
  #tlp .cv-bar{position:static;grid-column:1/-1;text-align:left}

  /* ---- The Chair: announcement first, then the face, then the read ---- */
  #chair{min-height:auto;display:flex;flex-direction:column;align-items:stretch;
    padding:100px 0 34px;gap:16px}
  #chair .ch-id{position:static;order:1;align-self:flex-start;margin:0 var(--gutter)}
  #chair .ch-type{position:static;order:2;padding:0 var(--gutter);left:auto;top:auto}
  #chair .ch-type span{font-size:clamp(46px,15vw,104px)}
  #chair .ch-type span:nth-child(1){color:#2E2E33}
  #chair .ch-meta{position:static;order:3;text-align:left;max-width:none;
    padding:0 var(--gutter);right:auto;top:auto}
  #chair .ch-figwrap{position:static;order:4;width:min(72%,300px);height:auto;
    margin:4px auto 0;right:auto;bottom:auto}
  #chair .ch-figwrap img{height:auto}
  #chair .ch-cols{order:5;max-width:none;grid-template-columns:1fr;gap:14px;padding:0 var(--gutter)}
  #chair .ch-cols p{text-align:left;hyphens:none;background:rgba(14,14,16,.62)}
  #chair .ch-kick{position:static;order:6;padding:0 var(--gutter);left:auto;bottom:auto}
  #chair .ch-bar{position:static;order:7;padding:0 var(--gutter);text-align:left}

  /* ---- We Are Not Ok ---- */
  .wn-grid{grid-template-columns:1fr;gap:44px}
  .wn-sym.butterfly,.wn-sym.lips{display:none}
  .wn-sym.star{max-width:30%;right:0}
  #wano{overflow:hidden}

  /* ---- MoodBoard ---- */
  #moodboard{min-height:auto;padding-block:100px 44px}
  .mb-panel{transform:none;padding:10px;width:100%;margin-top:16px}
  .mb-head{max-width:none}
  .mb-figure{opacity:.34}
  .mb-thumbs{gap:8px}
  .mb-foot{font-size:8.5px;letter-spacing:.14em}

  /* ---- the ring ---- */
  #texture{padding-block:76px 84px}
  .gal-stage{height:min(46svh,360px);perspective:1200px;--gal-w:150px;--gal-h:210px}

  /* ---- support ---- */
  #support{padding-block:88px 96px}
  #support .sp-photo{width:100%;opacity:.26}
  .sp-actions{grid-template-columns:1fr;max-width:none}
}

@media(max-width:600px){
  #hero{padding:104px var(--gutter) 72px}
  #hero .sub{letter-spacing:.22em;font-size:10px}
  #statement{padding-block:76px}
  #statement p.q{font-size:clamp(26px,7.4vw,38px)}
  #statement .circled svg{left:-7%;width:114%}
  #tlp .cv-stage{grid-template-columns:1fr}
  #tlp .cv-strip figure{flex:0 0 58%;min-width:0}
  .gal-stage{height:min(42svh,300px);--gal-w:132px;--gal-h:184px}
  .mb-lock .nm{font-size:clamp(28px,10vw,44px)}
  footer .rows{flex-direction:column;gap:10px}
}

/* a coarse pointer has no hover, so the colour reveal is given outright */
@media(hover:none){
  .cv-strip figure img,.mb-thumbs .cell img,.mb-thumbs .cell video,
  .gal-card img,.gal-card video,#tlp .cv-figure,#chair .ch-fig{filter:none}
  #support .sp-photo img{filter:grayscale(1) brightness(.5)}
}

/* Anything you tap with a thumb needs a target you can actually hit.
   Only the touch sizes change; the type stays where it was. */
@media(max-width:700px){
  #chair .ch-kick{gap:10px}
  #chair .ch-kick a{display:inline-flex}
  #chair .ch-kick span{display:inline-flex;align-items:center;min-height:42px;padding:0 14px}
  footer .rows{gap:6px}
  footer .rows a{display:inline-flex;align-items:center;min-height:44px}
  .sp-icon{width:56px;height:56px}
  .sp-card{padding-block:18px}
  #tlp .cv-strip figure{padding:6px}
}