@import url("../tokens/colors.css");
@import url("../tokens/typography.css");
@import url("../tokens/spacing.css");
@import url("../tokens/shape.css");
@import url("../tokens/effects.css");
@import url("themes.css");
:root{
  --paw-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse fill='black' cx='50' cy='68' rx='24' ry='20'/%3E%3Cellipse fill='black' cx='18' cy='42' rx='11' ry='14' transform='rotate(-18 18 42)'/%3E%3Cellipse fill='black' cx='39' cy='21' rx='11' ry='14'/%3E%3Cellipse fill='black' cx='61' cy='21' rx='11' ry='14'/%3E%3Cellipse fill='black' cx='82' cy='42' rx='11' ry='14' transform='rotate(18 82 42)'/%3E%3C/svg%3E");
  --fx-color-1: var(--blue);
  --fx-color-2: var(--pink);
  --fx-blend-mode: screen;
  --fx-corner-alpha: 0.26;
  --fx-glow-alpha: 0.42;
  --fx-glow-blur: 30px;
  --fx-saturate: 1.10;
  --fx-contrast: 1.05;
  --fx-depth-shadow: drop-shadow(0 18px 40px rgba(0,0,0,0.12));
  --fx-glow-shadow: drop-shadow(0 0 var(--fx-glow-blur) currentColor);
  --fx-filter: saturate(var(--fx-saturate)) contrast(var(--fx-contrast)) var(--fx-glow-shadow) var(--fx-depth-shadow);
  --fx-reduce-blend-mode: normal;
  --fx-reduce-glow-alpha: 0.22;
  --fx-reduce-glow-blur: 18px;
  --fx-scroll-distance: 320px;
  --fx-scroll-speed: 1.0;
  --tri-rot: 44deg;
}
*{
  box-sizing:border-box;
}
html{
  /* iOS scroll fix */
  overscroll-behavior: none;
  background: var(--paper);
}
html.js-smooth{
  scroll-behavior:smooth;
}
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link{
  position: absolute;
  top: -80px;
  left: var(--space-4);
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-button);
  transition: top .18s var(--ease-out-soft);
}
.skip-link::after{
  content: none;
}
.skip-link:focus{
  top: var(--space-4);
  outline: none;
  box-shadow: var(--shadow-button-hover), 0 0 0 4px color-mix(in srgb, var(--blue) 35%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .skip-link{
    transition: none;
  }
}
body{
  margin:0;
  font-family: var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
section{
  padding: var(--section-padding-y) var(--section-padding-x);
}
.wrap{
  max-width: var(--content-max-width);
  margin:0 auto;
}
.section-sub{
  margin:0 0 16px;
  max-width:65ch;
  color:var(--slate);
}
h2{
  margin:0 0 16px;
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-tight);
}
p{
  margin:0 0 16px;
  max-width:65ch;
  color:var(--ink);
}
a{
  color: var(--link-color);
  font-weight: 600;
  position: relative;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 25%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s var(--ease-out-soft);
}
a:hover,
a:focus-visible{
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}
/* raquo stand-in: a pre-rotated pair of the brand's rounded-triangle
   (--tri-shape-right). Fixed orientation, unlike the randomized
   TriangleAccent blobs — this one has to actually point somewhere. */
a::after{
  content: "";
  display: inline-block;
  width: .95em;
  height: .45em;
  margin-left: .24em;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask-image: var(--tri-shape-right), var(--tri-shape-right);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: .45em .45em, .45em .45em;
  -webkit-mask-position: 0 center, .5em center;
  mask-image: var(--tri-shape-right), var(--tri-shape-right);
  mask-repeat: no-repeat, no-repeat;
  mask-size: .45em .45em, .45em .45em;
  mask-position: 0 center, .5em center;
}
@media (prefers-reduced-motion: reduce){
  a{
    transition: none;
  }
}
a:focus-visible {  outline: none;  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent);  border-radius: 2px;}

header{
  min-height:90vh;
  /* dvh: mobile fallback */
  min-height:90dvh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  background:var(--gradient-light);
  /* notch spacing */
  padding-top: env(safe-area-inset-top, 0px);
}
header .curve-divider{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  width:100%;
  height: clamp(60px, 8vw, 110px);
  display:block;
  pointer-events:none;
  z-index: 10;
}
.scroll-cue{
  position:absolute;
  left:50%;
  bottom: clamp(6px, 1.5vw, 16px);
  z-index:11;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--ink);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity: calc(.65 * (1 - var(--scroll-fade, 0)));
  transform: translateX(-50%) translateY(calc(var(--scroll-fade, 0) * 30px)) scale(calc(1 - (var(--scroll-fade, 0) * .35)));
  filter: blur(calc(var(--scroll-fade, 0) * 3px));
  transition: opacity .2s var(--ease-out-soft);
}
@media (max-width: 800px){
  .scroll-cue{
    display: none;
  }
}
.scroll-cue::after{
  content:none;
}
.scroll-cue.scroll-cue--hidden{
  pointer-events: none;
}
.scroll-cue:hover,
.scroll-cue:focus-visible{
  opacity: calc(1 - var(--scroll-fade, 0));
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{
    transform: translateX(-50%);
    filter: none;
  }
}
.scroll-cue:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent);
  border-radius:4px;
}
.scroll-cue__icon{
  font-size:16px;
  transform-origin:50% 30%;
  animation: scrollCueBounce 1.7s var(--ease-out-soft) infinite;
}
@keyframes scrollCueBounce{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(5px) rotate(12deg); }
  50%{ transform:translateY(1px) rotate(-9deg); }
  75%{ transform:translateY(4px) rotate(6deg); }
}
.scroll-cue__label{
  display:inline-flex;
}
.scroll-cue__label span{
  display:inline-block;
}
.scroll-cue:hover .scroll-cue__label span,
.scroll-cue:focus-visible .scroll-cue__label span{
  animation: scrollCueWiggle .55s var(--ease-out-soft);
}
.scroll-cue:hover .scroll-cue__label span:nth-child(1),
.scroll-cue:focus-visible .scroll-cue__label span:nth-child(1){ animation-delay:0ms; }
.scroll-cue:hover .scroll-cue__label span:nth-child(2),
.scroll-cue:focus-visible .scroll-cue__label span:nth-child(2){ animation-delay:40ms; }
.scroll-cue:hover .scroll-cue__label span:nth-child(3),
.scroll-cue:focus-visible .scroll-cue__label span:nth-child(3){ animation-delay:80ms; }
.scroll-cue:hover .scroll-cue__label span:nth-child(4),
.scroll-cue:focus-visible .scroll-cue__label span:nth-child(4){ animation-delay:120ms; }
.scroll-cue:hover .scroll-cue__label span:nth-child(5),
.scroll-cue:focus-visible .scroll-cue__label span:nth-child(5){ animation-delay:160ms; }
.scroll-cue:hover .scroll-cue__label span:nth-child(6),
.scroll-cue:focus-visible .scroll-cue__label span:nth-child(6){ animation-delay:200ms; }
@keyframes scrollCueWiggle{
  0%{ transform:translateY(0) rotate(0deg); }
  35%{ transform:translateY(-3px) rotate(-10deg); }
  65%{ transform:translateY(1px) rotate(8deg); }
  100%{ transform:translateY(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue__icon{
    animation:none;
  }
  .scroll-cue{
    transition:none;
  }
  .scroll-cue:hover .scroll-cue__label span,
  .scroll-cue:focus-visible .scroll-cue__label span{
    animation:none;
  }
}
#header .header-inner{
  min-height: 90vh;
  min-height: 90dvh; 
}
.header-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  width:100%;
  padding:48px 16px;
  gap:24px;
  align-items: stretch;
  position:relative;
  z-index:2;
  padding-bottom: clamp(70px, 9vw, 130px);
}
.header-left{
  position: relative;
  align-self:center;
  padding-top:10px;
}
.subtitle{
  margin-top:12px;
  font-size: var(--text-subtitle);
  color:var(--slate);
}
header .corner-fx-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  --corner-min: 180px;
  --corner-vw: 22vw;
  --corner-max: 420px;
  --corner-alpha: var(--fx-corner-alpha);
  --corner-glow: var(--fx-glow-alpha);
  --corner-blur: var(--fx-glow-blur);
}
header .corner-fx-layer .corner-fx{
  position:absolute !important;
  display:block !important;
  pointer-events:none !important;
  user-select:none !important;
  width: clamp(calc(var(--corner-min) * var(--corner-scale, 1)),calc(var(--corner-vw) * var(--corner-scale, 1)),calc(var(--corner-max) * var(--corner-scale, 1))) !important;
  height: clamp(calc(var(--corner-min) * var(--corner-scale, 1)),calc(var(--corner-vw) * var(--corner-scale, 1)),calc(var(--corner-max) * var(--corner-scale, 1))) !important;
  background-color: currentColor !important;
  mix-blend-mode: var(--fx-blend-mode) !important;
  opacity: var(--corner-alpha) !important;
  transform: translate3d(0, var(--fy, 0px), 0) rotate(var(--corner-rot, 0deg)) !important;
  transform-origin: var(--tri-centroid) !important;
  will-change: transform;
  filter: var(--fx-filter) !important;
}
header .corner-fx-layer .corner-fx::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background: currentColor !important;
  mix-blend-mode: var(--fx-blend-mode) !important;
  opacity: var(--corner-glow) !important;
  filter: blur(var(--corner-blur)) !important;
  pointer-events:none !important;
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  header .corner-fx-layer .corner-fx{
    clip-path: none;
    -webkit-mask-image: var(--tri-shape);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-image: var(--tri-shape);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
  }
  header .corner-fx-layer .corner-fx::after{
    clip-path: none;
    -webkit-mask-image: var(--tri-shape);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-image: var(--tri-shape);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
  }
}
@supports not (((-webkit-mask-image: url("")) or (mask-image: url("")))){
  header .corner-fx-layer .corner-fx{
    clip-path: polygon(50% 6%, 94% 94%, 6% 94%);
  }
  header .corner-fx-layer .corner-fx::after{
    clip-path: polygon(50% 6%, 94% 94%, 6% 94%);
  }
}
header .corner-fx-layer .corner-fx.corner-fx--tl{
  top: clamp(-48px, -4vw, -12px) !important;
  left: clamp(-48px, -4vw, -12px) !important;
  color: var(--fx-color-1) !important;
  --corner-scale: 2;
  --corner-rot: 16deg;
}
header .corner-fx-layer .corner-fx.corner-fx--br{
  bottom: clamp(-64px, -5vw, -18px) !important;
  right: clamp(-64px, -5vw, -18px) !important;
  color: var(--fx-color-2) !important;
  --corner-scale: 1;
  --corner-rot: -18deg;
}
@media (max-width: 520px){
  header .corner-fx-layer{
    --corner-min: 170px;
    --corner-vw: 44vw;
    --corner-max: 460px;
  }
}
.logo{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  font-size: var(--text-logo);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  white-space:nowrap;
  user-select:none;
}
.logo__static{
  font-family: var(--font-display-light);
  font-weight:normal;
  color:var(--blue);
}
.logo__dynamic{
  font-family: var(--font-display);
  font-weight:normal;
  color:var(--pink);
  display:inline-block;
}
.logo__cursor{
  display:inline-block;
  margin-left:0.08em;
  color:var(--ink);
  font-weight:300;
  transform:translateY(-0.02em);
  animation:blink 0.9s steps(1,end) infinite;
}
@keyframes blink{
  0%,49%{
    opacity:1;
  }
  50%,100%{
    opacity:0;
  }
}
.mirrored{
  display:inline-block;
  transform:scaleX(-1);
  transform-origin:center;
  margin-right:-0.06em;
  margin-left:-0.02em;
}
.photo-wrap{
  position:absolute;
  right:48px;
  bottom:0;
  height:auto;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  overflow:hidden;
  z-index: 3;
}
.photo-wrap img{
  display:block;
  max-width:92%;
  height:auto;
  filter: var(--xray-photo-filter);
  mix-blend-mode: normal;
}
.photo-ripple{
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
  z-index: 5;
  animation: rippleExpand 900ms ease-out forwards;
}
@keyframes rippleExpand{
  0%{
    transform: scale(.3);
    opacity: .55;
  }
  100%{
    transform: scale(2.6);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce){
  .photo-ripple{
    display: none;
  }
}
@keyframes whistleWiggle{
  from{
    transform: rotate(0deg) translateY(0);
  }
  to{
    transform: rotate(-10deg) translateY(-2px);
  }
}
.timeline{
  position:relative;
  margin-top:48px;
  isolation:isolate;
  --dot-y: 0px;
  --dot-x: 1px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:6px;
  /* 180deg avoids collapse */
  background: linear-gradient(180deg, var(--gradient-dark-stops));
  transform:translateX(-50%);
  z-index:0;
  border-radius: var(--radius-pill);
}
.moment{
  position:relative;
  display:grid;
  grid-template-columns:1fr 40px 1fr;
  margin-bottom:56px;
  align-items:start;
}
.moment:nth-child(odd) .card{
  grid-column:1;
  text-align:right;
}
.moment:nth-child(even) .card{
  grid-column:3;
}
.card{
  padding-top:0;
  grid-row: 1;
}
.card-head .kind{
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--slate);
}
.card-head .year{
  display:inline-flex;
  align-items:center;
  margin:0 0 8px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-weight:700;
  font-size: var(--text-eyebrow);
  line-height:1.4;
}
.moment:nth-child(odd) .card-head .year{
  background: var(--chip-pink-bg);
  color: var(--chip-pink-fg);
}
.moment:nth-child(even) .card-head .year{
  background: var(--chip-blue-bg);
  color: var(--chip-blue-fg);
}
.card-head .title{
  margin:0 0 10px;
  font-weight:700;
  color:var(--ink);
  font-size: var(--text-h3);
  line-height:1;
}
/* reads as "redacted", not just another title */
.employer-label{
  font-style: italic;
  font-weight: 700;
  color: var(--slate);
  text-decoration: underline dashed;
  text-decoration-color: color-mix(in srgb, var(--slate) 45%, transparent);
  text-underline-offset: 4px;
}
/* lives inside the shared .info-popover tooltip */
.employer-contact-btn{
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: var(--space-3);
  font-size: 14px;
  padding: 8px 14px;
}
.dot{
  grid-column:2;
  grid-row: 1;
  width:30px;
  height:30px;
  position:relative;
  justify-self:center;
  align-self:start;
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
  transform: translateX(var(--dot-x, 0px)) translateY(calc(1px + var(--dot-y, 0px))) rotate(var(--dot-rot, 0deg));
  transform-origin: var(--tri-centroid);
  z-index:2;
}
.moment:nth-child(odd) .dot{ background-color: var(--pink); }
.moment:nth-child(even) .dot{ background-color: var(--blue); }
.dot{ cursor: pointer; }
#awards,
#contact{
  position: relative;
}
#confetti-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.tri-particle{
  position: absolute;
  background-color: currentColor;
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: triBurst 650ms cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes triBurst{
  0%{
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100%{
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(.4);
    opacity: 0;
  }
}
/* z-index: below curve-divider */
.date-reveal{
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  transition: opacity 320ms var(--ease-out-soft);
}
.date-reveal.is-open{
  opacity: 1;
}
.date-reveal[hidden]{
  display: none;
}
.date-reveal::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--reveal-bg, var(--pink));
  opacity: 0;
  transition: opacity 200ms linear;
}
.date-reveal.is-open::before{
  transition-delay: 1500ms;
  opacity: 1;
}
.date-reveal__fill{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300vmax;
  height: 300vmax;
  z-index: 0;
  background: var(--reveal-bg, var(--pink));
  transform: translate(-50%, -50%) rotate(-14deg);
  -webkit-mask-image: var(--reveal-shape, var(--tri-shape));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 24px 24px;
  mask-image: var(--reveal-shape, var(--tri-shape));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 24px 24px;
}
@supports not (((-webkit-mask-image: url("")) or (mask-image: url("")))){
  .date-reveal__fill{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
  }
}
.date-reveal.is-open .date-reveal__fill{
  animation: dateRevealGrow 1600ms var(--ease-out-soft) forwards;
}
@keyframes dateRevealGrow{
  0%{
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
  }
  100%{
    -webkit-mask-size: 300vmax 300vmax;
    mask-size: 300vmax 300vmax;
  }
}
.date-reveal__icon{
  position: relative;
  z-index: 1;
  display: block;
  width: 40px;
  height: 40px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 380ms var(--ease-out-soft) 200ms;
}
/* decorative, AA exempt */
.date-reveal--tribute .date-reveal__icon{
  color: var(--paper);
}
.date-reveal.is-open .date-reveal__icon{
  opacity: 1;
}
.date-reveal__icon svg{
  display: block;
  width: 100%;
  height: 100%;
}
.date-reveal__title{
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--ink);
  max-width: 20ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-out-soft) 260ms, transform 420ms var(--ease-out-soft) 260ms;
}
.date-reveal.is-open .date-reveal__title{
  opacity: 1;
  transform: translateY(0);
}
.date-reveal__sub{
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-out-soft) 360ms, transform 420ms var(--ease-out-soft) 360ms;
}
.date-reveal.is-open .date-reveal__sub{
  opacity: 1;
  transform: translateY(0);
}
.date-reveal--tribute{
  --reveal-bg: var(--blue);
  /* deliberate motif exception */
  --reveal-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-6.5-4.35-9.5-8.5C.5 9.5 1.8 5.5 5.5 5.5c2 0 3.5 1.2 4.5 2.8C11 6.7 12.5 5.5 14.5 5.5c3.7 0 5 4 3 7-3 4.15-9.5 8.5-9.5 8.5Z'/%3E%3C/svg%3E");
}
.date-reveal--tribute.is-open .date-reveal__fill{
  animation: dateRevealGrow 1600ms var(--ease-out-soft) forwards, tributeHeartbeat 2400ms ease-in-out 1600ms infinite;
}
@keyframes tributeHeartbeat{
  0%, 100%{ transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
  15%{ transform: translate(-50%, -50%) rotate(-14deg) scale(1.035); }
  30%{ transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
  45%{ transform: translate(-50%, -50%) rotate(-14deg) scale(1.025); }
  60%{ transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}
/* timing matches app.js */
.date-reveal.is-closing .date-reveal__icon{
  animation: doveFlyAway 560ms var(--ease-out-soft) forwards;
}
@keyframes doveFlyAway{
  0%{ transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1); opacity: 1; }
  12%{ transform: translate(12px, -18px) rotate(4deg) scaleX(1.25) scaleY(.82); opacity: 1; }
  24%{ transform: translate(30px, -28px) rotate(9deg) scaleX(.82) scaleY(1.12); opacity: 1; }
  38%{ transform: translate(55px, -52px) rotate(15deg) scaleX(1.2) scaleY(.88); opacity: 1; }
  52%{ transform: translate(85px, -78px) rotate(20deg) scaleX(.85) scaleY(1.08); opacity: .9; }
  70%{ transform: translate(118px, -118px) rotate(27deg) scaleX(1.12) scaleY(.9); opacity: .5; }
  100%{ transform: translate(155px, -175px) rotate(34deg) scaleX(.55) scaleY(.55); opacity: 0; }
}
.date-reveal.is-closing .date-reveal__title,
.date-reveal.is-closing .date-reveal__sub{
  opacity: 0;
  transform: translateY(-10px);
}
.date-reveal.is-closing::before{
  transition: opacity 200ms linear 480ms;
  opacity: 0;
}
.date-reveal.is-closing .date-reveal__fill,
.date-reveal--tribute.is-closing .date-reveal__fill{
  animation: dateRevealShrink 600ms var(--ease-out-soft) 500ms forwards;
}
@keyframes dateRevealShrink{
  0%{
    -webkit-mask-size: 300vmax 300vmax;
    mask-size: 300vmax 300vmax;
  }
  100%{
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
  }
}
@media (prefers-reduced-motion: reduce){
  .date-reveal.is-closing::before,
  .date-reveal.is-closing .date-reveal__fill,
  .date-reveal--tribute.is-closing .date-reveal__fill,
  .date-reveal.is-closing .date-reveal__icon,
  .date-reveal.is-closing .date-reveal__title,
  .date-reveal.is-closing .date-reveal__sub{
    transition: none;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce){
  .date-reveal,
  .date-reveal::before,
  .date-reveal__fill,
  .date-reveal__icon,
  .date-reveal__title,
  .date-reveal__sub{
    transition: none;
    animation: none;
  }
  .date-reveal.is-open .date-reveal__fill{
    -webkit-mask-size: 300vmax 300vmax;
    mask-size: 300vmax 300vmax;
  }
  .date-reveal--tribute.is-open .date-reveal__fill{
    animation: none;
    -webkit-mask-size: 300vmax 300vmax;
    mask-size: 300vmax 300vmax;
  }
}

/* z-index: isolate context */
#pawprint-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.pawprint{
  position: absolute;
  width: clamp(90px, 11vw, 180px);
  height: clamp(90px, 11vw, 180px);
  color: var(--ink);
  background-color: currentColor;
  /* multiply for dark bg */
  mix-blend-mode: multiply;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.10)) drop-shadow(0 0 16px currentColor);
  -webkit-mask-image: var(--paw-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--paw-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  animation: pawStep 1400ms var(--ease-out-soft) forwards;
}
@keyframes pawStep{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6) rotate(var(--paw-rot, 0deg));
  }
  20%{
    opacity: calc(var(--fx-corner-alpha) * 0.7);
    transform: translate(-50%, -50%) scale(1) rotate(var(--paw-rot, 0deg));
  }
  75%{
    opacity: calc(var(--fx-corner-alpha) * 0.7);
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(1) rotate(var(--paw-rot, 0deg));
  }
}
/* specificity beats base rule */
.polaroid.ref-polaroid{
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transform: rotate(460deg) translate(260px, 180px) scale(.5);
}
.polaroid.ref-polaroid.is-shown{
  opacity: 1;
  transform: rotate(0deg) translate(0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .polaroid.ref-polaroid{ transition: none; }
}

.bottom-toast{
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 9999;
  transform: translate(-50%, 10px);
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms var(--ease-out-soft), transform 380ms var(--ease-out-soft);
}
.bottom-toast.is-shown{
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce){
  .bottom-toast{ transition: none; }
}
.dot--pop{
  animation: dotPop 260ms var(--ease-out-soft);
}
@keyframes dotPop{
  0%, 100%{ filter: none; }
  50%{ filter: brightness(1.5); }
}
@media (prefers-reduced-motion: reduce){
  .tri-particle{
    animation: none;
    display: none;
  }
}
.moment:nth-child(12n+1){ --dot-rot: 17deg; }
.moment:nth-child(12n+2){ --dot-rot: 63deg; }
.moment:nth-child(12n+3){ --dot-rot: 101deg; }
.moment:nth-child(12n+4){ --dot-rot: 146deg; }
.moment:nth-child(12n+5){ --dot-rot: 199deg; }
.moment:nth-child(12n+6){ --dot-rot: 218deg; }
.moment:nth-child(12n+7){ --dot-rot: 254deg; }
.moment:nth-child(12n+8){ --dot-rot: 299deg; }
.moment:nth-child(12n+9){ --dot-rot: 333deg; }
.moment:nth-child(12n+10){ --dot-rot: 38deg; }
.moment:nth-child(12n+11){ --dot-rot: 172deg; }
.moment:nth-child(12n+12){ --dot-rot: 281deg; }

/* populated by JS only */
.contact-drop{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  padding-bottom: var(--space-9);
  overflow: hidden;
  opacity: 0;
  transition: opacity 320ms var(--ease-out-soft);
}
.contact-drop.is-open{
  opacity: 1;
}
.contact-drop.is-closing{
  opacity: 0;
}
.contact-drop[hidden]{
  display: none;
}
/* oversized: avoids corner gaps */
.contact-drop__reveal{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300vmax;
  height: 300vmax;
  z-index: 0;
  background-color: var(--blue);
  transform: translate(-50%, -50%) rotate(-14deg);
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 24px 24px;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 24px 24px;
}
@supports not (((-webkit-mask-image: url("")) or (mask-image: url("")))){
  .contact-drop__reveal{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
  }
}
.contact-drop.is-open .contact-drop__reveal{
  animation: contactTriangleGrow 1600ms var(--ease-out-soft) forwards;
}
@keyframes contactTriangleGrow{
  0%{
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
  }
  100%{
    -webkit-mask-size: 300vmax 300vmax;
    mask-size: 300vmax 300vmax;
  }
}
.contact-drop::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--blue);
  opacity: 0;
  transition: opacity 200ms linear;
}
.contact-drop.is-open::before{
  transition-delay: 1500ms;
  opacity: 1;
}
/* same size/border/background as .story-viewer__close */
.contact-drop__close{
  position: absolute;
  z-index: 1;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--paper) 35%, transparent);
  background: color-mix(in srgb, var(--ink) 24%, transparent);
  color: var(--paper);
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: box-shadow .18s var(--ease-out-soft), background .18s var(--ease-out-soft), transform .22s var(--ease-out-soft);
}
.contact-drop__close:hover{
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}
.contact-drop__close:active{
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  box-shadow: var(--shadow-button-active);
  transform: translateY(0);
}
.contact-drop__close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--paper) 70%, transparent);
}
/* AA exception, documented */
.contact-drop__item{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--paper);
  font-weight: 800;
  font-size: clamp(32px, 12vw, 110px);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  text-decoration: none;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(-140vh) rotate(0deg);
}
.contact-drop__item::after{
  content: none;
}
.contact-drop__item:hover{
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.contact-drop__item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 4px;
}
.contact-drop__item--email{
  --fall-rot: -6deg;
}
.contact-drop__item--phone{
  --fall-rot: 4deg;
}
/* bounce: deliberate exception */
.contact-drop.is-open .contact-drop__item{
  animation: contactFall 1150ms 1400ms forwards;
}
.contact-drop.is-open .contact-drop__item--phone{
  animation-delay: 1600ms;
}
@keyframes contactFall{
  0%{
    transform: translateY(-140vh) rotate(0deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  6%{ opacity: 1; }
  55%{
    transform: translateY(0) rotate(var(--fall-rot));
    animation-timing-function: ease-out;
  }
  70%{
    transform: translateY(-7%) rotate(calc(var(--fall-rot) * -0.5));
    animation-timing-function: ease-in;
  }
  85%{
    transform: translateY(0) rotate(calc(var(--fall-rot) * 1.15));
    animation-timing-function: ease-out;
  }
  95%{
    transform: translateY(-2%) rotate(calc(var(--fall-rot) * 0.9));
    animation-timing-function: ease-in;
  }
  100%{
    transform: translateY(0) rotate(var(--fall-rot));
    opacity: 1;
  }
}
.contact-drop__caption{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  max-width: 80vw;
  margin: 0;
  text-align: center;
  color: var(--paper);
  font-weight: 700;
  font-size: clamp(18px, 4vw, 32px);
  letter-spacing: var(--tracking-tight);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(14px);
  transition: opacity 520ms var(--ease-out-soft), transform 520ms var(--ease-out-soft);
}
.contact-drop.is-open .contact-drop__caption{
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  transition-delay: 1500ms;
}
.contact-drop__confetti{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.contact-drop__confetti-piece{
  position: absolute;
  background-color: currentColor;
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  opacity: 0;
  transform: rotate(var(--piece-rot, 0deg)) scale(.4);
  transition: opacity 420ms var(--ease-out-soft), transform 420ms var(--ease-out-soft);
}
.contact-drop.is-open .contact-drop__confetti-piece{
  opacity: .85;
  transform: rotate(var(--piece-rot, 0deg)) scale(1);
  transition-delay: 1550ms;
}
/* blue invisible on blue */
.contact-drop__confetti-piece--1{ top: 32%; left: 28%; width: 18px; height: 18px; color: var(--pink); --piece-rot: -20deg; }
.contact-drop__confetti-piece--2{ top: 28%; left: 68%; width: 13px; height: 13px; color: var(--paper); --piece-rot: 35deg; }
.contact-drop__confetti-piece--3{ top: 46%; left: 20%; width: 11px; height: 11px; color: var(--paper); --piece-rot: 60deg; }
.contact-drop__confetti-piece--4{ top: 44%; left: 76%; width: 20px; height: 20px; color: var(--pink); --piece-rot: -45deg; }
.contact-drop__confetti-piece--5{ top: 60%; left: 32%; width: 14px; height: 14px; color: var(--pink); --piece-rot: 15deg; }
.contact-drop__confetti-piece--6{ top: 62%; left: 66%; width: 16px; height: 16px; color: var(--paper); --piece-rot: -70deg; }
.contact-drop__ambient{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.contact-drop__amb{
  position: absolute;
  background-color: var(--pink);
  mix-blend-mode: screen;
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  opacity: 0;
  transition: opacity 600ms var(--ease-out-soft);
}
.contact-drop.is-open .contact-drop__amb{
  opacity: .22;
  transition-delay: 1500ms;
}
.contact-drop__amb--a{
  top: -18%;
  left: -16%;
  width: clamp(500px, 46vw, 1800px);
  height: clamp(500px, 46vw, 1800px);
  --amp-x: 90px;
  --amp-y: 30px;
  --r: -12deg;
  --dur: 24s;
  --delay: -3s;
  animation: carFloat var(--dur) cubic-bezier(.45,0,.25,1) var(--delay) infinite;
}
.contact-drop__amb--b{
  bottom: -22%;
  right: -14%;
  width: clamp(400px, 38vw, 1500px);
  height: clamp(400px, 38vw, 1500px);
  --amp-x: 80px;
  --amp-y: 26px;
  --r: 20deg;
  --dur: 27s;
  --delay: -9s;
  animation: carFloat var(--dur) cubic-bezier(.45,0,.25,1) var(--delay) infinite;
}
.contact-drop__amb--c{
  top: 38%;
  left: 58%;
  width: clamp(280px, 26vw, 1000px);
  height: clamp(280px, 26vw, 1000px);
  --amp-x: 60px;
  --amp-y: 22px;
  --r: 8deg;
  --dur: 19s;
  --delay: -6s;
  animation: carFloat var(--dur) cubic-bezier(.45,0,.25,1) var(--delay) infinite;
}
@media (prefers-reduced-motion: reduce){
  .contact-drop{
    transition: none;
  }
  .contact-drop__reveal{
    -webkit-mask-image: none;
    mask-image: none;
    transform: none;
  }
  .contact-drop.is-open .contact-drop__reveal{
    animation: none;
  }
  .contact-drop.is-open .contact-drop__item{
    animation: none;
    opacity: 1;
    transform: rotate(var(--fall-rot));
  }
  .contact-drop__close,
  .contact-drop__item,
  .contact-drop__caption,
  .contact-drop__confetti-piece{
    transition: none;
  }
  .contact-drop__close:hover{
    transform: none;
  }
  .contact-drop__caption{
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .contact-drop.is-open .contact-drop__confetti-piece{
    transform: rotate(var(--piece-rot, 0deg)) scale(1);
  }
  .contact-drop__amb{
    animation: none;
    transition: none;
  }
  .contact-drop.is-open .contact-drop__amb{
    opacity: .22;
  }
}
@media(max-width:800px){
  .header-inner{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    padding:44px 16px;
  }
  .photo-wrap{
    height: 100%;
    align-self: stretch;
    margin-top: 0;
  }
  .timeline {
    --dot-y: 6px;
    --dot-x: -1px;
  }
  .timeline::before{
    left:8px;
    transform:none;
  }
  .moment{
    grid-template-columns:24px 1fr;
  }
  .dot{
    grid-column:1;
    grid-row: 1;
    width:20px;
    height:20px;
    transform: translateX(var(--dot-x, 0px)) translateY(calc(1px + var(--dot-y, 0px))) rotate(var(--dot-rot, 0deg));
  }
  .card{
    grid-column:2 !important;
    text-align:left !important;
  }
}
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  .logo__cursor{
    animation:none;
    opacity:1;
  }
  header .corner-fx-layer .corner-fx{
    mix-blend-mode: var(--fx-reduce-blend-mode) !important;
  }
  header .corner-fx-layer .corner-fx::after{
    opacity: var(--fx-reduce-glow-alpha) !important;
    filter: blur(var(--fx-reduce-glow-blur)) !important;
  }
}
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  padding: 13px 22px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  transition:transform .16s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background:linear-gradient(120deg,color-mix(in srgb, var(--blue) 30%, transparent),color-mix(in srgb, var(--pink) 26%, transparent));
  filter: blur(14px);
  opacity: 0;
  transform: scale(.96);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index:-1;
}
.btn::after{
  content: none;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.14);
}
.btn:hover::before{
  opacity: .9;
  transform: scale(1);
}
.btn:active{
  transform: translateY(0);
  box-shadow: var(--shadow-button-active);
}
.btn:focus-visible{
  outline: none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 35%, transparent),0 14px 30px rgba(0,0,0,.14);
}
.btn:disabled,.btn[aria-disabled="true"],.btn.is-disabled{
  opacity: .55;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
.btn--primary{
  background: var(--gradient-light);
  border-color: var(--ink);
}
.btn--secondary{
  background:linear-gradient(120deg,var(--blue),color-mix(in srgb, var(--blue) 78%, black));
  color: var(--ink);
  border-color: var(--blue);
}
.btn--pink{
  background:linear-gradient(120deg,var(--pink),color-mix(in srgb, var(--pink) 78%, black));
  color: var(--ink);
  border-color: var(--pink);
}
.btn--pink:focus-visible{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pink) 42%, transparent),0 14px 30px rgba(0,0,0,.14);
}
.btn--success{
  background:linear-gradient(120deg,var(--success),color-mix(in srgb, var(--success) 78%, black));
  /* ink: paper fails AA */
  color: var(--ink);
  border-color: var(--success);
}
.btn--success:focus-visible{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--success) 42%, transparent),0 14px 30px rgba(0,0,0,.14);
}
.btn--warning{
  background:linear-gradient(120deg,var(--warning),color-mix(in srgb, var(--warning) 78%, black));
  color: var(--ink);
  border-color: var(--warning);
}
.btn--warning:focus-visible{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--warning) 42%, transparent),0 14px 30px rgba(0,0,0,.14);
}
.btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 1.05em;
  line-height: 1;
}
.btn--icon-left .btn__icon{
  order:-1;
}
.btn--icon-right .btn__icon{
  order:2;
}
.btn--icon{
  width: 44px;
  height: 44px;
  padding: 0;
}
@media (prefers-reduced-motion: reduce){
  .btn{
    transition: none;
  }
  .btn:hover{
    transform: none;
  }
  .btn::before{
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce){
  .btn{
    transition:none;
  }
  .btn:hover{
    transform:none;
  }
  .btn::before{
    transition:none;
  }
}
.more[data-collapsible] {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
  height 320ms cubic-bezier(0.2, 0.0, 0.0, 1),
  opacity 220ms ease;
  will-change: height;
}
.more[data-collapsible].is-open {
  opacity: 1;
}
.readmore:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .more[data-collapsible] {
  transition: none;
  }
}
.timeline .summary {
  font-size: 15px;
  line-height: 1.45;
  color: var(--slate);
  margin-bottom: 12px;
  transition:
  opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
  transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline .more {
  position: relative;
  margin-top: 6px;
}
.timeline .card:has(.more.is-open) .summary {
  color: var(--slate) !important;
  transition-duration: 220ms;
}
.timeline .more-inner {
  padding-top: 14px;
  border-top: 2px solid var(--border-hairline-strong);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.timeline .actions {
  padding-top: 14px;
}
.moment:nth-child(odd) .actions {
  justify-content: flex-end;
}
.timeline .card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
}
.timeline .card p:last-child {
  margin-bottom: 0;
}
.tribute-quote {
  background: var(--fog);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
.tribute-quote__icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--pink);
  margin: 0 0 var(--space-2);
}
.tribute-quote__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tribute-quote p {
  margin: 0 0 var(--space-1);
  font-size: 15px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
}
.tribute-quote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--slate);
}
.timeline .card h4 {
  margin: 20px 0 8px;
  font-size: var(--text-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.timeline .role{
  margin-top: var(--space-5);
}
.timeline .role:first-child{
  margin-top: var(--space-2);
}
.timeline .role-head{
  margin-bottom: var(--space-2);
}
.timeline .role-title{
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: var(--tracking-tight);
}
.timeline .role-date{
  display: block;
  margin-bottom: var(--space-1);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--slate);
  white-space: nowrap;
}
#career{
  position: relative;
  isolation: isolate;
  padding-bottom: var(--space-5);
}
#career > .wrap{
  position: relative;
  z-index: 1;
}
@keyframes carFloat{
  0%{
    transform: translate3d(calc(-1 * var(--amp-x)), 0, 0) rotate(var(--r));
  }
  25%{
    transform: translate3d(calc(-0.3 * var(--amp-x)), calc(-1 * var(--amp-y)), 0)
      rotate(calc(var(--r) + 10deg));
  }
  50%{
    transform: translate3d(var(--amp-x), 0, 0)
      rotate(calc(var(--r) + 18deg));
  }
  75%{
    transform: translate3d(calc(0.25 * var(--amp-x)), var(--amp-y), 0)
      rotate(calc(var(--r) + 8deg));
  }
  100%{
    transform: translate3d(calc(-1 * var(--amp-x)), 0, 0) rotate(var(--r));
  }
}

#timeline-more{
  padding: var(--space-3) var(--section-padding-x) var(--space-6);
  text-align: center;
}
.timeline-more__text{
  margin: 0 auto;
  max-width: 40ch;
  color: var(--ink);
}
.timeline-more__text i{
  color: var(--pink);
}

.ambient-region{
  position: relative;
  isolation: isolate;
  /* clip avoids scroll trap */
  overflow: clip;
  --ambient-parallax: 0px;
}
.ambient-fx-layer{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.ambient-fx{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  transform: translate3d(var(--ambient-parallax), 0, 0);
  will-change: transform;
  color: var(--c);
  opacity: calc(var(--fx-corner-alpha) * 0.7);
  mix-blend-mode: var(--fx-blend-mode);
  filter:
    saturate(var(--fx-saturate))
    contrast(var(--fx-contrast));
}
.ambient-fx::before,
.ambient-fx::after{
  content:"";
  position:absolute;
  inset:0;
  background-color: currentColor;
  transform-origin: var(--tri-centroid);
  will-change: transform, opacity;
}
.ambient-fx::before{
  animation: carFloat var(--dur) cubic-bezier(.45,0,.25,1) var(--delay) infinite;
  filter:
    drop-shadow(0 18px 42px rgba(0,0,0,0.12))
    drop-shadow(0 0 calc(var(--fx-glow-blur) * 0.85) currentColor);
}
.ambient-fx::after{
  opacity: calc(var(--fx-glow-alpha) * 0.55);
  filter: blur(calc(var(--fx-glow-blur) * 0.85));
  animation: carFloat var(--dur) cubic-bezier(.45,0,.25,1) var(--delay) infinite;
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .ambient-fx::before,
  .ambient-fx::after{
    clip-path: none;
    -webkit-mask-image: var(--tri-shape);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-image: var(--tri-shape);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
  }
}
@supports not (((-webkit-mask-image: url("")) or (mask-image: url("")))){
  .ambient-fx::before,
  .ambient-fx::after{
    clip-path: polygon(50% 6%, 94% 94%, 6% 94%);
  }
}
.ambient-fx--1{
  --x: -16%;
  --y: 4%;
  --size: clamp(400px, 36vw, 1400px);
  --amp-x: 90px;
  --amp-y: 28px;
  --dur: 23s;
  --delay: -2s;
  --r: -16deg;
  --c: var(--fx-color-1);
}
.ambient-fx--2{
  --x: -22%;
  --y: 40%;
  --size: clamp(600px, 50vw, 2000px);
  --amp-x: 120px;
  --amp-y: 34px;
  --dur: 22s;
  --delay: -6s;
  --r: 14deg;
  --c: var(--fx-color-2);
}
.ambient-fx--3{
  --x: 60%;
  --y: 58%;
  --size: clamp(400px, 40vw, 1600px);
  --amp-x: 88px;
  --amp-y: 26px;
  --dur: 20s;
  --delay: -9s;
  --r: -10deg;
  --c: var(--fx-color-1);
}
.ambient-fx--4{
  --x: 64%;
  --y: 80%;
  --size: clamp(400px, 34vw, 1300px);
  --amp-x: 70px;
  --amp-y: 22px;
  --dur: 19s;
  --delay: -4s;
  --r: 18deg;
  --c: var(--fx-color-2);
}
@media (max-width: 800px){
  .ambient-fx{
    opacity: calc(var(--fx-corner-alpha) * 0.55);
  }
  .ambient-fx::after{
    opacity: calc(var(--fx-glow-alpha) * 0.4);
    filter: blur(calc(var(--fx-glow-blur) * 0.6));
  }
}
@media (prefers-reduced-motion: reduce){
  .ambient-region{
    --ambient-parallax: 0px;
  }
  .ambient-fx{
    opacity: calc(var(--fx-corner-alpha) * 0.35);
  }
  .ambient-fx::after{
    opacity: calc(var(--fx-glow-alpha) * 0.25);
  }
  .ambient-fx::before,
  .ambient-fx::after{
    animation: none;
    transform: rotate(var(--r));
  }
}

#about{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.about-fx{
  position: absolute;
  background-color: currentColor;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.about-fx--a{
  --fx-size: clamp(180px, 24vw, 340px);
  width: var(--fx-size);
  height: var(--fx-size);
  left: 88%;
  bottom: 6%;
  margin-left: calc(var(--fx-size) / -2);
  color: var(--pink);
  opacity: .24;
  --amp-x: 36px;
  --amp-y: 14px;
  --r: -14deg;
  --dur: 24s;
  --delay: -6s;
  animation: carFloat var(--dur) cubic-bezier(.45,0,.25,1) var(--delay) infinite;
}
@media (prefers-reduced-motion: reduce){
  .about-fx--a{
    animation: none;
  }
}
.about-inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-7);
  align-items: center;
}
.eyebrow{
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.about-content p{
  font-size: var(--text-subtitle);
  line-height: 1.6;
  color: var(--ink);
  max-width: 62ch;
}
.whistle-icon{
  display: inline-block;
  width: 22px;
  height: auto;
  vertical-align: -4px;
  color: var(--blue);
  fill: currentColor;
  margin: 0 2px;
  transform-origin: 85% 55%;
  transform-box: fill-box;
}
.about-content p:hover .whistle-icon{
  animation: whistleWiggle 180ms ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){
  .about-content p:hover .whistle-icon{
    animation: none;
  }
}
/* shared pill-chip look between About's tags and Skills' chips */
.about-focus,
.skills-chips{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.about-focus li,
.skills-chips li{
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.skills-chips li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.skills-chips li i{
  color: var(--blue);
  font-size: 13px;
}
.about-photos{
  position: relative;
  display: flex;
  justify-content: center;
}
.polaroid-pile{
  position: relative;
  width: clamp(200px, 22vw, 260px);
  height: clamp(240px, 26vw, 320px);
  cursor: pointer;
}
.polaroid-pile:hover .polaroid[aria-hidden="false"]{
  box-shadow: var(--shadow-card-hover);
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), calc(var(--ty, 0px) - 4px));
}
.polaroid-pile:active .polaroid[aria-hidden="false"]{
  box-shadow: var(--shadow-card-active);
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), var(--ty, 0px));
}
.polaroid-pile:focus-visible{
  outline: none;
}
.polaroid-pile:focus-visible .polaroid[aria-hidden="false"]{
  box-shadow: var(--shadow-card-hover), 0 0 0 4px color-mix(in srgb, var(--blue) 35%, transparent);
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), calc(var(--ty, 0px) - 4px));
}
@media (prefers-reduced-motion: reduce){
  .polaroid-pile:hover .polaroid[aria-hidden="false"],
  .polaroid-pile:focus-visible .polaroid[aria-hidden="false"]{
    transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), var(--ty, 0px));
  }
}
.polaroid{
  position: absolute;
  inset: 0;
  margin: auto;
  padding: 12px 12px 0;
  /* opaque white needed */
  background: #FFFFFF;
  border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0px), var(--ty, 0px));
  z-index: var(--z, 1);
  transition: transform 550ms var(--ease-out-soft), box-shadow .2s var(--ease-out-soft), opacity 380ms ease-in;
}
.polaroid img{
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 6px);
}
.polaroid-caption{
  flex: 0 0 auto;
  padding: 10px 4px 16px;
  text-align: center;
  /* avoids synthetic italic */
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
}
.polaroid.polaroid--exit{
  transition: transform 480ms var(--ease-out-soft), opacity 420ms var(--ease-out-soft);
  transform: rotate(calc(var(--rot, 0deg) + 460deg)) translate(calc(var(--tx, 0px) + 260px), calc(var(--ty, 0px) + 180px)) scale(.5);
  opacity: 0;
  z-index: 50;
}
@media (prefers-reduced-motion: reduce){
  .polaroid{
    transition: none;
  }
}
@media (max-width: 800px){
  .about-inner{
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .about-photos{
    order: -1;
  }
}

/* shared by Recognition and Skills & services */
.tile-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
}
/* non-clickable: no hover lift */
.tile-card{
  position: relative;
  background: var(--fog);
  border-radius: var(--radius-md);
  /* extra top clearance for the badge peeking over the corner below */
  padding: var(--space-6) var(--space-4) var(--space-4);
  box-shadow: var(--shadow-card);
  margin: 0;
  transform: rotate(var(--card-rot, 0deg));
}
/* icon sits above the masked triangle so it never gets clipped */
.tile-badge{
  position: absolute;
  top: -16px;
  left: -16px;
  width: 40px;
  height: 40px;
  z-index: 1;
}
.tile-badge::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pink);
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
  transform: rotate(var(--tri-rot, 0deg));
  transform-origin: var(--tri-centroid);
}
/* 63%, not --tri-centroid's 69% — icon glyphs sit higher than the raw centroid */
.tile-badge i{
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: var(--paper);
  font-size: 10px;
  line-height: 1;
}
.tile-badge--blue::before{
  background: var(--blue);
}
.tile-badge--teal::before{
  background: var(--rainbow-teal);
}
.tile-badge--purple::before{
  background: var(--rainbow-purple);
}
/* second grid in the Skills & services section, sitting below the chip row */
.skills-services-grid{
  margin-top: var(--space-6);
}
/* matches .role-date in the career "more" panels */
.tile-year{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--slate);
  margin-bottom: var(--space-1);
}
.tile-title{
  font-size: var(--text-h5);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.tile-card p{
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.tile-card--quote{
  grid-column: span 2;
  display: block;
  overflow: hidden;
  padding-top: var(--space-4);
}
.tile-quote-mark{
  display: block;
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  color: var(--pink);
  margin: 0 0 4px;
}
/* same size and weight as .tile-title, not just size — italic alone
   reads lighter at equal size. Needs the compound selector to beat
   .tile-card p's specificity. */
.tile-card--quote .tile-quote-text{
  font-size: var(--text-h5);
  font-weight: 800;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  max-width: none;
}
.tile-card--quote cite{
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  color: var(--slate);
}
/* oversized watermark echoing the small opening mark up top, sitting
   behind the copy so it reads as texture, not a second competing mark */
.tile-card--quote::after{
  content: "\201D";
  position: absolute;
  right: 8px;
  bottom: -80px;
  font-weight: 800;
  font-size: 180px;
  line-height: 1;
  color: var(--pink);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.tile-card--quote > *{
  position: relative;
  z-index: 1;
}
@media (max-width: 700px){
  .tile-card--quote{
    grid-column: span 1;
  }
}

.stories-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}
.stories-head .section-sub{
  flex: 1 1 320px;
  margin-bottom: 0;
}
.stories-nav{
  position: relative;
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
  margin-left: auto;
}
.stories-nav__btn{
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-button);
  cursor: pointer;
  transition: box-shadow .18s var(--ease-out-soft), transform .16s var(--ease-out-soft), opacity .18s var(--ease-out-soft);
}
.stories-nav__btn:hover{
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}
.stories-nav__btn:active{
  box-shadow: var(--shadow-button-active);
  transform: translateY(0);
}
.stories-nav__btn:focus-visible{
  outline: none;
  box-shadow: var(--shadow-button-hover), 0 0 0 4px color-mix(in srgb, var(--blue) 35%, transparent);
}
.stories-nav__btn:disabled{
  opacity: .35;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .stories-nav__btn{
  transition: none;
  }
  .stories-nav__btn:hover{
  transform: none;
  }
}
#projects{
  position: relative;
  isolation: isolate;
  padding-bottom: 0;
}
.stories-viewport{
}
.stories{
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3) var(--space-8);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* must match padding above */
  scroll-padding-left: var(--space-3);
  scroll-padding-right: var(--space-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.stories::-webkit-scrollbar{
  display: none;
}
.stories:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent);
  border-radius: var(--radius-md);
}
.story{
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 22vw, 220px);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: var(--fog);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  font-family: inherit;
  text-align: left;
  transition: transform .22s var(--ease-out-soft), box-shadow .22s var(--ease-out-soft);
}
.story:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.story:active{
  transform: translateY(0);
  box-shadow: var(--shadow-card-active);
}
.story:focus-visible{
  outline: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover), 0 0 0 4px color-mix(in srgb, var(--story-accent, var(--blue)) 42%, transparent);
}
.story-media{
  position: absolute;
  inset: 0;
  display: block;
}
.story-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--xray-photo-filter);
  transition: filter var(--duration-base) var(--ease-out-soft);
}
.story:hover .story-media img,
.story:focus-visible .story-media img{
  filter: none;
}
@media (prefers-reduced-motion: reduce){
  .story-media img{
    transition: none;
  }
}
.story-media::after{
  content: "";
  position: absolute;
  inset: -20%;
  background: var(--story-accent, var(--pink));
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 130% 130%;
  -webkit-mask-position: 60% 25%;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 130% 130%;
  mask-position: 60% 25%;
  transform: rotate(var(--tri-rot, -18deg));
  transition: opacity var(--duration-base) var(--ease-out-soft);
  pointer-events: none;
}
.story:hover .story-media::after,
.story:focus-visible .story-media::after{
  opacity: .6;
}
.story-media--flat{
  display: grid;
  place-items: center;
  background: var(--gradient-blue);
}
.story--cta .story-media--flat,
.story-media--dark{
  background: var(--gradient-dark);
}
.story-media--pink{
  background: var(--gradient-pink);
}
.story-media--flat::after{
  background: var(--blue);
}
.story-flower{
  width: 34%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.2));
}
.story-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 88%, transparent) 0%, transparent 75%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.story-title{
  font-weight: 800;
  font-size: var(--text-h5);
  color: var(--paper);
  letter-spacing: var(--tracking-tight);
}
.story-tags{
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--paper) 75%, transparent);
}
.reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 480ms var(--ease-out-soft), transform 480ms var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
  /* without its own layer, an animating rounded-corner card can render
     square mid-transition — cleared by app.js once the reveal ends */
  will-change: transform, opacity;
}
.story.reveal{
  transform: translateY(48px);
  transition: opacity 560ms var(--ease-out-soft), transform 560ms var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{
  transition: none;
  opacity: 1;
  transform: none;
  will-change: auto;
  }
  .story{
  transition: none;
  }
  .story:hover, .story:focus-visible{
  transform: none;
  }
  .story-media::after{
  transition: none;
  }
}

.story-viewer{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  --panel-w: clamp(300px, 90vw, 420px);
}
.story-viewer[hidden]{
  display: none;
}
.story-viewer__backdrop{
  position: absolute;
  inset: 0;
  /* opacity, not color-mix */
  background: var(--gradient-dark);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-soft);
}
.story-viewer.is-open .story-viewer__backdrop{
  opacity: .82;
}
.story-viewer__panel{
  position: relative;
  /* aspect-ratio unreliable here */
  width: var(--panel-w);
  height: min(88vh, calc(var(--panel-w) * 16 / 9));
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-float);
  transform: scale(.94) translateY(12px);
  opacity: 0;
  transition: transform var(--duration-base) var(--ease-out-soft), opacity var(--duration-base) var(--ease-out-soft);
}
.story-viewer.is-open .story-viewer__panel{
  transform: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .story-viewer__backdrop,
  .story-viewer__panel,
  .story-viewer__nav{
  transition: none;
  }
}
.story-viewer__progress{
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  /* 40px matches .story-viewer__close's own width */
  right: calc(var(--space-3) + 40px + var(--space-2));
  height: 40px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.story-viewer__seg{
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 35%, transparent);
}
.story-viewer__seg.is-active{
  background: var(--paper);
}
.story-viewer__close,
.story-viewer__nav{
  position: absolute;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-button);
  cursor: pointer;
  transition: box-shadow .18s var(--ease-out-soft), background .18s var(--ease-out-soft), border-color .18s var(--ease-out-soft), transform .16s var(--ease-out-soft), opacity var(--duration-base) var(--ease-out-soft);
}
.story-viewer__close{
  border: 2px solid color-mix(in srgb, var(--paper) 35%, transparent);
  background: color-mix(in srgb, var(--ink) 24%, transparent);
  color: var(--paper);
}
.story-viewer__close:hover{
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}
.story-viewer__close:active{
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  box-shadow: var(--shadow-button-active);
  transform: translateY(0);
}
.story-viewer__nav{
  border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
}
.story-viewer.is-open .story-viewer__nav{
  opacity: 1;
}
.story-viewer__close{
  top: var(--space-3);
  right: var(--space-3);
  z-index: 6;
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.story-viewer__nav{
  /* renders outside overflow:hidden */
  top: 50%;
  z-index: 6;
  width: 40px;
  height: 40px;
}
.story-viewer__nav--prev{
  left: 50%;
  transform: translate(calc(-100% - (var(--panel-w) / 2) - var(--space-3)), -50%);
}
.story-viewer__nav--next{
  left: calc(50% + (var(--panel-w) / 2) + var(--space-3));
  transform: translateY(-50%);
}
.story-viewer__nav--prev:hover{
  transform: translate(calc(-100% - (var(--panel-w) / 2) - var(--space-3)), calc(-50% - 1px));
  box-shadow: var(--shadow-button-hover);
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.story-viewer__nav--next:hover{
  transform: translateY(calc(-50% - 1px));
  box-shadow: var(--shadow-button-hover);
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.story-viewer__nav--prev:active{
  transform: translate(calc(-100% - (var(--panel-w) / 2) - var(--space-3)), -50%);
  box-shadow: var(--shadow-button-active);
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.story-viewer__nav--next:active{
  transform: translateY(-50%);
  box-shadow: var(--shadow-button-active);
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.story-viewer__close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--paper) 70%, transparent);
}
.story-viewer__nav:focus-visible{
  outline: none;
  box-shadow: var(--shadow-button-hover), 0 0 0 4px color-mix(in srgb, var(--blue) 35%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .story-viewer__close,
  .story-viewer__nav{
  transition: none;
  }
  .story-viewer__close:hover,
  .story-viewer__close:active{
  transform: none;
  }
  .story-viewer__nav--prev:hover{
  transform: translate(calc(-100% - (var(--panel-w) / 2) - var(--space-3)), -50%);
  }
  .story-viewer__nav--next:hover{
  transform: translateY(-50%);
  }
}
@media (max-width: 520px){
  .story-viewer{
  padding: var(--space-3);
  }
}
@media (max-width: 700px){
  .story-viewer__nav{
  top: 20%;
  width: 34px;
  height: 34px;
  }
  .story-viewer__nav--prev{
  left: var(--space-2);
  transform: translateY(-50%);
  }
  .story-viewer__nav--next{
  left: auto;
  right: var(--space-2);
  transform: translateY(-50%);
  }
}
/* hidden, but AT-reachable */
@media (hover: none) and (pointer: coarse){
  .story-viewer__nav{
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
.story-viewer__swipe-hint{
  display: none;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
  z-index: 5;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  pointer-events: none;
}
@media (hover: none) and (pointer: coarse){
  .story-viewer__swipe-hint{
    display: inline-flex;
  }
}
.story-viewer__slides{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform var(--duration-slow) var(--ease-out-soft);
}
@media (prefers-reduced-motion: reduce){
  .story-viewer__slides{
  transition: none;
  }
}
.story-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.story-slide__media{
  position: relative;
  flex: 1 1 auto;
  min-height: 38%;
  overflow: hidden;
  background: var(--fog);
  cursor: pointer;
}
.story-slide__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-pos, 50% 50%);
}
.story-slide__media::after{
  content: "";
  position: absolute;
  inset: -20%;
  background: var(--slide-accent, var(--pink));
  mix-blend-mode: screen;
  opacity: .55;
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 120% 120%;
  -webkit-mask-position: 65% 30%;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 120% 120%;
  mask-position: 65% 30%;
  transform: rotate(var(--tri-rot, -18deg));
  pointer-events: none;
}
.story-slide__media--flat{
  display: grid;
  place-items: center;
  background: var(--gradient-blue);
}
.story-slide--cta .story-slide__media--flat,
.story-slide__media--dark{
  background: var(--gradient-dark);
}
.story-slide__media--pink{
  background: var(--gradient-pink);
}
.story-slide__media--flat::after{
  background: var(--blue);
  opacity: .35;
}
.story-slide__media--flat .story-flower{
  width: 30%;
}
.story-slide__body{
  flex: 0 0 auto;
  min-height: 26%;
  max-height: 58%;
  overflow-y: auto;
  /* explicit: with overflow-y set, a "visible" x-axis silently
     computes to auto and can grow its own horizontal scrollbar */
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 25%, transparent) transparent;
  padding: var(--space-4);
  background: var(--paper);
}
.story-slide__body::-webkit-scrollbar{
  width: 5px;
}
.story-slide__body::-webkit-scrollbar-track{
  background: transparent;
}
.story-slide__body::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: var(--radius-pill);
}
.story-slide__body::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--ink) 40%, transparent);
}
.story-slide__title{
  font-size: var(--text-h4);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--space-1);
}
.story-slide__tags{
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-bottom: var(--space-3);
}
.story-slide__body p{
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--ink);
  max-width: none;
  margin: 0 0 var(--space-3);
}
.story-slide__body > *:last-child{
  margin-bottom: 0;
}
.story-slide__body .btn{
  margin-top: var(--space-2);
}

.story-slide__pic{
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-3);
}
.story-slide__video{
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--fog);
  margin: 0 0 var(--space-3);
}
.story-slide__video--horizontal{
  aspect-ratio: 16 / 9;
}
.story-slide__video--vertical{
  aspect-ratio: 9 / 16;
  max-width: 55%;
  margin-left: auto;
  margin-right: auto;
}
.story-slide__video video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--fog);
}
/* stacked for horizontal media, side-by-side for vertical/portrait */
.story-media-caption{
  display: flex;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.story-media-caption--horizontal{
  flex-direction: column;
}
.story-media-caption--vertical{
  flex-direction: row;
  /* stretch, not center — the watermark below sizes off this box's
     actual height, not its own two lines of text */
  align-items: stretch;
}
.story-media-caption--vertical.story-media-caption--flip{
  flex-direction: row-reverse;
}
.story-media-caption > .story-slide__video,
.story-media-caption > .story-slide__media{
  margin: 0;
}
.story-media-caption--vertical > .story-slide__video--vertical{
  max-width: 45%;
  margin: 0;
  flex: 0 0 auto;
}
.story-media-caption__body{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 3px;
  align-content: center;
}
/* triangle marker instead of a colored left border, per brand rule */
.story-media-caption__mark{
  grid-row: 1 / 3;
  align-self: start;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: var(--slide-accent, var(--pink));
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
  transform-origin: var(--tri-centroid);
  transform: rotate(var(--tri-rot, -12deg));
}
.story-media-caption__title{
  grid-column: 2;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
/* unclipped on purpose, so the watermark triangle below isn't cut off
   by this column — the video sibling keeps z-index priority regardless */
.story-media-caption--vertical .story-media-caption__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  gap: 3px;
  position: relative;
  padding: var(--space-3) var(--space-2);
}
.story-media-caption--vertical .story-media-caption__body::before{
  content: "";
  position: absolute;
  top: 50%;
  left: var(--tri-x, 50%);
  /* sized off the box itself, not vw — vw doesn't track the modal's capped width */
  width: min(210px, 80%);
  height: min(210px, 80%);
  background: var(--tri-color, var(--slide-accent, var(--pink)));
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
  opacity: .14;
  transform: translate(-50%, -50%) rotate(var(--tri-rot, -12deg));
  transform-origin: center;
  animation: captionWatermarkDrift 20s cubic-bezier(.45,0,.25,1) infinite;
  pointer-events: none;
  z-index: 0;
}
.story-media-caption--vertical .story-media-caption__title,
.story-media-caption--vertical .story-media-caption__desc{
  position: relative;
  z-index: 1;
}
.story-media-caption--vertical > .story-slide__video--vertical{
  z-index: 1;
}
@keyframes captionWatermarkDrift{
  0%{
    transform: translate(calc(-50% - 4px), -50%) rotate(var(--tri-rot, -12deg));
  }
  25%{
    transform: translate(calc(-50% + 1px), calc(-50% - 3px)) rotate(calc(var(--tri-rot, -12deg) + 2deg));
  }
  50%{
    transform: translate(calc(-50% + 4px), -50%) rotate(calc(var(--tri-rot, -12deg) + 3deg));
  }
  75%{
    transform: translate(calc(-50% + 1px), calc(-50% + 3px)) rotate(calc(var(--tri-rot, -12deg) + 1deg));
  }
  100%{
    transform: translate(calc(-50% - 4px), -50%) rotate(var(--tri-rot, -12deg));
  }
}
@media (prefers-reduced-motion: reduce){
  .story-media-caption--vertical .story-media-caption__body::before{
    animation: none;
    transform: translate(-50%, -50%) rotate(var(--tri-rot, -12deg));
  }
}
.story-media-caption__desc{
  grid-column: 2;
  font-size: 13px;
  line-height: 1.4;
  color: var(--slate);
}
@media (max-width: 480px){
  .story-media-caption--vertical > .story-slide__video--vertical{
    max-width: 62%;
  }
  .story-media-caption--vertical .story-media-caption__body::before{
    width: min(110px, 85%);
    height: min(110px, 85%);
  }
  .story-media-caption--vertical .story-media-caption__title{
    font-size: 12px;
  }
  .story-media-caption--vertical .story-media-caption__desc{
    font-size: 11px;
  }
}
/* injected by app.js over each video while it buffers on first play */
.video-loader{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out-soft);
}
.video-loader.is-active{
  opacity: 1;
}
.video-loader__spinner{
  width: 30px;
  height: 30px;
  background: var(--paper);
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
  transform-origin: var(--tri-centroid);
  animation: videoLoaderSpin 900ms linear infinite;
}
.video-loader__label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
}
@keyframes videoLoaderSpin{
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .video-loader{
    transition: none;
  }
  .video-loader__spinner{
    animation: none;
  }
}
.story-slide__quote{
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--space-3);
  padding: var(--space-4);
  background: var(--fog);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.story-slide__quote::before{
  content: "\201C";
  display: block;
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  color: var(--slide-accent, var(--pink));
  margin-bottom: 2px;
}
.story-slide__quote-text{
  position: relative;
  z-index: 1;
}
/* same corner-watermark idea as the Recognition pull-quote card, scaled
   down to fit this narrower panel */
.story-slide__quote::after{
  content: "\201D";
  position: absolute;
  /* offset has to clear --radius-md or the rounded corner clips the glyph.
     font-style has to be reset too — it inherits italic from the parent,
     which was slanting the glyph into the clip. */
  right: calc(var(--radius-md) + 4px);
  bottom: calc(var(--radius-md) - 8px);
  font-style: normal;
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  color: var(--slide-accent, var(--pink));
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.story-slide__quote cite{
  display: block;
  position: relative;
  z-index: 1;
  margin-top: var(--space-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--slate);
}
.story-slide__inline-pic{
  float: right;
  width: 38%;
  margin: 0 0 var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
@media (max-width: 520px){
  .story-slide__inline-pic{
  float: none;
  width: 100%;
  margin: 0 0 var(--space-2);
  }
}

#site-footer{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient-dark);
  color: var(--paper);
  padding-top: clamp(70px, 9vw, 120px);
  padding-right: var(--section-padding-x);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  padding-left: var(--section-padding-x);
}
.footer-divider{
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(60px, 8vw, 110px);
  transform: scaleY(-1);
  display: block;
  pointer-events: none;
  z-index: 1;
}
.footer-fx-layer{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.footer-fx{
  position: absolute;
  top: 0;
  left: 0;
  background-color: currentColor;
  mix-blend-mode: screen;
  -webkit-mask-image: var(--tri-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--tri-shape);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.footer-fx--a{
  top: -8%;
  left: -8%;
  width: clamp(220px, 30vw, 420px);
  height: clamp(220px, 30vw, 420px);
  color: var(--blue);
  opacity: .22;
  --amp-x: 70px;
  --amp-y: 24px;
  --r: 18deg;
  --dur: 22s;
  --delay: -4s;
  animation: carFloat var(--dur) cubic-bezier(.45,0,.25,1) var(--delay) infinite;
}
.footer-fx--b{
  bottom: -12%;
  right: -6%;
  top: auto;
  left: auto;
  width: clamp(180px, 26vw, 360px);
  height: clamp(180px, 26vw, 360px);
  color: var(--pink);
  opacity: .2;
  --amp-x: 60px;
  --amp-y: 20px;
  --r: -24deg;
  --dur: 26s;
  --delay: -10s;
  animation: carFloat var(--dur) cubic-bezier(.45,0,.25,1) var(--delay) infinite;
}
.footer-fx--cursor{
  width: clamp(80px, 12vw, 160px);
  height: clamp(80px, 12vw, 160px);
  color: var(--pink);
  opacity: 0;
  transition: opacity .4s var(--ease-out-soft);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .footer-fx--a,
  .footer-fx--b{
  animation: none;
  }
  .footer-fx--cursor{
  display: none;
  }
}
@media (max-width: 800px){
  .footer-fx--cursor{
  display: none;
  }
}
.footer-inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid color-mix(in srgb, var(--paper) 18%, transparent);
}
.footer-logo{
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: var(--tracking-tight);
  color: var(--paper);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.footer-logo:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent);
  border-radius: 4px;
}
.footer-logo .logo__static{
  font-family: var(--font-display-light);
  color: var(--blue);
}
.footer-logo .mirrored{
  display: inline-block;
  transform: scaleX(-1);
  transform-origin: center;
}
.footer-tagline{
  margin: var(--space-2) 0 0;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  font-size: 14px;
  max-width: 32ch;
}
.footer-tooltip{
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--paper);
  max-width: 32ch;
}
.footer-heading{
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  margin: 0 0 var(--space-3);
}
.footer-social{
  position: relative;
  display: flex;
  gap: var(--space-2);
}
.footer-social a{
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--paper) 35%, transparent);
  background: transparent;
  color: var(--paper);
  font-size: 16px;
  text-decoration: none;
  transition: background .18s var(--ease-out-soft), border-color .18s var(--ease-out-soft), transform .18s var(--ease-out-soft);
}
.footer-social a::after{
  content: none;
}
.footer-social a:hover{
  background: color-mix(in srgb, var(--paper) 16%, transparent);
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
  transform: translateY(-1px);
}
.footer-social a:active{
  background: color-mix(in srgb, var(--paper) 16%, transparent);
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
  transform: translateY(0);
}
.footer-social a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent);
}
.footer-col{
  display: flex;
  flex-direction: column;
}
.footer-link{
  color: var(--paper);
  font-weight: 600;
  width: fit-content;
  margin: 0 0 var(--space-2);
}
.footer-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent);
  border-radius: 2px;
}
.footer-bottom{
  position: relative;
  z-index: 2;
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.footer-copy{
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  max-width: none;
}
.footer-dedication{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: var(--space-1) 0 0;
  font-size: 12px;
  /* measured: 58% clears AA */
  color: color-mix(in srgb, var(--paper) 58%, transparent);
  max-width: none;
}
.footer-dedication__icon{
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  color: color-mix(in srgb, var(--pink) 70%, transparent);
}
.footer-dedication__icon svg{
  display: block;
  width: 100%;
  height: 100%;
}
/* wrap: badge only, not text */
.info-term{
  position: relative;
  display: inline-block;
}
.info-badge{
  /* not inline-flex: baseline bug */
  display: inline-block;
  position: relative;
  width: .9em;
  height: .9em;
  vertical-align: middle;
  margin-left: .2em;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--ink);
  font: inherit;
  cursor: help;
  padding: 0;
  /* measured in real browser */
  transform: translateY(-0.107em);
  transition: background .16s var(--ease-out-soft);
}
/* position:relative anchor */
.info-badge__mark{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .48em;
  font-weight: 700;
  line-height: 1;
}
/* text "?" sits higher than box-center (unused descender space) —
   icon-based marks already center correctly, so this skips those */
.info-badge__mark:not(:has(i)){
  top: 54%;
}
.info-badge:hover{
  background: color-mix(in srgb, var(--blue) 80%, black);
}
.info-badge--dark{
  background: var(--ink);
  color: var(--paper);
}
.info-badge--dark:hover{
  background: color-mix(in srgb, var(--ink) 80%, transparent);
}
.info-badge:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent);
}
/* needs opaque paper layer */
.info-popover{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: min(260px, calc(100vw - 40px));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--gradient-light), var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.45;
  text-align: left;
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translate(calc(-50% + var(--popover-shift, 0px)), 6px) scale(.94);
  transition: opacity 220ms var(--ease-out-soft), transform 220ms var(--ease-out-soft), visibility 220ms;
}
.info-popover__label{
  font-weight: 700;
}
.info-popover.is-shown{
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-50% + var(--popover-shift, 0px)), 0) scale(1);
}
/* auto-set by app.js */
.info-popover--below{
  bottom: auto;
  top: calc(100% + 10px);
  transform: translate(calc(-50% + var(--popover-shift, 0px)), -6px) scale(.94);
}
.info-popover--below.is-shown{
  transform: translate(calc(-50% + var(--popover-shift, 0px)), 0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .info-popover{
    transition: none;
  }
}
@media (max-width: 700px){
  .footer-inner{
  grid-template-columns: 1fr;
  gap: var(--space-5);
  }
  .footer-bottom{
  flex-direction: column;
  align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce){
  .footer-social a{
  transition: none;
  }
  .footer-social a:hover{
  transform: none;
  }
}