/* ROUND 113 — Our History (inc/round113.php). Loads after inner.css, r63.css and r77.css on the history template. */

/* 1. The year nav sits 30px from the browser's right edge at every width (it used to follow the content column) */
.sh-r113 .hist__nav{right:30px}

/* 2. Inactive dots and the line turn charcoal over the light (cream) panels, white over sage / charcoal / slate;
      r63.js already flags the light panels with .sh-inv (round 77 had pinned the dots white everywhere).
      The active dot stays amber in both states. */
.sh-r113.sh-r63-history.sh-r77 .hist__nav.sh-inv .hist__dot{background:var(--charcoal)}
.sh-r113.sh-r63-history.sh-r77 .hist__nav.sh-inv .hist__dot.is-on{background:var(--amber,#e8b639)}
.sh-r113.sh-r63-history.sh-r77 .hist__nav.sh-inv::before{background:rgba(66,64,64,.25)}

/* 3. The 2023 panel (cream, leaf shadow bottom right): its leaf-shadow background covers the panel, centred,
      at every width (phones and tablets already had this) */
.sh-r113 .hist__panel--cream-alt .hist__leaf{background-size:cover;background-position:center}

/* 4. The nav is gone once the Footer CTA (the last section before the footer) reaches the nav's own line */
.sh-r113 .hist__nav.sh-r113-away{opacity:0;pointer-events:none}

/* 5. Phones: the two early-history polaroids side by side, half the width each, 12px apart */
@media (max-width:768px){
  /* the 2008 panel shows the frame's two prints (.hist__stock) or, with the client's own photos, two polaroids */
  .sh-r113 .hist__panel--polaroid2 .hist__art{flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:12px}
  .sh-r113 .hist__panel--polaroid2 .hist__art--stock .hist__stock{flex:0 0 calc(50% - 6px);width:calc(50% - 6px) !important;max-width:calc(50% - 6px);height:auto !important;min-width:0}
  .sh-r113 .hist__panel--polaroid2 .hist__polaroid{flex:0 0 calc(50% - 6px);width:calc(50% - 6px) !important;min-width:0}
  .sh-r113 .hist__panel--polaroid2 .hist__caption{font-size:14px}
}