:root {
  --green: #1E3D2E;
  --cream: #F6F0E2;
  --ink: #111111;
  --white: #FFFFFF;
  --ochre: #C0872E;
  --ochre-text: #8F5F1C;
  /* Founder-authorized, bounded exception (26 Aug 2026): red for the
     urgent-opportunity badge/state only — not a general brand or alert
     palette. Do not reuse outside .urgent-badge. */
  --urgent-red: #8C1D17;
  --urgent-red-bg: rgba(140,29,23,.14);
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", "Segoe UI", Arial, sans-serif;
  --radius: 10px;
  --max: 72rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}
body.dialog-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .13em; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
button { font: inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 1000;
  padding: .75rem 1rem;
  background: var(--white);
  color: var(--green);
  border: 2px solid var(--green);
}
.skip-link:focus { top: 1rem; }

.container { width: min(100% - 2rem, var(--max)); margin-inline: auto; }
.site-header {
  border-bottom: 1px solid rgba(30,61,46,.18);
  background: rgba(246,240,226,.97);
  position: relative;
  z-index: 5;
}
.header-inner { min-height: 4.7rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem .65rem; row-gap: .4rem; padding: .5rem 0; }
.brand, .footer-brand { display: inline-flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
.brand img { width: 15.25rem; }
.footer-brand img { width: 15.5rem; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .2rem .7rem; min-width: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; font-weight: 600; }

.opening { padding: 2.15rem 0 1.2rem; }
.opening-grid { display: grid; gap: .7rem; align-items: center; }
.opening-copy { min-width: 0; }
.preview-label,
.section-kicker,
.provider {
  margin: 0 0 .55rem;
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--green);
}
.preview-label::after,
.section-kicker::after {
  content: "";
  display: block;
  width: 2.25rem;
  margin-top: .5rem;
  border-top: 2px solid var(--ochre);
}

h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--green); }
h1 { max-width: 19ch; margin: .45rem 0 0; font-size: clamp(1.45rem, 5.2vw, 2.35rem); line-height: 1.16; letter-spacing: -.018em; }
.hero-wordmark { display: block; margin-top: .7rem; }
.hero-wordmark img {
  display: block;
  width: clamp(15rem, 42vw, 19rem);
  height: auto;
  margin: 0;
}
.opening-copy h1 {
  display: block;
  max-width: 19ch;
  margin: .3rem 0 0;
  font-size: clamp(1.85rem, 7vw, 2.85rem);
  line-height: 1.12;
  text-wrap: balance;
}
.opening-copy .hero-tagline {
  max-width: none;
  margin-top: 1.75rem;
  font-size: clamp(1.3rem, 4.1vw, 1.75rem);
  font-style: italic;
  color: var(--green);
  white-space: normal;
}
.hero-close { margin-top: 1rem; font-size: 1.05rem; }
.hero-close .accent-word {
  color: var(--ochre-text);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2em;
  letter-spacing: .01em;
}
h2 { margin: 0; font-size: clamp(1.55rem, 5vw, 2.45rem); line-height: 1.18; }
h3 { margin: 0; color: var(--green); font-size: 1.08rem; line-height: 1.28; font-weight: 500; }

.intro-copy { max-width: 42rem; margin-top: 1rem; }
.intro-copy p { margin: .48rem 0; text-wrap: pretty; }
.hero-intro { margin-top: 0; }

.image-fade { position: relative; overflow: hidden; background: var(--cream); }
.image-fade picture { display:block; width:100%; height:100%; }
.image-fade img { width: 100%; height: 100%; object-fit: cover; }
.image-fade::before,
.image-fade::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.image-fade::before {
  inset: 0 auto 0 0;
  width: 9%;
  background: linear-gradient(90deg, var(--cream) 0%, rgba(246,240,226,.88) 28%, rgba(246,240,226,0) 100%);
}
.image-fade::after {
  inset: auto 0 0 0;
  height: 23%;
  background: linear-gradient(0deg, var(--cream) 0%, rgba(246,240,226,.7) 26%, rgba(246,240,226,0) 100%);
}
.hero-visual {
  margin: 0;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  height: 13rem;
  min-height: 0;
  border-radius: 0;
}
.hero-visual img { object-position: center 58%; }

.home-narrative {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.8rem 0 2rem;
  background: var(--cream);
  border-top: 1px solid rgba(30,61,46,.17);
  border-bottom: 1px solid rgba(30,61,46,.17);
}
.home-narrative::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("assets/environment/praca-why-aerial-sketch.jpg");
  background-repeat: no-repeat;
  background-position: 68% 22%;
  background-size: cover;
  opacity: .68;
  pointer-events: none;
}
.home-narrative::after {
  content: "";
  position: absolute;
  inset: -15% -10%;
  z-index: -1;
  background: radial-gradient(ellipse 62% 62% at 46% 50%, var(--cream) 0%, rgba(246,240,226,.92) 42%, rgba(246,240,226,.55) 66%, rgba(246,240,226,0) 100%);
  pointer-events: none;
}
.narrative-grid { display: grid; gap: 1.25rem; }
.narrative-title .line {
  display: block;
}
.narrative-title .line-nobreak {
  white-space: nowrap;
}
.narrative-copy { max-width: 48rem; }
.narrative-copy > p { margin: 0 0 .9rem; text-wrap: pretty; }
.emphasis-square { font-weight: 600; color: var(--green); }
.lang-forms { font-style: italic; font-weight: 600; color: var(--green); }
.narrative-copy strong { font-weight: 600; color: var(--green); }
.trust-support {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(30,61,46,.17);
}
.trust-support p { margin: .48rem 0; }

.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
  align-items: center;
  margin-top: 1.1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(30,61,46,.2);
  font-size: .86rem;
}
.page-nav span { color: var(--green); font-weight: 600; }
.page-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.home-page-nav {
  margin-top: 0;
  padding-top: .9rem;
  padding-bottom: .9rem;
  border-top: 0;
}
.submission-note {
  margin: 0 auto 1.2rem;
  padding: .65rem .9rem;
  border-left: 3px solid var(--ochre);
  background: rgba(192,135,46,.08);
  border-radius: 0 8px 8px 0;
  font-size: .9rem;
  line-height: 1.45;
}
.submission-note a { font-weight: 650; }

.shelf { padding: 2.25rem 0 2.8rem; border-top: 1px solid rgba(30,61,46,.17); }
.env-orientation { margin: 0; height: 12.5rem; }
.env-orientation picture, .env-orientation img { width: 100%; height: 100%; }
.env-orientation img { object-fit: cover; object-position: center 52%; }
/* Section focal points: each approved scene keeps its own subject band in the slim crop. */
.image-fade-things img { object-position: center 50%; }
.image-fade-trainings img { object-position: center 56%; }
.image-fade-help img { object-position: center 55%; }
.image-fade-kiosk img { object-position: center 60%; }
.section-heading { max-width: 46rem; margin-bottom: 1.2rem; }
.section-heading > p:last-child { margin: .6rem 0 0; }
.section-submission-note {
  max-width: none;
  margin-top: .6rem;
  color: var(--green);
  font-size: .86rem;
  font-style: italic;
  white-space: normal;
}
.section-submission-note a { font-style: normal; font-weight: 650; }

.resource-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.resource-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid rgba(30,61,46,.18);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 1px 0 rgba(30,61,46,.03);
}
.resource-card p { margin: .48rem 0 0; }
.card-media {
  margin: -1rem -1rem .9rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: rgba(30,61,46,.05);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media-poster { background: var(--white); }
.card-media-poster img { object-fit: contain; }
.dialog-media { margin: 0 0 1rem; border-radius: calc(var(--radius) - 4px); overflow: hidden; }
.dialog-media img { width: 100%; height: auto; display: block; }
.dialog-media-poster { background: var(--white); }
.dialog-media-poster img { object-fit: contain; }
/* Locale-matched media: both language variants are present in the shared
   EN source (pt/index.html is mechanically derived from it, so a single
   markup block is the only way to keep locale-specific images without a
   second content model); this shows only the variant matching the page's
   own <html lang>. */
img.lang-only-pt { display: none; }
html[lang="pt"] img.lang-only-en { display: none; }
html[lang="pt"] img.lang-only-pt { display: block; }
/* Urgent-opportunity treatment: a badge/deadline pairing for a card whose
   governed deadline is within 7 days while still current. Lives entirely
   inside the card markup, so it is removed automatically whenever the card
   itself is removed by the incumbent currentness workflow — no separate
   expiry mechanism. Uses --urgent-red, a founder-authorized bounded
   exception to the ochre-only palette (see :root) scoped to this badge only
   — it must outrank .spotlight-label and ordinary .action-tags span
   treatment at a glance, not just on close reading. */
/* Specificity note: this must be at least as specific as the later
   `.action-tags span` rule below (0,1,1) or that rule silently wins on the
   shared properties (border/color/background/etc.) and the badge renders as
   an ordinary tag — which is exactly what happened live. `.action-tags
   .urgent-badge` (0,2,0) guarantees this regardless of file order. */
.action-tags .urgent-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 38px;
  padding: .45rem .9rem;
  border: 2px solid var(--urgent-red);
  border-radius: 999px;
  color: var(--urgent-red);
  background: var(--urgent-red-bg);
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .5rem !important;
}
.urgent-badge-icon {
  font-size: 1.15em;
  line-height: 1;
}
/* The urgent badge's own paragraph wrapper (.action-tags) is shared with
   ordinary tag rows elsewhere, so its spacing to the following line is
   tightened only when it holds the urgent badge — the deadline/status line
   that follows is subordinate to the urgent badge, not an ordinary sibling
   tag row, so the two should read as one unit. */
.action-tags:has(.urgent-badge) {
  margin: 0 0 .4rem !important;
}
/* Spotlight badges (Local Spotlight / Learning Spotlight): comfortable
   separation before the title/content/status line that follows, matching
   the badge-to-content rhythm used across the site. */
.spotlight-label {
  margin: 0 0 .65rem !important;
}
.card-deadline {
  color: var(--ochre-text);
  font-weight: 700;
  font-size: .92rem;
  margin: .3rem 0 0 !important;
}
.card-status {
  margin: 0 0 .55rem !important;
  color: var(--green);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
}
.card-meta { font-size: .9rem; line-height: 1.4; }
.provider { margin: .75rem 0 0 !important; line-height: 1.35; }
.event-price { color: var(--ink); font-size: .9rem; font-weight: 700; }
.checked { color: var(--green); font-size: .76rem; line-height: 1.35; }
.action-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .65rem !important; }
.action-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .25rem .55rem;
  border: 1px solid rgba(30,61,46,.32);
  border-radius: 999px;
  color: var(--green);
  background: rgba(30,61,46,.035);
  font-size: .75rem;
  font-weight: 700;
}
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-top: auto; padding-top: .9rem; }
.details-button,
.resource-link,
.dialog-link,
.primary-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
}
.details-button {
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: .5rem .8rem;
  background: var(--white);
  color: var(--green);
  cursor: pointer;
}
.details-button:hover { background: rgba(30,61,46,.06); }
.resource-link { gap: .3rem; font-size: .88rem; }
.primary-cta {
  margin-top: 1rem;
  padding: .55rem .9rem;
  width: fit-content;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  text-decoration: none;
}
.primary-cta:hover { text-decoration: underline; }

.mindelo-home-grid { display: grid; gap: 1rem; }
.section-subline { color: var(--green); font-size: .85rem; }
.home-map-panel { min-width: 0; }
.home-map-preview {
  border: 1px solid rgba(30,61,46,.22);
  border-radius: var(--radius);
  background: rgba(255,255,255,.55);
  overflow: hidden;
  padding: .5rem;
}
.home-map-preview img { width: 100%; height: auto; display: block; border-radius: calc(var(--radius) - 4px); }
.map-caption { margin: .55rem 0 0; color: var(--green); font-size: .78rem; }

.details-dialog {
  width: min(92vw, 45rem);
  max-width: 45rem;
  max-height: min(88vh, 52rem);
  padding: 0;
  border: 1px solid rgba(30,61,46,.28);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1.4rem 4rem rgba(17,17,17,.24);
}
.details-dialog::backdrop { background: rgba(17,17,17,.52); backdrop-filter: blur(4px); }
.dialog-shell { position: relative; overflow: auto; max-height: min(88vh, 52rem); padding: 1.4rem; }
.dialog-close {
  position: sticky;
  float: right;
  top: 0;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin: -.55rem -.55rem .25rem .75rem;
  border: 1px solid rgba(30,61,46,.25);
  border-radius: 999px;
  background: var(--white);
  color: var(--green);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}
.dialog-record h2 { padding-right: 2.5rem; font-size: clamp(1.55rem, 5vw, 2.15rem); }
.dialog-record h3 { margin-top: 1.25rem; font-size: 1rem; font-weight: 700; }
.dialog-record p { margin: .5rem 0 0; }
.detail-list { display: grid; gap: .65rem; margin: 1rem 0; }
.detail-list div { padding-top: .65rem; border-top: 1px solid rgba(30,61,46,.14); }
.detail-list dt { color: var(--green); font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.detail-list dd { margin: .18rem 0 0; }
.dialog-link { justify-content: flex-start; margin-top: .8rem; }

.record-page { padding: 2.25rem 0 2.8rem; }
.breadcrumb { margin: 0 0 1.1rem; font-size: .86rem; }
.breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
.record-article { max-width: 42rem; }
.record-article .record-media { margin: 0 0 1.2rem; border-radius: var(--radius); overflow: hidden; }
.record-article .record-media img { width: 100%; height: auto; display: block; }
.record-article h1 { max-width: none; margin: 0; font-size: clamp(1.7rem, 4.5vw, 2.3rem); line-height: 1.2; text-wrap: pretty; }
.record-article h2 { margin-top: 1.25rem; font-size: 1rem; font-weight: 700; color: var(--green); }
.record-article .provider { margin: 0 0 .4rem !important; }
.record-article p { margin: .5rem 0 0; }
.record-article .detail-list { margin: 1rem 0; }

.about-section { padding: 2.6rem 0; border-top: 1px solid rgba(30,61,46,.17); }
.about-section-tinted { background: rgba(255,255,255,.4); }
.about-copy-block { max-width: 46rem; }
.about-copy-block h2 { margin: .3rem 0 1rem; }
.about-copy-block > p { margin: 0 0 .85rem; text-wrap: pretty; }
#about-title { font-size: clamp(1.9rem, 4.6vw, 2.65rem); line-height: 1.16; max-width: 18ch; text-wrap: balance; }
.about-lead { margin: .7rem 0 .9rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 3vw, 1.4rem); color: var(--green); text-wrap: pretty; }
.about-hero { padding: 2rem 0 2.6rem; }
.about-hero-grid { display: grid; gap: 1.5rem; align-items: center; }
.about-hero-copy { order: 2; }
.about-visual-anchor { order: 1; }
.about-hero-copy p:not(.about-lead) { margin: 0 0 .8rem; text-wrap: pretty; }
.about-grid-block { display: grid; gap: 1.6rem; align-items: center; }
.about-copy p { margin: 0 0 .85rem; text-wrap: pretty; }
.about-copy h2 { margin: .3rem 0 1rem; }
.lang-sequence { margin: 0 0 .85rem; }
.about-list { margin: 0 0 .85rem; padding-left: 1.2rem; }
.about-list li { margin: 0 0 .4rem; text-wrap: pretty; }
.about-mission { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(30,61,46,.17); }
.about-mission-statement { margin: 0; font-family: var(--serif); font-size: 1.1rem; line-height: 1.45; color: var(--green); text-wrap: pretty; }

.about-visual { margin: 0; }
.about-visual picture, .about-visual img { display: block; width: 100%; height: 100%; }
.about-visual img { object-fit: cover; }
.about-visual-portrait { aspect-ratio: 4 / 3; }

/* Hero bleeds full-width on mobile for a stronger, more confident presence; becomes a normal grid column at desktop */
.about-visual-anchor {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
.about-visual-hero { aspect-ratio: 1672 / 941; }

/* Closing banner (Take Part) always spans full width as a distinct visual moment before the accordion.
   It's already a direct child of <section>, outside .container, so plain 100% width reaches the edge
   without the vw-based bleed hack (which overflows by the scrollbar width on desktop). */
.about-visual-banner {
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: 1.8rem;
}

/* Soft watercolor edge-dissolve for the paired editorial illustrations (How It Works).
   Radial-gradient color-stop percentages are normalized to the ellipse's OWN radius, not
   the element box: with radii given as %-of-box-dimension, the box edge sits at a gradient
   position of (50 / radius%). Prior attempts used radii >=70%, putting the box edge at only
   ~69-71% through the gradient — short of the 100% transparent stop, leaving a visible edge.
   Radii here are kept under 50% so the box edge (50/45 = ~111%) falls past the transparent
   stop with real margin, guaranteeing full transparency at the actual visible perimeter. */
.about-visual-soft {
  -webkit-mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, #000 40%, rgba(0,0,0,.92) 55%, rgba(0,0,0,.45) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, #000 40%, rgba(0,0,0,.92) 55%, rgba(0,0,0,.45) 78%, transparent 100%);
}

/* Founder photograph (Rooted in Cabo Verde): native aspect ratio, no crop, no watercolor mask —
   a deliberate documentary contrast against the illustrated sections elsewhere on the page. */
.about-visual-photo { aspect-ratio: 1536 / 918; }

/* Feature background treatment reused from the Home "why it exists" pattern, for the conceptual "What is A PRASA?" section */
.about-section-feature { position: relative; isolation: isolate; overflow: hidden; padding: 2.8rem 0; }
.about-feature-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 22%;
  opacity: .55;
}
.about-section-feature::after {
  content: "";
  position: absolute;
  inset: -15% -10%;
  z-index: -1;
  background: radial-gradient(ellipse 62% 62% at 46% 50%, var(--cream) 0%, rgba(246,240,226,.92) 42%, rgba(246,240,226,.55) 66%, rgba(246,240,226,0) 100%);
  pointer-events: none;
}

.about-section-closing { padding-top: 0; }

.about-section-heading { max-width: 46rem; margin-bottom: 1.4rem; }
.about-section-heading > p:last-child { margin: .6rem 0 0; }
.about-find-grid { display: grid; gap: 1.5rem; }
.about-find-item { padding-top: 1.2rem; border-top: 1px solid rgba(30,61,46,.17); }
.about-find-item:first-child { border-top: 0; padding-top: 0; }
.about-find-kicker { margin: 0 0 .2rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre-text); }
.about-find-item h3 { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.about-find-item p { margin: 0 0 .6rem; text-wrap: pretty; }

.about-more { padding-bottom: 3rem; }
.about-accordion-item {
  margin-top: 1rem;
  border: 1px solid rgba(30,61,46,.22);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.about-accordion-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: .9rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
}
.about-accordion-item summary::-webkit-details-marker { display: none; }
.about-accordion-item summary h3 { margin: 0; font-size: 1.05rem; font-weight: 400; }
.about-accordion-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ochre-text);
}
.about-accordion-item[open] summary::after { content: "\2212"; }
.about-accordion-item summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
  border-radius: 4px;
}
.about-accordion-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid rgba(30,61,46,.14); }
.about-accordion-body p { margin: .8rem 0 0; text-wrap: pretty; }

.site-footer { background: var(--green); color: var(--cream); }
.footer-inner { padding: 1.8rem 0 2.2rem; }
.site-footer p { max-width: 42rem; margin: .65rem 0 0; }
.footer-note { font-size: .86rem; opacity: .92; }
.footer-contact { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(246,240,226,.25); }
.footer-contact-title { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1.05rem; }
.footer-contact p + p { margin-top: .3rem; }
.site-footer a { color: var(--cream); }
.back-top { display: inline-flex; min-height: 44px; align-items: center; margin-top: .7rem; }

@media (max-width: 24rem) {
  .site-nav { gap: .15rem .5rem; }
  .site-nav a { font-size: .8rem; }
}

@media (min-width: 44rem) {
  .container { width: min(100% - 3rem, var(--max)); }
  .brand img { width: 18rem; }
  .footer-brand img { width: 18.25rem; }
  .opening.container { width: 100%; max-width: none; margin-inline: 0; }
  .opening { padding: 2.8rem 0 1.4rem; }
  .opening-grid {
    grid-template-columns: minmax(0,26rem) 1fr;
    grid-template-rows: auto auto;
    gap: 1rem 1.6rem;
    align-items: start;
    padding-left: max(1.5rem, calc((100vw - var(--max)) / 2));
  }
  .opening-copy { grid-column: 1; grid-row: 1; align-self: end; }
  .hero-visual { grid-column: 2; grid-row: 1 / span 2; align-self: center; height: 22rem; margin-inline: 0; width: auto; border-radius: 0; }
  .hero-intro { grid-column: 1; grid-row: 2; align-self: start; max-width: none; padding-right: 1.5rem; }
  .image-fade-hero::before,
  .image-fade-hero::after { display: none; }
  .hero-visual img {
    object-position: center 56%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
  }
  .narrative-grid { grid-template-columns: minmax(0,.62fr) minmax(0,1.38fr); gap: 2rem; align-items: stretch; }
  .env-orientation { height: 21rem; }
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mindelo-home-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; }
  .detail-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about-hero-grid { grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); gap: 2.5rem; }
  .about-visual-anchor {
    margin: 0;
    width: auto;
    /* Image sits in the left column at this breakpoint (order: 1) with copy to its right:
       a restrained feather on the outer left edge, fully opaque center, and a broader
       dissolve on the inner right edge toward the copy column. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 88%, transparent 100%);
  }
  .about-grid-block { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 2.6rem; }
  .about-grid-block-text-right { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .about-grid-block-text-right .about-copy { order: 1; }
  .about-grid-block-text-right .about-visual { order: 2; }
  .about-find-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.8rem; }
  .about-find-item { border-top: 0; padding-top: 0; }
  .about-visual-banner { aspect-ratio: 2 / 1; }
}

@media (min-width: 64rem) {
  .brand img { width: 20rem; }
  .footer-brand img { width: 20.25rem; }
  .opening { padding-bottom: 1rem; }
  .opening-grid { grid-template-columns: minmax(0,36rem) 1fr; gap: 1rem 2rem; }
  .hero-visual { height:30rem; }
  .home-narrative { padding-top: 1.4rem; }
  .things-grid, .help-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .shelf { padding: 2.45rem 0 3.1rem; }
  .env-orientation { height: 25rem; }
}

@media (max-width: 43.99rem) {
  .home-narrative::before { opacity: .4; background-position: 58% 15%; }
  .home-narrative::after {
    background: radial-gradient(ellipse 75% 78% at 50% 42%, var(--cream) 0%, rgba(246,240,226,.96) 45%, rgba(246,240,226,.7) 68%, rgba(246,240,226,.15) 100%);
  }
}

@media (max-width: 43.99rem) and (max-height: 30rem) and (orientation: landscape) {
  .opening { padding: 1.1rem 0 .5rem; }
  .hero-visual { height: 9.5rem; }
  .home-narrative { padding: .9rem 0 1.1rem; }
}

@media (min-width: 44rem) and (max-width: 63.99rem) and (max-height: 32rem) and (orientation: landscape) {
  .hero-visual { height: auto; align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}