/* Om os (/om) — an editorial letter: a memo head (Til / Fra / Vedr.), one display
   statement across the page, a narrow text column offset to column 4 with short
   side-notes in the left margin (ruled like letter paper), a +/− ledger that breaks
   out to full width, a signed sign-off with a P.S., and a book-style colophon. */

/* Letter head ------------------------------------------------------------ */
.about-head{padding-top:clamp(1.5rem,.8rem + 3vw,3.75rem)}
.about-memo{display:grid;gap:.4rem;margin:0;padding-block:var(--space-s);border-block:1px solid var(--line-strong);font-size:var(--fs-sm);line-height:1.45}
.about-memo>div{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:var(--space-xs);align-items:baseline}
.about-memo dt{font-weight:700}
.about-memo dd{margin:0}

.about-title{margin-top:clamp(2rem,1rem + 4.5vw,5rem);font-size:clamp(2.6rem,1.15rem + 5.4vw,6.25rem);line-height:.98;letter-spacing:-.056em}
.about-title>span{display:block}
.about-title>span+span{margin-top:.08em}
/* One word, marked like a highlighter stroke; it draws in once on load. */
.about-mark{padding-inline:.04em;background:linear-gradient(var(--mint),var(--mint)) no-repeat 0 60%/100% .38em;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:about-mark .8s var(--ease) .7s both}
@keyframes about-mark{from{background-size:0% .38em}to{background-size:100% .38em}}

@media (min-width:800px){
  .about-memo{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grid-gap)}
  .about-memo>div{grid-template-columns:minmax(0,1fr);gap:.2rem}
}
@media (min-width:960px){
  /* Memo columns sit on the letter grid: Til over the margin, Fra + Vedr. over the text. */
  .about-memo{grid-template-columns:repeat(12,minmax(0,1fr))}
  .about-memo>div:nth-child(1){grid-column:1/span 3}
  .about-memo>div:nth-child(2){grid-column:4/span 4}
  .about-memo>div:nth-child(3){grid-column:8/span 5}
}

/* Letter body: margin column (notes) + offset text column --------------- */
.about-body{position:relative}
.about-body--first{padding-top:clamp(2rem,1rem + 3vw,4rem)}
.about-body--last{padding-bottom:var(--section)}
.about-row{display:grid}
.about-row+.about-row{margin-top:clamp(2.75rem,1.8rem + 3vw,4.5rem)}
.about-text{max-width:38rem}
.about-text h2{font-size:var(--fs-h3);letter-spacing:-.03em}
.about-text h2+p{margin-top:var(--space-s)}
.about-text p+p{margin-top:1em}
.about-text .lede{max-width:none}

/* Side-notes: after their paragraph on phones, in the left margin on desktop. */
.about-note{margin-top:var(--space-m);padding-left:var(--space-s);border-left:3px solid var(--mint);font-size:var(--fs-sm);line-height:1.55;color:var(--muted)}
.about-note__list{margin:0;padding:0;list-style:none}
.about-note__list li+li{margin-top:.3rem}
.about-note__list span{color:var(--ink);font-weight:600}
.about-note__list span::after{content:" ·"}

@media (min-width:960px){
  .about-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .about-text{grid-column:4/span 8;grid-row:1;max-width:none}
  .about-note{grid-column:1/span 3;grid-row:1;align-self:start;margin:0;padding:.7rem var(--space-m) 0 0;border:0;text-align:right;position:relative}
  .about-note::before{content:"";position:absolute;top:0;right:var(--space-m);width:1.5rem;border-top:2px solid var(--ink)}
  .about-note__list span{display:block;color:var(--muted)}
  .about-note__list span::after{content:none}
  .about-note__list li{color:var(--ink)}
  .about-note__list li+li{margin-top:.6rem}
  /* The margin rule of letter paper, half a gap left of column 4. */
  .about-body::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gutter) + (100% - 2 * var(--gutter) - 11 * var(--grid-gap)) / 4 + 2.5 * var(--grid-gap));border-left:2px solid var(--mint);pointer-events:none}
  .about-body--first::before{top:clamp(2rem,1rem + 3vw,4rem)}
  .about-body--last::before{bottom:var(--section)}
}
@media (min-width:1200px){
  .about-text{grid-column:4/span 7}
}

/* Ledger: Det gør vi / Det gør vi ikke ---------------------------------- */
.about-ledger-wrap{padding-block:clamp(3rem,2rem + 4vw,6rem)}
.about-ledger{position:relative;display:grid;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.about-ledger::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:1px solid var(--ink)}
.about-ledger__col{padding-block:var(--space-l) var(--space-m)}
.about-ledger__col+.about-ledger__col{border-top:1px solid var(--line-strong)}
.about-ledger h2{font-size:var(--fs-h3);letter-spacing:-.03em;margin-bottom:var(--space-s)}
.about-ledger ul{margin:0;padding:0;list-style:none}
.about-ledger li{position:relative;padding:.85rem 0 .85rem 1.75rem;border-top:1px solid var(--line)}
.about-ledger li::before{content:"+";content:"+" / "";position:absolute;left:0;top:.85rem;font-weight:700;color:var(--blue)}
.about-ledger__col--dont li::before{content:"−";content:"−" / "";color:var(--ink)}
.about-ledger a{font-weight:600}
@media (min-width:800px){
  .about-ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-ledger__col{padding-block:var(--space-xl) var(--space-l)}
  .about-ledger__col--do{padding-right:var(--grid-gap)}
  .about-ledger__col+.about-ledger__col{border-top:0;border-left:1px solid var(--line-strong);padding-left:var(--grid-gap)}
}
@media (min-width:1200px){
  .about-ledger__col--do{padding-right:var(--space-2xl)}
  .about-ledger__col+.about-ledger__col{padding-left:var(--space-2xl)}
}

/* Sign-off and P.S. ----------------------------------------------------- */
.about-sign__greeting{font-size:var(--fs-lead)}
/* The logo file carries its own clear zone; pull it left so the wordmark lines up with the text. */
.about-sign__logo{width:180px;margin:var(--space-2xs) 0 0 -27px}
.about-sign__from{margin-top:var(--space-xs);font-size:var(--fs-sm);color:var(--muted)}
.about-ps{margin-top:var(--space-xl);padding-top:var(--space-m);border-top:1px solid var(--line)}
.about-ps>p{max-width:34em}
.about-ps__mark{margin-right:.35em;font-weight:700}
.about-ps__actions{--cluster:var(--space-s) var(--space-l);margin-top:var(--space-l)}

/* Colophon: the imprint page at the back of a book ----------------------- */
.about-colophon{padding-block:clamp(3rem,2rem + 4vw,6rem)}
.about-colophon__grid{display:grid;gap:var(--space-l)}
.about-device{display:block;width:48px;aspect-ratio:324/244;margin-bottom:var(--space-s);background:var(--blue);-webkit-mask:url("/assets/kupp-mark.svg") center/contain no-repeat;mask:url("/assets/kupp-mark.svg") center/contain no-repeat}
.about-colophon h2{font-size:var(--fs-h3);letter-spacing:-.03em}
.about-colophon__head p{max-width:22em;margin-top:var(--space-2xs);font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}

.about-imprint{margin:0;border-top:1px solid var(--line-strong);font-size:var(--fs-sm);line-height:1.45}
.about-imprint>div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--space-xs);align-items:baseline;padding-block:.6rem;border-bottom:1px solid var(--line)}
.about-imprint dt{color:var(--muted)}
.about-imprint dd{margin:0;font-weight:600}
.about-imprint a{color:var(--blue-deep)}

@media (min-width:640px){
  /* Dotted leaders between label and value, like a book's imprint or contents page. */
  .about-imprint{padding-top:var(--space-2xs)}
  .about-imprint>div{display:flex;gap:.6rem;padding-block:.4rem;border-bottom:0}
  .about-imprint>div::after{content:"";order:1;flex:1 1 2rem;min-width:2rem;border-bottom:2px dotted rgba(22,36,71,.35);transform:translateY(-.25em)}
  .about-imprint dt{flex:none;order:0}
  .about-imprint dd{order:2;text-align:right}
  .about-imprint>div:last-child{padding-bottom:var(--space-s)}
}
@media (min-width:960px){
  .about-colophon__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .about-colophon__head{grid-column:1/span 3;padding-right:var(--space-m)}
  .about-imprint{grid-column:4/span 8}
}
@media (min-width:1200px){
  .about-imprint{grid-column:4/span 7}
}