/* Publications (design B): featured newest story + glowing timeline. Builds on ../projects/archive.css (bar, glass, type). */
.pub-head { text-align: center; }
.pub-head .lib-h { margin-bottom: 18px; }
.pub-head p { margin: 0 auto 46px; max-width: 620px; font-size: 18px; line-height: 1.55; color: var(--ink2); }

/* the featured story: cover left, opening right, one glass pane */
.pub-feat { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; padding: 14px; border-radius: 26px; align-items: center; }
.pub-feat .pic { display: block; border-radius: 17px; overflow: hidden; background: #04122c; box-shadow: inset 0 0 0 1px rgba(160,215,255,.18); }
.pic img { width: 100%; height: auto;   /* each cover at its own full shape, nothing cropped */ display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.pic:hover img { transform: scale(1.035); }
.pub-feat .txt { padding: 22px 34px 22px 0; }
.pub-feat h2 { margin: 20px 0 0; font: 400 36px/1.16 var(--serif); letter-spacing: -.01em; }
.dek { margin: 12px 0 0; font: italic 400 18px/1.45 var(--serif); color: var(--ice); }
.open p { margin: 14px 0 0; font-size: 16px; line-height: 1.62; color: var(--ink2); }
.pub-feat .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* the timeline: one glowing spine down the middle, stories alternate left and right */
.tl { position: relative; margin-top: 120px; }
.tl ol { list-style: none; margin: 0; padding: 0; }
.tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; overflow: hidden;
  background: linear-gradient(180deg, rgba(120,200,255,0) 0%, rgba(120,200,255,.45) 6%, rgba(120,200,255,.45) 94%, rgba(120,200,255,0) 100%);
  box-shadow: 0 0 14px rgba(110,200,255,.45); }
.tl-line span { position: absolute; left: 0; width: 100%; height: 220px; top: -220px;
  background: linear-gradient(180deg, rgba(160,230,255,0), #d9f6ff 55%, rgba(160,230,255,0)); animation: tl-pulse 6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes tl-pulse { to { top: 100%; } }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 96px; align-items: start; margin: 0; }
.tl-item + .tl-item { margin-top: -250px; }   /* left and right stories interleave so both sides of the screen stay full */
.tl-node { position: absolute; left: 50%; top: 52px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #bff0ff;
  box-shadow: 0 0 0 5px rgba(110,200,255,.14), 0 0 18px 4px rgba(110,210,255,.75); animation: tl-breathe 3.6s ease-in-out infinite; }
.tl-item:nth-child(3n+2) .tl-node { animation-delay: -1.2s; } .tl-item:nth-child(3n) .tl-node { animation-delay: -2.4s; }
@keyframes tl-breathe { 50% { box-shadow: 0 0 0 9px rgba(110,200,255,.06), 0 0 26px 8px rgba(110,210,255,.95); } }
.tl-date { margin-top: 46px; font: 500 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ice); text-shadow: 0 0 12px rgba(120,210,255,.55); }
.tl-item.l .tl-card { grid-column: 1; grid-row: 1; } .tl-item.l .tl-date { grid-column: 2; grid-row: 1; justify-self: start; }
.tl-item.r .tl-card { grid-column: 2; grid-row: 1; } .tl-item.r .tl-date { grid-column: 1; grid-row: 1; justify-self: end; }
.tl-card { padding: 10px 10px 26px; border-radius: 22px; }
.tl-card .pic { display: block; border-radius: 15px; overflow: hidden; background: #04122c; box-shadow: inset 0 0 0 1px rgba(160,215,255,.18); }
.tl-card .in { padding: 22px 18px 0; }
.tl-card .m-date { display: block; margin-bottom: 12px; }
.tl-item > .tl-date { display: none; }   /* the date sits inside each card (it collided with the opposite card when it hung beside the spine) */
.tl-node::after { content: ''; position: absolute; top: 6px; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(150,220,255,.75), rgba(150,220,255,0)); }
.tl-item.r .tl-node::after { left: 18px; } .tl-item.l .tl-node::after { right: 18px; transform: scaleX(-1); }
.tl-card h3 { margin: 0; font: 400 25px/1.25 var(--serif); }
.tl-card h3 a:hover { color: var(--ice); }
.tl-card .dek { font-size: 16.5px; }
.tl-card .open p { font-size: 15.5px; }
.tl-card .more { margin-top: 22px; }

.pub-follow .acts { display: flex; justify-content: center; margin-top: 30px; }

@media (max-width: 900px) {
  .pub-feat { grid-template-columns: 1fr; gap: 10px; } .pub-feat .txt { padding: 14px 16px 18px; }
  .tl-line { left: 12px; }
  .tl-item { grid-template-columns: 1fr; padding-left: 40px; } .tl-item + .tl-item { margin-top: 40px; }
  .tl-node { left: 12px; top: 40px; }
  .tl-node::after { display: none; }
  .tl-item.l .tl-card, .tl-item.r .tl-card { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .tl-line span, .tl-node { animation: none; } .pic img { transition: none; } }

/* pearl cards (Loy, 2026-11-13): light milky see-through pearl in 3D, dark-blue text to pair with it */
.pearl { will-change: transform; }
.pearl h2, .pearl h3, .pearl h3 a { color: #0a2350; }
.pearl .open p { color: #1f3c66; }
.pearl .dek { color: #1b4f93; }
.pearl .label, .pearl .m-date { color: #2a5b9a; }
.pearl .more { color: #0c4aa6; }
.pearl h3 a:hover, .pearl .more:hover { color: #0a6fd6; }
.pub-feat.pearl .txt { padding-left: 4px; }
.pub-feat.pearl { padding: 24px; }
.tl-card.pearl { padding: 18px 18px 30px; }

/* two staggered columns (2026-11-13): left and right stories fill each other's gaps; still newest first, alternating */
.tl-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 96px; align-items: start; }
.tl-col { display: flex; flex-direction: column; gap: 70px; }
.tl-col.r { padding-top: 240px; }
.tl-cols .tl-item, .tl-cols .tl-item + .tl-item { display: block; margin: 0; }
.tl-cols .tl-item.l .tl-node { left: auto; right: -48px; margin: -7px -7px 0 0; }
.tl-cols .tl-item.r .tl-node { left: -48px; }
@media (max-width: 900px) {
  .tl-cols { display: flex; flex-direction: column; gap: 40px; } .tl-col { display: contents; } .tl-col.r { padding-top: 0; }
  .tl-cols .tl-item { padding-left: 40px; } .tl-cols .tl-item.l .tl-node, .tl-cols .tl-item.r .tl-node { left: 12px; right: auto; margin: -7px 0 0 -7px; }
}

/* kickers (Loy's Medium editor fixes, 2026-11-13): the short line above each title, as on Medium */
.kick { margin: 0 0 8px; font: 600 14.5px/1.35 var(--serif); letter-spacing: .01em; color: #3a6fb3; }
.pub-feat .kick { margin-top: 20px; font-size: 16px; } .pub-feat .kick + h2 { margin-top: 0; }

/* Kindle reader (Loy, 2026-11-13): story list left, one full story in the reading panel right. Same pearl cards and effects. */
.kr { display: grid; grid-template-columns: 340px 1fr; gap: 34px; align-items: start; }
.kr-list { position: sticky; top: 24px; padding: 24px 16px 18px; border-radius: 24px; max-height: calc(100vh - 140px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(40,100,180,.35) transparent; }
.kr-list .label { margin: 0 8px 12px; color: #2a5b9a; }
.kr-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kr-item { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 14px; transition: background .25s ease, box-shadow .25s ease; }
.kr-item img { width: 78px; height: 52px; object-fit: cover; border-radius: 9px; box-shadow: 0 2px 8px rgba(4,30,80,.25); }
.kr-item .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kr-item .kick { margin: 0; font-size: 12px; line-height: 1.25; }
.kr-item .h { font: 400 15.5px/1.28 var(--serif); color: #0a2350; }
.kr-item time { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #3b679f; }
.kr-item:hover { background: rgba(255,255,255,.28); }
.kr-item[aria-current] { background: rgba(255,255,255,.5); box-shadow: inset 3px 0 0 #1a6fe0, 0 4px 14px rgba(20,70,150,.15); }
.kr-read { padding: 30px 46px 42px; border-radius: 26px; min-height: 600px; }
.kr-cover { margin: 0; } .kr-cover img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 6px 22px rgba(4,30,80,.3); }
.kr-cover figcaption, .kr-body figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.45; text-align: center; color: #3b679f; font-style: italic; }
.kr-read > .kick { margin-top: 28px; }
.kr-read h2 { margin: 6px 0 0; font: 400 40px/1.15 var(--serif); letter-spacing: -.01em; color: #0a2350; }
.kr-read .by { margin: 12px 0 0; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #2a5b9a; }
.kr-body { margin-top: 26px; max-width: 720px; font-size: 18px; line-height: 1.72; color: #1b3459; }
.kr-body p { margin: 0 0 20px; }
.kr-body h3 { margin: 36px 0 12px; font: 400 27px/1.25 var(--serif); color: #0a2350; }
.kr-body h4 { margin: 26px 0 10px; font: italic 400 21px/1.4 var(--serif); color: #1b4f93; }
.kr-body strong { color: #0a2350; } .kr-body a { color: #0c4aa6; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.kr-body blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid #3d8bf0; font: italic 400 20px/1.6 var(--serif); color: #1b4f93; }
.kr-body ul, .kr-body ol { margin: 0 0 20px; padding-left: 26px; } .kr-body li { margin: 6px 0; }
.kr-body pre { margin: 0 0 22px; padding: 16px 18px; border-radius: 12px; overflow-x: auto; font: 14px/1.55 var(--mono); color: #dff3ff; background: rgba(4,20,52,.86); white-space: pre-wrap; }
.kr-body code { font-family: var(--mono); font-size: .9em; }
.kr-body figure { margin: 30px 0; } .kr-body figure img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 4px 18px rgba(4,30,80,.25); }
.kr-body .video { position: relative; margin: 28px 0; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 22px rgba(4,30,80,.3); background: #021028; }
.kr-body .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kr-end { margin-top: 40px; padding: 26px 28px; border-radius: 18px; max-width: 720px; background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(70,140,220,.22); }
.kr-end .h { margin: 0; font: 400 26px/1.2 var(--serif); color: #0a2350; }
.kr-end p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: #1f3c66; }
.kr-end .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 980px) {
  .kr { grid-template-columns: 1fr; }
  .kr-list { position: relative; top: 0; max-height: none; padding: 16px 10px; }
  .kr-list ol { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; }
  .kr-list li { flex: 0 0 250px; }
  .kr-read { padding: 20px 20px 30px; } .kr-read h2 { font-size: 30px; } .kr-body { font-size: 17px; }
}

/* buttons inside each story are added after the glass pass is built, so they carry their own glass look */
.kr-end .kb, .kr-end .kb2 { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.kr-end .kb { color: #fff; background: linear-gradient(180deg, #3d95ff 0%, #1667e6 55%, #0b4fc4 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,30,90,.35), 0 6px 18px rgba(16,90,220,.35); }
.kr-end .kb2 { color: #eaf4ff; background: linear-gradient(180deg, #13306a 0%, #0a1f4a 100%);
  box-shadow: inset 0 1px 0 rgba(160,210,255,.35), inset 0 0 0 1px rgba(120,180,255,.3), 0 6px 18px rgba(4,20,60,.35); }
.kr-end .kb:hover, .kr-end .kb2:hover { transform: translateY(-1px); filter: brightness(1.08); }