/* ============================================================
   Studio West PAC
   Black & white editorial / minimalist design system
   Inspired by matherdancecompany.com
   ============================================================ */

:root {
    --ink:        #000000;
    --ink-soft:   #1a1a1a;
    --paper:      #ffffff;
    --paper-warm: #fafaf8;
    --rule:       #e5e5e5;
    --rule-soft:  #f0f0f0;
    --muted:      #6a6a6a;
    --muted-dk:   #3a3a3a;

    --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;

    --section-y: clamp(4rem, 10vw, 9rem);
    --edge-x:    clamp(1.25rem, 4vw, 2.5rem);
}

/* -------------------- reset & base -------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; }
a:hover { opacity: .55; }

img { max-width: 100%; height: auto; display: block; }

/* -------------------- typography -------------------- */

.eyebrow {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--ink);
    display: inline-block;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -.015em;
    margin: 0 0 1rem;
}

h1 { font-size: clamp(3rem, 9vw, 8rem); }
h2 { font-size: clamp(2.25rem, 5.5vw, 5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 400; }
h4 { font-size: 1.35rem; font-weight: 400; }

em.italic, .italic { font-style: italic; font-weight: 300; }

p.lead {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--muted-dk);
    max-width: 54ch;
    font-weight: 300;
}

.rule {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--ink);
    margin: 1.5rem 0 2rem;
    border: 0;
}
.rule-center { margin-left: auto; margin-right: auto; }
.rule-white  { background: var(--paper); }

.count {
    font-family: var(--serif);
    font-style: italic;
    font-size: .95rem;
    color: var(--muted);
    font-weight: 400;
}

/* -------------------- buttons -------------------- */

.btn-swp {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: 1.05rem 2.3rem;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
    opacity: 1 !important;
}
.btn-swp:hover { background: var(--paper); color: var(--ink); opacity: 1 !important; }

.btn-swp-ghost { background: transparent; color: var(--ink); }
.btn-swp-ghost:hover { background: var(--ink); color: var(--paper); }

.btn-swp-light { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.btn-swp-light:hover { background: transparent; color: var(--paper); }

.btn-swp .arrow {
    display: inline-block;
    transition: transform .3s ease;
}
.btn-swp:hover .arrow { transform: translateX(6px); }

.btn-swp.active { background: var(--ink); color: var(--paper); }

/* -------------------- announcement -------------------- */

.announcement-bar {
    background: var(--ink);
    color: var(--paper);
    padding: .55rem 1rem;
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
}

/* -------------------- navigation -------------------- */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease;
}
.site-nav.scrolled { border-bottom-color: var(--rule); }

.nav-inner { padding: 1.1rem var(--edge-x); }

.brand { display: flex; align-items: center; gap: .9rem; color: var(--ink); }
.brand:hover { opacity: 1; }

.brand-mark {
    width: 46px; height: 46px;
    border: 1px solid var(--ink);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: .02em;
    transition: background .3s ease, color .3s ease;
}
.brand:hover .brand-mark { background: var(--ink); color: var(--paper); }

.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name .line-1 {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 500;
}
.brand-name .line-2 {
    font-family: var(--sans);
    font-size: .6rem;
    font-weight: 400;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .35rem;
}

.nav-menu {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    gap: 2.5rem;
    align-items: center;
}
.nav-menu a {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink);
    position: relative;
    padding: .5rem 0;
}
.nav-menu a:hover { opacity: 1; }
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--ink);
    transition: width .3s ease;
}
.nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; }

.nav-menu .nav-cta {
    padding: .75rem 1.4rem;
    border: 1px solid var(--ink);
    letter-spacing: .22em;
}
.nav-menu .nav-cta::after { display: none; }
.nav-menu .nav-cta:hover { background: var(--ink); color: var(--paper); opacity: 1; }

/* mobile toggle */
.nav-toggle {
    background: none;
    border: 0;
    width: 36px; height: 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.nav-toggle span {
    width: 100%;
    height: 1px;
    background: var(--ink);
    transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 991.98px) {
    .nav-menu {
        position: fixed;
        inset: 80px 0 auto 0;
        background: var(--paper);
        flex-direction: column;
        gap: 0;
        padding: 1.5rem 1.25rem 3rem;
        border-bottom: 1px solid var(--rule);
        transform: translateY(-120%);
        transition: transform .4s cubic-bezier(.25,.8,.3,1);
    }
    .nav-menu.open { transform: translateY(0); }
    .nav-menu li { width: 100%; border-bottom: 1px solid var(--rule-soft); }
    .nav-menu li:last-child { border: 0; padding-top: 1rem; }
    .nav-menu a { display: block; padding: 1.1rem 0; font-size: .85rem; }
    .nav-menu a::after { display: none; }
    .nav-menu .nav-cta { display: inline-block; padding: .85rem 1.4rem; }
    .brand-name .line-2 { display: none; }
}

/* -------------------- hero -------------------- */

.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: flex-end;
    padding: 3.5rem var(--edge-x) 4.5rem;
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.85) 100%),
        url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?auto=format&fit=crop&w=2200&q=80') center/cover no-repeat;
    filter: grayscale(1) contrast(1.1);
}

.hero-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .25;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 3rem;
}

.hero h1 {
    font-weight: 300;
    letter-spacing: -.025em;
    max-width: 14ch;
    color: var(--paper);
}
.hero h1 em {
    font-style: italic;
    font-weight: 300;
}

.hero-eyebrow { color: var(--paper); opacity: .8; margin-bottom: 2rem; }

.hero-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: .65;
    text-align: right;
    min-width: 180px;
}
.hero-meta strong {
    font-weight: 500;
    color: var(--paper);
    display: block;
    margin-top: .25rem;
    font-size: .85rem;
    letter-spacing: .22em;
}
.hero-meta > div { opacity: 1; }
.hero-meta > div + div { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.2); }

.hero-scroll {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--sans);
    font-size: .6rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: .65;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.hero-scroll::after {
    content: '';
    width: 1px;
    height: 36px;
    background: var(--paper);
    animation: scroll-line 2.2s ease-in-out infinite;
    transform-origin: top;
}
@keyframes scroll-line {
    0%   { transform: scaleY(0); }
    50%  { transform: scaleY(1); }
    100% { transform: scaleY(0) translateY(36px); }
}

@media (max-width: 767.98px) {
    .hero { padding: 3rem 1.25rem 4rem; min-height: 82vh; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-meta { text-align: left; }
}

/* -------------------- sections -------------------- */

.section {
    padding: var(--section-y) var(--edge-x);
    position: relative;
}
.section-alt  { background: var(--paper-warm); }
.section-dark { background: var(--ink); color: var(--paper); }
.section-dark .eyebrow { color: var(--paper); }
.section-dark .rule    { background: var(--paper); }
.section-dark .count   { color: rgba(255,255,255,.55); }

.section-inner { max-width: 1400px; margin: 0 auto; }

/* -------------------- page header (interior) -------------------- */

.page-header {
    padding: clamp(5rem, 10vw, 8rem) var(--edge-x) clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.page-header .eyebrow { margin-bottom: 1.25rem; }
.page-header h1 {
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    max-width: 20ch;
    margin: 0;
}

/* -------------------- intro grid -------------------- */

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}
@media (max-width: 767.98px) {
    .intro-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* -------------------- stats -------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-top: 5rem;
}
.stat {
    background: var(--paper);
    padding: 2.75rem 1.5rem;
    text-align: center;
}
.section-alt .stat { background: var(--paper-warm); }
.stat .num {
    font-family: var(--serif);
    font-size: clamp(2.75rem, 5.5vw, 4.5rem);
    font-weight: 300;
    line-height: 1;
    color: var(--ink);
    display: block;
}
.stat .lbl {
    display: block;
    margin-top: .9rem;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
}
@media (max-width: 767.98px) {
    .stats { grid-template-columns: 1fr 1fr; }
}

/* -------------------- disciplines / class grid -------------------- */

.disciplines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-top: 3.5rem;
}
.discipline {
    background: var(--paper);
    padding: 3rem 2rem;
    transition: background .4s ease, color .4s ease;
    position: relative;
}
.discipline:hover { background: var(--ink); color: var(--paper); }
.discipline:hover .discipline-num,
.discipline:hover .discipline-age,
.discipline:hover p { color: var(--paper); }
.discipline:hover p { opacity: .8; }
.discipline:hover .rule { background: var(--paper); }

.discipline-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: .9rem;
    color: var(--muted);
    transition: color .4s ease;
}
.discipline h3 { margin-top: 1.5rem; font-weight: 400; }
.discipline p { color: var(--muted-dk); font-size: .95rem; font-weight: 300; transition: color .4s ease, opacity .4s ease; }
.discipline-age {
    display: block;
    margin-top: 1.5rem;
    font-family: var(--sans);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .4s ease;
}

@media (max-width: 991.98px) {
    .disciplines { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
    .disciplines { grid-template-columns: 1fr; }
}

/* -------------------- pillars (three-up on home) -------------------- */

.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 4rem;
}
.pillar {
    padding-top: 2rem;
    border-top: 1px solid var(--ink);
}
.pillar-icon {
    font-size: 1.6rem;
    margin-bottom: 1.75rem;
    display: block;
}
.pillar h3 { font-weight: 400; margin-bottom: 1rem; }
.pillar p  { color: var(--muted-dk); font-size: .95rem; font-weight: 300; }
@media (max-width: 767.98px) {
    .pillars { grid-template-columns: 1fr; gap: 2rem; }
}

/* -------------------- faculty strip -------------------- */

.faculty-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3.5rem;
}
.faculty-mini .faculty-photo {
    aspect-ratio: 3/4;
    background: var(--paper-warm);
    overflow: hidden;
    filter: grayscale(1) contrast(1.05);
    transition: filter .5s ease;
}
.faculty-mini:hover .faculty-photo { filter: grayscale(0); }
.faculty-photo img { width: 100%; height: 100%; object-fit: cover; }
.faculty-mini h4 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.15rem;
    margin: 1.25rem 0 .25rem;
}
.faculty-mini .role {
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--muted);
}
@media (max-width: 767.98px) {
    .faculty-strip { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

/* -------------------- testimonial -------------------- */

.testimonial-wrap { max-width: 900px; margin: 3rem auto 0; text-align: center; }
.testimonial + .testimonial { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid rgba(255,255,255,.15); }
.testimonial-quote {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.4;
    color: var(--paper);
    margin: 0 0 2rem;
}
.testimonial-author {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--paper);
}
.testimonial-role {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--paper);
    opacity: .55;
    margin-top: .4rem;
}

/* -------------------- CTA band -------------------- */

.cta-band {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(4rem, 8vw, 7rem) var(--edge-x);
    text-align: center;
}
.cta-band h2 {
    color: var(--paper);
    max-width: 22ch;
    margin: 0 auto 1.5rem;
}
.cta-band p.lead { color: rgba(255,255,255,.7); margin: 0 auto 2rem; }

/* -------------------- pretty tables (tuition / rules) -------------------- */

.pretty-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
}
.pretty-table th, .pretty-table td {
    text-align: left;
    padding: 1.35rem 1rem;
    border-bottom: 1px solid var(--rule);
    font-size: .95rem;
    vertical-align: top;
}
.pretty-table th {
    font-family: var(--sans);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--ink);
}
.pretty-table tbody tr { transition: background .25s ease; }
.pretty-table tbody tr:hover { background: var(--paper-warm); }
.pretty-table .price {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 400;
    white-space: nowrap;
}

/* rules page — numbered list */
.policy-list {
    list-style: none;
    counter-reset: policy;
    padding: 0;
    margin: 3rem 0 0;
    max-width: 900px;
}
.policy-list li {
    counter-increment: policy;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1.5rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--rule);
}
.policy-list li::before {
    content: counter(policy, decimal-leading-zero);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--muted);
}
.policy-list h4 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.35rem;
    margin: 0 0 .5rem;
}
.policy-list p {
    color: var(--muted-dk);
    margin: 0;
    font-size: .95rem;
    line-height: 1.75;
}

/* -------------------- download card -------------------- */

.download-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.5rem;
    border: 1px solid var(--ink);
    background: var(--paper);
    transition: background .3s ease, color .3s ease;
    text-decoration: none;
    color: var(--ink);
}
.download-card:hover { background: var(--ink); color: var(--paper); opacity: 1; }
.download-card .file-meta { display: flex; align-items: center; gap: 1.25rem; }
.download-card .file-icon {
    width: 48px; height: 48px;
    border: 1px solid currentColor;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: .75rem;
    letter-spacing: .1em;
}
.download-card .file-name {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 400;
}
.download-card .file-sub {
    display: block;
    font-family: var(--sans);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .25rem;
}
.download-card:hover .file-sub { color: rgba(255,255,255,.6); }
.download-card .arrow {
    font-size: 1.35rem;
    transition: transform .3s ease;
}
.download-card:hover .arrow { transform: translateX(6px); }

@media (max-width: 576px) {
    .download-card { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
}

/* -------------------- contact strip -------------------- */

.contact-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-top: 4rem;
}
.contact-cell {
    background: var(--paper);
    padding: 2.5rem 2rem;
    text-align: center;
}
.section-alt .contact-cell { background: var(--paper-warm); }
.contact-cell .lbl {
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: .75rem;
}
.contact-cell .val {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.4;
}
.contact-cell .val a:hover { opacity: .55; }
@media (max-width: 767.98px) {
    .contact-strip { grid-template-columns: 1fr; }
}

/* -------------------- footer -------------------- */

.site-footer {
    background: var(--ink);
    color: var(--paper);
    padding: 5rem var(--edge-x) 2.5rem;
}
.footer-top {
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,.15);
    margin-bottom: 3rem;
}
.footer-wordmark {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.wordmark-mark {
    width: 54px; height: 54px;
    border: 1px solid var(--paper);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 1.25rem;
}
.wordmark-text {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1;
}
.wordmark-text small {
    display: block;
    font-family: var(--sans);
    font-size: .6rem;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-top: .75rem;
}

.footer-heading {
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--paper);
    margin-bottom: 1.25rem;
}
.footer-text {
    font-size: .95rem;
    line-height: 1.75;
    color: rgba(255,255,255,.7);
    margin: 0 0 1rem;
}
.footer-link { color: var(--paper); border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.footer-link:hover { border-bottom-color: var(--paper); opacity: 1; }

.footer-social {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    gap: .75rem;
}
.footer-social a {
    width: 42px; height: 42px;
    border: 1px solid rgba(255,255,255,.3);
    display: grid;
    place-items: center;
    color: var(--paper);
    transition: all .3s ease;
}
.footer-social a:hover {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15);
    margin-top: 4rem;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-bottom p { margin: 0; }

/* -------------------- reveal on scroll -------------------- */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s ease, transform .9s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .15s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .25s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .35s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .45s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .55s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .65s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .75s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* -------------------- utility -------------------- */

.max-readable { max-width: 68ch; }
.divider-lg { height: 1px; background: var(--rule); margin: var(--section-y) 0 0; }