/*
Theme Name: Relinka
Theme URI: https://relinka.krafts-ai.com/
Author: Krafts Studio
Author URI: https://krafts-ai.com/
Description: Brand theme for the Relinka owned-media site — editorial, terracotta, fast. Marketing pages render via the Canvas template; guides use this theme's article layout.
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: relinka-theme
*/

:root{
  --ink:#1c1917; --muted:#57534e; --faint:#6e6862; --line:#e7e5e4; --line-strong:#d6d3d1;
  --bg:#faf9f7; --surface:#ffffff; --accent:#9a3412; --accent-soft:#fdf4ee; --ok:#3f7d54;
  --radius:12px; --radius-lg:18px; --maxw:1100px; --readw:720px;
  --shadow:0 4px 14px rgba(28,25,23,.08); --shadow-lg:0 20px 50px rgba(40,30,20,.14),0 4px 12px rgba(40,30,20,.06);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.read{max-width:var(--readw);margin:0 auto;padding:0 24px}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--radius);font-weight:600;transition:transform .12s ease,box-shadow .16s ease,filter .16s ease,background .16s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 24px rgba(40,30,20,.18);filter:brightness(1.15)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow)}
.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent);filter:none}
.btn.sm{padding:8px 14px;font-size:13.5px;border-radius:9px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,249,247,.85);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:800;letter-spacing:-.02em;font-size:20px;color:var(--ink)}
.brand b{color:var(--accent)}
.nav-links{display:flex;gap:22px;align-items:center;font-size:14.5px}
.nav-links a{color:var(--muted);transition:color .12s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a.btn{color:#fff}
.nav-links a.btn:hover{color:#fff}
.gcard .more{transition:transform .12s ease}
.gcard:hover .more{transform:translateX(3px)}
.article-body a{transition:color .12s ease}
.article-body a:hover{color:#7a2a0e}
.exlink{color:var(--accent);border-bottom:1px solid rgba(154,52,18,.45)}
.crumbs{font-size:13px;color:var(--faint);margin-bottom:10px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 2px}
footer.site a{transition:color .12s ease}
footer.site a:hover{color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;margin:-6px 0;color:var(--ink);border-radius:8px;position:relative;z-index:70}
.nav-toggle:hover{background:var(--accent-soft)}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-toggle .ico-x{display:none}
.nav-toggle[aria-expanded="true"] .ico-bars{display:none}
.nav-toggle[aria-expanded="true"] .ico-x{display:block}
body.nav-open{overflow:hidden}
@media(max-width:720px){
  /* drop backdrop-filter so the fixed drawer escapes the nav's containing block */
  .nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav .wrap{flex-wrap:wrap;height:auto;min-height:60px}
  .nav-links{flex-wrap:wrap;gap:12px 16px}             /* no-JS fallback: links wrap, stay reachable */
  html.js .nav-toggle{display:inline-flex;align-items:center}
  /* JS: a modern slide-in drawer that overlays content (doesn't push it) */
  html.js .nav-links{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:2px;padding:88px 28px 36px;transform:translateX(100%);visibility:hidden;transition:transform .28s ease,visibility .28s ease}
  html.js .nav-links.open{transform:none;visibility:visible}
  html.js .nav-links a{font-size:21px;padding:15px 4px;border-bottom:1px solid var(--line);width:100%;color:var(--ink)}
  html.js .nav-links a:last-child{border-bottom:0}
  html.js .nav-links a.btn{margin-top:20px;text-align:center;font-size:17px;border-bottom:0;background:var(--ink);color:#fff}
}

/* Article */
article{padding:48px 0 8px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(30px,4.6vw,44px);line-height:1.12;letter-spacing:-.02em;margin:.2em 0 .35em}
h2{font-size:clamp(22px,3vw,29px);line-height:1.2;letter-spacing:-.01em;margin:1.8em 0 .5em}
h3{font-size:19px;margin:1.4em 0 .3em}
p,li{font-size:17.5px;color:#2c2825}
.lede{font-size:20px;color:var(--muted);margin:.2em 0 1.2em}
.meta{color:var(--faint);font-size:14px;margin-bottom:8px}
ul,ol{padding-left:1.25em}
li{margin:.35em 0}
strong{color:var(--ink)}
blockquote{margin:1.4em 0;padding:14px 20px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;color:#3a3531}
blockquote p{margin:.3em 0;font-size:16.5px}
.callout{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 22px;margin:1.6em 0;box-shadow:var(--shadow)}
.callout .lbl{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:6px}
.callout p{font-size:16px;margin:.3em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 20px;margin:1.4em 0;font-size:15.5px}
.toc strong{display:block;margin-bottom:6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.toc ol{margin:0;padding-left:1.2em}
.toc a{color:var(--ink)}
.endcta{background:linear-gradient(180deg,var(--accent-soft),var(--bg));border:1px solid #efe7df;border-radius:var(--radius-lg);padding:24px 26px;margin:2em 0}
.endcta h3{margin-top:0}
.endcta p{font-size:16.5px;color:#4a443e}
.endcta .disclosure{font-size:13.5px;color:var(--faint);margin-top:12px}

/* Guides listing */
.page-head{padding:56px 0 8px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--accent-soft),var(--bg))}
.page-head .sub{font-size:18px;color:var(--muted);max-width:60ch;margin-top:.3em}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:36px auto;max-width:var(--maxw);padding:0 24px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow);transition:transform .1s ease,box-shadow .14s ease}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.gcard h2{font-size:21px;margin:.1em 0 .4em;line-height:1.25}
.gcard h2 a{color:var(--ink)}
.gcard p{font-size:15.5px;color:var(--muted);margin:0}
.gcard .more{display:inline-block;margin-top:14px;font-weight:600;font-size:14px}
.gcard .thumb{width:100%;height:auto;border-radius:11px;border:1px solid var(--line);margin-bottom:16px;display:block}
.featured{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);margin:10px 0 30px;display:block}

/* Footer */
footer.site{padding:44px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;margin-top:40px}
footer.site .brand{font-size:15px}
footer.site p{margin:.3em 0}