/* ============================================================
   COMMONS — a warm editorial-minimal local platform
   Design tokens + global styles
   ============================================================ */

:root {
  /* Palette — warm paper + ink + ember accent */
  --paper:        #F5F1E8;
  --paper-2:      #EFEADD;
  --card:         #FBF9F3;
  --ink:          #1B1714;
  --ink-soft:     #4A433C;
  --ink-faint:    #8C8378;
  --line:         #E2DACB;
  --line-strong:  #D2C8B5;

  /* Accent — ember (tweakable) */
  --accent:       #E8482A;
  --accent-deep:  #C5371D;
  --accent-soft:  #FBE4DC;
  --accent-ink:   #FBF9F3;

  /* Supporting hues for category covers / tags */
  --sage:   #5E7355;
  --cobalt: #2C4A6E;
  --plum:   #6B3F5E;
  --gold:   #B98326;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "Geist Mono", "SF Mono", ui-monospace, monospace;

  /* Spacing / shape */
  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --shell:     1240px;

  /* Shadows — soft, warm */
  --shadow-sm: 0 1px 2px rgba(27,23,20,.04), 0 2px 6px rgba(27,23,20,.05);
  --shadow-md: 0 4px 14px rgba(27,23,20,.07), 0 12px 32px rgba(27,23,20,.06);
  --shadow-lg: 0 12px 34px rgba(27,23,20,.10), 0 30px 70px rgba(27,23,20,.10);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Dark theme (tweakable) */
[data-theme="dark"] {
  --paper:       #14110E;
  --paper-2:     #1B1714;
  --card:        #211C18;
  --ink:         #F3ECE0;
  --ink-soft:    #C3B9AB;
  --ink-faint:   #897F71;
  --line:        #2E2823;
  --line-strong: #3C342C;
  --accent-soft: #38241D;
  --accent-ink:  #FBF9F3;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.35);
  --shadow-md: 0 4px 14px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .35; }

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
input, textarea { font: inherit; color: inherit; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Entrance animations only run once the animation engine is confirmed live
   (html.anim, set after the first rAF fires). If frozen — background tab,
   print, or a stalled rAF — content stays in its visible base state. */
html:not(.anim) *, html:not(.anim) *::before, html:not(.anim) *::after {
  animation: none !important;
}
.reveal { opacity: 1; }
html.anim .reveal { transform: translateY(22px); }
html.anim .reveal.shown {
  transform: none;
  transition: transform .7s var(--ease);
}

/* Motion tweak off — disable all animation/transition, force content visible */
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
  animation: none !important; transition: none !important;
}
html.no-motion .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- Reusable bits ---------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; }

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

.serif { font-family: var(--serif); letter-spacing: -0.01em; }
.italic { font-style: italic; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  transition: transform .25s var(--spring), background .2s var(--ease), box-shadow .25s var(--ease), color .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 var(--accent-deep), var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in oklch, var(--accent) 45%, transparent); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn-ghost:hover { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-1px); }
.btn-soft { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-soft:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.icon { width: 18px; height: 18px; flex: none; stroke-width: 1.7; }

/* Pills / chips */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: all .2s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); transform: translateY(-1px); }
.chip[data-on="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }

/* Tag */
.tag {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 500;
  padding: 4px 9px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-deep);
}
[data-theme="dark"] .tag { color: color-mix(in oklch, var(--accent) 75%, white); }

/* Cards */
.surface {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Avatar */
.ava {
  border-radius: 100px; flex: none;
  display: grid; place-items: center;
  font-weight: 700; color: #fff;
  font-size: 13px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
  overflow: hidden;
}

/* Divider */
.hr { height: 1px; background: var(--line); border: 0; }

/* ---------- Entrance animations (transform-only — never hide content) ---------- */
@keyframes rise {
  from { transform: translateY(16px); }
  to   { transform: translateY(0); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  0% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes sweep {
  from { transform: translateX(-10px); }
  to   { transform: translateX(0); }
}

.view-enter > * { animation: rise .6s var(--ease) both; }

/* stagger helper applied inline via --i */
[style*="--i"] { animation-delay: calc(var(--i) * 60ms); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 100px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }



/* ---------- Auth modal (iPanjab) full-page split + location ---------- */
.nav-login{white-space:nowrap}
.auth-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}
.auth-overlay.full{background:var(--paper)}
.auth-split{display:flex;width:100%;height:100%;animation:authFade .25s ease}
@keyframes authFade{from{opacity:0}to{opacity:1}}
.auth-x{position:absolute;top:18px;right:20px;z-index:5;background:var(--card);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;padding:8px;border-radius:10px;line-height:0;box-shadow:0 2px 8px rgba(20,17,14,.08);transition:color .15s,background .15s}
.auth-x:hover{color:var(--ink);background:var(--paper)}
.auth-aside{position:relative;flex:1.05;display:flex;flex-direction:column;justify-content:space-between;padding:42px 46px;overflow:hidden;color:#F5EFE6;background:radial-gradient(120% 80% at 25% 8%,#33284f 0%,#1d1726 45%,#141019 100%)}
.auth-aside::after{content:"";position:absolute;left:-10%;bottom:-20%;width:80%;height:70%;background:radial-gradient(circle,rgba(232,72,42,.4),transparent 60%);filter:blur(20px);pointer-events:none}
.auth-word.light{position:relative;z-index:2;font-size:26px;color:#F5EFE6}
.auth-deck{position:relative;z-index:1;flex:1;margin:26px 0}
.auth-deck-card{position:absolute;width:46%;max-width:228px;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.adk-0{left:30%;top:6%;transform:rotate(5deg);z-index:3}
.adk-1{left:5%;top:17%;transform:rotate(-6deg);z-index:2}
.adk-2{left:55%;top:30%;transform:rotate(9deg);opacity:.92;z-index:1}
.adk-foot{position:absolute;left:0;right:0;bottom:0;padding:14px;color:#fff;font-size:15px;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.auth-aside-copy{position:relative;z-index:2}
.kicker.light{color:rgba(245,239,230,.6)}
.auth-aside-title{font-size:40px;line-height:1.05;margin:10px 0 22px;color:#F8F3EA;font-weight:600}
.auth-aside-stat{display:flex;align-items:center;gap:14px}
.ava-stack{display:flex}
.ava-stack .ava{margin-left:-10px;box-shadow:0 0 0 2px #1d1726}
.ava-stack .ava:first-child{margin-left:0}
.auth-aside-stat p{margin:0;font-size:13.5px;color:rgba(245,239,230,.82);line-height:1.4;max-width:240px}
.auth-aside-stat b{color:#fff}
.auth-panel{flex:1;display:flex;flex-direction:column;background:var(--card);overflow-y:auto}
.auth-panel-top{display:flex;align-items:center;justify-content:space-between;padding:24px 40px;border-bottom:1px solid var(--line)}
.auth-panel-top .logo-word{font-size:20px}
.auth-switch-top{font-size:13.5px;color:var(--ink-soft)}
.auth-switch-top button{background:none;border:none;font:inherit;font-weight:700;color:var(--accent);cursor:pointer;padding:0}
.auth-switch-top button:hover{text-decoration:underline}
.auth-panel-body{width:100%;max-width:404px;margin:auto;padding:36px 40px}
.auth-title{font-size:34px;line-height:1.1;margin:0 0 8px}
.auth-sub{color:var(--ink-soft);font-size:14.5px;line-height:1.5;margin:0 0 22px}
.auth-social{display:flex;flex-direction:column;gap:11px}
.auth-soc{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;transition:background .15s,border-color .15s}
.auth-soc:hover{background:var(--paper);border-color:var(--ink-faint)}
.auth-or{display:flex;align-items:center;gap:14px;margin:19px 0;color:var(--ink-faint);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--mono,inherit)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-form{display:flex;flex-direction:column;gap:15px}
.auth-field{display:flex;flex-direction:column;gap:7px}
.auth-field>span{font-size:13px;font-weight:600;color:var(--ink)}
.auth-field-row{display:flex;align-items:center;justify-content:space-between}
.auth-forgot{font-size:12.5px;color:var(--accent);font-weight:600;cursor:pointer}
.auth-input-wrap{position:relative;display:flex;align-items:center}
.auth-in-icon{position:absolute;left:13px;color:var(--ink-faint);pointer-events:none}
.auth-input{width:100%;padding:12px 14px 12px 40px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s}
.auth-input::placeholder{color:var(--ink-faint)}
.auth-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.auth-input:-webkit-autofill,.auth-input:-webkit-autofill:hover,.auth-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--paper) inset;box-shadow:0 0 0 1000px var(--paper) inset;caret-color:var(--ink)}
.auth-eye{position:absolute;right:10px;background:none;border:none;color:var(--ink-faint);cursor:pointer;padding:4px;line-height:0}
.auth-eye:hover{color:var(--ink-soft)}
.auth-keep{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);cursor:pointer}
.auth-keep input{accent-color:var(--accent);width:16px;height:16px}
.auth-err{background:var(--accent-soft);color:var(--accent-deep,#b8341c);border-radius:11px;padding:10px 13px;font-size:13px;line-height:1.4}
.auth-submit{width:100%;justify-content:center;gap:8px;margin-top:4px;padding:14px;font-size:15px;border-radius:13px}
.auth-fine{text-align:center;font-size:11.5px;color:var(--ink-faint);margin:22px 0 0}
.loc-pop{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;z-index:60}
.loc-list{display:flex;flex-direction:column;max-height:320px;overflow-y:auto;padding:6px}
.loc-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:none;background:none;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;border-radius:9px;text-align:left}
.loc-item:hover{background:var(--paper)}
.loc-item[data-on=true]{color:var(--accent);font-weight:600}
.loc-item .loc-check{margin-left:auto;color:var(--accent)}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
@media(max-width:820px){.auth-aside{display:none}.auth-panel-body{padding:30px 22px}}

.auth-social,.auth-or{display:none}

/* ---- auth polish: crisp inputs + real checkbox + icon spacing ---- */
.auth-input{padding:13px 42px 13px 44px;background:#fff;border:1px solid #E7E0D2;box-shadow:0 1px 2px rgba(20,17,14,.04)}
[data-theme="dark"] .auth-input{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.auth-in-icon{left:15px}
.auth-eye{right:12px}
.auth-field>span{font-weight:600}
.auth-keep{display:flex;align-items:center;gap:10px}
.auth-keep input[type="checkbox"]{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:19px;height:19px;min-width:19px;margin:0;border:1.5px solid #cfc6b5;border-radius:6px;background:#fff;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.auth-keep input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.auth-keep input[type="checkbox"]:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.auth-keep span{white-space:nowrap;font-size:13.5px;color:var(--ink-soft)}

.auth-in-icon{display:none}
.auth-input{padding-left:16px}

.auth-panel-top{padding-right:78px}
.auth-x{z-index:20}