* { margin: 0; padding: 0; box-sizing: border-box; }
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/fredoka.woff2') format('woff2');
}
:root {
  --font-display: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --ink: #2c3330;          /* body text: cool graphite */
  --ink-soft: #6b7268;
  --pine: #0f6b60;       /* the house colour: ink on paper */
  --pine-dark: #0a4f47;
  --gold: #f0a92b;          /* the call to action */
  --gold-dark: #c98a12;
  --coral: #e8615f;         /* the second thread: accents, hover marks, the stitched X */
  --sea: #3aa88f;
  --line: #e2ddd0;
  --paper: #fffdf7;
}
h1, h2, h3, .brand-name, .btn-primary, .pill { font-family: var(--font-display); }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: linear-gradient(160deg, #e6f1ed 0%, #f6f5ee 46%, #fdf3e2 100%) fixed;
  color: var(--ink);
  min-height: 100vh; display: flex; flex-direction: column;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* ── Portal shell: navigation rail beside the content column (31 Jul 2026) ──── */
.shell { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px 60px; }
.shell > main.wrap { max-width: none; padding-left: 0; padding-right: 0;
  /* .wrap sets `margin: 0 auto`, and a grid item with auto side margins is shrink-to-fit, not
     stretched. Pages whose content is naturally narrower than the column (a 3-card row, a short
     collection) were rendering narrow and centred while long pages filled the column. */
  margin-left: 0; margin-right: 0; }
.site-header .wrap, .site-footer .wrap { max-width: 1280px; }
.rail { display: none; }
@media (min-width: 1080px) {
  .shell.has-rail { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 34px; align-items: start; }
  .rail { display: block; position: sticky; top: 84px; padding: 26px 0 20px; }
  .brand { flex: none; }
}
.rail-block { margin-bottom: 22px; }
.rail-h { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink-soft); opacity: .8; margin: 0 0 8px; padding: 0 12px; }
.rail-link { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 12px; color: var(--ink-soft); text-decoration: none;
  font-size: .93rem; font-weight: 600; line-height: 1.3; }
.rail-link:hover { background: #e9f3ef; color: var(--pine); }
.rail-link.is-on { background: var(--paper); color: var(--pine-dark); box-shadow: 0 4px 16px rgba(15,107,96,.12); }
.rail-ico { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rail-ico svg { flex: none; width: 17px; height: 17px; }
.rail-n { flex: none; font-size: .74rem; font-weight: 700; color: var(--ink-soft);
  background: rgba(255,255,255,.85); border-radius: 9999px; padding: 2px 8px; }
.rail-tool { background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px; box-shadow: 0 4px 16px rgba(15,107,96,.1); }
.rail-tool p { font-size: .82rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px; }
.rail-tool .btn-primary { font-size: .85rem; padding: 9px 16px; }

/* ── Search: header twin and hero twin, one component ───────────────────────── */
.hsearch { position: relative; display: flex; align-items: center; order: 10; flex: 1 0 100%; margin: 8px 0 2px; }
.header-row { flex-wrap: wrap; }
.hsearch .hsearch-in { padding-top: 8px; padding-bottom: 8px; font-size: .9rem; }
@media (min-width: 1080px) {
  .hsearch { order: 0; flex: 1 1 160px; max-width: 320px; min-width: 0; margin: 0 16px; }
  .header-row { flex-wrap: nowrap; }
  .header-nav a { white-space: nowrap; }
  .hsearch .hsearch-in { padding-top: 10px; padding-bottom: 10px; font-size: .95rem; }
}
.hsearch-ico { position: absolute; left: 14px; color: var(--ink-soft); opacity: .7; pointer-events: none; }
.hsearch-in { width: 100%; font: inherit; color: var(--ink); padding: 10px 16px 10px 42px;
  border: 2px solid var(--line); border-radius: 9999px; background: rgba(255,255,255,.92); }
.hsearch-in::placeholder { color: var(--ink-soft); opacity: .8; }
.hsearch-in:focus { outline: none; border-color: var(--pine); background: #fff; }
.hsearch-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15,107,96,.2); padding: 6px; max-height: 62vh; overflow-y: auto; }
.hsearch-pop[hidden] { display: none; }
.hs-hit { display: block; padding: 9px 12px; border-radius: 12px; text-decoration: none; }
.hs-hit:hover, .hs-hit.sel { background: #e9f3ef; }
.hs-t { display: block; font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--pine-dark); line-height: 1.25; }
.hs-m { display: block; font-size: .76rem; color: var(--ink-soft); margin-top: 2px; }
.hs-none { padding: 12px 14px; font-size: .88rem; color: var(--ink-soft); margin: 0; }
.hsearch-lg { display: flex; max-width: 520px; margin: 22px auto 8px; }
.hsearch-lg .hsearch-in { font-size: 1.02rem; padding: 14px 18px 14px 46px; }
.hsearch-lg .hsearch-ico { left: 17px; width: 20px; height: 20px; }
@media (max-width: 1079px) { .hsearch-lg, .ph-hint { display: none; } }

/* ── Portal hero ───────────────────────────────────────────────────────────── */
.portal-hero { text-align: center; padding: 34px 0 8px; }
.portal-hero h1 { font-size: clamp(1.65rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--pine); margin-bottom: 10px; }
.portal-hero .lead { color: var(--ink-soft); font-size: 1.04rem; margin: 0 auto; line-height: 1.6; }
.ph-hint { font-size: .8rem; color: var(--ink-soft); opacity: .8; margin: 0; }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  justify-content: center; margin: 18px 0 0; }
/* The row is flex, so with the default align-items:stretch a button with no top margin grows
   to match the tallest LINE, and the house primary buttons carry their own margin-top for use
   elsewhere. That made the secondary button render taller than the primary it sits beside.
   Centre the items and strip the inherited top margin inside this row. */
/* `.ph-actions > *` ties with `.btn-primary` on specificity and loses on source order, so the
   stray margin-top survived. The attribute selector outranks the button classes. */
.ph-actions > a[class] { margin-top: 0; align-self: center; }
/* The primary and secondary buttons come from different house classes with different
   padding, border widths and font sizes, so left alone they render as two different
   heights side by side. One box for both inside this row: the height below is the
   primary's own height, so the primary is unchanged and the secondary matches it.
   box-sizing is border-box sitewide, so the outline border is included. */
.ph-actions > a[class] { display: inline-flex; align-items: center; justify-content: center;
  min-height: 49px; padding-top: 0; padding-bottom: 0; }
.ph-stats { font-size: .85rem; color: var(--ink-soft); opacity: .85; margin: 14px 0 0; }
@media (max-width: 879px) { .portal-hero { padding: 18px 0 4px; } .portal-hero .lead { font-size: .98rem; } }

a { color: var(--pine-dark); }

/* header */
.site-header { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; }
.site-header::after { content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--pine), var(--sea), var(--gold), var(--coral), var(--pine)); }
.header-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand-mark { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 2px 5px rgba(15,107,96,.3)); transition: transform .25s ease; }
.brand:hover .brand-mark { transform: scale(1.06) rotate(-4deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-name { font-weight: 800; font-size: 1.38rem; letter-spacing: -.01em; color: var(--pine-dark); white-space: nowrap; }
.brand-name b { color: var(--gold-dark); font-weight: 800; }
.brand-tagline { font-size: .64rem; font-weight: 600; color: #8d9490; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; white-space: nowrap; }
.nav-open { display: none; }
.nav-burger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--pine-dark); border-radius: 2px; }
.header-nav { display: flex; align-items: center; gap: 18px; }
.header-nav a { text-decoration: none; color: var(--ink); font-size: .92rem; font-weight: 600; }
.header-nav a:hover { color: var(--pine); }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--pine); color: #fff !important;
  padding: 8px 14px; border-radius: 999px; }
.nav-cta:hover { background: var(--pine-dark); }
/* Just above the nav breakpoint the row is at its tightest, and every pixel the nav gives back
   goes to the search box, which is the element that stops being usable first. */
@media (min-width: 1080px) and (max-width: 1179px) {
  .header-nav { gap: 10px; }
  .hsearch { margin: 0 10px; }
}
@media (max-width: 879px) {
  .brand-name { font-size: 1.2rem; } .brand-mark { width: 38px; height: 38px; }
  .nav-burger { display: flex; }
  .header-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: #fff; border-top: 1px solid var(--line); padding: 8px 20px 14px; }
  .header-nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav-cta { justify-content: center; margin-top: 10px; border-bottom: 0; }
  .nav-open:checked ~ .header-nav { display: flex; }
}
/* Mobile header CTA: the desktop nav pill collapses into the burger below the nav
   breakpoint; this compact twin keeps one primary action visible. */
.nav-cta-mobile { display: none; align-items: center; padding: 7px 13px;
  border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 879px) { .nav-cta-mobile { display: inline-flex; } }

/* hero */
.hero { text-align: center; padding: 44px 0 26px; }
.hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; color: var(--pine-dark); }
.lead { color: var(--ink-soft); font-size: 1.08rem; margin: 12px auto 0; line-height: 1.65; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; background: var(--gold);
  color: #4a3200; text-decoration: none; font-weight: 700; padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(255,183,3,.4); }
.btn-primary:hover { background: var(--gold-dark); color: #fff; }

/* breadcrumbs */
.crumbs { font-size: .85rem; color: var(--ink-soft); padding: 16px 0 4px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--pine); text-decoration: underline; }
.crumbs .sep { margin: 0 7px; opacity: .5; }

/* pills */
.pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px; text-decoration: none; color: var(--pine-dark); font-weight: 700; font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease; }
.pill:hover { border-color: var(--pine); box-shadow: 0 4px 12px rgba(15,107,96,.18); transform: translateY(-1px); }
.pills .pill:nth-child(5n+1) { background: #e6f1ed; border-color: #cadcd5; }
.pills .pill:nth-child(5n+2) { background: #fff3d6; border-color: #f5e2ae; }
.pills .pill:nth-child(5n+3) { background: #ddf6f2; border-color: #b3e7de; }
.pills .pill:nth-child(5n+4) { background: #fdeae6; border-color: #f6c6bd; }
.pills .pill:nth-child(5n+5) { background: #eaf4f0; border-color: #c6dcd3; }

/* section headings */
.sec-h { display: flex; align-items: center; gap: 9px; margin: 34px 0 6px; color: var(--pine-dark); font-size: 1.35rem; }
.sec-note { color: var(--ink-soft); font-size: .92rem; margin-bottom: 16px; }

/* home: one block per mechanic, one card per collection */
.mech-block { margin-top: 10px; }
.col-cards { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
@media (max-width: 860px) { .col-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .col-cards { grid-template-columns: 1fr; } }
.col-card { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 16px 12px 12px; text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.col-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,107,96,.16); border-color: #a9cfc6; }
.col-card-media { flex: none; width: 62px; height: 80px; border-radius: 8px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); }
.col-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.col-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.col-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--pine-dark); line-height: 1.25; }
.col-card-meta { color: var(--ink-soft); font-size: .84rem; }

/* collection hero */
.col-hero { padding: 18px 0 8px; }
.col-hero-row { display: flex; align-items: flex-start; gap: 16px; }
.col-icon { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 18px; background: #e6f1ed; color: var(--pine); }
@media (max-width: 700px) { .col-hero-row { gap: 12px; } .col-icon { width: 52px; height: 52px; border-radius: 14px; } }
.col-hero h1 { font-size: clamp(1.6rem, 4.4vw, 2.3rem); color: var(--pine-dark); letter-spacing: -.02em; line-height: 1.15; }
.col-hero .lead { margin: 10px 0 0; max-width: none; text-align: left; }
.byline { margin-top: 14px; font-size: .86rem; color: var(--ink-soft); }
.byline a { color: var(--pine-dark); }
.byline .dot { margin: 0 6px; opacity: .5; }

/* sheet cards. Not links: the download IS the action (see inc_sheets_grid.php). */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
.card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(15,107,96,.18); border-color: #a9cfc6; }
.card-media { display: block; position: relative; background: #fff; border-bottom: 1px solid var(--line); }
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 210/297; object-fit: contain; }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--pine-dark); line-height: 1.25; }
.card-desc { color: var(--ink-soft); font-size: .84rem; line-height: 1.5; flex: 1; }
.card-dl { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }

/* download buttons */
.dl-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--pine-dark); text-decoration: none; cursor: pointer; line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.dl-btn svg { flex: none; }
.dl-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,107,96,.16); }
.dl-btn.primary { background: var(--pine); border-color: var(--pine); color: #fff; }
.dl-btn.primary:hover { background: var(--pine-dark); border-color: var(--pine-dark); }

/* pinterest pill on cards (house C13) */
.pin-btn { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center;
  gap: 5px; background: #bd081c; color: #fff; font-size: .74rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; opacity: 0; cursor: pointer; transition: opacity .15s ease; }
.card:hover .pin-btn, .pin-btn:focus { opacity: 1; }

/* prose + how it works */
.prose { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px 28px; margin-top: 30px; line-height: 1.75; color: var(--ink); }
.prose h2, .prose h3 { color: var(--pine-dark); margin: 18px 0 8px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin-bottom: 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 12px 22px; }
.how { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 26px 30px; margin-top: 32px; }
.how h2 { color: var(--pine-dark); margin-bottom: 12px; }
.how ol { padding-left: 22px; color: var(--ink-soft); line-height: 2; }
.how-more { margin-top: 10px; font-size: .9rem; }

/* FAQ accordions on the mechanic hub pages. Symmetric filled cards (house rule: no
   left-border accent stripes), question in the summary, answer prose below it. */
.faq { margin-top: 32px; }
.faq .sec-h { margin-bottom: 14px; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  margin-bottom: 10px; overflow: hidden; }
.faq-item summary { display: flex; align-items: center; gap: 10px; padding: 15px 20px;
  cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--pine-dark); transition: background .15s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2.2px solid var(--pine); border-bottom: 2.2px solid var(--pine);
  transform: rotate(-45deg); transition: transform .2s ease; margin-top: -2px; }
.faq-item[open] summary::before { transform: rotate(45deg); margin-top: -6px; }
.faq-item summary:hover { background: #f3f7f4; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); background: #fbf9f1; }
.faq-a { padding: 14px 20px 16px; color: var(--ink); line-height: 1.7; }
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--pine-dark); text-decoration: underline;
  text-decoration-color: #9ec9bf; text-underline-offset: 3px; }
.faq-a a:hover { color: var(--pine); text-decoration-color: currentColor; }

/* share row */
.share-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink);
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.share-btn svg { flex: none; }
.share-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.sb-pin:hover  { color: #bd081c; border-color: #bd081c; }
.sb-fb:hover   { color: #1877f2; border-color: #1877f2; }
.sb-wa:hover   { color: #25d366; border-color: #25d366; }
.sb-copy:hover { color: var(--pine-dark); border-color: var(--pine); }

/* forms */
.sp-body form { margin-top: 26px; }
.sp-body form label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: .92rem;
  color: var(--pine-dark); }
.sp-body form input[type="text"], .sp-body form input[type="email"], .sp-body form textarea {
  display: block; width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; background: #fff; color: var(--ink); box-sizing: border-box; }
.sp-body form input:focus, .sp-body form textarea:focus { outline: 0; border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(15,107,96,.14); }
.sp-body form textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.sp-body form input[name="website"] { position: absolute; left: -9999px; }   /* honeypot */
.sp-body form button { display: inline-flex; align-items: center; margin-top: 20px;
  background: var(--pine); color: #fff; border: 0; border-radius: 999px; padding: 12px 26px;
  font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(15,107,96,.32); }
.sp-body form button:hover { background: var(--pine-dark); }
.form-ok { margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: #e8fbf6;
  border: 1px solid #b7ecdf; color: #0d6a5b; }
.form-err { margin-top: 22px; padding: 16px 20px; border-radius: 14px; background: #fdefec;
  border: 1px solid #f0c9c2; color: #8c2020; }
.sp-body form .cf-turnstile { margin-top: 22px; }

/* static / legal pages */
.static-page { margin: 8px auto 0; background: var(--paper);
  border: 1px solid var(--line); border-radius: 20px; padding: 42px 48px 46px; }
@media (max-width: 700px) { .static-page { padding: 26px 22px 30px; border-radius: 16px; } }
.sp-head { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 26px; }
.sp-head h1 { color: var(--pine-dark); font-size: clamp(1.7rem, 4.2vw, 2.2rem);
  letter-spacing: -.02em; line-height: 1.18; }
.sp-lead { margin-top: 12px; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.6; }
.creator-card { display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 0 0 28px; }
.creator-card img { width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: #f1f3ef; padding: 5px; box-sizing: border-box; }
.creator-card span { display: flex; flex-direction: column; line-height: 1.45; }
.creator-card strong { color: var(--pine-dark); font-size: 1.03rem; }
.creator-card em { font-style: normal; color: var(--ink-soft); font-size: .88rem; }
.sp-body { color: var(--ink); font-size: 1.03rem; line-height: 1.78; }
.sp-body > *:first-child { margin-top: 0; }
.sp-body p { margin: 0 0 18px; }
.sp-body h2 { color: var(--pine-dark); font-size: 1.28rem; margin: 34px 0 12px;
  padding-top: 6px; line-height: 1.3; }
.sp-body h3 { color: var(--pine-dark); font-size: 1.08rem; margin: 26px 0 8px; }
.sp-body ul, .sp-body ol { margin: 0 0 20px; padding-left: 4px; list-style: none; }
.sp-body ol { counter-reset: sp; }
.sp-body li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.sp-body ul > li::before { content: ""; position: absolute; left: 4px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.sp-body ol > li { counter-increment: sp; }
.sp-body ol > li::before { content: counter(sp); position: absolute; left: 0; top: .1em;
  width: 19px; height: 19px; border-radius: 50%; background: var(--pine); color: #fff;
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sp-body a { color: var(--pine-dark); text-decoration: underline;
  text-decoration-color: #9ec9bf; text-underline-offset: 3px; }
.sp-body a:hover { color: var(--pine); text-decoration-color: currentColor; }
.sp-body strong { color: var(--pine-dark); }
.sp-body hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
/* House rule: no left-border stripes on callouts. A symmetric filled card instead. */
.sp-body blockquote { margin: 0 0 20px; padding: 16px 20px; background: #eff5f2;
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink-soft); }
.sp-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .95rem; }
.sp-body th, .sp-body td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.sp-body th { color: var(--ink-soft); font-weight: 600; }
.sp-body > p:last-child > em:only-child { display: block; margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .88rem; font-style: normal; }
.sp-more { margin: 40px auto 0; text-align: center; }
.sp-more h2 { color: var(--pine-dark); font-size: 1.1rem; margin-bottom: 4px; justify-content: center; }

/* footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: auto; }
.footer-cols { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 24px; padding: 34px 20px 22px; }
@media (max-width: 1040px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fbrand { grid-column: 1 / -1; } }
@media (max-width: 760px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
.fbrand { min-width: 0; }
.fbrand .brand { margin-bottom: 12px; }
.fbrand .brand-mark { width: 40px; height: 40px; }
.fbrand .brand-name { font-size: 1.2rem; }
.fbrand-desc { margin: 0 0 12px; max-width: 54ch; color: var(--ink-soft); font-size: .86rem; line-height: 1.6; }
.fbrand-contact { margin: 0; max-width: 54ch; color: var(--ink-soft); font-size: .86rem; line-height: 1.6; }
.fbrand-contact a { color: var(--pine-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.fbrand-contact a:hover { color: var(--pine); text-decoration: underline; }
.fcol h4 { color: var(--pine-dark); font-size: .95rem; margin-bottom: 10px; }
.fcol a, .fcol .lang-current { display: block; color: var(--ink-soft); text-decoration: none; font-size: .88rem; padding: 4px 0; }
.fcol a:hover { color: var(--pine); }
.fcol .lang-current { font-weight: 700; color: var(--pine-dark); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 14px 20px 22px; color: var(--ink-soft); font-size: .82rem; }

/* ── Maze Maker ───────────────────────────────────────────────────────────── */
.mk-hero { padding: 18px 0 6px; }
.mk-hero h1 { font-size: clamp(1.6rem, 4.4vw, 2.3rem); color: var(--pine-dark); letter-spacing: -.02em; }
.mk-hero .lead { margin: 12px 0 0; max-width: none; text-align: left; }
.mk-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 22px; }
@media (max-width: 860px) { .mk-wrap { grid-template-columns: 1fr; } }
.mk-form { background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(18px, 3vw, 24px); }
.mk-label { display: block; font-family: var(--font-display); font-weight: 700;
  color: var(--pine-dark); font-size: 1.02rem; margin: 0 0 10px; }
.mk-tiers { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.mk-tier { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.mk-tier:hover { border-color: var(--pine); }
/* The selected state is driven by the RADIO ITSELF via the adjacent-sibling combinator, so it
   follows the click with no JavaScript and no server round trip. An earlier version nested the
   input inside the label and used :has(input:checked): the selector matched in the DOM but the
   repaint did not follow the click, so picking a size looked like it did nothing. This pattern
   has no such ambiguity. The input must stay a SIBLING before its label for it to work. */
.mk-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mk-radio:checked + .mk-tier {
  border-color: var(--pine); box-shadow: 0 0 0 3px rgba(15,107,96,.14); background: #f3f7f4; }
/* The input is visually hidden, so without this a keyboard user has no idea where they are. */
.mk-radio:focus-visible + .mk-tier { outline: 3px solid var(--pine); outline-offset: 2px; }
.mk-tier .mk-check { flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #c3cec8; background: #fff; align-self: center; transition: all .15s ease; }
.mk-radio:checked + .mk-tier .mk-check {
  border-color: var(--pine); box-shadow: inset 0 0 0 3px #fff; background: var(--pine); }
.mk-tier b { font-family: var(--font-display); font-size: .98rem; color: var(--pine-dark); }
.mk-tier em { font-style: normal; margin-left: auto; font-size: .82rem; color: var(--ink-soft); }
.mk-hint { font-size: .84rem; color: var(--ink-soft); margin: 14px 0 0; }
.mk-hint code { font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace; font-size: .86rem;
  background: #eaf3ef; border-radius: 6px; padding: 1px 6px; color: var(--pine-dark); }
.mk-submit { margin-top: 16px; width: 100%; justify-content: center; }
.mk-result { min-width: 0; }
/* The chart is capped by VIEWPORT HEIGHT, not column width. At full width an 80 square chart
   rendered taller than the screen and pushed the download buttons, the entire point of the page,
   below the fold. Height-capping keeps the whole maze and its actions visible together. */
.mk-canvas { display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(14px, 3vw, 26px); box-shadow: 0 10px 30px rgba(15,107,96,.08); }
/* 50vh, not more: the target is that the maze AND the download buttons fit together on a
   1280x800 laptop, which is the smallest common desktop viewport. Verified by screenshot at
   that exact size, because this is the kind of thing that only shows up in a render. */
.mk-canvas svg { display: block; width: auto; height: auto; max-width: 100%;
  max-height: 50vh; min-height: 260px; }
@media (max-width: 860px) { .mk-canvas svg { max-height: 62vh; } }
.mk-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin: 0 0 12px; }
.mk-meta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem;
  color: var(--ink-soft); }
.mk-badge { display: inline-flex; align-items: center; gap: 6px; background: #e6f1ed;
  color: var(--pine-dark); font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; }
.mk-actions .dl-btn { padding: 9px 16px; font-size: .86rem; }
.mk-note { margin-top: 12px; font-size: .84rem; color: var(--ink-soft); }
.mk-ready { margin-top: 34px; }

/* footer social row (driven by $CREATOR['sameAs'], see inc_footer.php) */
.footer-social { display: inline-flex; gap: 14px; margin: 6px 0 0; }
.social-link { display: inline-flex; align-items: center; color: var(--ink-soft); padding: 4px 0;
  transition: color .15s ease, transform .15s ease; }
.social-link:hover { color: var(--pine); transform: translateY(-1px); }

/* YouTube watch link */
.yt-watch{display:flex;margin:14px 0 0}
.yt-watch a{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:9999px;border:1.5px solid #c8dbd4;color:#7c8a84;text-decoration:none;font-weight:600;font-size:.95rem}
.yt-watch a:hover{border-color:#158a7b;color:#158a7b}

/* ══ Stitch Zoo components ══════════════════════════════════════════════════
   Everything below is this site's own: the craft nav groups, the answer card, the pattern
   specs, the chart reading block and the Pattern Maker screen. House rules that apply to all
   of it: symmetric filled cards, never a left border accent, and no colour used as the only
   carrier of meaning (every chart symbol also has a shape). */

/* Header nav: one item per CRAFT, its pages in a drop panel. Pure CSS, opens on hover AND on
   keyboard focus, so it works without JavaScript and without a mouse. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-top { padding: 6px 0; }
.nav-drop { position: absolute; top: 100%; left: -14px; z-index: 70; display: none;
  min-width: 232px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15,107,96,.18); padding: 8px; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: block; }
.nav-drop a { display: block; padding: 9px 12px; border-radius: 11px; font-size: .9rem; }
.nav-drop a:hover { background: #e9f3ef; }
.rail-gico { display: inline-flex; margin-right: 6px; vertical-align: -3px; opacity: .75; }
.rail-h { display: flex; align-items: center; }

/* The direct answer, high on the page (C16). A symmetric filled card, never a quote bar. */
.answer-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 22px; margin: 22px 0 6px; box-shadow: 0 6px 20px rgba(15,107,96,.07); }
.answer-card h2 { font-size: 1.12rem; color: var(--pine-dark); margin-bottom: 7px; }
.answer-card p { margin: 0; line-height: 1.7; color: var(--ink); }

.craft-block { margin-top: 10px; }
.col-card { align-items: flex-start; }
.col-card-desc { color: var(--ink-soft); font-size: .85rem; line-height: 1.5; }
.col-card-media { width: 76px; height: 76px; }
.col-card-media img { object-position: center; background: #f6f0e2; }

/* Pattern cards: the preview is a stitched design, not an A4 page, so it is square. */
.card-media img { aspect-ratio: 1 / 1; object-fit: contain; background: #f6f0e2; }
.card-specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.spec { font-size: .72rem; font-weight: 700; letter-spacing: .01em; color: var(--pine-dark);
  background: #e9f3ef; border-radius: 9999px; padding: 3px 9px; }

/* How to read a chart: a real chart at readable size beside the four things it teaches. */
.chart-read { margin-top: 34px; }
.chart-read-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px; align-items: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 20px; margin-top: 12px; }
@media (max-width: 820px) { .chart-read-row { grid-template-columns: 1fr; } }
.chart-fig { margin: 0; }
.chart-fig img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.chart-fig figcaption { font-size: .8rem; color: var(--ink-soft); margin-top: 8px; text-align: center; }
.chart-read-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.chart-read-list li { position: relative; padding-left: 26px; line-height: 1.6; color: var(--ink); }
.chart-read-list li::before { content: ""; position: absolute; left: 2px; top: .52em;
  width: 11px; height: 11px; border-radius: 3px; background: var(--sea); }

/* Sibling links, grouped by craft with a differentiated line each (A11). */
.siblings { margin-top: 36px; }
.sib-h { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--pine-dark);
  margin: 18px 0 8px; }
.sib-cards { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .sib-cards { grid-template-columns: 1fr; } }
.sib-card { display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
  transition: transform .16s ease, box-shadow .16s ease; }
.sib-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,107,96,.14); }
.sib-t { font-family: var(--font-display); font-weight: 700; color: var(--pine-dark); }
.sib-d { font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }

/* The tool strip on the home page: the free tool is the link asset, so it gets its own band. */
.maker-strip { margin-top: 38px; background: linear-gradient(140deg, #0f6b60 0%, #14867a 100%);
  border-radius: 22px; padding: 26px 28px; color: #fdfdf7; }
.maker-strip h2 { color: #fff; font-size: 1.3rem; margin-bottom: 8px; }
.maker-strip p { color: rgba(255,255,255,.9); line-height: 1.65; max-width: 62ch; }
.ms-note { font-size: .85rem; color: rgba(255,255,255,.78); margin-top: 8px; }
.maker-strip .btn-primary { margin-top: 16px; background: var(--gold); color: #3a2a00 !important; }
.maker-strip .btn-primary:hover { background: var(--gold-dark); }

/* ── Pattern Maker screen ─────────────────────────────────────────────────── */
.mk-privacy { font-size: .86rem; color: var(--ink-soft); margin-top: 8px; max-width: 86ch; }
.mk-field { margin-bottom: 18px; }
.mk-file { display: block; width: 100%; font: inherit; font-size: .88rem; padding: 10px;
  background: #fff; border: 2px dashed var(--line); border-radius: 14px; }
.mk-file::file-selector-button { font: inherit; font-size: .84rem; font-weight: 700; margin-right: 10px;
  padding: 7px 12px; border: 0; border-radius: 9999px; background: var(--pine); color: #fff; cursor: pointer; }
.mk-select { display: block; width: 100%; font: inherit; font-size: .9rem; padding: 10px 12px;
  background: #fff; border: 2px solid var(--line); border-radius: 12px; color: var(--ink); }
.mk-select:focus { outline: none; border-color: var(--pine); }
.mk-opts { display: grid; gap: 8px; }
.mk-opt { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; background: #fff;
  border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.mk-opt:hover { border-color: var(--pine); }
.mk-radio:checked + .mk-opt { border-color: var(--pine); background: #e9f3ef; }
.mk-radio:focus-visible + .mk-opt { outline: 3px solid var(--pine); outline-offset: 2px; }
.mk-opt .mk-check { flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line); background: #fff; align-self: center; }
.mk-radio:checked + .mk-opt .mk-check { border-color: var(--pine); background: var(--pine);
  box-shadow: inset 0 0 0 3px #fff; }
.mk-opt b { font-family: var(--font-display); font-size: .96rem; color: var(--pine-dark); white-space: nowrap; }
.mk-opt em { font-style: normal; margin-left: auto; font-size: .8rem; color: var(--ink-soft); }
.mk-rights { font-size: .8rem; color: var(--ink-soft); margin-top: 14px; line-height: 1.55; }
.mk-panes { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .mk-panes { grid-template-columns: 1fr; } }
.mk-pane { margin: 0; }
.mk-pane figcaption { font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.mk-key { margin-top: 20px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 20px; }
.mk-key h2 { font-size: 1.05rem; color: var(--pine-dark); margin-bottom: 10px; }
.mk-key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mk-key-list li { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.mk-key-list b { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--pine-dark); }
.mk-key-list em { font-style: normal; margin-left: auto; font-size: .78rem; color: var(--ink-soft); }
.mk-sw { flex: none; width: 17px; height: 17px; border-radius: 4px; border: 1px solid #b9bec7; }
.mk-sym { flex: none; }
.mk-empty { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.mk-empty h2 { font-size: 1.1rem; color: var(--pine-dark); margin-bottom: 10px; }
.mk-empty ol { margin: 0; padding-left: 20px; display: grid; gap: 9px; line-height: 1.6; }
.mk-result .form-err { margin-bottom: 16px; }
.mk-checkline { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.45;
  color: var(--ink); cursor: pointer; }
.mk-checkline input { width: 18px; height: 18px; accent-color: var(--pine); margin-top: 1px; flex: none; }