/* Reaguojam
   Maketas: kompaktiška viršutinė juosta; kompiuteryje kairėje lipni personažo kolona, dešinėje reakcijų srautas;
   kiekviena reakcija = kortelė: citatos blokas su antrašte (užuomazga) → atsakas (smūgis) → veiksmai. */
:root{
  --bg:#ECEAE4;
  --surface:#FFFFFF;
  --quote:#F4F2ED;
  --ink:#141414;
  --muted:#6A665F;
  --rule:#DEDAD2;
  --rust:#C2571F;
  --rust-ink:#FFFFFF;
  --display:"Anton", "Impact", "Arial Narrow", sans-serif;
  --body:"Public Sans", "Segoe UI", system-ui, sans-serif;
  --radius:16px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F0E0D; --surface:#1A1917; --quote:#23211E; --ink:#EEEAE3; --muted:#A39E95; --rule:#2E2B28;
    --rust:#E57A3E; --rust-ink:#141414; color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55;
  padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
a{color:inherit}
a:focus-visible, button:focus-visible{outline:2px solid var(--rust); outline-offset:3px}
.gutter, .top-in, .shell, .foot-in{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}

/* top bar */
.top{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule); padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:1080px; margin:0 auto; height:60px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-av{width:40px; height:40px; border-radius:50%; border:2px solid var(--rust); object-fit:cover; display:block}
.logo{font-family:var(--display); font-weight:400; font-size:1.55rem; line-height:1; text-transform:uppercase; letter-spacing:.01em}
.logo em{font-style:normal; color:var(--rust)}
.top-nav{display:flex; gap:18px}
.top-nav a{font-weight:700; font-size:.92rem; text-decoration:none; color:var(--muted)}
.top-nav a:hover{color:var(--ink)}

/* shell */
.shell{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:40px; padding-block:20px 40px}
.side{display:none}
.main{min-width:0; max-width:640px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:28px}

@media (min-width:980px){
  .shell{grid-template-columns:300px minmax(0,1fr); padding-block:36px 56px}
  .side{display:flex; flex-direction:column; gap:14px; position:sticky; top:96px; align-self:start}
  .side-dog{width:100%; height:auto; display:block; margin-bottom:4px}
  .side-tag{margin:0; font-family:var(--display); font-size:1.7rem; line-height:1.1; text-transform:uppercase}
  .side-bio{margin:0; color:var(--muted)}
  .side-box{border-top:3px solid var(--ink); padding-top:12px; font-size:.9rem}
  .side-box b{display:block; margin-bottom:2px}
  .side-box p{margin:0; color:var(--muted)}
  .main{margin:0}
  .main .intro{display:none}
}

/* intro (phone/tablet only) */
.intro{display:flex; flex-direction:column; gap:2px}
.intro-tag{margin:0; font-weight:800; font-size:1.02rem; line-height:1.35}
.intro-bio{margin:0; color:var(--muted); font-size:.9rem}
.intro-motto, .side-motto{margin:4px 0 0; font-style:italic; font-size:.9rem; color:var(--ink)}

/* day header */
.day-group{display:flex; flex-direction:column; gap:14px}
.day{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-weight:800; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-inline:4px}
.feed{display:flex; flex-direction:column; gap:14px}

/* card */
.post{background:var(--surface); border-radius:var(--radius); padding:16px 18px 12px; display:flex; flex-direction:column; gap:12px; min-width:0;
  box-shadow:0 1px 0 var(--rule)}
.quote{display:flex; flex-direction:column; gap:4px; background:var(--quote); border-left:3px solid var(--rust); border-radius:10px; padding:10px 12px; text-decoration:none}
.quote:hover .q-hl{text-decoration:underline; text-underline-offset:3px}
.q-src{display:flex; justify-content:space-between; gap:10px; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.q-go{letter-spacing:.04em; text-transform:none; font-weight:600}
.q-hl{font-weight:600; font-size:.95rem; line-height:1.35; text-wrap:pretty}
.maja{display:flex; align-items:center; gap:10px}
.mini{width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none}
.avatar-empty{display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); color:var(--rust); background:var(--quote)}
.who{display:flex; align-items:baseline; gap:8px; font-size:.95rem}
.when{color:var(--muted); font-size:.82rem; text-decoration:none}
.when:hover{text-decoration:underline}
.react{display:flex; flex-direction:column; gap:10px; font-size:1.12rem; line-height:1.5}
.react p{margin:0}
.react .punch{font-weight:800; font-size:1.24rem; line-height:1.35}
.actions{display:flex; gap:6px; border-top:1px solid var(--rule); padding-top:8px; margin-top:2px}
.act{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:.86rem; font-weight:700; color:var(--muted); background:transparent; border:0; border-radius:999px;
  padding:8px 12px; cursor:pointer; text-decoration:none; min-height:40px}
.act:hover{background:var(--quote); color:var(--ink)}
.act.ghost{margin-left:auto}

/* detail */
.post.detail .react{font-size:1.25rem}
.post.detail .react .punch{font-size:1.45rem}
.share{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:.9rem}
.share span{color:var(--muted); margin-right:4px}
.share a{font-weight:700; font-size:.88rem; padding:9px 16px; border-radius:999px; background:var(--ink); color:var(--bg); text-decoration:none}
.share a:hover{background:var(--rust); color:var(--rust-ink)}
.back{font-weight:700; text-decoration:none; color:var(--rust)}

/* about */
.about{background:var(--surface); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:12px}
.about h1{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:2.4rem; line-height:1; margin:0}
.about h2{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:1.35rem; margin:12px 0 0; letter-spacing:.02em}
.about p{margin:0; max-width:62ch}
.empty{color:var(--muted)}

/* footer */
.foot{border-top:1px solid var(--rule)}
.foot-in{max-width:1080px; margin:0 auto; padding-block:22px 32px; font-size:.82rem; color:var(--muted); display:flex; flex-direction:column; gap:6px}
.foot p{margin:0}
.foot nav{display:flex; gap:18px; flex-wrap:wrap; font-weight:700; margin-bottom:6px}
.foot nav a{text-decoration:none; color:var(--ink)}
.foot nav a:hover{color:var(--rust)}

@media (max-width:420px){
  .logo{font-size:1.35rem}
  .post{padding:14px 14px 10px}
  .react{font-size:1.06rem}
  .react .punch{font-size:1.16rem}
}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto} }

/* Klausk */
.ask-btn{background:var(--rust); color:var(--rust-ink) !important; padding:8px 14px; border-radius:999px}
.ask-btn:hover{filter:brightness(1.08)}
.side-cta, .intro-cta{font-weight:800; color:var(--rust); text-decoration:none}
.side-cta:hover, .intro-cta:hover{text-decoration:underline}
.intro-cta{margin-top:8px; font-size:.95rem}
.quote.ask{border-left-color:var(--ink)}
.q-src a.q-go{text-decoration:none; color:var(--rust)}
.askbox{background:var(--surface); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:12px}
.askbox h1{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:2.4rem; line-height:1; margin:0}
.askbox > p{margin:0; color:var(--muted); max-width:60ch}
.ask-form{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.ask-form label{font-weight:700; font-size:.88rem}
.ask-form label span{font-weight:400; color:var(--muted)}
.ask-form textarea, .ask-form input{font:inherit; font-size:1rem; color:var(--ink); background:var(--quote); border:1px solid var(--rule); border-radius:12px; padding:12px 14px; width:100%}
.ask-form textarea{resize:vertical; min-height:110px}
.ask-form textarea:focus, .ask-form input:focus{outline:2px solid var(--rust); outline-offset:1px; border-color:transparent}
.ask-row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.ask-nick{flex:1 1 220px; display:flex; flex-direction:column; gap:6px; min-width:0}
.ask-send{font:inherit; font-weight:800; font-size:1rem; background:var(--ink); color:var(--bg); border:0; border-radius:999px; padding:12px 22px; cursor:pointer; min-height:48px}
.ask-send:hover{background:var(--rust); color:var(--rust-ink)}
.ask-send:disabled{opacity:.6; cursor:default}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ask-note{margin:0; font-size:.8rem; color:var(--muted)}
.ask-msg{margin:0; font-weight:700; min-height:1.2em}
.ask-msg.ok{color:var(--rust)}
.ask-msg.err{color:#C0392B}
@media (prefers-color-scheme: dark){ .ask-msg.err{color:#F07060} }
@media (max-width:420px){ .top-nav{gap:10px} .ask-btn{padding:7px 11px; font-size:.85rem} .top-nav a:not(.ask-btn){display:none} }
.logo, .ask-btn{white-space:nowrap}
@media (max-width:420px){ .logo{font-size:1.2rem} .brand{gap:8px} .brand-av{width:34px; height:34px} }

.quote.cmt{border-left-color:var(--muted)}
.quote.cmt .q-hl{font-style:italic}
.q-about{font-size:.8rem; color:var(--muted); line-height:1.3}