/* ============================================================================
   GIFT GUIDES, SCRAPBOOK LOOK — a guide whose ideas are real products.

   The owner approved this look for the Instagram gift carousels on 2026-10-27
   (launch/instagram/carousel-gifts, GROWTH.md §9): dotted paper, real
   products cut out as stickers, kraft price tags, tape, sticky notes, marker
   notes, FiraGO. This file is the same kit for a scrolling web page instead
   of a 1080×1350 slide: nothing is absolutely placed, rows wrap on a phone.

   Loaded after landing.css (and guides.css on a guide) by every guide
   (render-guides.mjs) and, since 2026-10-29, by the home page in all three
   languages (render-landing.mjs) — the owner asked for the home page to look
   like the guides. It is deliberately one look in light and dark: paper is
   paper.
   ========================================================================= */

@font-face { font-family: FiraGO; font-weight: 400; font-display: swap; src: url(/fonts/firago/FiraGO-Regular.woff2) format('woff2'); }
@font-face { font-family: FiraGO; font-weight: 700; font-display: swap; src: url(/fonts/firago/FiraGO-Bold.woff2) format('woff2'); }
@font-face { font-family: FiraGO; font-weight: 900; font-display: swap; src: url(/fonts/firago/FiraGO-Heavy.woff2) format('woff2'); }

/* Not :root — index.html loads this file too, and it is also the app, which
   has a dark theme of its own. html.app-on is the app (see LANDING VS APP in
   index.html). The background is the canvas behind an overscroll. */
html:not(.app-on) { color-scheme: light; background: #F3EEE4; }

.scrap {
    --paper: #F3EEE4;
    --ink: #1A1A1E;
    --ink-2: #55545C;
    --marker: #2F5BEA;
    --kraft: #D8B88A;
    --kraft-ink: #2B2116;
    --card: #FFFDF7;
    --hl: #FFDF4D;
    --tape: rgba(140, 180, 255, .62);
    --shade: rgba(70, 50, 20, .22);
    /* landing.css tokens, re-pointed at the paper so its blocks (FAQ lines,
       footer) sit on it without a second set of rules. */
    --l-bg: var(--paper);
    --l-surface: var(--card);
    --l-ink: var(--ink);
    --l-ink-2: var(--ink-2);
    --l-ink-3: var(--ink-2);
    --l-line: rgba(26, 26, 30, .14);
    --l-tint: rgba(26, 26, 30, .06);
    --l-accent: var(--marker);
    --l-link: var(--marker);
    font-family: FiraGO, Inter, 'Segoe UI', system-ui, sans-serif;
    color: var(--ink);
    background-color: var(--paper);
    background-image: radial-gradient(rgba(26, 26, 30, .13) 1.2px, transparent 1.4px);
    background-size: 26px 26px;
    background-position: 13px 13px;
}

/* Five accents, one per group in turn, as in the carousel kit. */
.scrap [data-accent="yellow"] { --hl: #FFDF4D; --tape: rgba(255, 226, 120, .72); --marker: #2F5BEA; }
.scrap [data-accent="pink"]   { --hl: #FFB3C7; --tape: rgba(255, 168, 190, .66); --marker: #C2185B; }
.scrap [data-accent="blue"]   { --hl: #BFD4FF; --tape: rgba(140, 180, 255, .62); --marker: #1F47C8; }
.scrap [data-accent="green"]  { --hl: #BDEBC0; --tape: rgba(150, 220, 160, .66); --marker: #1B7F3B; }
.scrap [data-accent="orange"] { --hl: #FFC98A; --tape: rgba(255, 190, 120, .66); --marker: #C2410C; }

.scrap h1, .scrap h2 { font-family: inherit; font-weight: 900; letter-spacing: -.015em; }
.scrap h3 { font-family: inherit; font-weight: 700; }
.scrap p { color: var(--ink-2); }

/* Highlighter under a word, the kit's .hl as an inline mark. */
.scrap mark {
    background: none;
    color: inherit;
    position: relative;
    z-index: 0;
    white-space: nowrap;
}
.scrap mark::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -.12em;
    right: -.16em;
    top: 48%;
    bottom: -2%;
    background: var(--hl);
    border-radius: 6px 18px 8px 14px / 12px 7px 16px 10px;
    transform: rotate(-1.5deg);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.scrap .landing__wordmark { font-family: inherit; font-weight: 900; }
.scrap .landing__langs span { background: var(--ink); color: var(--paper); }

/* ─── Hero: words left, a taped collage of three real stickers right ─────── */

.scrap .landing__inner { max-width: 1040px; }

.scrap-hero {
    display: grid;
    gap: 28px;
    align-items: center;
    padding: 28px 0 8px;
}
@media (min-width: 820px) {
    .scrap-hero { grid-template-columns: 1.15fr 1fr; gap: 40px; padding-top: 44px; }
}

.scrap-label {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 0 0 10px;
}

.scrap .landing__hero { padding: 0; }
.scrap h1 { font-size: clamp(36px, 7.4vw, 60px); line-height: 1.04; margin-bottom: 18px; text-wrap: balance; }

.scrap .landing__cta {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 10px 20px var(--shade);
    font-weight: 700;
}
.scrap .landing__note { color: var(--ink-2); }

.scrap-collage {
    position: relative;
    height: 330px;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
}
.scrap-collage img {
    position: absolute;
    height: auto;
    filter: drop-shadow(0 10px 14px var(--shade)) drop-shadow(0 2px 3px rgba(70, 50, 20, .25));
}
.scrap-collage .c1 { width: 52%; left: 0; top: 18px; transform: rotate(-8deg); }
.scrap-collage .c2 { width: 46%; right: 2%; top: 0; transform: rotate(7deg); }
.scrap-collage .c3 { width: 44%; left: 30%; bottom: 0; transform: rotate(-3deg); }
.scrap-collage .scrap-tag { position: absolute; right: 0; bottom: 34px; transform: rotate(-9deg); }
.scrap-collage .tape-strip { position: absolute; left: 12%; top: 4px; width: 110px; transform: rotate(-14deg); }

/* ─── Tape, kraft tag, sticky note — the kit's pieces, sized for a page ──── */

.tape-strip {
    display: block;
    height: 26px;
    background: var(--tape);
    mix-blend-mode: multiply;
    clip-path: polygon(2% 8%, 6% 0, 12% 9%, 18% 1%, 25% 8%, 32% 0, 40% 7%, 48% 1%, 56% 8%, 64% 0, 72% 8%, 80% 1%, 88% 8%, 94% 0, 100% 6%, 98% 94%, 93% 100%, 86% 92%, 79% 100%, 71% 93%, 63% 100%, 55% 92%, 47% 100%, 39% 93%, 31% 100%, 23% 92%, 15% 100%, 8% 93%, 0 100%);
}

.scrap-tag {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    min-width: 96px;
    height: 58px;
    padding: 0 14px 0 30px;
    box-sizing: border-box;
    background: var(--kraft);
    color: var(--kraft-ink);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
    filter: drop-shadow(0 6px 10px var(--shade));
    position: relative;
}
.scrap-tag::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
.scrap-tag b { font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.scrap-tag--range b { font-size: 17px; }
.scrap-tag s { font-size: 13px; font-weight: 700; opacity: .65; }

/* ─── Jump chips: round stickers ─────────────────────────────────────────── */

.scrap .guide__jump { gap: 10px; margin-top: 18px; }
.scrap .guide__jump a {
    background: var(--hl);
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 4px 8px var(--shade);
    border-radius: 999px;
    padding: 8px 14px;
}
.scrap .guide__jump li:nth-child(odd) a { transform: rotate(-2deg); }
.scrap .guide__jump li:nth-child(even) a { transform: rotate(2deg); }

/* ─── A group: heading with a highlighter, a marker note, product cards ──── */

.scrap .guide__group { margin-top: 44px; }
.scrap .guide__group h3 {
    font-weight: 900;
    font-size: clamp(24px, 4.4vw, 32px);
    letter-spacing: -.015em;
    margin: 0 0 6px;
}
.scrap .guide__group > p {
    color: var(--marker);
    font-weight: 700;
    font-size: 17px;
    max-width: 36em;
}

.scrap .guide__ideas {
    gap: 26px 18px;
    margin-top: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 560px) { .scrap .guide__ideas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .scrap .guide__ideas { grid-template-columns: repeat(4, 1fr); } }

.scrap .guide__ideas li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    background: var(--card);
    border: 0;
    border-radius: 3px;
    padding: 22px 16px 16px;
    box-shadow: 0 12px 24px var(--shade), 0 1px 2px rgba(70, 50, 20, .2);
}
.scrap .guide__ideas li:nth-child(4n+1) { transform: rotate(-1.2deg); }
.scrap .guide__ideas li:nth-child(4n+2) { transform: rotate(.9deg); }
.scrap .guide__ideas li:nth-child(4n+3) { transform: rotate(-.6deg); }
.scrap .guide__ideas li:nth-child(4n)   { transform: rotate(1.3deg); }

.scrap .guide__ideas .tape-strip {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 92px;
    margin-left: -46px;
    transform: rotate(-4deg);
}

.scrap-photo {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    margin: 0 0 4px;
}
/* One card per row on a phone: a square photo there is a whole screen of
   toy, so it gets a shorter box and the words come into view sooner. */
@media (max-width: 559px) {
    .scrap-photo { aspect-ratio: auto; height: 210px; }
}
.scrap-photo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    filter: drop-shadow(0 8px 10px var(--shade)) drop-shadow(0 1px 2px rgba(70, 50, 20, .25));
}

/* An idea no shop sells (a voucher, tickets, a local treat): a sticky note
   with the copy's price range instead of a product photo. */
.scrap .guide__ideas li.scrap-note {
    background: #FFF6B8;
    color: #2B2616;
    justify-content: center;
    gap: 10px;
    padding-top: 28px;
}
.scrap .guide__ideas li.scrap-note:nth-child(even) { background: #FFD6E0; }
.scrap .guide__ideas li.scrap-note .guide__idea { font-size: 20px; }
.scrap .guide__ideas li.scrap-note p { color: #3B3626; }

.scrap-price { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 0; }
.scrap .guide__idea { font-size: 17px; font-weight: 900; line-height: 1.25; }
.scrap .guide__ideas li p { font-size: 15px; line-height: 1.45; }
.scrap-product {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.35;
}
.scrap-product a { color: var(--marker); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.scrap .guide__pricenote { color: var(--ink-2); }

/* ─── Pains as sticky notes ──────────────────────────────────────────────── */

.scrap .landing__cards li {
    border: 0;
    border-radius: 2px;
    background: #FFF6B8;
    color: #2B2616;
    box-shadow: 0 14px 26px var(--shade), 0 1px 2px rgba(70, 50, 20, .2);
}
.scrap .landing__cards li:nth-child(3n+1) { transform: rotate(-1.5deg); }
.scrap .landing__cards li:nth-child(3n+2) { background: #FFD6E0; transform: rotate(1.2deg); }
.scrap .landing__cards li:nth-child(3n)   { background: #D6E4FF; transform: rotate(-.8deg); }
.scrap .landing__cards p { color: #3B3626; }

/* The steps keep the notes' shape but on plain card paper. */
/* :nth-child(n) to outrank the notes' own colours just above. */
.scrap ol.landing__cards li:nth-child(n) { background: var(--card); }
.scrap .landing__step {
    background: none;
    color: var(--marker);
    font-weight: 900;
    font-size: 34px;
    width: auto;
    height: auto;
    justify-content: flex-start;
    margin-bottom: 4px;
}

/* ─── FAQ on a card ──────────────────────────────────────────────────────── */

.scrap .landing__faq {
    background: var(--card);
    border: 0;
    padding: 4px 22px;
    box-shadow: 0 12px 24px var(--shade);
}
.scrap .landing__faq > div:last-child { border-bottom: 0; }

/* ─── Closing: kraft paper with a stamp ──────────────────────────────────── */

.scrap .landing__close {
    background: var(--kraft);
    color: var(--kraft-ink);
    border-radius: 4px;
    position: relative;
    box-shadow: 0 16px 30px var(--shade);
}
.scrap .landing__close h2, .scrap .landing__close p { color: var(--kraft-ink); }
.scrap .landing__close .landing__cta { background: var(--ink); color: var(--paper); }
.scrap-stamp {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 6px 14px;
    border: 4px double #C62828;
    border-radius: 10px;
    color: #C62828;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .06em;
    transform: rotate(8deg);
    opacity: .85;
}

/* ─── Links from an overview group to its own pages (kids → one age) ────── */

.guide__ages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 6px;
    padding: 0;
    list-style: none;
}
.guide__ages a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--card);
    color: var(--marker);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 3px 6px var(--shade);
}

/* ─── The hub (/gifts/): every guide as a taped card with one sticker ────── */

.hub__hero { padding: 36px 0 4px; max-width: 40em; }
.scrap section h2 mark { font-size: inherit; }

.hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 22px 16px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.hub__grid li:nth-child(4n+1) a { transform: rotate(-1.2deg); }
.hub__grid li:nth-child(4n+2) a { transform: rotate(.9deg); }
.hub__grid li:nth-child(4n+3) a { transform: rotate(-.5deg); }
.hub__grid li:nth-child(4n)   a { transform: rotate(1.2deg); }
.hub__grid a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 12px 14px;
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 10px 20px var(--shade), 0 1px 2px rgba(70, 50, 20, .2);
}
.hub__grid .tape-strip { position: absolute; top: -11px; left: 50%; width: 72px; margin-left: -36px; transform: rotate(-4deg); }
.hub__photo { display: grid; place-items: center; height: 110px; width: 100%; }
.hub__photo img { max-width: 100%; max-height: 110px; width: auto; height: auto; filter: drop-shadow(0 6px 8px var(--shade)); }
.hub__name { font-weight: 900; font-size: 16px; line-height: 1.25; }

/* The hub card that goes to all of them: a sticky note, no sticker. */
.hub__grid .hub__all a { background: #FFF6B8; color: #2B2616; justify-content: center; min-height: 150px; }

/* ─── The home page (render-landing.mjs) ─────────────────────────────────── */

/* The app on a phone, taped down among two real gifts. The box keeps its
   shape as it shrinks, so the pieces stay where they overlap. */
.scrap-collage--home { height: auto; aspect-ratio: 44 / 47; max-width: 420px; }
.scrap-collage--home .shot {
    width: 46%;
    left: 27%;
    top: 3%;
    border-radius: 18px;
    transform: rotate(3deg);
    filter: none;
    box-shadow: 0 14px 26px var(--shade), 0 1px 3px rgba(70, 50, 20, .25);
}
.scrap-collage--home .c1 { width: 38%; left: 0; top: auto; bottom: 4%; transform: rotate(-9deg); }
.scrap-collage--home .c2 { width: 33%; left: auto; right: 0; top: 12%; transform: rotate(8deg); }
.scrap-collage--home .tape-strip { left: 50%; top: 0; width: 26%; margin-left: -12%; transform: rotate(-5deg); }
.scrap-collage--home .scrap-tag { right: 1%; bottom: 20%; }

.scrap .landing__example a { color: var(--marker); }

/* Features: card paper under a strip of tape, not more sticky notes. */
.scrap .landing__cards--taped { gap: 26px 18px; margin-top: 30px; }
@media (min-width: 640px) { .scrap .landing__cards--taped { grid-template-columns: repeat(2, 1fr); } }
.scrap .landing__cards--taped li,
.scrap .landing__cards--taped li:nth-child(3n+2),
.scrap .landing__cards--taped li:nth-child(3n) { position: relative; background: var(--card); color: var(--ink); padding-top: 24px; }
.scrap .landing__cards--taped p { color: var(--ink-2); }
.scrap .landing__cards--taped .tape-strip { position: absolute; top: -12px; left: 50%; width: 92px; margin-left: -46px; transform: rotate(-4deg); }

.landing__ideas { margin-top: 56px; }

.scrap .guide__more a { background: var(--card); border: 0; box-shadow: 0 6px 12px var(--shade); border-radius: 3px; }
.scrap footer { border-top-color: rgba(26, 26, 30, .14); }