/* blog.css: the blog index (blog.html). Loaded after hero.css (tokens, the mark, the menu, the header fly-ins, the seam
   card). THE SEAM for the whole page: LL paper left of the line, GW night right of it, every essay straddling the line
   on a neutral reading ground (torn paper with ink on its left edge, a stepped digital cut with a cyan fringe on its
   right). The line is the centre of the screen everywhere (phones too). Two curves only: punch (LL) and breath (GW). */

@font-face { font-family: 'DM Serif Display'; src: url('/fonts/dm-serif-display.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

html[data-page="blog"] {
  --gutter: 24px;
  --ll-accent: #b23a00;          /* the paint accent as text on the reading ground (4.5:1) */
  --gw-tx: #006b77;              /* the cyan as text on the reading ground (4.5:1) */
  --cf: 0.56;                    /* wide cards: the cover's share, its inner edge ON the line */
  --cw: min(72rem, calc((50vw - var(--gutter) - 1.75rem) / 0.56));
}
@media (max-width: 719.98px) {
  html[data-page="blog"] { --gutter: 16px; }
}
html[data-page="blog"] body { touch-action: auto; }
html[data-page="blog"] ::selection { background: rgba(0, 229, 255, 0.28); color: #0b0b0c; }

/* ---------------------------------------------------------------- the world before (or without) WebGL */
.b-still { position: fixed; inset: 0; z-index: 0; background: #f4f4f0; transition: opacity 700ms var(--breath); }
html[data-world="gw"] .b-still { background: #070708; }
.b-still i { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #0b0b0c; opacity: 0; }
html[data-gl="1"] .b-still { opacity: 0; pointer-events: none; }
html[data-gl="fail"] .b-still { background: linear-gradient(90deg, #f4f4f0 0 50%, #070708 50% 100%); }
html[data-gl="fail"] .b-still i { opacity: 1; background: linear-gradient(90deg, #0b0b0c 0 50%, #00e5ff 50% 100%); box-shadow: 6px 0 14px rgba(0, 229, 255, 0.5); }

/* ---------------------------------------------------------------- the top bar: the mark and the way back (the shell's,
   hero.css "the way back"), on the paper half */
html[data-page="blog"] .top { left: var(--gutter); right: auto; }
html[data-page="blog"] .menu-now .v { max-width: 22rem; }

.b-page { position: relative; overflow-x: clip; }

/* ---------------------------------------------------------------- the opener: BLOG on the line */
.b-open { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(6.6rem, 16vh, 10rem) var(--gutter) 0; }
/* centred on the line at every width (hero.css parks chapter headers at the left-edge spine on phones) */
.b-head.ch-head, .b-year-head.ch-head { margin: 0; translate: none; width: auto; max-width: 100%; align-items: center; text-align: center; }
.b-head .side, .b-year-head .side { text-align: center; }
.b-title.ch-title { font-size: clamp(7rem, 19vw, 20rem); line-height: 0.8; }
/* the meta straddles the line whatever the title's width: two equal halves, each word clear of the line */
.b-meta.ch-meta { display: grid; width: min(40rem, calc(100vw - 2 * var(--gutter))); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 1.6rem; white-space: nowrap; }
.b-meta > :first-child { color: var(--ll-accent); }
.b-meta > :last-child { color: var(--gw-dim); }
.b-own.ch-own { margin-top: clamp(2.2rem, 5.5vh, 3.4rem); --paint: var(--p-yellow); filter: drop-shadow(0 16px 22px rgba(11, 11, 12, 0.18)); }

/* the arrival: the meta splits out of the line, the own words settle after the title */
.b-meta, .b-own { opacity: 0; }
.b-meta { clip-path: inset(0 50% 0 50%); }
.b-own { transform: translateY(18px); }
html[data-arrived="1"] .b-meta { opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--breath) 180ms, opacity 200ms linear 180ms; }
html[data-arrived="1"] .b-own { opacity: 1; transform: none; transition: opacity 600ms linear 980ms, transform 900ms var(--punch) 980ms; }

/* ---------------------------------------------------------------- the latest essay, lifted on the line */
.b-latest { display: flex; justify-content: center; padding: 0 var(--gutter); margin-top: clamp(4.6rem, 12vh, 7.5rem); }
.b-feat-wrap {
  position: relative; width: min(76rem, calc(100vw - 2 * var(--gutter) - 3rem)); --paint: var(--p-magenta);
  filter: drop-shadow(0 30px 38px rgba(11, 11, 12, 0.3));
}
.b-feat { color: var(--seam-ink); }
.b-feat-face { display: grid; }
.b-feat-cover { position: relative; display: block; aspect-ratio: 2.25 / 1; overflow: hidden; background: #15171a; }
.b-feat-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 1100ms var(--punch); }
.b-latest-k {
  position: absolute; left: 2.2rem; top: 1.5rem; z-index: 1; padding: 0.55rem 0.8rem 0.5rem;
  font: 600 0.6rem/1 var(--mono); letter-spacing: 0.28em; text-transform: uppercase;
  color: #f4f4f0; background: #0b0b0c; box-shadow: 4px 4px 0 var(--paint); rotate: -2deg;
}
.b-feat-text { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.b-feat-l { display: flex; justify-content: flex-end; padding: 2.3rem 2.7rem 2.8rem 3rem; text-align: right; }
.b-feat-t {
  font-family: var(--display); font-weight: 400; font-size: clamp(3.2rem, 5.1vw, 5.6rem); line-height: 0.88;
  letter-spacing: 0.01em; color: #141412; text-wrap: balance;
}
.b-feat-r { display: flex; flex-direction: column; align-items: flex-start; gap: 0.95rem; padding: 2.55rem 3.4rem 2.8rem 2.7rem; }
.b-feat-x { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(1.14rem, 1.42vw, 1.4rem); line-height: 1.36; color: #1f1d1a; text-wrap: pretty; }
.b-feat .b-kick time { color: var(--gw-tx); }
/* the line runs on through the card, between the title (paper side) and the words (night side) */
.b-seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; pointer-events: none;
  background: linear-gradient(90deg, #0b0b0c 0 50%, #00d4ec 50%);
  box-shadow: 4px 0 10px -3px rgba(0, 229, 255, 0.85);
}

/* the arrival: lifted in after the title (PUNCH), the label slapped on last */
.b-feat-wrap { opacity: 0; transform: translateY(46px) scale(0.975); }
.b-latest-k { opacity: 0; scale: 0.6; }
html[data-arrived="1"] .b-feat-wrap { opacity: 1; transform: none; transition: opacity 600ms linear 620ms, transform 1000ms var(--punch) 620ms; }
html[data-arrived="1"] .b-latest-k { opacity: 1; scale: 1; transition: opacity 120ms linear 1300ms, scale 420ms var(--punch) 1300ms; }

/* ---------------------------------------------------------------- meta, read, video (shared by the feature and the cards) */
.b-kick { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font: 500 0.6rem/1.4 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: #57534b; }
.b-kick time { color: var(--ll-accent); }
.b-go { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; font: 600 0.58rem/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: #141412; }
/* an arrow, not a dash (round 13): the line (2.2rem, 3.74rem on hover) on the 9 px box's middle row, its head riding the end */
.b-go i { position: relative; display: block; flex: none; width: 3.74rem; height: 9px; background: linear-gradient(currentColor, currentColor) 0 50% / 58.8% 1px no-repeat; transition: background-size var(--d-mid) var(--punch); }
.b-go i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-1.54rem) rotate(45deg); transition: transform var(--d-mid) var(--punch); }

.b-vid {
  position: absolute; z-index: 2; top: 1.05rem; right: 1.8rem; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.52rem 0.8rem 0.48rem 0.66rem; font: 600 0.56rem/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase;
  color: #eafcff; background: rgba(4, 8, 10, 0.84);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.55), 0 0 18px rgba(0, 229, 255, 0.22);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: box-shadow var(--d-mid) var(--breath), background-color var(--d-hit) linear;
}
.b-vid svg { width: 10px; height: 10px; fill: var(--cyan); filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.9)); }
.b-vid:hover { background: rgba(4, 8, 10, 0.95); box-shadow: 0 0 0 1px var(--cyan), 0 0 28px rgba(0, 229, 255, 0.55); }
.b-vid:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 0; }
.b-vid--feat { top: 1.5rem; right: 2.6rem; }

/* hover (the card or its video mark) and keyboard focus: the cover leans in, each edge pulls its own side */
.b-feat-wrap:hover .b-feat-cover img, .b-feat:focus-visible .b-feat-cover img,
.b-item:hover .b-cover img, .b-card:focus-visible .b-cover img { transform: scale(1.035); }
.b-feat-wrap:hover .seam-ink, .b-feat:focus-visible .seam-ink, .b-item:hover .seam-ink, .b-card:focus-visible .seam-ink { translate: -2px 0; }
.b-feat-wrap:hover .seam-paint, .b-feat:focus-visible .seam-paint, .b-item:hover .seam-paint, .b-card:focus-visible .seam-paint { opacity: 1; translate: -5px 0; }
.b-feat-wrap:hover .seam-cyan, .b-feat:focus-visible .seam-cyan, .b-item:hover .seam-cyan, .b-card:focus-visible .seam-cyan {
  translate: 4px 0; filter: drop-shadow(0 0 9px rgba(0, 229, 255, 1)) drop-shadow(0 0 22px rgba(0, 229, 255, 0.55));
}
.b-feat-wrap:hover .seam-magenta, .b-feat:focus-visible .seam-magenta, .b-item:hover .seam-magenta, .b-card:focus-visible .seam-magenta { translate: 1.5px 0; }
.b-feat-wrap:hover .b-go i, .b-feat:focus-visible .b-go i, .b-item:hover .b-go i, .b-card:focus-visible .b-go i { background-size: 100% 1px; }
.b-feat-wrap:hover .b-go i::after, .b-feat:focus-visible .b-go i::after, .b-item:hover .b-go i::after, .b-card:focus-visible .b-go i::after { transform: rotate(45deg); }
.b-feat:focus-visible, .b-card:focus-visible { outline: 2px solid #ff2e7e; outline-offset: 8px; border-radius: 1px; }
/* the seam cards' fringes stay at their sides: no glow bleeding over the top and bottom edges */
.b-feat .seam-under, .b-card .seam-under, .b-own .seam-under { clip-path: inset(0 -60px); }

/* ---------------------------------------------------------------- the line: the year, the months, the essays, the end */
.b-all { margin-top: clamp(7rem, 19vh, 12rem); }
.b-line { position: relative; padding-bottom: 1rem; }
/* until the essays are built (the list section is hidden) the footer keeps a screen below the opener, so it never
   shows in the first screen and then jumps down (CLS) */
.b-all[hidden] + .b-foot { margin-top: 110vh; }
.b-line > li { position: relative; }

.b-year { display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(3.4rem, 8vh, 5rem); }
.b-year-t.ch-title { font-size: clamp(5rem, 11vw, 11.5rem); }
.b-hint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; width: 100%; margin-top: 1.5rem; font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0; transition: opacity 700ms var(--breath) 700ms; }
.b-hint span:first-child { justify-self: end; color: #46443f; }
.b-hint span:last-child { justify-self: start; color: var(--gw-dim); }
.b-year-head[data-gw="play"] + .b-hint, .b-year-head[data-gw="done"] + .b-hint { opacity: 1; }

/* a month: a tick across the line; the word on the paper side, the machine date on the night side */
.b-month { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 1.5rem; margin: 0 0 clamp(2.2rem, 5vh, 3.2rem); }
.b-mo-l { justify-self: end; margin-right: 28px; font: 600 0.66rem/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: #0b0b0c; }
.b-mo-r { justify-self: start; margin-left: 28px; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.2em; color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); }
.b-tick {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 2px; margin: -1px 0 0 -17px;
  background: linear-gradient(90deg, #0b0b0c 0 50%, #00e5ff 50%); box-shadow: 6px 0 8px -2px rgba(0, 229, 255, 0.75);
}
.b-month.rv .b-tick { transform: scaleX(0); transition: transform 700ms var(--breath); }
.b-month.rv .b-mo-l { opacity: 0; transform: translateX(14px); transition: opacity 500ms linear 160ms, transform 600ms var(--punch) 160ms; }
.b-month.rv .b-mo-r { opacity: 0; transform: translateX(-14px); transition: opacity 700ms var(--breath) 220ms, transform 900ms var(--breath) 220ms; }
.b-month.rv.is-in .b-tick, .b-month.rv.is-in .b-mo-l, .b-month.rv.is-in .b-mo-r { opacity: 1; transform: none; }

/* an essay: the cover leads, the card straddles the line */
.b-item {
  margin: 0 auto clamp(4.4rem, 10vh, 6.6rem); width: min(40rem, calc(100vw - 2 * var(--gutter) - 3rem));
  translate: calc(var(--nudge, 0) * 1.6rem) 0; filter: drop-shadow(0 18px 26px rgba(11, 11, 12, 0.22));
  --seam-at: 50%;
}
.b-card { color: var(--seam-ink); }
.b-face { display: grid; }
.b-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #15171a; }
.b-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--punch); }
.b-text { display: flex; flex-direction: column; align-items: flex-start; padding: 1.3rem 2.7rem 1.45rem 2.3rem; }
.b-t { font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 3vw, 3rem); line-height: 0.92; letter-spacing: 0.01em; color: #141412; margin: 0.6rem 0 0.65rem; text-wrap: balance; }
.b-x { font-family: var(--body); font-size: 0.98rem; line-height: 1.5; color: #33312c; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.b-text .b-go { margin-top: 1rem; }
.b-card .b-seam { display: none; }

/* the reveal: the card opens out of the line (BREATH), its cover settles (PUNCH) */
.b-item.rv { opacity: 0; clip-path: inset(-90px calc(100% - var(--seam-at)) -90px var(--seam-at)); transition: clip-path 1050ms var(--breath), opacity 260ms linear; }
.b-item.rv.is-in { opacity: 1; clip-path: inset(-90px -90px -90px -90px); }
.b-item.rv:not(.is-in) .b-cover img { transform: scale(1.08); }

/* the end of the line: the first essay; the line stops at the bead */
.b-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 2rem; margin-top: clamp(1rem, 3vh, 2rem); }
.b-bead { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: linear-gradient(90deg, #0b0b0c 0 50%, #dffcff 50%); box-shadow: 0 0 0 3px var(--p-magenta), 5px 0 14px 1px rgba(0, 229, 255, 0.8); }
.b-end-l { justify-self: end; margin-right: 30px; font: 600 0.62rem/1.3 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: #0b0b0c; text-align: right; }
.b-end-r { justify-self: start; margin-left: 30px; font: 500 0.66rem/1.3 var(--mono); letter-spacing: 0.2em; color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); }
.b-end-r a { color: inherit; border-bottom: 1px solid currentColor; }
.b-end.rv .b-bead { transform: scale(0); transition: transform 520ms var(--punch); }
.b-end.rv .b-end-l, .b-end.rv .b-end-r { opacity: 0; transition: opacity 600ms var(--breath) 200ms; }
.b-end.rv.is-in .b-bead { transform: none; }
.b-end.rv.is-in .b-end-l, .b-end.rv.is-in .b-end-r { opacity: 1; }

/* ---------------------------------------------------------------- the foot: paper half, night half */
.b-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; align-items: start;
  padding: clamp(6rem, 16vh, 9rem) var(--gutter) max(2.6rem, env(safe-area-inset-bottom));
  font: 500 0.58rem/1.6 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
}
.b-foot-l { justify-self: end; display: grid; justify-items: end; gap: 1.1rem; text-align: right; }
.b-foot-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.4rem; }
.b-foot-nav a { color: #0b0b0c; border-bottom: 1px solid transparent; transition: border-color var(--d-hit) linear; }
.b-foot-nav a:hover { border-bottom-color: #0b0b0c; }
.b-foot-socials { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.2rem; max-width: 26rem; }
.b-foot-socials a { color: #46443f; transition: color var(--d-hit) linear; }
.b-foot-socials a:hover { color: #0b0b0c; }
.b-foot-r { justify-self: start; display: grid; justify-items: start; gap: 1.1rem; }
.b-shot { font-size: 0.8rem; letter-spacing: 0.34em; color: var(--gw-fg); }
.b-made { color: var(--gw-dim); transition: color var(--d-hit) linear; }
.b-made:hover { color: var(--gw-fg); }
.b-foot-l a:focus-visible { outline: 2px solid #0b0b0c; outline-offset: 3px; }
.b-foot-r a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* the player: while the video is up the page steps back (hero.css hides the scroller) */
html[data-page="blog"][data-vp="opening"] .ui, html[data-page="blog"][data-vp="open"] .ui, html[data-page="blog"][data-vp="closing"] .ui { opacity: 0; }

/* ---------------------------------------------------------------- wide: the cover on one side, the words on the other,
   the card's inner seam exactly on the line (the cover's side alternates: rhythm, not a persona) */
@media (min-width: 1100px) {
  .b-item { width: var(--cw); translate: none; }
  .b-item--cl { margin-left: calc(50% - var(--cw) * 0.56); --seam-at: 56%; }
  .b-item--cr { margin-left: calc(50% - var(--cw) * 0.44); --seam-at: 44%; }
  .b-face { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
  .b-item--cr .b-face { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  .b-item--cr .b-cover { grid-column: 2; grid-row: 1; }
  .b-item--cr .b-text { grid-column: 1; grid-row: 1; align-items: flex-end; text-align: right; }
  .b-text { padding: 1.9rem 3.1rem 2.05rem 2.7rem; }
  .b-item--cr .b-text { padding: 1.9rem 2.7rem 2.05rem 3.1rem; }
  .b-item--cr .b-kick { justify-content: flex-end; }
  .b-item--cr .b-x { text-align: left; max-width: 25rem; }   /* the block hugs the line, the text stays left-aligned */
  .b-item--cl .b-kick time { color: var(--gw-tx); }   /* words on the night side: the cyan as text */
  .b-t { margin-top: auto; padding-top: 1.1rem; font-size: clamp(2.3rem, 2.8vw, 3.1rem); }
  .b-card .b-seam { display: block; left: 56%; }
  .b-item--cr .b-card .b-seam { left: 44%; }
  .b-item--cl .b-vid { right: auto; left: 2rem; }
  .b-item--cr .b-vid { right: 2.4rem; }
}

/* ---------------------------------------------------------------- phones: the line in the middle, one card after another */
@media (max-width: 719.98px) {
  .b-open { padding-top: 5.6rem; }
  .b-title.ch-title { font-size: clamp(5.4rem, 38vw, 9rem); }
  .b-meta.ch-meta { column-gap: 2rem; min-width: 0; font-size: 0.54rem; letter-spacing: 0.2em; }
  .b-own.ch-own { width: calc(100vw - 2 * var(--gutter) - 20px); }
  .b-latest { margin-top: 3.6rem; }
  .b-feat-wrap { width: calc(100vw - 2 * var(--gutter) - 20px); }
  .b-feat-cover { aspect-ratio: 16 / 10; }
  .b-latest-k { left: 1.3rem; top: 1rem; font-size: 0.54rem; }
  .b-vid--feat { top: 1rem; right: 1.4rem; }
  .b-feat-text { grid-template-columns: minmax(0, 1fr); }
  .b-feat-l { justify-content: flex-start; text-align: left; padding: 1.4rem 1.7rem 0.2rem 1.5rem; }
  .b-feat-t { font-size: clamp(2.5rem, 11.5vw, 3.3rem); }
  .b-feat-r { padding: 0.7rem 1.7rem 1.7rem 1.5rem; gap: 0.8rem; }
  .b-feat-x { font-size: 1.1rem; }
  .b-feat .b-seam { display: none; }
  .b-all { margin-top: 6rem; }
  .b-year-t.ch-title { font-size: clamp(4.4rem, 26vw, 6.4rem); }
  .b-hint { column-gap: 36px; font-size: 0.5rem; letter-spacing: 0.22em; }
  .b-mo-l { margin-right: 22px; font-size: 0.6rem; }
  .b-mo-r { margin-left: 22px; font-size: 0.6rem; }
  .b-item { width: calc(100vw - 2 * var(--gutter) - 20px); translate: none; margin-bottom: 3.6rem; }
  .b-text { padding: 1.1rem 1.6rem 1.3rem 1.4rem; }
  .b-t { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .b-x { font-size: 0.94rem; }
  .b-vid { top: 0.8rem; right: 1.3rem; }
  .b-foot { column-gap: 2.2rem; font-size: 0.52rem; letter-spacing: 0.16em; }
  .b-foot-nav, .b-foot-socials { gap: 0.3rem 0.9rem; }
  .b-shot { font-size: 0.68rem; letter-spacing: 0.26em; }
}

/* ---------------------------------------------------------------- paint looks: muted dries the accents toward paper */
html[data-paint="muted"] .b-latest-k { box-shadow: 4px 4px 0 color-mix(in srgb, var(--paint) 45%, #d8d2c4); }
html[data-paint="muted"] .seam-paint i { filter: saturate(0.45) brightness(1.08); }
html[data-paint="muted"] .b-bead { box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-magenta) 45%, #d8d2c4), 5px 0 14px 1px rgba(0, 229, 255, 0.8); }

/* ---------------------------------------------------------------- reduced motion: placed, with short fades */
html[data-rm="1"] .b-meta { clip-path: none; }
html[data-rm="1"] .b-own, html[data-rm="1"] .b-feat-wrap { transform: none; }
html[data-rm="1"] .b-latest-k { scale: 1; }
html[data-rm="1"][data-arrived="1"] .b-meta, html[data-rm="1"][data-arrived="1"] .b-own,
html[data-rm="1"][data-arrived="1"] .b-feat-wrap, html[data-rm="1"][data-arrived="1"] .b-latest-k { transition: opacity 200ms linear; }
html[data-rm="1"] .b-item.rv { clip-path: none; transition: opacity 200ms linear; }
html[data-rm="1"] .b-item.rv:not(.is-in) .b-cover img { transform: none; }
html[data-rm="1"] .b-month.rv .b-tick, html[data-rm="1"] .b-month.rv .b-mo-l, html[data-rm="1"] .b-month.rv .b-mo-r { transform: none; transition: opacity 200ms linear; }
html[data-rm="1"] .b-month.rv .b-tick { opacity: 0; }
html[data-rm="1"] .b-month.rv.is-in .b-tick { opacity: 1; }
html[data-rm="1"] .b-end.rv .b-bead { transform: none; opacity: 0; transition: opacity 200ms linear; }
html[data-rm="1"] .b-end.rv.is-in .b-bead { opacity: 1; }
html[data-rm="1"] .b-hint { transition: opacity 200ms linear; }
html[data-rm="1"] .b-cover img, html[data-rm="1"] .b-feat-cover img { transition: none; transform: none !important; }
html[data-rm="1"] .b-go i, html[data-rm="1"] .b-go i::after { transition: none; }
html[data-rm="1"] .b-still { transition: opacity 200ms linear; }

/* reached through the shell's router (html data-via="router"): the opener comes with the unfold, out of the line, not
   after a cold load's wait (the meta splits at once, the latest essay and the own-words card follow the title) */
html[data-via="router"][data-arrived="1"] .b-meta { transition-delay: 0ms, 0ms; }
html[data-via="router"][data-arrived="1"] .b-feat-wrap { transition-delay: 200ms, 200ms; }
html[data-via="router"][data-arrived="1"] .b-own { transition-delay: 440ms, 440ms; }
html[data-via="router"][data-arrived="1"] .b-latest-k { transition-delay: 760ms, 760ms; }