/* Postcard — the first screen is paper and one place.
   Spacing scale 8 · 16 · 24 · 32 · 48 · 64 · 96. Type is the site's: 13px body, 11px labels. */
.pc {
  --peek: 56px;                    /* first line of the intro shows above the fold */
  --sw: max(280px, min(800px, 100vw - 48px, max(50vw, 560px), (100dvh - 280px) * 4 / 3));
  --spring: linear(0, 0.0214, 0.0769, 0.1549, 0.2463, 0.3437, 0.4416, 0.5358, 0.6235, 0.7028, 0.7729, 0.8333, 0.8842, 0.9261, 0.9597, 0.9859, 1.0056, 1.0197, 1.0293, 1.0351, 1.0379, 1.0384, 1.0372, 1.0348, 1.0316, 1.028, 1.0243, 1.0205, 1.017, 1.0137, 1.0107, 1.0081, 1.0059, 1.004, 1.0025, 1.0013, 1);
  --ink: #111;
}
[data-theme="dark"] .pc { --ink: #fafafa; }
.pc .m-page { padding-top: 32px; }
.pc .m-top-controls { top: 35px; }

/* top bar: the avatar is the persona switch — a little more presence, still quiet */
.pc { --av: 42px; --top: 76px; }
.pc .m-header { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; }
.pc .m-top-controls { z-index: 5; }
.pc .m-avatar-picker { width: var(--av); height: calc(var(--av) + 2px); margin: 0; flex: none; }
.pc .m-avatar-card { width: var(--av); height: calc(var(--av) + 2px); padding: 2px 2px 4px; border-radius: 12px; transform: translate(4px, 1px) rotate(6deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(24,24,24,.08), 0 3px 8px rgba(24,24,24,.08);
  transition: transform 420ms var(--spring), box-shadow 200ms ease-out, scale 120ms cubic-bezier(0.2, 0, 0, 1); }
.pc .m-avatar-card.is-active { transform: rotate(-1.5deg); }
.pc .m-avatar { border-radius: 9px; }
/* hover: the active card tips back and the other side slides out from behind it, like turning a print over */
.pc .m-avatar-picker:is(:hover, :has(.m-avatar-card:focus-visible), .is-open) .m-avatar-card.is-active { transform: rotate(-4deg) translate(-1px, -1px); }
.pc .m-avatar-picker:is(:hover, :has(.m-avatar-card:focus-visible), .is-open) .m-avatar-card:not(.is-active) { transform: translate(24px, 5px) rotate(9deg); }
.pc .m-avatar-card { cursor: pointer; }
.pc .m-avatar-card:active { scale: .94; }
.pc .m-avatar-card:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 12px; }
.pc-persona-hint { font-size: 11px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: #84817c; white-space: nowrap;
  margin-left: 22px; opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity 180ms ease-out, transform 260ms cubic-bezier(0.2, 0, 0, 1); }
.pc-persona-hint::after { content: ' \2192'; letter-spacing: 0; }
.pc .m-avatar-picker:is(:hover, :has(.m-avatar-card:focus-visible)) + .pc-persona-hint { opacity: 1; transform: none; transition-delay: 80ms; }
@media (hover: none) { .pc .m-avatar-picker.is-open + .pc-persona-hint { opacity: 1; transform: none; } }
[data-theme="dark"] .pc-persona-hint { color: #8f8c86; }
.pc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero ---------- */
.pc-hero {
  position: relative;
  min-height: calc(100vh - var(--top) - var(--peek));
  min-height: calc(100dvh - var(--top) - var(--peek));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 0 48px;
  margin: 0;
  box-sizing: border-box;
}
.pc-hero .ls { width: var(--sw); margin-inline: calc((100% - var(--sw)) / 2); position: relative; z-index: 1; }
.pc-hero .ls-caption { text-align: center; margin-top: 8px; text-wrap: balance; }
/* desktop: the caption may run a little past the card, so the name opening up on hover never knocks the line into two */
@media (min-width: 601px) { .pc-hero .ls-caption { margin-inline: calc(-1 * max(0px, min(160px, (100vw - var(--sw)) / 2 - 64px))); } }
.pc .m-profile-panel[data-profile-panel="design"] { padding-top: 0; }
.pc .m-profile-panel[data-profile-panel="photography"] { padding-top: 0; }

/* caption: the postcard speaks */
.pc .ls-caption .ls-where { white-space: normal; }
.pc .ls-who { color: inherit; }
.pc-note-wrap { white-space: nowrap; position: relative; display: inline-block; }
/* "Earlier sightings": a real link to the Timeline, dressed exactly like "Leave a note" */
.pc-tl-wrap { white-space: nowrap; }
.ls-caption.is-photo .pc-tl-wrap { display: none; }
.pc-note, .pc-tl {
  font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--text);
  border: 0; background: none; padding: 0; margin: 0;
  display: inline-block; transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms ease-out;
}
.pc-note, .pc-tl { text-decoration: underline dashed #C8DDD4; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.pc-note:hover, .pc-tl:hover { text-decoration-color: #a9c8bb; }
.pc-note:active, .pc-note.is-press, .pc-tl:active, .pc-tl.is-press { transform: translateY(1px); }
.pc-note:focus-visible, .pc-tl:focus-visible { outline: 1px dashed currentColor; outline-offset: 4px; border-radius: 2px; }
.pc-thanks { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--text); opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 220ms ease-out, transform 320ms cubic-bezier(0.2, 0, 0, 1); }
.pc-note-wrap.is-thanks .pc-note { opacity: 0; }
.pc-note-wrap.is-thanks .pc-thanks { opacity: 1; transform: none; }

/* ---------- the card: front is the scene, back is the guest card ---------- */
.pc-card { position: relative; aspect-ratio: 4 / 3; perspective: 1800px; container-type: inline-size; }
.pc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 500ms var(--spring); }
.pc-card.is-flipped .pc-inner { transform: rotateY(-180deg); }
.pc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pc-front .ls-scene, .pc-print { position: absolute; inset: 0; transition: opacity 380ms cubic-bezier(0.2, 0, 0, 1), transform 520ms var(--spring); }
/* photography persona: the latest frame, as a print in the same place */
.pc-print { display: grid; place-items: center; opacity: 0; transform: scale(.965) rotate(-1.2deg); pointer-events: none; }
.pc-print-frame { background: #fbf9f4; box-sizing: border-box; transform: rotate(-.6deg);
  box-shadow: 0 1px 1px rgba(42, 36, 24, .08), 0 10px 28px -8px rgba(42, 36, 24, .22); }
.pc-print img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 1.5); object-fit: cover; background: #e9e6df; }
[data-theme="dark"] .pc-print-frame { background: #e6e1d8; box-shadow: 0 1px 1px rgba(0,0,0,.4), 0 14px 34px -8px rgba(0,0,0,.7); }
[data-theme="dark"] .pc-print img { filter: brightness(.9); }
.pc-card.is-photo .pc-print { opacity: 1; transform: none; pointer-events: auto; }
.pc-card.is-photo .ls-scene { opacity: 0; transform: scale(1.015); }
.pc-back { transform: rotateY(180deg); }

/* reduced motion: a crossfade instead of a flip */
@media (prefers-reduced-motion: reduce) {
  .pc-inner, .pc-card.is-flipped .pc-inner { transition: none; transform: none; }
  .pc-face { backface-visibility: visible; transition: opacity 200ms ease-out; }
  .pc-back { transform: none; opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, visibility 0s 200ms; }
  .pc-card.is-flipped .pc-back { opacity: 1; visibility: visible; transition: opacity 200ms ease-out; }
  .pc-card.is-flipped .pc-front { opacity: 0; }
}

/* ---------- the back: the scene's own paper — flat, stippled, soft-edged, in the scene's light ---------- */
.pc-back {
  --pc-paper: #f3ebdd; --pc-ink: #2a2827; --pc-line: #c9b99f;
  --line: color-mix(in srgb, var(--pc-ink) 22%, transparent);
  inset: 0;
  color: var(--pc-ink);
  font-size: 13px; line-height: 1.5; letter-spacing: 1px;
  display: grid; grid-template-columns: minmax(0, 1fr) 1px clamp(170px, 32%, 230px);
  column-gap: clamp(20px, 4.4cqw, 32px);
  padding: 7.5% 7% 6.5%;
  box-sizing: border-box; isolation: isolate;
}
.pc-paper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.pc-left { display: flex; flex-direction: column; min-width: 0; }
.pc-rule { background: var(--line); margin: 4% 0; position: relative; }
.pc-credit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; padding: 0 10px;
  background: var(--pc-paper); font-size: 8px; letter-spacing: .3em; text-transform: uppercase; opacity: .5; }
.pc-right { display: flex; flex-direction: column; min-width: 0; position: relative; }
.pc-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: clamp(14px, 3.6cqw, 26px); }
.pc-label, .pc-flabel, .pc-btn, .pc-clear, .pc-to { font-size: 11px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.pc-label { opacity: .55; }
.pc-title { font-size: 13px; }
.pc-flabel { display: block; opacity: .55; margin-bottom: 2px; }
.pc-back textarea, .pc-back input {
  display: block; width: 100%; box-sizing: border-box; border: 0; margin: 0; padding: 0; outline: none; resize: none; background: transparent;
  font-family: 'Bradley Hand', 'Segoe Print', 'Apple Chancery', 'Noto Sans JP', cursive; font-size: 23px; color: var(--pc-ink); letter-spacing: 0;
}
.pc-back ::placeholder { color: color-mix(in srgb, var(--pc-ink) 40%, transparent); }
.pc-msg textarea { line-height: 34px; height: 68px; overflow: hidden;
  background: repeating-linear-gradient(to bottom, transparent 0 33px, var(--line) 33px 34px); }
.pc-msg textarea:focus { background: repeating-linear-gradient(to bottom, transparent 0 33px, color-mix(in srgb, var(--pc-ink) 55%, transparent) 33px 34px); }
.pc-sig { position: relative; flex: 1 1 auto; min-height: 56px; margin-top: clamp(10px, 2.6cqw, 20px); display: flex; flex-direction: column; }
.pc-sig canvas { flex: 1 1 auto; width: 100%; min-height: 0; display: block; touch-action: none; cursor: crosshair; box-shadow: inset 0 -1px 0 var(--line); }
.pc-clear { position: absolute; right: 0; top: -2px; color: var(--pc-ink); border: 0; background: none; padding: 0; opacity: 0; pointer-events: none; transition: opacity 160ms ease-out; }
.pc-back.has-sig .pc-clear { opacity: .6; pointer-events: auto; }
.pc-from { margin-top: clamp(10px, 2.4cqw, 16px); }
.pc-from .pc-row { display: block; box-shadow: inset 0 -1px 0 var(--line); }
.pc-from .pc-row:focus-within { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--pc-ink) 55%, transparent); }
.pc-from input { line-height: 1.25; padding: 2px 0; }

/* stamp: whatever is on the front right now, in miniature */
.pc-stamp { align-self: flex-end; position: relative; width: clamp(64px, 15cqw, 104px); aspect-ratio: 4 / 3.3; padding: 5px; box-sizing: border-box;
  background: #fbf8f1; transform: rotate(2deg);
  -webkit-mask: radial-gradient(circle at 3px 3px, transparent 1.7px, #000 2px) -3px -3px / 6px 6px round, linear-gradient(#000 0 0) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat;
          mask: radial-gradient(circle at 3px 3px, transparent 1.7px, #000 2px) -3px -3px / 6px 6px round, linear-gradient(#000 0 0) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat; }
[data-theme="dark"] .pc-stamp { background: #ebe2d1; }
.pc-stamp canvas { width: 100%; height: 100%; display: block; }
.pc-postmark { position: absolute; width: clamp(96px, 22cqw, 150px); right: 26%; top: 14%; color: var(--pc-ink); opacity: 0; pointer-events: none;
  transform: rotate(-14deg) scale(1.35); transform-origin: 62% 50%; }
.pc-back.is-postmarked .pc-postmark { opacity: .62; transform: rotate(-9deg) scale(1);
  transition: opacity 90ms ease-out, transform 260ms cubic-bezier(0.25, 1.4, 0.5, 1); }
.pc-addr { margin-top: auto; }
.pc-addr > span { display: flex; align-items: baseline; gap: 10px; height: 38px; line-height: 38px; box-shadow: inset 0 -1px 0 var(--line); white-space: nowrap; overflow: hidden; }
.pc-to { opacity: .55; }
.pc-to:empty { display: none; }
.pc-to-name { font-family: 'Bradley Hand', 'Segoe Print', 'Apple Chancery', 'Noto Sans JP', cursive; font-size: 24px; letter-spacing: 0; }
.pc-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: clamp(14px, 3cqw, 22px); }
.pc-btn { color: var(--pc-ink); background: none; border: 0; padding: 7px 0; cursor: pointer; }
.pc-close { opacity: .6; }
.pc-close:hover { opacity: .9; }
.pc-post { padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--pc-ink) 9%, transparent);
  transition: background 160ms ease-out, opacity 160ms ease-out, transform 120ms ease-out; }
.pc-post:disabled { opacity: .4; cursor: default; }
.pc-post:not(:disabled):hover { background: color-mix(in srgb, var(--pc-ink) 15%, transparent); }
.pc-post:not(:disabled):active { transform: scale(.96); }
.pc-btn:focus-visible, .pc-clear:focus-visible { outline: 1.5px solid var(--pc-ink); outline-offset: 3px; border-radius: 4px; }
[data-lang="ja"] .pc-back textarea, [data-lang="ja"] .pc-back input { font-size: 17px; }
[data-lang="ja"] .pc-to-name { font-size: 18px; }

/* small card (phones): one column, stamp in the corner */
@container (max-width: 520px) {
  .pc-back { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: 12px; padding: 7% 7.5% 5.5%;
    grid-template-areas: "head stamp" "msg msg" "sig sig" "from actions"; }
  .pc-left, .pc-right { display: contents; }
  .pc-rule, .pc-addr { display: none; }
  .pc-head { grid-area: head; margin: 0 0 4px; gap: 0; }
  .pc-title { font-size: 13px; }
  .pc-stamp { grid-area: stamp; width: 54px; align-self: start; }
  .pc-postmark { width: 88px; right: 4px; top: 6px; }
  .pc-msg { grid-area: msg; }
  .pc-msg .pc-flabel, .pc-sig .pc-flabel { display: none; }
  .pc-msg textarea { height: 30px; line-height: 30px; font-size: 20px; background: linear-gradient(to top, var(--line) 1px, transparent 1px); }
  .pc-msg textarea:focus { background: linear-gradient(to top, color-mix(in srgb, var(--pc-ink) 55%, transparent) 1px, transparent 1px); }
  .pc-sig { grid-area: sig; margin-top: 2px; min-height: 36px; }
  .pc-sig::after { content: attr(data-label); position: absolute; left: 0; bottom: 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .4; pointer-events: none; }
  .pc-back.has-sig .pc-sig::after { opacity: 0; }
  .pc-from { grid-area: from; margin-top: 4px; align-self: end; }
  .pc-from .pc-flabel { display: none; }
  .pc-from input { font-size: 20px; }
  .pc-actions { grid-area: actions; margin: 0; align-self: end; gap: 12px; }
  .pc-post { padding: 6px 12px; }
}

/* a separator never starts a wrapped line (postcard.js tidyDots marks the group that wrapped) */
.ls-caption .is-lead > .ls-dot { display: none; }

/* caption swaps with the persona */
.ls-caption { transition: opacity 140ms ease-out; }
.ls-caption.is-swapping { opacity: 0; }
.pc-cap-photo { display: none; }
.ls-caption.is-photo .pc-cap-scene { display: none; }
.ls-caption.is-photo .pc-cap-photo { display: inline; }

/* ---------- scroll cue: ink footprints carrying on from where the figure walked off ---------- */
.pc-steps { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--ink); z-index: 0; transition: opacity 450ms ease-out; }
.pc-steps.is-gone, .pc-steps.is-away { opacity: 0; }
.pc-step { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pc-step.is-in { animation: pc-step 200ms cubic-bezier(0.2, 0, 0, 1) forwards; }
@keyframes pc-step { from { opacity: 0; transform: scale(1.35); } to { opacity: var(--a); transform: scale(1); } }
/* the last print lands with a small press, and a little ink spreads under it once */
.pc-step-last.is-in { animation: pc-step-last 460ms cubic-bezier(0.2, 0, 0, 1) forwards; }
@keyframes pc-step-last { 0% { opacity: 0; transform: scale(1.35); } 40% { opacity: var(--a); transform: scale(.86); } 70% { transform: scale(1.06); } 100% { opacity: var(--a); transform: scale(1); } }
.pc-blot { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pc-steps.is-landed .pc-blot { animation: pc-blot 700ms cubic-bezier(0.2, 0, 0, 1) 120ms forwards; }
@keyframes pc-blot { from { opacity: .16; transform: scale(.2); } to { opacity: 0; transform: scale(1.6); } }
.pc-steps.is-static .pc-step { animation: none; opacity: var(--a); transform: none; }
@media (prefers-reduced-motion: reduce) { .pc-step.is-in, .pc-step-last.is-in { animation: none; opacity: var(--a); transform: none; } .pc-blot { display: none; } }

@media (max-width: 600px) {
  .pc .m-page { padding-top: 32px; }
  .pc .m-top-controls { top: 35px; }
  /* phones: no full-height hero; a short trail, and the intro shows above the fold */
  .pc-hero { min-height: 0; padding: 32px 0 72px; justify-content: flex-start; }
  .pc .ls-caption .ls-where, .pc .ls-caption .pc-shot { display: block; }
  .pc .ls-caption .ls-where + span > .ls-dot, .pc .ls-caption .pc-shot + span > .ls-dot { display: none; }
}

/* homepage tints that follow the four lights — sizes stay the site's */
html[data-tod] .pc .m-bio { color: var(--pg-bio); }
html[data-tod] .pc .ls-caption { color: var(--pg-cap); }
html[data-tod] .pc .ls-caption .ls-where, html[data-tod] .pc .pc-shot { color: var(--pg-where); }
html[data-tod] .pc .ls-dot { color: var(--pg-dot); }
html[data-tod] .pc-persona-hint { color: var(--pg-cap); }
html[data-tod] .pc .m-highlight-muted { text-decoration-color: var(--pg-muted); }
html[data-tod] .pc .m-photo-open img, html[data-tod] .pc .m-photo-item img { background-color: var(--pg-photo); }
html[data-tod] .pc-print-frame { background: var(--pg-print); }
html[data-tod="golden"] .pc .m-avatar-card { background: #fffaf3; }
html[data-tod="morning"] .pc .m-avatar-card { background: #fcfdfe; }
.pc .m-top-controls { gap: 10px; }
@media (max-width: 600px) { .pc .m-top-controls { right: 18px; gap: 4px; } }

/* the scene recedes with the rest of the page when an experiment is in the spotlight */
@media (hover: hover) and (pointer: fine) {
  .pc-hero { transition: filter 360ms var(--ease-out), opacity 360ms var(--ease-out); }
  body:has(.m-experiment-item:hover, .m-experiment-item a:focus-visible) .pc-hero {
    filter: blur(6px);
    opacity: 0.24;
  }
}

.pc-error {
  flex: 1 0 100%;
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .02em;
  text-transform: none;
  text-align: right;
  color: var(--pc-ink);
  opacity: .72;
}
.pc-error[hidden] { display: none; }
.pc-actions { flex-wrap: wrap; }

/* ================= guest card back: a crisp card, not a vignette ================= */
.pc-back { clip-path: inset(0 round 8px); }
.pc-sig-hint { position: absolute; left: 0; bottom: 8px; font-size: 11px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; opacity: .32; pointer-events: none; transition: opacity 160ms ease-out; }
.pc-sig-hint::before { content: '\00d7'; margin-right: 8px; letter-spacing: 0; }
.pc-back.has-sig .pc-sig-hint, .pc-sig:has(canvas:active) .pc-sig-hint { opacity: 0; }
.pc-sig canvas { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--pc-ink) 30%, transparent); }
@container (max-width: 520px) { .pc-sig::after { content: none; } .pc-sig-hint { bottom: 4px; } }

/* ================= photography: the back of the print ================= */
.pc-back.is-print { inset: var(--sheet, 4% 4.5%); clip-path: inset(0 round 3px); rotate: -.6deg;
  --line: color-mix(in srgb, var(--pc-ink) 18%, transparent); padding: 6.4% 6% 5.6%; }
.pc-back.is-print textarea, .pc-back.is-print input, .pc-back.is-print .pc-to-name {
  font-family: 'Bradley Hand', 'Segoe Print', 'Apple Chancery', 'Noto Sans JP', cursive; color: var(--pc-pencil); font-weight: 400; }
.pc-back.is-print textarea, .pc-back.is-print input { font-size: 19px; }
.pc-back.is-print .pc-to-name { font-size: 20px; }
[data-lang="ja"] .pc-back.is-print textarea, [data-lang="ja"] .pc-back.is-print input { font-size: 16px; }
.pc-back.is-print .pc-stamp { background: transparent; padding: 0; -webkit-mask: none; mask: none; rotate: 0deg; transform: none; box-shadow: 0 0 0 4px var(--pc-paper), 0 0 0 4.6px color-mix(in srgb, var(--pc-ink) 14%, transparent); }
.pc-back.is-print .pc-msg textarea { background: repeating-linear-gradient(to bottom, transparent 0 33px, var(--line) 33px 34px); }

/* ================= photography persona: a small stack of prints, shuffled by hand ================= */
.pc-print { display: grid; place-items: center; }
.pc-print > * { grid-area: 1 / 1; }
.pc-under { width: var(--fw, 80%); height: var(--fh, 70%); background: var(--pg-print); box-sizing: border-box;
  box-shadow: 0 0 0 .5px rgba(42, 36, 24, .07), 0 1px 2px rgba(42, 36, 24, .06), 0 8px 20px -8px rgba(42, 36, 24, .2); }
.pc-under-1 { transform: translate(1.2%, 1.4%) rotate(2.6deg); filter: brightness(.975); }
.pc-under-2 { transform: translate(-1.4%, .8%) rotate(-3.6deg); filter: brightness(.95); }
[data-theme="dark"] .pc-under { box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 28px -10px rgba(0, 0, 0, .6); filter: brightness(.72); }
[data-theme="dark"] .pc-under-2 { filter: brightness(.6); }
.pc-print-frame.pc-next { opacity: 0; }
.pc-print { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.pc-print:focus-visible .pc-top { outline: 1.5px solid var(--ink); outline-offset: 5px; }
.pc-print:active .pc-top:not(.is-tossing) { scale: .985; }
.pc-top { transition: scale 120ms cubic-bezier(0.2, 0, 0, 1); }
.pc-shuffle { font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--text); border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  text-decoration: underline dashed #C8DDD4; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: transform 120ms cubic-bezier(0.2, 0, 0, 1); display: inline-block; }
.pc-shuffle:hover { text-decoration-color: #a9c8bb; }
.pc-shuffle:active { transform: translateY(1px); }
.pc-shuffle:focus-visible { outline: 1px dashed currentColor; outline-offset: 4px; border-radius: 2px; }
.pc-shuffle-wrap { white-space: nowrap; }

/* photography has no trail, so the intro sits at the site's normal spacing under the caption */
.pc-hero.is-photo { min-height: 0; justify-content: flex-start; padding-top: var(--hero-top, 24px); padding-bottom: 48px; }
@media (max-width: 600px) { .pc-hero.is-photo { padding-bottom: 40px; } .pc .ls-caption .pc-shot + span + .pc-shuffle-wrap > .ls-dot { display: inline; } }