/* The shelf: his books and series, tied by threads. The homepage shows a
   few thread lines; the shelf page draws every thread as a soft ribbon
   between the books (left) and the series (right), and lists the threads
   instead on phones. Each work keeps its own colour; his words untouched. */
.ar { font-family: 'Amiri', 'Opening Newsreader', 'Newsreader', serif; font-style: normal; letter-spacing: 0; }

/* At night the darkest colours (Black Mirror, Dark, The Boys) lift towards
   the page's ink, so every ribbon and underline stays visible. */
:root { --shelf-lift: 0%; }
:root[data-theme='dark'] { --shelf-lift: 34%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --shelf-lift: 34%; } }

.home-shelf { padding: 56px 0 58px; }
.home-shelf > .section-title { margin: 0 0 30px; gap: 15px; font-size: 36px; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.home-shelf > .section-title .section-symbol { width: 28px; height: 28px; }
.home-shelf > .section-title:focus { outline: none; }
.shelf-line { margin-top: 30px; }
.shelf-shell { width: calc(100% - 64px); max-width: 1240px; margin: 56px auto 0; }
.shelf-intro { max-width: 760px; margin: -18px 0 0; font-size: 21px; font-style: italic; line-height: 1.55; }
.shelf-note { max-width: 760px; margin: 12px 0 0; color: var(--olive); font-size: 18px; line-height: 1.5; }
.shelf-page .th-map, .shelf-page .th-small { margin-top: 40px; }

/* A title you can tap: underlined in its own colour. */
.ti {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, color-mix(in srgb, var(--c), var(--text) var(--shelf-lift)) 75%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: pointer;
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ti:hover, .ti[aria-pressed='true'] { color: var(--accent); }
.ti:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.ti .ar { font-size: 1.08em; }

/* His line on whatever was tapped. */
.tell { max-width: 700px; margin: 28px 0 0; padding: 2px 0 2px 20px; border-left: 3px solid color-mix(in srgb, var(--c, var(--rule-warm)), var(--text) var(--shelf-lift)); transition: border-color .35s ease; }
.tell p { margin: 0; }
.tell-prompt { color: var(--olive); font-size: 18px; font-style: italic; }
.tell-title { font-size: 26px; font-style: italic; line-height: 1.2; }
.tell-title .ar { font-size: 1.1em; }
.tell-by { margin-top: 4px !important; color: var(--olive); font-size: 16px; }
.tell-why { margin-top: 10px !important; font-size: 19px; line-height: 1.55; text-wrap: pretty; }

/* Thread lines: what ties them, then the titles. */
.th-line { max-width: 980px; margin: 0 0 14px; font-size: 21px; line-height: 1.6; }
.th-label { margin-right: 6px; color: var(--olive); font-style: italic; }
.th-end { white-space: nowrap; }
.th-small .tell { margin: 4px 0 22px; }

/* The map: books on the left, series on the right, ribbons between. */
.th-map { position: relative; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(220px, 300px) minmax(max-content, 1fr); align-items: start; gap: 0 clamp(36px, 5vw, 72px); }
.th-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.th-path { fill: none; stroke: color-mix(in srgb, var(--c), var(--text) var(--shelf-lift)); stroke-opacity: .34; stroke-width: 2.5; stroke-linecap: round; pointer-events: visibleStroke; cursor: pointer; transition: stroke-opacity .25s ease, stroke-width .25s ease; }
.th-map.is-lit .th-path { stroke-opacity: .06; }
.th-map.is-lit .th-path.on { stroke-opacity: .95; stroke-width: 3.5; }
.th-col { position: relative; z-index: 1; }
.th-col ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.th-books { text-align: right; }
h2.th-head { margin: 0 0 10px; color: var(--olive); font-size: 17px; font-style: italic; letter-spacing: 0; }
h2.th-head::before { display: none; }
.th-node { font-size: 17px; line-height: 1.55; text-decoration-thickness: 1.5px; transition: color .2s ease, opacity .25s ease; }
.th-map.is-lit .th-node:not(.on) { opacity: .32; }
.th-node.on { color: var(--accent); }
.th-key { position: relative; z-index: 1; align-self: center; padding: 18px 20px; border-radius: 20px; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: center; }
.th-key p { text-align: center; }
.th-key .tell-title { font-size: 22px; }
.th-key .tell-why { font-size: 16.5px; }
.th-hint { margin: 0; color: var(--olive); font-size: 16px; font-style: italic; }
.th-links { margin-top: 14px; }
.th-links p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.45; text-wrap: balance; }
.th-links .th-label { margin-right: 2px; }
.th-small { display: none; }
@media (max-width: 899px) { .th-map { display: none; } .th-small { display: block; } }

@media (max-width: 760px) {
  .home-shelf { padding: 36px 0 44px; }
  .home-shelf > .section-title { font-size: 34px; gap: 13px; margin-bottom: 22px; }
  .home-shelf > .section-title .section-symbol { width: 25px; height: 25px; }
  .shelf-shell { width: calc(100% - 32px); margin-top: 36px; }
  .shelf-intro { margin-top: -10px; font-size: 19px; }
  .shelf-note { font-size: 17px; }
  .shelf-page .th-small { margin-top: 30px; }
  .tell { padding-left: 16px; }
  .tell-title { font-size: 23px; }
  .tell-why { font-size: 18px; }
  .th-line { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .ti, .th-path, .th-node, .tell { transition: none; }
}