/* ==========================================================================
   FavFinds — style.css   ("Kraft paper, berry & blossom" theme, light)
   Prefix: ff-   ·  Fonts: Gloock (display) · Schibsted Grotesk (body) · Martian Mono (labels)

   01 Tokens & base            10 Hype vs honest slider
   02 Type & helpers           11 Hanging price tags
   03 Buttons                  12 Fine-print FAQ
   04 Notice bar + nav         13 Punch-card CTA
   05 Mobile drawer            14 Footer (torn kraft bag)
   06 Reveal animations        15 Auth pages (login / signup)
   07 Hero (flat-lay desk)     16 Legal pages
   08 Catalog spread           17 Profile (alias page) · Error · Shop
   09 Aisles + receipt         18 Cursor label · reduced motion
   ========================================================================== */

/* ---------- 01 Tokens & base ---------- */
:root {
  --ff-paper: #F3EDE2;
  --ff-paper-2: #FBF8F2;
  --ff-white: #FFFDF8;
  --ff-kraft: #CBA77B;
  --ff-kraft-soft: #E9DDC7;
  --ff-ink: #1B1815;
  --ff-ink-2: #4E473F;
  --ff-berry: #B4235A;
  --ff-lemon: #F1E3A0;
  --ff-blossom: #FFB8D0;
  --ff-mint: #BCE4C9;
  --ff-sky: #BBD3F5;
  --ff-blush: #FFCFA6;
  --ff-lilac: #D6C8F2;
  --ff-green: #1F7A4A;

  --ff-display: 'Gloock', 'Georgia', serif;
  --ff-body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'Martian Mono', ui-monospace, 'Consolas', monospace;

  --ff-shadow: 4px 4px 0 var(--ff-ink);
  --ff-shadow-lg: 8px 8px 0 var(--ff-ink);
  --ff-radius: 14px;
  --ff-ease: cubic-bezier(.2, .8, .2, 1);
  --ff-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ff-gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ff-ink);
  background-color: var(--ff-paper);
  /* cutting-mat dots */
  background-image: radial-gradient(rgba(27, 24, 21, .07) 1px, transparent 1.4px);
  background-size: 22px 22px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--ff-blossom); color: var(--ff-ink); }
:focus-visible { outline: 3px solid var(--ff-berry); outline-offset: 3px; border-radius: 6px; }

.ff-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--ff-gutter); }

.ff-skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ff-ink); color: var(--ff-paper); padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.ff-skip:focus { top: 16px; }
.ff-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bootstrap-style helpers still used by the login/signup scripts */
.d-none { display: none !important; }
.alert { padding: 12px 16px; border: 2px solid var(--ff-ink); border-radius: 12px; font-size: .95rem; margin: 0 0 16px; }
.alert-danger { background: #FBD9D2; color: #7A1C0D; }
.alert-success { background: var(--ff-mint); color: #0E3F25; }

/* ---------- 02 Type & helpers ---------- */
.ff-display { font-family: var(--ff-display); font-weight: 400; line-height: 1; letter-spacing: -.015em; margin: 0; }
.ff-display em {
  font-style: normal;
  color: var(--ff-berry);
  /* highlighter stroke that sweeps in (see .is-in) */
  background: linear-gradient(transparent 64%, var(--ff-blossom) 64%, var(--ff-blossom) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .06em;
}
.ff-mono { font-family: var(--ff-mono); font-weight: 500; letter-spacing: -.01em; }
.ff-h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.ff-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ff-ink-2); margin: 18px 0 0; max-width: 60ch; }

.ff-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--ff-mono); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
}
.ff-num { background: var(--ff-ink); color: var(--ff-paper); padding: .25em .6em; border-radius: 4px; }
.ff-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ff-berry); box-shadow: 0 0 0 0 rgba(180, 35, 90, .5); animation: ff-pulse 2s infinite; }
@keyframes ff-pulse { 70% { box-shadow: 0 0 0 9px rgba(180, 35, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(180, 35, 90, 0); } }

.ff-link { color: var(--ff-ink); font-weight: 600; text-decoration: none; background: linear-gradient(var(--ff-blossom), var(--ff-blossom)) no-repeat 0 100% / 100% .35em; transition: background-size .25s var(--ff-ease); }
.ff-link:hover { background-size: 100% 100%; }

.ff-section { padding: clamp(84px, 11vw, 150px) 0; position: relative; }
.ff-section--kraft { background-color: var(--ff-kraft-soft); }
.ff-section--ink { background: var(--ff-ink); color: var(--ff-paper); background-image: radial-gradient(rgba(243, 237, 226, .07) 1px, transparent 1.4px); background-size: 22px 22px; }
.ff-section--ink .ff-lead { color: rgba(243, 237, 226, .75); }
.ff-section--ink .ff-num { background: var(--ff-blossom); color: var(--ff-ink); }
.ff-section--ink .ff-display em { color: var(--ff-blossom); background-image: linear-gradient(transparent 64%, rgba(180, 35, 90, .8) 64%, rgba(180, 35, 90, .8) 92%, transparent 92%); }

.ff-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.ff-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ff-head--center .ff-lead { margin-left: auto; margin-right: auto; }
.ff-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.ff-head--row .ff-lead { max-width: 380px; margin: 0; }

.ff-barcode {
  display: block; height: 34px; width: 120px;
  background: repeating-linear-gradient(90deg, var(--ff-ink) 0 2px, transparent 2px 4px, var(--ff-ink) 4px 7px, transparent 7px 9px, var(--ff-ink) 9px 10px, transparent 10px 13px);
}
.ff-barcode--wide { width: 100%; height: 42px; margin-top: 14px; }

/* ---------- 03 Buttons (brutalist: hard shadow, press-down on click) ---------- */
.ff-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .9em 1.4em; border: 2px solid var(--ff-ink); border-radius: 12px;
  font-weight: 700; font-size: 1rem; line-height: 1.1; text-decoration: none; cursor: pointer;
  background: var(--ff-paper-2); color: var(--ff-ink);
  box-shadow: var(--ff-shadow);
  transition: transform .18s var(--ff-ease), box-shadow .18s var(--ff-ease), background-color .2s;
}
.ff-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ff-ink); }
.ff-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ff-ink); }
.ff-btn i { transition: transform .2s var(--ff-ease); }
.ff-btn:hover i { transform: translateX(3px); }
.ff-btn--ink { background: var(--ff-ink); color: var(--ff-paper); box-shadow: 4px 4px 0 var(--ff-berry); }
.ff-btn--ink:hover { box-shadow: 6px 6px 0 var(--ff-berry); }
.ff-btn--ink:active { box-shadow: 0 0 0 var(--ff-berry); }
.ff-btn--berry { background: var(--ff-berry); color: #fff; }
.ff-btn--paper { background: var(--ff-paper-2); }
.ff-btn--sm { padding: .62em 1em; font-size: .9rem; border-radius: 10px; box-shadow: 3px 3px 0 var(--ff-berry); }
.ff-btn--block { width: 100%; }
.ff-btn[disabled] { opacity: .7; cursor: progress; }
.ff-section--ink .ff-btn { box-shadow: 4px 4px 0 var(--ff-blossom); }

/* ---------- 04 Notice bar + nav ---------- */
.ff-notice { background: var(--ff-ink); color: var(--ff-paper); text-align: center; font-size: .8rem; padding: 9px var(--ff-gutter); }
.ff-notice p { margin: 0; }
.ff-notice i { color: var(--ff-blossom); }
.ff-notice a { color: var(--ff-blossom); font-weight: 600; }
.ff-notice__sep { opacity: .4; margin: 0 .5em; }

.ff-nav { position: sticky; top: 12px; z-index: 60; margin-top: 12px; transition: transform .4s var(--ff-ease); }
.ff-nav.is-hidden { transform: translateY(calc(-100% - 24px)); }
.ff-nav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  height: 64px; background: var(--ff-paper-2); border: 2px solid var(--ff-ink); border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow); padding: 0 10px 0 16px;
  max-width: calc(1240px - 2 * var(--ff-gutter));
  width: calc(100% - 2 * var(--ff-gutter));
}

.ff-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ff-ink); }
.ff-logo__tag { width: 30px; height: 30px; color: var(--ff-berry); transform: rotate(-18deg); transition: transform .4s var(--ff-bounce); }
.ff-logo:hover .ff-logo__tag { transform: rotate(8deg); }
.ff-logo__word { font-family: var(--ff-display); font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; }
.ff-logo__word i { font-style: normal; color: var(--ff-berry); }
.ff-logo__word small { font-family: var(--ff-mono); font-size: .58rem; margin-left: 2px; color: var(--ff-ink-2); vertical-align: middle; }

.ff-nav__links { display: flex; gap: 4px; }
.ff-nav__links a { position: relative; padding: 8px 12px; text-decoration: none; font-weight: 500; font-size: .95rem; border-radius: 8px; }
/* highlighter swipe on hover / current section */
.ff-nav__links a::before {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 9px; height: .5em; z-index: -1;
  background: var(--ff-blossom); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ff-ease);
}
.ff-nav__links a { z-index: 0; }
.ff-nav__links a:hover::before, .ff-nav__links a.is-active::before { transform: scaleX(1); }

.ff-nav__actions { display: flex; align-items: center; gap: 12px; }
.ff-nav__login { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 6px; }
.ff-nav__login:hover { color: var(--ff-berry); }

.ff-burger {
  display: none; width: 46px; height: 46px; border: 2px solid var(--ff-ink); border-radius: 10px; background: var(--ff-blossom);
  cursor: pointer; padding: 0; position: relative; z-index: 80;
}
.ff-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ff-ink); transition: transform .3s var(--ff-ease), top .3s var(--ff-ease); }
.ff-burger span:first-child { top: 17px; }
.ff-burger span:last-child { top: 25px; }
.ff-menu-open .ff-burger span:first-child { top: 21px; transform: rotate(45deg); }
.ff-menu-open .ff-burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- 05 Mobile drawer (drops down like a receipt) ---------- */
.ff-drawer {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 55; padding: 148px var(--ff-gutter) 28px; /* clears notice bar + floating nav */
  background: var(--ff-paper-2); border-bottom: 2px solid var(--ff-ink);
  transform: translateY(-105%); visibility: hidden;
  transition: transform .45s var(--ff-ease), visibility 0s linear .45s;
  max-height: 100vh; overflow-y: auto;
}
.ff-menu-open .ff-drawer { transform: none; visibility: visible; transition: transform .45s var(--ff-ease); }
.ff-drawer__links { display: grid; margin-bottom: 22px; }
.ff-drawer__links a {
  display: flex; align-items: baseline; gap: 14px; padding: 14px 0; text-decoration: none;
  font-family: var(--ff-display); font-size: 1.9rem; line-height: 1.1; border-bottom: 2px dashed rgba(27, 24, 21, .25);
}
.ff-drawer__links .ff-mono { font-size: .75rem; color: var(--ff-berry); }

/* ---------- 06 Reveal animations (only when JS is running) ---------- */
.ff-anim [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ff-ease) var(--d, 0s), transform .7s var(--ff-ease) var(--d, 0s); }
.ff-anim [data-reveal].is-in { opacity: 1; transform: none; }

.ff-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.ff-w__i { display: inline-block; }
.ff-anim [data-split] .ff-w__i { transform: translateY(110%) rotate(5deg); transition: transform .8s var(--ff-ease) calc(var(--i) * .06s + var(--d, 0s)); }
.ff-anim [data-split].is-in .ff-w__i { transform: none; }
/* highlighter sweeps in after the words land */
.ff-anim [data-split] em { background-size: 0% 100%; transition: background-size .7s var(--ff-ease) .55s; }
.ff-anim [data-split].is-in em { background-size: 100% 100%; }

/* ---------- 07 Hero (flat-lay desk with draggable stickers) ---------- */
.ff-hero {
  position: relative; overflow: hidden;
  min-height: min(calc(100vh - 110px), 860px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(60px, 9vh, 110px) 0 clamp(70px, 10vh, 120px);
}
.ff-hero__copy { position: relative; z-index: 2; max-width: 860px; text-align: center; pointer-events: none; }
.ff-hero__copy > * { pointer-events: auto; }
.ff-hero__title { font-size: clamp(3.1rem, 8.4vw, 7.8rem); line-height: .96; margin: 0 auto; }
.ff-hero__lead { margin: 26px auto 0; max-width: 56ch; }
.ff-hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.ff-hero__hint { margin: 26px 0 0; font-size: .7rem; color: var(--ff-ink-2); }
.ff-hero__hint i { color: var(--ff-berry); }

.ff-hero__desk { position: absolute; inset: 0; z-index: 1; }
.ff-sticker {
  position: absolute; left: var(--x); top: var(--y); rotate: var(--r);
  user-select: none; -webkit-user-select: none;
  transition: box-shadow .2s var(--ff-ease), scale .2s var(--ff-ease);
}
.ff-drag-on .ff-sticker { cursor: grab; touch-action: none; }
.ff-sticker.is-dragging { cursor: grabbing; scale: 1.07; }

.ff-sticker--tag {
  background: var(--ff-blossom); border: 2px solid var(--ff-ink); border-radius: 10px 10px 10px 30px;
  padding: 16px 22px 14px 40px; box-shadow: var(--ff-shadow); text-align: left;
}
.ff-sticker--tag b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: 2.4rem; line-height: 1; }
.ff-sticker--tag small { font-family: var(--ff-mono); font-size: .66rem; }
.ff-sticker__hole { position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--ff-paper); border: 2px solid var(--ff-ink); }
.ff-sticker--tag::before { /* the string */
  content: ''; position: absolute; left: -44px; top: 50%; width: 52px; height: 30px; border: 2px solid var(--ff-ink);
  border-color: var(--ff-ink) transparent transparent transparent; border-radius: 50%; transform: rotate(-20deg);
}

.ff-sticker--stamp {
  width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  border: 3px double var(--ff-berry); color: var(--ff-berry); background: rgba(251, 248, 242, .85);
  font-family: var(--ff-mono); font-size: .68rem; font-weight: 700; line-height: 1.25; letter-spacing: .08em;
  outline: 2px dashed rgba(180, 35, 90, .45); outline-offset: 5px;
}
.ff-sticker--stamp b { font-family: var(--ff-display); font-size: 2.3rem; font-weight: 400; letter-spacing: 0; line-height: 1; }

.ff-sticker--photo { background: var(--ff-white); padding: 10px 10px 12px; border: 2px solid var(--ff-ink); box-shadow: var(--ff-shadow); width: 168px; }
.ff-sticker__pic { display: grid; place-items: center; height: 120px; border-radius: 4px; font-size: 3.4rem; }
.ff-pic--mug { background: radial-gradient(circle at 30% 30%, #fff6, transparent 50%), var(--ff-sky); }
.ff-sticker--photo small { display: block; margin-top: 8px; font-family: var(--ff-mono); font-size: .62rem; text-align: center; }

.ff-sticker--note {
  width: 186px; padding: 20px 18px; background: #FFE98A; font-weight: 700; font-size: 1.05rem; line-height: 1.3;
  box-shadow: 2px 10px 18px rgba(27, 24, 21, .18);
}
.ff-sticker--note::before { /* tape */
  content: ''; position: absolute; top: -12px; left: 50%; width: 72px; height: 22px; margin-left: -36px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(27, 24, 21, .1); rotate: 3deg;
}
.ff-sticker--note small { display: block; margin-top: 6px; font-weight: 500; font-size: .85rem; color: var(--ff-ink-2); }

.ff-sticker--barcode { background: var(--ff-white); border: 2px solid var(--ff-ink); padding: 12px 14px 8px; box-shadow: var(--ff-shadow); }
.ff-sticker--barcode small { display: block; font-size: .6rem; margin-top: 6px; text-align: center; }

.ff-sticker--sale {
  width: 118px; height: 118px; display: grid; place-content: center; text-align: center; color: #fff; background: var(--ff-berry);
  clip-path: polygon(50% 0, 61% 12%, 75% 5%, 79% 21%, 95% 22%, 89% 37%, 100% 50%, 89% 63%, 95% 78%, 79% 79%, 75% 95%, 61% 88%, 50% 100%, 39% 88%, 25% 95%, 21% 79%, 5% 78%, 11% 63%, 0 50%, 11% 37%, 5% 22%, 21% 21%, 25% 5%, 39% 12%);
}
.ff-sticker--sale b { font-family: var(--ff-display); font-weight: 400; font-size: 1.9rem; line-height: 1; }
.ff-sticker--sale small { font-family: var(--ff-mono); font-size: .58rem; text-transform: uppercase; }

/* Tablet / phone: stickers sit in a tidy row under the headline (no dragging) */
@media (max-width: 1099px) {
  .ff-hero { min-height: 0; }
  .ff-hero__desk { position: relative; inset: auto; order: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px 30px; padding: 54px var(--ff-gutter) 0; }
  .ff-sticker { position: relative; left: auto; top: auto; }
  .ff-sticker--photo, .ff-sticker--barcode { display: none; }
  .ff-sticker--tag::before { display: none; }
  .ff-hero__hint { display: none; }
}
@media (max-width: 520px) {
  .ff-sticker { scale: .82; }
  .ff-hero__desk { gap: 4px 0; padding-top: 34px; }
  .ff-sticker--note { display: none; }
  .ff-hero__actions .ff-btn { width: 100%; }
}

/* ---------- 08 Catalog spread (this week's finds) ---------- */
/* Two printed pages with a centre fold; the right page's corner peels on hover */
.ff-spread {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  background: var(--ff-white); border: 2px solid var(--ff-ink); border-radius: 8px; box-shadow: var(--ff-shadow-lg);
}
.ff-spread::after { /* centre fold shadow */
  content: ''; position: absolute; top: 0; bottom: 0; left: 46.5%; width: 60px; margin-left: -30px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(27, 24, 21, .07) 45%, rgba(27, 24, 21, .16) 50%, rgba(27, 24, 21, .07) 55%, transparent);
}
.ff-spread__folio { display: flex; justify-content: space-between; margin: 0 0 22px; font-size: .66rem; text-transform: uppercase; color: var(--ff-ink-2); border-bottom: 2px solid var(--ff-ink); padding-bottom: 10px; }

.ff-spread__cover { position: relative; padding: clamp(24px, 4vw, 44px); }
.ff-spread__badge {
  position: absolute; right: clamp(20px, 3vw, 40px); top: 74px; z-index: 2; width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; font-size: .62rem; line-height: 1.3; text-transform: uppercase;
  background: var(--ff-berry); color: #fff; rotate: 12deg; box-shadow: 3px 3px 0 var(--ff-ink);
}
.ff-spread__art {
  aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: clamp(5rem, 9vw, 8rem); margin-bottom: 22px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .7), transparent 45%), var(--ff-blossom);
  border: 2px solid var(--ff-ink); border-radius: 6px;
}
.ff-spread__art i { transition: transform .5s var(--ff-bounce); }
.ff-spread__cover:hover .ff-spread__art i { transform: rotate(-8deg) scale(1.08); }
.ff-spread__aisle { margin: 0; font-size: .7rem; text-transform: uppercase; color: var(--ff-berry); }
.ff-spread__cover h3 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; margin: 8px 0 14px; }
.ff-spread__cover > p:not([class]) { margin: 0 0 10px; }
.ff-spread__meh { color: var(--ff-ink-2); font-size: .95rem; margin: 0; }
.ff-spread__foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

.ff-spread__page { position: relative; padding: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px) 120px; overflow: hidden; }
.ff-entries { list-style: none; margin: 0; padding: 0; counter-reset: ffentry; }
.ff-entry {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 2px dashed rgba(27, 24, 21, .3);
}
.ff-entry:first-child { padding-top: 4px; }
.ff-entry__icon {
  width: 60px; height: 60px; display: grid; place-items: center; font-size: 1.6rem;
  background: var(--c); border: 2px solid var(--ff-ink); border-radius: 50%;
  transition: rotate .4s var(--ff-bounce), scale .4s var(--ff-bounce);
}
.ff-entry:hover .ff-entry__icon { rotate: -12deg; scale: 1.1; }
.ff-entry__aisle { margin: 0; font-size: .64rem; text-transform: uppercase; color: var(--ff-ink-2); }
.ff-entry h3 { font-family: var(--ff-display); font-weight: 400; font-size: 1.4rem; line-height: 1.1; margin: 3px 0 4px; }
.ff-entry__txt p:last-child { margin: 0; font-size: .92rem; color: var(--ff-ink-2); }
.ff-entry__txt i { font-style: normal; color: var(--ff-berry); }
.ff-entry__price { font-family: var(--ff-display); font-size: 1.6rem; line-height: 1; }
.ff-heart--sm { width: 40px; height: 40px; font-size: 1rem; box-shadow: 2px 2px 0 var(--ff-ink); }

/* Page-curl corner: a folded flap that lifts on hover and links to the club */
.ff-spread__curl {
  position: absolute; right: 0; bottom: 0; width: 120px; height: 120px; text-decoration: none; color: var(--ff-ink);
  transition: width .5s var(--ff-ease), height .5s var(--ff-ease);
}
.ff-spread__curl::before { /* the folded-over flap */
  content: ''; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%;
  background: linear-gradient(315deg, var(--ff-paper) 0 50%, var(--ff-blossom) 50% 56%, #F7D6E2 70%, var(--ff-white) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  box-shadow: -6px -6px 12px rgba(27, 24, 21, .12);
}
.ff-spread__curl span {
  position: absolute; right: 12px; bottom: 12px; width: 92px; text-align: right; font-weight: 700; font-size: .72rem; line-height: 1.25;
  transition: width .5s var(--ff-ease), font-size .5s var(--ff-ease);
}
.ff-spread__curl:hover, .ff-spread__curl:focus-visible { width: 220px; height: 220px; }
.ff-spread__curl:hover span, .ff-spread__curl:focus-visible span { width: 150px; font-size: .95rem; }

/* Phones / tablets: pages stack, fold turns horizontal */
@media (max-width: 900px) {
  .ff-spread { grid-template-columns: 1fr; }
  .ff-spread::after { display: none; }
  .ff-spread__page { border-top: 2px dashed var(--ff-ink); }
}
@media (max-width: 560px) {
  .ff-entry { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px; }
  .ff-entry__icon { width: 48px; height: 48px; font-size: 1.25rem; grid-row: span 2; align-self: start; }
  .ff-entry__txt { grid-column: 2 / 4; }
  .ff-entry__price { grid-column: 2; font-size: 1.35rem; }
  .ff-entry .ff-heart--sm { grid-column: 3; }
  .ff-spread__badge { width: 78px; height: 78px; top: 66px; }
}

.ff-price {
  position: relative; display: inline-block; font-family: var(--ff-display); font-size: 1.8rem; line-height: 1;
  background: var(--ff-paper-2); border: 2px solid var(--ff-ink); border-radius: 6px 10px 10px 6px; padding: 8px 16px 8px 30px;
}
.ff-price::before { content: ''; position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--ff-ink); }

.ff-heart {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ff-ink); background: var(--ff-paper-2);
  display: grid; place-items: center; cursor: pointer; font-size: 1.15rem; box-shadow: 3px 3px 0 var(--ff-ink);
  transition: transform .2s var(--ff-bounce), background-color .2s;
}
.ff-heart:hover { transform: scale(1.08); }
.ff-heart[aria-pressed="true"] { background: var(--ff-berry); color: #fff; }
.ff-heart.is-pop { animation: ff-pop .45s var(--ff-bounce); }
@keyframes ff-pop { 40% { transform: scale(1.3); } }

/* ---------- 09 Aisles (brutalist grid) + receipt ---------- */
.ff-aisles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.ff-aisle {
  position: relative; background: var(--ff-paper-2); border: 2px solid var(--ff-ink); border-radius: var(--ff-radius);
  padding: 26px 24px 24px; box-shadow: 5px 5px 0 var(--ff-ink);
  transition: translate .25s var(--ff-ease), box-shadow .25s var(--ff-ease), background-color .25s;
}
.ff-aisle:hover { background: var(--c); translate: -3px -3px; box-shadow: 8px 8px 0 var(--ff-ink); }
.ff-aisle > i { font-size: 2rem; display: block; margin-bottom: 30px; transition: transform .35s var(--ff-bounce); }
.ff-aisle:hover > i { transform: rotate(-10deg) scale(1.12); }
.ff-aisle h3 { font-family: var(--ff-display); font-weight: 400; font-size: 1.8rem; line-height: 1; margin: 0 0 8px; }
.ff-aisle p { margin: 0 0 20px; color: var(--ff-ink-2); font-size: .97rem; }
.ff-aisle__no { position: absolute; right: 18px; top: 18px; font-size: .75rem; border: 2px solid var(--ff-ink); border-radius: 6px; padding: 3px 7px; background: var(--c); }
.ff-aisle__count { display: inline-block; font-size: .68rem; background: var(--ff-ink); color: var(--ff-paper); padding: 5px 9px; border-radius: 999px; }

.ff-receipt-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 34px; }
.ff-scribble { margin: 0; font-style: italic; font-weight: 500; font-size: 1.1rem; line-height: 1.3; color: var(--ff-berry); }
.ff-scribble--l { text-align: right; rotate: -6deg; align-self: start; margin-top: 90px; }
.ff-scribble--r { rotate: 5deg; align-self: end; margin-bottom: 110px; }
.ff-scribble i { font-size: 1.5rem; vertical-align: middle; }

.ff-receipt { position: relative; width: min(390px, calc(100% - 44px));padding: 9px 0 16px; overflow-x: visible; overflow-y: clip; rotate: -1.5deg; }
.ff-receipt::before { /* printer slot */
  content: ''; position: absolute; z-index: 2; top: 0; left: -18px; right: -18px; height: 18px; background: var(--ff-ink); border-radius: 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .2);
}
.ff-receipt__paper {
  position: relative; background: var(--ff-white); padding: 34px 28px 26px; font-family: var(--ff-mono); font-size: .76rem; line-height: 1.5;
  filter: drop-shadow(0 16px 22px rgba(27, 24, 21, .14));
}
.ff-receipt__paper::after { /* zig-zag tear */
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: linear-gradient(135deg, var(--ff-white) 5px, transparent 0) 0 0 / 10px 10px repeat-x, linear-gradient(225deg, var(--ff-white) 5px, transparent 0) 0 0 / 10px 10px repeat-x;
}
.ff-anim .ff-receipt__paper { transform: translateY(-101%); transition: transform 2.2s steps(16, end); }
.ff-anim .ff-receipt.is-in .ff-receipt__paper { transform: none; }
.ff-receipt__shop { text-align: center; font-weight: 700; font-size: .9rem; letter-spacing: .08em; margin: 0; }
.ff-receipt__meta { text-align: center; color: var(--ff-ink-2); margin: 6px 0 16px; padding-bottom: 14px; border-bottom: 2px dashed rgba(27, 24, 21, .35); }
.ff-receipt__lines { list-style: none; margin: 0; padding: 0; }
.ff-receipt__lines li { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.ff-receipt__lines span { flex: 1; display: flex; gap: 6px; }
.ff-receipt__lines span::after { content: ''; flex: 1; border-bottom: 2px dotted rgba(27, 24, 21, .3); transform: translateY(-4px); }
.ff-receipt__lines .is-minus { color: var(--ff-berry); }
.ff-receipt__lines .is-total { margin: 8px 0; padding: 10px 0; border-top: 2px dashed var(--ff-ink); border-bottom: 2px dashed var(--ff-ink); font-weight: 700; font-size: 1rem; }
.ff-receipt__lines .is-total b { background: var(--ff-blossom); padding: 0 6px; }
.ff-receipt__thanks { text-align: center; margin: 16px 0 0; color: var(--ff-ink-2); }

@media (max-width: 900px) {
  .ff-receipt-stage { grid-template-columns: 1fr; justify-items: center; }
  .ff-scribble { display: none; }
}

/* ---------- 10 Hype vs honest (before/after drag slider) ---------- */
.ff-compare {
  position: relative; display: grid; border: 2px solid var(--ff-paper); border-radius: 22px; overflow: hidden;
  min-height: 400px; box-shadow: 8px 8px 0 var(--ff-blossom); color: var(--ff-ink);
}
.ff-compare__side { grid-area: 1 / 1; padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.ff-compare__side ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; font-size: 1.12rem; }
.ff-compare__label { margin: 0; font-size: .72rem; text-transform: uppercase; }
.ff-compare__product { margin: 8px 0 0; font-family: var(--ff-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; }

.ff-compare__side--hype { background: var(--ff-berry); color: #fff; padding-right: 52%; }
.ff-compare__side--hype ul li { font-family: var(--ff-display); font-size: 1.4rem; line-height: 1.15; }
.ff-compare__side--hype b { color: var(--ff-blossom); font-weight: 400; }
.ff-compare__burst {
  position: absolute; left: 34%; top: 26px; width: 92px; height: 92px; display: grid; place-items: center; rotate: 12deg;
  background: var(--ff-blossom); color: var(--ff-ink); font-family: var(--ff-display); font-size: 1.4rem;
  clip-path: polygon(50% 0, 61% 12%, 75% 5%, 79% 21%, 95% 22%, 89% 37%, 100% 50%, 89% 63%, 95% 78%, 79% 79%, 75% 95%, 61% 88%, 50% 100%, 39% 88%, 25% 95%, 21% 79%, 5% 78%, 11% 63%, 0 50%, 11% 37%, 5% 22%, 21% 21%, 25% 5%, 39% 12%);
}
.ff-compare__side--honest {
  background: var(--ff-paper-2); padding-left: 52%;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(43, 79, 201, .12) 31px 32px);
  clip-path: inset(0 0 0 var(--pos));
}
.ff-compare__side--honest li { padding-left: 26px; position: relative; }
.ff-compare__side--honest li::before { content: '✓'; position: absolute; left: 0; color: var(--ff-green); font-weight: 800; }
.ff-compare__verdict {
  position: absolute; right: 28px; bottom: 24px; rotate: -10deg; padding: 6px 14px;
  border: 3px double var(--ff-green); color: var(--ff-green); font-family: var(--ff-mono); font-weight: 700; font-size: .9rem; border-radius: 8px;
}
.ff-compare__handle {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--ff-ink); pointer-events: none;
}
.ff-compare__handle i {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ff-blossom); border: 2px solid var(--ff-ink); font-size: 1.3rem; box-shadow: 3px 3px 0 var(--ff-ink);
  transition: transform .2s var(--ff-bounce);
}
.ff-compare:hover .ff-compare__handle i, .ff-compare.is-active .ff-compare__handle i { transform: scale(1.12); }
.ff-compare__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ff-compare__range:focus-visible + * { outline: none; }
.ff-compare:has(.ff-compare__range:focus-visible) { outline: 3px solid var(--ff-blossom); outline-offset: 4px; }

@media (max-width: 760px) {
  .ff-compare { grid-template-columns: 1fr; }
  .ff-compare__side { grid-area: auto; }
  .ff-compare__side--hype { padding-right: 28px; padding-bottom: 110px; }
  .ff-compare__side--honest { padding-left: 28px; clip-path: none; padding-bottom: 80px; }
  .ff-compare__burst { left: auto; right: 22px; top: auto; bottom: 14px; width: 80px; height: 80px; font-size: 1.15rem; }
  .ff-compare__handle, .ff-compare__range { display: none; }
}

/* ---------- 11 Hanging price tags (stats) ---------- */
.ff-rail { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 34px; padding-top: 10px; }
.ff-rail::before { content: ''; position: absolute; top: 0; left: 4%; right: 4%; height: 8px; background: var(--ff-ink); border-radius: 8px; }
.ff-hang { width: 230px; display: flex; flex-direction: column; align-items: center; rotate: var(--sw); transform-origin: 50% 0; }
.ff-hang:hover { animation: ff-swing 1.4s var(--ff-ease); }
@keyframes ff-swing { 20% { rotate: 9deg; } 45% { rotate: -6deg; } 70% { rotate: 3deg; } 100% { rotate: var(--sw); } }
.ff-hang__string { width: 2px; height: 54px; background: var(--ff-ink); position: relative; }
.ff-hang__string::before { content: ''; position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ff-ink); }
.ff-hang__tag {
  position: relative; width: 100%; text-align: center; padding: 40px 18px 24px;
  background: var(--c); border: 2px solid var(--ff-ink); border-radius: 18px 18px 14px 14px; box-shadow: var(--ff-shadow);
}
.ff-hang__tag::before { content: ''; position: absolute; top: 14px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ff-paper); border: 2px solid var(--ff-ink); }
.ff-hang__tag b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: 3.4rem; line-height: 1; }
.ff-hang__tag span { display: block; margin-top: 8px; font-size: .95rem; font-weight: 500; }
@media (max-width: 560px) {
  .ff-rail { gap: 20px 14px; }
  .ff-hang { width: calc(50% - 7px); }
  .ff-hang__tag b { font-size: 2.4rem; }
  .ff-hang__tag span { font-size: .82rem; }
}

/* ---------- 12 Fine-print FAQ (highlighter on the open question) ---------- */
.ff-fine__list { max-width: 820px; margin: 0 auto; border-bottom: 2px dashed rgba(27, 24, 21, .45); }
.ff-q { border-top: 2px dashed rgba(27, 24, 21, .45); }
.ff-q summary { display: flex; align-items: baseline; gap: 16px; padding: 24px 4px; cursor: pointer; list-style: none; }
.ff-q summary::-webkit-details-marker { display: none; }
.ff-q__no { font-size: .8rem; color: var(--ff-berry); }
.ff-q__text {
  flex: 1; font-family: var(--ff-display); font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.2;
  background: linear-gradient(transparent 58%, var(--ff-blossom) 58%, var(--ff-blossom) 94%, transparent 94%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .5s var(--ff-ease);
}
.ff-q summary:hover .ff-q__text { background-size: 30% 100%; }
.ff-q[open] .ff-q__text { background-size: 100% 100%; }
.ff-q summary > i { font-size: 1.1rem; transition: transform .3s var(--ff-ease); }
.ff-q[open] summary > i { transform: rotate(45deg); }
.ff-q p { margin: -6px 0 0; padding: 0 40px 26px 34px; color: var(--ff-ink-2); max-width: 66ch; }
.ff-q[open] p { animation: ff-drop .4s var(--ff-ease); }
@keyframes ff-drop { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 13 Punch-card CTA ---------- */
.ff-punch {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center;
  background: var(--ff-blossom); border: 2px solid var(--ff-ink); border-radius: 26px; padding: clamp(28px, 5vw, 64px); box-shadow: var(--ff-shadow-lg);
}
.ff-punch__title { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.ff-punch .ff-display em { color: var(--ff-berry); background-image: linear-gradient(transparent 64%, var(--ff-paper-2) 64%, var(--ff-paper-2) 92%, transparent 92%); }
.ff-punch__copy > p:not(.ff-kicker) { font-size: 1.1rem; margin: 18px 0 28px; max-width: 48ch; }
.ff-punch__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.ff-punch__card {
  background: var(--ff-ink); color: var(--ff-paper); border-radius: 18px; padding: 24px 24px 20px; rotate: 3deg;
  box-shadow: 6px 6px 0 var(--ff-berry); transition: rotate .4s var(--ff-bounce);
}
.ff-punch__card:hover { rotate: 0deg; }
.ff-punch__head { display: flex; justify-content: space-between; font-size: .68rem; margin: 0 0 20px; letter-spacing: .08em; }
.ff-punch__holes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ff-punch__holes li {
  position: relative; aspect-ratio: 1; border: 2px dashed rgba(243, 237, 226, .5); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--ff-mono); font-size: .62rem;
}
.ff-punch__holes li::after { /* the punched hole */
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ff-blossom);
  box-shadow: inset 3px 3px 0 rgba(27, 24, 21, .35); transition: transform .35s var(--ff-bounce) calc(var(--i) * .12s + .3s);
}
.ff-punch__holes li.is-free { background: var(--ff-berry); border-style: solid; border-color: var(--ff-berry); font-size: 1.1rem; }
.ff-punch__holes li.is-free::after { display: none; }
.ff-anim .ff-punch:not(.is-in) .ff-punch__holes li::after { transform: scale(0); }
.ff-punch__foot { margin: 18px 0 0; font-size: .64rem; opacity: .7; }
@media (max-width: 860px) { .ff-punch { grid-template-columns: 1fr; } .ff-punch__card { max-width: 420px; } }

/* ---------- 14 Footer (torn kraft paper bag) ---------- */
.ff-footer { position: relative; background: var(--ff-kraft); margin-top: 40px; padding: 70px 0 28px; }
.ff-footer::before { /* torn top edge */
  content: ''; position: absolute; left: 0; right: 0; top: -21px; height: 22px; background: var(--ff-kraft);
  clip-path: polygon(0 100%, 0 55%, 2% 30%, 4% 62%, 6% 20%, 9% 55%, 11% 35%, 13% 70%, 16% 25%, 18% 50%, 21% 15%, 23% 60%, 26% 38%, 28% 72%, 31% 30%, 34% 58%, 36% 22%, 39% 50%, 41% 34%, 44% 66%, 47% 18%, 49% 52%, 52% 28%, 55% 64%, 57% 36%, 60% 70%, 62% 24%, 65% 54%, 68% 12%, 70% 48%, 73% 30%, 75% 66%, 78% 22%, 81% 58%, 83% 40%, 86% 72%, 88% 26%, 91% 56%, 93% 18%, 96% 50%, 98% 32%, 100% 60%, 100% 100%);
}
.ff-footer__top { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: 48px; align-items: start; }
.ff-footer .ff-logo__tag { color: var(--ff-ink); }
.ff-footer__brand p { margin: 14px 0 16px; max-width: 34ch; }
.ff-footer__mail { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--ff-ink); }
.ff-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ff-footer__cols h4 { font-family: var(--ff-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; margin: 4px 0 14px; font-weight: 700; }
.ff-footer__cols a { display: block; text-decoration: none; padding: 4px 0; font-weight: 500; }
.ff-footer__cols a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ff-hours { background: var(--ff-paper-2); border: 2px solid var(--ff-ink); border-radius: 12px; padding: 18px 20px; box-shadow: var(--ff-shadow); rotate: -2deg; min-width: 240px; }
.ff-hours__title { margin: 0 0 10px; font-size: .7rem; text-transform: uppercase; text-align: center; border-bottom: 2px dashed rgba(27, 24, 21, .35); padding-bottom: 10px; }
.ff-hours dl { margin: 0; }
.ff-hours dl div { display: flex; gap: 8px; font-size: .92rem; padding: 4px 0; }
.ff-hours dt { flex: 1; display: flex; gap: 6px; }
.ff-hours dt::after { content: ''; flex: 1; border-bottom: 2px dotted rgba(27, 24, 21, .35); transform: translateY(-5px); }
.ff-hours dd { margin: 0; font-weight: 700; }
.ff-footer__bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 54px; padding-top: 20px; border-top: 2px solid var(--ff-ink); font-size: .85rem; }
.ff-footer__bottom a { text-decoration: none; font-weight: 700; }
.ff-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.ff-footer__links a { font-weight: 500; }
.ff-footer--mini { padding-top: 34px; margin-top: 0; }
.ff-footer--mini .ff-footer__bottom { margin-top: 0; border-top: 0; padding-top: 0; }
@media (max-width: 1000px) {
  .ff-footer__top { grid-template-columns: 1fr 1fr; }
  .ff-footer__cols { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
  .ff-footer__top { grid-template-columns: 1fr; }
  .ff-footer__cols { grid-row: auto; grid-template-columns: 1fr 1fr; }
  .ff-hours { rotate: 0deg; }
}

/* ---------- 15 Auth pages (login / signup) ---------- */
.ff-auth { padding: clamp(48px, 8vw, 90px) var(--ff-gutter) clamp(70px, 9vw, 110px); }
.ff-auth__inner { max-width: 540px; margin: 0 auto; }
.ff-auth__head { text-align: center; margin-bottom: 30px; }
.ff-auth__head h1 { font-size: clamp(2.6rem, 6vw, 3.8rem); }
.ff-auth__sub { color: var(--ff-ink-2); margin: 14px auto 0; max-width: 42ch; }
.ff-auth__card { background: var(--ff-paper-2); border: 2px solid var(--ff-ink); border-radius: 20px; padding: clamp(24px, 4vw, 36px); box-shadow: var(--ff-shadow-lg); }

.ff-field { position: relative; margin-bottom: 16px; }
.ff-field input {
  width: 100%; height: 60px; padding: 22px 16px 6px; border: 2px solid var(--ff-ink); border-radius: 12px; background: var(--ff-white);
  font-size: 1rem; transition: box-shadow .2s var(--ff-ease), transform .2s var(--ff-ease);
}
.ff-field input:focus { outline: none; box-shadow: 4px 4px 0 var(--ff-berry); transform: translate(-2px, -2px); }
.ff-field label { position: absolute; left: 18px; top: 19px; color: var(--ff-ink-2); pointer-events: none; transition: all .2s var(--ff-ease); font-size: 1rem; }
.ff-field input:focus + label, .ff-field input:not(:placeholder-shown) + label { top: 8px; font-size: .7rem; font-family: var(--ff-mono); color: var(--ff-berry); }
.ff-field--eye input { padding-right: 56px; }
.ff-field__eye { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 1.15rem; border-radius: 8px; }
.ff-field__eye:hover { background: var(--ff-kraft-soft); }
.ff-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ff-handle { display: flex; align-items: stretch; margin-bottom: 16px; }
.ff-handle__prefix { display: grid; place-items: center; padding: 0 16px; height: 60px; background: var(--ff-blossom); border: 2px solid var(--ff-ink); border-right: 0; border-radius: 12px 0 0 12px; font-family: var(--ff-mono); font-weight: 700; }
.ff-handle .ff-field { flex: 1; margin: 0; }
.ff-handle .ff-field input { border-radius: 0 12px 12px 0; }
@media (max-width: 520px) { .ff-field-row { grid-template-columns: 1fr; gap: 0; } }

.ff-check { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; cursor: pointer; }
.ff-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ff-berry); flex: none; }
.ff-check a { font-weight: 600; }
.ff-auth__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 20px; flex-wrap: wrap; }
.ff-auth__forgot { font-size: .93rem; font-weight: 600; }
.ff-auth__terms { margin: 4px 0 20px; }
.ff-auth__divider { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; font-family: var(--ff-mono); font-size: .7rem; color: var(--ff-ink-2); }
.ff-auth__divider::before, .ff-auth__divider::after { content: ''; flex: 1; border-top: 2px dashed rgba(27, 24, 21, .3); }
.ff-auth__note { text-align: center; margin: 0; }
.ff-auth__note a { font-weight: 700; }
.ff-auth__trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin: 20px 0 0; font-size: .85rem; color: var(--ff-ink-2); }
.ff-auth__trust i { color: var(--ff-green); }

/* Member card that fills in live while typing (signup) */
.ff-member {
  position: relative; margin: 0 auto 30px; max-width: 420px; aspect-ratio: 1.66; padding: 22px 24px; border-radius: 18px; rotate: -2.5deg;
  background: var(--ff-berry); color: #fff; border: 2px solid var(--ff-ink); box-shadow: var(--ff-shadow-lg);
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  transition: rotate .4s var(--ff-bounce);
}
.ff-member:hover { rotate: 0deg; }
.ff-member::before { content: ''; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: var(--ff-blossom); opacity: .9; }
.ff-member__top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.ff-member__top .ff-logo__word { color: #fff; font-size: 1.3rem; }
.ff-member__top .ff-logo__word i { color: var(--ff-ink); }
.ff-member__kind { font-family: var(--ff-mono); font-size: .6rem; color: var(--ff-ink); text-align: right; line-height: 1.4; margin: 6px 4px 0 0; }
.ff-member__name { position: relative; font-family: var(--ff-display); font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1; margin: 0; overflow-wrap: anywhere; }
.ff-member__row { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-family: var(--ff-mono); font-size: .66rem; }
.ff-member__row b { display: block; font-size: .82rem; margin-top: 2px; overflow-wrap: anywhere; }
.ff-member .ff-barcode { background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 7px, transparent 7px 9px); width: 90px; height: 28px; flex: none; }

/* Mini receipt above the login form */
.ff-slip {
  max-width: 330px; margin: 0 auto 28px; background: var(--ff-white); padding: 18px 22px 16px; font-family: var(--ff-mono); font-size: .72rem;
  rotate: 2deg; filter: drop-shadow(0 12px 18px rgba(27, 24, 21, .14)); position: relative;
}
.ff-slip::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: linear-gradient(135deg, var(--ff-white) 5px, transparent 0) 0 0 / 10px 10px repeat-x, linear-gradient(225deg, var(--ff-white) 5px, transparent 0) 0 0 / 10px 10px repeat-x; }
.ff-slip p { margin: 0 0 8px; text-align: center; font-weight: 700; letter-spacing: .06em; }
.ff-slip ul { list-style: none; margin: 0; padding: 0; }
.ff-slip li { display: flex; gap: 6px; padding: 3px 0; }
.ff-slip li span { flex: 1; display: flex; gap: 6px; }
.ff-slip li span::after { content: ''; flex: 1; border-bottom: 2px dotted rgba(27, 24, 21, .3); transform: translateY(-4px); }

/* ---------- 16 Legal pages ---------- */
.ff-legal { padding: clamp(56px, 8vw, 96px) 0 clamp(80px, 10vw, 120px); }
.ff-legal__head { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.ff-legal__head h1 { font-size: clamp(2.8rem, 7vw, 5rem); }
.ff-legal__updated { display: inline-flex; gap: 8px; margin-top: 18px; font-family: var(--ff-mono); font-size: .72rem; color: var(--ff-ink-2); }
.ff-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; margin: 0 auto 44px; }
.ff-toc a { text-decoration: none; font-size: .88rem; font-weight: 600; padding: 8px 14px; border: 2px solid var(--ff-ink); border-radius: 999px; background: var(--ff-paper-2); transition: background-color .2s, translate .2s; }
.ff-toc a:hover { background: var(--ff-blossom); translate: 0 -2px; }
.ff-legal__body {
  max-width: 760px; margin: 0 auto; background: var(--ff-white); border: 2px solid var(--ff-ink); border-radius: 18px;
  padding: clamp(26px, 5vw, 56px); box-shadow: var(--ff-shadow-lg); counter-reset: ffsec;
}
.ff-legal__body h2 { font-family: var(--ff-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; margin: 40px 0 12px; scroll-margin-top: 110px; counter-increment: ffsec; }
.ff-legal__body h2::before { content: '§' counter(ffsec) ' '; font-family: var(--ff-mono); font-size: .8rem; color: var(--ff-berry); vertical-align: middle; margin-right: 6px; }
.ff-legal__body > p:first-child { margin-top: 0; font-size: 1.12rem; }
.ff-legal__body ul { padding-left: 1.2em; }
.ff-legal__body li { margin-bottom: 8px; }
.ff-legal__body li::marker { color: var(--ff-berry); }
.ff-legal__body a { font-weight: 600; }

/* ---------- 17 Profile (alias page) · Error · Shop ---------- */
.ff-bio-body { background-color: var(--ff-kraft-soft); }
.ff-bio { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 48px 16px 34px; }
.ff-bio__pad {
  position: relative; width: 100%; max-width: 470px; padding: 44px clamp(20px, 5vw, 34px) 30px;
  background-color: var(--ff-white);
  background-image: linear-gradient(90deg, transparent 38px, rgba(180, 35, 90, .35) 38px 40px, transparent 40px), repeating-linear-gradient(transparent 0 33px, rgba(43, 79, 201, .13) 33px 34px);
  border: 2px solid var(--ff-ink); border-radius: 6px 6px 18px 18px; box-shadow: var(--ff-shadow-lg);
}
.ff-bio__pad::before { /* binder holes */
  content: ''; position: absolute; top: 12px; left: 50%; width: 220px; height: 14px; margin-left: -110px;
  background: radial-gradient(circle, var(--ff-ink) 5px, transparent 6px) 0 0 / 36px 14px repeat-x;
}
.ff-bio__head { text-align: center; margin-bottom: 24px; }
.ff-bio__avatar {
  width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ff-blossom); border: 2px solid var(--ff-ink); box-shadow: var(--ff-shadow); rotate: -6deg;
  font-family: var(--ff-display); font-size: 2.8rem; line-height: 1;
}
.ff-bio__avatar svg { width: 46px; height: 46px; color: var(--ff-berry); }
.ff-bio__name { font-size: clamp(2.2rem, 8vw, 3rem); overflow-wrap: anywhere; }
.ff-bio__handle { margin: 10px 0 0; font-size: .78rem; color: var(--ff-ink-2); }
.ff-bio__text { margin: 12px auto 0; max-width: 34ch; color: var(--ff-ink-2); }
.ff-bio__socials { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.ff-bio__socials a {
  width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--ff-ink); border-radius: 50%; background: var(--ff-paper-2);
  text-decoration: none; font-size: 1.1rem; transition: background-color .2s, translate .2s var(--ff-ease);
}
.ff-bio__socials a:hover { background: var(--ff-blossom); translate: 0 -3px; }
.ff-bio__links { display: grid; gap: 12px; }
.ff-bio-link {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; text-decoration: none;
  background: var(--ff-paper-2); border: 2px solid var(--ff-ink); border-radius: 14px; box-shadow: var(--ff-shadow);
  transition: translate .2s var(--ff-ease), box-shadow .2s var(--ff-ease);
}
.ff-bio-link:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ff-ink); }
.ff-bio-link:active { translate: 4px 4px; box-shadow: 0 0 0 var(--ff-ink); }
.ff-bio-link__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ff-kraft-soft); border: 2px solid var(--ff-ink); font-size: 1.15rem; }
.ff-bio-link__txt { flex: 1; min-width: 0; }
.ff-bio-link__txt b { display: block; font-size: 1rem; line-height: 1.25; }
.ff-bio-link__txt small { display: block; color: var(--ff-ink-2); font-size: .85rem; }
.ff-bio-link__go { font-size: 1rem; }
.ff-bio-link--featured { background: var(--ff-berry); color: #fff; }
.ff-bio-link--featured .ff-bio-link__icon { background: var(--ff-blossom); color: var(--ff-ink); }
.ff-bio-link--featured .ff-bio-link__txt small { color: rgba(255, 255, 255, .85); }
.ff-bio__share { position: absolute; top: 30px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ff-ink); background: var(--ff-paper-2); cursor: pointer; display: grid; place-items: center; }
.ff-bio__share:hover { background: var(--ff-blossom); }
.ff-bio__toast { position: absolute; top: 80px; right: 12px; background: var(--ff-ink); color: var(--ff-paper); font-size: .8rem; padding: 6px 12px; border-radius: 8px; opacity: 0; translate: 0 -6px; transition: opacity .25s, translate .25s; pointer-events: none; }
.ff-bio__toast.is-show { opacity: 1; translate: 0 0; }
.ff-bio__credit { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: .85rem; padding: 8px 14px; border: 2px solid var(--ff-ink); border-radius: 999px; background: var(--ff-paper-2); }
.ff-bio__credit svg { width: 18px; height: 18px; color: var(--ff-berry); rotate: -18deg; }

.ff-error { min-height: 100vh; display: grid; place-items: center; padding: 48px var(--ff-gutter); text-align: center; }
.ff-error__inner { max-width: 640px; display: flex; flex-direction: column; align-items: center; }
.ff-error__inner > .ff-logo { margin-bottom: 30px; }
.ff-error__tag { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; transform-origin: 50% 0; animation: ff-sway 4s ease-in-out infinite; }
@keyframes ff-sway { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
.ff-error__tag .ff-hang__string { height: 40px; }
.ff-error__tag .ff-hang__tag { width: 220px; background: var(--ff-berry); color: #fff; }
.ff-error__tag .ff-hang__tag b { font-size: 2.2rem; }
.ff-error h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
.ff-error .ff-lead { margin-left: auto; margin-right: auto; }
.ff-error__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

.ff-shop { padding: clamp(56px, 8vw, 96px) 0 clamp(80px, 10vw, 120px); }
.ff-shop__title { font-size: clamp(2.8rem, 7vw, 5.4rem); }
.ff-shop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 22px; }
.ff-product { background: var(--ff-paper-2); border: 2px solid var(--ff-ink); border-radius: 18px; overflow: hidden; box-shadow: 5px 5px 0 var(--ff-ink); display: flex; flex-direction: column; transition: translate .25s var(--ff-ease), box-shadow .25s var(--ff-ease); }
.ff-product:hover { translate: -3px -3px; box-shadow: 8px 8px 0 var(--ff-ink); }
.ff-product__media { height: 190px; display: grid; place-items: center; font-size: 4.2rem; border-bottom: 2px solid var(--ff-ink); background: var(--ff-blossom); }
.ff-product:nth-child(5n+2) .ff-product__media { background: var(--ff-mint); }
.ff-product:nth-child(5n+3) .ff-product__media { background: var(--ff-sky); }
.ff-product:nth-child(5n+4) .ff-product__media { background: var(--ff-blush); }
.ff-product:nth-child(5n+5) .ff-product__media { background: var(--ff-lilac); }
.ff-product__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.ff-product__body h2 { font-family: var(--ff-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin: 0 0 8px; }
.ff-product__body p { margin: 0 0 18px; color: var(--ff-ink-2); font-size: .95rem; }
.ff-product__row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ff-product .ff-price { font-size: 1.4rem; }

/* ---------- 18 Cursor label · responsive nav · reduced motion ---------- */
.ff-cursor {
  position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none;
  padding: 5px 10px 5px 18px; border-radius: 4px 8px 8px 4px; background: var(--ff-ink); color: var(--ff-paper);
  font-family: var(--ff-mono); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  opacity: 0; scale: .6; transition: opacity .2s, scale .25s var(--ff-bounce);
}
.ff-cursor::before { content: ''; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ff-blossom); }
.ff-cursor.is-on { opacity: 1; scale: 1; }

@media (max-width: 960px) {
  .ff-nav__links, .ff-nav__login { display: none; }
  .ff-burger { display: block; }
}
@media (max-width: 960px) { .ff-nav__actions .ff-btn--sm { display: none; } }
@media (max-width: 600px) { .ff-notice__extra { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .ff-anim [data-reveal], .ff-anim [data-split] .ff-w__i { opacity: 1; transform: none; }
  .ff-anim .ff-receipt__paper { transform: none; }
  .ff-anim [data-split] em { background-size: 100% 100%; }
  .ff-anim .ff-punch:not(.is-in) .ff-punch__holes li::after { transform: none; }
}