/* Stories edition. Scoped so the preserved MAKING and shared editor cards keep their styles. */
html body[data-making-alternative] main{padding:0;max-width:none}
html body[data-making-alternative] .atlas{position:relative;padding:0;margin:0;border:0}
html body[data-making-alternative] .map-layout{height:clamp(570px,43vw,760px);min-height:0}
html body[data-making-alternative] .map-window>.intro h1{font-size:clamp(38px,3.6vw,64px);line-height:1.02}
html body[data-making-alternative] .map-window>.intro .kicker{font-size:12px;letter-spacing:.07em}
html body[data-making-alternative] .map-caption{position:absolute;top:clamp(147px,12.5vw,206px);left:var(--page-gutter,5.5vw);padding:0;height:auto;font-size:11px;pointer-events:none}
html body[data-making-alternative] .map-caption .canvas-download{white-space:nowrap}
html body[data-making-alternative] .map-caption a{position:relative;z-index:10;pointer-events:auto;color:inherit;text-decoration:underline;text-underline-offset:3px}
html body[data-making-alternative] .map-caption a:hover{color:var(--site-accent)}
html body[data-making-alternative] .node span{font-size:12px}
html body[data-making-alternative] .cone-path{font-size:12px;padding:8px 12px}
html body[data-making-alternative] .phase-axis h2{font-size:16px!important}
html body[data-making-alternative] .phase-axis p{font-size:12px}
html body[data-making-alternative] #glass{width:320px;max-height:440px;padding:18px 22px}
html body[data-making-alternative] #glass img{width:100%;height:110px;float:none;margin:12px 0}
html body[data-making-alternative] #glass h2{font-size:20.3px}
html body[data-making-alternative] #glass p{font-size:12.75px;line-height:1.5}
html body[data-making-alternative] #glass .glass-meta{font-size:12px}
html body[data-making-alternative] #glass .reason{font-size:12px;margin-bottom:0}
html body[data-making-alternative] [hidden]{display:none!important}
html body[data-making-alternative] :is(button,a,select,summary):focus-visible{outline:2px solid var(--site-accent);outline-offset:5px}
html body[data-making-alternative] .project-section{border-top:1px solid var(--site-line);padding:28px 0 42px;overflow:hidden;scroll-margin-top:calc(var(--chrome-h) + 15px)}
html body[data-making-alternative] .project-heading-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:0 var(--page-gutter,5.5vw)}
html body[data-making-alternative] .section-kicker{font:11px/1.4 Arial,sans-serif;letter-spacing:.1em;color:var(--site-muted);margin:0 0 10px;text-transform:uppercase}
html body[data-making-alternative] #project-heading{font:400 clamp(28px,2.8vw,42px)/1.15 var(--font-display,Arial);margin:0;letter-spacing:-.035em}
html body[data-making-alternative] #project-context{font:12px/1.5 Arial;color:var(--site-muted);margin:8px 0 0}
html body[data-making-alternative] .project-picker{display:grid;gap:7px;max-width:280px}
html body[data-making-alternative] .project-picker label{font:11px Arial;color:var(--site-muted)}
html body[data-making-alternative] .project-picker select{font:14px Arial;color:var(--site-ink);border:1px solid var(--site-line);background:var(--site-paper);border-radius:4px;padding:11px 36px 11px 12px;max-width:100%}
html body[data-making-alternative] .ribbon-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px var(--page-gutter,5.5vw) 0;min-height:42px;gap:15px}
html body[data-making-alternative] #gallery-context{font:12px Arial;color:var(--site-muted);margin:0}
html body[data-making-alternative] .gallery-tools button{width:30px;height:30px;font-size:16px}
html body[data-making-alternative] #media-curve{height:350px;scroll-snap-type:none;scrollbar-width:none;perspective:none}
html body[data-making-alternative] #media-track{height:100%;gap:14px;padding:36px max(24px,calc(50% - 140px)) 44px;align-items:center}
html body[data-making-alternative] .media-frame{width:clamp(210px,20vw,280px);flex-basis:clamp(210px,20vw,280px);height:260px;min-height:0;padding:0;border:0;border-radius:0;transform:perspective(700px) rotateY(var(--curve,0deg)) scaleY(var(--stretch,1));box-shadow:0 20px 18px -8px #0007,0 5px 9px #0003;will-change:auto}
html body[data-making-alternative] .media-frame img,html body[data-making-alternative] .media-frame video{border-radius:0;object-fit:cover;pointer-events:none}
html body[data-making-alternative] .media-frame span{bottom:0;left:0;right:0;padding:23px 12px 13px;background:linear-gradient(transparent,#0009);text-align:center;font:12px/1.3 Arial;color:#fff;pointer-events:none;white-space:normal}
html body[data-making-alternative] #gallery-empty{padding:30px var(--page-gutter,5.5vw);font:16px Arial;color:var(--site-muted)}
html body[data-making-alternative] .audio-story{max-width:680px;margin:12px auto 0;padding:0 24px;text-align:center}
html body[data-making-alternative] .audio-story-heading{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
html body[data-making-alternative] .audio-story h3{font:400 19px/1.4 var(--font-display,Arial);margin:0}
html body[data-making-alternative] #audio-play{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--site-ink);border-radius:50%;background:transparent;color:var(--site-ink);font:21px Arial}
html body[data-making-alternative] #audio-duration{font:12px Arial;color:var(--site-muted);font-variant-numeric:tabular-nums}
html body[data-making-alternative] #story-audio{display:block;width:100%;height:38px;margin:18px auto 8px;accent-color:var(--site-accent)}
html body[data-making-alternative] #audio-status{font:13px Arial;color:var(--site-muted)}
html body[data-making-alternative] #audio-status:empty{display:none}
html body[data-making-alternative] #transcript{font:14px/1.7 Arial;text-align:left;margin-top:16px}
html body[data-making-alternative] #transcript summary{cursor:pointer;color:var(--site-muted);text-align:center;text-underline-offset:4px}
html body[data-making-alternative] #transcript-text{white-space:pre-wrap;padding:18px 0}
html body[data-making-alternative] .trajectories-section{border-top:1px solid var(--site-line);scroll-margin-top:calc(var(--chrome-h) + 15px)}
html body[data-making-alternative] .trajectories-heading{padding:48px var(--page-gutter,5.5vw) 35px;text-align:center}
html body[data-making-alternative] .trajectories-heading h2{font:400 clamp(32px,3.3vw,54px)/1.15 var(--font-display,Arial);letter-spacing:-.04em;margin:0 0 16px}
html body[data-making-alternative] .trajectories-heading h2 em{font-family:Bitter,Georgia,serif;font-weight:400}
html body[data-making-alternative] .trajectories-heading>p:last-child{font:14px/1.7 Arial;color:var(--site-muted);max-width:660px;margin:0 auto}
html body[data-making-alternative] #paths{margin:0;height:auto;min-height:94px;display:grid;grid-template-columns:repeat(var(--trajectory-count,6),minmax(0,1fr));overflow:visible;z-index:1}
html body[data-making-alternative] #paths button{padding:16px clamp(18px,2.2vw,36px);min-height:94px;transition:background-color .2s}
html body[data-making-alternative] #paths button:before{display:none}
html body[data-making-alternative] #paths button[aria-pressed=true]{background:#ff3800;color:#111b14;border-top-color:#ff3800}
html body[data-making-alternative] #paths button[aria-pressed=true] :is(small,strong,span){color:#111b14}
html body[data-making-alternative] #paths small{font-size:11px;margin-bottom:7px}
html body[data-making-alternative] #paths strong{font-size:16px;line-height:1.3}
html body[data-making-alternative] #paths span{font-size:11px;margin-top:6px}
html body[data-making-alternative] .trajectory-story{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.8fr);align-items:center;gap:clamp(40px,8vw,130px);padding:64px var(--page-gutter,5.5vw) 45px;max-width:1600px;margin:auto;min-height:540px}
html body[data-making-alternative] .trajectory-copy{max-width:780px}
html body[data-making-alternative] #trajectory-eyebrow{color:var(--site-accent)}
html body[data-making-alternative] #trajectory-title{font:400 clamp(34px,3.8vw,59px)/1.04 Bitter,Georgia,serif;letter-spacing:-.045em;margin:18px 0 24px;max-width:740px}
html body[data-making-alternative] .trajectory-lead{font:20px/1.5 Arial;color:var(--site-ink);margin:0 0 24px;max-width:660px}
html body[data-making-alternative] #trajectory-text p{font:15px/1.8 Arial;color:var(--site-muted);margin:0 0 14px;max-width:650px}
html body[data-making-alternative] #trajectory-projects{margin-top:30px;padding-top:22px;border-top:1px solid var(--site-line)}
html body[data-making-alternative] #trajectory-projects ol{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 30px;padding:0;margin:14px 0 0;list-style:none}
html body[data-making-alternative] #trajectory-projects li{position:relative;display:grid;gap:5px}
html body[data-making-alternative] #trajectory-projects li:not(:last-child):after{content:'→';position:absolute;right:-23px;bottom:3px;font-size:12px;color:var(--site-muted)}
html body[data-making-alternative] .project-year{font:10px Arial;color:var(--site-muted)}
html body[data-making-alternative] #trajectory-projects a{font:14px/1.4 Arial;color:var(--site-ink);text-decoration:underline;text-decoration-color:var(--site-line);text-underline-offset:5px}
html body[data-making-alternative] #trajectory-projects a[aria-current=true]{color:var(--site-accent);text-decoration-color:currentColor}
html body[data-making-alternative] .trajectory-figure{align-self:center;position:relative;display:flex;align-items:flex-end;justify-content:center;margin:0;min-width:0}
html body[data-making-alternative] .trajectory-figure img{display:block;width:100%;height:auto;max-height:510px;object-fit:contain;filter:grayscale(1);mask-image:linear-gradient(#000 90%,transparent);-webkit-mask-image:linear-gradient(#000 90%,transparent)}
html body[data-making-alternative] .trajectory-figure figcaption:empty{display:none}
html[data-theme=dark] body[data-making-alternative] .trajectory-figure img{filter:grayscale(1) brightness(1.25)}
html body[data-making-alternative] .study-links{display:flex;justify-content:space-between;gap:20px;padding:25px var(--page-gutter,5.5vw);border-top:1px solid var(--site-line);font:11px Arial;color:var(--site-muted);margin:0}
html body[data-making-alternative] .study-links a{color:inherit;text-underline-offset:4px}
html body[data-making-alternative] #error{padding:25px var(--page-gutter,5.5vw)}
html body[data-making-alternative] #media-viewer{width:min(1150px,94vw);padding:24px;border-radius:12px}
html body[data-making-alternative] #media-viewer>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
html body[data-making-alternative] #viewer-title{font:28px var(--font-display,Arial);margin:0}
html body[data-making-alternative] #media-viewer button{background:transparent;color:var(--site-ink);border:1px solid var(--site-line);padding:10px 14px;border-radius:24px;font:14px Arial}
html body[data-making-alternative] #viewer-media :is(img,video){display:block;width:100%;height:65dvh;object-fit:contain}
html body[data-making-alternative] #media-viewer>footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px}
html body[data-making-alternative] #viewer-caption{font:13px/1.5 Arial;color:var(--site-muted);margin:0}
@media(min-width:1850px){html body[data-making-alternative] .map-layout{height:760px}html body[data-making-alternative] .node span{font-size:15px}html body[data-making-alternative] .cone-path{font-size:15px}html body[data-making-alternative] #glass{width:360px}html body[data-making-alternative] #glass img{height:150px}}
@media(max-width:800px){
 html body[data-making-alternative] .map-layout{height:340px;min-height:340px}
 html body[data-making-alternative] .map-caption{position:static;height:auto;padding:12px var(--page-gutter,20px);font-size:10px}
 html body[data-making-alternative] .atlas>.intro h1{font-size:clamp(36px,7vw,54px);line-height:1.07}
 html body[data-making-alternative] #glass{width:calc(100% - 40px);min-height:0;max-height:none;padding:18px;max-width:440px}
 html body[data-making-alternative] #glass img{height:105px;float:right;width:35%;margin:12px 0 12px 16px}
 html body[data-making-alternative] #glass .reason{clear:both}
 html body[data-making-alternative] .atlas>.phase-axis h2{font-size:13px!important}
 html body[data-making-alternative] .atlas>.phase-axis p{font-size:11px}
 html body[data-making-alternative] .project-heading-row{align-items:flex-start}
 html body[data-making-alternative] .project-picker{max-width:170px}
 html body[data-making-alternative] #project-heading{font-size:28px}
 html body[data-making-alternative] #media-curve{height:300px}
 html body[data-making-alternative] .media-frame{height:225px;width:205px;flex-basis:205px}
 html body[data-making-alternative] #media-track{padding:30px calc(50% - 103px) 35px}
 html body[data-making-alternative] #paths{display:flex;overflow-x:auto;scrollbar-width:thin}
 html body[data-making-alternative] #paths button{flex:0 0 180px;padding:16px 18px}
 html body[data-making-alternative] .trajectory-story{gap:24px;grid-template-columns:minmax(0,1fr) minmax(150px,.55fr);padding-top:36px;min-height:0}
 html body[data-making-alternative] #trajectory-title{font-size:35px}
 html body[data-making-alternative] .trajectory-lead{font-size:18px}
 html body[data-making-alternative] #trajectory-text p{font-size:14px}
 html body[data-making-alternative] .trajectory-figure{align-self:start;margin-top:45px}
}
@media(max-width:520px){
 html body[data-making-alternative] .project-heading-row{display:block}
 html body[data-making-alternative] .project-picker{margin-top:18px;max-width:100%}
 html body[data-making-alternative] .project-picker label{display:none}
 html body[data-making-alternative] .project-picker select{width:100%}
 html body[data-making-alternative] .trajectory-story{display:block;position:relative}
 html body[data-making-alternative] .trajectory-copy{position:relative;z-index:1}
 html body[data-making-alternative] .trajectory-figure{width:58%;margin:25px 0 0 auto}
 html body[data-making-alternative] .trajectory-figure img{max-height:280px}
 html body[data-making-alternative] .trajectories-heading{padding-block:35px 28px}
 html body[data-making-alternative] .study-links{font-size:10px}
 html body[data-making-alternative] #viewer-title{font-size:22px}
}
@media(prefers-reduced-motion:reduce){html body[data-making-alternative] .media-frame{transform:none}html body[data-making-alternative] *{scroll-behavior:auto}}

/* Author's composition: project picker on the map; title and audio above the ribbon. */
html body[data-making-alternative] .project-section{border-top:0;padding-top:10px}
html body[data-making-alternative] .atlas>.project-picker{position:absolute;left:calc(var(--page-gutter,5.5vw) + 24px);bottom:28px;z-index:9;width:200px;max-width:28%}
html body[data-making-alternative] .project-heading-row{justify-content:center;text-align:left;gap:22px;margin:0 auto;padding-top:14px;padding-bottom:0}
html body[data-making-alternative] .project-heading-row>div{flex:none}
html body[data-making-alternative] #project-context{margin-top:3px}
html body[data-making-alternative] #audio-play.project-audio-play{width:52px;height:52px;flex:none;border:1px solid var(--site-ink);border-radius:50%;background:transparent;color:var(--site-ink);display:grid;place-items:center}
html body[data-making-alternative] #audio-play.project-audio-play:disabled{opacity:.28;cursor:not-allowed}
html body[data-making-alternative] #audio-play svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
html body[data-making-alternative] .ribbon-toolbar{justify-content:flex-end;padding-top:0;margin-top:-6px}
html body[data-making-alternative] .project-section{padding-bottom:20px}
html body[data-making-alternative] .trajectories-heading{padding-top:65px;padding-bottom:15px}
html body[data-making-alternative] .trajectories-heading h2{margin:0}
@media(max-width:800px){html body[data-making-alternative] .atlas>.project-picker{position:relative;left:auto;bottom:auto;margin:18px var(--page-gutter,20px);width:auto;max-width:none}html body[data-making-alternative] .project-heading-row{display:flex;gap:16px}html body[data-making-alternative] .project-heading-row>div{flex:0 1 auto}html body[data-making-alternative] #audio-play.project-audio-play{width:44px;height:44px}html body[data-making-alternative] .trajectories-heading{padding-top:40px}}

html body[data-making-alternative] .project-heading-row>div{min-width:0;max-width:calc(100% - 80px)}html body[data-making-alternative] #project-heading{overflow-wrap:anywhere}


/* Awards close the page content, directly above the shared lower navigation. */
html body[data-making-alternative] .making-awards{margin:0;padding:20px var(--page-gutter,5.5vw);border-top:1px solid var(--site-line)}
html body[data-making-alternative] .making-awards img{display:block;filter:grayscale(1);opacity:.74}
html body[data-making-alternative] .awards-strip{width:100%;max-width:1440px;height:auto;margin:0 auto}
html body[data-making-alternative] .awards-grid{display:none;list-style:none;padding:0;margin:0}
html[data-theme=dark] body[data-making-alternative] .making-awards img{filter:grayscale(1) invert(1);opacity:.72}
@media(max-width:800px){
 html body[data-making-alternative] .making-awards{padding-block:24px}
 html body[data-making-alternative] .making-awards .awards-strip{display:none}
 html body[data-making-alternative] .awards-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 14px;align-items:start}
 html body[data-making-alternative] .awards-grid li{min-width:0}
 html body[data-making-alternative] .awards-grid img{width:100%;height:auto;margin:0 auto}
}
@media(max-width:520px){
 html body[data-making-alternative] .awards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
 html body[data-making-alternative] .awards-grid img{max-width:170px}
}

/* The supplied PNG is shared by the desktop strip and responsive crops. */
html body[data-making-alternative] .awards-grid .award-crop{display:block;position:relative;width:100%;max-width:170px;aspect-ratio:76 / 39.4;margin:0 auto;overflow:hidden;clip-path:inset(0 var(--award-inset) 0 var(--award-inset))}
html body[data-making-alternative] .awards-grid .award-crop img{position:absolute;top:1.903553%;left:var(--award-left);width:950.131579%;max-width:none;height:auto;margin:0}

#glass .cover-video{display:block;width:100%;height:180px;object-fit:contain;border-radius:9px;margin:12px 0;background:#111}

/* The project header moves the glass; the magnet restores its anchor. */
html body[data-making-alternative] #glass .glass-meta{gap:10px;cursor:grab;touch-action:none;user-select:none}
html body[data-making-alternative] #glass .glass-drag-handle{flex:1;min-width:0;padding:7px 0;outline-offset:3px}
html body[data-making-alternative] #glass .glass-drag-handle:focus-visible{outline:2px solid var(--site-accent);border-radius:3px}
html body[data-making-alternative] #glass .popup-controls{display:flex;align-items:center;gap:4px;flex:none}
html body[data-making-alternative] #glass .popup-controls button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;padding:4px;background:transparent;color:var(--site-ink);cursor:pointer}
html body[data-making-alternative] #glass .popup-controls button:hover{background:color-mix(in srgb,var(--site-ink) 9%,transparent)}
html body[data-making-alternative] #glass .popup-reset svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html body[data-making-alternative] #glass.is-dragging .glass-meta{cursor:grabbing}