/* PROOF presentation, restored: work cards, archive tiles + lightbox, case pages.
   Generated from the previous site.css and scoped under .proof. */
.proof {
  
  --paper: #E8E7E3;        
  --stock: #DAD9D4;        
  --ink: #0C0C0E;          
  --ink-2: #5A574F;        
  --rule: #C9C4B8;         
  --red: #EC008C;          
  --red-text: #2E3BFF;     
  --blue: #00AEEF;         
  --on-red: #FFFFFF;
  --band: #0C0C0E;         
  --band-fg: #ECEBE7;
  --band-2: #A8A39A;
  --plate-blend: multiply;
  
  --pc: #00A3E0; --pm: #E6007E; --py: #FFE500; --pk: #111111;
  --pcm: #2E3192; --pcy: #00A651; --pmy: #ED1C24;

  
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t1: clamp(72px, 24vw, 176px);
  --t2: clamp(48px, 7vw, 88px);
  --t3: clamp(32px, 3.6vw, 48px);
  --t4: clamp(22px, 2.2vw, 28px);
  --t5: clamp(16px, 1.2vw, 17px);
  --t6: 12px;

  
  --margin: 64px;
  --gutter: 24px;
  --max: 1360px;
  --nav-h: 64px;
  --mark: var(--ink);
}
@media (max-width: 1279px) {.proof { --margin: 48px; --gutter: 20px; }}
@media (max-width: 1023px) {.proof { --margin: 32px; --gutter: 16px; }}
@media (max-width: 639px) {.proof { --margin: 16px; --gutter: 12px; --nav-h: 56px; }}
.proof h1, .proof h2, .proof h3, .proof h4 { margin: 0; text-wrap: balance; }
.proof p { margin: 0; }
.proof button { font: inherit; color: inherit; }
.proof :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.proof ::selection { background: var(--red); color: var(--on-red); }
.proof .wrap { width: 100%; max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding-inline: var(--margin); }
.proof .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
@media (max-width: 1023px) {.proof .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }}
@media (max-width: 639px) {.proof .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
.proof .mono { font-family: var(--mono); font-size: var(--t6); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.proof .display { font-family: var(--display); font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; }
.proof .h2 { font-family: var(--display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: var(--t2); line-height: .9; letter-spacing: -.005em; }
.proof .h3 { font-family: var(--display); font-weight: 800; font-stretch: 75%; font-size: var(--t3); line-height: 1; }
.proof .lede { font-size: var(--t4); line-height: 1.3; font-weight: 500; max-width: 34ch; }
.proof .muted { color: var(--ink-2); }
.proof .measure { max-width: 64ch; }
.proof .stack > * + * { margin-top: 1em; }
.proof .skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; font-family: var(--mono); font-size: 13px; text-decoration: none; }
.proof .skip:focus { top: 12px; }
.proof .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.proof .btn { display: inline-flex; align-items: center; gap: .6em; padding: 14px 20px; min-height: 48px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.proof .btn:hover { background: var(--ink); color: var(--paper); }
.proof .btn--red { background: var(--red-text); border-color: var(--red-text); color: var(--on-red); }
.proof .btn--red:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.proof .btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.proof .textlink { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.proof .textlink:hover { color: var(--red-text); }
@property --ml { syntax: "<length>"; inherits: false; initial-value: 11px; }
.proof .crop { position: relative; color: var(--mark); }
.proof .crop::after {
  content: ""; position: absolute; inset: -15px; pointer-events: none; --ml: 11px;
  --g: linear-gradient(currentColor, currentColor);
  background:
    var(--g) left 0 top 15px / var(--ml) 1px no-repeat,
    var(--g) left 15px top 0 / 1px var(--ml) no-repeat,
    var(--g) right 0 top 15px / var(--ml) 1px no-repeat,
    var(--g) right 15px top 0 / 1px var(--ml) no-repeat,
    var(--g) left 0 bottom 15px / var(--ml) 1px no-repeat,
    var(--g) left 15px bottom 0 / 1px var(--ml) no-repeat,
    var(--g) right 0 bottom 15px / var(--ml) 1px no-repeat,
    var(--g) right 15px bottom 0 / 1px var(--ml) no-repeat;
  transition: --ml .55s cubic-bezier(.2,.7,.2,1);
}
.motion .proof .crop:not(.in)::after { --ml: 0px; }
@media (max-width: 639px) {.proof .crop::after { inset: -11px; --ml: 8px;
  background:
    var(--g) left 0 top 11px / var(--ml) 1px no-repeat, var(--g) left 11px top 0 / 1px var(--ml) no-repeat,
    var(--g) right 0 top 11px / var(--ml) 1px no-repeat, var(--g) right 11px top 0 / 1px var(--ml) no-repeat,
    var(--g) left 0 bottom 11px / var(--ml) 1px no-repeat, var(--g) left 11px bottom 0 / 1px var(--ml) no-repeat,
    var(--g) right 0 bottom 11px / var(--ml) 1px no-repeat, var(--g) right 11px bottom 0 / 1px var(--ml) no-repeat; }}
.proof .cmyk { display: grid; grid-template-columns: repeat(14, 1fr); height: 10px; }
.proof .cmyk span:nth-child(1) { background: var(--pc); }
.proof .cmyk span:nth-child(2) { background: var(--pm); }
.proof .cmyk span:nth-child(3) { background: var(--py); }
.proof .cmyk span:nth-child(4) { background: var(--pk); }
.proof .cmyk span:nth-child(5) { background: var(--pcm); }
.proof .cmyk span:nth-child(6) { background: var(--pcy); }
.proof .cmyk span:nth-child(7) { background: var(--pmy); }
.proof .cmyk span:nth-child(8) { background: color-mix(in srgb, var(--pk) 80%, var(--paper)); }
.proof .cmyk span:nth-child(9) { background: color-mix(in srgb, var(--pk) 60%, var(--paper)); }
.proof .cmyk span:nth-child(10) { background: color-mix(in srgb, var(--pk) 40%, var(--paper)); }
.proof .cmyk span:nth-child(11) { background: color-mix(in srgb, var(--pk) 20%, var(--paper)); }
.proof .cmyk span:nth-child(12) { background: color-mix(in srgb, var(--pc) 50%, var(--paper)); }
.proof .cmyk span:nth-child(13) { background: color-mix(in srgb, var(--pm) 50%, var(--paper)); }
.proof .cmyk span:nth-child(14) { background: color-mix(in srgb, var(--py) 50%, var(--paper)); }
.proof .cmyk--thin { height: 6px; width: min(280px, 60%); }
.proof .reg { width: 22px; height: 22px; flex: none; color: var(--ink); }
.proof .plates { position: relative; display: inline-block; }
.proof .plates::before, .proof .plates::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: var(--plate-blend); white-space: inherit; }
.proof .plates::before { color: var(--blue); }
.proof .plates::after { color: var(--red); }
.proof .plates > .k { position: relative; z-index: 1; }
.proof .plates--off::before { transform: translate(-.028em, .012em); }
.proof .plates--off::after { transform: translate(.028em, -.01em); }
.proof .plates--off > .k { color: transparent; }
@keyframes plateBlue { from { opacity: 0; transform: translate(-.14em, .03em); } }
@keyframes plateRed { from { opacity: 0; transform: translate(.14em, -.03em); } }
@keyframes plateK { from { opacity: 0; } }
@keyframes plateBlueSettle { 0% { opacity: 0; transform: translate(-.14em, .03em); } 60% { opacity: 1; transform: translate(-.03em, .01em); } 100% { transform: none; } }
@keyframes plateRedSettle { 0% { opacity: 0; transform: translate(.14em, -.03em); } 60% { opacity: 1; transform: translate(.03em, -.01em); } 100% { transform: none; } }
.motion .proof .press-in .plates::before { animation: plateBlueSettle .8s cubic-bezier(.2,.7,.2,1) both; }
.motion .proof .press-in .plates::after { animation: plateRedSettle .8s cubic-bezier(.2,.7,.2,1) .18s both; }
.motion .proof .press-in .plates > .k { animation: plateK .25s ease-out .5s both; }
.motion .proof .press-in .plates--off::before { animation: plateBlue .6s cubic-bezier(.2,.7,.2,1) both; }
.motion .proof .press-in .plates--off::after { animation: plateRed .6s cubic-bezier(.2,.7,.2,1) .18s both; }
@keyframes jolt { 0% { transform: none; } 35% { transform: translate(var(--jx), var(--jy)); } 100% { transform: none; } }
.proof .jolt::before { --jx: -3px; --jy: 1px; }
.proof .jolt::after { --jx: 3px; --jy: -1px; }
/* long glitch: plays ~0.9s when the cover or title is hovered (site.js adds .is-jolting) */
@keyframes jolt-long {
  0% { transform: none; }
  6% { transform: translate(calc(var(--jx) * 1.4), var(--jy)); }
  12% { transform: translate(calc(var(--jx) * -.6), calc(var(--jy) * -1)); }
  18% { transform: none; }
  28% { transform: translate(calc(var(--jx) * 2), calc(var(--jy) * 2)); }
  34% { transform: translate(calc(var(--jx) * .5), 0); }
  42% { transform: none; }
  52% { transform: translate(calc(var(--jx) * -1.2), calc(var(--jy) * -1.5)); }
  58% { transform: translate(calc(var(--jx) * 1.1), calc(var(--jy) * .5)); }
  66% { transform: none; }
  76% { transform: translate(calc(var(--jx) * .7), calc(var(--jy) * -.5)); }
  84% { transform: none; }
  100% { transform: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {.proof .card.is-jolting .jolt::before, .proof .card.is-jolting .jolt::after { animation: jolt-long .9s steps(1, end) both; }}
@media (hover: none) and (prefers-reduced-motion: no-preference) {.proof .card.in .jolt::before, .proof .card.in .jolt::after { animation: jolt .6s cubic-bezier(.2,.7,.2,1) .2s; }}
.proof .section { padding-block: clamp(72px, 10vw, 140px); }
.proof .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.proof .sec-head .eyebrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.proof .sec-head .h2 { grid-column: 1 / span 8; }
.proof .sec-head .note { grid-column: 9 / -1; color: var(--ink-2); max-width: 36ch; }
@media (max-width: 1023px) {.proof .sec-head { grid-template-columns: 1fr; }
.proof .sec-head .h2, .proof .sec-head .note { grid-column: 1 / -1; }}
.proof .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.proof .eyebrow b { color: var(--red-text); font-weight: 500; }
.proof .divider { display: flex; align-items: center; gap: 16px; }
.proof .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.proof .proofs { row-gap: clamp(64px, 8vw, 120px); }
.proof .card { text-decoration: none; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.proof .card .frame { background: var(--stock); overflow: hidden; }
.proof .card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.proof .card .frame.contain img { object-fit: contain; padding: 8%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {.proof .card:hover .frame img { transform: scale(1.025); }}
.proof .card .cover { aspect-ratio: 4 / 5; }
.proof .card-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.proof .card h3 { font-size: clamp(44px, 5.4vw, 80px); }
.proof .card .idea { font-size: var(--t4); line-height: 1.3; max-width: 30ch; }
.proof .tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.proof .tags li { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule); padding: 3px 8px; }
.proof .card .go { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--red-text); }
.proof .c7 { grid-column: span 7; }
.proof .c5 { grid-column: span 5; }
.proof .c12 { grid-column: 1 / -1; }
.proof .c5.lower { padding-top: clamp(0px, 14vw, 200px); }
.proof .card--wide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 22px; align-items: end; }
.proof .card--wide .frame { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
.proof .card--wide .body { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 1023px) {.proof .c7, .proof .c5, .proof .c12 { grid-column: 1 / -1; }
.proof .c5.lower { padding-top: 0; }
.proof .card--wide { grid-template-columns: 1fr; }
.proof .card--wide .frame, .proof .card--wide .body { grid-column: 1 / -1; }}
.proof .rev { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--red-text); border: 1.5px solid var(--red-text); padding: 4px 8px; transform: rotate(-2deg); width: fit-content; }
.proof.band { background: transparent; color: var(--band-fg); --ink: var(--band-fg); --ink-2: var(--band-2); --rule: color-mix(in srgb, var(--band-fg) 22%, transparent); --mark: var(--band-fg); --red-text: #7D86FF; --red: #EC008C; --blue: #7D86FF; --plate-blend: screen; --stock: #18181C; --paper: #0C0C0E; }
.proof.band ::selection { background: var(--red); }
.proof.band .btn { border-color: var(--band-fg); color: var(--band-fg); }
.proof .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.proof .chip { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; min-height: 44px; border: 1.5px solid var(--rule); background: transparent; cursor: pointer; white-space: nowrap; }
.proof .chip:hover { border-color: var(--ink); }
.proof .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.proof .chip .n { color: var(--ink-2); margin-left: 6px; }
.proof .chip[aria-pressed="true"] .n { color: var(--rule); }
@media (max-width: 639px) {.proof .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); padding-bottom: 6px; scrollbar-width: none; }}
.proof .tiles { row-gap: clamp(40px, 5vw, 64px); }
.proof .tile { grid-column: span 4; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1023px) {.proof .tile { grid-column: span 4; }}
@media (max-width: 639px) {.proof .tile { grid-column: span 2; }}
.proof .tile .frame { aspect-ratio: 4 / 5; background: var(--stock); display: grid; place-items: center; padding: 10%; }
.proof .tile .frame img { max-height: 100%; width: auto; object-fit: contain; }
.proof .tile .t { font-family: var(--display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.05; }
.proof .tile:hover .t { color: var(--red-text); }
.proof .tile .sub { color: var(--ink-2); }
.proof .tile[hidden] { display: none; }
.proof dialog.lightbox { border: 0; padding: 0; max-width: min(1100px, calc(100vw - 32px)); width: 100%; max-height: calc(100dvh - 32px); background: var(--paper); color: var(--ink); }
.proof dialog.lightbox::backdrop { background: color-mix(in srgb, #111 72%, transparent); }
.proof .lb { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); max-height: calc(100dvh - 32px); }
.proof .lb-media { background: var(--stock); overflow-y: auto; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.proof .lb-media img { margin-inline: auto; max-height: 72vh; width: auto; }
.proof .lb-info { padding: 32px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.proof .lb-close { align-self: flex-end; }
@media (max-width: 760px) {.proof .lb { grid-template-columns: 1fr; overflow-y: auto; }
.proof .lb-media { padding: 20px; }
.proof .lb-info { padding: 20px; }
.proof .lb-media img { max-height: none; }}
.proof .case { padding-bottom: clamp(64px, 8vw, 120px); }
.motion .proof .case.enter { animation: sheet .3s cubic-bezier(.2,.7,.2,1); }
@keyframes sheet { from { transform: translateY(28px); opacity: .4; } }
.proof .case-head { padding-block: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 48px); row-gap: 24px; }
.proof .case-head .crumbs { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.proof .case-head h1 { grid-column: 1 / -1; font-size: clamp(64px, 11vw, 160px); }
.proof .case-head .idea { grid-column: 1 / span 8; font-size: var(--t4); line-height: 1.3; font-weight: 500; max-width: 40ch; }
@media (max-width: 1023px) {.proof .case-head .idea { grid-column: 1 / -1; }}
.proof .case-hero { margin-bottom: 0; }
.proof .case-hero .frame { background: var(--stock); }
.proof .case-hero img { width: 100%; max-height: 82vh; object-fit: contain; }
.proof .specs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h)); z-index: 20; background: var(--paper); border-block: 1px solid var(--ink); margin-block: clamp(40px, 5vw, 64px); transition: top .3s ease; }
.nav-hidden .proof .specs { top: env(safe-area-inset-top, 0px); }
.proof .specs dl { margin: 0; display: grid; grid-template-columns: 1.1fr .5fr 1.3fr 1.1fr 1.2fr; gap: var(--gutter); padding-block: 12px; }
.proof .specs dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-2); text-transform: uppercase; }
.proof .specs dd { margin: 2px 0 0; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4; }
.proof .specs details { display: none; }
@media (max-width: 1023px) {.proof .specs { position: static; }
.proof .specs .full { display: none; }
.proof .specs details { display: block; padding-block: 12px; }
.proof .specs summary { cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; list-style: none; display: flex; justify-content: space-between; min-height: 32px; align-items: center; }
.proof .specs summary::-webkit-details-marker { display: none; }
.proof .specs summary::after { content: "+"; font-size: 18px; }
.proof .specs details[open] summary::after { content: "−"; }
.proof .specs details dl { grid-template-columns: 1fr; gap: 10px; padding-block: 8px 4px; }}
.proof .spine { row-gap: 28px; margin-bottom: clamp(56px, 7vw, 96px); }
.proof .spine .lab { grid-column: 1 / span 3; }
.proof .spine .txt { grid-column: 4 / span 7; font-size: var(--t4); line-height: 1.4; }
@media (max-width: 1023px) {.proof .spine .lab, .proof .spine .txt { grid-column: 1 / -1; }
.proof .spine .txt { font-size: 20px; }}
.proof .blocks { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); }
.proof .fig { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.proof .fig .frame { background: var(--stock); }
.proof .fig img { margin-inline: auto; max-height: min(88vh, 1100px); width: auto; }
.proof .fig-wide img { max-height: none; }
.proof .fig figcaption { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: .02em; max-width: 70ch; }
.proof .fig-wide img { width: 100%; }
.proof .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gutter) * 2); align-items: start; }
@media (max-width: 760px) {.proof .pair { grid-template-columns: 1fr; gap: 48px; }}
.proof .chapter { row-gap: 32px; }
.proof .chapter .ch-lab { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 10px; }
.proof .chapter .ch-body { grid-column: 4 / -1; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.proof .chapter .h3 { max-width: 22ch; }
.proof .chapter .ch-text { display: flex; flex-direction: column; gap: 14px; max-width: 64ch; }
.proof .chapter .figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gutter) * 2); align-items: start; }
.proof .chapter .figs.one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1023px) {.proof .chapter .ch-lab, .proof .chapter .ch-body { grid-column: 1 / -1; }}
@media (max-width: 760px) {.proof .chapter .figs { grid-template-columns: 1fr; gap: 48px; }}
.proof .chapter--production { background: var(--stock); padding: clamp(28px, 4vw, 56px); margin-inline: calc(var(--margin) * -0.5); position: relative; --paper-local: var(--stock); }
.proof .chapter--production .fig .frame { background: var(--paper); }
.proof .chapter--production .bar-row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
@media (max-width: 639px) {.proof .chapter--production { margin-inline: calc(var(--margin) * -1); }}
.proof .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--gutter); }
.proof .swatch { display: flex; flex-direction: column; gap: 10px; }
.proof .swatch .chipc { aspect-ratio: 3 / 2; border: 1px solid var(--rule); }
.proof .swatch dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-family: var(--mono); font-size: 11.5px; }
.proof .swatch dt { color: var(--ink-2); }
.proof .swatch dd { margin: 0; }
.proof .swatch .nm { font-weight: 600; font-size: 15px; }
.proof .tbl { overflow-x: auto; }
.proof .tbl table { border-collapse: collapse; width: 100%; min-width: 440px; }
.proof .tbl th { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--ink-2); padding: 10px 16px 10px 0; border-bottom: 1.5px solid var(--ink); }
.proof .tbl td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.proof .tbl td:first-child { font-weight: 600; }
.proof .next-up { border-top: 1px solid var(--rule); padding-top: 28px; }
.proof .next-proof { display: block; text-decoration: none; margin-top: clamp(64px, 8vw, 120px); border-top: 2px solid var(--ink); padding-top: 24px; }
.proof .next-proof .display { font-size: clamp(56px, 9vw, 128px); margin-top: 12px; }
.proof .next-proof:hover .display { color: var(--red-text); }
.proof .ph { border: 1.5px dashed var(--red-text); color: var(--red-text); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; padding: 14px 16px; line-height: 1.5; background: color-mix(in srgb, var(--red) 5%, transparent); }
.proof .ph-inline { display: inline-block; border: 1px dashed var(--red-text); color: var(--red-text); font-family: var(--mono); font-size: 11px; padding: 1px 6px; letter-spacing: .02em; }
.no-ph .proof .ph, .no-ph .proof .ph-inline, .no-ph .proof .ph-only { display: none !important; }
@media (prefers-reduced-motion: reduce) {.proof *, .proof *::before, .proof *::after { animation: none !important; transition: none !important; }}
.proof [tabindex="-1"]:focus { outline: none; }


/* =====================================================================
   ATMOSPHERE — studio light + project auras (driven by atmosphere.js)
   Tuning lives in these tokens. Project colors live in content.js.
   ===================================================================== */
:root {
  /* lamp: the light that follows the mouse */
  --lamp-field: 760px;              /* diameter of the light on the paper */
  --lamp-core: 180px;               /* diameter of the bright point */
  --lamp-paper: 255 255 255;        /* color of the light, as r g b */
  --lamp-field-a: .62;              /* field strength on the paper */
  --lamp-core-a: .45;               /* core strength (soft-light, so ink stays put) */
  /* auras: each project's colored light */
  --aura-a: 52;                     /* center opacity, in % */
}

/* ---------- lamp ---------- */
.lamp { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .7s ease; will-change: transform, opacity; contain: strict; }
.lamp.is-on { opacity: 1; }
/* field sits under the page content: it lights the paper, never the work */
.lamp-field { width: var(--lamp-field); height: var(--lamp-field); z-index: -1;
  background: radial-gradient(closest-side,
    rgb(var(--lamp-paper) / var(--lamp-field-a)) 0%,
    rgb(var(--lamp-paper) / calc(var(--lamp-field-a) * .62)) 22%,
    rgb(var(--lamp-paper) / calc(var(--lamp-field-a) * .3)) 48%,
    rgb(var(--lamp-paper) / calc(var(--lamp-field-a) * .1)) 72%,
    rgb(var(--lamp-paper) / 0) 100%); }
/* core sits over everything with soft-light: blacks and whites hold, midtones glow */
.lamp-core { width: var(--lamp-core); height: var(--lamp-core); z-index: 40; mix-blend-mode: soft-light;
  background: radial-gradient(closest-side,
    rgb(255 255 255 / var(--lamp-core-a)) 0%,
    rgb(255 255 255 / calc(var(--lamp-core-a) * .55)) 26%,
    rgb(255 255 255 / calc(var(--lamp-core-a) * .2)) 56%,
    rgb(255 255 255 / 0) 100%); }

/* ---------- auras ---------- */
/* the light bleeds past the page edge; clip it there (clip, not hidden, so
   nothing becomes a scroll box and the sticky spec bar keeps working) */
main { overflow-x: clip; }
/* not isolated on purpose: the aura joins the page's own back layer, so it sits
   behind every frame and never covers the work */
.has-aura { position: relative; }

/* An aura is painted at a quarter of its size and scaled up 4x on the GPU.
   It is pure soft gradient, so the upscale is invisible, and each layer costs
   1/16th of the memory and paint of a full-size one.
   Geometry per host: --w/--h = light size, --cx/--cy = light center (% of host). */
.aura {
  --a: calc(var(--aura-a) * var(--aura-k, 1));
  --c0: rgb(var(--aura-hot-rgb) / calc(var(--a) * 1.15%));
  --c1: rgb(var(--aura-rgb) / calc(var(--a) * .7%));
  --c2: rgb(var(--aura-rgb) / calc(var(--a) * .34%));
  --c3: rgb(var(--aura-rgb) / calc(var(--a) * .1%));
  --s1: rgb(var(--aura-2-rgb) / calc(var(--a) * .38%));
  --w: 172%; --h: 154%; --cx: 50%; --cy: 47%;
  position: absolute; z-index: -1; pointer-events: none;
  left: calc(var(--cx) - var(--w) / 8); top: calc(var(--cy) - var(--h) / 8);
  width: calc(var(--w) / 4); height: calc(var(--h) / 4);
  opacity: 0; transform: scale(calc(4 * .92));
  transition: opacity 1.5s cubic-bezier(.33, 0, .2, 1), transform 2.2s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
/* the light itself; on its own layer so hover can brighten it without
   touching the scroll-driven opacity of its parent */
.aura::before {
  content: ""; position: absolute; inset: 0; opacity: .82; transition: opacity .5s ease;
  /* every gradient ends inside the box, so the light never shows an edge */
  background:
    radial-gradient(44% 42% at var(--aura-at, 50% 46%), var(--c0) 0%, var(--c1) 28%, var(--c2) 58%, var(--c3) 82%, rgb(var(--aura-rgb) / 0) 100%),
    radial-gradient(30% 28% at 64% 66%, var(--s1) 0%, rgb(var(--aura-2-rgb) / 0) 100%);
}
.aura.is-lit { opacity: 1; transform: scale(4); }
@media (hover: hover) { .card:hover .aura::before, .tile:hover .aura::before, .tile:focus-visible .aura::before { opacity: 1; } }
/* work cards: atmosphere.js writes opacity + transform from scroll position
   every frame, so only a short transition smooths sudden jumps */
.aura--card, .aura--wide { transition: opacity .3s linear, transform .3s linear; }

/* placement per host */
.aura--wide { grid-column: 1 / span 7; grid-row: 1; --w: 148%; --h: 172%; --cy: 50%; }
@media (max-width: 1023px) { .aura--wide { grid-column: 1 / -1; } }
.aura--hero { --w: 116%; --h: 184%; --cy: 50%; }
.aura--tile { --w: 160%; top: 0; height: auto; aspect-ratio: 1 / 1.05; margin-top: 41.5%; transition-duration: .7s, .9s; }
@media (hover: hover) {
  .tile:hover .aura--tile, .tile:focus-visible .aura--tile { opacity: .9; transform: scale(4); }
}
/* phones: a tighter light that stays on screen */
@media (max-width: 639px) { .aura--card, .aura--wide { --w: 132%; --h: 144%; } }

/* a slow drift while the project passes through the viewport (Chromium only,
   runs on the compositor). translate is measured on the quarter-size box. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aura--card, .aura--wide, .aura--hero { animation: aura-drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes aura-drift { from { translate: 0 26%; } to { translate: 0 -26%; } }

/* reduced motion: no drift or scale, the light only fades */
@media (prefers-reduced-motion: reduce) {
  html .aura { transform: scale(4) !important; transition: opacity .8s linear !important; }
  html .lamp { transition: opacity .3s linear !important; }
}
@media print { .lamp, .aura { display: none !important; } }

/* auras on INK's dark sections use the old dark-ground strength */
.is-ink { --aura-a: 58; }

/* ---------- fitting the restored pieces into INK ---------- */
/* line the old grid up with INK's side margins on the home page */
.work .proof, .archive .proof { --margin: clamp(16px, 4vw, 56px); --max: calc(1680px - 2 * clamp(16px, 4vw, 56px)); }
/* case pages start below INK's fixed top bar */
.proof.case-view { padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); }
.proof .case-head h1:focus { outline: none; }
/* padding counts inside widths (the previous build set this globally) */
.proof, .proof *, .proof *::before, .proof *::after { box-sizing: border-box; }
.proof .card-meta .eyebrow, .proof .idea, .proof .sub, .proof figcaption, .proof .txt, .proof dd { overflow-wrap: anywhere; }

/* =====================================================================
   PERFORMANCE TIERS
   full     desktop with a real mouse: everything
   touch    phones and tablets (html:not(.fine)): same design, no live
            backdrop blur and no blur-in on reveals (opacity + lift only)
   lite     few cores / low memory / Data Saver: as touch, plus the cursor
            light's core glows without a blend mode
   reduced  prefers-reduced-motion: handled throughout site.css / proof.css
   ===================================================================== */
/* the frosted bar re-blurs everything under it on every scrolled frame; on phones
   and light devices a near-opaque ground reads the same and costs nothing */
html:not(.fine) .bar.is-solid, .lite .bar.is-solid { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(232 231 227); }
html:not(.fine) .bar.is-solid.on-ink, .lite .bar.is-solid.on-ink { background: rgb(12 12 14); }
.motion:not(.fine) .pending, .motion.lite .pending { filter: none; }
.lite .lamp-core { mix-blend-mode: normal; --lamp-core-a: .2; }

/* case-page cover: keep it to about one comfortable screen so the story starts sooner */
.proof .fig.case-hero img { width: auto; max-width: 100%; max-height: min(76vh, 760px); margin-inline: auto; }

/* a chapter figure that spans both columns (span: true in content.js) */
.proof .chapter .figs .fig-wide { grid-column: 1 / -1; }
/* grouped views of one object (e.g. every side of an assembled box) */
.proof .fig-group .group-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.proof .fig-group .group-item { display: grid; gap: 8px; }
.proof .fig-group .group-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.proof .fig-group .group-label { font: 500 var(--t-xs)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6b6a66); }
@media (max-width: 760px) { .proof .fig-group .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* AI design work: screenshots fill the frame; a clear AI-assisted label */
.proof .ai-tile .frame { aspect-ratio: 16 / 10; padding: 0; overflow: hidden; place-items: start center; }
.proof .ai-tile .frame img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: top center; }
.ai-badge { font-weight: 500; padding: 2px 6px; border: 1px solid currentColor; border-radius: 3px; }
.proof .ai-role { font-family: var(--mono, monospace); font-size: 13px; letter-spacing: .02em; }
.proof .ai-tile .frame.fit-contain { background: #EDECE8; place-items: center; }
.proof .ai-tile .frame.fit-contain img { height: auto; object-fit: contain; }

/* ---------- AI project pages: every page + live preview ---------- */
.proof .ai-tile.ai-project { text-decoration: none; color: inherit; }
.proof .ai-tile .go { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.aip-view .aip-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 8px; }
.proof .aip-launch, .aip-launch { appearance: none; border: 0; cursor: pointer; background: var(--ink, #0C0C0E); color: var(--paper, #ECEBE7); font: 600 15px/1 var(--body, sans-serif); padding: 16px 22px; border-radius: 999px; min-height: 48px; }
.proof .aip-launch:hover { background: #2E3BFF; color: #FFFFFF; }
.aip-view .aip-about p { margin: 0 0 14px; }
.aip-sec { margin-top: clamp(48px, 7vw, 96px); }
.aip-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--line, #ccc); padding-top: 18px; margin-bottom: 24px; }
.aip-grid { display: grid; gap: 28px 24px; }
.aip-grid.aip-desktop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aip-grid.aip-phone { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.aip-page { appearance: none; background: none; border: 0; padding: 0; text-align: left; cursor: zoom-in; display: grid; gap: 10px; color: inherit; min-width: 0; }
.aip-shot { display: block; overflow: hidden; border: 1px solid rgb(12 12 14 / .14); background: #fff; box-shadow: 0 18px 34px -24px rgb(0 0 0 / .45); transition: transform .3s; }
.aip-desktop .aip-shot { aspect-ratio: 16 / 10; }
.aip-phone .aip-shot { aspect-ratio: 9 / 19.5; border-radius: 18px; }
.aip-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.aip-page:hover .aip-shot, .aip-page:focus-visible .aip-shot { transform: translateY(-4px); }
.aip-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.aip-cta { margin-top: 48px; display: flex; justify-content: center; }
@media (max-width: 1023px) { .aip-grid.aip-phone { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .aip-grid.aip-desktop { grid-template-columns: 1fr; } .aip-grid.aip-phone { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proof .lb-page .lb-scroll { max-height: calc(100dvh - 80px); overflow-y: auto; padding: 20px; display: block; }
.proof .lb-page .lb-scroll img { max-height: none; width: 100%; height: auto; display: block; }
.proof .lb-page .lb-scroll.phone img { width: min(100%, 390px); margin-inline: auto; border-radius: 18px; }
.proof .aip-step { display: flex; gap: 10px; flex-wrap: wrap; }
.proof .aip-step .btn[disabled] { opacity: .35; cursor: default; }
dialog.aip-preview { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: #0C0C0E; color: #ECEBE7; display: none; }
dialog.aip-preview[open] { display: flex; flex-direction: column; }
dialog.aip-preview::backdrop { background: #0C0C0E; }
.pv-bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid rgb(236 235 231 / .14); font: 500 13px/1.2 var(--mono, monospace); flex-wrap: wrap; }
.pv-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-modes { display: inline-flex; border: 1px solid rgb(236 235 231 / .3); border-radius: 999px; padding: 3px; }
.pv-modes button { appearance: none; border: 0; background: none; color: inherit; font: inherit; padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.pv-modes button[aria-pressed="true"] { background: #ECEBE7; color: #0C0C0E; }
.pv-new { color: inherit; }
.pv-close { appearance: none; border: 1px solid rgb(236 235 231 / .3); background: none; color: inherit; font: inherit; padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.pv-stage { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: stretch; padding: 16px; background: #1A1A1E; }
.pv-stage iframe { border: 0; background: #fff; width: 100%; height: 100%; border-radius: 8px; }
.pv-stage.phone iframe { width: 390px; max-width: 100%; height: min(844px, 100%); border-radius: 28px; box-shadow: 0 0 0 10px #050506, 0 30px 60px -20px #000; align-self: center; }
.proof .aip-launch { background: #0C0C0E !important; color: #ECEBE7 !important; }
.proof .aip-launch:hover { background: #2E3BFF !important; color: #FFFFFF !important; }