/* Pianzo Tech Labs · style crayon, adapté du site racine (papier, trait, ambre, scènes dessinées) */
:root,[data-theme="dark"]{
  --bg:#050814; --ink:#ece6da; --amber:#e9a43e;
  --surface:#0f1520; --muted:#c5cbd6; --line:rgba(236,230,218,.3);
  --glow:rgba(233,164,62,.10); --glow2:rgba(120,150,210,.07); --btn-ink:#1c1916;
  --shadow:rgba(0,0,0,.4); --rule:rgba(236,230,218,.12);
}
[data-theme="light"]{
  --bg:#f6f1ea; --ink:#2e2e34; --amber:#d48822;
  --surface:#fbf8f2; --muted:#5c534a; --line:rgba(46,46,52,.42);
  --glow:rgba(253,230,167,.62); --glow2:rgba(232,211,166,.45); --btn-ink:#1c1916;
  --shadow:rgba(60,44,24,.18); --rule:rgba(92,70,42,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:20px}
body{background:
  radial-gradient(46vw 46vw at 108% -12%,var(--glow),transparent 68%),
  radial-gradient(40vw 40vw at -12% 38%,var(--glow2),transparent 70%),var(--bg);
  color:var(--ink);line-height:1.6;overflow-x:clip;min-height:100vh;position:relative}
/* lueurs lentes derrière le contenu, comme sur le site racine */
body::before,body::after,main::before{content:"";position:fixed;z-index:0;pointer-events:none;border-radius:50%}
body::before{width:44vw;height:44vw;right:-12vw;top:-14vw;background:radial-gradient(circle,var(--glow),transparent 66%);animation:paper1 28s ease-in-out infinite alternate}
body::after{width:36vw;height:36vw;left:-14vw;top:42vh;background:radial-gradient(circle,var(--glow2),transparent 66%);animation:paper2 34s ease-in-out infinite alternate}
main::before{width:32vw;height:32vw;right:6vw;bottom:-12vw;background:radial-gradient(circle,var(--glow),transparent 66%);opacity:.7;animation:paper1 40s ease-in-out infinite alternate-reverse}
@keyframes paper1{to{transform:translate3d(-5vw,4vh,0) scale(1.06)}}
@keyframes paper2{to{transform:translate3d(6vw,-5vh,0) scale(1.08)}}
header,main,footer{position:relative;z-index:1}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--btn-ink);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* logos : une variante par thème. Le fichier garde sa toile 1600×900 ; on ne montre que la zone dessinée (recadrage CSS, SVG intact) */
[data-theme="dark"] .logo-light,[data-theme="light"] .logo-dark{display:none}

/* en-tête statique, logo centré, liens répartis, trait ambre tremblé dessiné dessous */
.hd{position:relative;z-index:30;padding:10px 0 0}
.hd-in{max-width:1240px;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"tools tools tools" "l brand r";align-items:center;row-gap:0}
.hd-panel{display:contents}
.hd-tools{grid-area:tools;justify-self:end;gap:20px}
.hd-tools .hd-theme,.hd-tools .hd-lang{font-size:12px}
.hd-brand{grid-area:brand;--bw:240px;margin:0 clamp(24px,5vw,72px)}
.hd-nav-l{grid-area:l;justify-self:end}
.hd-nav-r{grid-area:r;justify-self:start}
.hd-nav{font-size:15px;gap:34px}
.hd-line{display:block;width:min(1140px,calc(100% - 48px));height:12px;margin:6px auto 0;overflow:visible}
.hd-line path{fill:none;stroke:var(--amber);stroke-width:2.4;stroke-linecap:round;opacity:.8;stroke-dasharray:1;stroke-dashoffset:1}
.js .hd-line path{animation:hdraw 1.4s cubic-bezier(.55,.1,.35,1) .3s forwards}
@keyframes hdraw{to{stroke-dashoffset:0}}
html:not(.js) .hd-line path{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.js .hd-line path{animation:none;stroke-dashoffset:0}}
@media(max-width:820px){
  .hd{padding-top:0}
  .hd-in{grid-template-columns:1fr auto;grid-template-areas:"brand menu" "panel panel";height:64px;align-items:center}
  .hd-brand{grid-area:brand;--bw:170px;margin:0}
  .hd-menu{display:block;grid-area:menu;justify-self:end}
  .js .hd-panel{display:none}
  .js .hd.is-open .hd-panel{display:flex;flex-direction:column;align-items:flex-start;gap:14px;grid-area:panel;padding:6px 0 22px;position:absolute;top:64px;left:0;right:0;padding-left:24px;padding-right:24px;background:var(--bg);z-index:5}
  .hd-nav{flex-direction:column;gap:6px;font-size:22px;color:var(--ink)}
  .hd-tools{justify-self:start;margin-top:8px;gap:26px}
  .hd-tools .hd-theme,.hd-tools .hd-lang{font-size:13px}
  .hd-line{margin-top:0}
  html:not(.js) .hd-in{height:auto;grid-template-columns:1fr;grid-template-areas:"brand" "panel";padding-bottom:8px}
  html:not(.js) .hd-panel{display:flex;flex-direction:column;gap:6px}
}
@media(max-width:400px){.hd-in{padding:0 18px}}
/* logo C : toile 1600×900, dessin réel x113–1483 / y270–626 ; on montre la zone 1400×390 (recadrage CSS, SVG intact) */
.hd-brand{--bw:230px;display:block;flex:0 0 auto}
.hd-crop{display:block;position:relative;width:var(--bw);aspect-ratio:1400/390;overflow:hidden}
.hd-logo{position:absolute;max-width:none;height:auto;width:calc(var(--bw)*1.142857);left:calc(var(--bw)*-.071429);top:calc(var(--bw)*-.18)}
[data-theme="dark"] .hd-logo.logo-light,[data-theme="light"] .hd-logo.logo-dark{display:none}
/* texte discret */
.hd-nav{display:flex;gap:30px;font-size:14px;color:var(--muted)}
.hd-nav a,.hd-theme,.hd-lang a,.hd-menu{position:relative;transition:color .2s}
.hd-nav a{padding:6px 0}
.hd-nav a::after,.hd-theme::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:5px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4 Q25 1 50 3.5 T98 3' fill='none' stroke='%23e9a43e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.55,.1,.35,1)}
.hd-nav a:hover,.hd-theme:hover,.hd-lang a:hover,.hd-menu:hover{color:var(--amber)}
.hd-nav a:hover::after,.hd-theme:hover::after{clip-path:inset(0)}
.hd-tools{display:flex;align-items:center;gap:22px}
.hd-theme,.hd-menu{font:500 13px/1.4 'Space Grotesk',sans-serif;color:var(--muted);background:none;border:0;cursor:pointer;padding:6px 0}
.hd-lang{display:flex;font:600 13px/1 'Space Grotesk',sans-serif;color:var(--muted)}
.hd-lang a{padding:6px 0}
.hd-lang a+a::before{content:"/";margin:0 8px;opacity:.5}
.hd-lang a[aria-current]{color:var(--ink)}
.hd-menu{display:none;font-size:15px;color:var(--ink);letter-spacing:.02em}
.hd a:focus-visible,.hd button:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:2px}
@media(max-width:380px){.hd-brand{--bw:150px}}
@media(max-width:820px){.hd-menu{display:block}}
@media(max-width:820px){.hd-nav a{padding:3px 0}}

/* hero */
.hero{text-align:center;padding:clamp(24px,4vw,52px) 0 clamp(56px,7vw,90px)}
@media(max-width:820px){.hero{padding-top:44px}}
/* logo B : la barre hachurée (zone y<294 du fichier) est masquée par recadrage, fichier intact */
.hero-logo{width:min(620px,92%);margin:0 auto 26px;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hl-crop{display:block;aspect-ratio:1600/410;overflow:hidden}
.hero-logo-img{width:100%;max-width:none;height:auto;margin:-18.375% 0 0}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1{font-weight:700;font-size:clamp(26px,4vw,50px);line-height:1.14;letter-spacing:-.025em;max-width:900px;margin:10px auto 22px;text-wrap:balance;animation:rise .9s cubic-bezier(.2,.7,.2,1) .12s both}
h1 em{font-style:normal;position:relative;display:inline-block;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:-3%;right:-2%;bottom:-.14em;height:.34em;pointer-events:none;
  background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 Q50 3 100 7 T197 5' fill='none' stroke='%23e9a43e' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M12 10 Q70 7 130 9 T190 8' fill='none' stroke='%23e9a43e' stroke-width='1.5' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  clip-path:inset(0 100% 0 0);animation:underline 1.1s cubic-bezier(.55,.1,.35,1) .9s forwards}
[data-theme="light"] h1 em::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 Q50 3 100 7 T197 5' fill='none' stroke='%23d48822' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M12 10 Q70 7 130 9 T190 8' fill='none' stroke='%23d48822' stroke-width='1.5' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E")}
@keyframes underline{to{clip-path:inset(0 0 0 0)}}
.lede{max-width:680px;margin:0 auto 30px;color:var(--muted);font-size:clamp(16px,1.6vw,19px);animation:rise .9s cubic-bezier(.2,.7,.2,1) .24s both}
.cta-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:52px;animation:rise .9s cubic-bezier(.2,.7,.2,1) .36s both}
.cta-row.left{justify-content:flex-start;margin:18px 0 0;animation:none}
.cta{display:inline-block;background:var(--amber);color:var(--btn-ink);font:700 23px/1.1 'Caveat',cursive;padding:11px 28px;border:2px solid var(--ink);
  box-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 75%,transparent);border-radius:14px 9px 15px 8px / 9px 15px 8px 14px;transition:transform .2s,box-shadow .2s}
.cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 75%,transparent)}
.cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 color-mix(in srgb,var(--ink) 75%,transparent)}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--amber);box-shadow:none}
.hero-index{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto;text-align:left}
.hero-index a{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;position:relative;height:100%;background:var(--surface);
  border-radius:16px 11px 17px 10px / 11px 17px 10px 16px;box-shadow:2px 3px 0 color-mix(in srgb,var(--amber) 35%,transparent);transition:transform .2s}
.hero-index li:nth-child(odd) a{transform:rotate(-1.2deg)}
.hero-index li:nth-child(even) a{transform:rotate(1deg)}
.hero-index a:hover{transform:rotate(0) translateY(-2px)}
.hero-index a::before,.card::before{content:"";position:absolute;inset:0;border:2px solid var(--line);border-radius:18px 12px 20px 13px / 13px 20px 12px 18px;filter:url(#wobble);pointer-events:none;transition:border-color .2s}
.hero-index a:hover::before,a.card:hover::before{border-color:var(--amber)}
.n{font:700 26px/1 'Caveat',cursive;color:var(--amber)}
.tx strong{display:block;font-size:16px}
.tx span{color:var(--muted);font-size:14px;line-height:1.4;display:block}

/* sections */
section{padding:clamp(60px,8vw,104px) 0;position:relative}
main>section+section::before{content:"";position:absolute;left:24px;right:24px;top:0;border-top:2px dashed var(--rule)}
.section-head{text-align:center;margin-bottom:clamp(36px,5vw,56px)}
.label{display:inline-block;font:700 12px/1 'Space Grotesk',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
h2{font-weight:700;font-size:clamp(28px,3.8vw,46px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.under{display:block;width:min(240px,60%);height:14px;margin:8px auto 0;overflow:visible}
.under path{fill:none;stroke:var(--amber);stroke-width:3;stroke-linecap:round;filter:url(#wobble);
  stroke-dasharray:1.02;stroke-dashoffset:1.02;transition:stroke-dashoffset .9s cubic-bezier(.55,.1,.35,1) .2s}
.under .thin{stroke-width:1.4;opacity:.6;transition-delay:.55s}
.is-drawn .under path,.under.is-drawn path{stroke-dashoffset:0}
.section-head p:not(.label){max-width:640px;margin:16px auto 0;color:var(--muted)}
h3{font-size:20px;font-weight:700;line-height:1.25}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{position:relative;padding:26px 24px;background:var(--surface);border-radius:18px;display:block;min-width:0;
  box-shadow:0 18px 40px -26px var(--shadow)}
.card::before{clip-path:inset(-4px 100% -4px -4px);transition:clip-path 1.1s cubic-bezier(.55,.1,.35,1) calc(var(--i,0)*.14s),border-color .2s}
.hero-index a::before{clip-path:none}
.card.in::before{clip-path:inset(-4px)}
.grid3>.card:nth-child(odd),.faq>.card:nth-child(odd){transform:rotate(-.4deg)}
.grid3>.card:nth-child(even),.faq>.card:nth-child(even){transform:rotate(.35deg)}
.card{transition:transform .25s ease,opacity .7s ease calc(var(--i,0)*.12s)}
.grid3>.card:hover,.faq>.card:hover{transform:rotate(0) translateY(-2px)}

/* révélation à l'arrivée sur la section */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease calc(var(--i,0)*.12s),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.12s)}
.js .reveal.in{opacity:1;transform:none}
.js .grid3>.card.reveal.in:nth-child(odd),.js .faq>.card.reveal.in:nth-child(odd){transform:rotate(-.4deg)}
.js .grid3>.card.reveal.in:nth-child(even),.js .faq>.card.reveal.in:nth-child(even){transform:rotate(.35deg)}

/* scènes dessinées au crayon */
.crayon{display:block;overflow:visible;width:100%;height:auto}
.crayon .w{filter:url(#wobble-s)}
.crayon .s{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9;
  stroke-dasharray:1.02;stroke-dashoffset:1.02;transition:stroke-dashoffset var(--t,.7s) cubic-bezier(.55,.1,.35,1) var(--d,0s)}
.crayon .s.a{stroke:var(--amber);opacity:1}
.crayon .s.thin{stroke-width:1.5;opacity:.65}
.crayon .s.big{stroke-width:4}
.crayon .h{fill:url(#hatch);stroke:none;opacity:0;transition:opacity .7s ease var(--d,0s)}
.crayon.is-drawn .s{stroke-dashoffset:0}
.crayon.is-drawn .h{opacity:.55}
.crayon .m{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 8;opacity:0;transition:opacity .6s ease var(--d,0s)}
.crayon.is-drawn .m{opacity:.9;animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-22}}
.crayon .dot{fill:var(--amber);stroke:none;opacity:0;transition:opacity .4s ease var(--d,0s)}
.crayon.is-drawn .dot{opacity:1}
.crayon .fx{transform-box:fill-box;transform-origin:center}
.crayon.is-drawn .caret{animation:blink 1s steps(1) infinite 1.9s}
@keyframes blink{50%{opacity:0}}
.crayon.is-drawn .stampit{animation:stamp 3.6s ease-in-out 2.2s infinite}
@keyframes stamp{0%,86%,100%{transform:scale(1) rotate(0)}92%{transform:scale(1.18) rotate(-6deg)}}
.crayon.is-drawn .ring{animation:ping 2.6s ease-out 1.6s infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.85}100%{transform:scale(1.5);opacity:0}}
.crayon .ring{opacity:0}
.crayon.is-drawn .tick{animation:tickloop 7s ease-in-out var(--ld,0s) infinite both}
@keyframes tickloop{0%{stroke-dashoffset:1.02}10%,78%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:1.02}}
.crayon.is-drawn .bob{animation:bob 1.1s ease-in-out var(--ld,2s) infinite}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}
.crayon .dots circle{opacity:.35}
.crayon .pop{opacity:0;transform:translateY(8px);transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}
.crayon.is-drawn .pop{opacity:1;transform:none}
.crayon.is-drawn .smoke{animation:smoke 3.2s ease-out var(--ld,1s) infinite}
.crayon .smoke{opacity:0}
@keyframes smoke{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.8}100%{transform:translate(-26px,-46px) scale(1.5);opacity:0}}
.crayon.is-drawn .spin{animation:spin 2.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.crayon.is-drawn .tr{animation:trin 2.4s cubic-bezier(.2,.7,.2,1) both,rock .9s ease-in-out 2.4s infinite}
@keyframes trin{from{transform:translateX(-90px)}to{transform:none}}
@keyframes rock{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.crayon.is-drawn .ties{animation:march 1.4s linear infinite}

.scene-art{margin:-4px auto 10px;max-width:300px}
.scene h3{margin-bottom:14px}
.ba{display:grid;grid-template-columns:62px 1fr;gap:8px;margin-bottom:10px;color:var(--muted)}
.ba-k{font:700 11px/1.9 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.ba.after{color:var(--ink)}
.ba.after .ba-k{color:var(--amber)}
.stamp,.hand{font:700 26px/1.1 'Caveat',cursive;color:var(--amber);transform:rotate(-2deg);transform-origin:left}
.stamp{margin-top:16px}
.route{display:flex;flex-direction:column;gap:6px}
.letter{font:700 52px/1 'Caveat',cursive;color:var(--amber)}
.ask{font-weight:600;font-size:18px;line-height:1.35}
.to{color:var(--muted);font-size:14px;margin-top:auto;padding-top:12px}

.path{display:flex;flex-direction:column}
.kind{color:var(--muted);font-size:13px;margin-bottom:6px}
.num{font:700 24px/1 'Caveat',cursive;color:var(--amber);margin-right:6px}
.out-k{margin-top:18px;font:700 11px/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.out{font-weight:600;font-size:18px;margin:6px 0 14px;line-height:1.4}
.path ul{margin-bottom:14px}
.path li{position:relative;padding-left:20px;color:var(--muted);margin-bottom:6px}
.path li::before{content:"";position:absolute;left:2px;top:.7em;width:10px;height:2px;background:var(--amber);transform:rotate(-35deg)}
.ex{color:var(--muted);font-size:14px;font-style:italic;margin-bottom:16px}
.vol{margin-top:auto;font-weight:600;font-size:14px}
.hatch{display:inline-block;padding:4px 10px;border-radius:6px;
  background:repeating-linear-gradient(-35deg,color-mix(in srgb,var(--amber) 38%,transparent) 0 2px,transparent 2px 7px)}
.path.featured .hatch{background:repeating-linear-gradient(-35deg,color-mix(in srgb,var(--amber) 55%,transparent) 0 2px,transparent 2px 6px)}
.path.featured{background:color-mix(in srgb,var(--amber) 7%,var(--surface))}
.control{text-align:center;margin-top:44px;font:700 32px/1.2 'Caveat',cursive;color:var(--amber)}
.note{max-width:680px;margin:14px auto 0;text-align:center;color:var(--muted);font-size:14px}

.bricks{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.bricks .card{transform:rotate(-.3deg)}
.bricks li:nth-child(even){transform:rotate(.4deg)}
.bricks .card::after{content:"";position:absolute;right:-24px;top:50%;width:22px;height:16px;margin-top:-8px;pointer-events:none;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M1 8 Q10 6 20 8 M14 2 L20.5 8 L14 14' fill='none' stroke='%23e9a43e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  clip-path:inset(0 100% 0 0);transition:clip-path .6s ease calc(.6s + var(--i,0)*.14s)}
.bricks .card.in::after{clip-path:inset(0)}
.bricks li:last-child .card::after{display:none}
.brick-n{font:700 34px/1 'Caveat',cursive;color:var(--amber);display:block;margin-bottom:8px}
.bricks h3{margin-bottom:8px}
.bricks p{color:var(--muted);font-size:15px}

.community{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;padding:38px 34px;border-radius:22px}
.community h2{font-size:clamp(26px,3vw,38px)}
.community .under{margin:8px 0 14px;width:min(240px,60%)}
.community p{color:var(--muted)}
.community .hand{margin-top:10px;display:block}
.community .side{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;font:700 26px/1.25 'Caveat',cursive;color:var(--ink)}
.chat-art{width:min(220px,70%);margin:0 auto}

.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
.faq dt{font-weight:700;margin-bottom:6px}
.faq dd{color:var(--muted)}

.band{padding:clamp(56px,7vw,84px) 0 40px;text-align:center}
.band .train-art{max-width:520px;margin:0 auto 14px}
.band h2{display:inline-block;padding:6px 18px;max-width:100%;
  background:repeating-linear-gradient(-35deg,color-mix(in srgb,var(--amber) 30%,transparent) 0 2px,transparent 2px 8px);border-radius:8px}
.band p{margin-top:16px;color:var(--muted);font-family:'Caveat',cursive;font-size:28px;font-weight:600}

footer{position:relative;padding:40px 0 44px;margin-top:20px}
footer::before{content:"";position:absolute;left:24px;right:24px;top:0;border-top:2px solid var(--line);filter:url(#wobble)}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.foot p{margin-bottom:6px}
.brand-line{font-weight:700;color:var(--ink);font-size:18px}
.brand-line .hand{display:inline;font-size:28px;transform:none}
.foot a:hover{color:var(--amber)}
.legal li{margin-bottom:4px}
.tel{margin-top:12px}

@media(max-width:900px){
  .grid3,.hero-index{grid-template-columns:1fr 1fr}
  .bricks{grid-template-columns:1fr 1fr}
  .bricks .card::after{display:none}
  .community{grid-template-columns:1fr}
}
@media(max-width:720px){
  .grid3,.bricks,.hero-index,.faq{grid-template-columns:1fr}
  .grid3{gap:20px}
  .hero-index{gap:14px}
  .community{padding:28px 22px}
  .community .side{padding-top:6px}
  .card{padding:22px 20px}
  .control{font-size:28px}
  .band p{font-size:25px}
  .cta{font-size:22px}
}
@media(max-width:400px){
  .container{padding:0 18px}
  .hero-index a{padding:14px}
  main>section+section::before,footer::before{left:18px;right:18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .grid3>.card.reveal:nth-child(odd),.js .faq>.card.reveal:nth-child(odd){transform:rotate(-.4deg)}
  .js .grid3>.card.reveal:nth-child(even),.js .faq>.card.reveal:nth-child(even){transform:rotate(.35deg)}
  .card::before{clip-path:none}
  .bricks .card::after{clip-path:inset(0)}
  h1 em::after{clip-path:inset(0)}
  .under path,.crayon .s{stroke-dashoffset:0}
  .crayon .h{opacity:.55}
  .crayon .pop,.crayon .dot{opacity:1;transform:none}
  .crayon .m{opacity:.9}
  .crayon .ring,.crayon .smoke{opacity:0}
}