/*
 * About page styles, extracted from "About.dc.html".
 *
 * Generated by tools/extract-page.php. The numbered classes below are the design's
 * inline styles lifted verbatim, one class per unique declaration block, so the
 * computed result is identical while the markup stays free of style attributes the
 * Content-Security-Policy would drop.
 */

/* Page canvas. The 1440px cap is deliberately absent: full-width bands reach the
   viewport edge, and each section holds its own content on the --content-max grid. */
.about-s01 {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: var(--blue-deep);
  overflow: hidden;
}

.about-s02 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 40%, #1E3C87 0%, var(--blue-deep) 55%, #0C1B4A 100%);
  overflow: hidden;
  padding: 120px 40px 90px;
}

.about-s03 {
  position: absolute;
  top: -9%;
  left: 0;
  height: 118%;
  width: 23%;
  object-fit: cover;
  object-position: left center;
  opacity: .4;
  pointer-events: none;
  filter: brightness(1.6);
  animation: abWallDown 18s ease-in-out infinite alternate;
}

.about-s04 {
  position: absolute;
  top: -9%;
  right: 0;
  height: 118%;
  width: 26%;
  object-fit: cover;
  object-position: right center;
  opacity: .4;
  pointer-events: none;
  filter: brightness(1.6);
  animation: abWallUp 18s ease-in-out infinite alternate;
}

.about-s05 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, rgba(12,27,74,.55) 0%, rgba(12,27,74,0) 70%);
}

.about-s06 {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
  animation: abRise .8s ease both;
}

.about-s07 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .32em;
  color: var(--gold-lite);
}

.about-s08 {
  width: 34px;
  height: 1.5px;
  background: var(--gold-lite);
}

.about-s09 {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: clamp(44px,6vw,88px);
  line-height: .96;
  letter-spacing: .01em;
  color: #fff;
  margin: 20px 0 0;
}

/* The 44px floor above was sized for a headline whose longest word was "Growing".
   "Craftsmanship" is nearly twice that and renders exactly the width of its box on a
   360px screen, so any font-rendering variance tips it into an overflow. */
@media (max-width: 380px) {
  .about-s09 { font-size: 37px; }
}

.about-s10 {
  color: var(--gold-lite);
}

.about-s11 {
  font-family: 'Bricolage Grotesque';
  font-weight: 500;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  max-width: 600px;
  margin: 22px auto 0;
}

.about-s12 {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
}

.about-s13 {
  font-size: 22px;
  line-height: 1;
  animation: abFloat 1.8s ease-in-out infinite;
}

.about-s14 {
  position: relative;
  background: var(--blue-deep);
  padding: 88px 0 96px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
}

.about-s15 {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}

.about-s16 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3em;
  /* Sits on the navy hero: light-on-dark, so it stays off the light-ground gold token. */
  color: var(--gold-dark);
}

.about-s17 {
  width: 30px;
  height: 1.5px;
  background: var(--orange);
}

.about-s18 {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: clamp(34px, 9vw, 52px);
  line-height: 1;
  color: #fff;
  margin: 14px 0 0;
  letter-spacing: .01em;
}

.about-s19 {
  font-family: 'Bricolage Grotesque';
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 16px auto 0;
  max-width: 520px;
}

.about-s20 {
  position: relative;
  margin-top: 56px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.about-s21 {
  display: flex;
  align-items: stretch;
  gap: 26px;
  width: max-content;
  padding: 0 13px;
  animation: abLogoMarquee 46s linear infinite;
}

.about-s22 {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  padding: 110px 40px 130px;
}

.about-s23 {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.about-s24 {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: clamp(40px,5.4vw,72px);
  line-height: .98;
  color: var(--blue-deep);
  margin: 16px 0 0;
  letter-spacing: .01em;
}

.about-s25 {
  color: #ef9c2e;
}

.about-s26 {
  font-family: 'Bricolage Grotesque';
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 18px auto 0;
  max-width: 520px;
}

.about-s27 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  background: var(--orange);
  color: #fff;
  font-family: 'Bricolage Grotesque',sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(239,156,46,.32);
  transition: transform .2s ease,box-shadow .2s ease;
}

/* The design carried this on inline onmouseover/onmouseout handlers, which the strict
   script-src blocks. Same lift and shadow, as a hover rule. */
.about-s27:hover,
.about-s27:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(239,156,46,.42);
}

.about-s28 {
  position: relative;
  max-width: calc(1120px * var(--container-scale));
  margin: 72px auto 0;
}

.about-s29 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.about-s30 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 58px;
  height: auto;
  transform: translate(-50%,-50%);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
}

.about-s31 {
  display: none;
  position: absolute;
  left: -11px;
  top: -34px;
  width: 46px;
  height: auto;
  z-index: 3;
  transform: scaleX(-1);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
}

.about-s32 {
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14%;
  align-items: center;
}

.about-s33 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 3px solid var(--cream);
  background: var(--cream-3);
  transform: translate(-50%,-50%) scale(.5);
  z-index: 2;
}

.about-s34 {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--gold-text);
}

.about-s35 {
  font-family: 'Playfair Display',serif;
  font-weight: 700;
  font-size: clamp(46px,6.5vw,80px);
  line-height: .9;
  color: var(--blue-deep);
  margin: 4px 0 0;
  letter-spacing: -.01em;
}

.about-s36 {
  font-family: 'Playfair Display',serif;
  font-weight: 700;
  font-size: clamp(23px,2.7vw,30px);
  line-height: 1.12;
  color: var(--ink);
  margin: 16px 0 0;
}

.about-s37 {
  font-family: 'Bricolage Grotesque';
  font-weight: 500;
  font-size: 18px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 12px 0 0;
}

.about-s38 {
  position: relative;
  background: radial-gradient(120% 80% at 50% -10%, #17306f 0%, #0e1f4d 46%, #091536 100%);
  padding: 104px 40px 132px;
  overflow: hidden;
}

.about-s39 {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(230,204,134,.24),rgba(230,204,134,.06) 46%,transparent 70%);
  pointer-events: none;
}

.about-s40 {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%,transparent 52%,rgba(4,9,24,.55) 100%);
  pointer-events: none;
}

.about-s41 {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 52px;
  position: relative;
}

.about-s42 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--gold-lite);
}

.about-s43 {
  width: 30px;
  height: 1.5px;
  background: var(--gold-lite);
}

.about-s44 {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: clamp(40px,5.4vw,72px);
  line-height: .98;
  color: #fff;
  margin: 16px 0 0;
  letter-spacing: .01em;
}

.about-s45 {
  font-family: 'Bricolage Grotesque';
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 18px auto 0;
  max-width: 520px;
}

.about-s46 {
  max-width: calc(1120px * var(--container-scale));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}

.about-s47 {
  position: relative;
  max-width: 900px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-s48 {
  background: linear-gradient(160deg,#fbf6ec,#efe2c7);
  padding: 16px 16px 0;
  border-radius: 8px;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
}

.about-s49 {
  max-width: 100%;
  max-height: 66vh;
  display: block;
  filter: grayscale(.12) sepia(.14) contrast(1.03);
}

.about-s50 {
  padding: 16px;
  text-align: center;
  font-family: 'Bricolage Grotesque';
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

.about-s51 {
  margin-top: 14px;
  font-family: 'Bricolage Grotesque';
  font-weight: 600;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}

.about-s52 {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 130;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 308px;
  background: var(--cream);
  border: 1px solid rgba(201,162,75,.42);
  border-radius: 18px;
  padding: 15px 20px;
  box-shadow: 0 14px 40px rgba(36,28,18,.18);
  text-decoration: none;
}

.about-s53 {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.about-s54 {
  font-family: 'Bricolage Grotesque';
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.12;
  color: var(--blue-deep);
  margin-top: 3px;
}

.about-s55 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  transition: transform .25s ease;
}

.about-s56 {
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 131;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque';
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
/* --------------------------------------------------------------------------
 * From the design's own <style> block and the <style> elements hoisted out of
 * the page body. Tokens, the reset, the nav and the mobile drawer are omitted;
 * base.css already provides them.
 * ----------------------------------------------------------------------- */

}

/* ----------------------------------------------------------------------------
 * From the design's own <style> block. Review and trim: tokens, keyframes, the
 * nav and the mobile drawer are already in base.css.
 * -------------------------------------------------------------------------- */

@keyframes abFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes abRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes abWallDown{0%{transform:translateY(-4%)}100%{transform:translateY(0%)}}
@keyframes abWallUp{0%{transform:translateY(0%)}100%{transform:translateY(-4%)}}
@keyframes abPageA{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes abPageB{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes abYearA{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes abYearB{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes abLogoMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.about-menu:hover .about-panel{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;pointer-events:auto!important;}
.gov-menu:hover .gov-panel{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;pointer-events:auto!important;}
.brands-menu:hover .brands-panel{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;pointer-events:auto!important;}
.people-menu:hover .people-panel{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;pointer-events:auto!important;}
.ab-row{transition:background .16s ease,padding-left .16s ease;}
.ab-row:hover{background:rgba(201,162,75,.1)!important;padding-left:14px!important;}
.gov-link{transition:color .16s ease;}
.gov-link:hover{color:var(--blue-deep)!important;}
.bcol a{transition:color .16s ease,padding-left .16s ease;}
.bcol a:hover{color:var(--blue-deep)!important;padding-left:4px!important;}
.gov-card:hover{transform:translateY(-3px)!important;box-shadow:0 20px 38px rgba(12,20,40,.16)!important;}
.brand-chip{transition:background .18s ease,color .18s ease,border-color .18s ease;}
.brand-chip:hover{background:var(--blue-deep)!important;color:#fff!important;border-color:var(--blue-deep)!important;}
@media (prefers-reduced-motion: reduce){*{animation:none!important;}}
@media (max-width:760px){
  .ab-hero{padding:104px 22px 76px!important;min-height:auto!important;}
  .ab-hero img[alt="Mitchell's heritage marks"]{width:34%!important;opacity:.26!important;}
  .ab-sec-pad{padding-left:20px!important;padding-right:20px!important;}
  #story{padding:72px 20px 84px!important;}
  #tlSvg,#tlBird{display:none!important;}
  #tlBirdM{display:block!important;}
  #tlWrap{margin-top:54px!important;padding-left:44px!important;}
  #tlWrap::before{content:'';position:absolute;left:6px;top:0;bottom:14px;width:2.5px;background:linear-gradient(var(--orange),var(--gold));border-radius:2px;z-index:0;}
  .tl-item{grid-template-columns:1fr!important;min-height:0!important;row-gap:16px!important;margin-bottom:60px!important;column-gap:0!important;align-items:start!important;}
  .tl-item .tl-card{max-width:100%!important;text-align:left!important;margin:0!important;padding:0!important;grid-column:1!important;grid-row:auto!important;order:1!important;}
  .tl-item .tl-imgcell{grid-column:1!important;grid-row:auto!important;order:2!important;max-width:100%!important;margin:0!important;justify-content:flex-start!important;}
  .tl-item .tl-card > div{font-size:52px!important;}
  .tl-dot{left:-24px!important;top:8px!important;transform:none!important;background:var(--orange)!important;border-color:var(--cream)!important;width:15px!important;height:15px!important;}
  .tl-item .tl-card p{font-size:15.5px!important;}
  #gallery{padding:72px 18px 90px!important;}
  #bookWrap{width:min(340px,86vw)!important;}
  #bookWrap::before,#bookWrap::after{display:none!important;}
  #bookSpine{display:none!important;}
  .alp-btn{width:44px!important;height:44px!important;}
  .alp-row{position:relative;gap:0!important;}
  .alp-row .alp-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;}
  #alpPrev{left:2px;}
  #alpNext{right:2px;}
  .ab-footer-grid{grid-template-columns:1fr 1fr!important;gap:26px!important;}
}

/* ------------------------------------------------------------ port additions */

/*
 * The album is StPageFlip. The library sizes and transforms the leaves itself; what
 * lives here is the physical furniture around them, which is what makes it read as a
 * real book rather than two flat panels:
 *
 *   - a page-block thickness down both outer edges, skewed
 *   - a spine crease painted over the leaves in mix-blend-mode: multiply
 *   - gutter shading on the inner edge of every leaf
 *   - a soft shadow pooling underneath
 *
 * With scripting off the leaves stay a plain scrollable strip of plates.
 */
#book { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 12px; }

/*
 * Strip fallback only.
 *
 * .stpage-inner is position:absolute inset:0, so in the no-script strip each plate has
 * to establish its own containing block or the inners all resolve against #bookWrap.
 *
 * Once the library has adopted the leaves it positions them itself, and this must not
 * apply: a position:relative here beat the library's own value on the two turning
 * halves, dropping them out of the layer into normal flow. The right-hand half landed
 * directly under the book as a full, clickable copy of the page.
 */
#book:not([data-built]) .stpage { flex: 0 0 340px; position: relative; }

/* Once the library has adopted them it drives layout, so the strip rules step aside. */
#book[data-built] { display: block; overflow: visible; padding-bottom: 0; }
#book[data-built] .stpage { flex: none; }

.alp-btn[disabled] { opacity: .35; cursor: default; }

.stcover-kicker { font-family: 'Bricolage Grotesque'; font-weight: 800; letter-spacing: .32em; font-size: 12px; color: #e6cc86; }
.stcover-title { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 36px; color: #fff; margin-top: 14px; line-height: 1; }
.stcover-rule { width: 48px; height: 2px; background: #e6cc86; margin: 20px 0; }
.stcover-body { font-family: 'Bricolage Grotesque'; font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, .82); max-width: 240px; }

/* Each plate is a button so the lightbox is reachable by keyboard. */
.stphoto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

/* ------------------------------------------------------- logo marquee */

/* Chip dimensions transcribed from the card the design's script builds. */
.ab-logo {
  flex: none;
  width: 224px;
  margin: 0;
  background: #fff;
  border-radius: 20px;
  padding: 26px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .30);
}

.ab-logo picture,
.ab-logo img {
  max-height: 118px;
  max-width: 168px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.ab-logo figcaption { margin-top: 16px; text-align: center; }
.ab-logo-label { display: block; font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 15px; color: #0C1B4A; line-height: 1.25; }
.ab-logo-year { display: block; font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 11px; letter-spacing: .16em; color: var(--gold-text); margin-top: 4px; }

/* --------------------------------------------------------- archive lightbox */

.ab-lightbox {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(9, 16, 38, .88);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.ab-lightbox[hidden] { display: none; }
body.ab-lightbox-open { overflow: hidden; }

.ab-lightbox-figure { margin: 0; text-align: center; max-width: 1000px; }
.ab-lightbox-figure img { max-width: 100%; max-height: 74vh; display: block; margin: 0 auto; border-radius: 6px; }

.ab-lightbox-caption {
  font-family: 'Bricolage Grotesque';
  font-weight: 500;
  font-size: 15px;
  color: rgba(255, 255, 255, .86);
  margin-top: 18px;
}

.ab-lightbox-close {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(230, 204, 134, .5);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ab-lightbox-close:hover { background: #fff; color: var(--blue-deep); }

/* --------------------------------------------------------------------------
 * Hoisted from a <style> element in the design's page body (1 of 2).
 * A strict CSP drops an inline <style> exactly as it drops a style attribute.
 * ----------------------------------------------------------------------- */

#bookWrap{position:relative;margin:0 auto;width:min(940px,90vw);flex:none;}
      #bookShadow{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:92%;height:64px;background:radial-gradient(ellipse at center,rgba(3,7,20,.7),transparent 70%);filter:blur(7px);pointer-events:none;z-index:0;}
      /* physical page-block thickness under the open book */
      #bookWrap::before,#bookWrap::after{content:'';position:absolute;top:8px;bottom:8px;width:12px;z-index:0;border-radius:2px;background:repeating-linear-gradient(90deg,#efe6cf 0 1px,#d9c9a3 1px 2px,#eaddbd 2px 3px);box-shadow:0 10px 24px rgba(20,12,4,.4);}
      #bookWrap::before{left:-6px;transform:skewY(2.2deg);}
      #bookWrap::after{right:-6px;transform:skewY(-2.2deg);}
      /* center spine crease, sits above the pages */
      #bookSpine{position:absolute;top:0;bottom:0;left:50%;width:46px;transform:translateX(-50%);z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(40,26,8,.32) 42%,rgba(40,26,8,.42) 50%,rgba(40,26,8,.32) 58%,transparent);mix-blend-mode:multiply;}
      #book{margin:0 auto;width:100%;touch-action:pan-y;position:relative;z-index:2;}
      #book .stpage{background:linear-gradient(160deg,#fbf6ec,#e9dbbd);overflow:hidden;box-shadow:inset 0 0 60px rgba(120,92,52,.14);}
      /* soft inner-edge gutter shading on every leaf */
      #book .stpage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(70,48,18,.16),transparent 12%,transparent 88%,rgba(70,48,18,.16));}
      .stpage-inner{position:absolute;inset:0;display:flex;flex-direction:column;padding:26px 26px 0;}
      .stphoto{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
      .stphoto img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;border:1px solid rgba(120,92,52,.4);box-shadow:0 8px 22px rgba(60,40,18,.3);filter:grayscale(.16) sepia(.2) contrast(1.03);}
      .stcap{flex:none;padding:15px 6px 24px;text-align:center;font-family:'Bricolage Grotesque';font-weight:600;font-size:13.5px;color:#6b5a3c;letter-spacing:.01em;}
      .stpage.stcover{background:radial-gradient(120% 120% at 30% 20%,#1E3AA0,#0e1f4d 70%,#0a1633);}
      .stcover-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;border:1px solid rgba(230,204,134,.28);margin:14px;border-radius:4px;}
      .stpage.stblank{display:flex;align-items:center;justify-content:center;}
      .alp-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(230,204,134,.5);background:rgba(10,18,44,.55);color:#e6cc86;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease,opacity .2s ease;flex:none;}
      .alp-btn:hover{background:rgba(230,204,134,.16);transform:scale(1.06);}
      #albumIndex{font-family:'Bricolage Grotesque';font-weight:700;font-size:13px;letter-spacing:.14em;color:rgba(230,204,134,.8);text-align:center;margin-top:30px;}

/* --------------------------------------------------------------------------
 * Hoisted from a <style> element in the design's page body (2 of 2).
 * A strict CSP drops an inline <style> exactly as it drops a style attribute.
 * ----------------------------------------------------------------------- */


/* --------------------------------------------------------- timeline layout */

/*
 * The design computes each milestone's side per item, so the extractor could not lift
 * it: those were template bindings, not inline styles. The alternation is expressed
 * here instead, odd milestones with the card on the left, even ones on the right.
 *
 * Both card and image share grid row 1, which is what keeps a milestone to one row
 * rather than stacking to two.
 */
.tl-item .tl-card,
.tl-item .tl-imgcell { grid-row: 1; }

/*
 * The side a milestone takes is set as a class by the view, not with :nth-child.
 * #tlWrap opens with the spine <svg> and the two hummingbirds, so :nth-child counts
 * those too and the first milestone lands on child 4: the whole timeline came out
 * mirrored against the design.
 */
.tl-item--text-left .tl-card { grid-column: 1; text-align: left; }
.tl-item--text-left .tl-imgcell { grid-column: 2; justify-content: flex-end; }

.tl-item--text-right .tl-card { grid-column: 2; text-align: right; }
.tl-item--text-right .tl-imgcell { grid-column: 1; justify-content: flex-start; }

/*
 * The spine: a pale track carrying the whole curve, and the gold fill revealed along it
 * as the page scrolls. The path geometry is computed in about.js; only the paint lives
 * here. The design set these from script, which is needless when they never change.
 */
#tlTrack { stroke: var(--cream-3); }

#tlFill {
  stroke: var(--gold-dark);
  filter: drop-shadow(0 0 6px rgba(239, 156, 46, .45));
}

.tl-dot { transition: background .3s ease, box-shadow .3s ease; }

.tl-imgcell { display: flex; align-items: center; }

.tl-imgcell img {
  display: block;
  max-width: 92%;
  max-height: 380px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 5px solid #fff;
  box-shadow: 0 14px 34px rgba(36, 28, 18, .20);
}

/* The opening milestone runs a little larger, as designed. */
.tl-item:first-of-type .tl-imgcell img { width: 72%; max-width: 340px; height: auto; }

/* The scroll reveal slides each side in from its own edge. */
.tl-item .tl-card { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.tl-item--text-right .tl-card { transform: translateX(40px); }
.tl-item .tl-imgcell { opacity: 0; transition: opacity .7s ease .1s; }

.tl-item.in .tl-card { opacity: 1; transform: none; }
.tl-item.in .tl-imgcell { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tl-item .tl-card,
  .tl-item .tl-imgcell { opacity: 1; transform: none; }
}

/*
 * Only while the strip fallback is showing. Once the library has adopted the leaves it
 * sizes #book itself, and a min-height here fought that.
 */
#book:not([data-built]) { min-height: 620px; align-items: stretch; }

.ab-logo-plate { height: 118px; width: 100%; display: flex; align-items: center; justify-content: center; }

/*
 * An opaque base under the parchment gradient.
 *
 * The design sets `background: linear-gradient(...)`, which fills background-image but
 * leaves background-color transparent. A flat page never shows it, but while a leaf is
 * mid-turn it is composited in 3D over the page beneath, and the transparent base lets
 * that page show through: the turning plate doubled up its photo and its caption. The
 * colour is the gradient's own first stop, so nothing looks different at rest.
 */
#book .stpage,
#book .stf__item {
  background-color: #fbf6ec;
}

/*
 * The covers are dark boards. Their rule in the design is `.stpage.stcover`, which two
 * classes cannot lift above `#book .stpage`: the ID wins, so the covers were painted
 * with the parchment gradient and their gold and white type sat on cream, invisible.
 * Same colours, stated at a specificity that reaches them.
 */
#book .stpage.stcover {
  background: radial-gradient(120% 120% at 30% 20%, #1E3AA0, #0e1f4d 70%, #0a1633);
  background-color: #0e1f4d;
}

/*
 * Hide the reverse face of a turning leaf.
 *
 * page-flip writes `backface-visibility: hidden` itself, but only in its hard-page
 * path, the one the two covers use. A soft paper leaf never gets it, so once the leaf
 * rotates past square the browser paints its reverse: the same photograph and caption,
 * mirrored, showing through the lower part of the page it is turning over.
 */
#book .stf__item,
#book .stf__item .stpage-inner {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}