/* The Lore & Crew page (/crew). Plain CSS, linked with the asset
   cache-buster from web/templates/fragments/crew/crew.templ, so a boosted
   swap brings it along. Every rule is scoped under .lc (the page root,
   [data-crew-page]) so nothing leaks into the rest of the room.

   The merge of the bake-off finalists (2026-09-30): p6 "After Hours,
   polished" is the base; p7 gives the lamp and the opening; p8 the Cases
   folder. The room after hours: a few big objects, one warm lamp clamped to
   the wall and the green of two terminals; the wall between them falls into
   shadow on purpose, a beat rather than a void.
     hero   : the lamp flickers on over a desk; its cone falls behind the crew
              folder (the h1 is the home board's title card, grown up, and
              stays on one line from 1920 down to 360); the prologue CRT on
              the desk powers up, the lore index card taped to its top
     people : five FILES (sepia polaroid taped over a typed sheet), one pool
              of lamp light each, alternating sides, ghost file numbers
     after  : "Values" painted on the wall; the four tenets stuck around the
              sign-off monitor as sticky notes; the Cases folder beside it
              holds the slip that leads on
   Nothing covers text: tape sits on paper margins, the lamp's cone is behind
   the objects, the stickies overlap only the monitor's bezel.
   Motion: transforms and opacity only (the room-dark overlay also flips
   visibility), all inside prefers-reduced-motion: no-preference. The opening
   plays once in CSS and its end state is the resting state; crew-page.js
   arms only what arrives from below. No JS or reduced motion = the final,
   lit state. */

.lc {
  --lc-dark: rgba(2, 5, 3, .56);           /* after hours: the wall drops a stop and a half */
  --lc-lamp: 255, 212, 146;                /* the lamp's warm light (rgb, used at low alpha) */
  --lc-green: 110, 255, 95;                /* the terminals' light */
  --lc-manila: #d2ae70;                    /* folder stock */
  --lc-manila-lo: #b08a50;                 /* the folder's shaded edge */
  --lc-stamp: #8f2217;                     /* stamp ink, solid: 6.9:1 on the label */
  --lc-tape: rgba(232, 220, 178, .9);
  --lc-tape-clip: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 3% 94%, 0 50%);
  --lc-ovl: clamp(40px, 5vw, 72px);        /* how far a polaroid overlaps its sheet's margin */
  --lc-gap: clamp(80px, 14vh, 180px);      /* darkness between two files */
  --lc-lw: clamp(128px, 14vw, 250px);      /* the lamp's width (its svg is 190 × 170) */
  --lc-lx: calc(var(--pad) - 14px);        /* the lamp's left edge: its clamp sits on the wall at the gutter */
  --lc-ly: 8px;                            /* the lamp's top edge, under the header */
  --lc-mx: calc(var(--lc-lx) + var(--lc-lw) * .758);   /* the shade's mouth, in hero coordinates */
  --lc-my: calc(var(--lc-ly) + var(--lc-lw) * .426);
  --lc-desk: clamp(72px, 11vh, 128px);     /* the desk top seen from the front */

  /* the page owns its column: darkness spans the whole viewport width */
  max-width: none;
  padding: 0;
  background: linear-gradient(to bottom, var(--lc-dark), var(--lc-dark) calc(100% - 260px), rgba(2, 5, 3, 0));
  color: var(--color-phosphor);
}
.lc p,
.lc h1,
.lc h2,
.lc h3,
.lc ul,
.lc ol,
.lc dl,
.lc dd,
.lc figure { margin: 0; }
.lc ul,
.lc ol { list-style: none; padding: 0; }
.lc a { color: inherit; }

/* ── shared: tape, CRTs on the dark wall, terminal lines, the desk ── */
.lc .lc-tape {
  position: absolute;
  z-index: 2;
  height: 26px;
  background: var(--lc-tape);
  clip-path: var(--lc-tape-clip);
  pointer-events: none;
}
.lc .lc-crt {
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .4), inset -3px -4px 0 rgba(0, 0, 0, .2),
    var(--sh), 0 0 160px 30px rgba(var(--lc-green), .08);
}
.lc .lc-screen { font: 14.5px/1.6 var(--font-term); overflow-wrap: anywhere; }
.lc .lc-tube {
  position: relative;
  isolation: isolate;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .55em;
  transform-origin: 50% 50%;
}
.lc .lc-cmd { color: var(--color-phosphor-hi); }
.lc .lc-cmd + .lc-out,
.lc .lc-cmd + .lc-ls,
.lc .lc-cmd + .lc-signoff { margin-top: -.2em; }
.lc .lc-out + .lc-cmd,
.lc .lc-ls + .lc-cmd { margin-top: .5em; }
.lc .lc-prompt { margin-top: auto; padding-top: .4em; }
.lc .lc-kicker {
  font: 700 max(var(--fs-floor, 0px), 11px)/1.3 var(--font-term);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
/* the neck a CRT stands on */
.lc .lc-neck {
  display: block;
  width: 36%;
  height: clamp(14px, 1.8vw, 26px);
  margin: 0 auto;
  background: linear-gradient(90deg, var(--color-plastic-lo), var(--color-plastic) 40%, var(--color-plastic-lo));
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}
/* a wood desk top seen from the front, with its dark front edge */
.lc .lc-desk,
.lc .lc-desk-end {
  background:
    linear-gradient(180deg, rgba(var(--lc-lamp), .14), transparent 40%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 11px, rgba(255, 255, 255, .03) 11px 13px, transparent 13px 29px),
    linear-gradient(180deg, var(--color-wood-hi) 0 10px, var(--color-wood) 10px 70%, #3a2716);
  box-shadow: inset 0 2px 0 rgba(255, 230, 190, .22), 0 18px 30px rgba(0, 0, 0, .45);
}
.lc .lc-desk i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background: linear-gradient(180deg, #2e1f13, #1c130c);
  box-shadow: 0 -2px 0 rgba(255, 220, 170, .14);
}

/* ══════════ HERO: lights on over the desk ══════════ */
.lc .lc-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(100svh - var(--hdr));
  display: flex;
  align-items: flex-end;
  /* top: clear of the lamp and its glow; bottom: the objects stand on the desk */
  padding: max(calc(var(--lc-ly) + var(--lc-lw) * .7 + 20px), 12vh) var(--pad) calc(var(--lc-desk) * .5);
}
/* the room light: the lamp's pool on the wall, and the green of the terminal */
.lc .lc-glow {
  position: absolute;
  z-index: -3;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 58% at 30% 52%, rgba(var(--lc-lamp), .15), rgba(var(--lc-lamp), .05) 55%, transparent 80%),
    radial-gradient(ellipse 30% 40% at 80% 62%, rgba(var(--lc-green), .09), transparent 70%);
}
/* the cone: the lamp's light made visible, falling down-right from the
   shade's mouth. It sits BEHIND the objects, so it lights the wall and the
   desk and never lowers the contrast of any text. */
.lc .lc-cone {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  filter: blur(10px);                      /* feathers the clipped edges of the beam below */
}
.lc .lc-cone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at var(--lc-mx) var(--lc-my),
    rgba(var(--lc-lamp), .3), rgba(var(--lc-lamp), .13) 38%, rgba(var(--lc-lamp), .04) 66%, transparent 86%);
  clip-path: polygon(
    calc(var(--lc-mx) - var(--lc-lw) * .16) calc(var(--lc-my) + var(--lc-lw) * .1),
    calc(var(--lc-mx) + var(--lc-lw) * .1) calc(var(--lc-my) - var(--lc-lw) * .14),
    100% 64%, 100% 100%, 16% 100%);
}
.lc .lc-desk {
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--lc-desk);
}
/* the lamp itself: the home hero's clamped swing-arm lamp, on the wall top-left */
.lc .lc-lamp {
  position: absolute;
  z-index: 4;
  left: var(--lc-lx);
  top: var(--lc-ly);
  width: var(--lc-lw);
  height: auto;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(6px 10px 8px rgba(0, 0, 0, .5));
}
/* the room before the lamp: only ever visible while the opening plays */
.lc .lc-dark {
  position: absolute;
  z-index: 6;
  inset: 0;
  background: #010301;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.lc .lc-hero-in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding-left: clamp(0px, 6vw, 110px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
  align-items: end;
}

/* the folder: manila, a tab, the files peeking out, the title label taped on */
.lc .lc-folder {
  grid-column: 1 / 8;
  grid-row: 1;
  position: relative;
  isolation: isolate;
  margin-top: 40px;                        /* room for the tab above the fold line */
  transform: rotate(-.7deg);
  transform-origin: 30% 100%;
  container-type: inline-size;
}
.lc .lc-folder-tab,
.lc .lc-next-tab {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 100%;
  width: min(46%, 340px);
  height: 40px;
  padding: 13px 24px 0;
  background: linear-gradient(180deg, #ddbd82, var(--lc-manila));
  clip-path: polygon(0 100%, 4% 0, 92% 0, 100% 100%);
  font: 700 max(var(--fs-floor, 0px), 11px)/1 var(--font-term);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #463417;
  white-space: nowrap;
}
.lc .lc-folder-peek {
  position: absolute;
  z-index: 0;
  right: 7%;
  bottom: calc(100% - 40px);
  width: 52%;
  height: 64px;
}
.lc .lc-folder-peek i {
  position: absolute;
  inset: 0;
  background: var(--color-paper);
  box-shadow: var(--sh-s);
  transform: rotate(1.6deg) translateY(4px);
}
.lc .lc-folder-peek i + i {
  background: #ebe4d1;
  transform: rotate(-1.1deg) translate(-26px, 14px);
}
.lc .lc-folder-face,
.lc .lc-next-face {
  position: relative;
  z-index: 1;
  /* lit from the lamp at top-left: a warm hot spot, then the stock falls off */
  background:
    radial-gradient(ellipse 62% 54% at 14% 8%, rgba(255, 240, 200, .42), transparent 70%),
    radial-gradient(ellipse 90% 70% at 100% 110%, rgba(60, 36, 8, .26), transparent 70%),
    repeating-linear-gradient(92deg, rgba(90, 60, 20, .025) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, var(--lc-manila) 40%, var(--lc-manila-lo));
  color: var(--color-ink);
  box-shadow: inset 0 2px 0 rgba(255, 245, 215, .5), inset 0 -3px 0 rgba(0, 0, 0, .12), var(--sh);
}
.lc .lc-folder-face {
  min-height: min(580px, 60svh);
  padding: clamp(26px, 7cqi, 72px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 5cqi, 52px);
}
/* a crease where the folder was once filed too full */
.lc .lc-folder-face::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12) 20%, rgba(255, 245, 215, .3) 21%, rgba(0, 0, 0, .1) 60%, transparent);
  pointer-events: none;
}
/* the title label: the home board's pinned title card, grown up. The h1 is
   sized by the folder's width (cqi) and never wraps: one line, 1920 to 360. */
.lc .lc-label {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  padding: clamp(20px, 4cqi, 40px) clamp(20px, 4.6cqi, 48px) clamp(18px, 3.4cqi, 32px);
  background:
    radial-gradient(ellipse 80% 70% at 20% 10%, #fffef9, transparent 70%),
    var(--color-polaroid);
  transform: rotate(1.1deg);
  box-shadow: 3px 6px 10px rgba(40, 24, 4, .35);
}
.lc .lc-label-tape {
  left: 50%;
  top: -13px;
  width: 124px;
  margin-left: -62px;
  transform: rotate(-2.4deg);
}
.lc .lc-label h1 {
  margin: .16em 0 .14em;
  font: 800 clamp(30px, 11.2cqi, 150px)/.92 var(--font-term);
  letter-spacing: -.035em;
  white-space: nowrap;
  color: var(--color-ink);
}
.lc .lc-count { font: 700 clamp(13px, 2cqi, 18px)/1.3 var(--font-term); color: var(--color-ink); }
.lc .lc-deck {
  max-width: 36ch;
  font: 500 clamp(16px, 3.3cqi, 28px)/1.42 var(--font-term);
  letter-spacing: -.005em;
  color: var(--color-ink);
  text-wrap: pretty;
}

/* the prologue terminal, standing on the desk, the lore card taped to its top */
.lc .lc-hero-crt {
  grid-column: 8 / 13;
  grid-row: 1;
  position: relative;
  z-index: 2;
  margin: 0 0 calc(var(--lc-desk) * -.12) calc(-1 * var(--cg));
  display: flex;
  flex-direction: column;
}
.lc .lc-hero-crt .lc-crt { min-height: clamp(360px, 46svh, 540px); }
.lc .lc-hero-crt .lc-screen { font-size: clamp(13px, .95vw, 15.5px); }
/* the lore note: the home board's typed, ruled index card, taped over the
   monitor's top edge (it covers only bezel, never the glass) */
.lc .lc-lore {
  --line: 22px;
  position: relative;
  z-index: 3;
  width: min(460px, 88%);
  margin: 0 0 -20px 5%;
  padding: 22px 24px var(--line);
  color: var(--color-ink);
  font: 14px/var(--line) var(--font-term);
  background:
    linear-gradient(rgba(191, 53, 39, .5), rgba(191, 53, 39, .5)) 0 15px / 100% 1px no-repeat,
    repeating-linear-gradient(transparent 0 calc(var(--line) - 1px), rgba(31, 76, 156, .17) calc(var(--line) - 1px) var(--line)) 0 22px / 100% calc(100% - 22px - var(--line)) no-repeat,
    var(--color-paper);
  transform: rotate(-1.6deg);
  box-shadow: 5px 9px 14px rgba(0, 0, 0, .5);
}
.lc .lc-lore-tape {
  left: 56%;
  top: -14px;
  width: 104px;
  transform: rotate(3deg);
}
/* the rename: the old name struck through in red pen, the new one lit */
.lc .lc-old {
  position: relative;
  color: var(--color-phosphor-dim);
}
.lc .lc-old::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 52%;
  height: 3px;
  background: #ff5a3c;
  box-shadow: 0 0 8px rgba(255, 90, 60, .8);
  transform: rotate(-3deg);
  transform-origin: 0 50%;
}
.lc .lc-new {
  position: relative;
  color: var(--color-phosphor-hi);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(160, 255, 130, .75);
}
.lc .lc-new::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px -4px;
  background: rgba(166, 245, 154, .14);
}
.lc .lc-ls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15ch, 1fr));
  column-gap: 2ch;
}
.lc .lc-ls a {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  text-decoration: underline dotted var(--color-phosphor-dim);
  text-underline-offset: 4px;
}
.lc .lc-ls a:hover { color: var(--color-phosphor-hi); background: rgba(166, 245, 154, .1); }

/* ══════════ PEOPLE: five files, one pool of light each ══════════ */
.lc .lc-files {
  width: 100%;                   /* never shrink-to-fit while the page is still loading (CLS) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--lc-gap);
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(40px, 6vh, 90px) var(--pad) 0;
}
.lc .lc-file {
  --sr: .5deg;                              /* the sheet's own tilt: paper is never 0° */
  position: relative;               /* no isolation: its pool and number sit behind every object on the wall */
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
  scroll-margin-top: calc(var(--hdr) + 24px);
}
.lc .lc-file-r {
  --sr: -.6deg;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}
.lc .lc-pool {
  position: absolute;
  z-index: -2;
  inset: -150px -4%;             /* px, not %: a %-top moves when the file settles its height (CLS) */
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 34% at 26% 40%, rgba(var(--lc-lamp), .26), transparent 72%),
    radial-gradient(ellipse 62% 56% at 40% 46%, rgba(var(--lc-lamp), .2), rgba(var(--lc-lamp), .06) 55%, transparent 76%);
}
.lc .lc-file-r .lc-pool {
  background:
    radial-gradient(ellipse 30% 34% at 74% 40%, rgba(var(--lc-lamp), .26), transparent 72%),
    radial-gradient(ellipse 62% 56% at 60% 46%, rgba(var(--lc-lamp), .2), rgba(var(--lc-lamp), .06) 55%, transparent 76%);
}
/* the file number, painted big and dim on the wall behind the sheet */
.lc .lc-num {
  position: absolute;
  z-index: -1;
  right: -.04em;
  top: -.6em;
  font: 800 clamp(120px, 17vw, 280px)/1 var(--font-term);
  letter-spacing: -.05em;
  color: rgba(222, 255, 208, .075);
  pointer-events: none;
  user-select: none;
}
.lc .lc-file-r .lc-num { right: auto; left: -.04em; }

/* the polaroid: sepia portrait, first name in marker, the tag */
.lc .lc-pol {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  position: relative;
  z-index: 3;
  width: min(440px, calc(100% + var(--lc-ovl)));
  margin: clamp(40px, 6vw, 88px) calc(-1 * var(--lc-ovl)) 0 0;
  padding: clamp(10px, 1vw, 15px) clamp(10px, 1vw, 15px) 0;
  background: var(--color-polaroid);
  transform: rotate(var(--r, -2deg));
  box-shadow: 8px 14px 24px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.lc .lc-file-r .lc-pol {
  grid-column: 2;
  justify-self: start;
  margin: clamp(40px, 6vw, 88px) 0 0 calc(-1 * var(--lc-ovl));
}
.lc .lc-pol img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  background: #cfc3a4;
  filter: sepia(.6) saturate(.72) contrast(1.06) brightness(.96);
}
.lc .lc-pol figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding: clamp(10px, 1.1vw, 15px) 4px clamp(14px, 1.5vw, 20px);
}
.lc .lc-pol-name { font: clamp(24px, 2.3vw, 34px)/1.05 var(--font-marker); color: var(--color-pen-navy); }
.lc .lc-pol-tag {
  font: 700 max(var(--fs-floor, 0px), clamp(10.5px, .85vw, 12px))/1.2 var(--font-term);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.lc .lc-pol-tape {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 38%;
  height: 28px;
  margin-left: -19%;
  z-index: 2;
  background: var(--lc-tape);
  transform: rotate(calc(var(--r, -2deg) * -1.4));
  box-shadow: 0 2px 3px rgba(0, 0, 0, .18);
  clip-path: var(--lc-tape-clip);
}

/* the typed sheet: paper, a red margin rule, a page under it, tape */
.lc .lc-sheet {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 2;
  container: lcsheet / inline-size;
  --rx: calc(var(--lc-ovl) + clamp(14px, 1.8vw, 30px));
  padding: clamp(28px, 3.4vw, 54px) clamp(24px, 3.6vw, 60px) clamp(24px, 2.8vw, 42px) calc(var(--lc-ovl) + clamp(30px, 3.6vw, 60px));
  background:
    linear-gradient(90deg, transparent calc(var(--rx) - 1px), rgba(191, 53, 39, .55) calc(var(--rx) - 1px), rgba(191, 53, 39, .55) calc(var(--rx) + 1px), transparent calc(var(--rx) + 1px)),
    radial-gradient(ellipse 70% 50% at 30% 16%, #fbf8ef, transparent 70%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(120, 96, 50, .08), transparent 70%),
    var(--color-paper);
  color: var(--color-ink);
  transform: rotate(var(--sr));
  box-shadow: 9px 10px 0 -2px #d9d0b8, 9px 10px 0 -1px rgba(0, 0, 0, .1), var(--sh);
}
.lc .lc-file-r .lc-sheet {
  grid-column: 1;
  --rx: clamp(34px, 3.8vw, 60px);
  padding-left: clamp(52px, 5.6vw, 88px);
  padding-right: calc(var(--lc-ovl) + clamp(24px, 3vw, 48px));
  box-shadow: -9px 10px 0 -2px #d9d0b8, -9px 10px 0 -1px rgba(0, 0, 0, .1), var(--sh);
}
.lc .lc-sheet-tape {
  position: absolute;
  top: -13px;
  right: 18%;
  width: 110px;
  height: 26px;
  background: var(--lc-tape);
  transform: rotate(2.6deg);
  clip-path: var(--lc-tape-clip);
}
.lc .lc-file-r .lc-sheet-tape { right: auto; left: 22%; transform: rotate(-2.2deg); }
.lc .lc-sheet-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  margin-bottom: clamp(18px, 2vw, 28px);
  border-bottom: 1px dashed rgba(29, 35, 32, .28);
  font: 700 max(var(--fs-floor, 0px), 11px)/1.3 var(--font-term);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.lc .lc-role {
  font: 700 max(var(--fs-floor, 0px), 12px)/1.4 var(--font-term);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-stamp-red);
}
.lc .lc-name {
  margin: 8px 0 12px;
  font: 800 clamp(28px, 6.2cqi, 58px)/1 var(--font-term);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.lc .lc-focus {
  font: 700 max(var(--fs-floor, 0px), 12px)/1.65 var(--font-term);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-pen-blue);
}
.lc .lc-sheet-body {
  display: grid;
  gap: 26px;
  margin-top: clamp(20px, 2.4vw, 32px);
}
.lc .lc-bio { font: 14.5px/1.72 var(--font-term); max-width: 62ch; text-wrap: pretty; }
.lc .lc-side { display: flex; flex-direction: column; gap: 12px; }
.lc .lc-h3 {
  font: 700 max(var(--fs-floor, 0px), 11px)/1.3 var(--font-term);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.lc .lc-stats + .lc-h3 { margin-top: 10px; }
.lc .lc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.lc .lc-stats div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding-inline-start: 12px;
  border-inline-start: 2px solid rgba(31, 76, 156, .35);
}
.lc .lc-stats dd { font: 800 clamp(28px, 5.4cqi, 44px)/1 var(--font-term); letter-spacing: -.03em; color: var(--color-ink); }
.lc .lc-stats small { font-size: max(var(--fs-floor, 0px), .46em); margin-inline-start: .12em; letter-spacing: 0; color: var(--color-pen-blue); }
.lc .lc-stats dt { margin-top: 4px; font: max(var(--fs-floor, 0px), 12.5px)/1.35 var(--font-term); color: var(--color-ink-soft); }
.lc .lc-strengths { display: flex; flex-direction: column; gap: 9px; font: 13.5px/1.55 var(--font-term); }
.lc .lc-strengths li { position: relative; padding-inline-start: 18px; }
.lc .lc-strengths li::before { content: "▸"; position: absolute; inset-inline-start: 0; color: var(--color-stamp-red); }
.lc .lc-arsenal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: 14px;
  border-top: 1px dashed rgba(29, 35, 32, .28);
  font: 13.5px/1.6 var(--font-term);
}
.lc .lc-dot { color: var(--color-ink-soft); }
.lc .lc-open {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-top: 8px;
  font: 700 14px/1.2 var(--font-term);
  color: var(--color-pen-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(31, 76, 156, .45);
  overflow-wrap: anywhere;
}
.lc .lc-open:hover { text-decoration-color: currentColor; }
@container lcsheet (min-width: 700px) {
  .lc .lc-sheet-body { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 4cqi, 48px); }
}


/* ══════════ AFTER: Values over the desk, the sign-off monitor, the Cases folder ══════════ */
.lc .lc-finale {
  position: relative;                    /* no isolation: its pool sits behind every object on the wall */
  width: 100%;
  box-sizing: border-box;
  max-width: 1600px;
  margin: 0 auto;
  padding: calc(var(--lc-gap) + 40px) var(--pad) clamp(40px, 5vh, 72px);
}
.lc .lc-pool-finale {
  inset: 0 -10%;
  background:
    radial-gradient(ellipse 40% 34% at 50% 66%, rgba(var(--lc-green), .15), rgba(var(--lc-green), .045) 55%, transparent 76%),
    radial-gradient(ellipse 30% 30% at 80% 74%, rgba(var(--lc-lamp), .1), transparent 72%),
    radial-gradient(ellipse 50% 30% at 28% 22%, rgba(var(--lc-lamp), .1), transparent 72%);
}
/* "Values", painted on the wall above the desk: a stencil, not a card */
.lc .lc-values-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.lc .lc-values-k { grid-column: 1 / -1; margin-bottom: 8px; color: #b9b39d; }
.lc .lc-values-h {
  padding-top: .16em;                      /* the tight line box's glyph area stays off the kicker */
  font: 800 clamp(64px, 11vw, 200px)/.8 var(--font-term);
  letter-spacing: -.05em;
  color: #e6dfc8;
  text-shadow: 0 0 1px rgba(230, 223, 200, .6), 3px 5px 0 rgba(0, 0, 0, .35);
}
.lc .lc-values-intro {
  max-width: 50ch;
  padding-bottom: .4em;
  font: 500 clamp(15px, 1.35vw, 20px)/1.55 var(--font-term);
  color: #d8d2bd;
  text-wrap: pretty;
}

/* the desk scene. Desktop: three stickies on the wall, the fourth stuck on
   the monitor's left bezel, the monitor in the middle on the desk, the Cases
   folder standing beside it. The list is a subgrid, so the notes share the
   scene's tracks; it is not positioned, so it never sits over the monitor. */
.lc .lc-scene {
  --sg: clamp(20px, 2.4vw, 40px);          /* the scene's gaps */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: var(--sg);
  row-gap: var(--sg);
}
.lc .lc-stickies {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.lc .lc-sticky {
  position: relative;
  z-index: 3;
  width: min(100%, 380px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px 26px;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255, 252, 200, .55), transparent 70%),
    linear-gradient(170deg, #f7eb8e, var(--color-sticky) 58%, #e0cc5c);
  color: var(--color-sticky-ink);
  transform: rotate(var(--r, 3deg));
  box-shadow: 3px 8px 12px rgba(0, 0, 0, .45);
}
/* the curl at the unglued bottom edge */
.lc .lc-sticky::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -1px;
  height: 12px;
  background: linear-gradient(to bottom, transparent, rgba(80, 64, 0, .12));
  pointer-events: none;
}
.lc .lc-sticky-1 { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; }
.lc .lc-sticky-2 { grid-column: 2; grid-row: 1; justify-self: center; align-self: end; margin-bottom: calc(-1 * var(--sg) - 20px); }
.lc .lc-sticky-3 { grid-column: 3; grid-row: 1; justify-self: start; align-self: start; margin-top: clamp(30px, 4vw, 70px); }
.lc .lc-sticky-4 { grid-column: 1; grid-row: 2; justify-self: end; align-self: end; margin: 0 calc(-1 * var(--sg) - 18px) clamp(50px, 6vw, 90px) 0; }
.lc .lc-sticky-tape {
  left: 30%;
  top: -11px;
  width: 40%;
  height: 22px;
  background: rgba(232, 220, 178, .8);
  transform: rotate(-3deg);
}
.lc .lc-tcat {
  font: 700 max(var(--fs-floor, 0px), 11.5px)/1.35 var(--font-term);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6e460c;
}
.lc .lc-tn { margin-inline-end: .5em; color: #8f2217; }
.lc .lc-ttl { font: clamp(23px, 1.8vw, 29px)/1.1 var(--font-marker); color: var(--color-sticky-ink); }
.lc .lc-t1 { font: clamp(18px, 1.3vw, 21px)/1.22 var(--font-marker); color: var(--color-pen-blue); }
.lc .lc-tbody {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(43, 42, 26, .3);
  font: 15px/1.6 var(--font-term);
  color: var(--color-sticky-ink);
}

/* the sign-off monitor: the page's last green light */
.lc .lc-exit {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 2;
  align-self: end;
  width: 100%;
  margin-bottom: -10px;                    /* its foot stands on the desk top */
  display: flex;
  flex-direction: column;
}
.lc .lc-screen-exit {
  aspect-ratio: 4 / 3;
  padding: clamp(24px, 3vw, 44px);
}
.lc .lc-screen-exit .lc-tube { justify-content: center; gap: .9em; }
.lc .lc-signoff {
  font: 700 clamp(22px, 2.3vw, 38px)/1.25 var(--font-term);
  letter-spacing: -.01em;
  color: var(--color-phosphor-hi);
  text-shadow: 0 0 12px rgba(160, 255, 130, .4);
  text-wrap: balance;
}
.lc .lc-screen-exit .lc-prompt { margin-top: .4em; }

/* the Cases folder: manila like the crew folder, standing on the desk beside
   the monitor, the next slip taped inside it */
.lc .lc-next {
  grid-column: 3;
  grid-row: 2;
  position: relative;
  z-index: 2;
  isolation: isolate;
  align-self: end;
  justify-self: start;
  width: min(100%, 400px);
  margin: 40px 0 -10px;                    /* room for the tab; stands on the desk top */
  transform: rotate(1.4deg);
  transform-origin: 30% 100%;
  container-type: inline-size;
}
.lc .lc-next-tab { width: 64%; }
.lc .lc-next-peek { right: 6%; width: 26%; }   /* the papers peek out beside the tab, never over its text */
.lc .lc-next-face {
  min-height: clamp(260px, 20vw, 360px);
  padding: clamp(22px, 8cqi, 40px) clamp(18px, 7cqi, 36px) clamp(22px, 7cqi, 34px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* the next slip: the link on, a real white slip taped inside the folder */
.lc .lc-slip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 22px 22px;
  background: var(--color-polaroid);
  color: var(--color-ink);
  text-decoration: none;
  transform: rotate(-1.6deg);
  box-shadow: var(--sh-s);
}
.lc .lc-slip-tape { left: 50%; top: -13px; width: 96px; margin-left: -48px; transform: rotate(2deg); }
.lc .lc-slip-k {
  font: 700 max(var(--fs-floor, 0px), 11px)/1.3 var(--font-term);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.lc .lc-slip-t { font: 800 clamp(40px, 19cqi, 84px)/.95 var(--font-term); letter-spacing: -.03em; white-space: nowrap; }
.lc .lc-slip-t span { font-size: max(var(--fs-floor, 0px), .56em); vertical-align: .2em; color: var(--color-stamp-red); }
.lc .lc-slip-s { font: 700 15px/1.3 var(--font-term); color: var(--color-ink); }
.lc .lc-slip:hover .lc-slip-t,
.lc .lc-slip:focus-visible .lc-slip-t { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }
.lc .lc-stamp {
  align-self: flex-end;
  margin-top: auto;
  padding: .5em .8em .42em;
  border: 3px double var(--lc-stamp);
  border-radius: 3px;
  background: rgba(251, 250, 245, .35);
  font: 700 max(var(--fs-floor, 0px), clamp(12px, 4.6cqi, 17px))/1 var(--font-term);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lc-stamp);
  transform: rotate(-4deg);
  white-space: nowrap;
}

/* the desk: a wood top, the keyboard in front of the monitor, a mug */
.lc .lc-desk-end {
  grid-column: 1 / -1;
  grid-row: 3;
  position: relative;
  z-index: 1;
  width: 100vw;
  height: clamp(84px, 8vw, 150px);
  margin: calc(-1 * var(--sg)) 0 0 calc(50% - 50vw);
}
.lc .lc-keys {
  position: absolute;
  left: 50%;
  top: 14px;
  width: min(34%, 480px);
  height: 22px;
  transform: translateX(-50%);
  border-radius: 5px 5px 3px 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, .22) 3px 4px, transparent 4px 22px) 8px 4px / calc(100% - 16px) 7px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, .22) 3px 4px, transparent 4px 22px) 14px 12px / calc(100% - 28px) 6px no-repeat,
    linear-gradient(var(--color-plastic), var(--color-plastic-lo));
  box-shadow: 4px 6px 8px rgba(0, 0, 0, .45);
}
.lc .lc-mug {
  position: absolute;
  left: 11%;
  bottom: calc(100% - 12px);
  width: 46px;
  height: 54px;
  border-radius: 3px 3px 8px 8px;
  background: linear-gradient(90deg, #5a6f5a, #8aa088 40%, #506350);
  box-shadow: 5px 6px 8px rgba(0, 0, 0, .45);
}
.lc .lc-mug::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 12px;
  width: 16px;
  height: 24px;
  border: 5px solid #5e735e;
  border-left: 0;
  border-radius: 0 12px 12px 0;
}

/* ══════════ below desktop: one column hero, a 2 × 2 of notes ══════════ */
@media (max-width: 1099px) {
  .lc .lc-hero { min-height: 0; }
  .lc .lc-hero-in { padding-left: 0; }
  .lc .lc-folder { grid-column: 1 / 12; }
  .lc .lc-folder-face { min-height: 0; padding-bottom: 88px; }   /* the lore card overlaps this empty foot, never the deck */
  .lc .lc-hero-crt { grid-column: 2 / 13; grid-row: 2; margin: -60px 0 calc(var(--lc-desk) * -.12); }
  .lc .lc-hero-crt .lc-crt { min-height: 0; }
  .lc .lc-lore { margin-left: 0; }

  .lc .lc-values-head { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .lc .lc-scene { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; }
  .lc .lc-sticky { --r2: calc(var(--r, 3deg) * .5); width: min(100%, 400px); transform: rotate(var(--r2)); }
  .lc .lc-sticky-1 { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; margin: 0; }
  .lc .lc-sticky-2 { grid-column: 2; grid-row: 1; justify-self: start; align-self: start; margin: 30px 0 0; }
  .lc .lc-sticky-3 { grid-column: 1; grid-row: 2; justify-self: end; align-self: start; margin: 0; }
  .lc .lc-sticky-4 { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; margin: 30px 0 0; }
  .lc .lc-exit { grid-column: 1; grid-row: 3; }
  .lc .lc-screen-exit { aspect-ratio: auto; min-height: 240px; }
  .lc .lc-next { grid-column: 2; grid-row: 3; width: 100%; }
  .lc .lc-next-face { min-height: 0; }
  .lc .lc-desk-end { grid-row: 4; }
  .lc .lc-keys { left: 28%; width: 36%; }
  .lc .lc-mug { display: none; }          /* the monitor and the folder fill the desk */
}

@media (max-width: 899px) {
  .lc .lc-file,
  .lc .lc-file-r { grid-template-columns: minmax(0, 1fr); }
  .lc .lc-pol,
  .lc .lc-file-r .lc-pol {
    grid-column: 1;
    grid-row: 1;
    width: min(62%, 320px);
    margin: 0 0 -40px 6%;
    justify-self: start;
  }
  .lc .lc-file-r .lc-pol { justify-self: end; margin: 0 6% -40px 0; }
  .lc .lc-sheet,
  .lc .lc-file-r .lc-sheet {
    grid-column: 1;
    grid-row: 2;
    --rx: clamp(26px, 5vw, 44px);
    padding: 64px clamp(20px, 5vw, 44px) 26px calc(var(--rx) + clamp(16px, 3vw, 26px));
  }
  .lc .lc-num { top: -.3em; font-size: clamp(110px, 32vw, 240px); }
  .lc .lc-pool,
  .lc .lc-file-r .lc-pool {
    inset: -90px -4%;
    background: radial-gradient(ellipse 70% 40% at 50% 26%, rgba(var(--lc-lamp), .18), rgba(var(--lc-lamp), .05) 55%, transparent 76%);
  }
}

/* ══════════ phone ══════════ */
@media (max-width: 760px) {
  .lc { --lc-gap: 72px; --lc-lw: 108px; --lc-lx: 0px; --lc-desk: 64px; }
  .lc .lc-hero { padding-top: calc(var(--lc-ly) + var(--lc-lw) * .72 + 12px); }
  .lc .lc-cone::before { clip-path: polygon(
    calc(var(--lc-mx) - var(--lc-lw) * .16) calc(var(--lc-my) + var(--lc-lw) * .1),
    calc(var(--lc-mx) + var(--lc-lw) * .1) calc(var(--lc-my) - var(--lc-lw) * .14),
    100% 40%, 100% 100%, 0 100%, 0 58%); }
  .lc .lc-folder { grid-column: 1 / 13; transform: rotate(-.5deg); }
  .lc .lc-folder-tab { height: 34px; padding: 11px 16px 0; font-size: max(var(--fs-floor, 0px), 10px); letter-spacing: .16em; width: 62%; }
  .lc .lc-folder-peek { right: 5%; width: 28%; }
  .lc .lc-folder-face { padding-bottom: 72px; }
  .lc .lc-label { margin-bottom: 4px; }
  .lc .lc-crt {
    border-radius: 15px;
    padding: 14px 14px 34px;
  }
  .lc .lc-crt .crt-badge { left: 20px; bottom: 11px; }
  .lc .lc-crt .crt-vent { right: 44px; bottom: 13px; width: 70px; }
  .lc .lc-crt::after { right: 20px; bottom: 14px; }
  .lc .lc-screen { font-size: 13.5px; padding: 16px; }
  .lc .lc-hero-crt { grid-column: 1 / 13; margin: -48px 0 calc(var(--lc-desk) * -.12) 10px; }
  .lc .lc-hero-crt .lc-screen { font-size: 13.5px; }
  .lc .lc-lore { width: 94%; margin: 0 0 -14px -6px; padding: 20px 18px var(--line); font-size: 13.5px; transform: rotate(-1deg); }
  .lc .lc-ls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc .lc-sheet-head span + span { display: none; }

  .lc .lc-finale { padding-bottom: 36px; }
  .lc .lc-scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 32px; }
  .lc .lc-stickies {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 30px;
    padding: 0 2px;
  }
  .lc .lc-sticky { --r2: calc(var(--r, 3deg) * .35); width: calc(100% - 20px); max-width: 420px; padding: 26px 20px 22px; }
  .lc .lc-sticky-1,
  .lc .lc-sticky-3 { grid-column: 1; grid-row: auto; justify-self: start; margin: 0; }
  .lc .lc-sticky-2,
  .lc .lc-sticky-4 { grid-column: 1; grid-row: auto; justify-self: end; margin: 0; }
  .lc .lc-exit { grid-column: 1; grid-row: 2; }
  .lc .lc-screen-exit { min-height: 0; }
  .lc .lc-next { grid-column: 1; grid-row: 3; width: calc(100% - 16px); justify-self: center; margin-top: 44px; transform: rotate(.8deg); }
  .lc .lc-desk-end { grid-row: 4; height: 72px; margin-top: -32px; }
  .lc .lc-keys { display: none; }
}

/* ══════════ motion ══════════
   The opening plays once per arrival in CSS: the room is dark, the lamp
   flickers on, the prologue CRT powers up, Catechu is struck through. Every
   keyframe list leaves out its end, so it settles on the resting style.
   crew-page.js arms the files and the finale only when they arrive from below. */
@media (prefers-reduced-motion: no-preference) {
  .lc .lc-dark { animation: lc-room 1.4s 60ms backwards; }
  .lc .lc-cone,
  .lc .lc-glow,
  .lc .lc-bulb,
  .lc .lc-bulb-glow { animation: lc-flick 1.4s 60ms backwards; }
  .lc .lc-hero-crt .lc-tube { animation: lc-power 760ms 1s backwards; }
  .lc .lc-old::after { animation: lc-strike 420ms 2.1s var(--ease) backwards; }
  .lc .lc-new::after { animation: lc-fade 700ms 2.5s backwards; }
  .lc .lc-cursor { animation: lc-blink var(--blink) steps(1) infinite; }
  /* arriving from the home board (transitions.js sets data-tx-arrive): the
     heading card and the polaroids fly in as lit paper over the dark room;
     the lamp flickers on as they reach the folder and is fully on before
     the last one is filed. The rest of the opening follows sooner. Same
     keyframes, only retimed, so nothing restarts when the flag goes. */
  .lc[data-tx-arrive] .lc-dark,
  .lc[data-tx-arrive] .lc-cone,
  .lc[data-tx-arrive] .lc-glow,
  .lc[data-tx-arrive] .lc-bulb,
  .lc[data-tx-arrive] .lc-bulb-glow { animation-duration: 380ms; animation-delay: 100ms; }
  .lc[data-tx-arrive] .lc-hero-crt .lc-tube { animation-delay: 520ms; }
  .lc[data-tx-arrive] .lc-old::after { animation-delay: 1.4s; }
  .lc[data-tx-arrive] .lc-new::after { animation-delay: 1.8s; }

  .lc .lc-sticky,
  .lc .lc-next { transition: transform 240ms var(--ease); }

  .lc .lc-pol,
  .lc .lc-sheet {
    transition: transform 760ms var(--ease), opacity 520ms var(--ease);
  }
  .lc .lc-sheet { transition-delay: 110ms; }
  .lc .lc-armed .lc-pool,
  .lc .lc-armed .lc-num { opacity: 0; }
  .lc .lc-armed .lc-pol { opacity: 0; transform: translateY(46px) rotate(calc(var(--r, -2deg) * 2.2)); }
  .lc .lc-armed .lc-sheet { opacity: 0; transform: translateY(60px) rotate(var(--sr)); }
  .lc .lc-lit .lc-pool { animation: lc-flick 900ms backwards; }
  .lc .lc-lit .lc-num { animation: lc-fade 1.2s 300ms backwards; }

  /* finale: the monitor powers on, the notes get stuck on one by one, the folder is set down */
  .lc .lc-values-head,
  .lc .lc-screen-exit .lc-tube { transition: transform 520ms var(--ease), opacity 420ms var(--ease); }
  .lc .lc-armed .lc-values-head { opacity: 0; transform: translateY(30px); }
  .lc .lc-armed .lc-screen-exit .lc-tube { opacity: 0; transform: scale(.9, .006); }
  .lc .lc-armed .lc-pool-finale { opacity: 0; }
  .lc .lc-armed .lc-sticky { opacity: 0; transform: translateY(-28px) rotate(var(--r2, var(--r, 3deg))); }
  .lc .lc-armed .lc-next { opacity: 0; transform: translateY(36px) rotate(1.4deg); }
  .lc .lc-lit .lc-screen-exit .lc-tube { transition-delay: 200ms; }
  .lc .lc-lit .lc-sticky { transition: transform 460ms var(--ease), opacity 260ms var(--ease); }
  .lc .lc-lit .lc-sticky-1 { transition-delay: 380ms; }
  .lc .lc-lit .lc-sticky-2 { transition-delay: 460ms; }
  .lc .lc-lit .lc-sticky-3 { transition-delay: 540ms; }
  .lc .lc-lit .lc-sticky-4 { transition-delay: 620ms; }
  .lc .lc-lit .lc-next { transition: transform 620ms 700ms var(--ease), opacity 400ms 700ms var(--ease); }

  @media (hover: hover) {
    .lc .lc-sticky:hover { transform: rotate(calc(var(--r2, var(--r, 3deg)) * .4)) translateY(-4px); }
  }
}
@keyframes lc-room {
  0%, 22% { opacity: .94; visibility: visible; }
  30% { opacity: .35; }
  38% { opacity: .85; }
  52% { opacity: .2; }
  60% { opacity: .5; visibility: visible; }
}
@keyframes lc-flick {
  0%, 22% { opacity: 0; }
  30% { opacity: .75; }
  38% { opacity: .15; }
  52% { opacity: .9; }
  60% { opacity: .5; }
}
@keyframes lc-power {
  0% { opacity: 0; transform: scale(.9, .006); }
  30% { opacity: 1; transform: scale(1, .006); }
  60% { transform: scale(1, 1.03); }
}
@keyframes lc-strike { from { transform: rotate(-3deg) scaleX(0); } }
@keyframes lc-fade { from { opacity: 0; } }
@keyframes lc-blink { 50% { opacity: 0; } }