/* You're Ducking Great — v4 (2026-11-02)
   The one-screen house, in the book's own dress: dark house ground,
   warm cream type, duck-yellow accent. Built on the same shell pattern
   as the Siw'eL Tunes console: the page lives inside a single
   viewport-height stage; every room is a collapsible numbered panel —
   a title row at rest in the index; opening a room steps the index
   aside and the content stands whole on one surface, under a slim bar
   with its number, name, and a way back. The footer rides the stage
   scroll as its last item.
   Design law: no long scrolling pages; nothing cut off, nothing
   unreachable. Without the script the page flows long and every panel
   body stands open — nothing is ever trapped behind a script. */

:root{
  --ground:#171208;
  --ground-2:#211a0e;
  --card:#241c10;
  --card-open:#2a2110;
  --card-edge:#3d2f16;
  --ink:#f6edd8;
  --ink-soft:#d9c9a3;
  --ink-faint:#a08d64;
  --duck:#ffd21f;
  --duck-hi:#ffe14d;
  --duck-deep:#f0a500;
  --accent-ink:#1c1503;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Verdana,Geneva,sans-serif;
  --head-h:52px;
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--duck)}
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--duck);
  outline-offset:3px;
}
h1,h2,h3,h4{line-height:1.15;margin:0}
h2{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:1rem}

.wrap{
  width:min(1080px,100% - 2.5rem);
  margin-inline:auto;
}

/* ================= ONE-SCREEN SHELL ================= */
/* The viewport shell engages only when the script is alive (html.js). */
html.js,html.js body{height:100%}
html.js body{display:flex;flex-direction:column;overflow:hidden}
main.stage{display:block}
html.js main.stage{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  gap:9px;
  padding:12px clamp(8px,2vw,22px) 14px;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--card-edge) transparent;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(255,210,31,.10), transparent 60%),
    radial-gradient(50rem 26rem at -10% 110%, rgba(240,165,0,.06), transparent 60%),
    var(--ground);
}

/* ---------- header ---------- */
.site-head{
  flex:none;position:relative;z-index:60;
  border-bottom:1px solid var(--card-edge);
  background:var(--ground-2);
  box-shadow:0 1px 0 rgba(255,210,31,.22),0 10px 30px rgba(0,0,0,.4);
}
.head-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  padding:.7rem 0;
}
.brand{
  color:var(--ink);
  font-weight:bold;
  font-size:1.15rem;
  text-decoration:none;
  letter-spacing:.02em;
}
.brand:hover{color:var(--duck-hi)}
.head-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.head-nav a{
  color:var(--ink-soft);
  text-decoration:none;
  font-size:.95rem;
}
.head-nav a:hover{color:var(--duck)}

/* ---------- shared bits ---------- */
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  color:var(--duck);
  margin:0 0 .8rem;
  font-family:var(--sans);
}
.btn{
  display:inline-block;
  padding:.8rem 1.4rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:bold;
  text-decoration:none;
  text-align:center;
}
.btn-duck{background:var(--duck);color:var(--accent-ink)}
.btn-duck:hover{background:var(--duck-deep)}
.btn-ghost{
  background:transparent;
  color:var(--duck);
  border:2px solid var(--duck);
}
.btn-ghost:hover{background:var(--duck);color:var(--accent-ink)}
.btn-wide{width:100%;margin:1.2rem 0 .4rem}

/* ---------- entrance ---------- */
.entrance{padding:.6rem 0 .2rem}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:2.2rem;
  align-items:center;
}
.entrance h1{
  font-size:clamp(2.3rem,6.5vw,3.8rem);
  letter-spacing:.01em;
  color:var(--ink);
}
.byline{font-size:1.2rem;margin:1rem 0 .5rem}
.byline strong{color:var(--duck)}
.promise{color:var(--ink-soft);font-size:1.05rem;max-width:34rem;margin:0}
.status-line{
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;
  margin:1.2rem 0 1.4rem;
}
.status-pill{
  background:var(--duck);
  color:var(--accent-ink);
  font-family:var(--sans);
  font-size:.8rem;font-weight:bold;
  padding:.3rem .8rem;border-radius:999px;
  text-transform:uppercase;letter-spacing:.08em;
}
.target{color:var(--ink-soft)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-fig{margin:0}
.hero-fig img{
  border-radius:var(--radius);
  border:1px solid var(--card-edge);
  width:100%;
}
.hero-fig figcaption,.flock-fig figcaption{
  color:var(--ink-faint);
  font-size:.9rem;
  margin-top:.6rem;
  font-style:italic;
}

/* ================= PANELS (the rooms) ================= */
main.stage{counter-reset:channel}
.panel{
  flex:none;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(180deg,var(--card-open),var(--card));
  border:1px solid var(--card-edge);border-radius:var(--radius);
  overflow:hidden;counter-increment:channel;
}
.panel.open{
  border-color:var(--duck-deep);
  box-shadow:inset 0 1px 0 rgba(255,210,31,.35),0 14px 34px rgba(0,0,0,.4);
}
.panel-h{margin:0;font-family:inherit}
.panel-head{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:none;border:0;cursor:pointer;color:var(--ink);
  padding:0 16px 0 0;min-height:var(--head-h);font:inherit;
}
.panel-head::before{
  content:counter(channel,decimal-leading-zero);
  flex:none;align-self:stretch;display:flex;align-items:center;
  padding:0 12px;margin-right:2px;
  font-family:var(--sans);
  font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--accent-ink);
  background:linear-gradient(180deg,var(--duck-deep),#9a6e0a);
  border-right:1px solid var(--card-edge);
}
.panel.open .panel-head::before{
  background:linear-gradient(180deg,var(--duck-hi),var(--duck));color:var(--accent-ink);
}
.ph-text{display:flex;flex-direction:column;gap:1px;padding:7px 0;min-width:0}
.ph-kicker{
  font-family:var(--sans);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.panel.open .ph-kicker{color:var(--duck)}
.ph-title{
  font-family:var(--serif);font-size:1.13rem;font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ph-state{
  margin-left:auto;flex:none;display:flex;align-items:center;gap:9px;
  font-family:var(--sans);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;
}
.ph-state::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--duck);border-bottom:2px solid var(--duck);
  transform:rotate(45deg);transition:transform .3s ease;margin-right:4px;
}
.panel.open .ph-state::after{transform:rotate(225deg)}
.ph-state .on{display:none;color:var(--duck)}
.panel.open .ph-state .on{display:inline}
.panel.open .ph-state .off{display:none}
.panel-body{padding:6px 0 26px}
html.js .panel-body{display:none}
/* An open room's body stands at natural height — the room's single
   surface (the stage) does any scrolling there is. */
html.js .panel.open .panel-body{
  display:block;flex:1 1 auto;min-height:0;overflow:visible;
  animation:panel-in .45s ease both;
}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel-body > .wrap{padding-top:14px}

/* ================= ROOMS ================= */
.room-bar{display:none}
body.in-room .panel{display:none}
body.in-room .panel.open{
  display:flex;flex:1 0 auto;overflow:visible;
}
body.in-room .panel.open .panel-h{display:none}
body.in-room .panel.open .room-bar{
  display:flex;align-items:center;gap:13px;
  position:sticky;top:0;z-index:6;
  min-height:var(--head-h);padding:0 14px 0 0;flex:none;
  background:linear-gradient(180deg,var(--card-open),var(--card));
  border-bottom:1px solid var(--duck-deep);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.room-num{
  flex:none;align-self:stretch;display:flex;align-items:center;
  padding:0 12px;margin-right:2px;
  font-family:var(--sans);
  font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--accent-ink);
  background:linear-gradient(180deg,var(--duck-hi),var(--duck));
  border-right:1px solid var(--card-edge);
}
.room-text{display:flex;flex-direction:column;gap:1px;padding:6px 0;min-width:0}
.room-kicker{
  font-family:var(--sans);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--duck);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.room-title{
  font-family:var(--serif);font-size:1.13rem;font-weight:600;line-height:1.2;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.room-back{
  margin-left:auto;flex:none;
  background:var(--ground-2);border:1px solid var(--card-edge);
  border-radius:8px;color:var(--ink);padding:8px 13px;
  font-family:var(--sans);font-size:.85rem;cursor:pointer;
}
.room-back:hover{border-color:var(--duck);color:var(--duck-hi)}

/* In a room, the entrance and the chapters head step aside with the index. */
body.in-room .entrance,body.in-room .house-head{display:none}

/* ---------- the flock (inside its room) ---------- */
.flock-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:2.2rem;
  align-items:center;
}
.flock-fig{margin:0}
.flock-fig img{border-radius:var(--radius);border:1px solid var(--card-edge);width:100%}
.flock-copy h3{font-size:1.5rem;margin-bottom:.6rem}
.flock-copy p{color:var(--ink-soft);font-size:1.06rem;max-width:34rem}
.flock-copy strong{color:var(--ink)}

/* ---------- house of chapters head ---------- */
.house-head{padding:.8rem 0 .2rem}
.house-intro{color:var(--ink-soft);font-size:1.06rem;max-width:46rem;margin:0}
.house-intro strong{color:var(--ink)}
.voice-note{
  background:var(--card);
  border:1px solid var(--card-edge);
  border-left:6px solid var(--duck);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  margin:1.4rem 0 .6rem;
}
.voice-note h3{font-size:1.12rem;margin-bottom:.4rem}
.voice-note p{margin:0;color:var(--ink-soft)}
.voice-note strong{color:var(--ink)}

/* ---------- chapters (inside the rooms) ---------- */
.chapters{list-style:none;margin:0;padding:0}
.chapters li{
  display:flex;gap:1rem;align-items:flex-start;
  padding:.85rem 0;
  border-bottom:1px dashed rgba(217,201,163,.18);
}
.chapters li:last-child{border-bottom:none}
.ch-code{
  flex:0 0 auto;
  background:var(--ground);
  color:var(--duck);
  border:1px solid var(--card-edge);
  border-radius:8px;
  font-family:var(--sans);
  font-weight:bold;font-size:.9rem;
  padding:.25rem .55rem;
  min-width:2.6rem;text-align:center;
}
.chapters h4{font-size:1.08rem}
.formula{margin:.15rem 0 0;color:var(--ink-soft);font-size:.98rem}
.ch-status{
  margin-left:auto;flex:0 0 auto;
  color:var(--ink-faint);
  font-family:var(--sans);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  padding-top:.35rem;white-space:nowrap;
}

/* ---------- lanes (inside their rooms) ---------- */
.lane-card{
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:var(--radius);
  padding:1.6rem 2rem 1.8rem;
}
.lane-card h3{font-size:1.6rem;margin-bottom:.8rem}
.lane-card p{color:var(--ink-soft);font-size:1.06rem;max-width:44rem}
.lane-card strong{color:var(--ink)}
.lane-note{font-size:.95rem;color:var(--ink-faint)}
.signoff{font-style:italic;color:var(--ink-soft)}
.lane-separate{border:2px dashed var(--duck-deep)}
.price-line{font-size:1.3rem;color:var(--ink)}
.price-line strong{color:var(--duck)}

/* ---------- footer (last item of the stage) ---------- */
.site-foot{
  flex:none;
  border:1px solid var(--card-edge);
  border-radius:var(--radius);
  background:var(--ground-2);
  padding:1rem 0 1.1rem;
  margin-top:2px;
}
.foot-grid{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;
  align-items:center;justify-content:space-between;
}
.foot-brand{margin:0;color:var(--ink-soft)}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot-nav a{color:var(--duck);text-decoration:none}
.foot-nav a:hover{text-decoration:underline}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .hero-grid,.flock-grid{grid-template-columns:1fr}
  .entrance h1{font-size:clamp(2.1rem,11vw,3rem)}
  .entrance{padding-top:.2rem}
  .lane-card{padding:1.3rem 1.2rem 1.5rem}
  .chapters li{flex-wrap:wrap}
  .ch-status{margin-left:0;width:100%;padding-top:0}
  .ph-kicker{letter-spacing:.14em}
  .head-row{padding:.55rem 0}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .panel.open .panel-body{animation:none}
  .ph-state::after{transition:none}
}

/* ================= FINISH PASS v5 =================
   Closes the v84 gap list (site-live-v84-BUILD-RECORD.md) on the book
   house, in the book's own dress — dark house ground, duck-yellow,
   Georgia serif. Pure overrides below this line; the v4 stylesheet
   above is byte-identical. No copy, no hooks, no script touched.
   F1 display entrance · F2 entrance motion · F3 stage depth ·
   F4 header furniture · F5 buttons · F6 cards · F7 footer band ·
   F8 micro-details · F9 the lit mark (this house's live strip is
   its status pill) · reduced motion kills every added motion. */

/* F3 — stage depth: the two v4 glows, deepened and layered */
html.js main.stage{
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(255,210,31,.14), transparent 60%),
    radial-gradient(44rem 22rem at 50% -14%, rgba(255,225,77,.05), transparent 62%),
    radial-gradient(50rem 26rem at -10% 110%, rgba(240,165,0,.09), transparent 60%),
    var(--ground);
}

/* F4 — header furniture: gradient bar over the hairline it already
   wore, and a live duck mark pulsing before the brand */
.site-head{
  background:linear-gradient(180deg,#2a2010,var(--ground-2));
}
.brand::before{
  content:"";display:inline-block;vertical-align:middle;
  width:9px;height:9px;border-radius:50%;margin-right:.55rem;
  background:var(--duck);
  box-shadow:0 0 10px rgba(255,210,31,.55);
  animation:duck-pulse 2.6s ease-in-out infinite;
}
@keyframes duck-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,210,31,.45),0 0 10px rgba(255,210,31,.5)}
  50%{box-shadow:0 0 0 6px rgba(255,210,31,0),0 0 14px rgba(255,210,31,.75)}
}
.head-nav a{transition:color .18s ease,box-shadow .18s ease}
.head-nav a:hover{box-shadow:inset 0 -2px 0 var(--duck)}

/* F1 — the entrance becomes a composed plate */
.entrance{
  background:linear-gradient(165deg,#2c2110,var(--card) 78%);
  border:1px solid var(--card-edge);
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,210,31,.30),0 20px 44px rgba(0,0,0,.45);
  padding:1.7rem clamp(1rem,3.4vw,2.4rem) 1.5rem;
}
.entrance h1{
  font-size:clamp(2.6rem,7.2vw,5.4rem);
  text-shadow:0 2px 0 rgba(0,0,0,.35),0 12px 36px rgba(255,210,31,.14);
}
.entrance .eyebrow::before{
  content:"";display:inline-block;vertical-align:middle;
  width:34px;height:2px;background:var(--duck);margin-right:.7rem;
}
.byline{font-size:1.28rem}
.hero-fig img{box-shadow:0 22px 44px rgba(0,0,0,.5)}

/* F2 — entrance motion: the copy cascades in, blur to sharp,
   the figure follows; the room entry takes the same easing */
.entrance .hero-copy > *{
  animation:finish-rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.entrance .hero-copy > *:nth-child(2){animation-delay:.12s}
.entrance .hero-copy > *:nth-child(3){animation-delay:.22s}
.entrance .hero-copy > *:nth-child(4){animation-delay:.32s}
.entrance .hero-copy > *:nth-child(5){animation-delay:.42s}
.entrance .hero-copy > *:nth-child(6){animation-delay:.52s}
.hero-fig{animation:finish-rise .9s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes finish-rise{
  from{opacity:0;transform:translateY(14px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:none}
}
html.js .panel.open .panel-body{
  animation:panel-in .5s cubic-bezier(.2,.7,.2,1) both;
}

/* F9 — the lit mark: the In production pill glows like a board light */
.status-pill{
  background:linear-gradient(180deg,var(--duck-hi),var(--duck));
  box-shadow:0 0 18px rgba(255,210,31,.35),inset 0 1px 0 rgba(255,255,255,.45);
}

/* F5 — buttons: transitions, a gradient solid, a lift and a glow */
.btn{transition:all .18s ease}
.btn-duck{background:linear-gradient(180deg,var(--duck-hi),var(--duck))}
.btn-duck:hover{
  background:linear-gradient(180deg,var(--duck),var(--duck-deep));
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(255,210,31,.25);
}
.btn-ghost:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px var(--duck),0 8px 22px rgba(255,210,31,.18);
}

/* F6 — cards become gradient console surfaces that answer the hand */
.panel{background:linear-gradient(180deg,#31260f,var(--card))}
.lane-card,.voice-note{
  background:linear-gradient(165deg,#2e2412,var(--card));
}
.lane-card{
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.lane-card:hover{
  border-color:var(--duck-deep);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.4);
}
.chapters li{transition:background .18s ease}
.chapters li:hover{background:rgba(255,210,31,.04)}

/* F7 — the footer stands as a band, not a page bottom */
.site-foot{
  background:linear-gradient(180deg,var(--ground-2),#14100a);
  box-shadow:inset 0 1px 0 rgba(255,210,31,.28),0 10px 26px rgba(0,0,0,.35);
}
.foot-brand{
  font-family:var(--sans);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
}
.foot-nav a{transition:color .18s ease}
.foot-nav a:hover{color:var(--duck-hi)}

/* F8 — micro-details: a scrollbar you can see, kickers tracked out,
   panel heads that warm under the hand */
html.js main.stage{
  scrollbar-color:var(--duck-deep) transparent;
}
html.js main.stage::-webkit-scrollbar{width:10px}
html.js main.stage::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--duck-deep),#9a6e0a);
  border-radius:6px;
}
html.js main.stage::-webkit-scrollbar-track{background:transparent}
.eyebrow{letter-spacing:.22em}
.ph-kicker,.room-kicker{letter-spacing:.24em}
.panel-head{transition:background .18s ease}
.panel-head:hover{
  background:linear-gradient(90deg,rgba(255,210,31,.07),transparent 62%);
}
.panel-head:hover .ph-title{color:var(--duck-hi)}

@media (max-width:760px){
  .entrance{padding:1.3rem 1.1rem 1.2rem}
  .entrance h1{font-size:clamp(2.2rem,11vw,3.2rem)}
}

@media (prefers-reduced-motion: reduce){
  .entrance .hero-copy > *,.hero-fig{animation:none}
  .brand::before{animation:none}
  .btn,.lane-card,.chapters li,.panel-head,.head-nav a,.foot-nav a{transition:none}
  .btn-duck:hover,.btn-ghost:hover,.lane-card:hover{transform:none}
}

/* === Jungle Shop photos (v7) === */
.chapters img.shop-photo{width:84px;height:84px;object-fit:cover;border-radius:8px;flex:none}
/* === end Jungle Shop photos === */