/* The Atlas of Ideas — editorial Worldmap overlay.
 * Original portfolio artwork and honest counts; no generated work in the product. */
:root{--atlas-cream:#f9f7f1;--atlas-ink:#29312a;--atlas-sage:#718672;--atlas-rust:#b46c56}
body{background:var(--atlas-cream);color:var(--atlas-ink)}
.atlas-section{background:radial-gradient(ellipse at 56% 64%,#fffefa 0,#f9f7f1 74%);padding:25px clamp(13px,3.3vw,64px) 105px;position:relative;overflow:hidden}
.atlas-section:before,.atlas-section:after{content:"";pointer-events:none;position:absolute;inset:auto;border:1px solid #bdb39f55;border-radius:50%}
.atlas-section:before{top:-270px;left:-250px;width:580px;height:390px;transform:rotate(-22deg)}
.atlas-section:after{right:-210px;bottom:-260px;width:520px;height:355px;transform:rotate(21deg)}
.atlas-head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1100px;margin:0 auto 22px;gap:0}
.atlas-kicker{display:flex;align-items:center;gap:20px;font-size:10px;font-weight:700;letter-spacing:.31em;color:#78846d;margin:0 0 10px;line-height:1.4}
.atlas-kicker>span{height:1px;width:28px;background:#abb6a7}
.atlas-head h1{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(90px,10.5vw,170px);letter-spacing:-.064em;line-height:.9;font-weight:400;margin:0 0 13px}
.atlas-subtitle{font:italic clamp(22px,2.4vw,35px)/1.2 "Instrument Serif",Georgia,serif;letter-spacing:-.018em;margin:0 0 10px}
.atlas-intro{color:#70796e;font-size:13px;line-height:1.7;margin:0;max-width:460px}
.earth-overview{font-size:11px;color:#a1634e;border-bottom:1px solid #bba496;padding-bottom:5px;margin-top:15px;display:inline-flex;gap:12px;font-weight:600}
.earth-overview:hover{color:#29312a}
.atlas-console{display:grid;grid-template-columns:clamp(210px,18.5vw,264px) minmax(0,1fr);gap:clamp(8px,2.1vw,30px);background:transparent;max-width:1600px;border:0;box-shadow:none;align-items:center;position:relative}
.sidebar{position:relative;border:1px solid #e9e5da;border-radius:17px;overflow:hidden;z-index:3;background:#fffef9ef;box-shadow:0 16px 65px #384a3a17;align-self:center}
.sidebar-top{height:43px;border-bottom:1px solid #e8e8df;padding:0 16px;font-size:9px;letter-spacing:.11em;color:#80887b}
.sidebar-dots{font-size:9px;letter-spacing:.06em;color:#a1a89b}
.sidebar-intro{padding:18px 18px 11px}
.sidebar-intro h3{font:italic 29px/1.15 "Instrument Serif",Georgia,serif;letter-spacing:-.03em;margin:0 0 5px}
.sidebar-intro h3 em{color:#718672}
.sidebar-intro p{font-size:11px;color:#899589;line-height:1.6;margin:0}
.regions{display:flex;flex-direction:column;gap:2px;padding:0 10px 10px}
.regions button{width:100%;display:flex;align-items:center;text-align:left;gap:11px;padding:8px 7px;line-height:1.3;border:0;background:transparent;border-radius:9px;transition:background .22s,transform .22s}
.regions button:hover,.regions button.active{background:#e7ece4;transform:translateX(2px)}
.regions button .region-thumb{display:block;width:39px;height:39px;min-width:39px;overflow:hidden;border-radius:6px;background:#e7e9df}
.region-thumb img{height:100%;width:100%;object-fit:cover}
.regions button .region-caption{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;font-size:11px;line-height:1.12;font-weight:700}
.regions button .region-caption small{display:block;font-size:9px;font-weight:400;letter-spacing:0;color:#889488;grid-column:auto;margin:0}
.regions button .region-chevron{color:#869487;font-size:20px;font-family:Georgia,serif}
.search-label{font-size:9px;letter-spacing:.12em;color:#798475;margin:9px 17px 0}
.search-label input{font-size:11px;margin-top:8px;border:1px solid #dce0d7;background:#fafaf6;border-radius:5px;padding:11px;width:100%}
.search-hits{max-height:178px;padding:5px 16px}
.search-hits button{background:#f0f3eb;border-radius:4px}
.sidebar-bottom{margin-top:8px;padding:13px 17px;border-top:1px solid #ebeae1;font-size:9px;color:#6d7c6c}
.sidebar-bottom button{font-size:10px;color:#a26450}
.map-column{position:relative;align-self:stretch;min-width:0}
.map-topbar{position:absolute;top:10px;left:3px;right:3px;height:auto;z-index:5;border:0;background:none;pointer-events:none;padding:0 clamp(10px,2vw,30px);font-size:9px;color:#9ea79b}
.map-topbar span,.map-topbar span:last-child{color:#a1a99e;font-size:9px}
.map-viewport{height:clamp(510px,45vw,710px);background:transparent;overflow:hidden;cursor:grab;touch-action:none}
.map-water{background:radial-gradient(ellipse at 55% 50%,#fffdfa 0,#f9f7f1 85%);background-size:auto}
.map-scene{will-change:transform}
#map-svg{opacity:.25}
.land-outline{fill:#d6dccd;stroke:#8da18d77;stroke-width:1.5;filter:drop-shadow(0 10px 13px #72876b83)}
.map-tile{border:2px solid white;padding:1px;overflow:hidden;border-radius:3px;background:#fff;box-shadow:0 3px 8px #30433347;transform:rotate(var(--tile-angle,0deg));transition:transform .23s cubic-bezier(.2,.8,.2,1),box-shadow .23s,filter .23s;filter:saturate(.92)}
.map-tile img{object-fit:cover;width:100%;height:100%}
.map-tile:hover,.map-tile:focus-visible{transform:scale(1.8) rotate(0deg);filter:saturate(1.12);box-shadow:0 10px 24px #283d2e78;border-color:#fff;z-index:100!important}
.map-tile.is-dim{opacity:.12;filter:grayscale(1)}
.region-label{font:italic 16px/1.1 "Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:0;color:#4c6452;padding:8px 13px;background:#fffef8ee;border:1px solid #e9e9dc;border-radius:9px;box-shadow:0 6px 22px #1d30271f;pointer-events:auto}
.region-label small{font:500 8px/1.4 "DM Sans",Arial,sans-serif;letter-spacing:.1em;color:#8a9b89}
.region-label:hover{background:white;color:#b46c56}
.map-buttons{right:13px;bottom:75px;display:grid;gap:6px;box-shadow:none}
.map-buttons button{width:42px;height:42px;border-radius:50%;border:1px solid #e7e6da;box-shadow:0 3px 12px #334a321f;background:#fffefa;color:#4c5c4c;transition:background .22s,transform .22s}
.map-buttons button:hover{background:#e5eddf;transform:scale(1.07)}
.map-coordinates{top:auto;bottom:20px;left:13px;color:#969e92;font-size:9px}
.map-zoom-label{bottom:47px;left:13px;background:#fffef8cc;color:#768476;font-size:9px}
.map-discovery-hint{position:absolute;bottom:20px;left:0;right:0;pointer-events:none;font-size:9px;font-weight:700;letter-spacing:.22em;text-align:center;color:#8b988d}
.map-discovery-hint span{color:#b6816c}
.map-tooltip{border:1px solid #e9e8e0;border-radius:11px;background:#fffef9;box-shadow:0 15px 40px #2d453a59;width:188px}
.map-tooltip img{height:122px;background:#f2f2e8}
.map-tooltip strong{font:400 19px/1.15 "Instrument Serif",Georgia,serif;margin-top:10px}
.map-credit{height:auto;min-height:35px;border:0;padding:0 14px;background:none;font-size:9px;color:#99a196}
.mobile-map-shortcuts{display:none}
.earth-intro{min-height:480px;padding-top:28px;padding-bottom:26px}
.earth-intro .intro-grid{max-width:1050px}
.earth-intro .intro-copy h1{font-size:clamp(65px,6.3vw,100px)}
.earth-intro .earth-interact{max-width:450px}
.earth-intro .intro-copy .eyebrow{margin-bottom:18px}
.earth-intro .intro-copy>p:not(.eyebrow){margin-bottom:21px}
.earth-intro .intro-copy>small{margin-top:15px}
.exit-section{background:#f2f1e9;padding:90px 20px}
.exit-section h2{font:400 clamp(73px,9vw,136px)/1 "Instrument Serif",Georgia,serif;color:#61755e;letter-spacing:-.055em;margin:18px 0 28px}
@media(min-width:1450px){.atlas-head h1{font-size:171px}.map-viewport{height:725px}}
@media(max-width:1080px){
 .atlas-console{grid-template-columns:213px minmax(0,1fr);gap:12px}
 .sidebar-intro{padding:15px 13px 9px}
 .regions button{padding:7px 5px}
 .regions button .region-thumb{width:32px;height:32px;min-width:32px}
 .map-viewport{height:560px}
}
@media(max-width:850px){
 .atlas-console{display:flex;flex-direction:column;align-items:stretch;gap:14px}
 .map-column{order:0}
 .sidebar{order:1;display:block;align-self:stretch}
 .sidebar-top{display:flex}
 .sidebar-intro h3{font-size:26px}
 .regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .map-viewport{height:clamp(425px,70vw,620px)}
 .atlas-section{padding-top:35px;padding-bottom:75px}
 .mobile-map-shortcuts{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:8px 0 13px;scrollbar-width:thin}
 .mobile-map-shortcuts button{flex-shrink:0;border:1px solid #d9dfd4;background:#f0f1e9;color:#5b715b;border-radius:25px;padding:10px 13px;font-size:11px;font-weight:600}
 .mobile-map-shortcuts button:hover{background:#d9e8d7}
}
@media(max-width:620px){
 .atlas-head{margin-bottom:16px}
 .atlas-kicker{font-size:9px;letter-spacing:.2em}
 .atlas-kicker>span{width:14px}
 .atlas-head h1{font-size:clamp(80px,19vw,122px);margin-bottom:5px}
 .atlas-subtitle{font-size:24px;margin-bottom:7px}
 .atlas-intro{font-size:12px;line-height:1.55}
 .atlas-intro br{display:none}
 .earth-overview{margin-top:11px}
 .atlas-section{padding:21px 12px 65px}
 .map-viewport{height:clamp(365px,107vw,535px)}
 .map-topbar{display:none}
 .map-buttons{right:10px;bottom:71px}
 .map-buttons button{width:38px;height:38px}
 .map-coordinates{bottom:12px}
 .map-zoom-label{bottom:43px}
 .map-discovery-hint{bottom:12px;font-size:8px;letter-spacing:.09em}
 .map-credit span:last-child{display:none}
 .sidebar{border-radius:13px}
 .regions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .earth-intro{min-height:0}
 .earth-intro .intro-grid{display:block}
 .earth-intro .earth-interact{max-width:320px;margin:20px auto}
}
@media(prefers-reduced-motion:reduce){
 .map-tile,.regions button,.map-buttons button{transition:none!important}
}

/* Tighter title hierarchy lets the interactive art enter the first viewport. */
.atlas-section{padding-top:22px}
.atlas-kicker{margin-bottom:5px}
.atlas-head h1{font-size:clamp(84px,9vw,141px);margin-bottom:9px}
.atlas-subtitle{font-size:clamp(22px,2.2vw,32px);margin-bottom:7px}
.atlas-intro{max-width:650px;line-height:1.5}
.earth-overview{margin-top:10px}
.atlas-head{margin-bottom:14px}
@media(max-width:620px){
 .atlas-head h1{font-size:clamp(73px,18vw,110px);margin-bottom:3px}
 .atlas-kicker{margin-bottom:5px}
 .atlas-subtitle{font-size:23px;margin-bottom:5px}
 .atlas-intro{font-size:12px}
 .atlas-head{margin-bottom:13px}
}

@media(max-width:620px){.map-viewport{height:clamp(336px,87vw,435px)}}

/* Original NASA Apollo 17 imagery, avoiding the old abstract quote shapes. */
.earth-interact .globe{background:transparent;box-shadow:0 34px 85px #07181969,0 0 64px #6c9a9b24}
.earth-interact .globe>.earth-photograph{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:1}
.earth-interact .globe::after{inset:0;background:radial-gradient(circle at 28% 20%,#fff5,transparent 55%);opacity:.22}
.earth-photo-credit{position:absolute;bottom:2%;left:4%;z-index:4;font-size:9px;letter-spacing:.12em;font-weight:600;color:#b0c9c4}
/* Art cannot visually escape any continent, even on hover or focus. */
#map-tiles{position:absolute;inset:0;width:1800px;height:920px;z-index:2}
.map-continent-tiles{position:absolute;inset:0;width:1800px;height:920px;pointer-events:none;overflow:visible}
.map-continent-tiles .map-tile{pointer-events:auto}
#continent-borders{position:absolute;inset:0;pointer-events:none;z-index:5}
.land-border{fill:none;stroke:#91a08c;stroke-width:3.1;stroke-linejoin:round;filter:drop-shadow(0 2px 2px #3f594737)}
#map-labels{z-index:6;pointer-events:none}
#map-labels .region-label{pointer-events:auto}
.map-tile:hover,.map-tile:focus-visible{transform:scale(1.25) rotate(0deg);z-index:99!important}
@media(prefers-reduced-motion:reduce){.earth-interact .globe{animation:none!important}}

/* True Natural Earth geography: the artworks fill recognizable coastlines, not polygons. */
#map-svg{opacity:1}
#map-svg .land-outline{fill:#e8e8df;stroke:#8d9f8c;stroke-width:1;filter:drop-shadow(0 8px 15px #71816c26)}
.land-border{fill:none;stroke:#768d77;stroke-width:2.45;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 2px #4e654533)}
.map-continent-tiles{isolation:isolate}
.map-tile{border:1.5px solid #fffef9;border-radius:2px;box-shadow:0 2px 7px #28393126;filter:saturate(.97)}
.map-tile:hover,.map-tile:focus-visible{transform:scale(1.14) rotate(0deg);box-shadow:0 5px 17px #2238227a}
#map-labels{display:none}
#continent-borders{z-index:7}

/* Subtle pastel atmosphere; the real artwork remains unchanged. */
.atlas-section{
 background:radial-gradient(ellipse at 61% 52%,#fffcf6 0%,#f7f5ef 45%,#f3f0f5 100%);
}
.map-water{
 background:radial-gradient(ellipse at 52% 50%,#fcfbf6 0%,#f6f5ef 52%,#f0f2ee 100%);
}
.sidebar{
 background:linear-gradient(168deg,#fffcf8 0%,#f8f4f8 100%);
}
.exit-section{
 background:linear-gradient(135deg,#eef2e8 0%,#f2eaf0 100%);
}