/*
Theme Name:   Eli Field Log
Theme URI:    https://eligreenwindow.eu.org
Description:  田野筆記 · 自然版 — a nature-toned field-notebook child theme for 伊萊的綠色窗戶. Photographic headers drawn from the blog's own archive, a moss-and-bark palette, and measurements printed beside every entry. Built for Traditional Chinese long-form keeping notes.
Author:       Eli Green Window
Template:     generatepress
Version:      2.0.0
Text Domain:  eli-field-log
*/

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root{
  /* ground — forest floor, not office grey */
  --fl-paper:      #F5F7F1;
  --fl-paper-2:    #FFFFFF;
  --fl-sunk:       #E9EEE2;
  --fl-rule:       #D6DECB;
  --fl-rule-soft:  #E4EADA;

  /* ink */
  --fl-ink:        #1A2118;
  --fl-ink-2:      #3B4636;
  --fl-dim:        #6B7663;
  --fl-faint:      #97A18E;

  /* nature accents */
  --fl-forest:     #16241B;   /* deepest — masthead, footer */
  --fl-moss:       #3E6B45;   /* primary accent */
  --fl-fern:       #7FA86B;   /* light accent, hover */
  --fl-bark:       #6B5238;   /* warm counterweight */
  --fl-lichen:     #C3D4A8;   /* pale wash */
  --fl-tape:       #C2551F;   /* flagging tape — live/current only */

  /* structure */
  --fl-r:          14px;      /* modern, softly rounded */
  --fl-r-sm:       8px;
  --fl-cell:       24px;
  --fl-shadow:     0 1px 2px rgba(22,36,27,.05), 0 12px 32px -16px rgba(22,36,27,.28);
  --fl-shadow-lg:  0 2px 4px rgba(22,36,27,.06), 0 24px 60px -24px rgba(22,36,27,.4);

  /* type — contemporary geometric Latin + Noto for Chinese */
  --fl-display: "Plus Jakarta Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  --fl-sans:    "Noto Sans TC", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --fl-mono:    "JetBrains Mono", "Noto Sans TC", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fl-measure: 40em;

  /* photographic headers — served from the blog's own Google CDN archive,
     so they cost this host zero bandwidth. */
  --fl-hero: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVy8a46TwuAq3G7uJMdy26gV3ul0wG6p8wmVR9Su621D94SKnmjDQ4cXyT-twDlaodLG1cYPI4WhI_ij6HpFrTpO50aS40ThOH5RZxpf4EDGzu54Zq7_By-DFqnLgC4Kj21yJDArJ0aiyLM7qtt5Qe8sJdPGeVLNJYpRL-cocbq4DEiRDdvyKRI7Hf/w1920/PXL_20230317_125230857~2.jpg");
}

@media (prefers-color-scheme: dark){
  :root:not([data-fl-theme="light"]){
    --fl-paper:      #11150F;
    --fl-paper-2:    #181E16;
    --fl-sunk:       #0C0F0A;
    --fl-rule:       #2A3326;
    --fl-rule-soft:  #212A1E;
    --fl-ink:        #E6ECE0;
    --fl-ink-2:      #C4CDBB;
    --fl-dim:        #8D9884;
    --fl-faint:      #6C7663;
    --fl-forest:     #0C120D;
    --fl-moss:       #7FA86B;
    --fl-fern:       #A9C98F;
    --fl-lichen:     #2E3B26;
    --fl-shadow:     0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.7);
  }
}

*{ box-sizing: border-box; }

/* ==========================================================================
   2 · GROUND
   ========================================================================== */
body{
  background-color: var(--fl-paper);
  color: var(--fl-ink);
  font-family: var(--fl-sans);
  font-size: 18px;              /* larger, per request */
  line-height: 1.95;            /* CJK needs the air */
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* a whisper of organic texture, drawn not downloaded */
body::before{
  content:"";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(126,168,107,.10), transparent 42%),
    radial-gradient(circle at 88% 8%,  rgba(107,82,56,.07),  transparent 38%),
    radial-gradient(circle at 70% 92%, rgba(62,107,69,.08),  transparent 45%);
}

.site-content .content-area{ background: transparent; }

/* ==========================================================================
   3 · TYPE
   ========================================================================== */
h1,h2,h3,h4,h5,h6{
  font-family: var(--fl-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.4;
  text-wrap: balance;
  color: var(--fl-ink);
}
h1{ font-size: clamp(2rem, 4.2vw, 2.9rem); letter-spacing: -.032em; }
h2{ font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-top: 2.6em; }
h3{ font-size: 1.3rem; margin-top: 2.1em; }
h4{ font-size: 1.12rem; margin-top: 1.8em; color: var(--fl-ink-2); }

/* one flourish, spent once per section */
.entry-content h2::before{
  content:""; display:block; width: 52px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--fl-moss), var(--fl-fern));
  margin-bottom: .65em;
}

p{ margin: 0 0 1.6em; }
.entry-content{ max-width: var(--fl-measure); font-size: 1.02rem; }

a{ color: var(--fl-moss); text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
a:hover{ color: var(--fl-tape); }
a:focus-visible{ outline: 3px solid var(--fl-fern); outline-offset: 3px; border-radius: 3px; }

blockquote{
  border: 0; border-left: 4px solid var(--fl-fern);
  background: var(--fl-sunk);
  border-radius: 0 var(--fl-r-sm) var(--fl-r-sm) 0;
  margin: 2.2em 0; padding: 1.1em 1.4em;
  font-style: normal; color: var(--fl-ink-2);
}
blockquote p:last-child{ margin-bottom: 0; }

code,kbd,pre{ font-family: var(--fl-mono); font-size: .9em; }
pre{ background: var(--fl-forest); color: #E6ECE0; padding: 1.2em 1.4em;
     border-radius: var(--fl-r-sm); overflow-x: auto; }

.entry-content table{ display:block; overflow-x:auto; }
.entry-content img{
  max-width: 100%; height: auto;
  border-radius: var(--fl-r-sm);
  box-shadow: var(--fl-shadow);
}

/* ==========================================================================
   4 · MASTHEAD over photography
   ========================================================================== */
.site-header{
  position: relative;
  background-image:
    linear-gradient(to bottom, rgba(12,18,13,.78), rgba(12,18,13,.60) 55%, rgba(12,18,13,.90)),
    var(--fl-hero);
  background-size: cover;
  background-position: center 40%;
  border-bottom: 0;
  padding-block: 8px;
}
.site-header .site-branding .main-title,
.site-header .site-branding .main-title a{
  font-family: var(--fl-display); font-weight: 800; letter-spacing: -.03em;
  color: #F2F7EC; text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.site-header .site-description{
  color: #C9D8BC; font-size: .92rem; letter-spacing: .01em;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}

/* navigation — pill tabs floating on the photo */
.main-navigation{ background: transparent; }
.main-navigation .main-nav ul li a{
  font-family: var(--fl-display);
  font-size: .96rem; font-weight: 600; letter-spacing: .01em;
  color: #DCE7D2; padding: 10px 18px; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.main-navigation .main-nav ul li a:hover{
  background: rgba(255,255,255,.14); color: #fff;
}
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-post-ancestor > a{
  background: var(--fl-fern); color: var(--fl-forest);
}
.main-navigation ul ul{
  background: var(--fl-paper-2);
  border: 1px solid var(--fl-rule);
  border-radius: var(--fl-r);
  box-shadow: var(--fl-shadow-lg);
  overflow: hidden; padding: 6px;
}
.main-navigation ul ul li a{ color: var(--fl-ink); border-radius: var(--fl-r-sm); }
.main-navigation ul ul li a:hover{ background: var(--fl-sunk); color: var(--fl-moss); }

/* ==========================================================================
   5 · CATEGORY HERO — photo per topic
   ========================================================================== */
.fl-hero{
  position: relative;
  border-radius: var(--fl-r);
  overflow: hidden;
  padding: clamp(2.4rem, 6vw, 4.2rem) clamp(1.4rem, 4vw, 3rem);
  margin-bottom: calc(var(--fl-cell) * 1.6);
  background-image: linear-gradient(120deg, rgba(12,18,13,.86), rgba(12,18,13,.46)), var(--fl-hero);
  background-size: cover; background-position: center;
  box-shadow: var(--fl-shadow);
}
.fl-hero .fl-kicker{
  font-family: var(--fl-mono); font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fl-lichen); margin: 0;
}
.fl-hero h1{ color: #F4F8EF; margin: .3em 0 0; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.fl-hero .fl-latin{
  font-family: var(--fl-display); font-style: italic; font-weight: 500;
  color: var(--fl-lichen); font-size: 1rem; margin: .35em 0 0;
}
.fl-hero .fl-desc{ color: #DDE8D3; max-width: 46em; margin: 1em 0 0; font-size: .98rem; }
.fl-hero .fl-count{
  font-family: var(--fl-mono); font-size: .82rem; color: var(--fl-lichen);
  margin: 1.1em 0 0; font-variant-numeric: tabular-nums;
}

/* per-category photography, set from functions.php via a body class */
body.fl-cat-ants{ --fl-hero: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBhDLXVJYMdntqqEwm5H8xnRnCaV5nMqSuwFH4CuG8bLuY8q5nfbq-9E6O6Vg9Vf9ZBrQDn3RJ_EtV0iuCwwoECTESf7cNbI1EhH3wt-KrYMnj1K1LhUV3uSAhLDYyXcpgKWtLUIZEfTHMji9z3Hvg9qX5FaggklmYqtCpRkim1QhGWzaCB5MnAi07/w1600/PXL_20220328_131245790.jpg"); }
body.fl-cat-geckos   { --fl-hero: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRwdyKFgAryoCj3aDdnSgHe-3HW9Ll6fEshPPNv0dkTL93d9FZmXUBKri5NeIZmdsXWUcZiHlM6Sag2b92hrmzAgU0jbiSGo72_ZbpgeEBGQgZ9c7hr-5eOTYfiZdb8aDg1AFyoeniYmi2WkfNp3Pw2aBj3T8YnUXih0mU07esrTvGMpaxlLs4b1RO/w1600/PXL_20221208_003918133~2.jpg"); }
body.fl-cat-axolotl  { --fl-hero: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7PVTLXVUdRyE3m3BZXdjOsHaxGjEeQ91X4cnKEf-iDkfCTh16fDeyt4tgdNEEute6NsyhZzmT88HzX76TuzzyKnWuemjUnnz3Or106ONrl2ciez0nMyh9V9EkRvXm-djOyp4dGKxiGRtsLD-GDNRmY0jcSDG5KJLKHuL1ClGwRKGA0PKQt8M4cIv/w1600/PXL_20220808_100948524.jpg"); }
body.fl-cat-carnivorous-plants{ --fl-hero: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoWBMYiDly0krC3xGK2LHHd_0aT1wTrINvfwn7KFxhzUXcQbgy3nqnXc4ISEL3P8Wo9mzQBnGAzVjBPjAw-r6QmAtsfwE_HbMrKG90YEHX4pxUWvqXNOKmVYkZs7yqxQlNMYMG58EoVQ8/w1600/IMG_20201130_203928.jpg"); }
/* fl-cat-life intentionally inherits the default hero */

/* ==========================================================================
   6 · POST CARDS
   ========================================================================== */
.fl-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: calc(var(--fl-cell) * 1.3);
}
.fl-card{
  display: flex; flex-direction: column;
  background: var(--fl-paper-2);
  border: 1px solid var(--fl-rule-soft);
  border-radius: var(--fl-r);
  overflow: hidden;
  box-shadow: var(--fl-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fl-card:hover{ transform: translateY(-3px); box-shadow: var(--fl-shadow-lg); }
.fl-card__thumb{
  aspect-ratio: 16 / 10; display: block; overflow: hidden;
  background: linear-gradient(150deg, var(--fl-moss), var(--fl-forest));
}
.fl-card__thumb img{ width:100%; height:100%; object-fit: cover; border-radius: 0; box-shadow: none; display:block; }
.fl-card__body{ padding: 16px 18px 18px; display:flex; flex-direction:column; gap: 9px; }
.fl-card__chip{
  align-self: flex-start;
  font-family: var(--fl-mono); font-size: .7rem; letter-spacing: .08em;
  color: var(--fl-moss); background: var(--fl-lichen);
  padding: 3px 10px; border-radius: 999px;
}
.fl-card__title{ font-family: var(--fl-display); font-size: 1.08rem; font-weight: 700; line-height: 1.5; margin: 0; }
.fl-card__title a{ color: var(--fl-ink); text-decoration: none; }
.fl-card__title a:hover{ color: var(--fl-moss); }

/* ==========================================================================
   7 · MEASUREMENT ROW — this theme's whole point
   ========================================================================== */
.fl-meta{
  font-family: var(--fl-mono); font-size: .78rem; letter-spacing: .02em;
  color: var(--fl-dim); font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; gap: 2px 16px; align-items: baseline; margin: 0;
}
.fl-meta--single{
  border-top: 1px solid var(--fl-rule);
  border-bottom: 1px solid var(--fl-rule);
  padding: 12px 0; margin: 1.7em 0 2.6em; font-size: .86rem; gap: 4px 26px;
}
.fl-meta dt{ display:inline; color: var(--fl-faint); margin-right: 5px; }
.fl-meta dd{ display:inline; margin:0; color: var(--fl-moss); font-weight: 500; }
.fl-meta dd.is-flagged{ color: var(--fl-tape); }
.fl-meta__pair{ white-space: nowrap; }

/* ==========================================================================
   8 · SINGLE POST
   ========================================================================== */
.single .entry-header{ border-bottom: 1px solid var(--fl-rule); padding-bottom: 1.3em; }
.fl-breadcrumb{
  font-family: var(--fl-mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--fl-dim); margin-bottom: .9em;
}
.fl-breadcrumb a{ color: var(--fl-dim); text-decoration: none; }
.fl-breadcrumb a:hover{ color: var(--fl-moss); text-decoration: underline; }

.fl-tags{ display:flex; flex-wrap:wrap; gap:8px; margin: 2.6em 0 0; padding:0; list-style:none; }
.fl-tags a{
  font-family: var(--fl-mono); font-size: .78rem;
  color: var(--fl-ink-2); background: var(--fl-sunk);
  border: 1px solid var(--fl-rule-soft); border-radius: 999px;
  padding: 5px 13px; text-decoration: none; display:inline-block;
}
.fl-tags a:hover{ border-color: var(--fl-moss); color: var(--fl-moss); background: var(--fl-lichen); }

.fl-related{
  margin-top: calc(var(--fl-cell) * 2.6);
  border-top: 1px solid var(--fl-rule); padding-top: 1.9em;
}
.fl-related h2{ font-family: var(--fl-display); font-size: 1.05rem; margin: 0 0 1.3em; letter-spacing: .01em; }
.fl-related h2::before{ display:none; }

/* ==========================================================================
   9 · SIDEBAR + SEARCH
   ========================================================================== */
.sidebar .widget{
  background: var(--fl-paper-2);
  border: 1px solid var(--fl-rule-soft);
  border-radius: var(--fl-r);
  padding: 20px 22px; margin-bottom: var(--fl-cell);
  box-shadow: var(--fl-shadow);
}
.sidebar .widget .widget-title{
  font-family: var(--fl-mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fl-dim); margin-bottom: 1em;
}
.sidebar .widget ul{ list-style:none; margin:0; padding:0; }
.sidebar .widget li{ padding: 7px 0; font-size: .96rem; display:flex; justify-content:space-between; gap:10px; }

.wp-block-search__input,.search-field{
  font-family: var(--fl-sans);
  border: 1px solid var(--fl-rule);
  border-radius: 999px; background: var(--fl-paper-2); color: var(--fl-ink);
  padding: 11px 18px; width: 100%;
}
.wp-block-search__input:focus,.search-field:focus{ outline:none; border-color: var(--fl-moss); }

/* ==========================================================================
   10 · FOOTER
   ========================================================================== */
.site-footer{ background: var(--fl-forest); color: #C9D8BC; }
.site-footer a{ color: var(--fl-fern); }
.site-footer a:hover{ color: #fff; }
.site-info{ font-family: var(--fl-mono); font-size: .8rem; letter-spacing: .03em; }

/* ==========================================================================
   11 · RESPONSIVE / MOTION / PRINT
   ========================================================================== */
@media (max-width: 768px){
  body{ font-size: 17px; line-height: 1.9; }
  .fl-grid{ grid-template-columns: 1fr; }
  .site-header{ background-position: center; }
  .fl-hero{ padding: 2rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .fl-card:hover{ transform:none; }
}
@media print{
  body{ background:#fff; color:#000; }
  body::before, .site-header, .main-navigation, .sidebar, .site-footer, .fl-related, .fl-hero{ display:none; }
  .entry-content{ max-width:none; }
}


/* ==========================================================================
   12 · ARCHIVE ENTRIES — GeneratePress native markup as cards
   ========================================================================== */
.site-main > article.post{ margin-bottom: var(--fl-cell); border: 0; padding: 0; }
.site-main > article.post > .inside-article{
  background: var(--fl-paper-2);
  border: 1px solid var(--fl-rule-soft);
  border-left: 4px solid var(--fl-fern);
  border-radius: var(--fl-r);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--fl-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-left-color .18s ease;
}
.site-main > article.post > .inside-article:hover{
  transform: translateY(-2px);
  box-shadow: var(--fl-shadow-lg);
  border-left-color: var(--fl-moss);
}
.site-main > article.post .entry-title{
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin: 0 0 .45em; letter-spacing: -.025em;
}
.site-main > article.post .entry-title a{ color: var(--fl-ink); text-decoration: none; }
.site-main > article.post .entry-title a:hover{ color: var(--fl-moss); }
.entry-summary p, .entry-content p{ color: var(--fl-ink-2); }

.entry-meta{ font-family: var(--fl-mono); font-size: .8rem; color: var(--fl-dim); letter-spacing: .02em; }
.entry-meta a{ color: var(--fl-dim); text-decoration: none; }
.entry-meta a:hover{ color: var(--fl-moss); text-decoration: underline; }
.entry-meta .cat-links a, .entry-meta .tags-links a{
  display: inline-block; background: var(--fl-sunk);
  border: 1px solid var(--fl-rule-soft); border-radius: 999px;
  padding: 2px 11px; margin: 3px 5px 3px 0;
}
.entry-meta .cat-links a:hover, .entry-meta .tags-links a:hover{
  background: var(--fl-lichen); border-color: var(--fl-moss); color: var(--fl-moss); text-decoration: none;
}

/* ==========================================================================
   13 · NAV + SEARCH corrections
   ========================================================================== */
/* CJK menu labels are 2 characters; a 999px pill renders as a circle */
.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-post-ancestor > a{ border-radius: 10px; }

.wp-block-search__inside-wrapper{ gap: 8px; }
.wp-block-search__button{
  background: var(--fl-moss); color: #fff; border: 0; border-radius: 10px;
  padding: 11px 18px; cursor: pointer;
  font-family: var(--fl-display); font-weight: 600; font-size: .92rem;
}
.wp-block-search__button:hover{ background: var(--fl-forest); }

.sidebar .wp-block-heading{
  font-family: var(--fl-mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fl-dim); margin: 0 0 1em; font-weight: 500;
}
.sidebar ul.wp-block-latest-posts, .sidebar ul.wp-block-latest-comments{ list-style: none; margin: 0; padding: 0; }
.sidebar ul.wp-block-latest-posts li, .sidebar ul.wp-block-latest-comments li{ padding: 8px 0; line-height: 1.6; }
.sidebar ul.wp-block-latest-posts a{ text-decoration: none; font-size: .95rem; }
.sidebar ul.wp-block-latest-posts a:hover{ text-decoration: underline; }

.paging-navigation .nav-links a, .paging-navigation .nav-links span{
  font-family: var(--fl-mono); border-radius: 10px; padding: 9px 15px;
  border: 1px solid var(--fl-rule-soft); background: var(--fl-paper-2); text-decoration: none;
}
.paging-navigation .nav-links .current{ background: var(--fl-moss); color: #fff; border-color: var(--fl-moss); }

/* ==========================================================================
   14 · FINAL CORRECTIONS
   ========================================================================== */
/* the measurement row already prints the date; don't repeat it below the title */
.single .entry-meta .posted-on{ display: none; }
.single .entry-meta .byline{ margin-left: 0; }

/* keep the hero photo from dominating on tall screens */
.fl-hero{ max-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }

/* ==========================================================================
   15 · SEQUENTIAL POST NAVIGATION (same category)
   ========================================================================== */
.fl-postnav{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: calc(var(--fl-cell) * 1.8);
}
.fl-postnav__link{
  display: flex; flex-direction: column; gap: 6px;
  background: var(--fl-paper-2);
  border: 1px solid var(--fl-rule-soft);
  border-radius: var(--fl-r);
  padding: 15px 18px;
  text-decoration: none;
  box-shadow: var(--fl-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fl-postnav__link:hover{
  transform: translateY(-2px);
  box-shadow: var(--fl-shadow-lg);
  border-color: var(--fl-moss);
}
.fl-postnav__prev{ grid-column: 1; }
.fl-postnav__next{ grid-column: 2; text-align: right; }
/* when only one of the two exists, don't leave a hole */
.fl-postnav__next:only-child{ grid-column: 2; }
.fl-postnav__label{
  font-family: var(--fl-mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fl-moss);
}
.fl-postnav__title{
  font-family: var(--fl-display); font-weight: 600; font-size: 1rem;
  line-height: 1.5; color: var(--fl-ink);
}
.fl-postnav__link:hover .fl-postnav__title{ color: var(--fl-moss); }

@media (max-width: 600px){
  .fl-postnav{ grid-template-columns: 1fr; }
  .fl-postnav__prev, .fl-postnav__next{ grid-column: 1; text-align: left; }
}

/* ==========================================================================
   16 · SUPPRESS GENERATEPRESS DEFAULT POST NAVIGATION
   Its links are chronological across the whole blog and jump between topics.
   .fl-postnav replaces it and stays inside the category.
   ========================================================================== */
.single .post-navigation{ display: none; }


/* ==========================================================================
   STATIC BUILD — layout for the generated markup
   The tokens, cards, hero, meta row, tags, postnav and related sections all
   come from the theme stylesheet above. This layer replaces the parts that
   GeneratePress used to provide.
   ========================================================================== */

.wrap{ max-width: 1100px; margin: 0 auto; padding: 0 22px; }

.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--fl-forest); color: #fff; padding: 10px 16px; z-index: 100;
  border-radius: 0 0 var(--fl-r-sm) 0;
}
.skip-link:focus{ left: 0; }

/* ---- masthead ---- */
.site-header{
  padding: 0;
  background-image:
    linear-gradient(to bottom, rgba(12,18,13,.80), rgba(12,18,13,.62) 55%, rgba(12,18,13,.92)),
    var(--fl-hero);
  background-size: cover;
  background-position: center 40%;
}
.site-header__inner{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 26px; padding-block: 22px;
}
.site-title{ margin: 0; font-family: var(--fl-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.site-title a{ color: #F2F7EC; text-decoration: none; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.site-description{
  margin: 4px 0 0; color: #C9D8BC; font-size: .84rem; letter-spacing: .01em;
  text-shadow: 0 1px 12px rgba(0,0,0,.6); max-width: 46ch;
}

.main-nav ul{ display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.main-nav a{
  display: block; padding: 9px 16px; border-radius: 10px;
  font-family: var(--fl-display); font-size: .94rem; font-weight: 600;
  color: #DCE7D2; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.main-nav a:hover{ background: rgba(255,255,255,.14); color: #fff; }
.main-nav a.is-active{ background: var(--fl-fern); color: var(--fl-forest); }

/* ---- home ---- */
.fl-topics{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; margin: calc(var(--fl-cell) * 1.4) 0;
}
.fl-topic{
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 132px; padding: 16px 18px; border-radius: var(--fl-r);
  text-decoration: none; overflow: hidden;
  background-image: linear-gradient(to top, rgba(12,18,13,.88), rgba(12,18,13,.30)), var(--fl-hero);
  background-size: cover; background-position: center;
  box-shadow: var(--fl-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fl-topic:hover{ transform: translateY(-3px); box-shadow: var(--fl-shadow-lg); }
.fl-topic__name{ font-family: var(--fl-display); font-weight: 700; font-size: 1.15rem; color: #F4F8EF; }
.fl-topic__count{ font-family: var(--fl-mono); font-size: .76rem; color: var(--fl-lichen); margin-top: 2px; }

.fl-section-title{
  font-family: var(--fl-mono); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fl-dim); font-weight: 500;
  margin: calc(var(--fl-cell) * 1.6) 0 var(--fl-cell);
}
.fl-section-title::before{ display: none; }

/* ---- cards (no thumbnails in the static build) ---- */
.fl-card__excerpt{
  margin: 0; font-size: .92rem; line-height: 1.75; color: var(--fl-dim);
}
.fl-card__chip{ text-decoration: none; }

/* ---- single post ---- */
.single{
  background: var(--fl-paper-2);
  border: 1px solid var(--fl-rule-soft);
  border-radius: var(--fl-r);
  padding: clamp(1.6rem, 4vw, 3rem);
  margin: calc(var(--fl-cell) * 1.4) 0;
  box-shadow: var(--fl-shadow);
}
.entry-header{ border-bottom: 1px solid var(--fl-rule); padding-bottom: 1.2em; margin-bottom: 1.6em; }
.entry-title{ margin: .25em 0 0; }
.single .entry-content{ margin-inline: auto; }
.entry-content > *:first-child{ margin-top: 0; }

.fl-tags li{
  font-family: var(--fl-mono); font-size: .78rem;
  color: var(--fl-ink-2); background: var(--fl-sunk);
  border: 1px solid var(--fl-rule-soft); border-radius: 999px;
  padding: 5px 13px; display: inline-block;
}

/* ---- footer ---- */
.site-footer{
  margin-top: calc(var(--fl-cell) * 2.4);
  padding-block: 34px;
  background: var(--fl-forest); color: #C9D8BC;
  font-size: .88rem;
}
.site-footer p{ margin: 0 0 .5em; }
.site-footer__note{ color: #93A88C; font-size: .82rem; max-width: 52ch; }

/* ---- client-side search ---- */
.fl-search{ margin: calc(var(--fl-cell) * 1.2) 0 0; position: relative; }
.fl-search__input{
  width: 100%; max-width: 420px;
  font-family: var(--fl-sans); font-size: .96rem;
  border: 1px solid var(--fl-rule); border-radius: 999px;
  background: var(--fl-paper-2); color: var(--fl-ink);
  padding: 11px 20px;
}
.fl-search__input:focus{ outline: none; border-color: var(--fl-moss); }
.fl-search__results{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.fl-search__results li a{
  display: block; padding: 12px 16px; text-decoration: none;
  background: var(--fl-paper-2); border: 1px solid var(--fl-rule-soft);
  border-radius: var(--fl-r-sm); color: var(--fl-ink);
}
.fl-search__results li a:hover{ border-color: var(--fl-moss); }
.fl-search__cat{ font-family: var(--fl-mono); font-size: .72rem; color: var(--fl-moss); }
.fl-search__empty{ color: var(--fl-dim); font-size: .92rem; margin-top: 12px; }

@media (max-width: 760px){
  .site-header__inner{ flex-direction: column; align-items: flex-start; }
  .main-nav ul{ gap: 4px; }
  .main-nav a{ padding: 8px 12px; font-size: .88rem; }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.fl-intro{ margin: calc(var(--fl-cell) * 1.6) 0 0; }
.fl-intro h1{ margin: 0; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.fl-intro p{ margin: .7em 0 0; color: var(--fl-dim); max-width: 56ch; font-size: 1rem; }