/*
Theme Name: Krunch Handbook
Theme URI: https://krun.ch/
Author: krun.ch editorial
Description: Custom technical-handbook theme for krun.ch - a plain-language file-compression reference. Teal-saffron palette, Schibsted Grotesk + Spline Sans.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krunch
*/

/* ---------- self-hosted variable fonts (no Google-CDN footprint) ---------- */
@font-face{font-family:'Schibsted Grotesk';src:url('assets/fonts/schibsted.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Spline Sans';src:url('assets/fonts/spline.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Spline Sans Mono';src:url('assets/fonts/splinemono.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --ink:#0c2b2a; --teal:#103b3a; --teal-600:#18514f; --teal-300:#3f7b76;
  --saffron:#f2b705; --saffron-deep:#b8860a;
  --paper:#f7f5ef; --panel:#fffdf8; --panel-2:#efece2; --line:#ddd7c8;
  --muted:#5d6b66; --text:#22302d;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --sans:'Spline Sans',system-ui,sans-serif;
  --disp:'Schibsted Grotesk',system-ui,sans-serif;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--paper);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);line-height:1.18;letter-spacing:-0.01em;font-weight:700}
img{max-width:100%;height:auto}
a{color:var(--teal-600);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:10px;background:var(--saffron);color:var(--ink);padding:8px 14px;border-radius:5px;z-index:99}

/* ---------- header ---------- */
.topbar{background:var(--teal);color:#eef3f1}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center;gap:11px}
.brand b{font-family:var(--disp);font-weight:700;font-size:1.28rem;color:#fff;letter-spacing:-0.02em}
.brand b span{color:var(--saffron)}
nav.main{display:flex;gap:24px;font-family:var(--disp);font-weight:500;font-size:.95rem;flex-wrap:wrap}
nav.main a{color:#cfe0dc}
nav.main a:hover,nav.main a[aria-current]{color:#fff;text-decoration:none}
.accent-rule{height:3px;background:linear-gradient(90deg,var(--saffron) 0 64px,transparent 64px)}

/* ---------- intro / page head ---------- */
.intro{padding:52px 0 28px}
.kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--saffron-deep);font-weight:500}
.intro h1{font-size:clamp(2rem,5vw,3.05rem);margin:13px 0 16px;max-width:20ch}
.intro p.lead{font-size:1.16rem;color:var(--muted);max-width:64ch}

/* ---------- handbook layout ---------- */
.layout{display:grid;grid-template-columns:248px 1fr;gap:48px;padding:14px 0 70px;align-items:start}
.sidebar{position:sticky;top:24px}
.sidebar .label{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.sidebar ol{list-style:none;counter-reset:s}
.sidebar ol li{counter-increment:s}
.sidebar ol li a{display:flex;gap:10px;padding:7px 10px;border-radius:6px;color:var(--text);font-size:.94rem}
.sidebar ol li a::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.78rem;color:var(--saffron-deep)}
.sidebar ol li a:hover{background:var(--panel-2);text-decoration:none}

/* ---------- content ---------- */
.content h2{font-size:1.62rem;margin:38px 0 13px;padding-top:6px;scroll-margin-top:18px}
.content h2:first-child{margin-top:0}
.content h3{font-size:1.2rem;margin:26px 0 10px}
.content p{margin:0 0 16px;max-width:68ch}
.content ul,.content ol{margin:0 0 18px 1.2em;max-width:66ch}
.content li{margin:5px 0}
.content figure{margin:24px 0}
.content figure img{border:1px solid var(--line);border-radius:8px}
.content figcaption{font-size:.86rem;color:var(--muted);margin-top:8px}

.ext{font-family:var(--mono);font-size:.82em;background:var(--ink);color:#e9f0ee;padding:2px 8px;border-radius:4px;font-weight:500;white-space:nowrap}
.ext.s{background:var(--saffron);color:var(--ink)}

table.ref{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:.95rem}
table.ref th,table.ref td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.ref thead th{font-family:var(--disp);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-600);border-bottom:2px solid var(--teal-300)}
table.ref tbody tr:hover{background:var(--panel)}

.topics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:6px 0 12px}
.topics a{background:var(--paper);padding:18px 20px;display:block}
.topics a:hover{background:var(--panel);text-decoration:none}
.topics a strong{font-family:var(--disp);font-size:1.04rem;color:var(--ink);display:block;margin-bottom:4px}
.topics a span{color:var(--muted);font-size:.92rem}
.topics a .topic-thumb{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;margin-bottom:12px;display:block;background:var(--panel-2)}

/* ---------- client-side tool widgets ---------- */
.kt{margin:22px 0 8px}
.kt-drop{border:2px dashed var(--teal-300);border-radius:10px;background:var(--panel);padding:34px 20px;text-align:center;cursor:pointer;transition:background .15s,border-color .15s;display:flex;flex-direction:column;gap:5px;align-items:center}
.kt-drop:hover,.kt-drop:focus{background:var(--panel-2);border-color:var(--teal-600);outline:none}
.kt-drop.kt-over{background:#fbf3d6;border-color:var(--saffron-deep)}
.kt-drop strong{font-family:var(--disp);font-size:1.12rem;color:var(--ink)}
.kt-drop span{color:var(--muted);font-size:.92rem}
.kt-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.kt-lvl{font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.kt-lvl select{font-family:var(--sans);font-size:.92rem;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text)}
.kt button{font-family:var(--disp);font-weight:500;font-size:.96rem;cursor:pointer;border:0;border-radius:7px;padding:10px 20px;background:var(--teal);color:#fff}
.kt button:hover{background:var(--teal-600)}
.kt button:disabled{opacity:.55;cursor:default}
.kt .kt-rm{background:none;color:var(--muted);font-size:1.2rem;line-height:1;padding:2px 8px}
.kt .kt-rm:hover{background:none;color:var(--secondary,#b8441f);color:#b03a2e}
.kt .kt-one,.kt .kt-all{padding:6px 14px;font-size:.88rem}
.kt-table{width:100%;border-collapse:collapse;margin:16px 0 4px;font-size:.94rem}
.kt-table th,.kt-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.kt-table thead th{font-family:var(--disp);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-600)}
.kt-table tfoot td{font-weight:600;color:var(--ink);border-top:2px solid var(--teal-300);border-bottom:0}
.kt-table .kt-num{text-align:right;font-family:var(--mono);font-size:.86rem}
.kt-status{margin-top:14px;font-size:.93rem;color:var(--muted);min-height:1.2em}
.kt-status.kt-ok{color:var(--teal-600)}
.kt-status.kt-err{color:#b03a2e}
.kt-hash{font-family:var(--mono);font-size:.8rem;word-break:break-all;color:var(--ink)}
.kt-verify{margin-top:14px}
.kt-vlabel{display:block;font-size:.9rem;color:var(--muted);margin-bottom:6px}
.kt-expect{width:100%;font-family:var(--mono);font-size:.84rem;padding:9px 11px;border:1px solid var(--line);border-radius:6px;margin-top:5px}
.kt-match{display:inline-block;margin-top:9px;font-size:.92rem}
.kt-match.kt-ok{color:var(--teal-600);font-weight:500}
.kt-match.kt-err{color:#b03a2e;font-weight:500}

/* format recommender */
.kt-rec .kt-q{margin:0 0 16px}
.kt-rec .kt-qt{font-family:var(--disp);font-weight:500;color:var(--ink);margin:0 0 9px;font-size:1.02rem}
.kt-rec .kt-opts{display:flex;flex-wrap:wrap;gap:8px}
.kt-rec .kt-opts button{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 15px;font-family:var(--sans);font-weight:400;font-size:.93rem}
.kt-rec .kt-opts button:hover{border-color:var(--teal-300);background:var(--panel-2)}
.kt-rec .kt-opts button[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.kt-rec-card{border:1px solid var(--teal-300);border-top:3px solid var(--saffron);border-radius:10px;background:var(--panel);padding:20px 22px;margin-top:6px}
.kt-rec-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.kt-rec-card .ext{font-size:1.1rem;padding:4px 12px}
.kt-rec-card p{margin:12px 0 14px;max-width:60ch}
.kt-rec-cta{font-family:var(--disp);font-weight:500}

/* ---------- byline (guide + tool pages) ---------- */
.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;font-size:.92rem;color:var(--muted)}
.byline-photo{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--panel-2)}
.byline-text{color:var(--text)}
.byline-text a{font-weight:500;color:var(--teal-600)}
.byline-date{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);padding-left:10px;margin-left:2px;border-left:1px solid var(--line)}
@media(max-width:560px){.byline-date{border-left:0;padding-left:0;width:100%}}

/* ---------- author card ---------- */
.author-card{display:flex;gap:18px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin:14px 0 8px}
.author-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--panel-2)}
.author-body{margin:0}
.author-name{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:1.08rem;margin:2px 0 0}
.author-role{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron-deep);margin:3px 0 8px}
.author-bio{margin:0;color:var(--text);font-size:.96rem}
@media(max-width:560px){.author-card{flex-direction:column;gap:12px}}

.infographic{margin:26px 0}
.infographic svg{width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
.infographic figcaption{font-size:.86rem;color:var(--muted);margin-top:8px}

/* signature callout: mono tab on top edge */
.note{position:relative;border:1px solid var(--teal-300);border-top-width:2px;background:var(--panel);padding:23px 22px 16px;margin:24px 0}
.note::before{content:attr(data-tag);position:absolute;top:-11px;left:18px;background:var(--saffron);color:var(--ink);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:3px 10px;border-radius:3px}
.note p:last-child{margin-bottom:0}
address.imprint{font-style:normal;line-height:1.95;border:1px solid var(--line);background:var(--panel);padding:16px 20px;margin:18px 0;max-width:46ch}
p.contact-line{font-size:1.06rem}
.faq-lead{color:var(--muted);max-width:68ch}

.faq details{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--disp);font-weight:500;font-size:1.04rem;color:var(--ink);padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--saffron-deep);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq details p{padding:0 0 18px;color:var(--text);max-width:68ch}

.thumb{width:100%;border:1px solid var(--line);border-radius:10px;margin:0 0 26px;display:block}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#b9c8c4;font-size:.92rem;padding:40px 0 28px;margin-top:10px}
footer.site .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:22px}
footer.site a{color:#cfe0dc}
footer.site a:hover{color:#fff}
footer.site .fbrand{font-family:var(--disp);color:#fff;font-size:1.1rem}
footer.site small{color:#7e918c}

@media(max-width:860px){
  .layout{grid-template-columns:1fr;gap:0}
  .sidebar{position:static;margin-bottom:28px}
  .topics{grid-template-columns:1fr}
  .topbar .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-direction:column;align-items:flex-start}
  nav.main{gap:16px}
}