/* ── era.css — the desk ages with the decades (banking/js/era.js). Tokens from desk.css.
   body.era-1990s, .era-2000s, .era-2010s, .era-2020s. The 2010s is the desk as built.
   The era's colours are tokens defined once here; under each era class they override
   --duotone and --sepia, so the photographs re-print without a rule of their own.
   The medium of the era (the ticker's label, the strip's line, a card's channel, a
   letter's header) is generated content from data attributes era.js sets, so no text
   in the DOM changes. Nothing blinks; nothing moves. ───────────────────────────── */
:root{
  /* the photographs, per era: the paper they are printed on */
  --era-film:#c9c4b8;          /* 1990s: black and white film, a neutral grey print */
  --era-film-paper:#8f8a80;    /* 1990s: the same on paper, in place of --sepia */
  --era-warm:#f0b27a;          /* 2000s: a warmer, washed duotone */
  --era-warm-paper:#9a7a55;
  --era-wash:#f7e9d2;          /* 2000s: the cream that lifts the blacks */
  --era-cool:#9cc0d6;          /* 2020s: cooler and cleaner */
  --era-cool-paper:#6f8796;
  --era-dot:#1c1c1c;           /* the halftone's ink */
  /* the props: fax paper, scan lines, the wire's black */
  --era-fax:#eeebe2;           /* thermal fax paper */
  --era-scan:rgba(227,232,238,.035);   /* a scan line on the dark desk */
  --era-scan-ink:rgba(22,22,22,.055);  /* a scan line on paper */
  --era-wire:#000;             /* the wire's black ground */
  --era-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* ═══ the photographs ═══ */
body.era-1990s{ --duotone:var(--era-film); --sepia:var(--era-film-paper); }
body.era-2000s{ --duotone:var(--era-warm); --sepia:var(--era-warm-paper); }
body.era-2020s{ --duotone:var(--era-cool); --sepia:var(--era-cool-paper); }
body.era-1990s .art-photo-in, body.era-2000s .art-photo-in{ position:relative; }

/* 1990s: grainy film, a heavier halftone */
body.era-1990s .art-photo img{ filter:grayscale(1) contrast(1.45) brightness(.9); }
body.era-1990s .art-photo:not(.paper) .art-photo-in::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--era-grain), radial-gradient(circle, var(--era-dot) 18%, transparent 22%); background-size:180px 180px, 3px 3px;
  mix-blend-mode:multiply; opacity:.32; }
body.era-1990s .art-photo.paper .art-photo-in img{ filter:grayscale(1) contrast(1.5) brightness(1.02); }
body.era-1990s .art-photo.paper .art-photo-in::after{ background-image:radial-gradient(circle, transparent 50%, var(--paper) 52%), var(--era-grain); background-size:4px 4px, 180px 180px; opacity:.78; }

/* 2000s: warm and a little washed */
body.era-2000s .art-photo img{ filter:grayscale(1) contrast(.88) brightness(1.1); }
body.era-2000s .art-photo:not(.paper) .art-photo-in::after{ content:''; position:absolute; inset:0; pointer-events:none; background:var(--era-wash); mix-blend-mode:screen; opacity:.16; }
body.era-2000s .art-photo.paper .art-photo-in::after{ opacity:.35; }

/* 2020s: cool, crisp, no halftone */
body.era-2020s .art-photo img{ filter:grayscale(1) contrast(1.06) brightness(1.04); }
body.era-2020s .art-photo.paper .art-photo-in::after{ opacity:0; }

/* ═══ the strip: the medium of the era under the brand ═══ */
body[data-gc-era] #strip .s-brand[data-era-medium]{ flex-direction:column; justify-content:center; align-items:flex-start; line-height:var(--lh-1); }
body[data-gc-era] #strip .s-brand[data-era-medium]::after{ content:attr(data-era-medium); font-size:var(--fs-1); font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:var(--sp-0); }

/* ═══ the ticker ═══ */
body[data-gc-era] #tb-ticker[data-era-medium]::before{ content:attr(data-era-medium); text-transform:uppercase; letter-spacing:.14em; font-size:var(--fs-1); padding:0 var(--sp-1h); margin-right:var(--sp-2); border:1px solid var(--line-2); color:var(--muted); }
/* 1990s: a teleprinter on a paper roll */
body.era-1990s #tick{ border-top:1px dashed var(--line-2); background-image:repeating-linear-gradient(0deg, transparent 0 calc(3 * var(--u)), var(--era-scan) calc(3 * var(--u)) calc(4 * var(--u))); }
body.era-1990s #tb-ticker{ font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text); }
/* 2000s: the wire, amber on black */
body.era-2000s #tick{ background:var(--era-wire); }
body.era-2000s #tb-ticker{ font-family:var(--mono); font-weight:600; color:var(--accent); }
body.era-2000s #tb-ticker[data-era-medium]::before{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
/* 2010s: a cleaner feed */
body.era-2010s #tb-ticker[data-era-medium]::before{ border-color:transparent; color:var(--dim); padding-left:0; }
/* 2020s: live, light */
body.era-2020s #tb-ticker{ letter-spacing:.02em; }
body.era-2020s #tb-ticker[data-era-medium]::before{ border-radius:calc(8 * var(--u)); border-color:var(--accent-dim); color:var(--accent); }

/* ═══ the queue: the channel each card came in on ═══ */
body[data-gc-era] .qi-kind[data-ch]::after{ content:' · by ' attr(data-ch); color:var(--dim); }

/* ═══ the letters ═══ */
/* the sender line carries the medium as a small tag */
body[data-gc-era] .mail-row .from[data-medium]::before{ content:attr(data-medium); display:inline-block; font-family:var(--mono); font-size:var(--fs-1); line-height:var(--lh-1); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); border:1px solid var(--line-2); padding:0 var(--sp-0); margin-right:var(--sp-1); vertical-align:middle; }
/* the header of the open letter: how it was received */
body[data-gc-era] .mail-body .hdr[data-recv]::before{ content:attr(data-recv); display:block; font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px dashed var(--line-2); padding-bottom:var(--sp-1); margin-bottom:var(--sp-1); }
body.era-2020s .mail-body .hdr[data-medium="video call"]::before{ color:var(--accent); border-bottom-style:solid; }
/* 1990s: fax paper, scan lines on the letter and on the documents */
body.era-1990s .mail-body{ background-image:repeating-linear-gradient(0deg, transparent 0 calc(3 * var(--u)), var(--era-scan) calc(3 * var(--u)) calc(4 * var(--u))); }
body.era-1990s .mail-body .hdr[data-medium="fax"]::before{ border-bottom-style:dotted; letter-spacing:.2em; }
body.era-1990s .pane .doc:not(.paper):not(.art-ar):not(.exam):not(.cv), body.era-1990s .pane .memo{
  background-color:var(--era-fax); background-image:repeating-linear-gradient(0deg, transparent 0 calc(3 * var(--u)), var(--era-scan-ink) calc(3 * var(--u)) calc(4 * var(--u))); }