/* an embedded font was here: the site loads it from assets/ramtt-drawings/fonts.css */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:#fcfcfb}
/* AboutBlock · ramtt.com (apps/website) · About og Colophon
   Opsaetning maalt paa studiofeixen.ch/about ved 1440 px og overtaget ordret:
   rubrik 2,3/2,5vw fed · broed og sidekolonne 1,2/1,5vw medium · margen 2,78vw ·
   fire haanddelte spalter a 25 % med 1,2vw hoejreluft · alt skalerer med vinduet.
   Hele siden har kun fire skrifttrin: kaempe 8,5/8,5 · rubrik 2,3/2,5 · broed 1,2/1,5 · lille 0,9/1,1.
   Kun Inter paa denne side. Global CSS pr. komponent. */

.about-page {
  /* binding til RAMTT's tokens. Reservevaerdierne er Farvekildens lyse roller;
     de tre graa er neutralens trin 425 / 280 / 170 (L = 1 − 0,85·trin/900). */
  --ab-paper: var(--paper, #fcfcfb);
  --ab-ground: var(--ground, #f4f3f0);
  --ab-rule: var(--rule, #e9e8e4);
  --ab-ink: var(--ink-900, #0b0b0b);
  --ab-ink-meta: var(--neutral-425, oklch(59.9% 0.004 95));
  --ab-ink-link: var(--neutral-280, oklch(73.6% 0.004 95));
  --ab-ink-aside: var(--neutral-170, oklch(83.9% 0.003 95));
  --ab-sans: var(--font-sans, "InterVariable"), "Inter", system-ui, sans-serif;

  /* enheden: 1 % af vinduet, som i referencen. Loft saa den ikke vokser uendeligt. */
  --u: min(1vw, 22px);

  background: var(--ab-paper);
  color: var(--ab-ink);
  font-family: var(--ab-sans);
  font-feature-settings: "cv01", "ss03";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }

.about-block {
  padding: calc(var(--u) * 3.2) calc(var(--u) * 2.78) calc(var(--u) * 8.5);
}

/* hoved: navn · rubrik over to spalter · sidekolonne */
.about-block__head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.about-block__name,
.about-block__statement {
  margin: 0;
  font-weight: 680;
  font-size: calc(var(--u) * 2.3);
  line-height: calc(var(--u) * 2.5);
  letter-spacing: -0.012em; /* Inter 680 maalt 0,8 % bredere end referencens fede; -0,022 lukker ordmellemrummene */
  word-spacing: 0.03em;
}
.about-block__name { grid-column: 1; padding-right: calc(var(--u) * 1.2); }
.about-block__statement { grid-column: 2 / span 2; padding-right: calc(var(--u) * 2.4); }

.about-block__meta,
.about-block__col {
  font-weight: 510;
  font-size: calc(var(--u) * 1.2);
  line-height: calc(var(--u) * 1.5);
  letter-spacing: 0;
}

.about-block__meta {
  grid-column: 4;
  margin: 0;
  padding: calc(var(--u) * 0.35) calc(var(--u) * 1.2) 0 0;
  display: grid;
  row-gap: calc(var(--u) * 1.5);
}
.about-block__meta dt { font-weight: inherit; }
.about-block__meta dd { margin: 0; color: var(--ab-ink-meta); }
.about-block__meta a { color: inherit; text-decoration: none; }
.about-block__meta a:is(:hover, [data-hover]) { color: var(--ab-ink); }

/* broed: fire selvstaendige spalter, teksten er delt i haanden */
.about-block__prose {
  margin-top: calc(var(--u) * 5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.about-block__col { padding-right: calc(var(--u) * 1.2); hyphens: manual; }
.about-block__col p { margin: 0 0 calc(var(--u) * 1.5); }

.about-block__col a {
  color: var(--ab-ink-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.about-block__col a:is(:hover, [data-hover]) { color: var(--ab-ink); }
.about-block__aside { color: var(--ab-ink-aside); }
.about-block__aside a { color: inherit; }

.about-page a:focus-visible { outline: 2px solid var(--ab-ink); outline-offset: 2px; }

/* medie i fuld bredde mellem blokkene. Ingen streger nogen steder. */
.about-media { margin: 0; background: var(--ab-ground); overflow: hidden; }
.about-media > * { display: block; width: 100%; height: auto; }

/* to spalter: teksten loeber igen som een tekst */
@media (max-width: 1099px) {
  .about-page { --u: 1.72vw; }
  .about-block__head { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--u) * 2.5); }
  .about-block__name, .about-block__statement { grid-column: 1 / -1; }
  .about-block__meta { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .about-block__prose { display: block; column-count: 2; column-gap: 0; }
  .about-block__col { display: contents; }
  .about-block__col p { padding-right: calc(var(--u) * 1.2); }
}

/* een spalte */
@media (max-width: 639px) {
  .about-page { --u: 3.42vw; }
  .about-block { padding-inline: calc(var(--u) * 1.5); }
  .about-block__meta { grid-template-columns: minmax(0, 1fr); }
  .about-block__prose { column-count: 1; }
  .about-block__name, .about-block__statement, .about-block__meta, .about-block__col p { padding-right: 0; }
}

/* ───────── Sammenfoldet biografi: 13,9 enheder hoej, toner ud, hvid pilleknap ───────── */
.about-block__prose[data-collapsed="true"] { max-height: calc(var(--u) * 13.9); overflow: hidden; position: relative; }
.about-block__prose[data-collapsed="true"]::after {
  content: ""; position: absolute; inset: 35% 0 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ab-paper) 85%);
}
.about-more { display: flex; justify-content: center; margin-top: calc(var(--u) * -2.1); position: relative; }
.about-pill {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 510; font-size: calc(var(--u) * 1.2); line-height: 1.2;
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.75);
  border-radius: calc(var(--u) * 1.75);
  background: var(--raised, #ffffff); color: var(--ab-ink);
  text-decoration: none; display: inline-block;
  box-shadow: 0 0 0 1px var(--ab-rule); /* hvid paa papir kan ikke ses uden ring */
}
.about-pill:is(:hover, [data-hover]) { background: var(--ab-ground); }
.about-band--ground .about-pill:is(:hover, [data-hover]), .about-band--ink .about-pill:is(:hover, [data-hover]) { background: var(--ab-rule); }

/* ───────── Baand: fuld bredde, kaempe centreret titel, lille centreret indledning ───────── */
.about-band {
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2.78) calc(var(--u) * 5);
  font-weight: 510;
  font-size: calc(var(--u) * 1.2);
  line-height: calc(var(--u) * 1.5);
}
.about-band--ground { background: var(--ab-ground); }
.about-band--ink { background: var(--ab-ink); color: var(--ab-ink-aside); --ab-ink-meta: oklch(68% 0.004 95); --ab-ink-link: oklch(68% 0.004 95); }
.about-band--ink .about-frame { color: var(--ab-ink-aside); }

.about-band__title {
  margin: 0; padding: calc(var(--u) * 2) 0 calc(var(--u) * 1);
  text-align: center;
  font-weight: 680;
  font-size: calc(var(--u) * 8.5);
  line-height: calc(var(--u) * 8.5);
  letter-spacing: -0.028em;
}
.about-band__intro {
  margin: 0 auto; padding-bottom: calc(var(--u) * 2);
  max-width: calc(var(--u) * 28.3);
  text-align: center;
  line-height: calc(var(--u) * 1.4);
  text-wrap: balance;
}

/* fire kort pr. raekke: centreret rubrik, tegning i ramme, centreret tekst, lille graa liste */
.about-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.about-card { padding: 0 calc(var(--u) * 0.6) calc(var(--u) * 2); text-align: center; }
.about-card__title {
  margin: 0; padding: calc(var(--u) * 1) 0 calc(var(--u) * 2);
  font-weight: 680; font-size: calc(var(--u) * 2.3); line-height: calc(var(--u) * 2.5); letter-spacing: -0.012em;
}
.about-frame { display: block; width: 58%; margin: 0 auto; color: var(--ab-ink); }
.about-frame svg { display: block; width: 100%; height: auto; overflow: visible; }
.about-frame svg * { vector-effect: non-scaling-stroke; }
.about-card__text { margin: 0; padding: calc(var(--u) * 1.6) calc(var(--u) * 0.6) calc(var(--u) * 1); text-wrap: balance; }
.about-small { margin: 0; font-size: calc(var(--u) * 0.9); line-height: calc(var(--u) * 1.1); color: var(--ab-ink-meta); text-wrap: balance; }

/* arbejdsgangen: to smaa lister under titlen, saa en raekke store ord */
.about-phases { display: flex; justify-content: center; gap: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 4); line-height: calc(var(--u) * 1.4); }
.about-phases ol { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.about-phases li { counter-increment: n; }
.about-phases li::before { content: counter(n) ". "; }
.about-phases li.is-dim { color: var(--ab-ink-meta); }
.about-words { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; text-align: center;
  font-weight: 680; font-size: calc(var(--u) * 2.3); line-height: calc(var(--u) * 2.1); letter-spacing: -0.012em; }

/* navnevaeggen: een stor centreret tekst, etiketter i blaek, navne i lys graa */
.about-wall {
  margin: 0; text-align: center;
  font-weight: 680; font-size: calc(var(--u) * 2.3); line-height: calc(var(--u) * 2.5); letter-spacing: -0.012em;
  color: var(--ab-ink-aside);
}
.about-wall b { font-weight: inherit; color: var(--ab-ink); }
.about-wall a { color: inherit; text-decoration: none; }
.about-wall a:is(:hover, [data-hover]) { color: var(--ab-ink); }

/* laes: kilde, forfatter, centreret rubrik, graat uddrag, pilleknap */
.about-read { text-align: center; padding: 0 calc(var(--u) * 0.6); display: flex; flex-direction: column; align-items: center; }
.about-read__src { margin: 0; font-size: calc(var(--u) * 0.9); line-height: calc(var(--u) * 1.1); }
.about-read__src span { display: block; color: var(--ab-ink-meta); }
.about-read__title { margin: 0; padding: calc(var(--u) * 0.6) 0 calc(var(--u) * 0.8);
  font-weight: 680; font-size: calc(var(--u) * 2.3); line-height: calc(var(--u) * 2.4); letter-spacing: -0.012em; text-wrap: balance; }
.about-read__text { margin: 0 0 calc(var(--u) * 1.6); color: var(--ab-ink-meta); }
.about-read .about-pill { margin-top: auto; box-shadow: none; background: var(--ab-rule); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 0.8); }
.about-read .about-pill:is(:hover, [data-hover]) { background: var(--ab-ground); }

/* spoergsmaal: fire spalter, graa etiket, blaek-svar, graat link */
.about-faq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding-top: calc(var(--u) * 2); }
.about-faq > div { padding-right: calc(var(--u) * 1.2); }
.about-faq dt { color: var(--ab-ink-meta); }
.about-faq dd { margin: 0; }
.about-faq a { color: var(--ab-ink-meta); text-decoration: none; }
.about-faq a:is(:hover, [data-hover]) { color: var(--ab-ink); }

@media (max-width: 1099px) {
  .about-block__prose[data-collapsed="true"] { max-height: calc(var(--u) * 16); }
  .about-cards, .about-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--u) * 2); }
  .about-words { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: calc(var(--u) * 1); }
  .about-band__intro { max-width: calc(var(--u) * 34); }
}
@media (max-width: 639px) {
  .about-band { padding-inline: calc(var(--u) * 1.5); }
  .about-band__title { font-size: calc(var(--u) * 4.6); line-height: calc(var(--u) * 4.8); }
  .about-band__intro { max-width: none; line-height: calc(var(--u) * 1.5); }
  .about-cards, .about-faq { grid-template-columns: minmax(0, 1fr); }
  .about-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-phases { gap: calc(var(--u) * 1.5); }
  .about-frame { width: 50%; }
}

/* ───────── Top: wordmarket (svg/ramtt-wordmark.svg, currentColor, indlejret) ─────────
   Toppen er maalt paa referencen: fast, 58 px hoej, faste px (skalerer ikke), menu 13 px fra x = 480. */
.about-nav {
  position: sticky; top: 0; z-index: 10;
  height: 58px; padding: 0 40px;
  display: flex; align-items: center;
  background: color-mix(in oklab, var(--ab-paper) 97%, transparent);
  font-size: 13px; line-height: 17px; font-weight: 400;
}
.about-nav__mark { display: block; color: var(--ab-ink); flex: none; }
.about-nav__mark svg { display: block; height: 16px; width: auto; }
.about-nav__links { position: absolute; left: 480px; display: flex; margin: 0; padding: 0; list-style: none; }
.about-nav__links a { display: block; min-width: 74px; padding-right: 10px; color: var(--ab-ink-aside); text-decoration: none; }
.about-nav__links a:is(:hover, [data-hover]), .about-nav__links a[aria-current="page"] { color: var(--ab-ink); }
.about-nav__side { margin-left: auto; font-weight: 680; font-size: 20px; line-height: 24px; letter-spacing: -0.012em; color: var(--ab-ink-link); text-decoration: none; }
.about-nav__side:is(:hover, [data-hover]) { color: var(--ab-ink); }


@media (max-width: 1099px) { .about-nav__links { position: static; margin-left: 40px; } }
@media (max-width: 639px) {
  .about-nav { padding: 0 20px; }
  .about-nav__links { display: none; }
  .about-nav__side { font-size: 16px; }
}

/* ───────── Hero: den tegnede glykogen-animation foer teksten (glykogen-hero.js) ─────────
   Referencens hero staar i satsbredden, ca. 2,26 : 1. Stregen arver color, enderne --glyko-accent. */
.about-hero { margin: 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 2.78) calc(var(--u) * 1); }
.about-hero__canvas { display: block; width: 100%; aspect-ratio: 2.26 / 1; color: var(--ab-ink); --glyko-accent: var(--accent, #6250D6); cursor: pointer; }
@media (max-width: 639px) { .about-hero { padding-inline: calc(var(--u) * 1.5); } .about-hero__canvas { aspect-ratio: 1 / 1.15; } }

/* ───────── Tomrum-registrets motiver i Models-kortene (uaendrede SVG'er, tomrum-tegn-ind.js) ─────────
   Haandens farver er registrets egne. Motivet staar paa lyst baand, fordi det har hvid fyld og blaekstreg. */
.tomrum-fig { --tomrum-haand: #5F5E5A; --tomrum-haand-let: #9FA4AB; --tomrum-haand-fin: #C4C8CD; --tomrum-fyld: #FFFFFF; --tomrum-hul: var(--ab-ground); --tomrum-skygge: rgba(29,34,40,0.16);
  display: block; width: 62%; margin: 0 auto; cursor: pointer; }
.tomrum-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.about-band--ink .about-phases li.is-dim { color: oklch(68% 0.004 95); }
@media (max-width: 639px) { .tomrum-fig { width: 52%; } }