/* Fonts, --link, the family-accent tokens, radius scale, and the
   font-stack tokens now live in assets/shared.css (loaded before this
   file) — a vendored copy shared with the converters and demo page. */

:root{
  --paper:#fcfcfb;
  --surface:#ffffff;
  --ink:#1d1e1c;
  --ink-soft:#5c5e5a;
  --ink-faint:#73756f;  /* darkened from #93958f to clear WCAG AA (4.5:1) for the body copy set in this color */
  --line:#e6e5e1;
  /* Product-family accents, aliased from shared.css's --docsify/--helios so
     the existing .tk/.am/.green rules throughout this file don't need
     renaming. Docsify -> green (docsify.js.org's mascot); Grav -> purple
     (Grav 2's brand). */
  --teal:var(--docsify);
  --teal-soft:var(--docsify-soft);
  --amber:var(--helios);
  --amber-soft:var(--helios-soft);
  --green:var(--helios);        /* free Grav skeletons — same family as --amber */
  --green-soft:var(--helios-soft);
  --purple-soft:#f2f0ea;  /* picker box background — a neutral warm tint spanning both families */
  --code-bg:#1c1e1a;

  --text-min:1.1rem;      /* the page-wide minimum text size */
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#17181a;
    --surface:#1e2023;
    --ink:#eeefec;
    --ink-soft:#b3b5b0;
    --ink-faint:#858785;  /* lightened from #797b76 to clear WCAG AA (4.5:1) for the body copy set in this color */
    --line:#2e3033;
    --purple-soft:#242427;
    --code-bg:#0e100c;
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:15px;}  /* scales every rem-based size on the page uniformly */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:19.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
.wrap{max-width:1100px; margin:0 auto; padding:0 32px;}

h1,h2,h3{
  font-family:var(--font-sans);
  font-weight:800;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
a{color:inherit;}

/* Keyboard-focus ring lives in shared.css (a bare :focus-visible rule,
   loaded before this file) so it also covers form controls on other
   pages in the family, not just links/buttons. */

/* header */
.site-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
/* .brand-line wraps the clickable .brand (logo + "HibbittsDesign.org").
   Every page just links back home via the domain text — page identity is
   carried by each page's own H1, not a header breadcrumb suffix. */
.brand-line{display:inline-flex; align-items:center; min-width:0;}
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  font-family:var(--font-mono);
  font-size:var(--text-min);
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--ink-soft);
  text-decoration:none;
}
.brand-mark{height:22px; width:auto; display:block;}
.brand strong{color:var(--ink); font-weight:700;}
.brand:hover,
.brand:focus-visible{color:var(--link);}
.brand:hover strong,
.brand:focus-visible strong{color:var(--link);}
/* "HibbittsDesign.org" has no spaces of its own, so a <wbr> in the markup
   (before ".org") gives the browser one deliberate, legible place to wrap
   it -- min-width:0 lets this flex chain actually shrink enough to use it,
   instead of overflowing the viewport. overflow-wrap:anywhere stays on as
   a last-resort fallback for any narrower context the <wbr> alone can't cover. */
.brand span{min-width:0; overflow-wrap:anywhere;}
.site-head nav{display:flex; align-items:flex-start; gap:32px;}
.site-head nav a{
  font-size:var(--text-min);
  font-weight:600;
  text-decoration:none;
  color:var(--ink-soft);
}
.site-head nav a:hover,
.site-head nav a:focus-visible{color:var(--link);}

/* "Projects" nav dropdown — opens only on an explicit click or Enter
   activation (see the small script nested inside the header itself, in
   tools/partials/header.html), never just on hover or on receiving
   keyboard focus. Deliberately NOT a :focus-within rule: this menu also
   needs to close on Escape and return focus to the trigger, and if
   :focus-within controlled visibility, refocusing the trigger to close it
   would immediately reopen it. Visibility and focus must stay independent.
   The trigger is a real link to index.html#projects, so it still goes
   somewhere useful with JS disabled. */
/* display:flex (not the default block) avoids a font-size strut mismatch:
   .nav-item has no font-size of its own, so as a plain block it inherits
   a larger one than its .dropdown-trigger child, whose line box then sits
   taller than the trigger and baseline-aligns it a few px lower than the
   plain-text nav links beside it. */
.nav-item{position:relative; display:flex; align-items:flex-start;}
.dropdown-trigger{display:inline-flex; align-items:center; gap:5px;}
.dropdown-trigger::after{
  content:"";
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px;
}
.dropdown-menu{
  position:absolute; top:calc(100% + 16px); left:-12px;
  display:none; flex-direction:column; gap:2px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:8px;
  min-width:230px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  z-index:30;
}
.nav-item.open .dropdown-menu{display:flex;}
.dropdown-menu a{padding:9px 10px; border-radius:6px; white-space:nowrap;}
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible{background:var(--paper);}

/* hero */
.hero{padding:76px 0 20px;}
.eyebrow-row{margin:0 0 22px;}
.hero h1{
  font-size:clamp(2.9rem, 6vw, 4.6rem);
  line-height:1.05;
  letter-spacing:-0.025em;
  max-width:16ch;
  overflow-wrap:break-word;
  hyphens:auto;
}
/* the three essay pages carry full-sentence titles, much longer than any
   other page's h1 -- at the standard 16ch width those wrap to 4 heavy
   lines, so this widens the line box (font-size unchanged keeps them still
   reading as the same weight of headline, just fewer, more even lines) */
.hero h1.essay-title{max-width:30ch;}
/* compact tier tag on each dedicated page, echoing the homepage ladder's
   dot-marker styling so a visitor who lands here directly (skipping the
   homepage) still sees which of the three capability tiers this is */
.tier-track{margin:22px 0 28px; font-family:var(--font-mono); font-size:var(--text-min); text-transform:uppercase; letter-spacing:0.02em;}
.tier-step{display:inline-flex; align-items:center; gap:6px; color:var(--ink-faint);}
.tier-dot{width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink-faint); background:transparent; flex-shrink:0;}
.tier-step.current{color:var(--ink); font-weight:700;}
.tier-step.current.tk .tier-dot{background:var(--teal); border-color:var(--teal);}
.tier-step.current.am .tier-dot{background:var(--amber); border-color:var(--amber);}
.tier-step.current.green .tier-dot{background:var(--green); border-color:var(--green);}
.hero .lede{
  margin:26px 0 0;
  font-size:1.42rem;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:56ch;
}
.jump-links{
  margin:22px 0 0;
  font-size:var(--text-min);
  color:var(--ink-faint);
}
.hero-rule{
  height:1px;
  background:var(--line);
  border:none;
  margin:40px 0 0;
}
.prose{
  max-width:68ch;
  margin:56px 0 0;
}
.prose h2{
  font-size:1.5rem;
  margin:0 0 18px;
}
.prose h2 + p{
  margin-top:0;
}
.prose h2.sub{
  font-size:1.15rem;
  margin:32px 0 8px;
}
.prose p{
  font-size:var(--text-min);
  color:var(--ink-soft);
  line-height:1.7;
  margin:0 0 18px;
}
.prose p:last-child{
  margin-bottom:0;
}
.prose ul{
  margin:0 0 18px;
  padding-left:20px;
  font-size:var(--text-min);
  color:var(--ink-soft);
  line-height:1.7;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.prose ul strong{
  color:var(--ink);
  font-weight:600;
}
/* systems-oriented-design.html — nine design principles. Same "unboxed"
   philosophy as the testimonials/service/grav grids (no card border): a
   numbered marker in the mono font, echoing the article's own <code>
   parameters, gives each principle a distinct beat instead of a plain
   bullet dot, with extra vertical rhythm between items. */
.prose ul.principles{
  list-style:none;
  padding-left:0;
  gap:18px;
  counter-reset:principle;
}
.prose ul.principles li{
  position:relative;
  padding-left:38px;
}
.prose ul.principles li::before{
  counter-increment:principle;
  content:counter(principle);
  position:absolute;
  left:0;
  top:1px;
  width:24px;
  height:24px;
  line-height:24px;
  text-align:center;
  border-radius:var(--radius-pill);
  background:var(--teal-soft);
  color:var(--teal);
  font-family:var(--font-mono);
  font-size:0.8rem;
  font-weight:700;
}
.hero-bio{
  display:flex;
  gap:36px;
  align-items:flex-start;
  flex-wrap:wrap;
  max-width:68ch;
  margin-top:26px;
}
.hero-bio .lede{
  margin-top:0;
}
.hero-bio-text{
  flex:1 1 380px;
  min-width:260px;
}
.hero-photo{
  flex:0 0 200px;
  width:200px;
  height:266px;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  margin-top:4px;
}
.prose figure{
  margin:32px 0;
}
.prose figure img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
}
.prose figcaption{
  margin-top:10px;
  font-size:0.92rem;
  color:var(--ink-faint);
}
.shot-pair{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin:32px 0;
}
.shot-pair figure{
  margin:0;
  flex:1 1 220px;
  min-width:200px;
}
/* testimonials page — quotes grouped by project. Unboxed like the site's
   other grids (.service-grid, .grav-grid): a left rule marks each quote
   instead of a bordered card. Each group carries the same project-family
   accent already used on the homepage ladder/badges (.tk green for the
   Docsify family, .green for the free Grav skeletons, which share the Grav
   purple) so a reader can tell
   at a glance which product a quote belongs to, and each quote gets a
   quiet oversized quotation mark in that same accent rather than any new
   card styling. */
.testi-group{
  margin:32px 0 0;
}
.testi-group:first-of-type{
  margin-top:24px;
}
.testi-group.tk h2.sub{color:var(--teal);}
.testi-group.green h2.sub{color:var(--green);}
.testi-grid{
  column-count:2;
  column-gap:40px;
  margin-top:14px;
}
.testi{
  position:relative;
  margin:0 0 24px;
  padding:24px 0 0 18px;
  border-left:2px solid var(--line);
  break-inside:avoid;
}
.testi-group.tk .testi{border-left-color:var(--teal);}
.testi-group.green .testi{border-left-color:var(--green);}
.testi::before{
  content:"\201C";
  position:absolute;
  left:5px;
  top:-4px;
  font-family:var(--font-sans);
  font-size:2.75rem;
  font-weight:800;
  line-height:1;
  color:var(--ink-faint);
  opacity:0.35;
}
.testi-group.tk .testi::before{color:var(--teal);}
.testi-group.green .testi::before{color:var(--green);}
.testi p{
  font-size:var(--text-min);
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 0 10px;
}
.testi cite{
  font-size:0.88rem;
  color:var(--ink-faint);
  font-style:normal;
}

/* markdown -> rendered demo, framed like a browser window (matches the parent site's product screenshots) */
.chrome{
  margin:64px 0 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
}
.chrome-bar{
  display:flex; align-items:center; gap:9px;
  padding:11px 16px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.chrome-dots{display:flex; gap:6px;}
.chrome-dots span{width:9px; height:9px; border-radius:50%; display:inline-block;}
.chrome-dots span:nth-child(1){background:#ec6a5e;}
.chrome-dots span:nth-child(2){background:#f4bf4f;}
.chrome-dots span:nth-child(3){background:#61c454;}
.chrome-url{
  font-family:var(--font-mono);
  font-size:var(--text-min);
  color:var(--ink-faint);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:3px 12px;
  margin-left:6px;
}
.demo{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:0;
  align-items:stretch;
  background:var(--surface);
}
.demo-pane{padding:34px 36px; min-width:0;}
.demo-pane.source{background:var(--code-bg);}
.pane-label{
  font-family:var(--font-mono);
  font-size:var(--text-min);
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:8px;
}
.demo-pane.source .pane-label{color:#8a8f7c;}
.demo-pane.rendered .pane-label{color:var(--ink-faint);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--teal);}
.md-help{
  font-family:var(--font-sans);
  font-size:0.85rem;
  text-transform:none;
  letter-spacing:normal;
  color:#8a8f7c;
  text-decoration:none;
  border-bottom:1px dotted #8a8f7c;
  margin-left:auto;
}
.md-help:hover,
.md-help:focus-visible{color:#c9cabb; border-color:#c9cabb;}
.src{
  font-family:var(--font-mono);
  font-size:1.15rem;
  line-height:1.5;
  color:#c9cabb;
  white-space:pre-wrap;
  margin:0;
}
.src .h{color:#7fd8ce;}
.src .b{color:#e8b876; font-weight:700;}
.src .l{color:#8a8f7c;}
.src .k{color:#7aa2f7;}
.rendered .demo-title{font-size:1.85rem; margin:0 0 12px; letter-spacing:-0.02em; font-weight:800; color:var(--ink);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.rendered .demo-body{margin:0 0 16px; color:var(--ink-soft); font-size:1.15rem;}
.rendered ul{margin:0; padding-left:20px; color:var(--ink-soft); font-size:1.12rem; display:flex; flex-direction:column; gap:8px;}
.demo-link{margin:20px 0 0; font-size:1.12rem;}
.demo-arrow{
  display:flex; align-items:center; justify-content:center;
  padding:0 6px;
  color:var(--ink-faint);
  background:var(--surface);
}
.demo-caption{
  font-size:var(--text-min);
  color:var(--ink-faint);
  text-align:center;
  margin:16px 0 0;
}

/* ladder */
.ladder{margin:100px 0 0;}
.ladder h2{font-size:2.15rem; margin-bottom:14px;}
.ladder .lede{color:var(--ink-soft); max-width:62ch; margin:0 0 46px; font-size:1.2rem; line-height:1.6;}
.track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}
.track::before{
  content:"";
  position:absolute;
  top:16px; left:6%; right:6%;
  height:1.5px;
  background:linear-gradient(to right, var(--teal) 0%, var(--teal) 63%, var(--amber) 67%, var(--amber) 100%);
  opacity:0.25;
}
.stop{position:relative; padding:0 4px 0 0;}
.stop .marker{
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  position:relative; z-index:1;
  background:var(--paper);
  box-shadow:0 0 0 5px var(--paper);
}
.stop .marker svg{width:17px; height:17px;}
.stop.tk .marker{border:1.5px solid var(--teal); color:var(--teal);}
.stop.am .marker{border:1.5px solid var(--amber); color:var(--amber);}
.stop .label{font-size:var(--text-min); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.02em; margin:0 0 8px;}
.stop .label a{text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:2px; opacity:0.75;}
.stop .label a:hover,
.stop .label a:focus-visible{opacity:1;}
.stop.tk .label{color:var(--teal);}
.stop.am .label{color:var(--amber);}
.stop h3{font-family:var(--font-sans); font-size:1.28rem; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px; text-wrap:balance;}
.stop p{font-size:var(--text-min); color:var(--ink-soft); margin:0; max-width:27ch; line-height:1.5;}

/* which one */
.picker{
  margin:100px 0 0;
  background:var(--purple-soft);
  border-radius:var(--radius-xl);
  padding:10px;
}
.picker h2{padding:28px 28px 8px; font-size:1.8rem;}
.prow{
  display:grid;
  grid-template-columns:1fr auto;
  gap:22px;
  align-items:center;
  padding:22px 28px;
  border-top:1px solid rgba(0,0,0,.06);
}
.prow .q{font-size:1.16rem; line-height:1.5; color:var(--ink-soft);}
.prow .q strong{color:var(--ink); font-weight:600;}
.prow .a{
  font-family:var(--font-mono);
  font-size:var(--text-min);
  font-weight:700;
  padding:5px 4px;
  white-space:nowrap;
  border-bottom:1.5px solid currentColor;
  text-decoration:none;
}
.prow .a.tk{color:var(--teal);}
.prow .a.am{color:var(--amber);}
.prow a.a:hover,
.prow a.a:focus-visible{filter:brightness(0.94);}

/* project sections, styled like the Grav Helios theme's own bordered content cards */
.projects{margin-top:110px; display:flex; flex-direction:column; gap:24px;}
.project{
  padding:40px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:var(--surface);
  display:grid;
  grid-template-columns:240px 1fr;
  gap:32px;
}
.icon-tile{
  width:48px; height:48px;
  border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
}
.icon-tile svg{width:24px; height:24px;}
.project.tk .icon-tile{background:var(--teal-soft); color:var(--teal);}
.project.am .icon-tile{background:var(--amber-soft); color:var(--amber);}
.project.green .icon-tile{background:var(--green-soft); color:var(--green);}
.project-tag{
  font-family:var(--font-mono);
  font-size:var(--text-min);
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:700;
  display:inline-flex;
  align-self:flex-start;
}
.project.tk .project-tag{color:var(--teal);}
.project.am .project-tag{color:var(--amber);}
.project-head{display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
/* small screenshot preview under a project's badges — currently used on the two Grav Helios cards only */
.project-thumb{width:100%; align-self:stretch; overflow:hidden; border:1px solid var(--line); line-height:0;}
.project-thumb img{display:block; width:100%; height:auto;}
.project-thumb a:hover img,
.project-thumb a:focus-visible img{filter:brightness(0.94);}
.badge-row{display:flex; flex-wrap:wrap; gap:8px;}
/* generic badge — mirrors the Grav Helios theme's own badge component (doc-badge): pale fill, pill shape, sans label */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans); font-size:0.95rem; font-weight:600;
  padding:5px 14px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  text-decoration:none;
}
.badge.tk{background:var(--teal-soft); color:var(--teal);}
.badge.am{background:var(--amber-soft); color:var(--amber);}
.badge.green{background:var(--green-soft); color:var(--green);}
.badge.plain{background:var(--line); color:var(--ink-soft);}
/* an <a> badge gets a subtle hover cue so it still reads as clickable */
a.badge:hover,
a.badge:focus-visible{filter:brightness(0.94);}

/* .tlink (inline text link within prose) lives in shared.css. */
.project-body h3{font-size:2.3rem; margin-bottom:16px; letter-spacing:-0.025em;}
/* small, muted version/tech mention next to a card title — mirrors docsify-this.net's own "v2.0" treatment */
.version-tag{
  font-family:var(--font-sans);
  font-size:0.95rem;
  font-weight:600;
  color:var(--ink-faint);
  vertical-align:middle;
  margin-left:10px;
}
.project-body p{color:var(--ink-soft); max-width:62ch; margin:0 0 20px; font-size:1.22rem; line-height:1.6;}
.feat-list{
  list-style:none; margin:0 0 28px; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.feat-list li{
  font-size:1.15rem;
  color:var(--ink-soft);
  padding-left:18px;
  position:relative;
}
.feat-list li::before{
  content:"\2013";
  position:absolute; left:0; top:0;
  color:var(--ink-faint);
}
/* per-kit sub-sections within a card (currently just the two Starter Kits) — typography and
   spacing do the separating, no extra boxes or rules nested inside the card border */
.kit-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px 24px;
  margin-top:4px;
}
/* flex column so .links (Demo/GitHub) sits flush at the same baseline across
   a row regardless of how many lines a given kit's description wraps to --
   grid rows already stretch cells to equal height, this just anchors the
   button row to the bottom of that height instead of floating wherever the
   preceding content happens to end */
.kit{display:flex; flex-direction:column;}
.kit h4{
  font-family:var(--font-sans); font-size:1.1rem; font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 8px;
}
/* star badge always sits on its own line under the title, so kit columns of different
   title lengths still line up with each other instead of wrapping unevenly */
.kit-meta{margin:0 0 10px;}
.kit p{
  font-size:var(--text-min); color:var(--ink-soft); line-height:1.5;
  margin:0 0 14px;
}
.kit .links{gap:10px; margin-top:auto;}
/* secondary "customized variation" demos, nested below the three core kits --
   deliberately lighter-weight than .kit-grid (mono eyebrow label instead of an
   h4, no star badge) and laid out as a single-row-per-demo list rather than a
   grid, so they read as a distinct, supplementary list rather than a second
   set of cards competing with the three primary kit choices above them */
.kit-examples{margin-top:20px; padding-top:20px; border-top:1px solid var(--line);}
.kit-examples-label{
  font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.04em;
  text-transform:uppercase; font-weight:700; color:var(--ink-faint);
  margin:0 0 8px;
}
.kit-examples-intro{
  font-size:var(--text-min); color:var(--ink-soft); line-height:1.5;
  margin:0 0 16px;
}
.kit-examples-list{display:flex; flex-direction:column;}
.kit-example{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.kit-example:first-child{padding-top:4px;}
.kit-example:last-child{border-bottom:none; padding-bottom:0;}
.kit-example-text{flex:1; min-width:0;}
.kit-example .links{flex-shrink:0;}
.kit-example-title{
  font-family:var(--font-sans); font-size:1rem; font-weight:700;
  letter-spacing:-0.01em; margin:0 0 4px;
}
.kit-example-desc{
  font-size:var(--text-min); color:var(--ink-soft); line-height:1.5;
  margin:0;
}
.badge.sm{font-size:0.85rem; padding:3px 10px;}
/* bordered arrow-link boxes, matching the parent site's "→ Try X / View on GitHub" convention */
.links{display:flex; gap:14px; flex-wrap:wrap;}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:13px 18px;
  text-decoration:none;
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink);
  background:var(--surface);
}
.cta:hover,
.cta:focus-visible{border-color:var(--ink-faint);}
.cta .arrow{font-family:var(--font-mono); font-weight:700;}
.cta.tk .arrow{color:var(--teal);}
.cta.am .arrow{color:var(--amber);}
.cta.green .arrow{color:var(--green);}
.cta.green:hover,
.cta.green:focus-visible{border-color:var(--green);}
.cta.plain{border-color:transparent; background:transparent; color:var(--ink-soft); padding:13px 4px;}
.cta.plain:hover,
.cta.plain:focus-visible{color:var(--ink); border-color:transparent;}

/* more free skeletons, kept lightweight/secondary so it doesn't compete with the main three-level ladder */
.more{
  margin-top:70px;
  padding:32px 36px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
}
.more-badge{margin:0 0 14px;}
.more h2{font-size:1.3rem; margin:0 0 10px;}
.more>p{font-size:var(--text-min); color:var(--ink-soft); line-height:1.6; margin:0 0 22px; max-width:70ch;}
.more-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.more-list li{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;}
/* separates the plugin entry from the four skeletons above it, with extra whitespace instead of another rule */
.more-list li.more-sep{margin-top:12px;}
.more-list a{
  font-size:var(--text-min); font-weight:700; color:var(--ink);
  text-decoration:none; border-bottom:1.5px solid var(--line); padding-bottom:1px;
  white-space:nowrap;
}
.more-list a:hover,
.more-list a:focus-visible{color:var(--link); border-color:var(--link);}
.more-list span{font-size:var(--text-min); color:var(--ink-faint);}
.more>p.more-foot{margin:44px 0 0; font-size:var(--text-min);}
.more-foot a{color:var(--link); font-weight:600; text-decoration:none;}
.more-foot a:hover,
.more-foot a:focus-visible{text-decoration:underline;}

/* Import Converters -- two small boxes living as flex children inside .projects
   (right after the Docsify pair and right after the Grav Helios pair), same
   bordered-box treatment as .more, with the single-row-per-item list pattern
   from .kit-examples (title+desc left, links right, thin dividers). Heading is
   h3, not h2, since these sit among sibling <article> h3s inside .projects
   rather than being their own top-level page section. */
.tools{
  padding:32px 36px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
} /* no margin-top here -- .projects already supplies spacing between its flex children via gap */
.tools-badge{margin:0 0 14px;}
.tools h3{font-size:1.3rem; margin:0 0 10px;}
.tools>p{font-size:var(--text-min); color:var(--ink-soft); line-height:1.6; margin:0 0 22px; max-width:70ch;}
.tools-list{display:flex; flex-direction:column;}
.tool{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.tool:first-child{padding-top:4px;}
.tool:last-child{border-bottom:none; padding-bottom:0;}
.tool-text{flex:1; min-width:0;}
.tool .links{flex-shrink:0;}
.tool-title{
  font-family:var(--font-sans); font-size:1rem; font-weight:700;
  letter-spacing:-0.01em; margin:0 0 4px;
}
.tool-desc{
  font-size:var(--text-min); color:var(--ink-soft); line-height:1.5;
  margin:0;
}

/* link to the testimonials page (or a specific anchor within it). Used on
   the homepage, right after the four project cards, and on the Grav
   projects page, right after the grav-grid. Same treatment as .more-foot
   below, just scoped to .projects instead of .more. */
.projects-foot{margin:40px 0 0; font-size:var(--text-min);}
.projects-foot a{color:var(--link); font-weight:600; text-decoration:none;}
.projects-foot a:hover,
.projects-foot a:focus-visible{text-decoration:underline;}
/* .projects-foot reused inside a .project-body card (the "Learn more" line
   under each homepage project's feature list) -- .project-body p already
   sets font-size:1.22rem at higher specificity than plain .projects-foot,
   so it needs to be re-stated here to actually win. */
.project-body .projects-foot{font-size:var(--text-min); margin:24px 0 0;}
/* same reuse issue inside a dedicated project page's .grav-plugin box (the
   "See what educators and users are saying" line before a Get Started
   button row) -- .grav-plugin p already sets its own margin at higher
   specificity than plain .projects-foot, so it needs to be re-stated here. */
.grav-plugin .projects-foot{margin:40px 0 0;}
/* extra breathing room when a row of Demo/GitHub-style buttons follows the
   "Learn more" line directly (not the Starter Kits card, where a kit grid
   follows instead) */
.projects-foot + .links{margin-top:20px;}

/* contact page — Tally form embed, placed directly on the page (no card
   border/background) so it reads as part of the page's own open layout
   rather than a boxed-in module. The iframe still renders on Tally's own
   white background (no transparentBackground param), which is what keeps
   its field text legible in dark mode — just without a frame around it. */
/* Tally's embed always renders with its own light-mode colors (dark text,
   light inputs) with no way to sync it to a visitor's dark-mode preference,
   so the colors below are hardcoded to light rather than the --surface/
   --line tokens above, which flip dark in dark mode. Framing the embed as
   a deliberate light card keeps it legible in dark mode instead of dark
   text floating with no backing — the same pattern other sites use for
   third-party widgets (Calendly, Typeform) that don't support dark mode. */
.tally-embed{
  margin:56px 0 10px;
  background:#ffffff;
  border:1px solid #e6e5e1;
  border-radius:var(--radius-xl);
  padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.tally-embed iframe{display:block; width:100%; border:0;}

/* services page — four parallel offerings, unboxed like the ladder's own
   "track" of stops: typography and spacing do the separating, rather than
   bordering each one individually or nesting them inside one big box. */
.services{margin:70px 0 0;}
.service-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:40px 56px;
}
.service h2{font-size:1.28rem; font-weight:700; letter-spacing:-0.01em; margin:0 0 10px;}
.service-note{font-size:0.85rem; font-weight:600; color:var(--ink-faint); letter-spacing:0;}
.service p{font-size:var(--text-min); color:var(--ink-soft); line-height:1.6; margin:0;}
.services-cta{
  margin:56px 0 0;
  font-size:1.2rem;
  color:var(--ink-soft);
  line-height:1.6;
  max-width:62ch;
}

/* grav-projects page — four free skeleton cards, same unboxed treatment as
   .service-grid above, each with a short description and a Demo/Download/GitHub
   links row (reuses .links/.cta from the project cards higher up the site). */
.grav-projects{margin:70px 0 0;}
/* "which one do I need?" guide — plain dash-marker list (mirrors .feat-list's
   marker style at this page's smaller text scale), placed above the grid so
   visitors can self-select before reading all four cards. */
.grav-picker{margin:0 0 48px;}
.grav-picker h2{font-size:1.3rem; margin:0 0 14px;}
.grav-picker-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.grav-picker-list li{font-size:var(--text-min); color:var(--ink-soft); line-height:1.6; padding-left:18px; position:relative;}
.grav-picker-list li::before{content:"\2013"; position:absolute; left:0; top:0; color:var(--ink-faint);}
.grav-picker-list strong{color:var(--ink); font-weight:600;}
.grav-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:40px 56px;
}
/* screenshot banner atop a grav-card, full card width */
.grav-thumb{margin:0 0 16px; border:1px solid var(--line); overflow:hidden; line-height:0;}
.grav-thumb img{display:block; width:100%; height:auto;}
.grav-thumb a:hover img,
.grav-thumb a:focus-visible img{filter:brightness(0.94);}
/* two screenshots side by side on a dedicated project page (docsify-this.html
   and friends) -- narrower gap than .grav-grid since these are two views of
   the same product, not separate cards. .grav-thumb's own bottom margin is
   redundant once the grid gap is doing that spacing. */
.thumb-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0;}
.thumb-grid figure{margin:0;}
.thumb-grid .grav-thumb{margin:0;}
.thumb-cap{font-size:0.92rem; color:var(--ink-faint); text-align:center; margin:10px 0 0;}
.grav-card h3{font-size:1.28rem; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px;}
.grav-card .badge-row{margin:0 0 10px;}
.grav-card p{font-size:var(--text-min); color:var(--ink-soft); line-height:1.6; margin:0 0 16px;}
.grav-card .links{gap:10px;}
.grav-projects>p{font-size:var(--text-min); color:var(--ink-soft); line-height:1.6; margin:22px 0 0; max-width:70ch;}
.grav-grid + p{margin-top:56px;}
/* plugin callout — separated from the four skeleton cards above by
   whitespace and its own heading, unboxed like the grid cards themselves
   rather than bordered. */
.grav-plugin{margin:44px 0 0;}
.grav-plugin h2{font-size:1.3rem; margin:0 0 10px;}
.grav-plugin p{font-size:var(--text-min); color:var(--ink-soft); line-height:1.6; margin:0 0 16px; max-width:70ch;}
.grav-plugin .links{gap:10px;}
.grav-plugin .links + p{margin-top:20px;}

/* footer */
footer{
  margin-top:100px;
  padding:36px 0 70px;
  border-top:1px solid var(--line);
}
/* compact site index -- three columns of actual site pages, kept to the
   same muted text-min scale as the byline below it so it reads as a
   footnote, not a second nav bar. Social/Follow links are deliberately
   NOT a column here -- a sitemap maps pages within the site, and the
   Follow links all go to external platforms, so they get their own
   labeled block in .fcolophon instead of posing as a peer section. */
.fmap{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  margin:0 0 32px;
}
.fmap-col{display:flex; flex-direction:column; gap:9px;}
.fmap-label{
  font-family:var(--font-mono); font-size:var(--text-min);
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink-faint); margin:0 0 3px;
}
.fmap-col a{font-size:var(--text-min); color:var(--ink-soft); text-decoration:none;}
.fmap-col a:hover,
.fmap-col a:focus-visible{color:var(--link);}
.fcolophon{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:28px 32px;
}
.ffollow{display:flex; flex-direction:column; gap:9px;}
footer p{font-size:var(--text-min); color:var(--ink-faint); margin:0;}
footer .flinks{display:flex; flex-wrap:wrap; gap:14px 22px;}
footer .flinks a{display:inline-flex; align-items:center; gap:4px; font-size:var(--text-min); color:var(--ink-soft); text-decoration:none;}
footer .flinks a:hover,
footer .flinks a:focus-visible{color:var(--link);}
/* .ficon turns each icon into a CSS mask so the visible color still comes
   from currentColor, keeping the icon+text hover match that a plain <img>
   (opaque to CSS) couldn't give us. The mask-image below is a base64 copy
   of assets/icons/icon-*.svg, inlined (not url(icons/icon-*.svg)) because
   an external mask-image reference can silently fail to load when a page
   is opened via file:// -- if the source .svg files ever change, re-encode
   them here too. */
.ficon{
  display:inline-block; width:20px; height:20px; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.ficon-github{-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNOSAxOWMtNC4zIDEuNCAtNC4zIC0yLjUgLTYgLTNtMTIgNXYtMy41YzAgLTEgLjEgLTEuNCAtLjUgLTJjMi44IC0uMyA1LjUgLTEuNCA1LjUgLTZhNC42IDQuNiAwIDAgMCAtMS4zIC0zLjJhNC4yIDQuMiAwIDAgMCAtLjEgLTMuMnMtMS4xIC0uMyAtMy41IDEuM2ExMi4zIDEyLjMgMCAwIDAgLTYuMiAwYy0yLjQgLTEuNiAtMy41IC0xLjMgLTMuNSAtMS4zYTQuMiA0LjIgMCAwIDAgLS4xIDMuMmE0LjYgNC42IDAgMCAwIC0xLjMgMy4yYzAgNC42IDIuNyA1LjcgNS41IDZjLS42IC42IC0uNiAxLjIgLS41IDJ2My41Ii8+Cjwvc3ZnPgo=); mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNOSAxOWMtNC4zIDEuNCAtNC4zIC0yLjUgLTYgLTNtMTIgNXYtMy41YzAgLTEgLjEgLTEuNCAtLjUgLTJjMi44IC0uMyA1LjUgLTEuNCA1LjUgLTZhNC42IDQuNiAwIDAgMCAtMS4zIC0zLjJhNC4yIDQuMiAwIDAgMCAtLjEgLTMuMnMtMS4xIC0uMyAtMy41IDEuM2ExMi4zIDEyLjMgMCAwIDAgLTYuMiAwYy0yLjQgLTEuNiAtMy41IC0xLjMgLTMuNSAtMS4zYTQuMiA0LjIgMCAwIDAgLS4xIDMuMmE0LjYgNC42IDAgMCAwIC0xLjMgMy4yYzAgNC42IDIuNyA1LjcgNS41IDZjLS42IC42IC0uNiAxLjIgLS41IDJ2My41Ii8+Cjwvc3ZnPgo=);}
.ficon-mastodon{-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTguNjQ4IDE1LjI1NGMtMS44MTYgMS43NjMgLTYuNjQ4IDEuNjI2IC02LjY0OCAxLjYyNmExOC4yNjIgMTguMjYyIDAgMCAxIC0zLjI4OCAtLjI1NmMxLjEyNyAxLjk4NSA0LjEyIDIuODEgOC45ODIgMi40NzVjLTEuOTQ1IDIuMDEzIC0xMy41OTggNS4yNTcgLTEzLjY2OCAtNy42MzZsLS4wMjYgLTEuMTU0YzAgLTMuMDM2IC4wMjMgLTQuMTE1IDEuMzUyIC01LjYzM2MxLjY3MSAtMS45MSA2LjY0OCAtMS42NjYgNi42NDggLTEuNjY2czQuOTc3IC0uMjQzIDYuNjQ4IDEuNjY3YzEuMzI5IDEuNTE4IDEuMzUyIDIuNTk3IDEuMzUyIDUuNjMzcy0uNDU2IDQuMDc0IC0xLjM1MiA0Ljk0NCIvPgogIDxwYXRoIGQ9Ik0xMiAxMS4yMDR2LTIuOTI2YzAgLTEuMjU4IC0uODk1IC0yLjI3OCAtMiAtMi4yNzhzLTIgMS4wMiAtMiAyLjI3OHY0LjcyMm00IC00LjcyMmMwIC0xLjI1OCAuODk1IC0yLjI3OCAyIC0yLjI3OHMyIDEuMDIgMiAyLjI3OHY0LjcyMiIvPgo8L3N2Zz4K); mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTguNjQ4IDE1LjI1NGMtMS44MTYgMS43NjMgLTYuNjQ4IDEuNjI2IC02LjY0OCAxLjYyNmExOC4yNjIgMTguMjYyIDAgMCAxIC0zLjI4OCAtLjI1NmMxLjEyNyAxLjk4NSA0LjEyIDIuODEgOC45ODIgMi40NzVjLTEuOTQ1IDIuMDEzIC0xMy41OTggNS4yNTcgLTEzLjY2OCAtNy42MzZsLS4wMjYgLTEuMTU0YzAgLTMuMDM2IC4wMjMgLTQuMTE1IDEuMzUyIC01LjYzM2MxLjY3MSAtMS45MSA2LjY0OCAtMS42NjYgNi42NDggLTEuNjY2czQuOTc3IC0uMjQzIDYuNjQ4IDEuNjY3YzEuMzI5IDEuNTE4IDEuMzUyIDIuNTk3IDEuMzUyIDUuNjMzcy0uNDU2IDQuMDc0IC0xLjM1MiA0Ljk0NCIvPgogIDxwYXRoIGQ9Ik0xMiAxMS4yMDR2LTIuOTI2YzAgLTEuMjU4IC0uODk1IC0yLjI3OCAtMiAtMi4yNzhzLTIgMS4wMiAtMiAyLjI3OHY0LjcyMm00IC00LjcyMmMwIC0xLjI1OCAuODk1IC0yLjI3OCAyIC0yLjI3OHMyIDEuMDIgMiAyLjI3OHY0LjcyMiIvPgo8L3N2Zz4K);}
.ficon-bluesky{-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNNi4zMzUgNS4xNDRjLTEuNjU0IC0xLjE5OSAtNC4zMzUgLTIuMTI3IC00LjMzNSAuODI2YzAgLjU5IC4zNSA0Ljk1MyAuNTU2IDUuNjYxYy43MTMgMi40NjMgMy4xMyAyLjc1IDUuNDQ0IDIuMzY5Yy00LjA0NSAuNjY1IC00Ljg4OSAzLjIwOCAtMi42NjcgNS40MWMxLjAzIDEuMDE4IDEuOTEzIDEuNTkgMi42NjcgMS41OWMyIDAgMy4xMzQgLTIuNzY5IDMuNSAtMy41Yy4zMzMgLS42NjcgLjUgLTEuMTY3IC41IC0xLjVjMCAuMzMzIC4xNjcgLjgzMyAuNSAxLjVjLjM2NiAuNzMxIDEuNSAzLjUgMy41IDMuNWMuNzU0IDAgMS42MzcgLS41NzEgMi42NjcgLTEuNTljMi4yMjIgLTIuMjAzIDEuMzc4IC00Ljc0NiAtMi42NjcgLTUuNDFjMi4zMTQgLjM4IDQuNzMgLjA5NCA1LjQ0NCAtMi4zNjljLjIwNiAtLjcwOCAuNTU2IC01LjA3MiAuNTU2IC01LjY2MWMwIC0yLjk1MyAtMi42OCAtMi4wMjUgLTQuMzM1IC0uODI2Yy0yLjI5MyAxLjY2MiAtNC43NiA1LjA0OCAtNS42NjUgNi44NTZjLS45MDUgLTEuODA4IC0zLjM3MiAtNS4xOTQgLTUuNjY1IC02Ljg1NiIvPgo8L3N2Zz4K); mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNNi4zMzUgNS4xNDRjLTEuNjU0IC0xLjE5OSAtNC4zMzUgLTIuMTI3IC00LjMzNSAuODI2YzAgLjU5IC4zNSA0Ljk1MyAuNTU2IDUuNjYxYy43MTMgMi40NjMgMy4xMyAyLjc1IDUuNDQ0IDIuMzY5Yy00LjA0NSAuNjY1IC00Ljg4OSAzLjIwOCAtMi42NjcgNS40MWMxLjAzIDEuMDE4IDEuOTEzIDEuNTkgMi42NjcgMS41OWMyIDAgMy4xMzQgLTIuNzY5IDMuNSAtMy41Yy4zMzMgLS42NjcgLjUgLTEuMTY3IC41IC0xLjVjMCAuMzMzIC4xNjcgLjgzMyAuNSAxLjVjLjM2NiAuNzMxIDEuNSAzLjUgMy41IDMuNWMuNzU0IDAgMS42MzcgLS41NzEgMi42NjcgLTEuNTljMi4yMjIgLTIuMjAzIDEuMzc4IC00Ljc0NiAtMi42NjcgLTUuNDFjMi4zMTQgLjM4IDQuNzMgLjA5NCA1LjQ0NCAtMi4zNjljLjIwNiAtLjcwOCAuNTU2IC01LjA3MiAuNTU2IC01LjY2MWMwIC0yLjk1MyAtMi42OCAtMi4wMjUgLTQuMzM1IC0uODI2Yy0yLjI5MyAxLjY2MiAtNC43NiA1LjA0OCAtNS42NjUgNi44NTZjLS45MDUgLTEuODA4IC0zLjM3MiAtNS4xOTQgLTUuNjY1IC02Ljg1NiIvPgo8L3N2Zz4K);}
.ficon-linkedin{-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNOCAxMXY1Ii8+CiAgPHBhdGggZD0iTTggOHYuMDEiLz4KICA8cGF0aCBkPSJNMTIgMTZ2LTUiLz4KICA8cGF0aCBkPSJNMTYgMTZ2LTNhMiAyIDAgMSAwIC00IDAiLz4KICA8cGF0aCBkPSJNMyA3YTQgNCAwIDAgMSA0IC00aDEwYTQgNCAwIDAgMSA0IDR2MTBhNCA0IDAgMCAxIC00IDRoLTEwYTQgNCAwIDAgMSAtNCAtNGwwIC0xMCIvPgo8L3N2Zz4K); mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNOCAxMXY1Ii8+CiAgPHBhdGggZD0iTTggOHYuMDEiLz4KICA8cGF0aCBkPSJNMTIgMTZ2LTUiLz4KICA8cGF0aCBkPSJNMTYgMTZ2LTNhMiAyIDAgMSAwIC00IDAiLz4KICA8cGF0aCBkPSJNMyA3YTQgNCAwIDAgMSA0IC00aDEwYTQgNCAwIDAgMSA0IDR2MTBhNCA0IDAgMCAxIC00IDRoLTEwYTQgNCAwIDAgMSAtNCAtNGwwIC0xMCIvPgo8L3N2Zz4K);}

/* comparison / narrative sections on the dedicated project pages, reusing
   the Grav projects page's callout-box rhythm */
.proj-section{margin:48px 0;}
.proj-section h2{font-size:1.5rem; letter-spacing:-0.015em; margin:0 0 14px;}
.proj-section p{font-size:var(--text-min); color:var(--ink-soft); line-height:1.65; max-width:70ch; margin:0 0 16px;}

@media (max-width:760px){
  body{font-size:18px;}
  .site-head{flex-wrap:wrap; gap:14px 0; row-gap:14px;}
  .site-head nav{gap:18px;}
  .brand{flex-wrap:wrap; row-gap:2px;}
  .brand strong{white-space:nowrap;}
  .demo{grid-template-columns:1fr;}
  .demo-arrow{padding:10px 0;}
  .demo-arrow svg{transform:rotate(90deg);}
  .chrome-url{display:none;}
  .track{grid-template-columns:1fr; row-gap:32px;}
  .track::before{display:none;}
  .project{grid-template-columns:1fr; gap:20px; padding:28px;}
  .kit-grid{grid-template-columns:1fr; gap:26px;}
  .kit-example{flex-direction:column; align-items:flex-start; gap:10px;}
  .service-grid{grid-template-columns:1fr; gap:32px;}
  .grav-grid{grid-template-columns:1fr; gap:32px;}
  .thumb-grid{grid-template-columns:1fr; gap:20px;}
  .testi-grid{column-count:1;}
  .more{padding:28px;}
  .tools{padding:28px;}
  .tool{flex-direction:column; align-items:flex-start; gap:10px;}
  .prow{grid-template-columns:1fr; justify-items:start; gap:10px; padding:20px 24px;}
  .fmap{grid-template-columns:1fr 1fr; gap:24px 20px;}
}