/* The Portugal Civics Issue — site styles
   Palette: warm ivory, deep bottle-green, refined gold, ink text. */

:root {
  /* Locked brand system (per repo CLAUDE.md) */
  --ivory:      #F5F0E1;   /* cream background (locked) */
  --ivory-2:    #ECE4D1;   /* deeper cream for alt sections */
  --paper:      #FFFDF8;
  --green:      #6B1820;   /* wine red — brand dark (locked; var name kept) */
  --green-2:    #862028;   /* lighter wine for gradients */
  --green-soft: #F1E6D8;   /* soft warm tint */
  --gold:       #C9A14A;   /* brand gold accent (locked) */
  --gold-2:     #D8B466;   /* lighter gold */
  --ink:        #2A2520;   /* ink text (locked) */
  --muted:      #6E655A;
  --line:       #E5DAC4;
  --shadow:     0 18px 50px rgba(108, 25, 33, 0.12);
  --shadow-sm:  0 6px 20px rgba(108, 25, 33, 0.09);
  --radius:     16px;
  --radius-sm:  10px;
  --maxw:       1120px;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:  "Lora", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--green);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
/* URLs/paths in the legal pages sit in <code>, which defaults to the browser's
   monospace (bigger and out of place). Blend them into the surrounding body text. */
code { font-family: inherit; font-size: inherit; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-gold {
  background: var(--gold);
  color: #4a2f11;
  box-shadow: 0 8px 22px rgba(201, 161, 74, 0.32);
}
.btn-gold:hover { background: #fff; color: var(--green); border-color: var(--gold); box-shadow: 0 10px 26px rgba(201, 161, 74, 0.4); }

.btn-green {
  background: var(--green);
  color: var(--ivory);
}
.btn-green:hover { background: var(--green-2); }

.btn-ghost {
  background: transparent;
  color: var(--green);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-light {
  background: var(--ivory);
  color: var(--green);
}
.btn-light:hover { background: #fff; }

/* ---------- Announcement bar ---------- */
.announce { background: var(--green); color: rgba(245,240,225,0.92); }
.announce-inner { padding: 10px 0; text-align: center; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.4; }
.announce a { color: var(--gold-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.announce a:hover { color: #fff; }
@media (max-width: 560px) { .announce-inner { font-size: 0.82rem; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 236, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--green);
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.brand .mark {
  width: 38px; height: 38px;
  flex: none;
}
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav a.navlink {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.82;
  transition: opacity .15s ease, color .15s ease;
}
.nav a.navlink:hover { opacity: 1; color: var(--gold); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta-btns { display: flex; gap: 12px; }
.header-cta-btns .btn-desktop { min-width: 164px; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  color: var(--green);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 72px;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(185,138,46,0.10), transparent 60%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory) 60%, var(--ivory-2) 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.1rem);
  margin: 18px 0 0;
}
.hero h1 .accent { color: var(--gold); font-style: italic; }
.hero .lede {
  font-size: 1.18rem;
  color: var(--muted);
  margin: 22px 0 0;
  max-width: 34ch;
}
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-actions .btn { min-width: 216px; }
.hero-trust {
  display: flex;
  gap: 26px;
  margin-top: 38px;
  flex-wrap: wrap;
}
.hero-trust .item { max-width: 170px; }
.hero-trust .num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--green);
  font-weight: 600;
}
.hero-trust .lbl { font-size: 0.86rem; color: var(--muted); }

/* Hero card / passport-like panel */
.hero-card {
  background: var(--green);
  border-radius: 22px;
  padding: 34px 32px;
  color: var(--ivory);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 240px at 110% -20%, rgba(201,162,75,0.28), transparent 55%);
  pointer-events: none;
}
.hero-card .stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-2);
  border: 1px solid rgba(201,162,75,0.4);
  border-radius: 999px;
  padding: 6px 12px;
}
.hero-card h3 {
  color: var(--ivory);
  font-size: 1.5rem;
  margin: 18px 0 6px;
}
.hero-card p { color: rgba(250,246,236,0.78); font-size: 0.98rem; margin: 0 0 22px; }
.progress-row { margin-top: 16px; }
.progress-row .plabel {
  display: flex; justify-content: space-between;
  font-size: 0.85rem; margin-bottom: 7px;
  color: rgba(250,246,236,0.9);
}
.progress-track {
  height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.14);
  overflow: hidden;
}
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

/* ---------- Section scaffolding ---------- */
.section { padding: 84px 0; }
.section.alt { background: var(--ivory-2); }
.section-divider { position: relative; border-top: 1px solid var(--line); }
.section-divider::before {
  content: "";
  position: absolute;
  top: -2px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 4px; border-radius: 999px;
  background: var(--gold);
}
.section.green {
  background: var(--green);
}
.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
}
.section-head p { color: var(--muted); font-size: 1.1rem; margin-top: 16px; }
.section.green .section-head h2 { color: var(--ivory); }
.section.green .section-head p { color: rgba(250,246,236,0.78); }
.section.green .eyebrow { color: var(--gold-2); }

/* ---------- Five themes ---------- */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.theme-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.theme-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--gold);
}
.theme-card .tnum {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.theme-icon {
  width: 46px; height: 46px;
  color: var(--green);
  margin: 6px 0 16px;
}
.theme-card h3 { font-size: 1.28rem; margin-bottom: 8px; }
.theme-card p { color: var(--muted); font-size: 0.96rem; margin: 0; }

/* ---------- Feature rows / value ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,162,75,0.22);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.value-card .vicon {
  width: 40px; height: 40px; color: var(--gold-2); margin-bottom: 16px;
}
.value-card h3 { color: var(--ivory); font-size: 1.24rem; margin-bottom: 10px; }
.value-card p { color: rgba(250,246,236,0.74); font-size: 0.98rem; margin: 0; }

/* ---------- Sources strip ---------- */
.sources {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  align-items: center; justify-content: center;
  margin-top: 34px;
}
.sources .src {
  font-family: var(--font-serif);
  color: rgba(250,246,236,0.9);
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(201,162,75,0.4);
  padding-bottom: 4px;
  transition: color .15s ease, border-color .15s ease;
}
a.src:hover { color: var(--gold-2); border-color: var(--gold-2); }

/* ---------- Newsletter ---------- */
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.issue-list { display: flex; flex-direction: column; gap: 14px; }
.issue {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  transition: border-color .2s ease, transform .15s ease;
}
.issue:hover { border-color: var(--gold); transform: translateX(3px); }
.issue .inum {
  font-family: var(--font-serif);
  color: var(--gold);
  font-weight: 600;
  font-size: 1.1rem;
  flex: none;
}
.issue .imeta { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.issue h4 { margin: 4px 0 0; font-family: var(--font-serif); color: var(--green); font-size: 1.08rem; font-weight: 600; }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.about-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.about-copy p { margin: 16px 0 26px; font-size: 1.08rem; }
.about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.about-list li {
  position: relative;
  padding-left: 38px;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.5;
}
.about-copy p.signature {
  margin-top: 24px;
  padding-left: 25px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--gold);
  line-height: 1.35;
}
.signature span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--green);
}
.about-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--green-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C1921' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Azulejo-style divider between the signature and the commitments list.
   Only needed on mobile, where the two columns stack; hidden on desktop. */
.about-divider { display: none; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 22px; }
  .about-copy p.signature { margin-bottom: 0; }   /* balance the divider's spacing */
  .about-divider { display: block; text-align: center; line-height: 0; margin: 2px auto; }
  .about-divider svg { width: 100%; max-width: 300px; height: auto; }
}
/* Center the Contact button on phones (WO-12 8.4) */
@media (max-width: 600px) {
  .about-copy .btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
}

/* ---------- Newsletter carousel ---------- */
.news-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.news-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.news-head p { margin-top: 14px; max-width: 60ch; font-size: 1.06rem; }
.news-head .btn { flex: none; }

.carousel-wrap { position: relative; }
.carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-track { background: transparent; }
.carousel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.slide {
  scroll-snap-align: start;
  flex: 0 0 300px;
  max-width: 300px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.slide:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
.slide .thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ivory-2);
  display: block;
}
.slide .s-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.slide .s-date { font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.slide h4 {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.28;
  color: var(--green);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slide .s-read { margin-top: auto; font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600; color: var(--gold); padding-top: 4px; }

.caro-btn {
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--green);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.caro-btn:hover { border-color: var(--gold); color: var(--gold); }
.caro-btn.prev { left: -14px; }
.caro-btn.next { right: -14px; }
.caro-hint { text-align: center; font-size: 0.9rem; margin-top: 12px; }
.caro-foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.caro-foot .caro-hint { margin: 0; }
.caro-toggle {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
  color: var(--green); background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.caro-toggle:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 720px) {
  .caro-btn { display: none; }
  .news-head .btn { width: 100%; }
}
/* Phones: narrow the issue cards so the next one peeks in at the right edge — the
   clearest cue that the carousel is swipeable (arrows are hidden here and touch
   browsers hide the scrollbar). All issues stay reachable by swiping. */
@media (max-width: 560px) {
  .slide { flex: 0 0 84%; max-width: 84%; }
}

/* ---------- The TNIC explainer ---------- */
section[id] { scroll-margin-top: 84px; }

.lastupdated {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--muted);
  margin-top: 14px;
}
.tnic-takeaway {
  background: var(--green);
  color: var(--ivory);
  border-left: 5px solid var(--gold);
  border-radius: 16px;
  padding: 30px 34px;
  box-shadow: var(--shadow);
  margin-bottom: 30px;
}
.tnic-takeaway h3 {
  color: var(--gold-2);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.78rem;
  margin-bottom: 12px;
}
.tnic-takeaway p { color: rgba(250,246,236,0.94); font-size: 1.28rem; line-height: 1.6; margin: 0; }
@media (max-width: 560px) { .tnic-takeaway p { font-size: 1.14rem; } }
.tnic-takeaway strong { color: #fff; }

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 40px;
}
.toc-label {
  font-family: var(--font-sans);
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 600;
  margin-right: 4px;
}
.toc a {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--green);
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--ivory-2);
  border: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  white-space: nowrap;
}
.toc a:hover { border-color: var(--gold); color: var(--gold); background: var(--paper); }

@media (max-width: 600px) {
  /* Mobile only: put the "Jump to" label on its own line above the pills.
     On phones it was sharing the first row with "What the TNIC is", offsetting
     that pill; every other pill already stacks one per row. Desktop unchanged. */
  .toc-label { flex-basis: 100%; text-align: center; margin-right: 0; margin-bottom: 2px; }
}

.tnic-fulllink-row { text-align: center; margin: 8px 0 40px; }
.tnic-fulllink {
  display: inline-block;
  max-width: 660px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.4;
  color: var(--green);
  padding: 16px 32px;
  border: 2px solid var(--gold);
  border-radius: 14px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tnic-fulllink:hover { background: var(--gold); color: #4a2f11; box-shadow: 0 10px 26px rgba(201, 161, 74, 0.35); }

.flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.flip-card { perspective: 1400px; min-height: 252px; cursor: pointer; scroll-margin-top: 96px; outline: none; }
.flip-inner {
  position: relative; width: 100%; height: 100%; min-height: 252px;
  transition: transform .6s cubic-bezier(.2,.75,.2,1);
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 16px; padding: 26px 24px;
  display: flex; flex-direction: column;
}
.flip-front {
  background: var(--paper); border: 1px solid var(--line);
  justify-content: center; align-items: center; text-align: center; gap: 16px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
.flip-card:hover .flip-front { border-color: var(--gold); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.flip-card:focus-visible .flip-front { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.flip-front .flip-tag { display: none; }
.flip-front h3 { font-size: 1.34rem; color: var(--green); margin: 0; line-height: 1.16; }
.flip-front .flip-hint { font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.flip-back {
  background: var(--green); border: 1px solid var(--green);
  transform: rotateY(180deg); color: var(--ivory);
  overflow-x: hidden; overflow-y: auto; justify-content: flex-start; gap: 12px;
}
.flip-back p { font-family: var(--font-body); font-size: 0.96rem; line-height: 1.5; color: rgba(250,246,236,0.94); margin: 0; }
.flip-back strong { color: #fff; }
.flip-back em { color: var(--gold-2); font-style: italic; }

/* Mobile/tablet scroll cue: the card back scrolls, but touch browsers hide the
   scrollbar that desktop shows, so long text read as "cut off". Fade the bottom
   edge to signal there's more below. JS adds .has-more when the back overflows
   and removes it once scrolled to the bottom, so the last line is never covered.
   Desktop (>900px, the 3-column view with its own scrollbar) is untouched. */
@media (max-width: 900px) {
  .flip-back::after {
    content: "";
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    height: 60px;
    margin: 0 -24px -26px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C9A14A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center 64% / 20px 20px,
      linear-gradient(rgba(107, 24, 32, 0), #6B1820 72%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .flip-back.has-more::after { opacity: 1; }
}
.flip-link { font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; color: var(--gold-2); align-self: flex-start; }
.flip-link:hover { color: #fff; }
.pending-link {
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-2); border: 1px solid var(--gold); border-radius: 999px;
  padding: 5px 12px; align-self: flex-start;
}
/* Prominent "coming soon" call-to-action (e.g. the official TNIC sign-up button) */
.pending-link.pending-cta {
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
  border: 1.5px solid var(--gold); border-radius: 12px;
  padding: 13px 22px; margin-top: 18px; line-height: 1.4; text-align: center;
  align-self: stretch;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pending-link.pending-cta:hover {
  background: var(--ivory); color: var(--green); border-color: var(--ivory);
}
/* "Get notified" gold button inside the sign-up card back — full width like a CTA */
.flip-back .btn { align-self: stretch; margin-top: 4px; white-space: normal; line-height: 1.25; font-size: 0.86rem; padding: 11px 16px; }

/* Sign-up CTA that flips on tap to explain the official exam/sign-up is the
   Portuguese government's to open (coming soon), not something TPCI withholds. */
.cta-flip {
  margin-top: 14px; align-self: stretch;
  perspective: 1000px;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.cta-flip-inner {
  display: grid;                 /* both faces share one cell → box auto-sizes to the taller one */
  grid-template-columns: minmax(0, 1fr);  /* keep faces within the card so long text wraps, not overflows */
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.75,.2,1);
}
.cta-flip.flipped .cta-flip-inner { transform: rotateY(180deg); }
.cta-face {
  grid-area: 1 / 1;
  min-width: 0; overflow-wrap: break-word;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px solid var(--gold); border-radius: 12px; padding: 12px 16px;
  font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600; line-height: 1.35;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cta-front { color: var(--gold-2); }
.cta-back { transform: rotateY(180deg); color: var(--ivory); font-weight: 500; }
.cta-back strong { color: #fff; }
.cta-back em { color: var(--gold-2); font-style: italic; }
.cta-flip:hover .cta-front { background: var(--ivory); color: var(--green); border-color: var(--ivory); }
.cta-flip:focus-visible { outline: none; }
.cta-flip:focus-visible .cta-face { border-color: var(--ivory); }

.pending-card .flip-front .flip-hint { color: var(--gold); }
/* Center a lone last card in the 3-column layout */
@media (min-width: 901px) {
  .flip-grid > .flip-card:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 40px) / 3);
  }
}
@media (max-width: 900px) { .flip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .flip-grid { grid-template-columns: 1fr; } .flip-card, .flip-inner { min-height: 264px; } }

.tnic-pending {
  margin-top: 30px;
  background: var(--green-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px;
}
.tnic-pending-label {
  font-family: var(--font-sans);
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 16px;
}
.tnic-pending-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pending-item { display: block; font-size: 0.98rem; color: var(--muted); line-height: 1.5; }
.pending-item strong { display: block; font-family: var(--font-serif); font-size: 1.12rem; color: var(--green); margin-bottom: 6px; }
@media (max-width: 640px) { .tnic-pending-row { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%);
  border-radius: 26px;
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cta-band::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 260px at 50% -30%, rgba(201,162,75,0.25), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--ivory); font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.cta-band p { color: rgba(250,246,236,0.82); font-size: 1.12rem; margin: 16px auto 30px; max-width: 46ch; }
.cta-band .btn-gold { box-shadow: 0 10px 30px rgba(0,0,0,0.25); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green);
  color: rgba(250,246,236,0.7);
  padding: 60px 0 34px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-grid .brand { color: var(--ivory); margin-bottom: 14px; }
.footer-col h5 {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
  color: var(--gold-2);
  margin: 0 0 16px;
}
.footer-col a { display: block; margin-bottom: 10px; font-size: 0.94rem; color: rgba(250,246,236,0.72); }
.footer-col a:hover { color: var(--gold-2); }
.footer-about { max-width: 30ch; font-size: 0.94rem; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; font-size: 0.85rem; color: rgba(250,246,236,0.55);
}

/* ---------- Mobile nav drawer ---------- */
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 24px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
}
.mobile-nav a {
  padding: 12px 4px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin-top: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero .lede { max-width: none; }
  .themes-grid, .value-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .nav { display: none; }
  .header-cta .btn-desktop { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .section { padding: 60px 0; }
  .hero { padding: 44px 0 48px; }
  .themes-grid, .value-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; }
  .hero-actions .btn { width: 100%; min-width: 0; }
  .header-inner { min-height: 62px; gap: 12px; }
  .brand { font-size: 0.95rem; gap: 9px; }
  .brand .mark { width: 32px; height: 32px; }
}

/* ---------- Cookie consent banner (analytics only; non-blocking) ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(108, 25, 33, 0.10);
  transform: translateY(100%); transition: transform .28s ease;
  padding: 16px 0;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cookie-copy { flex: 1 1 420px; }
.cookie-title { font-family: var(--font-sans); font-weight: 700; color: var(--green); margin: 0 0 4px; font-size: 1rem; }
.cookie-copy p { margin: 0 0 4px; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.cookie-more { color: var(--muted); }
.cookie-more a { color: var(--green); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 12px; flex: 0 0 auto; }
/* Accept and decline share one identical style — equal visual weight, no nudge. */
.cookie-btn {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem;
  padding: 11px 26px; border-radius: 999px; cursor: pointer;
  background: var(--paper); color: var(--green); border: 1.5px solid var(--gold);
  transition: background-color .2s ease, color .2s ease;
}
.cookie-btn:hover { background: var(--gold); color: #4a2f11; }
.cookie-choices-link {
  display: inline-block; margin-left: 14px;
  font-family: var(--font-sans); font-size: 0.85rem; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line); cursor: pointer;
}
.cookie-choices-link:hover { color: var(--gold); }
@media (max-width: 640px) {
  .cookie-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}