/* Shared reset + tokens + structural defaults for so-* components. Each prototype restyles on top. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
h1,h2,h3,p,figure,fieldset{margin:0}
[hidden]{display:none!important}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
:focus-visible{outline:2px solid var(--focus,#e77500);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:8px 12px;z-index:999}
.skip:focus{left:8px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.5rem,1rem + 4vw,5rem);
  --text-hero:clamp(3rem,.5rem + 7vw,8rem);
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;--s32:8rem;
  --orange:#e77500;--orange-deep:#c25f00;
}

/* ---- form structure ---- */
.so-form{display:grid;gap:var(--s4)}
.so-row--2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
@media (max-width:480px){.so-row--2{grid-template-columns:1fr}}
.so-field{display:grid;gap:var(--s1);align-content:start}
.so-field label,.so-field legend{font-size:var(--text-sm);font-weight:600}
.so-field label b,.so-field legend b{color:var(--orange);font-weight:700}
.so-opt{display:block;font-weight:400;opacity:.7;font-size:var(--text-xs)}
.so-field input,.so-field textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--line,#cfcac0);border-radius:var(--r,6px);background:var(--field,#fff);min-height:44px}
.so-field textarea{resize:vertical;min-height:88px}
.so-field.is-invalid input{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.so-hint{font-size:var(--text-xs);opacity:.65}
.so-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
.so-chip{position:relative}
.so-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.so-chip span{display:inline-flex;align-items:center;min-height:36px;padding:0 .8rem;border:1px solid var(--line,#cfcac0);border-radius:999px;font-size:var(--text-sm);background:var(--field,#fff);transition:background .15s,border-color .15s,color .15s}
.so-chip input:checked+span{background:var(--chip-on,#1d1d1b);color:var(--chip-on-text,#fff);border-color:var(--chip-on,#1d1d1b)}
.so-chip input:focus-visible+span{outline:2px solid var(--focus,#e77500);outline-offset:2px}
.so-check{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--text-sm);cursor:pointer}
.so-check input{width:20px;height:20px;margin:.1rem 0 0;flex:none;accent-color:var(--orange)}
.so-submit{min-height:52px;padding:0 var(--s6);border-radius:var(--r,6px);background:var(--orange);color:#fff;font-weight:700;font-size:var(--text-base);transition:transform .15s,background .15s}
.so-submit:hover{background:var(--orange-deep);transform:translateY(-1px)}
.so-fine{font-size:var(--text-xs);opacity:.65;line-height:1.4}
.so-error{color:#b3261e;font-size:var(--text-sm);font-weight:600}
.so-success{display:grid;gap:var(--s2);text-align:left}
.so-success__kicker{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.so-success__num{font-size:var(--text-3xl);line-height:1;font-weight:700;color:var(--orange)}
.so-success__msg{font-size:var(--text-base);margin-top:var(--s2)}
.so-share{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.so-share__btn{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s4);border:1px solid var(--line,#cfcac0);border-radius:999px;font-size:var(--text-sm);text-decoration:none;font-weight:600;background:var(--field,#fff);transition:background .15s}
.so-share__btn:hover{background:var(--field-hover,#f0ece4)}

/* ---- walls ---- */
.so-card{break-inside:avoid}
.so-card__text{margin:0}
.so-card__meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--text-xs);margin-top:var(--s3)}
.so-card__name{font-weight:700}
.so-card.is-fresh{animation:so-pop .6s ease-out}
@keyframes so-pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
.so-empty{opacity:.7;font-style:italic}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].in{opacity:1;transform:none}