:root{--paper:#FFFBEF;--ink:#141414;--muted:#5b5b5b;--orange:#FF8A00;--pink:#FF6FB5;--green:#27AE60;--purple:#9B51E0;--blue:#2F80ED;--red:#EB3B3B;--teal:#00AAAA;--yellow:#FFD600;--sky:#E1F2FF;--card:#fff;
--sketch:255px 15px 225px 15px/15px 225px 15px 255px;--sketch2:15px 225px 15px 255px/255px 15px 225px 15px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 "Nunito",system-ui,sans-serif;overflow-wrap:break-word}
.am,[lang=am]{font-family:"Noto Sans Ethiopic","Kefa",sans-serif}
h1,h2,h3,.hand{font-family:"Patrick Hand","Chalkboard SE","Comic Sans MS",cursive;font-weight:400;line-height:1.1;margin:0 0 .4em}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}h2{font-size:clamp(2rem,4.5vw,3rem)}h3{font-size:1.7rem}
a{color:var(--blue)}img{max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.sketch{background:var(--card);border:3px solid var(--ink);border-radius:var(--sketch);box-shadow:4px 5px 0 var(--ink)}
.btn{display:inline-flex;align-items:center;gap:.4em;font:1.25rem "Patrick Hand",cursive;padding:.45em 1.1em;border:3px solid var(--ink);border-radius:var(--sketch2);box-shadow:3px 4px 0 var(--ink);text-decoration:none;color:var(--ink);background:var(--yellow);cursor:pointer;transition:transform .1s}
@media (hover:hover){.btn:hover{transform:translate(-1px,-2px) rotate(-1deg)}}.btn{min-height:44px;-webkit-tap-highlight-color:transparent}.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.yt{background:#ff4d4d;color:#fff}.btn.ig{background:var(--pink);color:#fff}.btn.tt{background:#111;color:#fff}.btn.alt{background:#fff}
/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:2rem "Patrick Hand",cursive}
.brand img{width:52px;height:52px;border-radius:50%;border:3px solid var(--ink)}
.nav ul{display:flex;gap:6px 18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav ul a{display:inline-flex;align-items:center;min-height:44px;font:1.35rem "Patrick Hand",cursive;color:var(--ink);text-decoration:none;padding:2px 8px;border-radius:8px}
.nav ul a:hover,.nav ul a[aria-current]{background:var(--yellow)}
/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:24px 0 40px}
.hero p.lead{font-size:1.3rem;max-width:34em}
.hero .art{position:relative;min-height:380px;background:radial-gradient(circle at 60% 50%,#fff 0 38%,transparent 39%),repeating-conic-gradient(from 0deg at 60% 50%,var(--yellow) 0 8deg,#FFC400 8deg 16deg);border:3px solid var(--ink);border-radius:var(--sketch);box-shadow:4px 5px 0 var(--ink);overflow:hidden}
.hero .art .fk{position:absolute;left:4%;bottom:2%;width:42%}.hero .art .lt{position:absolute;right:12%;top:14%;width:42%;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(-3deg)}}
.row{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.badge{display:inline-block;font:1.1rem "Patrick Hand",cursive;background:var(--pink);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:2px 12px;transform:rotate(-2deg)}
section{padding-block:36px}
.video{position:relative;aspect-ratio:16/9;overflow:hidden}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
/* fidel grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.tile{display:block;text-align:center;text-decoration:none;color:var(--ink);padding:10px 6px 8px;background:#fff;border:3px solid var(--ink);border-radius:var(--sketch);box-shadow:3px 4px 0 var(--ink);transition:transform .12s}
.tile:nth-child(even){border-radius:var(--sketch2)}@media (hover:hover){.tile:hover{transform:rotate(-3deg) scale(1.05)}}
.tile .g{font:700 3.4rem/1.1 "Noto Sans Ethiopic",sans-serif}.tile .n{font:1.2rem "Patrick Hand",cursive}.tile .s{font-size:.8rem;color:var(--muted)}
.tile.soon{opacity:.55;box-shadow:none;border-style:dashed}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.steps .sketch{padding:18px;text-align:center}.steps .e{font-size:2.6rem}
/* forms */
form.signup{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=email],input[type=text],textarea{font:1.1rem "Nunito",sans-serif;padding:.65em .9em;border:3px solid var(--ink);border-radius:12px 18px 10px 16px;background:#fff;min-width:0;flex:1 1 240px}
textarea{width:100%;min-height:120px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:.9rem;color:var(--muted);flex-basis:100%}
.msg{font:1.2rem "Patrick Hand",cursive;flex-basis:100%;min-height:1.4em}.msg.ok{color:var(--green)}.msg.err{color:var(--red)}
.callout{padding:28px;background:var(--sky)}
/* letter page */
.lhero{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}
.fam{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:16px 0}
.fam div{text-align:center;background:#fff;border:3px solid var(--ink);border-radius:var(--sketch2);padding:8px 2px}
.fam .g{font:700 clamp(1.8rem,5vw,3rem)/1.15 "Noto Sans Ethiopic",sans-serif}.fam .l{font:1.15rem "Patrick Hand",cursive}
.word{display:flex;gap:20px;align-items:center;padding:20px}.word img{width:160px}.word .am{font-size:2.6rem;font-weight:700}
.pn{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.soonbox{padding:30px;text-align:center;background:#fff}
/* shop */
.namer{padding:24px;display:grid;gap:14px}
.namer .out{font:900 clamp(2.6rem,8vw,4.5rem)/1.1 "Noto Sans Ethiopic",sans-serif;text-align:center;color:var(--orange);-webkit-text-stroke:2px var(--ink);min-height:1.2em;outline:none}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.prod{padding:14px;text-align:center}.prod .mock{position:relative}.prod .mock img{display:block;margin:0 auto}
.prod .nm{position:absolute;left:50%;transform:translate(-50%,-50%);font:900 1.9rem/1 "Noto Sans Ethiopic",sans-serif;color:var(--ink);white-space:nowrap;max-width:62%;overflow:hidden;text-overflow:clip}
.prod .price{font:1.4rem "Patrick Hand",cursive}
footer{margin-top:40px;border-top:3px dashed var(--ink);padding-block:26px 40px;font-size:.95rem}
footer .cols{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.prose{max-width:760px}.prose h2{margin-top:1.2em}
/* utility classes (replace inline style="" attributes so the CSP needs no 'unsafe-inline') */
.center{text-align:center}.pink{color:var(--pink)}.lg{font-size:1.25rem}.footbrand{font-size:1.6rem}
.c0{color:var(--orange)}.c1{color:var(--pink)}.c2{color:var(--green)}.c3{color:var(--purple)}.c4{color:var(--blue)}.c5{color:var(--red)}.c6{color:var(--teal)}
.tilt{padding:6px;transform:rotate(2deg)}.word .wl{font-size:1.4rem}.word .wm{font-size:1.3rem}.am.twin{font-size:1.4rem}
.namer label{font-size:1.5rem}.namer .note{text-align:center;margin:0;color:var(--muted)}
.prod .nm.tee{top:48%}.prod .nm.mug{top:52%}.prod .nm.bib{top:62%}.prod .nm.cap{top:68%}.prod .nm.big{font-size:2.6rem}
/* touch targets + focus */
.flinks a,a.back{display:inline-block;padding:10px 4px;min-height:44px}
:focus-visible{outline:3px dashed var(--blue);outline-offset:3px}
.two>*,.hero>*,.lhero>*{min-width:0}
@media (max-width:820px){.lhero img{max-width:190px}.hero,.two,.lhero{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.hero .art{min-height:300px}.fam{grid-template-columns:repeat(4,1fr)}.word{flex-direction:column;text-align:center}}
@media (max-width:480px){section{padding-block:26px}.callout{padding:18px}.brand{font-size:1.7rem}.nav ul{gap:0 6px}.nav ul a{font-size:1.2rem;padding:2px 6px}.hero .art{min-height:250px}.word{padding:14px}.steps .sketch{padding:12px}h3{font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}