/* Cittopia paper theme, shared by every public page.
   Paper ground, a slowly drifting dot grid, paper cards and buttons, torn edges, and a living
   dot constellation behind each page's hero (added by paper-theme.js).
   Restyles only: headers, copy, sections and links are untouched. The home page adds paper-home.css. */

:root {
  --paper:      #F7F2E8;
  --paper-2:    #EFE7D6;
  --paper-edge: #E3D8C2;
  --ink:        #1B2A23;
  --leaf-3:     #2CA58D;
  --leaf-4:     #1B3A2F;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --tear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'><path d='M0 24 L0 10 L22 14 L41 7 L63 12 L88 5 L104 11 L131 8 L150 15 L176 6 L199 12 L223 9 L247 14 L268 6 L290 11 L318 7 L339 13 L362 5 L386 12 L410 8 L433 14 L455 7 L482 12 L503 6 L527 13 L551 9 L574 15 L596 6 L622 11 L645 7 L667 13 L690 5 L716 12 L738 8 L761 14 L785 7 L809 12 L831 6 L857 13 L879 9 L902 15 L926 6 L951 11 L974 7 L996 13 L1020 5 L1044 12 L1067 8 L1090 14 L1114 7 L1139 12 L1162 6 L1184 11 L1200 9 L1200 24 Z' fill='black'/></svg>");
}

/* ---------------- the ground: paper, fibre, and a field of dots that drifts ---------------- */
body.paper { background: var(--paper) !important; }
body.paper::before {
  content: ""; position: fixed; inset: -40px; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(44,165,141,.26) 1.3px, transparent 1.6px),
    radial-gradient(circle, rgba(156,108,68,.18) 1.1px, transparent 1.4px);
  background-size: 34px 34px, 34px 34px; background-position: 0 0, 17px 17px;
  animation: paper-dot-drift 40s linear infinite;
}
@keyframes paper-dot-drift { to { background-position: 34px 34px, 51px 51px; } }
body.paper::after {   /* paper fibre; no blend mode (multiply made Chrome drop text) */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9990; background-image: var(--grain); opacity: .06;
}
body.paper .bg-light, body.paper .bg-light-dark { background: rgba(239,231,214,.86) !important; }   /* lets the dot field show through faintly */

/* torn paper edge at the top of tinted bands */
body.paper .bg-light-dark { position: relative; }
body.paper .bg-light-dark::after {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 24px; pointer-events: none;
  -webkit-mask: var(--tear) no-repeat center / 100% 100%; mask: var(--tear) no-repeat center / 100% 100%;
  background: rgba(239,231,214,.86); filter: drop-shadow(0 -2px 1px rgba(80,60,30,.10));
}

/* ---------------- the hero: a constellation behind it (canvas added by paper-theme.js) ---------------- */
body.paper .paper-hero { position: relative; isolation: isolate; }
body.paper .paper-hero > canvas.paper-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body.paper .paper-hero > .paper-lift { position: relative; z-index: 1; transform: translateZ(0); }
body.paper .paper-hero > .paper-lift-keep { transform: translateZ(0); }

/* ---------------- paper cards ---------------- */
body.paper .card, body.paper .step-card {
  background: #FFFDF8 !important; border: 1px solid var(--paper-edge) !important; border-radius: 14px !important;
  box-shadow: 0 1px 0 #fff inset, 4px 5px 0 -1px var(--paper-2), 4px 5px 0 0 var(--paper-edge), 0 20px 28px -24px rgba(40,30,10,.40) !important;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms;
}
body.paper a.card:hover, body.paper .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 #fff inset, 7px 9px 0 -1px var(--paper-2), 7px 9px 0 0 var(--paper-edge), 0 28px 34px -24px rgba(40,30,10,.45) !important;
}

/* ---------------- paper buttons: cut card with a thick bottom edge ---------------- */
body.paper .btn.btn-primary, body.paper .btn.btn-secondary, body.paper .btn.btn-outline-primary {
  border-radius: 14px !important; border: 1.5px solid var(--ink) !important; font-weight: 700;
  box-shadow: 0 5px 0 var(--ink) !important; transition: transform 120ms, box-shadow 120ms;
}
body.paper .btn.btn-primary { background: var(--leaf-3) !important; color: #fff !important; }
body.paper .btn.btn-secondary, body.paper .btn.btn-outline-primary { background: #FFFDF8 !important; color: var(--ink) !important; }
body.paper .btn.btn-primary:hover, body.paper .btn.btn-secondary:hover, body.paper .btn.btn-outline-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink) !important; }
body.paper .btn.btn-primary:active, body.paper .btn.btn-secondary:active, body.paper .btn.btn-outline-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink) !important; }

@media (prefers-reduced-motion: reduce) { body.paper::before { animation: none; } }

/* ---------------- city page: area shields as cut paper (city.html .shield-strip) ----------------
   A coloured card shield with a darker layer behind it, paper grain, the paper area icon on a white
   disc, the score on a cream tag and the tier on a notched paper ribbon. */
body.paper .shield-strip { background: transparent !important; border-bottom: 0; gap: 2.2rem 2.6rem; padding: 3rem 1.5rem 2.6rem; }
body.paper .shield { width: 132px; --sc: #5FB49C; --sc-d: #2E7D68; transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
body.paper .shield.tier-gold    { --sc: #E9BE45; --sc-d: #A97D12; }
body.paper .shield.tier-silver  { --sc: #BAC4CE; --sc-d: #7D8A97; }
body.paper .shield.tier-bronze  { --sc: #D19A78; --sc-d: #9A5F3E; }
body.paper .shield.tier-emerald { --sc: #7CC3AC; --sc-d: #2E7D68; }
body.paper .shield:hover { transform: translateY(-6px) rotate(-1.5deg); }
body.paper .shield-body {
  width: 112px; height: 132px; background: none; box-shadow: none; clip-path: none; position: relative;
  filter: drop-shadow(0 12px 10px rgba(60,40,10,.18));
}
body.paper .shield-body::before, body.paper .shield-body::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(50% 0%, 100% 13%, 100% 62%, 50% 100%, 0% 62%, 0% 13%);
}
body.paper .shield-body::before { background: var(--sc-d); transform: translate(5px, 6px); }           /* the layer behind */
body.paper .shield-body::after  { background: var(--grain), linear-gradient(170deg, color-mix(in srgb, var(--sc) 82%, #fff), var(--sc));
                                  box-shadow: inset 0 0 0 3px rgba(255,253,248,.55); }
body.paper .shield-disc {
  position: relative; z-index: 1; width: 66px; height: 66px; margin-top: -14px; border-radius: 50%;
  background: #FFFDF8; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 var(--paper-edge), 0 6px 10px -4px rgba(60,40,10,.35);
}
body.paper .shield-paper { width: 52px; height: 52px; object-fit: contain; }
body.paper .shield-body > i { position: relative; z-index: 1; color: var(--ink); filter: none; margin-top: -14px; }
body.paper .shield-body .shield-score {
  z-index: 1; bottom: 20px; color: var(--ink); text-shadow: none; font-size: .95rem;
  background: #FFFDF8; border: 1px solid var(--paper-edge); border-radius: 6px; padding: .05rem .5rem;
  box-shadow: 0 2px 0 var(--paper-2); transform: rotate(-3deg);
}
body.paper .shield-ribbon {
  position: relative; margin-top: .7rem; padding: .32rem 1.1rem; border-radius: 0;
  background: var(--grain), var(--sc-d); color: #FFFDF8; letter-spacing: .1em;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
  filter: drop-shadow(0 2px 0 rgba(60,40,10,.18));
}
body.paper .shield-label { color: var(--ink); font-weight: 700; margin-top: .45rem; }
@media (max-width: 576px) { body.paper .shield-strip .shield { transform: scale(.8); margin: -.6rem; } }