/* GreenREFORM-EU mockups - Direction 05, DREAM heritage.
   Palette, typography and component rules from
   ../../brand-lab/boards/05d-site-palette.html and 05c-dream-heritage-applications.html.

   The working rule: green is never decoration. If something is green it is
   either the model itself or something you can click. */

:root {
  /* the five */
  --green: #084C2B;   /* the mark, links, primary buttons, active states */
  --ink: #1B2620;     /* all headings and body text */
  --paper: #F7F7F4;   /* page background */
  --mist: #E7EBE6;    /* rules, table borders, code chips, quiet surfaces */
  --clay: #A04A26;    /* the one signal colour: new, changed, caution */

  /* tones derived from the five, as used on the brand sheets */
  --green-deep: #0B4F2B;  /* hover only */
  --green-tint: #E8F0EA;
  --green-wash: #F1F6F2;
  --clay-tint: #F6E9E2;
  --ink-soft: #3B463F;
  --surface: #FFFFFF;
  --line: #E7EBE6;
  --line-firm: #D9E0D9;
  /* Borders of real controls. WCAG 1.4.11 wants the boundary of a user
     interface component at 3:1; --line-firm is only 1.3:1 and is for
     decorative rules, cards and tables, which the criterion exempts. */
  --line-ui: #79837B;
  --focus: #A04A26;

  --maxw: 1100px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Hind, "Segoe UI", Aptos, Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

a { color: var(--green); }

/* WCAG 2.4.7. Clay reads 5.6:1 on paper, so the ring is visible against every
   surface on the site, and it is the one place clay is not a content signal. */
a:focus-visible, button:focus-visible, input:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- accessibility utilities ---------- */

/* WCAG 2.4.1 Bypass blocks. The header and the seven navigation items repeat
   on every page; this lets a keyboard or screen reader user step over them.
   It is the first thing in the tab order and becomes visible on focus. */
.skip {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 100;
  background: var(--green);
  color: #fff;
  padding: 12px 22px;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus { left: 0; }

/* Available to assistive technology, not on screen. Replaces the older
   left:-9999px inline styles, which move the text out of the viewport and
   can misplace the focus ring. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* ---------- masthead ---------- */

.masthead {
  background: var(--surface);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* DREAM's own wordmark, the artwork dreamgruppen.dk carries in its footer.
   It keeps DREAM's grey instead of the site ink: this is the parent
   institution signing the page, not site furniture. The width is set so the
   letterforms match the cap height of the site name beside them. */
.dreamword {
  display: flex;
  text-decoration: none;
}

.dreamword img {
  display: block;
  width: 111px;
  height: auto;
}

.vrule {
  width: 1px;
  align-self: stretch;
  min-height: 44px;
  background: var(--line-firm);
}

.sitename {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.disc { display: block; }

/* ---------- primary navigation ---------- */

nav.main {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

nav.main .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  padding-top: 0;
  padding-bottom: 0;
}

nav.main a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
  padding: 12px 0 9px;
  border-bottom: 3px solid transparent;
}

nav.main a:hover { color: var(--ink); }

nav.main a[aria-current="page"] {
  color: var(--green);
  font-weight: 600;
  border-bottom-color: var(--green);
}

/* ---------- page furniture ---------- */

/* The hero and the page head sit inside <main> so the skip link lands before
   the h1. They bring their own padding, so main adds none and the content
   wrapper supplies it. */
main { padding: 0 0 60px; }
main > .wrap { padding-top: 44px; }

.kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

h1 {
  margin: 0 0 16px;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}

p { margin: 0 0 16px; }

.lead {
  font-size: 20px;
  line-height: 1.5;
  max-width: 62ch;
  color: var(--ink-soft);
}

/* A second line to a title, for documents whose own title needs context. */
.subtitle {
  margin: -6px 0 18px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 40ch;
}

.measure { max-width: 68ch; }

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

.small { font-size: 15px; }

.mono {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.88em;
  background: var(--mist);
  padding: 2px 6px;
  border-radius: 3px;
  color: #2B3A31;
  /* File names have no spaces to break at and would otherwise push the page
     wider than 320 px, which 1.4.10 does not allow. */
  overflow-wrap: anywhere;
}

/* ---------- buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 24px 0 8px;
}

.btn, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

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

.btn:hover { background: var(--green-deep); }

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

.btn-ghost:hover { background: var(--green-tint); }

.lnk {
  color: var(--green);
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- blocks ---------- */

.hero {
  position: relative;
  overflow: hidden;
}

.hero h1 { max-width: 16ch; }

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 20px;
}

.card p:last-child { margin-bottom: 0; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 24px;
}

/* ---------- tags ---------- */

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 9px;
  background: var(--mist);
  color: var(--ink-soft);
}

/* Unused since 3 November 2026. Both were on the Projects grid, where they
   marked one project new and one a model version while the other four stayed
   grey, for no reason a reader could recover. Clay also stopped carrying the
   word "new" once the tags took the period-and-funder pattern, which left the
   colour as the only carrier of the meaning and broke WCAG 1.4.1.

   If you use .tag.new again, the tag text must itself say NEW. Nothing here
   should rely on a reader noticing a colour, and nothing should depend on a
   date to stay true: "new" expires and no process catches it. */
.tag.new { background: var(--clay-tint); color: var(--clay); }
.tag.version { background: var(--green-tint); color: var(--green); }

.split {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}

ul.plain, ol.plain { padding-left: 22px; margin: 0 0 16px; }
ul.plain li, ol.plain li { margin-bottom: 10px; }

/* The documentation chapters are unfoldable sections on one page, not
   sub-pages. The reasoning is in content/pages/documentation.md. The closed
   state must read as a table of contents, because that is what it was. */
.toc {
  border-top: 1px solid var(--line-firm);
  margin: 0;
}

.toc details { border-bottom: 1px solid var(--line-firm); }

.toc summary {
  display: flex;
  gap: 16px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
}

.toc summary::-webkit-details-marker { display: none; }
.toc summary::marker { content: ""; }

.toc .no {
  width: 2.2rem;
  flex: none;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.toc .what { margin: 0; }
.toc .what span { display: block; color: var(--ink-soft); font-size: 15px; }

/* Decorative. The open and closed states are carried by the summary element
   itself, which assistive technology announces without help. */
.toc .mark {
  margin-left: auto;
  flex: none;
  color: var(--ink-soft);
  transition: transform .15s ease;
}

.toc details[open] .mark { transform: rotate(90deg); }

.toc .body { padding: 0 2px 22px calc(2.2rem + 16px); }
.toc .body p { margin: 0 0 12px; max-width: 62ch; }
.toc .body p:last-child { margin-bottom: 0; }
.toc .body .src { font-size: 14px; color: var(--ink-soft); }

.newsfeed { list-style: none; margin: 0; padding: 0; }

.newsfeed li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-firm);
}

.newsfeed li:first-child { border-top: 1px solid var(--line-firm); }

.newsfeed time {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.newsfeed h3 { margin-bottom: 6px; }
.newsfeed p { margin: 0; max-width: 72ch; }

.note {
  border-left: 3px solid var(--green);
  background: var(--green-wash);
  padding: 14px 18px;
  font-size: 16px;
}

.note.caution {
  border-left-color: var(--clay);
  background: var(--clay-tint);
}

.note p:last-child { margin-bottom: 0; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}

/* Real filter controls, so they are buttons: reachable by keyboard, announced
   with a role and a pressed state (WCAG 4.1.2), and with a boundary that
   meets the 3:1 of 1.4.11. */
.chip {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line-ui);
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
  line-height: inherit;
  color: var(--ink-soft);
  background: var(--surface);
  cursor: pointer;
}

.chip:hover { border-color: var(--ink-soft); color: var(--ink); }

.chip[aria-pressed="true"] {
  background: var(--green-tint);
  border-color: var(--green);
  color: var(--green);
  font-weight: 600;
}

.analysis {
  display: grid;
  gap: 8px 28px;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  padding: 22px 0;
  border-bottom: 1px solid var(--line-firm);
  align-items: start;
}

.analysis:first-of-type { border-top: 1px solid var(--line-firm); }

.analysis h3 { margin: 0 0 6px; font-size: 20px; }
.analysis h3 a { color: var(--ink); text-decoration: none; }
.analysis h3 a:hover { color: var(--green); text-decoration: underline; }
.analysis .subtitle { margin: -2px 0 8px; font-size: 16px; }
.analysis .aside { font-size: 15px; color: var(--ink-soft); }
.analysis .aside p { margin: 0 0 8px; }
.analysis .aside p:last-child { margin-bottom: 0; }

.crumb {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-soft);
}

.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.meta-table th,
.meta-table td {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-firm);
  vertical-align: top;
}

.meta-table th {
  width: 11rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- signup + footer ---------- */

.signup {
  background: var(--mist);
  border-top: 1px solid var(--line-firm);
  border-bottom: 1px solid var(--line-firm);
  color: var(--ink);
  padding: 32px 0;
}

.signup h2 { margin: 0 0 6px; font-size: 22px; }
.signup p { color: var(--ink-soft); margin: 0 0 18px; max-width: 60ch; }

.signup form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.signup input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line-ui);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  border-radius: 3px;
}

/* 4.6:1 on white. The old #7C8A80 was 3.6:1 and failed 1.4.3. */
.signup input::placeholder { color: #5E6B62; opacity: 1; }

.signup button {
  background: var(--green);
  color: #fff;
  border: 0;
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
}

.signup button:hover { background: var(--green-deep); }

footer.site {
  background: var(--ink);
  color: #BFC9C2;
  padding: 34px 0 30px;
  font-size: 15px;
}

footer.site .cols {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

footer.site h3 { color: #fff; font-size: 15px; margin-bottom: 10px; font-weight: 600; }

/* DREAM's own footer lockup: the wordmark with the institute's full name set
   beneath it. dreamgruppen.dk builds it the same way, from the logo file plus
   live text rather than the print pack's outlined version, so the name stays
   selectable and scales with the reader's type size. The logo is DREAM's white
   file because this band is dark. Its ink is about 1.75 times the name's font
   size, which is the ratio dreamgruppen.dk uses. The name carries an explicit
   break after "for", which is where DREAM's own two-line lockup breaks it. */
footer.site .dreammark { margin-bottom: 12px; }
footer.site .dreammark img { display: block; width: 145px; height: auto; }
footer.site .nametag { color: #fff; font-weight: 600; margin: 0 0 8px; }
footer.site a { color: #DCE3DD; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 6px; }

footer.site .legal {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
  color: #BFC9C2;
}

footer.site .legal a { color: #BFC9C2; }

/* ---------- the graphic system ----------

   Three registers, and they are not interchangeable:

   1. gridpaper      the 80 px grid from the brand background. Texture. Use
                     anywhere a band needs to feel like squared paper.
   2. family.svg     the DREAM discs in their own colours, connected. This
                     means the model family. Only where the text is about
                     lineage: the home hero, "Where it comes from", About.
   3. constellation-quiet.svg
                     the same topology drawn in mist. Texture, not the family.
                     Interior page heads.

   Nothing here introduces a sixth colour. The family discs are DREAM's own
   and are quoted, not adopted. */

/* The grid sits on its own layer so it can be masked. The band keeps the page
   background colour, so once the grid has faded there is nothing left to mark
   where the band ended. */

.gridpaper {
  position: relative;
  background-color: var(--paper);
}

.gridpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--mist) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mist) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 100%);
  pointer-events: none;
}

.gridpaper > * { position: relative; z-index: 1; }

.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 40px;
  align-items: center;
  padding-top: 46px;
  padding-bottom: 46px;
}

.hero-text .actions { margin-bottom: 0; }

.hero-figure { margin: 0; }
.hero-figure img { display: block; width: 100%; height: auto; }

.pagehead {
  position: relative;
  overflow: hidden;
  padding: 40px 0 44px;
}

/* The quiet constellation fades out before it reaches the text column on the
   left, and again before the bottom edge, so the band has no edge at all. */
.pagehead::after {
  content: "";
  position: absolute;
  top: 0;
  right: -40px;
  bottom: 0;
  width: 520px;
  background: url("constellation-quiet.svg") no-repeat right center;
  background-size: contain;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 38%),
    linear-gradient(to bottom, #000 0, #000 46%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 38%),
    linear-gradient(to bottom, #000 0, #000 46%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}

.pagehead .wrap { position: relative; z-index: 1; }
.pagehead .actions { margin-bottom: 0; }
.pagehead .crumb { position: relative; z-index: 1; }

.lineage { margin: 24px 0 8px; }
.lineage svg { display: block; width: 100%; height: auto; }

.figure { margin: 24px 0 10px; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }

.caption {
  margin: 10px 0 18px;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 76ch;
}

/* The .ccard component for the Country teams directory was parked on
   3 November 2026, with its CSS: see content/parked/country-teams.md. */

.signup { background-color: var(--mist); }

/* The signup band has its own colour and its own rules top and bottom, so its
   edge is deliberate. The grid stays even across it. */
.signup.gridpaper { background-color: var(--mist); }

.signup.gridpaper::before {
  background-image:
    linear-gradient(to right, #DDE3DD 1px, transparent 1px),
    linear-gradient(to bottom, #DDE3DD 1px, transparent 1px);
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-figure { max-width: 420px; }
  .pagehead::after { display: none; }
}

@media (max-width: 760px) {
  h1 { font-size: 30px; }
  .lead { font-size: 18px; }
  .subtitle { font-size: 19px; }
  .split { grid-template-columns: 1fr; }
  .analysis { grid-template-columns: 1fr; }
  .masthead .wrap { flex-wrap: wrap; }
  .brand { gap: 14px; }
  .dreamword img { width: 86px; }
  .sitename { font-size: 17px; }
}

/* WCAG 1.4.10 Reflow. Everything has to read in a 320 px column with no
   sideways scrolling, which is also what 400% zoom on a 1280 px screen gives. */
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 26px; }
  .vrule { display: none; }
  .brand { flex-wrap: wrap; gap: 8px 14px; }
  .btn, .btn-ghost { width: 100%; justify-content: center; }
  .meta-table, .meta-table tbody, .meta-table tr, .meta-table th, .meta-table td { display: block; width: auto; }
  .meta-table th { border-bottom: 0; padding-bottom: 0; }
  .meta-table td { padding-top: 2px; }
  /* The grid squares are tuned for a wide band; at this width they read as
     stripes, so the paper goes plain. */
  .gridpaper::before { background-size: 48px 48px; }
}