/* anaudriste.ro · public site · stilul @anaudr Colored / playful (never calm, never minimal).
   Extracted from the approved mockups docs/machete/site.css + acasa.html (G0). Tokens live in tokens.css.
   Selector renames vs the mockup: .nav -> .site-header, .band -> .site-banner, .foot -> .site-footer, .burger lives on <summary>.
   Article-only rules (prose, toc, article header) go to article.css (Task 13.3).
   Motion (Phase 14) attaches to the data-* hooks; every hidden starting state is scoped to html.motion, so without JS all is visible.
   Deliberate deviations from the mockup are only for WCAG AA and are grouped in the "AA" block at the end. */

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(26,10,46,.09) 1.4px,transparent 1.4px);background-size:24px 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block} /* width/height attributes give the ratio; CSS sets the size */
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--eblue);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:200;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:.5em 1em;font:400 .9rem var(--f-head);box-shadow:var(--hard-s)}
.skip:focus{top:12px}
main:focus{outline:none}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
section{position:relative}

/* ---------- atoms ---------- */
.hl{background:linear-gradient(transparent 55%,var(--yellow) 55%,var(--yellow) 92%,transparent 92%);background-size:100% 100%;background-repeat:no-repeat;transition:background-size .9s cubic-bezier(.2,.8,.2,1);padding:0 4px}
html.motion .hl{background-size:0% 100%}
html.motion .hl.on{background-size:100% 100%}
.stk{display:inline-flex;align-items:center;gap:.35em;font:400 .8rem var(--f-head);letter-spacing:.04em;padding:.45em .95em;border:2.5px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);white-space:nowrap;background:#fff}
.scrib{font:700 1.5rem/1.05 var(--f-hand)}
.acc{font:italic 600 1.08em var(--f-acc)}
.eyebrow{font:500 .74rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:2.5px solid var(--ink);border-radius:16px;padding:15px 22px;background:var(--ink);color:#fff;font:400 1rem var(--f-head);box-shadow:var(--hard-s);transition:transform .15s,box-shadow .15s;cursor:pointer;will-change:transform}
.btn:hover{box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--ink)}
.btn.y{background:var(--yellow);color:var(--ink)}.btn.w{background:#fff;color:var(--ink)}.btn.m{background:var(--magenta)}.btn.c{background:var(--coral);color:var(--ink)}
.deco{position:absolute;pointer-events:none;line-height:1;user-select:none}

/* sticker backgrounds (partials/sticker.php: bg => .bg-<token>) */
.bg-coral{background:var(--coral)}.bg-yellow{background:var(--yellow)}.bg-magenta{background:var(--magenta)}.bg-eblue{background:var(--eblue)}
.bg-tangerine{background:var(--tangerine)}.bg-bubble{background:var(--bubble)}.bg-violet{background:var(--violet);color:#fff}.bg-peach{background:var(--peach)}
.bg-baby{background:var(--baby)}.bg-mint{background:var(--mint)}.bg-lav{background:var(--lav)}.bg-white{background:#fff}.bg-ink{background:var(--ink);color:var(--cream)}

/* ---------- announcement band (partials/banner.php) ---------- */
.site-banner{position:relative;z-index:5;background:var(--yellow);border-block:2.5px solid var(--ink);transform:rotate(-1.2deg);margin:10px -30px 0;overflow:hidden;white-space:nowrap}
.site-banner .track{display:inline-flex;gap:0;padding:9px 0;font:400 .9rem var(--f-head);letter-spacing:.05em;will-change:transform}
.site-banner .track>span{padding-right:2.5em}
.site-banner a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.site-banner .track>span:first-child{padding-left:46px}

/* ---------- header (partials/header.php) ---------- */
.site-header{position:sticky;top:0;z-index:50;padding:12px 0;transition:background .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(244,241,251,.88);backdrop-filter:blur(10px);box-shadow:0 2px 0 var(--ink)}
.site-header .wrap{display:flex;align-items:center;gap:18px}
.logo{font:400 1.15rem var(--f-head);display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo .dot{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--ink);background:var(--magenta);display:grid;place-items:center;color:#fff;font-size:.95rem;box-shadow:2px 2px 0 var(--ink);transform:rotate(-8deg)}
.logo b{font:italic 600 1.15em var(--f-acc);color:var(--magenta)}
.links{display:none;gap:4px;margin-left:auto}
.links a{font-weight:700;padding:8px 12px;border-radius:999px;transition:background .2s}
.links a:hover,.links a[aria-current=page]{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.site-header .btn{margin-left:auto;padding:11px 16px;font-size:.88rem}
.site-header .lang{display:none;font:500 .78rem var(--f-mono);letter-spacing:.12em;padding:7px 10px;border:2.5px solid var(--ink);border-radius:10px;background:#fff;box-shadow:2px 2px 0 var(--ink);transform:rotate(4deg)}
.site-header .lang:hover{background:var(--mint)}
.burger{width:46px;height:46px;border:2.5px solid var(--ink);border-radius:14px;background:#fff;box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center;font-size:1.2rem;cursor:pointer}
@media (min-width:980px){.links{display:flex}.site-header .btn{margin-left:8px}.site-header .lang{display:inline-block}.drawer{display:none}}
.site-header .btn .sm{display:none}
@media (max-width:520px){.site-header .btn .lg{display:none}.site-header .btn .sm{display:inline}.logo{font-size:1rem}}

/* ---------- mobile drawer (partials/drawer.php): <details>, works without JS; site.js adds Esc + focus trap ---------- */
.drawer{position:relative}
.drawer>summary{list-style:none}
.drawer>summary::-webkit-details-marker{display:none}
.drawer .burger .x,.drawer[open] .burger .o{display:none}
.drawer[open] .burger .x{display:inline}
.drawer[open] .burger{background:var(--yellow)}
.drawer__panel{position:absolute;right:0;top:calc(100% + 14px);width:min(330px,calc(100vw - 32px));background:var(--yellow);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--hard);padding:18px 16px 16px;transform:rotate(-1deg);z-index:60}
.drawer__panel ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.drawer__panel li a{display:flex;align-items:center;justify-content:space-between;font:400 1.15rem var(--f-head);padding:10px 14px;border:2.5px solid var(--ink);border-radius:14px;background:#fff;box-shadow:var(--hard-s)}
.drawer__panel li:nth-child(6n+1) a{background:var(--coral)}.drawer__panel li:nth-child(6n+2) a{background:var(--mint)}.drawer__panel li:nth-child(6n+3) a{background:var(--baby)}
.drawer__panel li:nth-child(6n+4) a{background:var(--lav)}.drawer__panel li:nth-child(6n+5) a{background:var(--peach)}.drawer__panel li:nth-child(6n) a{background:#fff}
.drawer__panel li:nth-child(odd) a{transform:rotate(-1deg)}.drawer__panel li:nth-child(even) a{transform:rotate(1deg)}
.drawer__panel li a[aria-current=page]{outline:3px dashed var(--ink);outline-offset:2px}
.drawer__panel .btn{width:100%;margin:0}
.drawer__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.drawer__foot .scrib{font-size:1.3rem}
.site-header .drawer__foot .lang{display:inline-block;font:500 .78rem var(--f-mono);letter-spacing:.12em;padding:7px 10px;border:2.5px solid var(--ink);border-radius:10px;background:#fff;box-shadow:2px 2px 0 var(--ink)}

/* ---------- custom cursor (desktop; the element is added by motion, Phase 14) ---------- */
.cur{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--magenta);border:2px solid var(--ink);pointer-events:none;z-index:999;transition:width .2s,height .2s,margin .2s,background .2s;display:none;mix-blend-mode:normal}
.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--yellow)}
.cur span{position:absolute;inset:0;display:grid;place-items:center;font:400 .62rem var(--f-head);opacity:0;transition:opacity .2s}
.cur.big span{opacity:1}
@media (hover:hover) and (pointer:fine){html.motion .cur{display:block}body.has-cur,body.has-cur a,body.has-cur button{cursor:none}}
.cur{opacity:1}.cur.off{opacity:0}
body.has-cur input,body.has-cur textarea,body.has-cur select,body.has-cur [contenteditable]{cursor:auto} /* the native cursor stays on form fields */

/* ---------- section label ---------- */
.lbl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.lbl .scrib{color:var(--magenta)}
.lbl-h{margin:0;font:inherit;display:inline-flex}
.h2{font:400 clamp(2rem,6vw,4rem)/.98 var(--f-head);margin:0;letter-spacing:-.015em}
.h2 .c1{color:var(--magenta)}.h2 .c2{color:var(--eblue)}.h2 .c3{color:var(--tangerine)}.h2 .c4{color:var(--emerald)}

/* ---------- breadcrumbs (partials/breadcrumbs.php) ---------- */
.crumbs{font:500 .74rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:8px}
.crumbs a:hover{color:var(--magenta)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- marquee bands (partials/marquee.php) ---------- */
.pband{background:#fff;border-block:2.5px solid var(--ink);overflow:hidden;white-space:nowrap;transform:rotate(1deg);margin:0 -30px}
.pband .track{display:inline-flex;align-items:center;padding:16px 0}
.pband .track span{display:inline-flex;align-items:center;gap:14px;padding-right:46px;font:400 1.7rem var(--f-head);color:var(--ink)}
.pband .track>span:first-child{padding-left:46px}
.pband .track span i{font-style:normal;font-size:1.4rem}
.pband .track span.serif{font:italic 600 1.9rem var(--f-acc)}
.pband .track span.mono{font:500 1.4rem var(--f-mono);letter-spacing:.06em}
.bband{background:var(--ink);border-block:2.5px solid var(--ink);overflow:hidden;white-space:nowrap;transform:rotate(-1.2deg);margin:16px -30px 0}
.bband .track{display:inline-flex;align-items:center;padding:18px 0 18px 46px}
.bband .logo-chip{display:inline-grid;place-items:center;height:64px;min-width:140px;padding:10px 22px;margin-right:18px;background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:3px 3px 0 var(--yellow)}
.bband .logo-chip:nth-child(3n){transform:rotate(-3deg)}.bband .logo-chip:nth-child(3n+1){transform:rotate(2deg)}
.bband img{max-height:38px;max-width:120px;width:auto}
.mantra{background:var(--magenta);color:#fff;border-block:2.5px solid var(--ink);overflow:hidden;white-space:nowrap;margin:0 -30px}
.mantra .track{display:inline-flex;padding:12px 0 12px 46px;font:400 1.1rem var(--f-head)}
.mantra .track span{padding-right:2em}

/* without motion (no JS, reduced motion, or before Phase 14) the bands stand still: show one copy and let the items wrap, so nothing is cut off */
html:not(.motion) .site-banner,html:not(.motion) .pband,html:not(.motion) .bband,html:not(.motion) .mantra{white-space:normal}
html:not(.motion) .site-banner .track,html:not(.motion) .pband .track,html:not(.motion) .bband .track,html:not(.motion) .mantra .track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:12px;padding-left:46px;padding-right:46px}
html:not(.motion) .site-banner .track>span{padding:0;text-align:center}
html:not(.motion) .site-banner .track>[aria-hidden]{display:none}
@media (max-width:879px){html:not(.motion) .site-footer .mantra{transform:rotate(1.2deg) translateY(-24px)}}
html:not(.motion) .pband .track>span:first-child{padding-left:0}
html:not(.motion) .pband .track>span:last-child,html:not(.motion) .mantra .track span:last-child{padding-right:0}

/* ---------- door cards (partials/door_card.php) ---------- */
.offers{padding:110px 0 40px;overflow:hidden}
.offers .head{max-width:var(--max);margin:0 auto;padding:0 16px}
@media (min-width:768px){.offers .head{padding:0 32px}}
.htrack{display:flex;gap:26px;padding:34px 16px 30px;overflow-x:auto;scroll-snap-type:x mandatory}
@media (min-width:900px){.htrack{overflow:visible;padding:40px 32px 40px max(32px,calc((100vw - var(--max))/2 + 32px));width:max-content}}
.offer{flex:0 0 min(86vw,420px);scroll-snap-align:start;border:3px solid var(--ink);border-radius:28px;padding:26px 24px 24px;box-shadow:8px 8px 0 var(--ink);position:relative;display:flex;flex-direction:column;min-height:520px;transform-style:preserve-3d;background:#fff}
.offer:nth-child(odd){transform:rotate(-1.2deg)}.offer:nth-child(even){transform:rotate(1.2deg)}
.offer .em{width:74px;height:74px;border-radius:20px;border:3px solid var(--ink);background:#fff;display:grid;place-items:center;font-size:2.4rem;box-shadow:3px 3px 0 var(--ink);transform:rotate(-6deg)}
.offer .who{font:700 1.5rem/1.1 var(--f-hand);margin:18px 0 4px}
.offer h3{font:400 2.2rem/1 var(--f-head);margin:0 0 12px}
.offer h3 .acc{color:var(--magenta)}
.offer p{margin:0 0 16px;font-weight:500}
.offer ul{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px}
.offer li{border:2px solid var(--ink);border-radius:999px;padding:.2em .7em;font-size:.84rem;font-weight:700;background:#fff}
.offer .price{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.offer .price b{font:italic 600 2.6rem/1 var(--f-acc)}
.offer .price span{font-weight:700;font-size:.92rem}
.offer .btn{width:100%;margin-top:auto}
.offer .price+.btn{margin-top:0}
.offer .btn::after{content:"";position:absolute;inset:0;border-radius:28px} /* the whole card is the link target, as in the mockup */
.offer .badge{position:absolute;top:-18px;right:20px;z-index:1}
.door--yellow{background:var(--yellow)}.door--coral{background:var(--peach)}.door--blue{background:var(--baby)}.door--mint{background:var(--mint)}.door--magenta{background:var(--magenta);color:#fff}.door--lav{background:var(--lav)}
.door--magenta h3 .acc{color:var(--yellow)} .door--magenta li{color:var(--ink)}
.offers .swipe{display:flex;justify-content:center;color:var(--magenta);margin:0}
/* the row is pinned and scrolled sideways only when motion.js has actually set the pin up (.is-pinned: full motion, from 768px, section fits
   the viewport). Until then, and without motion, the desktop row wraps into a grid and phones keep the swipe row, so every door is reachable. */
@media (min-width:900px){.offers:not(.is-pinned) .htrack{flex-wrap:wrap;justify-content:center;width:auto;max-width:var(--max);margin:0 auto;padding:40px 32px;row-gap:44px}
  .offers:not(.is-pinned) .offer{flex:1 1 300px;max-width:420px}}
.offers.is-pinned .htrack{overflow:visible;scroll-snap-type:none;width:max-content}
.offers.is-pinned .swipe{display:none}
/* laptops and landscape tablets (short viewports): compact cards so the pinned row fits with every CTA visible, as in the approved mockup at 1280×800 */
@media (min-width:768px) and (max-height:900px){
  .offers.is-pinned{padding-top:84px}
  .offers.is-pinned .lbl{margin-bottom:10px}
  .offers.is-pinned .h2{font-size:clamp(2rem,4.2vw,3rem)}
  .offers.is-pinned .htrack{padding-top:22px;padding-bottom:22px}
  .offers.is-pinned .offer{min-height:min(470px,calc(100vh - 300px));padding:18px 20px;flex-basis:min(86vw,380px)}
  .offers.is-pinned .offer .em{width:54px;height:54px;font-size:1.7rem;border-radius:16px}
  .offers.is-pinned .offer .who{font-size:1.25rem;margin:10px 0 2px}
  .offers.is-pinned .offer h3{font-size:1.8rem;margin-bottom:8px}
  .offers.is-pinned .offer p{margin-bottom:10px;font-size:.95rem;line-height:1.45}
  .offers.is-pinned .offer ul{display:none}
  .offers.is-pinned .offer .price{margin-bottom:10px}
  .offers.is-pinned .offer .price b{font-size:2.1rem}
  .offers.is-pinned .offer .btn{padding:12px 18px}
}
/* the door's shadow „jumps” when the cursor is on it (box-shadow only: GSAP owns the transform for the tilt) */
.offer[data-tilt]{transition:box-shadow .35s cubic-bezier(.3,1.9,.5,1)}
html.motion .offer.is-hot{box-shadow:14px 16px 0 var(--ink)}
@media (min-width:900px){.offers .swipe{display:none}}

/* ---------- figure tiles (partials/figure_tile.php) ---------- */
.stats{padding:90px 0}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:900px){.sgrid{grid-template-columns:repeat(3,1fr);gap:24px}}
.st{border:3px solid var(--ink);border-radius:24px;padding:22px 18px;box-shadow:var(--hard);position:relative;background:#fff}
.st:nth-child(6n+1){background:var(--bubble);color:#fff;transform:rotate(-2deg)}
.st:nth-child(6n+2){background:var(--yellow);transform:rotate(1.5deg)}
.st:nth-child(6n+3){background:var(--mint);transform:rotate(-1deg)}
.st:nth-child(6n+4){background:var(--lav);transform:rotate(2deg)}
.st:nth-child(6n+5){background:var(--peach);transform:rotate(-1.5deg)}
.st:nth-child(6n){background:var(--eblue);color:#fff;transform:rotate(1deg)}
.st .n{font:italic 600 clamp(2.2rem,9.5vw,4.6rem)/1 var(--f-acc)} /* inline, so a long value („200K+ €/an”) breaks only at its spaces; smaller floor than the mockup so „2.000+” fits a 375px tile */
.st .l{font-weight:700;margin-top:6px}
.st .ic{position:absolute;top:-20px;right:14px;font-size:2.2rem}

/* ---------- brands ---------- */
.brands{padding:30px 0 0}

/* ---------- campaign cards (partials/campaign_card.php) ---------- */
.lwid{padding:120px 0 40px}
.stack{display:grid;gap:30px;margin-top:30px}
@media (min-width:900px){.stack{gap:0}.stack .scard{position:sticky;top:110px;margin-bottom:60px}}
.scard{border:3px solid var(--ink);border-radius:30px;padding:22px;box-shadow:10px 10px 0 var(--ink);display:grid;gap:20px;align-items:center;transform-origin:50% 0;background:var(--baby)}
@media (min-width:900px){.scard{grid-template-columns:1fr 1.1fr;padding:30px;min-height:440px}}
.scard:nth-child(3n+1){background:var(--baby)}.scard:nth-child(3n+2){background:var(--peach)}.scard:nth-child(3n){background:var(--yellow)}
.scard .media{aspect-ratio:4/3;border:3px solid var(--ink);border-radius:20px;background:var(--ink);display:grid;place-items:center;position:relative;overflow:hidden}
.scard .media>img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.scard .media .play{width:82px;height:82px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);display:grid;place-items:center;font-size:2rem;box-shadow:4px 4px 0 #fff;position:relative}
.scard .media .bl{position:absolute;top:14px;left:14px;background:#fff;border-radius:12px;padding:8px 12px;border:2.5px solid var(--ink)}
.scard .media .bl img{height:26px;width:auto}
.scard .media .ttl{position:absolute;bottom:14px;left:14px;right:14px;color:#fff;font:700 1.6rem/1 var(--f-hand)}
.scard h3{font:400 clamp(1.7rem,3.6vw,2.6rem)/1.02 var(--f-head);margin:6px 0 10px}
.scard p{margin:0 0 16px;font-weight:500}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.res div{background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:10px;text-align:center;box-shadow:3px 3px 0 var(--ink)}
.res b{display:block;font:italic 600 1.7rem/1 var(--f-acc)}
.res span{font-size:.78rem;font-weight:700}

/* ---------- article cards (partials/article_card.php) ---------- */
.arts{padding:110px 0 30px}
.agrid{display:grid;gap:26px;margin-top:20px}
@media (min-width:880px){.agrid{grid-template-columns:repeat(3,1fr)}}
.acard{position:relative;background:#fff;border:3px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:var(--hard);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.acard:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:9px 9px 0 var(--ink)}
.acard .cover{aspect-ratio:16/10;display:grid;place-items:center;font-size:5rem;border-bottom:3px solid var(--ink);position:relative;overflow:hidden;background:var(--yellow)}
.acard .cover img{width:100%;height:100%;object-fit:cover}
.acard .cover .big{font:400 5.5rem/1 var(--f-head);color:rgba(26,10,46,.12);position:absolute;bottom:-18px;left:10px}
.acard .in{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.acard .cat{align-self:flex-start;font-size:.72rem;position:relative;z-index:1}
.acard h3{font:400 1.32rem/1.12 var(--f-head);margin:0}
.acard h3 a::after{content:"";position:absolute;inset:0} /* whole card clickable; the category pill stays its own link */
.acard .meta{font:500 .74rem var(--f-mono);letter-spacing:.08em;color:var(--muted);margin-top:auto;text-transform:uppercase}
.arts .all{display:flex;justify-content:center;margin:34px 0 0}

/* ---------- offer boxes (partials/offer_box.php): end of article and inline ---------- */
.inoffer{display:flex;gap:16px;align-items:center;background:var(--yellow);border:3px solid var(--ink);border-radius:22px;padding:16px 18px;box-shadow:var(--hard);transform:rotate(-.8deg);font-size:1rem}
.inoffer .em{flex:0 0 56px;height:56px;border-radius:16px;border:2.5px solid var(--ink);background:#fff;display:grid;place-items:center;font-size:1.7rem}
.inoffer b{font-family:var(--f-head);font-weight:400;display:block}
.inoffer .btn{margin-left:auto;padding:11px 14px;font-size:.85rem;white-space:nowrap}
@media (max-width:640px){.inoffer{flex-wrap:wrap}.inoffer .btn{margin-left:0;width:100%}}
.endoffer{margin-top:70px;background:var(--magenta);color:#fff;border:3px solid var(--ink);border-radius:30px;padding:34px 24px;box-shadow:12px 12px 0 var(--ink);position:relative;overflow:hidden}
@media (min-width:880px){.endoffer{padding:44px;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}}
.endoffer .scrib{color:var(--yellow)}
.endoffer h3{font:400 clamp(1.9rem,4vw,3rem)/1 var(--f-head);margin:8px 0 12px}
.endoffer h3 .acc{color:var(--yellow)}
.endoffer ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.endoffer li{background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.2em .7em;font-weight:700;font-size:.85rem}
.endoffer .pbox{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:22px;padding:20px;text-align:center;transform:rotate(2deg);margin-top:22px}
.endoffer .pbox b{font:italic 600 3.4rem/1 var(--f-acc);display:block}
.endoffer .pbox .btn{width:100%;margin-top:14px}
.endoffer .gh{position:absolute;right:-20px;top:-30px;font-size:9rem;opacity:.18;transform:rotate(14deg)}

/* ---------- home: hero ---------- */
.hero{padding:40px 0 70px;min-height:calc(100svh - 120px)}
.hero .grid{display:grid;gap:34px;align-items:center}
@media (min-width:980px){.hero .grid{grid-template-columns:1.25fr .9fr;gap:40px}}
.hero .hi{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hero .hi .stk{background:var(--mint);transform:rotate(-3deg)}
.hero h1{font:400 clamp(2.5rem,6vw,5rem)/.95 var(--f-head);margin:0;letter-spacing:-.025em}
.hero h1>span{display:block}
.hero h1 .l2{color:var(--magenta)}
.hero .hi .scrib{color:var(--magenta)}
@media (max-width:479px){.hero .hi .scrib{flex-basis:100%}} /* phones: the note always takes its own line, so the Caveat swap never moves the title (CLS) */
.hero h1 .l3 .acc{color:var(--eblue)}
.hero h1 .l4{color:var(--tangerine)}
.hero .sub{font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:600;max-width:34ch;margin:22px 0 0}
.hero .sub b{color:var(--magenta)}
.cred{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:20px 0 0;font:500 .82rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.cred .sep{opacity:.35}
.cred .joke{text-transform:none;letter-spacing:0;font:700 1.35rem/1 var(--f-hand);color:var(--magenta)}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;align-items:center}
.ctas .note{display:flex;align-items:center;gap:6px;color:var(--muted)}
.mini-nl{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:520px}
.mini-nl input{flex:1 1 220px;border:2.5px solid var(--ink);border-radius:14px;padding:13px 14px;background:#fff}
.mini-nl small{flex-basis:100%;font-size:.86rem;color:var(--muted)}
.photo{position:relative;justify-self:center;width:min(400px,78vw);aspect-ratio:4/5}
.blob{position:absolute;inset:0;border-radius:46% 54% 42% 58% / 52% 40% 60% 48%;overflow:hidden;border:5px solid var(--ink);box-shadow:12px 12px 0 var(--ink);background:var(--yellow)}
.blob img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.halo{position:absolute;inset:-22px -18px -10px -26px;border-radius:52% 48% 58% 42% / 44% 56% 44% 56%;background:var(--coral);border:4px solid var(--ink);z-index:-1}
.photo .s{position:absolute;z-index:3}
.photo .s1{top:-4%;left:-12%;background:var(--yellow);transform:rotate(-10deg)}
.photo .s2{top:18%;right:-12%;background:var(--eblue);color:#fff;transform:rotate(8deg)}
.photo .s3{bottom:12%;left:-16%;background:#fff;transform:rotate(-6deg)}
.photo .s4{bottom:-4%;right:-6%;background:var(--violet);color:#fff;transform:rotate(5deg)}
.photo .e{position:absolute;font-size:3rem;z-index:3}
.photo .e1{top:-10%;right:6%}.photo .e2{bottom:30%;right:-14%}.photo .e3{top:40%;left:-18%}
.photo .arrow{position:absolute;left:-8%;bottom:-16%;width:180px;z-index:3;color:var(--magenta)}
.photo .arrow .scrib{position:absolute;left:-14px;bottom:-8px;white-space:nowrap;transform:rotate(-6deg)}
.hero .ghost{position:absolute;font:400 clamp(8rem,22vw,18rem)/1 var(--f-head);color:rgba(26,10,46,.05);z-index:-1;right:-4vw;top:10%;white-space:nowrap}

/* ---------- home: press ---------- */
.press{padding:20px 0 0}
.press .lead{text-align:center;margin:0 0 14px;font:inherit}

/* ---------- home: trophy wall ---------- */
.trophies{padding:110px 0 20px}
.wall{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:26px 0 0;padding:0;list-style:none}
.trophies .all{display:flex;justify-content:center;margin:60px 0 0}
@media (min-width:880px){.wall{grid-template-columns:repeat(4,1fr);gap:30px}}
.pol{background:#fff;padding:10px 10px 12px;box-shadow:0 14px 30px rgba(26,10,46,.22);position:relative}
.pol:nth-child(4n+1){transform:rotate(-4deg)}.pol:nth-child(4n+2){transform:rotate(3deg) translateY(16px)}.pol:nth-child(4n+3){transform:rotate(-2deg)}.pol:nth-child(4n){transform:rotate(5deg) translateY(10px)}
.pol .ph-img{display:grid;aspect-ratio:1;background:var(--bone);border:2px dashed rgba(26,10,46,.3);display:grid;place-items:center;text-align:center;font-size:.85rem;color:var(--muted);padding:10px}
.pol .ph-img .e{font-size:2.6rem;display:block}
.pol img{aspect-ratio:1;object-fit:cover;width:100%}
.pol .cap{display:block;margin-top:10px;font:700 1.3rem/1.1 var(--f-hand);text-align:center} /* in the flow (mockup: absolute), so a two-line award title never covers the photo */
.pol::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(255,213,90,.92);transform:rotate(-3deg)}
.pol:nth-child(even)::before{background:rgba(196,77,212,.6);transform:rotate(4deg)}

/* ---------- home: newsletter ---------- */
.nl{padding:120px 0 0}
.nlbox{background:var(--magenta);color:#fff;border:3px solid var(--ink);border-radius:34px;padding:40px 22px;box-shadow:12px 12px 0 var(--ink);position:relative;text-align:center;overflow:hidden}
@media (min-width:880px){.nlbox{padding:64px 60px}}
.nlbox h2{font:400 clamp(2.1rem,6vw,4.4rem)/1 var(--f-head);margin:0 0 14px}
.nlbox h2 .acc{color:var(--yellow)}
.nlbox p{max-width:52ch;margin:0 auto 24px;font-weight:500;font-size:1.08rem}
.nlbox .f{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:560px;margin:0 auto}
.nlbox input{flex:1 1 240px;border:3px solid var(--ink);border-radius:16px;padding:15px 16px;background:#fff;color:var(--ink)}
.nlbox .big22{display:inline-block;background:var(--yellow);color:var(--ink);padding:0 .25em;transform:rotate(-2deg);border:2.5px solid var(--ink);border-radius:8px}
.nlbox .e{position:absolute;font-size:3.4rem}
.nlbox .eyebrow{margin:0 auto 10px}
.nlbox .newsletter-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:560px;margin:0 auto;position:relative;z-index:1}
.nlbox .newsletter-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nlbox .newsletter-form .btn{background:var(--yellow);color:var(--ink)}
.nlbox .newsletter-form .form-note{flex-basis:100%;margin:4px auto 0;font-size:.84rem;font-weight:500}
.nlbox .newsletter-form .form-note:empty{display:none}
.nlbox .newsletter-form .form-note a,.nlbox+noscript a{text-decoration:underline}
.nlbox .e1{top:18px;left:6%}.nlbox .e2{bottom:20px;right:7%}.nlbox .e3{top:30%;right:4%}
.nlbox>:not(.e){position:relative;z-index:1}
@media (max-width:640px){.nlbox .e{font-size:2.2rem}.nlbox .e1{top:10px;left:4%}.nlbox .e2{bottom:6px;right:4%}.nlbox .e3{top:8px;right:5%}}

/* ---------- home: book ---------- */
.book{padding:130px 0 30px}
.bgrid{display:grid;gap:60px;align-items:center}
@media (min-width:900px){.bgrid{grid-template-columns:.8fr 1.2fr;gap:70px}}
.bcover-wrap{position:relative;justify-self:center;width:min(330px,70vw);perspective:900px}
.bcover{border:4px solid var(--ink);border-radius:6px 14px 14px 6px;overflow:hidden;box-shadow:14px 14px 0 var(--ink);transform:rotate(-4deg);transform-style:preserve-3d;background:#3c4fa0}
.bcover img{width:100%;height:auto}
.bstk{position:absolute;z-index:3;line-height:1}
.bs1{top:-4%;left:-6%}.bs2{bottom:8%;right:-10%}.be1{font-size:3rem;top:30%;left:-14%}.be2{font-size:2.8rem;top:-8%;right:4%}
.blead{font-size:1.12rem;font-weight:500;max-width:52ch;margin:18px 0}
.bfacts{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.bfacts li{border:2.5px solid var(--ink);border-radius:999px;padding:.3em .9em;font-weight:700;background:#fff;box-shadow:2px 2px 0 var(--ink)}
.bfacts li:nth-child(1){background:var(--peach)}.bfacts li:nth-child(2){background:var(--baby)}.bfacts li:nth-child(3){background:var(--mint)}
.bbuy{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.bprice{display:flex;flex-direction:column;margin:0}
.bprice s{opacity:.55;font-weight:600}
.bprice b{font:italic 600 2.6rem/1 var(--f-acc);color:var(--magenta)}
.bprice span{font-size:.85rem;font-weight:600;color:var(--muted)}

/* ---------- footer (partials/footer.php) ---------- */
.site-footer{background:var(--ink);color:var(--cream);margin-top:120px;padding:0 0 40px;position:relative}
.site-footer .mantra{transform:rotate(1.2deg) translateY(-50%)}
.site-footer .cols{display:grid;gap:30px;padding-top:30px}
@media (min-width:880px){.site-footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h2{font:400 1rem var(--f-head);margin:0 0 12px;color:var(--yellow)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer a{display:block;padding:3px 0;opacity:.9}
.site-footer a:hover{color:var(--yellow)}
.site-footer .disc{font-size:.85rem;opacity:.75;margin-top:30px;max-width:70ch}
.site-footer .disc b{color:var(--yellow);font-weight:700}
.site-footer .bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:30px;font-size:.82rem;opacity:.8}
.site-footer .bottom a{display:inline}
.site-footer .legal{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.handle{display:inline-block;font:500 .78rem var(--f-mono);letter-spacing:.18em;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);padding:.45em .9em;border-radius:8px;transform:rotate(-3deg);box-shadow:2px 2px 0 var(--cream)}

/* ---------- motion (assets/js/motion.js, Phase 14) ----------
   html.motion is set before the first paint by partials/motion_scripts.php (never with reduced motion) and taken back 1 s after parse
   if motion.js has not started (motion.js re-adds it when it starts). It only carries harmless pre-states; the pinned row is .offers.is-pinned,
   set by motion.js when the pin exists. Rule: no CSS transition on transform for anything GSAP animates (it fights the tweens). */
.w,.ch{display:inline-block}.w{white-space:nowrap} /* split titles (ui_split / motion.js); same box with or without motion, so no reflow */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* while GSAP reveals an element it owns its transform: no CSS transition until motion.js marks it .rv-done (fixes the mockup's .acard drift) */
html.motion [data-r]:not(.rv-done),html.motion [data-stagger]>:not(.rv-done){transition:none}
html.motion .btn{transition:box-shadow .15s} /* magnetic buttons: GSAP moves them */
/* page changes cross-fade, the logo and the hero title morph (browsers without cross-document View Transitions just navigate) */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.site-header .logo{view-transition-name:logo}
.hero h1{view-transition-name:hero-title}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- AA (WCAG 2.1 AA) — the only deliberate deviations from the mockup ----------
   1. Focus ring: ink on light surfaces, yellow on the dark footer (the mockup's blue ring is under 3:1 on the lilac background).
   1b. Dark (ink) buttons also get a yellow inner ring on focus, so the indicator shows even where the ink outline meets an ink edge.
   2. Text on magenta / bubble / electric blue: white text there is 2.6–3.9:1, so small text turns ink (4.8–6.8:1).
      Large accent words on magenta stay white (3.9:1, large text), because yellow on magenta is 2.8:1. */
:focus-visible{outline-color:var(--ink)}
.site-footer :focus-visible{outline-color:var(--yellow)}
.btn:focus-visible{outline-offset:5px}
.btn:not(.y):not(.w):not(.c):not(.m):focus-visible{box-shadow:inset 0 0 0 3px var(--yellow),var(--hard-s)}
.btn.m,.logo .dot{color:var(--ink)}
.mantra{color:var(--ink)}
.door--magenta{color:var(--ink)} .door--magenta h3 .acc{color:#fff}
.st:nth-child(6n+1),.st:nth-child(6n){color:var(--ink)}
.endoffer,.nlbox{color:var(--ink)}
.endoffer .scrib,.endoffer h3 .acc,.nlbox h2 .acc{color:#fff}
.photo .s2{color:var(--ink)}
/* 3. Violet with white text is 4.2:1 at sticker size (ink 4.4:1): the „4× TEDx” sticker and the book label use lavender with ink (9.6:1). */
.photo .s4{background:var(--lav);color:var(--ink)}
/* AA on pastel doors: magenta accent text is 2.8:1 on yellow, 2.6 on mint, 1.8 on lavender. On those the accent word is ink on a coral marker
   (ink on coral 6.5:1, brand pairing yellow = ink text + coral accent). Peach and baby blue keep magenta (3.1 / 3.3:1, large text, AA). */
.door--yellow h3 .acc,.door--mint h3 .acc,.door--lav h3 .acc{color:var(--ink);background:var(--coral);padding:0 .14em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- WhatsApp (18.10.2026): footer chip + floating sticker button. Green #25D366 with ink text/icon (contrast ~10:1). ---------- */
.site-footer a.wa-chip{display:inline-flex;align-items:center;gap:.4em;margin:6px 0 4px;padding:.35em .9em;background:#25D366;color:var(--ink);opacity:1;border:2.5px solid var(--cream);border-radius:999px;box-shadow:3px 3px 0 var(--cream);font:400 .9rem var(--f-head);transform:rotate(-2deg)}
.site-footer a.wa-chip:hover{color:var(--ink);transform:rotate(0)}
.wa-fab{position:fixed;z-index:40;right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#25D366;color:var(--ink);border:3px solid var(--ink);box-shadow:0 0 0 2px var(--cream),var(--hard-s);transform:rotate(-8deg);transition:transform .15s,box-shadow .15s}
.wa-fab:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:0 0 0 2px var(--cream),5px 5px 0 var(--ink)}
.wa-fab:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.wa-fab:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
body:has(>[data-ck]) .wa-fab,body:has(details[data-drawer][open]) .wa-fab{display:none} /* never over the cookie banner or the open mobile menu */
@media (max-width:879px){.site-footer{padding-bottom:96px}} /* the last footer line stays clear of the button */
@media print{.wa-fab{display:none}}
@media (prefers-reduced-motion:reduce){.wa-fab,.wa-fab:hover{transition:none;transform:none}}