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

   The nav, the footer, the Mood switch, the curtain, the cursors and the 404
   page. The footer is a sheet of torn paper (section 2); everywhere else is
   still a desk, but the owner's removal pass has stripped it of every drawn
   circle, squiggle, arrow, star, check and smiley, every clip and pin, every
   stamp, every drawn tape strip, and every indicator sitting over a
   case-study CTA. Content never moves and is never rotated.
   Every decoration is a pseudo-element with pointer-events: none, kept to the
   corners and margins so it never sits on a link or a button.

   Pseudo text (the "flip me" note, the 404's "lost" scrap) uses the
   `content: "..." / ""` form: empty alternative text, so assistive tech
   skips it.

   The only rules NOT under html.fun-mode are the curtain's (.fun-wipe): the
   class flips under full cover, halfway through the curtain, so its clothes
   have to be independent of the class, exactly as V1's are.

   Assets: /assets/fun-v2/chrome-*.svg. Cursors are inline data URIs. */

html.fun-mode {
  /* no handwritten or script face is defined here: the owner's standing
     rule is that none is used anywhere on the site. */
  --chrome-type: 'Courier New', Courier, 'Nimbus Mono PS', monospace;
  --chrome-ink: #111111;
  --chrome-kraft: #d6b486;
  --chrome-kraft-2: #c9a271;
  --chrome-desk: #5c3d29;
  /* the paper agent's grain is .6 alpha and multiplied at 9%; this one is
     baked light so it can sit directly on an opaque scrap */
  --chrome-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --chrome-pen: #24357f;
  /* No marker ring and no tape token. The drawn circle that used to be
     scribbled around the current nav item is gone with every other drawn
     shape, and tape survives only as a real photographic scan — the library
     holds none, so no tape is drawn anywhere. */
}


/* ============================================================
   1. NAV
   Reverted, per the owner: no masking tape on the wordmark, no coloured
   scrap under it, no label-maker tabs or tape on the links, no marker
   ring on the current page. The bar falls back exactly to what V1's
   fun.css gives it — plain wordmark, plain links, the current one in the
   accent colour. Only the phone hamburger (below) keeps its V2 treatment;
   it doesn't share any of these rules.
   ============================================================ */

/* phone: the hamburger, hand-drawn on a round sticker */
html.fun-mode .nav-toggle { gap: 5px; isolation: isolate; }
html.fun-mode .nav-toggle::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 50%;
  background: #f7f4ec var(--chrome-grain);
  border: 1px solid rgba(28, 26, 23, .6);
  box-shadow: none;
  transform: rotate(-8deg);
  pointer-events: none;
}
html.fun-mode .nav-toggle span { height: 3px; border-radius: 3px; background: var(--chrome-ink); transform-origin: left center; }
html.fun-mode body:not(.nav-open) .nav-toggle span:nth-child(1) { width: 100%; transform: rotate(-3deg); }
html.fun-mode body:not(.nav-open) .nav-toggle span:nth-child(2) { width: 80%; transform: rotate(2deg) translateX(3px); }
html.fun-mode body:not(.nav-open) .nav-toggle span:nth-child(3) { width: 92%; transform: rotate(-1.5deg) translateX(1px); }

/* the overlay menu: a ransom-note page.
   Cream crumpled paper; every link is a cut-out word pasted on its own
   scrap, the scraps overlapping in a pile; tape, stickers and a
   a real press photo in the space below. */
html.fun-mode .nav-overlay {
  background:
    radial-gradient(ellipse 60% 40% at 18% 22%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(ellipse 50% 60% at 82% 70%, rgba(255, 255, 255, .4), transparent 70%),
    radial-gradient(ellipse 30% 30% at 60% 30%, rgba(120, 100, 70, .10), transparent 70%),
    radial-gradient(ellipse 40% 25% at 30% 80%, rgba(120, 100, 70, .12), transparent 70%),
    linear-gradient(160deg, rgba(0, 0, 0, .04), transparent 40%, rgba(0, 0, 0, .05) 75%),
    #efe7d3;
  color: var(--chrome-ink);
}
html.fun-mode .nav-overlay::before,
html.fun-mode .nav-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* the grain over the whole page, and the litter in the free space between
   the pile and the footer row: one real ticket, and nothing drawn */
html.fun-mode .nav-overlay::before {
  background:
    url('/assets/fun-v2/scans/ticket-03.webp') 44% 71% / 126px 56px no-repeat,
    var(--chrome-grain);
}
/* a real press photo, tilted, lower right — its own alpha already carries a
   torn edge, so it needs no drawn frame and nothing holds it down */
html.fun-mode .nav-overlay::after {
  inset: auto 18px 112px auto;
  width: 96px; height: 90px;
  background:
    url('/assets/fun-v2/scans/photo-halftone-15.webp') center / 100% 100% no-repeat;
  transform: rotate(9deg);
  filter: none;
}
html.fun-mode .nav-overlay-top,
html.fun-mode .nav-overlay-links,
html.fun-mode .nav-overlay-footer { position: relative; z-index: 1; }
html.fun-mode .nav-overlay .logo img { content: url('https://cdn.prod.website-files.com/667c2ea7460262b0b32b6add/667c3cfd7cdc38dd4ea5f75a_jmlogo.png'); }
html.fun-mode .nav-close { isolation: isolate; }
html.fun-mode .nav-close span { background: var(--chrome-ink); height: 3px; border-radius: 3px; }
html.fun-mode .nav-close::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 50%;
  background: #eec552 var(--chrome-grain);
  border: 1px solid rgba(28, 26, 23, .6);
  transform: rotate(12deg);
  pointer-events: none;
}

html.fun-mode .nav-overlay-links {
  gap: 8px;
  margin-top: 48px;
  isolation: isolate;
}
/* two blank scraps under the pile, so it reads as a heap and not a list */
html.fun-mode .nav-overlay-links::before,
html.fun-mode .nav-overlay-links::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
/* two real scraps under the pile: torn newsprint and a kraft sheet, so the
   words read as clippings pasted over print, not shapes floating on blank paper */
html.fun-mode .nav-overlay-links::before {
  left: 46%; top: 18px;
  width: 44%; height: 150px;
  background-color: #d9d3c4;
  background-image: url('/assets/fun-v2/scans/news-col-13.webp'), var(--chrome-grain);
  background-size: 90px auto, 220px 220px;
  background-blend-mode: normal, multiply;
  clip-path: polygon(2% 6%, 30% 0, 58% 5%, 96% 2%, 100% 40%, 94% 70%, 100% 96%, 60% 100%, 30% 94%, 0 100%, 4% 60%);
  transform: rotate(-7deg);
}
html.fun-mode .nav-overlay-links::after {
  left: -10px; bottom: -22px;
  width: 58%; height: 120px;
  background-color: #dbb98b;
  background-image: url('/assets/fun-v2/scans/paper-kraft-01.webp'), var(--chrome-grain);
  background-size: 100% 100%, 220px 220px;
  background-blend-mode: normal, soft-light;
  clip-path: polygon(0 10%, 40% 0, 70% 6%, 100% 0, 96% 50%, 100% 100%, 50% 96%, 20% 100%, 0 90%);
  transform: rotate(4deg);
  box-shadow: none;
}
html.fun-mode .nav-overlay-links a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: auto;
  padding: 8px 20px 6px;
  color: var(--chrome-ink);
  font-size: clamp(32px, 9.5vw, 44px);
  line-height: 1;
  margin-left: var(--shift, 0);
}
html.fun-mode .nav-overlay-links a:hover,
html.fun-mode .nav-overlay-links a.current { color: var(--word, var(--chrome-ink)); }
html.fun-mode .nav-overlay-links a { color: var(--word, var(--chrome-ink)); }
html.fun-mode .nav-overlay-links a::before {
  content: "";
  position: absolute;
  inset: -4px -8px;
  z-index: -1;
  pointer-events: none;
  background: var(--scrap, #eec552) var(--chrome-grain);
  clip-path: var(--tear, none);
  transform: rotate(var(--tilt, -2deg));
  box-shadow: none;
}
html.fun-mode .nav-overlay-links a:nth-child(1) { --scrap: #eec552; --word: #111; --tilt: -2.4deg; --shift: 0; --tear: polygon(0 8%, 6% 0, 50% 4%, 96% 0, 100% 40%, 97% 100%, 60% 96%, 4% 100%, 0 70%); }
html.fun-mode .nav-overlay-links a:nth-child(2) { --scrap: #2f57b5; --word: #fff; --tilt: 1.6deg; --shift: 22px; }
html.fun-mode .nav-overlay-links a:nth-child(3) { --scrap: #e39ac0; --word: #111; --tilt: -1.2deg; --shift: 6px; --tear: polygon(3% 0, 100% 3%, 96% 50%, 100% 100%, 40% 97%, 0 100%, 4% 40%); }
html.fun-mode .nav-overlay-links a:nth-child(4) { --scrap: #111; --word: #f3e6b3; --tilt: 2.2deg; --shift: 34px; }
html.fun-mode .nav-overlay-links a:nth-child(5) { --scrap: #2cd1d0; --word: #111; --tilt: -1.8deg; --shift: 10px; --tear: polygon(0 0, 60% 5%, 100% 0, 97% 60%, 100% 100%, 50% 94%, 0 100%); }
/* nothing holds the scraps down and nothing is ringed in pen: the drawn
   tape, the clip and the marker circle are all gone. The current page is
   already marked by its own colour. */
html.fun-mode .nav-overlay-links a::after { content: none; }

/* ---- the pile lands when the menu opens ----
   The same motion the mastheads use, one scrap after another: rn-settle's
   curve, rn-settle's overshoot, rn-settle's beat. The keyframe is
   rn-settle-block, defined next to rn-settle in type.css, because this is
   the same gesture arriving as a whole word instead of a letter — it leans
   in on the way down and ends square, so the words are never left crooked.

   The trigger is body.nav-open, which nav.js sets: the animation starts the
   moment the class lands, so it plays on every open rather than once at
   page load, and no JS was needed here. The scrap behind each word is that
   word's own ::before, so it rides in with it instead of arriving first.

   Five links, .05s apart, .25s of stagger — the same quarter second the
   letters take. Transform and opacity only: the links do not move, reflow
   or change size, and by the time a finger can reach one the animation is
   over. */
html.fun-mode body.nav-open .nav-overlay-links a {
  animation: rn-settle-block .32s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--n, 0) * .05s);
}
html.fun-mode .nav-overlay-links a:nth-child(1) { --n: 0; --sr: -2.4deg; }
html.fun-mode .nav-overlay-links a:nth-child(2) { --n: 1; --sr: 1.6deg; }
html.fun-mode .nav-overlay-links a:nth-child(3) { --n: 2; --sr: -1.2deg; }
html.fun-mode .nav-overlay-links a:nth-child(4) { --n: 3; --sr: 2.2deg; }
html.fun-mode .nav-overlay-links a:nth-child(5) { --n: 4; --sr: -1.8deg; }
/* the two label tabs at the bottom close the run, on the same beat */
html.fun-mode body.nav-open .nav-overlay-footer a,
html.fun-mode body.nav-open .nav-overlay-footer button {
  animation: rn-settle-block .32s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(.26s + var(--n, 0) * .05s);
  --sr: 0deg;
}
html.fun-mode .nav-overlay-footer > :nth-child(2) { --n: 1; }
html.fun-mode .nav-overlay-footer > :nth-child(3) { --n: 2; }
@media (prefers-reduced-motion: reduce) {
  html.fun-mode body.nav-open .nav-overlay-links a,
  html.fun-mode body.nav-open .nav-overlay-footer a,
  html.fun-mode body.nav-open .nav-overlay-footer button { animation: none; }
}
/* the overlay's footer row: label-maker tabs */
html.fun-mode .nav-overlay-footer { border-top: 0; gap: 14px; }
html.fun-mode .nav-overlay-footer a,
html.fun-mode .nav-overlay-footer a:hover {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  background: var(--chrome-ink);
  color: #fff;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}


/* ============================================================
   2. FOOTER — THE TORN SHEET
   The footer is a piece of the owner's scanned paper, torn across its top
   edge, with the page showing through above the tear. Two real assets do
   the whole job and neither is asked to do the other's work:

     - (the torn top strip is removed for now — the owner's call)
       the tear and paper below it, pinned to the top of the footer and
       stretched across its width. A torn silhouette is the one thing that
       survives horizontal stretching; that is why the cut is a thin strip
       and not the whole scan.
     - paper-body.webp, a genuinely seamless 384px tile of the same paper,
       repeated at native size for everything below the tear. Nothing that
       carries grain is ever scaled.

   The strip's paper reads about #e1e1e1 and the tile about #cccccc, so the
   tile is screened against #696969 to bring it to the strip's tone; the
   join then falls inside the strip's own opaque band and is invisible. The
   flat colour underneath is sampled from the same paper.

   The dark board is gone and with it the cream printing: everything is now
   the site's dark ink on light paper, the keylines are a dark hairline, and
   the seam above the folio strip is dark. The wordmark swaps to the dark
   logo, because the white one was cut for a dark board. .fx-invite — the
   ransom headline another agent builds out of real cuttings — is not
   touched here, and neither is the CTA's press recipe in fun.css.
   ============================================================ */

html.fun-mode .site-footer,
html.fun-mode.dark-mode .site-footer {
  /* the paper's own tone. It was #e1e1e1, sampled off the scan, and the whole
     footer read grey under a page made of bright cut paper. It is now the
     site's own sheet — the same off-white the rest of the page is printed on
     — so the coloured cuttings below land on the page's paper rather than on
     a darker sheet of somebody else's. */
  --sleeve: #f1eee4;
  --sleeve-ink: #16150f;
  /* the keyline: dark at the weight a 1px printed rule actually has. Only the
     folio seam still uses it; the three panels are cut paper now, not boxes. */
  --sleeve-rule: rgba(22, 21, 15, .52);
  /* the site's own stock, the four sheets the homepage is cut from */
  --fx-yellow: #fff2b7;
  --fx-turq:   #b9ecea;
  --fx-pink:   #ffb1c9;
  --fx-green:  #2cd17d;
  --fx-white:  #fffdf5;
  /* TRANSPARENT: above the tear the page's own ground shows through */
  background-color: transparent;
  background-image: none;
  color: var(--sleeve-ink);
  overflow: hidden;
  position: relative;
}
/* THE SHEET: the seamless tile at its native 384px, screened up to the
   paper's tone, filling the whole footer from its top edge down. */
html.fun-mode .site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 0;
  /* fun.css gives this pseudo a fixed 92px height for its scallop strip;
     without this the sheet would stop 92px down and the page would show
     through the rest of the footer */
  height: auto;
  z-index: 0;
  pointer-events: none;
  background-image:
    url('/assets/fun-v2/paper-body.webp'),
    linear-gradient(var(--sleeve), var(--sleeve));
  background-size: 384px 384px, 100% 100%;
  background-repeat: repeat, no-repeat;
  /* soft-light rather than a straight paint: the tile carries one dark
     crease across it, and repeated every 384px a straight paint drew that
     crease as a hard rule across the whole footer. Soft-light keeps the
     grain and the crease as a fold in the light instead of a line. */
  background-blend-mode: soft-light, normal;
}
/* THE TOP EDGE. The torn strip is removed for now, at the owner's word: at
   full width it read badly. The sheet simply starts square at the footer's
   top edge instead — see ::before, which now begins at 0. */

html.fun-mode .fx-bleed {
  background: transparent;
  position: relative;
}
html.fun-mode .fx-bleed::before { content: none; }
html.fun-mode .fx-bleed::after { content: none; }

/* the content clears the tear. The strip is 160/1080 of the footer's width
   tall, so its bottom edge sits at about 14.8vw; the top padding is that
   plus the sheet's own margin, clamped so a very wide window doesn't open a
   canyon and a phone doesn't crowd the edge. */
html.fun-mode .fx {
  position: relative;
  z-index: 1;
  gap: 34px 40px;
  padding: clamp(64px, 5vw, 88px) 90px 72px;
}

/* ---- the cells ----
   No paper scraps, no scans, no clip-paths, no tilt: the cells are printed
   panels on the board. Navigate, Connect and the spec sheet get the
   reference's 1px cream keyline and generous inner padding; the note cell
   and the folio are printed straight onto the board with no box, because
   the reference prints its hero and its bottom strip that way. */
html.fun-mode .fx-cell:not(.fx-cta, .fx-spine) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  padding: 0;
}
html.fun-mode .fx-cell:not(.fx-cta, .fx-spine)::before { content: none; }
html.fun-mode .fx-cell:not(.fx-cta, .fx-spine)::after { content: none; }

/* ---- THE THREE PANELS ARE CUT PAPER, NOT KEYLINES ----
   They were 1px dark keyline boxes on a grey sheet, which is the one thing on
   the site that is not made of the same stuff as the rest of it. They are now
   pieces of the site's own stock — the homepage's yellow, its pale turquoise
   and its pink — cut and laid on the paper.

   The edge is a clip-path polygon in percentages, which is exactly how the
   nav overlay's word scraps are cut: the deviation is a fraction of the box,
   so it stays a visible cut at any size. It is not a border-radius and not a
   keyline. A stretched tear-*.svg mask was tried first and does not work
   here: those files are 1000x2400 with the wobble measured in user units, so
   on a 620x260 panel the vertical scale flattens the cut to nothing.

   Over the colour goes the same scanned halftone the ground and the covers
   are printed with, multiplied, at its native 150px — no scan is upscaled.

   The sheet is the cell's ::before rather than the cell itself so nothing
   clips the content, the focus rings or the Mood switch's rule. */
html.fun-mode .fx-cell.fx-nav,
html.fun-mode .fx-cell.fx-social,
html.fun-mode .fx-cell.fx-spec {
  border: 0;
  padding: 26px 28px 30px;
  position: relative;
  isolation: isolate;
}
html.fun-mode .fx-cell.fx-nav::before,
html.fun-mode .fx-cell.fx-social::before,
html.fun-mode .fx-cell.fx-spec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* the colour and the screen in ONE layer, colour first, exactly the form
     screens.css uses on the curtain's scrap. Written as two layers with the
     colour as the background-color instead, the screen has no backdrop to
     multiply against and paints its near-white paper straight over the
     stock — the sheets came out the colour of the ground. */
  /* the ground's own screen, at the ground's own 150px tile. The section
     screens (screen-04/06/07/08 at 340px) were tried and are cut for
     full-bleed bands: at panel size their coarse dot sits right on top of a
     13px link and a 10px spec label, and the pink sheet in particular went
     unreadable. This is the finest of the eight and it prints rather than
     weaves. */
  background: var(--fx-stock, var(--fx-yellow)) url('/assets/fun-v2/halftone/screen-03.webp') center / 150px 150px repeat;
  background-blend-mode: multiply;
  clip-path: var(--fx-cut);
  /* fun.css draws its own grain on every .fx-cell::before at opacity .09 and
     mix-blend-mode: multiply. Inheriting either turned the sheets into a
     nine-percent whisper of colour — indistinguishable from the ground, which
     is what the first pass shipped. Both are reset here. */
  opacity: 1;
  mix-blend-mode: normal;
  border-radius: 0;
}
/* the cut itself is measured in PIXELS along the short axis, not in percent.
   A percentage wobble on a 1500x80 strip is 18px across the ends and 3px
   along the edges — the exact inverse of a cut. Pixels give the same few
   millimetres of deviation whatever shape the piece is. */
html.fun-mode .fx-cell.fx-nav {
  --fx-stock: var(--fx-yellow);
  --fx-cut: polygon(0 4px, 22% 0, 57% 3px, calc(100% - 5px) 1px, 100% 34%, calc(100% - 4px) 71%, 100% calc(100% - 2px), 61% calc(100% - 5px), 26% 100%, 4px calc(100% - 1px), 1px 55%, 3px 24%);
}
html.fun-mode .fx-cell.fx-social {
  --fx-stock: var(--fx-turq);
  --fx-cut: polygon(3px 0, 41% 4px, 78% 1px, 100% 2px, calc(100% - 4px) 41%, 100% 78%, calc(100% - 2px) 100%, 55% calc(100% - 4px), 18% 100%, 0 calc(100% - 2px), 4px 60%, 1px 27%);
}
html.fun-mode .fx-cell.fx-spec {
  --fx-stock: var(--fx-pink);
  --fx-cut: polygon(0 3px, 31% 0, 69% 4px, calc(100% - 3px) 0, 100% 26%, calc(100% - 5px) 58%, 100% calc(100% - 3px), 72% calc(100% - 2px), 34% 100%, 2px calc(100% - 4px), 3px 63%, 0 31%);
}
html.fun-mode .fx-cell.fx-hello { padding: 4px 0 8px; }
html.fun-mode .fx-cell.fx-folio { padding: 0; }
/* the board starts at the seam with the page above; the sleeve's own top
   margin is the .fx padding, not a second empty band on top of it */
html.fun-mode .site-footer { padding-top: 0; }

/* the hero cell: the wordmark small over the ransom headline, printed on
   the board. .fx-invite itself is left entirely alone. */
html.fun-mode .fx-hello .fx-logo {
  position: relative;
  width: 150px;
  margin-bottom: 22px;
  /* the dark wordmark: the white one in the markup was cut for a dark board
     and disappears on paper. Swapped in CSS, so no HTML changes. */
  content: url('https://cdn.prod.website-files.com/667c2ea7460262b0b32b6add/667c3cfd7cdc38dd4ea5f75a_jmlogo.png');
}
html.fun-mode .fx-invite { position: relative; z-index: 0; }

/* ---- THE SEAM ----
   The reference divides the sleeve with a horizontal rule about three
   quarters down, so the bottom band reads as a separate printed strip. Here
   that band is the folio and the CTA. The rule runs past both cells and off
   both edges of the board; .site-footer's overflow: hidden trims it. */
html.fun-mode .fx-cell.fx-folio::before {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  top: -18px;
  height: 1px;
  background: var(--sleeve-rule);
  pointer-events: none;
}
html.fun-mode .fx-cell.fx-folio { padding-top: 6px; }

/* ---- the printing ----
   One voice: small cream all-caps sans, set tight and letterspaced, with
   the typewriter face where it already ran. Nothing is rotated, nothing is
   handwritten. */
/* A NOTE / NAVIGATE / CONNECT were 10px letterspaced grey caps — captions on
   a page whose every other section heading is set in TAY Bartender. They take
   the display face at a size that reads as a heading, in the same dark ink. */
html.fun-mode .fx-label {
  position: static;
  font-family: var(--font-display-2);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--sleeve-ink);
  line-height: 1;
  margin-bottom: 18px;
}
html.fun-mode .fx-spec > div { position: static; }

/* ---- the links are cut word-cards again ----
   Each word on its own small piece of white stock, cut with the same kind of
   polygon edge the panels get, sitting square on the coloured sheet. Square,
   not tilted: nothing text-bearing on this site rotates. The card is the
   link's ::before at z-index -1, so the focus ring is never clipped and the
   card cannot cover the word. On hover the piece inks over and the word goes
   pale — the same trade the nav overlay's dark scrap makes, and both states
   clear 4.5:1. */
html.fun-mode .fx-links { gap: 10px 10px; }
html.fun-mode .fx-links a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sleeve-ink);
  transition: color .18s ease;
}
html.fun-mode .fx-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 0; right: 0; top: 0; bottom: 0;
  height: auto;
  z-index: -1;
  background: var(--fx-white);
  border: 0;
  box-shadow: none;
  transform: none;
  transition: background .18s ease;
  pointer-events: none;
  /* in pixels, for the same reason the panels are: a small card is wider than
     it is tall, and a percentage cut would be all slant and no wobble */
  clip-path: polygon(0 2px, 18% 0, 54% 2px, calc(100% - 2px) 0, 100% 42%, calc(100% - 1px) 100%, 62% calc(100% - 2px), 21% 100%, 1px calc(100% - 1px), 0 55%);
}
html.fun-mode .fx-links a:hover::before,
html.fun-mode .fx-links a:focus-visible::before { background: var(--sleeve-ink); }
html.fun-mode .fx-links a:hover,
html.fun-mode .fx-links a:focus-visible { color: var(--fx-white); }
html.fun-mode .fx-links a::after { content: none; }

/* the spec sheet: key in small caps, value in the typewriter face, both
   cream, printed on the board inside the panel's keyline */
html.fun-mode .fx-spec > div {
  padding: 9px 0;
  align-items: baseline;
  border-top: 1px solid rgba(22, 21, 15, .24);
}
html.fun-mode .fx-spec > div:first-child { border-top: 0; padding-top: 0; }
html.fun-mode .fx-spec dt {
  display: inline-block;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--sleeve-ink);
}
html.fun-mode .fx-spec dt::before { display: none; }
html.fun-mode .fx-spec dd {
  display: inline-block;
  background: none;
  padding: 0;
  font-family: var(--chrome-type);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--sleeve-ink);
}

/* ---- THE MOOD SWITCH IS A MOMENT, NOT A TABLE ROW ----
   It is the whole point of the footer and it was the fifth line of a spec
   sheet in 10px caps. It gets its own piece of the homepage's green, cut
   like the panels, laid across the bottom of the pink sheet, with both
   options set in the display face.

   The row keeps its shape — label left, switch right — on purpose. "flip me"
   sits to the LEFT of the button and reads as an aside pointing at it; moved
   to the other side it joins the switch's own line and the row reads
   "Serious / Fun FLIP ME", which is the exact failure recorded on the phone
   rule below. So the geometry stays and only the scale and the stock change.

   No stamp graphic, no arrow, no handwriting: the block is colour, a cut
   edge and type, like everything else here. */
html.fun-mode .fx-spec .fx-mood {
  position: relative;
  isolation: isolate;
  margin: 20px 0 0;
  padding: 18px 20px;
  border-top: 0;
  align-items: center;
}
html.fun-mode .fx-spec .fx-mood::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--fx-green) url('/assets/fun-v2/halftone/screen-03.webp') center / 150px 150px repeat;
  background-blend-mode: multiply;
  clip-path: polygon(0 4px, 26% 0, 63% 3px, calc(100% - 4px) 0, 100% 46%, calc(100% - 3px) 100%, 66% calc(100% - 4px), 29% 100%, 3px calc(100% - 2px), 1px 51%);
}
/* the label is a heading on the green, not a caption */
html.fun-mode .fx-spec .fx-mood dt {
  font-family: var(--font-display-2);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
}
/* both words are inked at full strength: screens.css fades the option that
   is not current to .38, which on this stock is under 4.5:1. The current one
   is marked by a solid ink chip instead of by being the only readable word —
   that is a stronger switch and it cannot fail contrast either way. */
html.fun-mode .fx-mood .fx-mood-opt {
  opacity: 1;
  font-family: var(--font-display-2);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  padding: 5px 10px 4px;
  color: var(--sleeve-ink);
}
html.fun-mode .fx-mood .fx-mood-opt.is-on {
  background: var(--sleeve-ink);
  color: var(--fx-green);
}
html.fun-mode .fx-mood .fx-mood-opt.is-on::after { content: none; }
html.fun-mode .fx-mood .fx-mood-sep {
  opacity: 1;
  font-family: var(--font-display-2);
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--sleeve-ink);
}
html.fun-mode .fx-mood .fx-mood-btn:hover .fx-mood-opt:not(.is-on),
html.fun-mode .fx-mood .fx-mood-btn:focus-visible .fx-mood-opt:not(.is-on) {
  opacity: 1;
  background: rgba(22, 21, 15, .14);
}
html.fun-mode .fx-mood-btn {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 0;
  margin: -10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
}
html.fun-mode .fx-mood-btn::before { content: none; }
html.fun-mode .fx-mood-val {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--sleeve-ink);
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  border-bottom: 1px solid var(--sleeve-rule);
}
html.fun-mode .fx-mood-val::after { display: none; }
html.fun-mode .fx-mood-btn::after {
  content: "flip me" / "";
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(22, 21, 15, .82);
  white-space: nowrap;
  background: none;
  mix-blend-mode: normal;
  pointer-events: none;
}

/* the folio: the bottom strip's small print */
html.fun-mode .fx-folio {
  color: var(--sleeve-ink);
  gap: 5px;
}
/* fun.css pins these two lines to black with a .site-footer-qualified
   selector, which outranks a bare .fx-folio rule; on the dark board that is
   1.33:1, so the cream has to be written at the same specificity. */
html.fun-mode .site-footer .fx-folio span,
html.fun-mode .site-footer .fx-folio span:last-child { color: var(--sleeve-ink); }
html.fun-mode .fx-folio span {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* the spine: the reference's run of vertical type up the right edge —
   small, cream, letterspaced caps, printed on the board */
html.fun-mode .fx-spine { position: relative; padding: 0; }
html.fun-mode .fx-spine::before { content: none; }
html.fun-mode .fx-spine .v-text {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--sleeve-ink);
  text-shadow: none;
}

/* the CTA keeps its press recipe from fun.css — the hard ink shadow and the
   press on hover — but it is square, like every other printed panel on the
   sleeve. Nothing sits over it: no indicator, no arrow, no clipping. */
html.fun-mode .fx-cta,
html.fun-mode.dark-mode .fx-cta { border-radius: 0; }
html.fun-mode .fx-cta::before,
html.fun-mode .fx-cta::after { content: none; }

/* stickers.js prints "Page 1 of 1" in the footer's bottom-right corner in
   pen blue; on the dark board that is unreadable, so it goes cream. */
html.fun-mode .site-footer .pp-note { color: rgba(22, 21, 15, .82); }

html.fun-mode .fx-bleed { padding-bottom: 0; }


/* ============================================================
   3. CURTAIN
   Not scoped: the class flips halfway through. Into fun mode the sheet is
   teal with a torn top edge that rides up with the clip and a torn bottom
   edge that leaves with it; the word sits on a yellow scrap and a few
   clipped bits ride up on the sheet. Back to serious the sheet is plain
   kraft with the word typed on a label. Timings and the clip-path are
   V1's, untouched: the tears are on a pseudo whose top/bottom transition
   with the same curves the clip uses, so the edge and the clip line move
   together.
   ============================================================ */
.fun-wipe,
.fun-wipe.is-fun {
  background-color: transparent;
  background-image: none;
  isolation: isolate;
}
.fun-wipe::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  /* the tears sit in the pseudo's first and last 56px. It rises to -56px,
     not 0, so the torn edge shows through the middle of the rise and has
     been clipped off by the time the sheet holds; the bottom starts 56px
     below the viewport for the same reason on the way out. */
  top: 100%; bottom: -56px;
  z-index: -1;
  pointer-events: none;
  transition: top 0.985s cubic-bezier(0.76, 0, 0.24, 1), bottom 0.64s cubic-bezier(0.65, 0, 0.35, 1);
}
.fun-wipe.is-up::before { top: -56px; }
.fun-wipe.is-down::before { bottom: 100%; }
/* teal, torn top and bottom */
.fun-wipe.is-fun::before {
  background:
    url('/assets/fun-v2/chrome-tear-top.svg') left top / 480px 56px repeat-x,
    url('/assets/fun-v2/chrome-tear-bottom.svg') left bottom / 480px 56px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") center / 220px 220px repeat,
    linear-gradient(#3dbfbd, #3dbfbd) center / 100% calc(100% - 108px) no-repeat;

}
/* kraft, plain */
.fun-wipe:not(.is-fun)::before {
  background:
    repeating-linear-gradient(97deg, transparent 0 17px, rgba(255, 255, 255, .09) 17px 18px, transparent 18px 46px),
    repeating-linear-gradient(-84deg, transparent 0 29px, rgba(0, 0, 0, .04) 29px 30px, transparent 30px 71px),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 255, 255, .12), transparent 70%),
    #cfa878;
}
/* the one thing left on the teal sheet: a real press photo. The printed
   cut-outs, the postage, the SENT stamp, the drawn tape and the clip are
   all gone. */
.fun-wipe.is-fun::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    url('/assets/fun-v2/scans/photo-halftone-15.webp') 15% 22% / 100px 100px no-repeat;
}
/* the word on its scrap */
.fun-wipe span { position: relative; isolation: isolate; padding: .1em .35em .06em; }
.fun-wipe span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #eec552 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  border: 1px solid rgba(28, 26, 23, .6);
  box-shadow: none;
  transform: rotate(-2deg);
}
.fun-wipe.is-fun span { color: #111; }
/* typed, on a white label, for the way back */
.fun-wipe:not(.is-fun) span {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: clamp(40px, 7vw, 92px);
  letter-spacing: .02em;
  color: #1a1a1a;
  font-optical-sizing: auto;
  font-variation-settings: normal;
}
.fun-wipe:not(.is-fun) span::before {
  background: #fbfaf5;
  border: 1px solid rgba(28, 26, 23, .6);
  box-shadow: none;
  transform: rotate(-1deg);
}
@media (prefers-reduced-motion: reduce) {
  .fun-wipe::before { transition: none; }
}


/* ============================================================
   4. CURSORS
   Reverted: fun mode uses the V1 cursors from fun.css (the blue arrow, the
   pink dot on anything clickable, the straight face on the Mood row).
   Nothing set here — chrome.css loads after fun.css, so leaving this
   section empty of cursor rules lets fun.css's own win the cascade.
   ============================================================ */


/* ============================================================
   5. THE 404
   A scrapbook page: "lost" on a scrap, a torn map, a RETURN TO SENDER
   real airmail cover, the lede on an index card, every section on its own scrap
   with its number on a label.
   ============================================================ */
html.fun-mode .nf {
  position: relative;
  isolation: isolate;
}
html.fun-mode .nf::before {
  content: "lost" / "";
  position: absolute;
  right: 330px; top: 46px;
  z-index: 0;
  padding: 10px 26px 6px;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--chrome-ink);
  background: #eec552 var(--chrome-grain);
  border: 1px solid rgba(28, 26, 23, .6);
  box-shadow: none;
  transform: rotate(-8deg);
  pointer-events: none;
}
/* a real airmail cover carried on the 1927 transatlantic flight — "lost"
   gets an envelope that has actually travelled, not a drawn map */
html.fun-mode .nf::after {
  content: "";
  position: absolute;
  right: 40px; top: 120px;
  width: 320px; height: 184px;
  z-index: -1;
  background: url('/assets/fun-v2/scans/envelope-03.webp') center / 100% 100% no-repeat;
  transform: rotate(5deg);
  filter: none;
  pointer-events: none;
}
html.fun-mode .nf-title { position: static; }
/* the RETURN TO SENDER stamp is gone with every other stamp */
html.fun-mode .nf-title::after { content: none; }
/* the lede on an index card */
html.fun-mode .nf-lede {
  position: relative;
  isolation: isolate;
  padding: 20px 24px;
  margin-top: 34px;
}
html.fun-mode .nf-lede::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(36, 53, 127, .16) 27px 28px) 0 14px / 100% 100%,
    #fff var(--chrome-grain);
  border: 1px solid rgba(28, 26, 23, .6);
  box-shadow: none;
  transform: rotate(-.8deg);
  pointer-events: none;
}
/* no tape across the top of the card: drawn tape is out */
html.fun-mode .nf-lede::before { content: none; }
html.fun-mode .nf-index { border-top: 0; gap: 22px 44px; margin-top: 60px; }
html.fun-mode .nf-index a {
  position: relative;
  isolation: isolate;
  padding: 18px 18px 16px;
  border-bottom: 0;
  gap: 0 10px;
}
html.fun-mode .nf-index a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrap, #fff) var(--chrome-grain);
  border: 1px solid rgba(28, 26, 23, .6);
  box-shadow: none;
  transform: rotate(var(--tilt, -.8deg));
  transition: transform .35s var(--fun-bounce);
  pointer-events: none;
}
html.fun-mode .nf-index a:hover::before { transform: rotate(0) translate(-1px, -2px); }
html.fun-mode .nf-index a:nth-child(1) { --scrap: #f3e6b3; --tilt: -.9deg; }
html.fun-mode .nf-index a:nth-child(2) { --scrap: #f0cdd5; --tilt: .8deg; }
html.fun-mode .nf-index a:nth-child(3) { --scrap: #cfe6d2; --tilt: -.5deg; }
html.fun-mode .nf-index a:nth-child(4) { --scrap: #dccbe9; --tilt: 1.1deg; }
html.fun-mode .nf-index a:nth-child(5) { --scrap: #bfe1df; --tilt: -1deg; }
html.fun-mode .nf-index a:nth-child(6) { --scrap: #fff; --tilt: .6deg; }
html.fun-mode .nf-index a:nth-child(7) { --scrap: #f1dcbd; --tilt: -.7deg; }
/* nothing holds the rows down: the tape and the clips are gone */
html.fun-mode .nf-index a::after { content: none; }
html.fun-mode .nf-no {
  display: inline-block;
  padding: 3px 7px 2px;
  background: var(--chrome-ink);
  color: #fff;
  border-radius: 2px;
  font-weight: 800;
  letter-spacing: .16em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
html.fun-mode .nf-name { font-weight: 800; color: var(--chrome-ink); }
html.fun-mode .nf-note { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--chrome-ink); }


/* ============================================================
   6. PHONES
   Fewer, smaller bits, nothing off the edge, 44px targets.
   ============================================================ */
@media (max-width: 1100px) {
  html.fun-mode .nf::before { right: 40px; top: 20px; font-size: 56px; }
  html.fun-mode .nf::after { right: 0; top: 120px; width: 260px; height: 214px; }
  html.fun-mode .nf-title::after { right: 180px; top: 300px; width: 200px; height: 88px; }
}

@media (max-width: 900px) {
  /* the sleeve's single column: the same printed panels, closer together */
  /* the tear is 14.8% of the width tall here too; the content clears it */
  html.fun-mode .fx { padding: clamp(48px, 9vw, 72px) 20px 46px; gap: 20px; }
  /* the single column gets the same cut sheets, not a stripped version:
     same stock, same cut, just tighter inside */
  html.fun-mode .fx-cell.fx-nav,
  html.fun-mode .fx-cell.fx-social,
  html.fun-mode .fx-cell.fx-spec { padding: 20px 18px 22px; }
  html.fun-mode .fx-label { font-size: 22px; margin-bottom: 14px; }
  html.fun-mode .fx-spec .fx-mood { margin-top: 16px; padding: 16px; }
  html.fun-mode .fx-spec .fx-mood dt { font-size: 20px; margin-bottom: 10px; }
  html.fun-mode .fx-mood .fx-mood-opt { font-size: 24px; }
  html.fun-mode .fx-hello { padding: 4px 0; }
  html.fun-mode .fx-hello .fx-logo { width: 128px; margin-bottom: 18px; }
  /* THE SEAM, on a phone. On a wide window the folio sits beside the CTA and
     the rule divides the sheet above both of them. Stacked, the folio falls
     directly under the CTA, and at 22px/-12px the hairline landed 8px below
     a solid pink block — close enough to read as an edge belonging to the
     button rather than as the sheet's own division — a line that close to a
     black-bordered block reads as part of the block. The folio is given
     36px of its own air and the rule is moved INSIDE it, to +18px: the grid
     gap above the cell is 20px, so that is the midpoint between the CTA's
     bottom edge and the first line of small print, and the rule finally
     divides the two instead of hugging one. (A negative top only ever put
     it back in the gap, and the gap belongs to the button.)
     Written as .fx-cell.fx-folio, not .fx-folio: the 6px set above is at
     that specificity and a single class loses to it. */
  html.fun-mode .fx-cell.fx-folio { padding-top: 36px; }
  html.fun-mode .fx-cell.fx-folio::before { top: 18px; }
  /* styles.css hides the NAVIGATE and CONNECT labels on a phone to save a
     viewport of height. A keyline panel with no label at its top is just an
     empty box, and the reference gives every panel one, so they come back
     here — at 10px they cost almost nothing. */
  html.fun-mode .fx-nav .fx-label,
  html.fun-mode .fx-social .fx-label { display: flex; margin-bottom: 12px; }
  /* the spec rows stack on a phone: the label above, the value under it.
     The row goes to display: block below 900px, so the two inline-blocks
     have to be told to be blocks — a flex-direction alone does nothing. */
  html.fun-mode .fx-spec > div { padding: 10px 0; }
  html.fun-mode .fx-spec dt { display: block; margin-bottom: 5px; }
  html.fun-mode .fx-spec dd { display: block; text-align: left; }
  /* the links sit in tight rows, not on 44px-tall bands with 20px between */
  html.fun-mode .fx-links { gap: 2px 18px; }
  /* the Mood row keeps its 44px target and its label above the value */
  html.fun-mode .fx-mood-btn { justify-content: flex-start; }
  /* "FLIP ME" IS GONE ON A PHONE, and this is not a tidy-up.
     On a wide window the note sits to the LEFT of the switch, where it reads
     as an aside pointing at it. In a single column there is no room on that
     side, so it was moved to the right — which put it in the switch's own
     line, immediately after the second option, and the row read
     "Serious / Fun FLIP ME": three words in a row, one of them not a mood.
     The switch already says what it is — screens.css prints both options and
     inks the current one — so the note has nothing left to explain here, and
     an ambiguous label is worse than no label. Wide windows keep theirs. */
  html.fun-mode .fx-mood-btn::after { content: none; }
}

@media (max-width: 760px) {
  html.fun-mode .nav-inner { padding-right: 16px; }
  /* the "flip me" note's narrow-column position used to be nudged again
     here; it is not drawn at all below 900px any more (see above) */
  html.fun-mode .nf { padding-bottom: 300px; }
  html.fun-mode .nf::before { right: auto; left: 24px; top: auto; bottom: 150px; font-size: 54px; }
  html.fun-mode .nf::after { right: 10px; top: auto; bottom: 30px; width: 230px; height: 190px; }
  html.fun-mode .nf-title::after { right: auto; left: 20px; top: auto; bottom: 40px; width: 190px; height: 84px; }
  html.fun-mode .nf-index { gap: 18px; }
}

/* touch: every link in the footer is at least 44px both ways */
@media (any-pointer: coarse) {
  html.fun-mode .fx-links a { min-width: 44px; justify-content: center; }
  html.fun-mode .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
}