/*
Theme Name: KaryaSiKecil
Theme URI: https://karyasikecil.com/
Author: KaryaSiKecil
Author URI: https://karyasikecil.com/
Description: Landing page, blog archive and single post theme for KaryaSiKecil. One accent colour, one wash of gradient down the page, restrained motion. Built for Elementor, Yoast SEO and Rank Math.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karyasikecil
Tags: blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ──────────────────────────────────────────────────────────────
   1. Tokens
   One accent (brand violet), one neutral family, one radius scale,
   one theme. Colour lives in the artwork, not in the chrome.
   ────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --accent: #6C5CE7;
  --accent-deep: #5544CE;
  --accent-soft: #F1EFFE;
  --accent-line: #DBD5FA;
  /* three wash stops; every section gradient runs between two of them, and the
     stop a section ends on is the stop the next one starts from, so the whole
     page reads as one continuous wash instead of stacked stripes */
  --wash-a: #FCFBFA;
  --wash-b: #F7F5FD;
  --wash-c: #F0EDFC;
  --paper: #FCFBFA;
  --card: #FFFFFF;
  --ink: #241F2E;
  --ink-2: #5F5A6B;
  --line: #E7E2DC;
  --ok: #1F8A6D;
  --danger: #C0392B;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --font-display: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ──────────────────────────────────────────────────────────────
   2. Reset and base
   ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

img, svg, video, iframe, embed, object { max-width: 100%; }
img, svg, video { display: block; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }

.h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); max-width: 20ch; }
.h2 + .lead { margin-top: 14px; }
.lead { color: var(--ink-2); max-width: 56ch; }

/* accessibility helpers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  left: 16px;
  top: 16px;
  z-index: 100000;
  display: block;
  padding: 14px 22px;
  background: var(--card);
  color: var(--accent);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 800;
  box-shadow: 0 12px 30px -12px rgba(45, 40, 60, .5);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ──────────────────────────────────────────────────────────────
   3. Buttons
   ────────────────────────────────────────────────────────────── */
.btn,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s;
}
.btn-primary,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] { background: var(--accent); color: #fff; }
.btn-primary:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover { background: var(--accent-deep); transform: translateY(-2px); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent-line); }
.btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.985); }

/* ──────────────────────────────────────────────────────────────
   4. Header and navigation
   ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(252, 251, 250, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}
.site-branding { display: flex; align-items: center; }
/* the flex has to sit on the <a>, not on the wrapper: the mark and the title are
   both inside the link, and .brand-mark is display:grid, so on a plain inline <a>
   it forces a line break and the title drops under the logo */
.site-branding a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.site-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.site-branding .custom-logo { max-height: 40px; width: auto; }
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.nav-menu { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-menu li { position: relative; }
.nav-menu a {
  font-weight: 500;
  font-size: .93rem;
  color: var(--ink-2);
  transition: color .2s;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a { color: var(--accent); text-decoration: none; }
/* one level of dropdown, enough for a marketing site */
.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 20px 44px -24px rgba(45, 40, 60, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); }
.nav-menu .sub-menu a:hover { background: var(--accent-soft); }

.nav-right { display: flex; align-items: center; gap: 6px; }
.nav-login {
  font-weight: 600;
  font-size: .93rem;
  color: var(--ink-2);
  padding: 12px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color .2s;
}
.nav-login:hover { color: var(--accent); text-decoration: none; }
.nav .btn { min-height: 44px; padding: 10px 20px; font-size: .92rem; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent-line);
  background: var(--card);
  border-radius: var(--r-sm);
  color: var(--accent);
  place-items: center;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ──────────────────────────────────────────────────────────────
   5. Landing sections
   Each gets a gradient; the stop it ends on is the stop the next
   one starts from, so eight gradients read as one wash.
   ────────────────────────────────────────────────────────────── */
.section { padding: clamp(72px, 9vw, 120px) 0; background: linear-gradient(180deg, var(--from), var(--to)); }
.s-hero    { --from: var(--wash-a); --to: var(--wash-b); }
.s-gallery { --from: var(--wash-b); --to: var(--wash-a); }
.s-steps   { --from: var(--wash-a); --to: var(--wash-c); }
.s-bento   { --from: var(--wash-c); --to: var(--wash-a); }
.s-quotes  { --from: var(--wash-a); --to: var(--wash-b); }
.s-pricing { --from: var(--wash-b); --to: var(--wash-a); }
.s-faq     { --from: var(--wash-a); --to: var(--wash-c); }
.s-cta     { --from: var(--wash-c); --to: var(--wash-a); }

/* hero */
.s-hero { padding-top: clamp(48px, 6vw, 84px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-grid h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.3rem);
  font-weight: 900;
  max-width: 19ch;
  margin-bottom: 20px;
}
.hero-grid h1 .stroke { position: relative; white-space: nowrap; padding-bottom: .06em; }
.hero-grid h1 .stroke svg { position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .34em; overflow: visible; }
.hero-grid h1 .stroke path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: ksk-draw .9s .35s var(--ease) forwards;
}
@keyframes ksk-draw { to { stroke-dashoffset: 0; } }
.hero-grid .lead { font-size: 1.06rem; margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-note { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); font-weight: 500; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

/* the paper sheet that holds the illustrations */
.sheet {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(12px, 2vw, 20px);
  transform: rotate(-1.1deg);
  transition: transform .5s var(--ease);
}
.sheet:hover { transform: rotate(0deg); }
.sheet-right { transform: rotate(1.1deg); border-color: var(--accent-line); }
.sheet-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #FDFDFF, #F6F4FE);
}
.sheet figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0 4px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--ink-2);
}
.sheet figcaption svg { width: 15px; height: 15px; color: var(--ok); flex: none; }

/* section head with an action on the right */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* horizontal card strip, used by the gallery and the testimonials */
.strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 24px 8px;
  margin-inline: -24px;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip > * { scroll-snap-align: start; }

.gal-card {
  flex: 0 0 min(62%, 240px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s;
}
.gal-card:hover { transform: translateY(-4px); border-color: var(--accent-line); }
.gal-card img { aspect-ratio: 1; object-fit: cover; width: 100%; background: #fff; }
/* stands in for a featured image that has not been set yet */
.thumb-ph {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--accent-soft);
  color: var(--accent-line);
}
.gal-card .thumb-ph { aspect-ratio: 1; }
.thumb-ph svg { width: 34%; max-width: 72px; height: auto; }
.cell-photo .thumb-ph { aspect-ratio: auto; height: 100%; min-height: 220px; }

.gal-card .gal-meta { margin-top: auto; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.gal-card .gal-meta b { font-family: var(--font-display); font-size: .95rem; display: block; color: var(--ink); }
.gal-card .gal-meta small { color: var(--ink-2); font-size: .8rem; }
.gal-card a { color: inherit; text-decoration: none; }

/* steps */
.steps-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.step-list { display: flex; flex-direction: column; gap: 26px; margin: 30px 0 34px; }
.step { display: flex; gap: 16px; }
/* chips sit on the tinted band, so they take the card colour to stay visible */
.step .n {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: 3px; }
.step p { color: var(--ink-2); font-size: .94rem; max-width: 44ch; }

/* bento */
.bento {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 44px;
}
.cell {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 30px 28px;
  transition: transform .25s var(--ease), border-color .25s;
}
.cell:hover { transform: translateY(-4px); border-color: var(--accent-line); }
.cell h3 { font-size: 1.1rem; margin-bottom: 8px; }
.cell p { color: var(--ink-2); font-size: .94rem; }
.cell .ico {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.cell-photo { grid-row: span 2; padding: 0; overflow: hidden; background: var(--accent-soft); display: grid; place-items: center; }
.cell-photo img { width: 100%; height: 100%; object-fit: contain; padding: 34px; }
.cell-wide { grid-column: span 2; }

/* testimonials */
.q-nav { display: flex; gap: 8px; }
.q-btn {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.q-btn:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.q-btn:active { transform: translateY(1px) scale(.96); }
.q-btn svg { width: 19px; height: 19px; }
.quote {
  flex: 0 0 min(84%, 344px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.quote:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 18px 40px -24px rgba(108, 92, 231, .5); }
.quote blockquote { font-size: .98rem; line-height: 1.6; }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote .ava {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  flex: none;
}
.quote .who { font-size: .86rem; font-weight: 600; }
.quote .where { font-size: .78rem; color: var(--ink-2); }

/* pricing */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
  margin-top: 44px;
  align-items: stretch;
}
.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.plan:hover { transform: translateY(-5px); border-color: var(--accent-line); box-shadow: 0 22px 50px -26px rgba(108, 92, 231, .55); }
.plan.popular { border-color: var(--accent); background: var(--accent-soft); }
.plan.popular:hover { border-color: var(--accent); box-shadow: 0 26px 60px -26px rgba(108, 92, 231, .7); }
.plan .flag {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .75rem;
  padding: 6px 14px;
  border-radius: 999px;
}
.plan h3 { font-size: 1.1rem; margin-bottom: 4px; }
.plan .tagline { font-size: .86rem; color: var(--ink-2); margin-bottom: 18px; min-height: 2.6em; }
.plan .amount { font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; }
.plan .amount small { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.plan ul { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: .9rem; color: var(--ink-2); }
.plan li svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--ok); }
.plan li strong { color: var(--ink); font-weight: 600; }
.plan .btn { margin-top: auto; width: 100%; }

/* faq */
.s-faq .h2 { max-width: 22ch; margin-inline: auto; text-align: center; }
.faq-list { max-width: 760px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.faq-item:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 16px 36px -26px rgba(108, 92, 231, .5); }
.faq-item[open] { border-color: var(--accent-line); box-shadow: 0 16px 36px -26px rgba(108, 92, 231, .45); }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  min-height: 52px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .chev {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease);
}
.faq-item .chev svg { width: 15px; height: 15px; }
.faq-item[open] .chev { transform: rotate(180deg); }
.faq-item .faq-body { padding: 0 22px 20px; color: var(--ink-2); font-size: .94rem; max-width: 62ch; }

/* closing cta */
.cta-inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, var(--accent-deep), var(--accent) 58%, #8B7CF0);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(52px, 8vw, 86px) clamp(24px, 5vw, 48px);
  text-align: center;
}
.cta-inner > * { position: relative; z-index: 1; }
.cta-inner h2 { color: #fff; margin: 0 auto 14px; max-width: 18ch; }
.cta-inner p { color: rgba(255, 255, 255, .82); max-width: 44ch; margin: 0 auto 30px; }
.cta-inner .btn { background: #fff; color: var(--accent); }
.cta-inner .btn:hover { background: var(--accent-soft); transform: translateY(-2px); }
/* crayons and doodles scattered behind the copy; decorative only */
.cta-decor { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.cta-decor.crayon { width: 38px; filter: drop-shadow(0 12px 22px rgba(20, 12, 60, .35)); }
.cta-decor.pencil { width: 34px; filter: drop-shadow(0 12px 22px rgba(20, 12, 60, .35)); }
.d1 { top: -16px; left: 5%; transform: rotate(18deg); }
.d2 { bottom: -30px; left: 16%; transform: rotate(-24deg); }
.d3 { top: -22px; right: 12%; transform: rotate(-14deg); }
.d4 { bottom: -26px; right: 5%; transform: rotate(28deg); }
.d5 { top: 26px; left: 34%; opacity: .85; }
.d6 { bottom: 30px; right: 30%; opacity: .6; }

/* ──────────────────────────────────────────────────────────────
   6. Blog: archive, single, comments
   ────────────────────────────────────────────────────────────── */
.site-main { background: linear-gradient(180deg, var(--wash-a), var(--wash-b) 40%, var(--wash-a)); }
.page-head { padding: clamp(48px, 6vw, 80px) 0 0; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 22ch; }
.page-head .lead { margin-top: 14px; }

.crumbs { font-size: .85rem; color: var(--ink-2); margin-bottom: 18px; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); }

.content-area { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 64px); padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 100px); }
.content-area.no-sidebar { grid-template-columns: minmax(0, 1fr); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 22px 50px -28px rgba(108, 92, 231, .55); }
.post-card .thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--accent-soft); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .thumb img { transform: scale(1.04); }
.post-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card h2, .post-card h3 { font-size: 1.12rem; line-height: 1.35; }
.post-card h2 a, .post-card h3 a { color: var(--ink); }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--accent); text-decoration: none; }
.post-card p { color: var(--ink-2); font-size: .92rem; }
.post-card .more { margin-top: auto; font-family: var(--font-display); font-weight: 800; font-size: .9rem; }

.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .82rem; color: var(--ink-2); }
.entry-meta a { color: var(--ink-2); }
.entry-meta a:hover { color: var(--accent); }
.cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .74rem;
}
.cat-pill:hover { text-decoration: none; }

/* single post */
.single-hero { max-width: 780px; margin: 0 auto; text-align: center; }
.single-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin: 14px 0 16px; }
.single-hero .entry-meta { justify-content: center; }
.single-figure { max-width: 1080px; margin: clamp(32px, 4vw, 48px) auto 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.single-figure img { width: 100%; }
.single-figure figcaption { padding: 12px 20px; font-size: .84rem; color: var(--ink-2); background: var(--card); }

/* long-form typography */
.entry-content { max-width: 760px; font-size: 1.04rem; }
.content-area.no-sidebar .entry-content { margin-inline: auto; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { font-size: 1.65rem; margin-top: 2em; }
.entry-content h3 { font-size: 1.3rem; margin-top: 1.7em; }
.entry-content h4 { font-size: 1.1rem; margin-top: 1.5em; }
.entry-content p, .entry-content li { color: #3B3646; }
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: .5em; }
.entry-content img, .entry-content figure { border-radius: var(--r-md); }
.entry-content figcaption { font-size: .84rem; color: var(--ink-2); margin-top: .6em; text-align: center; }
.entry-content blockquote {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 20px 26px;
  font-size: 1.06rem;
}
.entry-content blockquote p + p { margin-top: .8em; }
.entry-content blockquote cite { display: block; margin-top: .7em; font-size: .86rem; color: var(--ink-2); font-style: normal; }
.entry-content code, .entry-content kbd {
  background: var(--accent-soft);
  padding: .15em .4em;
  border-radius: 6px;
  font-size: .92em;
}
.entry-content pre {
  background: #241F2E;
  color: #F4F2FA;
  padding: 20px 22px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.6;
}
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.entry-content th { background: var(--accent-soft); font-family: var(--font-display); font-weight: 800; }
.entry-content .alignleft { float: left; margin: .4em 1.6em 1em 0; }
.entry-content .alignright { float: right; margin: .4em 0 1em 1.6em; }
.entry-content .aligncenter { margin-inline: auto; }
.entry-content .alignwide { width: min(1080px, 92vw); margin-inline: calc(50% - min(540px, 46vw)); max-width: none; }
.entry-content .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; border-radius: 0; }
.entry-content .wp-caption { max-width: 100%; }

.entry-footer { max-width: 760px; margin: 44px auto 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.content-area:not(.no-sidebar) .entry-footer { margin-inline: 0; }
.tag-pill {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: .82rem;
  font-weight: 600;
}
.tag-pill:hover { background: var(--accent-soft); text-decoration: none; }

/* prev/next */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.post-nav a {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 24px;
  color: var(--ink);
  transition: transform .25s var(--ease), border-color .25s;
}
.post-nav a:hover { transform: translateY(-3px); border-color: var(--accent-line); text-decoration: none; }
.post-nav span { display: block; font-size: .78rem; color: var(--ink-2); margin-bottom: 4px; }
.post-nav b { font-family: var(--font-display); font-size: .98rem; }
.post-nav .next { text-align: right; }

/* pagination */
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 48px; }
.nav-links .page-numbers {
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  transition: border-color .2s, color .2s, transform .2s var(--ease);
}
.nav-links .page-numbers:hover { border-color: var(--accent-line); color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.nav-links .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav-links .page-numbers.dots { border-color: transparent; background: none; }
.pagination .screen-reader-text { display: none; }

/* comments */
.comments-area { max-width: 760px; margin: 56px auto 0; }
.content-area:not(.no-sidebar) .comments-area { margin-inline: 0; }
.comments-area > h2 { font-size: 1.35rem; margin-bottom: 24px; }
.comment-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.comment-list .children { list-style: none; margin: 16px 0 0 clamp(16px, 4vw, 40px); padding: 0; display: flex; flex-direction: column; gap: 16px; }
.comment-body {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
.comment-author { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.comment-author img { border-radius: 999px; }
.comment-metadata { font-size: .8rem; color: var(--ink-2); margin: 4px 0 12px; }
.comment-content p + p { margin-top: .8em; }
.reply { margin-top: 12px; font-size: .86rem; font-weight: 600; }
.comment-respond { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px; }
.comment-reply-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 6px; }
.comment-form p { margin-top: 16px; }
.comment-form label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.comment-notes, .comment-form-cookies-consent label { font-size: .84rem; color: var(--ink-2); font-weight: 400; }

/* forms */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="password"], input[type="tel"], input[type="number"], textarea, select {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  transition: border-color .2s, background .2s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); background: var(--card); }
::placeholder { color: #8B8697; opacity: 1; }
textarea { min-height: 150px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }

/* sidebar and widgets */
.widget-area { display: flex; flex-direction: column; gap: 20px; }
.widget {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
}
.widget-title { font-family: var(--font-display); font-weight: 800; font-size: 1rem; margin-bottom: 14px; }
.widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .92rem; }
.widget ul ul { margin-top: 10px; padding-left: 14px; }
.widget a { color: var(--ink-2); }
.widget a:hover { color: var(--accent); }
.widget .search-form { display: flex; gap: 8px; }
.widget .search-form .btn { min-height: 46px; padding: 10px 18px; font-size: .9rem; }

/* search form */
.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }

/* 404 and empty states */
.state-block { text-align: center; max-width: 560px; margin: 0 auto; padding: clamp(56px, 8vw, 100px) 0; }
.state-block h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.state-block .error-code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 12vw, 7rem);
  line-height: 1;
  color: var(--accent-line);
  margin-bottom: 8px;
}
.state-block p { color: var(--ink-2); margin: 14px auto 28px; }
.state-block .search-form { max-width: 420px; margin: 0 auto 24px; }

/* ──────────────────────────────────────────────────────────────
   7. Footer
   ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--wash-a); padding: 0 0 48px; color: var(--ink-2); font-size: .88rem; }
.foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.foot-menu { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-weight: 500; }
.foot-menu a { color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; }
.foot-menu a:hover { color: var(--accent); }

/* ──────────────────────────────────────────────────────────────
   8. Motion
   One idea, used everywhere: content settles into place on entry.
   ────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ──────────────────────────────────────────────────────────────
   9. Responsive
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .content-area { grid-template-columns: minmax(0, 1fr); }
  .widget-area { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 940px) {
  .hero-grid, .steps-grid { grid-template-columns: 1fr; }
  .steps-grid .sheet { order: -1; }
  .bento { grid-template-columns: 1fr 1fr; }
  .cell-photo { grid-row: auto; grid-column: span 2; min-height: 240px; }
  .cell-wide { grid-column: span 2; }
}
@media (max-width: 820px) {
  .nav-menu { display: none; }
  .nav-toggle { display: grid; }
  .site-header.nav-open .nav-menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 12px 24px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -28px rgba(45, 40, 60, .5);
  }
  .site-header.nav-open .nav-menu a { display: block; padding: 12px 0; font-size: 1rem; }
  .site-header.nav-open .nav-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 14px;
  }
  .site-header { position: sticky; }
  .nav { position: relative; }

  /* the airy desktop rhythm turns into dead scroll on a phone */
  .section { padding: 56px 0; }
  .steps-grid, .hero-grid { gap: 28px; }
  .sec-head { margin-bottom: 20px; }
  .d5, .d6, .d2, .d3 { display: none; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .cell-photo, .cell-wide { grid-column: auto; }
  .cell-photo { min-height: 0; }
  .cell-photo img { padding: 20px; max-height: 280px; }
  .cell { padding: 24px 22px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn, .cta-inner .btn { width: 100%; }
  .nav { height: 64px; }
  .nav .btn { padding: 9px 16px; font-size: .86rem; }

  .section { padding: 44px 0; }
  .s-hero { padding-top: 32px; }
  .hero-grid .lead { margin-bottom: 22px; }
  .sheet { transform: none; }
  .bento, .price-grid { margin-top: 24px; }
  .strip { margin-top: 24px; }
  .faq-list { margin-top: 24px; }
  .step-list { gap: 20px; margin: 22px 0 26px; }
  .quote, .plan, .widget, .comment-body, .comment-respond { padding: 24px 22px; }
  .cta-inner { padding: 44px 22px; }
  .site-footer { padding-bottom: 32px; }
  .foot-inner { padding-top: 22px; }
  .entry-content { font-size: 1rem; }
}
@media (max-width: 380px) {
  .nav-login { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-grid h1 .stroke path { stroke-dashoffset: 0; }
}