/*
  Ca noi — shared page of the civic hub started by Amplify ONG. Sticker sheet, palette "Miere (honey), recommended":
  analogous warm harmony, yellow to red-orange. Contrast figures and the principle behind each colour are in README.md.
  Same structure in every palette file; only the custom properties below and the page background differ.
  No JavaScript, no web fonts; one image (the hub's logo) from the same folder.
  Every selector is scoped under .cn (or .cn-page), every custom property is prefixed --cn-.
*/

.cn {
  --cn-paper: #FAF7F2;
  --cn-ink: #221C17;
  --cn-muted: #5C5249;
  --cn-accent: #A43F16;
  --cn-hover: #F6D594;
  --cn-shadow: #A43F16;
  --cn-sun: #F5C451;
  --cn-sun-hover: #FBE3A6;
  --cn-on-sun: #221C17;
  --cn-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --cn-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cn-gap: 1rem;

  box-sizing: border-box;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--cn-gap) calc(var(--cn-gap) * 3);
  background: var(--cn-paper);
  color: var(--cn-ink);
  font-family: var(--cn-sans);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

@media (prefers-color-scheme: dark) {
  .cn {
    --cn-paper: #191613;
    --cn-ink: #F3EDE6;
    --cn-muted: #C4B8AC;
    --cn-accent: #F59A6B;
    --cn-hover: #42331A;
    --cn-shadow: #F59A6B;
    --cn-sun: #E7B84E;
    --cn-sun-hover: #F6D98F;
    --cn-on-sun: #221C17;
  }
}

.cn *,
.cn *::before,
.cn *::after { box-sizing: inherit; }

/* Reset at one class of specificity: it beats a host page's element rules, and every later .cn-* rule beats it by source order. */
.cn :where(h1, h2, h3, p, ul, li, details, summary, header, nav, section, footer, img) {
  margin: 0;
  padding: 0;
  line-height: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-align: start;
}
.cn :where(ul) { list-style: none; }

/* Standalone page only: the body takes the block's background. */
.cn-page { margin: 0; background: #FAF7F2; }
@media (prefers-color-scheme: dark) { .cn-page { background: #191613; } }
.cn-page .cn { max-width: none; }

/* ---------- links and focus ---------- */
.cn a {
  color: var(--cn-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
/* Hover: a pale honey band behind the link; the underline stays as it is (restated so a host's a:hover cannot thicken it). */
.cn a:hover {
  background-color: var(--cn-hover);
  text-decoration-thickness: 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.cn a:focus-visible,
.cn summary:focus-visible {
  outline: 3px solid var(--cn-accent);
  outline-offset: 3px;
}

.cn-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cn-num { font-variant-numeric: tabular-nums; }

/* ---------- header: the owner's mark, then the name set big ---------- */
.cn-head {
  padding: calc(var(--cn-gap) * 2) 0 calc(var(--cn-gap) * 1.5);
}
.cn-owner { margin-bottom: var(--cn-gap); }
.cn-owner a {
  display: inline-block;
  padding: 0.375rem 0.625rem;
  background: #FFFFFF;
  border: 2px solid var(--cn-ink);
  border-radius: 0.5rem;
  line-height: 0;
}
.cn-owner a:hover { background-color: #FFFFFF; }
.cn-owner img {
  display: block;
  width: 7.5rem;
  height: auto;
}
.cn-kicker {
  color: var(--cn-muted);
  font-size: 0.9375rem;
  font-weight: 600;
}
.cn-title {
  margin-top: 0.125rem;
  font-size: 3.5rem;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.04em;
}
.cn-intro {
  margin-top: calc(var(--cn-gap) * 1.25);
  max-width: 40rem;
  font-size: 1.125rem;
}
.cn-meta {
  margin-top: var(--cn-gap);
  color: var(--cn-muted);
  font-size: 0.875rem;
}

/* ---------- category index (anchors, no JavaScript) ---------- */
.cn-index {
  margin-top: var(--cn-gap);
  padding: var(--cn-gap) 0;
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--cn-ink);
  border-bottom: 1px solid var(--cn-ink);
}
.cn-index-h {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cn-muted);
}
.cn-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.25rem;
}
.cn-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 0;
  font-weight: 600;
}
.cn-index .cn-num {
  color: var(--cn-muted);
  font-weight: 400;
  text-decoration: none;
}

/* ---------- category sections ---------- */
.cn-cat {
  margin-top: calc(var(--cn-gap) * 3);
  scroll-margin-top: var(--cn-gap);
}
.cn-cat-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding-top: 0.75rem;
  border-top: 4px solid var(--cn-ink);
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cn-cat-h .cn-num {
  color: var(--cn-muted);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
}
.cn-up {
  margin-top: var(--cn-gap);
  font-size: 0.875rem;
}
.cn-up a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ---------- one project: the address is a sticker ---------- */
.cn-item {
  padding: calc(var(--cn-gap) * 1.5) 0;
  border-bottom: 1px dashed var(--cn-muted);
}
.cn-list > .cn-item:last-child { border-bottom: 0; }
.cn-addr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-family: var(--cn-mono);
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 700;
}
/* One line per address: the longest (29 characters) fits at 320 px. */
.cn-addr a,
.cn-addr a:hover,
.cn-addr a:focus-visible {
  text-decoration: none;
}
.cn-addr a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.375rem 0.625rem;
  white-space: nowrap;
  background: var(--cn-sun);
  color: var(--cn-on-sun);
  border: 2px solid var(--cn-ink);
  border-radius: 0.375rem;
  box-shadow: 3px 3px 0 var(--cn-shadow);
}
/* Hover: the honey pales. Without reduced motion the sticker also lifts. */
.cn-addr a:hover { background: var(--cn-sun-hover); }
.cn-addr a:focus-visible {
  outline: 3px solid var(--cn-ink);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .cn-addr a { transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out; }
  .cn-addr a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cn-shadow); }
}
.cn-sep { color: var(--cn-muted); font-weight: 400; }
.cn-via {
  margin-top: 0.5rem;
  color: var(--cn-muted);
  font-size: 0.875rem;
}
.cn-what {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}
.cn-lead {
  margin-top: 0.25rem;
  max-width: 44rem;
}
.cn-more { margin-top: 0.25rem; max-width: 44rem; }
.cn-more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--cn-accent);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.cn-more summary::-webkit-details-marker { display: none; }
.cn-more summary::before {
  content: "+";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--cn-accent);
  border-radius: 50%;
  font-family: var(--cn-mono);
  line-height: 1;
}
.cn-more[open] summary::before { content: "\2212"; }
.cn-more summary span.cn-sl { text-decoration: underline; text-underline-offset: 0.2em; }
.cn-more p { padding-bottom: 0.25rem; }
.cn-by {
  margin-top: 0.5rem;
  color: var(--cn-muted);
  font-size: 0.875rem;
}
.cn-by-l { font-weight: 700; }

/* ---------- footer ---------- */
.cn-foot {
  margin-top: calc(var(--cn-gap) * 3);
  padding-top: var(--cn-gap);
  border-top: 4px solid var(--cn-ink);
  color: var(--cn-muted);
  font-size: 0.875rem;
}
.cn-foot p { max-width: 44rem; }
.cn-foot p + p { margin-top: 0.5rem; }

/* ---------- wider screens: min-width only ---------- */
@media (min-width: 40em) {
  .cn { --cn-gap: 1.5rem; }
  .cn-title { font-size: 5.5rem; }
  .cn-owner img { width: 9rem; }
  .cn-addr { font-size: 0.9375rem; }
}

@media (min-width: 64em) {
  .cn { --cn-gap: 2rem; }
  .cn-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2rem;
    align-items: start;
  }
  .cn-head > * { grid-column: 1; }
  .cn-head > .cn-owner { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .cn-title { font-size: 7.5rem; }
  /* The sheet: address sticker | what it is | who made it. */
  .cn-item {
    display: grid;
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr) minmax(10rem, 12rem);
    grid-template-areas:
      "addr what by"
      "via  lead by"
      ".    more by";
    grid-template-rows: auto auto 1fr;
    column-gap: 2rem;
    align-items: start;
  }
  .cn-addr { grid-area: addr; }
  .cn-via { grid-area: via; }
  .cn-what { grid-area: what; margin-top: 0.625rem; }
  .cn-lead { grid-area: lead; }
  .cn-more { grid-area: more; }
  .cn-by { grid-area: by; margin-top: 0.75rem; }
  .cn-by-l { display: block; }
}

/* ---------- Windows high contrast and other forced palettes ---------- */
@media (forced-colors: active) {
  .cn-index { border: 1px solid CanvasText; }
  .cn-addr a { border-color: LinkText; }
  .cn-addr a:hover { border-style: dashed; }
  .cn-owner a { forced-color-adjust: none; background: #FFFFFF; border-color: CanvasText; }
  .cn-more summary::before { border-color: LinkText; }
  .cn a:focus-visible, .cn summary:focus-visible { outline-color: Highlight; }
}