/* Huojula: shared look for huojula.fi. Dunba's palette and fonts (dunba/app/globals.css); muted text darkened to #6e695f for WCAG AA. */
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
:root{
 --paper:#f8f5ee;--surface:#fffdf8;--ink:#302d28;--muted:#6e695f;--line:#e2ddd3;
 --purple:#776181;--orange:#cb6748;--yellow:#dfa650;--focus:#776181;
 --dunba:#776181;--dunba-cta:#776181;--dunba-tint:#eee7f0;
 --mikado:#cb6748;--mikado-cta:#b5573a;--mikado-tint:#f8e8dd;
 --klapi:#b0832e;--klapi-cta:#8a6420;--klapi-tint:#f5ead2;
 --cta-text:#fff;--shadow:0 8px 25px #6c543610;--shadow-hover:0 12px 30px #6c54361f;
 color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
 --paper:#1b1916;--surface:#24211d;--ink:#f3efe7;--muted:#a8a196;--line:#3a352f;--focus:#dfa650;
 --dunba:#a893b3;--dunba-cta:#a893b3;--dunba-tint:#342d38;
 --mikado:#e0866a;--mikado-cta:#e0866a;--mikado-tint:#3d2a22;
 --klapi:#dfa650;--klapi-cta:#dfa650;--klapi-tint:#3a3020;
 --cta-text:#1b1916;--shadow:0 6px 18px #0006;--shadow-hover:0 10px 26px #0008;
}}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:400 15px/1.5 'DM Sans',Arial,sans-serif;padding:clamp(10px,2vh,36px) clamp(16px,4vw,32px) 6px;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
main{width:100%;max-width:820px;margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center}

/* Wordmark: Dunba's three-block mark, gently wobbling. */
.brand{display:inline-flex;align-items:center;text-decoration:none;font:700 30px 'Space Grotesk',Arial,sans-serif;letter-spacing:-1.4px;color:var(--ink)}
.brand-dot{color:var(--orange)}
.brand-mark{position:relative;display:inline-block;width:32px;height:32px;margin-right:10px}
.brand-mark i{position:absolute;left:6px;bottom:2px;width:19px;height:8px;border-radius:2px;background:var(--purple);transform-origin:50% 100%;animation:sway 4.8s ease-in-out infinite}
.brand-mark i:nth-child(2){left:8px;bottom:12px;background:var(--yellow);--tilt:-12deg;--sway:2.4deg;animation-delay:-.4s}
.brand-mark i:nth-child(3){left:11px;bottom:22px;width:12px;background:var(--orange);--tilt:13deg;--sway:4deg;animation-delay:-.8s}
@keyframes sway{0%,100%{transform:rotate(calc(var(--tilt,0deg) - var(--sway,1deg)))}50%{transform:rotate(calc(var(--tilt,0deg) + var(--sway,1deg)))}}

h1{font:600 clamp(1.75rem,1.4rem + 1.6vw,2.6rem)/1.1 'Space Grotesk',Arial,sans-serif;letter-spacing:-.035em;margin-top:8px}
.quip{color:var(--muted);font-size:clamp(.95rem,.9rem + .25vw,1.1rem);margin-top:4px;min-height:1.5em}
.promise{max-width:52ch;margin:clamp(8px,1.4vh,22px) 0 clamp(10px,1.8vh,28px);padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:clamp(.86rem,.82rem + .2vw,.98rem)}

.cards{width:100%;display:grid;gap:clamp(8px,1.4vh,20px);text-align:left}
@media (min-width:680px){.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.card{display:flex;flex-direction:column;gap:6px;padding:clamp(12px,2vw,22px);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:13px;background:var(--surface);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .16s,box-shadow .16s,border-color .16s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--accent)}
.card.dunba{--accent:var(--dunba);--cta:var(--dunba-cta);--tint:var(--dunba-tint)}
.card.mikado{--accent:var(--mikado);--cta:var(--mikado-cta);--tint:var(--mikado-tint)}
.card.klapi{--accent:var(--klapi);--cta:var(--klapi-cta);--tint:var(--klapi-tint)}
.card-img{display:block;width:100%;height:auto;aspect-ratio:600/316;object-fit:cover;border-radius:9px;background:var(--tint);margin-bottom:4px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-title{font:600 1.35rem 'Space Grotesk',Arial,sans-serif;letter-spacing:-.02em}
.card-host{font-size:.78rem;color:var(--muted)}
.card-status{align-self:flex-start;padding:2px 9px;border-radius:6px;background:var(--tint);font-size:.78rem;font-weight:600}
.card-desc{color:var(--muted);font-size:.92rem;line-height:1.4}
.card-cta{margin-top:auto;padding:9px 14px;border-radius:7px;background:var(--cta);color:var(--cta-text);text-align:center;font-weight:600;font-size:.92rem}
/* Phone: three cards fit one screen. The call to action shrinks to a pill beside the status. */
@media (max-width:679px){.card-img{display:none}.card{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:9px 14px}.card-head,.card-desc{grid-column:1/-1}.card-desc{font-size:.86rem;grid-row:3}.card-status{grid-row:2;align-self:center;justify-self:start}.card-cta{grid-row:2;margin:0;padding:4px 12px;font-size:.82rem}}

footer{width:100%;max-width:820px;margin:clamp(10px,1.6vh,32px) auto 0;padding-top:8px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.8rem}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;margin-top:2px}
.links a,.links summary{display:inline-block;padding:8px 4px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
details{display:contents}
summary{list-style:none}summary::-webkit-details-marker{display:none}
.feedback{flex-basis:100%;max-width:420px;margin:6px auto 4px;text-align:left;display:grid;gap:8px}
.feedback label{display:grid;gap:3px;font-size:.8rem;color:var(--muted)}
.feedback textarea,.feedback input{font:inherit;font-size:.9rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.feedback textarea{min-height:80px;resize:vertical}
.feedback button{font:inherit;font-weight:600;padding:9px 14px;border:0;border-radius:7px;background:var(--dunba-cta);color:var(--cta-text);cursor:pointer}
.feedback button:disabled{opacity:.5;cursor:not-allowed}
.feedback p{font-size:.75rem}
.english{flex-basis:100%;max-width:520px;margin:6px auto 4px;text-align:left;font-size:.85rem;line-height:1.5;color:var(--ink)}
.english p{margin:0 0 8px}
/* Short English summary: a small button in the top corner that opens a panel, so it costs no height on the page. */
.lang{display:block;position:absolute;top:clamp(10px,2vh,36px);right:clamp(16px,4vw,32px);z-index:5}
.lang summary{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.8rem;font-weight:600;cursor:pointer}
.lang .english{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,calc(100vw - 32px));margin:0;padding:14px 16px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-hover)}
.english h2{font:600 1.05rem 'Space Grotesk',Arial,sans-serif;margin:0 0 6px}

/* Story page */
.story{max-width:640px;margin:0 auto;text-align:left;align-items:stretch}
.story .brand{align-self:center}
.story h1{margin:18px 0 12px}
.story p{margin:0 0 12px;line-height:1.65}
.story h2{margin:22px 0 8px;font-size:1.15rem}
.story ul{margin:0 0 12px;padding-left:1.2em;line-height:1.65}
.story li{margin:0 0 6px}
.story img{display:block;width:100%;height:auto;margin:20px 0;border-radius:14px;border:1px solid var(--line)}
.back{display:inline-block;margin-top:6px;font-weight:600}

@media (prefers-reduced-motion:reduce){.brand-mark i{animation:none;transform:rotate(var(--tilt,0deg))}.card{transition:none}.card:hover{transform:none}}

/* Site notice from /status.json. */
.site-notice{margin:16px 0 0;padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:8px;background:var(--surface);font-size:15px;line-height:1.45}
.site-notice[hidden]{display:none}