/* ─────────────────────────────────────────────────────────────────────
   components.css
   The editorial markup (LainMention, Caret), the CatLink and its glass
   lightbox, the image wall, the newsletter form, the Instagram anchor, the
   inline section titles, and the experience showcase.

   The parenthetical treatment was removed page-wide (parens off); the
   decorative Highlight system was already gone in v3. The only highlight
   now is the functional active-section tint, which lives with the reading
   experience in layout.css.

   See design-system-v3.md §"Components".
   ───────────────────────────────────────────────────────────────────── */

/* ─── 05. CARET (the statement's blinking cursor) ─────────────────────
   A thin vertical bar after the full stop, like a text field waiting to
   be written in. CSS-only, step-end blink. Color from --accent. */
.caret {
  display: inline-block;
  width: 2px;
  height: 0.86em;
  margin-left: 0.08em;
  vertical-align: -0.06em;
  background: var(--accent);
  animation: caret-blink 1.1s step-end infinite;
}
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ─── 08. LAIN MENTION ───────────────────────────────────────────────
   "Serial Experiments Lain", mono italic skew, this proper noun only.
   No underline (the design system specifies mono italic only). */
.lain {
  display: inline-block;
  font-family: var(--font-mono);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.sidebar-nav__link .lain { font-style: italic; }

/* ─── 13. CATLINK (the sentence is the link) ─────────────────────────
   The early-2000s hyperlink lives on the sentence "Stray cats deserve
   their spotlight." The small color image sits beside it and keeps the
   telescope cursor on hover. Both open the glass lightbox on a real
   click (so it fires on tap). */
.cat-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  cursor: pointer;
  transition: text-decoration-thickness var(--d-hover) var(--ease),
              opacity var(--d-hover) var(--ease);
}
.cat-link:hover,
.cat-link:focus-visible {
  text-decoration-thickness: 3px;
  outline: none;
}

/* The inline cat: a 38px color plate sitting on the baseline, with the
   telescope cursor (below) inviting a closer look. */
.cat-inline { white-space: nowrap; }

.cat-thumb {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: 0 0.1em 0 0.4em;
  object-fit: cover;
  vertical-align: -11px;
  border: 1px solid var(--rule);
  image-rendering: -webkit-optimize-contrast;
}

/* The telescope cursor (a spyglass, base64 SVG), shared by everything
   that expands onto the glass lightbox: the inline cat and the wall
   photos. */
.cat-thumb,
.image-wall__btn {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSgtNDAgMTYgMTYpIiBmaWxsPSIjMjgzNTQxIiBzdHJva2U9IiNGM0YzRjYiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBwYWludC1vcmRlcj0ic3Ryb2tlIj48cGF0aCBkPSJNNyAxMi4yIEwyMSAxMC42IEwyMSAyMS40IEw3IDE5LjggWiIvPjxyZWN0IHg9IjIwLjQiIHk9IjkuMiIgd2lkdGg9IjQiIGhlaWdodD0iMTMuNiIgcng9IjAuNCIvPjxwYXRoIGQ9Ik00LjYgMTMgTDcgMTIuNCBMNyAxOS42IEw0LjYgMTkgWiIvPjwvZz48cmVjdCB4PSIxNC42IiB5PSIxMS43IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjguNiIgdHJhbnNmb3JtPSJyb3RhdGUoLTQwIDE2IDE2KSIgZmlsbD0iI0YzRjNGNiIvPjwvc3ZnPgo=") 16 16, zoom-in;
}

/* ─── Glass lightbox ─────────────────────────────────────────────────
   Real frosted glass, not a flat pale overlay: the page behind reads as a
   blurred texture through a low-opacity tint (backdrop-filter). The photo
   floats on the glass, lifted by a quiet shadow. Fades in over --d-modal. */
.lightbox {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 30%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
          backdrop-filter: blur(22px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--s-3), 6vw, var(--s-8));
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-modal) var(--ease);
}
.lightbox[data-open="true"] { opacity: 1; pointer-events: auto; }

.lightbox__panel {
  max-width: min(560px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: var(--s-1_5);
}

.lightbox__img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 70px -28px rgba(40, 53, 65, 0.5);
}

/* v3.3 task 5: captions are fully --ink, including the parenthetical.
   "(Computerized Axial Tomography)" reads in the same ink as "CAT", not
   the muted grey, and the parens take no accent/bracket colour. */
.lightbox__caption {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.lightbox__caption b { color: var(--ink); font-weight: 600; }

.lightbox__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-muted);
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--s-1) var(--s-1_5);
  transition: color var(--d-hover) var(--ease);
}
.lightbox__close:hover,
.lightbox__close:focus-visible { color: var(--ink); outline: none; }

/* ─── 12. IMAGE WALL (replaces the building plate) ───────────────────
   Four editorial photos scattered loosely over the open air beside the
   letter, per Mei's reference: TINY straight thumbnails (not very visible
   until opened), irregular placement, lots of air, no tilt, no captions,
   no frames. Absolute placement inside a relative box so the scatter is
   deliberate; percentage geometry keeps it proportional as the column
   flexes, with px floors so the thumbs survive mobile (responsive.css
   only adjusts the container height). Each opens large in the wall
   lightbox. */
.image-wall {
  position: relative;
  /* Taller than before so the cluster has more vertical air and the bottom
     image can sit low, close to the app mockup below (Mei, 6/13 desktop
     reference). Mobile re-pins a shorter height (responsive.css). */
  height: clamp(280px, 30vw, 420px);
}

.image-wall__item {
  position: absolute;
  margin: 0;
}

/* Each photo is a quiet button (it expands onto the glass lightbox, like
   the cat): no chrome of its own, just the image. The spyglass cursor is
   shared with .cat-thumb above. */
.image-wall__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}

.image-wall__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Desktop scatter (Mei, 6/13 reference): the same relative arrangement —
   street upper left, flowers upper right, feet center a step lower, corridor
   low and right of center — but spread wider and a touch larger. The
   leftmost (street) sits near the left edge of the text column, the
   rightmost (flowers) near the right edge, and the corridor drops low to
   meet the mockup below. Mobile re-pins the prior, approved values
   (responsive.css), so this desktop spread does not regress the phone. */
.image-wall__item--street   { left: 3%;  top: 0;   width: 9%;    min-width: 48px; }
.image-wall__item--flowers  { left: 78%; top: 2%;  width: 11.5%; min-width: 56px; }
.image-wall__item--feet     { left: 31%; top: 37%; width: 11%;   min-width: 56px; }
.image-wall__item--corridor { left: 50%; top: 84%; width: 10.5%; min-width: 52px; }

/* ─── 15. NEWSLETTER FORM ─────────────────────────────────────────── */
.newsletter__intro {
  font-family: var(--font-body);
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 var(--s-3) 0;
  text-wrap: pretty;
}

.newsletter {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  max-width: 420px;
}

.newsletter__input {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--s-2);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: 0;
  outline: none;
  border-radius: var(--r-soft);
  transition: box-shadow var(--d-hover) var(--ease);
}
.newsletter__input::placeholder { color: var(--ink-muted); }
.newsletter__input:focus { box-shadow: inset 0 0 0 1px var(--accent); }

.newsletter__submit {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--d-hover) var(--ease);
  border-radius: var(--r-soft);
}
.newsletter__submit:hover { background: var(--accent); }
.newsletter__submit:disabled { background: var(--ink-soft); cursor: progress; }
.newsletter__submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.newsletter__success,
.newsletter__error {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
}
.newsletter__success { color: var(--ink-soft); margin-top: var(--s-1); }
.newsletter__error {
  color: var(--accent);
  margin-top: var(--s-1);
  font-size: 0.8125rem;
  font-family: var(--font-ui);
}

/* ─── 16. SOCIAL ANCHORS (footnote weight) ───────────────────────── */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-3);
}

.social-anchor {
  position: relative;
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  transition: color var(--d-hover) var(--ease);
  text-decoration: none;
}
.social-anchor:hover,
.social-anchor:focus-visible { color: var(--ink); outline: none; }

.social-anchor__arrow {
  display: inline-block;
  margin-left: 0.25em;
  transition: transform 200ms var(--ease);
}
.social-anchor:hover .social-anchor__arrow,
.social-anchor:focus-visible .social-anchor__arrow { transform: translateX(4px); }

/* ─── HAIRLINE (used sparingly; never between sections) ──────────── */
.hairline {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-3) 0;
}

/* ─── INLINE SECTION TITLE (The experience, [Connect]) ───────────────
   Top-left section title for the full-width sections below the letter,
   where there is no sidebar to carry the heading (task 7 / task 9). Same
   register as the sidebar labels: --font-label at the label step. Shared
   by "The experience" and "[Connect]". */
.inline-title {
  display: block;
  font-family: var(--font-label);
  font-size: var(--type-label);   /* 24px, matching sidebar labels */
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.12;
  color: var(--ink);
  text-align: left;
  margin: 0 0 var(--s-3) 0;
}

/* ─── 18. EXPERIENCE SHOWCASE (full-width, task 7) ──────────────────
   Three app screens spanning the full width, left to right, evenly spaced.
   Until the other two arrive the same mockup renders three times (main.js).
   Per-screen: as-is image (no frame, no card, no border, no shadow) with a
   short function caption (explore / read / write) beneath. */
.experience-section {
  /* Short top (the wall above hands off without a dead zone), generous
     bottom before the band. */
  padding-block: var(--s-6) clamp(var(--s-8), 10vw, 8rem);
  background: var(--paper);
}

.experience-section .inline-title {
  margin-bottom: var(--s-6);
}

.experience-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);                  /* 48px between screens */
  align-items: start;
  justify-items: center;
}

/* One screen plus its caption. */
.experience-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1_5);                /* 12px between the screen and its caption */
  margin: 0;
  width: 100%;
}

.experience-screen {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: var(--r-sharp);
  border: 0;
  background: none;
}

/* Function caption: Inter, full --ink, caption size (v3.3 tasks 5 + 7).
   Lowercase sentence-case fragment, no terminal punctuation. */
.experience-caption {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--ink);
  text-align: center;
}

/* ─── 19. READING SCREEN (live HTML phone mockup in The Experience) ──
   All classes prefixed rs- to avoid collisions with the rest of the site.
   Designed at 610x1250; JS scales it to match the image screens. */

.reading-screen-wrap {
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  position: relative;
}

.rs-phone {
  position: absolute;
  top: 0;
  left: 0;
  width: 610px;
  height: 1250px;
  flex: none;
  border: 5px solid #C8AAAD;
  border-radius: 60px;
  background: #F4F4F6;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  color: #283541;
  display: flex;
  flex-direction: column;
  transform-origin: top left;
}

.rs-status {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 56px;
  position: relative;
  flex: none;
}
.rs-status .rs-time {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .01em;
}
.rs-status .rs-island {
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translateX(-50%);
  width: 188px;
  height: 40px;
  border-radius: 24px;
  background: #CED6DD;
  border: 1.5px solid #C8AAAD;
}
.rs-status .rs-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rs-status svg { display: block; }

.rs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 50px 24px;
}
.rs-header .rs-screen-title {
  font-size: 24px;
  font-weight: 600;
}
.rs-header .rs-dot { color: #B26368; }

.rs-progress {
  height: 3px;
  background: rgba(40,53,65,.10);
  position: relative;
}
.rs-progress .rs-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 58%;
  background: #B26368;
}

.rs-reader {
  flex: 1;
  padding: 54px 36px 0;
  overflow: hidden;
}
.rs-kicker {
  font-size: 19px;
  color: #B26368;
  letter-spacing: .08em;
}
.rs-title {
  font-family: 'GeistMono', monospace;
  margin-top: 16px;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.rs-byline {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.rs-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #283541;
  color: #F4F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 500;
}
.rs-who { font-size: 19px; }
.rs-who span { color: #95A0AA; }

.rs-body {
  margin-top: 46px;
  font-family: 'Lora', serif;
  font-size: 27px;
  line-height: 1.5;
  color: #283541;
}
.rs-body p { all: unset; display: block; }
.rs-body p + p { margin-top: 32px; }
.rs-lain {
  font-family: 'JetBrains Mono', monospace;
  font-style: italic;
  font-size: 0.9em;
}
.rs-hl {
  background: rgba(178,99,104,.16);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 2px 3px;
  position: relative;
}
.rs-hl .rs-pin {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B26368;
  top: -5px;
  left: -5px;
}

.rs-dock {
  flex: none;
  height: 118px;
  border-top: 1.5px solid rgba(40,53,65,.10);
  background: #F4F4F6;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 60px 14px;
}
.rs-act {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rs-act .rs-n {
  font-size: 19px;
  transition: opacity .22s ease;
}

.rs-eyebtn {
  background: none;
  border: none;
  padding: 14px;
  margin: -14px;
  cursor: pointer;
  color: #283541;
  -webkit-tap-highlight-color: transparent;
}
.rs-eyebtn:focus-visible {
  outline: 2.5px solid #B26368;
  outline-offset: 5px;
  border-radius: 12px;
}
.rs-eyewrap {
  position: relative;
  width: 32px;
  height: 22px;
  display: block;
}
.rs-eyewrap svg {
  position: absolute;
  inset: 0;
  transition: opacity .22s ease;
}
.rs-eye-shut { opacity: 0; }
.rs-phone.rs-metrics-hidden .rs-eye-open { opacity: 0; }
.rs-phone.rs-metrics-hidden .rs-eye-shut { opacity: 1; }
.rs-phone.rs-metrics-hidden .rs-act .rs-n { opacity: 0; }

.rs-phone.rs-is-blinking .rs-eye-open { opacity: 0; }
.rs-phone.rs-is-blinking .rs-eye-shut { opacity: 1; }
.rs-phone.rs-is-blinking .rs-act .rs-n { opacity: 0; }
.rs-phone.rs-blink-anim .rs-eyewrap svg,
.rs-phone.rs-blink-anim .rs-act .rs-n { transition: opacity var(--blink-d, .2s) cubic-bezier(0.4, 0, 0.2, 1); }

@media (prefers-reduced-motion: reduce) {
  .rs-eyewrap svg,
  .rs-act .rs-n,
  .rs-phone.rs-blink-anim .rs-eyewrap svg { transition: none; }
}

/* ─── Global focus ring ──────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.sidebar-nav__link:focus-visible { outline-offset: 6px; }