/* NBTI Voices from the Field, landing page.
   Colours are the live site navy plus the NBTI brand cream, gold and forest.
   Everything is scoped under .nbtiv so nothing here can reach the theme. */

.nbtiv{
  --nv-navy:#161D33;
  --nv-cream:#F6F0E2;
  --nv-card:#FCF8F0;
  --nv-gold:#C9A24B;
  --nv-gold2:#A67C2E;
  --nv-forest:#1E5230;
  --nv-line:#e3dac4;
  --nv-muted:#5f6b7d;
  background:var(--nv-cream);
  color:var(--nv-navy);
  font-family:Lato,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* The shortcode usually sits inside a padded theme container. This pulls
     the band back out to the full window so the navy hero reaches the edges.
     100vw counts the scrollbar on desktop Windows, which would push the page
     sideways, so the script overwrites --nv-vw with the real content width
     and 100vw is only the pre-script fallback. */
  --nv-vw:100vw;
  width:var(--nv-vw);
  max-width:var(--nv-vw);
  margin:0 calc(50% - (var(--nv-vw) / 2));
  padding:0;
  overflow-x:hidden;
}
.nbtiv *{box-sizing:border-box}
.nbtiv a{text-decoration:none;color:inherit}
.nbtiv [hidden]{display:none !important}

.nbtiv-empty{padding:40px 20px;text-align:center;font-family:"EB Garamond",Georgia,serif;font-size:19px}

/* ------------------------------------------------------------------ hero */
.nbtiv-hero{background:var(--nv-navy);color:#fff;padding:40px 20px 38px;text-align:center}
.nbtiv-eyebrow{font:700 10.5px/1 Lato,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--nv-gold);margin:0}
.nbtiv-h1{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:clamp(30px,5.4vw,54px);
  line-height:1.04;margin:12px 0 6px;color:#fff;letter-spacing:-.01em}
.nbtiv-h2{font-family:"EB Garamond",Georgia,serif;font-style:italic;font-size:clamp(16px,2.3vw,21px);
  color:#d7c9a6;margin:0 0 14px}
.nbtiv-line{font-family:"EB Garamond",Georgia,serif;font-size:17.5px;line-height:1.6;color:#b9c0d0;
  max-width:44ch;margin:0 auto}

/* Short hero: the theme's own title banner is the heading, so this picks up
   underneath it on cream instead of stacking a second navy block with the
   same words in it. */
.nbtiv-hero.is-short{background:transparent;color:var(--nv-navy);padding:34px 20px 0}
.nbtiv-hero.is-short .nbtiv-h2{color:var(--nv-forest);font-size:clamp(19px,2.8vw,27px);margin:0}
.nbtiv-hero.is-short .nbtiv-line{color:#3a4459;max-width:46ch}
.nbtiv-rule{display:block;width:54px;height:2px;background:var(--nv-gold);margin:16px auto}

.nbtiv-intro{max-width:760px;margin:0 auto;padding:34px 20px 4px;text-align:center}
.nbtiv-hero.is-short + .nbtiv-intro{padding-top:22px}
.nbtiv-intro p{font-family:"EB Garamond",Georgia,serif;font-size:19px;line-height:1.72;margin:0}

/* ----------------------------------------------------------------- tools */
.nbtiv-tools{max-width:1160px;margin:0 auto;padding:22px 20px 2px;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center;justify-content:center}
.nbtiv-chip{font:700 11px/1 Lato,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:0 15px;min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--nv-line);
  border-radius:999px;background:var(--nv-card);color:#4a566b;cursor:pointer}
.nbtiv-chip.is-on{background:var(--nv-navy);color:#fff;border-color:var(--nv-navy)}
.nbtiv-chip:focus-visible{outline:2px solid var(--nv-gold2);outline-offset:2px}

.nbtiv-count{text-align:center;font:700 10.5px/1.6 Lato,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--nv-gold2);margin:14px 0 0}

/* --------------------------------------------------------------- gallery */
.nbtiv-gal{display:grid;gap:18px;max-width:1160px;margin:0 auto;padding:20px 20px 12px;
  grid-template-columns:1fr 1fr}
@media(min-width:760px){.nbtiv-gal{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1060px){.nbtiv-gal{grid-template-columns:repeat(4,1fr)}}

.nbtiv-card{display:flex;flex-direction:column}
.nbtiv-ph{position:relative;display:block;border-radius:6px;overflow:hidden;background:#4b4438;
  aspect-ratio:3/4}
.nbtiv-img{display:block;width:100%;height:100%;object-fit:cover}
.nbtiv-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#8a7a63,#3a3229);color:rgba(255,255,255,.34);
  font-family:"Playfair Display",Georgia,serif;font-size:2rem;letter-spacing:.06em}
/* The name sits on the photograph, so it always gets a dark plate under it.
   Without this a pale portrait swallows the name. */
.nbtiv-scrim{position:absolute;inset:auto 0 0 0;display:block;padding:34px 12px 11px;
  background:linear-gradient(to top,rgba(22,29,51,.94),rgba(22,29,51,.72) 46%,rgba(22,29,51,0))}
.nbtiv-name{display:block;font-family:"Playfair Display",Georgia,serif;font-weight:600;
  font-size:clamp(16px,1.9vw,20px);color:#fff;line-height:1.14}
.nbtiv-yr{display:block;font:700 9px/1.3 Lato,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nv-gold);margin-top:5px}
/* Non-breaking spaces: ordinary ones around the dot collapse against the
   neighbouring text and the place ends up jammed to the separator. */
.nbtiv-y + .nbtiv-pl::before{content:"\00A0\00B7\00A0"}
/* On the narrowest phones the place would wrap onto a third line and start
   covering the portrait, so only the years stay. */
@media(max-width:479px){.nbtiv-pl{display:none}}
.nbtiv-hook{display:block;font-family:"EB Garamond",Georgia,serif;font-size:16.5px;line-height:1.48;
  margin:11px 0 9px;flex:1}
.nbtiv-go{display:block;font:700 10.5px/1 Lato,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nv-forest);min-height:22px}
.nbtiv-go::after{content:" \2192"}
.nbtiv-card:hover .nbtiv-ph,
.nbtiv-card:focus-visible .nbtiv-ph{box-shadow:0 0 0 2px var(--nv-gold)}
.nbtiv-card:focus-visible{outline:none}

.nbtiv-next .nbtiv-nextbox{display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:3/4;border:1px dashed #cbbf9f;border-radius:6px;text-align:center;padding:16px;
  background:#f1ead9}
.nbtiv-plus{font-size:26px;color:var(--nv-gold2);line-height:1}
.nbtiv-next b{display:block;font:700 10.5px/1.5 Lato,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;margin-top:10px}
.nbtiv-next i{display:block;font-family:"EB Garamond",Georgia,serif;color:var(--nv-muted);
  font-size:15px;margin-top:5px}

/* -------------------------------------------------------- buttons, follow */
.nbtiv-morewrap{text-align:center;padding:10px 20px 34px;margin:0}
.nbtiv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;
  border:0;border-radius:6px;background:var(--nv-forest);color:#fff;cursor:pointer;
  font:900 11.5px/1 Lato,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.nbtiv-btn:hover{background:#174025}
.nbtiv-btn:focus-visible{outline:2px solid var(--nv-gold2);outline-offset:2px}
/* Load more can do nothing until the script runs, so it stays out of the page
   until then. A button that silently does nothing is a defect. */
.nbtiv:not(.nbtiv-js) .nbtiv-loadmore,
.nbtiv:not(.nbtiv-js) .nbtiv-tools{display:none}

.nbtiv-sig{background:var(--nv-navy);color:#fff;padding:44px 20px;text-align:center}
.nbtiv-sig h2{font-family:"Playfair Display",Georgia,serif;font-weight:600;
  font-size:clamp(23px,3.2vw,31px);margin:0 0 10px;color:#fff}
.nbtiv-sig p{font-family:"EB Garamond",Georgia,serif;font-size:18px;line-height:1.6;color:#c6ccda;
  max-width:44ch;margin:0 auto 20px}
.nbtiv-sig .nbtiv-btn{background:var(--nv-gold);color:var(--nv-navy)}
.nbtiv-follows{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.nbtiv-follow{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:6px;
  border:1px solid #333e5e;color:var(--nv-gold);
  font:700 11px/1 Lato,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.nbtiv-follow:hover{border-color:var(--nv-gold)}

@media(prefers-reduced-motion:reduce){.nbtiv *{transition:none !important}}

/* ==========================================================================
   One story, variant J. The portrait sits in a column beside the name, so it
   is bounded by the layout instead of by the width of the page.
   ========================================================================== */
.nbtiv-article{padding-bottom:0}

.nbtiv-ahead{max-width:1000px;margin:0 auto;padding:34px 20px 26px;display:grid;gap:22px;
  grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.nbtiv-ahead{grid-template-columns:270px 1fr;gap:34px}}

.nbtiv-aport{position:relative;width:100%;aspect-ratio:3/4;max-height:360px;border-radius:6px;
  overflow:hidden;background:#4b4438}
.nbtiv-aport img{display:block;width:100%;height:100%;object-fit:cover}
/* On a phone the column disappears, so the portrait is held to a size that
   still leaves the first sentence within reach of the first screen. */
@media(max-width:759px){.nbtiv-aport{max-width:180px;max-height:240px;margin:0 auto}}

.nbtiv-atitle{font-family:"Playfair Display",Georgia,serif;font-weight:600;
  font-size:clamp(32px,5vw,50px);line-height:1.04;margin:10px 0 8px;color:var(--nv-navy)}
.nbtiv-ameta{font:700 10.5px/1.5 Lato,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nv-muted);margin:0 0 14px}
.nbtiv-ahook{font-family:"EB Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.3vw,23px);line-height:1.45;color:var(--nv-forest);margin:0}
.nbtiv-arule{height:1px;background:var(--nv-line);max-width:1000px;margin:0 auto}

/* One reading column at roughly 66 characters, which is where long prose is
   easiest on the eye. */
.nbtiv-abody{max-width:660px;margin:0 auto;padding:26px 20px 0}
.nbtiv-abody p{font-family:"EB Garamond",Georgia,serif;font-size:19.5px;line-height:1.72;margin:0 0 20px}
.nbtiv-abody h1,.nbtiv-abody h2,.nbtiv-abody h3,.nbtiv-abody h4{font-family:"Playfair Display",Georgia,serif;
  font-weight:600;line-height:1.2;margin:30px 0 14px;color:var(--nv-navy)}
.nbtiv-abody h1,.nbtiv-abody h2{font-size:clamp(21px,2.6vw,27px)}
.nbtiv-abody h3,.nbtiv-abody h4{font-size:20px}
.nbtiv-abody ul,.nbtiv-abody ol{font-family:"EB Garamond",Georgia,serif;font-size:19.5px;
  line-height:1.66;margin:0 0 20px;padding-left:22px}
.nbtiv-abody li{margin:0 0 8px}
.nbtiv-abody blockquote{border-left:3px solid var(--nv-gold);padding:4px 0 4px 18px;margin:26px 0}
.nbtiv-abody blockquote p{font-style:italic;font-size:21px;margin:0}
.nbtiv-abody img{border-radius:6px;height:auto}
.nbtiv-abody a{color:var(--nv-forest);border-bottom:1px solid #bcd0c3}
.nbtiv-abody em{font-style:italic}

.nbtiv-aends{max-width:660px;margin:0 auto;padding:30px 20px 46px}
.nbtiv-acarousel{text-align:center;margin:0 0 20px}
.nbtiv-ghost{background:transparent;color:var(--nv-forest);border:1px solid #bcd0c3}
.nbtiv-anav{display:grid;gap:12px;border-top:1px solid var(--nv-line);padding-top:22px}
@media(min-width:620px){.nbtiv-anav{grid-template-columns:1fr 1fr}}
.nbtiv-ncard{display:block;border:1px solid var(--nv-line);background:var(--nv-card);border-radius:6px;
  padding:14px 16px}
.nbtiv-ncard:hover{box-shadow:0 8px 18px rgba(22,29,51,.10)}
.nbtiv-ncard small{display:block;font:700 9.5px/1 Lato,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--nv-gold2);margin-bottom:6px}
.nbtiv-ncard b{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:18px}
.nbtiv-ncard p{font-family:"EB Garamond",Georgia,serif;font-size:15.5px;color:#3a4459;margin:4px 0 0;
  line-height:1.45}