@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("assets/fonts/caveat-regular.ttf") format("truetype");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("assets/fonts/caveat-semibold.ttf") format("truetype");font-weight:600 700;font-style:normal;font-display:swap}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.178 0 0);
  --card: oklch(1 0 0);
  --primary: oklch(0.55 0.275 264.7);
  --primary-foreground: oklch(1 0 0);
  --lavender: oklch(0.927 0.047 294.5);
  --lavender-marker: oklch(0.84 0.095 302);
  --green-marker: oklch(0.88 0.105 151);
  --orange: oklch(0.75 0.163 54.2);
  --muted: oklch(0.97 0.003 286);
  --muted-foreground: oklch(0.42 0 0);
  --border: oklch(0.178 0 0);
}

* { box-sizing: border-box; }
html { background: var(--background); overflow-x: hidden; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; }

.page-shell {
  min-height: 100vh;
  padding: 46px 20px 32px;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--foreground) 6%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
}

.notebook {
  position: relative;
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 45px 24px 30px;
  background: var(--background);
  border: 1.5px solid var(--foreground);
  border-radius: 13px 10px 14px 11px;
  box-shadow: 4px 5px 0 var(--lavender);
}

.rings { position: absolute; top: -17px; left: 50%; display: flex; gap: 14px; transform: translateX(-50%); }
.rings span { display: block; width: 8px; height: 31px; border: 2px solid var(--foreground); border-radius: 5px; background: var(--background); transform: rotate(2deg); }
.rings span:nth-child(even) { transform: rotate(-2deg); }

.brand-header { display: flex; justify-content: center; margin: 0 auto 28px; }
.brand-logo { display: block; width: min(100%, 390px); height: auto; }

.intro-section h1 { margin: 0; font-size: clamp(2rem, 8.2vw, 3.05rem); font-weight: 800; line-height: 1.13; letter-spacing: 0; text-wrap: balance; }
.marker-highlight { position: relative; z-index: 0; white-space: normal; }
.marker-highlight::before { content: ""; position: absolute; z-index: -1; left: -0.08em; right: -0.1em; bottom: 0.06em; height: 0.48em; background: var(--lavender); transform: rotate(-1deg); border-radius: 2px; }
.intro-section > p { margin: 24px 0 0; font-family: "Caveat", cursive; font-size: 1.55rem; line-height: 1.35; font-weight: 500; }

.primary-wrap { position: relative; display: grid; gap: 14px; margin: 32px 0 42px; }
.attention-arrow { display: none; }
.instagram-link, .whatsapp-link { position: relative; isolation: isolate; overflow: hidden; color: var(--foreground); border: 1.5px solid var(--foreground); text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.instagram-link::before, .whatsapp-link::before { content: ""; position: absolute; z-index: -1; inset: 4px -8px; opacity: 0.92; transform: rotate(-0.7deg) skewX(-1.5deg); border-radius: 10px 5px 9px 4px; }
.instagram-link { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 14px; min-height: 96px; padding: 17px 18px; background: color-mix(in oklab, var(--lavender-marker) 26%, var(--background)); border-radius: 9px 6px 10px 5px; }
.instagram-link::before { background: var(--lavender-marker); clip-path: polygon(1% 8%, 99% 1%, 97% 92%, 2% 99%); }
.instagram-link:hover, .whatsapp-link:hover { transform: translateY(-2px) rotate(-0.15deg); box-shadow: 4px 4px 0 var(--foreground); }
.instagram-link:focus-visible, .whatsapp-link:focus-visible { outline: 4px solid var(--orange); outline-offset: 4px; }
.social-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid currentColor; border-radius: 50%; }
.social-icon svg, .whatsapp-icon svg { width: 25px; height: 25px; }
.instagram-link strong { display: block; font-size: 1.08rem; line-height: 1.35; font-weight: 700; }
.instagram-link small { display: block; margin-top: 3px; font-family: "Caveat", cursive; font-size: 1.16rem; line-height: 1.2; font-weight: 500; }
.outbound { font-size: 1.45rem; line-height: 1; }

.upcoming-section { margin-top: 4px; }
.upcoming-section > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1.25rem; font-weight: 700; }
.upcoming-section > h2 span { width: 26px; height: 7px; background: var(--orange); border-radius: 6px 3px 5px 2px; transform: rotate(-3deg); }
.resource-list { display: grid; gap: 12px; }
.resource-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 18px; border: 1.5px solid var(--foreground); border-radius: 7px 6px 8px 5px; background: var(--background); cursor: default; }
.resource-card:nth-child(2) { border-radius: 6px 8px 5px 7px; }
.resource-icon { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; }
.resource-icon.spark { background: var(--orange); }
.resource-icon.bookmark { background: var(--lavender); }
.resource-icon svg { width: 32px; height: 32px; }
.resource-copy h3 { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 700; }
.resource-copy p { margin: 4px 0 0; font-family: "Caveat", cursive; font-size: 1.16rem; line-height: 1.25; font-weight: 500; }
.status-badge { grid-column: 2; justify-self: start; margin-top: 8px; padding: 5px 10px; border: 1px solid var(--foreground); border-radius: 999px; background: var(--lavender); font-size: 0.75rem; line-height: 1.2; font-weight: 600; }

.whatsapp-link { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 11px; min-height: 66px; padding: 13px 16px; background: color-mix(in oklab, var(--green-marker) 24%, var(--background)); border-radius: 6px 10px 5px 9px; font-size: 0.95rem; line-height: 1.4; font-weight: 600; }
.whatsapp-link::before { background: var(--green-marker); transform: rotate(0.55deg) skewX(1deg); clip-path: polygon(2% 2%, 98% 8%, 100% 94%, 1% 99%); }
.whatsapp-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid currentColor; border-radius: 50%; }
.closing-message { position: relative; margin: 42px auto 34px; max-width: 470px; padding-top: 21px; text-align: center; font-family: "Caveat", cursive; font-size: 1.35rem; line-height: 1.35; font-weight: 500; }
.closing-message::before { content: ""; position: absolute; top: 0; left: 50%; width: 88px; height: 7px; background: var(--lavender); transform: translateX(-50%) rotate(-1deg); border-radius: 4px; }
footer { padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--foreground) 28%, transparent); text-align: center; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; font-weight: 500; }

@media (min-width: 700px) {
  .page-shell { padding: 70px 30px 54px; }
  .notebook { padding: 60px 58px 38px; }
  .brand-header { margin-bottom: 34px; }
  .primary-wrap { margin-top: 38px; }
  .attention-arrow { position: absolute; z-index: 2; display: block; width: 58px; height: 44px; top: -38px; right: -42px; fill: none; stroke: var(--foreground); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(5deg); }
  .resource-card { grid-template-columns: 54px minmax(0, 1fr) auto; padding: 20px; }
  .resource-icon { width: 52px; height: 52px; }
  .status-badge { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}

@media (max-width: 370px) {
  .page-shell { padding-inline: 16px; }
  .notebook { padding-inline: 18px; }
  .instagram-link { grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 10px; padding-inline: 13px; }
  .social-icon { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}