/* About, wave E (Justin's walkthrough 2026-10-07). Loads after about-batch15, 49, 50 and the 59b frames sheet, so it owns the page's layout system.
   One system, magazine feel (A8): a 12 column grid (24 px gutters) inside every box, one type scale (kicker 12, body 17, lead 24, deck 29, display 50),
   one spacing rhythm (8 px base: 24 inside a spread, 32 between rows, 64 between sections), photographs and lockups as spreads, no empty plates.
   1 system  2 tree walls sized for the box  3 headings on the plaid  4 arrival  5 story  6 first market and lines  7 proof and timeline  8 tradition  9 today and bands  10 smaller screens
   Rulings applied: headings on plaid with no support; frames on photographs only (lockups are art); walls in boxes; no rotation control; static under reduced motion and ?static=1; Justin's copy never reworded. */

/* 1 system ------------------------------------------------------------------------------------------------------- */
.ab23{--abe-gut:24px;--abe-row:32px;--abe-block:clamp(48px,5vw,72px);--abe-pad:clamp(20px,2.6vw,36px);--ab50-pad:var(--abe-pad);--ab50-gap:var(--abe-block);--abe-red:#ef2435}
.ab23 .abe-sec{margin:0 0 var(--abe-block);padding:0}
.ab23 .abe-box{margin:0}
.ab23 .abe-tail{margin:0 0 var(--abe-block)}
.ab23 .abe-tail>.abe-box--first{margin-bottom:var(--abe-block)}
.ab23 .abe-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--abe-gut);row-gap:var(--abe-row);align-items:center;font-size:17px;line-height:1.6;color:#f1f1f1}
.ab23 .abe-grid>*{min-width:0}
/* captions: centered under their photograph, one small chip style */
.ab23 .ab49-photo figcaption,.ab23 .abe-rot-caps{display:block;width:fit-content;max-width:100%;margin:10px auto 0;padding:5px 12px;border-radius:8px;background:rgba(5,5,5,.88);font-size:14px;line-height:1.35;font-weight:600;color:#fff;text-align:center}
.ab23 .ab49-photo{text-align:center}
.ab23 .ab49-photo .omf{margin-inline:auto}

/* 2 tree walls sized for the box (A1, A8) --------------------------------------------------------------------------
   The old layer used background-size:cover, so a tall box blew a 1600 px wall up to 2.5 times its size. Now the wall is always shown at the box width (never above 1x: the 1600 file
   serves boxes up to 1568 px, the 940 portrait file phones), and a tall box takes a second and a third wall stacked under the first, each crossfading into the one above over 80 px. */
.ab23 .abe-box .tb58-clip{container-type:inline-size}
.ab23 .abe-box{--abe-wr:.5625;--abe-w1:url('./art-20261003/ornament-wall-a-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-c-1600.webp');--abe-w3:url('./art-20261003/ornament-wall-b-1600.webp');--abe-pos:50% 30%}
.ab23 .abe-box .tb58-tree{background-image:var(--abe-w1);background-size:100% auto;background-repeat:no-repeat;background-position:0 0;--abe-H:calc((100cqw + 32px) * var(--abe-wr))}
.ab23 .abe-box .tb58-tree::before,.ab23 .abe-box .tb58-tree::after{content:"";position:absolute;left:0;right:0;pointer-events:none;background-size:100% auto;background-repeat:no-repeat;background-position:0 0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 80px);mask-image:linear-gradient(to bottom,transparent 0,#000 80px)}
.ab23 .abe-box .tb58-tree::before{top:calc(var(--abe-H) - 80px);height:var(--abe-H);background-image:var(--abe-w2)}
.ab23 .abe-box .tb58-tree::after{top:calc(var(--abe-H) * 2 - 160px);bottom:0;background-image:var(--abe-w3);background-repeat:repeat-y;background-size:100% var(--abe-H)}
/* a box that fits inside one wall shows that wall's own crop; the drift layer is 32 px larger than the box, so the first wall is never smaller than the box */
.ab23 .abe-box--arrival{--abe-w1:url('./art-20261003/ornament-wall-a-1600.webp')}
.ab23 .abe-box--story{--abe-w1:url('./art-20261003/ornament-wall-b-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-a-1600.webp');--abe-w3:url('./art-20261003/ornament-wall-c-1600.webp')}
.ab23 .abe-box--first{--abe-w1:url('./art-20261003/ornament-wall-c-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-b-1600.webp');--abe-w3:url('./art-20261003/ornament-wall-a-1600.webp')}
.ab23 .abe-box--proof{--abe-w1:url('./art-20261003/ornament-wall-c-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-a-1600.webp')}
.ab23 .abe-box--mission{--abe-w1:url('./art-20261003/ornament-wall-a-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-b-1600.webp');--abe-w3:url('./art-20261003/ornament-wall-c-1600.webp')}
.ab23 .abe-box--experience{--abe-w1:url('./art-20261003/ornament-wall-b-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-c-1600.webp');--abe-w3:url('./art-20261003/ornament-wall-a-1600.webp')}
.ab23 .abe-box--growth{--abe-w1:url('./art-20261003/ornament-wall-c-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-a-1600.webp');--abe-w3:url('./art-20261003/ornament-wall-b-1600.webp')}
.ab23 .ab50-present--a{--abe-w1:url('./art-20261003/ornament-wall-a-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-b-1600.webp')}
.ab23 .ab50-present--b{--abe-w1:url('./art-20261003/ornament-wall-b-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-c-1600.webp')}
.ab23 .ab50-present--c{--abe-w1:url('./art-20261003/ornament-wall-c-1600.webp');--abe-w2:url('./art-20261003/ornament-wall-a-1600.webp')}
.ab23 .abe-box--arrival .tb58-tree{background-position:0 18%}
.ab23 .abe-box{--tb58-shade:linear-gradient(rgba(5,5,5,.5),rgba(5,5,5,.56))}
.ab23 .abe-box--proof{--tb58-shade:linear-gradient(rgba(5,5,5,.64),rgba(5,5,5,.68))}

/* 3 headings on the plaid, no support (Justin 2026-10-07) ----------------------------------------------------------- */
.ab23 .abe-sec>.ab23-head{margin:0 0 var(--abe-gut);position:static}
.ab23 .abe-sec>.ab23-head::before,.ab23 .abe-sec>.ab23-head::after{content:none!important;display:none!important}
.ab23 .abe-linehead::before,.ab23 .abe-ready::before{content:none!important;display:none!important}
.ab23 .abe-linehead,.ab23 .abe-ready{background:none;box-shadow:none}
/* display lines on the plaid take a black outline so they read without a support */
.ab23 .abe-linehead .ab23-display p,.ab23 .abe-ready .ab23-pull span{paint-order:stroke fill;-webkit-text-stroke:8px #050505}
.ab23 .abe-ready{margin:0 auto var(--abe-gut);max-width:1040px;text-align:center}

/* 4 arrival (A1): its own box, so the wall crop is sized for this space alone ---------------------------------------- */
.ab23 .abe-box--arrival .ab49-arrival{margin:0}
.ab23 .abe-box--arrival{margin-bottom:var(--abe-block)}

/* 5 story (A2) ---------------------------------------------------------------------------------------------------- */
.ab23 .abe-story-grid{align-items:start}
.ab23 .abe-story-grid>.abe-lockup--story{grid-column:1/6;grid-row:1;align-self:center;margin:0}
.ab23 .abe-story-grid>.abe-story-copy{grid-column:6/13;grid-row:1;align-self:center;display:flex;flex-direction:column;gap:var(--abe-gut)}
.ab23 .abe-story-grid>.abe-story-photo{grid-column:1/6;grid-row:2/4;margin:0;align-self:start}
.ab23 .abe-story-grid>.abe-story-idea{grid-column:6/13;grid-row:2;display:flex;flex-direction:column;gap:12px}
.ab23 .abe-story-grid>.abe-story-pay{grid-column:6/13;grid-row:3;display:grid;gap:12px;justify-items:start;text-align:left}
.ab23 .abe-lockup{margin:0;display:block;text-align:center}
.ab23 .abe-lockup img{display:block;width:100%;max-width:100%;height:auto;margin-inline:auto;background:none;border:0;border-radius:0;box-shadow:none}
.ab23 .abe-story-copy .ab23-lead{max-width:30ch;font-size:clamp(21px,1.9vw,26px);line-height:1.3;margin:0}
.ab23 .abe-story-copy .ab23-nots p{font-size:clamp(22px,2.1vw,30px);color:#d8d8d8;margin:0 0 4px}
.ab23 .abe-story-pay .ab23-display{display:grid;gap:0;justify-items:start;text-align:left}
.ab23 .abe-story-pay .ab23-display p{font-size:clamp(34px,4vw,54px);margin:0}
.ab23 .abe-story-pay .ab23-prose{max-width:36em;margin:0;color:#e8e8e8}
.ab23 .abe-story-idea .ab23-rows{display:grid;grid-template-columns:1fr;gap:0}

/* 6 first market (A3) and the line photographs (A4) ------------------------------------------------------------------ */
.ab23 .abe-first-grid{align-items:start}
.ab23 .abe-first-grid>.abe-first-head{grid-column:1/7;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:12px}
.ab23 .abe-first-grid>.abe-first-deck{grid-column:7/13;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:12px}
.ab23 .abe-first-grid>.abe-first-media{grid-column:1/-1;grid-row:2}
.ab23 .abe-trio{display:grid;grid-template-columns:minmax(0,var(--abe-c1)) minmax(0,var(--abe-c2));gap:var(--abe-gut);align-items:start;width:100%;max-width:980px;margin-inline:auto}
.ab23 .abe-trio>.abe-minis{display:contents}
.ab23 .abe-trio .ab49-photo{margin:0;width:100%;min-width:0;flex:none}
.ab23 .abe-trio>.abe-lead{grid-column:1;grid-row:1}
.ab23 .abe-trio>.abe-minis>.ab49-photo--mini{grid-column:2;grid-row:1}
.ab23 .abe-first-media .ab49-yr{font-size:12px;letter-spacing:.12em;color:var(--ab-mint)}
.ab23 .abe-lines{gap:var(--abe-row)}
.ab23 .abe-linehead{margin:0 auto}
.ab23 .abe-pair{gap:var(--abe-gut)}
.ab23 .abe-lesson{padding:var(--abe-gut) 0}

/* 7 proof and timeline (A5): the dots are small red Ohio icons ---------------------------------------------------------- */
.ab23 .abe-proof-sec{margin:0 0 var(--abe-block)}
.ab23 .abe-ready .ab23-pull{margin:0}
.ab23 .ab50-timeline .editorial-years li::before,.ab23 .ab50-timeline .editorial-years .ab25-pivot::before{background:url('./about-ohio-dot-20261007.svg') center/contain no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;width:24px;height:26px;margin-left:-12px;transition:none}
.ab23 .ab50-timeline .editorial-years .ab25-pivot::before{width:32px;height:35px;margin-left:-16px;top:-6px}
.ab23 .ab50-timeline .ab23-ribbon-line{top:9px}

/* 8 tradition (A6): one rotating frame beside the setup ---------------------------------------------------------------- */
.ab23 .abe-growth-grid{align-items:center}
.ab23 .abe-growth-grid>.abe-rot{grid-column:1/6;grid-row:1}
.ab23 .abe-growth-grid>.abe-intro{grid-column:6/13;grid-row:1;display:flex;flex-direction:column;gap:var(--abe-gut);text-align:left;max-width:none;margin:0}
.ab23 .abe-intro .ab23-lead{font-size:clamp(26px,2.6vw,36px);line-height:1.2;margin:0}
.ab23 .abe-intro .ab50-stair{display:grid;gap:6px;justify-items:start;margin:0;padding:0;text-align:left}
.ab23 .abe-intro .ab50-stair span{margin:0;padding:0;text-align:left}
.ab23 .abe-intro .ab50-stair span{font-size:clamp(18px,1.5vw,21px);line-height:1.35;font-weight:700;color:#fff}
.ab23 .abe-intro .ab23-beat{margin:0;font-size:clamp(20px,1.8vw,26px);color:var(--ab-mint)}
.ab23 .abe-rot{position:relative;margin:0}
.ab23 .abe-rot:focus-visible{outline:3px solid var(--ab-mint);outline-offset:4px}
.ab23 .abe-rot .omf{max-width:100%;margin-inline:auto}
.ab23 .abe-slides{position:absolute;inset:0;overflow:hidden;background:#0b0b0b}
.ab23 .abe-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--om41-crossfade-ms,450ms) ease}
.ab23 .abe-slide.is-current{opacity:1}
.ab23 .abe-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ab23 .abe-rot-caps{display:grid;justify-items:center}
.ab23 .abe-cap{grid-area:1/1;opacity:0;transition:opacity var(--om41-crossfade-ms,450ms) ease}
.ab23 .abe-cap.is-current{opacity:1}
.ab23 .abe-more{margin-top:var(--abe-row);padding:var(--abe-gut);border-radius:12px}
@media(prefers-reduced-motion:reduce){.ab23 .abe-slide,.ab23 .abe-cap{transition:none}}
.ab23--static .abe-slide,.ab23--static .abe-cap{transition:none}

/* 9 today (A7) and the present-day bands ---------------------------------------------------------------------------------- */
.ab23 .abe-today-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--abe-gut);row-gap:var(--abe-row);align-items:center}
.ab23 .abe-today-grid>*{min-width:0}
.ab23 .abe-today-grid>.abe-today-copy{grid-column:1/8;grid-row:1}
.ab23 .abe-today-grid>.abe-lockup--today{grid-column:8/13;grid-row:1}
.ab23 .abe-today-grid>.ab50-rail{grid-column:1/-1;grid-row:2;columns:2;column-gap:var(--abe-gut);display:block;padding:var(--abe-gut);border-radius:12px;margin:0}
.ab23 .abe-today-grid>.ab50-rail li{break-inside:avoid;margin:0 0 8px}
.ab23 .abe-today-grid>.ab50-today-close{grid-column:1/-1;grid-row:3;padding:var(--abe-gut);border-radius:12px}
.ab23 .abe-band{margin:0 0 var(--abe-block);padding:0}
.ab23 .abe-band>.ab23-head{margin:0 0 var(--abe-gut)}
.ab23 .abe-band .ab50-box{padding:var(--abe-pad)}
.ab23 .abe-band .ab50-band-in{margin:0}

/* 10 smaller screens ---------------------------------------------------------------------------------------------------- */
@media(max-width:1000px){
  .ab23 .abe-story-grid>.abe-lockup--story{grid-column:1/6}
  .ab23 .abe-story-grid>.abe-story-copy{grid-column:6/13}
  .ab23 .abe-growth-grid>.abe-rot{grid-column:1/6}
}
@media(max-width:780px){
  .ab23 .abe-box{--abe-wr:1.7767;--abe-w1:url('./art-20261003/ornament-wall-portrait-940.webp');--abe-w2:url('./art-20261003/ornament-wall-portrait-940.webp');--abe-w3:url('./art-20261003/ornament-wall-portrait-940.webp')}
  .ab23 .abe-box .tb58-tree{background-image:var(--abe-w1)}
  .ab23 .abe-box .tb58-tree::before{background-image:var(--abe-w2)}
  .ab23 .abe-box .tb58-tree::after{background-image:var(--abe-w3)}
  .ab23 .abe-grid,.ab23 .abe-today-grid{display:flex;flex-direction:column;align-items:stretch;gap:var(--abe-gut)}
  .ab23 .abe-story-grid>.abe-lockup--story{width:min(78%,330px);margin-inline:auto}
  .ab23 .abe-story-grid>.abe-story-photo{order:3;width:min(86%,380px);margin-inline:auto}
  .ab23 .abe-story-grid>.abe-story-idea{order:4}
  .ab23 .abe-story-grid>.abe-story-pay{order:5}
  .ab23 .abe-first-grid>.abe-first-media{display:flex;flex-direction:column}
  .ab23 .abe-trio{grid-template-columns:1fr;max-width:none}
  .ab23 .abe-trio>.abe-lead{grid-column:1;grid-row:1}
  .ab23 .abe-trio>.abe-minis>.ab49-photo--mini{grid-column:1;grid-row:2;width:min(72%,320px);margin-inline:auto}
  .ab23 .abe-growth-grid>.abe-rot{order:2;width:min(92%,420px);margin-inline:auto}
  .ab23 .abe-growth-grid>.abe-intro{order:1}
  .ab23 .abe-today-grid>.abe-lockup--today{width:min(86%,360px);margin-inline:auto;order:2}
  .ab23 .abe-today-grid>.ab50-rail{columns:1}
  .ab23 .ab50-timeline .editorial-years li::before,.ab23 .ab50-timeline .editorial-years .ab25-pivot::before{margin:-13px 0 0 0}
}

/* the approved bow stays once as the seam between the timeline box and the mission, now centered in the gap above the mission heading (the heading no longer sits inside a box) */
.ab23 .ab50-seam{margin:0;top:calc(var(--abe-block) * -.5)}
.ab23 .ab50-bow{width:min(190px,48%)}