:root{
    color-scheme:light;
    --paper:#F7F7F4;
    --card:#FFFFFF;
    --ink:#1B1B1A;
    --muted:#77776F;
    --faint:#A2A29A;
    --line:#E6E5DF;
    --line-soft:#EFEEE9;
    --accent:#4C46E0;        /* selection indigo */
    --accent-deep:#332CC4;
    --accent-wash:#ECEBFC;
    --accent-line:#D5D3F6;
    --gold:#B8892B;          /* specimen highlight, used sparingly */
    --shadow:0 1px 2px rgba(27,27,26,.05),0 10px 34px rgba(27,27,26,.06);
    --dock-bg:#1B1B1A;       /* detail dock surface */
    --dock-fg:#FFFFFF;
  }
  html[data-theme="dark"]{
    color-scheme:dark;
    --paper:#141416;
    --card:#1E1E22;
    --ink:#ECECE6;
    --muted:#9A9A93;
    --faint:#6C6C68;
    --line:#2E2E34;
    --line-soft:#26262B;
    --accent:#8B86FF;
    --accent-deep:#B4B0FF;
    --accent-wash:#262341;
    --accent-line:#3B3766;
    --gold:#D6A94A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 38px rgba(0,0,0,.45);
    --dock-bg:#2A2A31;
    --dock-fg:#FFFFFF;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Inter",system-ui,sans-serif;line-height:1.55;
    -webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease;
  }
  .wrap{max-width:1000px;margin:0 auto;padding:0 20px}

  /* ---------- header ---------- */
  header.site{padding:26px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .brand{display:flex;align-items:center;gap:11px}
  .theme-toggle{
    flex:0 0 auto;width:42px;height:42px;border-radius:11px;
    background:var(--card);border:1px solid var(--line);cursor:pointer;
    display:grid;place-items:center;color:var(--muted);transition:.15s;
  }
  .theme-toggle:hover{border-color:var(--accent-line);color:var(--ink)}
  .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .theme-toggle .moon{display:block}
  .theme-toggle .sun{display:none}
  html[data-theme="dark"] .theme-toggle .moon{display:none}
  html[data-theme="dark"] .theme-toggle .sun{display:block}
  .mark{
    width:38px;height:38px;border-radius:10px;background:var(--ink);color:var(--paper);
    display:grid;place-items:center;font-family:"Fraunces",serif;font-size:22px;font-weight:600;
  }
  .brand .name{font-family:"Fraunces",serif;font-size:22px;font-weight:600;letter-spacing:-.01em}
  .brand .tag{font-size:12.5px;color:var(--muted);margin-left:2px}

  /* ---------- hero ---------- */
  .hero{
    display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;
    padding:30px 0 20px;
  }
  .hero h1{
    font-family:"Fraunces",serif;font-weight:500;font-size:clamp(30px,5.2vw,50px);
    line-height:1.02;letter-spacing:-.02em;margin:0 0 14px;
  }
  .hero h1 em{font-style:italic;color:var(--accent-deep)}
  .hero p{color:var(--muted);font-size:16px;max-width:46ch;margin:0}
  .specimen{
    background:var(--card);border:1px solid var(--line);border-radius:18px;
    box-shadow:var(--shadow);padding:18px;position:relative;overflow:hidden;
    aspect-ratio:1/.82;display:grid;grid-template-rows:auto 1fr auto;
  }
  .specimen .meta-top{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
  .specimen .big{display:grid;place-items:center;font-family:"Fraunces",serif;font-size:clamp(80px,17vw,150px);line-height:1;color:var(--ink);user-select:all;cursor:pointer}
  .specimen .meta-bot{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
  .specimen .cyc{font-size:11px;color:var(--accent-deep);cursor:pointer;background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:7px;padding:3px 9px;font-family:"Inter";font-weight:500}

  /* ---------- tabs ---------- */
  .tabs{display:flex;gap:4px;margin:26px 0 0;border-bottom:1px solid var(--line)}
  .tab{
    font-family:"Inter";font-size:15px;font-weight:500;color:var(--muted);
    background:none;border:none;padding:12px 16px;cursor:pointer;position:relative;
  }
  .tab[aria-selected="true"]{color:var(--ink)}
  .tab[aria-selected="true"]::after{
    content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px 2px 0 0;
  }
  .tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

  /* ---------- search & categories ---------- */
  .panel{padding-top:22px}
  .searchbar{position:relative;margin-bottom:16px}
  #search{
    width:100%;font-family:"Inter";font-size:16px;color:var(--ink);
    padding:14px 16px 14px 44px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);
    transition:border-color .15s,box-shadow .15s;
  }
  #search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
  .searchbar svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--faint)}
  .cats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
  .cat{
    font-family:"Inter";font-size:13px;font-weight:500;color:var(--muted);
    background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;
    transition:.12s;
  }
  .cat:hover{border-color:var(--accent-line);color:var(--ink)}
  .cat.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

  /* ---------- symbol grid ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
  .cell{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    aspect-ratio:1;display:grid;grid-template-rows:1fr auto;place-items:center;
    cursor:pointer;transition:transform .08s,border-color .12s,box-shadow .12s;padding:6px 4px 7px;
    position:relative;
  }
  .cell:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(76,70,224,.12);transform:translateY(-1px)}
  .cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .cell.active{border-color:var(--accent);background:var(--accent-wash)}
  .cell .glyph{font-size:27px;line-height:1;color:var(--ink);align-self:end}
  .cell .nm{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--faint);text-align:center;
    line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;align-self:start;margin-top:4px}
  .empty{padding:40px 0;text-align:center;color:var(--muted);font-size:15px}
  .loadmore{
    display:block;margin:18px auto 0;font-family:"Inter";font-size:14px;font-weight:500;color:var(--ink);
    background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:11px 22px;cursor:pointer;transition:.12s;
  }
  .loadmore:hover{border-color:var(--accent);color:var(--accent-deep)}
  .loadmore:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* ---------- detail dock (the differentiator) ---------- */
  .dock{
    position:sticky;bottom:14px;margin:16px 0 0;z-index:10;
    background:var(--dock-bg);color:var(--dock-fg);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.28);
    padding:16px 18px;display:none;grid-template-columns:auto 1fr;gap:18px;align-items:center;
  }
  .dock.show{display:grid;animation:dockup .28s cubic-bezier(.2,.7,.3,1)}
  @keyframes dockup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.dock.show{animation:none}}
  .dock .dg{font-family:"Fraunces",serif;font-size:46px;line-height:1;width:70px;text-align:center;user-select:all}
  .dock .dname{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#B9B9F0;letter-spacing:.06em;text-transform:uppercase;margin-bottom:9px}
  .codes{display:flex;flex-wrap:wrap;gap:7px}
  .code{
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:9px;
    padding:6px 10px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;gap:2px;min-width:0;
  }
  .code:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)}
  .code .lab{font-family:"IBM Plex Mono",monospace;font-size:9px;color:#9A9AD6;letter-spacing:.05em;text-transform:uppercase}
  .code .val{font-family:"IBM Plex Mono",monospace;font-size:13px;color:#fff;white-space:nowrap}
  .code.copied{background:var(--accent);border-color:var(--accent)}
  .dock .close{position:absolute;top:10px;right:12px;color:#8a8ac8;background:none;border:none;font-size:18px;cursor:pointer;line-height:1}
  .dock-inner{position:relative;min-width:0}

  /* ---------- text converters (sub/superscript) ---------- */
  #ssInput{
    width:100%;font-family:"IBM Plex Mono",monospace;font-size:16px;color:var(--ink);
    padding:15px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);resize:vertical;min-height:56px;
  }
  #ssInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
  .sshint{font-size:13px;color:var(--muted);margin:10px 2px 0;line-height:1.5}
  .sshint code{font-family:"IBM Plex Mono",monospace;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12px;color:var(--accent-deep)}
  #acInput{
    width:100%;font-family:"Inter";font-size:16px;color:var(--ink);
    padding:14px 16px 14px 44px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);
    transition:border-color .15s,box-shadow .15s;
  }
  #acInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
  #acResults{margin-top:16px}
  .altrow{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-bottom:8px}
  .altglyph{font-size:29px;line-height:1;width:54px;height:54px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--ink);flex:0 0 auto}
  .altglyph:hover{border-color:var(--accent)}
  .altinfo{min-width:0}
  .altname{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);margin-bottom:9px}
  .altcodes{display:flex;flex-wrap:wrap;gap:7px}
  .acchip{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:5px 10px;cursor:pointer;display:flex;flex-direction:column;gap:1px;transition:.12s}
  .acchip:hover{border-color:var(--accent)}
  .acchip .aclab{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}
  .acchip .acval{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink);white-space:nowrap}
  .acchip.acopied{background:var(--accent);border-color:var(--accent)}
  .acchip.acopied .aclab,.acchip.acopied .acval{color:#fff}
  .accgroup{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:18px 2px 9px;display:flex;align-items:center;gap:9px}
  .accgroup::before{content:"";width:16px;height:1px;background:var(--line)}
  .accgroup:first-child{margin-top:4px}
  .acccell{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 6px 7px;cursor:pointer;text-align:center;transition:transform .08s,border-color .12s,box-shadow .12s}
  .acccell:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(76,70,224,.12);transform:translateY(-1px)}
  .acccell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .acccell.active{border-color:var(--accent);background:var(--accent-wash)}
  .acccell .g{font-size:26px;line-height:1.1;color:var(--ink)}
  .acccell .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--faint);margin-top:3px}
  .accrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px}
  .styles{margin-top:16px;display:flex;flex-direction:column;gap:8px}
  .style{
    background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 15px;
    display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;cursor:pointer;transition:.12s;
  }
  .style:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(76,70,224,.1)}
  .style .slabel{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
  .style .sout{font-size:18px;color:var(--ink);word-break:break-word;line-height:1.35}
  .style .scopy{font-family:"Inter";font-size:12px;font-weight:500;color:var(--accent-deep);background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:8px;padding:6px 11px;white-space:nowrap}
  .style.copied .scopy{background:var(--accent);border-color:var(--accent);color:#fff}
  .style.copied .scopy::after{content:" ✓"}

  /* ---------- content / SEO sections ---------- */
  .content{max-width:720px;margin:70px auto 0}
  .content h2{font-family:"Fraunces",serif;font-weight:500;font-size:27px;letter-spacing:-.01em;margin:0 0 14px}
  .content h3{font-family:"Inter";font-weight:600;font-size:16px;margin:26px 0 6px}
  .content p{color:#3d3d39;font-size:15.5px;margin:0 0 14px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 8px}
  .step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
  .step .n{font-family:"Fraunces",serif;font-size:26px;color:var(--accent);line-height:1;margin-bottom:8px}
  .step h4{font-family:"Inter";font-weight:600;font-size:14.5px;margin:0 0 4px}
  .step p{font-size:13.5px;color:var(--muted);margin:0}
  details{border-bottom:1px solid var(--line);padding:14px 0}
  details summary{font-weight:500;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+";color:var(--accent);font-size:20px;font-weight:400}
  details[open] summary::after{content:"–"}
  details p{margin:10px 0 2px;font-size:14.5px;color:#3d3d39}

  footer{max-width:720px;margin:50px auto 60px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
  footer code{font-family:"IBM Plex Mono",monospace;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12px}

  .toast{
    position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:var(--accent);color:#fff;font-size:13.5px;font-weight:500;padding:11px 20px;border-radius:11px;
    box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.24s;z-index:40;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  @media (max-width:640px){
    .hero{grid-template-columns:1fr}
    .specimen{max-width:280px;margin:0 auto}
    .steps{grid-template-columns:1fr}
    .style{grid-template-columns:1fr auto;gap:8px}
    .style .slabel{grid-column:1/-1}
    .dock .dg{font-size:38px;width:56px}
  }

  /* ===== Copybook expansion pack ===== */
  .cbx-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
  .cbx-btn,.cbx-chip{font-family:"Inter";font-size:13px;font-weight:500;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer}
  .cbx-btn:hover,.cbx-chip:hover{border-color:var(--accent);color:var(--ink)}
  .cbx-btn.active{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-deep)}
  .cbx-section{margin:0 0 22px}
  .cbx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
  .cbx-head h3{font-family:"Fraunces",serif;font-size:20px;font-weight:500;margin:0}
  .cbx-mini{font-size:12px;color:var(--muted)}
  .cbx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
  .cbx-symbol{background:var(--card);border:1px solid var(--line);border-radius:11px;min-height:70px;display:grid;place-items:center;font-size:27px;cursor:pointer;position:relative}
  .cbx-symbol:hover{border-color:var(--accent);transform:translateY(-1px)}
  .cbx-symbol .fav{position:absolute;right:5px;top:3px;font-size:13px;color:var(--faint)}
  .cbx-symbol .fav.on{color:var(--gold)}
  .cbx-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}
  .cbx-input,.cbx-textarea{width:100%;font-family:"Inter";font-size:16px;color:var(--ink);padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;background:var(--card)}
  .cbx-textarea{min-height:110px;resize:vertical}
  .cbx-input:focus,.cbx-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
  .cbx-results{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .cbx-result{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;cursor:pointer}
  .cbx-result:hover{border-color:var(--accent)}
  .cbx-label{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);text-transform:uppercase}
  .cbx-output{font-size:18px;word-break:break-word}
  .cbx-copy{font-size:12px;color:var(--accent-deep);background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:8px;padding:6px 10px}
  .cbx-charrow{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:7px 0}
  .cbx-char{font-size:30px;text-align:center;background:var(--paper);border-radius:9px;padding:8px}
  .cbx-meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);word-break:break-word}
  .cbx-kbd{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;border:1px solid var(--line);background:var(--card);border-bottom-width:2px;border-radius:6px;padding:2px 6px;color:var(--ink)}
  .cbx-route{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent-deep)}
  .cbx-hidden{display:none!important}
  .cbx-collection-title{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:18px 0 8px}
  @media(max-width:640px){.cbx-result{grid-template-columns:1fr auto}.cbx-label{grid-column:1/-1}}



/* ===== Symbolia footer ===== */
.symbolia-footer{margin-top:72px;border-top:1px solid var(--line);background:var(--card);padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}
.footer-brand .brand{margin-bottom:14px}.footer-brand p{max-width:30ch;color:var(--muted);font-size:14px}
.footer-col h3{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.footer-links{list-style:none;margin:0;padding:0}.footer-links li{margin:0 0 9px}
.footer-links a,.footer-bottom a{color:var(--muted);text-decoration:none;font-size:13.5px}.footer-links a:hover,.footer-bottom a:hover{color:var(--accent-deep)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.footer-bottom div{display:flex;gap:18px}

/* ===== Symbolia blog ===== */
.symbolia-blog{padding-top:46px;padding-bottom:24px}
.blog-hero{max-width:720px;margin:0 auto 34px;text-align:center}
.blog-kicker{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 10px}
.blog-hero h1,.article-header h1{font-family:"Fraunces",serif;font-weight:500;letter-spacing:-.02em;line-height:1.05}
.blog-hero h1{font-size:clamp(34px,6vw,56px);margin:0 0 14px}.blog-hero>p:last-child,.category-description{color:var(--muted);font-size:16px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.blog-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.15s}
.blog-card:hover{transform:translateY(-2px);border-color:var(--accent-line);box-shadow:var(--shadow)}
.blog-card-media{aspect-ratio:16/9;background:var(--accent-wash);display:grid;place-items:center;text-decoration:none;overflow:hidden}
.blog-card-media img{width:100%;height:100%;object-fit:cover}.blog-card-media span{font-family:"Fraunces",serif;font-size:58px;color:var(--accent-deep)}
.blog-card-body{padding:17px}.blog-meta{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.blog-meta a{color:inherit;text-decoration:none}.blog-card h2{font-family:"Fraunces",serif;font-weight:500;font-size:22px;line-height:1.15;margin:9px 0}
.blog-card h2 a{color:var(--ink);text-decoration:none}.blog-card p{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.blog-read{font-size:13px;font-weight:600;color:var(--accent-deep);text-decoration:none}.blog-pagination{margin:30px 0;text-align:center}
.article-shell{max-width:760px;margin:56px auto}.article-header{text-align:center;margin-bottom:28px}.article-header h1{font-size:clamp(36px,6vw,62px);margin:12px 0 16px}
.article-deck{font-size:18px;color:var(--muted);margin:0 auto;max-width:620px}.article-featured{margin:28px 0;border-radius:18px;overflow:hidden}
.article-featured img{display:block;width:100%;height:auto}.article-content{font-size:17px;line-height:1.75}
.article-content h2{font-family:"Fraunces",serif;font-size:31px;font-weight:500;margin:42px 0 12px}.article-content h3{font-size:20px;margin:30px 0 8px}
.article-content p,.article-content ul,.article-content ol{margin:0 0 20px}.article-content a{color:var(--accent-deep)}
.article-content code{font-family:"IBM Plex Mono",monospace;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.article-footer{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}.article-tags{font-size:12px;color:var(--muted)}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid,.blog-grid{grid-template-columns:1fr}.footer-bottom,.article-footer{align-items:flex-start;flex-direction:column}.symbolia-footer{padding-top:36px}}

/* ===== Top navigation + SEO tool pages ===== */
.site-header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(12px)}
.topnav{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.topnav-brand{display:flex;align-items:center;gap:10px;font-family:"Fraunces",serif;font-size:23px;font-weight:600;color:var(--ink);text-decoration:none}.topnav-brand .mark{width:34px;height:34px;border-radius:9px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:15px}
.primary-menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}.primary-menu>li{position:relative}.primary-menu a,.nav-drop-toggle{display:block;border:0;background:transparent;color:var(--muted);font:500 13.5px "Inter",sans-serif;text-decoration:none;padding:9px 11px;border-radius:8px;cursor:pointer}.primary-menu a:hover,.nav-drop-toggle:hover{color:var(--ink);background:var(--card)}
.nav-dropdown{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:220px;list-style:none;margin:0;padding:7px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.menu-has-dropdown:hover .nav-dropdown,.menu-has-dropdown:focus-within .nav-dropdown{display:block}.nav-dropdown a{padding:10px 11px}
.nav-toggle{display:none;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;padding:8px 11px}
.tool-page{padding-top:52px}.tool-page-hero{text-align:center;max-width:760px;margin:0 auto 30px}.tool-page-hero h1{font:500 clamp(38px,6vw,62px)/1.05 "Fraunces",serif;margin:8px 0 14px}.tool-page-hero>p:last-child{font-size:16px;color:var(--muted)}
.standalone-tool{max-width:820px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.tool-actions{margin:14px 0}.tool-copy{margin-top:12px}.tool-seo-copy{max-width:760px;margin:48px auto}.tool-seo-copy h2{font:500 30px "Fraunces",serif;margin:34px 0 10px}.tool-seo-copy p{font-size:16px;line-height:1.75;color:var(--muted)}
@media(max-width:700px){.nav-toggle{display:block}.primary-nav{display:none;position:absolute;left:16px;right:16px;top:58px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow)}.primary-nav.open{display:block}.primary-menu{display:block}.nav-dropdown{display:block;position:static;box-shadow:none;border:0;background:transparent;padding-left:12px}.topnav{position:relative}}


/* ===== Symbolia Journal v1.2 ===== */
.symbolia-blog-page{overflow:hidden}
.blog-mast{padding:72px 0 62px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 78% 25%,var(--accent-wash),transparent 28%)}
.blog-mast .wrap{max-width:980px}
.blog-mast h1{font:500 clamp(44px,7vw,78px)/.98 "Fraunces",serif;letter-spacing:-.045em;margin:12px 0 22px;max-width:850px}
.blog-intro{max-width:610px;font-size:18px;line-height:1.65;color:var(--muted);margin:0 0 26px}
.blog-topic-links{display:flex;flex-wrap:wrap;gap:8px}
.blog-topic-links a,.blog-topic-links span{font:500 12px "Inter",sans-serif;color:var(--muted);text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 12px}
.blog-topic-links a:hover{color:var(--accent-deep);border-color:var(--accent-line)}
.featured-guide-wrap{padding-top:46px}
.featured-guide{display:grid;grid-template-columns:1.08fr .92fr;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.featured-guide-media{min-height:390px;background:var(--accent-wash);display:grid;place-items:center;overflow:hidden;text-decoration:none}
.featured-guide-media img{width:100%;height:100%;object-fit:cover}.featured-symbol{font:500 120px "Fraunces",serif;color:var(--accent-deep)}
.featured-guide-copy{padding:clamp(28px,5vw,58px);display:flex;flex-direction:column;justify-content:center}
.featured-guide-copy h2{font:500 clamp(32px,4vw,48px)/1.05 "Fraunces",serif;letter-spacing:-.025em;margin:13px 0 17px}
.featured-guide-copy h2 a{color:var(--ink);text-decoration:none}.featured-guide-copy>p:not(.blog-kicker){color:var(--muted);font-size:15px;line-height:1.7}
.blog-primary-link{display:inline-flex;align-items:center;gap:12px;width:max-content;color:var(--accent-deep);font-weight:600;font-size:14px;text-decoration:none;margin-top:12px}
.blog-primary-link span{transition:transform .15s}.blog-primary-link:hover span{transform:translateX(4px)}
.blog-latest{padding-top:68px;padding-bottom:32px}.blog-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.blog-section-head h2{font:500 clamp(32px,5vw,48px) "Fraunces",serif;letter-spacing:-.025em;margin:6px 0 0}
.blog-section-head>span{font:400 11px "IBM Plex Mono",monospace;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.blog-grid-refined{gap:20px}.blog-card-refined{border-radius:18px}.blog-card-refined .blog-card-media{aspect-ratio:1.55}.blog-card-refined .blog-card-body{padding:20px}
.blog-card-refined h2{font-size:25px}.blog-card-refined p{line-height:1.65}
.blog-empty-state{text-align:center;background:var(--card);border:1px dashed var(--line);border-radius:18px;padding:62px 20px}
.blog-empty-state>span{font-size:36px;color:var(--accent-deep)}.blog-empty-state h2{font:500 32px "Fraunces",serif;margin:12px 0 8px}.blog-empty-state p{color:var(--muted)}
.blog-newsletter{margin-top:38px;margin-bottom:68px;padding:34px 38px;background:var(--ink);color:var(--paper);border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.blog-newsletter .blog-kicker{color:var(--accent)}.blog-newsletter h2{font:500 34px "Fraunces",serif;margin:7px 0}.blog-newsletter p{color:var(--faint);margin:0}
.blog-newsletter .blog-cta{color:var(--paper);border:1px solid color-mix(in srgb,var(--paper) 25%,transparent);border-radius:10px;padding:12px 16px;margin:0;white-space:nowrap}
@media(max-width:760px){.blog-mast{padding:52px 0 44px}.featured-guide{grid-template-columns:1fr}.featured-guide-media{min-height:260px}.blog-section-head{align-items:flex-start;flex-direction:column}.blog-newsletter{align-items:flex-start;flex-direction:column;padding:28px}.blog-grid-refined{grid-template-columns:1fr}}

/* ===== Symbolia single journal article v1.3 ===== */
.symbolia-single{padding-top:54px}.single-guide-header{max-width:960px}
.single-breadcrumb{display:flex;align-items:center;gap:9px;font:400 11px "IBM Plex Mono",monospace;color:var(--faint);margin-bottom:42px}
.single-breadcrumb a{color:var(--muted);text-decoration:none}.single-breadcrumb a:hover{color:var(--accent-deep)}
.single-guide-heading{max-width:850px;margin:0 auto;text-align:center}
.single-guide-heading h1{font:500 clamp(44px,7vw,78px)/1.01 "Fraunces",serif;letter-spacing:-.045em;margin:12px 0 20px}
.single-deck{max-width:700px;margin:0 auto;color:var(--muted);font-size:19px;line-height:1.6}
.single-byline{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin-top:25px;color:var(--muted);font-size:12.5px}.single-byline strong{color:var(--ink)}
.byline-dot{color:var(--faint)}.single-featured{max-width:1080px;margin-top:42px}.single-featured img{display:block;width:100%;max-height:590px;object-fit:cover;border-radius:22px;border:1px solid var(--line)}
.single-guide-layout{max-width:1080px;display:grid;grid-template-columns:70px minmax(0,720px) 220px;gap:34px;align-items:start;margin-top:52px}
.single-share{position:sticky;top:92px;display:flex;flex-direction:column;align-items:center;gap:9px}.single-share>span{font:500 9px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:3px}
.single-share a,.single-share button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--muted);text-decoration:none;font:600 13px "Inter",sans-serif;cursor:pointer}.single-share a:hover,.single-share button:hover{color:var(--accent-deep);border-color:var(--accent-line)}
.single-article-content{font-size:17px;line-height:1.8;color:var(--ink)}.single-article-content>p:first-child{font-size:20px;line-height:1.7}
.single-article-content h2{font:500 36px/1.15 "Fraunces",serif;letter-spacing:-.02em;margin:52px 0 16px}.single-article-content h3{font:600 21px "Inter",sans-serif;margin:36px 0 12px}
.single-article-content p,.single-article-content ul,.single-article-content ol{margin:0 0 23px}.single-article-content li{margin-bottom:8px}.single-article-content a{color:var(--accent-deep);text-underline-offset:3px}
.single-article-content blockquote{margin:34px 0;padding:4px 0 4px 25px;border-left:3px solid var(--accent);font:500 25px/1.45 "Fraunces",serif;color:var(--muted)}
.single-article-content code{font:400 14px "IBM Plex Mono",monospace;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:2px 6px}.single-article-content pre{overflow:auto;background:var(--ink);color:var(--paper);border-radius:14px;padding:20px}
.single-article-content img{max-width:100%;height:auto;border-radius:14px}.single-article-content table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}.single-article-content th,.single-article-content td{padding:12px;border-bottom:1px solid var(--line);text-align:left}.single-article-content th{font-family:"IBM Plex Mono",monospace;font-size:11px;text-transform:uppercase}
.single-side-card{position:sticky;top:92px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:20px}.single-side-card h3{font:500 25px/1.1 "Fraunces",serif;margin:8px 0 11px}.single-side-card p:not(.blog-kicker){font-size:13px;line-height:1.6;color:var(--muted)}.single-side-card a{font-size:13px;font-weight:600;color:var(--accent-deep);text-decoration:none}
.single-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:42px;padding-top:24px;border-top:1px solid var(--line)}.single-tags a{font-size:11px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 10px}
.single-author-box{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;margin-top:38px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:16px}.author-avatar img{border-radius:50%}.single-author-box h3{font:500 25px "Fraunces",serif;margin:4px 0 6px}.single-author-box p:last-child{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
.related-guides{max-width:1080px;padding-top:80px;padding-bottom:30px}
@media(max-width:980px){.single-guide-layout{grid-template-columns:52px minmax(0,1fr)}.single-side-card{display:none}}
@media(max-width:650px){.symbolia-single{padding-top:34px}.single-breadcrumb{margin-bottom:28px}.single-guide-heading{text-align:left}.single-byline{justify-content:flex-start}.single-guide-layout{display:block;margin-top:34px}.single-share{position:static;flex-direction:row;justify-content:flex-start;margin-bottom:28px}.single-share>span{margin:0 5px 0 0}.single-article-content>p:first-child{font-size:18px}.single-article-content h2{font-size:31px}.single-author-box{grid-template-columns:52px 1fr}.author-avatar img{width:52px;height:52px}.related-guides{padding-top:58px}}