/* ── greenswans.eu — site.css (on top of base.css) ────────────────────────
   One memorable thing: the origami swan, drawn large in the logo gradient,
   drawing itself line by line once when the home page loads. It sits on a
   strip of Sky water. Everything else stays quiet.
────────────────────────────────────────────────────────────────────────── */

.wordmark { font-family: var(--wordmark); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.005em; }
.swan--mark { width: 2.4rem; }
.swan--mark g { stroke-width: 4; }
.site-footer .wordmark { color: var(--paper); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero-grid { display: grid; gap: 1rem; align-items: end; }
.hero-copy { padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero-heading {
    max-width: 15ch;
    font-size: clamp(2.6rem, 5.6vw, 4.5rem);
    line-height: 1.03;
    letter-spacing: -0.02em;
}
.hero .lede { margin-top: 1.75rem; }
.hero .actions { margin-top: 2.25rem; }
.hero-art { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.swan--hero { width: min(100%, 27rem); margin-bottom: -1.1rem; }
.swan--hero g { stroke-width: 1.15; }
.hero-water { position: relative; height: clamp(1.25rem, 2.6vw, 1.75rem); background: var(--sky); }
@media (min-width: 960px) {
    .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; }
    .swan--hero { width: 100%; max-width: 30rem; }
}
@media (max-width: 959px) {
    .hero-copy { padding-bottom: 0; }
    .swan--hero { width: clamp(9rem, 38vw, 14rem); margin-bottom: -0.55rem; }
    .swan--hero g { stroke-width: 1.8; }
}

/* The line drawing: each line has pathLength="1", so a dash of 1 is the whole
   line; head, neck, body and wing follow one another. Without motion the swan
   is simply there. */
@media (prefers-reduced-motion: no-preference) {
    .swan--draw line {
        stroke-dasharray: 1 1.2;
        stroke-dashoffset: 1;
        opacity: 0;
        animation: swan-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    }
    .swan--draw .swan-head line { animation-delay: 0.15s; }
    .swan--draw .swan-neck line { animation-delay: 0.6s; }
    .swan--draw .swan-body line { animation-delay: 1.05s; }
    .swan--draw .swan-wing line { animation-delay: 1.5s; }
}
@keyframes swan-draw {
    0% { opacity: 0; stroke-dashoffset: 1; }
    6% { opacity: 1; }
    100% { opacity: 1; stroke-dashoffset: 0; }
}

/* ── What we do ─────────────────────────────────────────────────────────── */
.areas { margin-top: 0; }
@media (min-width: 640px) {
    .areas { columns: 2; column-gap: 2.5rem; }
    .areas li { break-inside: avoid; }
    .areas li:last-child { border-bottom: 0; }
}

/* ── Why green swans: the essay on Ink, beside a timeline of three dates ── */
.band--ink .split-head h2 { font-size: var(--fs-h2); }
.timeline { list-style: none; display: grid; gap: 1.4rem; margin-top: 2.5rem; max-width: 22rem; }
.timeline li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.timeline-year { font-family: var(--serif); font-size: 1.375rem; color: var(--leaf); }
.timeline-event { color: var(--muted-on-dark); font-size: var(--fs-ui); line-height: 1.5; }
.timeline-event em { color: var(--paper); }
.band--ink .reading { color: var(--paper); }
@media (min-width: 900px) {
    .band--ink .split-head { font-size: inherit; }
}

/* ── Closing call: a Sky panel, so its button is Mint ─────────────────── */
.cta { display: grid; gap: 1.5rem; align-items: center; }
.cta-heading { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.cta-lines { display: flex; flex-direction: column; margin: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) {
    .cta { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) auto; gap: 2.5rem; }
}

/* ── Header: the GreenSwans.AI button, in the bar at every width ────────── */
.header-action { padding: 0.75rem 1.35rem; font-size: var(--fs-ui); white-space: nowrap; }
.header-action-short { display: none; }
@media (min-width: 861px) {
    .site-header-row { gap: 2.5rem; }
    .site-header-row .nav { margin-left: auto; }
}
@media (max-width: 860px) {
    .header-action { margin-left: auto; padding: 0.55rem 0.9rem; }
}
@media (max-width: 560px) {
    .header-action-long { display: none; }
    .header-action-short { display: inline; }
    .site-header-row { gap: 0.75rem; }
}
/* Below 480px the swan, the button and Menu fill the bar: the button already
   says GreenSwans.AI, so the wordmark beside the swan is left to screen readers. */
.brand { flex-shrink: 0; }
@media (max-width: 480px) {
    .site-header .wordmark {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}