/* =========================================================
   ASIA NICOLE STUDIO — Swiss / film
   ========================================================= */

:root {
  --cream: #FAF5EA;
  --paper: #F2EBDC;
  --ink: #161111;
  --ink-2: #4a4140;
  --red: #FF9500;        /* signature colour: bright orange (was red #E8231B, before that deep #8A1A10) */
  --red-deep: #C46A00;   /* burnt orange */
  --red-hot: #FFAA2E;    /* bright accent */
  --red-pale: #FFE4C2;
  --edge: #E2531E;       /* film edge-code orange-red */
  --hair: 1px solid var(--ink);
  --hair-red: 1px solid var(--red);

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Letter Gothic Std", "Letter Gothic", "LetterGothicStd", "DM Mono", ui-monospace, monospace;

  --gut: clamp(16px, 2.2vw, 32px);
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}
body.loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
::selection { background: var(--red); color: var(--cream); }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 400;
}
.dim { opacity: .45; }
.right { text-align: right; justify-self: end; }

/* 12-col swiss row */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gut);
  padding: 0 var(--gut);
}

/* ---------- grain ---------- */
#grain {
  position: fixed; inset: -100%;
  width: 300%; height: 300%;
  pointer-events: none; z-index: 900;
  opacity: .085;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- grid overlay ---------- */
#grid-overlay {
  position: fixed; inset: 0;
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gut); padding: 0 var(--gut);
  pointer-events: none; z-index: 1;
  opacity: .07; transition: opacity .5s;
}
#grid-overlay i { border-left: var(--hair-red); border-right: var(--hair-red); }
body.grid-on #grid-overlay { opacity: .45; z-index: 800; }

/* ---------- cursor ---------- */
@media (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
}
#cursor, #cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1000; }
#cursor {
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--red);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), background .25s;
}
#cursor-ring { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
#cursor-ring svg { width: 100%; height: 100%; overflow: visible; }
#cursor-ring path { fill: none; stroke: var(--red); stroke-width: .8; vector-effect: non-scaling-stroke; transition: fill .3s; }
.cursor-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6);
  color: var(--cream); opacity: 0; transition: opacity .25s, transform .35s var(--ease-out);
  font-size: 10px; white-space: nowrap;
}
html.cursor-hover #cursor { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
html.cursor-label-on #cursor { opacity: 0; }
html.cursor-label-on #cursor-ring path { fill: var(--red); }
html.cursor-label-on .cursor-label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
html.cursor-down #cursor { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
body.on-red #cursor { background: var(--cream); }
body.on-red #cursor-ring path { stroke: var(--cream); }
body.on-red.cursor-label-on #cursor-ring path { fill: var(--cream); }
body.on-red .cursor-label { color: var(--red); }
#cursor-ring, #cursor { opacity: 0; }
html.has-cursor #cursor-ring, html.has-cursor #cursor { opacity: 1; }

/* ---------- logo mark ---------- */
.logo-mark {
  font-family: var(--sans); font-weight: 400;
  display: inline-flex; align-items: baseline;
  line-height: 1; letter-spacing: 0;
}
.logo-mark .la, .logo-mark .ln, .logo-mark .ld { display: inline-block; }

/* ---------- nav ---------- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut);
  align-items: center;
  padding: 14px var(--gut);
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--hair);
  transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s;
}
#nav.hide { transform: translateY(-100%); }
body.on-red #nav { background: color-mix(in srgb, var(--red) 85%, transparent); color: var(--cream); border-color: rgba(250, 245, 234, .5); }
body.on-red #nav .ld { color: var(--cream); }
.nav-logo { grid-column: 1 / 2; }
.nav-name { grid-column: 2 / 5; }
.nav-links { grid-column: 5 / 11; display: flex; gap: clamp(14px, 2.4vw, 40px); }
.nav-links a {
  position: relative; font-size: 15px; letter-spacing: -0.03em; font-weight: 400;
  transition: font-weight .2s;
}
.nav-links a sup { font-size: 8px; margin-right: 3px; vertical-align: top; opacity: .6; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.active { font-weight: 700; color: var(--red); }
body.on-red .nav-links a.active { color: var(--cream); }
.nav-meta { grid-column: 11 / 13; display: flex; flex-direction: column; align-items: flex-end; }
.nav-meta .fr b { color: var(--red); font-weight: 500; }
body.on-red .nav-meta .fr b { color: var(--cream); }

/* ---------- pages ---------- */
#app { position: relative; z-index: 2; }
.page { display: none; padding-top: 74px; min-height: 100vh; }
.page.active { display: block; }
.page.red { background: var(--red); color: var(--cream); }


/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-img { background: transparent; }
.reveal-img > img, .reveal-img > video {
  clip-path: inset(0 0 100% 0); transform: scale(1.18);
  transition: clip-path 1.3s var(--ease), transform 1.8s var(--ease-out);
}
.reveal-img.in > img, .reveal-img.in > video { clip-path: inset(0 0 0 0); transform: scale(1); }
.reveal-img { overflow: hidden; }
.reveal-img .edge { position: absolute; bottom: 8px; left: 10px; color: var(--edge); }
.hairline { height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.hairline.in { transform: scaleX(1); }
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.in .line-mask > span, .line-mask.in > span { transform: none; }

/* ---------- film frame ---------- */
.frame { position: relative; background: var(--ink); }
.frame::before, .frame::after {
  content: ""; position: absolute; width: 14px; height: 14px; z-index: 2; pointer-events: none;
  border-color: var(--cream); border-style: solid; opacity: 0; transition: opacity .3s, inset .4s var(--ease-out);
}
.frame::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.frame::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.frame:hover::before { opacity: 1; top: 16px; left: 16px; }
.frame:hover::after { opacity: 1; bottom: 16px; right: 16px; }
.edge { position: absolute; left: 0; bottom: -20px; color: var(--edge); font-size: 10px; white-space: nowrap; }

/* ================= HOME ================= */
.hero { position: relative; padding-top: 22px; min-height: calc(100vh - 74px); display: flex; flex-direction: column; }
.hero-top { padding-bottom: 14px; border-bottom: var(--hair); }
.hero-top .c1 { grid-column: 1 / 4; }
.hero-top .c2 { grid-column: 4 / 7; }
.hero-top .c3 { grid-column: 7 / 10; }
.hero-top .c4 { grid-column: 10 / 13; text-align: right; }
.hero-title {
  font-weight: 700; color: var(--red);
  font-size: clamp(84px, 21.5vw, 420px);
  line-height: .78; letter-spacing: -0.075em;
  padding: 2vw var(--gut) 0;
  margin-left: -0.04em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line.indent { padding-left: 16.6%; }
.hero-title .press { display: inline-block; }
.wfield .ch { display: inline-block; transition: font-weight .12s; will-change: font-weight; }
.hero-title .line > span { transform: translateY(105%); transition: transform 1.3s var(--ease); }
.hero.in .hero-title .line > span { transform: none; }
.hero.in .hero-title .line:nth-child(2) > span { transition-delay: .12s; }

.hero-bottom { margin-top: auto; padding-top: 28px; padding-bottom: 46px; align-items: end; }
.hero-intro { grid-column: 1 / 5; font-size: 17px; line-height: 1.32; letter-spacing: -0.02em; }
.hero-intro .label { display: block; color: var(--red); margin-bottom: 10px; }
.hero-scroll { grid-column: 11 / 13; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-line { width: 1px; height: 64px; background: var(--ink); position: relative; overflow: hidden; }
.scroll-line::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--red); animation: scroll-run 1.8s var(--ease) infinite; }
@keyframes scroll-run { to { top: 100%; } }


/* blocks */
.block { padding: clamp(72px, 10vw, 150px) 0 0; }
.block-head { align-items: end; padding-bottom: 14px; border-bottom: var(--hair); }
.block-head > .mono:first-child { grid-column: 1 / 3; align-self: start; padding-top: 8px; }
.section-title { grid-column: 3 / 10; font-size: clamp(40px, 6.4vw, 104px); font-weight: 700; letter-spacing: -0.06em; line-height: .86; color: var(--red); cursor: default; }
.block-head .right { grid-column: 10 / 13; }

/* index list */
.index-list { list-style: none; }
.index-row { border-bottom: var(--hair); position: relative; overflow: hidden; }
.index-row a {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut);
  padding: 22px var(--gut) 18px; align-items: baseline; position: relative; z-index: 1;
  transition: color .5s var(--ease);
}
.index-row::before {
  content: ""; position: absolute; inset: 0; background: var(--red);
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease);
}
.index-row:hover::before { transform: scaleY(1); }
.index-row:hover a { color: var(--cream); }
.index-row .ix-n { grid-column: 1 / 3; }
.index-row .ix-t {
  grid-column: 3 / 9; font-size: clamp(34px, 5.4vw, 92px); font-weight: 300;
  letter-spacing: -0.06em; line-height: .9; transition: font-weight .3s, letter-spacing .6s var(--ease);
}
.index-row:hover .ix-t { font-weight: 700; letter-spacing: -0.07em; }
.index-row .ix-r { grid-column: 9 / 11; }
.index-row .ix-y { grid-column: 11 / 12; }
.index-row .ix-a { grid-column: 12 / 13; justify-self: end; font-size: 22px; transition: transform .5s var(--ease); }
.index-row:hover .ix-a { transform: rotate(-45deg); }


/* statement */
.statement-block .row { align-items: start; }
.c-label { grid-column: 1 / 3; color: var(--red); padding-top: 10px; }
.statement {
  grid-column: 3 / 12; font-size: clamp(30px, 4.3vw, 72px);
  letter-spacing: -0.055em; line-height: 1.02;
}
.statement .w { display: inline; font-weight: 200; color: rgba(22, 17, 17, .25); transition: color .4s, font-weight .25s; }
.statement .w.on { font-weight: 700; color: var(--red); }
.statement .w.on.ink { color: var(--ink); font-weight: 400; }

/* teaser */
.archive-teaser { padding-bottom: clamp(72px, 10vw, 150px); }
.teaser-link {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0 var(--gut); padding: 40px 0; border-top: var(--hair); border-bottom: var(--hair);
}
.teaser-title { font-size: clamp(64px, 15vw, 280px); font-weight: 700; letter-spacing: -0.075em; line-height: .8; color: var(--red); }
.teaser-title .arrow { display: inline-block; font-weight: 200; transition: transform .7s var(--ease); }
.teaser-link:hover .arrow { transform: translateX(.2em); }

/* ================= WORK ================= */
.page-head { padding-top: 22px; padding-bottom: 16px; border-bottom: var(--hair); align-items: end; }
.page-head > .mono:first-child { grid-column: 1 / 3; align-self: start; }
.page-title {
  grid-column: 3 / 10; font-size: clamp(80px, 17vw, 320px); font-weight: 700;
  color: var(--red); letter-spacing: -0.075em; line-height: .78; cursor: default;
}
.page-head .right { grid-column: 10 / 13; }

.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); row-gap: 90px; padding: 60px var(--gut) 140px; }
.work-card { display: block; position: relative; }
.work-card:nth-child(4n+1) { grid-column: 1 / 8; }
.work-card:nth-child(4n+2) { grid-column: 9 / 13; margin-top: 18vw; }
.work-card:nth-child(4n+3) { grid-column: 3 / 9; }
.work-card:nth-child(4n+4) { grid-column: 9 / 13; margin-top: 8vw; }
.work-card .frame { aspect-ratio: 16 / 10; overflow: hidden; }
.work-card .frame img { transition: transform 1.2s var(--ease-out), filter .6s; }
.work-card:hover .frame img { transform: scale(1.04); }
.wc-meta { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding-top: 30px; border-top: var(--hair); margin-top: 10px; align-items: baseline; }
.wc-title { font-size: clamp(28px, 3.6vw, 60px); letter-spacing: -0.06em; font-weight: 300; line-height: .9; transition: font-weight .3s, color .3s; }
.work-card:hover .wc-title { font-weight: 700; color: var(--red); }
.wc-nodeck { aspect-ratio: 16 / 10; background: var(--red); color: var(--cream); display: grid; place-items: center; overflow: hidden; }
.wc-nodeck span { font-size: clamp(60px, 10vw, 180px); font-weight: 700; letter-spacing: -0.08em; line-height: .8; color: var(--red); text-shadow: -.012em -.012em .008em rgba(255, 215, 205, .38), .016em .016em .02em rgba(25, 0, 0, .6); }

/* ================= PROJECT ================= */
.pj { position: relative; padding-left: 64px; }
.pj-rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: 64px; z-index: 3;
  border-right: var(--hair); display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 90px 0 24px; background: var(--cream);
}
.pj-rail .num { font-size: 40px; font-weight: 300; letter-spacing: -0.05em; writing-mode: vertical-rl; transform: rotate(180deg); }
.pj-rail .vt { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 40px; letter-spacing: -0.05em; font-weight: 400; white-space: nowrap; line-height: 1; }
.pj-head { padding: 22px var(--gut) 0; }
.pj-kicker { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: var(--hair); }
.pj-title {
  font-size: clamp(64px, 12.5vw, 240px); font-weight: 700; color: var(--red);
  letter-spacing: -0.075em; line-height: .8; padding: 3vw 0 2vw; cursor: default;
}
.pj-meta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--hair); }
.pj-meta div { padding: 12px 14px 18px 0; border-right: var(--hair); }
.pj-meta div + div { padding-left: 14px; }
.pj-meta div:last-child { border-right: 0; }
.pj-meta dt { color: var(--red); margin-bottom: 8px; }
.pj-meta dd { font-size: 17px; letter-spacing: -0.03em; }
.pj-hero { margin: 40px var(--gut) 0; }
.pj-hero img { height: auto; }
.pj-text { padding: 110px 0 80px; }
.pj-text .row { margin-bottom: 70px; align-items: start; }
.pj-text .lbl { grid-column: 1 / 4; color: var(--red); }
.pj-text p.big { grid-column: 4 / 12; font-size: clamp(22px, 2.3vw, 38px); line-height: 1.12; letter-spacing: -0.04em; }
.pj-text p.mono { grid-column: 4 / 10; font-size: 13px; text-transform: none; line-height: 1.6; }
.pj-gallery { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); row-gap: 80px; padding: 0 var(--gut) 60px; }
.pj-gallery figure { position: relative; }
.pj-gallery figure img { height: auto; }
.pj-gallery figure:nth-child(3n+1) { grid-column: 1 / 13; }
.pj-gallery figure:nth-child(3n+2) { grid-column: 1 / 9; }
.pj-gallery figure:nth-child(3n) { grid-column: 5 / 13; }
.pj-list { padding: 0 var(--gut) 60px; }
.pj-list li { list-style: none; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: 20px 0; border-bottom: var(--hair); align-items: baseline; }
.pj-list li .mono:first-child { grid-column: 1 / 3; color: var(--red); }
.pj-list li h4 { grid-column: 3 / 8; font-size: clamp(22px, 2.6vw, 40px); font-weight: 400; letter-spacing: -0.05em; line-height: 1; }
.pj-list li p { grid-column: 8 / 13; text-transform: none; }
.pj-credits { padding: 14px var(--gut); border-top: var(--hair); border-bottom: var(--hair); margin: 0 var(--gut); display: flex; gap: 40px; flex-wrap: wrap; }
.pj-next { display: block; padding: 70px var(--gut) 100px; }
.pj-next .mono { display: block; margin-bottom: 18px; }
.pj-next .t { font-size: clamp(56px, 11vw, 200px); letter-spacing: -0.075em; font-weight: 200; line-height: .8; transition: font-weight .35s, color .35s; }
.pj-next:hover .t { font-weight: 700; color: var(--red); }

/* ================= ARCHIVE (contact sheet) ================= */
.filters { display: flex; flex-wrap: wrap; gap: 0; padding: 0 var(--gut); border-bottom: var(--hair); }
.filters button {
  padding: 16px 22px 14px 0; margin-right: 22px; position: relative;
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
}
.filters button sup { color: var(--red); font-size: 8px; margin-left: 2px; }
.filters button::after { content: ""; position: absolute; left: 0; right: 22px; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.filters button.active::after { transform: scaleX(1); }
.filters button.active { color: var(--red); }

.sheet {
  background: var(--ink); margin: 40px var(--gut) 120px; padding: 44px 32px 30px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 46px 14px;
  position: relative;
}
.sheet::before, .sheet::after {
  content: "ANS 400 ▸ CONTACT SHEET ▸ ASIA NICOLE STUDIO ▸ ANS 400 ▸ CONTACT SHEET ▸ ASIA NICOLE STUDIO ▸ ANS 400 ▸ CONTACT SHEET";
  position: absolute; left: 32px; right: 32px; overflow: hidden; white-space: nowrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: .3em; color: var(--edge);
}
.sheet::before { top: 14px; }
.sheet::after { bottom: 8px; opacity: .5; }
.shot { position: relative; cursor: pointer; opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.shot.in { opacity: 1; transform: none; }
.shot .im { aspect-ratio: 2 / 3; overflow: hidden; background: #2a2424; }
.shot img { transition: transform .9s var(--ease-out), filter .5s; filter: grayscale(.15); }
.shot:hover img { transform: scale(1.06); filter: none; }
.shot .no { display: flex; justify-content: space-between; color: rgba(250, 245, 234, .55); font-size: 9px; padding-top: 6px; }
.shot .no b { color: var(--edge); font-weight: 400; }
.shot svg.circle { position: absolute; inset: -14px -12px 6px; width: calc(100% + 24px); height: calc(100% + 8px); pointer-events: none; overflow: visible; }
.shot svg.circle path { fill: none; stroke: var(--red-hot); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease); }
.shot.sel svg.circle path { stroke-dashoffset: 0; }
.shot:hover svg.circle path { stroke-dashoffset: 0; }
.shot .x { position: absolute; top: 8px; right: 8px; color: var(--red-hot); font-family: var(--mono); font-size: 18px; opacity: 0; transform: scale(.4) rotate(-20deg); transition: .4s var(--ease-out); }
.shot.sel .x { opacity: 1; transform: none; }

/* lightbox */
#lightbox {
  position: fixed; inset: 0; z-index: 1200; background: rgba(22, 17, 17, .96); color: var(--cream);
  display: grid; grid-template-rows: auto 1fr auto; opacity: 0; pointer-events: none; transition: opacity .4s;
}
#lightbox.on { opacity: 1; pointer-events: auto; }
#lightbox .lb-top, #lightbox .lb-bot { display: flex; justify-content: space-between; padding: 16px var(--gut); }
#lightbox .lb-img { display: grid; place-items: center; padding: 0 var(--gut); min-height: 0; }
#lightbox img { width: auto; height: auto; max-width: 100%; max-height: 78vh; object-fit: contain; }
#lightbox button { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--cream); }
#lightbox .lb-code { color: var(--edge); }

/* ================= ABOUT ================= */
.about-top { padding-top: 60px; align-items: start; }
.about-portrait { grid-column: 1 / 6; aspect-ratio: 4 / 5; }
.about-lead { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 36px; }
.lead { font-size: clamp(26px, 3vw, 50px); letter-spacing: -0.05em; line-height: 1.02; font-weight: 400; }
.lead em { font-style: normal; color: var(--red); font-weight: 700; }
.about-lead .body { text-transform: none; font-size: 13px; line-height: 1.6; max-width: 56ch; }

.facts { padding: 0 var(--gut); }
.fact {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut);
  padding: 18px 0 16px; border-bottom: var(--hair); align-items: center; position: relative;
}
.fact .ic { grid-column: 1 / 2; width: 28px; height: 28px; color: var(--red); }
.fact .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease-out); }
.fact:hover .ic svg { transform: rotate(-12deg) scale(1.15); }
.fact dt { grid-column: 2 / 5; }
.fact dd { grid-column: 5 / 13; font-size: clamp(18px, 1.8vw, 28px); letter-spacing: -0.04em; line-height: 1.1; transition: font-weight .25s, color .25s; }
.fact:hover dd { font-weight: 700; color: var(--red); }
.fact dd small { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; opacity: .55; margin-left: 10px; font-weight: 400; color: var(--ink); }

.polaroids { position: relative; height: clamp(520px, 52vw, 760px); margin: 0 var(--gut); border-bottom: var(--hair); overflow: hidden; }
.pol {
  position: absolute; width: clamp(150px, 17vw, 250px); background: #fffdf7; padding: 10px 10px 34px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 14px 30px -12px rgba(60, 20, 10, .35);
  touch-action: none; user-select: none; transition: box-shadow .3s, scale .3s;
}
.pol .im { aspect-ratio: 1; overflow: hidden; background: #ddd; }
.pol img { pointer-events: none; }
.pol span { position: absolute; left: 12px; bottom: 10px; color: var(--ink); font-size: 10px; }
.pol span b { color: var(--red); font-weight: 400; }
.pol.drag { box-shadow: 0 2px 2px rgba(0, 0, 0, .08), 0 30px 50px -16px rgba(60, 20, 10, .45); scale: 1.04; z-index: 50; }
.sticker {
  position: absolute; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  background: var(--red); color: var(--cream); padding: 7px 10px 6px; border-radius: 99px; touch-action: none; user-select: none;
}
.sticker.o { background: transparent; color: var(--red); border: 1px solid var(--red); }

.cv { list-style: none; padding: 0 var(--gut) 140px; }
.cv li { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); padding: 18px 0; border-bottom: var(--hair); align-items: baseline; transition: padding .5s var(--ease); }
.cv li:hover { padding-left: 14px; }
.cv .d { grid-column: 1 / 3; color: var(--red); }
.cv h4 { grid-column: 3 / 8; font-size: clamp(20px, 2vw, 32px); letter-spacing: -0.045em; font-weight: 400; line-height: 1.02; transition: font-weight .25s; }
.cv li:hover h4 { font-weight: 700; }
.cv .p { grid-column: 8 / 11; }
.cv .k { grid-column: 11 / 13; text-align: right; opacity: .55; }
.link { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ================= CONTACT ================= */
.contact-wrap { min-height: calc(100vh - 74px); display: flex; flex-direction: column; padding-bottom: 50px; }
.contact-top { padding-top: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(250, 245, 234, .6); }
.contact-top span:nth-child(1) { grid-column: 1 / 4; }
.contact-top span:nth-child(2) { grid-column: 4 / 9; }
.contact-top span:nth-child(3) { grid-column: 10 / 13; text-align: right; }
.contact-title {
  font-size: clamp(64px, 13vw, 260px); font-weight: 700; letter-spacing: -0.075em; line-height: .8;
  padding: 5vw var(--gut) 0; cursor: default;
}
.contact-mail {
  margin: auto var(--gut) 0; padding: 30px 0 16px; border-bottom: 1px solid rgba(250, 245, 234, .6);
  font-size: clamp(26px, 5.4vw, 96px); letter-spacing: -0.06em; font-weight: 200; line-height: 1;
  transition: font-weight .35s;
}
.contact-mail:hover { font-weight: 700; }
.contact-links { padding-top: 16px; }
.contact-links a:nth-child(1) { grid-column: 1 / 4; }
.contact-links a:nth-child(2) { grid-column: 4 / 7; }
.contact-links a:nth-child(3) { grid-column: 7 / 10; }
.contact-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ================= FOOTER ================= */
#footer { position: relative; z-index: 4; border-top: var(--hair); overflow: hidden; background: var(--cream); }
body.on-red #footer { background: var(--red); color: var(--cream); border-color: rgba(250, 245, 234, .5); }
body.on-red #footer .ld { color: var(--cream); }
.foot-row { padding-top: 16px; padding-bottom: 16px; }
.foot-row > :nth-child(1) { grid-column: 1 / 4; }
.foot-row > :nth-child(2) { grid-column: 4 / 8; }
.foot-row > :nth-child(3) { grid-column: 9 / 11; justify-self: start; }
.foot-row > :nth-child(4) { grid-column: 11 / 13; justify-self: end; }
.foot-logo {
  display: flex; font-size: 46vw; line-height: .9; padding: 0 var(--gut); margin: -0.06em 0 -0.12em;
  letter-spacing: -0.02em; white-space: nowrap;
}
.foot-logo span { transition: font-weight .15s; }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .nav-name, .nav-meta { display: none; }
  #nav { display: flex; justify-content: space-between; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13px; }
  .nav-links a sup { display: none; }
  .hero-top .c2, .hero-top .c3 { display: none; }
  .hero-top .c1 { grid-column: 1 / 7; }
  .hero-top .c4 { grid-column: 7 / 13; }
  .hero-title .line.indent { padding-left: 8%; }
  .hero-intro { grid-column: 1 / 13; margin-bottom: 40px; }
  .hero-reel { grid-column: 1 / 13; }
  .hero-scroll { display: none; }
  .section-title, .page-title { grid-column: 1 / 13; order: 2; margin-top: 18px; }
  .block-head .right, .page-head .right { grid-column: 1 / 13; justify-self: start; text-align: left; order: 3; margin-top: 10px; }
  .index-row .ix-t { grid-column: 1 / 13; order: 2; margin: 8px 0; }
  .index-row .ix-n { grid-column: 1 / 7; }
  .index-row .ix-r { grid-column: 1 / 7; order: 3; }
  .index-row .ix-y { grid-column: 7 / 11; order: 3; }
  .index-row .ix-a { order: 3; }
  .c-label { grid-column: 1 / 13; margin-bottom: 18px; }
  .statement { grid-column: 1 / 13; }
  .work-card { grid-column: 1 / 13 !important; margin-top: 0 !important; }
  .pj { padding-left: 0; }
  .pj-rail { display: none; }
  .pj-meta { grid-template-columns: 1fr 1fr; }
  .pj-meta div:nth-child(2) { border-right: 0; }
  .pj-text .lbl, .pj-text p.big, .pj-text p.mono { grid-column: 1 / 13; }
  .pj-text .lbl { margin-bottom: 14px; }
  .pj-gallery figure { grid-column: 1 / 13 !important; }
  .pj-list li h4, .pj-list li p { grid-column: 1 / 13; margin-top: 6px; }
  .sheet { grid-template-columns: repeat(3, 1fr); padding: 40px 14px 28px; gap: 36px 8px; }
  .about-portrait, .about-lead { grid-column: 1 / 13; }
  .about-lead { margin-top: 50px; }
  .fact dt { grid-column: 2 / 13; padding-left: 10px; }
  .fact dd { grid-column: 1 / 13; margin-top: 8px; }
  .cv .d, .cv h4, .cv .p, .cv .k { grid-column: 1 / 13; text-align: left; }
  .contact-top span { grid-column: 1 / 13 !important; text-align: left !important; margin-bottom: 6px; }
  .contact-links a { grid-column: span 4 !important; }
  .foot-row > * { grid-column: span 6 !important; justify-self: start !important; margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  #grain { display: none; }
}

/* =========================================================
   v2 — engraving, unfolding logo, carousel, inspo type
   ========================================================= */
:root {
  --type: "Courier Prime", "Courier New", Courier, monospace;   /* sessùn typewriter */
  --script: "La Belle Aurore", cursive;                          /* sessùn caption hand */
}
#grain { opacity: .06; }

/* ---------- engraved (pressed into the page) on hover ---------- */
/* A dark tone is clipped to the letters; a light shadow offset downward fills
   all but the top edge of each glyph, so the top reads as the cut wall of an
   indentation and the bottom catches light, like type engraved into the paper. */
.press {
  background-color: #A99A82;
  -webkit-background-clip: text; background-clip: text;
  transition: color .5s var(--ease-out), text-shadow .5s var(--ease-out);
}
.press:hover {
  color: transparent !important;
  text-shadow: 0 .022em .012em rgba(250, 245, 234, .92);
}
.red .press { background-color: #3E0904; }
.red .press:hover { text-shadow: 0 .022em .012em rgba(160, 40, 28, .9); }
.press .ch { color: inherit; }

/* ---------- logo: "an." unfolds to "asia nicole." ---------- */
.nav-logo { font-size: 30px; letter-spacing: -0.04em; }
.logo-mark .ln { margin-left: -0.075em; transition: margin-left .9s var(--ease); }
.logo-mark .ld { color: var(--red); margin-left: -0.02em; }
.unfold-logo .ex {
  display: inline-grid; grid-template-columns: 0fr;
  transition: grid-template-columns .9s var(--ease);
}
.unfold-logo .ex > span { overflow: hidden; min-width: 0; white-space: nowrap; }
.unfold-logo.open .ex, .unfold-logo:hover .ex { grid-template-columns: 1fr; }
.unfold-logo.open .ln, .unfold-logo:hover .ln { margin-left: .22em; }
.unfold-logo .ex > span { opacity: 0; transition: opacity .5s var(--ease-out) .1s; }
.unfold-logo.open .ex > span, .unfold-logo:hover .ex > span { opacity: 1; }

/* ---------- captions in inspo type ---------- */
.cap-type { display: block; font-family: var(--type); font-size: 13px; letter-spacing: .01em; text-transform: lowercase; margin-top: 10px; color: var(--ink-2); }
.cap-script { display: block; font-family: var(--script); font-size: 22px; line-height: 1; color: var(--ink-2); margin-top: 10px; }
.edge { font-family: var(--type); font-size: 13px; text-transform: lowercase; letter-spacing: .01em; color: var(--ink-2); bottom: -26px; }
.reveal-img .edge { color: var(--cream); bottom: 10px; }

/* ---------- hero image: full, uncropped ---------- */
.hero-reel { grid-column: 8 / 11; }
.hero-reel .frame { background: transparent; }
.hero-reel img { height: auto; }

/* ---------- carousel ---------- */
.carousel { padding-top: 40px; }
.car-head { padding-bottom: 14px; border-bottom: var(--hair); border-top: var(--hair); padding-top: 14px; align-items: center; }
.car-head > :nth-child(1) { grid-column: 1 / 4; }
.car-count { grid-column: 4 / 7; }
.car-count b { color: var(--red); font-weight: 400; }
.car-btns { grid-column: 10 / 13; justify-self: end; display: flex; gap: 28px; }
.car-btns button { font-family: var(--sans); font-size: 22px; line-height: 1; transition: color .3s, transform .4s var(--ease-out); }
.car-btns button:hover { color: var(--red); }
#car-prev:hover { transform: translateX(-4px); }
#car-next:hover { transform: translateX(4px); }
.car-viewport { overflow: hidden; padding: 28px 0 10px; cursor: grab; }
.car-viewport.drag { cursor: grabbing; }
.car-track { display: flex; gap: var(--gut); width: max-content; padding-left: var(--gut); align-items: flex-end; will-change: transform; }
.car-item { flex: none; }
.car-item .im { height: clamp(260px, 32vw, 500px); overflow: hidden; background: var(--paper); }
.car-item img { width: auto; height: 100%; transition: transform 1.2s var(--ease-out); pointer-events: none; user-select: none; }
.car-item:hover img { transform: scale(1.03); }

/* ---------- selected work preview: small + translucent, off to the side ---------- */
#preview {
  position: fixed; left: 0; top: 0; width: 170px; aspect-ratio: 4 / 5; z-index: 400;
  pointer-events: none; overflow: hidden; background: var(--paper);
  margin: -100px 0 0 36px;
  opacity: 0; transform: scale(.7); transition: opacity .35s, transform .5s var(--ease-out);
}
#preview.on { opacity: .85; transform: scale(1); }
#preview img { position: absolute; inset: 0; }
.pv-code { display: none; }

/* ---------- capabilities: numbered rows (inspo: identidad visual) ---------- */
.caps-list { list-style: none; padding: 0 var(--gut); }
.caps-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  border-bottom: var(--hair); padding: 10px 0 6px; color: var(--red);
}
.cl-t {
  font-size: clamp(30px, 5.6vw, 96px); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.065em; line-height: .9; transition: font-weight .35s;
}
.caps-list li:hover .cl-t { font-weight: 200; }
.cl-n {
  font-size: 11px; font-weight: 700; text-transform: uppercase; text-align: right;
  letter-spacing: -0.01em; line-height: 1.05; flex: none;
}

/* ---------- archive: plain contact sheet, circle only on hover ---------- */
.sheet::before, .sheet::after { content: none; }
.sheet { padding: 32px 28px 28px; }
.shot .no { font-family: var(--type); font-size: 12px; text-transform: lowercase; letter-spacing: 0; color: rgba(250, 245, 234, .7); padding-top: 8px; }
.shot .no b { color: rgba(250, 245, 234, .4); font-weight: 400; }
.shot .x { display: none; }

/* ---------- about ---------- */
.about-portrait .frame { aspect-ratio: 4 / 5; }
.pol span { font-family: var(--script); font-size: 17px; text-transform: none; letter-spacing: 0; bottom: 6px; }

/* ---------- quick page fade (no curtain) ---------- */
.page.active { animation: page-in .45s var(--ease-out); }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 900px) {
  .hero-reel { grid-column: 1 / 13; }
  .car-count { display: none; }
  .car-head > :nth-child(1) { grid-column: 1 / 7; }
  .car-btns { grid-column: 7 / 13; }
  .caps-list li { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 12px; }
  .cl-n { text-align: left; }
}

/* =========================================================
   v3 — vellum / trace paper, vector logo, film codes
   ========================================================= */

/* ---------- the paper itself ---------- */
#grain { display: none; }
#paper {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .55; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.006 .09' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .36  0 0 0 0 .28  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- the sheet underneath, seen through the vellum ---------- */
#under { position: absolute; left: 0; right: 0; top: 0; height: 320vh; z-index: 0; pointer-events: none; filter: blur(4px); overflow: hidden; }
#under { position: fixed; }
.u-logo { position: absolute; top: 14vh; right: -6vw; width: 72vw; height: auto; transform: scaleX(-1); overflow: visible; }
.u-logo path { fill: none; stroke: rgba(255, 149, 0, .22); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.u-type { position: absolute; white-space: nowrap; font-weight: 700; letter-spacing: -0.065em; line-height: .8; }
.u-a { top: 74vh; left: -4vw; font-size: 15vw; color: rgba(22, 17, 17, .07); transform: scaleX(-1); }
.u-b { top: 165vh; left: 6vw; font-size: 8vw; color: rgba(255, 149, 0, .08); }
.u-mono { position: absolute; font-family: var(--mono); font-size: 13px; line-height: 1.7; text-transform: uppercase; color: rgba(22, 17, 17, .24); }
.u-c { top: 44vh; left: 5vw; transform: scaleX(-1); }
.u-d { top: 128vh; right: 7vw; }
.u-circ { position: absolute; top: 205vh; left: 34vw; width: 38vw; }
.u-circ * { fill: none; stroke: rgba(22, 17, 17, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* crop marks at the corners of the sheet */
.crop { position: fixed; width: 18px; height: 18px; z-index: 700; pointer-events: none; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--ink); opacity: .55; }
.crop::before { left: 8.5px; top: 0; width: 1px; height: 18px; }
.crop::after { top: 8.5px; left: 0; height: 1px; width: 18px; }
.crop.tl { top: 76px; left: 6px; } .crop.tr { top: 76px; right: 6px; }
.crop.bl { bottom: 6px; left: 6px; } .crop.br { bottom: 6px; right: 6px; }
body.on-red .crop::before, body.on-red .crop::after { background: var(--cream); }

/* ---------- vellum surfaces ---------- */
.vellum, #nav, .hero-intro, .pj-meta, .statement-block .statement, .facts, .car-head {
  background: rgba(251, 249, 244, .55);
  -webkit-backdrop-filter: blur(10px) saturate(.9); backdrop-filter: blur(10px) saturate(.9);
}
.hero-intro { padding: 18px 20px 22px; border: 1px solid rgba(22, 17, 17, .12); box-shadow: 0 18px 40px -26px rgba(60, 35, 20, .35); }
.statement-block .statement { padding: 26px 28px 30px; border: 1px solid rgba(22, 17, 17, .1); box-shadow: 0 24px 50px -30px rgba(60, 35, 20, .35); }
.facts { padding-top: 6px; padding-bottom: 6px; }
#nav { background: rgba(250, 247, 240, .62); }

/* images arrive under a sheet of vellum that lifts away */
.reveal-img > img, .reveal-img > video { clip-path: none !important; }
.veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: rgba(246, 243, 236, .42);
  -webkit-backdrop-filter: blur(18px) saturate(.75); backdrop-filter: blur(18px) saturate(.75);
  border-bottom: 1px solid rgba(22, 17, 17, .15);
  transition: transform 1.5s var(--ease) .15s;
}
.veil::after { content: "[ ]"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 12px; color: rgba(22, 17, 17, .5); }
.reveal-img.in .veil { transform: translateY(-101%); }

/* the carousel and work images get a vellum strip on hover, like a trace overlay */
.car-item .im { position: relative; }
.car-item .im::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: rgba(246, 243, 236, .45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: height .7s var(--ease);

}
.car-item:hover .im::after { height: 28%; }

/* titles: a mirrored, blurred ghost as if printed on the back of the sheet */
.ghost {
  justify-self: start; align-self: end; pointer-events: none; user-select: none;
  transform: scaleX(-1); filter: blur(3px); opacity: .13; color: var(--red);
  font-weight: 700; letter-spacing: -0.075em; line-height: .78; white-space: nowrap;
  margin: 0 0 -0.04em 0.06em;
}
.page-head .ghost { grid-column: 3 / 10; grid-row: 1; font-size: clamp(80px, 17vw, 320px); }
.page-head .page-title, .page-head > .mono, .page-head .right { grid-row: 1; position: relative; z-index: 1; }
.red .ghost { color: #000; opacity: .12; }

/* ---------- hover: blind deboss — the letters press into the paper ----------
   The letterform stays paper-coloured; it reads only through soft shading:
   a shadow along the top wall, a faint shadow pooling inside, and light
   catching the bottom lip. Shadows are in em so they scale with the type. */
.press {
  background: none !important;
  transition: color .7s var(--ease-out), text-shadow .7s var(--ease-out);
}
.press:hover {
  color: #EEE7DA !important;
  text-shadow:
    0 calc(-0.5px - .006em) .006em rgba(70, 48, 30, .55),
    0 -0.002em .02em rgba(70, 48, 30, .18),
    0 calc(0.5px + .006em) .004em rgba(255, 254, 250, 1);
}
.red .press:hover {
  color: #8E1B11 !important;
  text-shadow:
    0 calc(-0.5px - .006em) .006em rgba(25, 0, 0, .6),
    0 -0.002em .02em rgba(25, 0, 0, .25),
    0 calc(0.5px + .006em) .004em rgba(255, 160, 140, .35);
}
.ghost { transition: opacity .6s var(--ease-out); }
.page-head:has(.page-title:hover) .ghost { opacity: 0; }

/* ---------- vector logo ---------- */
.logo-svg { display: block; overflow: visible; }
.nav-logo { font-size: 0; display: block; }
.nav-logo .logo-svg { height: 30px; width: auto; aspect-ratio: 1169 / 600; }
.lg-ink { fill: var(--ink); transition: fill .3s; }
.lg-dot { fill: var(--red); transition: fill .3s; }
.lg-outline { fill: none; stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .3s; }
.lg-anchors rect { fill: var(--cream); stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .3s; }
.nav-logo:hover .lg-ink, .nav-logo:hover .lg-dot { fill: transparent; }
.nav-logo:hover .lg-outline, .nav-logo:hover .lg-anchors rect { opacity: 1; }
body.on-red .lg-ink { fill: var(--cream); }
body.on-red .lg-dot { fill: var(--cream); }

.lg-line { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lg-handles line { stroke: var(--red); stroke-width: .8; vector-effect: non-scaling-stroke; }
.lg-handles circle { fill: var(--cream); stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lg-pts rect { fill: var(--cream); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lg-bbox { fill: none; stroke: var(--red); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.lg-bbox-h rect { fill: var(--cream); stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lg-read { font-family: var(--mono); fill: var(--red); letter-spacing: .04em; }

.foot-logo { display: block; font-size: 0; padding: 5vw var(--gut) 3vw; margin: 0; line-height: 0; }
.foot-logo .logo-svg { width: 50%; height: auto; }

/* intro sheet */
#intro {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: rgba(247, 244, 237, .7);
  -webkit-backdrop-filter: blur(16px) saturate(.85); backdrop-filter: blur(16px) saturate(.85);
  border-bottom: 1px solid rgba(22, 17, 17, .18);
  box-shadow: 0 30px 60px -30px rgba(60, 35, 20, .35);
  transition: transform 1.25s var(--ease);
}
#intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.006 .09' numOctaves='3' seed='2'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .36  0 0 0 0 .28  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
#intro.out { transform: translateY(-102%); }
#intro .logo-svg.big { width: min(64vw, 720px); height: auto; aspect-ratio: 1169 / 600; }
.in-meta { position: absolute; }
.in-meta.tl { top: 22px; left: 30px; } .in-meta.tr { top: 22px; right: 30px; text-align: right; }
.in-meta.bl { bottom: 22px; left: 30px; color: var(--red); } .in-meta.br { bottom: 22px; right: 30px; }
body.intro-on { overflow: hidden; }

/* cursor coordinate readout (Illustrator info panel) */
#coords {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  font-size: 9px; color: var(--red); letter-spacing: .06em; white-space: pre; opacity: 0;
}
html.has-cursor #coords { opacity: .85; }
body.on-red #coords { color: var(--cream); }

/* ---------- film codes (mono, edge orange) ---------- */
.code-cap, .edge {
  display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--edge); margin-top: 8px; white-space: nowrap;
}
.edge { position: absolute; margin: 0; }
.reveal-img .edge { z-index: 4; color: var(--edge); bottom: 8px; left: 10px; }
.shot .no { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.shot .no b { color: var(--edge); }

/* =========================================================
   v4 — printed vellum, swiss micro-type, vector marks,
   presets, magnets, enquiry forms
   ========================================================= */

/* ---------- grain + paper (static, physical) ---------- */
#grain {
  display: block; position: fixed; inset: 0; width: auto; height: auto; z-index: 950; pointer-events: none;
  animation: none; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .16  0 0 0 0 .12  0 0 0 1.1 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.on-red #grain { opacity: .22; mix-blend-mode: overlay; }

/* ---------- the sheets underneath: more present, ink bled into the fibres ---------- */
#under { filter: none; position: fixed; inset: 0; height: auto; overflow: hidden; transform: none !important; }
#under .sheet-far, #under .sheet-near { position: absolute; left: 0; right: 0; top: 0; height: 340vh; }
#under .sheet-far { transform: translate3d(0, var(--sy, 0), 0); filter: url(#bleed-lg) blur(2.4px); opacity: .95; }
#under .sheet-near { transform: translate3d(0, var(--sy2, 0), 0); filter: url(#bleed) blur(.7px); opacity: .9; }
.u-logo path { stroke: rgba(255, 149, 0, .34); stroke-width: 1.4; }
.u-a { color: rgba(22, 17, 17, .12); }
.u-b { top: 168vh; left: 8vw; font-size: 11vw; color: rgba(255, 149, 0, .12); transform: scaleX(-1); }
.u-num { position: absolute; font-weight: 300; letter-spacing: -0.06em; color: rgba(22, 17, 17, .16); font-size: 18vw; line-height: .8; }
.u-n1 { top: 112vh; left: 58vw; transform: scaleX(-1); }
.u-n2 { top: 250vh; left: 4vw; }
.u-circ * { stroke: rgba(22, 17, 17, .2); }
.u-micro { position: absolute; font-size: 12px; line-height: 1.25; letter-spacing: -0.01em; color: rgba(22, 17, 17, .38); white-space: nowrap; }
.u-c { top: 38vh; left: 6vw; transform: scaleX(-1); }
.u-d { top: 96vh; right: 9vw; }
.u-e { top: 196vh; left: 46vw; transform: scaleX(-1); }
.u-bar { position: absolute; top: 150vh; left: 10vw; width: 30vw; height: 4vw; background: rgba(22, 17, 17, .16); }
.u-mid { position: absolute; top: 64vh; left: 30vw; font-size: 6vw; font-weight: 300; letter-spacing: -0.05em; color: rgba(22, 17, 17, .14); white-space: nowrap; border-top: 1px solid rgba(22,17,17,.2); border-bottom: 1px solid rgba(22,17,17,.2); }
.u-mono, .u-type.u-a { display: block; }

/* ---------- ink bleed on type (printed, not rendered) ---------- */
.section-title, .page-title, .statement, .lead, .cl-t, .ix-t, .wc-title, .pj-title, .teaser-title,
.contact-title, .contact-mail, .preset-name, .bundle-t, .nd-t, .spec-name, .frac, .num, .pt, .fact dd, .cv h4, .pj-text p.big {
  filter: url(#bleed);
}
.cropword, .ghost { filter: url(#bleed-lg); }
.ghost { filter: url(#bleed-lg) blur(3px); }
.vec-hero, #foot-logo-svg { filter: url(#bleed); }

/* ---------- swiss micro-type ---------- */
.micro { font-family: var(--sans); font-size: 10px; line-height: 1.18; letter-spacing: -0.005em; font-weight: 400; text-transform: none; }
.micro b { font-weight: 700; }
.num { font-size: clamp(30px, 3.4vw, 52px); font-weight: 300; letter-spacing: -0.05em; line-height: .9; color: var(--ink); }
.frac { font-size: clamp(40px, 4.6vw, 72px); font-weight: 300; letter-spacing: -0.06em; line-height: .85; }
.pt { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.04em; margin-bottom: 8px; }
.barcode {
  display: block; width: 120px; height: 30px; margin: 0 0 4px auto;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 3px, var(--ink) 3px 5px, transparent 5px 6px, var(--ink) 6px 7px, transparent 7px 10px, var(--ink) 10px 13px, transparent 13px 14px);
}
.block-head > .num, .page-head > .num { grid-column: 1 / 3; align-self: start; padding-top: 4px; }
.page-head > .num { grid-row: 1; }

/* giant type cropped by the top / bottom edge of a text box */
.cropword {
  overflow: hidden; white-space: nowrap; pointer-events: none; user-select: none;
  font-size: clamp(90px, 17vw, 300px); font-weight: 700; letter-spacing: -0.075em; line-height: 1;
  color: var(--ink); padding: 0 var(--gut);
}
.cropword span { display: block; line-height: .73; }
.cropword.top { height: .38em; }
.cropword.top span { transform: translateY(-48%); }
.cropword.bottom { height: .36em; }
.cropword.small { font-size: clamp(56px, 8vw, 130px); padding: 0; }
.cropword.on-red { color: #4a0a05; }

/* ---------- nav ---------- */
.nav-name.micro { font-size: 10px; }
.nav-meta.micro { gap: 2px; }

/* ---------- hero ---------- */
.hero-top { padding-top: 8px; padding-bottom: 16px; align-items: start; border-bottom: var(--hair); }
.hero-top .c1 { grid-column: 1 / 4; }
.hero-top .c2 { grid-column: 4 / 7; }
.hero-top .c3 { grid-column: 7 / 10; }
.hero-top .c4 { grid-column: 10 / 13; text-align: right; }
.hero-title { padding: 3vw var(--gut) 0; margin: 0; cursor: default; line-height: 0; }
.vec-hero { display: block; width: min(100%, 1500px); height: auto; overflow: visible; }
.hero-spec { align-items: end; margin-top: 2vw; }
.hero-spec .frac { grid-column: 1 / 3; }
.spec-line { grid-column: 4 / 13; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px; align-items: end; border-top: var(--hair); border-bottom: var(--hair); padding: 6px 0; }
.spec-name { font-size: clamp(22px, 2.6vw, 40px); font-weight: 300; letter-spacing: -0.045em; line-height: 1; }
.hero-bottom { padding-top: 40px; }
.hero-scroll.micro { gap: 8px; }

/* ---------- vector marks ---------- */
.v-fill.v-ink { fill: var(--ink); transition: fill .3s; }
.v-fill.v-red { fill: var(--red); transition: fill .3s; }
.v-outline { fill: none; stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .3s; }
.v-anchors { fill: var(--cream); stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .3s; }
.nav-logo:hover .v-fill { fill: transparent; }
.nav-logo:hover .v-outline, .nav-logo:hover .v-anchors { opacity: 1; }
.nav-logo .logo-svg { aspect-ratio: auto; height: 30px; width: auto; }
.v-line { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-hline { fill: none; stroke: var(--red); stroke-width: .8; vector-effect: non-scaling-stroke; }
.v-knob { fill: var(--cream); stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-pts { fill: var(--cream); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-bbox { fill: none; stroke: var(--red); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.v-bbox-h { fill: var(--cream); stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-read { font-family: var(--mono); fill: var(--red); letter-spacing: .04em; }
body.on-red .v-fill.v-ink, body.on-red .v-fill.v-red { fill: var(--cream); }
body.on-red .v-line { stroke: var(--cream); }

/* ---------- cursor: outline ring only (you can always see through it) ---------- */
#cursor-ring { transform-origin: 0 0; }
#cursor-ring svg { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: 0; transform: translate(-60px, -60px); }
#cursor-ring { width: 0; height: 0; margin: 0; }
#cursor-ring path { fill: none !important; stroke-width: 1; }
html.cursor-hover #cursor { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
html.cursor-out #cursor, html.cursor-out #cursor-ring, html.cursor-out #coords { opacity: 0 !important; }
#coords { font-family: var(--mono); font-size: 9px; text-transform: lowercase; }

/* ---------- selected work / work grid ---------- */
.index-row .ix-n.micro, .index-row .ix-r.micro, .index-row .ix-y.micro { font-size: 10px; }
.wc-nodeck {
  aspect-ratio: 16 / 10; display: grid; grid-template-rows: auto 1fr auto; padding: 16px 18px; gap: 10px;
  background: rgba(251, 249, 244, .55); color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(22, 17, 17, .14);
}
.wc-nodeck span { text-shadow: none !important; color: inherit; }
.nd-num { font-size: 40px; font-weight: 300; letter-spacing: -0.05em; }
.nd-t { align-self: end; font-size: clamp(40px, 6vw, 96px) !important; font-weight: 700; letter-spacing: -0.07em !important; line-height: .82 !important; }
.nd-list { border-top: var(--hair); padding-top: 8px; }

/* ---------- archive: no stray dots — the pencil circle only appears on hover ---------- */
.shot svg.circle path { stroke-linecap: butt; opacity: 0; transition: stroke-dashoffset .9s var(--ease), opacity .2s; }
.shot:hover svg.circle path { opacity: 1; }

/* ---------- blind deboss (titles on hover, contact title always) ---------- */
.press:hover {
  color: #EDE6D8 !important;
  text-shadow:
    0 calc(-0.5px - .007em) .012em rgba(70, 48, 30, .5),
    0 0 .03em rgba(70, 48, 30, .12),
    0 calc(0.5px + .006em) .008em rgba(255, 253, 248, .95);
}
.contact-title {
  color: #8D1B11; cursor: default;
  text-shadow:
    0 calc(-0.5px - .008em) .014em rgba(20, 0, 0, .55),
    0 0 .035em rgba(20, 0, 0, .18),
    0 calc(0.5px + .007em) .01em rgba(255, 150, 130, .28);
}

/* ---------- presets ---------- */
.presets-intro { padding-top: 40px; padding-bottom: 60px; align-items: end; }
.presets-intro .frac { grid-column: 1 / 3; }
.presets-intro .lead { grid-column: 3 / 10; }
.presets-intro .right { grid-column: 10 / 13; }
.presets { padding: 0 var(--gut) 120px; display: flex; flex-direction: column; gap: 110px; }
.preset { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); align-items: end; border-top: var(--hair); padding-top: 18px; }
.preset .ba { grid-column: 1 / 9; max-height: 82vh; justify-self: start; width: 100%; }
.preset .preset-info { grid-column: 9 / 13; }
.preset.flip .ba { grid-column: 5 / 13; grid-row: 1; }
.preset.flip .preset-info { grid-column: 1 / 5; grid-row: 1; }
.ba { position: relative; overflow: hidden; background: var(--paper); cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ba img, .ba-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { position: absolute; inset: 0; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--cream); box-shadow: 0 0 0 .5px rgba(0,0,0,.15); outline: none; }
.ba-handle span {
  position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%);
  border: 1px solid var(--cream); border-radius: 50%;
  background: rgba(250, 245, 234, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ba-handle span::before, .ba-handle span::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; border: solid var(--cream); border-width: 0 0 1px 1px; }
.ba-handle span::before { left: 9px; transform: translateY(-50%) rotate(45deg); }
.ba-handle span::after { right: 9px; transform: translateY(-50%) rotate(-135deg); }
.ba-handle:focus-visible span { box-shadow: 0 0 0 2px var(--red); }
.ba-tag { position: absolute; top: 12px; color: var(--cream); text-shadow: 0 0 6px rgba(0,0,0,.35); font-size: 10px; }
.ba-tag.l { left: 12px; } .ba-tag.r { right: 12px; }
.preset-info { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.preset-name { font-size: clamp(44px, 5.4vw, 92px); font-weight: 700; letter-spacing: -0.07em; line-height: .84; color: var(--red); }
.preset-note { font-size: 17px; letter-spacing: -0.02em; line-height: 1.25; max-width: 30ch; }
.preset-spec div { display: grid; grid-template-columns: 70px 1fr; border-top: var(--hair); padding: 4px 0; }
.preset-spec dt { opacity: .55; }
.preset-buy { display: flex; align-items: center; justify-content: space-between; border-top: var(--hair); border-bottom: var(--hair); padding: 10px 0; }
.price { font-size: 30px; font-weight: 300; letter-spacing: -0.05em; }
.buy { font-size: 14px; letter-spacing: -0.02em; border: 1px solid var(--ink); padding: 9px 14px 8px; transition: background .3s, color .3s; }
.buy:hover { background: var(--red); border-color: var(--red); color: var(--cream); }
.bundle { padding: 0; align-items: end; border-top: 2px solid var(--ink); padding-top: 18px; }
.bundle .frac { grid-column: 1 / 3; }
.bundle-t { grid-column: 3 / 8; font-size: clamp(40px, 5vw, 84px); font-weight: 700; letter-spacing: -0.07em; line-height: .85; }
.bundle .micro { grid-column: 8 / 10; }
.bundle .preset-buy { grid-column: 10 / 13; }
.teaser-link.small { margin-top: 30px; }
.teaser-link.small .teaser-title { font-size: clamp(48px, 9vw, 160px); }

/* ---------- about: face through the letters ---------- */
.about-top { padding-top: 40px; align-items: start; }
.type-portrait { grid-column: 1 / 9; position: relative; overflow: hidden; margin: 0; }
.tp-photo, .tp-vellum { position: absolute; inset: 0; }
.tp-photo { background-size: cover; background-position: center 28%; filter: grayscale(.15); }
.tp-vellum { background: rgba(247, 244, 237, .78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.tp-type {
  position: relative; padding: 2.2vw 1vw 1.4vw;
  font-size: clamp(80px, 15.5vw, 280px); font-weight: 700; letter-spacing: -0.085em; line-height: .78;
  background-size: cover; background-position: center 28%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: url(#bleed);
}
.about-lead { grid-column: 9 / 13; gap: 22px; }
.caps-body { font-family: var(--mono); font-size: 11px; line-height: 1.22; text-transform: uppercase; letter-spacing: .01em; max-width: 46ch; }
.about-lead .cropword.small { font-size: clamp(56px, 7vw, 120px); }

.fact dt.micro { grid-column: 2 / 5; font-size: 10px; }
.fact .ic { color: var(--red); }

/* the board */
.magnets { position: relative; height: clamp(600px, 58vw, 860px); margin: 0 var(--gut); border-bottom: var(--hair); overflow: hidden; }
.mag { position: absolute; touch-action: none; user-select: none; transition: box-shadow .25s, scale .25s, filter .25s; }
.mag.photo {
  background: #fdfbf6; padding: 5px; border: 1px solid rgba(22, 17, 17, .1);
  box-shadow: 0 .5px 1px rgba(40, 25, 15, .22), 0 2px 4px -2px rgba(40, 25, 15, .2);
}
.mag.photo img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }
.mag.photo.drag { box-shadow: 0 1px 2px rgba(40, 25, 15, .22), 0 8px 14px -8px rgba(40, 25, 15, .3); scale: 1.02; }
.mag.obj svg { display: block; width: 100%; height: auto; overflow: visible; }
.mag.obj { filter: drop-shadow(0 1px 1px rgba(40, 25, 15, .28)) drop-shadow(0 3px 4px rgba(40, 25, 15, .12)); }
.mag.obj.drag { filter: drop-shadow(0 2px 2px rgba(40, 25, 15, .25)) drop-shadow(0 10px 12px rgba(40, 25, 15, .18)); scale: 1.04; }
.mag.sticker { position: absolute; }

/* ---------- contact: enquiry forms on a vellum sheet ---------- */
.contact-top .micro { font-size: 10px; }
.contact-links a { font-size: 13px; }
.enquiry {
  margin: 70px var(--gut) 30px; padding: 0 0 26px;
  background: rgba(250, 245, 234, .1); border: 1px solid rgba(250, 245, 234, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow: hidden;
}
.enquiry .cropword { padding: 0 18px; }
.enq-tabs { display: flex; gap: 26px; padding: 14px 18px; border-bottom: 1px solid rgba(250, 245, 234, .35); }
.enq-tabs button { font-size: clamp(20px, 2.2vw, 34px); font-weight: 300; letter-spacing: -0.045em; opacity: .55; transition: opacity .3s, font-weight .3s; }
.enq-tabs button.active { opacity: 1; font-weight: 700; }
.enq-form { display: none; grid-template-columns: 1fr 1fr; gap: 18px 26px; padding: 22px 18px 6px; }
.enq-form.active { display: grid; }
.enq-form label { display: flex; flex-direction: column; gap: 6px; }
.enq-form label.wide { grid-column: 1 / -1; }
.enq-form input, .enq-form select, .enq-form textarea {
  font: inherit; font-size: 18px; letter-spacing: -0.02em; color: var(--cream);
  background: transparent; border: 0; border-bottom: 1px solid rgba(250, 245, 234, .55); padding: 6px 0; outline: none; border-radius: 0;
  color-scheme: dark;
}
.enq-form select option { color: var(--ink); }
.enq-form textarea { resize: vertical; }
.enq-form input:focus, .enq-form select:focus, .enq-form textarea:focus { border-bottom-color: var(--cream); }
.enq-form ::placeholder { color: rgba(250, 245, 234, .4); }
.enq-send { grid-column: 1 / -1; justify-self: start; font-size: 18px; letter-spacing: -0.02em; border: 1px solid var(--cream); padding: 10px 16px 9px; margin-top: 8px; transition: background .3s, color .3s; }
.enq-send:hover { background: var(--cream); color: var(--red); }

/* ---------- grid overlay: switchable, single hairlines ---------- */
#grid-overlay { position: fixed; inset: 0; width: 100%; height: 100%; display: block; padding: 0; z-index: 800; pointer-events: none; opacity: 0; transition: opacity .4s; }
#grid-overlay line { stroke: var(--red); stroke-width: 1; opacity: .35; }
#grid-overlay line.fine { opacity: .12; }
body.grid-on #grid-overlay { opacity: 1; }

/* footer */
.foot-row .micro { font-size: 10px; }
#grid-toggle.micro { font-size: 10px; }

@media (max-width: 900px) {
  .hero-top .c2, .hero-top .c3 { display: none; }
  .hero-top .c1 { grid-column: 1 / 7; } .hero-top .c4 { grid-column: 7 / 13; }
  .spec-line { grid-column: 1 / 13; grid-template-columns: 1fr 1fr; }
  .hero-spec .frac { display: none; }
  .preset .ba, .preset .preset-info, .preset.flip .ba, .preset.flip .preset-info { grid-column: 1 / 13; grid-row: auto; }
  .preset .preset-info { margin-top: 18px; }
  .bundle > * { grid-column: 1 / 13 !important; margin-bottom: 10px; }
  .presets-intro > * { grid-column: 1 / 13 !important; margin-bottom: 12px; }
  .type-portrait, .about-lead { grid-column: 1 / 13; }
  .about-lead { margin-top: 30px; }
  .enq-form { grid-template-columns: 1fr; }
  .mag.photo { width: 30% !important; }
  .mag.obj.tabasco { width: 12% !important; }
  .mag.obj.pearls { width: 50% !important; }
  .mag.obj.charm { width: 7% !important; }
  .mag.obj.die { width: 9% !important; }
}
.u-a { color: rgba(22, 17, 17, .09); }
.u-mid { color: rgba(22, 17, 17, .1); font-size: 4.6vw; }

/* =========================================================
   v5 — text hero back, outline footer mark, flat planes,
   about portrait with red name, 3D pinboard objects
   ========================================================= */

/* hero: one thin line on top, then the big red type (slides up on load, no vector build) */
.hero-top.thin { padding-top: 10px; padding-bottom: 10px; align-items: center; }
.hero-top.thin .c1 { grid-column: 1 / 7; }
.hero-top.thin .c4 { grid-column: 7 / 13; text-align: right; }
.hero-title {
  font-weight: 700; color: var(--red);
  font-size: clamp(84px, 19.5vw, 380px);
  line-height: .78; letter-spacing: -0.075em;
  padding: 2vw var(--gut) 0; margin-left: -0.04em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line.indent { padding-left: 16.6%; }
.hero-title .line > span { display: inline-block; transform: translateY(105%); transition: transform 1.3s var(--ease); filter: url(#bleed-lg); }
.hero.in .hero-title .line > span { transform: none; }
.hero.in .hero-title .line:nth-child(2) > span { transition-delay: .12s; }
.hero.in .hero-title .line:nth-child(3) > span { transition-delay: .24s; }

/* everything sits on the same plane — no white boxes */
.hero-intro, .statement-block .statement, .facts, .car-head {
  background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.hero-intro { padding: 0; }
.statement-block .statement { padding: 0; }
.car-head { border-top: var(--hair) !important; border-bottom: var(--hair) !important; }
.car-item .im::after { content: none !important; }

/* footer mark: outlines only — black "an", red period */
.v-line-ink { stroke: var(--ink); }
.v-line-red { stroke: var(--red); }
#foot-logo-svg .v-line { stroke-width: 1.2; }
body.on-red #foot-logo-svg .v-line-ink, body.on-red #foot-logo-svg .v-line-red { stroke: var(--cream); }

/* about: the full photo, name in red over the lower part — clear of the face */
.about-portrait { grid-column: 1 / 8; position: relative; margin: 0; }
.about-portrait .frame { aspect-ratio: 4 / 5; }
.ap-name {
  position: absolute; left: -0.04em; bottom: -0.1em; z-index: 5; pointer-events: none;
  font-size: clamp(64px, 10.5vw, 190px); font-weight: 700; letter-spacing: -0.08em; line-height: .78;
  color: var(--red); filter: url(#bleed-lg);
}
.about-lead { grid-column: 9 / 13; }

/* the back of the sheet on the about page: Preacher's Daughter, mirrored */
.u-about { display: none; }
body.page-about .u-about { display: block; }
body.page-about .u-a, body.page-about .u-b, body.page-about .u-mid { opacity: .4; }
.u-tracks, .u-lyrics {
  position: absolute; transform: scaleX(-1); white-space: nowrap;
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; color: rgba(22, 17, 17, .14);
}
.u-tracks { top: 30vh; right: 6vw; font-size: 2.6vw; }
.u-lyrics { top: 120vh; left: 6vw; font-size: 4.2vw; color: rgba(255, 149, 0, .13); }

/* 3D pinboard objects */
.mag.k3d img, .mag.k3d canvas { display: block; width: 100%; height: auto; pointer-events: none; }
.mag.obj.k3d { filter: drop-shadow(0 1px 1px rgba(40, 25, 15, .25)) drop-shadow(0 3px 5px rgba(40, 25, 15, .12)); }
.mag.obj.k3d.tabasco { filter: drop-shadow(0 2px 2px rgba(40, 25, 15, .18)); }
.mag.obj.k3d.drag { filter: drop-shadow(0 2px 2px rgba(40, 25, 15, .22)) drop-shadow(0 10px 12px rgba(40, 25, 15, .16)); }

@media (max-width: 900px) {
  .about-portrait { grid-column: 1 / 13; }
}
.c-label { display: flex; flex-direction: column; gap: 10px; }
.wc-nodeck .nd-list { font-size: 10px !important; line-height: 1.25 !important; letter-spacing: 0 !important; font-weight: 400 !important; }
.wc-nodeck .nd-num { font-size: 40px !important; line-height: 1 !important; letter-spacing: -0.05em !important; font-weight: 300 !important; }
.wc-nodeck { place-items: stretch; justify-items: start; text-align: left; } .wc-nodeck .nd-list { width: 100%; }

/* =========================================================
   v6 — swiss enclosures + verticals, crisper print, objects
   ========================================================= */

/* the sheet underneath comes through clearly again */
#under .sheet-far { filter: url(#bleed-lg) blur(1.4px); opacity: 1; }
#under .sheet-near { filter: url(#bleed) blur(.4px); opacity: 1; }

/* the footer mark is clean vector: no bleed, no blur */
#foot-logo-svg, .vec-hero { filter: none !important; }
#foot-logo-svg .v-line { stroke-width: 1.4; }

/* ---------- profile + skyline: enclosed by the grid ---------- */
.swiss-box {
  display: grid; grid-template-columns: 2fr 4fr 2fr 3fr 1fr;
  margin: 40px var(--gut) 0; padding: 0;
  border-top: var(--hair); border-bottom: var(--hair);
  align-items: stretch;
}
.hb-cell { padding: 14px 16px 16px; border-left: var(--hair); min-width: 0; }
.hb-cell:first-child { border-left: 0; padding-left: 0; }
.hb-label { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.hb-label .label { color: var(--red); }
.hb-intro { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.hero-intro { grid-column: auto; font-size: 19px; line-height: 1.28; letter-spacing: -0.025em; max-width: 34ch; }
.hb-foot { border-top: var(--hair); padding-top: 6px; }
.hb-meta { display: grid; grid-template-rows: repeat(3, auto); align-content: space-between; gap: 18px; }
.hb-meta span { border-top: var(--hair); padding-top: 6px; }
.hb-meta span:first-child { border-top: 0; padding-top: 0; }
.hb-meta b { font-weight: 400; font-size: 14px; letter-spacing: -0.02em; }
.hero-reel.hb-cell { grid-column: auto; padding: 0 0 14px; margin: 0; }
.hero-reel .frame { margin: 0; }          /* the image touches the top rule */
.hero-reel .code-cap { padding: 0 16px; }
.hero-scroll.hb-cell { grid-column: auto; justify-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; }

/* ---------- more vertical rules ---------- */
.spec-line > * + * { border-left: var(--hair); padding-left: 10px; }
.block-head .right { border-left: var(--hair); padding-left: 12px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.index-row .ix-r, .index-row .ix-y { border-left: var(--hair); padding-left: 10px; align-self: stretch; display: flex; align-items: flex-end; }
.index-row .ix-a { border-left: var(--hair); padding-left: 10px; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-end; }
.index-row:hover .ix-r, .index-row:hover .ix-y, .index-row:hover .ix-a { border-color: rgba(250, 245, 234, .5); }
.caps-list .cl-n { border-left: var(--hair); padding-left: 14px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 170px; }
.fact dd { border-left: var(--hair); padding-left: 16px; }
.fact dt { align-self: stretch; display: flex; align-items: center; }
.cv .p, .cv .k { border-left: var(--hair); padding-left: 10px; align-self: stretch; }
.car-head > * + * { border-left: var(--hair); padding-left: 10px; }
.contact-top > * + * { border-left: 1px solid rgba(250, 245, 234, .45); padding-left: 10px; }
.preset-spec div { grid-template-columns: 70px 1fr; }
.preset-spec dd { border-left: var(--hair); padding-left: 8px; }
.pj-meta div + div { border-left: var(--hair); }
.c-label { border-right: var(--hair); padding-right: 12px; align-self: stretch; }

/* ---------- murals card: the big cropped list ---------- */
.wc-nodeck { position: relative; overflow: hidden; display: block; padding: 0; }
.wc-nodeck .nd-num { position: absolute; top: 12px; right: 14px; z-index: 2; font-size: 40px !important; }
.wc-nodeck .nd-list {
  display: block; position: absolute; left: 14px; right: 0; bottom: -0.08em;
  font-size: clamp(34px, 4.6vw, 80px) !important; font-weight: 700 !important;
  letter-spacing: -0.065em !important; line-height: .9 !important; color: var(--ink);
  white-space: nowrap; filter: url(#bleed-lg);
}

/* ---------- about: name ~3x, it can touch the chin, not the face ---------- */
.about-portrait { margin-bottom: clamp(60px, 12vw, 220px); }
.ap-name {
  font-size: clamp(110px, 23vw, 440px); letter-spacing: -0.085em; line-height: .76;
  left: -0.03em; bottom: -0.62em; white-space: nowrap;
}

/* ---------- pinboard objects ---------- */
.mag.obj.k3d.charm, .mag.obj.k3d.charm.drag { filter: none; }        /* shadow is baked into the render */
.mag.obj.k3d.charm.drag { scale: 1.06; }
.pearl-canvas { position: absolute; inset: 0; z-index: 9000; pointer-events: none; }

@media (max-width: 900px) {
  .swiss-box { grid-template-columns: 1fr 1fr; }
  .hb-cell { border-left: 0; padding-left: 0; border-top: var(--hair); }
  .hb-intro, .hero-reel.hb-cell { grid-column: 1 / -1; }
  .hero-scroll.hb-cell { display: none; }
  .ap-name { font-size: 22vw; }
}
.ap-name { bottom: -1.08em; }
.about-portrait { margin-bottom: calc(clamp(110px, 23vw, 440px) * 1.2); }

/* =========================================================
   v7 — bold back layer, softer paper, vellum pin borders,
   verticals that meet the horizontals
   ========================================================= */

/* the sheet underneath: big bold mirrored type + blocks, coming through clearly */
#under .sheet-far { filter: url(#bleed-lg) blur(.9px); }
#under .sheet-near { filter: url(#bleed) blur(.3px); }
.u-big { position: absolute; white-space: nowrap; font-weight: 700; letter-spacing: -0.075em; line-height: .78; color: rgba(22, 17, 17, .17); transform: scaleX(-1); }
.u-big1 { top: 8vh; left: -3vw; font-size: 21vw; }
.u-big2 { top: 128vh; left: 18vw; font-size: 26vw; color: rgba(255, 149, 0, .16); }
.u-big3 { top: 205vh; left: -2vw; font-size: 17vw; }
.u-big4 { top: 278vh; right: 4vw; font-size: 22vw; font-weight: 300; transform: none; }
.u-big5 { top: 88vh; left: 6vw; font-size: 9vw; color: rgba(22, 17, 17, .15); }
.u-a { color: rgba(22, 17, 17, .14); font-size: 17vw; }
.u-b { color: rgba(255, 149, 0, .15); }
.u-mid { color: rgba(22, 17, 17, .16); }
.u-micro { color: rgba(22, 17, 17, .5); }
.u-logo path { stroke: rgba(255, 149, 0, .4); stroke-width: 1.6; }
.u-rect { position: absolute; display: block; background: rgba(22, 17, 17, .14); }
.u-rect.r1 { top: 34vh; left: 62vw; width: 22vw; height: 7vw; }
.u-rect.r2 { top: 60vh; left: 4vw; width: 9vw; height: 26vh; background: rgba(255, 149, 0, .14); }
.u-rect.r3 { top: 110vh; left: 70vw; width: 16vw; height: 16vw; }
.u-rect.r4 { top: 165vh; left: 52vw; width: 30vw; height: 3vw; }
.u-rect.r5 { top: 232vh; left: 10vw; width: 12vw; height: 30vh; background: rgba(255, 149, 0, .12); }
.u-rect.r6 { top: 300vh; left: 40vw; width: 24vw; height: 9vw; }
.u-rect.r7 { top: 72vh; left: 74vw; width: 14vw; height: 22vh; }
.u-rect.r8 { top: 190vh; left: 26vw; width: 20vw; height: 5vw; background: rgba(255, 149, 0, .12); }

/* paper: keep the fibre, lose the obvious wrinkle streaks */
#paper { opacity: .2; }

/* about: the name a bit bigger and higher */
.ap-name { font-size: clamp(120px, 26vw, 500px); bottom: -0.82em; }
.about-portrait { margin-bottom: calc(clamp(120px, 26vw, 500px) * 0.95); }

/* pinboard photos: a vellum border you can see through */
.mag.photo {
  background: rgba(250, 247, 240, .28);
  -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 .5px 1px rgba(40, 25, 15, .18), 0 2px 4px -2px rgba(40, 25, 15, .16), inset 0 0 0 .5px rgba(22, 17, 17, .08);
}
.mag.obj.k3d.tabasco { filter: drop-shadow(3px 5px 3px rgba(40, 25, 15, .32)) drop-shadow(8px 14px 12px rgba(40, 25, 15, .14)); }

/* ---------- vertical rules run all the way into the horizontals ---------- */
@media (min-width: 901px) {
.c-label { border-right: 0; padding-right: 0; }
.index-row a { padding-top: 0; padding-bottom: 0; align-items: stretch; }
.index-row a > * { padding-top: 22px; padding-bottom: 18px; }
.index-row .ix-n, .index-row .ix-t { align-self: end; }
.fact { padding: 0; align-items: stretch; }
.fact > * { padding-top: 18px; padding-bottom: 16px; }
.fact .ic { align-self: center; padding: 0; }
.cv li { padding-top: 0; padding-bottom: 0; align-items: stretch; }
.cv li > * { padding-top: 18px; padding-bottom: 18px; }
.cv li:hover { padding-left: 0; }
.caps-list li { padding-top: 0; padding-bottom: 0; align-items: stretch; }
.caps-list li > * { padding-top: 10px; padding-bottom: 6px; }
.caps-list .cl-n { padding-top: 10px; padding-bottom: 10px; }
.block-head .right { margin-bottom: -14px; padding-bottom: 14px; }
.page-head .right { margin-bottom: -16px; padding-bottom: 16px; border-left: var(--hair); padding-left: 12px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.spec-line { padding: 0; align-items: stretch; }
.spec-line > * { padding-top: 6px; padding-bottom: 6px; }
.car-head { padding-top: 0; padding-bottom: 0; align-items: stretch; }
.car-head > * { padding-top: 14px; padding-bottom: 14px; }
.contact-top { padding-top: 0; padding-bottom: 0; align-items: stretch; }
.contact-top > * { padding-top: 22px; padding-bottom: 14px; }
.preset-spec div { padding: 0; }
.preset-spec dt, .preset-spec dd { padding-top: 4px; padding-bottom: 4px; }
}

/* =========================================================
   v8 — the back of the sheet, with real hierarchy
   ========================================================= */
#under .sheet-far { filter: url(#bleed-lg) blur(1px); }
#under .sheet-near { filter: url(#bleed) blur(.35px); }

/* giant bold, filled — the loudest thing on the back */
.u-big1 { top: 4vh; left: -2vw; font-size: 19vw; line-height: .76; color: rgba(22, 17, 17, .34); }
.u-big2 { top: 150vh; left: 30vw; font-size: 24vw; color: rgba(255, 149, 0, .2); }
.u-big3 { top: 226vh; left: -3vw; font-size: 18vw; color: rgba(22, 17, 17, .26); }
.u-big4 { top: 300vh; right: 4vw; font-size: 22vw; font-weight: 300; color: rgba(22, 17, 17, .22); transform: none; }
.u-big5 { top: 112vh; left: 4vw; font-size: 8.5vw; color: rgba(22, 17, 17, .22); }

/* typewriter lines, big and soft (like a photocopied page) */
.u-typed { position: absolute; transform: scaleX(-1); white-space: nowrap; font-family: var(--mono); font-weight: 500; letter-spacing: .02em; line-height: .98; color: rgba(22, 17, 17, .2); }
.u-t1 { top: 60vh; left: 3vw; font-size: 5.6vw; }
.u-t2 { top: 186vh; left: 8vw; font-size: 4.2vw; color: rgba(22, 17, 17, .16); }
.u-num { color: rgba(22, 17, 17, .22); }

/* solid blocks + a cut shape */
.u-blk { position: absolute; display: block; background: rgba(22, 17, 17, .3); }
.u-blk.b1 { top: 0; right: 0; width: 34vw; height: 30vh; }
.u-blk.b2 { top: 34vh; right: 4vw; width: 15vw; height: 14vh; }
.u-blk.b3 { top: 96vh; left: 0; width: 22vw; height: 4vw; background: rgba(255, 149, 0, .22); }
.u-blk.b4 { top: 136vh; right: 0; width: 10vw; height: 46vh; }
.u-blk.b5 { top: 250vh; left: 30vw; width: 26vw; height: 18vh; }
.u-blk.b6 { top: 320vh; left: 0; width: 18vw; height: 12vh; background: rgba(255, 149, 0, .2); }
.u-tri { position: absolute; display: block; background: rgba(22, 17, 17, .28); }
.u-tri.t1 { top: 64vh; right: 2vw; width: 20vw; height: 24vh; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0 42%); }
.u-rect { background: rgba(22, 17, 17, .16); }

/* stacked codes, turned on their side */
.u-codes { position: absolute; font-weight: 700; letter-spacing: -0.04em; line-height: .86; color: rgba(22, 17, 17, .3); white-space: nowrap; transform: rotate(-90deg) scaleX(-1); transform-origin: left top; }
.u-codes.c1 { top: 120vh; left: 38vw; font-size: 2.6vw; }
.u-codes.c2 { top: 265vh; left: 76vw; font-size: 2.2vw; }

/* rows of tiny copy */
.u-rows { position: absolute; display: grid; grid-template-columns: repeat(5, auto); column-gap: 3vw; row-gap: 6px; transform: scaleX(-1); font-size: 10px; letter-spacing: .02em; color: rgba(22, 17, 17, .5); white-space: nowrap; }
.u-rows.w1 { top: 52vh; left: 4vw; }
.u-rows.w2 { top: 208vh; left: 12vw; font-family: var(--mono); }
.u-vline { position: absolute; width: 2px; background: rgba(22, 17, 17, .2); }
.u-vline.v1 { top: 30vh; bottom: auto; height: 140vh; left: 52vw; }
.u-vline.v2 { top: 180vh; height: 120vh; left: 24vw; }
.u-mid { border-top-width: 2px; border-bottom-width: 2px; }

/* no rule above the skyline photo */
.swiss-box { border-top: 0; }
.swiss-box > .hb-cell:not(.hero-reel) { border-top: var(--hair); }
@media (max-width: 900px) { .mag.obj.tabasco { width: 8% !important; } .mag.obj.die { width: 6% !important; } }
/* back-layer name: one line, lighter, about two-thirds down the first screen */
.u-big1 { top: 64vh; left: -4vw; font-size: 17vw; line-height: .78; color: rgba(22, 17, 17, .17); white-space: nowrap; }
.u-t1 { top: 34vh; }
/* back-layer name: one line, readable, sitting just under the hero */
.u-big1 { top: 104vh; left: auto; right: -3vw; font-size: 15vw; color: rgba(22, 17, 17, .22); }
.u-big5 { top: 150vh; }
.u-big1 { top: 72vh; right: -3vw; left: auto; font-size: 15vw; color: rgba(22, 17, 17, .22); }
.u-big1 { left: 2vw; right: auto; font-size: 10.4vw; top: 72vh; }   /* the whole name fits on one line */

/* back layer fix: filter each piece, not the whole 3-screen-tall sheet
   (the browser was dropping most of the sheet when it was filtered as one) */
#under .sheet-far { filter: blur(1px) !important; }
#under .sheet-near { filter: blur(.35px) !important; }
#under .sheet-far > * { filter: url(#bleed-lg); }
#under .sheet-near > * { filter: url(#bleed); }

/* blocks: one tone, no big grey slab top-right */
.u-blk, .u-rect, .u-tri, .u-bar { background: rgba(22, 17, 17, .13) !important; }
.u-blk.b1, .u-rect.r1 { display: none; }
#under .sheet-far, #under .sheet-near { filter: none !important; }
#under .sheet-far > * { filter: url(#bleed-lg) blur(1px); }
#under .sheet-near > * { filter: url(#bleed) blur(.35px); }

/* back layer: solid colours + per-piece opacity.
   (the ink filter re-thresholds alpha, so translucent colours were being erased;
   drawing solid and fading the whole piece keeps everything intact) */
#under .u-big, #under .u-typed, #under .u-num, #under .u-codes, #under .u-rows,
#under .u-micro, #under .u-mid, #under .u-tracks, #under .u-lyrics { color: #161111 !important; }
#under .u-big2, #under .u-lyrics { color: #FF9500 !important; }
#under .u-blk, #under .u-rect, #under .u-tri, #under .u-bar, #under .u-vline { background: #161111 !important; }
#under .u-mid { border-color: #161111; }
#under .u-big1 { opacity: .2; }
#under .u-big2 { opacity: .2; }
#under .u-big3, #under .u-big4, #under .u-big5 { opacity: .18; }
#under .u-typed { opacity: .17; }
#under .u-num { opacity: .18; }
#under .u-blk, #under .u-rect, #under .u-tri, #under .u-bar { opacity: .12; }
#under .u-vline { opacity: .18; }
#under .u-codes { opacity: .28; }
#under .u-rows, #under .u-micro { opacity: .45; }
#under .u-mid { opacity: .14; }
#under .u-about { opacity: .16; }
#under .u-about > * { filter: none; }
.mag.k3d { z-index: 5000; }
/* back layer: same pieces, a touch lighter */
#under .u-big1, #under .u-big2 { opacity: .15; }
#under .u-big3, #under .u-big4, #under .u-big5 { opacity: .135; }
#under .u-typed { opacity: .13; }
#under .u-num { opacity: .135; }
#under .u-blk, #under .u-rect, #under .u-tri, #under .u-bar { opacity: .09; }
#under .u-vline { opacity: .135; }
#under .u-codes { opacity: .21; }
#under .u-rows, #under .u-micro { opacity: .34; }
#under .u-mid { opacity: .105; }
#under .u-about { opacity: .12; }
/* back layer: a hair lighter still */
#under .u-big1, #under .u-big2 { opacity: .135; }
#under .u-big3, #under .u-big4, #under .u-big5 { opacity: .12; }
#under .u-typed { opacity: .115; }
#under .u-num { opacity: .12; }
#under .u-blk, #under .u-rect, #under .u-tri, #under .u-bar { opacity: .08; }
#under .u-vline { opacity: .12; }
#under .u-codes { opacity: .19; }
#under .u-rows, #under .u-micro { opacity: .3; }
#under .u-mid { opacity: .095; }
#under .u-about { opacity: .105; }
/* no trapezoid; back layer a hair lighter again */
#under .u-tri { display: none; }
#under .u-big1, #under .u-big2 { opacity: .12; }
#under .u-big3, #under .u-big4, #under .u-big5 { opacity: .107; }
#under .u-typed { opacity: .102; }
#under .u-num { opacity: .107; }
#under .u-blk, #under .u-rect, #under .u-bar { opacity: .071; }
#under .u-vline { opacity: .107; }
#under .u-codes { opacity: .17; }
#under .u-rows, #under .u-micro { opacity: .27; }
#under .u-mid { opacity: .085; }
#under .u-about { opacity: .094; }
/* presets: show more of the big cropped set number */
.preset-info .cropword.top { height: .56em; }
.preset-info .cropword.top span { transform: translateY(-26%); }
/* back layer: another ~10% lighter */
#under .u-big1, #under .u-big2 { opacity: .108; }
#under .u-big3, #under .u-big4, #under .u-big5 { opacity: .096; }
#under .u-typed { opacity: .092; }
#under .u-num { opacity: .096; }
#under .u-blk, #under .u-rect, #under .u-bar { opacity: .064; }
#under .u-vline { opacity: .096; }
#under .u-codes { opacity: .153; }
#under .u-rows, #under .u-micro { opacity: .243; }
#under .u-mid { opacity: .077; }
#under .u-about { opacity: .085; }
.preset-info .cropword.top { height: .46em; }
.preset-info .cropword.top span { transform: translateY(-37%); }
#foot-logo-svg .v-line.v-u { stroke-width: 2.8; }   /* only the outer half shows (union mask) → reads as 1.4px */
.glitter-canvas { position: absolute; inset: 0; z-index: 4000; pointer-events: none; }

/* about: name at half size */
.ap-name { font-size: clamp(60px, 13vw, 250px); }
.about-portrait { margin-bottom: calc(clamp(60px, 13vw, 250px) * 0.95); }

/* =========================================================
   v9 — one-line hero, clean titles, archive rows, blog
   ========================================================= */

/* index: the name on one line; the deboss presses the whole name at once */
.hero-title.one-line { font-size: calc((100vw - 2 * var(--gut)) / 9.12); white-space: nowrap; }
.hero-title.one-line .line.indent { padding-left: 0; }

/* big red titles print clean; the ink bleed only comes in with the hover deboss
   (so the pressed-in look on hover is exactly as before) */
.page-title, .section-title, .pj-title, .teaser-title, .post-title { filter: none; }
.hero-title .line > span { filter: none; }
.page-title:hover, .section-title:hover, .pj-title:hover, .post-title:hover { filter: url(#bleed); }
.hero-title .line > span:hover { filter: url(#bleed-lg); }

/* fact sheet: plain type, no bleed */
.fact dd { filter: none; }

/* project text: all caps */
.pj-text p.mono { text-transform: uppercase; }

/* no arrows: a small red square (the period of the mark) stands in */
.sq { display: inline-block; width: .16em; height: .16em; background: var(--red); margin-left: .06em; vertical-align: baseline; transition: transform .6s var(--ease); transform-origin: left bottom; }
.teaser-link:hover .sq { transform: translateX(.12em) scale(1.25); }
.index-row .ix-a .sq { width: 9px; height: 9px; margin: 0 0 6px; }
.index-row:hover .ix-a .sq { background: var(--cream); }
.index-row:hover .ix-a { transform: none; }

/* archive: one shoot per row of six; empty frames hold the rest of the row */
.shot .mark { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; background: var(--red-hot); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s var(--ease-out); pointer-events: none; }
.shot:hover .mark { opacity: 1; transform: none; }
.shot svg.circle { display: none; }
.shot.empty { cursor: default; }
.shot.empty .im { background: none; border: 1px dashed rgba(250, 245, 234, .16); }
.shot.empty .no b { color: rgba(250, 245, 234, .2); }
.shot.bw img, .shot.bw:hover img, #lightbox img.bw { filter: grayscale(1); }
.shot.crop-eye img { object-position: 12% 50%; transform-origin: 50% 19%; scale: 1.7; translate: 0 15%; }

/* presets: the set number shown whole; titles print clean */
.preset-no { font-size: clamp(56px, 8vw, 130px); font-weight: 700; letter-spacing: -0.075em; line-height: .8; color: var(--ink); }
.preset-name { filter: none; }
.ba-empty { display: grid; place-items: center; background: none; border: 1px dashed rgba(22, 17, 17, .25); cursor: default; }

/* film: Deafening Silence */
.wc-video video, .pj-film video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.pj-film { aspect-ratio: 16 / 9; }
.pj-film video { object-fit: contain; }

/* blog */
.posts { padding: 0 0 120px; }
.post { border-bottom: var(--hair); padding-top: 60px; }
.post-head { align-items: end; padding-bottom: 14px; border-bottom: var(--hair); }
.post-head > .micro:first-child { grid-column: 1 / 3; }
.post-title { grid-column: 3 / 10; font-size: clamp(48px, 8vw, 140px); font-weight: 700; color: var(--red); letter-spacing: -0.07em; line-height: .82; cursor: default; }
.post-head .right { grid-column: 10 / 13; border-left: var(--hair); padding-left: 12px; }
.post-cover { margin: 40px var(--gut) 0; }
.post-cover img { height: auto; }
@media (max-width: 900px) {
  .post-title, .post-head .right, .post-head > .micro:first-child { grid-column: 1 / 13; }
}

/* pinboard: the Knicks pin */
.mag.obj.k3d.pin, .mag.obj.k3d.pin.drag { filter: none; }
.mag.obj.k3d.die, .mag.obj.k3d.die.drag { filter: none; }
/* seven links on a phone: tighter, and the row scrolls sideways rather than clipping */
@media (max-width: 600px) {
  .nav-links { gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 12px; flex: none; }
}

/* =========================================================
   v10 — packs, marker mark, clear project meta
   ========================================================= */
/* project facts: no white box, just the rules */
.pj-meta { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* archive: a red marker dab in the corner, drawn on hover */
.shot svg.mark { position: absolute; top: -6px; right: -6px; width: 34px; height: 34px; overflow: visible; pointer-events: none; opacity: 1; transform: none; background: none; }
.shot svg.mark path { fill: none; stroke: #c4241a; stroke-width: 5.4; stroke-linecap: round; stroke-linejoin: round; opacity: .92;
  stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset .45s cubic-bezier(.55, .1, .35, 1); }   /* ~65 units of path */
.shot:hover svg.mark path { stroke-dashoffset: 0; }

/* presets: the other two in each pack */
.pack-others { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pack-others .po { margin: 0; }
.pack-others .po img, .pack-others .po.empty::before { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pack-others .po.empty::before { content: ""; border: 1px dashed rgba(22, 17, 17, .25); box-sizing: border-box; }
.pack-others .po figcaption { padding-top: 4px; opacity: .6; }
.pack-others:hover img { filter: brightness(1.04); }

/* a pack */
.pack-intro { padding-top: 30px; padding-bottom: 50px; align-items: end; }
.pack-back { grid-column: 1 / 3; text-decoration: underline; text-underline-offset: 3px; }
.pack-intro .lead { grid-column: 3 / 11; }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px var(--gut); padding: 0 var(--gut); align-items: end; }
.pack-item { margin: 0; }
.pack-item .ba { width: 100%; max-height: 80vh; }
.pack-item figcaption { display: flex; justify-content: space-between; border-top: var(--hair); margin-top: 8px; padding-top: 6px; }
.pack-item figcaption b { color: var(--red); font-weight: 400; }
.pack-buy { margin-top: 90px; border-top: 2px solid var(--ink); padding-top: 18px; padding-bottom: 60px; align-items: start; }
.pack-buy .frac { grid-column: 1 / 3; }
.pack-buy .pb-what { grid-column: 3 / 9; display: flex; flex-direction: column; gap: 18px; }
.pack-buy .preset-buy { grid-column: 9 / 13; }
.buy-now { background: var(--red); border-color: var(--red); color: var(--cream); }
.buy-now:hover { background: var(--ink); border-color: var(--ink); }
@media (max-width: 900px) {
  .pack-grid { grid-template-columns: 1fr; }
  .pack-intro .lead, .pack-buy .pb-what, .pack-buy .preset-buy { grid-column: 1 / 13; }
}
.enq-status { grid-column: 1 / -1; min-height: 1em; color: var(--cream); }

/* ---------- lookbook: the deck as a small flip-through book ---------- */
.lookbook { padding: 20px 0 90px; }
.lkb-head { align-items: baseline; padding-bottom: 14px; }
.lkb-head .lbl { grid-column: 1 / 4; color: var(--red); }
.lkb-head .micro { grid-column: 4 / 13; }
.book { width: min(720px, 68%); margin: 0 auto; outline: none; }
@media (max-width: 700px) { .book { width: calc(100% - 2 * var(--gut)); } }
.book-stage { position: relative; aspect-ratio: 16 / 9; perspective: 2200px; cursor: pointer; user-select: none; }
.leaf { position: absolute; inset: 0; margin: 0; background: #fff; transform-origin: left center; backface-visibility: hidden;
  box-shadow: 0 1px 2px rgba(40, 25, 15, .18), 0 18px 40px -24px rgba(40, 25, 15, .35);
  transition: transform .9s cubic-bezier(.6, .05, .25, 1), opacity .9s cubic-bezier(.6, .05, .25, 1); }
.leaf img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.leaf.past { transform: rotateY(-110deg); opacity: 0; pointer-events: none; }
.leaf.current, .leaf.future { transform: none; opacity: 1; }
.leaf.current { box-shadow: 0 1px 2px rgba(40, 25, 15, .18), 0 22px 46px -22px rgba(40, 25, 15, .45); }
.book-ctrl { display: flex; justify-content: space-between; align-items: center; border-top: var(--hair); margin-top: 16px; padding-top: 8px; font-size: 11px; text-transform: uppercase; }
.book-ctrl button:disabled { opacity: .3; cursor: default; }
.book-n b { color: var(--red); font-weight: 400; }
/* the Tabasco casts its own shadow now (same light as the dice) */
.mag.obj.k3d.tabasco, .mag.obj.k3d.tabasco.drag { filter: none; }
/* the Knicks pin (a photo cut-out): shadow from the same top-left light as the dice */
.mag.obj.k3d.pin, .mag.obj.k3d.pin.drag { filter: drop-shadow(3px 4px 2px rgba(20, 16, 12, .32)) drop-shadow(6px 8px 6px rgba(20, 16, 12, .12)); }
.shot.pos-box img { object-position: 8% 50%; transform-origin: 50% 70%; scale: 1.45; }   /* zoomed onto the box; the shoe on the floor falls outside */
.shot.pos-girl img { transform-origin: 25% 50%; scale: 1.25; }   /* CM30: zoomed a touch so she sits in the centre */

/* blog: password gate */
.blog-lock { padding-top: 70px; padding-bottom: 140px; align-items: start; }
.blog-lock .lbl { grid-column: 1 / 4; color: var(--red); }
.bl-field { grid-column: 4 / 10; display: flex; flex-direction: column; gap: 12px; }
.bl-row { display: flex; gap: 10px; border-bottom: var(--hair); padding-bottom: 8px; align-items: center; }
.bl-row input { flex: 1; font: inherit; font-size: 22px; letter-spacing: .2em; background: none; border: 0; outline: 0; color: var(--ink); }
.bl-msg { min-height: 1em; color: var(--red); }
@media (max-width: 900px) { .blog-lock .lbl, .bl-field { grid-column: 1 / 13; } }
/* presets: a photo shot at an angle, levelled (before + after turn together) */
.tilt-r img { rotate: 11.5deg; scale: 1.45; translate: 11% 0; }   /* levelled, and the couple moved to the centre */
/* a pack with four presets: four across */
.pack-others:has(.po:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.pack-grid:has(.pack-item:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .pack-grid:has(.pack-item:nth-child(4)) { grid-template-columns: 1fr 1fr; } }

/* index name: arrives smeared (main.js smearHero) instead of sliding up */
.hero-title.one-line .line > span { transform: none !important; transition: none; }
.hero-title.one-line .line { position: relative; }
.hero-title.one-line .line:not(.settled) > .press { opacity: 0; }
.hero-title.one-line .press.smearing { filter: url(#hsmear) !important; will-change: transform, filter; transform-origin: left center; }

/* work: the film card is a little bigger and plays as a silent reel */
@media (min-width: 901px) { .work-card.is-film { grid-column: 2 / 10; } }
.work-card.is-film .frame { aspect-ratio: 16 / 9; position: relative; }
.wc-reel { position: absolute; left: 10px; top: 8px; color: var(--cream); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.wc-reel::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red-hot); margin-right: 6px; vertical-align: 1px; }

/* project text: small and quiet, set like a magazine page in tiny paragraphs */
.pj-text { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px var(--gut); padding: 60px var(--gut) 70px; border-top: var(--hair); margin-top: 60px; }
.pj-text .row { display: block; margin: 0; padding: 0; }
.pj-text .lbl { display: block; font-size: 9px; letter-spacing: .08em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: var(--hair); }
.pj-text p.mono { font-size: 9.5px; line-height: 1.5; letter-spacing: .02em; max-width: 38ch; }
.pj-text .row:has(p.big) { grid-column: 1 / -1; }
.pj-text p.big { font-size: clamp(18px, 1.7vw, 26px); max-width: 40ch; }
@media (max-width: 900px) { .pj-text { grid-template-columns: 1fr 1fr; } }

/* project text v2: scattered tiny notes, magazine/Calle style */
.pj-notes { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gut); row-gap: 56px; padding: 90px var(--gut) 110px; align-items: start; }
.pj-pull { grid-column: 1 / 8; margin: 0 0 30px; font-size: clamp(22px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -0.035em; color: var(--red); max-width: 22ch; }
.pj-note { margin: 0; font-size: 10.5px; line-height: 1.45; letter-spacing: .005em; text-align: justify; hyphens: auto; max-width: 34ch; }
.pj-note b { font-weight: 600; }
.pj-note .n { display: block; font-size: 8px; letter-spacing: .1em; color: var(--red); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.pj-note:nth-of-type(1) { grid-column: 1 / 4; }
.pj-note:nth-of-type(2) { grid-column: 6 / 9; margin-top: 70px; }
.pj-note:nth-of-type(3) { grid-column: 10 / 13; margin-top: 18px; }
.pj-note:nth-of-type(4) { grid-column: 3 / 6; margin-top: 10px; }
.pj-note:nth-of-type(5) { grid-column: 8 / 11; margin-top: 60px; }
.pj-note:nth-of-type(n+6) { grid-column: span 3; }
@media (max-width: 900px) {
  .pj-notes { grid-template-columns: 1fr 1fr; row-gap: 36px; padding: 60px var(--gut) 70px; }
  .pj-pull { grid-column: 1 / -1; }
  .pj-note:nth-of-type(n) { grid-column: auto; margin-top: 0; }
  .pj-note:nth-of-type(even) { margin-top: 40px; }
}

/* project text v3: Times, smaller, tighter */
.pj-notes { row-gap: 22px; column-gap: 28px; padding: 50px var(--gut) 60px; font-family: "Times New Roman", Times, serif; }
.pj-pull { font-family: inherit; font-style: italic; letter-spacing: -0.01em; font-size: clamp(20px, 2vw, 30px); line-height: 1.05; margin: 0 0 8px; }
.pj-note { font-family: inherit; font-size: 10px; line-height: 1.3; letter-spacing: 0; max-width: 32ch; }
.pj-note b { font-weight: 700; }
.pj-note .n { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 7px; margin-bottom: 3px; }
.pj-note:nth-of-type(1) { grid-column: 1 / 4; }
.pj-note:nth-of-type(2) { grid-column: 4 / 7; margin-top: 24px; }
.pj-note:nth-of-type(3) { grid-column: 7 / 10; margin-top: 6px; }
.pj-note:nth-of-type(4) { grid-column: 2 / 5; margin-top: 0; }
.pj-note:nth-of-type(5) { grid-column: 5 / 8; margin-top: 18px; }
@media (max-width: 900px) {
  .pj-notes { row-gap: 18px; padding: 40px var(--gut) 50px; }
  .pj-note:nth-of-type(n) { grid-column: auto; margin-top: 0; }
  .pj-note:nth-of-type(even) { margin-top: 16px; }
}

/* deafening silence: stills and typewriter notes set together */
.pj-spread { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 28px; row-gap: 28px; padding: 50px var(--gut) 70px; align-items: end; }
.pj-spread .pj-pull { margin: 0 0 6px; }
.pj-spread .frame { margin: 0; }
.pj-spread .frame img { width: 100%; height: auto; display: block; }
.pj-spread .pj-note { font-family: var(--mono, "Courier New", monospace); font-size: 10px; line-height: 1.35; letter-spacing: .01em; text-transform: uppercase; text-align: left; hyphens: none; max-width: none; }
.pj-spread .pj-note.to-r { text-align: right; }
.pj-spread .pj-note .n { font-family: inherit; }
.pj-spread .pj-note b { font-weight: 400; color: var(--red); }
@media (max-width: 900px) {
  .pj-spread { grid-template-columns: 1fr 1fr; }
  .pj-spread > * { grid-column: 1 / -1 !important; }
  .pj-spread .frame.small { grid-column: auto !important; }
  .pj-spread .pj-note.to-r { text-align: left; }
}
/* other projects: same typewriter notes, no Times */
.pj-notes { font-family: inherit; }
.pj-pull { font-style: normal; letter-spacing: -0.035em; }
.pj-notes .pj-note { font-family: var(--mono); font-size: 10px; line-height: 1.35; text-transform: uppercase; text-align: left; hyphens: none; max-width: none; }
.pj-notes .pj-note .n { font-family: inherit; }
.pj-notes .pj-note b, .pj-spread .pj-note b { font-weight: 400; color: var(--red); }

/* spatial studies: chapters, label on the left, images on the right */
.pj-ch { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 28px; padding: 46px var(--gut); border-top: var(--hair); align-items: start; }
.pj-ch .ch-side { grid-column: 1 / 4; position: sticky; top: 90px; }
.pj-ch .ch-n { display: block; color: var(--red); margin-bottom: 6px; }
.pj-ch .ch-t { font-size: clamp(20px, 2vw, 30px); line-height: 1; letter-spacing: -0.035em; font-weight: 400; margin: 0 0 6px; }
.pj-ch .pj-note { margin-top: 14px; font-family: var(--mono); font-size: 10px; line-height: 1.35; text-transform: uppercase; max-width: 34ch; }
.pj-ch .ch-imgs { grid-column: 4 / 13; columns: 2; column-gap: 14px; }
.pj-ch .ch-imgs.one { columns: 1; }
.pj-ch .ch-imgs .frame { margin: 0 0 14px; break-inside: avoid; }
.pj-ch .ch-imgs img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .pj-ch .ch-side { grid-column: 1 / -1; position: static; margin-bottom: 18px; }
  .pj-ch .ch-imgs { grid-column: 1 / -1; columns: 1; }
}
.pj-ch .pj-note { text-align: left; hyphens: none; }
/* spatial: smaller text */
.pj-ch .edge { font-size: 8px; }
.pj-ch .pj-note { font-size: 8.5px; line-height: 1.35; max-width: 32ch; }
.pj-ch .ch-t { font-size: clamp(15px, 1.4vw, 20px); }
.pj-ch .micro { font-size: 8px; }
/* a featured drawing gets its own tall column beside the rest */
.pj-ch .ch-feat { grid-column: 4 / 8; margin: 0; }
.pj-ch .ch-feat img { width: 100%; height: auto; display: block; }
.pj-ch .ch-imgs.beside { grid-column: 8 / 13; columns: 1; }
@media (max-width: 900px) {
  .pj-ch .ch-feat { grid-column: 1 / -1; margin-bottom: 14px; }
  .pj-ch .ch-imgs.beside { grid-column: 1 / -1; }
}
/* index name: no deboss, no hover bleed */
.hero-title .press, .hero-title .press:hover { color: inherit !important; text-shadow: none !important; }
.hero-title .line > span:hover { filter: none; }
.hero-title.one-line .press.smearing:hover { filter: url(#hsmear) !important; }
/* interiors line drawings: white paper drops out, lines sit on the cream */
#project:has(.pj-ch) .pj-ch img[src*="Interiors"] { mix-blend-mode: multiply; }

/* index name: grain. Black letters filled with flickering paper-coloured grain; a heavier
   copy of the static (::after) drifts sideways and fades in and out, never stopping. */
.hero-title.one-line .press.static {
  position: relative; filter: none !important;
  color: transparent !important; text-shadow: none !important;
  background-image: var(--grain-fine), linear-gradient(#141210, #141210) !important;
  background-size: 180px 180px, 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  animation: hgrain .45s steps(1) infinite, hbreathe 6.5s ease-in-out infinite;
}
.hero-title.one-line .press.static::after {
  content: attr(data-t); position: absolute; left: 0; top: 0; white-space: nowrap;
  color: transparent;
  background-image: var(--grain-heavy); background-size: 160px 160px;
  -webkit-background-clip: text; background-clip: text;
  animation: hgrain .3s steps(1) infinite reverse, hdrift 7.5s ease-in-out infinite;
  pointer-events: none; will-change: transform, opacity;
}
@keyframes hgrain {
  0% { background-position: 0 0, 0 0; } 20% { background-position: -47px 31px, 0 0; }
  40% { background-position: 63px -19px, 0 0; } 60% { background-position: -22px -58px, 0 0; }
  80% { background-position: 35px 52px, 0 0; }
}
@keyframes hbreathe {
  0%, 100% { transform: translateX(0); } 30% { transform: translateX(.18%); } 65% { transform: translateX(-.12%); }
}
@keyframes hdrift {
  0%   { transform: translateX(0) scaleX(1);       opacity: .2; }
  12%  { transform: translateX(.7%) scaleX(1.004); opacity: .6; }
  22%  { transform: translateX(-.35%);              opacity: .3; }
  35%  { transform: translateX(1.5%) scaleX(1.012); opacity: .9; }
  45%  { transform: translateX(.25%);               opacity: .12; }
  55%  { transform: translateX(0);                  opacity: .06; }
  68%  { transform: translateX(-1%) scaleX(1.006); opacity: .65; }
  80%  { transform: translateX(.5%);                opacity: .35; }
  100% { transform: translateX(0) scaleX(1);       opacity: .2; }
}
/* spreads: tighter text, section headings, white drops out of graphic sheets */
.pj-spread { row-gap: 14px; }
.pj-spread .pj-note { line-height: 1.22; letter-spacing: 0; }
.pj-spread .pj-note .n { margin-bottom: 2px; }
.pj-spread .sp-h { margin: 26px 0 -4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); font-weight: 400; align-self: end; }
.pj-spread .frame.mult img { mix-blend-mode: multiply; }
.pj-spread .frame.mult, .pj-ch .frame:has(img[src*="Interiors"]) { background: transparent !important; box-shadow: none !important; }
.pj-spread .frame.mult::before, .pj-spread .frame.mult::after { display: none !important; }
/* blend the whole frame (an img inside a transformed frame cannot reach the page) */
.pj-spread .frame.mult, .pj-ch .frame:has(img[src*="Interiors"]) { mix-blend-mode: multiply; }
.pj-spread .frame.mult img, #project:has(.pj-ch) .pj-ch img[src*="Interiors"] { mix-blend-mode: normal; }
.pj-ch .frame:has(img[data-key]) { background: transparent !important; box-shadow: none !important; mix-blend-mode: normal; }
.pj-spread .frame.mult { mix-blend-mode: normal; }

/* index name: drawn as a photocopy into a canvas (main.js smearHero). The DOM text stays
   for layout, selection and screen readers, but its ink comes from the canvas. */
.hero-title.one-line .line { overflow: visible; }
.hero-title.one-line .press.inked, .hero-title.one-line .press.inked.static {
  color: transparent !important; background: none !important; animation: none !important;
  -webkit-text-fill-color: transparent;
}
.hero-title.one-line .press.inked::after { content: none !important; }
.hero-title.one-line canvas.ink { position: absolute; pointer-events: none; display: block; }

/* about: ASIA NICOLE SMITH in the same black photocopy ink as the index name (main.js inkText) */
.inked { color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; }
.ap-name.inked { filter: none !important; }
canvas.ink { position: absolute; pointer-events: none; display: block; }

/* about: a much smaller fact sheet — small text rows, small icons */
.fact { padding: 0; }
.fact > * { padding-top: 6px; padding-bottom: 5px; }
.fact .ic { width: 14px; height: 14px; }
.fact .ic svg { stroke-width: 1.4; }
.fact dt.micro { font-size: 8.5px; }
.fact dd { font-size: 13px; letter-spacing: -0.01em; line-height: 1.2; padding-left: 10px; }
.fact dd small { font-size: 8.5px; margin-left: 8px; }
.fact:hover .ic svg { transform: rotate(-8deg) scale(1.08); }
/* about: under the bio, a way to the contact page */
.about-more { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; padding-top: 12px; border-top: var(--hair); color: var(--ink); text-decoration: none; }
.about-more .am-go { font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.03em; font-weight: 700; transition: color .25s, letter-spacing .4s var(--ease); }
.about-more:hover .am-go { color: var(--red); letter-spacing: 0; }

/* pinboard: photos underneath, objects on the table, the SD cards on top of everything (pearls included) */
.mag.k3d.sd { z-index: 9500 !important; }

/* index: a smaller Work list — shorter rows, smaller titles and heading */
.work-index .index-row .ix-t { font-size: clamp(20px, 2.5vw, 38px); letter-spacing: -0.04em; line-height: 1; }
.work-index .index-row:hover .ix-t { letter-spacing: -0.05em; }
.work-index .index-row a > * { padding-top: 10px; padding-bottom: 8px; }
.work-index .index-row .ix-n.micro, .work-index .index-row .ix-r.micro, .work-index .index-row .ix-y.micro { font-size: 9px; }
.work-index .index-row .ix-a .sq { width: 7px; height: 7px; margin-bottom: 3px; }
.work-index .block-head .section-title { font-size: clamp(36px, 4.4vw, 64px); }

/* chapters: images side by side in a row ('s' small, 'xs' tiny), and a small drawing under the feature */
.pj-ch .ch-row { display: flex; gap: 10px; align-items: flex-start; break-inside: avoid; column-span: all; margin: 0 0 14px; }
.pj-ch .ch-row > .frame { flex: 1 1 0; margin: 0; }
.pj-ch .ch-row.s { width: 62%; column-span: none; }
.pj-ch .ch-row.xs { width: 58%; gap: 8px; }
.pj-ch .ch-feat > .frame { margin: 0; }
.pj-ch .ch-feat .ch-under { width: 46%; margin-top: 14px; }
@media (max-width: 900px) { .pj-ch .ch-row.s, .pj-ch .ch-row.xs { width: 100%; } }

/* chapters: a chapter with no pictures yet shows a short list (Environmental Graphics) */
.pj-ch .ch-imgs:has(.ch-list) { columns: 1; }
.pj-ch .ch-list { list-style: none; margin: 0; padding: 0; border-top: var(--hair); }
.pj-ch .ch-list li { display: grid; grid-template-columns: 9ch 1fr 2fr; gap: 14px; align-items: baseline; padding: 10px 0 9px; border-bottom: var(--hair); }
.pj-ch .ch-list h4 { margin: 0; font-size: clamp(14px, 1.2vw, 18px); font-weight: 400; letter-spacing: -0.02em; }
.pj-ch .ch-list .pj-note { margin: 0; max-width: none; }
@media (max-width: 700px) { .pj-ch .ch-list li { grid-template-columns: 1fr; gap: 4px; } }

/* contact: show more of ENQUIRE and 2026 (less of each word is cropped off) */
.enquiry .cropword.top { height: .64em; }
.enquiry .cropword.top span { transform: translateY(-14%); }
.enquiry .cropword.bottom { height: .6em; }
/* contact: about three quarters of ENQUIRE and of 2026 showing */
.enquiry .cropword.top span { transform: translateY(-21%); }
.enquiry .cropword.bottom { height: .67em; }

/* work page: one card per row, zigzagging left and right, with even gaps
   (01 left, 02 the reel right, 03 left, 04 right and below it, 05 left) */
@media (min-width: 901px) {
  .work-grid { row-gap: 80px; }
  .work-grid .work-card { margin-top: 0; }
  .work-grid .work-card:nth-child(1) { grid-column: 1 / 8; }
  .work-grid .work-card:nth-child(2), .work-grid .work-card.is-film:nth-child(2) { grid-column: 5 / 13; }
  .work-grid .work-card:nth-child(3) { grid-column: 2 / 8; }
  .work-grid .work-card:nth-child(4) { grid-column: 7 / 13; }
  .work-grid .work-card:nth-child(5) { grid-column: 1 / 7; }
}

/* capabilities: the hover no longer changes the weight (that re-wrapped the long titles and
   made the rows jump); the title turns ink and slides a little instead */
.caps-list li .cl-t { transition: color .35s, transform .5s var(--ease-out); will-change: transform; }
.caps-list li:hover .cl-t { font-weight: 700; color: var(--ink); transform: translateX(12px); }

/* enquiry form: untouched defaults are faded like the placeholders */
.enq-form ::placeholder { color: rgba(250, 245, 234, .35); }
.enq-form .is-default { color: rgba(250, 245, 234, .35); }
.enq-form input.is-default::-webkit-datetime-edit { color: rgba(250, 245, 234, .35); }
.enq-form .is-default:focus { color: rgba(250, 245, 234, .6); }

/* phones: the ink canvas padding and pinboard edges poked past the screen and let the page slide sideways */
html, body { overflow-x: clip; }

/* the mural photos: small rows of four, a step up from the tiny drawing row */
.pj-ch .ch-row.xm { width: 80%; gap: 8px; }
@media (max-width: 900px) { .pj-ch .ch-row.xm { width: 100%; } }

/* the big page titles are decoration: clicks pass through them (on a laptop "Archive" sat over the
   Commercial / Couples / Wedding buttons and swallowed the clicks) */
.page-title { pointer-events: none; }
#filters { position: relative; z-index: 3; }

/* capabilities: every row's divider line sits at the same place (the right column has one fixed width
   instead of shrinking to fit its words, which left the lines uneven) */
@media (min-width: 901px) {
  .caps-list .cl-t { flex: 1 1 auto; min-width: 0; }
  .caps-list .cl-n { flex: 0 0 clamp(250px, 24vw, 380px); box-sizing: border-box; }
  .caps .block-head .right { flex: 0 0 clamp(250px, 24vw, 380px); width: clamp(250px, 24vw, 380px); box-sizing: border-box; padding-left: 14px; }
}