/*
Theme Name: Kitchen Punks
Theme URI: https://kitchenpunks.org
Author: Dutch / Kitchen Punks
Description: The lore & science of food. Bespoke classic theme — Direction A "Field Manual". German-primary, Polylang-ready.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: kitchenpunks
*/

/* ============ TOKENS ============ */
  :root{
    --bg:oklch(1 0 0);
    --ink:oklch(0.20 0 0);
    --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 "field manual" device (one coherent system) */
  .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 ============ */
  .ticker{
    background:var(--ink);color:oklch(0.92 0.02 120);
    font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
    padding:.4rem 0;overflow:hidden;
  }
  .ticker .wrap{display:flex;gap:1.4rem;justify-content:space-between;flex-wrap:wrap}
  .ticker b{color:var(--accent);font-weight:700}
  .ticker .em{color:#fff}

  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:.85rem}
  .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
  .brand .mark{
    font-family:var(--grotesk);font-weight:700;letter-spacing:-.04em;
    font-size:1.18rem;line-height:1;
  }
  .brand .mark .k{color:var(--primary)}
  .brand .reg{font-family:var(--mono);font-size:.6rem;color:var(--muted);align-self:flex-start;margin-top:.1em}
  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}
  .search:hover{border-color:var(--ink);color:var(--ink)}
  @media (max-width:820px){nav.main{display:none}}

  /* ============ HERO ============ */
  .hero{padding-block:clamp(2.6rem,6vw,5rem) clamp(2rem,4vw,3.2rem)}
  .hero .lede{
    font-family:var(--grotesk);font-weight:500;font-size:.82rem;
    letter-spacing:.02em;color:var(--primary-deep);
    display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;
  }
  .hero .lede::before{content:"";flex:0 0 2.4rem;height:1.5px;background:var(--primary)}
  .hero h1{
    font-size:clamp(2.5rem,1.7rem + 4.2vw,5.4rem);
    max-width:18ch;margin-bottom:1.5rem;
  }
  .hero h1 em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
  .hero .sub{max-width:46ch;color:oklch(0.30 0 0);font-size:clamp(1.08rem,1rem + 0.4vw,1.3rem);line-height:1.5}

  /* strike-the-doctrine — the signature, used as hero exhibit */
  .exhibit{
    margin-top:clamp(2rem,5vw,3.4rem);
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:start;
    border-top:1.5px solid var(--ink);padding-top:1.4rem;
  }
  .exhibit .label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
  .doctrine{font-family:var(--grotesk);font-weight:500;font-size:clamp(1.3rem,1rem + 1.5vw,2rem);line-height:1.18;letter-spacing:-.02em}
  .myth{position:relative;color:var(--muted);display:inline}
  .myth .strk{position:absolute;left:-.05em;right:-.05em;top:52%;height:.12em;background:var(--accent);transform:scaleX(var(--s,1));transform-origin:left;border-radius:2px}
  .verdict{display:block;margin-top:1.1rem;color:var(--ink)}
  .verdict b{color:var(--primary-deep);font-family:var(--mono);font-weight:700;font-size:.8em;letter-spacing:.06em;margin-right:.5em;text-transform:uppercase}
  .exhibit .cite{font-family:var(--serif);font-size:.95rem;color:var(--muted);margin-top:1.1rem;max-width:54ch;font-style:italic}
  .exhibit .cite sup{font-family:var(--mono);font-style:normal;color:var(--accent);font-size:.7em}

  .stamp{
    font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.1em;
    color:var(--accent);border:2px solid var(--accent);border-radius:3px;
    padding:.5rem .7rem;transform:rotate(-7deg);white-space:nowrap;
    align-self:center;opacity:.92;
    box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 25%,transparent);
  }
  @media (max-width:680px){
    .exhibit{grid-template-columns:1fr}
    .stamp{justify-self:start;margin-top:.4rem}
  }

  /* ============ DISPATCHES (editorial list, NOT cards) ============ */
  section{padding-block:clamp(2.6rem,5vw,4.2rem)}
  .feed{display:flex;flex-direction:column}
  .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);
  }
  .post:hover{background:var(--surface)}
  .post:hover h3{color:var(--primary-deep)}
  .post .kx{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-deep)}
  .post .body h3{font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem);line-height:1.1;margin-bottom:.45rem}
  .post .body p{color:var(--muted);font-size:1rem;max-width:60ch;line-height:1.45}
  .post .meta{font-family:var(--mono);font-size:.7rem;color:var(--muted);text-align:right;line-height:1.7}
  .post .meta b{color:var(--ink);font-weight:400}
  .post .meta .c{color:var(--primary-deep)}
  @media (max-width:760px){
    .post{grid-template-columns:1fr;gap:.5rem;padding-block:1.4rem}
    .post .meta{text-align:left;order:3;margin-top:.3rem}
    .post .kx{order:1}
  }

  /* ============ SPECIMEN ============ */
  .specimen-wrap{background:var(--ink);color:oklch(0.93 0.01 120);border-radius:6px;overflow:hidden}
  .specimen{display:grid;grid-template-columns:1.1fr .9fr}
  .specimen .txt{padding:clamp(1.8rem,4vw,3rem)}
  .specimen .txt h2{color:#fff;font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);margin-bottom:1rem}
  .specimen .txt p{color:oklch(0.82 0.01 120);max-width:46ch;margin-bottom:1.4rem}
  .specimen .txt a{color:oklch(0.78 0.13 118);font-family:var(--grotesk);font-weight:500;text-decoration:none;font-size:.95rem;border-bottom:1.5px solid currentColor;padding-bottom:.1em}
  .specimen .txt a:hover{color:#fff}
  .datasheet{border-left:1px solid oklch(0.32 0.01 120);padding:clamp(1.8rem,4vw,3rem);font-family:var(--mono);font-size:.78rem}
  .datasheet .h{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;margin-bottom:1.1rem}
  .datasheet dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem}
  .datasheet dt{color:oklch(0.62 0.02 120)}
  .datasheet dd{color:oklch(0.95 0.01 120);text-align:right}
  .datasheet .binom{font-style:italic;color:oklch(0.78 0.13 118)}
  @media (max-width:720px){.specimen{grid-template-columns:1fr}.datasheet{border-left:0;border-top:1px solid oklch(0.32 0.01 120)}}

  /* ============ INDEX / TOPICS ============ */
  .topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0}
  .topic{padding:1.5rem 1.6rem 1.5rem 0;border-top:1.5px solid var(--ink);text-decoration:none;color:inherit}
  .topic .n{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
  .topic h3{font-size:1.35rem;margin:.5rem 0 .35rem;letter-spacing:-.02em}
  .topic:hover h3{color:var(--primary-deep)}
  .topic p{font-size:.92rem;color:var(--muted);line-height:1.4}

  /* ============ MANIFESTO ============ */
  .manifesto{max-width:34ch;margin-inline:auto;text-align:center;padding-block:clamp(3rem,7vw,5.5rem)}
  .manifesto p{font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);line-height:1.32;font-weight:400;letter-spacing:-.01em}
  .manifesto .hl{color:var(--primary-deep);font-style:italic}
  .manifesto .mk{color:var(--accent)}
  .manifesto .sig{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:1.8rem;letter-spacing:.04em}

  /* ============ SUBSCRIBE ============ */
  .sub-band{background:var(--surface);border-block:1px solid var(--hairline)}
  .subgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(2.4rem,5vw,3.8rem)}
  .subgrid h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);margin-bottom:.7rem}
  .subgrid .note{color:var(--muted);max-width:38ch}
  form.signup{display:flex;gap:.5rem;flex-wrap:wrap}
  form.signup input{flex:1 1 14rem;font-family:var(--mono);font-size:.85rem;padding:.85rem .9rem;border:1.5px solid var(--ink);border-radius:3px;background:var(--bg);color:var(--ink)}
  form.signup input::placeholder{color:var(--muted)}
  form.signup button{font-family:var(--grotesk);font-weight:700;font-size:.9rem;padding:.85rem 1.4rem;border:1.5px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--bg);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
  form.signup button:hover{background:var(--accent);border-color:var(--accent)}
  .subgrid .fine{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-top:.8rem}
  @media (max-width:720px){.subgrid{grid-template-columns:1fr}}

  /* ============ FOOTNOTES ============ */
  .sources{padding-block:clamp(2.4rem,5vw,3.4rem)}
  .sources ol{font-family:var(--serif);font-size:.92rem;color:var(--muted);max-width:var(--measure);padding-left:1.4rem;display:flex;flex-direction:column;gap:.5rem}
  .sources li::marker{font-family:var(--mono);font-size:.8rem;color:var(--accent)}
  .sources cite{font-style:italic}

  /* ============ 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 ============ */
  .myth .strk{transition:transform .7s var(--ease) .15s}
  [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  [data-reveal].in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important}
    .myth .strk{transition:none}
    [data-reveal]{opacity:1;transform:none;transition:none}
  }

/* ============ 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 */
.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)}