:root {
  --wood: #ffebc2;
  --cream: #fffaf0;
  --cream-deep: #ffedc7;
  --brown: #934127;
  --brown-dark: #692b20;
  --red: #ff5258;
  --blue: #1fa8ef;
  --mint: #32d6b4;
  --yellow: #ffd02c;
  --green: #24bd70;
  --ink: #654032;
  --display: "Titan One", "Arial Rounded MT Bold", sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--wood);
  background-image: linear-gradient(rgb(255 247 229 / 52%), rgb(255 231 186 / 46%)), url("../assets/wood-background.webp");
  background-size: auto, 720px 720px;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
}

a { color: var(--brown); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  border-radius: 12px;
  color: white;
  background: var(--brown-dark);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

.policy-header {
  position: relative;
  z-index: 5;
  width: min(1120px, calc(100% - 40px));
  min-height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--brown-dark);
  font-weight: 900;
  text-decoration: none;
}
.brand img {
  border: 3px solid white;
  border-radius: 16px;
  box-shadow: 0 9px 20px rgb(107 57 10 / 20%);
}
.policy-home-link {
  padding: .68rem 1.2rem;
  border: 3px solid white;
  border-radius: 999px;
  color: white;
  background: linear-gradient(#43d98e, var(--green));
  box-shadow: 0 7px 0 #168d52, 0 12px 24px rgb(18 118 67 / 20%);
  text-decoration: none;
}

.policy-main { width: min(1040px, calc(100% - 40px)); margin: 0 auto 100px; }
.policy-hero {
  position: relative;
  padding: 80px 24px 64px;
  text-align: center;
}
.policy-hero::before,
.policy-hero::after {
  position: absolute;
  content: "";
  width: 56px;
  aspect-ratio: 1;
  border: 7px solid var(--yellow);
  border-radius: 16px;
  box-shadow: inset 0 5px 5px rgb(255 255 255 / 65%), 0 12px 20px rgb(103 51 7 / 18%);
  transform: rotate(12deg);
}
.policy-hero::before { top: 42px; left: 9%; background: var(--blue); }
.policy-hero::after { right: 9%; bottom: 28px; background: var(--red); transform: rotate(-10deg); }
.eyebrow {
  margin: 0 0 1rem;
  color: var(--red);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.policy-hero h1 {
  margin: 0;
  color: var(--brown-dark);
  font-family: var(--display);
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
}
.policy-hero > p:last-child {
  width: fit-content;
  margin: 1.5rem auto 0;
  padding: .48rem 1rem;
  border: 3px solid white;
  border-radius: 999px;
  color: var(--brown);
  background: #ffe6a2;
  font-weight: 900;
  box-shadow: 0 7px 18px rgb(100 50 6 / 12%);
}

.policy-card {
  padding: clamp(2rem, 6vw, 5.2rem);
  border: 6px solid white;
  border-radius: 42px;
  background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(255 246 224 / 96%));
  box-shadow: 0 30px 80px rgb(103 56 11 / 20%);
}
.policy-card > p:first-child { margin-top: 0; font-size: 1.18rem; font-weight: 800; }
.policy-card h2 {
  margin: 3.7rem 0 1.2rem;
  padding-top: 1.5rem;
  border-top: 3px solid #f7d98e;
  color: var(--brown-dark);
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  font-weight: 400;
  line-height: 1.15;
}
.policy-card h3 {
  margin: 2.2rem 0 .55rem;
  color: var(--brown);
  font-size: 1.18rem;
  line-height: 1.3;
}
.policy-card p { margin: .7rem 0 1rem; }
.policy-card ul { margin: .9rem 0 1.6rem; padding-left: 1.45rem; list-style: disc; }
.policy-card li { margin: .42rem 0; padding-left: .2rem; }
.policy-card li::marker { color: #241b17; }

footer {
  padding: 35px max(24px, calc((100vw - 1120px) / 2));
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 3rem;
  color: rgb(255 255 255 / 70%);
  background: var(--brown-dark);
  font-size: .9rem;
}
.footer-brand { display: flex; align-items: center; gap: .8rem; color: white; }
.footer-brand img { border: 2px solid white; border-radius: 14px; }
.footer-brand strong,
.footer-brand span { display: block; line-height: 1.35; }
.footer-brand span { color: rgb(255 255 255 / 55%); font-size: .75rem; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: white; }
footer > p { margin: 0; white-space: nowrap; }

@media (max-width: 720px) {
  .policy-header { width: calc(100% - 28px); min-height: 82px; }
  .brand span { display: none; }
  .policy-home-link { padding: .58rem .95rem; font-size: .88rem; }
  .policy-main { width: calc(100% - 24px); margin-bottom: 60px; }
  .policy-hero { padding: 58px 8px 48px; }
  .policy-hero::before { left: 2%; width: 42px; }
  .policy-hero::after { display: none; }
  .policy-hero > p:last-child { padding: .42rem .72rem; font-size: .82rem; white-space: nowrap; }
  .policy-card { padding: 1.55rem; border-width: 4px; border-radius: 28px; }
  .policy-card h2 { margin-top: 2.8rem; }
  footer { grid-template-columns: 1fr; gap: 1.4rem; text-align: center; }
  .footer-brand,
  .footer-links { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}