/* SitSquare: calm, warm, quiet. Palette is sampled from the hero illustration's
   cream wall (#fdf0e2). Colour only carries meaning on the dots:
   green = legs square, orange = crossed. Text colours are AAA (>=7:1). */
:root{
  --bg:#fdf0e2; --bg-alt:#fef7ee; --card:#fffaf3;
  --fg:#33271f; --muted:#5a4a3e; --line:#ecd9c3; --link:#0a5280;
  --ok:#34c759; --hot:#ff9500; --shadow:0 18px 50px -20px rgba(120,72,24,.35);
  --bs-body-font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#1d1611; --bg-alt:#241c16; --card:#2b221b;
  --fg:#f7ecdf; --muted:#d3c1ae; --line:#41342a; --link:#8fcdf0;
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
}}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--bg);color:var(--fg);font-size:1.0625rem;line-height:1.6}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
a:focus-visible,summary:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
p{text-wrap:pretty}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--card);padding:.5rem .9rem;border-radius:8px;z-index:10}
.skip:focus{left:.5rem}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:40rem;margin:0 auto;padding:0 1.25rem}
.muted{color:var(--muted)}
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem}

nav.top{display:flex;align-items:center;gap:.6rem;padding:1.5rem 0}
nav.top img{width:36px;height:36px}
nav.top span{font-weight:600;font-size:1.125rem;letter-spacing:-.01em}

.hero{text-align:center;padding:3rem 0 5rem}
.hero h1{font-size:clamp(2.75rem,8vw,5rem);font-weight:700;letter-spacing:-.035em;margin-bottom:1.25rem}
.hero .lead{font-size:clamp(1.15rem,2.4vw,1.45rem);color:var(--muted);max-width:34rem;margin:0 auto 2rem;line-height:1.4}
.badge-cta{display:inline-block}
.badge-cta img{height:56px;width:auto;display:block}

.art{margin:0}
.art img{width:100%;height:auto;display:block;border-radius:22px;box-shadow:var(--shadow)}
.art figcaption{margin-top:.9rem;font-size:.9375rem;color:var(--muted)}
.hero-img{margin-top:3.5rem}

section{padding:5.5rem 0}
section.alt{background:var(--bg-alt)}
section h2{font-size:clamp(1.9rem,4.5vw,2.6rem);margin-bottom:1.25rem}
section p.big{font-size:1.25rem;line-height:1.5}

.steps{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.5rem}
.steps b{display:block;font-size:1.125rem;margin-bottom:.35rem}
.steps .n{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--bg);border:1px solid var(--line);font-size:.875rem;font-weight:600;margin-bottom:.9rem}

.menubar{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:center;margin-top:2.5rem}
@media(min-width:48rem){.menubar{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
.menubar .shots{display:flex;gap:1.25rem;justify-content:center}
.menubar figure{margin:0;flex:1 1 0;max-width:15rem}
.menubar img{width:100%;height:auto;display:block}
.menubar figcaption{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-top:.8rem;font-size:.9375rem}

.poses{display:grid;gap:1.75rem 1.25rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));margin-top:2.5rem}
.poses img{width:100%;height:auto;display:block;border-radius:14px}
.poses figcaption{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;font-size:.9375rem}
.dot{width:.6rem;height:.6rem;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)}.dot.hot{background:var(--hot)}

ul.plain{padding-left:1.1rem}ul.plain li{margin-bottom:.5rem}

details{border-bottom:1px solid var(--line);padding:1.1rem 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-weight:400}
details[open] summary::after{content:"\2212"}
details p{margin:.7rem 0 0;color:var(--muted)}

.final{text-align:center;padding-bottom:6rem}
.final .art{max-width:44rem;margin:0 auto 2.5rem}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;font-size:.875rem;color:var(--muted)}
footer a{color:var(--muted);margin-right:1.25rem;text-decoration:underline}