/* dogesites.com: SI and a few choices (mobile first, one column) */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fffaf0;color:#17211b;font:17px/1.5 "DM Sans",system-ui,-apple-system,sans-serif;overflow-x:clip}
a{color:inherit}
h1,h2{font-family:"Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em;line-height:1.12;margin:0}
h1{font-size:clamp(30px,8.5vw,46px)}
h2{font-size:clamp(22px,6vw,30px)}
.flow{max-width:1080px;margin:0 auto}
/* SI stays in view: a sticky peek on phones */
.si{position:sticky;top:0;z-index:5;background:linear-gradient(#fffaf0 82%,rgba(255,250,240,0))}
.stage-slot{height:34svh;min-height:200px;max-height:320px}
.talk{padding:0 16px calc(40px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.turn{padding:8px 0 20px;scroll-margin-top:clamp(208px,calc(34svh + 8px),328px)}
.turn--later{display:none;padding-top:28px}
.turn--later:target,.turn--later.is-open{display:block}
.turn--later:last-child.is-open,.turn--later:last-child:target{min-height:60svh}
.js .turn--later:target:not(.is-open){display:none}
.forks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.fork{display:grid;gap:2px;min-height:76px;padding:16px 20px;border-radius:16px;background:#fff;border:1.5px solid rgba(23,33,27,.16);text-decoration:none;transition:border-color .15s,background-color .15s,transform .15s}
.fork strong{font:700 19px "Space Grotesk",sans-serif}
.fork span{font-size:14.5px;color:#5b665f}
.fork:hover{border-color:#ff7138;transform:translateY(-1px)}
.fork[aria-current="true"]{background:#ffcf40;border-color:#ffcf40}
.fork[aria-current="true"] span{color:#3d3410}
.cards{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.card{display:grid;gap:2px;min-height:68px;padding:14px 18px;border-radius:16px;background:#fff;border:1.5px solid rgba(23,33,27,.16);text-decoration:none;transition:border-color .15s,transform .15s}
.card strong{font:700 17px "Space Grotesk",sans-serif;color:#c2560f}
.card span{font-size:14.5px;color:#45514a}
.card:hover{border-color:#ff7138;transform:translateY(-1px)}
.textbtn--quiet{font-weight:500;font-size:14px}
.bubble{position:relative;background:#fff;border:1px solid rgba(23,33,27,.12);border-radius:20px;padding:16px 18px;margin:0 0 12px;max-width:100%}
.bubble:first-child::before{content:"";position:absolute;top:-8px;left:28px;width:14px;height:14px;background:#fff;border-left:1px solid rgba(23,33,27,.12);border-top:1px solid rgba(23,33,27,.12);transform:rotate(45deg)}
.bubble p{margin:6px 0 0;color:#45514a}
.chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;min-height:50px;padding:12px 20px;border-radius:16px;background:#fff;border:1.5px solid rgba(23,33,27,.16);font:700 16px "Space Grotesk",sans-serif;text-decoration:none;cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s}
.chip:hover{border-color:#ff7138;transform:translateY(-1px)}
.chip[aria-current="true"]{background:#ffcf40;border-color:#ffcf40}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:15px 30px;border-radius:16px;background:#ff7138;color:#fff;font:700 17px "DM Sans",sans-serif;text-decoration:none;border:0;cursor:pointer;width:100%}
.handoff{margin:6px 0 0}
.again{margin:12px 0 0;text-align:center}
.textbtn{display:inline-flex;align-items:center;background:none;border:0;padding:10px 6px;min-height:44px;font:600 15px "DM Sans",sans-serif;color:#45514a;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fork:focus-visible,.card:focus-visible,.chip:focus-visible,.btn:focus-visible,.textbtn:focus-visible,.foot a:focus-visible{outline:3px solid #ff7138;outline-offset:3px}
h2:focus{outline:none}
.foot{padding:20px 16px calc(20px + env(safe-area-inset-bottom));text-align:center;font-size:14px;color:#5b665f}
.foot a{font-weight:700;text-decoration:none}
.turn.is-in{animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:900px){
  .flow{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:24px;padding-top:24px}
  .si{top:24px;background:none}
  .stage-slot{height:min(72svh,600px);max-height:none}
  .talk{margin:0;padding-top:12svh}
  .turn{scroll-margin-top:24px}
  .btn{width:auto}
  .again{text-align:left}
}
@media (prefers-reduced-motion:reduce){.chip,.fork,.card{transition:none}.turn.is-in{animation:none}}