/* =============================================================
   Tofa News — theme.css v2.0
   Pure CSS. Zero Tailwind dependency.
   Responsive: mobile-first, breakpoints at 480 / 640 / 768 / 1024 / 1280px
   ============================================================= */

/* ── Custom properties ── */
:root {
  --tn-ink:    #0d0d0d;
  --tn-ink2:   #1c1c1c;
  --tn-ink3:   #2e2e2e;
  --tn-ink4:   #505050;
  --tn-ink5:   #747474;
  --tn-ink6:   #9c9c9c;
  --tn-ink7:   #c6c6c6;
  --tn-cream:  #faf9f7;
  --tn-cream2: #f3f1ee;
  --tn-cream3: #eceae7;
  --tn-rule:   #ddd;
  --tn-rule2:  #e8e8e8;
  --tn-ff-serif: 'Cormorant Garamond', Georgia, serif;
  /* Playfair Display: true 700–900 weights for bolder headlines */
  --tn-ff-title: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --tn-ff-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --tn-nav-h:    44px;
  --tn-trans:    .15s cubic-bezier(.4, 0, .2, 1);
}

/* ── Reset ── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--tn-ff-sans);
  font-size: 1rem;
  line-height: 1.6;
  background-color: var(--tn-cream);
  color: var(--tn-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; margin: 0; }

button { cursor: pointer; font-family: inherit; }

/* ── Skip link ── */
.tn-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.tn-skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  background: var(--tn-ink);
  color: #fff;
  padding: .5rem 1rem;
  z-index: 9999;
  font-family: var(--tn-ff-sans);
  font-size: .875rem;
}

/* ── Site wrapper ── */
/* NOTE: overflow on a scroll-ancestor breaks position:sticky.
   Prevent horizontal scroll on html instead of #page. */
#page { position: relative; }
html  { overflow-x: hidden; }

/* ── Wrapper / max-width container ── */
.tn-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px)  { .tn-wrap { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .tn-wrap { padding-inline: 2rem;   } }
@media (min-width: 1280px) { .tn-wrap { padding-inline: 2.5rem; } }


/* =============================================================
   MASTHEAD (tall centred logo — hidden after scroll)
   ============================================================= */
.tn-masthead {
  background: var(--tn-cream);
  border-bottom: 1px solid var(--tn-rule);
  padding: .75rem 0;
}

/* 3-column grid: [hamburger] [logo] [spacer]
   Logo stays perfectly centred. Hamburger and spacer are equal width. */
.tn-masthead__inner {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}

.tn-masthead__left   { display: flex; align-items: center; justify-content: flex-start; }
.tn-masthead__center { display: flex; align-items: center; justify-content: center; }
.tn-masthead__right  { display: flex; align-items: center; justify-content: flex-end; }

.tn-logo img,
.tn-logo svg { height: 38px; width: auto; }

@media (min-width: 640px) {
  .tn-logo img,
  .tn-logo svg { height: 44px; }
}

.tn-logo__text {
  font-family: var(--tn-ff-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--tn-ink);
  letter-spacing: -.02em;
  line-height: 1;
}

/* =============================================================
   STICKY NAVIGATION
   ============================================================= */
.tn-nav {
  background: var(--tn-cream);
  border-top: 1px solid var(--tn-rule);
  border-bottom: 1.5px solid var(--tn-ink);
  position: sticky;
  top: 0;
  z-index: 200;
  transition: box-shadow var(--tn-trans);
}

/* On mobile: hide the empty nav bar entirely until user scrolls past masthead.
   When scrolled (.is-scrolled), it becomes the mobile sticky header. */
@media (max-width: 1023px) {
  .tn-nav {
    display: none;
  }
  .tn-nav.is-scrolled {
    display: block;
  }
}

.tn-nav.is-scrolled { box-shadow: 0 2px 8px rgba(0, 0, 0, .07); }

.tn-nav__inner {
  display: flex;
  align-items: stretch;
  min-height: var(--tn-nav-h);
}

/* Mobile sticky nav inner — hamburger left + logo centre */
@media (max-width: 1023px) {
  .tn-nav__inner {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    min-height: 48px;
  }
}

/* Sticky logo — hidden at top, visible when masthead scrolls away */
.tn-nav__sticky-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  padding-right: 0;
  margin-right: 0;
  pointer-events: none;
  white-space: nowrap;
  border-right: 0 solid transparent;
  transition:
    max-width .35s ease,
    opacity   .3s  ease,
    padding-right .3s ease,
    margin-right  .3s ease;
}
.tn-nav__sticky-logo.is-visible {
  max-width: 160px;
  opacity: 1;
  overflow: visible;
  padding-right: 1rem;
  margin-right: .5rem;
  border-right: 1px solid var(--tn-rule);
  pointer-events: auto;
}
.tn-nav__sticky-logo img,
.tn-nav__sticky-logo svg { height: 26px; width: auto; display: block; flex-shrink: 0; }
.tn-nav__sticky-logo .tn-logo__text { font-size: 1.2rem; }

/* On mobile: sticky logo always visible and centred (overrides the slide-in behaviour) */
@media (max-width: 1023px) {
  .tn-nav__sticky-logo {
    max-width: 160px;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    justify-content: center;
  }
}

/* Mobile sticky nav hamburger — shown in sticky nav, hidden on desktop */
.tn-nav__mob-burger {
  display: flex;
}
@media (min-width: 1024px) { .tn-nav__mob-burger { display: none; } }

/* Desktop spacer — balances the sticky-logo left column */
.tn-nav__spacer {
  display: none;
  flex-shrink: 0;
  width: 44px;
}
@media (min-width: 1024px) { .tn-nav__spacer { display: block; } }

/* Desktop nav list */
.tn-nav__list {
  display: none;
  flex: 1;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 1024px) { .tn-nav__list { display: flex; } }

.tn-nav__item { position: relative; }

.tn-nav__link {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 1rem;
  height: var(--tn-nav-h);
  font-family: var(--tn-ff-sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tn-ink4);
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  transition: color var(--tn-trans), border-color var(--tn-trans);
  user-select: none;
}
.tn-nav__link:hover,
.tn-nav__link.is-active,
.tn-nav__item.is-open > .tn-nav__link {
  color: var(--tn-ink);
  border-bottom-color: var(--tn-ink);
}

.tn-nav__caret {
  font-size: .5rem;
  color: var(--tn-ink6);
  transition: transform var(--tn-trans);
  display: inline-block;
  line-height: 1;
}
.tn-nav__item.is-open .tn-nav__caret { transform: rotate(180deg); }

/* Dropdown */
.tn-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 185px;
  background: var(--tn-cream);
  border: 1px solid var(--tn-rule);
  border-top: 2px solid var(--tn-ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
  z-index: 300;
}
.tn-nav__item.is-open .tn-dropdown { display: block; }

.tn-dropdown__link {
  display: block;
  padding: .625rem 1rem;
  font-family: var(--tn-ff-sans);
  font-size: .75rem;
  color: var(--tn-ink4);
  border-bottom: 1px solid var(--tn-rule2);
  transition: color var(--tn-trans), background var(--tn-trans), padding-left var(--tn-trans);
  white-space: nowrap;
}
.tn-dropdown li:last-child .tn-dropdown__link { border-bottom: none; }
.tn-dropdown__link:hover { color: var(--tn-ink); background: var(--tn-cream2); padding-left: 1.25rem; }

/* Hamburger — inside masthead on mobile, hidden on desktop */
.tn-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: var(--tn-ink4);
  font-size: 1.25rem;
  padding: 0;
  cursor: pointer;
  transition: color var(--tn-trans);
  flex-shrink: 0;
  border-radius: 4px;
}
.tn-hamburger:hover { color: var(--tn-ink); background: var(--tn-cream3); }
@media (min-width: 1024px) { .tn-hamburger { display: none; } }

/* Mobile nav drawer */
.tn-mobile-nav {
  display: none;
  background: var(--tn-cream);
  border-bottom: 2px solid var(--tn-ink);
  position: sticky;
  top: 0;
  z-index: 199;   /* just below the desktop sticky nav z-index */
  max-height: calc( 100vh - 80px );
  overflow-y: auto;
}
.tn-mobile-nav.is-open { display: block; }
@media (min-width: 1024px) { .tn-mobile-nav { display: none !important; } }

/* Top-level link / button rows */
.tn-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .875rem 1.25rem;
  font-family: var(--tn-ff-sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--tn-ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--tn-rule2);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tn-trans), color var(--tn-trans);
  box-sizing: border-box;
}
.tn-mobile-nav__link:hover,
.tn-mobile-nav__link:focus { background: var(--tn-cream2); color: var(--tn-ink); outline: none; }

/* Chevron icon in parent buttons */
.tn-mobile-nav__parent .ti {
  font-size: .75rem;
  color: var(--tn-ink6);
  transition: transform var(--tn-trans);
  flex-shrink: 0;
}
.tn-mobile-nav__parent[aria-expanded="true"] .ti { transform: rotate(180deg); }

/* Sub-menu list */
.tn-mobile-nav__sub {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--tn-cream2);
  border-bottom: 1px solid var(--tn-rule2);
}
.tn-mobile-nav__sub.is-open { display: block; }

.tn-mobile-nav__sub-link {
  display: block;
  padding: .6875rem 1.25rem .6875rem 2rem;
  font-family: var(--tn-ff-sans);
  font-size: .8125rem;
  color: var(--tn-ink4);
  border-bottom: 1px solid var(--tn-rule2);
  text-decoration: none;
  transition: background var(--tn-trans), color var(--tn-trans);
}
.tn-mobile-nav__sub li:last-child .tn-mobile-nav__sub-link { border-bottom: none; }
.tn-mobile-nav__sub-link:hover { background: var(--tn-cream3); color: var(--tn-ink); }

/* =============================================================
   READING PROGRESS BAR
   ============================================================= */
#tn-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--tn-ink);
  z-index: 9999;
  width: 0;
  transition: width .12s linear;
  pointer-events: none;
}

/* =============================================================
   META ROW  (category · author · date · read time)
   ============================================================= */
.tn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-family: var(--tn-ff-sans);
  font-size: .6875rem;
  color: var(--tn-ink5);
  line-height: 1.5;
}

.tn-cat-link {
  font-weight: 700;
  font-size: .5625rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tn-ink3);
  transition: color var(--tn-trans);
}
.tn-cat-link:hover { color: var(--tn-ink4); }

.tn-meta__sep    { margin-inline: .3125rem; color: var(--tn-ink7); }
.tn-meta__author { color: var(--tn-ink5); transition: color var(--tn-trans); }
.tn-meta__author:hover { color: var(--tn-ink); }
.tn-meta__date   { color: var(--tn-ink6); }
.tn-meta__read   { color: var(--tn-ink7); }

/* =============================================================
   BADGE  (category label overlaid on image)
   ============================================================= */
.tn-badge {
  display: inline-block;
  background: var(--tn-ink);
  color: #fff;
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .625rem;
}

/* =============================================================
   IMAGE CAPTION
   ============================================================= */
.tn-caption {
  font-family: var(--tn-ff-sans);
  font-size: .6875rem;
  color: var(--tn-ink6);
  font-style: italic;
  line-height: 1.5;
  padding: .375rem 0 .75rem;
  border-bottom: 1px solid var(--tn-rule2);
  margin-bottom: .875rem;
  min-height: 1.5em; /* preserve space even when empty */
}

/* =============================================================
   THUMBNAIL
   ============================================================= */
.tn-thumb-link { display: block; width: 100%; height: 100%; overflow: hidden; }
.tn-thumb-img  {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.tn-thumb-link:hover .tn-thumb-img { transform: scale(1.04); }

.tn-thumb-ph {
  width: 100%;
  height: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tn-cream3);
  color: var(--tn-ink7);
  font-size: 1.5rem;
}

/* =============================================================
   SECTION LABEL  (title + rule + optional link)
   ============================================================= */
.tn-section-label {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding-block: 1.75rem 1.25rem;
}
.tn-section-label__text {
  font-family: var(--tn-ff-sans);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tn-ink);
  white-space: nowrap;
}
.tn-section-label__rule { flex: 1; height: 1px; background: var(--tn-rule); }
.tn-section-label__more {
  font-family: var(--tn-ff-sans);
  font-size: .6875rem;
  color: var(--tn-ink6);
  white-space: nowrap;
  transition: color var(--tn-trans);
}
.tn-section-label__more:hover { color: var(--tn-ink); }

/* =============================================================
   HERO SLIDER
   ============================================================= */
.tn-slider {
  position: relative;
  width: 100%;
  background: var(--tn-cream3);
}

.tn-slider__track { position: relative; }

.tn-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease-in-out;
  pointer-events: none;
}
.tn-slider__slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.tn-slider__slide.is-leaving {
  position: absolute;
  opacity: 0;
  z-index: 0;
}

.tn-slider__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tn-cream3);
  position: relative;
}
.tn-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tn-slider__badge {
  position: absolute;
  top: .875rem;
  left: .875rem;
  z-index: 2;
}

/* ── Controls row (caption left / dots+arrows right) ── */
/* Controls row: [caption LEFT] [dots · prev · next RIGHT] */
.tn-slider__controls-row {
  display: none; /* hidden — remove this line to restore */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block: .5rem .25rem;
  border-bottom: 1px solid var(--tn-rule2);
  margin-bottom: .875rem;
}

/* Caption — left side, grows to fill available space */
.tn-slider__caption {
  flex: 1;
  min-width: 0;
  font-family: var(--tn-ff-sans);
  font-size: .6875rem;
  color: var(--tn-ink6);
  font-style: italic;
  line-height: 1.5;
}

/* Controls group — right side: dots then arrows */
.tn-slider__controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* Dots */
.tn-slider__dots { display: flex; align-items: center; gap: .3125rem; }

.tn-slider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tn-ink7);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--tn-trans), transform var(--tn-trans);
}
.tn-slider__dot.is-active {
  background: var(--tn-ink);
  transform: scale(1.4);
}

/* Arrows — small, float-right beside dots */
.tn-slider__arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tn-cream3);
  border: 1px solid var(--tn-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--tn-ink4);
  line-height: 1;
  transition: background var(--tn-trans), border-color var(--tn-trans), color var(--tn-trans);
}
.tn-slider__arrow:hover { background: var(--tn-ink); border-color: var(--tn-ink); color: #fff; }

/* =============================================================
   HERO LAYOUT  (slider + story left | top stories right)
   ============================================================= */
.tn-hero {
  padding-block: 1.75rem 0;
}

.tn-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}

.tn-hero__left { padding-bottom: 1.75rem; }

.tn-hero__right {
  padding-block: 1.75rem;
  border-top: 1px solid var(--tn-rule);
}

@media (min-width: 1024px) {
  .tn-hero__grid { grid-template-columns: 1fr 300px; }
  .tn-hero__left  { padding-right: 2.5rem; border-right: 1px solid var(--tn-rule); padding-bottom: 2rem; }
  .tn-hero__right { padding-left: 2.5rem; border-top: none; padding-top: 0; }
}
@media (min-width: 1280px) {
  .tn-hero__grid { grid-template-columns: 1fr 320px; }
  .tn-hero__left  { padding-right: 3rem; }
  .tn-hero__right { padding-left: 3rem; }
}

/* Hero story text */
.tn-hero__title {
  font-family: var(--tn-ff-title);
  font-size: clamp( 1.75rem, 4vw, 2.6rem );
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--tn-ink);
  margin-block: .8rem .875rem;
}
.tn-hero__title a:hover { color: var(--tn-ink4); }

.tn-hero__deck {
  font-family: var(--tn-ff-sans);
  font-size: .875rem;
  color: var(--tn-ink4);
  line-height: 1.7;
  margin-bottom: .75rem;
}

/* Top stories */
.tn-top-stories__head {
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tn-ink5);
  padding-bottom: .625rem;
  border-bottom: 1.5px solid var(--tn-ink);
}

.tn-top-stories__item {
  padding-block: .5rem;
  border-bottom: 1px solid var(--tn-rule2);
}
.tn-top-stories__item:last-child { border-bottom: none; padding-bottom: 0; }

.tn-top-stories__title {
  font-family: var(--tn-ff-title);
  font-size: clamp( 1rem, 2vw, 1.2rem );
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--tn-ink);
  margin-bottom: .2rem;
}
.tn-top-stories__title a:hover { color: var(--tn-ink4); }

.tn-top-stories__deck {
  font-family: var(--tn-ff-sans);
  font-size: .75rem;
  color: var(--tn-ink5);
  line-height: 1.5;
  margin-bottom: .2rem;
}

.tn-top-stories__time {
  font-family: var(--tn-ff-sans);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tn-ink6);
  margin-top: .125rem;
}

/* =============================================================
   CARD GRID
   ============================================================= */
.tn-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 480px) { .tn-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tn-card-grid { grid-template-columns: repeat(3, 1fr); } }

.tn-card__img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tn-cream3);
  margin-bottom: .75rem;
}
.tn-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.tn-card__img-wrap:hover img { transform: scale(1.04); }

.tn-card__kicker {
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tn-ink4);
  margin-bottom: .25rem;
}

.tn-card__title {
  font-family: var(--tn-ff-title);
  font-size: clamp( 1rem, 2vw, 1.2rem );
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--tn-ink);
  margin-bottom: .375rem;
}
.tn-card__title a:hover { color: var(--tn-ink4); }

.tn-card__excerpt {
  font-family: var(--tn-ff-sans);
  font-size: .75rem;
  color: var(--tn-ink4);
  line-height: 1.6;
  margin-bottom: .375rem;
}

/* =============================================================
   LOAD MORE BUTTON
   ============================================================= */
.tn-load-more {
  display: block;
  margin: 1.5rem auto 0;
  font-family: var(--tn-ff-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tn-ink);
  background: none;
  border: 1.5px solid var(--tn-ink);
  padding: .6875rem 2.5rem;
  transition: background var(--tn-trans), color var(--tn-trans);
}
.tn-load-more:hover  { background: var(--tn-ink); color: #fff; }
.tn-load-more:disabled { opacity: .4; pointer-events: none; }

/* =============================================================
   NEWSLETTER STRIP
   ============================================================= */
.tn-newsletter {
  background: var(--tn-ink);
  padding-block: 1.75rem;
}

.tn-newsletter__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .tn-newsletter__inner {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}

.tn-newsletter__eyebrow {
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin-bottom: .25rem;
}

.tn-newsletter__title {
  font-family: var(--tn-ff-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: .125rem;
}

.tn-newsletter__sub {
  font-family: var(--tn-ff-sans);
  font-size: .75rem;
  color: rgba(255, 255, 255, .5);
}

.tn-newsletter__form {
  display: flex;
  flex-shrink: 0;
  width: 100%;
}
@media (min-width: 640px) { .tn-newsletter__form { width: auto; } }

.tn-newsletter__input {
  font-family: var(--tn-ff-sans);
  font-size: .75rem;
  color: var(--tn-ink);
  background: #fff;
  border: none;
  padding: .5625rem .875rem;
  outline: none;
  flex: 1;
  min-width: 0;
}
@media (min-width: 640px) { .tn-newsletter__input { width: 200px; flex: none; } }

.tn-newsletter__btn {
  font-family: var(--tn-ff-sans);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tn-ink);
  background: #fff;
  border: none;
  padding: .5625rem 1rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--tn-trans);
}
.tn-newsletter__btn:hover { background: var(--tn-cream2); }

/* =============================================================
   LATEST LIST
   ============================================================= */
.tn-latest-list { display: flex; flex-direction: column; }

.tn-latest__item {
  display: flex;
  gap: 1rem;
  padding-block: .875rem;
  border-bottom: 1px solid var(--tn-rule2);
  align-items: flex-start;
}
.tn-latest__item:last-child { border-bottom: none; }

.tn-latest__num {
  font-family: var(--tn-ff-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--tn-ink7);
  flex-shrink: 0;
  min-width: 20px;
  line-height: 1;
  margin-top: .125rem;
}

.tn-latest__thumb {
  flex: 0 0 72px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tn-cream3);
  flex-shrink: 0;
}
@media (min-width: 480px) { .tn-latest__thumb { flex: 0 0 80px; } }

.tn-latest__body  { flex: 1; min-width: 0; }
.tn-latest__title {
  font-family: var(--tn-ff-title);
  font-size: clamp( .875rem, 2vw, 1rem );
  font-weight: 800;
  line-height: 1.28;
  color: var(--tn-ink);
  margin-bottom: .25rem;
}
.tn-latest__title a:hover { color: var(--tn-ink4); }

/* =============================================================
   ARTICLE / SINGLE POST
   ============================================================= */
.tn-article-wrap { padding-block: 2rem; }

.tn-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) { .tn-article-grid { grid-template-columns: minmax(0,1fr) 285px; gap: 3.5rem; align-items: start; } }
@media (min-width: 1280px) { .tn-article-grid { grid-template-columns: minmax(0,1fr) 305px; align-items: start; } }

.tn-article__kicker {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tn-ink5);
  margin-bottom: .875rem;
}
.tn-article__kicker::before {
  content: '';
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--tn-ink5);
  flex-shrink: 0;
}

.tn-article__title {
  font-family: var(--tn-ff-title);
  font-size: clamp( 1.875rem, 5vw, 2.75rem );
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--tn-ink);
  margin-bottom: .875rem;
}

.tn-article__deck {
  font-family: var(--tn-ff-serif);
  font-size: clamp( 1rem, 2vw, 1.125rem );
  font-style: italic;
  color: var(--tn-ink3);
  line-height: 1.55;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--tn-rule);
}

.tn-article__byline {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .375rem;
}
.tn-article__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tn-cream3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tn-ff-sans);
  font-size: .625rem;
  font-weight: 700;
  color: var(--tn-ink5);
  flex-shrink: 0;
  user-select: none;
}
.tn-article__by { font-family: var(--tn-ff-sans); font-size: .8125rem; color: var(--tn-ink4); }
.tn-article__by strong { font-weight: 600; color: var(--tn-ink3); }

.tn-article__dateline {
  font-family: var(--tn-ff-sans);
  font-size: .6875rem;
  color: var(--tn-ink6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--tn-rule);
}
.tn-article__dateline-sep { color: var(--tn-ink7); }

/* Share */
.tn-share {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
  margin-bottom: 1.25rem;
}
.tn-share__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tn-rule);
  color: var(--tn-ink5);
  background: none;
  font-size: .875rem;
  transition: background var(--tn-trans), border-color var(--tn-trans), color var(--tn-trans);
  text-decoration: none;
}
.tn-share__btn:hover { background: var(--tn-ink); border-color: var(--tn-ink); color: #fff; }

/* Featured image */
.tn-article__feat-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Prose */
.tn-prose {
  font-family: var(--tn-ff-sans);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--tn-ink2);
  margin-top: 1.5rem;
}
.tn-prose p { margin-bottom: 1.5em; }
.tn-prose h2 {
  font-family: var(--tn-ff-sans);
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tn-ink5);
  border-top: 1px solid var(--tn-rule);
  border-bottom: 1px solid var(--tn-rule);
  padding-block: .375rem;
  margin-block: 2.2em 1.1em;
}
.tn-prose h3 {
  font-family: var(--tn-ff-serif);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tn-ink);
  margin-block: 2em .8em;
}
.tn-prose blockquote {
  font-family: var(--tn-ff-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--tn-ink2);
  line-height: 1.45;
  border-left: 3px solid var(--tn-ink);
  padding-left: 1.125rem;
  margin-block: 2em;
}
.tn-prose ul,
.tn-prose ol { margin-block: 1.2em; margin-left: 1.5rem; list-style: revert; }
.tn-prose li { margin-bottom: .5em; }
.tn-prose a { text-decoration: underline; text-underline-offset: 3px; }
.tn-prose a:hover { color: var(--tn-ink4); }
.tn-prose strong { font-weight: 700; }
.tn-prose em { font-style: italic; }
.tn-prose img { width: 100%; margin-block: 1.5em; }
.tn-prose figcaption { font-size: .625rem; color: var(--tn-ink6); font-style: italic; margin-top: .375rem; }
.tn-prose p:first-of-type::first-letter {
  font-family: var(--tn-ff-serif);
  font-size: 4.5em;
  font-weight: 700;
  float: left;
  line-height: .72;
  margin: .25rem .375rem 0 0;
  color: var(--tn-ink);
}

/* Tags */
.tn-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: 1.5rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--tn-rule);
}
.tn-article__tag {
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  padding: .25rem .6875rem;
  border: 1px solid var(--tn-rule);
  color: var(--tn-ink4);
  display: inline-block;
  transition: border-color var(--tn-trans), color var(--tn-trans);
}
.tn-article__tag:hover { border-color: var(--tn-ink); color: var(--tn-ink); }

/* Author bio */
.tn-article__bio {
  display: flex;
  gap: .875rem;
  padding-block: 1.125rem;
  border-top: 2px solid var(--tn-ink);
  border-bottom: 1px solid var(--tn-rule);
  margin-top: 1.5rem;
}
.tn-article__bio-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tn-cream3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tn-ff-sans);
  font-size: .875rem;
  font-weight: 700;
  color: var(--tn-ink5);
  user-select: none;
}
.tn-article__bio-role {
  font-family: var(--tn-ff-sans);
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tn-ink7);
  margin-bottom: 1px;
}
.tn-article__bio-name {
  font-family: var(--tn-ff-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tn-ink);
  margin-bottom: .25rem;
}
.tn-article__bio-name a { transition: color var(--tn-trans); }
.tn-article__bio-name a:hover { color: var(--tn-ink4); }
.tn-article__bio-text { font-family: var(--tn-ff-sans); font-size: .75rem; color: var(--tn-ink5); line-height: 1.65; }

/* Prev/Next nav */
.tn-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
  margin-top: 1.5rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--tn-rule);
}
.tn-post-nav__dir {
  font-family: var(--tn-ff-sans);
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tn-ink7);
  margin-bottom: .25rem;
}
.tn-post-nav__title {
  font-family: var(--tn-ff-serif);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--tn-ink);
  display: block;
  transition: color var(--tn-trans);
}
.tn-post-nav__title:hover { color: var(--tn-ink4); }
.tn-post-nav__next { text-align: right; }

/* =============================================================
   SIDEBAR — STICKY
   ============================================================= */
.tn-sidebar__inner {
  position: sticky;
  top: calc( var(--tn-nav-h) + 1rem );
  max-height: calc( 100vh - var(--tn-nav-h) - 2rem );
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tn-sidebar__inner::-webkit-scrollbar { display: none; }

.tn-sidebar__head {
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tn-ink);
  border-top: 2px solid var(--tn-ink);
  padding-top: .5rem;
  margin-bottom: .875rem;
}

.tn-sidebar__item {
  padding-block: .75rem;
  border-bottom: 1px solid var(--tn-rule2);
}
.tn-sidebar__item:last-of-type { border-bottom: none; }

.tn-sidebar__author { font-family: var(--tn-ff-sans); font-size: .625rem; color: var(--tn-ink6); margin-bottom: 2px; }
.tn-sidebar__title {
  font-family: var(--tn-ff-serif);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--tn-ink);
  display: block;
  margin-bottom: .25rem;
  transition: color var(--tn-trans);
}
.tn-sidebar__title:hover { color: var(--tn-ink4); }

/* Sidebar newsletter */
.tn-nl-aside {
  background: var(--tn-cream3);
  padding: 1rem;
  margin-top: 1.25rem;
  text-align: center;
}
.tn-nl-aside__title { font-family: var(--tn-ff-serif); font-size: 1rem; font-weight: 700; color: var(--tn-ink); margin-bottom: .25rem; }
.tn-nl-aside__sub   { font-family: var(--tn-ff-sans); font-size: .6875rem; color: var(--tn-ink5); line-height: 1.55; margin-bottom: .75rem; }
.tn-nl-aside__input {
  width: 100%;
  font-family: var(--tn-ff-sans);
  font-size: .75rem;
  border: 1px solid var(--tn-rule);
  padding: .4375rem .75rem;
  margin-bottom: .375rem;
  color: var(--tn-ink);
  background: #fff;
  outline: none;
  display: block;
}
.tn-nl-aside__input:focus { border-color: var(--tn-ink5); }
.tn-nl-aside__btn {
  width: 100%;
  font-family: var(--tn-ff-sans);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tn-ink);
  border: none;
  padding: .5rem;
  transition: background var(--tn-trans);
}
.tn-nl-aside__btn:hover { background: var(--tn-ink3); }

/* =============================================================
   RELATED POSTS
   ============================================================= */
.tn-related { background: var(--tn-cream2); padding-block: 2rem; }

.tn-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 768px) { .tn-related__grid { grid-template-columns: repeat(4, 1fr); } }

.tn-related__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tn-cream3);
  margin-bottom: .5rem;
}

.tn-related__title {
  font-family: var(--tn-ff-title);
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.28;
  color: var(--tn-ink);
  margin-bottom: .375rem;
}
.tn-related__title a:hover { color: var(--tn-ink4); }

/* =============================================================
   ARCHIVE / SEARCH
   ============================================================= */
.tn-archive-list { display: flex; flex-direction: column; }

.tn-archive-item {
  display: flex;
  gap: .875rem;
  padding-block: .875rem;
  border-bottom: 1px solid var(--tn-rule2);
  align-items: flex-start;
}
.tn-archive-item:last-child { border-bottom: none; }

.tn-archive__thumb {
  flex: 0 0 80px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tn-cream3);
  flex-shrink: 0;
}
@media (min-width: 480px) { .tn-archive__thumb { flex: 0 0 100px; } }

.tn-archive__body { flex: 1; min-width: 0; }

.tn-archive__title {
  font-family: var(--tn-ff-title);
  font-size: clamp( .9375rem, 2vw, 1.1rem );
  font-weight: 800;
  line-height: 1.25;
  color: var(--tn-ink);
  display: block;
  margin-bottom: .375rem;
  transition: color var(--tn-trans);
}
.tn-archive__title:hover { color: var(--tn-ink4); }

.tn-archive__excerpt { font-family: var(--tn-ff-sans); font-size: .75rem; color: var(--tn-ink4); line-height: 1.65; margin-bottom: .375rem; }

/* =============================================================
   PAGINATION
   ============================================================= */
.tn-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  justify-content: center;
  padding-top: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--tn-rule);
}
.tn-pagination .page-numbers {
  font-family: var(--tn-ff-sans);
  font-size: .75rem;
  font-weight: 500;
  color: var(--tn-ink4);
  padding: .375rem .75rem;
  border: 1px solid var(--tn-rule);
  display: inline-block;
  transition: background var(--tn-trans), border-color var(--tn-trans), color var(--tn-trans);
  text-decoration: none;
}
.tn-pagination .page-numbers:hover,
.tn-pagination .current { background: var(--tn-ink); border-color: var(--tn-ink); color: #fff; }

/* =============================================================
   FOOTER
   ============================================================= */
.tn-footer {
  background: var(--tn-ink2);
  color: var(--tn-ink6);
  padding-block: 2rem 1rem;
}

.tn-footer__top {
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #252525;
}
.tn-footer__top img { height: 26px; width: auto; display: inline-block; filter: invert(1) brightness(2); }
.tn-footer__logo-text { font-family: var(--tn-ff-serif); font-size: 1.5rem; font-weight: 700; color: #fff; }

.tn-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px)  { .tn-footer__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tn-footer__cols { grid-template-columns: repeat(5, 1fr); } }

.tn-footer__col-head {
  font-family: var(--tn-ff-sans);
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #888;
  margin-bottom: .4375rem;
  padding-bottom: .3125rem;
  border-bottom: 1px solid #222;
}
.tn-footer__link {
  display: block;
  font-family: var(--tn-ff-sans);
  font-size: .6875rem;
  color: #444;
  margin-bottom: .25rem;
  transition: color var(--tn-trans);
}
.tn-footer__link:hover { color: #fff; }

.tn-footer__btm {
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  color: #2a2a2a;
  text-align: center;
  padding-top: .625rem;
  border-top: 1px solid #1a1a1a;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem .5rem;
}
.tn-footer__btm a { color: inherit; transition: color var(--tn-trans); }
.tn-footer__btm a:hover { color: #666; }

/* =============================================================
   WIDGET TITLE
   ============================================================= */
.tn-widget-title {
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tn-ink);
  border-top: 2px solid var(--tn-ink);
  padding-top: .5rem;
  margin-bottom: .875rem;
}

/* =============================================================
   WP CORE OVERRIDES
   ============================================================= */
.alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; max-width: 50%; }
.alignright { float: right; margin-left:  1.5rem; margin-bottom: 1rem; max-width: 50%; }
.aligncenter { display: block; margin-inline: auto; text-align: center; }
.alignwide  { margin-inline: -4%; max-width: 108%; }
.wp-caption { margin-bottom: 1.5em; }
.wp-caption-text { font-size: .625rem; color: var(--tn-ink6); font-style: italic; }

/* Search form */
.search-form { display: flex; }
.search-form input[type="search"] {
  flex: 1;
  font-family: var(--tn-ff-sans);
  font-size: .8125rem;
  color: var(--tn-ink);
  background: #fff;
  border: 1px solid var(--tn-rule);
  border-right: none;
  padding: .5rem 1rem;
  outline: none;
}
.search-form input:focus { border-color: var(--tn-ink5); }
.search-form button {
  font-family: var(--tn-ff-sans);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tn-ink);
  border: 1px solid var(--tn-ink);
  padding: .5rem 1rem;
  white-space: nowrap;
}

/* =============================================================
   PRINT
   ============================================================= */
@media print {
  .tn-masthead .tn-logo,
  .tn-nav,
  .tn-mobile-nav,
  .tn-share,
  .tn-sidebar__inner,
  .tn-related,
  .tn-footer { display: none !important; }
  .tn-prose { font-size: 12pt; line-height: 1.6; color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: .7rem; color: #555; }
}