/* ==========================================================================
   Cookie Policy page — normal flowing single-column legal-copy layout (no
   scroll-snap), same architecture as post.css/thoughts.css. Shared
   button/nav/footer/cookie styles live in components.css; global
   .pg-col/.pg-title/.pg-body type-scale primitives in base.css.
   ========================================================================== */

.cp-sec {
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: min(56px, 8dvh) 20px min(36px, 5dvh) 20px;
}

.cp-sec--accent {
  background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat;
  padding-bottom: min(56px, 8dvh);
}

.cp-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.8rem, 3.6cqw, 2.1dvh);
  letter-spacing: 0.08em;
  color: var(--colour-ink);
  text-transform: uppercase;
}

.cp-back:hover { color: var(--colour-accent); }

.cp-updated {
  margin-top: min(10px, 1.2dvh);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.78rem, 3.4cqw, 2dvh);
  letter-spacing: 0.06em;
  color: #5C646B;
  text-transform: uppercase;
}

.cp-body {
  width: 100%;
  max-width: 72ch;
  margin-top: min(28px, 3.4dvh);
}

.cp-h2 {
  margin: min(30px, 3.4dvh) 0 min(10px, 1.2dvh) 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: min(1.2rem, 5.4cqw, 2.8dvh);
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--colour-ink);
}

.cp-body > .cp-h2:first-child { margin-top: 0; }

.cp-p {
  margin: 0 0 min(14px, 1.6dvh) 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(1rem, 4.4cqw, 2.4dvh);
  line-height: 1.55;
  color: var(--colour-ink);
}

.cp-p a { color: var(--colour-accent); text-decoration: underline; }

.cp-list {
  margin: 0 0 min(16px, 1.8dvh) 0;
  padding-left: 1.2em;
}

.cp-list li {
  margin-bottom: min(8px, 1dvh);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(1rem, 4.4cqw, 2.4dvh);
  line-height: 1.5;
  color: var(--colour-ink);
}

.cp-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: min(18px, 2dvh);
}

.cp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: min(0.92rem, 4cqw, 2.2dvh);
}

.cp-table th,
.cp-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--colour-ink-12);
  vertical-align: top;
}

.cp-table th {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--colour-ink);
}

.cp-manage {
  width: auto;
  padding: 10px 22px;
  margin-top: min(6px, 1dvh);
}

@media (min-width: 760px) {
  .cp-sec .pg-col { max-width: min(1200px, calc(100vw - 48px)); }
  .cp-sec .pg-title { font-size: min(16pt, 3dvh); }
  .cp-p, .cp-list li { font-size: min(13pt, 2.4dvh); }
}