:root {
  --brand: #321833;
  --brand-dark: #241024;
  --ink: #30232d;
  --muted: #6d5e68;
  --bg: #fffaf3;
  --soft: #fbf0df;
  --line: #e7d5b8;
  --gold: #d9973e;
  --gold-light: #f3cf7a;
  /* Gold is jewellery, not paint: it draws the thin rules and focus rings, while
     every filled surface and every word takes one of the three text colours
     below. That keeps the page to ink, brand and cream instead of stacking a
     white word beside a gold block. */
  --header-ink: #fff7e8;
  --radius: 10px;
  /* One type scale for every page: body text, a lead paragraph, three heading
     steps, a small-text step for meta and captions, and a display size used only
     by the error numeral. Components take their size from here, never from a
     one-off value, so no page drifts bigger or smaller than the rest. */
  --font-body: 1rem;
  --font-lead: clamp(1.0625rem, .55vw + .95rem, 1.1875rem);
  --font-small: .875rem;
  --font-h1: clamp(1.75rem, 2.6vw + 1rem, 2.5rem);
  --font-h2: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
  --font-h3: clamp(1.125rem, .5vw + 1rem, 1.25rem);
  --font-h4: 1.0625rem;
  --font-display: clamp(2.5rem, 7vw, 3.5rem);
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--bg); font-size: var(--font-body); line-height: 1.7;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
/* A short page still ends with the footer at the bottom of the window, so no
   strip of page background is left hanging under the dark band. */
main { flex: 1 0 auto; }
/* Tamil text always uses Noto Sans Tamil: whole pages, and lone Tamil labels such
   as the language switch on an English page. */
html[lang="ta"] body,
[lang="ta"]:not(html) { font-family: "Noto Sans Tamil", "Noto Sans", system-ui, sans-serif; }
html[lang="ta"] body { line-height: 1.8; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
/* Keyboard focus ring: the deep brand colour on light surfaces, and the pale gold
   where the surface is already dark, so the ring keeps 3:1 against both. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px;
}
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-light); }
/* The current-language button already sits on pale gold, so it needs the dark ring. */
.site-header .lang-switch button[aria-current="true"]:focus-visible { outline-color: var(--brand-dark); }
.container { width: min(1100px, 100% - 2rem); margin-inline: auto; }
.skip-link { position: absolute; left: -999px; top: 0; background: #000; color: #fff; padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }
/* The skip link lands on its own black background, so it needs the light ring. */
.skip-link:focus-visible { outline-color: #fff; }
h1, h2, h3, h4 { line-height: 1.35; overflow-wrap: break-word; }
h1 { font-size: var(--font-h1); margin: 0 0 .9rem; }
h2 { font-size: var(--font-h2); margin: 2rem 0 .75rem; }
h3, .h3 { font-size: var(--font-h3); margin: 1.5rem 0 .5rem; }
h4 { font-size: var(--font-h4); margin: 1.25rem 0 .35rem; }
.meta { color: var(--muted); font-size: var(--font-small); margin: .25rem 0; }
.plain { list-style: none; padding: 0; }
.plain li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.prose { max-width: 760px; overflow-wrap: break-word; }
.privacy-policy { padding-block: 1rem; }
.privacy-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.privacy-table { width: 100%; border-collapse: collapse; }
.privacy-table th, .privacy-table td { min-width: 10rem; padding: .7rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.privacy-table th { background: var(--soft); }
.privacy-table tr:last-child td { border-bottom: 0; }
.hero-img { border-radius: var(--radius); margin: 1rem 0; }
.payment-qr { margin: .5rem 0 0; }
.payment-qr img { width: min(240px, 100%); height: auto; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* Photo credit */
.wm { display: block; margin-bottom: .5rem; border-radius: 8px; }
.wm img { display: block; width: 100%; border-radius: inherit; }
.wm-hero { margin: 1rem 0; border-radius: var(--radius); }
.wm-home { margin: 0; border-radius: 0; align-self: end; }
.photo-credit { margin: .3rem 0 0; color: var(--muted); font-size: var(--font-small); line-height: 1.4; text-align: right; }
.wm img, .person img { -webkit-user-drag: none; user-drag: none; }
.wm-home .photo-credit { padding-right: .25rem; }

/* Header */
.site-header { background: var(--brand); color: #fff7e8; position: sticky; top: 0; z-index: 50; border-bottom: 3px solid var(--gold); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 0; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; text-decoration: none; font-size: var(--font-h4); }
.brand-flag { width: 2.75rem; height: 2.75rem; object-fit: contain; flex: 0 0 auto; }
.site-nav { width: 100%; order: 3; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav a { display: block; color: #fff; text-decoration: none; padding: .6rem .75rem; border-radius: 8px; border-bottom: 1px solid rgba(255,255,255,.2); }
.site-nav a:hover { background: rgba(255,255,255,.08); }
.member-nav-button { display: inline-block; padding: .5rem .6rem; color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
.member-nav-button[aria-current="page"] { text-decoration: underline; }
.site-nav .nav-action { display: block; background: transparent; color: #fff; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); padding: .6rem .25rem; font: inherit; cursor: pointer; }
.session-status { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem; color: #fff; font-size: var(--font-small); }
.session-status[hidden] { display: none; }
.session-countdown { margin: 0; }
.session-countdown time { font-variant-numeric: tabular-nums; font-weight: 700; }
.session-extend-form { margin: 0; }
.session-extend-button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; padding: .35rem .65rem; font: inherit; cursor: pointer; }
.session-extend-button:hover { background: rgba(255,255,255,.12); }
/* The current page is marked with a straight white underline, not a colour block.
   The radius is cleared so the rule stays a clean line instead of curving up
   into the rounded corners of the link box. */
.site-nav a[aria-current="page"] {
  color: #fff; font-weight: 700; text-decoration: none;
  background: none;
  border-radius: 0;
  box-shadow: inset 0 -3px 0 #fff;
  border-bottom-color: transparent;
}
.js .site-nav {
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height .28s ease, visibility .28s ease;
}
.js .site-nav.open { max-height: 70vh; overflow-y: auto; visibility: visible; }
.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7);
  border-radius: 8px; padding: .45rem .75rem; font: inherit; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.nav-toggle:hover { background: rgba(255,255,255,.1); }
.nav-toggle[aria-expanded="true"] { background: rgba(255,247,232,.14); border-color: rgba(255,247,232,.8); }
.js .nav-toggle { display: inline-flex; }
.nav-toggle-icon { position: relative; width: 1.1rem; height: 2px; background: currentColor; border-radius: 2px; transition: background .2s ease; }
.nav-toggle-icon::before, .nav-toggle-icon::after {
  content: ""; position: absolute; left: 0; width: 1.1rem; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }
/* Sign-in and language travel together, so they keep one edge on every width. */
.header-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem;
  margin-left: auto;
}
.lang-switch {
  display: inline-flex; align-items: center; gap: .15rem; padding: .2rem;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
}
.lang-switch button {
  background: transparent; color: #fff; border: 1px solid transparent; border-radius: 999px;
  padding: .32rem .7rem; font: inherit; line-height: 1.4; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lang-switch button:hover { background: rgba(255,255,255,.14); }
/* The current language is the inverse of the header: cream chip, plum word. */
.lang-switch button[aria-current="true"] {
  background: var(--header-ink); color: var(--brand-dark); border-color: var(--header-ink);
  font-weight: 700; cursor: default;
}
.lang-switch button[aria-current="true"]:hover { background: var(--header-ink); }

@media (min-width: 52rem) {
  /* Two clean tiers: the name on the left with sign-in and language on the
     right, then the section links on their own line so seven destinations
     never crowd the name. */
  .header-row { gap: .35rem .6rem; }
  .brand { order: 1; margin-right: auto; }
  .header-tools { order: 2; justify-content: flex-end; }
  .site-nav, .js .site-nav {
    display: block; order: 5; width: 100%;
    max-height: none; overflow: visible; visibility: visible; transition: none;
    margin-top: .3rem; padding-top: .15rem;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: .15rem; }
  .site-nav a { border: 0; padding: .45rem .55rem; }
  .site-nav a[aria-current="page"] {
    background: none;
    border-radius: 0;
    box-shadow: inset 0 -3px 0 #fff;
  }
  .site-nav .nav-action { border: 0; padding: .45rem .55rem; }
  .js .nav-toggle { display: none; }
}

/* Homepage vilakku */
.home-vilakku {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 30%);
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid #ead8b1;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 78% 45%, #fff8e4 0, #f8edda 52%, #f2e3ca 100%);
}
.home-vilakku-copy { padding: clamp(1.25rem, 4vw, 3rem); }
.home-vilakku-copy h1 { margin: 0 0 .65rem; color: var(--brand-dark); font-size: var(--font-h1); }
.home-vilakku-copy p { margin: 0; color: var(--muted); font-size: var(--font-lead); }
.home-vilakku img { width: 100%; max-height: 340px; object-fit: contain; align-self: end; }

/* Cards */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 1rem 0; }
.committee-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.card {
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; box-shadow: 0 1px 2px rgba(48, 35, 45, .05);
}
.card img { border-radius: 8px; margin-bottom: .5rem; width: 100%; }
.card h3 { margin: .25rem 0; }
.person h3 { overflow-wrap: anywhere; }
.office-bearer-name { overflow-wrap: break-word; font-size: var(--font-body); }
.card .icon { font-size: 1.8rem; margin: 0; }
.person img { aspect-ratio: 1; object-fit: cover; }
.person-role { margin: .1rem 0 .5rem; color: var(--brand); font-weight: 600; }

/* Event cards */
.event-card { display: flex; flex-direction: column; }
.event-card h3 { margin: .25rem 0 .35rem; }
.event-card h3 a { text-decoration: none; }
.event-card .meta { margin: .15rem 0 .75rem; }
.event-card .btn { align-self: flex-start; margin-top: auto; }
/* One photo height across the row, so the cards read as a set. */
.event-card .wm { margin-bottom: .6rem; }
.event-card .wm img { aspect-ratio: 16 / 10; object-fit: cover; }
.photo-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.photo-grid figcaption { font-size: var(--font-small); color: var(--muted); }

/* Matrimony directory */
.matrimony-hero { padding: clamp(2rem, 6vw, 4.5rem) 0; color: var(--ink); background: var(--soft); border-top: 1px solid var(--line); border-bottom: 4px solid var(--gold); }
.matrimony-hero h1 { margin: .25rem 0; font-size: var(--font-h1); }
.profile-featured { font-size: var(--font-small); font-weight: 700; text-transform: uppercase; }
.matrimony-content { padding-top: 1.5rem; }
.profile-search { padding: 1rem 1.25rem; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); }
.profile-search h2 { margin-top: .25rem; }
.profile-search-grid { display: grid; gap: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.profile-search-grid .field { margin: 0; }
.profile-search-grid input, .profile-search-grid select { width: 100%; padding: .55rem; font: inherit; border: 1px solid #bcae9c; border-radius: 6px; background: #fffdf9; color: var(--ink); }
.profile-search-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.profile-results-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: 2rem; }
.profile-results-heading h2 { margin-bottom: 0; }
.profile-card { display: flex; flex-direction: column; }
.profile-cards .profile-card { background: var(--soft); }
.profile-card-top, .profile-detail-header { display: flex; align-items: center; gap: .85rem; }
.profile-avatar { display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); font-size: 1.4rem; font-weight: 700; }
.profile-avatar-large { width: 5rem; height: 5rem; font-size: 2rem; }
.profile-photo { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.profile-photo-large { width: 5rem; height: 5rem; }
.profile-number { margin: 0; color: var(--muted); font-size: var(--font-small); }
.profile-featured { margin: 0; color: var(--brand); }
.profile-card h3 { margin: .15rem 0; }
.profile-summary { color: var(--muted); margin: .65rem 0; }
.profile-facts, .profile-detail-facts { margin: .5rem 0 1rem; }
.profile-facts div, .profile-detail-facts div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.profile-facts dt, .profile-detail-facts dt { color: var(--muted); }
.profile-facts dd, .profile-detail-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.profile-card > .btn { align-self: flex-start; margin-top: auto; }
.profile-detail { max-width: 780px; margin: 1.5rem auto; padding: clamp(1.25rem, 4vw, 2.5rem); }
.profile-detail h1 { margin: .2rem 0; }
.profile-detail-facts { margin-top: 1.5rem; }
.profile-contact { margin-top: 1.5rem; }
.profile-about { margin-top: 1.5rem; }
.profile-privacy-note { margin-top: 1.5rem; padding: .8rem 1rem; border-left: 4px solid var(--brand); background: var(--soft); }
.contact-preferred { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fffdf9; color: var(--brand); border: 1px solid var(--brand); font-size: var(--font-small); font-weight: 700; white-space: nowrap; }
.profile-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 2rem 0; }

/* Buttons, forms */
/* One button colour across the site: brand plum with cream text, darkening on
   hover. Gold stays on the workbench. */
.btn {
  display: inline-block; background: var(--brand); color: var(--header-ink);
  padding: .6rem 1.1rem; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--brand); font: inherit; font-weight: 700; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--header-ink); }
.btn:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; }
.form .field { margin-bottom: 1rem; }
.form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.form input, .form textarea { width: 100%; padding: .6rem; font: inherit; border: 1px solid #bcae9c; border-radius: 6px; background: #fffdf9; color: var(--ink); }
.form .checkbox-field label { display: flex; align-items: flex-start; gap: .4rem; }
/* The sentence is one flex item of its own: without the wrapper, the text
   before the policy link and the link itself become separate items and the
   line breaks mid-sentence. */
.form .checkbox-field .checkbox-text { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.form .checkbox-field input { width: auto; margin-top: .35rem; }
.password-control { display: flex; align-items: stretch; gap: .5rem; }
.password-control input { min-width: 0; flex: 1; }
.password-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 44px; min-height: 44px; padding: .4rem .6rem; border: 1px solid #bcae9c; border-radius: 6px; background: #fffdf9; color: var(--brand-dark); font: inherit; cursor: pointer; }
.password-toggle:hover { background: var(--soft); }
.password-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.password-toggle .pw-icon-hide, .password-toggle[aria-pressed="true"] .pw-icon-show { display: none; }
.password-toggle[aria-pressed="true"] .pw-icon-hide { display: inline-block; }
.caps-warning { margin: .35rem 0 0; padding: .4rem .65rem; border-left: 3px solid #b26a00; background: #fff4e0; color: #6b3d00; font-size: var(--font-small); font-weight: 600; }
.caps-warning[hidden] { display: none; }
.account-help { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.account-page { margin-top: 2rem; }
.member-details { display: grid; grid-template-columns: minmax(8rem, .4fr) minmax(0, 1fr); gap: .5rem 1rem; }
.member-details dd { margin: 0; overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.account-actions form { margin: 0; }
.field-help { color: var(--muted); font-size: var(--font-small); margin: .35rem 0; }
.field ul { margin: .35rem 0; padding-left: 1.2rem; }
.error { color: #b00020; }

/* Contact page */
.contact-layout h2 { margin-top: 0; }
/* The required marker sits tight against its label and a little larger than
   the text, so a compulsory field is obvious without reading the label twice. */
.req { color: #b00020; font-weight: 700; font-size: 1.1em; line-height: 1; margin-left: .12rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.form-errors {
  background: #fdecee; border: 1px solid #f3c2c8; border-left: 4px solid #b00020;
  border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1.25rem; color: #7a0116;
}
.form-errors p { margin: 0 0 .35rem; }
.form-errors ul { margin: 0; padding-left: 1.1rem; }
.form-errors a { color: #7a0116; }
.form .field.has-error input,
.form .field.has-error textarea { border-color: #b00020; background: #fffafa; }
.form input:focus,
.form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

.success-panel {
  background: #f2f8f2; border: 1px solid #cfe3cf; border-radius: 12px;
  padding: 1.4rem 1.6rem; margin-bottom: 1.5rem;
}
.success-panel h1 { margin-top: .25rem; }
.success-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; margin: 0; border-radius: 50%;
  background: #2e7d32; color: #fff; font-weight: 700;
}
.success-actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

.error ul { margin: .25rem 0; padding-left: 1.2rem; }
.notice { background: #e8f5e9; padding: .6rem 1rem; border-radius: 6px; }
.placeholder-block { padding: 1.5rem 1.25rem; margin: 1.5rem 0; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--soft); color: var(--muted); }
.placeholder-block p { margin: .3rem 0; }
.placeholder-block .placeholder-title { color: var(--ink); font-size: var(--font-h4); font-weight: 700; }
/* An empty-state note sits across the whole card grid instead of in one cell. */
.cards .placeholder-block { grid-column: 1 / -1; margin: .25rem 0; }
.hp { display: none !important; }

/* Breadcrumbs */
.breadcrumbs { margin-top: 1rem; }
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem; margin: 0; padding: 0; font-size: var(--font-small);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "›"; color: #b9a894; }
.breadcrumbs a { color: var(--brand); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Back to top */
.back-to-top-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; }
.back-to-top-wrap[hidden] { display: none; }
.back-to-top {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem; border-radius: 999px;
  background: var(--brand); color: #fff; border: 1px solid var(--gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
  font: inherit; font-weight: 600; cursor: pointer;
}
.back-to-top:hover { background: var(--brand-dark); }
/* The button is already brand-coloured, so its ring has to be the light one. */
.back-to-top:focus-visible { outline-color: var(--gold-light); }

@media (max-width: 36rem) {
  .back-to-top-wrap { right: .75rem; bottom: .75rem; }
  .back-to-top { min-height: 48px; padding-inline: .85rem; }
}

/* Error pages */
.error-page { padding-block: 1.5rem 2.5rem; }
.error-code {
  margin: 0; font-size: var(--font-display); font-weight: 700;
  line-height: 1; color: var(--brand);
}
.error-page h1 { margin-top: .35rem; }
.error-links {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem 1.15rem; margin: 1.25rem 0; padding: 0;
}

/* Footer */
/* The footer wears the same aubergine as the header, so the page opens and
   closes on one colour at every width. */
.site-footer { background: var(--brand); color: var(--header-ink); margin-top: 3rem; padding: 1.5rem 0; border-top: 3px solid var(--gold); }
.site-footer a { color: var(--header-ink); text-decoration-color: rgba(255,247,232,.45); text-underline-offset: 3px; }
.site-footer a:hover { text-decoration-color: var(--header-ink); }
.site-footer h2 { font-size: var(--font-h4); margin: 0 0 .5rem; }
.footer-grid {
  display: grid; gap: 1.5rem 2rem; align-items: start;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
}
.footer-grid section { min-width: 0; }
/* Long addresses, emails and links must wrap rather than widen the page on a phone. */
.footer-grid a, .footer-grid p, .footer-grid li { overflow-wrap: break-word; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li + li { margin-top: .35rem; }
.footer-site-name { margin: 0 0 .4rem; color: var(--header-ink); font-weight: 700; }

/* Two tidy columns on a phone: About spans the width, links and contact sit side by side. */
@media (max-width: 46rem) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-about { grid-column: 1 / -1; }
}
.copyright { margin-top: 1rem; font-size: var(--font-small); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

@media (max-width: 36rem) {
  .container { width: calc(100% - 1.25rem); }
  /* Two compact rows: the name beside the menu button, then sign-in and language. */
  .header-row { gap: .35rem .5rem; padding: .5rem 0; }
  .header-tools { flex: 1 0 100%; justify-content: space-between; margin-left: 0; }
  .brand { flex: 1 1 0; min-width: 0; font-size: var(--font-body); }
  .brand-flag { width: 2.4rem; height: 2.4rem; }
  .nav-toggle, .lang-switch button { min-height: 44px; }
  .session-status { width: 100%; }
  .session-extend-button { min-height: 44px; }
  .lang-switch button { min-width: 44px; }
  .site-nav a, .site-nav .nav-action { min-height: 44px; padding-block: .65rem; }
  .home-vilakku { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-vilakku-copy { padding: 1.25rem; }
  .home-vilakku img { max-height: 220px; }
  .cards, .photo-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-search { padding: .85rem; }
  .profile-search-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-search-grid input, .profile-search-grid select,
  .form input, .form textarea { font-size: 16px; }
  .profile-results-heading { align-items: flex-start; flex-direction: column; }
  .profile-results-heading p { margin: 0; }
  .profile-detail-header { align-items: flex-start; }
  .profile-pagination { flex-wrap: wrap; }
  .profile-card > .btn, .btn { min-height: 44px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem 1.25rem; }
  .footer-about { grid-column: 1 / -1; }
  .footer-grid { margin-bottom: 0; }
}