/* ============================================================
   Reading pages.
   Same night, one degree warmer, and set for a long sitting:
   larger reading size, longer leading, a measure that keeps the
   line under seventy characters.
   ============================================================ */

.theme-page { background: var(--ember-ink); }

.atmosphere--quiet .atmosphere__plate--page {
  opacity: 1;
  background:
    radial-gradient(74% 42% at 50% -6%, rgba(215, 154, 95, 0.11), transparent 68%),
    radial-gradient(90% 60% at 50% 108%, rgba(215, 154, 95, 0.07), transparent 72%),
    linear-gradient(180deg, #121016 0%, #0d0b09 46%, #100d0a 100%);
}

.article { padding-block: clamp(7rem, 13vw, 10rem) clamp(4rem, 8vw, 6rem); }

.article__body {
  width: 100%;
  /* Wider than a strict reading measure, and deliberately so, but
     measured rather than guessed. 58rem put the line at 101
     characters, which is past the point where the eye reliably
     finds the next line on the return sweep. 50rem with the larger
     type lands near 85: about a fifth wider than it was, visibly
     more substantial, and still trackable. */
  max-width: 50rem;
  margin-inline: auto;
  /* named, because the full-bleed figures below have to cancel
     exactly this and nothing else. They used to cancel --gutter,
     which stopped matching the moment this padding changed and put
     4px of horizontal scroll on every phone. */
  --body-pad: clamp(1.25rem, 3.5vw, 2.6rem);
  padding-inline: var(--body-pad);
}

.article__head { margin-bottom: clamp(2.8rem, 6vw, 4.5rem); }

.article__meta {
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
  margin-bottom: 1.8rem;
  font-family: var(--micro);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
}
.article__meta b { color: var(--amber); font-weight: 500; }

.article__title { color: var(--cream); margin-bottom: 1.6rem; }

.article__stand {
  /* one value, not two. There were two max-widths here and the
     32rem underneath was quietly winning, which is what made the
     opening of every article read narrower than the article. */
  max-width: 44rem;
  font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.46rem);
  font-variation-settings: 'opsz' 30;
  line-height: 1.58;
  font-weight: 350;
  font-style: italic;
  color: var(--haze);
}

/* ---- the prose itself ---- */

.article__prose {
  font-size: clamp(1.13rem, 1.06rem + 0.32vw, 1.3rem);
  line-height: 1.8;
  /* stated, not inherited. This is the most-read text on the site
     and it should not depend on what a parent happens to carry. */
  font-weight: 350;
  color: #d5ccbf;
  text-wrap: pretty;
  /* set for a long sitting: the reading optical size, and quotes and
     opening brackets hung into the margin so the measure stays true */
  font-variation-settings: 'opsz' 18;
  hanging-punctuation: first last;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}
.article__prose > * + * { margin-top: 1.35em; }

.article__prose p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 300;
  font-size: 3.55em;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  color: var(--amber-hi);
}

.article__prose em { font-style: italic; color: var(--cream); }
.article__prose strong { font-weight: 400; color: var(--cream); }

.article__prose a {
  color: var(--cream);
  background-image: linear-gradient(var(--amber-dim), var(--amber-dim));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
}
.article__prose a:hover { color: var(--amber-hi); background-size: 100% 2px; }

.article__prose h2 {
  color: var(--cream);
  margin-top: 2.6em;
  margin-bottom: 0.7em;
}

.article__prose blockquote {
  margin-block: 2.2em;
  letter-spacing: -0.012em;
  padding-left: clamp(1.2rem, 4vw, 2.2rem);
  border-left: 1px solid var(--amber-dim);
  font-family: var(--display);
  font-size: 1.5em;
  font-weight: 300;
  line-height: 1.34;
  color: var(--cream);
}

.article__break {
  width: 4rem;
  margin-block: 3em;
  margin-inline: auto;
  background: var(--amber-dim);
}

/* ---- what comes next ---- */

/* ---- where to go next -------------------------------------------
   Two destinations, each a panel you can actually aim at, rather
   than two underlined strings sitting in the margin.
   ---------------------------------------------------------------- */

.pager {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: clamp(4rem, 9vw, 6.5rem);
  padding-top: clamp(2.4rem, 5vw, 3.6rem);
  border-top: 1px solid var(--hairline-2);
}
@media (min-width: 44rem) {
  .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager__side--next { grid-column: 2; }
}

.pager__side {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 1rem 1rem 1.35rem;
  background: rgba(236, 226, 212, 0.018);
  border: 1px solid var(--hairline-2);
  transition: background var(--t-panel) var(--ease),
              border-color var(--t-panel) var(--ease),
              transform var(--t-panel) var(--ease);
}
.pager__side:hover,
.pager__side:focus-visible {
  background: rgba(236, 226, 212, 0.045);
  border-color: var(--amber-dim);
  transform: translateY(-3px);
}
.pager__side:active { transform: translateY(-1px); }

.pager__plate {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  margin-bottom: 1.1rem;
  background: var(--storm);
}
.pager__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.92);
  transition: transform var(--t-reveal) var(--ease), filter var(--t-reveal) var(--ease);
}
.pager__side:hover .pager__plate img,
.pager__side:focus-visible .pager__plate img {
  transform: scale(1.05);
  filter: brightness(1) saturate(1);
}

.pager__plate--type {
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: linear-gradient(160deg, rgba(236, 226, 212, 0.05), rgba(236, 226, 212, 0.015));
}
.pager__plate--type span {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--haze);
  transition: color var(--t-panel) var(--ease);
}
.pager__side:hover .pager__plate--type span { color: var(--amber-hi); }

.pager__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.pager__way {
  font-family: var(--micro);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color var(--t-panel) var(--ease);
}
.pager__side:hover .pager__way { color: var(--amber); }

/* the arrow travels the way you are about to go */
.pager__arrow {
  position: relative;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1px;
  background: var(--amber-dim);
  transition: background var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.pager__arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0.42rem; height: 0.42rem;
  border-top: 1px solid var(--amber);
  border-right: 1px solid var(--amber);
}
.pager__side--next .pager__arrow::after {
  right: 0; transform: translateY(-50%) rotate(45deg);
}
.pager__side--prev .pager__arrow::after {
  left: 0; transform: translateY(-50%) rotate(-135deg);
}
.pager__side:hover .pager__arrow { background: var(--amber); }
.pager__side--next:hover .pager__arrow { transform: translateX(5px); }
.pager__side--prev:hover .pager__arrow { transform: translateX(-5px); }

.pager__title {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  line-height: 1.18;
  color: var(--cream);
  transition: color var(--t-panel) var(--ease);
}
.pager__side:hover .pager__title { color: var(--amber-hi); }

@media (prefers-reduced-motion: reduce) {
  .pager__side,
  .pager__side:hover,
  .pager__arrow,
  .pager__plate img { transition: none; transform: none; }
}

.article__back { margin-top: 2.5rem; }

/* the journal index reuses the home page contents block, but as the
   only content on the page it wants room to breathe */
.theme-page .contents { border-top-color: var(--hairline); }


/* ---- in-article images ------------------------------------------
   Wider than the measure, because an image set to the text column
   reads as an attachment rather than as part of the argument.
   ---------------------------------------------------------------- */

/* Set to the measure, not breaking out of it. Full bleed made every
   image compete with the sentence it was illustrating; held to the
   column the picture reads as part of the argument and the reader's
   eye never has to re-find the left margin. */
.article__figure {
  margin-block: clamp(2.6rem, 6vw, 4rem);
  margin-inline: 0;
}

.article__figure img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  background: var(--storm);
  filter: brightness(0.94) saturate(0.96);
}

.article__figure figcaption {
  margin-top: 0.9rem;
  padding-inline: 0;
  font-family: var(--micro);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}



/* ---- the article hero -------------------------------------------
   Full bleed above the headline, and the one image on the page that
   is not lazy: it is the largest thing the reader sees first.
   ---------------------------------------------------------------- */

.article__hero {
  border-radius: var(--radius-lg);
  margin: 0 0 clamp(2.4rem, 5vw, 3.6rem);
  margin-inline: 0;
  max-height: 54vh;
  overflow: hidden;
}
.article__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(0.96);
}

/* The opening image stops at the column edge like everything else.
   It used to reach a further 9vw past the body on wide screens,
   which made it the loudest thing on a reading page. */

/* ---- the reading light ------------------------------------------
   The prose warms word by word as it is read past, the same gesture
   the pull quote on the home page uses.

   The unlit value is the whole design decision here. The quote sets
   its words at 16% because it is one line you look at. Prose has to
   stay readable before it lights, so the floor is 38%: dimmer than
   read text, never mistakable for broken text.
   ---------------------------------------------------------------- */

.article__prose .w {
  color: rgba(207, 197, 183, 0.38);
  transition: color var(--t-panel) var(--ease);
}
.article__prose .w[data-lit='true'] { color: #cfc5b7; }

/* a page with no motion layer is a page of fully lit prose */
.js-off .article__prose .w { color: #cfc5b7; }

/* links keep their own colour whether or not they have been reached */
.article__prose a .w,
.article__prose a .w[data-lit='true'] { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .article__prose .w { color: #cfc5b7 !important; transition: none; }
}

/* ============================================================
   THE PHONE
   The same floor the home page's mobile layer sets: no interface
   type under about 12px, and no target under 44. A reading page is
   held further from the eye than a laptop screen and is the one
   place on this site where someone stays for several minutes.
   ============================================================ */

@media (max-width: 47.99rem) {
  .article__meta { font-size: 0.74rem; letter-spacing: 0.16em; gap: 0.6rem 1.2rem; }
  .article__figure figcaption { font-size: 0.74rem; letter-spacing: 0.11em; }

  /* Previous and Next were 9.9px labels over the titles they belong
     to, which is smaller than anything else on the page and sat on
     the two controls a reader is most likely to want at the end. */
  .pager__way { font-size: 0.74rem; letter-spacing: 0.16em; }
  .pager__side { min-height: 44px; }
}