/* ============================================
   FUN MODE
   The third look. Same content, same layout, different clothes.

   Modelled on the poster language of maximatherapy.com (extracted 4 Sep
   2026): four flat program hues, white inset panels, one heavy rounded
   all-caps display face at 80% leading, one rounded grotesk at one weight
   for reading, pills everywhere, no rules and no shadows, and motion that
   enters with an elastic overshoot. Their faces (Robuck Rounded, ABC Diatype
   Rounded) are self-hosted and licensed, so this uses the nearest Google
   faces: Nunito for text. The display face is the user's own TAY Crumb,
   self-hosted from /assets/fonts and declared below.

   Everything here is scoped to html.fun-mode, which fun.js sets before the
   first paint. This file loads after styles.css and after every page's own
   sheet, so an equal-specificity rule here wins by order alone.
   ============================================ */

/* The display face. One weight, caps only (lowercase is small caps), so
   headings set at 400 — anything heavier would be a faux bold. It is only
   fetched once a rule under html.fun-mode asks for it. */
@font-face {
  font-family: 'TAY Crumb';
  src: url('/assets/fonts/TAYCrumbRegular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html.fun-mode {
  /* ---- grounds ---- */
  --fun-pink:      #f780d4;
  --fun-pink-pale: #f5cbff;
  --fun-beige:     #f3efe0;
  --fun-blue:      #2668fd;
  --fun-purple:    #6b3088;
  --fun-turquoise: #2cd1d0;
  --fun-turq-pale: #b9ecea;
  --fun-yellow:    #fdcb40;
  --fun-yellow-pale: #fff2b7;
  --fun-salmon:    #ffcccd;
  --fun-cta:       #ff4686;   /* every button */
  --fun-ease:      cubic-bezier(.16, 1, .3, 1);          /* expo.out */
  --fun-bounce:    cubic-bezier(.34, 1.56, .64, 1);      /* a CSS stand-in for elastic.out */

  --bg-cream: var(--fun-beige);
  --bg-band: var(--fun-beige);
  --bg-band-2: #ffffff;
  --surface: #ffffff;
  --rule: transparent;
  --rule-soft: transparent;
  --veil: #ffffff;
  --veil-strong: #ffffff;
  --veil-border: transparent;
  --bg-dark: var(--fun-blue);

  /* ---- text: black, and one display colour. Maxima has no grey. ---- */
  --text-primary: #000000;
  --text-body: #000000;
  --text-muted: var(--fun-purple);
  --text-hover: var(--fun-blue);
  --text-white: #ffffff;
  --text-muted-on-dark: var(--fun-pink-pale);
  --accent: var(--fun-blue);

  --font-display: 'TAY Crumb', 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
  --font-sans: 'Nunito', 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif-body: 'Nunito', -apple-system, sans-serif;

  --radius-sm: 999px;
  --radius-md: 24px;
  --radius-pill: 999px;

  /* case-study palette */
  --cs-text: #000000;
  --cs-text-2: #000000;
  --cs-text-3: var(--fun-purple);
  --cs-band: var(--fun-beige);
  --cs-tag: var(--fun-turq-pale);
  --cs-mark: var(--fun-yellow);
  --cs-note-bg: var(--fun-yellow-pale);
  --cs-note-border: var(--fun-yellow);
  --cs-rule: transparent;

  /* the raf plates */
  --plate-radius: 24px;
}

html.fun-mode body { background: var(--fun-beige); color: #000; }

html.fun-mode ::selection { background: var(--fun-blue); color: #fff; }

/* ---- type ---- */
html.fun-mode body,
html.fun-mode p,
html.fun-mode li,
html.fun-mode dd,
html.fun-mode .pv-standfirst,
html.fun-mode .cs-body p {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* every paragraph that is not a label or a display title */
/* one :not() list rather than a chain: a chain adds a class of specificity
   per exclusion and this rule was beating page rules it should not have
   (the case study statements). The list keeps it at (0,2,1). */
html.fun-mode p:not(.mast-byline, .fx-label, .proj-name, .cover-title, .pv-result-value, .pv-result-label, .mo-name, .built-name, .index-title, .pv-standfirst, .cs-statement, .fx-invite, .cs-statement p),
html.fun-mode li,
html.fun-mode dd,
html.fun-mode .case-caption,
html.fun-mode .proj-note,
html.fun-mode .built-lede,
html.fun-mode .built-stack,
html.fun-mode .fine-print,
html.fun-mode .fx-links a,
html.fun-mode .fx-spec dd,
html.fun-mode .fx-folio span {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-body);   /* black everywhere except the dark plates and the green sheet, which set the token */
}
/* the standfirst is the one paragraph a step above body; it had inherited a
   16.5px size from the panel layout and sat smaller than the copy under it */
html.fun-mode .pv-standfirst { font-size: 20px; line-height: 1.4; }
/* spec values (Role, Team, Scope) and the glossary definitions are body copy,
   not labels; the panel sheet had them at agate size and one in purple */
html.fun-mode .pv-meta dd,
html.fun-mode .cs-context[data-ctx-variant] .cs-ctx-def dd { font-size: 18px; line-height: 1.4; color: var(--text-body); }
/* the case study statements (the 86% / 9% finding, "one in ten joined") are
   display lines, not paragraphs: the title face at the size the page sets */
html.fun-mode .cs-statement p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 96px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-primary);
}
html.fun-mode .site-footer .fx-folio span,
html.fun-mode .site-footer .fx-folio span:last-child { color: #000; opacity: 1; }

html.fun-mode h1,
html.fun-mode h2,
html.fun-mode h3,
html.fun-mode .cover-title,
html.fun-mode .index-title,
html.fun-mode .home-masthead h1,
html.fun-mode .pv-result-value,
html.fun-mode .cs-statement,
html.fun-mode .mo-name,
html.fun-mode .built-name,
html.fun-mode .proj-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .95;
  color: #000;
}
html.fun-mode h1 { color: var(--fun-purple); }
html.fun-mode h1 em,
html.fun-mode h2 em,
html.fun-mode h3 em { font-style: normal; color: var(--fun-blue); }
html.fun-mode .home-masthead h1 { font-size: clamp(48px, 8vw, 122px); line-height: .92; letter-spacing: 0; color: #ffb64a; }
/* one bright title per sheet */
html.fun-mode .home-projects .index-title { color: #ff4686; }
html.fun-mode .built.tint-band .index-title { color: #fff2b7; }
html.fun-mode .home-index.tint-band .index-title { color: #8e7cff; }
html.fun-mode .home-masthead h1 em { font-style: normal; }
html.fun-mode .home-masthead .no,
html.fun-mode .fx-invite .no { color: var(--fun-pink); }
html.fun-mode .pv-result-value { color: var(--fun-blue); }
/* case study covers sit on photographs: the title stays white */
html.fun-mode .cover-title,
html.fun-mode .case-media-cover .cover-title { color: #fff; }

/* labels and kickers: Maxima's tag — small caps in a blue chip */
html.fun-mode .ed-kicker,
html.fun-mode .fx-label,
html.fun-mode .fx-spec dt,
html.fun-mode .home-section-head h2,
html.fun-mode .pv-result-label,
html.fun-mode .mo-label,
html.fun-mode .built-kind,
html.fun-mode .mo-no,
html.fun-mode .proj-note {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fun-purple);
}
html.fun-mode .home-section-head h2::before { display: none; }

/* ---- pills: every button and link-as-button becomes a Maxima pill ---- */
html.fun-mode .btn-primary,
html.fun-mode .thought-link,
html.fun-mode .cs-live-tip,
html.fun-mode .cv-download {
  border-radius: 200px;
  border: 2px solid #000;
  box-shadow: 6px 8px 0 0 #000;
  outline: none;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: box-shadow .25s ease-out, transform .25s ease-out;
  transform: none;
}
html.fun-mode .btn-primary,
html.fun-mode .thought-link,
html.fun-mode .cs-live-tip,
html.fun-mode .cv-download {
  background: var(--fun-cta);
  color: #000;
  font-size: 15px;
  line-height: 1;
  padding: 15px 30px;
}
html.fun-mode .btn-primary:hover,
html.fun-mode .thought-link:hover,
html.fun-mode .cs-live-tip:hover,
/* pressed: the pill travels into where its shadow was */
html.fun-mode .cv-download:hover { background: var(--fun-cta); color: #000; transform: translate(6px, 8px); box-shadow: none; }
html.fun-mode .thought-link .arrow,
html.fun-mode .thought-link svg { color: #000; }

html.fun-mode .tag-pill {
  background: var(--fun-blue);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-weight: 500;
  padding: 8px 12px;
}
html.fun-mode .tag-pill img { border-radius: 50%; }

html.fun-mode mark { background: var(--fun-yellow); color: #000; border-radius: 6px; padding: 0 .2em; }

/* ---- media: everything rounds to the card radius, nothing has a rule ---- */
html.fun-mode main img,
html.fun-mode main video,
html.fun-mode main iframe,
html.fun-mode .home-tile-media,
html.fun-mode .case-media-cover,
html.fun-mode .case-media,
html.fun-mode .cover-img,
html.fun-mode .mo-tile,
html.fun-mode .built-shot,
html.fun-mode .cs-live-frame,
html.fun-mode .cs-proto-frame,
html.fun-mode .pv-fig > img,
html.fun-mode .pv-fig > video,
html.fun-mode .cs-trio-cell {
  border-radius: 24px;
  border-color: transparent;
  overflow: hidden;
}
html.fun-mode main svg,
html.fun-mode .tag-pill img,
html.fun-mode .logo img { border-radius: 0; }
html.fun-mode .home-tile:hover .home-tile-media { opacity: 1; transform: rotate(-1.5deg) scale(1.02); }
html.fun-mode .home-tile-media { transition: transform .9s var(--fun-bounce); }

/* the About prints: the white frame rounds with the photo inside it */
html.fun-mode .taped { border-radius: 24px; overflow: hidden; border-color: transparent; }
html.fun-mode .taped img { border-radius: 16px; }

/* the case study covers get a white stroke */
html.fun-mode .case-media-cover,
html.fun-mode .home-tile-media { box-shadow: 0 0 0 7px #fff; }

/* the mosaic tiles carry no colour of their own; the image is the tile */
/* the tile name sits on the photograph with its category; both are white */
html.fun-mode .mo-label .mo-name,
html.fun-mode .mi-meta h3 { color: #fff; }   /* the craft masonry names sit on their photos too */
html.fun-mode .mo-tile,
html.fun-mode .wall-band,
html.fun-mode .wall-main,
html.fun-mode .mosaic { background: transparent; border-radius: 0; }

/* bands become the beige story block, inset as a white panel would be */
html.fun-mode .tint-band,
html.fun-mode .cs-band,
html.fun-mode .home-index { background: var(--fun-beige); border-radius: 24px; }
/* the homepage bands each take a programme hue, the way their sections do */
html.fun-mode .home-projects { background: #fff2b7; --text-muted: #5a4a1a; --bg-band: #fff2b7; }
html.fun-mode .built.tint-band { background: #2cd17d; --text-muted: #0f3d26; --bg-band: #2cd17d; --text-body: #000; --text-primary: #000; color: #000; }
/* white text on the green sheet: names, kickers and the stack line included.
   The title keeps its pale yellow and the buttons keep their black label. */
html.fun-mode .built.tint-band .built-name,
html.fun-mode .built.tint-band .built-kind,
html.fun-mode .built.tint-band .built-stack,
html.fun-mode .built.tint-band .built-stack b,
html.fun-mode .built.tint-band .index-head p { color: #000; }
html.fun-mode .home-index.tint-band { background: #ffb1c9; --text-muted: #5a1f35; --bg-band: #ffb1c9; --text-primary: #000; --text-body: #000; }
html.fun-mode .home-projects,
html.fun-mode .built.tint-band,
html.fun-mode .home-index.tint-band {
  margin-left: 14px;
  margin-right: 14px;
  border-radius: 28px;
  box-shadow: 0 0 0 7px #fff;   /* the same white stroke as the covers */
}
/* the sheets keep clear of each other: styles.css collapses the gap between
   two tint bands, and the stroke needs room on both sides */
html.fun-mode .home-projects,
html.fun-mode .built.tint-band,
html.fun-mode .home-index.tint-band { padding-top: 72px; padding-bottom: 72px; margin-top: 40px; margin-bottom: 0; }
html.fun-mode .site-footer { margin-top: 0; padding-top: 132px; position: relative; }
/* A scalloped top: teal bumps on nothing, drawn as one SVG tile so they can
   overlap and differ in size. The bumps at the tile's two edges are identical,
   so the repeat has no seam, and the strip is transparent between them. */
html.fun-mode .site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 92px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='92' viewBox='0 0 560 92'%3E%3Cg fill='%232cd1d0'%3E%3Cellipse cx='0' cy='95' rx='118' ry='58'/%3E%3Cellipse cx='168' cy='95' rx='138' ry='84'/%3E%3Cellipse cx='352' cy='95' rx='126' ry='68'/%3E%3Cellipse cx='560' cy='95' rx='118' ry='58'/%3E%3C/g%3E%3C/svg%3E") repeat-x left top / 560px 92px;
}
/* the cover stack ends with its own 54px of air under the last caption row;
   this takes it back to the same 40px every other seam gets */
html.fun-mode .home-projects { margin-top: -14px; }
html.fun-mode .fx-bleed { padding-top: 0; }

/* the raf plates: white sheets on pink, no edges */
html.fun-mode .pv-chapter,
html.fun-mode .cs-panel-card { border-color: transparent; box-shadow: none; }
html.fun-mode .is-dark { --text-primary: #fff; --text-body: #fff; --text-muted: #fff2b7; background: var(--fun-blue); color: #fff; }
/* the dark plates are flat blue: the animated field (a red smoke canvas and
   its two fallback layers) was painting over the blue and the ink on it was
   black, so the chapter could not be read */
html.fun-mode .pv-chapter.is-banded .cs-scene,
html.fun-mode .pv-chapter.is-banded::before,
html.fun-mode .pv-chapter.is-banded::after { display: none; }
html.fun-mode .is-dark p,
html.fun-mode .is-dark li,
html.fun-mode .is-dark dd,
html.fun-mode .is-dark h2,
html.fun-mode .is-dark h3,
html.fun-mode .is-dark .pv-standfirst,
html.fun-mode .is-dark .pv-fig-cap,
html.fun-mode .is-dark .cs-statement p { color: #fff; }
/* the headline numbers were blue on blue; the pale yellow is the sheet-title colour */
html.fun-mode .is-dark .pv-result-value { color: #fff2b7; }
html.fun-mode .is-dark .pv-result-label,
html.fun-mode .is-dark dt,
html.fun-mode .is-dark .pv-kicker,
html.fun-mode .is-dark .ed-kicker { color: #fff; }
/* the cream figure bands and the offer plates are white panels, like the rest of the media */
html.fun-mode .band { background: #fff; border-radius: 24px; }
html.fun-mode .cs-offer-hero,
html.fun-mode .cs-offer-how { background: #fff; }
/* the headline stats on the older case studies take the same face and colour
   as the panel results; the case-study body rule had pulled them to Nunito */
html.fun-mode .impact .stat-value,
html.fun-mode .stat-value { font-family: var(--font-display); font-weight: 400; color: var(--fun-blue); letter-spacing: 0; }
/* hairlines left over from serious mode: section heads, the sections list,
   the fact rows, the spec sheet, the resume's rows and the thought cards.
   Fun mode has no rules; the colour is the only property touched so the
   boxes keep their size */
html.fun-mode :is(.index-head, .index-links, .toc-list a, .toc-list li:first-child a, .fact-row, .fact-row:last-child, .cv-head, .cv-contact > div, .cv-role-entry, .cv-spec > div, .cv-footnote, .thought-media, .pv-meta, .pv-meta div, .nav-overlay-footer) { border-color: transparent; }

/* ---- nav: a floating white pill ---- */
html.fun-mode .nav { background: transparent; border-bottom: 0; padding-left: 12px; padding-right: 12px; }
html.fun-mode .nav.show-stroke { border-bottom-color: transparent; }
html.fun-mode .nav-inner {
  background: transparent;
  border-radius: 999px;
  margin-top: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 38px;
  padding-right: 28px;
}
html.fun-mode .nav-links a { color: #000; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; text-transform: none; }
html.fun-mode .nav-links a:hover,
html.fun-mode .nav-links a.current { color: var(--fun-blue); }
html.fun-mode .nav .logo img,
html.fun-mode.dark-mode .nav .logo img {
  content: url('https://cdn.prod.website-files.com/667c2ea7460262b0b32b6add/667c3cfd7cdc38dd4ea5f75a_jmlogo.png');
}
html.fun-mode .theme-toggle-btn { color: var(--fun-blue); }
html.fun-mode .nav-toggle span { background: #000; }
html.fun-mode .nav-overlay { background: var(--fun-blue); }
html.fun-mode .nav-overlay-links a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0; color: var(--fun-yellow-pale); }
html.fun-mode .nav-overlay-links a:hover,
html.fun-mode .nav-overlay-links a.current { color: #fff; }
/* the overlay's footer row: the links were 11px purple on blue (unreadable)
   under a hairline; white, body-sized, and the theme button is a full tap */
html.fun-mode .nav-overlay-footer { border-top-color: transparent; }
html.fun-mode .nav-overlay-footer a { color: #fff; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; }
html.fun-mode .nav-overlay-footer a:hover { color: var(--fun-yellow-pale); }
html.fun-mode .nav-overlay-footer .overlay-theme { color: #fff; min-height: 44px; }
html.fun-mode .nav-overlay .logo img { content: url('https://cdn.prod.website-files.com/667c2ea7460262b0b32b6add/667c3cfd7cdc38dd4ea5f75a_jmlogo.png'); }

/* floating actions (scroll to top etc) become round white buttons */
html.fun-mode .floating-actions button,
html.fun-mode .floating-actions a {
  background: #fff;
  color: var(--fun-blue);
  border: 0;
  border-radius: 50%;
  transition: transform .9s var(--fun-bounce);
}
html.fun-mode .floating-actions button:hover,
html.fun-mode .floating-actions a:hover { transform: scale(1.1); }

/* ---- footer: the turquoise band with a white panel, like theirs ---- */
html.fun-mode .site-footer,
html.fun-mode.dark-mode .site-footer {
  --fx-surface: #ffffff;
  --text-primary: #000;
  --text-body: #000;
  --text-muted: var(--fun-purple);
  --text-hover: var(--fun-blue);
  --rule: transparent;
  /* teal from below the scallop strip; the strip itself is transparent */
  background: linear-gradient(to bottom, transparent 92px, var(--fun-turquoise) 92px);
  color: #000;
}
html.fun-mode .fx-bleed { background: var(--fun-turquoise); border: 0; }
html.fun-mode .site-footer,
html.fun-mode .fx,
html.fun-mode .fx-bleed { border-top: 0; border-bottom: 0; outline: 0; }
html.fun-mode .fx {
  background: transparent;
  border: 0;
  gap: 12px;
  padding: 0 14px 14px;
}
/* ---- the footer, restyled: every cell its own colour, drawn like the
   buttons with an ink border and a hard ink shadow, no white anywhere ---- */
html.fun-mode .fx { gap: 22px; padding: 0 22px 26px; }
html.fun-mode .fx-cell {
  background: #fff2b7;
  border: 2px solid #000;
  border-radius: 24px;
  box-shadow: none;   /* the cells are not buttons; only the CTA carries the hard shadow */
  padding: 34px 40px;
}
html.fun-mode .fx-hello { background: #fff2b7; }
html.fun-mode .fx-nav { background: #e4d2ff; }
html.fun-mode .fx-social { background: #c6f1da; }
html.fun-mode .fx-spec { background: #ffd3df; }
html.fun-mode .fx-folio { background: #d9d3ff; }
/* the note is the footer's headline now */
html.fun-mode .fx-invite {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #000;
  max-width: 22ch;
}
html.fun-mode .fx-invite .no { color: var(--fun-cta); }
html.fun-mode .fx-label,
html.fun-mode .fx-spec dt { color: #000; font-weight: 800; }
html.fun-mode .fx-spec dt::before { background: #000; }
html.fun-mode .fx-links a { font-weight: 700; }
html.fun-mode .fx-spine .v-text { color: #000; }
html.fun-mode .fx-logo { content: url('https://cdn.prod.website-files.com/667c2ea7460262b0b32b6add/667c3cfd7cdc38dd4ea5f75a_jmlogo.png'); }
html.fun-mode .fx-label::after,
html.fun-mode .fx-label::before { display: none; }
html.fun-mode .fx-links a {
  color: #000;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 500;
  transition: none;
  padding: 0;
  background: transparent;
  position: relative;
}
html.fun-mode .fx-links a::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: .1em;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease-in-out;
}
html.fun-mode .fx-links a:hover { color: #000; transform: none; }
/* styles.css puts a middle dot after each link on phones; with 44px link
   rows the dots dangled at line ends. The gap does the separating instead. */
html.fun-mode .fx-links a:not(:last-child)::after { content: none; }
/* the Mood switch is 30x25 of text; pad it to a 44px row without moving it */
html.fun-mode .fx-mood-btn { padding: 10px 0; margin: -10px 0; min-height: 44px; }
html.fun-mode .fx-links a:hover::before { transform: scaleX(1); }
html.fun-mode .fx-spec > div { border-top: 0; padding: 9px 0; }
html.fun-mode .fx-spec dt::before { border-radius: 50%; width: 7px; height: 7px; }
html.fun-mode .fx-cta,
html.fun-mode.dark-mode .fx-cta {
  background: var(--fun-cta);
  color: #000;
  border: 2px solid #000;
  border-radius: 200px;
  box-shadow: 6px 8px 0 0 #000;
  transition: box-shadow .25s ease-out, transform .25s ease-out;
}
html.fun-mode .fx-cta:hover { background: var(--fun-cta); color: #000; transform: translate(6px, 8px); box-shadow: none; }
html.fun-mode .fx-cta-label { font-family: var(--font-sans); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
html.fun-mode .fx-cta-icon { color: #000; }
html.fun-mode .fx-cta.is-copied .fx-cta-tip { background: var(--fun-yellow); color: #000; }
html.fun-mode .fx-spine { background: transparent; border: 0; box-shadow: none; padding: 0; }
html.fun-mode .fx-spine .v-text { color: #000; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
html.fun-mode .fx-folio { color: #000; }


/* ============================================
   THE MOOD ROW
   One more line of the colophon spec sheet, on every page. The value is a
   live control: hover underlines it and the cursor becomes a face; a click
   flips the whole site. This part is NOT scoped to fun-mode — it has to be
   visible in every mode or nobody would ever find it.
   ============================================ */
.fx-mood-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  line-height: inherit;
  cursor: pointer;
}
.fx-mood-val {
  position: relative;
  display: inline-block;
}
.fx-mood-val::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease-in-out;
}
.fx-mood-btn:hover .fx-mood-val::after,
.fx-mood-btn:focus-visible .fx-mood-val::after { transform: scaleX(1); }
.fx-mood-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* the face. 96px is the largest a cursor can be and still show everywhere. */
@media (hover: hover) and (pointer: fine) {
  .fx-mood-btn:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='48' r='43' fill='%23f780d4' stroke='%23fff' stroke-width='6'/%3E%3Ccircle cx='34' cy='40' r='5.5' fill='%236b3088'/%3E%3Ccircle cx='62' cy='40' r='5.5' fill='%236b3088'/%3E%3Cpath d='M30 57q18 18 36 0' fill='none' stroke='%236b3088' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 48 48, pointer;
  }
  /* in fun mode the way out is a straight face */
  html.fun-mode .fx-mood-btn:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='48' r='43' fill='%23f3efe0' stroke='%23000' stroke-width='5'/%3E%3Ccircle cx='34' cy='40' r='5.5' fill='%23000'/%3E%3Ccircle cx='62' cy='40' r='5.5' fill='%23000'/%3E%3Cpath d='M32 62h32' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 48 48, pointer;
  }

  /* and fun mode gets its own everyday cursors, the way their site does */
  html.fun-mode,
  html.fun-mode body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 L27 14 L17 17 L12 28 Z' fill='%232668fd' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto;
  }
  html.fun-mode a,
  html.fun-mode button,
  html.fun-mode [role="button"],
  html.fun-mode summary,
  html.fun-mode label {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='15' fill='%23f780d4' stroke='%23fff' stroke-width='4'/%3E%3C/svg%3E") 20 20, pointer;
  }
}

/* ============================================
   THE CURTAIN
   fun.js raises the site's own .wipe-out (styles.css, "PAGE TRANSITION
   CURTAIN") so the switch moves exactly like a case study link: revealed
   from the bottom in 985ms, held, then clipped away from the bottom. The
   only addition is the exit half, which on a real navigation belongs to
   the next page. No image behind it, and the word sits square.
   ============================================ */
.fun-wipe { background-image: linear-gradient(180deg, rgba(12, 10, 8, 0.32) 0%, rgba(12, 10, 8, 0.48) 100%); }
/* into fun mode the curtain is the footer's teal; back to serious it is the site's ink */
.fun-wipe.is-fun { background-color: #2cd1d0; background-image: none; }
.fun-wipe.is-down {
  clip-path: inset(0% 0% 100%);
  transition: clip-path 0.64s cubic-bezier(0.65, 0, 0.35, 1);
}
/* the word keeps the case study curtain's face even as the mode flips under it,
   except on the way into fun mode, where it is the fun title face */
.fun-wipe span { transform: none; font-family: 'Fraunces', Georgia, serif; }
.fun-wipe.is-fun span { font-family: 'TAY Crumb', 'Fraunces', Georgia, serif; font-weight: 400; font-optical-sizing: auto; font-variation-settings: normal; }

@media (prefers-reduced-motion: reduce) {
  html.fun-mode * { transition-duration: 0s !important; }
}

@media (max-width: 760px) {
  html.fun-mode .home-masthead h1 { font-size: clamp(40px, 11.5vw, 64px); }
  /* on a phone the masthead is the byline name (styles.css, MASTHEAD, PHONE):
     it takes the headline's colour and size so the page opens the same way */
  html.fun-mode .home-masthead .mast-byline .mast-name {
    color: #ffb64a;
    font-size: clamp(38px, 10.5vw, 46px);
    line-height: .95;
    letter-spacing: 0;
    margin-bottom: 10px;
  }
  html.fun-mode .nav-inner { margin-top: 8px; padding-left: 16px; }
  html.fun-mode .fx { padding: 0 14px 18px; gap: 18px; }
  html.fun-mode .fx-cell { padding: 26px 24px; }
  html.fun-mode .fx-links { gap: 4px 22px; }
  /* the strokes and seams scale down together: 4px strokes, 24px seams,
     48px of air inside the sheets. 7px and 40px were a desktop measure. */
  html.fun-mode .home-projects,
  html.fun-mode .built.tint-band,
  html.fun-mode .home-index.tint-band {
    box-shadow: 0 0 0 4px #fff;
    margin-top: 24px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  /* on a phone the cover stack has no air of its own under its last button
     (styles.css zeroes the archive's bottom padding), so the first seam is a
     plain 24px like the others, not the desktop's -14px correction */
  html.fun-mode .home-projects { margin-top: 24px; }
  /* the covers bleed edge to edge on a phone, which clipped their ring; they
     now sit 14px in, the same edge as the sheets, with the 4px ring outside */
  html.fun-mode .case-study .case-media-cover,
  html.fun-mode .case-study-sm .case-media-cover {
    margin-left: -10px;
    margin-right: -10px;
  }
  html.fun-mode .case-media-cover,
  html.fun-mode .home-tile-media { box-shadow: 0 0 0 4px #fff; }
  html.fun-mode .site-footer { padding-top: 112px; }
  html.fun-mode .cs-statement p { font-size: clamp(34px, 10vw, 48px); }
}