@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/archivo-var.woff2) format('woff2')}
:root{
  --color-bg:#f3f2f2;--color-surface:#eae9e9;--color-text:#201e1d;
  --color-accent:#ec3013;--color-accent-600:#dd2b0f;--color-accent-700:#ae1800;
  --color-divider:color-mix(in srgb,#201e1d 40%,transparent);
  --color-neutral-100:#f8f4f4;--color-neutral-300:#d7d3d3;--color-neutral-400:#bab6b6;
  --color-neutral-500:#9b9797;--color-neutral-600:#7d7979;--color-neutral-700:#605d5d;
  --color-neutral-900:#2d2b2b;
  --chip-bg:var(--color-text);--chip-fg:var(--color-bg);
  --font-heading:Archivo,system-ui,sans-serif;--font-body:Archivo,system-ui,sans-serif;
  --page-gutter:18px;--page-max:1080px;--label-col:180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:17px;line-height:1.6}
img{max-width:100%}
a{color:var(--color-accent-700);text-decoration:none}
a:hover{color:var(--color-accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
h1,h2,h3{font-family:var(--font-heading);font-weight:800}
.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--color-text);color:var(--color-bg);padding:8px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.skip-link:focus{left:0}
.page-shell{min-height:100vh;display:flex;flex-direction:column}
#main{flex:1;display:flex;flex-direction:column}

/* ---------- chrome ---------- */
.site-nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 22px;padding:16px var(--page-gutter);border-bottom:2px solid var(--color-divider)}
.site-nav__brand{font-family:var(--font-heading);font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--color-text);text-transform:uppercase}
.site-nav__links{display:flex;flex-wrap:wrap;gap:14px 18px;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.site-nav__links a{color:var(--color-text)}
.site-nav__links a:hover{color:var(--color-accent-600)}
.site-nav__links a[aria-current=page]{border-bottom:2px solid var(--color-accent);padding-bottom:2px}
/* The Instagram glyph, flush right in both bars. It is the one thing in each
   bar with the auto margin, so it alone takes the free space. */
.site-social{display:inline-flex;align-items:center;align-self:center;color:var(--color-text)}
.site-social svg{width:18px;height:18px;display:block}
.site-social:hover{color:var(--color-accent-600)}
.site-nav__social{margin-left:auto}
.site-footer__social{margin-left:auto;color:var(--color-neutral-600)}
/* Dev-only shortcut to the studio index. It wears the studio's own red rather
   than the site palette, because it is scaffolding on the page and should never
   be mistaken for part of the site. It follows the social glyph, which already
   holds the auto margin, so it needs only a gap. */
.site-nav__studio{
  margin-left:18px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:#ec3013;border:2px solid currentColor;padding:2px 7px;
}
.site-nav__studio:hover{color:var(--color-text)}
.site-footer{margin-top:auto;border-top:2px solid var(--color-divider);padding:14px var(--page-gutter);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-600)}
.site-footer a{color:var(--color-neutral-600)}
.site-footer a:hover{color:var(--color-accent-600)}

/* ---------- collage ---------- */
.collage{display:grid;gap:0;width:100%;grid-template-columns:var(--cols);grid-template-rows:var(--rows);aspect-ratio:var(--ar)}
.cell{position:relative;overflow:hidden;container-type:size;grid-area:var(--ga)}
.cell--fragment{display:block;color:inherit}
.cell--fragment picture{display:block;width:100%;height:100%}
.cell--fragment img{width:100%;height:100%;object-fit:cover;display:block}
.cell--image picture{display:block;width:100%;height:100%}
.cell--image img{width:100%;height:100%;object-fit:cover;display:block}
.cat-chip{position:absolute;left:0;bottom:0;background:var(--chip-bg);color:var(--chip-fg);font-size:10px;letter-spacing:.1em;padding:4px 8px;text-transform:uppercase}
.cell--ticker{background:var(--color-text);color:var(--color-bg);display:flex;align-items:center}
.ticker-track{display:flex;white-space:nowrap;animation:mq 18s linear infinite;font-family:var(--font-heading);font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:clamp(14px,52cqh,34px)}
.ticker-track span{padding-right:40px}
.cell--statement{background:var(--color-accent);color:var(--color-bg);padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.statement-h1{font-family:var(--font-heading);font-weight:800;font-size:clamp(13px,9cqi,26px);line-height:1.15;letter-spacing:.03em;text-transform:uppercase;margin:0;color:inherit}
.statement-intro{margin:0;font-size:clamp(10px,4.5cqi,14px);line-height:1.4}
@container (max-height: 90px){
  .cell--statement p.statement-h1{display:none}
}
.cell--caption{background:var(--color-bg);padding:0 14px;display:flex;align-items:center}
.caption-text{font-size:clamp(10px,4.5cqi,13px);letter-spacing:.05em;text-transform:uppercase;color:var(--color-neutral-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell--series-list{background:var(--color-text);color:var(--color-bg);padding:14px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end}
.cell--series-list .kicker{color:var(--color-neutral-400)}
.cell--series-list a{color:var(--color-bg);display:block;font-family:var(--font-heading);font-weight:800;font-size:clamp(10px,7cqi,15px);line-height:1.4;text-transform:uppercase}
.cell--series-list a:hover{color:var(--color-accent)}
.kicker{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-500)}
.cell--widget{background:var(--color-neutral-100);display:flex;flex-direction:column}
.widget-stage{flex:1;min-height:0}
.cell--video{background:var(--color-neutral-900)}
.cell--blank{background:var(--color-bg)}
.cell--video video{width:100%;height:100%;object-fit:cover;display:block}
.video-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(243,242,242,.12) 0 1px,transparent 1px 11px);animation:scan 1.6s linear infinite}
/* ---------- separators ----------
   The line between cells, authored per composition in index.layout.yaml and
   carried here as custom properties by partials/collage.njk — the same route
   the grid geometry takes, and for the same reason: a media query has to be
   able to override the rule, which an inline property would not allow.

   Two treatments, because "a line between the areas" is two different things.
   `gap` opens the grid and lets the container colour through: exactly one line
   width everywhere, and every cell loses that much size. `overlay` has each
   cell draw its own line inside its own box: nothing moves and the artwork is
   trimmed instead — but two neighbours each draw one, so an interior join
   reads double unless --cell-line is already halved (site/studio/collage/
   separators.js does that, not this file). */
.collage[data-sep-mode=gap]{
  gap:var(--sep-w);background:var(--sep-paint);
  border:var(--frame-w) solid var(--sep-paint);
}
.collage[data-sep-mode=gap] .cell{border-radius:var(--sep-r)}
.collage[data-sep-mode=overlay] .cell{
  outline:var(--cell-line) solid var(--sep-paint);
  outline-offset:calc(-1 * var(--cell-line));
  border-radius:var(--sep-r);
}
/* Inside, not outside: the collage is full-bleed, so an outward frame would
   fall off the viewport. An outline paints above the cells, which is also what
   lets it cover their own half-width edge lines cleanly. */
.collage[data-sep-mode=overlay]{
  outline:var(--frame-w) solid var(--sep-paint);
  outline-offset:calc(-1 * var(--frame-w));
}

/* Hovering a work. Offset-driven rather than a fixed inset ring, because where
   the ring belongs depends on the separator: inside the cell when there is no
   gap, out over the gap when there is one, straddling to sit centred on the
   join. These outspecify the mode rules above, so the accent always wins over
   an overlay line — the reverse leaves the collage with no hover state at all. */
.collage[data-sep-hover=inset] .cell--fragment:hover,
.collage[data-sep-hover=inset] .cell--fragment:focus-visible{
  outline:var(--hov-w) solid var(--hov-paint);
  outline-offset:calc(-1 * var(--hov-w));z-index:2;
}
.collage[data-sep-hover=fill] .cell--fragment:hover,
.collage[data-sep-hover=fill] .cell--fragment:focus-visible{
  outline:var(--hov-w) solid var(--hov-paint);outline-offset:0;z-index:2;
}
.collage[data-sep-hover=straddle] .cell--fragment:hover,
.collage[data-sep-hover=straddle] .cell--fragment:focus-visible{
  outline:var(--hov-w) solid var(--hov-paint);
  outline-offset:calc(-0.5 * var(--hov-w));z-index:2;
}
/* Holding the resting state, not removing the rule: in overlay mode a bare
   `outline:0` would rub out the separator on whichever cell is under the
   pointer. */
.collage[data-sep-hover=none] .cell--fragment:hover,
.collage[data-sep-hover=none] .cell--fragment:focus-visible{
  outline:var(--cell-line) solid var(--sep-paint);
  outline-offset:calc(-1 * var(--cell-line));
}

@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scan{from{background-position:0 0}to{background-position:0 22px}}
@keyframes blink{50%{opacity:0}}
/* Below the breakpoint the same cells reflow into a narrow grid: wide cells
   take a whole row, narrow ones pair up, and `dense` backfills the half-row
   a full-width cell would otherwise leave. Heights come from each cell's own
   --rows-m, so relative proportions survive the reflow.
   The 719px literal below must stay in agreement, by hand, with
   collage.mobile.breakpoint in site.config.yaml — the same number that
   feeds sizesFor's `(min-width: …px)` clause in site/lib/layout.js. */
@media (max-width: 719px){
  .collage{grid-template-columns:repeat(var(--cols-m), 1fr);grid-template-rows:none;
           aspect-ratio:auto;grid-auto-rows:var(--row-unit-m);grid-auto-flow:row dense}
  .cell{grid-area:auto;grid-column:span var(--span-m);grid-row:span var(--rows-m)}
}

/* ---------- generic page layout ---------- */
.page-main{padding:44px var(--page-gutter) 64px;max-width:var(--page-max);width:100%;margin:0 auto}
.label-layout{display:grid;grid-template-columns:var(--label-col) 1fr;gap:0 40px;align-items:start}
.page-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-600);padding-top:14px}
.page-h1{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,4.5vw,54px);line-height:1.02;letter-spacing:-.015em;margin:0}
.prose{max-width:560px}
.prose p{font-size:17px;line-height:1.6;margin:16px 0 0}
.lede{font-family:var(--font-heading);font-weight:800;font-size:clamp(24px,3.4vw,38px);line-height:1.15;letter-spacing:-.01em;max-width:680px;margin:0 0 16px}
.page-links{display:flex;gap:28px;margin-top:36px;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.page-links a{color:var(--color-text)}
.page-links a:hover{color:var(--color-accent-600)}
.placeholder-banner{background:var(--color-accent);color:var(--color-bg);padding:10px 14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 24px}
/* No grayscale anywhere: tokens.json's "grayscale(1) always" line describes
   the Directions exploration's placeholder art, NOT a site rule — artwork
   renders in color per the chosen prototypes. Do not reintroduce the filter
   from tokens. (The About page's studio photo, the one grayscale image, is
   gone.) */
.figcap{padding:6px 2px 0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-600)}
@media (max-width:719.98px){.label-layout{grid-template-columns:1fr;gap:12px 0}}

/* ---------- work detail ---------- */
.work-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,4.5vw,54px);line-height:1.02;letter-spacing:-.015em;margin:0;max-width:760px}
.work-meta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-600)}
/* The scan fills the column the aside leaves, so every work is the same
   width whatever its proportions; the frame hugs the image's natural aspect
   and nothing is cropped. */
.work-hero{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 20px;align-items:start}
.work-figure{margin:0;border:2px solid var(--color-divider)}
.work-figure picture{display:block;line-height:0}
.work-figure img{display:block;width:100%;height:auto;cursor:zoom-in}
.work-aside{display:flex;flex-direction:column;min-width:0}
/* Uniform square thumbnails under the catalogue: the frame is 1:1 and the
   detail is centre-cropped to fill it. Only the thumbnail is cropped — the
   lightbox opens the full image. */
.work-details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;align-items:start}
.work-details-grid figure{margin:0;border:2px solid var(--color-divider)}
.work-details-grid picture{display:block;width:100%;aspect-ratio:1/1;line-height:0}
.work-details-grid img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.work-details-grid .figcap{font-size:9px;padding:5px 2px 3px}
.work-desc{margin-top:44px;max-width:640px}
.work-desc p{font-size:19px;line-height:1.65;margin:0;text-wrap:pretty}
.work-desc p+p{margin-top:16px}
.cat-table{border-top:2px solid var(--color-text);margin:0}
.cat-row{border-bottom:1px solid var(--color-divider);padding:10px 0}
.cat-row:last-child{border-bottom:2px solid var(--color-text)}
.cat-row dt{text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--color-neutral-600)}
.cat-row dd{font-size:13px;margin:3px 0 0}
/* A link in the table reads as text with an underline, not as the one red
   word on the page; the accent arrives on hover. */
.cat-row dd a{color:var(--color-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--color-neutral-500)}
.cat-row dd a:hover{color:var(--color-accent-600);text-decoration-color:currentColor}
.pager{display:flex;gap:28px;margin-top:44px;padding-top:16px;border-top:1px solid var(--color-divider);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.pager a{color:var(--color-text)}
.pager a:hover{color:var(--color-accent-600)}
@media (max-width:719.98px){
  .work-hero{grid-template-columns:1fr;gap:28px 0}
  .work-details-grid{gap:10px;margin-top:24px}
  .work-details-grid .figcap{font-size:10px;padding:6px 2px 0}
  .work-desc{margin-top:36px}
}

/* ---------- series ---------- */
.series-head{display:grid;grid-template-columns:44px minmax(0,1fr) 420px;gap:0 32px;align-items:center;border-bottom:2px solid var(--color-text);padding:40px 0 28px}
.series-num{font-size:11px;letter-spacing:.12em;color:var(--color-accent-700)}
.series-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(48px,6.5vw,80px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;margin:0}
.series-meta{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-neutral-600)}
.series-desc{font-size:13px;line-height:1.55;color:var(--color-neutral-700);text-wrap:pretty;margin-top:6px}
.work-row{display:grid;grid-template-columns:1.4fr 1fr;gap:0 40px;align-items:center;padding:32px 0;border-bottom:1px solid var(--color-divider);color:var(--color-text)}
.work-row:last-child{border-bottom:0}
.work-row:hover{background:var(--color-neutral-100)}
/* uniform width, uncropped: plates fill the column, heights follow aspect */
.work-row picture{display:block;width:100%;line-height:0}
.work-row img{display:block;width:100%;height:auto}
.work-row__cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700)}
.work-row__title{font-family:var(--font-heading);font-weight:800;font-size:clamp(20px,2.4vw,28px);line-height:1.1;margin-top:10px}
.work-row__meta{font-size:14px;color:var(--color-neutral-700);margin-top:14px;line-height:1.65}
.work-row__cta{font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-top:18px}
@media (max-width:719.98px){.series-head{grid-template-columns:44px 1fr}.series-head>div:last-child{grid-column:2}.work-row{grid-template-columns:1fr;gap:16px 0}}
.srow{display:grid;grid-template-columns:44px minmax(0,1fr) 300px 150px;gap:0 32px;align-items:center;padding:22px var(--page-gutter);border-bottom:2px solid var(--color-divider);background:var(--color-bg);transition:background .15s;color:var(--color-text)}
.srow-num{color:var(--color-accent-700);font-size:11px;letter-spacing:.12em}
.srow-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(48px,6.5vw,80px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;color:var(--color-text)}
.srow-meta{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-neutral-600)}
.srow-desc{font-size:13px;line-height:1.55;color:var(--color-neutral-700);text-wrap:pretty}
.srow-img{justify-self:end}
.srow-img{width:100%}
.srow-img picture{display:block;width:100%;line-height:0}
.srow-img img{display:block;width:100%;height:auto}
.srow:hover{background:var(--color-text)}
.srow:hover .srow-title{color:var(--color-bg)}
.srow:hover .srow-meta{color:var(--color-neutral-400)}
.srow:hover .srow-desc{color:var(--color-neutral-300)}
.srow:hover .srow-num{color:var(--color-accent)}
@media (max-width:719.98px){.srow{grid-template-columns:44px 1fr;gap:8px 16px}.srow-img{display:none}.srow>div:nth-child(3){grid-column:2}}

/* ---------- cv ---------- */
.cv-sub{font-size:13px;color:var(--color-neutral-600);margin-top:8px}
.cv-section-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700);margin:36px 0 6px}
.cv-rows{border-top:2px solid var(--color-text)}
.cv-row{display:grid;grid-template-columns:64px 1fr;padding:10px 0;font-size:14px;border-bottom:1px solid var(--color-divider)}
.cv-year{color:var(--color-neutral-600)}

/* ---------- contact ---------- */
.def-table{margin-top:40px;border-top:2px solid var(--color-text);max-width:560px}
.def-row{display:grid;grid-template-columns:var(--label-col) 1fr;border-bottom:1px solid var(--color-divider);padding:11px 0;font-size:14px}
.def-row:last-child{border-bottom:2px solid var(--color-text)}
.def-label{text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--color-neutral-600);padding-top:2px}
.contact-h1 a{color:var(--color-text)}
.contact-h1 a:hover{color:var(--color-accent-600)}

/* ---------- 404 ---------- */
.notfound{flex:1;background:var(--color-text);color:var(--color-bg);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:8vh var(--page-gutter);overflow:hidden}
.notfound .cat-chip{position:static;display:inline-block;background:var(--color-accent);align-self:flex-start;font-size:12px}
.notfound-ticker{white-space:nowrap;font-family:var(--font-heading);font-weight:800;font-size:clamp(34px,7vw,90px);text-transform:uppercase;letter-spacing:-.01em;display:flex;animation:mq 14s linear infinite}
.notfound-ticker span{padding-right:48px}
.notfound a{color:var(--color-bg);font-size:12px;letter-spacing:.09em;text-transform:uppercase;border-bottom:2px solid var(--color-accent);align-self:flex-start;padding-bottom:2px}
.notfound a:hover{color:var(--color-accent)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:50;background:color-mix(in srgb,var(--color-neutral-900) 94%,transparent);display:flex;flex-direction:column}
/* The stage clips a zoomed image; its image fits inside it at rest and is
   transformed from there, so layout never changes while zooming. */
.lightbox-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:28px;touch-action:none;cursor:zoom-in}
.lightbox[data-zoomed] .lightbox-stage{cursor:grab}
.lightbox[data-dragging] .lightbox-stage{cursor:grabbing}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;transform-origin:center;will-change:transform;user-select:none;-webkit-user-drag:none}
.lightbox-close{position:absolute;top:16px;right:16px;z-index:1;width:44px;height:44px;display:grid;place-items:center;background:none;border:2px solid var(--color-bg);color:var(--color-bg);cursor:pointer}
.lightbox-close svg{width:16px;height:16px}
.lightbox-close:hover{border-color:var(--color-accent);color:var(--color-accent)}
.lightbox-bar{padding:0 28px 22px;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;justify-content:center}
.lightbox-bar span{color:var(--color-bg);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.lightbox-bar .lightbox-hint{color:var(--color-neutral-500)}

/* ---------- reduced motion: designed static states ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
.motion-off *{animation:none!important;transition:none!important}