/* ============================================================
   CONTEMPUURARY
   Shared stylesheet for every page.
   Palette: white ground, ink type, one accent.
   ============================================================ */

:root{
  --paper:      #FFFFFF;
  --paper-2:    #F2F1EF;
  --card:       #EAE9E6;
  --ink:        #15140F;
  --ink-70:     rgba(21,20,15,.70);
  --ink-45:     rgba(21,20,15,.45);
  --rule:       rgba(21,20,15,.16);
  --rule-2:     rgba(21,20,15,.28);
  --accent:     #B2371A;

  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --pad: clamp(18px, 4vw, 56px);
  --head-h: 58px;

  /* wordmark: --lh is written by main.js so the word always fills its line */
  --lh:  100px;
  --gap: clamp(2px, 0.7vw, 12px);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper); padding:10px 16px;
  font:700 11px/1 var(--mono); letter-spacing:.08em;
}
.skip:focus{ left:8px; top:8px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.arw{ display:inline-block; font-style:normal; }

/* paper grain ------------------------------------------------ */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.34; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23n)' opacity='.42'/></svg>");
}

/* ============================  HEADER  ====================== */
.head{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--head-h);
  display:flex; align-items:center; gap:24px;
  padding:0 var(--pad);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
/* the logo sits at the same ink tone as the nav links. instead of an underline it
   lights up inside, left to right: the dimmed mark is the img, and ::after is the
   same mark at full ink, wiped in with clip-path. */
.head__logo{
  display:flex; align-items:center; position:relative;
}
.head__logo img{
  height:38px; width:auto; display:block;
  opacity:.70;
}
.head__logo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/logo.svg") left center / contain no-repeat;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .45s cubic-bezier(.3,.7,.3,1);
}
.head__logo:hover::after,
.head__logo:focus-visible::after,
.head__logo[aria-current="page"]::after{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){
  .head__logo::after{ transition:none; }
}

.head__nav{ margin-left:auto; display:flex; gap:26px; }
.head__nav a{
  font:400 11px/1 var(--mono); letter-spacing:.14em; color:var(--ink-70);
  position:relative; padding-bottom:3px;
}
.head__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--ink); transition:right .28s ease;
}
.head__nav a:hover,
.head__nav a[aria-current="page"]{ color:var(--ink); }
.head__nav a:hover::after,
.head__nav a[aria-current="page"]::after{ right:0; }

/* the one nav link that leaves the site, the shop */
.head__nav-out .arw{ font-size:.92em; transition:transform .25s ease; }
.head__nav-out:hover .arw{ transform:translate(2px,-2px); }
.menu nav a .arw{
  /* Archivo has no north east arrow, so it falls through to a colour
     emoji font. The mono face has one, and it matches the header. */
  font-family:var(--mono); font-size:.3em; vertical-align:1.1em;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font:700 11px/1 var(--mono); letter-spacing:.12em;
  padding:13px 18px; border:1px solid var(--ink); border-radius:999px;
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background .22s ease, color .22s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn--sm{ padding:10px 15px; }

.burger{
  display:none; margin-left:auto;
  width:40px; height:40px; padding:0;
  background:none; border:1px solid var(--rule-2); border-radius:999px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
}
.burger span{ display:block; width:15px; height:1.5px; background:var(--ink); transition:transform .25s ease; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{  transform:translateY(-3.25px) rotate(-45deg); }

.menu{
  position:fixed; inset:var(--head-h) 0 0 0; z-index:55;
  background:var(--paper);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(28px,8vw,60px) var(--pad) var(--pad);
}
.menu[hidden]{ display:none; }
.menu nav{ display:flex; flex-direction:column; gap:6px; }
.menu nav a{
  display:flex; align-items:baseline; gap:16px;
  font:800 clamp(34px,11vw,62px)/1.05 var(--sans); letter-spacing:-.02em;
  padding:10px 0; border-bottom:1px solid var(--rule);
}
.menu nav a em{ font:400 11px/1 var(--mono); color:var(--ink-45); font-style:normal; }
.menu__foot a{ font:400 12px/1 var(--mono); color:var(--ink-70); }

/* ============================  HERO  ======================== */
.hero{
  position:relative; z-index:2;
  min-height:90svh;
  padding:calc(var(--head-h) + clamp(40px,9vh,90px)) var(--pad) clamp(22px,4vh,44px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(24px,5vh,54px);
}

/* the cut-and-stick wordmark.
   main.js measures the line and writes --lh so the word always spans the width. */
.mark{
  /* full width up to a point. Past that the word stops growing with the
     monitor and sits in from the edges, which is what keeps it a wordmark
     rather than a banner. Phones are below the cap, so nothing changes there. */
  margin:0 auto; width:100%; max-width:1570px; height:var(--lh);
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:center;
  gap:var(--gap);
}
.slot{
  position:relative; flex:0 0 auto;
  height:100%;
  width:calc(var(--ar) * var(--lh));
  transform:rotate(var(--rot)) translateY(var(--dy));
  transition:transform .25s cubic-bezier(.2,.8,.3,1), width .3s cubic-bezier(.2,.8,.3,1);
}
.slot img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(1px 2px 0 rgba(21,20,15,.09)) drop-shadow(0 6px 14px rgba(21,20,15,.14));
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
.slot.is-hot{ z-index:5; transform:rotate(var(--rot)) translateY(var(--dy)) scale(1.05); }
@media (prefers-reduced-motion: reduce){
  .slot, .slot.is-hot{ transition:none; transform:rotate(var(--rot)) translateY(var(--dy)); }
}

.strip{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font:400 10px/1 var(--mono); letter-spacing:.16em; color:var(--ink-70);
}
.strip__mid{ color:var(--ink-45); text-transform:none; letter-spacing:.1em; }

.hero__tag{
  margin:0; max-width:60ch; text-align:center;
  font:500 clamp(11px,1.2vw,13.5px)/1.75 var(--mono);
  letter-spacing:.06em; color:var(--ink-70);
}
.hero__tag strong{ color:var(--ink); font-weight:700; }

.hero__hint{ margin:0; font:400 10px/1 var(--mono); letter-spacing:.22em; color:var(--ink-45); }
@media (hover: none){ .hero__hint{ display:none; } }

.scroll{ font-size:18px; line-height:1; color:var(--ink-45); animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }
@media (prefers-reduced-motion: reduce){ .scroll{ animation:none; } }

/* ======================  INNER PAGE HEADER  ================= */
.page{
  position:relative; z-index:2;
  padding:calc(var(--head-h) + clamp(40px,8vh,80px)) var(--pad) clamp(28px,5vw,48px);
  border-bottom:1px solid var(--rule);
}
.page__kicker{ font:400 10px/1 var(--mono); letter-spacing:.2em; color:var(--ink-45); }
.page__title{
  margin:14px 0 0;
  font:800 clamp(40px,9vw,120px)/.92 var(--sans);
  letter-spacing:-.04em; text-transform:uppercase;
}
.page__intro{
  margin:clamp(20px,3vw,30px) 0 0; max-width:60ch;
  font:400 clamp(15px,1.5vw,18px)/1.6 var(--sans); color:var(--ink-70);
}
.page__updated{
  margin:9px 0 0; max-width:60ch;
  font:italic 400 clamp(14px,1.4vw,16px)/1.6 var(--sans);
  color:var(--ink); opacity:.5;
}

/* ==========================  SECTIONS  ====================== */
.sect{ position:relative; z-index:2; padding:clamp(56px,10vh,110px) var(--pad); }
/* the first section after the hero sits closer, the fold already gave it room */
.hero + .sect{ padding-top:clamp(20px,3.5vh,46px); }
.sect--rule{ border-top:1px solid var(--rule); }
.sect--tight{ padding-top:clamp(34px,6vh,60px); }

.sect__head{ margin-bottom:clamp(28px,5vw,52px); }
.sect__title{
  margin:0;
  font:800 clamp(38px,7.5vw,92px)/.94 var(--sans);
  letter-spacing:-.035em; text-transform:uppercase;
}
.sect__note{
  margin:16px 0 0; max-width:46ch;
  font:400 12px/1.7 var(--mono); letter-spacing:.04em; color:var(--ink-45);
}

/* ==========================  WORK GRID  ===================== */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.8vw,26px); }
.card--12{ grid-column:span 12; }
.card--8{ grid-column:span 8; }
.card--6{ grid-column:span 6; }
.card--4{ grid-column:span 4; }
.card{ display:block; }

.ph{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(21,20,15,.05) 0 2px, transparent 2px 11px),
    var(--card);
  border:1px solid var(--rule-2);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), border-color .3s ease;
}
.ph::after{
  content:attr(data-ph);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font:400 10px/1 var(--mono); letter-spacing:.22em; color:var(--ink-45);
  border:1px dashed var(--rule-2); padding:9px 13px; background:var(--paper-2);
  white-space:nowrap;
}
.ph img{ width:100%; height:100%; object-fit:cover; }
.card--8 .ph, .card--6 .ph, .card--12 .ph{ aspect-ratio:16/10; }
.card--4 .ph{ aspect-ratio:4/5; }
/* a card carrying 16:9 artwork rather than the 16:10 the category covers use,
   so the work page can mix project covers in without cropping either shape */
.card--16x9 .ph{ aspect-ratio:16/9; }
a.card:hover .ph{ transform:translateY(-4px); }

.card__bar{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:13px 2px 0;
  font:400 11px/1.4 var(--mono); letter-spacing:.1em;
}
.card__bar em{ font-style:normal; color:var(--ink-45); }
.card__bar strong{ font-weight:700; letter-spacing:.06em; }
.card__bar span{ color:var(--ink-45); margin-left:auto; text-align:right; }
.card__bar i{ color:var(--ink-45); transition:transform .25s ease, color .25s ease; }
a.card:hover .card__bar i{ transform:translate(2px,-2px); color:var(--accent); }

/* cards that have real cover art: caption over the image, lighten and zoom on
   hover. Cards still waiting on artwork keep the caption below the placeholder. */
.card--cover .ph::after{ display:none; }   /* no placeholder label over real art */
.card--cover .ph img{
  transition:transform .5s cubic-bezier(.2,.8,.3,1), filter .35s ease;
}
a.card--cover:hover .ph{ transform:none; }
a.card--cover:hover .ph img,
a.card--cover:focus-visible .ph img{ transform:scale(1.06); filter:brightness(1.13); }
@media (prefers-reduced-motion: reduce){
  .card--cover .ph img{ transition:filter .35s ease; }
  a.card--cover:hover .ph img{ transform:none; }
}

.card--cover .card__bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:40px 16px 14px; pointer-events:none;
  background:linear-gradient(to top,
    rgba(11,10,8,.90) 0%, rgba(11,10,8,.72) 38%, rgba(11,10,8,.30) 72%, rgba(11,10,8,0) 100%);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.card--cover .card__bar em,
.card--cover .card__bar span{ color:rgba(244,241,234,.78); }
.card--cover .card__bar strong{ color:#F4F1EA; }
.card--cover .card__bar i{ color:rgba(244,241,234,.75); }
a.card--cover:hover .card__bar i{ color:#F4F1EA; transform:translate(2px,-2px); }

.tag{
  display:inline-block; padding:4px 8px; border:1px solid var(--rule-2); border-radius:3px;
  font:700 9px/1 var(--mono); letter-spacing:.16em; color:var(--ink-70);
}
.tag--client{ border-color:var(--accent); color:var(--accent); }

/* =========================  TEXT PAGES  ===================== */
.prose{ max-width:78ch; }
.prose__lead{
  margin:0 0 clamp(34px,5vw,54px);
  font:500 clamp(19px,2.4vw,30px)/1.35 var(--sans); letter-spacing:-.018em;
  max-width:34ch;
}
.block{ padding:clamp(26px,4vw,40px) 0; border-top:1px solid var(--rule); }
.block__no{ font:400 11px/1 var(--mono); letter-spacing:.16em; color:var(--ink-45); }
.block__title{ margin:12px 0 18px; font:700 clamp(21px,3vw,32px)/1.1 var(--sans); letter-spacing:-.02em; }
.block p{ margin:0 0 15px; font-size:15.5px; line-height:1.68; color:var(--ink-70); max-width:62ch; }
.block p:last-child{ margin-bottom:0; }
.block strong{ color:var(--ink); }

.numlist{ list-style:none; margin:0; padding:0; }
.numlist li{
  display:grid; grid-template-columns:58px 1fr; gap:10px 18px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--rule);
}
.numlist li:first-child{ border-top:1px solid var(--rule); }
.numlist em{ font:400 11px/1 var(--mono); color:var(--ink-45); font-style:normal; }
.numlist b{ font:700 clamp(15px,1.8vw,19px)/1.2 var(--sans); letter-spacing:-.01em; }
.numlist span{ grid-column:2; font-size:14.5px; line-height:1.6; color:var(--ink-70); }

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.chips li{
  padding:9px 14px; border:1px solid var(--rule-2); border-radius:999px;
  font:400 12px/1 var(--mono); letter-spacing:.06em; color:var(--ink-70);
}

.bullets{ margin:0; padding-left:18px; }
.bullets li{ margin:0 0 9px; font-size:15.5px; line-height:1.6; color:var(--ink-70); }

.lnk{
  display:inline-flex; align-items:center; gap:8px; margin-top:clamp(26px,4vw,40px);
  font:700 11px/1 var(--mono); letter-spacing:.14em;
  padding-bottom:5px; border-bottom:1px solid var(--ink);
}
.lnk .arw{ transition:transform .25s ease; }
.lnk:hover .arw{ transform:translate(3px,-3px); }

/* ============================================================
   FAQ, home page only
   Plain <details> so it works with no JavaScript at all and the
   browser handles open and close, focus and keyboard for us.
   ============================================================ */
.faq{ border-top:1px solid var(--rule); }
.faq__item{ border-bottom:1px solid var(--rule); }
.faq__item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:clamp(18px,2.4vw,24px) 44px clamp(18px,2.4vw,24px) 0;
  font:700 clamp(17px,2.1vw,23px)/1.3 var(--sans); letter-spacing:-.015em;
  color:var(--ink); transition:color .2s ease;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--accent); }
.faq__item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* the plus that becomes a minus */
.faq__item summary::before,
.faq__item summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:15px; height:1.5px; background:var(--ink);
  transition:transform .28s cubic-bezier(.3,.7,.3,1);
}
.faq__item summary::before{ transform:translateY(-50%); }
.faq__item summary::after{ transform:translateY(-50%) rotate(90deg); }
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(0deg); }

.faq__item p{
  margin:0; padding:0 44px clamp(22px,2.8vw,30px) 0; max-width:64ch;
  font:400 15.5px/1.68 var(--sans); color:var(--ink-70);
}

@media (prefers-reduced-motion: reduce){
  .faq__item summary::before,
  .faq__item summary::after{ transition:none; }
}

/* ============================  CONTACT  ===================== */
.contact{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,4vw,56px); align-items:end; }
.contact__big{
  margin:0; font:800 clamp(46px,10.5vw,138px)/.9 var(--sans);
  letter-spacing:-.045em; text-transform:uppercase;
}
.contact__side p{ margin:0 0 22px; font-size:15px; line-height:1.6; color:var(--ink-70); max-width:38ch; }
.mailto{
  display:block; margin-bottom:22px;
  font:700 clamp(15px,1.9vw,22px)/1.2 var(--mono); letter-spacing:-.01em;
  word-break:break-all;
  border-bottom:1px solid var(--rule-2); padding-bottom:10px;
  transition:border-color .25s ease, color .25s ease;
}
.mailto:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================  FOOTER  ====================== */
.foot{ position:relative; z-index:2; padding:clamp(30px,5vw,48px) var(--pad); border-top:1px solid var(--rule-2); }
.foot__row{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot__row--fine{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--rule);
  font:400 10px/1.6 var(--mono); letter-spacing:.14em; color:var(--ink-45);
}
.foot__mark{ font:700 13px/1 var(--mono); letter-spacing:.1em; }
.foot__mark sup{ font-size:.6em; top:-.5em; }
.foot__nav{ display:flex; gap:22px; flex-wrap:wrap; }
.foot__nav a{ font:400 11px/1 var(--mono); letter-spacing:.14em; color:var(--ink-70); }
.foot__nav a:hover{ color:var(--accent); }

/* ==========================  RESPONSIVE  ==================== */
@media (max-width:900px){
  .card--8, .card--6, .card--4{ grid-column:span 12; }
  /* category covers stay 16:10 at every width, so one artwork size fits all */
  .card--4 .ph{ aspect-ratio:4/3; }
  .contact{ grid-template-columns:1fr; align-items:start; }
}
@media (max-width:760px){
  .head__nav, .head__cta{ display:none; }
  .burger{ display:flex; }
  .strip__mid{ display:none; }
  .card__bar span{ margin-left:0; width:100%; text-align:left; }
  .card__bar i{ margin-left:auto; }
  .numlist li{ grid-template-columns:44px 1fr; }
}

/* ============================================================
   POSTER GRID + LIGHTBOX
   ============================================================ */

.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(140px, 17vw, 230px), 1fr));
  gap:clamp(14px, 1.8vw, 28px);
  align-items:center;  /* own height, centred in its row */
}

.ptile{
  display:block; width:100%; padding:0; margin:0;
  background:none; border:0; text-align:left; cursor:zoom-in;
  font:inherit; color:inherit;
}
.ptile__frame{
  display:block;   /* spans inside a button, so they need this to lay out */
  position:relative; overflow:hidden;
  /* --ar is the poster's own ratio, written per tile, so there is no box
     around it and nothing letterboxes */
  aspect-ratio:var(--ar, 5 / 7);
  background:none; border:0;
}
.ptile__frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:filter .35s ease;
}
.ptile:hover .ptile__frame img,
.ptile:focus-visible .ptile__frame img{ filter:brightness(1.15); }

.badge{
  position:absolute; right:7px; top:7px;
  padding:4px 7px; border-radius:3px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  border:1px solid var(--rule-2);
  font:700 8.5px/1 var(--mono); letter-spacing:.14em; color:var(--ink-70);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* caption sits over the artwork, with a scrim so it reads on anything */
.badge--client{
  left:7px; right:auto;
  border-color:var(--accent); color:var(--accent);
}

.lb__tag{
  display:inline-block; margin-top:6px; padding:4px 8px; border-radius:3px;
  border:1px solid rgba(237,234,227,.45);
  font:700 9px/1 var(--mono); letter-spacing:.16em; color:rgba(237,234,227,.85);
}
.lb__tag[hidden]{ display:none; }

.ptile__bar{
  position:absolute; left:0; right:0; bottom:0; display:block;
  padding:30px 11px 10px;
  background:linear-gradient(to top,
    rgba(11,10,8,.84) 0%, rgba(11,10,8,.52) 48%, rgba(11,10,8,0) 100%);
  pointer-events:none;
}
.ptile__name{
  display:block; font:400 10.5px/1.35 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:#F4F1EA;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  overflow-wrap:anywhere;
}
.ptile__cred{
  display:block; margin-top:3px;
  font:400 9px/1.35 var(--mono); letter-spacing:.11em;
  text-transform:uppercase; color:rgba(244,241,234,.68);
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column;
  background:color-mix(in srgb, #0B0A08 96%, transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  color:#EDEAE3;
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s;
  overflow:hidden;
}
.lb.is-open{ opacity:1; visibility:visible; }
@media (prefers-reduced-motion: reduce){ .lb{ transition:none; } }

.lb__top{
  flex:0 0 auto;
  display:flex; align-items:flex-start; gap:18px;
  padding:16px clamp(14px,3vw,30px) 10px;
}
.lb__meta{ min-width:0; }
.lb__title{
  margin:0; font:700 clamp(12px,1.5vw,15px)/1.3 var(--mono);
  letter-spacing:.1em; text-transform:uppercase;
}
.lb__cred{
  margin:5px 0 0; font:400 10px/1.4 var(--mono);
  letter-spacing:.12em; text-transform:uppercase; color:rgba(237,234,227,.55);
}
.lb__cred a{ border-bottom:1px solid rgba(237,234,227,.4); }
.lb__cred a:hover{ color:#fff; border-color:#fff; }
.lb__count{
  margin-left:auto; flex:0 0 auto;
  font:400 10px/1 var(--mono); letter-spacing:.14em; color:rgba(237,234,227,.5);
  padding-top:4px;
}

.lb__stage{
  flex:1 1 auto; position:relative; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(44px,6vw,80px);
}
.lb__img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  box-shadow:0 20px 70px rgba(0,0,0,.6);
}
.lb__stage.is-loading .lb__img{ opacity:.35; }

.lb__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(237,234,227,.08); border:1px solid rgba(237,234,227,.22);
  border-radius:999px; color:#EDEAE3; font-size:16px; line-height:1;
  transition:background .2s ease, border-color .2s ease;
}
.lb__btn:hover{ background:rgba(237,234,227,.2); border-color:rgba(237,234,227,.5); }
.lb__btn--prev{ left:clamp(8px,1.6vw,22px); }
.lb__btn--next{ right:clamp(8px,1.6vw,22px); }

.lb__close{
  flex:0 0 auto; width:38px; height:38px; padding:0; cursor:pointer;
  background:none; border:1px solid rgba(237,234,227,.28); border-radius:999px;
  color:#EDEAE3; font-size:15px; line-height:1;
  transition:background .2s ease;
}
.lb__close:hover{ background:rgba(237,234,227,.18); }

.lb__foot{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
  padding:14px clamp(14px,3vw,30px) calc(14px + env(safe-area-inset-bottom));
  min-height:56px;
}
.vbtn{
  padding:9px 15px; cursor:pointer;
  background:none; border:1px solid rgba(237,234,227,.28); border-radius:999px;
  color:rgba(237,234,227,.72);
  font:700 10px/1 var(--mono); letter-spacing:.14em;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.vbtn:hover{ color:#fff; border-color:rgba(237,234,227,.6); }
.vbtn[aria-pressed="true"]{ background:#EDEAE3; border-color:#EDEAE3; color:#15140F; }

.lb__hint{
  width:100%; text-align:center; margin:0;
  font:400 9px/1.5 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(237,234,227,.35);
}
@media (hover: none){ .lb__hint--keys{ display:none; } }
@media (hover: hover){ .lb__hint--touch{ display:none; } }

@media (max-width:620px){
  .lb__stage{ padding:0 10px; }
  .lb__btn{ display:none; }
}
@media (max-height:620px){ .lb__hint{ display:none; } }

/* ====================  CASE STUDY  ==========================
   Used by the branding project pages. The spine is Problem,
   Insight, Solution, the same one Corey uses in his PDF
   portfolio, then named sections of images.
   ========================================================== */

.cs{ padding:0 var(--pad) clamp(40px,7vh,80px); }

/* --- header ------------------------------------------------ */
.cs__line{
  margin:clamp(14px,2vw,20px) 0 0;
  font:400 clamp(20px,2.7vw,32px)/1.28 var(--sans);
  letter-spacing:-.01em; color:var(--ink-70); max-width:24ch;
}
.cs__meta{
  display:flex; flex-wrap:wrap; gap:0 clamp(28px,5vw,64px);
  margin:clamp(26px,4vw,42px) 0 0; padding:0;
  border-top:1px solid var(--rule); padding-top:16px;
}
.cs__meta div{ min-width:0; }
.cs__meta dt{
  font:400 10px/1 var(--mono); letter-spacing:.2em;
  color:var(--ink-45); margin:0 0 7px;
}
.cs__meta dd{
  margin:0; font:400 13px/1.5 var(--mono); letter-spacing:.04em; color:var(--ink);
}

/* --- problem / insight / solution --------------------------- */
.cs__spine{
  display:grid; gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  margin:clamp(40px,6vw,70px) 0 0;
}
.cs__step{
  border-top:1px solid var(--ink); padding-top:15px;
}
.cs__step h2{
  margin:0 0 10px;
  font:700 10px/1 var(--mono); letter-spacing:.2em; color:var(--ink);
}
.cs__step p{
  margin:0; font:400 15.5px/1.68 var(--sans); color:var(--ink-70);
}

/* --- skills and tools --------------------------------------- */
.cs__kit{
  display:flex; flex-wrap:wrap; gap:clamp(26px,5vw,60px);
  margin:clamp(34px,5vw,56px) 0 0;
}
.cs__kit section{ flex:1 1 260px; min-width:0; }
.cs__kit h2{
  margin:0 0 12px;
  font:400 10px/1 var(--mono); letter-spacing:.2em; color:var(--ink-45);
}
.cs__tags{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0; }
.cs__tags li{
  padding:6px 11px; border:1px solid var(--rule-2); border-radius:999px;
  font:400 10.5px/1 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-70);
}

/* --- a named section of images ------------------------------ */
.cs__sect{ margin:clamp(56px,9vh,104px) 0 0; }
.cs__sect > h2{
  margin:0 0 clamp(16px,2.4vw,26px);
  display:flex; align-items:baseline; gap:14px;
  font:700 11px/1 var(--mono); letter-spacing:.16em; color:var(--ink);
}
.cs__sect > h2 em{ font-style:normal; color:var(--ink-45); font-weight:400; }
.cs__note{
  margin:0 0 clamp(18px,2.6vw,28px);
  font:400 15.5px/1.68 var(--sans); color:var(--ink-70); max-width:62ch;
}

.cs__row{ display:grid; gap:clamp(12px,1.6vw,22px); }
.cs__row + .cs__row{ margin-top:clamp(12px,1.6vw,22px); }
.cs__row--2{ grid-template-columns:repeat(2,1fr); }
.cs__row--3{ grid-template-columns:repeat(3,1fr); }

/* Some artwork is small at source, a phone screenshot or a poster shot on a
   phone. Rather than blow it up to fill the page and go soft, the row itself
   gets narrower and stays centred. --mid holds a pair, --slim holds one. */
.cs__row--mid{ max-width:820px; margin-left:auto; margin-right:auto; }
.cs__row--slim{ max-width:520px; margin-left:auto; margin-right:auto; }

/* a video sitting in the page rather than on a cover card. It carries a
   title bar like the images do, but it is not in the lightbox, so its
   explanation goes in the section note above it. */
.shot--video{ position:relative; overflow:hidden; }
.shot--video video{
  width:100%; height:auto; display:block; background:#0B0A08;
}

.shot{ margin:0; }
.shot .ph{ aspect-ratio:var(--ar, 16/10); }
.shot img{ width:100%; height:auto; display:block; background:var(--card); }
.shot figcaption{
  margin:9px 0 0;
  font:400 11px/1.5 var(--mono); letter-spacing:.06em; color:var(--ink-45);
}

/* --- foot of the page --------------------------------------- */
.cs__next{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:16px; margin:clamp(56px,9vh,104px) 0 0;
  border-top:1px solid var(--rule); padding-top:20px;
}
.cs__next a{
  font:700 clamp(18px,2.4vw,28px)/1.2 var(--sans); letter-spacing:-.01em; color:var(--ink);
}
.cs__next a:hover{ color:var(--accent); }
.cs__next span{ font:400 10px/1 var(--mono); letter-spacing:.2em; color:var(--ink-45); }

@media (max-width:760px){
  .cs__row--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:540px){
  .cs__row--2,
  .cs__row--3{ grid-template-columns:1fr; }
  .cs__meta{ gap:22px 34px; }
}

/* a 16:9 box for a video, whether that is a file of Corey's own or an
   embed from somewhere else. preload="none" on the video, or loading="lazy"
   on an iframe, keeps it from downloading until someone wants it. */
.embed{
  position:relative; aspect-ratio:var(--ar, 16/9);
  background:#0B0A08; overflow:hidden;
}
.embed iframe,
.embed video{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block;
}

/* the same foot-of-page button, stacked and centred */
.cs__cta--center{
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:12px;
}
.cs__cta--center small{ max-width:44ch; }

/* a button that belongs to one section rather than the whole page, so it
   sits under that section's images with no rule above it */
.cs__cta--inline{
  margin:clamp(20px,2.6vw,30px) 0 0;
  padding-top:0; border-top:0;
}

/* the "see the full deliverables" button at the foot of a case study */
.cs__cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin:clamp(46px,7vh,84px) 0 0;
  padding-top:22px; border-top:1px solid var(--rule);
}
.cs__cta small{
  font:400 10.5px/1.5 var(--mono); letter-spacing:.1em; color:var(--ink-45);
}

/* ==================  PROJECT CARDS, BRANDING AND OTHER  ==================
   These two sections list projects rather than a grid of artwork. Their
   covers rest in greyscale and come back to almost full colour on hover,
   keeping the lighten and zoom the other cards already have.
   Covers are 16:9 here because that is the shape Corey exports.
   ======================================================================= */

/* Covers on the project index pages are 16:9, the shape Corey exports.
   The greyscale below is deliberately NOT tied to that grid, because the
   work page and the home page use the same treatment on 16:10 category
   cards. Anything that is a .card--cover gets it. */
.grid--projects .ph{ aspect-ratio:16/9; }

.card--cover .ph img,
.card--cover .ph video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.3,1), filter .4s ease;
}

/* only where hovering is a real thing. Touch devices get full colour, below. */
@media (hover: hover){
  .card--cover .ph img,
  .card--cover .ph video{ filter:grayscale(1); }

  a.card--cover:hover .ph img,
  a.card--cover:focus-visible .ph img,
  a.card--cover:hover .ph video,
  a.card--cover:focus-visible .ph video{
    transform:scale(1.06);
    filter:grayscale(.2) brightness(1.13);
  }
}

/* no hover, no reveal: show the work in colour straight away */
@media (hover: none){
  .card--cover .ph img,
  .card--cover .ph video{ filter:none; }
}

@media (prefers-reduced-motion: reduce){
  a.card--cover:hover .ph img,
  a.card--cover:hover .ph video{ transform:none; }
}

/* a cover that is a video sits on top of its poster image */
/* A cover that is a video sits on top of its static image. The video is only
   visible while it is actually playing: once a video has buffered, the element
   keeps painting its own first frame rather than falling back to the poster,
   so hiding it is what returns the card to the still on mouse out. */
.ph--video{ position:relative; }
.ph--video video{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .28s ease,
             transform .5s cubic-bezier(.2,.8,.3,1),
             filter .4s ease;
}
.ph--video video.is-playing{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .ph--video video{ transition:opacity .28s ease, filter .4s ease; }
}

/* a case study image that opens in the lightbox. The title sits on the image
   permanently, same scrim and mono caps as the poster tiles. */
.shot__btn{
  display:block; width:100%; padding:0; margin:0;
  position:relative; overflow:hidden;
  border:0; background:none; cursor:zoom-in;
}
.shot__btn img{ transition:filter .3s ease; }
.shot__btn:hover img,
.shot__btn:focus-visible img{ filter:brightness(1.06); }

.shot__bar{
  position:absolute; left:0; right:0; bottom:0; display:block;
  padding:34px 13px 11px; pointer-events:none; text-align:left;
  background:linear-gradient(to top,
    rgba(11,10,8,.84) 0%, rgba(11,10,8,.52) 48%, rgba(11,10,8,0) 100%);
}
.shot__name{
  display:block; font:400 10.5px/1.35 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:#F4F1EA;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  overflow-wrap:anywhere;
}

/* the short explanation under the title in the viewer */
.lb__desc{
  margin:9px 0 0; max-width:54ch;
  font:400 14px/1.6 var(--sans); color:rgba(237,234,227,.72);
}
.lb__desc[hidden]{ display:none; }
@media (max-width:720px){
  .lb__desc{ font-size:13px; max-width:none; }
}
@media (max-height:620px){ .lb__desc{ display:none; } }

/* ============================================================
   ENQUIRY POPUP
   Built by enquiry.js. The buttons are plain mailto links until
   the script upgrades them, so none of this exists without it.
   ============================================================ */
.enq{
  width:min(640px, calc(100vw - 2 * var(--pad)));
  max-height:min(88svh, 780px);
  padding:0; border:1px solid var(--ink); border-radius:14px;
  background:var(--paper); color:var(--ink);
  box-shadow:0 30px 80px rgba(11,10,8,.22);
}
.enq::backdrop{ background:rgba(11,10,8,.62); }
.enq[open]{ animation:enqIn .3s cubic-bezier(.2,.8,.3,1); }
@keyframes enqIn{ from{ opacity:0; transform:translateY(10px) scale(.985); } }

.enq__form{
  position:relative; display:block;
  padding:clamp(26px,4vw,40px);
  max-height:inherit; overflow-y:auto;
}

.enq__close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; padding:0; line-height:1;
  border:1px solid var(--rule-2); border-radius:999px;
  background:transparent; color:var(--ink); cursor:pointer; font-size:13px;
  transition:background .2s ease, color .2s ease;
}
.enq__close:hover{ background:var(--ink); color:var(--paper); }

.enq__kicker{
  display:block; font:400 10px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-45); margin:0 0 12px;
}
.enq__title{
  margin:0; font:800 clamp(26px,4.4vw,40px)/1 var(--sans);
  letter-spacing:-.03em; text-transform:uppercase;
}
.enq__note{
  margin:12px 0 clamp(22px,3vw,30px);
  font:400 15px/1.6 var(--sans); color:var(--ink-70);
}

.enq__row{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
.enq__field{ display:block; margin:0 0 14px; min-width:0; }
.enq__row .enq__field{ margin-bottom:0; }
.enq__row + .enq__field,
.enq__field + .enq__row{ margin-top:14px; }

.enq__field > span{
  display:block; margin:0 0 7px;
  font:400 10px/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-45);
}
.enq__field > span i{ font-style:normal; margin-left:5px; opacity:.62; letter-spacing:.1em; }

.enq input,
.enq textarea{
  display:block; width:100%; margin:0;
  padding:12px 13px; border:1px solid var(--rule-2); border-radius:8px;
  background:rgba(255,255,255,.42); color:var(--ink);
  font:400 15px/1.5 var(--sans); resize:vertical;
  transition:border-color .2s ease, background .2s ease;
}
.enq input::placeholder,
.enq textarea::placeholder{ color:var(--ink-45); }
.enq input:hover,
.enq textarea:hover{ border-color:var(--ink-45); }
.enq input:focus,
.enq textarea:focus{
  outline:none; border-color:var(--ink); background:rgba(255,255,255,.72);
}
.enq input:focus-visible,
.enq textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.enq__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin:clamp(22px,3vw,30px) 0 0; padding-top:20px;
  border-top:1px solid var(--rule);
}
.enq__foot small{
  font:400 10.5px/1.5 var(--mono); letter-spacing:.08em; color:var(--ink-45);
  max-width:34ch;
}
.enq__send{ cursor:pointer; }

@media (max-width:520px){
  .enq__row{ grid-template-columns:1fr; }
  .enq__row .enq__field + .enq__field{ margin-top:14px; }
}
@media (prefers-reduced-motion: reduce){
  .enq[open]{ animation:none; }
}