/* fun mode V2, scrapbook: paper layer. Loads after fun.css; everything scoped under html.fun-mode.

   The desk. The site's content stays exactly where V1 put it, level and
   readable; underneath and around it is a pile of paper: crumpled ground,
   torn sheets, Polaroids, receipts and index cards poking out from behind,
   photo corners holding a print down. The owner's removal pass took every
   drawn thing out of this layer: no tape, no paperclips, no pins, no
   stamps, no stickers, no doodles, no coffee rings, no "cut here" dashes
   and no scissors — and no handwritten face anywhere. What is left is real
   scanned paper under the content, with a short paper shadow. Nodes carrying
   data-pp are injected by fun-v2/stickers.js (aria-hidden, no pointer
   events) and removed again when the mode switches off. Everything here is
   decoration: no rule touches copy, order or a content box's size. */

html.fun-mode {
  --pp-a: '/assets/fun-v2/';
  --pp-s: '/assets/fun-v2/scans/';
  /* paper shadows: a hair of lift, never an Illustrator drop shadow */
  /* The owner's call: no drop shadows anywhere. Paper lying on paper does
     not cast one you would see, and every soft shadow in here was doing the
     opposite of what the collage wants — lifting the pieces off the page
     instead of letting them sit on it. Kept as empty tokens so the rules
     that reference them still resolve. */
  --pp-shadow: none;
  --pp-shadow-lg: none;
  /* ink for the small printed notes. There is no handwriting token any
     more: the owner's standing rule is no handwritten or script face
     anywhere, so every note below is set in the site's own sans. */
  --pp-pen: #24357f;
  --pp-pen-red: #b8322c;
}

/* ============================================
   1. GROUND: real paper over the beige
   The desk is built from photographed paper, not procedural noise: a kraft
   sheet and a grey sheet tiled and multiplied together, a crumpled scan
   for the corner shadow, plus fold lines and a few things lying on the
   desk. All of it low-contrast: body copy is black on this and has to
   stay black on this.
   ============================================ */
html.fun-mode body {
  background-color: #f6f4ef;
  background-image: none;
  /* scraps poke past the sheets' edges by design; nothing may widen the page */
  overflow-x: clip;
}

/* ============================================
   THE GROUND
   A flat off-white. Everything that used to be here — three drawn creases,
   a drawn corner falloff, two tiled paper scans, and later a photographed
   folded sheet held to the viewport — read as cheap at full size. The
   paper in this design is the paper that is actually cut: the cuttings,
   the sheets, the covers. The ground behind them is just ground.
   ============================================ */
html.fun-mode main,
html.fun-mode .site-footer { overflow-x: clip; }

/* ============================================
   2. THE THREE HOMEPAGE SHEETS: pasted paper scraps
   V1 drew each as a rounded card with a 7px white ring and a grain pseudo.
   Here the card is transparent and stickers.js lays three torn layers
   under the content (white backing sheet, coloured paper, grain), each with
   its own tear. Under those, scraps; over the corners, tape.
   ============================================ */
html.fun-mode .home-projects,
html.fun-mode .built.tint-band,
html.fun-mode .home-index.tint-band {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
html.fun-mode .home-projects::before,
html.fun-mode .built.tint-band::before,
html.fun-mode .home-index.tint-band::before { display: none; }
/* the three closing sections are cut square, not torn: at full width the
   jagged edge read as a decoration applied to the page rather than as paper */
html.fun-mode .home-projects { --pp-paper: #fff2b7; --pp-tear: none; --pp-tear-2: none; }
html.fun-mode .built.tint-band { --pp-paper: #2cd17d; --pp-tear: none; --pp-tear-2: none; }
html.fun-mode .home-index.tint-band { --pp-paper: #ffb1c9; --pp-tear: none; --pp-tear-2: none; }
/* other pages' bands and plates: the same paper, one tear each */
html.fun-mode .pv-chapter.cs-plate:not(.is-dark),
html.fun-mode .cs-panel-card,
html.fun-mode .built-rows.tint-band,
html.fun-mode .quote-card { --pp-paper: #fff; --pp-tear: url('/assets/fun-v2/tear-d.svg'); --pp-tear-2: url('/assets/fun-v2/tear-a.svg'); }
html.fun-mode .built-rows.tint-band { --pp-paper: #fff2b7; background-color: transparent; border-radius: 0; }

/* every injected node */
html.fun-mode [data-pp] {
  position: absolute;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: var(--t, none);
  transform-origin: center;
}
/* hosts: anything that gets decorated becomes a stacking context so a
   negative z-index lands under its own content and above the desk */
html.fun-mode .pp-host { position: relative; isolation: isolate; }

/* the torn layers */
html.fun-mode .pp-paper {
  inset: 0;
  z-index: -1;
  background-color: var(--pp-paper, #fff);
  -webkit-mask: var(--pp-tear, none) center / 100% 100% no-repeat;
  mask: var(--pp-tear, none) center / 100% 100% no-repeat;
}
html.fun-mode .pp-grain {
  inset: 0;
  z-index: -1;
  background-image: var(--fun-grain);
  background-size: 260px 260px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: .16;
  -webkit-mask: var(--pp-tear, none) center / 100% 100% no-repeat;
  mask: var(--pp-tear, none) center / 100% 100% no-repeat;
}
html.fun-mode .pp-white {
  inset: -11px -12px -13px -10px;
  z-index: -2;
  background-color: #fff;
  -webkit-mask: var(--pp-tear-2) center / 100% 100% no-repeat;
  mask: var(--pp-tear-2) center / 100% 100% no-repeat;
}
/* the pile: scraps under a sheet or a Polaroid, laid down at angles */
html.fun-mode .pp-scrap {
  z-index: -3;
  filter: none;
}
/* the pages of a stack: a real paper shadow between every layer, so the
   pile reads as thickness rather than one flat print */
html.fun-mode .pp-scrap.pp-deep { z-index: -4; filter: none; }
/* THE BED: the owner's own flattened composition for a case study, one image
   holding the whole pile — every sheet at his spacing, his angles, his
   overlaps. It lies behind the cover and behind everything else a section
   draws, sized and placed against the cover's own box by stickers.js. No
   shadow, no rotation, no mask: the composition already carries its own cut
   edges and its own arrangement. */
html.fun-mode .pp-bed {
  z-index: -4;
  background-size: 100% 100%;
  filter: none;
}
/* Everything that used to lie ON the paper is gone: the tape (drawn, and
   the library has no photographic strip to replace it), the cuttings, the
   rubber stamps and the postage, the paperclips, the marker doodles and
   the coffee ring. No class is left for any of them. What remains in the
   padding of a sheet is nothing at all.
   A corner mount sits in a corner and stays square to it — it is the one
   fastener left, and it holds a print rather than decorating it. */
html.fun-mode .pp-mount { z-index: 3; }
/* Real masking tape: a photographic scan, not a drawn strip. It lies flat and
   it is translucent, so it multiplies over whatever it is holding down and
   carries only a whisper of a shadow. Never over text, and never clickable. */
html.fun-mode .pp-tape {
  z-index: 4;
  opacity: .82;
  mix-blend-mode: multiply;
  filter: none;
}

/* ============================================
   3. COVERS AND PRINTS: Polaroids
   The section is the stacking context; stickers.js measures the cover and
   lays a white frame under it that reaches down over the caption row, so
   the caption becomes the handwritten line under the photo.
   ============================================ */
html.fun-mode .case-study,
html.fun-mode .case-study-sm { position: relative; isolation: isolate; overflow: visible; }
html.fun-mode .case-media-cover,
html.fun-mode .home-tile-media { box-shadow: none; border-radius: 2px; }
html.fun-mode .case-media-cover .cover-img,
html.fun-mode .case-media-cover img,
html.fun-mode .case-media-cover video { border-radius: 2px; }
/* The mount is a piece of paper somebody cut, not a rectangle a machine
   drew. Two things do that, both tiny and both set per instance by
   stickers.js so no two are alike and none of it reshuffles on reload:

   --pp-rad  eight values, so every corner has its own ellipse rather than
             one shared radius — a corner cut by hand is never a quarter
             circle, and never the same twice on one sheet
   --pp-skew a fraction of a degree of skew on each axis, so the sides are
             not quite parallel and the corners not quite square

   The numbers are deliberately below the threshold where you would call it
   a shape: 1-7px of radius and under a third of a degree. You should not be
   able to say what is different, only that it is not machine-cut. The frame
   is its own element behind the photograph, so none of this touches the
   image, the caption or any text. */
/* THE WHITE MOUNT IS GONE.
   The owner's call: the photograph sits straight on the pile, with no white
   card behind it. The frame is not drawn at all any more, so its hand-cut
   corners and its fraction-of-a-degree skew went with it — both existed only
   to keep that white card from reading as a machine-cut rectangle, and there
   is no card left to cut. Nothing was measuring off it: the pile and the tape
   strip are both measured from the cover itself. */

/* the caption under the photo (overridden at the end of this file to body copy) */
html.fun-mode .case-caption-row .case-caption {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--pp-pen);
}
html.fun-mode .case-study-sm .case-caption-row .case-caption { font-size: 21px; line-height: 1.2; }
/* A real printed screen over every photograph, so the prints read as printed.
   This was a 6px vector SVG at 8%: it only ever showed on the one light
   screenshot cover and vanished on the photographs, which is what the owner
   noticed. It is now the same scanned, seamless screen the page ground uses,
   at a size and strength that reads on a dark photograph too. */
html.fun-mode .pp-halftone {
  inset: 0;
  z-index: 1;
  background-image: url('/assets/fun-v2/halftone/screen-04.webp');
  background-size: 90px 90px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: .5;
}

/* A wash of colour on hover, one hue per cover, each pulled straight off
   the ransom-note palette (COLORS in ransom.js) — the same paper that gets
   cut into the fun-mode headlines shows up here as a hint of tint instead of
   a letter. --case-tint is set inline per cover, the same convention as
   .mo-tile's --r. Above the halftone screen so the colour actually reads,
   below the title so it stays legible. */
html.fun-mode .case-media-cover.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--case-tint, transparent);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
html.fun-mode .case-media-cover.has-photo:hover::before,
html.fun-mode .case-media-cover.has-photo:focus-visible::before { opacity: .15; }

/* the About prints */
html.fun-mode .photo-grid-2col .taped {
  position: relative;
  isolation: isolate;
  border-radius: 2px;
  padding: 12px 12px 58px;
  background: #fff;
  box-shadow: var(--pp-shadow);
  overflow: visible;
}
html.fun-mode .photo-grid-2col .taped img { border-radius: 2px; aspect-ratio: 4 / 4.45; }
html.fun-mode .pp-cap {
  left: 14px; right: 14px; bottom: 14px;
  height: 34px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 34px;
  color: var(--pp-pen);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   4. BUTTONS: V1's pill, and nothing else
   Owner's rule: no indicator over or beside a case-study CTA. The heart
   and the arrow that used to peek out from behind these buttons are gone,
   and nothing replaces them.
   ============================================ */
html.fun-mode .thought-link { position: relative; isolation: isolate; }

/* ============================================
   5. TILES AND SHOTS: each pinned down its own way
   ============================================ */
html.fun-mode .mo-tile { border-radius: 3px; }
html.fun-mode .mo-tile img,
html.fun-mode .mo-tile video { border-radius: 3px; }
html.fun-mode .built-shot,
html.fun-mode .built-row-media { overflow: visible; position: relative; border-radius: 4px; }
html.fun-mode .built-shot img,
html.fun-mode .built-shot video,
html.fun-mode .built-row-media img,
html.fun-mode .built-row-media video { border-radius: 4px; }
html.fun-mode .masonry-item { border-radius: 3px; }
html.fun-mode .masonry-item img,
html.fun-mode .masonry-item video { border-radius: 3px; }
html.fun-mode .pp-fast { z-index: 3; filter: none; }

/* ============================================
   6. LITTLE DETAILS
   ============================================ */
/* ruled notebook lines behind the opening paragraph */
html.fun-mode .home-masthead > p:not(.mast-byline),
html.fun-mode .about-bio-copy > p:first-child,
html.fun-mode .page-hero .page-intro {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1lh - 1px), rgba(36, 53, 127, .2) calc(1lh - 1px), rgba(36, 53, 127, .2) 1lh);
  background-position: 0 .18lh;
  background-size: 100% 1lh;
}
/* Owner's rule: no highlighter bars. The swipe that used to sit behind one
   phrase per section is gone; nothing replaces it. */

html.fun-mode .nav .logo { position: relative; }

/* the footer: one small printed folio note, bottom right */
html.fun-mode .fx-folio,
html.fun-mode .fx-hello,
html.fun-mode .fx-spec { position: relative; }
html.fun-mode .site-footer { position: relative; }
/* chrome.css makes the spec sheet's rows static so their pseudos can reach
   the cell; the injected nodes are not rows and stay absolute */
html.fun-mode .fx-spec > [data-pp] { position: absolute; }
/* the folio note: printed on the sleeve, not written on it — cream caps in
   the site's own sans, letterspaced, level */
html.fun-mode .pp-note {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pp-pen);
  white-space: nowrap;
  z-index: 2;
}

/* ============================================
   7. NOTHING MOVES
   Owner's calm pass, then the removal pass. Nothing in this layer animates
   or transitions, and after the removals there is barely anything in it to
   animate: the stickers, stamps, doodles and tape are not placed at all any
   more. There is nothing here for a reduced-motion user to opt out of.
   ============================================ */

/* ============================================
   8. PHONES: everything scales to the size of the real thing, half of it goes away
   ============================================ */
@media (max-width: 760px) {
  html.fun-mode .pp-lite { display: none; }
  /* the ground is a flat, light beige on a phone: no crumple, fibre, creases,
     vignette or desk litter behind the page. The sheets and cuttings keep
     their texture; this is only the page behind everything. */
  html.fun-mode body {
    background-color: #f6f1e4;
    background-image: none;
  }
  html.fun-mode [data-pp] { zoom: .55; }
  /* The pile is exempt too. Its sheets are measured against the cover's own
     box in JS, so zooming them again put them at 55% of both their intended
     size and their intended offset — the pile drifted up and to the left and
     turned into the small scraps the owner rejected. Everything else in the
     list is inset-positioned and unaffected. */
  /* .pp-note is exempt for a different reason from the rest of this list:
     not because it is measured in JS, but because it is TYPE. Everything
     else here is an image, and an image at 55% is just a smaller image;
     the folio note is a 10px printed line, and 55% of that is 5.5px —
     under the size at which the letters have shapes at all. It is placed
     with right/bottom in plain CSS pixels, so unzooming it moves nothing
     and only puts the printing back at the size it was set in. */
  html.fun-mode .pp-paper, html.fun-mode .pp-grain, html.fun-mode .pp-white, html.fun-mode .pp-scrap.pp-deep, html.fun-mode .pp-bed, html.fun-mode .pp-halftone, html.fun-mode .pp-cap, html.fun-mode .pp-tape, html.fun-mode .pp-note { zoom: 1; }
  html.fun-mode .pp-white { inset: -7px -8px -9px -6px; }
  html.fun-mode .case-caption-row .case-caption { font-size: 26px; }
  html.fun-mode .case-study-sm .case-caption-row .case-caption { font-size: 22px; }
  html.fun-mode .photo-grid-2col .taped { padding: 10px 10px 50px; }
  html.fun-mode .pp-cap { font-size: 22px; bottom: 10px; }
}

/* Owner's call: the Polaroid captions are body copy. They take the same 18px
   Nunito as every other paragraph in fun mode. Appended last so it wins over
   the caption rules above at every width. */
html.fun-mode .case-caption-row .case-caption,
html.fun-mode .case-study-sm .case-caption-row .case-caption {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #000;
  transform: none;
}