/* ===========================================================================
   tangun.ca PORTFOLIO BOOK + PROJECT PAGES (the Proof design, 2026-10-20)
   Was concepts/shared.css + concepts/proof/style.css; built into V3 when Akin
   chose Proof. Generated pages: tools/build_concepts.py.
   ======================================================================== */
/* ============================================================================
   PORTFOLIO CONCEPTS: WHAT ALL THREE SHARE (2026-10-20)

   The 3D mark (tangun-ca_hero3d.js with data-mark-sub on <html>) and the
   footer it lands in, copied from the home page so the ending is the same.
   Each concept brings its own stylesheet for everything else.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* The mark's layer, as on the home page. */
.hero-3d-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 30;
  pointer-events: none;
}

/* The header leaves the top left corner to the mark: it rests there as the
   logo. Without WebGL the flat logo stands in. */
.cx-head {
  position: fixed;
  z-index: 25;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
  height: 92px;
  padding: 0 32px 0 96px;
  pointer-events: none;
}
.cx-head > * { pointer-events: auto; }
.cx-flat {
  position: fixed;
  z-index: 25;
  top: 20px;
  left: 25px;
  width: 30px;
}
.hero-3d-on .cx-flat { visibility: hidden; }
.cx-head__home {
  position: fixed;
  z-index: 26;
  top: 14px;
  left: 18px;
  width: 46px;
  height: 84px;
}

/* ---- THE FOOTER, AS ON THE HOME PAGE ------------------------------------ */
.At-Contact-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background: #f4f4f4;
  font-family: "Inter", sans-serif;
}
.Contact-Center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.contact-logo img { display: block; width: auto; height: 188px; }
.contact-name {
  font-family: "Unna", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: #222;
  margin: 0;
}
.contact-location {
  font-size: 18px;
  color: #333;
  margin: 0;
}
.contact-email {
  font-size: 18px;
  font-weight: 300;
  color: #333;
  text-decoration: none;
}
.contact-email:hover { color: #4eb2ba; }
.contact-copyright {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  font-size: 12px;
  font-weight: 300;
  color: #777;
  text-align: center;
}
.pointer-live .contact-logo img { opacity: 0.1; transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.pointer-live .contact-name,
.pointer-live .contact-location,
.pointer-live .contact-email { opacity: 0.25; transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.pointer-home .contact-name,
.pointer-home .contact-location,
.pointer-home .contact-email { opacity: 1; animation: contact-strike 0.92s steps(1, end) both; }
.pointer-home .contact-name { animation-delay: 0.05s; }
.pointer-home .contact-location { animation-delay: 0.27s; }
.pointer-home .contact-email { animation-delay: 0.49s; }
@keyframes contact-strike {
  0% { opacity: 0.25; } 7% { opacity: 1; } 11% { opacity: 0.25; } 16% { opacity: 0.92; }
  20% { opacity: 0.25; } 38% { opacity: 0.25; } 43% { opacity: 1; } 49% { opacity: 0.4; }
  55% { opacity: 1; } 62% { opacity: 0.66; } 68% { opacity: 1; } 100% { opacity: 1; }
}

/* ---- REVEALS (shared.js adds .is-in) ------------------------------------ */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.rv.is-in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .pointer-live .contact-name, .pointer-live .contact-location, .pointer-live .contact-email,
  .pointer-home .contact-name, .pointer-home .contact-location, .pointer-home .contact-email { opacity: 1; animation: none; }
}
@media (max-width: 990px) {
  .cx-head { height: 72px; padding: 0 16px 0 72px; gap: 18px; }
}

/* ---- THE BRAND SHEET (2026-10-20) ----------------------------------------
   Logo, colour, type: the basics, so every project reads as a brand with
   defined guidelines. Structure here; each concept skins it. */
.bs { max-width: 1560px; margin: 0 auto; padding: 110px clamp(20px, 5vw, 84px) 40px; }
.bs__eyebrow, .bs__label { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.bs__head h2 { font-size: clamp(36px, 3.6vw, 58px); line-height: 1.02; margin: 0 0 40px; }
.bs__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.bs__block { padding: 28px 30px 32px; }
.bs__logos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bs__lg { margin: 0; }
.bs__lg img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 14%; background: #fbfbfa; }
.bs__lg--rev img { background: #c62c2f; filter: brightness(0) invert(1); }
.bs__lg--rev { position: relative; }
.bs__lg--rev::before { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 1; background: #c62c2f; }
.bs__lg--rev img { position: relative; background: none; }
.bs__lg figcaption { margin-top: 10px; font-size: 12px; }
.bs__inks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bs__inks li { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; }
.bs__inks i { grid-row: span 2; height: 64px; background: var(--c); }
.bs__inks b { font: 400 22px/1.1 "Unna", serif; align-self: end; }
.bs__inks span { font-size: 12px; letter-spacing: 0.06em; align-self: start; }
.bs__note { margin: 16px 0 0; font-size: 12px; }
.bs__types { margin: 0; display: grid; gap: 18px; }
.bs__types dt { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.bs__types dd { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.bs__types img { display: block; height: 64px; width: auto; margin-bottom: 8px; }
@media (max-width: 990px) {
  .bs__grid { grid-template-columns: 1fr; }
  .bs { padding-top: 70px; }
}
/* Live type specimens on the brand sheet. */
.bs__types { display: grid; gap: 18px; }
.bs__spec { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: end; padding-bottom: 14px; }
.bs__aa { grid-row: span 2; font-size: 64px; line-height: 0.9; }
.bs__sample { margin: 0; font-size: 22px; line-height: 1.1; }
.bs__face { margin: 6px 0 0; font-size: 12px; }
.bs__face b { font-weight: 600; margin-right: 6px; }
.bs__spec--round .bs__aa, .bs__spec--round .bs__sample { font-family: "Fredoka", sans-serif; font-weight: 600; color: #c65d2a; }
.bs__spec--round .bs__sample { color: #509b4a; }
.bs__spec--cond .bs__aa, .bs__spec--cond .bs__sample { font-family: "Oswald", sans-serif; font-weight: 500; color: #c62c2f; }
.bs__spec--cond .bs__sample { letter-spacing: 0.02em; }
/* The one colour logo: white on red. The filter whitens the whole img, so the
   red is the figure's own layer behind it, never the img's background. */
.cx .bs .bs__lg--rev img { background: none; }
/* The header reads over content: a backdrop in the page's own colour. */
.cx-head { background: linear-gradient(var(--head-bg, #f4f4f4) 55%, transparent); }

/* A box drawn by hand (build_concepts.py hd()): the stroke is the svg's. */
.hd { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); overflow: visible; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* The menu waits off screen until the mark tows it in (data-mark-pull). */
.menu-wait [data-mark-pull] { transform: translateX(calc(100vw + 40px)); }
/* The menu waiting off screen for its tow must not widen the page. */
html, body { overflow-x: clip; }
/* ============================================================================
   CONCEPT A · PROOF (2026-10-20)
   The home page's paper and press, carried into the portfolio: every project
   is a sheet pulled off the press, with crop marks, a slug line and pencilled
   notes. Filters are the job's inks. The project page is a job ticket and a
   run of proofs, notes pencilled on the pictures.
   Type: Unna (display) · Reenie Beanie (notes) · Instrument Sans (copy).
   ========================================================================= */
:root {
  --paper: #f4f4f4;
  --sheet: #fbfbfa;
  --graphite: #333;
  --ink: #1a1a17;
  --rule: rgba(26, 26, 23, 0.16);
  --pencil: #5d5d58;
  --c: #00a0c6; --m: #d6007e; --y: #f2c500; --k: #1a1a17; --spot: #4eb2ba;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gut: clamp(20px, 5vw, 80px);
}
body.cx--proof {
  background: var(--paper) url("images/AT-Bg-Hero_PaperBGDark.jpg") center / cover fixed;
  background-blend-mode: soft-light;
  color: var(--graphite);
  font: 400 17px/1.65 "Instrument Sans", system-ui, sans-serif;
}
.cx-head a { font: 500 13px/1 "Instrument Sans", sans-serif; letter-spacing: 0.04em; text-decoration: none; color: var(--graphite); }
.cx-head a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
::selection { background: var(--y); color: var(--ink); }
h1, h2 { font-family: "Unna", Georgia, serif; font-weight: 400; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; color: var(--graphite); }

/* ---- the portfolio --------------------------------------------------------- */
.px-hero {
  position: relative;
  padding: clamp(150px, 22vh, 220px) var(--gut) 56px;
  max-width: 1500px;
  margin: 0 auto;
}
.px-hero__eyebrow, .px-step, .px-crumb, .px-ticket__head {
  font: 600 11px/1.2 "Instrument Sans", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0 0 18px;
}
.px-hero h1 { font-size: clamp(56px, 9vw, 150px); line-height: 0.92; max-width: 11ch; }
.px-hero__lede { max-width: 46ch; margin: 28px 0 0; font-size: 19px; }
.px-hero__note, .px-pencil, .px-ticket__ok, .pf-proof__note {
  font-family: "Reenie Beanie", cursive;
  color: var(--pencil);
}
.px-hero__note {
  position: absolute;
  right: calc(var(--gut) + 4vw);
  bottom: 70px;
  font-size: clamp(30px, 3vw, 44px);
  transform: rotate(-6deg);
}
.px-hero__note::before {
  content: "";
  position: absolute;
  left: -46px; top: 60%;
  width: 40px; height: 2px;
  background: currentColor;
  transform: rotate(18deg);
  border-radius: 2px;
}
.px-reg {
  position: absolute;
  top: 120px; right: var(--gut);
  width: 46px;
  fill: none; stroke: var(--ink); stroke-width: 1.2;
  opacity: 0.55;
}

/* Filters as ink swatches. */
.px-inks {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 26px var(--gut) 18px calc(var(--gut) + 60px);
  max-width: 1500px;
  margin: 0 auto;
}
.px-ink {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 10px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  font: 500 13px/1 "Instrument Sans", sans-serif;
  color: var(--graphite);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.px-ink::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--k); }
.px-ink[data-ink="identity"]::before { background: var(--c); }
.px-ink[data-ink="packaging"]::before { background: var(--m); }
.px-ink[data-ink="digital"]::before { background: var(--y); }
.px-ink[data-ink="animation"]::before { background: var(--k); }
.px-ink[data-ink="experiential"]::before { background: var(--spot); }
.px-ink[data-filter="all"]::before { background: conic-gradient(var(--c) 0 25%, var(--m) 0 50%, var(--y) 0 75%, var(--k) 0); }
.px-ink b { font-weight: 400; color: var(--pencil); font-size: 12px; }
.px-ink:hover { transform: translateY(-2px); border-color: var(--graphite); }
.px-ink[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.px-ink:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; }

/* The contact sheet. */
.px-sheets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px) clamp(20px, 2.4vw, 40px);
  padding: 30px var(--gut) 140px;
  max-width: 1500px;
  margin: 0 auto;
}
.pf-proof { position: relative; display: block; text-decoration: none; }
.pf-proof--wide { grid-column: span 2; }
.pf-proof[hidden] { display: none; }
.pf-proof__sheet {
  position: relative;
  display: block;
  padding: 10px;
  background: var(--sheet);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 14px 30px -18px rgba(26,26,23,0.35);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.pf-proof__sheet img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pf-proof--wide .pf-proof__sheet img { aspect-ratio: 16 / 9; }
.pf-proof:nth-child(4n + 2) .pf-proof__sheet { transform: rotate(-0.6deg); }
.pf-proof:nth-child(5n + 3) .pf-proof__sheet { transform: rotate(0.5deg); }
.pf-proof:hover .pf-proof__sheet { transform: translateY(-6px) rotate(0deg); box-shadow: 0 30px 50px -26px rgba(26,26,23,0.45); }
.pf-proof:focus-visible { outline: 2px solid var(--spot); outline-offset: 6px; }

/* Crop marks at the four corners. */
.crop, .crop::before, .crop::after { position: absolute; pointer-events: none; }
.crop { inset: -14px; }
.crop::before, .crop::after {
  content: "";
  inset: 0;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 14px / 10px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 14px 0 / 1px 10px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 14px / 10px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 14px) 0 / 1px 10px no-repeat;
  opacity: 0.5;
}
.crop::after { transform: scaleY(-1); }

.pf-proof__slug {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin-top: 16px;
  font-size: 13px;
}
.pf-proof__slug b { font-weight: 500; color: var(--pencil); font-size: 11px; letter-spacing: 0.1em; padding-top: 6px; }
.pf-proof__slug strong { font: 400 24px/1.1 "Unna", serif; color: var(--ink); }
.pf-proof__slug em { grid-column: 2; font-style: normal; color: var(--pencil); }
.pf-proof__note {
  position: absolute;
  top: -16px; right: 8px;
  font-size: 26px;
  transform: rotate(4deg);
  padding: 0 10px;
  border: 1.5px solid currentColor;
  border-radius: 50% 45% 52% 48%;
  background: rgba(244,244,244,0.9);
}

/* ---- the project page ------------------------------------------------------ */
.px-job {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: end;
  padding: clamp(150px, 22vh, 220px) var(--gut) 90px;
  max-width: 1500px;
  margin: 0 auto;
}
.px-crumb a { color: inherit; }
.px-job h1 { font-size: clamp(50px, 7vw, 116px); line-height: 0.95; }
.px-job__sub { max-width: 52ch; font-size: 19px; margin: 30px 0 0; }
.px-ticket {
  position: relative;
  background: var(--sheet);
  padding: 26px 26px 34px;
  box-shadow: 0 18px 40px -26px rgba(26,26,23,0.5);
  transform: rotate(1.2deg);
}
.px-ticket::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -8px; height: 8px;
  background: radial-gradient(circle at 8px 8px, transparent 5px, var(--sheet) 5.5px) 0 0 / 16px 8px repeat-x;
}
.px-ticket__head { display: flex; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 12px; color: var(--ink); }
.px-ticket dl { margin: 0; }
.px-ticket dl div { display: grid; grid-template-columns: 90px 1fr; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.px-ticket dt { color: var(--pencil); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
.px-ticket dd { margin: 0; color: var(--ink); }
.px-ticket__ok {
  position: absolute;
  right: 18px; bottom: -22px;
  font-size: 34px;
  color: #b0302a;
  transform: rotate(-8deg);
}

.px-chapter {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
  padding: 70px var(--gut);
  max-width: 1500px;
  margin: 0 auto;
}
.px-chapter--flip { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); }
.px-chapter--flip .px-chapter__text { order: 2; }
.px-chapter__text { position: sticky; top: 110px; }
.px-chapter__text h2 { font-size: clamp(34px, 3.6vw, 56px); line-height: 1.02; margin-bottom: 22px; }
.px-chapter__text p { margin: 0 0 14px; max-width: 46ch; }
.px-chapter__plates { display: grid; gap: 46px; }
.px-chapter--n2 .px-chapter__plates { grid-template-columns: 1fr 1fr; align-items: start; }
.px-chapter--n2 .px-plate:nth-child(2) { margin-top: 70px; }
.px-plate { margin: 0; }
.px-plate__sheet { position: relative; display: block; padding: 12px; background: var(--sheet); box-shadow: 0 20px 44px -28px rgba(26,26,23,0.5); }
.px-plate figcaption { margin-top: 14px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pencil); }
.px-pencil {
  position: absolute;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  color: #b0302a;
  transform: rotate(-5deg);
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(251,251,250,0.9);
}
.px-pencil::after {
  content: "";
  position: absolute;
  left: 10%; right: 0; bottom: -6px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: rotate(-2deg);
}

.px-inkset {
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px var(--gut) 60px;
}
.px-inkset ul { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; margin: 0; }
.px-inkset li { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 14px; background: var(--sheet); padding: 12px 22px 12px 12px; min-width: 240px; }
.px-inkset i { grid-row: span 2; width: 54px; height: 54px; border-radius: 50%; background: var(--c); }
.px-inkset b { font: 400 22px/1.2 "Unna", serif; color: var(--ink); align-self: end; }
.px-inkset span { font-size: 13px; color: var(--pencil); letter-spacing: 0.06em; }
.px-inkset__note { font-size: 13px; color: var(--pencil); margin: 16px 0 0; }

.px-next {
  display: flex; justify-content: space-between; align-items: end; gap: 20px;
  max-width: 1500px; margin: 60px auto 0; padding: 50px var(--gut) 120px;
  border-top: 1px solid var(--rule);
}
.px-next a { text-decoration: none; }
.px-next strong { display: block; font: 400 clamp(40px, 5vw, 80px)/1 "Unna", serif; color: var(--ink); }
.px-next a:hover strong { font-style: italic; }
.px-next__all { font-weight: 500; border: 1px solid var(--graphite); padding: 13px 20px; }
.px-next__all:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 990px) {
  .px-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-job, .px-chapter, .px-chapter--flip { grid-template-columns: 1fr; }
  .px-chapter--flip .px-chapter__text { order: 0; }
  .px-chapter__text { position: static; }
  .px-hero__note { position: static; display: block; margin-top: 20px; }
  .px-reg { display: none; }
  .px-inks { padding-left: var(--gut); }
}
@media (max-width: 560px) {
  .px-sheets { grid-template-columns: 1fr; }
  .pf-proof--wide { grid-column: auto; }
  .px-chapter--n2 .px-chapter__plates { grid-template-columns: 1fr; }
  .px-chapter--n2 .px-plate:nth-child(2) { margin-top: 0; }
  .px-inkset li { min-width: 0; width: 100%; }
}

/* The brand sheet, as a press sheet: three panels on one card, crop-marked. */
.cx--proof .bs__grid { background: var(--sheet); box-shadow: 0 24px 50px -30px rgba(26,26,23,0.5); position: relative; }
.cx--proof .bs__block + .bs__block { border-left: 1px dashed var(--rule); }
.cx--proof .bs__eyebrow, .cx--proof .bs__label, .cx--proof .bs__types dt { color: var(--pencil); font-family: "Instrument Sans", sans-serif; }
.cx--proof .bs__inks i { border-radius: 50%; width: 64px; }
.cx--proof .bs__inks b { color: var(--ink); }
.cx--proof .bs__inks span, .cx--proof .bs__note, .cx--proof .bs__lg figcaption { color: var(--pencil); }
.cx--proof .bs__lg img { background: var(--paper); }
@media (max-width: 990px) { .cx--proof .bs__block + .bs__block { border-left: 0; border-top: 1px dashed var(--rule); } }
.cx--proof { --head-bg: rgba(244, 244, 244, 0.94); }
.px-inks { background: linear-gradient(rgba(244,244,244,0.96) 75%, transparent); }
.px-inks { top: 60px; }
.cx--proof .bs__spec { border-bottom: 1px dashed var(--rule); }
/* Pencilled notes never push past the picture's edge. */

.px-pencil { max-width: calc(100% - 12px); white-space: normal; }
@media (max-width: 560px) { .px-pencil { font-size: 20px; left: 6% !important; } }

/* ==== ROUND 2 (Akin, 2026-10-20) =========================================== */

/* The menu: no gradient, a box drawn round it. The mark tows it in from the
   right on load (tangun-ca_hero3d.js, THE TOW) and leaves it here. */
.cx--proof .cx-head {
  left: auto;
  right: clamp(16px, 2.4vw, 34px);
  top: 22px;
  height: auto;
  padding: 13px 22px;
  gap: 24px;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 0 10px 24px -18px rgba(26,26,23,0.5);
  transform: rotate(-0.4deg);
}
.cx--proof .cx-head a { position: relative; z-index: 1; }
.cx--proof.menu-wait .cx-head, .menu-wait .cx--proof .cx-head { transform: translateX(calc(100vw + 40px)); }

/* Eyebrows in pencil (the Night concept's handwriting, here in graphite). */
.px-step, .px-hero__eyebrow, .cx--proof .bs__eyebrow {
  font-family: "Reenie Beanie", cursive;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pencil);
  transform: rotate(-1.5deg);
  transform-origin: left center;
  margin-bottom: 14px;
}

/* "case study": a box drawn by hand, the words still pencilled. */
.pf-proof__note {
  border: 0;
  border-radius: 0;
  padding: 2px 12px 0;
  background: var(--sheet);
  font-size: 25px;
  line-height: 1.15;
  top: -14px;
  right: 10px;
  transform: rotate(2.5deg);
  color: var(--pencil);
}
.pf-proof__note .hd { color: var(--pencil); }

/* The contact sheet: each picture near its own shape, staggered. */
.px-sheets {
  display: block;
  columns: 4 260px;
  column-gap: clamp(22px, 2.4vw, 40px);
}
.pf-proof { break-inside: avoid; margin: 0 0 clamp(40px, 3.6vw, 60px); padding-top: 14px; }
.pf-proof__sheet img { aspect-ratio: auto; object-fit: cover; }
@media (max-width: 560px) { .px-sheets { columns: 1; } }
/* No band behind the filters either: the chips carry their own paper. */
.px-inks { background: none; }

/* ==== ROUND 3 (Akin, 2026-10-20) =========================================== */

/* The handwriting reads small: subtitles a size up, and its digits, which
   are tiny in this face, 40% bigger again. */
.px-step, .px-hero__eyebrow, .cx--proof .bs__eyebrow { font-size: clamp(30px, 2.6vw, 38px); }
.hw-n { font-size: 1.4em; line-height: 0; }

/* Notes on the pictures: dark, in a box drawn by hand, tilted, and always
   straddling the picture's edge so they never read as part of it. */
.px-pencil { display: none; }
.px-note {
  position: absolute;
  z-index: 3;
  padding: 5px 15px 3px;
  background: var(--sheet);
  color: var(--ink);
  font: 400 clamp(25px, 2vw, 30px)/1.1 "Reenie Beanie", cursive;
  white-space: nowrap;
  box-shadow: 0 8px 18px -14px rgba(26, 26, 23, 0.6);
}
.px-note .hd { color: var(--ink); }
.px-note--l { left: 0; top: var(--at); transform: translate(-62%, -50%) rotate(var(--r)); }
.px-note--r { right: 0; top: var(--at); transform: translate(62%, -50%) rotate(var(--r)); }
.px-note--t { top: 0; left: var(--at); transform: translate(0, -58%) rotate(var(--r)); }
.px-note--b { bottom: 0; left: var(--at); transform: translate(0, 58%) rotate(var(--r)); }
@media (max-width: 990px) {
  /* One column: the sides have no room, so every note straddles the top. */
  .px-note--l, .px-note--r, .px-note--b { left: 14px; right: auto; top: 0; bottom: auto; transform: translate(0, -58%) rotate(var(--r)); }
}

/* The ticket's stamp, the same way: dark, boxed, half off the ticket. */
.px-ticket__ok {
  right: -26px;
  bottom: -24px;
  padding: 4px 14px 2px;
  background: var(--sheet);
  color: var(--ink);
  font-size: 32px;
  transform: rotate(-5deg);
  box-shadow: 0 8px 18px -14px rgba(26, 26, 23, 0.6);
}
.px-ticket__ok .hd { color: var(--ink); }
@media (max-width: 560px) { .px-ticket__ok { right: 8px; } }

/* The "case study" tag was drawn above its card; at the top of a column the
   browser put that overhang at the foot of the column before. It now sits
   inside the card's own top space, still overlapping the sheet. */
.pf-proof { padding-top: 22px; }
.pf-proof__note { top: 4px; }
@media (max-width: 560px) { .px-note { white-space: normal; max-width: calc(100% - 28px); } }
/* The notes in the subtitles' graphite (Akin, 2026-10-20), words and box. */
.px-note, .px-note .hd { color: var(--pencil); }
.px-ticket__ok, .px-ticket__ok .hd { color: var(--pencil); }

/* The menu in pencil (Akin, 2026-10-20): handwriting, graphite, box and all.
   On hover a pencil stroke draws itself under the link, left to right, and
   rubs out again when the pointer leaves. */
.cx--proof .cx-head { color: var(--pencil); padding: 8px 22px 6px; gap: 26px; }
.cx--proof .cx-head .hd { color: var(--pencil); }
.cx--proof .cx-head a {
  font: 400 27px/1 "Reenie Beanie", cursive;
  letter-spacing: 0.01em;
  color: var(--pencil);
  text-decoration: none;
  padding: 4px 1px 6px;
}
.cx--proof .cx-head a:hover { color: var(--pencil); text-decoration: none; }
.cx-ul {
  position: absolute;
  left: -3px; right: -3px; bottom: 0;
  width: calc(100% + 6px);
  height: 9px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transform: rotate(-1.2deg);
  pointer-events: none;
}
.cx-ul path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.28s cubic-bezier(0.7, 0, 0.84, 0); }
.cx--proof .cx-head a:hover .cx-ul path,
.cx--proof .cx-head a:focus-visible .cx-ul path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cx--proof .cx-head a:nth-child(3) .cx-ul { transform: rotate(0.8deg); }
.cx--proof .cx-head a:focus-visible { outline: none; }
@media (max-width: 560px) { .cx--proof .cx-head { gap: 16px; padding: 6px 14px 4px; } .cx--proof .cx-head a { font-size: 23px; } }
/* The stroke is revealed by a wipe, left to right (a dash offset cannot be
   matched to a line that keeps its weight when stretched: it showed early). */
.cx-ul path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.cx-ul { clip-path: inset(0 100% 0 0); transition: clip-path 0.26s cubic-bezier(0.7, 0, 0.84, 0); }
.cx--proof .cx-head a:hover .cx-ul,
.cx--proof .cx-head a:focus-visible .cx-ul { clip-path: inset(0 0 0 0); transition: clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1); }

/* ==== THE BOOK (Akin, 2026-10-20): chapters instead of tags =============== */
html { scroll-behavior: smooth; }
.px-ch { scroll-margin-top: 90px; }

/* Contents: chapter names in Unna, pencil leaders, handwritten counts. */
.px-toc { margin-top: 70px; max-width: 640px; }
.px-toc ol { list-style: none; margin: 0; padding: 0; }
.px-toc li + li { margin-top: 4px; }
.px-toc a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--ink);
}
.px-toc__name { font: 400 clamp(26px, 2.4vw, 36px)/1.1 "Unna", serif; transition: font-style 0.2s; }
.px-toc__dots {
  flex: 1;
  height: 2px;
  transform: translateY(-6px) rotate(-0.3deg);
  background: radial-gradient(circle, var(--pencil) 0.9px, transparent 1.3px) 0 50% / 9px 2px repeat-x;
  opacity: 0.8;
}
.px-toc__n { font: 400 32px/1 "Reenie Beanie", cursive; color: var(--pencil); min-width: 2ch; text-align: right; }
.px-toc a:hover .px-toc__name, .px-toc a:focus-visible .px-toc__name { font-style: italic; }
.px-toc a:focus-visible { outline: 2px solid var(--spot); outline-offset: 4px; }

/* Each chapter opens on its own title and a pencilled line about it. */
.px-ch { max-width: 1500px; margin: 0 auto; padding: 90px 0 0; }
.px-ch__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding: 0 var(--gut) 34px;
  border-top: 1px solid var(--rule);
  padding-top: 40px;
  margin: 0 var(--gut);
  padding-left: 0;
}
.px-ch__head h2 { font-size: clamp(48px, 6vw, 96px); line-height: 0.95; }
.px-ch__note { margin: 0; font: 400 clamp(28px, 2.4vw, 36px)/1 "Reenie Beanie", cursive; color: var(--pencil); transform: rotate(-1.5deg); }
.px-ch .px-sheets { padding-top: 10px; padding-bottom: 40px; }

/* The cards: name only now (no running number, a project can sit in two chapters). */
.pf-proof__slug { display: block; }
.pf-proof__slug strong { font-size: 26px; }

/* The running head: the chapter you are in, pencilled under the menu box.
   Click it to go back to the contents. */
.px-running {
  position: fixed;
  z-index: 24;
  top: 84px;
  right: clamp(22px, 2.8vw, 40px);
  margin: 0;
  font: 400 27px/1 "Reenie Beanie", cursive;
  color: var(--pencil);
  opacity: 0;
  transform: translateY(-6px) rotate(-1.5deg);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.px-running.is-on { opacity: 1; transform: rotate(-1.5deg); }
.px-running a { color: inherit; text-decoration: none; }
.px-running a::before { content: "\2191\00a0"; }
.px-running a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (max-width: 560px) { .px-running { top: 66px; font-size: 23px; right: 16px; } }
/* On paper of its own, so it reads over the pictures scrolling under it. */
.px-running { padding: 3px 12px 1px; background: var(--sheet); box-shadow: 0 8px 18px -14px rgba(26, 26, 23, 0.5); }

/* Brand Identity shows logos: on the sheet's own paper, each one sitting in
   the same 4:3 field so the marks read at a like size. */
.pf-proof--logo .pf-proof__sheet { background: #fff; }
.pf-proof__logo { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 12% 16%; }
.pf-proof__sheet .pf-proof__logo { aspect-ratio: 4 / 3; object-fit: contain; }

/* Brand Identity: every tile is the same logo field, so it is a plain grid,
   four across and read row by row (Akin: "all should fit 4"). The columns
   layout filled top to bottom and left the last rows short. */
#ch-identity .px-sheets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(22px, 2.4vw, 40px);
  columns: auto;
}
#ch-identity .pf-proof { margin-bottom: clamp(30px, 3vw, 50px); }
@media (max-width: 990px) { #ch-identity .px-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #ch-identity .px-sheets { grid-template-columns: 1fr; } }

/* ==== THE VIEWER (2026-10-20) ==============================================
   A project without its own page opens on a proof sheet over the page. */
.px-lb { border: 0; padding: 0; margin: auto; width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: none; overflow: visible; }
.px-lb::backdrop { background: rgba(26, 26, 23, 0.55); backdrop-filter: blur(2px); }
.px-lb__sheet { position: relative; background: var(--sheet); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6); max-height: calc(100vh - 48px); overflow: auto; padding: clamp(22px, 3vw, 44px); }
.px-lb__close { position: sticky; top: 0; float: right; z-index: 2; border: 0; background: var(--sheet); color: var(--pencil); font: 400 28px/1 "Reenie Beanie", cursive; padding: 4px 14px 2px; cursor: pointer; transform: rotate(2deg); }
.px-lb__close .hd { color: var(--pencil); }
.px-lb__close:focus-visible { outline: 2px solid var(--spot); outline-offset: 4px; }
.px-lb__body h2 { font-size: clamp(36px, 4vw, 60px); line-height: 1; margin: 0 0 8px; }
.px-lb__labels { margin: 0 0 18px; font: 400 clamp(24px, 2vw, 30px)/1 "Reenie Beanie", cursive; color: var(--pencil); }
.px-lb__detail { max-width: 60ch; margin: 0 0 16px; }
.px-lb__meta p, .px-lb__stats p { margin: 0 0 6px; font-size: 15px; }
.px-lb__meta strong { font-weight: 500; color: var(--pencil); margin-right: 4px; }
.px-lb__meta a { color: var(--ink); text-underline-offset: 4px; }
.px-lb__media { display: grid; gap: 22px; margin-top: 28px; }
.px-lb__media img, .px-lb__media video { width: 100%; height: auto; background: var(--paper); }
.px-lb__media .is-transparent, .px-lb__media [data-kind="logo"] { max-width: 520px; margin: 0 auto; }
@media (max-width: 560px) { .px-lb { width: calc(100vw - 16px); } }

/* ==== THE WALL: films on one screen, chosen in pencil (2026-10-20) ======== */
.px-wallsec { max-width: 1500px; margin: 0 auto; padding: 80px var(--gut) 40px; }
.px-wallsec__text { position: static; max-width: 760px; margin-bottom: 34px; }
.px-wall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 220px); gap: 34px; align-items: start; }
.px-wall .px-plate { margin: 0; }
.px-wall video { display: block; width: 100%; aspect-ratio: 32 / 9; object-fit: cover; background: #111; }
.px-wall__menu { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.px-wall__menu button {
  position: relative;
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 4px 2px 7px;
  font: 400 clamp(25px, 2vw, 30px)/1 "Reenie Beanie", cursive;
  color: var(--pencil);
  cursor: pointer;
  text-align: left;
}
.px-wall__menu button[aria-pressed="true"] { color: var(--ink); }
.px-wall__menu button[aria-pressed="true"] .cx-ul,
.px-wall__menu button:hover .cx-ul,
.px-wall__menu button:focus-visible .cx-ul { clip-path: inset(0 0 0 0); transition: clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.px-wall__menu button:focus-visible { outline: none; }
.px-wall__now { grid-column: 1; margin: 2px 0 0; font: 400 26px/1 "Reenie Beanie", cursive; color: var(--pencil); }
.px-wide { max-width: 1500px; margin: 0 auto; padding: 50px var(--gut) 20px; }
@media (max-width: 990px) {
  .px-wall { grid-template-columns: 1fr; }
  .px-wall__menu { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
  .px-wall__now { grid-column: auto; }
}
/* The stamp sits below the last line, never on it. */
.px-ticket { padding-bottom: 54px; }
.px-ticket { padding-bottom: 68px; }

/* The wall's tabs under the screen, side by side, each a box drawn by hand
   (Akin, 2026-10-20: the pencilled list beside it did not read as buttons). */
.px-wall { grid-template-columns: 1fr; gap: 26px; }
.px-wall__menu {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  padding: 0 4px;
}
.px-wall__menu button {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 10px 8px 8px;
  background: var(--sheet);
  font-size: clamp(22px, 1.8vw, 27px);
  line-height: 0.95;
  text-align: center;
  color: var(--pencil);
  transition: transform 0.25s var(--ease), color 0.2s;
}
.px-wall__menu button:nth-child(odd) { transform: rotate(-0.6deg); }
.px-wall__menu button:nth-child(even) { transform: rotate(0.5deg); }
.px-wall__menu button .hd { color: var(--pencil); stroke-width: 1.3; }
.px-wall__menu button:hover { transform: translateY(-3px) rotate(0deg); color: var(--ink); }
.px-wall__menu button:hover .hd { color: var(--ink); }
.px-wall__menu button[aria-pressed="true"] { color: var(--ink); box-shadow: 0 10px 22px -16px rgba(26, 26, 23, 0.6); }
.px-wall__menu button[aria-pressed="true"] .hd { color: var(--ink); stroke-width: 2; }
.px-wall__menu button:focus-visible { outline: 2px solid var(--spot); outline-offset: 5px; }
.px-wall__menu .cx-ul { display: none; }
.px-wall__now { grid-column: auto; }
@media (max-width: 990px) { .px-wall__menu { grid-template-columns: repeat(3, minmax(0, 1fr)); flex-direction: initial; } }

/* ==== NEXT PROJECT, as a proof (Akin, 2026-10-20) ========================= */
.px-nx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1500px;
  margin: 70px auto 0;
  padding: 50px var(--gut) 130px;
  border-top: 1px solid var(--rule);
}
.px-nx__card {
  display: grid;
  grid-template-columns: minmax(180px, 360px) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  flex: 1;
}
.px-nx__sheet { position: relative; display: block; padding: 10px; background: var(--sheet); box-shadow: 0 18px 36px -24px rgba(26,26,23,0.55); transform: rotate(-1.2deg); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.px-nx__sheet img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.px-nx__text { display: grid; gap: 6px; justify-items: start; }
.px-nx__text .px-step { margin: 0; }
.px-nx__text strong { font: 400 clamp(38px, 4vw, 60px)/1 "Unna", serif; }
.px-nx__work { font-size: 15px; color: var(--pencil); letter-spacing: 0.02em; }
.px-nx__arrow { width: 58px; height: 24px; margin-top: 6px; fill: none; stroke: var(--pencil); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease); }
.px-nx__card:hover .px-nx__sheet { transform: rotate(0deg) translateY(-6px); box-shadow: 0 30px 50px -28px rgba(26,26,23,0.6); }
.px-nx__card:hover strong { font-style: italic; }
.px-nx__card:hover .px-nx__arrow { transform: translateX(8px); stroke: var(--ink); }
.px-nx__card:focus-visible { outline: 2px solid var(--spot); outline-offset: 8px; }
.px-nx__all {
  position: relative;
  flex: none;
  padding: 10px 22px 8px;
  background: var(--sheet);
  color: var(--pencil);
  font: 400 28px/1 "Reenie Beanie", cursive;
  text-decoration: none;
  transform: rotate(1.5deg);
  transition: color 0.2s, transform 0.3s var(--ease);
}
.px-nx__all .hd { color: var(--pencil); }
.px-nx__all:hover { color: var(--ink); transform: rotate(0deg) translateY(-2px); }
.px-nx__all:hover .hd { color: var(--ink); }
.px-nx__all:focus-visible { outline: 2px solid var(--spot); outline-offset: 5px; }
@media (max-width: 760px) {
  .px-nx { flex-direction: column; align-items: stretch; }
  .px-nx__card { grid-template-columns: 1fr; }
  .px-nx__all { align-self: flex-start; }
}

/* ==== THE PROJECT PAGES (2026-10-20) ====================================== */
/* The brand sheet for any brand: the one colour logo sits on the brand's own
   darkest colour (--rev); two or one blocks when there is no logo or type. */
.bs__lg--rev::before { background: var(--rev, #c62c2f); }
.bs--n2 .bs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bs--n1 .bs__grid { grid-template-columns: minmax(0, 560px); }
.bs__spec .bs__sample { font-size: 24px; }
/* Three or four pictures in a chapter: two columns, staggered. */
.px-chapter--n3 .px-chapter__plates, .px-chapter--n4 .px-chapter__plates { grid-template-columns: 1fr 1fr; align-items: start; gap: 34px; }
.px-chapter--n3 .px-plate:nth-child(2), .px-chapter--n4 .px-plate:nth-child(2) { margin-top: 60px; }
.px-chapter--n3 .px-plate:nth-child(3) { grid-column: 1 / -1; width: 78%; justify-self: end; }
/* Films: one under another, at full width of the column. */
.px-plate video { display: block; width: 100%; height: auto; background: #111; }
@media (max-width: 990px) { .bs--n2 .bs__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .px-chapter--n3 .px-chapter__plates, .px-chapter--n4 .px-chapter__plates { grid-template-columns: 1fr; }
  .px-chapter--n3 .px-plate:nth-child(2), .px-chapter--n4 .px-plate:nth-child(2) { margin-top: 0; }
  .px-chapter--n3 .px-plate:nth-child(3) { width: 100%; }
}

/* The Sütaş Ayran mark on its own, as a proof (sutas-ayran.html). */
.px-plate--mark { max-width: 760px; margin: 40px auto 30px; }
.px-plate--mark .px-plate__sheet { background: #fff; padding: 7% 9%; }
.px-plate--mark img { width: 100%; height: auto; }
/* The picture card sits inside the old pages' own layout too. */
.px-nx .px-step { font-family: "Reenie Beanie", cursive; }

/* ==== THE CASE PAGES ON PROOF (2026-10-20) ================================= */
.px-lead { padding-top: 10px; }
.px-lead .px-plate img, .px-lead .px-plate video { width: 100%; }
.px-chapter--solo { grid-template-columns: minmax(0, 760px); }
.px-chapter--solo .px-chapter__text { position: static; }
.px-chapter--solo .px-chapter__text p { max-width: 62ch; }
/* Figures: the number in Unna, the label in pencil. */
.px-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px; padding: 28px 30px; background: var(--sheet); box-shadow: 0 20px 44px -28px rgba(26,26,23,0.5); }
.px-figs b { display: block; font: 400 clamp(44px, 4.4vw, 68px)/1 "Unna", serif; color: var(--ink); }
.px-figs b .hw-n { font-size: 1em; }
.px-figs span { display: block; margin-top: 8px; font: 400 25px/1.05 "Reenie Beanie", cursive; color: var(--pencil); }
/* COG's two brands side by side. */
.cs-versus { width: 100%; border-collapse: collapse; background: var(--sheet); font-size: 15px; box-shadow: 0 20px 44px -28px rgba(26,26,23,0.5); }
.cs-versus th, .cs-versus td { padding: 14px 16px; border-bottom: 1px dashed var(--rule); text-align: left; vertical-align: top; }
.cs-versus thead th { font: 400 24px/1.1 "Unna", serif; color: var(--ink); }
.cs-versus tbody th { font: 400 24px/1 "Reenie Beanie", cursive; color: var(--pencil); white-space: nowrap; }
.cs-sw { display: flex; gap: 4px; margin-bottom: 6px; }
.cs-sw i { width: 22px; height: 22px; border-radius: 50%; }
.cs-browser { margin: 0; }
.cs-browser__bar { display: none; }
.cs-browser img { width: 100%; }
@media (max-width: 760px) { .cs-versus { font-size: 13px; } .cs-versus th, .cs-versus td { padding: 10px 8px; } }

/* One light grey, the footer's, on every page (Akin, 2026-10-20). The paper
   photo blended over it read as a different grey; the proofs keep their own
   white sheet. */
body.cx--proof { background: #f4f4f4; background-image: none; }
.At-Contact-section { background: #f4f4f4; }
.bs__lg--tint img { background: var(--tint) !important; filter: none; }