/* ══════════════════════════════════════════════════════════════════════
   personal.css — the "Off the clock" personal wall / scrapbook section.

   SHIPPING — loaded after style.css by index.html. Do not delete.

   The chosen direction is .pwall.v-crisp (flat, Swiss, hairline frames,
   aligned, minimal shadow), which is what index.html uses. The .v-tactile
   variant (soft shadows, tilt, pin dots, warmer) is kept as an alternative
   and is not currently referenced by any page.
   ══════════════════════════════════════════════════════════════════════ */

/* On the live page this sits inside the hero's centre column and, like the
   Selected work panel, slides up over the sticky statement (white bg + z-index). */
/* Contain the section's full-bleed so 100vw never adds a horizontal scrollbar.
   `clip` (not hidden) doesn't create a scroll container, so sticky still works. */
html { overflow-x: clip; }

/* The hero's sticky side columns stay pinned over the viewport as you scroll,
   so their (mostly empty) boxes hover above this full-bleed section and swallow
   clicks on anything beneath them — the right column covers the whole right
   edge of the collage. Let clicks fall through the empty column, while their
   actual content (social links, email) stays interactive. */
.col-left, .col-right { pointer-events: none; }
.col-left > *, .col-right > * { pointer-events: auto; }

.pwall {
  /* Sticky, like the statement: it slides up and covers the pinned statement,
     then pins itself so the projects slide up and cover it in turn — each
     section covers the previous the same way. */
  position: sticky;
  top: var(--nav-h);
  min-height: calc(100svh - var(--nav-h));
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Break out of the 60% centre column so the grid spans the whole screen. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Light-gray field with a white grid, from the shared tokens in style.css */
  background-color: var(--grid-bg);
  background-image: var(--grid-img);
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2.5rem);
  /* Keep every scrapbook item within the grey field — nothing spills onto the
     white sections above/below or off the sides, no matter how big an item gets. */
  overflow: hidden;
}
.pw-head { max-width: 1180px; margin: 0 auto clamp(2rem, 4vw, 3.25rem); }
.pw-head .section-label { font-size: 0.8rem; color: var(--muted); }
.pw-head .dia { color: var(--accent); }
.pw-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  text-transform: uppercase; font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 3rem); letter-spacing: -0.03em;
  color: var(--ink); margin-top: 0.55rem; line-height: 1.05;
}
.pw-heading em { font-style: italic; text-transform: none; }

/* The board (curated wall). Items are absolutely placed via --x/--y/--w/--rot. */
.pw-board { position: relative; width: 100%; max-width: 1262px; margin: 0 auto; aspect-ratio: 1262 / 651; }
.pw-item {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  z-index: var(--z, auto);          /* set by the Front/Back controls */
  transform: rotate(var(--rot, 0deg)); transform-origin: center;
}
.pw-cap {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-top: 9px;
}

/* Mac window */
.pw-mac { background: #fff; overflow: hidden; }
.pw-mac-bar { display: flex; gap: 6px; align-items: center; padding: 9px 11px; border-bottom: 1px solid rgba(28,27,26,0.08); }
.pw-mac-bar span { width: 9px; height: 9px; border-radius: 50%; }
.pw-mac-screen {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.04em;
  background: repeating-linear-gradient(135deg, #f4f1ec 0 14px, #faf8f5 14px 28px);
}

/* Sticky / Figma note */
.pw-note { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5; color: #3a352f; padding: 15px 16px; }
.pw-note .pw-note-tag { display:block; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }

/* Photo */
.pw-photo-img {
  aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  color: #b09a86; font-size: 11px; font-family: 'Inter', sans-serif;
  background: repeating-linear-gradient(45deg, #ece2d6 0 12px, #e6dccf 12px 24px);
}

/* Doodle */
.pw-doodle svg { display: block; width: 100%; height: auto; }

/* Quote */
.pw-quote {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.25; color: var(--ink);
}

/* ════════════════════ VARIANT A — CRISP (flat / Swiss) ════════════════════ */
.v-crisp .pw-board { }
.v-crisp .pw-item { transform: rotate(var(--rot, 0deg)); }     /* honour each item's slight tilt */
.v-crisp .pw-mac,
.v-crisp .pw-note,
.v-crisp .pw-photo-img,
.v-crisp .pw-doodle {
  border: 1px solid rgba(28,27,26,0.14); border-radius: 4px; background: #fff;
}
.v-crisp .pw-mac-bar span { border: 1px solid rgba(28,27,26,0.30); background: transparent; }
.v-crisp .pw-note { background: #fff; }
.v-crisp .pw-doodle { padding: 14px; color: var(--accent); }
.v-crisp .pw-quote { border-left: 2px solid var(--accent); padding-left: 16px; }

/* ── Richer scrapbook pieces (computer + paper + photos + objects) ─────── */
/* Terminal window */
.pw-term { background: #1c1b17; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 28px rgba(28,27,26,0.16); }
.pw-term-bar { display: flex; gap: 6px; padding: 8px 11px; background: #26241d; }
.pw-term-bar span { width: 9px; height: 9px; border-radius: 50%; }
.pw-term-bar span:nth-child(1) { background: #E4A0A0; }
.pw-term-bar span:nth-child(2) { background: #E7C19B; }
.pw-term-bar span:nth-child(3) { background: #9FDCB0; }
.pw-term-body { padding: 13px 15px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.8; color: #cfc6b3; }
.pw-term-body .g { color: #857d6b; }
.pw-term-body .a { color: #c99f8e; }

/* Photo moodboard (kraft card + grid of photos) */
.pw-moodboard { background: #e6d8c4; padding: 12px 12px 24px; border-radius: 3px; box-shadow: 0 12px 28px rgba(28,27,26,0.14); }
.pw-moodboard .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pw-moodboard .ph { aspect-ratio: 1 / 1; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.pw-moodboard .cap2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.95rem; color: #6b5f4e; text-align: right; margin-top: 8px; }

/* Object card (coffee / tote / plant …) */
.pw-obj { background: #fff; border: 1px solid rgba(28,27,26,0.12); border-radius: 4px; overflow: hidden; box-shadow: 0 6px 16px rgba(28,27,26,0.08); }
.pw-obj .im { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; color: #b09a86; font-size: 10px; letter-spacing: 0.06em; background: #f4f1ec; }
.pw-obj-img { display: block; width: 100%; height: auto; }
/* Iced coffee — true transparent cutout (no bg, no box); shape-following shadow; gentle tilt on hover. */
.pw-coffee-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(28,27,26,0.20)); transform-origin: 50% 88%; transition: transform 500ms cubic-bezier(0.34, 1.3, 0.5, 1); }
.pw-coffee:hover .pw-coffee-img,
.pw-coffee.is-live .pw-coffee-img { transform: rotate(-5deg); }
@media (prefers-reduced-motion: reduce) { .pw-coffee-img { transition: none; } }

/* Profile card (dark) */
.pw-profile { background: #1c1b17; color: #EDE7DA; border-radius: 12px; padding: 16px 14px 18px; text-align: center; box-shadow: 0 12px 28px rgba(28,27,26,0.18); }
.pw-profile .av { width: 54px; height: 54px; border-radius: 50%; margin: 2px auto 10px; background: #3a352b; }
.pw-profile .nm { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; }
.pw-profile .tl { font-family: 'Inter', sans-serif; font-size: 9.5px; line-height: 1.5; color: #9a9280; margin-top: 5px; }

/* ── Tote with real product cutouts (MacBook / iPad / lip balm) sticking out ──
   The opaque bag (z-index 2) sits in front; the items (z-index 1) poke up above
   its top edge, their lower halves hidden behind the leather. A gentle lift on hover. */
.pw-folder { position: relative; width: 100%; }
.pf-front { display: block; width: 100%; height: auto; position: relative; z-index: 2; filter: drop-shadow(0 10px 14px rgba(28,27,26,0.20)); }
/* Items live INSIDE the bag (z-index 1, behind the leather) and are hidden at
   rest; a "what's in my bag?" bubble invites you in; on hover they rise up and
   out of the bag's mouth. */
.pf-real { position: absolute; z-index: 1; height: auto; transform-origin: 50% 100%; transition: transform 580ms cubic-bezier(0.34, 1.4, 0.5, 1); will-change: transform; filter: drop-shadow(0 6px 8px rgba(28,27,26,0.22)); }
.pf-mac   { width: 37%; left: 31%; top: 47%; transform: translateY(2%) rotate(-4deg); transition-delay: 0ms; }
.pf-ipad2 { width: 29%; left: 39%; top: 46%; transform: translateY(6%) rotate(4deg); transition-delay: 55ms; }
.pf-lip   { width: 7%;  left: 55%; top: 48%; transform: translateY(2%) rotate(3deg); transition-delay: 100ms; }
/* They grow as they rise — transform-origin is the item's base, so the scale
   pushes them up and out of the bag rather than down through it. The X offsets
   fan the three apart so they don't stack on top of each other. */
/* The X offsets are percentages of each item's OWN width, so the small lip
   balm needs a much larger number than the MacBook to travel the same
   distance. These fan the three right across the bag's width and past it. */
.pw-folder:hover .pf-mac,
.is-live .pw-folder .pf-mac   { transform: translate(-105%, -122%) scale(2.05) rotate(-13deg); }
.pw-folder:hover .pf-ipad2,
.is-live .pw-folder .pf-ipad2 { transform: translate(6%, -134%)    scale(2.05) rotate(7deg); }
.pw-folder:hover .pf-lip,
.is-live .pw-folder .pf-lip   { transform: translate(520%, -126%)  scale(2.05) rotate(6deg); }
@media (prefers-reduced-motion: reduce) { .pf-real { transition: none; } }

/* "what's in my bag?" chat bubble — shown at rest, fades as the items pop out */
/* Speech bubbles — white with dark brown text. Shared by the tote and the easel. */
.pw-bubble {
  position: absolute; z-index: 4; left: 50%; top: 24%; transform: translateX(-50%);
  background: #fff; color: #4A3327; font: 600 11.5px/1.15 'Inter', sans-serif;
  letter-spacing: 0.01em; padding: 7px 12px; border-radius: 13px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(28,27,26,0.16); opacity: 1; pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease;
}
.pw-bubble::after {
  content: ""; position: absolute; left: 24px; bottom: -4px; width: 11px; height: 11px;
  background: inherit; transform: rotate(45deg); border-radius: 2px;
}
/* the bag's bubble steps aside once the items are on their way out */
.pw-folder:hover .pw-bubble,
.is-live .pw-folder .pw-bubble { opacity: 0; transform: translateX(-50%) translateY(-8px); }
/* the easel's sits just above the canvas */
.pw-canvas .pw-bubble { top: -9%; }

/* Palm pot — true transparent cutout (no bg, no box). */
.pw-plant-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(28,27,26,0.18)); }

/* Loose cut-out objects (earphones, camera, gypsophila, wax seal, tulips,
   torn journal paper) — no card, just the object with a shape-following
   shadow and a small lift on hover. */
.pw-cut-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(28,27,26,0.18)); transition: transform 420ms cubic-bezier(0.34, 1.3, 0.5, 1); }
/* Lift only — no rotate. A decorative tilt on hover fights the rotate handle:
   the piece is always hovered while you're positioning it, so a straight piece
   looked permanently crooked and could never be judged square. */
.pw-cut:hover .pw-cut-img,
.pw-cut.is-live .pw-cut-img { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .pw-cut-img { transition: none; } }

/* ── Disco balls — three stickers burst out of the profile card on hover,
      each a different size, staggered, with a slow spin while they're out. ── */
.pw-profile-item { position: absolute; }
.pw-disco {
  position: absolute; height: auto; z-index: 6; pointer-events: none;
  opacity: 0; transform: scale(0.3) rotate(-25deg);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 5px 8px rgba(28,27,26,0.28));
  transition: opacity 380ms ease, transform 620ms cubic-bezier(0.34, 1.5, 0.5, 1);
}
/* both sit off the card's top-right corner — a small one tucked in above a bigger one */
.pw-disco.d1 { width: 26%; right: -6%;  top: -26%; transition-delay: 0ms; }    /* small  */
.pw-disco.d2 { width: 42%; right: -24%; top: -4%;  transition-delay: 100ms; }  /* bigger */
.pw-profile-item:hover .pw-disco,
.pw-profile-item.is-live .pw-disco { opacity: 1; }
.pw-profile-item:hover .d1,
.pw-profile-item.is-live .d1 { transform: scale(1) rotate(-10deg); animation: pw-spin 7s linear 0.6s infinite; }
.pw-profile-item:hover .d2,
.pw-profile-item.is-live .d2 { transform: scale(1) rotate(8deg);   animation: pw-spin 9s linear 0.7s infinite reverse; }
@keyframes pw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pw-disco { transition: opacity 200ms ease; }
  .pw-profile-item:hover .pw-disco { animation: none; transform: scale(1); }
}

/* ── Camera — two sparkles flash on hover, like a shutter catching the light ── */
.pw-camera { position: absolute; }
.pw-spark {
  position: absolute; z-index: 6; pointer-events: none;
  background: #fff; opacity: 0;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.9));
}
.pw-spark.s1 { width: 26%; aspect-ratio: 1; right: 6%;  top: -12%; }
.pw-spark.s2 { width: 17%; aspect-ratio: 1; left: 10%;  bottom: -8%; }
.pw-camera:hover .s1,
.pw-camera.is-live .s1 { animation: pw-flash 900ms ease-out infinite; }
.pw-camera:hover .s2,
.pw-camera.is-live .s2 { animation: pw-flash 900ms ease-out 320ms infinite; }
@keyframes pw-flash {
  0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
  35%  { opacity: 1; transform: scale(1) rotate(35deg); }
  100% { opacity: 0; transform: scale(0.45) rotate(80deg); }
}
@media (prefers-reduced-motion: reduce) { .pw-camera:hover .pw-spark { animation: none; opacity: 0.9; } }

/* Palm — the foliage leans the way your cursor travels (personal-fx.js sets --sway) */
.pw-plant-img { transform: skewX(var(--sway, 0deg)); transform-origin: 50% 100%; transition: transform 260ms ease-out; }

/* ── Tulips — hover and the bouquet sheds: petals and leaves come loose and
      drift down, tumbling as they go. The bouquet itself barely stirs. ── */
.pw-tulips .pw-cut-img { transform-origin: 50% 92%; }
.pw-tulips:hover,
.pw-tulips.is-live { z-index: 40; }
.pw-tulips:hover .pw-cut-img,
.pw-tulips.is-live .pw-cut-img { transform: translateY(-3px); }

.pw-shed {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  will-change: transform, opacity;
}
.pw-shed.petal {                      /* cream tulip petal */
  width: 9%; aspect-ratio: 1 / 1.45;
  background: linear-gradient(158deg, #fffdf8 0%, #f3ece0 62%, #e6dcc9 100%);
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
}
.pw-shed.leaf {                       /* slim green leaf */
  width: 4.5%; aspect-ratio: 1 / 3.6;
  background: linear-gradient(160deg, #52704a 0%, #3b5733 70%, #2f4629 100%);
  border-radius: 62% 4% 62% 4%;
}
.pw-tulips:hover .pw-shed,
.pw-tulips.is-live .pw-shed {
  animation: pw-shed-fall var(--dur, 2.8s) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--delay, 0s) infinite;
}
@keyframes pw-shed-fall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.92); }
  10%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 12px), var(--dy, 115px)) rotate(var(--rot, 200deg)) scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .pw-tulips:hover .pw-shed { animation: none; }
}

/* Canvas on its easel — leans a touch on hover, like a nudged easel. */
.pw-canvas-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(28,27,26,0.18)); transform-origin: 50% 100%; transition: transform 480ms cubic-bezier(0.34, 1.3, 0.5, 1); }
.pw-canvas:hover .pw-canvas-img,
.pw-canvas.is-live .pw-canvas-img { transform: rotate(2.5deg); }
@media (prefers-reduced-motion: reduce) { .pw-canvas-img { transition: none; } }

/* ── Figma sticker — the artwork is untouched; a neon glow sits over each
      colour and only lights on hover. Centres were measured off the PNG. ── */
.pw-figma-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 16px rgba(28,27,26,0.24)); }
.pw-neon {
  position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6); transform-origin: 50% 50%;
  opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 2;
  transition: opacity 300ms ease, transform 420ms ease;
}
.pw-neon.n-orange { left: 38%; top: 27%; background: radial-gradient(circle, rgba(242,78,30,0.95) 0%, rgba(242,78,30,0.42) 42%, rgba(242,78,30,0) 72%); }
.pw-neon.n-red    { left: 58%; top: 26%; background: radial-gradient(circle, rgba(255,114,98,0.95) 0%, rgba(255,114,98,0.42) 42%, rgba(255,114,98,0) 72%); }
.pw-neon.n-purple { left: 38%; top: 51%; background: radial-gradient(circle, rgba(162,89,255,0.95) 0%, rgba(162,89,255,0.42) 42%, rgba(162,89,255,0) 72%); }
.pw-neon.n-blue   { left: 62%; top: 51%; background: radial-gradient(circle, rgba(26,188,254,0.95) 0%, rgba(26,188,254,0.42) 42%, rgba(26,188,254,0) 72%); }
.pw-neon.n-green  { left: 37%; top: 76%; background: radial-gradient(circle, rgba(10,207,131,0.95) 0%, rgba(10,207,131,0.42) 42%, rgba(10,207,131,0) 72%); }
.pw-figma:hover .pw-neon,
.pw-figma.is-live .pw-neon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pw-figma:hover .n-orange,
.pw-figma.is-live .n-orange { animation: pw-neon-pulse 1.6s ease-in-out 0ms   infinite; }
.pw-figma:hover .n-red,
.pw-figma.is-live .n-red    { animation: pw-neon-pulse 1.6s ease-in-out 120ms infinite; }
.pw-figma:hover .n-purple,
.pw-figma.is-live .n-purple { animation: pw-neon-pulse 1.6s ease-in-out 240ms infinite; }
.pw-figma:hover .n-blue,
.pw-figma.is-live .n-blue   { animation: pw-neon-pulse 1.6s ease-in-out 360ms infinite; }
.pw-figma:hover .n-green,
.pw-figma.is-live .n-green  { animation: pw-neon-pulse 1.6s ease-in-out 480ms infinite; }
@keyframes pw-neon-pulse { 0%, 100% { opacity: 0.62; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pw-figma:hover .pw-neon { animation: none; opacity: 0.85; } }

/* Yoga girl — me, off the clock. A warm golden aura blooms behind her on hover. */
.pw-yoga-img { display: block; width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 8px 10px rgba(28,27,26,0.16)); }
.pw-yoga::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 140%; height: 140%;
  transform: translate(-50%, -50%) scale(0.55); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,212,110,0.92) 0%, rgba(255,201,80,0.45) 38%, rgba(255,201,80,0) 70%);
  opacity: 0; transition: opacity 550ms ease, transform 650ms cubic-bezier(0.34, 1.2, 0.5, 1);
  z-index: 0; pointer-events: none;
}
.pw-yoga:hover::before,
.pw-yoga.is-live::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .pw-yoga::before { transition: opacity 300ms ease; } }

/* Playlist / vinyl card */
.pw-playlist { background: #fff; border: 1px solid rgba(28,27,26,0.12); border-radius: 8px; padding: 16px 14px; text-align: center; box-shadow: 0 8px 20px rgba(28,27,26,0.10); }
.pw-vinyl { width: 62px; height: 62px; border-radius: 50%; margin: 2px auto 12px; background: radial-gradient(circle, #1DB954 0 8px, #16150F 9px 100%); box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
/* Doodle turntable — the record group spins. */
.pw-turntable { display: block; width: 100%; height: auto; max-width: 150px; margin: 0 auto 8px; }
.pw-turntable .tt-record { transform-box: fill-box; transform-origin: center; animation: tt-spin 3.6s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pw-turntable .tt-record { animation: none; } }
.pw-playlist .lb { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.pw-playlist .ti { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; margin-top: 2px; color: var(--ink); }
.pw-playlist .sb { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ── Narrow screens: the wall stays a wall ───────────────────────────────
   The board keeps its absolute scatter and is re-composed for portrait, so
   the section still reads as one screen-sized desk rather than a mile-long
   column of stacked photographs. Every item keeps its place in the pile;
   only the coordinates change. The inline --x/--y/--w on each figure are
   author-level, so these have to be !important to land. */
@media (max-width: 820px) {
  .pwall { padding: clamp(0.6rem, 2vw, 1.25rem) clamp(0.6rem, 3vw, 1.25rem); }
  .pw-board { aspect-ratio: 1 / 1.86; max-width: 520px; }

  .pw-journal2      { --x: -2%   !important; --y: 0%    !important; --w: 60%  !important; --rot: 0deg   !important; }
  .pw-terminal-item { --x: 3%    !important; --y: 4%    !important; --w: 62%  !important; --rot: -2deg  !important; }
  .pw-coffee        { --x: 69%   !important; --y: -1%   !important; --w: 21%  !important; --rot: -3deg  !important; }
  .pw-figma         { --x: 84%   !important; --y: 11%   !important; --w: 16%  !important; --rot: 10deg  !important; }
  .pw-plant         { --x: 69%   !important; --y: 14%   !important; --w: 30%  !important; --rot: 0deg   !important; }
  .pw-earphones     { --x: 2%    !important; --y: 19%   !important; --w: 22%  !important; --rot: -4deg  !important; }
  .pw-waxseal       { --x: 31%   !important; --y: 22%   !important; --w: 9%   !important; --rot: 5deg   !important; }
  .pw-note-item     { --x: 5%    !important; --y: 28%   !important; --w: 43%  !important; --rot: -1deg  !important; }
  .pw-canvas        { --x: 49%   !important; --y: 30%   !important; --w: 32%  !important; --rot: -2deg  !important; }
  .pw-folder-item   { --x: 3%    !important; --y: 43%   !important; --w: 37%  !important; --rot: 8deg   !important; }
  .pw-profile-item  { --x: 51%   !important; --y: 42%   !important; --w: 38%  !important; --rot: -2deg  !important; }
  .pw-playlist-item { --x: 63%   !important; --y: 62%   !important; --w: 30%  !important; --rot: 2deg   !important; }
  .pw-tulips        { --x: 3%    !important; --y: 64%   !important; --w: 29%  !important; --rot: 2deg   !important; }
  .pw-camera        { --x: 31%   !important; --y: 75%   !important; --w: 28%  !important; --rot: -3deg  !important; }
  .pw-journal       { --x: 22%   !important; --y: 80%   !important; --w: 58%  !important; --rot: 0deg   !important; }
  .pw-yoga          { --x: 3%    !important; --y: 83%   !important; --w: 30%  !important; --rot: 0deg   !important; }
  .pw-gipsy         { --x: 58%   !important; --y: 89%   !important; --w: 27%  !important; --rot: 3deg   !important; }

  /* The cards carry fixed-px type that was sized against a 1262px board.
     At a third of that width it has to come down with them. */
  .pw-term-body { font-size: 8.5px; line-height: 1.7; padding: 9px 10px; }
  .pw-term-bar { padding: 6px 8px; }
  .pw-term-bar span { width: 7px; height: 7px; }
  .pw-note { font-size: 11px; padding: 11px 12px; }
  .pw-note .pw-note-tag { font-size: 8px; margin-bottom: 5px; }
  .pw-profile { padding: 12px 10px 13px; border-radius: 9px; }
  .pw-profile .av { width: 40px; height: 40px; margin-bottom: 7px; }
  .pw-profile .nm { font-size: 1rem; }
  .pw-profile .tl { font-size: 8.5px; }
  .pw-playlist { padding: 11px 9px; }
  .pw-playlist .ti { font-size: 11px; }
  .pw-playlist .sb { font-size: 9px; }
  .pw-bubble { font-size: 9.5px; padding: 5px 9px; border-radius: 11px; }
}

/* ── Touch: the whole board is one tap-through field ──────────────────────
   Hover is the only way in on a pointer device; a finger gets the same
   reveals by tapping a piece (personal-fx.js sets .is-live). The hint chip
   says so once, then retires after the first tap. */
@media (hover: none) {
  .pw-item { cursor: pointer; }

  /* Cutouts are transparent PNGs in rectangular boxes, so the big scenery
     pieces cover the smaller ones behind them and eat their taps — the palm's
     box sits right over the Figma sticker. None of these three has a reveal of
     its own (the palm's sway is cursor-driven), so let taps fall through. */
  .pw-plant, .pw-journal, .pw-journal2 { pointer-events: none; }
  .pw-tap-hint {
    position: absolute; z-index: 50; left: 50%; bottom: -2px;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent); background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(168, 124, 110, 0.35); border-radius: 100px;
    padding: 5px 11px; white-space: nowrap; pointer-events: none;
    transition: opacity 400ms ease;
  }
  .pw-board.is-touched .pw-tap-hint { opacity: 0; }
}