/* V3: a layered city folio. Load after styles.css; scoped to the new axis article. */
.axis-rich{
  --axis-p:0;
  --axis-note-paper:color-mix(in srgb,var(--scene-bg,var(--paper)) 94%,transparent);
  --map-water:#8caaa0;
  background:var(--scene-bg,var(--paper));
  overflow:hidden;
}
.axis-rich .axis-page-rule{position:absolute;inset:10.5% 4% 12.8%;border:1px solid var(--gold);opacity:.17;pointer-events:none}
.axis-rich .axis-page-rule::before,.axis-rich .axis-page-rule::after{content:"";position:absolute;width:28px;height:28px;border-color:var(--red);border-style:solid;opacity:.6}
.axis-rich .axis-page-rule::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
.axis-rich .axis-page-rule::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.axis-rich .axis-rich-ornament{position:absolute;left:-7%;top:30%;width:43%;opacity:.07;mix-blend-mode:multiply;pointer-events:none;transform:rotate(-10deg) translateX(calc(var(--axis-p,0) * -22px))}
.axis-rich .axis-copy{position:absolute;left:var(--pad);top:13%;width:32%;max-width:455px;z-index:7;transform:none}
.axis-rich .axis-copy .eyebrow{margin:0 0 17px;font-size:10px;letter-spacing:.14em}
.axis-rich .axis-copy h2{font-size:clamp(47px,4.7vw,74px);line-height:1.16;letter-spacing:-.045em}
.axis-rich .axis-copy>p:not(.eyebrow){margin:23px 0 0;font-size:13px;line-height:1.9;letter-spacing:.025em;color:var(--muted)}
.axis-rich .axis-notes{position:absolute;left:var(--pad);top:44%;width:30%;max-width:435px;z-index:7;display:grid;gap:18px}
.axis-rich .axis-reading-note{display:grid;grid-template-columns:29px 1fr;gap:14px;align-items:start;padding-left:1px}
.axis-rich .axis-note-seal{display:grid;place-items:center;width:28px;height:31px;outline:1px solid var(--gold);outline-offset:3px;border:1px solid var(--gold);font:15px/1 var(--display);color:var(--red);margin-top:4px}
.axis-rich .axis-reading-note h3{font:15px/1.4 var(--display);letter-spacing:.07em;color:var(--red)}
.axis-rich .axis-reading-note p{font-size:12px;line-height:1.7;letter-spacing:.015em;color:var(--muted);margin-top:4px}
.axis-rich .city-plan{position:absolute;left:auto;right:3.8%;top:10%;bottom:auto;width:61%;height:74%;z-index:3;transform:none;clip-path:none;mix-blend-mode:normal;isolation:isolate;background:var(--scene-bg,var(--paper))}
.axis-rich .axis-plan-heading{position:absolute;left:12%;right:2%;top:2%;display:flex;gap:16px;align-items:center;z-index:6;font-size:11px;letter-spacing:.11em;color:var(--red)}
.axis-rich .axis-plan-heading i{height:1px;flex:1;background:var(--gold);opacity:.55}
.axis-rich .axis-plan-heading>span:last-child{font:10px var(--body);letter-spacing:.1em;color:var(--muted)}
.axis-rich .axis-map-plane{position:absolute;inset:1% 0 7% 11%;opacity:.76;transform:perspective(1100px) rotateX(calc(var(--map-tilt,0deg) * .45)) rotateZ(calc(var(--map-turn,0deg) * .45)) translateY(calc(var(--map-y,0px) * .3));transform-origin:50% 58%;will-change:transform}
.axis-rich .city-plan .axis-urban-plate{position:static;display:block;width:100%;height:100%;overflow:visible;transform:none;opacity:1}
.axis-rich .city-plan .axis-urban-plate path{stroke-dasharray:none;stroke-dashoffset:0}
.axis-rich .city-plan .axis-urban-plate .axis-line{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:480;stroke-dashoffset:var(--axis-dash,480)}
.axis-rich .city-plan .axis-urban-plate .axis-mark{fill:var(--red);stroke:var(--cream);stroke-width:3;opacity:var(--axis-nodes,1)}
.axis-rich .axis-map-label{font:19px var(--display);fill:var(--ink);letter-spacing:.12em}
.axis-rich .axis-map-red{fill:var(--red)}
.axis-rich .axis-map-small{font:13px var(--body);fill:var(--muted);letter-spacing:.1em}
.axis-rich .axis-gate-plate{position:absolute;width:99%;right:-3%;bottom:-2%;z-index:3;mix-blend-mode:multiply;transform:translateY(calc(var(--axis-p,0) * -24px)) rotate(calc(var(--axis-p,0) * -.55deg));transform-origin:50% 70%;will-change:transform}
.axis-rich .axis-gate-plate img{width:100%;max-width:none;height:auto;filter:saturate(.77) sepia(.1);mask-image:radial-gradient(ellipse at 50% 54%,var(--ink) 53%,transparent 78%)}
.axis-rich .axis-ritual-inset{position:absolute;right:1%;top:35%;width:98px;z-index:5;padding:9px 8px 7px;background:var(--axis-note-paper);border-left:1px solid var(--gold);transform:translateY(calc(var(--axis-p,0) * 15px))}
.axis-rich .axis-ritual-inset img{width:66px;height:109px;margin:auto;object-fit:contain;mix-blend-mode:multiply}
.axis-rich .axis-ritual-inset figcaption{font:12px/1.4 var(--display);text-align:center;margin-top:8px;color:var(--red)}
.axis-rich .axis-ritual-inset small{display:block;font:11px/1.5 var(--body);letter-spacing:.06em;color:var(--muted);margin-top:3px}
.axis-rich .axis-spatial-note{position:absolute;right:4%;bottom:0;z-index:6;font-size:11px;letter-spacing:.05em;color:var(--muted);padding:5px 9px;background:var(--axis-note-paper)}
.axis-rich .axis-time-strip{position:absolute;left:var(--pad);width:44%;max-width:635px;bottom:14%;z-index:8}
.axis-rich .axis-time-heading{display:flex;gap:13px;align-items:center;color:var(--red);font-size:11px;letter-spacing:.1em;margin-bottom:12px}
.axis-rich .axis-time-heading i{height:1px;width:60px;background:var(--gold);opacity:.55}
.axis-rich .axis-time-heading>span:last-child{color:var(--muted);font-size:11px;letter-spacing:.025em}
.axis-rich .axis-time-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.axis-rich .axis-time-scene{min-width:0;transform:translateY(calc(var(--axis-p,0) * var(--time-drift,-10px)));will-change:transform}
.axis-rich .axis-time-scene:nth-child(2){--time-drift:-16px}
.axis-rich .axis-time-scene:nth-child(3){--time-drift:-5px}
.axis-rich .axis-time-scene>img{width:100%;height:92px;object-fit:contain;mix-blend-mode:multiply;filter:sepia(.08) saturate(.82);mask-image:radial-gradient(ellipse,var(--ink) 41%,transparent 75%)}
.axis-rich .axis-time-scene figcaption{display:flex;align-items:center;gap:10px;padding:7px 0 0 7px}
.axis-rich .axis-time-scene b{font:29px/1.15 var(--display);color:var(--red)}
.axis-rich .axis-time-scene figcaption>span{font:12px/1.5 var(--body);letter-spacing:.06em}
.axis-rich .axis-time-scene small{display:block;font-size:11px;line-height:1.5;color:var(--muted);letter-spacing:0;margin-top:2px}
.axis-rich .ceremony-band{position:absolute;left:-2%;bottom:-1%;width:105%;max-width:none;height:13%;object-fit:cover;object-position:50% 65%;opacity:.28;mix-blend-mode:multiply;mask-image:linear-gradient(transparent,var(--ink) 39%);transform:translateX(calc(var(--procession-x,0px) * .42));z-index:1}
.axis-rich .axis-bottom-caption{position:absolute;right:var(--pad);bottom:2.8%;font-size:11px!important;line-height:1.6;letter-spacing:.04em;color:var(--muted);z-index:6}
.axis-rich:not(.is-current) :is(.axis-notes,.axis-plan-heading,.axis-spatial-note,.axis-time-heading,.axis-time-scene figcaption,.axis-ritual-inset figcaption,.axis-bottom-caption){visibility:hidden}

@media(min-width:1700px){
  .axis-rich .axis-copy{top:15%;width:31%;max-width:520px}
  .axis-rich .axis-copy h2{font-size:85px}
  .axis-rich .axis-notes{top:46%;gap:23px}
  .axis-rich .city-plan{width:63%;height:77%;top:9%;right:3%}
  .axis-rich .axis-time-strip{width:43%;max-width:760px}
  .axis-rich .axis-time-scene>img{height:110px}
}
@media(max-width:1100px) and (min-width:801px){
  .axis-rich .axis-copy{top:13%;width:36%}
  .axis-rich .axis-copy h2{font-size:49px}
  .axis-rich .axis-copy>p:not(.eyebrow){font-size:12px;line-height:1.8}
  .axis-rich .axis-notes{top:43%;width:33%;gap:14px}
  .axis-rich .axis-reading-note{grid-template-columns:24px 1fr;gap:12px}
  .axis-rich .axis-note-seal{width:23px;height:27px;font-size:13px}
  .axis-rich .axis-reading-note h3{font-size:14px}
  .axis-rich .axis-reading-note p{font-size:11px}
  .axis-rich .city-plan{width:62%;height:70%;top:14%;right:1%}
  .axis-rich .axis-ritual-inset{width:82px;right:0;top:31%}
  .axis-rich .axis-ritual-inset img{height:95px;width:56px}
  .axis-rich .axis-time-strip{width:49%;bottom:13%}
  .axis-rich .axis-time-images{gap:11px}
  .axis-rich .axis-time-scene>img{height:78px}
}
@media(max-width:800px){
  .axis-rich .axis-page-rule{inset:10% 3.7% 12.7%}
  .axis-rich .axis-copy{left:var(--pad);top:12%;width:49%;max-width:none}
  .axis-rich .axis-copy h2{font-size:clamp(41px,6.4vw,53px)}
  .axis-rich .axis-copy .eyebrow{font-size:9px;margin-bottom:14px}
  .axis-rich .axis-copy>p:not(.eyebrow){font-size:12px;line-height:1.8;margin-top:18px}
  .axis-rich .city-plan{top:26%;right:2%;width:74%;height:45%}
  .axis-rich .axis-map-plane{inset:0 0 5% 15%;opacity:.64}
  .axis-rich .axis-gate-plate{width:103%;right:-4%;bottom:-1%}
  .axis-rich .axis-plan-heading{top:-1%;font-size:10px}
  .axis-rich .axis-plan-heading>span:last-child{font-size:9px}
  .axis-rich .axis-ritual-inset{right:0;top:17%;width:79px}
  .axis-rich .axis-ritual-inset img{height:83px;width:50px}
  .axis-rich .axis-ritual-inset small{font-size:10px}
  .axis-rich .axis-notes{left:var(--pad);right:var(--pad);top:66%;width:auto;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}
  .axis-rich .axis-reading-note{grid-template-columns:22px 1fr;gap:11px}
  .axis-rich .axis-note-seal{width:21px;height:26px;font-size:12px}
  .axis-rich .axis-reading-note h3{font-size:14px}
  .axis-rich .axis-reading-note p{font-size:11px;line-height:1.7}
  .axis-rich .axis-spatial-note{right:1%;bottom:-4%;font-size:10px}
  .axis-rich .axis-time-strip{left:var(--pad);right:var(--pad);width:auto;max-width:none;bottom:13.3%}
  .axis-rich .axis-time-scene>img{height:79px}
  .axis-rich .axis-time-images{gap:22px}
  .axis-rich .axis-time-scene figcaption{padding-top:4px}
  .axis-rich .axis-time-heading{margin-bottom:7px}
  .axis-rich .axis-bottom-caption{font-size:10px!important}
  .axis-rich .ceremony-band{height:12%}
}
@media(max-width:600px){
  .axis-rich .axis-page-rule{inset:10.3% 3.8% 12.3%;opacity:.13}
  .axis-rich .axis-copy{top:11.3%;left:var(--pad);right:29px;width:auto}
  .axis-rich .axis-copy .eyebrow{font-size:9px;letter-spacing:.09em;margin-bottom:10px}
  .axis-rich .axis-copy h2{font-size:37px;line-height:1.12}
  .axis-rich .axis-copy>p:not(.eyebrow){font-size:11.5px;line-height:1.7;letter-spacing:.01em;margin-top:12px}
  .axis-rich .axis-rich-ornament{top:15%;left:-14%;width:80%;opacity:.05}
  .axis-rich .city-plan{left:9%;right:auto;top:28%;width:87%;height:34.5%}
  .axis-rich .axis-plan-heading{top:0;left:15%;right:2%;font-size:10px;gap:8px;letter-spacing:.04em}
  .axis-rich .axis-plan-heading>span:last-child{font-size:8px;letter-spacing:.03em}
  .axis-rich .axis-map-plane{inset:-2% -3% 3% 5%;opacity:.7}
  .axis-rich .axis-map-label{font-size:29px;letter-spacing:.06em}
  .axis-rich .axis-map-small{font-size:22px;letter-spacing:.04em}
  .axis-rich .axis-gate-plate{width:110%;right:-3%;bottom:0;transform:translateY(calc(var(--axis-p,0) * -10px))}
  .axis-rich .axis-gate-plate img{mask-image:radial-gradient(ellipse at 50% 51%,var(--ink) 50%,transparent 80%)}
  .axis-rich .axis-ritual-inset{display:none}
  .axis-rich .axis-spatial-note{font-size:9px;right:0;bottom:-1%;padding:3px 5px;letter-spacing:0}
  .axis-rich .axis-notes{left:var(--pad);right:var(--pad);top:63.2%;gap:12px}
  .axis-rich .axis-reading-note{display:block;padding:0;border-top:1px solid var(--gold);padding-top:7px;background:none}
  .axis-rich .axis-note-seal{display:none}
  .axis-rich .axis-reading-note h3{font-size:12.5px;line-height:1.4;letter-spacing:.03em}
  .axis-rich .axis-reading-note p{font-size:11px;line-height:1.55;letter-spacing:0;margin-top:4px}
  .axis-rich .axis-time-strip{bottom:12%;left:var(--pad);right:var(--pad)}
  .axis-rich .axis-time-heading{font-size:10px;gap:8px;letter-spacing:.06em;margin-bottom:4px}
  .axis-rich .axis-time-heading i{width:25px}
  .axis-rich .axis-time-heading>span:last-child{font-size:10px;letter-spacing:0}
  .axis-rich .axis-time-images{gap:7px}
  .axis-rich .axis-time-scene>img{height:61px}
  .axis-rich .axis-time-scene figcaption{gap:5px;padding:2px 0 0}
  .axis-rich .axis-time-scene b{font-size:22px;line-height:1.1}
  .axis-rich .axis-time-scene figcaption>span{font-size:11px;line-height:1.35;letter-spacing:0}
  .axis-rich .axis-time-scene small{font-size:10px;line-height:1.35;margin-top:2px;white-space:nowrap}
  .axis-rich .ceremony-band{height:11%;width:113%;left:-6.5%;opacity:.23;object-position:50% 72%}
  .axis-rich .axis-bottom-caption{left:var(--pad);right:auto;bottom:2.7%;max-width:70%;font-size:9px!important;line-height:1.5;letter-spacing:.01em}
}
@media(max-width:360px){
  .axis-rich .axis-copy{top:11.2%}
  .axis-rich .axis-copy h2{font-size:32px}
  .axis-rich .axis-copy .eyebrow{font-size:8.5px;margin-bottom:8px}
  .axis-rich .axis-copy>p:not(.eyebrow){font-size:11px;margin-top:10px;line-height:1.6}
  .axis-rich .city-plan{top:28.5%;height:33.8%;left:8%;width:88%}
  .axis-rich .axis-plan-heading{font-size:9px}
  .axis-rich .axis-plan-heading>span:last-child{font-size:7px}
  .axis-rich .axis-notes{top:63%;gap:9px}
  .axis-rich .axis-reading-note h3{font-size:12px}
  .axis-rich .axis-reading-note p{font-size:11px;line-height:1.5}
  .axis-rich .axis-time-scene>img{height:51px}
  .axis-rich .axis-time-scene b{font-size:20px}
  .axis-rich .axis-time-scene small{font-size:9px}
  .axis-rich .axis-time-heading{font-size:9.5px}
  .axis-rich .axis-time-heading>span:last-child{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){
  .axis-rich :is(.axis-map-plane,.axis-gate-plate,.axis-ritual-inset,.axis-time-scene,.axis-rich-ornament,.ceremony-band){transform:none!important;will-change:auto}
}