/* Integrated edition. Deliberately no CSS animation or smooth scroll:
   all transformations, including the exact logo reveal, follow the reader. */
body{overflow-x:clip}
header{padding:24px 5%;min-height:96px;gap:22px}
.wordmark{font:25px/1 Georgia,serif;letter-spacing:-.7px;color:#a54226;text-decoration:none}
.wordmark span{display:block;margin-top:10px;font:9px/1.3 Arial,sans-serif;letter-spacing:1.7px;text-transform:uppercase;color:#58614f}
header label{display:flex;align-items:center;gap:8px;color:#696957;font-size:10px;letter-spacing:.2px}
.instructions{display:flex;justify-content:space-between;gap:20px;padding:23px 5%;font-size:11px;letter-spacing:.3px}
.instructions span:last-child{color:#a54226}
h1,h2{line-height:1.08;letter-spacing:-1.6px}
.chapter{border-color:#81745a17}
.chapter p{color:#586050;max-width:445px;line-height:1.85}
.kicker{font-size:10px;letter-spacing:2.2px}
.visual{top:calc(50vh - 220px);padding:0}
.visual-origin{height:440px}
html:not(.static) .object{width:440px;height:390px}
/* The botanical stalk exits the fallback frame during the ear close-up,
   just as it exits the WebGL canvas. Keep it away from mobile text. */
html:not(.static) .matter-scene{transform:none;overflow:hidden}
.finale-logo{position:absolute;inset:0;opacity:0;z-index:3;pointer-events:none;--ink:0}
.finale-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.finale-logo .logo-ink{opacity:var(--ink)}
.chapter .ending{height:230svh;min-height:0;display:block;padding:0}
.finale-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10vh 0 8vh}
.ending #bread-target{width:430px;height:340px;display:flex;align-items:center;justify-content:center}
.static-logo{width:330px;height:auto;opacity:0}
.final-signature{opacity:0;position:relative;z-index:5;text-align:center}
.final-signature p{font:32px/1.28 Georgia,serif;color:#344133;margin:20px 0 34px;max-width:none;letter-spacing:-.5px}
.final-signature em{color:#a54226}
.final-signature a{display:inline-flex;align-items:center;gap:24px;padding:12px 20px;border:1px solid #918a6c55;border-radius:30px;text-decoration:none;font-size:11px;letter-spacing:.3px}
.final-signature a:hover{background:#a5422610;border-color:#a54226}
@media(min-width:701px) and (max-width:1099px){
  .visual-origin{height:360px}.visual{top:calc(50vh - 180px)}
  html:not(.static) .object{width:330px;height:290px}
  .ending #bread-target{height:290px}
}
@media(max-width:700px){
  header{padding:20px 6%;min-height:94px;gap:20px}
  .wordmark{font-size:23px}.wordmark span{font-size:8px;letter-spacing:1.15px}
  header label{font-size:9px}.instructions{padding:15px 6%;font-size:10px}
  .instructions span:first-child{max-width:180px}.instructions span:last-child{max-width:85px;text-align:right}
  .visual{top:0;height:220px;padding:0;background:#f2ede2;width:calc(100% + 12vw);margin-left:-6vw}
  .visual-origin{height:220px}
  html:not(.static) .object{width:220px;height:180px}
  .chapter{scroll-margin-top:240px;min-height:90svh;padding-top:28px;padding-bottom:65px}
  .chapter>div{top:245px}
  h1,h2{font-size:37px;letter-spacing:-1px}.chapter p{font-size:15px;line-height:1.8}
  .chapter .conclusion-copy{min-height:80svh}
  .chapter .ending{height:225svh;top:auto}
  .finale-stage{height:100svh;padding:16vh 0 10vh}
  .ending #bread-target{width:270px;height:230px}
  .final-signature p{font-size:26px;margin:10px 0 26px}
  .static-logo{width:250px}
}
/* No-JS and reduced motion keep the same content and the complete real logo. */
.static .finale-logo{display:none}
.static .chapter .ending{height:auto;min-height:0;padding:50px 0}
.static .finale-stage{position:static;height:auto;min-height:0;padding:0}
.static .ending #bread-target{display:flex;height:auto;margin:15px auto 35px;max-width:100%}
.static .static-logo{opacity:1}
.static .final-signature{opacity:1!important;transform:none!important}
.static .visual-origin{height:auto}
.static .visual{top:auto}