/* Creionul Vesel — aspect de carte de colorat: contur gros de tuș, umbră decalată, galben de creion. */
@font-face{font-family:"Baloo 2";font-weight:700;font-display:swap;src:url("../fonts/baloo-2-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Baloo 2";font-weight:700;font-display:swap;src:url("../fonts/baloo-2-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url("../fonts/baloo-2-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url("../fonts/baloo-2-latin-ext-800-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Nunito";font-weight:500;font-display:swap;src:url("../fonts/nunito-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Nunito";font-weight:500;font-display:swap;src:url("../fonts/nunito-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url("../fonts/nunito-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url("../fonts/nunito-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url("../fonts/nunito-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url("../fonts/nunito-latin-ext-800-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}

:root{
  color-scheme: light;
  --paper:#ffffff;
  --paper-2:#fbf8ef;
  --ink:#1d1d1b;
  --ink-soft:#4f4c44;
  --pencil:#f2c230;
  --pencil-soft:#fdf1c4;
  --toamna:#b5521b; --toamna-t:#fbeee4;
  --iarna:#1f5fa0;  --iarna-t:#e7f0fa;
  --fructe:#2f7d2b; --fructe-t:#e8f3e5;
  --display:"Baloo 2","Comic Sans MS","Trebuchet MS",sans-serif;
  --body:"Nunito","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --line:3px solid var(--ink);
  --shadow:5px 5px 0 var(--ink);
  --r:18px;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:500;font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--pencil)}
:focus-visible{outline:3px solid var(--iarna);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.35rem)}
h3{font-size:1.35rem}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--body);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.lead{font-size:1.2rem;color:var(--ink-soft);max-width:36em}
.prose{max-width:42em;display:flex;flex-direction:column;gap:1rem}
.prose h2{margin-top:1.2rem;font-size:1.6rem}
.prose ul{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:.4rem}

/* antet */
.site-head{border-bottom:var(--line);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1}
.logo svg{width:46px;height:46px;flex:none}
.nav{display:flex;gap:6px 18px;flex-wrap:wrap;font-weight:700}
.nav a{text-decoration:none;padding:8px 2px;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--pencil)}

/* butoane */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 22px;border:var(--line);border-radius:999px;background:var(--pencil);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.15rem;text-decoration:none;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:var(--paper)}
.btn svg{width:22px;height:22px}

/* erou */
.hero{background:var(--paper-2);border-bottom:var(--line);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding-block:56px}
.hero-text{display:flex;flex-direction:column;gap:20px}
.hero-text h1 em{font-style:normal;background:linear-gradient(transparent 60%,var(--pencil) 60%)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.stack{position:relative;height:430px}
.stack a{position:absolute;width:56%;border:var(--line);border-radius:10px;box-shadow:var(--shadow);background:#fff;overflow:hidden;transition:transform .2s}
.stack a:nth-child(1){left:0;top:30px;transform:rotate(-7deg)}
.stack a:nth-child(2){left:22%;top:0;transform:rotate(2deg);z-index:2}
.stack a:nth-child(3){right:0;top:46px;transform:rotate(8deg)}
.stack a:hover{z-index:3;transform:rotate(0) scale(1.03)}

/* secțiuni */
.section{padding-block:56px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px 24px;flex-wrap:wrap;margin-bottom:28px}
.section-head p{color:var(--ink-soft);max-width:34em}
.band{background:var(--paper-2);border-block:var(--line)}

.learn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.learn div{display:flex;flex-direction:column;gap:10px}
.learn svg{width:64px;height:64px}
.learn p{color:var(--ink-soft)}

.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cat{display:flex;flex-direction:column;border:var(--line);border-radius:var(--r);box-shadow:var(--shadow);background:var(--t);text-decoration:none;overflow:hidden}
.cat-imgs{display:flex;gap:10px;padding:18px 18px 0;height:190px;overflow:hidden}
.cat-imgs img{width:calc(33.33% - 7px);border:2px solid var(--ink);border-radius:6px;background:#fff}
.cat-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;background:var(--paper);border-top:var(--line);flex:1}
.cat-body h3{color:var(--c)}
.cat-body span{font-weight:700;color:var(--ink-soft);font-size:.95rem}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.card{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.card .thumb{border:var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.card:hover .thumb{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.card h3{font-size:1.2rem}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.8rem;font-weight:800;padding:2px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--paper)}
.tag.c{background:var(--t)}

.note{border:var(--line);border-radius:var(--r);background:var(--pencil-soft);padding:28px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.note svg{width:84px;height:84px}
.note div{display:flex;flex-direction:column;gap:8px}

/* pagină categorie / fișă */
.page-head{padding-block:40px 8px;display:flex;flex-direction:column;gap:12px}
.crumbs{font-weight:700;font-size:.92rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--ink-soft)}
.sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start;padding-block:24px 56px}
.sheet-img{border:var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;background:#fff}
.sheet-info{display:flex;flex-direction:column;gap:20px}
.facts{border:var(--line);border-radius:var(--r);overflow:hidden}
.facts div{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:12px;padding:12px 18px;border-top:2px solid var(--ink)}
.facts div:first-child{border-top:0}
.facts dt{font-weight:800}
.facts dd{margin:0}
.small{font-size:.95rem;color:var(--ink-soft)}

/* subsol */
.site-foot{border-top:var(--line);background:var(--ink);color:#f5f3ec}
.site-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:32px}
.site-foot a{color:#f5f3ec}
.site-foot nav{display:flex;gap:8px 20px;flex-wrap:wrap;font-weight:700}

@media (max-width:900px){
  .hero .wrap,.sheet{grid-template-columns:minmax(0,1fr)}
  .stack{height:360px;max-width:520px}
  .cats,.learn{grid-template-columns:minmax(0,1fr)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .grid{gap:16px}
  .stack{height:280px}
  .note{grid-template-columns:minmax(0,1fr)}
  .facts div{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.site-head,.site-foot{display:none}}
@media (max-width:900px){.sheet-info{order:-1}}