/* =====================================================================
   PERSONAL WRITINGS — reinterprets the DayLoog (dayloog.com) home page
   as Kyle's writing index. The reference is a light, Astro/GSAP build;
   this is a hand-written, DARK-ONLY, Times New Roman port that keeps the
   signature motion (preloader wipe + counter, blend-mode cursor, the
   giant rolling title, the masked row reveals, the bottom-right hover
   preview, the About slide-in) but drops the theme toggle and rebrands
   the wordmark to "Writings".

   Loaded AFTER style.css, so these rules win for this page only. The big
   motion is gated behind `.js-anim` / `.is-loaded` (added by
   js/writings.js) so that with no JS — or with reduced-motion — every
   element is simply visible and static.
   ===================================================================== */

.writings-page {
  /* page-scoped palette, aligned to style.css :root but named locally so
     nothing here can leak into the shared nav / other pages */
  --w-bg:      #ffffff;
  --w-ink:     #171717;
  --w-heading: #0a0a0a;
  --w-muted:   #6a6a6a;
  --w-line:    rgba(0, 0, 0, 0.14);
  --w-ease:    cubic-bezier(0.16, 1, 0.3, 1);   /* soft ease-out for reveals */
  --w-ease-io: cubic-bezier(0.85, 0, 0.15, 1);  /* punchier ease for the loader */

  margin: 0;
  min-height: 100vh;
  background: var(--w-bg);
  color: var(--w-ink);
  /* Aktiv Grotesk — the same display/body face as the Home + Fintech 3 pages
     (loaded via the Typekit kit in the head), replacing the old Times serif. */
  font-family: "aktiv-grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* inverted selection reads as an editorial highlight on the black field */
.writings-page ::selection { background: var(--w-ink); color: var(--w-bg); }

/* ---------------------------------------------------------------------
   CURSOR — the page uses the normal OS cursor. Interactive elements get
   the standard pointer; no custom dot.
   --------------------------------------------------------------------- */
.writings-page a,
.writings-page button { cursor: pointer; }

/* ---------------------------------------------------------------------
   MAIN CONTAINER
   --------------------------------------------------------------------- */
.wr {
  position: relative;
  /* THE SHARED GRID. These are the same three values the home page's .landing
     uses, so the fixed nav — which is capped and padded to exactly this box —
     lines up on both pages without moving between them. The wordmark lands on
     the "Writings" title, and the right rail lands on the Field column.

     Was max-width: 1440px with its own clamp() gutters, which is why the nav sat
     71px left of the title and 116px past the Field column here. Do not give
     this page bespoke widths again without moving .landing and .site-nav too. */
  max-width: var(--landing-max);
  margin: 0 auto;
  padding-top: 128px;
  padding-bottom: 72px;
  padding-left: var(--page-pad-l);
  padding-right: var(--photo-inset);
}

/* The bottom-right HOVER PREVIEW lived here: a fixed tile that faded and rose
   into view showing the hovered row's number and field. Removed by request
   along with its markup and its JS. */

/* ---------------------------------------------------------------------
   HEAD — small intro line, the giant wordmark, and a mode row.
   --------------------------------------------------------------------- */
.wr-head { margin-bottom: clamp(3rem, 8vw, 6.5rem); }
.wr-head__intro {
  overflow: hidden;                 /* masks the .rise reveal */
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.4;
  color: var(--w-muted);
}
.wr-head__intro .rise { display: inline-block; }
.u-pc { display: inline; }

/* GIANT TITLE — plain, static text straight from the markup.

   This used to be a slot-machine: js/writings.js replaced each letter with a
   .wr-letter window containing a .wr-reel of random glyphs, then spun them and
   decelerated onto the real word on load. That was removed by request, and the
   .wr-letter / .wr-reel / .wr-reel__cell rules went with it — nothing generates
   that markup any more, so the rules could only ever have matched nothing. */
.wr-title {
  margin: 0;
  /* Shared hero-title size/weight/tracking — identical to Home and Fintech 3
     (see --title-* in style.css :root). */
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: 0.94;
  letter-spacing: var(--title-tracking);
  color: var(--w-heading);
  white-space: nowrap;
}

.wr-head__mode {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--w-muted);
  opacity: 0;
  transition: opacity 0.6s ease 0.35s;
}
.writings-page.is-loaded .wr-head__mode { opacity: 1; }
.wr-head__mode-count { color: var(--w-ink); }

/* ---------------------------------------------------------------------
   LIST — sticky column labels over year-grouped rows. Each row is a grid:
   id / title / field. Row hover rolls the title (shadow-copy trick) and
   underlines it, while the preview tile updates.
   --------------------------------------------------------------------- */
.wr-list { position: relative; }

.wr-list__head {
  position: sticky;
  top: 92px;                        /* rests just under the fixed nav */
  z-index: 1;
  pointer-events: none;
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr minmax(6rem, 10rem);
  gap: clamp(1rem, 4vw, 3rem);
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--w-line);
}
.wr-list__head p {
  margin: 0;
  overflow: hidden;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-muted);
}
.wr-list__head [data-col="3"] { text-align: right; }
.wr-list__head .rise { display: inline-block; }

.wr-list__ul { list-style: none; margin: 0; padding: 0; }

.wr-list__year {
  overflow: hidden;
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--w-muted);
}
.wr-list__year .word { display: inline-block; }

.wr-list__row { position: relative; }

.wr-item {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr minmax(6rem, 10rem);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline;
  padding: clamp(0.9rem, 1.8vw, 1.4rem) 0;
  text-decoration: none;
  color: var(--w-ink);
}
.wr-item__id,
.wr-item__title,
.wr-item__field {
  margin: 0;
  overflow: hidden;                 /* masks the load reveal + clips the hover roll */
  /* Was multiplied by var(--fs-scale), which the removed text-size control set.
     With nothing left to change it the factor was permanently 1, so the clamp
     now stands on its own. */
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.15;
}
.wr-item__id {
  color: var(--w-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.wr-item__field {
  text-align: right;
  color: var(--w-muted);
  letter-spacing: 0.01em;
}
.wr-item .word { display: inline-block; }

.wr-item__title-inner {
  display: inline-block;
  transition: transform 0.34s var(--w-ease), color 0.34s ease;
}
.wr-item:hover .wr-item__field { color: var(--w-ink); }

/* hover roll on the title: a shadow duplicate parked one line above drops
   into place as the real text rolls down out of the clip. Gated to real
   pointers — on touch the title wraps to two lines and the parked copy
   would bleed into the second line, so there it stays plain text. */
@media (hover: hover) and (pointer: fine) {
  .wr-item__title-inner { text-shadow: 0 -1.15em 0 var(--w-heading); }
  .wr-item:hover .wr-item__title-inner { transform: translateY(1.15em); color: var(--w-heading); }
}

.wr-item__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--w-line);
  transform: scaleX(1);
  transform-origin: left center;
}
/* the hairline sweeps to full ink on hover */
.wr-item__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--w-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--w-ease);
}
.wr-item:hover .wr-item__line::after { transform: scaleX(1); }

.wr-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--w-line);
  color: var(--w-muted);
  font-size: 0.85rem;
}

/* The bottom-left CUSTOM PANEL lived here: a toggle that opened a Small /
   Medium / Large text-size control, which set --fs-scale on the page. Removed
   by request along with its markup, its JS, and --fs-scale itself. */

/* ---------------------------------------------------------------------
   LOAD / SCROLL REVEAL — masked slide-up on the intro, sticky labels, and
   each row's words. Gated on `.js-anim`; head reveals on `.is-loaded`,
   rows reveal per-viewport via `.in` (IntersectionObserver in JS).
   --------------------------------------------------------------------- */
.writings-page.js-anim .wr-head__intro .rise,
.writings-page.js-anim .wr-list__head .rise,
.writings-page.js-anim .wr-list__year .word,
.writings-page.js-anim .wr-item .word {
  transform: translateY(115%);
  transition: transform 0.85s var(--w-ease);
}
/* per-column stagger inside a row */
.writings-page.js-anim .wr-item__title .word { transition-delay: 0.05s; }
.writings-page.js-anim .wr-item__field .word { transition-delay: 0.1s; }

/* revealed states */
.writings-page.is-loaded .wr-head__intro .rise,
.writings-page.is-loaded .wr-list__head .rise,
.writings-page.js-anim .wr-list__year.in .word,
.writings-page.js-anim .wr-list__row.in .word {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .writings-page.js-anim .wr-head__intro .rise,
  .writings-page.js-anim .wr-list__head .rise,
  .writings-page.js-anim .wr-list__year .word,
  .writings-page.js-anim .wr-item .word {
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   MOBILE — drop the field column + sticky labels + preview; let the
   giant title breathe and the intro go full width.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .wr { padding-top: 104px; }
  .u-pc { display: none; }

  .wr-list__head { display: none; }
  .wr-item {
    grid-template-columns: minmax(3.5rem, 5rem) 1fr;
    gap: clamp(0.75rem, 6vw, 2rem);
  }
  .wr-item__field { display: none; }

  /* the title hover-roll assumes a single-line title; at this width titles
     wrap, so the parked shadow copy would bleed onto the second line — drop
     the shadow and the roll (this also covers a narrow desktop window, where
     the pointer is still "fine" but the title has begun to wrap) */
  .wr-item__title-inner,
  .wr-item:hover .wr-item__title-inner { text-shadow: none; transform: none; }

  .wr-title { white-space: normal; }   /* size stays on the shared --title-size */
}