/*
Theme Name: Yaad
Theme URI: https://jamaicacommerce.com
Author: Jamaica Commerce
Description: A fast, clean, unmistakably-Jamaican classic theme for the Jamaican Patois Dictionary and money-tools site. Built for WPCode calculator shortcodes, All in One SEO, and Classic Widgets.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yaad
*/

/* =========================================================
   Yaad — single theme stylesheet (budget: 30KB minified)
   ========================================================= */

@font-face{
  font-family:"Bricolage Grotesque";
  src:url("assets/fonts/bricolage-grotesque-variable.woff2") format("woff2-variations"),
      url("assets/fonts/bricolage-grotesque-variable.woff2") format("woff2");
  font-weight:200 800;
  font-stretch:75% 125%;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- brand palette (light) --- */
  --c-green:        #009B3A;
  --c-green-deep:   #00552A;
  --c-gold:         #FED100;
  --c-ink:          #111111;
  --c-sand:         #FBF7EE;
  --c-card:         #FFFFFF;
  --c-line:         #E8E1D0;
  --c-sea:          #0E7C86;
  --c-black:        #0A0A0A;

  --bg:        var(--c-sand);
  --surface:   var(--c-card);
  --text:      var(--c-ink);
  --text-soft: #4B463B;
  --line:      var(--c-line);
  --link:      var(--c-sea);
  --brand:     var(--c-green);
  --brand-deep:var(--c-green-deep);
  --gold:      var(--c-gold);
  --header-bg:     var(--c-black);
  --header-text:   #FFFFFF;
  --header-text-soft: #C7C3BA;
  --header-line:   rgba(255,255,255,.12);
  --header-surface:#161616;

  --shadow: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px -12px rgba(17,17,17,.18);

  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-900: clamp(2.75rem, 2.1rem + 3vw, 5.25rem);
  --fs-800: clamp(2.1rem, 1.7rem + 1.8vw, 3.4rem);
  --fs-700: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --fs-600: clamp(1.2rem, 1.1rem + .4vw, 1.5rem);
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: .875rem;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1180px;
}

:root[data-theme="dark"]{
  --bg:        #0D1A12;
  --surface:   #122A1B;
  --text:      #F4EFE3;
  --text-soft: #C9C3B2;
  --line:      #1E3826;
  --link:      #6FD4DC;
  --brand:     #16C450;
  --brand-deep:#073D22;
  --gold:      var(--c-gold);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:        #0D1A12;
    --surface:   #122A1B;
    --text:      #F4EFE3;
    --text-soft: #C9C3B2;
    --line:      #1E3826;
    --link:      #6FD4DC;
    --brand:     #16C450;
    --brand-deep:#073D22;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-400);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text); line-height:1.08; margin:0 0 .5em; font-weight:800; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--text-soft); }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:1.25rem; }
.visually-hidden, .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip-link{
  position:absolute; left:1rem; top:-3rem; background:var(--brand-deep); color:#fff;
  padding:.6rem 1rem; border-radius:var(--radius-sm); z-index:200; transition:top .15s ease;
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:3px solid var(--c-sea); outline-offset:2px; }

.link-underline{ position:relative; display:inline-block; }
.link-underline::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:3px;
  background:var(--gold); transition:right .22s ease;
}
.link-underline:hover::after, .link-underline:focus-visible::after{ right:0; }

/* =========================== header =========================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--header-bg);
  border-bottom:1px solid var(--header-line);
}
.site-header__bar{ display:flex; align-items:center; gap:1.5rem; padding:.85rem 1.25rem; }
.logo{
  font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--header-text);
  display:flex; align-items:center; gap:.5rem; margin-right:auto;
}
.logo img{ max-height:40px; width:auto; }
.logo .mark{ color:var(--gold); }
.main-nav{ display:flex; align-items:center; gap:1.1rem; }
.main-nav > ul{ list-style:none; display:flex; gap:1.1rem; margin:0; padding:0; }
.main-nav > ul > li{ position:relative; }
.main-nav a{ color:var(--header-text); font-weight:600; font-size:.95rem; padding:.4rem .1rem; }
.main-nav .menu-item-has-children > a::after{ content:"▾"; font-size:.65em; margin-left:.3em; opacity:.6; }
.main-nav .sub-menu{
  /* top:100%, flush against the link — a gap here creates a dead zone the
     mouse falls through on the way down, closing the menu before you can
     reach it. Breathing room comes from padding, which stays inside the
     hoverable box instead of outside it. */
  position:absolute; top:100%; left:0; min-width:220px; list-style:none; margin:0;
  background:var(--header-surface); border:1px solid var(--header-line); border-radius:var(--radius-sm);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.5); padding:.6rem .5rem .5rem; display:none; flex-direction:column; gap:.1rem;
}
.menu-item-has-children:hover .sub-menu, .menu-item-has-children:focus-within .sub-menu{ display:flex; }
.sub-menu a{ padding:.5rem .6rem; border-radius:6px; font-weight:500; color:var(--header-text-soft); }
.sub-menu a:hover{ background:rgba(255,255,255,.06); color:var(--header-text); }
.header-actions{ display:flex; align-items:center; gap:.5rem; }
.icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--header-line); background:transparent; color:var(--header-text);
  cursor:pointer; flex:none;
}
.icon-btn:hover{ border-color:var(--gold); }
.icon-btn svg{ width:18px; height:18px; }

.search-pop{
  position:absolute; inset:0 0 auto 0; background:var(--header-surface); border-bottom:1px solid var(--header-line);
  padding:1rem 1.25rem; display:none; gap:.5rem;
}
.search-pop.is-open{ display:flex; }
.search-pop input{ flex:1; min-width:0; }
.nav-toggle{ display:none; }

@media (max-width: 860px){
  .main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    max-height:calc(100vh - 100%); overflow-y:auto;
    background:var(--header-bg); border-bottom:1px solid var(--header-line);
    padding:.5rem 1.25rem 1.25rem;
  }
  .main-nav.is-open{ display:block; }
  .main-nav > ul{ flex-direction:column; gap:0; }
  .main-nav > ul > li{ border-top:1px solid var(--header-line); }
  .main-nav > ul > li:first-child{ border-top:none; }
  .main-nav a{ display:block; padding:.85rem .1rem; }
  .sub-menu{
    position:static; display:flex; box-shadow:none; border:none; background:transparent;
    padding:0 0 .5rem 1rem; min-width:0;
  }
  .sub-menu a{ padding:.6rem .1rem; }
  .nav-toggle{ display:inline-flex; }
}

/* =========================== buttons / forms =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  padding:.8rem 1.4rem; border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--brand-deep); color:#fff; }
.btn-primary:hover{ box-shadow:0 8px 18px -8px color-mix(in srgb, var(--brand-deep) 60%, transparent); }
.btn-gold{ background:var(--gold); color:#111; }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--text); }

input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], select, textarea{
  font-family:inherit; font-size:1rem; padding:.75rem 1rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--surface); color:var(--text);
}
input:focus, select:focus, textarea:focus{ border-color:var(--brand); outline:none; }

/* =========================== hero =========================== */
.hero{
  position:relative; overflow:hidden; padding:5rem 0 6rem;
  background:var(--brand-deep); color:#fff; isolation:isolate;
}
.hero::before{
  content:""; position:absolute; z-index:-1; inset:-20% -10%;
  background:linear-gradient(115deg, transparent 0 46%, var(--gold) 46% 50%, transparent 50% 100%);
  opacity:.9;
}
.hero::after{
  content:""; position:absolute; z-index:-1; inset:0;
  background:radial-gradient(60% 50% at 85% 0%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%);
}
.hero__kicker{
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem;
  color:var(--gold); margin-bottom:1rem; display:inline-block;
}
.hero h1{ color:#fff; font-size:var(--fs-900); max-width:16ch; }
.hero p.lede{ color:#EFE9D8; font-size:var(--fs-500); max-width:46ch; }
.hero-search{
  margin-top:2rem; max-width:560px; background:#fff; border-radius:999px; padding:.4rem;
  display:flex; gap:.4rem; box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
}
.hero-search input{ border:none; border-radius:999px; flex:1; min-width:0; background:transparent; color:#111; }
.hero-search input:focus{ outline:none; }
.hero-search button{ flex:none; border-radius:999px; }

/* =========================== word of the day =========================== */
.wotd{
  background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--brand);
  border-radius:var(--radius); padding:2rem; display:grid; gap:1.5rem;
  grid-template-columns:auto 1fr auto; align-items:center; box-shadow:var(--shadow);
}
.wotd__badge{
  font-family:var(--font-display); font-weight:800; font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; background:var(--gold); color:#111; padding:.4rem .7rem; border-radius:999px;
  white-space:nowrap;
}
.wotd__word{ font-size:var(--fs-700); margin:0; }
.wotd__pron{
  display:inline-block; font-family:var(--font-body); font-weight:600; font-size:.85rem;
  color:var(--text-soft); border:1.5px solid var(--line); border-radius:999px; padding:.2rem .7rem; margin-left:.6rem;
}
@media (max-width:640px){ .wotd{ grid-template-columns:1fr; text-align:left; } }

/* =========================== section headings =========================== */
.section{ padding:4rem 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.section-head h2{ position:relative; display:inline-block; font-size:var(--fs-800); padding-bottom:.3rem; }
.section-head h2::after{
  content:""; position:absolute; left:0; bottom:0; width:3.2em; height:.4em; background:var(--gold);
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%); z-index:-1;
}
.section-head h2 span{ position:relative; }
.section-head a{ font-weight:700; }

/* =========================== tools grid =========================== */
.tools-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.25rem; }
.tool-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.75rem; display:flex; flex-direction:column; gap:.9rem; position:relative; overflow:hidden;
  transition:transform .15s ease, border-color .15s ease;
}
.tool-tile:hover{ transform:translateY(-3px); border-color:var(--brand); }
.tool-tile::before{
  content:""; position:absolute; top:-30px; right:-30px; width:90px; height:90px; background:var(--brand);
  opacity:.08; clip-path:polygon(0 0,100% 0,100% 100%);
}
.tool-tile .icon{
  width:46px; height:46px; border-radius:12px; background:var(--brand-deep); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.tool-tile .icon svg{ width:24px; height:24px; }
.tool-tile h3{ font-size:1.15rem; margin:0; }
.tool-tile p{ margin:0; font-size:.92rem; }

/* =========================== word/post cards =========================== */
.word-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1rem; }
.word-card{
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--brand);
  border-radius:var(--radius-sm); padding:1.1rem 1.25rem;
}
.word-card .headword{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; margin:0 0 .2rem; }
.word-card p{ margin:0; font-size:.9rem; }
.pill{
  display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand-deep); padding:.25rem .6rem; border-radius:999px;
}
:root[data-theme="dark"] .pill{ color:#B6F2CB; }

.post-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.5rem; }
.post-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.post-card__thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--line); }
.post-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card__body{ padding:1.25rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post-card h2, .post-card h3{ font-size:1.15rem; margin:0; }
.post-card .meta{ font-size:.8rem; color:var(--text-soft); }

/* =========================== guides =========================== */
.guides-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:2rem; }
.guide-col h3{ font-size:1.2rem; border-bottom:2px solid var(--line); padding-bottom:.6rem; margin-bottom:1rem; }
.guide-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.guide-col a{ color:var(--text); font-weight:600; }

/* =========================== footer CTA + footer =========================== */
.footer-cta{ background:var(--brand); color:#06230f; text-align:center; padding:3.5rem 0; position:relative; }
.footer-cta h2{ color:#06230f; }
.site-footer{ background:var(--brand-deep); color:#DCEBDF; position:relative; padding-top:3rem; }
.mountains{ display:block; width:100%; height:auto; margin-top:-1px; }
.footer-grid{ display:grid; grid-template-columns:2fr repeat(3,1fr); gap:2rem; padding-bottom:2.5rem; }
.footer-grid h4{ color:#fff; font-family:var(--font-display); font-size:1rem; margin-bottom:.9rem; }
.footer-grid ul, .footer-grid .widget ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.footer-grid a{ color:#C7DCCB; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:1.25rem 0; font-size:.85rem; color:#9FBBA5; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* =========================== Patois word single page =========================== */
.word-poster{
  position:relative; background:var(--brand-deep); color:#fff; padding:4.5rem 0 3.5rem; overflow:hidden; isolation:isolate;
}
.word-poster::before{
  content:""; position:absolute; z-index:-1; inset:-10% -10%;
  background:linear-gradient(115deg, transparent 0 58%, var(--gold) 58% 62%, transparent 62% 100%);
  opacity:.85;
}
.word-poster .pill{ background:rgba(255,255,255,.14); color:#fff; }
.word-poster__meta{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.headword-poster{ font-size:clamp(3.5rem, 6vw + 1rem, 8rem); text-transform:uppercase; margin:0; color:#fff; letter-spacing:-.01em; }
.pron-pill{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-body); font-weight:700;
  background:var(--gold); color:#111; padding:.45rem 1rem; border-radius:999px; font-size:1.05rem; margin-top:1rem;
}
.reading-time{ color:#DCEBDF; font-size:.9rem; }

.az-strip{ display:flex; flex-wrap:wrap; gap:.35rem; padding:1rem 0; border-bottom:1px solid var(--line); margin-bottom:2.5rem; }
.az-strip a{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; font-size:.8rem; font-weight:700; color:var(--text-soft);
}
.az-strip a:hover, .az-strip a.is-current{ background:var(--brand); color:#fff; }

/* shared long-form typography: Patois reading column + standard article content */
.reading-col, .entry-content{ max-width:68ch; margin-inline:auto; }
.reading-col h2, .entry-content h2{ font-size:var(--fs-700); margin-top:1.4em; }
.reading-col h3, .entry-content h3{ font-size:var(--fs-600); margin-top:1.3em; }
.reading-col p, .entry-content p{ font-size:1.08rem; color:var(--text); }
.entry-content ul, .entry-content ol{ padding-left:1.4em; color:var(--text); }
.entry-content li{ margin-bottom:.4em; }
.reading-col blockquote, .entry-content blockquote{
  margin:1.5em 0; padding:1.1em 1.4em; background:var(--surface); border-left:4px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic;
}
.reading-col table, .entry-content table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:.95rem; }
.reading-col th, .reading-col td, .entry-content th, .entry-content td{ text-align:left; padding:.7em .9em; border-bottom:1px solid var(--line); }
.reading-col th, .entry-content th{ font-family:var(--font-display); background:var(--surface); }
.entry-content figure{ margin:1.5em 0; }
.entry-content figcaption{ font-size:.85rem; color:var(--text-soft); margin-top:.5em; }
.entry-content .alignwide{ max-width:calc(68ch + 4rem); margin-left:50%; transform:translateX(-50%); }
.entry-content .alignfull{ max-width:none; width:100vw; margin-left:50%; transform:translateX(-50%); }
.entry-content .aligncenter{ margin-left:auto; margin-right:auto; }
.entry-content .alignleft{ float:left; margin:.3em 1.5em 1em 0; }
.entry-content .alignright{ float:right; margin:.3em 0 1em 1.5em; }

.quick-answer{
  background:color-mix(in srgb, var(--brand) 10%, var(--surface)); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.25rem 1.5rem; font-size:1.1rem; font-weight:600; color:var(--text);
}
.quick-answer strong{ color:var(--brand-deep); }
:root[data-theme="dark"] .quick-answer strong{ color:#9FE9B8; }

.more-words{ margin-top:4rem; }

/* =========================== standard article =========================== */
.article-head{ max-width:68ch; margin:0 auto 2rem; }
.article-head h1{ font-size:var(--fs-800); }
.article-head .meta{ color:var(--text-soft); font-size:.9rem; }
.featured-image{ max-width:var(--container); margin:0 auto 2.5rem; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; }
.featured-image img{ width:100%; height:100%; object-fit:cover; }

.with-sidebar{ display:grid; grid-template-columns:1fr 300px; gap:3rem; max-width:var(--container); margin-inline:auto; align-items:start; }
.with-sidebar .entry-content{ max-width:68ch; margin-inline:0; }
.widget{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.25rem; margin-bottom:1.5rem; }
.widget-title{ font-size:1rem; margin-bottom:.75rem; }
@media (max-width:900px){ .with-sidebar{ grid-template-columns:1fr; } }

/* =========================== breadcrumbs =========================== */
.breadcrumbs{ max-width:var(--container); margin:1.25rem auto 0; padding-inline:1.25rem; font-size:.85rem; color:var(--text-soft); }
.breadcrumbs a{ color:var(--text-soft); text-decoration:underline; }

/* =========================== archive / search =========================== */
.archive-head{ padding:3rem 0 1rem; }
.archive-head h1{ font-size:var(--fs-800); }
.archive-filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.archive-filters a{
  font-size:.85rem; font-weight:600; padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line); color:var(--text);
}
.archive-filters a.is-current{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }

.pagination{ display:flex; gap:.5rem; justify-content:center; margin:3rem 0 0; flex-wrap:wrap; }
.pagination a, .pagination span{
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); border:1px solid var(--line); padding:0 .6rem; font-weight:600; color:var(--text);
}
.pagination .current{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }

.no-results{ text-align:center; padding:3rem 1rem; max-width:48ch; margin-inline:auto; }

/* =========================== 404 =========================== */
.error-404{ text-align:center; padding:5rem 1.25rem; max-width:52ch; margin-inline:auto; }
.error-404__code{ font-family:var(--font-display); font-size:var(--fs-900); color:var(--brand); margin:0; }

/* =========================== tool canvas (calculator pages) =========================== */
.tool-canvas{ max-width:900px; margin-inline:auto; }
.tool-canvas .tool-head{ background:var(--brand-deep); color:#fff; border-radius:var(--radius) var(--radius) 0 0; padding:1rem 1.5rem; }
.tool-canvas .tool-head small{ opacity:.75; text-transform:uppercase; letter-spacing:.05em; font-size:.7rem; }
.tool-canvas .tool-body{ background:var(--surface); border:1px solid var(--line); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:1.75rem; }
.tool-canvas label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.4rem; }
.tool-canvas input, .tool-canvas select{ width:100%; }
.tool-canvas .field{ margin-bottom:1.25rem; }
.tool-canvas .btn-row{ display:flex; gap:.6rem; }
.tool-canvas .result-panel{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.5rem; margin-top:1.5rem; }
.tool-canvas table{ width:100%; border-collapse:collapse; }
.tool-canvas td{ padding:.5em 0; border-bottom:1px solid var(--line); }

/* =========================== small-screen tightening =========================== */
@media (max-width:640px){
  .section{ padding:2.75rem 0; }
  .hero{ padding:3.25rem 0 3.5rem; }
  .footer-cta{ padding:2.75rem 0; }
  .word-poster{ padding:3rem 0 2.25rem; }
  .reading-col, .entry-content{ max-width:100%; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .tool-canvas .btn-row{ flex-direction:column; }
  .article-head h1{ font-size:var(--fs-700); }
}