/* ============================================================
     BREAD & BUTTER — notebook doodle edition
     Same visual language as the game: graphite ink #3d3d3d on
     paper #fcfcf7, crayon hatch fills, GriunCherry handwriting.
     Outlines are clean single strokes.
     ============================================================ */
  @font-face {
    font-family: 'GriunCherry';
    src: url('Griun_Cherry1Spoon-Rg.ttf') format('truetype');
    font-display: swap;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }

  :root {
    --ink: #3d3d3d;          /* pencil graphite */
    --paper: #fcfcf7;        /* notebook paper */
    --rule: rgba(96, 145, 190, .16);   /* blue ruled lines */
    --margin-red: rgba(192, 57, 43, .25);
    --crayon-tan: #d9954a;
    --crayon-butter: #f5c542;
    --crayon-red: #c0392b;
    --crayon-purple: #7a3fb0;          /* the game's magic purple */
    --font: 'GriunCherry', 'Chalkboard SE', 'Comic Sans MS', 'Segoe Print', cursive;
  }

  body {
    font-family: var(--font);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    /* ruled notebook paper: horizontal lines + a red margin rule */
    background:
      linear-gradient(90deg, transparent 0 90px, var(--margin-red) 90px 92px, transparent 92px),
      repeating-linear-gradient(transparent 0 33px, var(--rule) 33px 34px),
      var(--paper);
  }

  /* .boil / .boil2 just tag each hand-drawn group — used as hooks for the hover wiggle.
     (Lines themselves stay clean, continuous vector strokes.) */
  /* text trembles by nudging, not warping, so it stays readable (like the game's skText) */
  /* A slow drift rather than a shake. steps() made it snap between positions,
     which read as stuttering at this size; easing between four points instead
     lets the lettering breathe. The crayon rules keep the stepped boiling —
     that belongs to the drawn line, not to the type. */
  .jig { animation: jig 7s ease-in-out infinite; }
  @keyframes jig {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(3.5px, -2.2px) rotate(.85deg); }
    50%      { transform: translate(-1.2px, 2.8px) rotate(-.4deg); }
    75%      { transform: translate(-3.2px, -1.4px) rotate(-.8deg); }
  }

  .page { position: relative; z-index: 1; }

  /* ---------- notebook heading, written on the top lines ---------- */
  .headline {
    text-align: center;
    padding: 3.2rem 1rem 0;
  }
  .headline h1 {
    display: inline-block;
    margin: 0;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    font-weight: normal;
    letter-spacing: .04em;
    line-height: 1;
  }
  /* The wordmark says what it is: crust brown, pencil ampersand, butter yellow.
     Each word gets two shadows — a tight offset in a deeper shade of its own
     colour, as if the crayon were pressed harder on one side, plus a soft
     ambient one that lifts the lettering a hair off the paper. Keeping the
     offset in-hue avoids the grey drop-shadow look. */
  /* Matched to the bread labels: their filter offsets 1 unit at .75 opacity on
     19px type, which is ~1.8 screen px. Scaled up for this heading's size, that
     lands at ~2.6px — hence the numbers below rather than the timid earlier set. */
  .headline h1 span { display: inline-block; }
  .headline .wm-bread {
    color: var(--crayon-tan);
    text-shadow: 1.6px 1.6px 0 rgba(150, 88, 26, .82), 0 3px 6px rgba(61, 61, 61, .3);
  }
  .headline .wm-butter {
    color: var(--crayon-butter);
    text-shadow: 1.6px 1.6px 0 rgba(150, 105, 12, .82), 0 3px 6px rgba(61, 61, 61, .3);
  }
  .headline .amp {
    color: var(--ink);
    text-shadow: 1.6px 1.6px 0 rgba(20, 20, 20, .55), 0 3px 6px rgba(61, 61, 61, .3);
  }
  .headline .underline { display: block; margin: .2rem auto 0; width: min(420px, 70vw); height: 14px; }
  /* the rule shakes with the title, but offset a beat so the two aren't welded together */
  .headline .underline.jig { animation-delay: -.5s; }

  /* ---------- the doodle spread ---------- */
  .stage {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1rem 1.25rem 0;
  }
  .cluster-wrap { width: min(880px, 100%); }
  .cluster { width: 100%; height: auto; display: block; overflow: visible; }

  .doodle {
    cursor: pointer;
    animation: appear .5s steps(3) backwards;
  }
  /* nth-child, not nth-of-type — the doodles are a mix of <g> and <a> (the ones
     that link out), and nth-of-type counts each tag separately. */
  .doodle:nth-child(1) { animation-delay: .05s; }
  .doodle:nth-child(2) { animation-delay: .18s; }
  .doodle:nth-child(3) { animation-delay: .31s; }
  .doodle:nth-child(4) { animation-delay: .44s; }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }

  /* Every drawing sits faint on the page, like pencil nobody has gone over yet;
     the one under the cursor gets inked in properly. Only the artwork fades —
     the labels below are never dimmed, so the four menu items always read. */
  .doodle .boil, .doodle .boil2 {
    opacity: .3;
    transition: opacity .3s ease;
    transform-box: fill-box; transform-origin: 50% 60%;   /* pivot for the wiggle */
  }
  .doodle:hover .boil, .doodle:hover .boil2 {
    opacity: 1;
    animation: wiggle .5s ease 1;
  }

  /* The crayon rule under each label isn't there until you point at the bread —
     then it draws itself left to right, like underlining the word by hand.
     pathLength="1" normalises every curve so all four draw at the same speed. */
  .rule {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .45s cubic-bezier(.4,.7,.3,1);
  }
  .doodle:hover .rule { stroke-dashoffset: 0; }

  /* The steam isn't there until you point at the bread, then each wisp draws
     itself upward from the crust. Every path starts at its lower end, so the
     dash reveals bottom-to-top on its own; the second wisp lags a little so
     they don't rise in lockstep. */
  .steam path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .55s ease;
  }
  .doodle:hover .steam path { stroke-dashoffset: 0; }
  .doodle:hover .steam path:nth-child(2) { transition-delay: .14s; }

  /* invisible catcher so the whole bread reacts, not just the inked strokes
     and the crayon lines (the gaps in the hatch would otherwise drop the hover) */
  .hit { fill: transparent; }
  @keyframes wiggle {
    0%, 100% { rotate: 0deg; }
    30%      { rotate: -2deg; }
    65%      { rotate: 1.6deg; }
  }

  /* Same treatment as the wordmark: no pencil outline, and two shadows — a tight
     offset in a deeper butter, then a soft ambient one. Offsets are in the
     cluster's user units (about 1.8x smaller than CSS px), hence the small
     numbers compared with the heading. */
  .label {
    font-family: var(--font); font-size: 19px;
    fill: var(--crayon-butter);
  }

  /* ---------- legal documents ---------- */
  .legal { max-width: 860px; margin: 0 auto; padding: 2.5rem 1.25rem 0; }
  .legal-head { text-align: center; font-size: 1.55rem; font-weight: normal; margin: 0; }
  .legal-rule { display: block; margin: .25rem auto 1.7rem; width: 220px; height: 12px; }
  .legal-rule.jig { animation-delay: -.5s; }   /* offset from its heading, same as the front page */

  /* a torn notepad sheet: uneven corner radii are what sell the hand-drawn box */
  .doc {
    display: block;
    background: #FFFDF6;
    border: 2.2px solid var(--ink);
    border-radius: 250px 14px 230px 16px / 16px 230px 15px 250px;
    padding: 1.5rem 1.7rem 1.2rem;
    margin-bottom: 1.4rem;
    box-shadow: 2px 3px 0 rgba(61,61,61,.09);
  }
  /* on the listing page each sheet is a link to its own full-text page */
  a.doc { color: inherit; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; }
  a.doc:hover { transform: translate(-1px,-3px); box-shadow: 4px 6px 0 rgba(61,61,61,.13); }
  a.doc:focus-visible { outline: 2.5px dashed var(--crayon-purple); outline-offset: 6px; }

  .doc-title { display: flex; align-items: center; gap: .55rem; font-size: 1.4rem; line-height: 1.2; }
  .doc-title svg { width: 26px; height: 26px; flex: none; }
  .doc-date { display: block; font-size: .84rem; opacity: .5; margin-top: .4rem; }

  .doc-preview {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 1rem; font-size: .95rem; line-height: 1.85; opacity: .78;
  }
  .doc-more { display: block; text-align: right; margin-top: .9rem; color: var(--crayon-purple); font-size: .95rem; }
  a.doc:hover .doc-more { text-decoration: underline; text-underline-offset: 4px; }

  /* the full-text page: one long sheet, no preview/collapse */
  .docsheet { padding: 2rem 1.9rem 1.7rem; }
  .doc-body { font-size: .95rem; line-height: 1.95; }
  .backfoot { text-align: center; margin: 0 0 1rem; font-size: .95rem; }
  .backfoot a { color: var(--crayon-purple); text-decoration: none; border-bottom: 1.8px solid rgba(122,63,176,.35); padding-bottom: 2px; }
  .backfoot a:hover { border-bottom-color: var(--crayon-purple); }
  .docpage .doc-date { margin-top: .1rem; }
  .doc-body p { margin: 0 0 .3rem; }
  .doc-body .sub { padding-left: 1.15em; }   /* numbered items nested under a ①②③ clause */
  .doc-body .h { font-size: 1.06rem; margin: 1.35rem 0 .45rem; }
  .doc-body .h:first-child { margin-top: 0; }
  .doc-body .eff { margin-top: 1.5rem; opacity: .55; font-size: .88rem; }

  /* ---------- footer ---------- */
  .foot { text-align: center; padding: 2.4rem 1rem 7.5rem; } /* roomy bottom so the post-it never covers the doodles */
  .socials { display: flex; gap: .9rem; justify-content: center; margin-bottom: .9rem; }
  .socials a { display: block; width: 46px; height: 46px; color: var(--ink); text-decoration: none; }
  .socials svg { width: 100%; height: 100%; display: block; }
  .socials .fillc { opacity: 0; transition: opacity .25s ease; }
  .socials a:hover .fillc { opacity: .65; }
  .tagline { margin: 0 0 .3rem; font-size: 1.05rem; }
  .tagline .heart { color: var(--crayon-red); }
  .copy { margin: 0; font-size: .82rem; opacity: .55; }

  /* ---------- hiring post-it ---------- */
  .postit {
    position: fixed; right: 2rem; bottom: 2rem; z-index: 20;
    width: 165px; padding: 1.5rem .9rem 1rem;
    background: #FFEFA8;
    box-shadow: 3px 5px 10px rgba(61,61,61,.20);
    transform: rotate(-4deg);
    font-family: var(--font); color: var(--ink);
    text-align: center; line-height: 1.25;
    cursor: pointer; border: none;
    transition: transform .3s cubic-bezier(.22,.9,.28,1), box-shadow .3s ease;
  }
  .postit::before { /* bit of tape */
    content: '';
    position: absolute; top: -9px; left: 50%;
    width: 64px; height: 18px;
    transform: translateX(-50%) rotate(2deg);
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(61,61,61,.12);
  }
  .postit .big { font-size: 1.25rem; display: block; }
  .postit .small { font-size: .92rem; opacity: .8; display: block; margin-top: .2rem; }
  .postit:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 4px 8px 16px rgba(61,61,61,.26); }

  @media (max-width: 720px) {
    body { background-position: -60px 0, 0 0, 0 0; }   /* pull the margin rule in on narrow screens */
    .headline { padding-top: 2.2rem; }
    .postit { right: 50%; transform: translateX(50%) rotate(-3deg); bottom: 1rem; width: 150px; padding: 1.2rem .8rem .8rem; }
    .postit:hover { transform: translateX(50%) rotate(0deg) translateY(-4px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .boil, .boil2, .jig, .doodle, .postit { animation: none !important; }
    .doodle, .socials .fillc, .postit { transition: opacity .2s ease !important; }
    /* no drawing gag — just show the rule and the steam outright */
    .rule, .steam path { transition: none; stroke-dashoffset: 0; }
  }

  /* ---------- links out to the legal page ---------- */
  .footlinks { margin: 2.6rem 0 0; font-size: .92rem; }   /* set well below the copyright line */
  .footlinks a {
    color: var(--crayon-purple); text-decoration: none;
    border-bottom: 1.8px solid rgba(122,63,176,.35);
    padding-bottom: 2px;
    transition: border-color .2s ease;
  }
  .footlinks a:hover { border-bottom-color: var(--crayon-purple); }

  /* ---------- games page ---------- */
  .games { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 0; }

  .game {
    background: #FFFDF6;
    border: 2.2px solid var(--ink);
    border-radius: 250px 14px 230px 16px / 16px 230px 15px 250px;
    padding: 2.6rem 2.6rem 2.3rem;
    margin-bottom: 2rem;
    box-shadow: 2px 3px 0 rgba(61,61,61,.09);
  }

  /* icon on the left, name to the right of it */
  .game-head { display: flex; align-items: center; gap: 1.4rem; }
  /* height-driven so the drawing keeps its own proportions and never crops */
  .game-icon { height: 124px; width: auto; flex: none; }
  .game-name { margin: 0; font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: normal; line-height: 1; letter-spacing: .03em; }
  .game-tag { margin: .5rem 0 0; font-size: 1.02rem; opacity: .6; }

  /* video left, words right */
  .game-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem;
    margin-top: 2.1rem; padding-top: 1.9rem;
    border-top: 2px dashed rgba(61,61,61,.2);
  }
  .game-media { min-width: 0; }
  .video-slot {
    aspect-ratio: 16 / 9;                       /* holds the shape until the trailer lands */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    border: 2.2px dashed rgba(61,61,61,.35);
    border-radius: 200px 12px 180px 14px / 14px 180px 13px 200px;
    background: rgba(61,61,61,.03);
  }
  .video-slot svg { width: 62px; height: 62px; }
  .video-slot span { font-size: .98rem; opacity: .5; }
  .game-media iframe, .game-media video {       /* whatever replaces the slot inherits the frame */
    width: 100%; aspect-ratio: 16 / 9; display: block;
    border: 2.2px solid var(--ink); border-radius: 6px;
  }

  .game-info { min-width: 0; }
  .game-info p { margin: 0 0 .9rem; font-size: 1.05rem; line-height: 1.9; }
  .game-avail { font-size: .98rem !important; opacity: .6; }

  .stores { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
  .store {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .7rem 1.3rem;
    color: var(--ink); text-decoration: none; font-size: 1.02rem;
    border: 2.2px solid var(--ink);
    border-radius: 120px 10px 110px 12px / 12px 110px 11px 120px;
    background: #FFFDF6;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  }
  .store:hover { transform: translate(-1px,-3px); box-shadow: 3px 5px 0 rgba(61,61,61,.14); background: #FFF6D8; }
  .store.soon { opacity: .45; cursor: not-allowed; }   /* no link yet — looks pending, not broken */
  .store.soon:hover { transform: none; box-shadow: none; background: #FFFDF6; }

  @media (max-width: 720px) {
    .game { padding: 1.5rem 1.3rem 1.4rem; }
    .game-body { grid-template-columns: 1fr; gap: 1.3rem; }
    .game-icon { height: 76px; }
  }

  /* ---------- the legal page's own header ---------- */
  .docpage { text-align: center; padding: 2.6rem 1rem 0; }
  .docpage h1 {
    margin: 1.1rem 0 0; font-weight: normal; line-height: 1;
    font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: .03em;
  }
  .back {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--ink); text-decoration: none; font-size: .98rem; opacity: .6;
    transition: opacity .2s ease, transform .2s ease;
  }
  .back:hover { opacity: 1; transform: translateX(-3px); }

  /* the legal page has no post-it pinned over it, so it needs less bottom room */
  .foot--plain { padding-bottom: 3rem; }