/* Import fonts to create a stronger visual hierarchy. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap");

/* CSS variables keep colors and spacing consistent. */
:root {
    --ink: #172033;
    --muted: #5c667d;
    --paper: #f7f4ee;
    --card: rgba(255, 255, 255, 0.82);
    --navy: #16253f;
    --blue: #2762d5;
    --cyan: #28a7c7;
    --gold: #f2b84b;
    --coral: #ef6a5b;
    --line: rgba(23, 32, 51, 0.13);
    --shadow: 0 22px 55px rgba(22, 37, 63, 0.14);
    --soft-shadow: 0 12px 30px rgba(22, 37, 63, 0.1);
    --radius-large: 28px;
    --radius-medium: 18px;
    --content-width: 1180px;
}

/* Makes sizing more predictable for every element. */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    font-family: "Manrope", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;

    /* Multiple gradients create a colorful background without images. */
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(40, 167, 199, 0.16),
            transparent 28rem
        ),
        radial-gradient(
            circle at 92% 20%,
            rgba(242, 184, 75, 0.16),
            transparent 25rem
        ),
        linear-gradient(
            145deg,
            #f9f7f2 0%,
            #eef4f8 52%,
            #f8f1e9 100%
        );

    background-attachment: fixed;
}

/* Decorative grid overlay created entirely with CSS. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.35;

    background-image:
        linear-gradient(
            rgba(22, 37, 63, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(22, 37, 63, 0.035) 1px,
            transparent 1px
        );

    background-size: 38px 38px;
}

/* Floating colored glow in the lower-right corner. */
body::after {
    content: "";
    position: fixed;
    width: 420px;
    height: 420px;
    right: -170px;
    bottom: -160px;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;

    background: linear-gradient(
        135deg,
        rgba(39, 98, 213, 0.26),
        rgba(239, 106, 91, 0.18)
    );

    filter: blur(22px);
    animation: floatGlow 8s ease-in-out infinite alternate;
}

/* Animation moves the background glow slowly. */
@keyframes floatGlow {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-35px, -25px, 0) scale(1.08);
    }
}

/* Makes keyboard navigation easier to see. */
a:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
    border-radius: 4px;
}

/* General link styling. */
a {
    color: var(--blue);
    font-weight: 700;
    text-decoration-color: rgba(39, 98, 213, 0.35);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;

    transition:
        color 180ms ease,
        text-decoration-color 180ms ease;
}

a:hover {
    color: var(--coral);
    text-decoration-color: currentColor;
}

abbr[title] {
    cursor: help;
    text-decoration: underline dotted var(--cyan) 2px;
    text-underline-offset: 3px;
}

p {
    margin: 0 0 1.2rem;
}

/*
    The complete page uses CSS Grid.
    The main content is on the left and sidebar is on the right.
*/
.page-wrapper {
    width: min(calc(100% - 34px), var(--content-width));
    margin: 28px auto 60px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;

    grid-template-areas:
        "intro intro"
        "main sidebar";

    gap: 28px;
}

.intro {
    grid-area: intro;
}

.main.supporting {
    grid-area: main;
    min-width: 0;
}

.sidebar {
    grid-area: sidebar;
    min-width: 0;
}

/* Large hero header with gradients and rounded corners. */
header {
    position: relative;
    min-height: 430px;

    padding:
        clamp(48px, 8vw, 104px)
        clamp(28px, 7vw, 88px);

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-radius: var(--radius-large);
    color: white;

    background:
        linear-gradient(
            118deg,
            rgba(22, 37, 63, 0.97),
            rgba(39, 98, 213, 0.88)
        ),
        radial-gradient(
            circle at top right,
            rgba(40, 167, 199, 0.85),
            transparent 45%
        );

    box-shadow: var(--shadow);
    isolation: isolate;
}

/* Decorative circle behind the header text. */
header::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -55px;
    top: -95px;
    z-index: -1;

    border: 55px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    box-shadow:
        0 0 0 30px rgba(255, 255, 255, 0.04),
        0 0 0 70px rgba(255, 255, 255, 0.025);
}

/* Adds decorative text without changing the HTML. */
header::after {
    content: "CSS • DESIGN • POSSIBILITY";
    position: absolute;
    left: clamp(28px, 7vw, 88px);
    bottom: 34px;

    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.28em;
}

header h1 {
    margin: 0;
    max-width: 850px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(3rem, 8vw, 6.8rem);
    line-height: 0.94;
    letter-spacing: -0.055em;
    text-wrap: balance;

    text-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
}

header h2 {
    margin: 24px 0 0;
    max-width: 620px;

    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1rem, 2.1vw, 1.35rem);
    font-weight: 500;
    letter-spacing: 0.035em;
}

header h2 abbr {
    color: var(--gold);
}

/* Floating summary panel overlaps the header. */
.summary {
    position: relative;
    z-index: 3;

    width: min(88%, 900px);
    margin: -38px auto 30px;
    padding: 24px 30px;

    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px 28px;
    align-items: center;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--radius-medium);

    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--soft-shadow);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.summary p {
    margin: 0;
}

.summary p:first-child {
    color: var(--muted);
    font-size: 0.95rem;
}

.summary p:last-child {
    padding: 10px 16px;
    border-radius: 999px;

    background: var(--navy);
    color: white;

    white-space: nowrap;
    font-size: 0.82rem;
    text-align: center;
}

.summary p:last-child a {
    color: var(--gold);
}

/* Shared card styling for the main content sections. */
.preamble,
.explanation,
.participation,
.benefits,
.requirements {
    position: relative;
    margin-bottom: 22px;

    padding: clamp(26px, 4vw, 46px);
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-large);

    background: var(--card);
    box-shadow: var(--soft-shadow);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

/* Cards lift slightly when the mouse moves over them. */
.preamble:hover,
.explanation:hover,
.participation:hover,
.benefits:hover,
.requirements:hover {
    transform: translateY(-5px);
    border-color: rgba(39, 98, 213, 0.25);
    box-shadow: 0 25px 55px rgba(22, 37, 63, 0.16);
}

/* Each section receives a different accent color. */
.preamble {
    --section-accent: var(--cyan);
}

.explanation {
    --section-accent: var(--blue);
}

.participation {
    --section-accent: var(--coral);
}

.benefits {
    --section-accent: var(--gold);
}

.requirements {
    --section-accent: #7656bf;
}

/* Accent stripe on the left edge of every section. */
.preamble::before,
.explanation::before,
.participation::before,
.benefits::before,
.requirements::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7px;

    background: linear-gradient(
        to bottom,
        var(--section-accent),
        transparent 92%
    );
}

/* Large decorative section numbers. */
.preamble::after,
.explanation::after,
.participation::after,
.benefits::after,
.requirements::after {
    position: absolute;
    top: 10px;
    right: 22px;

    color: rgba(23, 32, 51, 0.045);

    font-family: "Playfair Display", Georgia, serif;
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
}

.preamble::after {
    content: "01";
}

.explanation::after {
    content: "02";
}

.participation::after {
    content: "03";
}

.benefits::after {
    content: "04";
}

.requirements::after {
    content: "05";
}

/* Main section headings. */
h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 22px;
    color: var(--navy);

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

/* Colored line beneath each heading. */
h3::after {
    content: "";
    display: block;

    width: 62px;
    height: 5px;
    margin-top: 13px;

    border-radius: 99px;
    background: var(--section-accent, var(--blue));
}

/* Drop caps create a magazine-style first letter. */
.preamble p:first-of-type::first-letter,
.explanation p:first-of-type::first-letter,
.participation p:first-of-type::first-letter,
.benefits p:first-of-type::first-letter,
.requirements p:first-of-type::first-letter {
    float: left;

    margin: 0.12rem 0.55rem 0 0;

    color: var(--section-accent, var(--blue));

    font-family: "Playfair Display", Georgia, serif;
    font-size: 3.9rem;
    font-weight: 800;
    line-height: 0.78;
}

/* Adds a slightly different background to alternating sections. */
.participation,
.requirements {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.91),
        rgba(244, 247, 252, 0.78)
    );
}

/* Benefits section receives a dark highlighted design. */
.benefits {
    color: white;

    background: linear-gradient(
        120deg,
        rgba(22, 37, 63, 0.98),
        rgba(39, 98, 213, 0.9)
    );
}

.benefits h3 {
    color: white;
}

.benefits p {
    color: rgba(255, 255, 255, 0.82);
}

.benefits::after {
    color: rgba(255, 255, 255, 0.05);
}

/* Footer links are styled as rounded buttons. */
footer {
    margin-top: 24px;
    padding: 24px;

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;

    border-radius: var(--radius-medium);

    background: var(--navy);
    box-shadow: var(--soft-shadow);
}

footer a {
    min-width: 66px;
    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    color: white;
    text-align: center;
    text-decoration: none;

    font-size: 0.78rem;
    letter-spacing: 0.08em;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

footer a:hover {
    transform: translateY(-3px);
    color: var(--navy);
    background: var(--gold);
}

/* Sidebar remains visible while scrolling on large screens. */
.sidebar .wrapper {
    position: sticky;
    top: 24px;

    display: grid;
    gap: 18px;
}

.sidebar h3 {
    margin-bottom: 15px;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sidebar h3::after {
    width: 38px;
    height: 3px;
    margin-top: 8px;
    background: var(--gold);
}

/* Individual sidebar panels. */
.design-selection,
.design-archives,
.zen-resources {
    padding: 23px;

    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-medium);

    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--soft-shadow);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar li {
    position: relative;

    padding: 12px 0 12px 18px;
    border-bottom: 1px solid var(--line);

    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.sidebar li:last-child {
    border-bottom: 0;
}

/* Custom bullets created through CSS. */
.sidebar li::before {
    content: "";
    position: absolute;

    left: 0;
    top: 19px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cyan);
    box-shadow: 0 0 0 4px rgba(40, 167, 199, 0.12);

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.sidebar li:hover::before {
    transform: scale(1.35);
    background: var(--coral);
}

.sidebar a {
    text-decoration: none;
}

.design-name {
    display: block;
    margin-bottom: 3px;

    color: var(--navy);
    font-size: 0.94rem;
    font-weight: 800;
}

.designer-name {
    color: var(--blue);
    font-size: 0.82rem;
}

/* Archive and resource links slide slightly when hovered. */
.design-archives li a,
.zen-resources li a {
    display: block;
    color: var(--navy);

    transition:
        transform 180ms ease,
        color 180ms ease;
}

.design-archives li a:hover,
.zen-resources li a:hover {
    transform: translateX(5px);
    color: var(--coral);
}

/* Entrance animations for the page sections. */
header,
.summary,
.preamble,
.main.supporting > div,
.sidebar {
    animation: reveal 700ms ease both;
}

.summary {
    animation-delay: 90ms;
}

.preamble {
    animation-delay: 150ms;
}

.explanation {
    animation-delay: 210ms;
}

.participation {
    animation-delay: 270ms;
}

.benefits {
    animation-delay: 330ms;
}

.requirements {
    animation-delay: 390ms;
}

.sidebar {
    animation-delay: 260ms;
}

/* Content fades and moves upward when the page opens. */
@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tablet layout moves the sidebar below the main content. */
@media (max-width: 940px) {
    .page-wrapper {
        grid-template-columns: 1fr;

        grid-template-areas:
            "intro"
            "main"
            "sidebar";
    }

    .sidebar .wrapper {
        position: static;

        grid-template-columns: repeat(
            3,
            minmax(0, 1fr)
        );

        align-items: start;
    }
}

/* Mobile layout stacks the page into one column. */
@media (max-width: 680px) {
    body {
        font-size: 15px;
    }

    .page-wrapper {
        width: min(
            calc(100% - 20px),
            var(--content-width)
        );

        margin-top: 10px;
        gap: 18px;
    }

    header {
        min-height: 390px;
        border-radius: 20px;
    }

    header::after {
        bottom: 23px;
        font-size: 0.58rem;
        letter-spacing: 0.18em;
    }

    .summary {
        width: calc(100% - 22px);
        grid-template-columns: 1fr;

        margin-top: -28px;
        padding: 20px;
    }

    .summary p:last-child {
        white-space: normal;
    }

    .preamble,
    .explanation,
    .participation,
    .benefits,
    .requirements {
        padding: 26px 24px;
        border-radius: 20px;
    }

    .sidebar .wrapper {
        grid-template-columns: 1fr;
    }

    footer {
        padding: 18px;
    }
}

/*
    Removes most animations for visitors who have enabled
    reduced-motion accessibility settings.
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print layout removes decorations and saves ink. */
@media print {
    body {
        background: white;
        color: black;
    }

    body::before,
    body::after,
    header::before,
    header::after {
        display: none;
    }

    .page-wrapper {
        display: block;
        width: 100%;
        margin: 0;
    }

    header,
    .preamble,
    .explanation,
    .participation,
    .benefits,
    .requirements,
    .design-selection,
    .design-archives,
    .zen-resources {
        color: black;
        background: white;
        box-shadow: none;
        border: 1px solid #999;
        break-inside: avoid;
    }

    .sidebar {
        margin-top: 20px;
    }
}