/* ==========================================================================
   Pages: Field Notes (index) + Field Note (single)
   Layout signature — no dark band at the top. A wide horizontal feature, then
   an offset editorial grid where alternate entries drop and narrow. The
   single note is one narrow measure with a full-bleed image breaking it.
   ========================================================================== */

.blob[data-pos="f1"]{--s:320px;right:-8%;top:6%;}
.blob[data-pos="f2"]{--s:280px;left:-8%;top:56%;--d:3s;}

/* ==========================================================================
   INDEX
   ========================================================================== */
.fn-hero{background:var(--cream);padding:180px 0 var(--sec-tight);}
.fn-hero .wrap{position:relative;z-index:var(--z-content);}
.fn-hero-head{margin-bottom:44px;}
.fn-hero h1{font-size:clamp(2.3rem,5.4vw,4.1rem);}
.fn-hero h1 em{font-style:normal;color:var(--forest-3);}
.fn-hero-meta{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;
  padding-top:26px;border-top:2px solid var(--ink);
}
.fn-count{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* ---- Wide feature ---- */
.fn-feature{padding:0 0 var(--sec-tight);}
.fn-feature-card{
  display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;
  transition:transform var(--dur);
}
.fn-feature-card:hover{transform:translateY(-4px);}
.fn-feature-card:hover .ph img{transform:scale(1.04);}
.fn-feature-ph{min-height:420px;border-radius:var(--r);}
.fn-tagline{display:flex;gap:12px;align-items:center;margin-bottom:16px;}
.fn-feature-b h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:14px;}
.fn-feature-b > p{color:var(--muted);font-size:1.02rem;margin-bottom:18px;}
.fn-byline{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:20px;}
.fn-dot{color:var(--muted-2);}

/* ---- Offset editorial grid ----
   Alternate entries drop and narrow, so the row never reads as a set of
   matching cards.
   ------------------------------------------------------------------------ */
.fn-grid-sec{padding:0 0 var(--sec);}
.fn-rule{height:2px;background:var(--ink);margin-bottom:56px;}
.fn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 44px;}
.fn-entry--drop{margin-top:72px;}
.fn-entry-link{display:grid;gap:22px;}
.fn-entry--lift .fn-entry-link{grid-template-columns:1fr;}
.fn-entry--drop .fn-entry-link{grid-template-columns:180px 1fr;align-items:start;}
.fn-entry-ph{border-radius:var(--r);}
.fn-entry--lift .fn-entry-ph{min-height:300px;}
.fn-entry--drop .fn-entry-ph{min-height:180px;}
.fn-entry-b{position:relative;}
.fn-entry-n{
  font-size:.72rem;color:var(--muted-2);
  display:block;margin-bottom:10px;
}
.fn-entry-cat{margin-bottom:12px;}
.fn-entry h3{font-size:1.25rem;margin:10px 0;transition:color var(--dur-fast);}
.fn-entry-link:hover h3{color:var(--forest-3);}
.fn-entry p{font-size:.92rem;color:var(--muted);margin-bottom:14px;}

/* ---- Subscribe band ---- */
.fn-sub{padding:0 0 var(--sec);}
.fn-sub-card{
  background:var(--forest);border-radius:var(--r);
  padding:56px 46px;
  display:grid;grid-template-columns:1.2fr auto;gap:44px;align-items:center;
}
.fn-sub-txt h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:12px;}
.fn-sub-act{display:flex;gap:12px;flex-wrap:wrap;}

/* ==========================================================================
   SINGLE NOTE
   ========================================================================== */
.note-head{background:var(--cream);padding:170px 0 var(--sec-tight);}
.note-byline{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:20px;}
.note-head h1{font-size:clamp(2rem,4.2vw,3.1rem);margin-bottom:20px;}
.note-lede{font-size:1.1rem;}

/* The one image allowed to break the reading measure. */
.note-lead{
  width:min(1400px,94vw);margin:0 auto var(--sec-tight);
  min-height:min(60vh,520px);border-radius:var(--r);
}

.note-body{padding:0 0 var(--sec);}
.note-body p{font-size:1.06rem;line-height:1.75;color:var(--ink);margin-bottom:22px;}
.note-pending{
  border-left:3px solid var(--hivis-2);padding:6px 0 6px 26px;
}
.note-pending p{color:var(--muted);}
.note-pending-alt a{color:var(--forest-3);text-decoration:underline;font-weight:600;}

/* ---- More notes ---- */
.note-more{padding:0 0 var(--sec);}
.note-more .kicker{margin-bottom:26px;}
.note-more-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.note-more-ph{height:170px;border:none;border-bottom:1px dashed rgba(18,16,12,.16);}
.note-more-card .card-body{padding:22px 22px 26px;}
.note-more-card h3{font-size:1.05rem;margin:8px 0;}
.note-more-card p{font-size:.88rem;color:var(--muted);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .fn-feature-card{grid-template-columns:1fr;gap:26px;}
  .fn-feature-ph{min-height:300px;}
  .fn-sub-card{grid-template-columns:1fr;gap:30px;}
  .note-more-row{grid-template-columns:1fr 1fr;}
}

@media (max-width:860px){
  .fn-hero{padding:150px 0 var(--sec-tight);}
  .fn-hero-meta{grid-template-columns:1fr;gap:14px;align-items:start;}
  .fn-grid{grid-template-columns:1fr;gap:44px;}
  .fn-entry--drop{margin-top:0;}
  .fn-entry--drop .fn-entry-link{grid-template-columns:120px 1fr;}
  .fn-entry--drop .fn-entry-ph{min-height:140px;}
  .fn-sub-card{padding:38px 24px;}
  .note-head{padding:140px 0 var(--sec-tight);}
  .note-lead{width:100%;border-radius:0;min-height:260px;}
  .note-more-row{grid-template-columns:1fr;}
}