/*
Theme Name: Kitchen Punks Blog
Theme URI: https://kitchenpunks.org
Author: Dutch / Kitchen Punks
Description: The lore & science of food — quiet edition. A reverse-chronological blog that keeps the "Field Manual" design language (Archivo/Newsreader/Space Mono, olive + reactive magenta, editorial feed) but drops the hero, exhibit, specimen and manifesto furniture. Let the text speak. German-primary, Polylang-ready.
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: kitchenpunks-blog
*/

/* ============ TOKENS ============ */
  :root{
    --bg:oklch(1 0 0);
    --ink:#111;                           /* body + headings (reader-requested: was oklch(0.20)) */
    --muted:oklch(0.44 0.02 120);
    --primary:oklch(0.55 0.11 118);       /* olive */
    --primary-deep:oklch(0.42 0.09 120);  /* olive, text-grade contrast */
    --accent:oklch(0.56 0.23 8);          /* reactive magenta */
    --hairline:oklch(0.90 0.006 120);
    --hairline-strong:oklch(0.82 0.008 120);
    --surface:oklch(0.975 0.012 120);     /* faint olive panel, data only */

    --serif:"Newsreader",Georgia,"Times New Roman",serif;
    --grotesk:"Archivo",ui-sans-serif,system-ui,sans-serif;
    --mono:"Space Mono",ui-monospace,"SFMono-Regular",monospace;

    --measure:68ch;
    --gutter:clamp(1.25rem,5vw,4rem);
    --z-nav:100;

    --ease:cubic-bezier(.16,1,.3,1); /* ease-out-expo-ish */
  }

  /* ============ RESET ============ */
  *,*::before,*::after{box-sizing:border-box;margin:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--bg);color:var(--ink);
    font-family:var(--serif);
    font-size:clamp(1.02rem,0.97rem + 0.25vw,1.15rem);
    line-height:1.62;font-weight:400;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    font-optical-sizing:auto;
  }
  img{max-width:100%;display:block}
  a{color:var(--primary-deep);text-underline-offset:.18em;text-decoration-thickness:.06em}
  a:hover{color:var(--accent)}
  ::selection{background:var(--accent);color:#fff}
  :focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:1px}

  /* ============ TYPE ROLES ============ */
  .mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em}
  .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  h1,h2,h3{font-family:var(--grotesk);font-weight:700;font-stretch:118%;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}

  /* ============ LAYOUT PRIMITIVES ============ */
  .wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--gutter)}
  .prose{max-width:var(--measure)}
  .rule{border:0;border-top:1px solid var(--hairline)}

  /* form-section divider — the one device kept from the field manual */
  .formline{
    display:flex;align-items:baseline;gap:1rem;
    border-top:1.5px solid var(--ink);
    padding-top:.55rem;margin-bottom:2.4rem;
  }
  .formline .sec{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
  .formline .desc{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-left:auto;text-align:right}

  /* ============ MASTHEAD (plain) ============ */
  header.site{position:sticky;top:0;z-index:var(--z-nav);background:color-mix(in oklch,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--hairline)}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.95rem}
  .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
  nav.main{display:flex;gap:1.5rem;align-items:center}
  nav.main a{font-family:var(--grotesk);font-weight:500;font-size:.92rem;color:var(--ink);text-decoration:none}
  nav.main a:hover{color:var(--primary-deep)}
  nav.main a.now{color:var(--muted)}
  .navtools{display:flex;align-items:center;gap:1rem}
  .search{font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--hairline-strong);border-radius:2px;padding:.35rem .6rem;background:none;cursor:pointer;text-decoration:none}
  .search:hover{border-color:var(--ink);color:var(--ink)}
  @media (max-width:820px){nav.main{display:none}}

  /* ============ BAUSTELLE HERO (a book is being built here) ============ */
  .bau{
    margin-top:clamp(1.2rem,3vw,2.2rem);
    margin-bottom:clamp(2.4rem,6vw,4rem);
    border-radius:5px;overflow:hidden;
    background:var(--ink);color:oklch(0.93 0.01 120);
  }
  /* barricade tape — the one loud mark; magenta + light neutral on the dark panel */
  .bau-tape{height:9px;background:repeating-linear-gradient(-45deg,oklch(0.93 0.01 120) 0 11px,var(--accent) 11px 22px)}
  .bau-body{padding:clamp(1.8rem,4.5vw,3.2rem)}
  .bau-kicker{
    font-family:var(--mono);font-weight:700;font-size:.74rem;
    letter-spacing:.16em;text-transform:uppercase;color:oklch(0.68 0.20 10);
    display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
  }
  .bau-kicker::before{content:"";width:.62em;height:.62em;background:var(--accent);flex:0 0 auto}
  .bau-title{
    font-family:var(--grotesk);font-weight:700;font-stretch:118%;
    font-size:clamp(2.1rem,1.4rem + 3.2vw,4rem);line-height:1.02;
    letter-spacing:-.02em;max-width:16ch;margin-bottom:1.1rem;text-wrap:balance;color:#fff;
  }
  .bau-sub{
    font-family:var(--serif);font-size:clamp(1.08rem,1rem + 0.4vw,1.3rem);
    line-height:1.5;color:oklch(0.82 0.01 120);max-width:54ch;margin-bottom:1.6rem;
  }
  .bau-meta{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;
    color:oklch(0.62 0.02 120);border-top:1px solid oklch(0.32 0.01 120);padding-top:.9rem;
  }
  .bau-meta b{color:#fff;font-weight:700}

  /* ============ FEED (editorial list, NOT cards) ============ */
  section{padding-block:clamp(2.6rem,5vw,4.2rem)}
  /* Scoped under .feed: post_class() also puts a generic `.post` on single
     articles, so an unscoped `.post` would hijack the single-post layout. */
  .feed{display:flex;flex-direction:column}
  .feed .post{
    display:grid;grid-template-columns:7.5rem minmax(0,1fr) 9rem;gap:1.6rem;
    padding-block:1.7rem;border-top:1px solid var(--hairline);
    text-decoration:none;color:inherit;align-items:baseline;
    transition:background .35s var(--ease);
  }
  .feed .post:hover{background:var(--surface)}
  .feed .post:hover h3{color:var(--primary-deep)}
  .feed .post .kx{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deep)}
  .feed .post .body h3{font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem);line-height:1.1;margin-bottom:.45rem}
  .feed .post .body p{color:var(--muted);font-size:1rem;max-width:60ch;line-height:1.45}
  .feed .post .meta{font-family:var(--mono);font-size:.7rem;color:var(--muted);text-align:right;line-height:1.7}
  .feed .post .meta b{color:var(--ink);font-weight:400}
  .feed .post .meta .c{color:var(--primary-deep)}
  @media (max-width:760px){
    .feed .post{grid-template-columns:1fr;gap:.5rem;padding-block:1.4rem}
    .feed .post .meta{text-align:left;order:3;margin-top:.3rem}
    .feed .post .kx{order:1}
  }

  /* ============ FOOTER ============ */
  footer.site{background:var(--ink);color:oklch(0.82 0.01 120);padding-block:clamp(2.6rem,5vw,4rem)}
  .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
  footer .mark{font-family:var(--grotesk);font-weight:700;font-size:1.6rem;letter-spacing:-.04em;color:#fff}
  footer .mark .k{color:oklch(0.78 0.13 118)}
  footer .tagf{font-family:var(--mono);font-size:.72rem;color:oklch(0.6 0.02 120);margin-top:.7rem;max-width:34ch;line-height:1.6}
  footer h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:oklch(0.6 0.02 120);margin-bottom:.9rem;font-weight:400}
  footer ul{list-style:none}
  footer li{margin-bottom:.5rem}
  footer a{color:oklch(0.88 0.01 120);text-decoration:none;font-family:var(--grotesk);font-size:.95rem}
  footer a:hover{color:oklch(0.78 0.13 118)}
  .colophon{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;color:oklch(0.55 0.02 120);border-top:1px solid oklch(0.3 0.01 120);margin-top:2.6rem;padding-top:1.3rem}
  @media (max-width:720px){.fgrid{grid-template-columns:1fr 1fr}footer .brandcol{grid-column:1/-1}}

  /* ============ MOTION ============ */
  @media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ============ LANG TOGGLE ============ */
.lang{display:flex;gap:.45rem;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em}
.lang .cur{color:var(--ink);font-weight:700}
.lang a{color:var(--muted);text-decoration:none}
.lang a:hover{color:var(--accent)}

/* ============ WORDPRESS INTEGRATION ============ */
.brand{align-items:center}
.brand .brandlogo,.custom-logo{height:38px;width:auto;display:block}
.custom-logo-link{display:inline-flex;align-items:center}
@media (max-width:520px){.brand .brandlogo,.custom-logo{height:30px}}
a.search{display:inline-block;text-decoration:none}

/* Single entry */
.entry{padding-top:clamp(2.2rem,5vw,3.6rem);padding-bottom:1rem}
.entry-head{max-width:var(--measure);margin-bottom:2rem}
.entry-kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deep);text-decoration:none}
.entry-title{font-family:var(--grotesk);font-weight:700;font-stretch:118%;letter-spacing:-.02em;line-height:1.04;font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);margin:.7rem 0 1rem;max-width:20ch;text-wrap:balance}
.entry-meta{display:flex;gap:1.2rem;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--muted);border-top:1px solid var(--hairline);padding-top:.9rem}
.entry-meta b{color:var(--ink);font-weight:400}
.entry-meta .c{color:var(--primary-deep)}
.entry-figure{margin:0 0 2rem}
.entry-figure img{width:100%;height:auto;border-radius:5px}
.entry-content{font-size:1.12rem}
.entry-content > *{max-width:var(--measure)}
.entry-content > .alignwide{max-width:min(74rem,100%)}
.entry-content > .alignfull{max-width:none}
.entry-content p{margin-bottom:1.1rem;text-wrap:pretty}
.entry-content h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin:2.4rem 0 .8rem}
.entry-content h3{font-size:1.4rem;margin:1.8rem 0 .6rem}
.entry-content a{color:var(--primary-deep);text-decoration:underline}
.entry-content a:hover{color:var(--accent)}
.entry-content blockquote{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);margin:1.8rem 0;padding:1.2rem 0;font-family:var(--grotesk);font-weight:500;font-size:1.3rem;line-height:1.25}
.entry-content figure{margin:1.8rem 0}
.entry-content figcaption{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:.5rem}
.entry-content code,.entry-content kbd{font-family:var(--mono);font-size:.85em;background:var(--surface);padding:.1em .35em;border-radius:3px}
.entry-content ul,.entry-content ol{margin:0 0 1.1rem 1.3rem}
.entry-content li{margin-bottom:.4rem}

/* Native footnotes → the "Belege" look (still available inline in posts) */
.entry-content .wp-block-footnotes{font-family:var(--serif);font-size:.95rem;color:var(--muted);border-top:1.5px solid var(--ink);margin-top:2.6rem;padding-top:1.2rem}
.entry-content .wp-block-footnotes li{margin-bottom:.5rem}
.entry-content sup a{color:var(--accent);font-family:var(--mono);font-size:.72em;text-decoration:none}

/* Entry footer + nav */
.entry-foot{max-width:var(--measure);border-top:1px solid var(--hairline);margin-top:2.4rem;padding-top:1.2rem}
.entry-tags{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.entry-tags .tag{margin-right:.4rem}
.entry-correction{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-top:.8rem}
.entry-nav{display:flex;justify-content:space-between;gap:1.5rem;padding-block:2.4rem;border-top:1px solid var(--hairline)}
.entry-nav .adj{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;max-width:22rem}
.entry-nav .adj-next{text-align:right;margin-left:auto}
.entry-nav .lbl{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.entry-nav .ttl{font-family:var(--grotesk);font-weight:500;color:var(--ink)}
.entry-nav .adj:hover .ttl{color:var(--primary-deep)}

/* Pagination */
.kp-pagination{margin-top:2.4rem;font-family:var(--mono);font-size:.8rem}
.kp-pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.kp-pagination a,.kp-pagination .current,.kp-pagination .dots{padding:.5rem .8rem;border:1px solid var(--hairline-strong);border-radius:2px;text-decoration:none;color:var(--ink)}
.kp-pagination .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kp-pagination a:hover{border-color:var(--ink);color:var(--accent)}

/* Page + 404 */
.kp-page{padding-block:clamp(2.4rem,6vw,4.5rem)}
.kp-page .entry-content,.kp-page .prose{max-width:var(--measure)}