/* K5 Rosary Kids. Tokens copied from K5 Gifted (site-live/src/index.css), sc326. */
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit-latin-var.96f33760.woff2') format('woff2-variations'),
       url('/fonts/Outfit-latin-var.96f33760.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/Fredoka-latin-var.ce033012.woff2') format('woff2-variations'),
       url('/fonts/Fredoka-latin-var.ce033012.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 103.03%; ascent-override: 97.06%; descent-override: 25.24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Fredoka Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 96.2%; ascent-override: 101.25%; descent-override: 24.53%; line-gap-override: 0%;
}

:root {
  --font-sans: Outfit, 'Outfit Fallback', Arial, sans-serif;
  --font-heading: Fredoka, 'Fredoka Fallback', Arial, sans-serif;
  --brand-blue: 0 174 239;     /* #00AEEF */
  --brand-pink: 234 61 132;    /* #EA3D84 */
  --brand-yellow: 255 242 0;   /* #FFF200 */
  --brand-orange: 255 175 0;   /* #FFAF00 */
  --brand-green: 34 197 94;    /* #22C55E */
  --card-soft-2: 204 238 255;
  --card-soft-3: 255 210 231;
  --card-soft-4: 255 250 177;
  --card-soft-5: 255 231 198;
  --card-soft-6-green: 208 245 222;
  --paper: 250 249 245;
  --paper-blue: 239 249 254;
  --text-dark: 26 26 26;       /* #1A1A1A */
  --text-muted: #404040;
  --ui-deep-navy: 0 75 109;    /* #004B6D */
  --page-field-start: 217 230 236;
  --page-field-middle: 231 238 242;
  --page-field-end: 221 228 233;
  --border-b2: rgba(0, 174, 239, 0.5);
  --radius: 0.5rem;
  --space-tight: 24px;
  --space-step: 32px;
  --space-section: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: rgb(var(--text-dark));
  background: linear-gradient(180deg, rgb(var(--page-field-start)), rgb(var(--page-field-middle)) 50%, rgb(var(--page-field-end)));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 1.2;
  overflow-wrap: break-word;
  max-width: 100%;
  margin: 0 0 16px;
}
h1 { font-size: 39px; }
h2 { font-size: 31px; }
h3 { font-size: 25px; }
@media (min-width: 48rem) {
  h1 { font-size: 61px; }
  h2 { font-size: 39px; }
  h3 { font-size: 25px; }
}
p { margin: 0 0 16px; }
a { color: rgb(var(--ui-deep-navy)); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid rgb(var(--brand-blue)); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 48rem) { .wrap { padding: 0 32px; } }

/* Header: navy bar like K5 Gifted, wordmark left, links right */
.site-header { background: rgb(var(--ui-deep-navy)); border-bottom: 4px solid rgb(var(--brand-blue)); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 8px; padding-bottom: 8px; }
.logo { display: block; flex: none; line-height: 0; }
.logo img { width: 150px; height: auto; display: block; }
@media (min-width: 48rem) { .logo img { width: 190px; } }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 18px; font-size: 17px; font-weight: 600; }
.nav a { color: #fff; text-decoration: none; padding: 10px 0; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: rgb(var(--brand-yellow)); text-decoration-thickness: 3px; }
.nav .nav-extra { display: none; }
@media (min-width: 40rem) { .nav .nav-extra { display: inline; } }

main { flex: 1; }
.pad { padding: var(--space-section) 0; }

/* Hero: bright sky with colorful splat shapes and a bead string */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #7fd3f7 0%, #bfe9fb 62%, #eaf8ff 100%); color: rgb(var(--ui-deep-navy)); }
.hero .wrap { position: relative; z-index: 1; display: grid; gap: 24px; align-items: center; padding-top: 40px; padding-bottom: 72px; }
@media (min-width: 52rem) { .hero .wrap { grid-template-columns: 0.9fr 1.1fr; padding-top: 64px; padding-bottom: 96px; } }
.eyebrow { font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px; color: rgb(var(--ui-deep-navy)); }
.hero h1 { color: rgb(var(--ui-deep-navy)); margin-bottom: 20px; }
@media (min-width: 52rem) { .hero h1 { font-size: clamp(34px, 3.6vw, 48px); white-space: nowrap; } }
.hero h1 .hl { color: rgb(var(--brand-pink)); }
.hero p.lead { font-size: 22px; max-width: 34rem; }
.hero-art { display: flex; justify-content: center; }
.hero-art img { position: relative; width: 100%; height: auto; border-radius: 28px; border: 3px solid rgb(var(--ui-deep-navy)); box-shadow: 0 8px 0 rgba(0, 75, 109, 0.85); }
.blob { position: absolute; z-index: 0; border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; opacity: 0.9; }
.blob.b1 { width: 260px; height: 240px; background: rgb(var(--brand-yellow)); left: -90px; top: -70px; transform: rotate(-12deg); }
.blob.b2 { width: 200px; height: 190px; background: rgb(var(--brand-pink)); right: -60px; top: 36px; opacity: 0.85; }
.blob.b3 { width: 170px; height: 160px; background: #8ef000; left: 38%; bottom: -80px; opacity: 0.8; }
.blob.b4 { width: 120px; height: 115px; background: rgb(var(--brand-orange)); right: 22%; bottom: 40px; opacity: 0.8; }
@media (max-width: 51.99rem) { .blob.b3, .blob.b4 { display: none; } .blob.b1 { width: 150px; height: 140px; left: -60px; top: -50px; } .blob.b2 { width: 110px; height: 105px; right: -40px; top: -28px; } .hero p.lead { font-size: 20px; } }
.beads { position: absolute; left: 0; right: 0; bottom: 14px; height: 36px; z-index: 1;
  background:
    radial-gradient(circle at 18px 18px, rgb(var(--brand-pink)) 0 9px, transparent 10px) 0 0 / 108px 36px repeat-x,
    radial-gradient(circle at 54px 18px, rgb(var(--brand-yellow)) 0 9px, transparent 10px) 0 0 / 108px 36px repeat-x,
    radial-gradient(circle at 90px 18px, #8ef000 0 9px, transparent 10px) 0 0 / 108px 36px repeat-x,
    linear-gradient(rgb(var(--ui-deep-navy)), rgb(var(--ui-deep-navy))) 0 17px / 100% 3px no-repeat; }
.btns { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
.btn { display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: 1px; text-decoration: none; padding: 14px 28px; border-radius: 16px; border: 3px solid rgb(var(--ui-deep-navy)); box-shadow: 0 5px 0 rgb(var(--ui-deep-navy)); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 rgb(var(--ui-deep-navy)); }
.btn-pink { background: rgb(var(--brand-pink)); color: #fff; }
.btn-yellow { background: rgb(var(--brand-yellow)); color: rgb(var(--ui-deep-navy)); }

/* Four big cards */
.section-title { text-align: center; color: rgb(var(--ui-deep-navy)); }
.section-sub { text-align: center; max-width: 36rem; margin: 0 auto var(--space-step); }
.cards { display: grid; gap: var(--space-tight); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards > * { min-width: 0; }
.card { position: relative; border-radius: 24px; padding: var(--space-tight); border: 3px solid rgb(var(--ui-deep-navy)); box-shadow: 0 6px 0 rgba(0, 75, 109, 0.85), 0 14px 22px rgba(0, 75, 109, 0.15); display: flex; flex-direction: column; }
.card .icon { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 3px solid rgb(var(--ui-deep-navy)); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.card .icon svg { width: 42px; height: 42px; }
.card h3 { margin-bottom: 8px; color: rgb(var(--ui-deep-navy)); }
.card p { margin: 0 0 12px; font-size: 18px; line-height: 1.5; }
.soon { align-self: flex-start; margin-top: auto; font-size: 15px; font-weight: 700; color: rgb(var(--ui-deep-navy)); background: #fff; border: 2px solid rgb(var(--ui-deep-navy)); border-radius: 999px; padding: 1px 12px; }
.c-blue { background: rgb(var(--card-soft-2)); }
.c-pink { background: rgb(var(--card-soft-3)); }
.c-yellow { background: rgb(var(--card-soft-4)); }
.c-green { background: rgb(var(--card-soft-6-green)); }

/* This week */
.week { background: rgb(var(--ui-deep-navy)); color: #fff; }
.week .wrap { display: grid; gap: 24px; align-items: center; }
@media (min-width: 52rem) { .week .wrap { grid-template-columns: 1fr 1fr; } }
.week h2 { color: #fff; }
.week .eyebrow { color: rgb(var(--brand-yellow)); }
.week-card { background: rgb(var(--paper)); color: rgb(var(--text-dark)); border-radius: 24px; border: 3px solid rgb(var(--brand-yellow)); padding: var(--space-tight); }
.week-card h3 { color: rgb(var(--ui-deep-navy)); }
.week-card ul { margin: 0 0 8px; padding-left: 22px; font-size: 18px; line-height: 1.6; }

/* For families */
.family-row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 52rem) { .family-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.family-row > * { min-width: 0; }
.fam { background: #fff; border: 3px solid rgb(var(--brand-blue)); border-radius: 20px; padding: 18px 16px; text-align: center; font-family: var(--font-heading); font-size: 20px; line-height: 1.25; letter-spacing: 0.5px; color: rgb(var(--ui-deep-navy)); box-shadow: 0 4px 0 rgba(0, 174, 239, 0.45); }
.fam small { display: block; margin-top: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--text-muted); }
.fam:nth-child(5) { grid-column: 1 / -1; }
@media (min-width: 52rem) { .fam:nth-child(5) { grid-column: auto; } }

/* Inner pages */
.page { background: rgb(var(--paper)); border: 3px solid var(--border-b2); border-radius: 24px; padding: var(--space-step) 20px; max-width: 48rem; margin: var(--space-section) auto; }
@media (min-width: 48rem) { .page { padding: var(--space-section) 48px; } }
.page h1 { color: rgb(var(--ui-deep-navy)); }
.draft { background: rgb(var(--card-soft-5)); border-radius: 12px; padding: 12px 16px; font-size: 18px; margin-bottom: var(--space-tight); }

/* Footer */
.site-footer { background: rgb(var(--ui-deep-navy)); border-top: 4px solid rgb(var(--brand-yellow)); color: #fff; font-size: 17px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 24px; padding-bottom: 24px; }
.site-footer p { margin: 0; max-width: 42rem; }
.site-footer a { color: #fff; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer .fine { width: 100%; font-size: 15px; opacity: .85; }
.start-logo { display: block; width: min(420px, 80%); height: auto; margin: 0 auto 20px; }

/* Articles */
.article h2 { color: rgb(var(--ui-deep-navy)); margin-top: var(--space-step); }
.article p { font-size: 19px; line-height: 1.65; }
.article .eyebrow { color: rgb(var(--brand-pink)); }