/* ============================================
   Shared styles — used by every page
   ============================================ */
:root{
  --paper:#f4f1ea;
  --paper-2:#ece7db;
  --paper-3:#e3ddcc;
  --ink:#1a1a1a;
  --ink-2:#2f2d28;
  --ink-3:#5a564d;
  --ink-4:#8c8678;
  --rule:#cfc7b3;
  --amber:oklch(0.65 0.15 45);
}
*{box-sizing:border-box;margin:0;padding:0}

html,body{
  background:var(--paper);color:var(--ink);
  font-family:"Instrument Serif",serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:0.02em}

/* grain */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.35;mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.04) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.03) 0 1px, transparent 1px),
    radial-gradient(circle at 45% 60%, rgba(0,0,0,.03) 0 1px, transparent 1px);
  background-size: 120px 120px, 90px 90px, 160px 160px;
}

/* buttons */
.btn{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:10px 18px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block
}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--paper)}
.btn.amber:hover{background:transparent;color:var(--amber)}
.btn.danger{background:#c0392b;border-color:#c0392b}
.btn.danger:hover{background:transparent;color:#c0392b}

/* header */
header.top{
  position:fixed;top:0;left:0;right:0;padding:22px 40px;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  pointer-events:auto;
}
header.top .brand{
  font-family:"Instrument Serif";font-size:28px;letter-spacing:-0.01em;
  display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)
}
header.top .brand .dot{
  width:8px;height:8px;border-radius:50%;background:var(--ink);
  display:inline-block;transform:translateY(-4px)
}
/* Nav links used to render at 13px (Journal / Map) — too small against
   the 28px brand and felt like marginalia. 17px + ink-2 tone pulls them
   into the primary reading hierarchy without fighting the brand mark. */
header.top nav{display:flex;gap:34px;font-size:17px;font-family:"Instrument Serif",serif}
header.top nav a{color:var(--ink-2);text-decoration:none;cursor:pointer;transition:color .2s,border-color .2s;padding-bottom:3px;border-bottom:1px solid transparent}
header.top nav a:hover{color:var(--ink)}
header.top nav a.active{color:var(--ink);border-bottom-color:var(--ink)}
header.top .who{display:flex;align-items:center;gap:14px;font-size:12px}
.who-label{color:var(--ink-3)}

/* Login modal */
.modal-bg{
  position:fixed;inset:0;background:rgba(26,26,26,.3);backdrop-filter:blur(8px);
  z-index:90;display:none;align-items:center;justify-content:center;pointer-events:auto
}
.modal-bg.on{display:flex}
.modal{
  background:var(--paper);border:1px solid var(--ink);padding:40px;
  width:420px;max-width:92vw;position:relative
}
.modal h3{font-size:32px;margin-bottom:4px;font-weight:400}
.modal-kicker{font-size:10px;color:var(--ink-4);letter-spacing:.08em}
.modal-title{margin-top:6px}
.modal-copy{
  font-size:11px;color:var(--ink-3);margin-top:6px;letter-spacing:.06em
}
.modal-form{margin-top:16px}
.modal label{
  display:block;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px
}
.modal input{
  width:100%;padding:12px 0;background:transparent;border:none;
  border-bottom:1px solid var(--ink-3);
  font-family:"Instrument Serif";font-size:18px;color:var(--ink);outline:none
}
.modal input:focus{border-color:var(--ink)}
.modal .actions{
  margin-top:28px;display:flex;justify-content:space-between;
  align-items:center;gap:12px
}
.modal .close{
  position:absolute;top:14px;right:16px;background:none;border:none;cursor:pointer;
  color:var(--ink-3);font-family:"JetBrains Mono",monospace;font-size:11px
}
.modal .login-error{
  font-family:"JetBrains Mono",monospace;font-size:10px;color:#c0392b;
  letter-spacing:.06em;margin-top:8px;min-height:16px
}

/* Generic page container (used by map + blog) */
.page-wrap{max-width:1100px;margin:0 auto;padding:120px 40px 80px}

/* Leaflet custom marker (used on map page + inline pickers) */
.tb-marker{
  width:20px;height:20px;background:var(--ink);border:2px solid var(--paper);
  border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3);
  transform:translate(-50%,-50%);
}

/* Small inline link-style button */
.link-btn{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
}
.link-btn:hover{color:var(--ink)}

/* ============================================
   Custom cursors — ink-on-paper aesthetic.
   Defined last + !important so they beat the
   cursor:pointer / cursor:zoom-in rules elsewhere.
   ============================================ */
html,body{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='7.5' fill='none' stroke='%231a1a1a' stroke-width='1.2'/><circle cx='12' cy='12' r='1.6' fill='%231a1a1a'/></svg>") 12 12, auto !important;
}
a,button,.btn,.link-btn,[role="button"],
.entry-card,.tl-row,.gitem,.pv,.rm,
header.top nav a,.blog-back,.modal .close,
.scene-nav button,
input[type="submit"],input[type="button"],label[for],
.map-box,.drop,.composer .drop,.pframe,
[data-click]{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><circle cx='13' cy='13' r='10' fill='none' stroke='%231a1a1a' stroke-width='1' opacity='.5'/><circle cx='13' cy='13' r='5' fill='%231a1a1a'/><circle cx='13' cy='13' r='1.8' fill='%23f4f1ea'/></svg>") 13 13, pointer !important;
}
a:active,button:active,.btn:active,
.entry-card:active,.tl-row:active,.gitem:active,
.scene-nav button:active{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><circle cx='11' cy='11' r='8' fill='%231a1a1a'/><circle cx='11' cy='11' r='3' fill='%23f4f1ea'/></svg>") 11 11, pointer !important;
}
/* Zoom-in (gallery + inline story images) */
.blog-gallery .gitem,.blog-story img,.gitem img{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='12' cy='12' r='8' fill='none' stroke='%231a1a1a' stroke-width='1.4'/><line x1='12' y1='8' x2='12' y2='16' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round'/><line x1='8' y1='12' x2='16' y2='12' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round'/><line x1='18' y1='18' x2='25' y2='25' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round'/></svg>") 12 12, zoom-in !important;
}
/* Zoom-out (lightbox backdrop) */
#lightbox{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='12' cy='12' r='8' fill='none' stroke='%23f4f1ea' stroke-width='1.4'/><line x1='8' y1='12' x2='16' y2='12' stroke='%23f4f1ea' stroke-width='1.4' stroke-linecap='round'/><line x1='18' y1='18' x2='25' y2='25' stroke='%23f4f1ea' stroke-width='1.6' stroke-linecap='round'/></svg>") 12 12, zoom-out !important;
}
/* Text inputs keep native text cursor */
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="search"],input:not([type]),
textarea,[contenteditable="true"],.rich{
  cursor:text !important;
}

/* ============================================
   Reduced motion — respect user preference.
   Kills CSS animations and transitions globally;
   JS parallax/rotation is gated separately.
   ============================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}