/* ============================================================================
   WatchCap · Field Notes (the journal)
   Index + single note. Builds on wc-system.css tokens and reuses wc-home.css
   for nav / footer / reveal / full-bleed photo. This file is note-specific.
   ========================================================================== */

/* —— page header ————————————————————————————————————————————————————————— */
.fn-head { padding: clamp(120px, 20vh, 220px) clamp(24px, 6vw, 80px) clamp(40px, 7vh, 80px);
  max-width: 880px; margin: 0 auto; }
.fn-head .eyebrow { margin-bottom: 22px; }
.fn-title { font-family: var(--wc-read); font-weight: 400; letter-spacing: -0.4px;
  font-size: clamp(36px, 6vw, 68px); line-height: 1.04; margin: 0; color: var(--wc-ink); }
.fn-title em { font-style: italic; }
.fn-intro { font-family: var(--wc-read); font-size: clamp(17px, 2vw, 20px); line-height: 1.6;
  color: var(--wc-ink-2); margin: 24px 0 0; max-width: 46ch; }

/* —— the index: a grid of 3×5 cards (a quiet nod, no ruled lines) ————————— */
.fn-list { max-width: 1080px; margin: clamp(40px,5vh,60px) auto clamp(80px,14vh,160px); padding: 0 clamp(24px, 6vw, 60px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.fn-list[hidden], .fn-catalog[hidden] { display: none; }
@media (max-width: 680px) { .fn-list { grid-template-columns: 1fr; } }
.fn-item { position: relative; display: flex; flex-direction: column; gap: 13px;
  text-decoration: none; color: inherit; background: var(--wc-bg);
  border: 1px solid var(--wc-rule); border-radius: 3px;
  /* 3×5 proportion + a touch of breathing room; left pad clears the margin line */
  min-height: clamp(208px, 25vw, 290px);
  padding: clamp(26px,3vw,38px) clamp(26px,3vw,38px) clamp(26px,3vw,36px);
  box-shadow: 0 18px 42px -36px rgba(0,0,0,0.4);
  transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.fn-item:hover { box-shadow: 0 26px 56px -40px rgba(0,0,0,0.5); border-color: color-mix(in srgb, var(--wc-accent) 40%, var(--wc-rule)); }
.fn-list .fn-item.reveal { transform: none; }
.fn-cat { display: block; font-family: var(--wc-type); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wc-ink-3); padding-bottom: 5px; transition: color 0.3s ease;
  border-bottom: 1px solid color-mix(in srgb, var(--wc-accent) 26%, var(--wc-rule)); }
.fn-item-title { font-family: var(--wc-read); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12; letter-spacing: -0.3px; color: var(--wc-ink); margin: 0;
  position: relative; align-self: flex-start; max-width: 100%; }
.fn-item-title em { font-style: italic; }
.fn-excerpt { font-family: var(--wc-read); font-size: 16px; line-height: 1.5; color: var(--wc-ink-2);
  margin: 0; }
/* hover: FN no. lights up + a hand-drawn line underlines the title, drawing itself in */
.fn-item:hover .fn-cat { color: var(--wc-accent); }
.fn-underline { position: absolute; left: 0; bottom: -10px; width: 100%; height: 12px;
  overflow: visible; color: var(--wc-accent); pointer-events: none; }
.fn-underline path { vector-effect: non-scaling-stroke;
  stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0;
  /* leaving: the finished line just fades out (no reverse-draw), then the dash resets once it's invisible */
  transition: opacity 0.45s ease, stroke-dashoffset 0s linear 0.45s; }
.fn-item:hover .fn-underline path { stroke-dashoffset: 0; opacity: 1;
  /* entering: draw it in, like underlining */
  transition: opacity 0.12s ease, stroke-dashoffset 0.9s cubic-bezier(.45,.05,.25,1); }

/* —— search + view toolbar ——————————————————————————————————————————————— */
.fn-bar { max-width: 1080px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 60px) 22px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; flex-wrap: wrap;
  border-bottom: 1px solid var(--wc-rule); }
.fn-search { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; max-width: 360px; }
.fn-search svg { color: var(--wc-ink-3); flex: none; }
.fn-search input { flex: 1; background: none; border: 0; border-bottom: 1px solid var(--wc-rule);
  padding: 8px 0; font-family: var(--wc-type); font-size: 14px; letter-spacing: 0.02em; color: var(--wc-ink); }
.fn-search input::placeholder { color: var(--wc-ink-3); }
.fn-search input:focus { outline: none; border-bottom-color: var(--wc-accent); }
.fn-views { display: flex; gap: 20px; font-family: var(--wc-type); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; }
.fn-views button { background: none; border: 0; cursor: pointer; color: var(--wc-ink-3);
  padding: 6px 0; border-bottom: 1.5px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.fn-views button.on { color: var(--wc-ink); border-bottom-color: var(--wc-accent); }
.fn-views button:hover { color: var(--wc-ink); }

.fn-empty { max-width: 1080px; margin: 0 auto; padding: 60px clamp(24px,6vw,60px);
  font-family: var(--wc-read); font-style: italic; font-size: 18px; color: var(--wc-ink-3); }

/* —— catalog (library-card list) ————————————————————————————————————————— */
.fn-catalog { max-width: 1080px; margin: clamp(40px,5vh,60px) auto clamp(80px,14vh,160px); padding: 0 clamp(24px, 6vw, 60px); }
.fn-cat-head, .fn-cat-row { display: grid; grid-template-columns: 70px 130px 1fr 90px; gap: 24px; align-items: baseline; }
.fn-cat-head { padding: 18px 0 12px; border-bottom: 1px solid var(--wc-rule);
  font-family: var(--wc-type); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wc-ink-3); }
.fn-cat-row { padding: 17px 0; border-bottom: 1px solid var(--wc-rule); text-decoration: none; color: inherit; }
.fn-cat-no { font-family: var(--wc-type); font-size: 12px; letter-spacing: 0.12em; color: var(--wc-accent); }
.fn-cat-date { font-family: var(--wc-type); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-ink-3); }
.fn-cat-ttl { font-family: var(--wc-read); font-size: clamp(18px, 2vw, 22px); line-height: 1.2; color: var(--wc-ink); transition: color 0.2s ease; }
.fn-cat-ttl em { font-style: italic; }
.fn-cat-author { font-family: var(--wc-type); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wc-ink-3); text-align: right; }
.fn-cat-row:hover .fn-cat-ttl { color: var(--wc-accent); }
@media (max-width: 680px) {
  .fn-cat-head { display: none; }
  .fn-cat-row { grid-template-columns: 60px 1fr; gap: 8px 16px; }
  .fn-cat-date, .fn-cat-author { display: none; }
}

/* —— single note ————————————————————————————————————————————————————————— */
.note-head { max-width: 660px; margin: 0 auto; padding: clamp(120px,20vh,210px) clamp(24px,6vw,40px) 0; }
.note-kicker { font-family: var(--wc-type); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--wc-ink-3); margin-bottom: 22px; }
.note-kicker .no { color: var(--wc-accent); }
.note-colophon { max-width: 620px; margin: 0 auto; padding: clamp(40px,7vh,72px) clamp(24px,6vw,40px) 0; }
.note-colophon .by { font-family: var(--wc-read); font-style: italic; font-size: 19px; color: var(--wc-ink); }
.note-colophon .cmeta { display: block; font-family: var(--wc-type); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--wc-ink-3); margin-top: 10px; }
.note-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-family: var(--wc-type); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wc-ink-3); margin-bottom: 26px; }
.note-meta .no { color: var(--wc-accent); }
.note-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--wc-rule); }
.note-title { font-family: var(--wc-read); font-weight: 400; letter-spacing: -0.5px;
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.06; margin: 0; color: var(--wc-ink); }
.note-title em { font-style: italic; }
.note-dek { font-family: var(--wc-read); font-style: italic; font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.45; color: var(--wc-ink-2); margin: 22px 0 0; }
.note-rule { width: 34px; height: 1px; background: var(--wc-accent); border: 0; margin: 40px 0; }

.note-body { max-width: 620px; margin: 0 auto; padding: 0 clamp(24px,6vw,40px) clamp(80px,12vh,140px);
  font-family: var(--wc-read); font-size: clamp(18px, 2vw, 20px); line-height: 1.74; color: var(--wc-ink); }
.note-body p { margin: 0 0 1.3em; }
.note-body em { font-style: italic; }
.note-body a { color: var(--wc-accent); text-decoration: none; border-bottom: 1px solid var(--wc-rule); transition: border-color 0.2s ease; }
.note-body a:hover { border-color: var(--wc-accent); }
.note-body h2 { font-family: var(--wc-read); font-weight: 400; letter-spacing: -0.3px;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.14; margin: 1.7em 0 0.5em; color: var(--wc-ink); }
.note-body h3 { font-family: var(--wc-type); font-weight: 400; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--wc-ink-3); margin: 1.8em 0 0.8em; }
.note-body ol, .note-body ul { padding-left: 1.3em; margin: 0 0 1.4em; }
.note-body li { margin-bottom: 0.7em; padding-left: 0.2em; }
.note-body li::marker { color: var(--wc-ink-3); }
.note-body strong { font-weight: 400; color: var(--wc-ink); }
.note-body .lead-cap::first-letter { font-size: 3.1em; line-height: 0.82; float: left;
  padding: 6px 10px 0 0; font-weight: 400; color: var(--wc-ink); }
.note-kept { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--wc-accent); }
.note-kept p { font-style: italic; font-size: 1.08em; color: var(--wc-ink); margin: 0; }
.note-kept cite { display: block; font-style: normal; font-family: var(--wc-type); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wc-ink-3); margin-top: 12px; }

/* full-bleed photo inside a note (escapes the reading column) */
.note-figure { margin: clamp(40px,7vh,80px) calc(50% - 50vw); width: 100vw; }
.note-figure img { width: 100%; height: clamp(360px, 64vh, 760px); object-fit: cover; display: block; }
.note-figure figcaption { max-width: 620px; margin: 16px auto 0; padding: 0 clamp(24px,6vw,40px);
  font-family: var(--wc-read); font-style: italic; font-size: 15px; color: var(--wc-ink-3); }

/* prev / next + back */
.note-foot { max-width: 660px; margin: 0 auto; padding: clamp(40px,7vh,70px) clamp(24px,6vw,40px);
  border-top: 1px solid var(--wc-rule); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.note-foot a { font-family: var(--wc-type); font-size: 12px; letter-spacing: 0.06em; color: var(--wc-ink-2);
  text-decoration: none; transition: color 0.2s ease; }
.note-foot a:hover { color: var(--wc-accent); }
.note-foot .back { color: var(--wc-ink-3); }

/* —— index hero: land on the latest note, big and bold ——————————————————— */
.fn-hero { position: relative; display: block; width: 100%; height: min(92vh, 900px);
  min-height: 500px; overflow: hidden; text-decoration: none; color: inherit; background: var(--wc-bg-2); }
.fn-hero img, .fn-hero video { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s cubic-bezier(.2,.7,.3,1); }
.fn-hero:hover img { transform: scale(1.025); }
.fn-hero .veil { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.66), rgba(0,0,0,0.12) 46%, rgba(0,0,0,0.28)); }
.fn-hero .top { position: absolute; top: clamp(82px, 12vh, 122px); left: clamp(24px, 6vw, 80px);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--wc-type); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.9); }
.fn-hero .top::before { content: ""; width: 24px; height: 1px; background: #cfe0f2; }
.fn-hero .cap { position: absolute; left: clamp(24px, 6vw, 80px); right: clamp(24px, 6vw, 80px);
  bottom: clamp(34px, 7vh, 70px); }
.fn-hero .fmeta { display: flex; flex-wrap: wrap; gap: 13px; align-items: center;
  font-family: var(--wc-type); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); margin-bottom: 18px; }
.fn-hero .fmeta .no { color: #cfe0f2; }
.fn-hero .fmeta .sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.fn-hero .ftitle { font-family: var(--wc-read); font-weight: 400; letter-spacing: -0.5px;
  font-size: clamp(34px, 6.4vw, 78px); line-height: 1.02; margin: 0; color: #fff; max-width: 16ch; }
.fn-hero .ftitle em { font-style: italic; }
.fn-hero .fdek { font-family: var(--wc-read); font-style: italic; font-size: clamp(16px, 2.2vw, 22px);
  color: rgba(255,255,255,0.92); margin: 16px 0 0; max-width: 46ch; }
.fn-hero .fread { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-family: var(--wc-type); font-size: 12px; letter-spacing: 0.1em; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 3px; transition: gap 0.3s ease; }
.fn-hero:hover .fread { gap: 16px; }

/* the quieter "more notes" intro */
.fn-more { max-width: 880px; margin: clamp(70px,11vh,120px) auto 0; padding: 0 clamp(24px, 6vw, 80px) 30px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.fn-more .lbl { font-family: var(--wc-type); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wc-ink-3); }
.fn-more .tag { font-family: var(--wc-read); font-style: italic; font-size: 16px; color: var(--wc-ink-3); }

/* —— featured note (top of the index) ———————————————————————————————————— */
.fn-featured { max-width: 1180px; margin: 0 auto clamp(40px,7vh,72px); padding: 0 clamp(24px, 6vw, 80px);
  text-decoration: none; color: inherit; display: block; }
.fn-featured .frame { position: relative; width: 100%; height: clamp(320px, 56vh, 620px);
  overflow: hidden; border-radius: 4px; border: 1px solid var(--wc-rule); }
.fn-featured .frame img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(.2,.7,.3,1); }
.fn-featured:hover .frame img { transform: scale(1.03); }
.fn-featured .veil { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.15) 42%, transparent 72%); }
.fn-featured .cap { position: absolute; left: clamp(22px,4vw,48px); right: clamp(22px,4vw,48px);
  bottom: clamp(24px,4vh,42px); color: #fff; }
.fn-featured .fmeta { display: flex; flex-wrap: wrap; gap: 13px; align-items: center;
  font-family: var(--wc-type); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.fn-featured .fmeta .no { color: #cfe0f2; }
.fn-featured .fmeta .sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.fn-featured .ftitle { font-family: var(--wc-read); font-weight: 400; letter-spacing: -0.4px;
  font-size: clamp(30px, 5vw, 56px); line-height: 1.05; margin: 0; color: #fff; max-width: 18ch; }
.fn-featured .ftitle em { font-style: italic; }
.fn-featured .fdek { font-family: var(--wc-read); font-style: italic; font-size: clamp(16px, 2vw, 20px);
  color: rgba(255,255,255,0.9); margin: 14px 0 0; max-width: 44ch; }