/* home + full-screen map */
.hero { display: grid; gap: 22px; padding-top: 18px; padding-bottom: 8px; }
.hero h1 { font-family: "Fraunces", serif; font-weight: 600; font-size: 44px; line-height: 1.04; letter-spacing: -.015em; font-variation-settings: "opsz" 72, "SOFT" 30, "WONK" 0; margin-top: 12px; }
.hero .sub { margin-top: 16px; font-size: 15.5px; line-height: 1.55; max-width: 26em; }
.ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.ca { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; }
.copy-btn { display: inline-flex; background: none; border: 0; cursor: pointer; padding: 6px; }
.copied { font-size: 13px; color: var(--ink-2); }
.rug-fig { margin: 0 calc(var(--pad) * -1 + 4px); }
.rug-link { display: block; cursor: zoom-in; }
.rug-fig img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
.rug-fig figcaption { font-size: 12.5px; color: var(--ink-2); padding: 0 calc(var(--pad) - 4px); margin-top: -4px; }
.stats { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: var(--rule); margin-top: 18px; padding: 14px 0 18px; font-size: 13px; }
.stats div { padding: 0 10px; border-left: var(--hair); }
.stats div:first-child { border-left: 0; padding-left: 0; }
.stats b { display: block; font-size: 22px; font-weight: 500; font-family: "Plex Mono", monospace; }

.three { display: grid; gap: 0; border-top: var(--rule); }
.three > div { padding: 20px 0; border-bottom: var(--hair); }
.three .n { font-size: 13px; color: var(--terra); }
.three h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 24px; margin: 4px 0 8px; font-variation-settings: "opsz" 36; }
.three p { max-width: 30em; }
.more { font-size: 14px; text-decoration: none; white-space: nowrap; }
a.more:hover { text-decoration: underline; }

table.top { border-top: var(--rule); }
table.top th { text-align: left; font: 400 12px "Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding: 10px 8px 10px 0; border-bottom: var(--rule); }
table.top th.num { text-align: right; padding-right: 0; }
table.top td { padding: 12px 8px 12px 0; border-bottom: var(--hair); vertical-align: middle; }
table.top td.num { font-size: 17px; font-weight: 500; padding-right: 0; }
table.top tr[data-id] { cursor: pointer; }
table.top tr[data-id]:hover td { background: var(--paper-2); }
table.top .rank { font: 400 13px "Plex Mono", monospace; color: var(--ink-2); width: 30px; }
.cn { display: flex; align-items: center; gap: 10px; }
.cn b { font-weight: 600; display: block; line-height: 1.2; }
.cn small { font: 400 12.5px "Plex Mono", monospace; color: var(--terra); }
.hide-s { display: none; }
.row-btns { margin-top: 22px; }

.road { list-style: none; border-top: var(--rule); }
.road li { display: grid; grid-template-columns: 48px 1fr; gap: 6px 14px; padding: 20px 0; border-bottom: var(--hair); }
.road .ph { font-size: 44px; font-weight: 600; line-height: .9; color: var(--terra); }
.road h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 23px; font-variation-settings: "opsz" 36; }
.road p { margin-top: 4px; max-width: 34em; }
.road .st { grid-column: 2; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.road .st.now { color: var(--terra); font-weight: 500; }

.socials { list-style: none; border-top: var(--rule); }
.socials a { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: var(--hair); text-decoration: none; font-size: 18px; }
.socials a:hover span:first-child { text-decoration: underline; }
.socials a.off { pointer-events: none; }
.socials .soon { font-size: 13px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }

/* ---- full-screen map ---- */
.rugmap { position: fixed; inset: 0; z-index: 30; touch-action: none; display: block; }
.rugmap[hidden] { display: none; }
.actor-layer { position: fixed; inset: 0; z-index: 31; pointer-events: none; }
/* viewport haze + tilt-shift: fixed to the screen, the rug pans underneath. Soft bright cream fog at the edges
   (blurred backdrop masked to the rim, plus a cream wash) and a very slight miniature blur at top and bottom. */
.haze { position: fixed; inset: 0; z-index: 32; pointer-events: none; opacity: 0; }
.haze[hidden] { display: none; }
.haze i { position: absolute; left: 0; right: 0; display: block; }
.haze .ts { -webkit-backdrop-filter: blur(1.1px); backdrop-filter: blur(1.1px); }
.haze .ts-t { top: 0; height: 26%; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.haze .ts-b { bottom: 0; height: 26%; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
.haze .ts-t2, .haze .ts-b2 { -webkit-backdrop-filter: blur(2.2px); backdrop-filter: blur(2.2px); height: 12%; }
.haze .ts-t2 { top: 0; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.haze .ts-b2 { bottom: 0; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
.haze .edge { inset: 0; -webkit-backdrop-filter: blur(7px) brightness(1.05) saturate(.88); backdrop-filter: blur(7px) brightness(1.05) saturate(.88);
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, transparent 62%, rgba(0,0,0,.55) 86%, #000 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, transparent 62%, rgba(0,0,0,.55) 86%, #000 100%); }
.haze .tint { inset: 0; background:
  radial-gradient(ellipse 75% 72% at 50% 50%, rgba(244,235,211,0) 58%, rgba(244,235,211,.28) 80%, rgba(244,235,211,.62) 100%),
  linear-gradient(rgba(244,235,211,.42), rgba(244,235,211,0) 13%, rgba(244,235,211,0) 87%, rgba(244,235,211,.42)),
  linear-gradient(90deg, rgba(244,235,211,.32), rgba(244,235,211,0) 9%, rgba(244,235,211,0) 91%, rgba(244,235,211,.32)); }
body.map-open { overflow: hidden; }
body.map-open .hero .copy, body.map-open .nav { opacity: 0; transition: opacity .3s; }
body.hero-off #heroRug { visibility: hidden; }
.map-ui { position: fixed; inset: 0; z-index: 33; pointer-events: none; font-size: 13px; }
.map-ui[hidden] { display: none; }
.map-ui.in > :not(.card):not(.tip) { animation: fadein .35s .45s both; }
@keyframes fadein { from { opacity: 0; } }
.map-ui button, .map-ui input, .map-ui .card, .map-ui ul { pointer-events: auto; }
.map-ui .back { position: absolute; left: 12px; top: 12px; height: 40px; padding: 0 14px; background: var(--paper); border: var(--rule); border-radius: 4px; cursor: pointer; font-size: 14px; }
.find { position: absolute; left: 12px; right: 12px; top: 60px; }
.find input { width: 100%; height: 40px; padding: 0 12px; background: var(--paper); border: var(--rule); border-radius: 4px; font-size: 14px; }
.find ul { list-style: none; background: var(--paper); border: var(--rule); border-top: 0; max-height: 46vh; overflow: auto; }
.find li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: var(--hair); cursor: pointer; }
.find li:hover, .find li.sel { background: var(--paper-2); }
.find li small { color: var(--ink-2); white-space: nowrap; }
.zoom { position: absolute; right: 12px; top: 12px; display: flex; }
.zoom button { width: 40px; height: 40px; background: var(--paper); border: var(--rule); margin-left: -1.5px; cursor: pointer; font-size: 18px; }
.zoom button:first-child { border-radius: 4px 0 0 4px; } .zoom button:last-child { border-radius: 0 4px 4px 0; width: 48px; font-size: 13px; }
.hint, .cap { position: absolute; bottom: 12px; background: var(--paper); padding: 5px 9px; border-radius: 3px; font-size: 12px; }
.hint { left: 12px; right: 12px; text-align: center; bottom: calc(12px + env(safe-area-inset-bottom)); }
.cap { display: none; }
.tip { position: fixed; transform: translate(14px, 14px); background: var(--ink); color: var(--paper); padding: 4px 8px; border-radius: 3px; font-size: 12.5px; pointer-events: none; white-space: nowrap; }
.card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 40vh; max-height: 40dvh; overflow: auto; background: var(--paper); border-top: var(--rule); padding: 18px var(--pad) calc(24px + env(safe-area-inset-bottom)); transform: translateY(0); transition: transform .26s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.card[hidden] { display: block; transform: translateY(105%); opacity: 0; pointer-events: none; }
.card.tall { max-height: 84vh; max-height: 84dvh; }
.card .grip { display: block; width: 100%; height: 18px; margin: -12px 0 2px; background: none; border: 0; cursor: pointer; position: relative; }
.card .grip::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--ink-2); opacity: .45; }
.card .x { float: right; background: none; border: 0; cursor: pointer; font-size: 13px; padding: 4px 0 10px 10px; }

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(380px, 36%) 1fr; align-items: center; gap: 12px; padding-top: 20px; min-height: min(620px, calc(100vh - 230px)); }
  .hero h1 { font-size: 66px; line-height: 1.04; }
  .hero .sub { font-size: 18px; margin-top: 24px; }
  .ctas { flex-direction: row; gap: 16px; margin-top: 32px; }
  .ca { font-size: 17px; margin-top: 20px; }
  .rug-fig { margin: 0 -28px 0 0; }
  .rug-fig figcaption { text-align: right; padding-right: 36px; }
  .stats { grid-template-columns: repeat(3, auto); justify-content: center; gap: 0; font-size: 14px; }
  .stats div { padding: 0 48px; text-align: center; }
  .stats div:first-child { padding-left: 48px; border-left: 0; }
  .three { grid-template-columns: repeat(3, 1fr); border-bottom: var(--hair); }
  .three > div { padding: 24px 28px 28px; border-bottom: 0; border-left: var(--hair); }
  .three > div:first-child { border-left: 0; padding-left: 0; }
  .hide-s { display: table-cell; }
  .road li { grid-template-columns: 90px 1fr 220px; align-items: baseline; padding: 26px 0; }
  .road .ph { font-size: 60px; }
  .road h3 { font-size: 28px; }
  .road .st { grid-column: auto; text-align: right; }
  .socials { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: var(--hair); }
  .socials li + li a { border-left: var(--hair); padding-left: 20px; }
  .socials a { border-bottom: 0; padding-right: 20px; font-size: 22px; }
  .map-ui .back { left: 20px; top: 20px; height: 44px; }
  .find { left: auto; right: 160px; top: 20px; width: 280px; }
  .find input { height: 44px; }
  .zoom { right: 20px; top: 20px; } .zoom button { height: 44px; }
  .hint { right: auto; left: 20px; bottom: 18px; text-align: left; }
  .cap { display: block; right: 20px; bottom: 18px; }
  .card { left: auto; top: 0; width: 420px; max-height: none; border-top: 0; border-left: var(--rule); padding: 84px 28px 32px; }
  .card[hidden] { transform: translateX(105%); }
  .card .grip { display: none; }
  .card.tall { max-height: none; }
  body.card-open .zoom { right: 440px; } body.card-open .find { right: 580px; } body.card-open .cap { display: none; }
}