/* Self-hosted Inter and Caveat for Mr Beanz. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/brand/fonts/Inter-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/brand/fonts/Inter-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/brand/fonts/Inter-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/brand/fonts/Caveat-600-latin.woff2") format("woff2"); }


:root {
  /* v3: one finish, from Beanpot finish B (warm chalk and coffee) plus Mr Beanz's own sticker accents. No gradients, no glow. */
  --plum: #30233d;
  --body: #5a4a66;
  --chalk: #f7f3eb;
  --cream: #fffdf8;
  --latte: #efe6d8;
  --line: #30233d;
  --coffee: #30233d;
  --espresso: #30233d;
  --crema: #e2b07a;
  --marigold: #f6b93b;
  --mint: #bdeccf;
  --coral: #ffb4a2;
  --sky: #bfe1ff;
  --lilac: #e4dcf6;
  --max: 1180px;
  --gutter: 20px;
  --sans: "Inter", system-ui, sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
  --paper-shadow: 6px 6px 0 #30233d;
  --soft-shadow: 4px 4px 0 #30233d;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--body); font: 400 17px/1.55 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--sans); color: var(--plum); margin: 0; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.hand { font-family: var(--hand); font-weight: 600; }
.chip { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 8px 11px; border-radius: 8px; color: var(--plum); }

/* Header: warm chalk, plum type. */
.top { background: var(--chalk); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.wordmark { text-decoration: none; font: 700 28px/1 var(--sans); color: var(--plum); letter-spacing: -.05em; }
.wordmark span { color: var(--coffee); }
.nav-links { display: flex; align-items: center; gap: 30px; font: 600 15px/1 var(--sans); }
.nav-links a { text-decoration: none; color: rgba(48,35,61,.78); }
.nav-links .help { background: var(--plum); color: var(--chalk); height: 42px; padding: 0 18px; border-radius: 12px; display: inline-flex; align-items: center; }

.frame { background: var(--cream); border: 1px solid var(--line); border-radius: 22px; padding: 12px 12px 0; box-shadow: var(--paper-shadow); transform: rotate(-1.5deg); transition: transform .3s ease; }
.frame img { border-radius: 14px; }
.frame figcaption { display: flex; justify-content: flex-end; padding: 14px 8px 15px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #9a8c7c; }

section { padding: 104px 0; }
.head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.head h2 { font-size: 48px; line-height: 1.06; letter-spacing: -.04em; }
.head p { margin-top: 14px; font: 400 21px/1.45 var(--sans); color: var(--coffee); max-width: 42ch; }
.head .all { flex: none; font: 600 16px/1 var(--sans); color: var(--coffee); text-decoration: none; }
.eyebrow { font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--coffee); margin-bottom: 16px; }

#about { background: var(--cream); }
.about { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; }
.about-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 14px 14px 18px; box-shadow: var(--soft-shadow); transform: rotate(-1deg); }
.about-card img { border-radius: 14px; width: 100%; }
.about-card .who { margin-top: 14px; display: grid; gap: 6px; padding: 0 4px; }
.about-card .who b { font: 700 18px/1.2 var(--sans); color: var(--plum); letter-spacing: -.02em; }
.about-card .who span { font-size: 14px; color: var(--body); }
.about h2 { font-size: 48px; line-height: 1.06; letter-spacing: -.04em; max-width: 18ch; }
.about .say { margin-top: 20px; font-size: 19px; line-height: 1.6; max-width: 54ch; }
.about .say + .say { margin-top: 14px; }
.about .say b { color: var(--plum); }
.about .sig { display: block; margin-top: 16px; font-size: 34px; color: var(--coffee); transform: rotate(-2deg); transform-origin: left; }
.done { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.done div { background: var(--chalk); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.done b { display: block; font: 700 30px/1 var(--sans); letter-spacing: -.04em; color: var(--plum); }
.done span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; }
.done small { display: block; margin-top: 6px; font-size: 12px; color: #9a8c7c; }

/* Models for business */
#models { background: var(--chalk); }
.checked { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); color: var(--plum); font: 600 13px/1 var(--sans); padding: 9px 13px; border-radius: 999px; margin-bottom: 20px; }
.checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2fb36b; }
.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.model { background: #fff; border: 1px solid var(--line); box-shadow: var(--soft-shadow); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s ease; }
.model:hover { transform: translateY(-4px); }
.model .job { align-self: start; }
.model h3 { font-size: 25px; line-height: 1.1; letter-spacing: -.035em; }
.model .maker { font-size: 14px; color: var(--body); margin-top: -6px; }
.model .eg { font-size: 14px; color: var(--body); }
.model .good { font-size: 17px; line-height: 1.4; color: var(--plum); font-weight: 600; }
.model .use { margin-top: auto; font-size: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.model .use b { color: var(--coffee); }
.swipe { display: none; margin-top: 12px; font-size: 24px; color: var(--coffee); }
.sample { margin-top: 22px; font-size: 13px; color: var(--body); }

/* Tools compared: Mr Beanz's sticker colours stay; flat, no glow. */
#tools { background: var(--cream); }
.vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vs { text-decoration: none; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; transition: transform .2s ease; }
.vs:hover { transform: translateY(-4px) rotate(-.4deg); }
.vs .faceoff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 700 17px/1 var(--sans); color: var(--plum); letter-spacing: -.02em; }
.vs .faceoff span { white-space: nowrap; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 4px 10px rgba(59,42,32,.08); }
.vs .faceoff i { font-style: normal; font-family: var(--hand); font-size: 30px; color: var(--plum); }
.vs h3 { font-size: 23px; line-height: 1.15; }
.vs p { font-size: 15px; color: var(--plum); opacity: .82; }
.vs .soon { margin-top: auto; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--plum); opacity: .7; }
.vs.a { background: var(--marigold); }
.vs.b { background: var(--mint); }
.vs.c { background: var(--sky); }

/* Useful reads */
.reads { background: var(--chalk); }
.read-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.read { display: flex; gap: 16px; align-items: flex-start; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; transition: transform .2s ease; }
.read:hover { transform: translateX(4px); }
.read .chip { flex: none; margin-top: 3px; }
.read h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.read p { font-size: 14px; margin-top: 4px; color: var(--body); }

/* Beanpot hand-off: espresso band, as Beanpot finish B. */
.beanpot-band { background: var(--espresso); padding: 92px 0; }
.beanpot { display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center; color: var(--chalk); }
.beanpot .frame { width: 160px; padding: 8px; border-radius: 18px; border: 0; transform: rotate(-2deg); }
.beanpot .frame img { border-radius: 10px; }
.beanpot h2 { color: var(--chalk); font-size: 42px; line-height: 1.06; letter-spacing: -.04em; }
.beanpot p { margin-top: 10px; font-size: 19px; color: rgba(247,243,235,.86); }
.beanpot a { text-decoration: none; background: var(--chalk); color: var(--plum); font: 600 17px/1 var(--sans); height: 56px; padding: 0 26px; display: inline-flex; align-items: center; border-radius: 12px; white-space: nowrap; }

footer { padding: 44px 0 52px; }
footer .container { display: flex; justify-content: space-between; gap: 20px; font-size: 14.5px; color: var(--body); }
footer a { text-decoration: none; margin-left: 20px; color: var(--body); }

:focus-visible { outline: 3px solid var(--coffee); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .model:hover, .vs:hover, .read:hover { transform: none; } }

@media (max-width: 1100px) { .model-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .nav { height: 64px; }
  .wordmark { font-size: 24px; }
  .nav-links a:not(.help) { display: none; }
  .nav-links .help { height: 38px; padding: 0 14px; font-size: 14px; }
  section { padding: 68px 0; }
  .head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .head h2, .about h2 { font-size: 32px; }
  .head p { font-size: 18px; }
  .about { grid-template-columns: 1fr; gap: 28px; }
  .about-card { max-width: 230px; }
  .about .say { font-size: 17px; }
  .about .sig { font-size: 30px; }
  .done { grid-template-columns: 1fr; gap: 10px; }
  .model-grid, .vs-grid, .read-list { grid-template-columns: 1fr; gap: 12px; }
  .model-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: none; }
  .model { scroll-snap-align: start; }
  .swipe { display: block; }
  .read { flex-direction: column; gap: 8px; }
  .vs { min-height: 0; padding: 22px; }
  .beanpot-band { padding: 60px 0; }
  .beanpot { grid-template-columns: 1fr; gap: 20px; }
  .beanpot .frame { width: 120px; }
  .beanpot h2 { font-size: 30px; }
  .beanpot p { font-size: 17px; }
  .beanpot a { justify-self: start; }
  footer .container { flex-direction: column; }
  footer a { margin: 0 18px 0 0; }
}

/* Approved finish C: marigold and plum. */
.top { background: var(--marigold); }
.frame, .about-card, .model, .read { border: 2px solid var(--plum); }
.wordmark span { color: var(--plum); }
.done div, .checked, .vs { border: 2px solid var(--plum); }
.done small, .frame figcaption { color: var(--body); }
.beanpot a { background: var(--marigold); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: white; color: var(--plum); padding: 12px 18px; border: 2px solid var(--plum); border-radius: 8px; }
.skip:focus { top: 10px; }
.sr-only, .hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nav-links a, footer a, .all { min-height: 44px; display: inline-flex; align-items: center; }
.nav-links .help { height: 44px; }
.inner-head { background: var(--chalk); padding: 72px 0; }
.inner-head h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.06; max-width: 20ch; }
.inner-head .lead { font-size: 21px; max-width: 54ch; margin-top: 20px; }
.inner-head .meta { font-size: 14px; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.inner-head-grid { display: grid; grid-template-columns: 1fr 300px; gap: 60px; align-items: center; }
.inner-head .pose { width: 300px; }
.article-panel { margin: 0; }
.article-panel img { border: 2px solid var(--plum); border-radius: 18px; box-shadow: var(--soft-shadow); }
.article-panel figcaption { margin-top: 14px; font-size: 13px; }
.reading { max-width: 780px; margin: 0 auto; padding: 64px 24px 80px; }
.prose { font-size: 18px; line-height: 1.8; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 24px; }
.prose h2 { font-size: 30px; line-height: 1.2; margin: 48px 0 18px; }
.prose h3 { font-size: 23px; line-height: 1.3; margin: 32px 0 14px; }
.prose li { margin: 8px 0; }
.prose a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.prose blockquote { margin-left: 0; padding: 12px 24px; border-left: 5px solid var(--marigold); font-size: 23px; color: var(--plum); }
.beanz-says { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: end; margin: 32px 0; }
.beanz-says img { width: 72px; height: auto; aspect-ratio: 400 / 472.5; }
.beanz-says .bubble { background: var(--chalk); border: 2px solid var(--plum); border-radius: 16px 16px 16px 4px; padding: 16px 18px; color: var(--body); font-size: .98rem; }
.beanz-says .bubble::before { content: "Mr Beanz"; display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); margin-bottom: 4px; }
.beanz-says .bubble p { margin: 0; }
.beanz-says.flip { grid-template-columns: minmax(0, 1fr) 72px; }
.beanz-says.flip img { order: 2; }
.beanz-says.flip .bubble { border-radius: 16px 16px 4px 16px; }
.article-links { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 28px; margin-top: 40px; border-top: 2px solid var(--plum); }
.article-links a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.section-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 20px; font-weight: 600; }
.guide-cards { background: var(--chalk); }
.guide-cards .model-grid { grid-auto-flow: initial; grid-template-columns: repeat(2, minmax(0,1fr)); overflow: visible; }
.guide-cards .model { gap: 14px; }
.guide-cards .source { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; font-weight: 600; }
.issue-list { display: grid; gap: 18px; }
.issue-card { background: #fff; border: 2px solid var(--plum); border-radius: 18px; padding: 24px; box-shadow: var(--soft-shadow); text-decoration: none; }
.issue-card h2 { font-size: 26px; margin: 10px 0; }
.brief-box { margin-top: 40px; background: var(--chalk); border: 2px solid var(--plum); border-radius: 20px; padding: 28px; }
.brief-box h2 { font-size: 28px; }
.brief-form { display: grid; gap: 14px; margin-top: 20px; }
.brief-form input { padding: 14px; border: 2px solid var(--plum); border-radius: 10px; font: inherit; width: 100%; }
.brief-form button { font: 600 16px/1.3 var(--sans); background: var(--plum); color: #fff; border: 0; border-radius: 10px; min-height: 48px; padding: 12px 20px; cursor: pointer; }
.brief-form button:disabled { opacity: .6; cursor: wait; }
.form-note, .form-status { font-size: 14px; }
.form-status[data-state=error] { color: #a02424; }
.form-status[data-state=ok] { color: #205530; }
footer.site-footer { padding: 44px 0 52px; }
footer.site-footer .container { flex-wrap: wrap; align-items: center; }
footer.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
footer.site-footer a { margin: 0; }
@media (max-width: 900px) {
 .inner-head { padding: 40px 0 48px; }
 .inner-head-grid { grid-template-columns: 1fr; gap: 32px; }
 .inner-head .lead { font-size: 18px; }
 .inner-head .pose { width: 220px; justify-self: center; }
 .article-panel { max-width: 300px; justify-self: center; }
 .reading { padding: 40px 20px 56px; }
 .prose { font-size: 17px; }
 .prose h2 { font-size: 27px; }
 .guide-cards .model-grid { grid-template-columns: 1fr; }
 .beanz-says { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
 .beanz-says img { width: 64px; }
 .beanz-says.flip { grid-template-columns: minmax(0, 1fr) 64px; }
 .head .all { line-height: 1.4; }
 .nav { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

.about h1 { font-size: 48px; line-height: 1.06; letter-spacing: -.04em; max-width: 18ch; }
@media(max-width:900px) { .about h1 { font-size:32px; } }

.head h1 { font-size:48px; line-height:1.06; letter-spacing:-.04em; }
@media(max-width:900px) { .head h1 { font-size:32px; } }
/* Keep the spam trap offscreen without giving it the email field's width. */
.brief-form .hp { width: 1px; height: 1px; padding: 0; border: 0; }

.read h2 { font-size:19px; line-height:1.25; letter-spacing:-.02em; }
.vs h2 { font-size:23px; line-height:1.15; }

.top { position: relative; isolation: isolate; overflow: hidden; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark .mark { width: 40px; height: auto; }
.wordmark .name { color: var(--plum); white-space: nowrap; }
.wordmark .name span { color: var(--plum); }
.hello { display: flex; align-items: baseline; gap: 12px; min-height: 54px; padding-bottom: 18px; color: var(--plum); }
.hello .hand { flex: none; font-size: 30px; }
.hello a { color: inherit; font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.cats-m { display: none; }
.motif::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .045; background: var(--plum); -webkit-mask-image: url("/brand/mrbeanz-head.svg"), url("/brand/mrbeanz-head.svg"), url("/brand/mrbeanz-head.svg"), url("/brand/mrbeanz-head.svg"); mask-image: url("/brand/mrbeanz-head.svg"), url("/brand/mrbeanz-head.svg"), url("/brand/mrbeanz-head.svg"), url("/brand/mrbeanz-head.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 120px, 72px, 96px, 56px; mask-size: 120px, 72px, 96px, 56px; -webkit-mask-position: 1% 135%, 99% 120%, 82% -60%, 40% 150%; mask-position: 1% 135%, 99% 120%, 82% -60%, 40% 150%; }
.motif-light { position: relative; isolation: isolate; overflow: hidden; }
.motif-light::before { background: var(--chalk); opacity: .06; }

.front { padding: 48px 0 56px; }
.front-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.lead-big { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; padding: 24px; background: #fff; border: 2px solid var(--plum); box-shadow: 6px 6px 0 var(--plum); color: inherit; text-decoration: none; }
.lead-art { align-self: start; background: var(--chalk); }
.lead-art img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.lead-copy { display: grid; align-content: start; gap: 16px; }
.lead-copy h1 { font-size: 40px; line-height: 1.04; }
.lead-copy > p { color: var(--body); }
.cat { display: inline-flex; align-items: center; align-self: start; min-height: 28px; padding: 6px 9px; color: var(--plum); font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--plum); }
.cat.howto, .browse-link.howto, .post-art.howto { background: var(--marigold); }
.cat.tools, .browse-link.tools, .post-art.tools { background: var(--mint); }
.cat.cases, .browse-link.cases, .post-art.cases { background: var(--coral); }
.cat.models, .browse-link.models, .post-art.models { background: var(--sky); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--body); font-size: 14px; }
.post-meta span + span::before { content: "·"; margin-right: 10px; }
.latest { display: grid; gap: 0; }
.latest .eyebrow { margin-bottom: 10px; }
.latest > a { display: grid; gap: 10px; padding: 18px 0; color: inherit; text-decoration: none; border-top: 2px solid var(--plum); }
.latest h2 { font-size: 21px; line-height: 1.18; }
.all-posts { display: inline-flex; min-height: 44px; align-items: center; margin-top: 10px; color: var(--plum); font-weight: 700; }
.browse { padding: 34px 0; background: var(--chalk); }
.browse-links { display: flex; flex-wrap: wrap; gap: 12px; }
.browse-link { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; padding: 8px 12px; color: var(--plum); text-decoration: none; border: 2px solid var(--plum); }
.browse-link b { font-size: 13px; }
.posts { padding: 72px 0; }
.posts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.post { display: grid; align-content: start; gap: 14px; padding: 14px; color: inherit; text-decoration: none; background: #fff; border: 2px solid var(--plum); box-shadow: 4px 4px 0 var(--plum); }
.post-art { display: grid; place-items: center; min-height: 150px; background: var(--chalk); }
.post-art img { width: 100%; height: 100%; max-height: 190px; object-fit: contain; }
.post > div:last-child { display: grid; align-content: start; gap: 10px; }
.post h2 { font-size: 20px; line-height: 1.18; }
.brief-band { padding: 68px 0; background: var(--plum); color: var(--chalk); }
.brief-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 42px; align-items: center; }
.brief-band h2 { color: var(--chalk); font-size: 42px; }
.brief-band p { margin-top: 12px; font-size: 19px; }
.brief-band .brief-form { margin-top: 0; }
.brief-band .brief-form input { background: #fff; }
.brief-band .brief-form button { background: var(--marigold); color: var(--plum); }
.brief-band .form-note, .brief-band .form-status[data-state=info] { color: var(--chalk); }
.me { padding: 72px 0; background: var(--chalk); }
.me-inner { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; align-items: start; }
.me-inner > img { width: 180px; background: #fff; border: 2px solid var(--plum); box-shadow: 4px 4px 0 var(--plum); }
.me h2 { font-size: 42px; }
.me p { max-width: 60ch; margin-top: 14px; font-size: 19px; }

@media (max-width: 1100px) { .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .wordmark .mark { width: 32px; }
  .hello { min-height: 0; align-items: flex-start; flex-direction: column; gap: 3px; padding-bottom: 14px; font-size: 15px; }
  .hello .hand { font-size: 26px; }
  .cats-m { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
  .cats-m a { display: inline-flex; flex: none; min-height: 44px; align-items: center; padding: 8px 12px; color: var(--plum); text-decoration: none; background: #fff; border: 2px solid var(--plum); }
  .motif::before { -webkit-mask-size: 96px, 56px, 80px, 44px; mask-size: 96px, 56px, 80px, 44px; }
  .front { padding: 26px 0 44px; }
  .front-grid { grid-template-columns: 1fr; gap: 34px; }
  .lead-big { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .lead-copy h1 { font-size: 30px; }
  .lead-art { order: -1; }
  .posts { padding: 52px 0; }
  .posts-grid { grid-template-columns: 1fr; gap: 12px; }
  .post { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 10px; }
  .post-art { min-height: 104px; height: 104px; }
  .post-art img { max-height: 104px; }
  .post h2 { font-size: 18px; }
  .brief-band { padding: 52px 0; }
  .brief-band-inner, .me-inner { grid-template-columns: 1fr; gap: 24px; }
  .brief-band h2, .me h2 { font-size: 32px; }
  .brief-band p, .me p { font-size: 17px; }
  .me-inner > img { width: 140px; }
}