/* Sonia shared design system: tokens, typography, accessible controls and reusable sketch components. */
@font-face {
font-family: "Amretiqua";
src: url("../fonts/AmretiquaDemo.otf") format("opentype");
font-display: swap;
font-style: normal;
font-weight: 400;
}

@font-face {
font-family: "MGF Pinlock";
src: url("../fonts/MGF-PinlockPersonalUse.otf") format("opentype");
font-display: swap;
font-style: normal;
font-weight: 400;
}

@font-face {
font-family: "Sunshine Brush";
src: url("../fonts/Sunshine-Brush.otf") format("opentype");
font-display: swap;
font-style: normal;
font-weight: 400;
}

:root {
--color-navy: #02253d;
--color-coral: #f26f63;
--color-aqua: #7ed7d6;
--color-yellow: #ffe600;
--color-light-blue: #8da8ff;
--color-sunshine: #f6d66a;
--color-slate: #6b7280;
--color-pebble: #e7e5e2;
--color-paper: #fcf7ef;
--color-lavender: #ae8cdd;
--font-sans: "Manrope", sans-serif;
--font-display: "Sunshine Brush", cursive;
--font-serif: "Amretiqua", serif;
--font-hand: "MGF Pinlock", cursive;
--page-gutter: clamp(1.25rem, 4vw, 4rem);
--page-max: 90rem;
--shadow-paper: 0 0.35rem 0.7rem rgb(2 37 61 / 14%);
}

html {
scroll-behavior: smooth;
}

body {
min-width: 20rem;
overflow-x: hidden;
color: var(--color-navy);
background-color: var(--color-paper);
background-image:
radial-gradient(circle at 9% 12%, rgb(246 214 106 / 9%), transparent 20rem),
radial-gradient(circle at 91% 34%, rgb(126 215 214 / 7%), transparent 25rem),
repeating-linear-gradient(0deg, rgb(2 37 61 / 1.3%) 0, transparent 1px, transparent 4px);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
}

body.menu-open {
overflow: hidden;
}

.skip-link {
position: fixed;
z-index: 100;
top: 0.75rem;
left: 0.75rem;
padding: 0.65rem 1rem;
color: var(--color-paper);
background: var(--color-navy);
border-radius: 0.35rem;
font-family: var(--font-sans);
font-weight: 700;
transform: translateY(-150%);
transition: transform 160ms ease;
}

.skip-link:focus {
transform: translateY(0);
}

.focus-ring:focus-visible,
button:focus-visible,
a:focus-visible {
outline: 0.2rem solid var(--color-aqua);
outline-offset: 0.25rem;
border-radius: 0.25rem;
}

/* Header and navigation are shared across pages. */
.site-logo img {
width: 100%;
height: auto;
}

.navigation-link {
position: relative;
display: inline-block;
padding: 0.65rem 0.25rem;
color: var(--color-navy);
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
}

.navigation-link::after {
content: "";
position: absolute;
right: 20%;
bottom: 0.35rem;
left: 20%;
height: 0.13rem;
background: var(--color-aqua);
border-radius: 100%;
transform: scaleX(0) rotate(-1deg);
transition: transform 160ms ease;
}

.navigation-link:hover::after,
.navigation-link:focus-visible::after {
transform: scaleX(1) rotate(-1deg);
}

.button {
color: var(--color-paper);
background: var(--color-navy);
border-radius: 0.55rem 0.42rem 0.58rem 0.48rem;
box-shadow: 0 0.2rem 0 rgb(2 37 61 / 12%);
font-weight: 700;
letter-spacing: 0.035em;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
transition: transform 160ms ease, background-color 160ms ease;
}

.button:hover {
background: #063754;
transform: translateY(-0.1rem);
}

.menu-toggle {
color: var(--color-navy);
cursor: pointer;
}

.menu-toggle__bar {
display: block;
width: 1.55rem;
height: 0.15rem;
background: currentColor;
border-radius: 999px;
transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
transform: translateY(0.45rem) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
transform: translateY(-0.45rem) rotate(-45deg);
}

.mobile-navigation {
background: var(--color-paper);
border-block: 1px solid rgb(2 37 61 / 10%);
box-shadow: 0 0.8rem 1.5rem rgb(2 37 61 / 10%);
}

.mobile-navigation[hidden] {
display: none;
}

.mobile-navigation__link {
display: block;
padding: 0.85rem 0.35rem;
border-bottom: 1px solid rgb(2 37 61 / 10%);
color: var(--color-navy);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.035em;
text-decoration: none;
text-transform: uppercase;
}

/* Reusable watercolor and hand-drawn components. */
.marker-highlight {
position: relative;
z-index: 0;
display: inline-block;
padding-inline: 0.15em;
white-space: nowrap;
}

.marker-highlight::before,
.marker-highlight::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}

.marker-highlight::before {
inset: 21% -0.1em 5%;
border-radius: 0.18em 0.12em 0.15em 0.08em;
background:
linear-gradient(94deg, transparent 0 2%, var(--marker-primary) 5% 95%, transparent 100%),
linear-gradient(88deg, transparent 0 4%, var(--marker-secondary) 8% 98%, transparent 100%);
clip-path: polygon(0 22%, 9% 14%, 19% 20%, 31% 8%, 45% 15%, 58% 6%, 72% 17%, 88% 8%, 100% 18%, 98% 78%, 87% 88%, 72% 82%, 59% 96%, 46% 88%, 33% 100%, 19% 89%, 7% 95%, 1% 77%);
filter: saturate(0.92);
transform: rotate(-2.1deg) skewX(-1deg);
}

.marker-highlight::after {
inset: 26% -0.08em 8%;
opacity: 0.32;
background: repeating-linear-gradient(3deg, transparent 0 0.16em, var(--marker-texture) 0.18em 0.21em);
clip-path: polygon(1% 8%, 99% 0, 97% 88%, 3% 100%);
transform: rotate(0.8deg);
}

.marker-highlight--yellow {
--marker-primary: rgb(255 230 0 / 72%);
--marker-secondary: rgb(246 214 106 / 56%);
--marker-texture: rgb(255 255 255 / 62%);
}

.marker-highlight--coral {
--marker-primary: rgb(242 111 99 / 25%);
--marker-secondary: rgb(246 214 106 / 12%);
--marker-texture: rgb(255 255 255 / 60%);
}

.sketch-underline {
position: relative;
display: inline-block;
}

.sketch-underline::after {
content: "";
position: absolute;
right: -0.08em;
bottom: -0.18em;
left: -0.06em;
height: 0.14em;
border-radius: 60% 40% 55% 45%;
clip-path: polygon(0 20%, 100% 0, 98% 75%, 2% 100%);
transform: rotate(-1deg);
}

.sketch-underline--aqua::after {
background: var(--color-aqua);
}

.sketch-heart,
.sketch-burst,
.sketch-arrow-svg {
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 2.65;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}

.sketch-heart {
stroke-width: 2.5;
}

.sketch-burst {
stroke-width: 3.1;
}

.sketch-arrow-svg {
stroke-width: 2.7;
}

.sketch-echo {
opacity: 0.28;
stroke-width: 1.35;
}

.sketch-dots {
overflow: visible;
fill: currentColor;
}

.sketch-dots circle:nth-child(3n + 1) {
opacity: 0.9;
}

.sketch-dots circle:nth-child(3n + 2) {
opacity: 0.48;
}

.sketch-dots circle:nth-child(3n) {
opacity: 0.7;
}

.paper-panel {
position: relative;
isolation: isolate;
background:
radial-gradient(ellipse at 18% 34%, rgb(174 140 221 / 18%), transparent 42%),
radial-gradient(ellipse at 74% 62%, rgb(174 140 221 / 12%), transparent 48%),
linear-gradient(96deg, rgb(174 140 221 / 9%), rgb(252 247 239 / 82%) 42%, rgb(174 140 221 / 10%));
border: 0.13rem solid rgb(174 140 221 / 52%);
box-shadow:
0.12rem 0.16rem 0 rgb(174 140 221 / 16%),
0.32rem 0.42rem 0 rgb(2 37 61 / 4%);
clip-path: polygon(1% 6%, 14% 2%, 31% 4%, 48% 1%, 66% 3.5%, 84% 1.5%, 99% 5%, 98% 25%, 100% 47%, 98% 72%, 99% 95%, 83% 98%, 64% 96.5%, 44% 100%, 26% 97%, 2% 99%, 1% 75%, 0 51%, 2% 27%);
}

.paper-panel::before,
.paper-panel::after {
content: "";
position: absolute;
pointer-events: none;
}

.paper-panel::before {
inset: -0.22rem;
z-index: -1;
border: 0.2rem solid rgb(174 140 221 / 36%);
opacity: 0.72;
clip-path: polygon(0 8%, 20% 3%, 41% 6%, 62% 1%, 100% 6%, 98% 94%, 79% 98%, 55% 95%, 32% 100%, 2% 96%);
transform: rotate(-0.7deg);
}

.paper-panel--lavender {
color: var(--color-lavender);
}

.paper-note {
position: relative;
isolation: isolate;
padding: 1.8rem 1.4rem 1.35rem;
color: var(--color-navy);
background:
radial-gradient(circle at 18% 22%, rgb(255 255 255 / 92%), transparent 36%),
repeating-linear-gradient(2deg, rgb(2 37 61 / 1.7%) 0 1px, transparent 1px 4px),
#fffdf8;
border: 1px solid rgb(2 37 61 / 18%);
border-radius: 0.12rem 0.06rem 0.1rem 0.04rem;
box-shadow:
0.18rem 0.25rem 0 rgb(246 214 106 / 18%),
0.45rem 0.6rem 0.8rem rgb(2 37 61 / 13%);
font-family: var(--font-serif);
font-size: 1.1rem;
line-height: 1.45;
filter: drop-shadow(0.35rem 0.5rem 0.42rem rgb(2 37 61 / 13%));
transform: rotate(0.8deg);
}

.paper-note::before {
content: "";
position: absolute;
z-index: -1;
inset: 0.3rem 0.15rem -0.18rem 0.35rem;
pointer-events: none;
background:
radial-gradient(circle at 80% 15%, rgb(126 215 214 / 8%), transparent 30%),
linear-gradient(100deg, transparent, rgb(255 255 255 / 42%), transparent);
opacity: 0.8;
transform: rotate(-0.7deg);
}

.paper-note__tape {
position: absolute;
z-index: 2;
top: -0.95rem;
left: 13%;
width: 3.65rem;
height: 1.45rem;
background:
linear-gradient(105deg, rgb(255 255 255 / 18%), transparent 36%, rgb(255 255 255 / 16%) 64%, transparent),
repeating-linear-gradient(92deg, rgb(255 255 255 / 18%) 0 0.2rem, transparent 0.2rem 0.48rem),
rgb(126 215 214 / 74%);
box-shadow: 0 0.06rem 0.1rem rgb(2 37 61 / 8%);
clip-path: polygon(2% 12%, 14% 4%, 29% 8%, 46% 1%, 65% 7%, 84% 3%, 100% 12%, 96% 88%, 82% 97%, 64% 93%, 47% 100%, 30% 94%, 11% 99%, 0 87%);
transform: rotate(-3deg);
}

.watercolor-wash {
position: relative;
isolation: isolate;
}

.watercolor-wash::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
opacity: 0.42;
filter: blur(0.15rem);
clip-path: polygon(1% 8%, 7% 2%, 22% 6%, 37% 1%, 54% 5%, 67% 2%, 82% 7%, 99% 4%, 98% 91%, 89% 96%, 74% 92%, 62% 98%, 46% 94%, 31% 99%, 15% 94%, 2% 97%);
}

.watercolor-wash--sunshine::before {
background:
radial-gradient(circle at 12% 40%, rgb(246 214 106 / 92%), transparent 22%),
radial-gradient(circle at 50% 50%, rgb(246 214 106 / 76%), transparent 48%),
radial-gradient(circle at 85% 45%, rgb(246 214 106 / 84%), transparent 27%);
}

.icon-badge {
position: relative;
display: grid;
flex: 0 0 auto;
place-items: center;
isolation: isolate;
color: var(--color-navy);
}

.icon-badge::before {
content: "";
position: absolute;
z-index: -1;
inset: -0.08rem;
border-radius: 44% 56% 49% 51% / 57% 42% 58% 43%;
opacity: 0.72;
background:
radial-gradient(circle at 38% 37%, var(--badge-color) 0 42%, transparent 72%),
radial-gradient(circle at 66% 62%, var(--badge-color) 0 38%, transparent 69%);
filter: blur(0.11rem) saturate(0.88);
transform: rotate(-5deg);
}

.icon-badge::after {
content: "";
position: absolute;
z-index: -1;
inset: 0.1rem 0.05rem 0.05rem 0.14rem;
background:
radial-gradient(circle at 22% 70%, var(--badge-color) 0 8%, transparent 24%),
radial-gradient(circle at 74% 26%, var(--badge-color) 0 7%, transparent 22%);
border-radius: 53% 47% 45% 55% / 47% 58% 42% 53%;
opacity: 0.55;
filter: blur(0.16rem);
transform: rotate(7deg);
}

.icon-badge svg {
width: 62%;
height: 62%;
}

.icon-badge--aqua {
--badge-color: var(--color-aqua);
}

.icon-badge--sunshine {
--badge-color: var(--color-sunshine);
}

.icon-badge--coral {
--badge-color: #f5a59e;
}

.icon-badge--lavender {
--badge-color: #cbb2ea;
}

.brush-button {
position: relative;
z-index: 0;
display: inline-flex;
min-width: 13.25rem;
min-height: 3.05rem;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
color: var(--color-paper);
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.045em;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
transition:
color 160ms ease,
transform 160ms ease;
}

.brush-button::before,
.brush-button::after {
content: "";
position: absolute;
z-index: -1;
background: var(--color-navy);
transition: background-color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.brush-button::before {
inset: 0.1rem -0.22rem 0.1rem;
border-radius: 0.25rem;
background:
linear-gradient(92deg, transparent 0 2%, var(--color-navy) 5% 96%, transparent 100%),
repeating-linear-gradient(0deg, rgb(255 255 255 / 0%) 0 0.18rem, rgb(255 255 255 / 8%) 0.19rem 0.24rem);
clip-path: polygon(0 23%, 6% 13%, 18% 11%, 31% 6%, 45% 9%, 58% 4%, 72% 7%, 87% 5%, 99% 13%, 100% 78%, 94% 87%, 80% 91%, 66% 88%, 51% 96%, 36% 90%, 20% 94%, 5% 87%, 1% 68%);
}

.brush-button::after {
inset: 0.38rem -0.12rem 0.32rem;
opacity: 0.26;
filter: blur(0.08rem);
transform: rotate(-0.8deg);
clip-path: polygon(0 29%, 10% 18%, 24% 17%, 38% 13%, 54% 16%, 69% 11%, 84% 15%, 100% 21%, 97% 76%, 82% 86%, 66% 82%, 50% 89%, 33% 84%, 16% 88%, 2% 77%);
}

.brush-button:hover {
color: var(--color-navy);
transform: translateY(-0.13rem) rotate(-0.5deg);
}

.brush-button:hover::before,
.brush-button:hover::after {
background:
linear-gradient(92deg, transparent 0 2%, var(--color-yellow) 5% 96%, transparent 100%),
repeating-linear-gradient(0deg, rgb(255 255 255 / 0%) 0 0.18rem, rgb(255 255 255 / 22%) 0.19rem 0.24rem);
}

/* Shared footer. */
.footer-signature {
color: var(--color-navy);
font-family: var(--font-display);
font-size: 1.75rem;
line-height: 1;
text-decoration: none;
}

.social-links {
gap: 0.85rem;
}

.social-link {
display: grid;
width: 1.8rem;
height: 1.8rem;
place-items: center;
color: var(--color-navy);
}

.social-link svg {
width: 1.25rem;
height: 1.25rem;
}

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

*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}