/* =========================================================
   Migrate Digital — About Page Styles
   Depends on: migrate-tokens.css + home.css + services.css

   Single letter panel — letterhead + two-column (letter +
   dossier) + postscript + foot. Stylization comes from
   light-grey tonal layers stacked inside the panel, bronze
   accent lines, and a small ink-stamp in the letterhead.
   ========================================================= */


/* ---------- Local paper palette (subtle grey layers) ---------- */
/* Scoped to .panel-letter so these don't leak into other
   components. Neutral cool greys (vs. the site's warm cream)
   so the layered letter reads as an archival document laid
   on a desk — not a warm-toned stationery set. */
.panel-letter {
  --paper-1: #FFFFFF;   /* pure white — letter body (primary reading surface) */
  --paper-2: #F7F7F7;   /* top + bottom bars, dossier rail, postscript */
  --paper-3: #EDEDED;   /* dossier head + alt-stripe rows (one step darker) */
}


/* ==========================================================
   SECTION RHYTHM  ·  match interior pages' 120 / 154 cadence.
   ========================================================== */

.section-letter {
  padding-top: 120px;
  padding-bottom: 154px;
}


/* ==========================================================
   PANEL-LETTER  ·  extends home.css .panel + .panel-letter.
   Forces a full-width block (overrides any flex/max-width
   inherited from .panel variants used elsewhere).
   ========================================================== */

.panel-letter {
  display: block;
  max-width: 100%;
  background: var(--paper-1);
}

/* Screen-reader only headline — the letterhead carries the
   visual title; we still want a semantic H2 for a11y. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* ==========================================================
   LETTERHEAD BAND  ·  two rows + absolutely-positioned ink
   stamp in the upper-right. Cream background reads as a
   secondary paper stock layered on the white letter below.
   A bronze dashed rule at the very top echoes an editorial
   masthead.
   ========================================================== */

.letterhead {
  position: relative;
  background: var(--paper-2);
  padding: var(--sp-10) var(--sp-14); /* 24 / 56 */
  display: grid;
  row-gap: var(--sp-5); /* 12 */
  border-bottom: var(--rule) solid var(--hairline);
}

.lh-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.lh-brand {
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-5); /* 16 */
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}

.lh-addr,
.lh-date {
  color: var(--ink-3);
}

.lh-ref {
  color: var(--bronze-hi);
}


/* ==========================================================
   LETTER BODY  ·  white paper — primary reading surface.
   Letter body stays pure white so the grey surround reads as
   a mat/frame around the letter itself.
   ========================================================== */

.letter-body {
  padding: var(--sp-13) var(--sp-14) var(--sp-10); /* 48 / 56 / 24 */
  max-width: 80ch;
  background: var(--paper-1);
}

.letter-body p {
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--t-5); /* 16 */
  line-height: var(--lh-letter);
  color: var(--ink);
  margin-bottom: var(--sp-10); /* 24 */
}
.letter-body p:last-child { margin-bottom: 0; }

/* Greeting line — natural Söhne salutation, not a UI eyebrow.
   Sentence case, medium weight, ink color; reads as the opening
   line of an actual letter rather than a tag above one. */
.letter-greeting {
  font-family: var(--title);
  font-weight: 500;
  font-size: var(--t-6); /* 20 */
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin-bottom: var(--sp-10) !important;
}

/* Drop cap — big bronze title-font letter floated left. */
.has-dropcap { position: relative; }
.dropcap {
  float: left;
  font-family: var(--title);
  font-weight: 600;
  font-size: 3.6em;
  line-height: 0.85;
  color: var(--bronze);
  padding: 4px var(--sp-5) 0 0;
  margin-top: 2px;
}


/* ==========================================================
   TYPING ANIMATION  ·  closing line of the letter types out
   character-by-character when it scrolls into view.

   Accessibility: the full text is always present in a .sr-only
   twin span, so screen readers get the complete line on first
   parse — visual reveal is cosmetic only.

   Behavior:
   - Pre-JS: .typing-visible shows the full line (graceful
     fallback if scripting is disabled).
   - JS init: clears .typing-visible's text + appends a bronze
     caret, then waits for IntersectionObserver to trigger the
     reveal.
   - After typing completes: hold, then erase (faster), then
     retype — infinite loop. Caret blinks forever.
   - prefers-reduced-motion: the caret is hidden and JS skips
     the animation (shows the full line immediately).
   ========================================================== */

.letter-typing {
  /* Reserve roughly one line of letter leading so the layout
     doesn't collapse before the text starts typing. */
  min-height: calc(var(--t-5) * var(--lh-letter));
}

.typing-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--bronze);
  margin-left: 3px;
  vertical-align: -2px;
  animation: caret-blink 0.9s steps(2, end) infinite;
}

@keyframes caret-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-caret { display: none; }
}


/* ==========================================================
   LETTER CTA  ·  single bronze button that scrolls to the
   #contact section below. Sits inside the left column of the
   split, between letter-body and letter-signature. Flush with
   letter-body's horizontal padding.
   ========================================================== */

.letter-cta {
  background: var(--paper-1);
  padding: var(--sp-5) var(--sp-14) var(--sp-13); /* 12 / 56 / 48 */
}


/* ==========================================================
   SIGNATURE  ·  bronze 60×2 rule + name + role. Lives inside
   the left column of .letter-split (beneath letter body).
   ========================================================== */

.letter-signature {
  padding: var(--sp-10) var(--sp-14) var(--sp-13); /* 24 / 56 / 48 */
  border-top: var(--rule) solid var(--hairline);
  background: var(--paper-1);
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--sp-3); /* 8 */
}

.letter-signature .sig-rule {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--bronze);
  margin-bottom: var(--sp-7); /* 16 */
}

.letter-signature .sig-name {
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-5); /* 16 */
  letter-spacing: var(--track-display);
  color: var(--ink);
}

.letter-signature .sig-role {
  color: var(--ink-3);
}


/* ==========================================================
   SPLIT LAYOUT  ·  two columns inside the panel.
   Letter + signature on the left, dossier rail on the right.
   Hairline vertical seam between the two columns.
   ========================================================== */

.letter-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  border-bottom: var(--rule) solid var(--hairline);
}

.letter-split-main {
  /* Holds letter-body + signature stacked. */
  display: flex;
  flex-direction: column;
}

.letter-dossier {
  border-left: var(--rule) solid var(--hairline);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
}


/* ==========================================================
   DOSSIER HEAD  ·  darker grey strip so the dossier reads as
   a layered record card with its own header.
   ========================================================== */

.dossier-head {
  background: var(--paper-3);
  padding: var(--sp-10) var(--sp-10) var(--sp-9); /* 24 / 24 / 20 */
  border-bottom: var(--rule) solid var(--hairline);
  display: grid;
  row-gap: var(--sp-4);
}

.dossier-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-1); /* 10 */
  letter-spacing: var(--track-ui-m);
  text-transform: uppercase;
  color: var(--bronze-hi);
}
.dossier-tag .sq {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--bronze);
}

.dossier-title {
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-5); /* 16 */
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
}

.dossier-meta {
  color: var(--ink-3);
  justify-self: start;
}


/* ==========================================================
   DOSSIER ROWS  ·  bronze label / ink value. Alternating
   grey stripes (every other row) for archival-card texture.
   ========================================================== */

.dossier-rows {
  flex: 1;
  display: grid;
  padding: 0;
  margin: 0;
}

.dossier-row {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--sp-3); /* 8px between label and value */
  padding: var(--sp-7) var(--sp-10); /* 16 / 24 */
  border-bottom: var(--rule) solid var(--hairline);
}

/* Alt stripe — every other row gets the darker grey. */
.dossier-row:nth-child(even) {
  background: var(--paper-3);
}

.dossier-row:last-child { border-bottom: 0; }

.dossier-k {
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-1); /* 10 */
  letter-spacing: var(--track-ui-m);
  text-transform: uppercase;
  color: var(--bronze-hi);
}

.dossier-v {
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--t-3); /* 13 */
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}


/* ==========================================================
   DOSSIER FOOT  ·  small filed stamp at the bottom.
   ========================================================== */

.dossier-foot {
  background: var(--paper-3);
  padding: var(--sp-7) var(--sp-10);
  border-top: var(--rule) solid var(--hairline);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  color: var(--ink-3);
}

.dossier-foot-sep { color: var(--bronze); }


/* ==========================================================
   POSTSCRIPT  ·  full-width margin note beneath the split.
   Cream background + bronze left accent rule so it reads as
   a handwritten addendum pinned to the letter.
   ========================================================== */

.letter-ps {
  background: var(--paper-2);
  padding: var(--sp-10) var(--sp-14); /* 24 / 56 */
  border-left: 4px solid var(--bronze);
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--sp-7);
  align-items: start;
}

.ps-label {
  color: var(--bronze-hi);
  padding-top: 2px; /* optical alignment with first line */
}

.ps-body {
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-4); /* 14 */
  line-height: var(--lh-body-lg);
  color: var(--ink-2);
  margin: 0;
}


/* ==========================================================
   LETTER FOOT  ·  small meta row at the bottom of the panel.
   Cream background closes the grey frame around the letter.
   ========================================================== */

.letter-foot {
  background: var(--paper-2);
  padding: var(--sp-7) var(--sp-14); /* 16 / 56 */
  border-top: var(--rule) solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.letter-foot .pf-l { color: var(--ink-3); }
.letter-foot .pf-r { color: var(--bronze-hi); }


/* ==========================================================
   RESPONSIVE  ·  breakpoints aligned with home / services.
   ========================================================== */

@media (max-width: 960px) {

  .section-letter {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  /* Letterhead collapses vertically on mobile — each row item
     stacks instead of sitting edge-to-edge. */
  .letterhead {
    padding: var(--sp-9) var(--sp-10);
  }
  .lh-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  /* Letter body — reduce horizontal padding; drop cap scales. */
  .letter-body {
    padding: var(--sp-10) var(--sp-10) var(--sp-9);
  }
  .dropcap {
    font-size: 3em;
    padding-right: var(--sp-4);
  }

  .letter-cta {
    padding: var(--sp-5) var(--sp-10) var(--sp-10);
  }

  .letter-signature {
    padding: var(--sp-9) var(--sp-10) var(--sp-10);
  }

  .letter-ps {
    padding: var(--sp-9) var(--sp-10);
    grid-template-columns: 40px 1fr;
    column-gap: var(--sp-5);
  }

  .letter-foot {
    padding: var(--sp-7) var(--sp-10);
    flex-wrap: wrap;
    gap: var(--sp-4);
  }

  /* Split collapses to stacked (letter first, dossier below).
     Vertical seam becomes a horizontal one. */
  .letter-split {
    grid-template-columns: 1fr;
  }
  .letter-dossier {
    border-left: 0;
    border-top: var(--rule) solid var(--hairline);
  }

}

@media (max-width: 560px) {

  .letter-body {
    padding: var(--sp-9) var(--sp-9) var(--sp-7);
  }
  .dropcap {
    font-size: 2.6em;
  }
  .dossier-row {
    padding: var(--sp-5) var(--sp-9);
  }

}