/* ============================================================
   Vishudhi Yog — shared site styles
   ------------------------------------------------------------
   Everything here used to live inline in index.html. It moved out
   so privacy.html, terms.html and 404.html can share one cached
   copy instead of repeating ~110 lines of @font-face each.

   NOTE: assets/css/tailwind.css is PRECOMPILED and the build
   tooling is deliberately not in the repo (see .gitignore), so no
   new Tailwind class can be added. Anything the compiled sheet
   doesn't already have is written as plain CSS below.
   ============================================================ */

/* --- Brand tokens, mirrored from the frozen tailwind build ---- */
:root {
    --bg-cream: #FBF6EE;
    --brand-green: #4E614A;
    --brand-green-dark: #3D4C3A;
    --brand-green-soft: #E5EAE3;
    --card-pale: #FDFBF7;
    --card-light: #F5F1E8;
    --text-main: #24201D;
    --text-muted: #5C5751;
    --text-deval: #536B4F;
    --gold-accent: #B8862B;
    --line: #D5CCBA;
    --line-subtle: #E8E1CE;
    --line-strong: #9A9180;
    --radius-card: 1.5rem;
    --radius-media: 1.75rem;
}

/* ------------------------------- Fonts ----------------------- */
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-Regular.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-Medium.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-SemiBold.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-Bold.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-Italic.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Cormorant/Cormorant-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Crimson Text';
    src: url('../fonts/VishudhiYog_Fonts/Crimson text/CrimsonText-Regular.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Crimson text/CrimsonText-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Crimson Text';
    src: url('../fonts/VishudhiYog_Fonts/Crimson text/CrimsonText-SemiBold.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Crimson text/CrimsonText-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Crimson Text';
    src: url('../fonts/VishudhiYog_Fonts/Crimson text/CrimsonText-Italic.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Crimson text/CrimsonText-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-Regular.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-Medium.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-SemiBold.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-Bold.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-Italic.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Inter/Inter_18pt-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Armata';
    src: url('../fonts/VishudhiYog_Fonts/Armata/Armata-Regular.woff2') format('woff2'),
         url('../fonts/VishudhiYog_Fonts/Armata/Armata-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------------------- Contrast corrections ------------------
   Two colours in the frozen tailwind build fail WCAG AA. The build
   tooling isn't in the repo so the theme can't be recompiled —
   these override the generated utilities instead. site.css loads
   after tailwind.css, so equal specificity means these win.

   goldAccent  #B8862B on cardLight = 2.87:1  (text needs 4.50)
   lineStrong  #9A9180 on cream     = 2.90:1  (UI needs 3.00)

   Both are darkened along the same hue, so the palette still reads
   as the same colour — just legible. Update tailwind.config.js to
   match if the build is ever restored. */
.text-goldAccent {
    --tw-text-opacity: 1;
    color: #8D6621;
    /* 4.59:1 on cardLight, 4.81:1 on cream */
}

.border-line-strong {
    --tw-border-opacity: 1;
    border-color: #978E7D;
    /* 3.01:1 on cream */
}

/* ------------------------------- Base ------------------------ */
body {
    background-color: var(--bg-cream);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
}

/* ================== Mobile layout (Figma 0:27) ================
   The markup reflows the 1440px desktop layout, but the Figma file
   carries a separate 393px Mobile UI frame with its own geometry.
   These rules reconcile the two below Tailwind's md breakpoint.

   Every value here is measured from the Figma frame's coordinates,
   not estimated:
     content inset  x=48 on every section        -> 48px padding
     section rhythm ~99px between content boxes  -> 50px top/bottom
     hero buttons   both at y=331                -> one row
     feature labels all at y~=388                -> one row
   ============================================================== */
@media (max-width: 767px) {

    /* Section rhythm. Figma section bounding boxes sit ~99px apart;
       50px of padding each side of the boundary reproduces that.
       Qualified with .mx-auto so specificity beats Tailwind's .py-24
       (0,1,0) — a bare `main>section` is only (0,0,2) and loses. */
    main>section.mx-auto {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* Content inset. Tailwind's px-6 is 24px; the design uses 48px on a
       393px frame (12.2% each side). Kept proportional so narrower
       phones don't lose their whole content column to padding. */
    main>section.mx-auto,
    main>section>div.max-w-7xl {
        padding-left: min(48px, 8vw);
        padding-right: min(48px, 8vw);
    }

    main>section>div.max-w-7xl {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Hero has no .mx-auto section wrapper (its inner div carries
       max-w-7xl instead), so it falls through the rule above with no
       top padding at all and sits flush under the sticky navbar. */
    main>section:first-of-type>div.max-w-7xl {
        padding-top: 32px;
    }

    /* Hero action buttons: the design puts both in one row, but at
       mobile widths "Begin your practice" and "Explore Offerings"
       don't fit a single row with real padding without the labels
       crowding the pill's rounded corners. Stacking full-width instead
       keeps normal padding and never depends on exact character counts. */
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-actions>a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Feature checklist. The design puts all three on one row, but the
       only way to fit "No Prior Experience Needed" into 297px is ~7px
       type — and those Figma text boxes report 5-7px heights that the
       rendered frame contradicts, so they are collapsed boxes, not real
       sizes. Wrapping at a legible 11px instead of shipping 7px text. */
    .hero-features {
        gap: 8px 16px;
        font-size: 11px;
    }

    .hero-features>div {
        gap: 5px;
    }

    .hero-features svg {
        width: 12px;
        height: 12px;
    }

    /* "Yoga as a way of life." should read as one line, not wrap
       mid-phrase. Scaled to the content column's width (8vw padding on
       each side, same formula the section padding uses) rather than a
       fixed 42px, which overflowed to two lines below ~400px. */
    main section:first-of-type h1.font-cormorant {
        font-size: clamp(28px, 10vw, 42px);
        line-height: 1.12;
        white-space: nowrap;
    }

    /* ---- Mobile type scale ----------------------------------
       Derived from Figma text-box geometry, since the exact type
       tokens aren't readable without more Figma calls. Each value
       is (box height / line count) -> line-height -> font-size:
         section heading  43px / 2 lines -> ~22px
         card heading     21px / 1 line  -> ~20px
         card body        45px / 3 lines -> ~12px, 15px leading
       -------------------------------------------------------- */
    main h2.font-cormorant {
        font-size: 22px;
        line-height: 1.22;
    }

    main h3.font-cormorant {
        font-size: 20px;
        line-height: 1.05;
    }

    /* Benefit / offering card bodies */
    main .bg-cardPale p.font-inter,
    main .bg-cardPale .font-inter.text-\[14px\] {
        font-size: 12px;
        line-height: 15px;
    }

    /* Card padding: Figma puts card content at x=68 inside a card at
       x=48, i.e. a flat 20px inset rather than Tailwind's 32px. */
    main .bg-cardPale {
        padding: 20px;
    }

    /* Three benefit cards sit 219px apart at 191px tall -> 28px gap. */
    main .grid.gap-6 {
        gap: 28px;
    }

    /* Offering card copy */
    main .bg-cardLight h3.font-crimson {
        font-size: 22px;
    }

    main .bg-cardLight p.font-crimson {
        font-size: 13px;
        line-height: 1.5;
        margin-top: 14px;
    }

    /* FAQ rows sit 58px apart when collapsed. */
    main #faq .rounded-card {
        padding: 14px 18px;
    }

    main #faq .faq-item span.font-cormorant {
        font-size: 15px;
        line-height: 1.25;
    }

    main #faq .faq-answer p {
        font-size: 13px;
        line-height: 1.55;
    }

    /* Testimonial card: Figma gives the whole block 241px, so the
       generous desktop card padding and min-height have to go. */
    main #testimonials>div {
        padding: 22px 18px;
    }

    main #testimonials h2.font-crimson {
        font-size: 22px;
        margin-bottom: 14px;
    }

    main #testimonials .min-h-\[230px\] {
        min-height: 0;
    }

    main #testimonialText {
        font-size: 12px;
        line-height: 1.5;
    }

    /* About / Why Vishudhi. Figma gives each description block a
       297x95 box for ~6 lines -> ~16px leading -> ~13px type, against
       the 20px the desktop layout uses. */
    main #about .font-crimson.text-\[20px\] {
        font-size: 13px;
        line-height: 1.55;
    }

    main #about .space-y-8>*+* {
        margin-top: 16px;
    }

    main #about .gap-12 {
        gap: 24px;
    }

    /* Practice journey: step copy sits at ~13px over a 17.5px leading. */
    main .font-inter.text-\[13px\] {
        line-height: 1.35;
    }

    /* Gallery: the Instagram button spans the full 297px content width. */
    main .rounded-full.font-crimson.text-\[20px\] {
        display: flex;
        width: 100%;
        justify-content: center;
        font-size: 15px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Closing CTA: both buttons are full width and stacked (297x46). */
    main section .flex-wrap.justify-center.gap-3 {
        flex-direction: column;
        gap: 10px;
    }

    main section .flex-wrap.justify-center.gap-3>a {
        width: 100%;
        text-align: center;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    /* Navbar is 43px tall in the design; py-5 alone spends 40px. */
    #siteHeader>header {
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 24px;
        padding-right: 24px;
    }

    #siteHeader .font-cormorant.text-\[24px\] {
        font-size: 20px;
    }

    #siteHeader a[data-cta="nav"] {
        padding: 7px 18px;
        font-size: 13px;
    }

    /* Contact channel cards are 296x67 in the design. */
    main #contact .rounded-card.border {
        padding: 12px 16px;
    }

    main #contact .font-cormorant.text-\[20px\] {
        font-size: 15px;
    }

    main #contact p.font-inter,
    main #contact .font-inter.text-\[16px\] {
        font-size: 13px;
        line-height: 1.5;
    }
}

.glass-pill {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Accordion via grid-template-rows so answers of any length animate
   without a magic max-height that clips long copy on narrow screens.

   The answer is a sibling of the bordered pill, not a child of it, so an
   open answer sits on the page background below the pill rather than
   inside the border. Open state is a class on .faq-block because the
   answer is no longer an adjacent sibling of the button. */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
}

.faq-answer>div {
    overflow: hidden;
}

.faq-block.is-open .faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq-block.is-open .faq-icon {
    transform: rotate(180deg);
}

/* Answer copy is indented to sit under the question text rather than the
   pill edge, and gets breathing room before the next pill. */
.faq-answer p {
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 8px;
}

/* Journey connector line. Runs from the first bubble's centre to the right
   edge of the content, passing through every bubble rather than stopping at
   step 4. Written here because the frozen Tailwind build ships no `right-0`,
   and because top-[14px] sat 8px above the bubble centres.
   Centre = pt-2 (8px) + half of the 28px bubble (14px) = 22px. */
.journey-line {
    top: 22px;
    left: 14px;
    right: 0;
}

/* Takes the mandala out of flow entirely, matching Figma: the emblem sits
   beside the heading but its 224px height never enters the calculation
   that positions the timeline below. right-0 is deliberately not a
   Tailwind class here — it isn't in the frozen build (see journey-line
   above) and would collapse this to the left edge instead. */
.journey-mandala {
    position: absolute;
    top: 0;
    right: 0;
}

/* Gap from heading bottom to the timeline. 90px matched Figma's own
   heading-to-stepbar measurement, but Figma's mandala (174px) is shorter
   than ours (224px, w-56/h-56) and sits with more headroom above the
   heading — so 90px left our taller mandala's bottom edge overlapping
   the connector line by 24px instead of clearing it. Widened to 140px,
   verified against the mandala's actual rendered bottom edge rather than
   against Figma's raw pixel value: line now sits ~26px below it. */
.journey-timeline {
    margin-top: 140px;
}

@media (max-width: 767px) {
    .journey-timeline {
        margin-top: 1.75rem;
    }
}

/* Dark translucent chip used for the teacher badge over a photo */
.glass-dark {
    background: rgba(38, 34, 30, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Visible keyboard focus — the browser default disappears on cream */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 3px;
    border-radius: 4px;
}

#testimonialText {
    transition: opacity 0.25s ease;
}

/* ===================== Legal / prose pages ==================== */
/* Used by privacy.html and terms.html. Plain CSS because the frozen
   Tailwind build has no list, prose or heading-spacing utilities. */
.prose-page {
    max-width: 46rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 6rem;
}

.prose-page h1 {
    font-family: 'Cormorant', serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.prose-page .updated {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line-subtle);
}

.prose-page h2 {
    font-family: 'Cormorant', serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--text-main);
    margin: 2.75rem 0 0.85rem;
}

.prose-page h3 {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin: 1.75rem 0 0.5rem;
}

.prose-page p,
.prose-page li {
    font-family: 'Crimson Text', serif;
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-muted);
}

.prose-page p {
    margin-bottom: 1rem;
}

.prose-page ul,
.prose-page ol {
    margin: 0 0 1.25rem 1.5rem;
    padding: 0;
}

.prose-page ul {
    list-style: disc;
}

.prose-page ol {
    list-style: decimal;
}

.prose-page li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.prose-page a {
    color: var(--brand-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose-page a:hover {
    color: var(--brand-green-dark);
}

.prose-page strong {
    color: var(--text-main);
    font-weight: 600;
}

/* Callout for the "this is not medical advice" notice */
.prose-note {
    background: var(--brand-green-soft);
    border-left: 3px solid var(--brand-green);
    border-radius: 0 12px 12px 0;
    padding: 1.15rem 1.35rem;
    margin: 1.5rem 0 2rem;
}

.prose-note p {
    margin: 0;
    font-size: 16px;
    color: var(--text-main);
}

.prose-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.prose-page th,
.prose-page td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line-subtle);
    color: var(--text-muted);
    vertical-align: top;
}

.prose-page th {
    background: var(--card-light);
    color: var(--text-main);
    font-weight: 600;
}

/* Wide tables scroll inside their own box rather than the page body */
.table-scroll {
    overflow-x: auto;
}

/* ==================== Cookie consent banner =================== */
/* Hidden until the JS decides no choice has been stored yet, so it
   never flashes for returning visitors. */
#cookieBanner[hidden] {
    display: none !important;
}

#cookieBanner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    max-width: 34rem;
    margin-inline: auto;
    background: var(--card-pale);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(36, 32, 29, 0.16);
    padding: 1.25rem 1.35rem;
    animation: cookieRise 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cookieRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#cookieBanner p {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

#cookieBanner a {
    color: var(--brand-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cookie-btn {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 0.6rem 1.35rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cookie-btn--accept {
    background: var(--brand-green);
    color: #fff;
    border: 1px solid var(--brand-green);
}

.cookie-btn--accept:hover {
    background: var(--brand-green-dark);
}

.cookie-btn--reject {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--line-strong);
}

.cookie-btn--reject:hover {
    border-color: var(--brand-green);
    color: var(--brand-green);
}

/* ========================= Form states ======================== */
.field-error {
    border-color: #B4462F !important;
}

.error-text {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #B4462F;
    margin-top: 0.35rem;
    padding-left: 1.25rem;
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill positioned ones. Never focusable. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ======================= Enquiry popup form ===================== */
.enquiry-overlay[hidden] {
    display: none !important;
}

.enquiry-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(36, 32, 29, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: enquiryFade 0.2s ease both;
}

.enquiry-panel {
    position: relative;
    width: 100%;
    max-width: 30rem;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card-pale);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 60px rgba(36, 32, 29, 0.25);
    padding: 2rem 1.75rem;
    animation: enquiryRise 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes enquiryFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes enquiryRise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.enquiry-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.enquiry-close:hover {
    background: var(--card-light);
    color: var(--text-main);
}

#enquirySuccessView {
    text-align: center;
    padding: 1rem 0;
}

.enquiry-success-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    border-radius: 999px;
    background: var(--brand-green-soft);
    color: var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================== 404 page ========================== */
.error-wrap {
    min-height: 68vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
}

.error-code {
    font-family: 'Armata', sans-serif;
    font-size: 15px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-deval);
    margin-bottom: 1.25rem;
}

.error-wrap h1 {
    font-family: 'Cormorant', serif;
    font-size: clamp(34px, 6vw, 52px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.error-wrap p {
    font-family: 'Crimson Text', serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 30rem;
    margin: 0 auto 2.25rem;
}

.error-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {

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