/* The section title spans both columns; the existing paper stack stays intact. */
#a-better-day .story-example-intro{grid-column:2;margin:calc(16px - var(--section-content-gap)) 0 0;font-size:14px;line-height:1.6;color:var(--stone)}
@media(max-width:900px){html #a-better-day .story-example-intro{grid-column:1/-1;flex:none;align-self:center;width:100%;max-width:450px;margin:0;font-size:13px;line-height:1.5}}
#a-better-day .day-sticky{align-content:center;align-items:start;row-gap:clamp(40px,5vw,128px)}
#a-better-day .day-heading{grid-column:1/-1;container-type:inline-size;min-width:0}
#day-title{font-family:'DM Sans',Arial,sans-serif;font-weight:500;font-size:clamp(16px,5cqw,56px);line-height:1.02;letter-spacing:-.055em;white-space:nowrap;margin:0;color:var(--ink)}
#day-title .serif{font-family:Newsreader,Georgia,serif;font-weight:400;font-style:italic}
#a-better-day .day-copy>p:first-child{margin-top:0;max-width:none}
#a-better-day .story-step .step-number{align-self:center;margin-top:0;font-size:13px;line-height:1;font-variant-numeric:tabular-nums}
/* Reserve the indicator space so switching chapters never shifts the labels. */
#a-better-day .story-step{position:relative;padding-left:18px;transition:color .22s ease}
#a-better-day .story-step::before{content:"";position:absolute;left:0;top:50%;width:4px;height:24px;background:var(--neon);opacity:0;transform:translateY(-50%) scaleY(.5);transition:opacity .22s ease,transform .28s var(--ease);pointer-events:none}
#a-better-day .story-step.is-active{color:var(--ink)}
#a-better-day .story-step.is-active::before{opacity:1;transform:translateY(-50%) scaleY(1)}
/* A single spring-driven marker travels between the fixed-height rows. */
#a-better-day .story-steps{position:relative}
#a-better-day .story-steps.has-step-indicator .story-step::before{content:none}
#a-better-day .story-step-indicator{position:absolute;left:0;top:0;width:4px;height:24px;background:var(--neon);pointer-events:none;will-change:transform}
#a-better-day.is-paper-story .story-step small{transform:translateY(4px);transition:opacity .22s ease,transform .3s var(--ease)}
#a-better-day.is-paper-story .story-step.is-active small{transform:translateY(0)}
/* Retain the original header-strip height without labels or counters. */
#a-better-day .scene-topline:empty::before{content:"";display:block;height:1.6em}
/* Keep the photo and caption on one uninterrupted sheet without shifting content. */
#a-better-day .scene-caption{border-top-color:transparent}
/* Match the panorama's unblended paper tone; preserve the source video colors. */
.hero-art-mat > .hero-people{mix-blend-mode:normal}
#a-better-day .scene-caption .principal-bracket,
.hero-note .principal-bracket{background:url("assets/principal-b1-bracket.svg?v=principal-2") center / contain no-repeat;filter:none}
.hero-note.hero-note-side-tab{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:0;padding:0;overflow:hidden;width:min(456.25px,94%)}
.hero-note-content{display:flex;align-items:center;gap:10px;padding:14px 12px;min-width:0}
.hero-note-content>div{min-width:0}
.hero-note-content>div>span{display:block;line-height:1.45;margin-top:6px}
.hero-note>.hero-review-action{display:flex;align-items:center;justify-content:center;align-self:stretch;min-width:76px;padding:18px 12px;background:var(--neon);color:var(--ink,#292b26);border-left:1px solid #b8cc88;font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .2s ease}
.hero-note>.hero-review-action:hover{background:#cafa58}
.hero-note>.hero-review-action:focus-visible{outline:2px solid #292b26;outline-offset:-5px}
@media(min-width:1101px){
  .hero-note-content strong{font-size:14.4px}
  .hero-note-content>div>span{font-size:12px}
  .hero-note>.hero-review-action{font-size:15.6px}
}
@media(prefers-reduced-motion:reduce){.hero-note>.hero-review-action{transition:none}}
@media(max-width:1100px){.hero-note.hero-note-side-tab{width:min(387.5px,94%)}}
@media(max-width:600px){.hero-note.hero-note-side-tab{width:min(362.5px,95%)}}
.hero-art .art-bottom{justify-content:flex-end}
@media(min-width:901px){
  #a-better-day .review-caption-copy{flex:1;min-width:0;container-type:inline-size}
  #a-better-day .review-caption-copy p{max-width:none;white-space:nowrap;font-size:min(11px,2.5cqi)}
  #a-better-day.is-paper-story .day-copy{margin-top:var(--day-copy-offset,0px)}
}
@media(max-width:900px){
  #a-better-day .day-sticky{row-gap:24px}
  #a-better-day .day-copy{margin-top:0}
}