/* ==========================================================================
   HEAVENSGATE NYC

   Layout language: thin grid lines (a left and right gutter line, a centre
   line and horizontal rules), a condensed serif for big text and an
   uppercase monospace for everything small.

   Quick knobs (all in :root below): colours, --display-case, --gutter.
   ========================================================================== */

@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/instrument-serif-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../assets/fonts/geist-mono-latin.woff2") format("woff2");
}

:root {
    --bg: #000;
    --bg-rgb: 0, 0, 0;
    --fg: #fff;
    --fg-rgb: 255, 255, 255;
    --muted: rgba(var(--fg-rgb), 0.6);
    --faint: rgba(var(--fg-rgb), 0.4);
    --grid: rgba(var(--fg-rgb), 0.38); /* the grid lines */
    --hover: rgba(var(--fg-rgb), 0.14); /* pill hover */
    --current: rgba(var(--fg-rgb), 0.24); /* pill of the page you are on */
    --accent: #ee92ac; /* the pink from the reference poster */
    --accent-rgb: 238, 146, 172;
    --accent-fg: #000;
    --upcoming: #ff4b5c;

    --serif: "Instrument Serif", "Times New Roman", Times, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* Serif headlines are lowercase. Set to `none` to keep the text as typed. */
    --display-case: lowercase;

    --gutter: clamp(14px, 1.6vw, 32px); /* distance of the side lines from the edge */
    --pad: calc(var(--gutter) * 2); /* where text starts */
    --pill-pad: 11px;
    --header-h: 64px;
    --footer-h: 64px;
    --pill-h: 32px;

    /* The vertical grid lines, as background layers (header, footer and menu
       reuse them so the lines run straight through). */
    --vline: linear-gradient(var(--grid), var(--grid));
    --grid-edges:
        var(--vline) var(--gutter) 0 / 1px 100% no-repeat,
        var(--vline) calc(100% - var(--gutter)) 0 / 1px 100% no-repeat;
    --grid-mid: var(--vline) 50% 0 / 1px 100% no-repeat;

    color-scheme: dark;
}

/* Narrow screens are a single column, so there is no centre line. */
@media (max-width: 860px) {
    :root { --header-h: 56px; --footer-h: 56px; --grid-mid: none; }
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: transparent; /* <html> paints the page colour, so the grid lines can sit behind content */
    color: var(--fg);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}

/* Side + centre lines, behind everything. (The page background lives on
   <html> so these can sit at z-index -1 and still be visible.) */
/* ---------------------------------------------------------------- the grid draws in
   On load the vertical lines draw themselves down the page and the horizontal
   rules sweep across after them. --draw-y is how far down the lines have got
   (each line layer animates its own copy, all with the same timing). Without
   the animation, or where @property is unsupported, the lines are just there.
   Tweak the timings here (and the delays on the three `rule-in` rules). */
@property --draw-y { syntax: "<length>"; inherits: false; initial-value: 100000px; }
@keyframes draw-lines { from { --draw-y: 0px; } to { --draw-y: calc(100dvh + 240px); } }
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The dividers between rows (press items, credits, events...) fade in once the frame lines are in. */
@property --rule { syntax: "<color>"; inherits: true; initial-value: transparent; }
@keyframes rules-fade { from { --rule: transparent; } to { --rule: var(--grid); } }
:root { --rule: var(--grid); animation: rules-fade 0.9s ease 0.85s both; }
body::before,
.site-header::before,
.site-footer--fixed::before { animation: draw-lines 1.5s cubic-bezier(0.65, 0, 0.2, 1) 0.15s both; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--grid-edges), var(--grid-mid);
    clip-path: inset(0 0 max(0px, calc(100% - var(--draw-y))) 0);
}
/* On the home page the centre line only runs through the header. */
.page-home::before { background: var(--grid-edges); }

img { max-width: 100%; }
a { color: inherit; }
h1, h2, p { margin: 0; }
main { flex: 1 0 auto; }
main:focus { outline: none; }

:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

.skip-link {
    position: fixed;
    left: 12px;
    top: -60px;
    z-index: 3000;
    padding: 10px 14px;
    background: var(--fg);
    color: var(--bg);
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- pills
   Plain mono labels. The page you are on gets a soft grey pill; --accent is
   for the one call-to-action (MENU). */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: var(--pill-h);
    padding: 0 var(--pill-pad);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: 400 13px/1 var(--mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, opacity 160ms ease;
}
.pill:hover { background: var(--hover); }
.pill[aria-current="page"] { background: var(--current); }
.pill--accent,
.pill--accent:hover { background: var(--accent); color: var(--accent-fg); }
.pill--accent:hover { opacity: 0.85; }

/* --------------------------------------------------------------- header
   Two halves that meet at the centre line: the wordmark on the left, the
   links on the right. */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    height: var(--header-h);
    border-bottom: 1px solid transparent; /* the rule itself is ::after, so it can animate */
    background: var(--bg);
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--grid-edges), var(--grid-mid);
    clip-path: inset(0 0 max(0px, calc(100% - var(--draw-y))) 0);
}
.site-header::after,
.site-footer--fixed::after,
.page-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--grid);
    pointer-events: none;
    transform-origin: left center;
    animation: rule-in 1s cubic-bezier(0.65, 0, 0.2, 1) both;
}
.site-header::after { bottom: -1px; animation-delay: 0.35s; }

/* Logo mark: a square the full height of the header, locked into the corner of
   the grid so it touches the top edge, the left line and the rule under the
   header (no gap). Always width = height, never stretched. The wordmark (the
   name in capitals) follows it. */
.brand {
    display: inline-flex;
    align-items: flex-start;
    gap: 16px;
    align-self: start;
    justify-self: start;
    height: calc(var(--header-h) - 1px); /* the header's own border is the last px */
    margin-left: var(--gutter); /* starts exactly on the left grid line */
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
/* One px taller than the header's content box so its bottom sits on the rule. */
.brand-logo { display: block; flex: none; width: var(--header-h); height: var(--header-h); object-fit: contain; }
.brand-name {
    align-self: center;
    font: 400 clamp(24px, 2.1vw, 34px) / 1 var(--serif);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* The name is always written in capitals, even inside lowercase serif text
   (js/components.js wraps it in this class). */
.caps { text-transform: uppercase; }

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad) 0 var(--gutter);
}
/* Links sit in the first three quarters of the right half, MENU at the end. */
.pill-links {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    justify-items: start;
    width: 75%;
}
.menu-toggle { min-width: 80px; }

@media (max-width: 860px) {
    .site-header { grid-template-columns: 1fr auto; }
    .brand { gap: 12px; }
    .brand-name { font-size: 24px; }
    .site-nav { padding: 0 var(--pad) 0 0; }
    .pill-links { display: none; }
}

@media (max-width: 420px) {
    .brand { gap: 10px; }
    .brand-name { font-size: 21px; letter-spacing: 0.02em; }
}
@media (max-width: 340px) {
    .brand { gap: 8px; }
    .brand-name { font-size: 18px; letter-spacing: 0.01em; }
}

/* ----------------------------------------------------------------- menu */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-top: var(--header-h);
    background: var(--grid-edges), var(--grid-mid), var(--bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
html.menu-open { overflow: hidden; }

.menu-list { list-style: none; margin: 0; padding: 0; }

/* Number in the left half, name in the right half (they line up with the
   centre line). */
.menu-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
}
.menu-item-left { display: contents; }
.menu-num {
    padding-left: var(--pad);
    color: var(--muted);
    font: 400 13px/1 var(--mono);
}
.menu-label {
    padding: 10px 0 14px var(--gutter);
    font: 400 clamp(48px, min(9vw, 12vh), 128px) / 0.95 var(--serif);
    letter-spacing: -0.02em;
    text-transform: var(--display-case);
    transition: opacity 200ms ease;
}
.menu-arrow {
    position: absolute;
    right: var(--pad);
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    opacity: 0.5;
}
.menu-item:hover .menu-label,
.menu-item:focus-visible .menu-label { opacity: 0.4; }
.menu-item:hover .menu-arrow { opacity: 1; }
.menu-item[aria-current="page"] .menu-label { font-style: italic; }

.menu-secondary { display: flex; gap: 4px; padding: 20px calc(var(--pad) - var(--pill-pad)) 40px; }

@media (max-width: 860px) {
    .menu-item { grid-template-columns: 56px 1fr; }
    .menu-num { padding-left: var(--pad); }
    .menu-label { padding-left: 0; font-size: clamp(44px, 14vw, 88px); }
    .menu-arrow { display: none; }
}

/* --------------------------------------------------------------- footer
   On the home page it is a fixed bar (ABOUT / SHOWS, PAUSE); everywhere else
   it sits at the end of the page. */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    min-height: var(--footer-h);
    padding: 0 calc(var(--pad) - var(--pill-pad));
    border-top: 1px solid var(--rule);
    font: 400 13px/1 var(--mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.site-footer--fixed {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    height: var(--footer-h);
    border-top-color: transparent;
    background: var(--bg);
}
.site-footer--fixed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--grid-edges);
    /* Only the part of the lines the drawing has reached (the footer is at the bottom). */
    clip-path: inset(0 0 calc(100% - clamp(0px, calc(var(--draw-y) - 100dvh + var(--footer-h)), 100%)) 0);
}
.site-footer--fixed::after { top: -1px; animation-delay: 0.6s; }
.footer-copy { padding: 0 var(--pill-pad); color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Home: PAUSE and the Instagram icon sit together at the right end of the bar. */
.footer-right { display: flex; align-items: center; gap: 4px; }
/* The icon is a pill with a glyph instead of text; the glyph sits in the same inset as the text of the other pills, so it lines up with the grid. */
.pill--icon svg { display: block; width: 18px; height: 18px; }
/* When the footer wraps on a phone, the icon still goes to the right end of its row. */
.footer-links .pill--icon { margin-left: auto; }

@media (max-width: 600px) {
    .site-footer { flex-wrap: wrap; padding-block: 10px; }
    /* The home bar has a fixed height and no room for more links on a phone; APPLY and MAILING LIST are in the menu there. */
    .site-footer--fixed .pill--extra { display: none; }
}

/* --------------------------------------------------------------- cursor */
@media (hover: hover) and (pointer: fine) {
    html.cursor-enabled,
    html.cursor-enabled * { cursor: none !important; }
}
#hg-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 2147483647;
    pointer-events: none;
    mix-blend-mode: difference;
    opacity: 0;
    transition: opacity 120ms ease;
    will-change: transform;
}
#hg-cursor.active { opacity: 1; }
/* The cursor is a star. It is white and the cursor inverts against what is
   under it, so it reads on both the black page and the photos. */
#hg-cursor .cursor-star {
    position: absolute;
    left: -18px;
    top: -18px;
    width: 36px;
    height: 36px;
    transition: transform 220ms ease;
}
#hg-cursor .cursor-star .star { display: block; width: 100%; height: 100%; fill: #fff; }
/* A very small hint beside the star, only over the empty home page stage. */
#hg-cursor .cursor-label {
    position: absolute;
    left: 24px;
    top: -6px;
    color: #fff;
    font: 400 9px/12px var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 160ms ease;
}
#hg-cursor.label-left .cursor-label { left: auto; right: 24px; }
#hg-cursor.over-stage .cursor-label { opacity: 1; }
html.is-dragging #hg-cursor .cursor-label { opacity: 0; }
/* Over the home page stage the star turns slowly: "you can draw here". The
   shape repeats every 45 degrees, so the loop is seamless. */
#hg-cursor.over-stage .cursor-star .star { animation: star-spin 6s linear infinite; }
/* While drawing it grows and spins faster. */
html.is-dragging #hg-cursor .cursor-star { transform: scale(1.35); }
html.is-dragging #hg-cursor .cursor-star .star { animation: star-spin 1.2s linear infinite; }
@keyframes star-spin { to { transform: rotate(45deg); } }
#hg-cursor .cursor-open {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font: 400 13px/1 var(--mono);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
html:not(.is-dragging) #hg-cursor.project-hover { mix-blend-mode: normal; }
html:not(.is-dragging) #hg-cursor.project-hover .cursor-star { display: none; }
html:not(.is-dragging) #hg-cursor.project-hover .cursor-open { display: flex; }

/* ------------------------------------------------------------ video player
   The floating thumbnail of the home page video opens this. */
.project-cover { position: relative; }
.project-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: rgba(var(--bg-rgb), 0.55);
    box-shadow: 0 0 0 1px rgba(var(--fg-rgb), 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.project-play::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 10px;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #fff;
}
html.lightbox-open { overflow: hidden; }
html.lightbox-open #hg-cursor .cursor-label { opacity: 0; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px var(--pad) 24px;
    background: rgba(var(--bg-rgb), 0.94);
}
.lightbox-close { position: absolute; top: 16px; right: var(--pad); }
.lightbox-figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; margin: 0; }
.lightbox .project-video { width: min(100%, calc((100vh - 170px) * var(--ratio, 0.5625))); }
.lightbox figcaption { max-width: 60ch; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; text-transform: uppercase; }

/* -------------------------------------------------------- project cards */
.project-card {
    display: block;
    color: var(--fg);
    text-decoration: none;
    -webkit-user-drag: none;
}
.project-card:focus { outline: none; }
.project-card:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

/* A hairline around each image, like the grid. */
.project-cover {
    display: block;
    width: 100%;
    overflow: hidden;
    background: rgba(var(--fg-rgb), 0.06);
    box-shadow: 0 0 0 1px var(--grid);
}
.project-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    transition: transform 400ms ease;
}

.project-caption { display: flex; flex-direction: column; gap: 3px; padding-top: 9px; }
.project-title { font: 500 11px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.project-meta { font: 400 10px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------ home stage */
.page-home { overflow: hidden; height: 100vh; height: 100dvh; }

/* The stage fills the space between the header and footer bars and is not
   held back by the side lines: images drift across them and past the edge. */
.stage {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: var(--footer-h);
    left: 0;
    z-index: 1;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    /* Lets a finger drag the composition instead of scrolling the page. */
    touch-action: none;
}

.stage .project-card {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
    transition: opacity 170ms ease;
}
.stage .project-card.is-hidden { opacity: 0; pointer-events: none; }

/* Captions only show for the hovered / focused project. They never wrap, so a
   card's height doesn't depend on its width; a long caption simply extends
   past a narrow card, towards the middle of the stage (see setCaptionSide). */
.stage .project-caption {
    align-items: flex-start;
    text-align: left;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.stage .project-card.caption-right .project-caption { align-items: flex-end; text-align: right; }
.stage .project-card.is-active .project-caption {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.stage-intro {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    width: min(calc(100% - var(--pad) * 2), 840px);
    transform: translate(-50%, -50%);
    text-align: center;
    font: 400 clamp(26px, 3.1vw, 54px) / 1.02 var(--serif);
    letter-spacing: -0.012em;
    text-transform: var(--display-case);
    text-wrap: balance;
    pointer-events: none;
}

/* **Bold** words in the intro sentence. Instrument Serif has one weight, so this is the browser's
   own bold; a little extra spacing keeps the thickened letters from touching. */
.stage-intro strong,
.statement strong { font-weight: 700; letter-spacing: 0.012em; }

.drag-trail {
    position: absolute;
    inset: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

/* ------------------------------------------------------------------ the fall
   While an image is hovered / focused on the home page, the nav, the wordmark,
   the logo, the bottom bar and every word of the sentence drop to the floor
   and pile up there, tumbling; when the pointer leaves, they spring back. It
   is js/collapse.js: it makes copies of the pieces on a layer over the page and
   animates those, while the originals stay in place but hidden. */
html.project-selected [data-nav-collapse] { pointer-events: none; }

html.fall-on .site-nav .pill,
html.fall-on .site-footer--fixed .pill,
html.fall-on .site-header .brand-name,
html.fall-on .site-header .brand-logo,
html.fall-on .stage-intro { visibility: hidden; }

.fall-layer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    overflow: hidden;
    pointer-events: none;
    color: var(--fg);
    font-family: var(--mono);
}
.fall-layer > * { position: absolute; margin: 0; white-space: nowrap; will-change: transform; }

/* Reduced motion: nothing falls, the writing just fades out. */
@media (prefers-reduced-motion: reduce) {
    html.project-selected .site-nav .pill,
    html.project-selected .site-footer--fixed .pill { color: transparent; background: transparent; }
    html.project-selected .site-header .brand-name,
    html.project-selected .stage-intro { color: transparent; }
    html.project-selected .site-header .brand-logo { opacity: 0; }
}

/* --------------------------------------------------------- content pages */
.page { padding-top: var(--header-h); }

/* Title in the left half, subtitle in the right half, a rule underneath. */
.page-header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    border-bottom: 1px solid transparent;
}
.page-header::after { bottom: -1px; animation-duration: 1.2s; animation-delay: 0.5s; }
.page-title {
    padding: clamp(40px, 7vw, 96px) var(--gutter) 24px var(--pad);
    font: 400 clamp(64px, 11vw, 192px) / 0.86 var(--serif);
    letter-spacing: -0.025em;
    text-transform: var(--display-case);
    overflow-wrap: anywhere;
}
.page-sub {
    grid-column: 2;
    padding: 0 var(--pad) 30px var(--gutter);
    color: var(--muted);
    text-transform: uppercase;
}
.page-lede { max-width: 56ch; margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 1.8; text-transform: uppercase; }
.eyebrow { color: var(--muted); font: 400 12px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }

.text-link,
.back-link { text-decoration: underline; text-underline-offset: 4px; }
.text-link:hover,
.back-link:hover { opacity: 0.6; }

@media (max-width: 860px) {
    .page-header { grid-template-columns: 1fr; }
    .page-title { padding: 40px var(--pad) 18px; }
    .page-sub { grid-column: 1; padding: 0 var(--pad) 26px; }
}

/* Big sentences live in the right half, next to the centre line. */
.statement {
    padding: clamp(36px, 5vw, 64px) var(--pad) clamp(44px, 6vw, 80px) calc(50% + var(--gutter));
    border-bottom: 1px solid var(--rule);
    font: 400 clamp(28px, 3.2vw, 56px) / 1.04 var(--serif);
    letter-spacing: -0.015em;
    text-transform: var(--display-case);
}
.statement a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.statement a:hover { opacity: 0.6; }

@media (max-width: 860px) {
    .statement { padding-left: var(--pad); }
}

/* Studio */
.offer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--rule);
}
.offer-num { grid-column: 1; grid-row: 1; padding: 28px 0 0 var(--pad); color: var(--muted); font: 400 12px/1 var(--mono); }
.offer h2 {
    grid-column: 1;
    grid-row: 2;
    padding: 10px var(--gutter) 34px var(--pad);
    font: 400 clamp(38px, 4.6vw, 80px) / 0.95 var(--serif);
    letter-spacing: -0.02em;
    text-transform: var(--display-case);
}
.offer p {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: 52ch;
    padding: 28px var(--pad) 36px var(--gutter);
    color: var(--muted);
    line-height: 1.8;
    text-transform: uppercase;
}

@media (max-width: 860px) {
    .offer { grid-template-columns: 1fr; }
    .offer-num, .offer h2, .offer p { grid-column: 1; grid-row: auto; }
    .offer h2 { padding: 8px var(--pad) 12px; }
    .offer p { padding: 0 var(--pad) 32px; }
}

/* Connect */
.connect-body {
    padding: clamp(36px, 5vw, 64px) var(--pad) clamp(44px, 6vw, 80px) calc(50% + var(--gutter));
    border-bottom: 1px solid var(--rule);
}
.connect-email {
    display: inline-block;
    margin-top: 18px;
    font: 400 clamp(30px, 4.4vw, 76px) / 1 var(--serif);
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    text-decoration: none;
    border-bottom: 1px solid var(--fg);
}
.connect-email:hover { opacity: 0.6; }

/* Mailing list: the address is typed in the big serif, with the same rule under it as the email above. */
.list-lede { max-width: 44ch; margin-top: 14px; color: var(--muted); font: 400 12px/1.8 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.list-form { display: flex; align-items: flex-end; gap: 14px; max-width: 760px; margin-top: 22px; }
.list-input,
.apply-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid var(--fg);
    border-radius: 0;
    background: transparent;
    color: var(--fg);
    font: 400 clamp(28px, 4vw, 64px) / 1 var(--serif);
    letter-spacing: -0.02em;
    text-transform: none;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}
.list-input::placeholder,
.apply-input::placeholder { color: var(--faint); opacity: 1; }
.list-input:focus-visible,
.apply-input:focus-visible { border-bottom-width: 2px; margin-bottom: -1px; }
.list-submit { margin-bottom: 8px; }
.list-submit:disabled { opacity: 0.5; cursor: default; }

/* ------------------------------------------------- application form (apply.html)
   One question per screen: the question in the left half, the answer in the
   right half (they meet at the centre line); stacked on a phone. A thin bar
   above the footer fills as you go. */
.apply { display: flex; flex-direction: column; }
.apply-frame { flex: 1 0 auto; display: flex; align-items: center; }
.apply-step {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    animation: apply-in 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.apply-step[data-dir="back"] { animation-name: apply-in-back; }
@keyframes apply-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes apply-in-back { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
.apply-q { padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(24px, 4vw, 56px) var(--pad); }
.apply-title {
    margin-top: 18px;
    font: 400 clamp(38px, 5.6vw, 96px) / 0.95 var(--serif);
    letter-spacing: -0.025em;
    text-transform: var(--display-case);
    overflow-wrap: anywhere;
}
.apply-title:focus { outline: none; }
.apply-title--intro { font-size: clamp(64px, 11vw, 192px); line-height: 0.86; }
.apply-hint { margin-top: 20px; max-width: 44ch; color: var(--muted); font: 400 12px/1.8 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.apply-a { padding: clamp(24px, 4vw, 56px) var(--pad) clamp(40px, 6vw, 80px) var(--gutter); }
.apply-text { max-width: 46ch; color: var(--muted); font: 400 13px/1.8 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; }
.apply-input { display: block; width: 100%; }
.apply-input--long { min-height: 3.5em; resize: none; overflow: hidden; font-size: clamp(24px, 2.8vw, 44px); line-height: 1.15; }
.apply-error { min-height: 1.8em; margin-top: 12px; color: var(--upcoming); font: 400 12px/1.8 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.apply-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; }
.apply-a > .apply-text + .apply-actions { margin-top: 28px; }
.apply-back { margin-left: calc(var(--pill-pad) * -1); }
.apply-next:disabled { opacity: 0.5; cursor: default; }
.apply-keys { margin-left: 6px; color: var(--faint); font: 400 12px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
@media (hover: none) { .apply-keys { display: none; } }

/* Choices: a row each, with the letter that picks it. */
.apply-choices { border-top: 1px solid var(--rule); }
.apply-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 8px 12px 0;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    transition: background 160ms ease;
}
.apply-choice:hover { background: var(--hover); }
.apply-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.apply-key {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--fg);
    font: 400 12px/1 var(--mono);
    transition: background 160ms ease, color 160ms ease;
}
.apply-choice input:checked + .apply-key { background: var(--fg); color: var(--bg); }
.apply-choice input:focus-visible + .apply-key { outline: 1px solid var(--fg); outline-offset: 3px; }
.apply-choice-label { font: 400 clamp(24px, 2.6vw, 40px) / 1.1 var(--serif); letter-spacing: -0.01em; text-transform: var(--display-case); }

.apply-progress { position: relative; height: 2px; }
.apply-bar { display: block; height: 100%; background: var(--fg); transform: scaleX(0); transform-origin: left center; transition: transform 700ms cubic-bezier(0.65, 0, 0.2, 1); }

@media (max-width: 860px) {
    .apply-frame { align-items: flex-start; }
    .apply-step { grid-template-columns: 1fr; }
    .apply-q { padding: 36px var(--pad) 18px; }
    .apply-a { padding: 8px var(--pad) 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .apply-step { animation: none; }
    .apply-bar { transition: none; }
}

/* A field only bots see. */
.list-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.list-status { min-height: 1.8em; margin-top: 14px; color: var(--muted); font: 400 12px/1.8 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.list-status.is-error { color: var(--upcoming); }

@media (max-width: 860px) {
    .connect-body { padding-left: var(--pad); }
}

/* Gallery */
.gallery-grid { columns: 4 240px; column-gap: var(--pad); padding: 40px var(--pad) 80px; }
.gallery-grid .project-card { margin-bottom: 40px; break-inside: avoid; }
.gallery-grid .project-card:hover img { transform: scale(1.03); }

/* Project detail: image left, text right (split at the centre line). */
.project-page { padding: 0; }
.back-link {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 var(--pad);
    border-bottom: 1px solid var(--rule);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}
.back-link:hover { opacity: 0.6; }
.project-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
/* All of a project's images, stacked in the left column. */
.project-images { display: grid; justify-items: start; gap: 24px; padding: 32px var(--gutter) 64px var(--pad); }
/* A YouTube / Vimeo video: the player, then a big title that links to the video on its own site. If the
   player can't be shown (js/components.js, HG.checkEmbeds) only the title is left. */
.video-embed { width: min(100%, calc((100vh - var(--header-h) - 150px) * var(--ratio, 1.7778))); }
.video-embed .project-video { width: 100%; }
.video-embed.is-blocked .project-video { display: none; }
.video-link {
    display: block;
    padding: 18px 0 20px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    color: inherit;
    text-decoration: none;
}
.video-embed:not(.is-blocked) + .video-link { margin-top: -1px; }
.video-link-title {
    display: block;
    font: 400 clamp(30px, 4vw, 60px) / 1 var(--serif);
    letter-spacing: -0.012em;
    text-transform: var(--display-case);
}
.video-link-note {
    display: block;
    margin-top: 12px;
    font: 400 13px / 1 var(--mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 160ms ease;
}
.video-link:hover .video-link-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.video-link:hover .video-link-note { color: var(--fg); }
.project-hero {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - var(--header-h) - 150px);
    background: rgba(var(--fg-rgb), 0.06);
    box-shadow: 0 0 0 1px var(--grid);
}
/* A video: as wide as the column, but never taller than the screen (a vertical
   clip is narrower, like the portrait photos). --ratio is width / height. */
.project-video {
    width: min(100%, calc((100vh - var(--header-h) - 150px) * var(--ratio, 1.7778)));
    aspect-ratio: var(--ratio, 1.7778);
    background: #000;
    box-shadow: 0 0 0 1px var(--grid);
}
.project-video video,
.project-video iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.project-info { padding: 32px var(--pad) 64px var(--gutter); }
.project-info .page-title { padding: 18px 0 0; font-size: clamp(48px, 7vw, 120px); }
.project-info .page-lede + .page-lede { margin-top: 16px; }

/* Who was involved: role on the left, names (linked handles) on the right. */
.credits { margin: 40px 0 0; border-top: 1px solid var(--rule); }
.credit { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.credit dt { color: var(--muted); font-size: 12px; line-height: 1.6; text-transform: uppercase; }
.credit dd { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.credit a { text-decoration: none; }
.credit a:hover { text-decoration: underline; text-underline-offset: 3px; }
.project-pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.project-pager a {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px var(--gutter) 32px var(--pad);
    font: 400 clamp(28px, 3.2vw, 52px) / 1 var(--serif);
    letter-spacing: -0.015em;
    text-transform: var(--display-case);
    text-decoration: none;
}
.project-pager a:last-child { padding-left: var(--gutter); padding-right: var(--pad); }
.project-pager a:hover { opacity: 0.6; }
.project-pager span { color: var(--muted); font: 400 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 860px) {
    .project-layout { grid-template-columns: 1fr; }
    .project-images { padding: 24px var(--pad); }
    .project-hero { width: 100%; max-height: none; }
    .project-video { width: 100%; }
    .project-info { padding: 0 var(--pad) 48px; }
    .credit { grid-template-columns: 1fr; gap: 6px; }
    .project-pager { grid-template-columns: 1fr; }
    .project-pager a,
    .project-pager a:last-child { padding: 24px var(--pad); border-top: 1px solid var(--rule); }
    .project-pager a:first-child { border-top: 0; }
}

/* Press: title left, publication right of the centre line, date at the end. */
.press-item {
    display: grid;
    grid-template-columns: 50% minmax(0, 1fr) auto;
    align-items: baseline;
    padding: 24px 0 26px;
    border-bottom: 1px solid var(--rule);
    color: var(--fg);
    text-decoration: none;
    transition: background 150ms ease;
}
a.press-item:hover { background: rgba(var(--fg-rgb), 0.05); }
.press-item-title {
    padding: 0 var(--gutter) 0 var(--pad);
    font: 400 clamp(28px, 3.2vw, 52px) / 1 var(--serif);
    letter-spacing: -0.015em;
    text-transform: var(--display-case);
}
.press-item-deck { display: block; margin-top: 12px; color: var(--muted); font: 400 11px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.press-item-pub { display: flex; align-items: center; gap: 14px; padding-left: var(--gutter); color: var(--muted); text-transform: uppercase; }
/* A row with a thumbnail (e.g. a video): everything lines up on the middle. */
.press-item--thumb { align-items: center; padding-block: 18px; }
.press-item-logo { display: block; width: auto; height: 46px; max-width: 100%; object-fit: contain; opacity: 0.92; }
.press-item-tag { padding: 3px 9px; border: 1px solid var(--grid); border-radius: 999px; font-size: 10px; line-height: 1.2; letter-spacing: 0.04em; }
.press-item-thumb { position: relative; flex: none; width: 46px; box-shadow: 0 0 0 1px var(--grid); background: rgba(var(--fg-rgb), 0.06); }
.press-item-thumb img { display: block; width: 100%; height: auto; }
.press-item-thumb.is-video::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -7px 0 0 -4px;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
}
.press-item-right { display: flex; align-items: baseline; gap: 20px; padding-right: var(--pad); color: var(--muted); text-transform: uppercase; }
.press-item-arrow { font-size: 18px; opacity: 0.6; }
a.press-item:hover .press-item-arrow { opacity: 1; }

@media (max-width: 860px) {
    .press-item { grid-template-columns: 1fr auto; row-gap: 10px; }
    .press-item-title { grid-column: 1 / -1; padding: 0 var(--pad); }
    .press-item-pub { padding-left: var(--pad); }
}

/* Events / shows: two columns that meet at the centre line. */
.events-grid { display: grid; grid-template-columns: 1fr 1fr; }
.events-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 280px;
    padding: 30px var(--gutter) 30px var(--pad);
    border-bottom: 1px solid var(--rule);
    color: var(--fg);
    text-decoration: none;
    transition: background 150ms ease;
}
.events-card:nth-child(even) { padding-left: var(--gutter); padding-right: var(--pad); }
a.events-card:hover { background: rgba(var(--fg-rgb), 0.05); }

/* With a poster: the poster on the left, the usual card text beside it. */
.events-card--poster { display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.events-card-poster { display: block; align-self: start; box-shadow: 0 0 0 1px var(--grid); background: rgba(var(--fg-rgb), 0.06); }
.events-card-poster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.events-card-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.events-card-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    height: 26px;
    padding: 0 11px;
    border: 1px solid var(--grid);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.events-card-tag.upcoming { border-color: var(--upcoming); color: var(--upcoming); }
.events-card-date { color: var(--muted); text-transform: uppercase; }
.events-card-title {
    font: 400 clamp(32px, 3.6vw, 60px) / 0.98 var(--serif);
    letter-spacing: -0.02em;
    text-transform: var(--display-case);
}
.events-card-meta {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    color: var(--muted);
    text-transform: uppercase;
}
.events-card-arrow { align-self: flex-end; font-size: 20px; opacity: 0.5; }
a.events-card:hover .events-card-arrow { opacity: 1; }

@media (max-width: 860px) {
    .events-grid { grid-template-columns: 1fr; }
    .events-card,
    .events-card:nth-child(even) { min-height: 0; padding: 26px var(--pad); }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root { animation: none !important; }
    body::before,
    .site-header::before,
    .site-footer--fixed::before,
    .site-header::after,
    .site-footer--fixed::after,
    .page-header::after { animation: none !important; }
    #hg-cursor,
    .menu-overlay,
    .menu-label,
    .project-cover img,
    [data-nav-collapse],
    .stage .project-card,
    .stage .project-caption { transition: none !important; }
    #hg-cursor .star { animation: none !important; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}