/* Layout: one column, bold black type like the M logo, Mivo green + sun yellow as the only colors, product photos carry the rest */
:root{
  --paper:#f6f6f1;
  --card:#ffffff;
  --ink:#141414;
  --muted:#565a52;
  --line:#dcdcd2;
  --mivo:#5fa834;
  --mivo-deep:#3f7a1f;
  --sun:#f7c41c;
  --display:"Archivo Black","Arial Black",Impact,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@font-face{font-family:"Archivo Black";src:url(fonts/archivo-black-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--mivo);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font:800 .78rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mivo-deep)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 1.35rem/1 var(--display)}
.brand img{width:44px;height:44px}
.nav{display:flex;align-items:center;gap:clamp(12px,2.5vw,28px);font-weight:700}
.nav a{text-decoration:none}
.nav a:hover{color:var(--mivo-deep)}
.nav .ig{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid var(--ink);border-radius:999px}
.nav .ig:hover{background:var(--ink);color:var(--paper)}
@media (max-width:640px){.nav .hide-s{display:none}}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:800;text-decoration:none;border:2px solid var(--ink);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.light{background:transparent}
.btn.sun{background:var(--sun);border-color:var(--sun);color:var(--ink)}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(40px,7vw,88px)}
.hero h1{font-size:clamp(2.3rem,5.6vw,4.4rem)}
.hero h1 span{white-space:nowrap}
.hero h1 span{color:var(--mivo)}
.hero .lead{font-size:1.2rem;color:var(--muted);max-width:34ch;margin-block:20px 28px}
.hero-art{position:relative;aspect-ratio:1;max-width:100%}
.hero-art .logo{width:78%;position:absolute;left:0;top:0;filter:drop-shadow(0 18px 30px rgba(20,20,20,.18))}
.hero-art .tile{position:absolute;width:44%;border-radius:18px;border:5px solid var(--card);box-shadow:0 12px 28px rgba(20,20,20,.16)}
.hero-art .t1{right:0;bottom:4%;transform:rotate(5deg)}
.hero-art .t2{right:8%;top:2%;width:30%;transform:rotate(-6deg)}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero-art{max-width:420px}}

/* sections */
section{padding-block:clamp(48px,7vw,88px)}
.head{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;max-width:640px}
.head h2{font-size:clamp(2rem,4.2vw,3rem)}
.head p{color:var(--muted)}
.band{background:var(--ink);color:var(--paper)}
.band .head p,.band .muted{color:#c9cbc2}
.band .eyebrow{color:var(--sun)}

/* books */
.books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.book{display:flex;flex-direction:column;background:#1f1f1f;border-radius:20px;overflow:hidden}
.book .cover{aspect-ratio:4/5;background:var(--card);display:flex;align-items:center;justify-content:center;overflow:hidden}
.book .cover img{width:100%;height:100%;object-fit:cover}
.book .cover.contain img{object-fit:contain;padding:18px}
.book .body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 24px;flex:1}
.book .tag{font:800 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
.book h3{font-size:1.35rem}
.book p{color:#c9cbc2;font-size:.98rem}
.book .btn{margin-top:auto;align-self:flex-start;padding:11px 18px;font-size:.95rem}
@media (max-width:900px){.books{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.books{grid-template-columns:1fr}}

/* ideas */
.ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.idea{margin:0;background:var(--card);border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.idea img{aspect-ratio:1;width:100%;object-fit:cover}
.idea figcaption{padding:14px 16px 16px;display:flex;flex-direction:column;gap:2px}
.idea b{font-weight:800}
.idea span{color:var(--muted);font-size:.92rem}
.note{margin-top:22px;padding:14px 18px;border-radius:14px;background:var(--card);border:1px dashed var(--line);color:var(--muted);font-size:.95rem}
@media (max-width:760px){.ideas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.ideas{gap:12px}.idea figcaption{padding:10px 12px 12px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{counter-increment:s;padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.steps li::before{content:counter(s);font:400 2.4rem/1 var(--display);color:var(--mivo)}
.steps b{font-size:1.1rem}
.steps span{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cbox{padding:28px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
.cbox.green{background:var(--mivo);border-color:var(--mivo);color:var(--ink)}
.cbox .big{font:400 clamp(1.3rem,2.6vw,1.8rem)/1.15 var(--display);overflow-wrap:anywhere}
.cbox p{color:inherit;opacity:.85}
.cbox .btn{align-self:flex-start;margin-top:8px}
@media (max-width:700px){.contact{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:24px;color:var(--muted);font-size:.92rem}
footer nav{display:flex;gap:18px}

/* legal pages */
.legal{max-width:720px;padding-block:48px 72px}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:24px}
.legal h2{font-family:var(--body);font-weight:800;font-size:1.15rem;margin-top:28px;margin-bottom:6px;letter-spacing:0}
.legal p,.legal li{color:#2b2d28}
.legal ul{padding-left:1.2em}
.draft{background:var(--sun);padding:12px 16px;border-radius:12px;font-weight:700;margin-bottom:24px}