/* Memories public pages — matches dimazvali.com's own look (the personal
   site this service lives under): warm cream/near-black, Oswald display +
   Lora serif for editorial text + JetBrains Mono for body/UI, flat sharp
   corners, no brand accent color. See views/dimazvali/home.pug for the
   reference implementation this is kept in sync with. */
:root{
  --bg:#f4f1ea; --paper2:#fffdf9; --ink:#15120f; --ink2:#0c0b0a;
  --muted:#56514a; --muted2:#9a948b; --line:#c8c3b8; --line2:#d8d3c8;
  --disp:'Oswald',sans-serif;
  --serif:'Lora',serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --err:#8a3a2e;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--bg)}

.wrap{max-width:900px;margin:0 auto;padding:40px 24px 72px}

.top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.wordmark{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.02em;text-transform:uppercase}
.wordmark .dim{color:var(--muted2);font-weight:400}
.back-link{font-size:12px;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:1px}
.back-link:hover{color:var(--ink)}

.meta{font-size:11px;letter-spacing:.14em;color:var(--muted2);text-transform:uppercase;margin-bottom:10px}
h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(30px,5.5vw,52px);line-height:.98;margin:0}
.desc{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,20px);line-height:1.5;color:#2e2a24;margin:16px 0 0;max-width:640px}
.hint{color:var(--muted);margin-top:16px;font-size:13px}

/* ---- memory list: full-bleed photo cards ---- */
.memory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:24px}
.memory-card{position:relative;display:block;min-height:340px;overflow:hidden;background:var(--ink)}
.memory-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .5s ease,opacity .3s ease}
.memory-card:hover img{transform:scale(1.04);opacity:.95}
.memory-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(12,11,10,.15) 0%, rgba(12,11,10,.25) 45%, rgba(12,11,10,.92) 100%)}
.memory-card .card-body{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;justify-content:space-between;color:var(--bg)}
.memory-card .card-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.memory-card .card-top .count{opacity:.8}
.memory-card .card-top .arrow{font-size:18px;line-height:1}
.memory-card .card-name{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:.96;text-transform:uppercase}
.memory-card .card-desc{margin-top:8px;font-family:var(--serif);font-size:14px;line-height:1.5;color:#dedad3;max-width:320px}
.memory-card.no-photo{background:var(--ink)}
.memory-card.no-photo .card-body{color:var(--bg)}

/* ---- map ---- */
.mm-map{height:360px;border:1px solid var(--ink);background:#efe8dc;margin:24px 0}
.mm-map .leaflet-tile-pane{filter:grayscale(1) contrast(.82) brightness(1.06) sepia(.28)}
.mm-pin{width:14px;height:14px;background:var(--ink);border:2px solid var(--bg);border-radius:50%}

/* ---- flat CTA button (matches the site's hairline/uppercase button language) ---- */
.ar-btn{display:inline-block;margin-top:8px;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:16px 34px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer;font-size:15px}
.ar-btn:hover{background:var(--ink2)}

/* ---- AR permission gate ---- */
.ar-body{margin:0;overflow:hidden;background:#000}
.ar-gate{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:28px;text-align:center;color:var(--ink);background:var(--bg);font-family:var(--mono)}
.ar-gate .back-link{position:absolute;top:20px;left:20px}
.ar-kicker{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ar-gate .desc{font-size:18px;max-width:300px;margin:0}
.ar-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ar-chip{border:1px solid var(--line);padding:6px 13px;font-size:12px;letter-spacing:.06em}
.ar-error{color:var(--err);font-size:13px;max-width:320px}
.ar-foot{font-size:10px;letter-spacing:.08em;color:var(--muted2)}

/* ---- AR live overlay chrome — a HUD over camera video, not page chrome,
   so this stays dark/high-contrast regardless of the site's light palette ---- */
.ar-stage{position:fixed;inset:0;background:#000}
#ar-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ar-overlay{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ar-photo{position:absolute;object-fit:contain;border:2px solid #fff;box-shadow:0 4px 18px rgba(0,0,0,.5);transition:opacity .15s linear}
.ar-status{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);margin:0;padding:8px 16px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;border-radius:4px;white-space:nowrap}
.ar-debug{position:absolute;top:8px;left:8px;right:8px;max-height:70vh;overflow:auto;background:rgba(0,0,0,.72);color:#8f8;font:11px/1.5 'Courier New',ui-monospace,monospace;border-radius:4px;pointer-events:auto}
.ar-debug-summary{margin:0;padding:8px 10px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ar-debug-details{display:none}
.ar-debug.expanded .ar-debug-details{display:block}
.ar-debug-text{margin:0;padding:6px 10px 10px;white-space:pre-wrap;word-break:break-word}

.ar-map-toggle{position:absolute;right:16px;bottom:16px;z-index:2;width:48px;height:48px;border-radius:50%;border:none;background:rgba(0,0,0,.65);cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center}
.ar-map-widget{position:absolute;right:16px;bottom:74px;width:min(280px,calc(100vw - 32px));height:220px;border-radius:8px;overflow:hidden;border:2px solid #fff;box-shadow:0 6px 24px rgba(0,0,0,.5);pointer-events:auto;display:none}
.ar-map-widget.open{display:block}
.ar-map{width:100%;height:100%;background:#efe8dc}
.ar-map .leaflet-tile-pane{filter:grayscale(1) contrast(.82) brightness(1.06) sepia(.28)}
.ar-device-pin{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:16px solid #2f6fff;filter:drop-shadow(0 0 2px #fff)}