
/* ==================================================================
   THE IRISH CHAMBER NETWORK — tokens.
   --icn-* to sit alongside KICCI's --kc-* set without collision.
   ================================================================== */
:root{
  --icn-emerald:#006B3F;
  --icn-cream:#F8F6F2;

  --icn-ink:#12231B;
  --icn-muted:#5E6E65;
  --icn-rule:rgba(0,107,63,.20);
  --icn-rule-soft:rgba(0,107,63,.10);

  /* the four states of aliveness, one ink system, used by the map
     markers and by the wall of names alike */
  --ink-a:rgba(248,246,242,1);
  --ink-q:rgba(248,246,242,.62);
  --ink-d:rgba(248,246,242,.36);
  --ink-x:rgba(248,246,242,.30);
  --ink-off:rgba(248,246,242,.13);
  --icn-cream-muted:rgba(248,246,242,.66);
  --icn-cream-rule:rgba(248,246,242,.22);

  --icn-serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --icn-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:96px;

  --gutter:clamp(20px,4.4vw,64px);
  --shell:1440px;
  --doc-gutter:clamp(20px,5vw,80px);
  --doc-shell:1240px;
  --strand-x:calc(max(0px,(100% - var(--doc-shell))/2) + var(--doc-gutter));
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition-duration:.01ms !important; animation:none !important;} }

body{
  margin:0;
  background:var(--icn-cream);
  color:var(--icn-ink);
  font-family:var(--icn-serif);
  font-size:clamp(1.0625rem,.4vw + 1rem,1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--icn-emerald); color:var(--icn-cream);}
a{color:inherit;}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.label{font-family:var(--icn-sans); font-size:.6875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--icn-muted); margin:0;}

/* ==================================================================
   1 — THE FIELD.
   The whole first screen. Not a figure, not a section: the ground the
   page happens on. Emerald, edge to edge, no border, no caption box.
   Everything the visitor needs sits on it.
   ================================================================== */
.field{
  position:relative;
  min-height:100vh; min-height:100svh;
  background:var(--icn-emerald);
  color:var(--icn-cream);
  display:flex; flex-direction:column;
  padding:clamp(18px,2.6vh,32px) 0 clamp(18px,2.6vh,30px);
  overflow:hidden;
}
.field-in{width:100%; display:flex; flex-direction:column; flex:1; min-height:0;}
/* the type sits in the column; the map does not. It is the ground, so it
   runs to the edges of the screen. */
.band{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter);}

/* ---------- top band: who this is, and which reading you are in ---------- */
.f-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-3) var(--s-5); flex-wrap:wrap;
  padding-bottom:clamp(var(--s-2),2.4vh,var(--s-4));
}
.f-id{display:flex; align-items:flex-start; gap:clamp(12px,1.4vw,20px); min-width:0;}
.mark{display:block; width:clamp(30px,3vw,42px); height:auto; color:var(--icn-cream); flex:none; margin-top:.1em;}
.f-id h1{
  font-family:var(--icn-serif); font-weight:400;
  font-size:clamp(.75rem,.3vw + .68rem,.9375rem);
  letter-spacing:.24em; text-transform:uppercase;
  margin:0 0 .55em; text-indent:.06em; line-height:1.3;
}
.f-id .what{
  margin:0; max-width:34ch;
  font-size:clamp(.9375rem,.55vw + .8rem,1.125rem); line-height:1.42;
  color:var(--icn-cream);
}
.f-meta{margin-left:auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.7em;}

/* the two readings of one register. Two words, a hairline between. */
.reads{display:inline-flex; align-items:stretch; border-bottom:1px solid var(--icn-cream-rule);}
.reads button{
  font-family:var(--icn-sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  background:none; border:0; color:var(--icn-cream-muted);
  padding:.35em .95em .6em; cursor:pointer; line-height:1;
}
.reads button + button{border-left:1px solid var(--icn-cream-rule);}
.reads button[aria-pressed="true"]{color:var(--icn-cream); box-shadow:inset 0 -2px 0 var(--icn-cream);}
.reads button:focus-visible{outline:2px solid var(--icn-cream); outline-offset:2px;}
.f-count{
  font-family:var(--icn-sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--icn-cream-muted);
  margin:0; font-variant-numeric:tabular-nums;
}

/* ---------- the stage: whichever reading is open, at full size ---------- */
.stage{position:relative; flex:1 1 auto; min-height:min(58vh,340px);}
/* mobile gets more room: the map now fills its frame (slice, not
   letterboxed meet — see the atlas rule and the zoom module), so the
   frame is worth making generous instead of keeping it small against
   a shrunken map that no longer exists. */
@media (max-width:760px){ .stage{min-height:min(68vh,560px);} }
.view{position:absolute; inset:0; display:none;}
.field[data-view="map"] .view-map{display:block;}
.field[data-view="names"] .view-names{display:flex;}

/* -- reading one: positions -- */
/* Panning and pinch are now handled entirely by the zoom module below,
   at every zoom level including 1:1 — this replaces the old
   forced-min-width-plus-native-scroll mobile fallback. At 1:1 the whole
   world already fits the frame at any viewport width; zooming in is how
   a small screen gets a closer, legible look. */
.view-map{overflow:hidden;} /* .view already sets position:absolute; inset:0 — that's the positioning context .zoomctl needs. Adding position:relative here was the bug: it overrode absolute, and inset:0 stopped stretch-filling. */
svg.atlas{display:block; width:100%; height:100%; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;}
svg.atlas.panning{cursor:grabbing;}

/* zoom controls — the same flat, no-chrome vocabulary as .reads/.keys.
   No boxed buttons anywhere on the field; this doesn't start now. */
.zoomctl{
  position:absolute; right:var(--gutter); bottom:var(--s-3);
  display:flex; align-items:center; gap:1px;
  background:rgba(0,0,0,.14); backdrop-filter:blur(2px);
}
.zoomctl button{
  font-family:var(--icn-sans); font-size:.8125rem; font-weight:500;
  background:none; border:0; color:var(--icn-cream-muted);
  width:2.1em; height:2.1em; line-height:1; cursor:pointer;
}
.zoomctl button[data-zoom="reset"]{
  width:auto; padding:0 .8em; font-size:.625rem; letter-spacing:.13em; text-transform:uppercase;
  display:none;   /* nothing to reset until the field is actually zoomed */
}
.view-map.zoomed .zoomctl button[data-zoom="reset"]{display:inline-block;}
.zoomctl button:hover{color:var(--icn-cream); background:rgba(0,0,0,.1);}
.zoomctl button:focus-visible{outline:2px solid var(--icn-cream); outline-offset:-2px;}
@media (max-width:900px){ .zoomctl{right:var(--s-2); bottom:var(--s-2);} }
/* 2.1em (~27px) is fine for a cursor, tight for a thumb — 44px meets
   the usual touch-target floor without changing the desktop chrome. */
@media (max-width:760px){ .zoomctl button{width:2.75rem; height:2.75rem;} }
.grat{stroke:var(--icn-cream); stroke-opacity:.085; stroke-width:1; fill:none;}
.grat-key{stroke-opacity:.19;}
.fieldlbl{
  font-family:var(--icn-sans); font-size:11px; font-weight:500;
  letter-spacing:2.6px; fill:var(--icn-cream); fill-opacity:.26;
}
.leader{stroke:var(--icn-cream); stroke-opacity:.22; stroke-width:1;}
.anchor{fill:var(--icn-cream); fill-opacity:.3;}

g.pt{cursor:pointer; transition:opacity .16s ease;}
g.pt .hit{fill:transparent;}
g.pt .m-a{fill:var(--ink-a);}
g.pt .m-q{fill:rgba(248,246,242,.40); stroke:var(--icn-cream); stroke-opacity:.9; stroke-width:1.1;}
g.pt .m-d{fill:none; stroke:var(--icn-cream); stroke-opacity:.5; stroke-width:1.15;}
g.pt .m-x{fill:none; stroke:var(--icn-cream); stroke-opacity:.45; stroke-width:1.3;}
g.pt .m-fed{fill:none; stroke:var(--icn-cream); stroke-opacity:.38; stroke-width:1;}
g.pt .halo{fill:none; stroke:none;}
g.pt.off{opacity:.10;}
g.pt.hot .halo{stroke:var(--icn-cream); stroke-opacity:.75; stroke-width:1.1;}
g.pt:focus{outline:none;}
g.pt:focus-visible .halo{stroke:var(--icn-cream); stroke-opacity:1; stroke-width:1.4;}

/* -- reading two: names. The same eighty-one, read as language. -- */
.view-names{align-items:center; overflow-y:auto; overflow-x:hidden; padding-inline:var(--gutter);}
.wall{
  margin:0; width:100%; max-width:var(--shell); margin-inline:auto;
  font-family:var(--icn-serif); font-weight:400;
  /* sized against the height it has as well as the width, so the whole
     run stays one wall rather than becoming a scroll */
  font-size:clamp(.875rem,min(1.15vw,2vh),1.25rem);
  line-height:1.72; letter-spacing:.004em;
  text-align:justify; text-justify:inter-word;
  hyphens:none; text-wrap:pretty;
}
.wall .n{cursor:pointer;}
.wall .a{color:var(--ink-a);}
.wall .q{color:var(--ink-q);}
.wall .d{color:var(--ink-d);}
.wall .x{color:var(--ink-x); text-decoration:line-through; text-decoration-thickness:1px;}
.wall .n.off{color:var(--ink-off) !important; text-decoration-color:var(--ink-off);}
.wall .n:hover,.wall .n:focus-visible{color:var(--icn-cream); outline:none; text-decoration:underline; text-underline-offset:.22em;}
.wall .sep{color:rgba(248,246,242,.30); padding:0 .40em; font-size:.78em; vertical-align:.06em;}

/* ---------- bottom band: the one search, and the key that is also the filter ---------- */
.f-bot{
  padding-top:clamp(var(--s-2),2.4vh,var(--s-3));
  margin-top:clamp(var(--s-2),2.2vh,var(--s-3));
  border-top:1px solid var(--icn-cream-rule);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-3) var(--s-5); flex-wrap:wrap;
}
.f-search{flex:1 1 300px; min-width:0; max-width:520px;}
input[type="search"]{
  width:100%; appearance:none; -webkit-appearance:none;
  background:transparent; border:0; border-bottom:1px solid var(--icn-cream-rule);
  font-family:var(--icn-serif); font-size:clamp(1.125rem,2.1vw,1.625rem);
  color:var(--icn-cream); padding:.08em 0 .26em; line-height:1.3;
}
input[type="search"]::placeholder{color:var(--icn-cream-muted); opacity:1;}
input[type="search"]:focus{outline:none; border-bottom-color:var(--icn-cream);}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
.readout{
  font-family:var(--icn-sans); font-size:.75rem; line-height:1.55;
  color:var(--icn-cream-muted); margin:.7em 0 0; min-height:2.9em; max-width:62ch;
}
.readout b{font-weight:500; color:var(--icn-cream); font-family:var(--icn-serif); font-size:1.08em;}
.readout .st{color:var(--icn-cream-muted);}
.scrollhint{display:none;}
@media (max-width:760px){ .scrollhint{display:inline;} }

/* the legend is the filter. One object, not two. */
.keys{display:flex; flex-wrap:wrap; gap:.5em clamp(var(--s-2),1.8vw,var(--s-4)); align-items:center;}
.keys button{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--icn-sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  background:none; border:0; border-bottom:1px solid transparent;
  color:var(--icn-cream-muted); cursor:pointer; padding:.35em 0; line-height:1;
}
.keys button:hover{color:var(--icn-cream);}
.keys button[aria-pressed="true"]{color:var(--icn-cream); border-bottom-color:var(--icn-cream);}
.keys button:focus-visible{outline:2px solid var(--icn-cream); outline-offset:3px;}
.keys b{font-weight:500; font-variant-numeric:tabular-nums; opacity:.72;}
.keys svg{flex:none;}
.f-clear{
  font-family:var(--icn-sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  background:none; border:0; border-bottom:1px solid var(--icn-cream-rule);
  color:var(--icn-cream-muted); cursor:pointer; padding:.35em 0; line-height:1;
}
.f-clear:hover{color:var(--icn-cream); border-bottom-color:var(--icn-cream);}
.f-clear:focus-visible{outline:2px solid var(--icn-cream); outline-offset:3px;}
.f-clear[hidden]{display:none;}

/* the way down to the exhaustive reading */
.f-down{
  font-family:var(--icn-sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--icn-cream-muted); text-decoration:none;
  border-bottom:1px solid var(--icn-cream-rule); padding-bottom:.25em;
}
.f-down:hover,.f-down:focus-visible{color:var(--icn-cream); border-bottom-color:var(--icn-cream);}

@media (max-width:760px){
  .f-top{flex-wrap:wrap;}
  .f-meta{margin-left:0; align-items:flex-start; text-align:left;}
  .wall{text-align:left;}
  .f-bot{align-items:stretch;}
  .f-search{max-width:none; flex-basis:100%;}
}

/* ==================================================================
   2 — THE DOCUMENT. Cream. The register set out in full, because a
   map cannot be read exhaustively and a register must be.
   The strand runs here, crossing at each junction, as it always did.
   ================================================================== */
.doc{position:relative;}
.doc::before{content:""; position:absolute; top:0; bottom:0; width:1px; left:var(--strand-x); background:var(--icn-rule); pointer-events:none;}
@media (max-width:900px){ .doc::before{display:none;} }
.wrap{max-width:var(--doc-shell); margin-inline:auto; padding-inline:var(--doc-gutter);}
.cross{
  position:absolute; top:-13px; left:var(--strand-x);
  transform:translateX(-13px); width:26px; height:26px; display:block;
  color:var(--icn-emerald); background:var(--icn-cream); padding:1px;
}
.cross svg{display:block; width:100%; height:100%;}
@media (max-width:900px){ .cross{display:none;} }

.docbar{
  border-top:1px solid var(--icn-rule);
  padding-block:var(--s-4) var(--s-3);
  position:relative;
}
.docbar .wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-4);}
.docbar h2{font-family:var(--icn-sans); font-size:.6875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--icn-emerald); margin:0;}
.docbar .n{font-family:var(--icn-sans); font-size:.75rem; color:var(--icn-muted); font-variant-numeric:tabular-nums; margin:0;}
.refine{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); align-items:baseline; margin-left:auto;}
select{
  font-family:var(--icn-sans); font-size:.75rem; letter-spacing:.04em;
  background:transparent; color:var(--icn-ink);
  border:0; border-bottom:1px solid var(--icn-rule);
  padding:.45em 1.4em .45em 0; cursor:pointer; border-radius:0;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--icn-emerald) 50%),linear-gradient(135deg,var(--icn-emerald) 50%,transparent 50%);
  background-position:calc(100% - 8px) calc(50% + 1px),calc(100% - 3px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
select:focus-visible{outline:2px solid var(--icn-emerald); outline-offset:3px;}

.list{padding-block:var(--s-4) var(--s-7);}
.cgroup{border-top:1px solid var(--icn-rule); padding-top:var(--s-3); margin-top:var(--s-5);}
.cgroup:first-child{margin-top:0;}
.cgroup > h3{
  font-family:var(--icn-sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--icn-emerald);
  margin:0 0 var(--s-2); display:flex; gap:.8em; align-items:baseline;
}
.cgroup > h3 .cn{color:var(--icn-muted); font-variant-numeric:tabular-nums;}

details.e{border-top:1px solid var(--icn-rule-soft);}
details.e:first-of-type{border-top:0;}
details.e > summary{
  list-style:none; cursor:pointer; padding:var(--s-2) 0;
  display:grid; grid-template-columns:18px minmax(0,1fr); gap:0 var(--s-2);
  align-items:baseline;
}
details.e > summary::-webkit-details-marker{display:none;}
details.e > summary:focus-visible{outline:2px solid var(--icn-emerald); outline-offset:3px;}
@media (min-width:780px){
  details.e > summary{grid-template-columns:18px minmax(0,1fr) 10.5rem 6.5rem 5.5rem; gap:0 var(--s-3);}
}
.e-name{font-size:1.0625rem; line-height:1.35; letter-spacing:-.003em;}
.e-city,.e-type,.e-state{font-family:var(--icn-sans); font-size:.75rem; color:var(--icn-muted); letter-spacing:.02em;}
.e-city{grid-column:2; margin-top:.2em;}
.e-type{display:none;}
.e-state{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (min-width:780px){
  .e-city{grid-column:auto; margin-top:0;}
  .e-type{display:block;}
  .e-state{position:static; width:auto; height:auto; overflow:visible; clip:auto; display:block; letter-spacing:.12em; text-transform:uppercase; font-size:.6875rem; font-weight:500;}
}
.st-ACTIVE{color:var(--icn-emerald) !important;}
.glyph{width:18px; height:18px; align-self:center; margin-top:.3em;}
.glyph svg{display:block;}

.e-detail{padding:0 0 var(--s-4) 0;}
@media (min-width:780px){ .e-detail{padding-left:calc(18px + var(--s-3));} }
.e-detail dl{margin:0; display:grid; gap:.35em var(--s-3); grid-template-columns:1fr; font-family:var(--icn-sans); font-size:.8125rem; line-height:1.65;}
@media (min-width:640px){ .e-detail dl{grid-template-columns:8.5rem minmax(0,1fr);} }
.e-detail dt{color:var(--icn-muted); letter-spacing:.09em; text-transform:uppercase; font-size:.625rem; font-weight:500; padding-top:.35em;}
.e-detail dd{margin:0; overflow-wrap:anywhere;}
.e-detail dd a{color:var(--icn-emerald); text-decoration:none; border-bottom:1px solid var(--icn-rule);}
.e-detail dd a:hover,.e-detail dd a:focus-visible{border-bottom-color:var(--icn-emerald);}
.e-detail .qual{color:var(--icn-muted);}
.e-detail .none{color:var(--icn-muted); font-style:italic;}
details.e[open]{background:linear-gradient(rgba(0,107,63,.028),rgba(0,107,63,.028));}
details.e.flash{animation:fl 1.1s ease;}
@keyframes fl{0%{background:rgba(0,107,63,.13);}100%{background:transparent;}}
details.e[hidden],.cgroup[hidden]{display:none !important;}
.empty{font-family:var(--icn-sans); font-size:.875rem; color:var(--icn-muted); padding:var(--s-6) 0; max-width:52ch;}

/* ==================================================================
   3 — THE FOOT. What this is, a key to the state labels, and how to
   reach us. No methodology note: this is a tool, not a history book.
   ================================================================== */
.foot{border-top:1px solid var(--icn-rule); padding-block:var(--s-6) var(--s-6); position:relative;}
.foot .wrap{display:grid; gap:var(--s-5) clamp(var(--s-4),6vw,var(--s-7)); grid-template-columns:1fr;}
@media (min-width:900px){ .foot .wrap{grid-template-columns:11rem minmax(0,1fr);} }
.foot .matter{max-width:38em;}
.foot .matter p{margin:0 0 1em; font-size:1.02em;}
.foot .asks{
  display:flex; flex-wrap:wrap; gap:.5em 1.6em; margin:0 0 1.1em;
  font-family:var(--icn-sans); font-size:.8125rem;
}
.foot .asks a{color:var(--icn-emerald); text-decoration:none; border-bottom:1px solid var(--icn-rule); padding-bottom:.05em;}
.foot .asks a:hover,.foot .asks a:focus-visible{border-bottom-color:var(--icn-emerald);}
.foot .mail{
  display:inline-block; font-size:clamp(1.125rem,2.2vw,1.625rem); text-decoration:none;
  color:var(--icn-emerald); border-bottom:1px solid var(--icn-rule);
  padding-bottom:.06em; overflow-wrap:anywhere; margin-top:.5em;
}
.foot .mail:hover,.foot .mail:focus-visible{border-bottom-color:var(--icn-emerald);}
.foot .key{
  font-family:var(--icn-sans); font-size:.8125rem; line-height:1.9; color:var(--icn-muted);
  display:flex; flex-wrap:wrap; gap:.4em 1.4em; margin:var(--s-4) 0 0; max-width:52ch;
}
.foot .key b{font-weight:500; color:var(--icn-ink);}

.colophon{border-top:1px solid var(--icn-rule); padding-block:var(--s-4) var(--s-6); font-family:var(--icn-sans); font-size:.75rem; line-height:1.7; color:var(--icn-muted);}
.colophon .wrap{display:flex; flex-wrap:wrap; gap:var(--s-2) clamp(var(--s-4),6vw,var(--s-7)); justify-content:space-between; align-items:flex-start;}
.colophon p{margin:0; max-width:36ch;}
.colophon a{color:var(--icn-muted); text-decoration:none; border-bottom:1px solid var(--icn-rule);}
.colophon a:hover,.colophon a:focus-visible{color:var(--icn-emerald); border-bottom-color:var(--icn-emerald);}
.colophon .draft{letter-spacing:.14em; text-transform:uppercase; font-size:.6875rem; color:var(--icn-emerald);}

/* ==================================================================
   4 — THE POLICY. A plain secondary page (privacy, and others like it
   later): same cream ground and .wrap shell as the document, none of
   the field/map/register apparatus. Prose only.
   ================================================================== */
.policy{padding-block:var(--s-7) var(--s-6);}
.policy .back{
  display:inline-block; margin-bottom:var(--s-4);
  font-family:var(--icn-sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--icn-muted); border-bottom:1px solid var(--icn-rule); padding-bottom:.2em;
}
.policy .back:hover,.policy .back:focus-visible{color:var(--icn-emerald); border-bottom-color:var(--icn-emerald);}
.policy h1{
  font-family:var(--icn-serif); font-weight:400; margin:0 0 .3em;
  font-size:clamp(1.75rem,3vw,2.5rem); letter-spacing:-.01em; line-height:1.15;
}
.policy .meta{font-family:var(--icn-sans); font-size:.75rem; color:var(--icn-muted); margin:0 0 var(--s-5);}
.policy .body{max-width:64ch;}
.policy .body h2{
  font-family:var(--icn-sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--icn-emerald);
  margin:var(--s-5) 0 var(--s-2);
}
.policy .body h2:first-child{margin-top:0;}
.policy .body p,.policy .body li{font-size:1.02em; line-height:1.65; margin:0 0 1em;}
.policy .body ul{margin:0 0 1em; padding-left:1.3em;}
.policy .body a{color:var(--icn-emerald); text-decoration:none; border-bottom:1px solid var(--icn-rule);}
.policy .body a:hover,.policy .body a:focus-visible{border-bottom-color:var(--icn-emerald);}

/* ==================================================================
   5 — THE NOTICE. Corrections and the WhatsApp group, shown once on
   arrival. Anchored to the TOP, deliberately — the cookie banner
   (cookie-consent.js) already owns the bottom edge, and the zoom
   controls live bottom-right of the map; this never competes with
   either. Same two asks live permanently in the foot regardless.
   ================================================================== */
.cta-toast{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:var(--icn-cream); color:var(--icn-ink);
  border-bottom:1px solid var(--icn-rule);
  padding:.9em var(--gutter);
  display:flex; align-items:center; justify-content:center; gap:.5em 1.6em;
  flex-wrap:wrap; text-align:center;
  transform:translateY(-100%); transition:transform .4s ease;
}
.cta-toast.show{transform:translateY(0);}
.cta-toast p{margin:0; font-family:var(--icn-sans); font-size:.8125rem; display:flex; flex-wrap:wrap; gap:.4em 1.4em; justify-content:center;}
.cta-toast a{color:var(--icn-emerald); text-decoration:none; border-bottom:1px solid var(--icn-rule); padding-bottom:.05em;}
.cta-toast a:hover,.cta-toast a:focus-visible{border-bottom-color:var(--icn-emerald);}
.cta-toast button{
  background:none; border:0; color:var(--icn-muted); cursor:pointer;
  font-size:1.3em; line-height:1; padding:0 .2em; flex:none;
}
.cta-toast button:hover,.cta-toast button:focus-visible{color:var(--icn-ink);}
