/* ------------------------------------------------------------------
   Yojak — classic-page brand system
   paper #faf7ef · ink #0c1a3f · navy #16305f · mint #0fe3c2
   mint-deep #0aa794 · mint-wash #d9f7ee · amber #ffc24a · slate #47567e
------------------------------------------------------------------- */

/* CS Brandis — local display face (demo license: personal use only;
   buy the full license before production). Letters only — punctuation
   and digits fall back to Space Grotesk. */
@font-face {
  font-family:'CS Brandis';
  src:url('fonts/CSBrandis-Regular_demo.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

:root {
  --paper:#faf7ef; --ink:#0c1a3f; --navy:#16305f; --mint:#0fe3c2;
  --mint-deep:#0aa794; --mint-wash:#d9f7ee; --amber:#ffc24a; --slate:#47567e;
  --grotesk:'Space Grotesk',sans-serif; --inter:'Inter',sans-serif;
  --serif:'CS Brandis','Space Grotesk',sans-serif; --mono:'JetBrains Mono',monospace;
}

body.yojak-page {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--inter); font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body.yojak-page::before { /* diagonal hairlines, same as React side */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(-45deg, rgba(22,48,95,.045) 0 1px, transparent 1px 28px);
}

/* ---------------- header ---------------- */
.yj-site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,239,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(22,48,95,.08);
}
.yj-header-inner {
  max-width:72rem; margin:0 auto; padding:.9rem 1.5rem;
  display:flex; align-items:center; gap:2rem;
}
.yj-brand img { height:2.5rem; width:auto; display:block; }
.yj-primary { margin-left:auto; }
.yj-nav { list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; }
.yj-nav a {
  font-family:var(--mono); font-size:.82rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy); text-decoration:none;
  padding-bottom:2px;
  background:linear-gradient(var(--mint-deep),var(--mint-deep)) left bottom / 0% 1px no-repeat;
  transition:background-size .35s cubic-bezier(.075,.82,.165,1);
}
.yj-nav a:hover { background-size:100% 1px; }
.yj-cart { display:flex; align-items:center; gap:.45rem; text-decoration:none;
  font-family:var(--mono); font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); }
.yj-cart-count { background:var(--mint); color:var(--navy); border-radius:999px;
  min-width:1.35rem; height:1.35rem; display:inline-flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:600; }

/* ---------------- article ---------------- */
.yj-main { position:relative; z-index:1; max-width:46rem; margin:0 auto; padding:4rem 1.5rem 6rem; }
.yj-kicker { font-family:var(--mono); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mint-deep); margin:0 0 1rem; }
.yj-kicker a { color:var(--mint-deep); text-decoration:none; }
.yj-title { font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.12; color:var(--navy); margin:0 0 1rem; }
.yj-meta { font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); display:flex; gap:.8rem; margin:0 0 1.4rem; }
.yj-summary { font-size:1.15rem; color:var(--slate); border-left:3px solid var(--mint);
  padding-left:1.1rem; margin:0 0 2rem; }
.yj-featured img { width:100%; height:auto; border-radius:1rem; margin:0 0 2rem; }

.yj-content { font-size:1.02rem; }
.yj-content h2, .yj-content h3 { font-family:var(--grotesk); font-weight:600;
  color:var(--navy); line-height:1.25; margin:2.4em 0 .8em; }
.yj-content h2 { font-size:1.6rem; } .yj-content h3 { font-size:1.25rem; }
.yj-content a { color:var(--mint-deep); text-decoration:none;
  background:linear-gradient(var(--mint-deep),var(--mint-deep)) left bottom / 100% 1px no-repeat; }
.yj-content a:hover { color:var(--navy); }
.yj-content blockquote { margin:2rem 0; padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--amber); font-family:var(--serif);
  font-size:1.3rem; color:var(--navy); }
.yj-content img { max-width:100%; height:auto; border-radius:.75rem; }
.yj-content code { font-family:var(--mono); font-size:.85em; background:var(--mint-wash);
  padding:.15em .4em; border-radius:.3rem; }
.yj-content pre { background:var(--navy); color:var(--paper); padding:1.2rem 1.4rem;
  border-radius:.75rem; overflow-x:auto; }
.yj-content pre code { background:none; color:inherit; padding:0; }
.yj-content ul, .yj-content ol { padding-left:1.4rem; }
.yj-content li::marker { color:var(--mint-deep); }

.yj-references { margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(22,48,95,.12); }
.yj-references h2 { font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mint-deep); margin:0 0 1rem; }
.yj-references-body { font-size:.9rem; color:var(--slate); }
.yj-btn, .yj-download a {
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem;
  background:var(--navy); color:var(--paper); text-decoration:none;
  font-family:var(--grotesk); font-weight:500; font-size:.95rem;
  padding:.85rem 1.8rem; border-radius:999px; transition:background .3s;
}
.yj-btn:hover { background:var(--mint-deep); color:var(--navy); }

/* ---------------- post list (index) ---------------- */
.yj-post-list { display:flex; flex-direction:column; }
.yj-post-row { display:flex; align-items:baseline; gap:1.2rem; padding:1.3rem 0;
  border-bottom:1px solid rgba(22,48,95,.1); text-decoration:none; color:var(--ink);
  transition:padding-left .3s cubic-bezier(.075,.82,.165,1); }
.yj-post-row:hover { padding-left:.6rem; }
.yj-post-date { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate); min-width:7rem; }
.yj-post-title { font-family:var(--grotesk); font-weight:500; font-size:1.15rem; color:var(--navy); }
.yj-post-arrow { margin-left:auto; color:var(--mint-deep); }
.yj-pagination { margin-top:2.5rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; }
.yj-pagination a { color:var(--mint-deep); text-decoration:none; }

/* ---------------- footer ---------------- */
.yj-site-footer { background:var(--ink); color:var(--paper); margin-top:4rem; }
.yj-footer-inner { max-width:72rem; margin:0 auto; padding:3.5rem 1.5rem;
  display:flex; flex-direction:column; gap:1.8rem; }
.yj-footer-brand { display:flex; align-items:center; gap:.8rem; text-decoration:none;
  color:var(--paper); font-family:var(--grotesk); font-weight:600; letter-spacing:.06em; }
.yj-footer-brand img { height:2.4rem; width:auto; }
.yj-footer-nav, .yj-site-footer .yj-nav { list-style:none; display:flex; flex-wrap:wrap;
  gap:1.4rem; margin:0; padding:0; }
.yj-site-footer .yj-nav a { color:rgba(250,247,239,.75); }
.yj-site-footer .yj-nav a:hover { color:var(--mint); }
.yj-footer-note { font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(250,247,239,.45); margin:0; }

/* ---------------- WooCommerce ---------------- */
.woocommerce .products .product { background:#fff; border-radius:1rem; padding:1.2rem;
  border:1px solid rgba(22,48,95,.06); transition:transform .35s cubic-bezier(.075,.82,.165,1), box-shadow .35s; }
.woocommerce .products .product:hover { transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(12,26,63,.25); }
.woocommerce .products .product img { border-radius:.6rem; }
.woocommerce .woocommerce-loop-product__title { font-family:var(--grotesk)!important;
  font-weight:600!important; color:var(--navy)!important; }
.woocommerce .price { color:var(--mint-deep)!important; font-family:var(--grotesk); font-weight:600; }
.woocommerce span.onsale { background:var(--amber)!important; color:var(--navy)!important;
  font-family:var(--mono); letter-spacing:.08em; }
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce #respond input#submit, .woocommerce input.button {
  background:var(--navy)!important; color:var(--paper)!important; border-radius:999px!important;
  font-family:var(--grotesk)!important; font-weight:500!important; padding:.8rem 1.6rem!important;
  transition:background .3s!important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover,
.woocommerce #respond input#submit:hover, .woocommerce input.button:hover {
  background:var(--mint-deep)!important; color:var(--navy)!important;
}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info {
  border-top-color:var(--mint-deep); background:var(--mint-wash); color:var(--navy); }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color:var(--mint-deep); }
.woocommerce div.product .summary .product_title { font-family:var(--serif); font-weight:400; }

@media (max-width:640px) {
  .yj-header-inner { gap:1rem; }
  .yj-nav { gap:1rem; }
  .yj-nav a { font-size:.72rem; }
  .yj-main { padding:2.5rem 1.2rem 4rem; }
  .yj-post-date { min-width:5.2rem; }
}