/* =============================================================================
   CueArrena — standalone policy pages:
     /terms.html
     /privacy.html

   The same pirate-parchment treatment cuearr.com uses for its policy pages
   (/assets/parchment.css), so the two properties' legal documents read as
   siblings rather than as two unrelated sites. Adapted here rather than
   linked: webfonts are CORS-restricted cross-origin and cuearrena.com is a
   different registrable domain, so nothing can be shared with cuearr.com by
   reference — see the note at the top of cuearrena.css.

   Self-contained: does NOT depend on codex.css or cuearrena.css. It only
   needs /cuearrena-assets/fonts/fonts.css for the three faces below.

   Beyond the cuearr.com original this adds the four things the CueArrena
   legal documents actually use: an h3 level, .legal-meta, .legal-toc and
   .callout.
   ============================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  color: #efdcb2;
  font-family: "IM Fell English", "Georgia", serif;
  font-size: 17px;
  line-height: 1.6;
  background:
    radial-gradient(ellipse at 20% 6%,  rgba(255,205,107,0.14), transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(126,212,255,0.10), transparent 55%),
    linear-gradient(180deg, #0d1523 0%, #14304f 55%, #1a3d6a 82%, #050a15 100%);
  background-attachment: fixed;
  padding: clamp(2rem, 4vw, 4rem) 1rem;
  -webkit-font-smoothing: antialiased;
}

/* Grain overlay across the sea */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.24; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.89  0 0 0 0 0.75  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Top bar (brand + back link) ---------- */
.pheader {
  max-width: 900px; margin: 0 auto 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  position: relative; z-index: 100;
}
.pheader__brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: #efdcb2; text-decoration: none;
}
.pheader__mark {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #c98f3d;
  background: linear-gradient(135deg, #1a0e04, #050a15);
  overflow: hidden;
  flex: none;
}
.pheader__mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.pheader__name {
  font-family: "Cinzel Decorative", "Georgia", serif;
  font-weight: 900; letter-spacing: 0.06em;
  font-size: 1.15rem;
}
.pheader__actions { display: inline-flex; align-items: center; gap: 0.7rem; }
.pheader__close {
  font-family: "Cinzel Decorative", "Georgia", serif;
  font-weight: 700; text-transform: uppercase;
  font-size: 0.72rem; letter-spacing: 0.14em;
  color: #ffcd6b; text-decoration: none;
  padding: 0.45rem 0.85rem;
  background: rgba(255,205,107,0.08);
  border: 1px solid rgba(201,143,61,0.45);
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pheader__close:hover { background: rgba(255,205,107,0.18); border-color: #ffcd6b; }

/* ---------- Parchment scroll ---------- */
.pparchment {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.pparchment__roll {
  position: relative;
  height: 30px;
  margin: 0 -10px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(0deg,
      rgba(80,45,15,0.10) 0 2px,
      transparent 2px 5px),
    linear-gradient(180deg, #e0c084 0%, #b8945a 35%, #d9bd80 55%, #a37f4a 80%, #7a5a2a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,240,210,0.55),
    inset 0 -4px 8px rgba(60,30,10,0.45),
    0 8px 14px rgba(0,0,0,0.4);
  z-index: 3;
}
.pparchment__cap {
  position: absolute; top: -3px; bottom: -3px;
  width: 32px; border-radius: 50%;
  background:
    radial-gradient(circle at 40% 32%, #eecf8c 0%, #b8945a 45%, #7a5a2a 85%, #3a2411 100%);
  border: 1px solid #3a2411;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.35);
}
.pparchment__cap--l { left: -16px; }
.pparchment__cap--r { right: -16px; }
.pparchment__body {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.4rem, 4vw, 3rem);
  color: #2a1a0a;
  background:
    linear-gradient(90deg,
      rgba(80,40,15,0.55) 0%,
      rgba(80,40,15,0.15) 5%,
      transparent 10%,
      transparent 90%,
      rgba(80,40,15,0.15) 95%,
      rgba(80,40,15,0.55) 100%),
    radial-gradient(ellipse at 12% 22%, rgba(120,70,30,0.28), transparent 40%),
    radial-gradient(ellipse at 88% 78%, rgba(120,70,30,0.28), transparent 40%),
    radial-gradient(ellipse at 62% 12%, rgba(120,70,30,0.18), transparent 35%),
    radial-gradient(ellipse at 28% 82%, rgba(120,70,30,0.22), transparent 40%),
    radial-gradient(ellipse at 75% 45%, rgba(120,70,30,0.14), transparent 45%),
    linear-gradient(180deg, #ead4a0 0%, #d9bd80 55%, #cba76b 100%);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    inset 0 6px 12px rgba(60,30,10,0.35),
    inset 0 -6px 12px rgba(60,30,10,0.35);
}
.pparchment__body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.18  0 0 0 0 0.05  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: 0.5;
}
.pparchment__body > * { position: relative; z-index: 1; }

/* ---------- Typography inside the parchment ---------- */
.pparchment__body h1 {
  font-family: "Cinzel Decorative", "Georgia", serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 3vw + 0.8rem, 2.6rem);
  line-height: 1.1;
  margin: 0 0 0.4rem;
  color: #3a1a04;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.pparchment__body h2 {
  font-family: "Cinzel Decorative", "Georgia", serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1vw + 0.9rem, 1.45rem);
  color: #5a0f18;
  margin: 2rem 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px double rgba(90,15,24,0.4);
  scroll-margin-top: 1rem;
}
/* h3 is not in the cuearr.com original; the privacy policy subdivides
   "What data we collect" and needs a level below h2 that still reads as a
   heading and not as bold body copy. */
.pparchment__body h3 {
  font-family: "Cinzel Decorative", "Georgia", serif;
  font-weight: 700;
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.12rem);
  color: #6a2a12;
  margin: 1.5rem 0 0.4rem;
  letter-spacing: 0.02em;
}
.pparchment__body p {
  margin: 0.9rem 0;
  color: #2a1a0a;
}
.pparchment__body em, .pparchment__body i { color: #3a2411; }
.pparchment__body strong { color: #3a1a04; }
.pparchment__body ul, .pparchment__body ol {
  padding-left: 1.4rem;
  margin: 0.6rem 0 1rem;
}
.pparchment__body li { margin: 0.35rem 0; }
.pparchment__body a {
  color: #a01e28;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(160,30,40,0.45);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.pparchment__body a:hover { color: #6a0f18; text-decoration-color: #6a0f18; }
.pparchment__body hr {
  border: none;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(90,15,24,0.4) 0 6px,
    transparent 6px 12px);
  margin: 2rem 0;
}

/* ---------- Effective / updated line under the title ---------- */
.legal-meta {
  font-family: "IM Fell English", "Georgia", serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #5a3218;
  margin: 0 0 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 2px double rgba(90,15,24,0.28);
}
.legal-meta strong { color: #4a2408; font-style: normal; }

/* ---------- Contents list ---------- */
.legal-toc {
  margin: 1.6rem 0 2rem;
  padding: 1rem 1.2rem 1.1rem;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(139,58,26,0.28);
  border-radius: 6px;
}
.legal-toc > strong {
  display: block;
  font-family: "Cinzel Decorative", "Georgia", serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a0f18;
  margin-bottom: 0.6rem;
}
.legal-toc ol {
  margin: 0;
  padding-left: 1.3rem;
  columns: 2;
  column-gap: 2rem;
}
.legal-toc li {
  margin: 0.2rem 0;
  break-inside: avoid;
  font-size: 0.95rem;
}
.legal-toc a {
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid rgba(160,30,40,0.28);
}
.legal-toc a:hover { border-bottom-color: #6a0f18; }
@media (max-width: 620px) {
  .legal-toc ol { columns: 1; }
}

/* ---------- Callout: the "read this bit" box ---------- */
.callout {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  background: rgba(255,205,107,0.26);
  border-left: 4px solid #a01e28;
  border-radius: 4px;
  color: #3a1a04;
}
.callout p { margin: 0.4rem 0; }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Wax seal at top-right of parchment ---------- */
.pseal {
  position: absolute; top: -18px; right: 20px;
  width: 70px; height: 70px;
  z-index: 5;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
  transform: rotate(-10deg);
}
.pseal svg { width: 100%; height: 100%; }

/* ---------- Bottom link outside the parchment ---------- */
.pfoot {
  max-width: 900px; margin: 1.8rem auto 0;
  text-align: center;
  position: relative; z-index: 1;
  font-family: "IM Fell English", serif; font-style: italic;
  color: #c9b98f;
}
.pfoot a { color: #ffcd6b; text-decoration: none; }
.pfoot a:hover { text-decoration: underline; }
.pfoot__links {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  justify-content: center;
  font-style: normal;
  font-family: "Cinzel Decorative", "Georgia", serif;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 0.9rem;
}

@media (max-width: 640px) {
  body { padding: 1.4rem 0.6rem; }
  .pheader { margin-bottom: 1rem; }
  .pheader__name { font-size: 1rem; }
  .pparchment__body { padding: 1.6rem 1.2rem; }
  .pseal { width: 54px; height: 54px; top: -12px; right: 12px; }
}