/* Belagavi Se — #belagavise
   Palette pulled straight from the stamp logo: indigo #454689 on warm paper. */

/* ---------------------------------------------------------------- fonts --
   Quicksand (display) and Nunito (text), both OFL-1.1, self-hosted from
   /assets/fonts so the page makes no third-party request. Licences sit
   alongside the files. Both are variable fonts: one file per subset covers
   the whole weight range, so there is nothing else to download for bold.   */

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/quicksand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/quicksand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --indigo:      #454689;
  --indigo-700:  #35366b;
  --indigo-300:  #9a9bc7;
  --indigo-100:  #e7e7f4;
  --indigo-050:  #f2f2fa;

  --ink:         #1c1d33;
  --ink-soft:    #5a5b74;
  --ink-faint:   #8f90a6;

  --paper:       #fbfaf6;
  --surface:     #ffffff;
  --line:        #e9e7dd;
  --line-soft:   #f2f0e8;

  --heart:       #d94f5c;
  --mint:        #2e9e7c;
  --mint-soft:   #e6f5ef;
  --amber:       #c8892b;
  --amber-soft:  #fdf3e2;
  --sand:        #ddd6c4;
  --sand-soft:   #f6f2e6;
  --sand-ink:    #8a7d5f;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 29, 51, .05);
  --shadow-md: 0 4px 18px rgba(28, 29, 51, .07);
  --shadow-lg: 0 18px 48px rgba(69, 70, 137, .13);

  /* Self-hosted rounded type. The system faces stay on as fallbacks for the
     moment before the woff2 lands, and for anything outside latin/latin-ext
     (a listing written in Kannada or Devanagari falls through to the OS). */
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
          "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Quicksand", "Nunito", ui-rounded, "SF Pro Rounded",
          "Segoe UI Variable Display", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* The browser's own [hidden] rule is display:none, which any author rule that
   sets display — .btn is inline-flex, .edit-panel is grid — silently beats.
   Without this, `el.hidden = true` does nothing to those elements. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* Keep anchored sections clear of the sticky header. */
section[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0;
}

a { color: var(--indigo); }

.wrap { width: min(1140px, 100% - 40px); margin-inline: auto; }

/* ---------------------------------------------------------------- header -- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 246, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex; align-items: center; gap: 16px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { width: 42px; height: 42px; display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--indigo); }
.brand-tag  { font-size: 12.5px; font-weight: 700; color: var(--ink-faint); letter-spacing: .01em; margin-top: 3px; }

.header-spacer { flex: 1; }

.header-links { display: flex; align-items: center; gap: 8px; }
.header-links a.quiet {
  color: var(--ink-soft); text-decoration: none; font-weight: 600;
  font-size: 15px; padding: 9px 14px; border-radius: var(--r-pill);
}
.header-links a.quiet:hover { background: var(--indigo-050); color: var(--indigo); }

/* --------------------------------------------------------------- buttons -- */

.btn {
  font: inherit; font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  border: 0; cursor: pointer;
  padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--indigo); color: #fff;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--indigo-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn.ghost { background: var(--surface); color: var(--indigo); border: 1.5px solid var(--indigo-100); }
.btn.ghost:hover { background: var(--indigo-050); border-color: var(--indigo-300); }

.btn.small { padding: 7px 14px; font-size: 13.5px; }

/* ------------------------------------------------------------------ hero -- */

.hero { padding: 72px 0 44px; text-align: center; position: relative; overflow: hidden; }

.hero::before {
  content: ""; position: absolute; inset: -50% 0 auto 0; height: 620px;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--indigo-050), transparent 70%);
  pointer-events: none;
}

.hero > * { position: relative; }

.hero-stamp {
  width: 108px; height: 108px; margin: 0 auto 22px; display: block;
  animation: settle .7s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes settle {
  from { opacity: 0; transform: translateY(-10px) rotate(-8deg) scale(.9); }
  to   { opacity: 1; transform: none; }
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(52px, 10vw, 92px);
  font-weight: 700; letter-spacing: -.045em; color: var(--indigo);
  margin: 0;
}

.rally {
  display: inline-flex; align-items: baseline; gap: 1px;
  margin-top: 20px; padding: 6px 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 3.7vw, 29px); letter-spacing: -.02em;
  background: none; border: 0; cursor: pointer;
  transition: transform .15s ease;
}
.rally:hover { transform: translateY(-1px); }
.rally:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; border-radius: 8px; }
.rally-fixed { color: var(--ink-faint); }
.rally-word {
  color: var(--indigo);
  /* Width is set in JS to the measured width of each word and transitioned, so
     the line stays genuinely centred AND never snaps. Reserving the widest word
     instead would hold the width steady but park the whole line ~100px left of
     centre, under a centred hero — visibly wrong. */
  display: inline-block; overflow: hidden; white-space: nowrap;
  text-align: left; vertical-align: baseline;
  transition: width .35s cubic-bezier(.2,.8,.3,1);
  animation: rally-in .45s cubic-bezier(.2,.8,.3,1);
}
@keyframes rally-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.rally-note {
  display: block; margin-top: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-faint);
}

.hero-sub {
  max-width: 560px; margin: 22px auto 0;
  font-size: 18px; color: var(--ink-soft); line-height: 1.55;
}

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

.hero-stats {
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
  margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line);
}
.stat-n { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--indigo); letter-spacing: -.03em; }
.stat-l { font-size: 13px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }

/* --------------------------------------------------------------- filters -- */

.toolbar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin: 40px 0 22px;
}

.search {
  flex: 1 1 260px; min-width: 220px; position: relative;
}
.search input {
  width: 100%; font: inherit; font-size: 15px;
  padding: 12px 18px 12px 44px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
}
.search input:focus { outline: none; border-color: var(--indigo-300); box-shadow: 0 0 0 4px var(--indigo-050); }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font: inherit; font-family: var(--font-display); font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 8px 15px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft);
  transition: all .14s ease; white-space: nowrap;
}
.chip:hover { border-color: var(--indigo-300); color: var(--indigo); }
.chip[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: #fff; }

/* ----------------------------------------------------------------- cards -- */

.grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  margin-bottom: 56px;
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 22px 0;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--indigo-100); }

.card-top { display: flex; align-items: flex-start; gap: 13px; }

.card-emoji {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center; font-size: 24px;
  background: var(--indigo-050); border-radius: var(--r-md);
}

.card-name { font-family: var(--font-display); font-size: 18.5px; font-weight: 700; letter-spacing: -.02em; }
.card-name a { color: inherit; text-decoration: none; }
.card-name a:hover { color: var(--indigo); }

.card-tagline { color: var(--ink-soft); font-size: 15px; margin: 10px 0 0; }

.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--indigo-050); color: var(--indigo);
}
.badge.verified { background: var(--mint-soft); color: var(--mint); }
.badge.curated  { background: var(--line-soft); color: var(--ink-faint); }
.badge.checking { background: var(--amber-soft); color: var(--amber); }
/* Unclaimed: a soft, neutral sand — deliberately NOT the amber of a moderation
   state and nowhere near a warning red. It reads as "incomplete", not "suspect". */
.badge.unclaimed { background: var(--sand-soft); color: var(--sand-ink); }

/* An unclaimed card is quieter than a claimed one, and its dashed edge reads as
   an outline waiting to be filled in. It must still look like a real listing —
   these are genuine Belagavi businesses that simply have not been claimed. */
.card.unclaimed { border-style: dashed; border-color: var(--sand); background: var(--surface); }
.card.unclaimed:hover { border-style: solid; border-color: var(--indigo-100); }

.claim-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 0 0; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); font-weight: 600;
}
.claim-cta {
  font: inherit; font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  cursor: pointer; border: 0; background: none; color: var(--indigo);
  padding: 0; text-decoration: underline; text-underline-offset: 3px;
}
.claim-cta:hover { color: var(--indigo-700); }
.people { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--mint); }

.card-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; font-size: 13px; color: var(--ink-faint); font-weight: 600;
}
.card-meta a { color: var(--indigo); text-decoration: none; }
.card-meta a:hover { text-decoration: underline; }

/* The line that ties every listing back to the brand. */
.card-foot {
  margin-top: auto; padding: 14px 0 16px;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.made-in {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.made-in .heart { color: var(--heart); font-size: 13px; }
.made-in .se { color: var(--indigo); }

.card-acts { display: flex; gap: 6px; }
.icon-btn {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-faint);
  padding: 5px 11px; border-radius: var(--r-pill); transition: all .14s ease;
}
.icon-btn:hover { border-color: var(--indigo-300); color: var(--indigo); background: var(--indigo-050); }
.icon-btn.done { background: var(--mint-soft); border-color: var(--mint-soft); color: var(--mint); }
.icon-btn:disabled { opacity: .6; cursor: default; }

.empty {
  grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--ink-faint);
}
.empty strong { display: block; font-size: 19px; color: var(--ink); margin-bottom: 6px; }

.skeleton {
  height: 214px; border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--line-soft) 30%, #fff 50%, var(--line-soft) 70%);
  background-size: 220% 100%; animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------------------------------------------------------------- submit -- */

.submit-band {
  background: var(--indigo); color: #fff;
  border-radius: var(--r-xl); padding: 48px 40px; margin-bottom: 64px;
  position: relative; overflow: hidden;
}
.submit-band::after {
  content: ""; position: absolute; right: -70px; bottom: -90px;
  width: 300px; height: 300px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.16);
}
.submit-band > * { position: relative; }
.submit-band h2 { font-size: clamp(26px, 4vw, 36px); }
.submit-band p.lede { color: rgba(255,255,255,.8); max-width: 470px; margin: 12px 0 0; }

.form { margin-top: 30px; display: grid; gap: 16px; max-width: 660px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field label {
  display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px;
  color: rgba(255,255,255,.9); letter-spacing: .01em;
}
.field .hint { font-weight: 600; color: rgba(255,255,255,.55); }

.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15px;
  padding: 12px 16px; border-radius: var(--r-md);
  border: 1.5px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1); color: #fff;
}
.field textarea { resize: vertical; min-height: 84px; border-radius: var(--r-md); }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.45); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.16);
}
.field select option { color: var(--ink); background: #fff; }

/* ------------------------------------------------------------ emoji picker -- */

.emoji-wrap { position: relative; }
.emoji-row { display: flex; gap: 10px; align-items: center; }
.emoji-row input { flex: 1; min-width: 0; }

.emoji-trigger {
  /* Height is pinned to match the text inputs beside it. Left to shrink-wrap,
     any stray padding rule silently resizes it — which is exactly what happened
     when this modifier was called `.empty` and collided with the wall's
     "nothing here yet" placeholder and its 60px padding. */
  flex: none; width: 52px; height: 50px; padding: 0;
  font-size: 22px; line-height: 1; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  border-radius: var(--r-md);
  transition: border-color .14s ease, background .14s ease;
}
.emoji-trigger:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .18); }
.emoji-trigger.emoji-blank { opacity: .5; }
.emoji-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The panel is always light: it sits over the indigo band on the add form and
   over white on a listing page, and one readable treatment beats two. */
.emoji-panel {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0;
  width: min(340px, calc(100vw - 48px)); max-height: 300px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 12px 14px;
}

.emoji-group + .emoji-group { margin-top: 12px; }
.emoji-group-name {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 6px;
}
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; }
.emoji-cell {
  font-size: 19px; line-height: 1; padding: 6px 0; cursor: pointer;
  background: none; border: 0; border-radius: 8px;
  transition: background .12s ease, transform .12s ease;
}
.emoji-cell:hover { background: var(--indigo-050); transform: scale(1.15); }
.emoji-cell:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }

/* On a white surface — the listing page edit form — the trigger needs the
   light treatment instead of the one tuned for the indigo band. */
.field.light .emoji-trigger {
  border-color: var(--line); background: var(--surface); color: var(--ink);
}
.field.light .emoji-trigger:hover { border-color: var(--indigo-300); background: var(--indigo-050); }
.field.light .emoji-trigger:focus-visible { outline-color: var(--indigo); }

/* Honeypot — invisible to people, irresistible to form-filling bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.btn.on-indigo { background: #fff; color: var(--indigo); }
.btn.on-indigo:hover { background: var(--indigo-050); }

.form-msg { font-size: 14.5px; font-weight: 600; }
.form-msg.err { color: #ffc9ce; }
.form-msg.ok  { color: #bff0dd; }

/* ---------------------------------------------------------------- report -- */

dialog.sheet {
  border: 0; border-radius: var(--r-lg); padding: 0;
  width: min(460px, calc(100% - 32px));
  box-shadow: var(--shadow-lg); color: var(--ink);
}
dialog.sheet::backdrop { background: rgba(28, 29, 51, .45); backdrop-filter: blur(3px); }
.sheet-in { padding: 28px; }
.sheet h3 { font-size: 20px; }
.sheet p { color: var(--ink-soft); font-size: 14.5px; margin: 10px 0 18px; }
.sheet textarea {
  width: 100%; font: inherit; font-size: 15px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); min-height: 92px; resize: vertical;
}
.sheet textarea:focus { outline: none; border-color: var(--indigo-300); box-shadow: 0 0 0 4px var(--indigo-050); }
.sheet-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.field.light label { color: var(--ink); }
.field.light .hint { color: var(--ink-faint); font-weight: 600; }
.field.light input {
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
}
.field.light input::placeholder { color: var(--ink-faint); }
.field.light input:focus {
  border-color: var(--indigo-300); background: var(--surface);
  box-shadow: 0 0 0 4px var(--indigo-050);
}
.sheet .field { margin-bottom: 14px; }

.confirm-view { text-align: center; }
.confirm-mark {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
}
.confirm-mark.good { background: var(--mint-soft); color: var(--mint); }
.confirm-mark.bad  { background: #fdeaec; color: var(--heart); }
.confirm-view p { margin: 10px 0 0; }
.confirm-view .confirm-what { color: var(--ink-faint); font-size: 13.5px; margin-top: 12px; }
.confirm-view .sheet-acts { justify-content: center; margin-top: 22px; }

.fineprint {
  margin-top: 16px; padding: 13px 15px; background: var(--indigo-050);
  border-radius: var(--r-md); font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}

/* --------------------------------------------------------------- how-band -- */

.how { margin-bottom: 64px; }
.how h2 { font-size: clamp(24px, 3.5vw, 30px); text-align: center; }
.how > p { text-align: center; color: var(--ink-soft); max-width: 560px; margin: 12px auto 34px; }
.how-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.how-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
}
.how-card .n {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--indigo); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 14px;
}
.how-card h3 { font-size: 16.5px; margin-bottom: 7px; }
.how-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 52px 0 40px; text-align: center;
}
.footer-mark { width: 56px; height: 56px; margin: 0 auto 18px; display: block; opacity: .9; }
.footer-word { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--indigo); letter-spacing: -.035em; }
.footer-hash { font-size: 15px; font-weight: 700; color: var(--ink-faint); margin-top: 6px; }
.footer-made { margin-top: 24px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.footer-made .heart { color: var(--heart); }
.footer-made .se { color: var(--indigo); }
.footer-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 720px) {
  .wrap { width: calc(100% - 32px); }
  .hero { padding: 48px 0 32px; }
  .hero-stats { gap: 28px; }
  .row2 { grid-template-columns: 1fr; }
  .submit-band { padding: 34px 24px; border-radius: var(--r-lg); }
  .header-links a.quiet { display: none; }
  .site-header .wrap { height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}