/* An interactive engraving: native radio inputs keep every view usable without JavaScript. */
.visually-hidden,.perspective-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.intersection{--ease-in-out:cubic-bezier(.77,0,.175,1);position:relative;min-width:0;margin:52px 0 0;padding:28px 0 23px;border:0;border-block:1px solid #596d5f}
.intersection-toolbar{display:flex;justify-content:space-between;align-items:center;gap:28px}
.intersection-toolbar>.eyebrow{font-size:.75rem;color:#c4cec1;letter-spacing:.095em}
.intersection-spark{font-size:1.65rem;font-weight:400;color:#d5a282;line-height:1}
.perspective-switch{display:grid;grid-template-columns:repeat(3,1fr);position:relative;isolation:isolate;width:360px;flex-shrink:0;padding:4px;border:1px solid #617567;border-radius:28px}
.perspective-switch label,.perspective-switch-active span{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:.8125rem;line-height:1.2;white-space:nowrap;text-align:center}
.perspective-switch label{cursor:pointer;color:#d0d8cd;transition:transform 160ms var(--ease);border-radius:24px;-webkit-tap-highlight-color:transparent}
.perspective-switch label:active{transform:scale(.97)}
.perspective-switch-active{position:absolute;inset:4px;display:grid;grid-template-columns:repeat(3,1fr);background:#d5ddce;color:var(--forest);pointer-events:none;clip-path:inset(0 33.3333% 0 33.3333% round 24px);transition:clip-path 250ms var(--ease-in-out)}
#view-law:checked~.intersection-toolbar .perspective-switch-active{clip-path:inset(0 66.6667% 0 0 round 24px)}
#view-ai:checked~.intersection-toolbar .perspective-switch-active{clip-path:inset(0 0 0 66.6667% round 24px)}
#view-law:focus-visible~.intersection-toolbar label[for="view-law"],
#view-intersection:focus-visible~.intersection-toolbar label[for="view-intersection"],
#view-ai:focus-visible~.intersection-toolbar label[for="view-ai"]{outline:2px solid #edc5a8;outline-offset:6px}
.intersection-content{display:grid;grid-template-columns:1.25fr 1fr;gap:7%;align-items:center;padding-block:18px 26px}
.intersection-drawing{min-width:0;background:radial-gradient(ellipse at 50% 50%,#66816b12 0,transparent 67%)}
.intersection-art{display:block;width:100%;height:auto;overflow:visible}
.drawing-guides{color:#a9b8a0;opacity:.38}
.sculpture{transform-origin:330px 212px;transition:transform 600ms var(--ease-in-out),opacity 250ms var(--ease)}
.sculpture-law{stroke:#cbd6bd;opacity:.88;transform:translateX(-70px) rotate(-33deg)}
.sculpture-ai{stroke:#d5a282;opacity:.85;transform:translateX(70px) rotate(33deg)}
#view-law:checked~.intersection-content .sculpture-law{transform:translateX(-8px) rotate(-8deg) scale(1.08);opacity:1}
#view-law:checked~.intersection-content .sculpture-ai{transform:translateX(145px) rotate(62deg) scale(.78);opacity:.2}
#view-ai:checked~.intersection-content .sculpture-ai{transform:translateX(8px) rotate(8deg) scale(1.08);opacity:1}
#view-ai:checked~.intersection-content .sculpture-law{transform:translateX(-145px) rotate(-62deg) scale(.78);opacity:.2}
.intersection-center text{fill:#dce3d5;font:13px var(--sans);letter-spacing:.02em}
.intersection-center{transform-origin:330px 212px}
.art-label{font:11px var(--sans);fill:#c4cec1;letter-spacing:.12em;transition:opacity 200ms var(--ease)}
.art-label-ai{fill:#d5a282}
#view-law:checked~.intersection-content .art-label-ai,#view-ai:checked~.intersection-content .art-label-law{opacity:.4}
.perspective-stories{display:grid;min-width:0;align-items:start;padding-block:22px}
.perspective-story{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
#view-law:checked~.intersection-content .story-law,
#view-intersection:checked~.intersection-content .story-intersection,
#view-ai:checked~.intersection-content .story-ai{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}
.story-kicker{font-size:.75rem;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:#c4cec1;margin-bottom:19px}
.perspective-story h3{font-size:clamp(2.6rem,4vw,3.8rem);line-height:1.08;letter-spacing:-.025em}
.perspective-story h3 em{color:#d5a282}
.perspective-story>p:not(.story-kicker){font-size:1rem;line-height:1.85;color:#d0d8cd;margin-top:23px;max-width:390px;text-wrap:pretty}
.perspective-story .text-link{margin-top:23px;gap:22px;font-size:.875rem;color:#e3e8da}
.intersection-caption{display:flex;align-items:center;justify-content:space-between;gap:25px;color:#c4cec1;font-size:.75rem;line-height:1.6}
.intersection-caption>span:first-child{font-family:var(--serif);font-size:1.2rem;font-style:italic;color:#d5ddce}
.intersection-caption>span:last-child>span{margin-left:12px}
@media(hover:hover) and (pointer:fine){.perspective-switch label:hover{color:#fff}}
@media(max-width:1150px){
  .intersection-content{grid-template-columns:1.1fr 1fr;gap:5%}
  .perspective-story h3{font-size:3rem}
}
@media(max-width:900px){
  .intersection-content{gap:5%;grid-template-columns:1fr 1fr}
  .perspective-story h3{font-size:2.6rem}
  .perspective-story .text-link{font-size:.8125rem;gap:15px}
  .perspective-switch{width:330px}
  .intersection-art{width:calc(100% + 35px);max-width:none;margin-left:-17.5px}
  .intersection-center{transform:scale(1.5)}
  .intersection-center text{font-size:14px}
  .art-label{display:none}
}
@media(max-width:700px){
  .intersection{margin-top:36px;padding-top:25px}
  .intersection-toolbar{align-items:stretch;flex-direction:column;gap:23px}
  .perspective-switch{width:100%;max-width:390px;align-self:center}
  .perspective-switch label,.perspective-switch-active span{font-size:.8125rem;min-height:46px}
  .intersection-content{grid-template-columns:1fr;gap:0;padding-block:5px 32px}
  .intersection-drawing{width:100%;max-width:470px;justify-self:center}
  .intersection-art{width:100%;margin:0}
  .intersection-center{transform:scale(1.7)}
  .perspective-stories{padding:0;max-width:440px}
  .perspective-story h3{font-size:2.9rem}
  .story-kicker{margin-bottom:17px}
  .perspective-story>p:not(.story-kicker){margin-top:20px;max-width:100%}
  .perspective-story .text-link{font-size:.875rem;gap:22px;margin-top:20px}
  .intersection-caption{display:block;border-top:1px solid #596d5f;padding-top:19px}
  .intersection-caption>span:first-child{font-size:1.12rem}
  .intersection-caption>span:last-child{display:none}
}
@media(max-width:360px){
  .perspective-switch label,.perspective-switch-active span{font-size:.75rem}
  .perspective-story h3{font-size:2.6rem}
  .perspective-story .text-link{font-size:.8125rem;gap:16px}
}
[data-input="keyboard"] .intersection *,[data-input="keyboard"] .intersection *::before,[data-input="keyboard"] .intersection *::after{transition:none!important}
.perspective-input:focus-visible~div *{transition:none!important}
[data-input="keyboard"] .perspective-switch label:active{transform:none}
@media(prefers-reduced-motion:reduce){.intersection *{transition:none!important}}
@media print{
  .intersection{display:none}
}