@import url("resume.css");
/* Keep the way in beside the bowl controls, even on tall screens. */
#home-layout .recipe-action { position: relative; }
#home-layout .recipe-action .explore { position: absolute; top: calc(100% + 16px); bottom: auto; white-space: nowrap; }
/* Inside, the page scrolls but shows no scrollbar: the bowl fills the window, and a
   bar appearing or disappearing would shift the layout mid-dive. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
/* Inside is a reading surface. Mouse hover stirs without capturing gestures. */
body.inside #soup-stage .stage-hit { pointer-events: none; touch-action: auto; }
:root { --t-ground: #0b1220; --t-surface: #111c30; --t-ink: #f2ead8; --t-muted: #a8a293; --t-accent: #923f86; --t-accent2: #d3a754; }
.veil { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--t-ground) 30%, transparent), color-mix(in srgb, var(--t-ground) 86%, transparent)); transition: background 1s; }
.site { position: absolute; left: 0; right: 0; top: 0; z-index: 5; color: var(--t-ink); pointer-events: none; transition: color .9s; font-family: "Soup Reading Subset", ui-monospace, monospace; }
html[data-widget='home'] body > .site:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j) { display: none !important; }
html[data-widget='home'] body.inside > .site:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j) { display: block !important; }
.site a, .site button, .site .card, .site img { pointer-events: auto; }
.nav { position: sticky; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 22px clamp(20px, 5vw, 64px); font-size: 13px; z-index: 4; }
.nav .name { grid-column: 1; grid-row: 1; font: 700 18px "Soup Heading Subset", sans-serif; transform-origin: 0 0; }
.nav .links { grid-column: 3; grid-row: 1; justify-self: end; display: flex; gap: 24px; }
.nav .back { grid-column: 2; grid-row: 1; justify-self: center; }
.nav a { text-decoration: none; color: var(--t-muted); transition: color .3s; }
.nav a:hover { color: var(--t-ink); }
.back { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--t-ink) 25%, transparent); background: color-mix(in srgb, var(--t-ground) 40%, transparent);
  color: var(--t-ink); border-radius: 99px; padding: 10px 16px; font: inherit; font-size: 12px; backdrop-filter: blur(12px); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.hero { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; }
.hero h2 { font: 700 clamp(34px, 5.4vw, 68px)/1.05 "Soup Heading Subset", sans-serif; letter-spacing: -.02em; margin: 0; max-width: 14ch; text-wrap: balance; }
.hero p { font-size: 15px; line-height: 1.7; color: var(--t-muted); max-width: 44ch; margin: 22px 0 0; }
.wearing { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; padding: 8px 8px 8px 16px; border-radius: 99px; font-size: 12px; align-self: flex-start;
  background: color-mix(in srgb, var(--t-surface) 55%, transparent); border: 1px solid color-mix(in srgb, var(--t-ink) 16%, transparent); backdrop-filter: blur(16px); pointer-events: auto; }
.swatches { display: inline-flex; }
.swatches i { width: 14px; height: 14px; border-radius: 50%; margin-left: -4px; border: 2px solid var(--t-surface); transition: background .9s; }
/* While inside, the homepage's own new-bowl button sits in the intro card,
   looking exactly as it does under the bowl. */
.bowl-slot { display: flex; }
.bowl-slot [data-recipe-button] { max-width: none; color: var(--soup-text); font-family: "Soup Reading Subset", monospace; line-height: 1.3;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 100ms ease-out; }
.hero-note { box-sizing: border-box; width: min(100%, 480px); align-self: flex-start; margin-top: 22px; padding: 24px; border-radius: 18px;
  background: color-mix(in srgb, var(--t-surface) 92%, transparent); backdrop-filter: blur(22px) saturate(1.2); }
.hero-note p { color: var(--t-ink); margin: 0; }
.hero-note .wearing { display: flex; flex-wrap: wrap; margin-top: 20px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
.hero-note .wearing .bowl-slot, .hero-note .swatches { flex-shrink: 0; }
h3 { font: 400 12px "Soup Reading Subset", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); margin: 0 0 20px; }
section { padding: 56px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { border-radius: 18px; padding: 24px; min-height: 190px; display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--t-surface) 58%, transparent); border: 1px solid color-mix(in srgb, var(--t-ink) 12%, transparent);
  backdrop-filter: blur(22px) saturate(1.2); transition: transform .4s cubic-bezier(.19,1,.22,1), background .9s, border-color .3s; box-shadow: 0 1px 0 color-mix(in srgb, var(--t-ink) 10%, transparent) inset, 0 20px 40px #0003; }
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--t-accent2) 55%, transparent); }
.card-shell { position: relative; display: flex; min-width: 0; }
.card-shell > .card { flex: 1; min-width: 0; }
.card-shell .meta { padding-right: 44px; }
.soup-inspect { position: absolute; top: 16px; right: 16px; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--t-ink); background: color-mix(in srgb, var(--t-ground) 60%, transparent); border: 1px solid color-mix(in srgb, var(--t-ink) 24%, transparent); transition: background .2s, color .2s; }
.soup-inspect .hi { width: 20px; height: 20px; }
.soup-inspect:hover, .soup-inspect[aria-pressed="true"] { color: #7fe3ff; background: rgba(6, 20, 44, .85); }
.soup-inspect:focus-visible { outline: 2px solid var(--t-accent2); outline-offset: 3px; }
.card .meta { font-size: 11px; color: var(--t-muted); display: flex; gap: 10px; }
.card .meta b { font-weight: 400; color: var(--t-accent2); transition: color .9s; }
.card h4 { font: 700 22px/1.15 "Soup Heading Subset", sans-serif; margin: auto 0 0; }
.card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--t-muted); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 16px 30px #0004; }
.site [hidden] { display: none !important; }
.about-copy { padding: 24px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--t-ink) 12%, transparent);
  background: color-mix(in srgb, var(--t-surface) 92%, transparent); backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--t-ink) 10%, transparent) inset, 0 20px 40px #0003;
  font: 400 14px/1.7 "Soup Reading Subset", ui-monospace, monospace; transition: background .9s, border-color .3s; }
.about-copy p { margin: 0 0 24px; }
.about-copy .about-values { font: 700 22px/1.15 "Soup Heading Subset", sans-serif; margin: 0 0 24px; }
.about-copy ul { margin: -12px 0 0; padding-left: 1.25em; }
.about-copy li + li { margin-top: 12px; }
/* Without the intro, the nav's right side says what the page is wearing and holds the new-bowl button. */
/* The new-bowl button joins the pill mid-dive and leaves before resurfacing; a fixed
   height keeps the nav row (and so the name's landing spot) from jumping when it does. */
.nav .wearing { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; padding: 6px 6px 6px 16px; box-sizing: border-box; min-height: 58px; }
.nav .wearing .bowl-slot, .nav .swatches { flex-shrink: 0; }
/* As the screen narrows: the full sentence, then just the palette name, then just the colors, then nothing. */
.nav .wearing-label { white-space: nowrap; }
@media (max-width: 1360px) { .nav .wearing-lead { display: none; } }
@media (max-width: 1180px) { .nav .wearing #pal { display: none; } .nav .wearing { gap: 10px; padding-left: 12px; } }
/* Below this there's no room beside the centered back button, so it goes, and the
   back button takes the top right instead (phones too: one row, not two). */
@media (max-width: 919px) {
  .nav .wearing { display: none; }
  .simple-page .nav { grid-template-columns: 1fr auto; }
  .simple-page .nav .back { grid-column: 2; grid-row: 1; justify-self: end; }
}
/* Too narrow for the name and the back button side by side: the button gets its own row. */
@media (max-width: 359px) {
  .simple-page .nav { grid-template-columns: 1fr; }
  .simple-page .nav .back { grid-column: 1; grid-row: 2; justify-self: center; }
}
.simple-page .nav .name { white-space: nowrap; }
/* No set descriptions under the gallery titles on the simple page. */
.simple-page .gallery-view .gv-head p, .simple-page .gallery-view .gv-hero-text p { display: none; }
/* Without the intro, the first section starts a little below the nav. */
.simple-page #about { padding-top: clamp(40px, 10svh, 96px); }
/* Room to breathe after the last section. */
.site .wrap > section:last-of-type { padding-bottom: 120px; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1); }
.shown .reveal { opacity: 1; transform: none; }
@media (max-width: 700px) { .nav { gap: 12px; grid-template-columns: 1fr; padding-top: 16px; } .nav .links { display: none; } .nav .back { grid-column: 1; grid-row: 2; } }

/* Blueprint mode: the ink recedes under a drafting wash, the page steps back. */
.bp-canvas { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s; }
html[data-widget='home'] body > .bp-canvas:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j) { display: block !important; }
.blueprint .bp-canvas { opacity: 1; }
.veil { transition: background 1s; }   /* opacity is driven per frame by the dive; a transition would make it lag */
.blueprint .veil { background: radial-gradient(120% 90% at 50% 45%, rgba(10, 34, 72, .58), rgba(6, 20, 44, .86)) !important; }
.site .wrap { transition: opacity .6s; }
/* Everything but the soup card steps back; the card stays lit and hoverable. */
.site .wrap > :not(.reveal), #work > h3, .card { transition-property: opacity, transform, background, border-color, box-shadow; transition-duration: .5s, .4s, .9s, .3s, .4s; transition-timing-function: cubic-bezier(.2,.8,.2,1); }
.blueprint .site .wrap > :not(#work), .blueprint #work > h3, .blueprint #work .card:not(.peeking) { opacity: .08 !important; }
.site .nav .links, .site .back { transition: opacity .5s cubic-bezier(.2,.8,.2,1); }
.blueprint .site .nav .links, .blueprint .site .back { opacity: .35; }
.card.peeking { border-color: rgba(127, 227, 255, .55); background: rgba(6, 20, 44, .5); box-shadow: 0 1px 0 rgba(127, 227, 255, .25) inset, 0 24px 48px #0006; }
.card.peeking .meta b { color: #7fe3ff; }
.blueprint .site .nav a { color: #9fc2e6; }
.bp-hud { position: fixed; left: clamp(20px, 5vw, 64px); bottom: 64px; z-index: 6; display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px;
  font: 11px/1.5 "Soup Reading Subset", ui-monospace, monospace; color: #bcd6f2; background: rgba(6, 20, 44, .55); border: 1px solid rgba(127, 227, 255, .3);
  backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s cubic-bezier(.19,1,.22,1); pointer-events: none; max-width: min(460px, calc(100vw - 32px)); }
html[data-widget='home'] body > .bp-hud:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j) { display: none !important; }
.blueprint .bp-hud { opacity: 1; transform: none; }
.bp-hud b { font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: #7fe3ff; margin-bottom: 4px; }
.bp-hud em { font-style: normal; color: #eaf4ff; }
.bp-hud .key { margin-top: 6px; color: #8fb0d2; }
.bp-hud .key i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; vertical-align: middle; margin: 0 5px 0 2px; }
.bp-hud .k-flow { border-color: #7fe3ff; } .bp-hud .k-cw { border-color: #7fe3ff; border-top-style: dotted; } .bp-hud .k-ccw { border-color: #ff8bd8; border-top-style: dotted; }
.bp-hud .k-oil { width: 10px !important; height: 10px !important; border: 1.5px solid #ffd27a !important; border-radius: 50%; }
@media (max-width: 700px) { .bp-hud { bottom: 58px; font-size: 10px; } }

/* Photography: a preview per set (Prints; Skim and Lens are archived), opening into a gallery. */
.photos.photo-sets { display: block; }
.ps-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; animation: ps-in .5s cubic-bezier(.2,.8,.2,1); }
@keyframes ps-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 800px) { .ps-previews { grid-template-columns: 1fr; } }
:where(.ps-previews button) { all: unset; box-sizing: border-box; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.ps-previews button:focus-visible { outline: 2px solid var(--t-accent2); outline-offset: 4px; border-radius: 18px; }

/* Skim (archived) */
.skim { display: block; }
.skim-frames { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: color-mix(in srgb, var(--t-surface) 70%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--t-ink) 12%, transparent) inset, 0 24px 48px #0005;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
@media (max-width: 800px) { .skim-frames { aspect-ratio: 4 / 3; } }
@media (hover: hover) { .skim:hover .skim-frames { transform: translateY(-3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--t-ink) 12%, transparent) inset, 0 30px 56px #0006; } }
.skim:active .skim-frames { transform: scale(.99); }
.skim-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.001); transition: opacity .8s ease, transform 7s linear; }
.skim-frames img.on { opacity: 1; transform: scale(1.06); }
.skim.skimming .skim-frames img { transition: opacity .12s linear, transform 7s linear; }
.skim.flown .skim-frames img.on { opacity: 0; transition: none; }
.skim-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.6)); z-index: 1; }
.skim-label { position: absolute; left: 18px; right: 18px; bottom: 30px; z-index: 2; display: flex; align-items: baseline; gap: 10px; color: #fff; }
.skim-label b { font: 700 26px/1 "Soup Heading Subset", sans-serif; letter-spacing: -.01em; }
.skim-label em { font-style: normal; font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.skim-ticks { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: flex; gap: 3px; }
.skim-ticks i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.28); transition: background .3s; }
.skim-ticks i.on { background: #fff; }

/* Prints */
.prints { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stack { position: relative; display: block; width: 100%; aspect-ratio: 1; }
@media (max-width: 800px) { .stack { aspect-ratio: 4 / 3; } }
.stack.dealt { visibility: hidden; }
.print { position: absolute; left: 50%; top: 50%; box-sizing: border-box; padding: 7px; border-radius: 3px;
  background: linear-gradient(170deg, #f7f4ee, #e9e4d8); box-shadow: 0 1px 1px rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.34);
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--rot));
  transition: transform .62s cubic-bezier(.34,1.32,.64,1); transition-delay: calc(var(--k) * 24ms); }
.print img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px; }
@media (hover: hover) { .prints:not(.resting):hover .print { transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) rotate(var(--fr)); } }
.prints:active .stack { transform: scale(.985); }
.stack { transition: transform .15s; }
.prints-label, .lens-label { display: flex; align-items: baseline; gap: 10px; }
.prints-label b, .lens-label b { font: 700 24px/1 "Soup Heading Subset", sans-serif; letter-spacing: -.01em; }
.prints-label em, .lens-label em { font-style: normal; font-size: 11px; color: var(--t-muted); font-variant-numeric: tabular-nums; }

/* Lens (archived) */
.lens { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0; }
.lens-glass { --px: 0; --py: 0; --z: 1.08; position: relative; display: block; width: min(100%, 280px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate;
  box-shadow: 0 28px 60px #0007, 0 0 0 1px color-mix(in srgb, var(--t-ink) 18%, transparent); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 800px) { .lens-glass { width: min(72vw, 260px); } }
.lens-glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transform: scale(var(--z)) translate(calc(var(--px) * -15%), calc(var(--py) * -15%));
  transition: opacity 1s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.lens-glass img.on { opacity: 1; }
.lens.looking .lens-glass { --z: 1.75; transform: scale(1.03); }
.lens-glass::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(55% 38% at 32% 20%, rgba(255,255,255,.24), transparent 62%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.26), inset 0 16px 30px rgba(255,255,255,.12), inset 0 -26px 44px rgba(0,0,0,.5); }
.lens:active .lens-glass { transform: scale(.98); }

/* The full-screen gallery a set opens into. */
@property --gv-veil { syntax: '<number>'; inherits: true; initial-value: 0; }
.gallery-view { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  color: var(--t-ink); font-family: "Soup Reading Subset", ui-monospace, monospace; pointer-events: auto;
  background: color-mix(in srgb, var(--t-ground) calc(var(--gv-veil) * 100%), transparent); }
.gallery-view::backdrop { background: transparent; }
.gallery-view[open] { display: block; }
.gallery-view * { pointer-events: auto; }
.gv-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
/* On phones a full-screen layer can't draw under Safari's bottom bar, so photos fade out at its edge instead of being cut off. */
@media (hover: none) and (pointer: coarse) { .gv-scroll { -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); } }
.gv-bar { position: sticky; top: 0; z-index: 3; height: 76px; margin-bottom: -76px; box-sizing: border-box; display: flex; align-items: center; gap: 16px;
  padding: 0 clamp(20px, 5vw, 64px); font-size: 12px; color: var(--t-muted);
  background: linear-gradient(color-mix(in srgb, var(--t-ground) 80%, transparent), transparent); }
.gv-back { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: inherit; font-size: 12px; color: var(--t-ink); border-radius: 99px; padding: 10px 16px; backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--t-ink) 25%, transparent); background: color-mix(in srgb, var(--t-ground) 45%, transparent); transition: background .2s, transform .15s; }
@media (hover: hover) { .gv-back:hover { background: color-mix(in srgb, var(--t-surface) 80%, transparent); } }
.gv-back:active { transform: scale(.96); }
.gv-back:focus-visible { outline: 2px solid var(--t-accent2); outline-offset: 2px; }
.gv-hero { display: none; position: relative; height: min(68vh, 760px); overflow: hidden; }
.gallery-view[data-hero=on] .gv-hero { display: block; }
.gv-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(transparent, var(--t-ground)); }
.gv-hero-text { position: absolute; left: clamp(20px, 5vw, 64px); right: clamp(20px, 5vw, 64px); bottom: 28px; z-index: 1; }
.gallery-view h2 { font: 700 clamp(40px, 6vw, 76px)/1 "Soup Heading Subset", sans-serif; letter-spacing: -.02em; margin: 0; }
.gv-hero-text p, .gv-head p { margin: 12px 0 0; font-size: 13px; color: var(--t-muted); }
.gv-body { max-width: 1120px; margin: 0 auto; padding: 28px clamp(20px, 5vw, 64px) 96px; }
.gv-head { display: none; }
.gallery-view[data-hero=off] .gv-head { display: block; padding: 92px 0 30px; }
.gv-rows.holding .shot:not(.landed) { opacity: 0; }
.gv-flyer { position: fixed; z-index: 10; overflow: hidden; box-sizing: border-box; pointer-events: none !important; will-change: left, top, width, height, transform; }
.gv-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.print-flyer img { border-radius: inherit; }

/* Gallery photos */
.gv-rows { display: flex; flex-direction: column; gap: 10px; }
.gv-row { display: flex; gap: 10px; }
.shot { all: unset; box-sizing: border-box; display: block; min-width: 0; position: relative; overflow: hidden; border-radius: 10px; cursor: zoom-in; pointer-events: auto;
  background: color-mix(in srgb, var(--t-surface) 70%, transparent); box-shadow: 0 14px 28px #0004;
  transition: transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .5s ease-out; }
.shot img.loaded { opacity: 1; }
@media (hover: hover) { .gallery-view:not(.entering) .shot:hover { transform: translateY(-2px); box-shadow: 0 20px 36px #0005; } }
.shot:active { transform: scale(.985); }
.shot:focus-visible { outline: 2px solid var(--t-accent2); outline-offset: 3px; }
.shot img.lifted { opacity: 0; transition: none; }

/* Photo viewer: the photo zooms up from its spot on the page. */
@property --pv-veil { syntax: '<number>'; inherits: true; initial-value: 0; }
.photo-viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--t-ground) calc(var(--pv-veil) * 92%), transparent); color: var(--t-ink); overflow: hidden;
  font-family: "Soup Reading Subset", ui-monospace, monospace; }
.photo-viewer::backdrop { background: transparent; }
.photo-viewer, .photo-viewer * { pointer-events: auto; }
.photo-viewer[open] { display: block; }
.pv-stage { position: absolute; inset: 0; cursor: zoom-out; touch-action: pan-y; }
.pv-img { position: absolute; transform-origin: 0 0; border-radius: 6px; box-shadow: 0 30px 80px #0008; object-fit: cover; will-change: transform; user-select: none; -webkit-user-drag: none; }
.pv-bar { position: absolute; left: 24px; right: 24px; bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 12px; color: var(--t-muted); opacity: var(--pv-veil); }
.pv-caption { font-variant-numeric: tabular-nums; }
.pv-caption b { font-weight: 400; color: var(--t-ink); margin-right: 8px; }
.pv-nav { display: flex; gap: 8px; }
.pv-nav button { display: inline-grid; place-items: center; cursor: pointer; min-width: 44px; height: 40px; padding: 0 14px; border-radius: 99px; font: inherit; font-size: 13px; color: var(--t-ink);
  border: 1px solid color-mix(in srgb, var(--t-ink) 22%, transparent); background: color-mix(in srgb, var(--t-surface) 60%, transparent);
  transition: background .2s, transform .15s; }
@media (hover: hover) { .pv-nav button:hover { background: color-mix(in srgb, var(--t-surface) 90%, transparent); } }
.pv-nav button:active { transform: scale(.96); }
.pv-nav button:focus-visible { outline: 2px solid var(--t-accent2); outline-offset: 2px; }
.photo-viewer.closing .pv-bar { pointer-events: none; }
.back:focus-visible { outline: 2px solid #7fe3ff; outline-offset: 3px; }

/* Project cards that open somewhere are links. */
a.card { color: inherit; text-decoration: none; }
a.card:focus-visible { outline: 2px solid var(--t-accent2); outline-offset: 3px; }
/* Opening a project: the card grows to fill the screen (see openProject). */
.card-expand { --d: flex; position: fixed; z-index: 100; box-sizing: border-box; margin: 0; overflow: hidden; pointer-events: none;
  border: 1px solid transparent; color: var(--t-ink); font-family: "Soup Reading Subset", ui-monospace, monospace;
  backdrop-filter: blur(22px) saturate(1.2); transform: none !important; transition: none !important; min-height: 0; }
.card-expand-words { display: flex; flex-direction: column; gap: 10px; flex: none; }

/* Inside, the page's own background matches the bowl, so Safari's bars pick it up. */
html, html body { transition: background-color .6s; }
html.tinted, html.tinted body { background: var(--t-ground) !important; }
.tint-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--t-ground); opacity: 0; transition: opacity .6s; }
html.tinted .tint-layer { opacity: 1; }
/* On touch devices, Safari colours its top bar from the topmost thing at the screen's top edge, which is
   the header. Inside, the header takes the bowl's ground colour, with a soft fade under it. */
@media (hover: none) and (pointer: coarse) {
  html.tinted .nav { background-color: var(--t-ground); }
  .nav::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 36px; pointer-events: none;
    background: linear-gradient(var(--t-ground), transparent); opacity: 0; transition: opacity .6s; }
  html.tinted .nav::after { opacity: 1; }
}

/* The homepage doesn't scroll, so it shouldn't spring when pulled. Inside, scrolling keeps its normal feel. */
html:not(.tinted) { overscroll-behavior: none; }

/* Focus outlines are for keyboards. Touch and mouse taps (including a dialog taking focus after one) don't show them. */
html[data-input='pointer'] :focus-visible { outline: none; }