/* /insights, family FIRM "Material": EMISSION SPECTRUM. A spectrograph plate; each planned piece is one bright line,
   placed and coloured by its topic. Colour is light only: every label stays graphite. */

main { position: relative; }
h2 { font-weight: 400; }

/* topic colours, cool to warm, as light: core colour + halo alpha */
.l-a, .e-a { --c: #9C7CF4; --h: rgba(156, 124, 244, .42); --x: 8.5%; --d: .35s; --p: 6.2s; }
.l-b, .e-b { --c: #4FC3E8; --h: rgba(79, 195, 232, .42);  --x: 33.5%; --d: .6s;  --p: 7.4s; }
.l-c, .e-c { --c: #6FD3AE; --h: rgba(111, 211, 174, .44); --x: 46%;   --d: .85s; --p: 5.6s; }
.l-d, .e-d { --c: #EDB55C; --h: rgba(242, 190, 106, .5);  --x: 63.5%; --d: 1.1s; --p: 8.1s; }
.l-e, .e-e { --c: #E07AB0; --h: rgba(224, 122, 176, .44); --x: 84%;   --d: 1.35s; --p: 6.8s; }

/* ---------- hero ---------- */
.hero { padding: clamp(64px, 7vw, 104px) 0 0; }
.hero h1 {
  font: 400 clamp(52px, 7vw, 104px)/.98 var(--serif); letter-spacing: -.022em;
  margin: 0 0 28px; max-width: 10.5em; text-wrap: balance;
}
.hero h1 em { font-style: italic; }
.hero .lede { font-size: 19px; line-height: 1.62; color: var(--ink-2); max-width: 36em; margin: 0; text-wrap: pretty; }

/* ---------- the plate ---------- */
.spectro { padding: clamp(64px, 5vw, 80px) 0 clamp(80px, 9vw, 128px); }
.plate {
  position: relative; height: clamp(220px, 21vw, 300px); border-radius: 10px; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .4)),
    linear-gradient(180deg, #E3E5EA, #E8EAEE 50%, #E2E4E9);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    inset 0 0 0 1px rgba(29, 33, 38, .1),
    inset 0 22px 30px -26px rgba(29, 33, 38, .32),
    inset 0 -16px 24px -22px rgba(29, 33, 38, .2),
    0 34px 54px -44px rgba(29, 33, 38, .42);
}
/* the plate's registration frame: one fine line inset from the edge */
.plate::after { content: ""; position: absolute; inset: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .07); pointer-events: none; z-index: -1; }
/* the slit: a faint continuum band through the middle of the plate */
.slit {
  position: absolute; left: 3%; right: 3%; inset-block-start: 50%; height: 30%; transform: translateY(-50%); z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .62) 12%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .62) 88%, rgba(255, 255, 255, 0));
  filter: blur(14px); pointer-events: none;
}
/* an emission line: a coloured core, white-hot at the slit, a soft halo, fading toward the plate edges */
.line {
  position: absolute; left: var(--x); inset-block: 7%; width: 120px; transform: translateX(-50%);
  display: block; text-decoration: none; color: var(--ink); border-radius: 8px;
}
.line::before { /* the halo */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 46% at 50% 50%, var(--h), rgba(255, 255, 255, 0) 70%),
    radial-gradient(14% 50% at 50% 50%, var(--h), rgba(255, 255, 255, 0) 90%);
  filter: blur(5px); transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.line-core {
  position: absolute; left: 50%; inset-block: 0; width: 3.5px; transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--c) 16%, var(--c) 84%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 5px var(--h), 0 0 16px var(--h), 0 0 34px var(--h);
  transition: width .4s var(--ease), box-shadow .4s var(--ease);
}
.line-core::after { /* white-hot where the slit is brightest */
  content: ""; position: absolute; left: 50%; inset-block: 30%; width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0));
}
/* each line's reading on the plate's scale (fix round 1: readings, not lettered grid references) */
.line-tag {
  position: absolute; left: 50%; inset-block-start: -40px; transform: translateX(-50%); white-space: nowrap;
  font: 600 12.5px/1 var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink-2); padding: 6px 4px;
}
.line-topic { display: none; }
.line:hover::before, .line:focus-visible::before, .line.is-hot::before { transform: scaleX(1.7); }
.line:hover .line-core, .line:focus-visible .line-core, .line.is-hot .line-core { width: 5px; box-shadow: 0 0 8px var(--h), 0 0 26px var(--h), 0 0 46px var(--h); }
.line:hover .line-tag, .line:focus-visible .line-tag, .line.is-hot .line-tag { color: var(--ink); }
.line:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* the scale under the plate: fine graduations every 2, numbered every 10, then the topic bands */
.scale-n { position: relative; height: 0; }
.scale-n span {
  position: absolute; top: 0; transform: translateX(-50%); padding-top: 12px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.scale-n span::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 9px; background: rgba(29, 33, 38, .45); }
.scale {
  position: relative; display: grid; grid-template-columns: 22fr 20fr 16fr 20fr 22fr; list-style: none; margin: 0; padding: 38px 0 0;
}
.scale::before { /* minor graduations */
  content: ""; position: absolute; left: 0; right: 0; inset-block-start: 0; height: 7px;
  background: repeating-linear-gradient(90deg, rgba(29, 33, 38, .28) 0 1px, transparent 1px calc(100% / 50));
}
.scale li {
  position: relative; text-align: center; font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.scale li::before { /* band boundary: a taller tick */
  content: ""; position: absolute; left: 0; inset-block-start: -38px; width: 1px; height: 15px; background: rgba(29, 33, 38, .55);
}
.scale li:last-child::after { content: ""; position: absolute; right: 0; inset-block-start: -38px; width: 1px; height: 15px; background: rgba(29, 33, 38, .55); }
.plate-cap { margin: 28px 0 0; font-size: 14px; color: var(--ink-3); }

/* motion: lines ignite in turn, then scintillate a little, each on its own period (CSS only, no rAF) */
.js .motion .line { animation: ignite 1.1s var(--ease) var(--d) both; }
.js .motion .line::before { animation: scint var(--p) ease-in-out calc(var(--d) + 1.2s) infinite alternate; }
@keyframes ignite {
  0% { opacity: 0; filter: brightness(1.6) saturate(.4); }
  30% { opacity: 1; filter: brightness(1.35) saturate(.7); }
  100% { opacity: 1; filter: none; }
}
@keyframes scint { from { opacity: 1; } to { opacity: .74; } }

/* ---------- the line catalogue ---------- */
.catalogue { padding: 0 0 clamp(96px, 10vw, 140px); }
.cat-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; margin-bottom: 36px; }
.cat-head h2 { font: 400 clamp(40px, 4.4vw, 62px)/1.02 var(--serif); letter-spacing: -.012em; margin: 0; }
.cat-note { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.entries { list-style: none; margin: 0; padding: 0; border-top: 3px double rgba(29, 33, 38, .78); }
.entry {
  display: grid; grid-template-columns: 88px 150px minmax(0, 1fr) auto; gap: 8px 32px; align-items: baseline;
  padding: 30px 16px 32px 0; border-bottom: 1px solid var(--line); transition: background .4s var(--ease);
  scroll-margin-top: 110px;
}
.entry.is-hot, .entry:target { background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
.e-line { position: relative; display: inline-flex; align-items: flex-start; gap: 14px; font: 600 13px/1 var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--ink); padding-left: 2px; }
.e-line i { /* the entry's line, as light */
  position: relative; display: block; width: 3px; height: 34px; border-radius: 3px; margin-top: -9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--c) 20%, var(--c) 80%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 6px var(--h), 0 0 16px var(--h);
}
.e-topic { margin: 0; font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.e-title { margin: 0 0 8px; font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--serif); color: var(--ink); text-wrap: balance; }
.e-intent { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
.e-status {
  margin: 0; align-self: start; font: 600 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  padding: 8px 11px; border: 1px dashed rgba(29, 33, 38, .42); border-radius: 4px; white-space: nowrap;
}

/* ---------- closing ---------- */
.closing { padding: clamp(72px, 8vw, 112px) 0 clamp(88px, 9vw, 124px); text-align: center; border-top: 1px solid var(--line); }
.closing h2 { font: 400 clamp(44px, 5.4vw, 80px)/1 var(--serif); letter-spacing: -.02em; margin: 0 0 34px; }
.closing-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1.3 var(--sans); color: var(--ink); text-underline-offset: 5px; }

/* ---------- tablet ---------- */
@media (max-width: 1020px) {
  .entry { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .e-topic { grid-column: 2; grid-row: 1; }
  .e-text { grid-column: 2; grid-row: 2; }
  .e-status { grid-column: 3; grid-row: 1; }
  .e-line { grid-row: 1 / span 2; align-self: start; }
  .cat-head { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- phone: the plate turns upright; lines run across, the scale moves onto the lines ---------- */
@media (max-width: 760px) {
  .hero { padding-top: 48px; }
  .hero h1 { font-size: clamp(44px, 12.4vw, 56px); line-height: 1; margin-bottom: 20px; }
  .hero .lede { font-size: 17px; }
  .spectro { padding: 56px 0 64px; }
  .plate { height: 440px; }
  .slit { left: 50%; right: auto; inset-block: 3%; width: 34%; height: auto; transform: translateX(-50%); }
  .line { left: 5%; right: 5%; inset-block: auto; inset-block-start: calc(9% + var(--x) * .86); width: auto; height: 48px; transform: translateY(-50%); }
  .line-core { left: 0; right: 0; inset-block: auto; inset-block-start: 50%; width: auto; height: 3px; transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--c) 14%, var(--c) 86%, rgba(255, 255, 255, 0)); }
  .line-core::after { inset-block: auto; inset-block-start: 50%; left: 28%; right: 28%; width: auto; height: 1px; transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0)); }
  .line:hover .line-core, .line:focus-visible .line-core, .line.is-hot .line-core { width: auto; height: 5px; }
  .line:hover::before, .line:focus-visible::before, .line.is-hot::before { transform: scaleY(1.7); }
  .line-tag { left: 8px; inset-block-start: -8px; transform: none; display: flex; gap: 10px; padding: 0; font-size: 11.5px; }
  .line-topic { display: inline; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
  .scale, .scale-n { display: none; }
  .plate-cap { margin-top: 20px; }
  .entry { grid-template-columns: 44px minmax(0, 1fr); padding: 26px 0 28px; }
  .e-line { gap: 8px; font-size: 12px; }
  .e-line { grid-row: 1 / span 3; }
  .e-topic { grid-column: 2; grid-row: 1; }
  .e-text { grid-column: 2; grid-row: 2; }
  .e-status { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 10px; }
  .e-title { font-size: 26px; }
}