/* ==========================================================================
   Bird Conservation Nepal — homepage
   --------------------------------------------------------------------------
   The homepage body. The masthead and footer are NOT here: they are shared
   across every page and live in bcn-site.css, loaded by view_header.php.

   Loaded only on the homepage, which is why it can style body, headings and
   links directly. Pages that have not been migrated still get Bootstrap and
   style.css instead; view_header.php switches between the two on the $modern
   flag set by the controller.

   Plain CSS, no build step.
   ========================================================================== */

:root {
    /* Paper is a light bluish grey, biased toward the BirdLife blue that now
       carries the two full-width bands — and away from the warm-cream default.
       Both tones shift together; leaving --paper-hi grey-green while --paper
       went blue would make the alternating sections read as a mismatch. */
    --paper:     #e6ebf0;
    --paper-hi:  #f3f6f9;
    --pine:      #16211d;   /* deep ground: near-black biased to forest green */
    --pine-2:    #1f2d28;

    --ink:       #1d2723;
    --ink-2:     #5a655f;
    --ink-3:     #8b948d;

    --rule:      #d2dae2;   /* same lightness as before, blue-biased */
    --rule-2:    #bcc6d0;

    --blue:      #2e6ba6;   /* BirdLife partner identity — links, and the two
                               full-width bands */
    --blue-2:    #255884;   /* the same blue, deepened, for rules on blue */
    --accent-on-blue:      #a0dd83;   /* the same accent, lightened for the blue
                               bands where the deep green goes muddy */
    --accent:     #3f7052;   /* the one accent: Nepali names, plate numerals */
    --moss:      #4a7c59;   /* actions */

    /* Lora carries the display roles, Open Sans the text. Lora
       is a sturdy slab-ish serif that goes heavy at large sizes, so the hero
       scale is set at 400 and only the smaller headings take 700. */
    --display: "Lora", Georgia, "Times New Roman", serif;
    --text:    "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display-weight: 700;
    --display-weight-hero: 400;
    --display-track: -0.02em;

    --edge:  clamp(1.25rem, 4vw, 3.5rem);
    --rail:  clamp(0px, 8vw, 148px);
    --stack: clamp(4rem, 8vw, 8rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--text);
    font-size: 1.0625rem;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: var(--display-weight);
    line-height: 1.1;
    letter-spacing: var(--display-track);
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
}

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.u-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --------------------------------------------------------------------------
   The spine: a narrow left rail for plate numbers, content to its right.
   -------------------------------------------------------------------------- */

.shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--edge);
}

.spine {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 900px) {
    .spine { grid-template-columns: var(--rail) minmax(0, 1fr); }
}

.plate-no {
    font-family: var(--text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    padding-top: 0.55rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 900px) {
    .plate-no {
        margin-bottom: 0;
        border-top: 2px solid var(--accent);
        padding-top: 0.65rem;
    }
}

.section { padding: var(--stack) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

/* These image-led homepage sections need less empty space than the longer
   editorial sections around them. */
.work-section,
.field-section { padding: clamp(3rem, 6vw, 6rem) 0; }

.field-section { padding-bottom: clamp(1.5rem, 3vw, 3rem); }

.head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.head__title {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: var(--display-weight-hero);
    max-width: 22ch;
    margin-bottom: 0.75rem;
}

.head__note {
    color: var(--ink-2);
    max-width: 56ch;
    margin: 0;
    font-size: 1.0625rem;
}

.head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.more {
    font-family: var(--text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--blue);
    white-space: nowrap;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.15rem;
    transition: color 0.15s ease-out;
}

.more:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--text);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.95em 1.9em;
    border: 1.5px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.18s ease-out, color 0.18s ease-out,
                border-color 0.18s ease-out;
}

.btn--solid { background: var(--moss); color: #fff; border-color: var(--moss); }
.btn--solid:hover { background: #3c6749; border-color: #3c6749; }

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

.btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--onDark:hover { background: #fff; color: var(--pine); border-color: #fff; }

/* ==========================================================================
   PLATE 01 — HERO
   A photograph, and a specimen label sitting on it the way a label sits
   under a mounted plate.
   ========================================================================== */

.hero { position: relative; background: var(--pine); }

.hero__figure { position: relative; }

.hero__img {
    width: 100%;
    height: clamp(400px, 76vh, 780px);
    object-fit: cover;
}

.hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(12,20,17,0.86) 0%, rgba(12,20,17,0.55) 34%,
                rgba(12,20,17,0.05) 62%, rgba(12,20,17,0) 100%);
}

.hero__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

/* The shell is a flex item here, so it takes its width from its contents
   rather than from max-width, and margin:0 auto then centres that narrow box
   over the middle of the photograph. It has to be told to fill the row so the
   label sits left, against the dark end of the veil gradient, and clear of the
   bird. */
.hero__body > .shell { width: 100%; }

.hero__label { max-width: 40rem; color: #fff; }

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    margin-bottom: 1.4rem;
}

.hero__eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--accent);
    flex: 0 0 auto;
}

.hero__title {
    max-width: 15ch;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--display-weight-hero);
    line-height: 1.08;
    letter-spacing: var(--display-track);
    color: #fff;
    margin-bottom: 1.1rem;
}

.hero__standfirst {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: rgba(255,255,255,0.86);
    max-width: 42ch;
    margin: 0 0 2.1rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* The credit line, set like a plate caption. */
.hero__credit {
    position: absolute;
    right: var(--edge);
    bottom: 1.1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.55);
    text-align: right;
}

@media (max-width: 767.98px) {
    .hero__body { position: static; background: var(--pine); padding: 2.5rem 0 3rem; }
    .hero__veil { background: linear-gradient(to top, rgba(12,20,17,0.5), rgba(12,20,17,0)); }
    .hero__img { height: 300px; }
    .hero__credit { position: static; text-align: left; padding: 0.6rem var(--edge) 0; }
}

/* ==========================================================================
   PLATE 02 — STATEMENT
   ========================================================================== */

.statement { background: var(--paper-hi); border-bottom: 1px solid var(--rule); }

.statement__text {
    font-family: var(--display);
    font-size: clamp(1.375rem, 2.7vw, 2.125rem);
    line-height: 1.28;
    letter-spacing: -0.015em;
    max-width: 30ch;
    margin: 0;
}

.statement__text em { font-style: italic; color: var(--accent); }

.statement__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

@media (min-width: 880px) { .statement__grid { grid-template-columns: 1fr auto; } }

.partner { display: flex; align-items: center; gap: 1.2rem; }
.partner img { width: 118px; }

.partner__meta {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.7;
}

.partner__meta b {
    display: block;
    font-family: var(--display);
    font-size: 1.75rem;
    font-weight: var(--display-weight);
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   PLATE 03 — WORK
   ========================================================================== */

/* A grid of captioned plates, not a stacked list: it reads shorter and carries
   six projects in less height than four rows took. The pictures are kept
   modest on purpose — most project "photos" in the library are composite
   banners with logos baked in, and they do not survive being shown large. */
.work {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.25rem);
}

.project { display: block; }

.project__frame {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--rule);
    border-radius: 2px;
}

.project__frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
    filter: saturate(0.92);
}

.project:hover .project__frame img { transform: scale(1.05); filter: saturate(1); }

/* A hairline above the caption, the way a plate is captioned. */
.project__name {
    font-size: 1.0625rem;
    line-height: 1.32;
    max-width: none;
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--rule-2);
    transition: color 0.15s ease-out;
    /* Some titles run past 130 characters, so they are clamped rather than
       left to set the height of the whole row. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project:hover .project__name { color: var(--blue); }

.project__go {
    display: inline-block;
    margin-top: 0.55rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    transition: color 0.15s ease-out;
}

.project:hover .project__go { color: var(--accent); }

/* ==========================================================================
   PLATE 04 — NEWS
   ========================================================================== */

.news { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 920px) { .news { grid-template-columns: 1.4fr 1fr; align-items: start; } }

.lead__frame {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 2px;
    background: var(--rule);
    margin-bottom: 1.4rem;
}

.lead__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.2,.7,.3,1); }
.lead:hover .lead__frame img { transform: scale(1.04); }

.stamp {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    display: block;
    margin-bottom: 0.6rem;
}

.lead__title {
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    margin-bottom: 0.7rem;
    max-width: 24ch;
    transition: color 0.15s ease-out;
}

.lead:hover .lead__title { color: var(--blue); }

.lead__excerpt { color: var(--ink-2); max-width: 54ch; margin: 0; }

.stories { border-top: 2px solid var(--ink); }

.story { display: block; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }

.story__title {
    font-size: 1.125rem;
    max-width: 34ch;
    transition: color 0.15s ease-out;
}

.story:hover .story__title { color: var(--blue); }

/* ==========================================================================
   SPONSOR
   ZEISS is BCN's optics partner and had two placements on the old site. Both
   are kept. The banner gets a plate of its own so it is clearly present, and
   both are labelled and marked rel="sponsored" — a paid placement should read
   as one rather than pass as editorial content.
   ========================================================================== */

.sponsor { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.sponsor__label,
.promo__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 0.9rem;
}

/* The source banner is 1400px wide, so it can use the full content rail
   without losing sharpness. */
.sponsor__banner {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(29,39,35,0.07);
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}

.sponsor__banner img { width: 100%; height: auto; }

.sponsor__banner:hover {
    box-shadow: 0 10px 26px rgba(29,39,35,0.14);
    transform: translateY(-2px);
}

.sponsor__note {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

/* The portrait lockup, in the space the news sidebar leaves empty. */
.promo {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

.promo__mark {
    display: block;
    width: 148px;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
    transition: border-color 0.2s ease-out, transform 0.2s ease-out;
}

.promo__mark img { width: 100%; height: auto; }

.promo__mark:hover { border-color: var(--rule-2); transform: translateY(-2px); }

/* ==========================================================================
   PLATE 05 — NOTICES
   ========================================================================== */

.notices-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 5%, rgba(46, 107, 166, 0.11), transparent 28rem),
        var(--paper-hi);
    border-top: 1px solid var(--rule);
}

.notices-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.3rem;
    background: var(--blue);
}

.notices-section__eyebrow {
    margin: 0 0 0.45rem;
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.notices {
    border-top: 2px solid var(--blue);
    background: rgba(255, 255, 255, 0.56);
}

.notice {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.2rem 1.5rem;
    padding: 1.15rem clamp(0.9rem, 2vw, 1.4rem);
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
    transition: background-color 0.18s ease-out, transform 0.18s ease-out;
}

@media (min-width: 720px) {
    .notice { grid-template-columns: minmax(0, 1fr) auto auto 1.25rem; }
}

.notice::after {
    content: "\2192";
    display: none;
    color: var(--blue);
    font-size: 1.1rem;
    transition: transform 0.18s ease-out;
}

@media (min-width: 720px) { .notice::after { display: block; } }

.notice__title {
    font-family: var(--display);
    font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.15s ease-out;
}

.notice:hover,
.notice:focus-visible {
    background: #fff;
    transform: translateX(0.25rem);
}

.notice:hover .notice__title,
.notice:focus-visible .notice__title { color: var(--blue); }

.notice:hover::after,
.notice:focus-visible::after { transform: translateX(0.2rem); }

.notice__where {
    font-size: 0.875rem;
    color: var(--ink-3);
}

.notice__when {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--blue-2);
    background: rgba(46, 107, 166, 0.1);
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   PLATE 06 — SUPPORT
   ========================================================================== */

.support {
    background: var(--blue);
    color: #fff;
    padding: clamp(2.75rem, 5vw, 4.5rem) 0;
}

.support h2, .support h3 { color: #fff; }

/* --- Everything that has to change on a blue ground --------------------
   The page accent is a deep green on paper. Against a mid-blue it goes muddy
   and drops below a readable contrast, so on blue it lightens. The solid
   moss button has the same problem — green on blue is two mid-tones with
   nothing between them — so on blue the primary button turns white. */

.support .plate-no { color: var(--accent-on-blue); border-top-color: var(--accent-on-blue); }

.support .way__no { color: var(--accent-on-blue); }

.support .way__link--primary {
    background: #fff;
    border-color: #fff;
    color: var(--blue);
}

.support .way__link--primary:hover {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

/* Text at 0.7 white sits at about 3.4:1 on this blue. Lifted so body copy
   stays readable. */
.support .support__text,
.support .way__text { color: rgba(255,255,255,0.85); }

.support .ways,
.support .way { border-color: rgba(255,255,255,0.28); }

/* Now that this band sits near the top of the page, the lede runs across the
   measure rather than hugging the left third. */
.support__lede {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 3.5rem;
    align-items: end;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 820px) {
    .support__lede { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.support__title { font-size: clamp(1.875rem, 4vw, 3rem); font-weight: var(--display-weight-hero); margin: 0; max-width: 16ch; }

.support__text { color: rgba(255,255,255,0.7); margin: 0; max-width: 44ch; }

.ways { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,0.18); }

@media (min-width: 800px) { .ways { grid-template-columns: repeat(3, 1fr); } }

.way {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

@media (min-width: 800px) {
    .way {
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.18);
        padding-right: clamp(1.5rem, 3vw, 2.5rem);
    }
    .way + .way { padding-left: clamp(1.5rem, 3vw, 2.5rem); }
    .way:last-child { border-right: none; padding-right: 0; }
}

.way__no {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.6rem;
}

.way__name { font-size: 1.625rem; margin-bottom: 0.6rem; }

.way__text { color: rgba(255,255,255,0.7); font-size: 0.9375rem; margin: 0 0 1rem; flex: 1 1 auto; }

/* Each way to help ends in its own button. Donate carries the solid fill
   because it is the primary ask; Join and Act are outlined, so the three read
   as a hierarchy rather than three equal shouts. */
.way__link {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.45);
    border-radius: 2px;
    padding: 0.9em 1.6em;
    transition: background-color 0.18s ease-out, color 0.18s ease-out,
                border-color 0.18s ease-out;
}

.way__link:hover {
    background: #fff;
    color: var(--pine);
    border-color: #fff;
}

.way__link--primary {
    background: var(--moss);
    border-color: var(--moss);
    color: #fff;
}

.way__link--primary:hover {
    background: #5b9169;
    border-color: #5b9169;
    color: #fff;
}

@media (max-width: 799.98px) {
    .way__link { align-self: stretch; }
}

/* ==========================================================================
   PLATE 07 — PUBLICATIONS
   ========================================================================== */

/* Aligned from the top, not the bottom. With flex-end a caption that wrapped
   to two lines pushed its cover upward and broke the row; from the top every
   cover starts on the same line and the captions hang beneath. The covers
   carry their own shadow, so they need no rule under them. */
.shelf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(1.5rem, 3vw, 2.75rem);
}

.book { width: clamp(112px, 13vw, 148px); flex: 0 0 auto; }

.book__cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 1px 3px 3px 1px;
    box-shadow: 0 12px 26px rgba(22,33,29,0.18);
    transition: transform 0.28s cubic-bezier(.2,.7,.3,1), box-shadow 0.28s ease-out;
}

.book:hover .book__cover {
    transform: translateY(-10px) rotate(-1deg);
    box-shadow: 0 22px 38px rgba(22,33,29,0.26);
}

.book__name {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0.9rem 0 0;
    color: var(--ink-2);
    /* Two lines are reserved whether the title needs them or not, so the row
       ends on one line regardless of title length. Longer titles clamp. */
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book:hover .book__name { color: var(--blue); }

/* ==========================================================================
   PLATE 08 — SIGN-UP + FOOTER
   ========================================================================== */

.signup { background: var(--paper-hi); border-top: 1px solid var(--rule); }

.signup__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }

@media (min-width: 860px) { .signup__grid { grid-template-columns: 1fr 1fr; } }

.signup__title { font-size: clamp(1.5rem, 3vw, 2.125rem); margin-bottom: 0.7rem; }
.signup__text { color: var(--ink-2); margin: 0; max-width: 44ch; }

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

.signup__input {
    flex: 1 1 230px;
    min-width: 0;
    font-family: var(--text);
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--rule-2);
    border-radius: 2px;
    padding: 0.9em 1.1em;
}

.signup__input::placeholder { color: var(--ink-3); }
.signup__input:focus { outline: none; border-color: var(--blue); }

.signup__note { flex-basis: 100%; font-size: 0.8125rem; color: var(--ink-3); margin: 0.6rem 0 0; }


@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}