/* Moonkeeper: one notebook for the entire site. Edit ink colors and shared frames here. */
@font-face{font-family:Caveat;src:url('assets/fonts/Caveat-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Caveat;src:url('assets/fonts/Caveat-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Kalam;src:url('assets/fonts/Kalam-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Kalam;src:url('assets/fonts/Kalam-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--paper:#fbfaf3;--grid:rgba(90,140,200,.28);--margin-line:rgba(220,90,90,.55);--ink-blue:#2b4a8b;--ink-red:#b63535;--ink-green:#2f7a4a;--ink-black:#2b2b2b;--ink-orange:#c96a1e;--ink-purple:#6a3d8a;--blue:var(--ink-blue);--red:var(--ink-red);--green:var(--ink-green);--orange:var(--ink-orange);--ink:var(--ink-black)}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;min-height:100%}.svg-filters{position:absolute;width:0;height:0;overflow:hidden}
body{color:var(--ink-black);background:radial-gradient(ellipse at top,#f3f0e6,#e8e4d6);-webkit-font-smoothing:antialiased}
/* Shared paper, margin line and curl. Individual pages set their width and padding below. */
.page{position:relative;margin-inline:auto;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px;box-shadow:0 1px 0 #0000000a,0 18px 40px -12px #28283c40,0 4px 12px #28283c14}
.page::before{content:"";position:absolute;top:0;bottom:0;left:66px;width:2px;background:var(--margin-line);filter:url(#wobble-soft)}
.page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 92%,#0000000f)}
a:focus-visible{outline:2px solid var(--ink-red);outline-offset:4px}

/* Home page */
body.site-home {margin: 0;
    padding: 0;
    min-height: 100%;}
body.site-home {background:
      radial-gradient(ellipse at top, #f3f0e6 0%, #e8e4d6 100%);
    font-family: 'Caveat', 'Kalam', cursive;
    color: var(--ink-black);
    padding: 32px 16px 64px;
    -webkit-font-smoothing: antialiased;}
body.site-home .page {position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 56px 56px 90px;
    background-color: var(--paper);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 22px 22px, 22px 22px;
    background-position: -1px -1px, -1px -1px;
    box-shadow:
      0 1px 0 rgba(0,0,0,0.04),
      0 18px 40px -12px rgba(40,40,60,0.25),
      0 4px 12px rgba(40,40,60,0.08);
    border-radius: 3px;
    transform: rotate(-0.15deg);}
body.site-home .page::before {content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 66px;
    width: 2px;
    background: var(--margin-line);
    filter: url(#wobble-soft);}
body.site-home .page::after {content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 92%, rgba(0,0,0,0.06) 100%);
    border-radius: 3px;}
body.site-home .header {display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 6px;}
body.site-home h1 {font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(38px, 6vw, 64px);
    margin: 0;
    color: var(--ink-blue);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 rgba(43,74,139,0.15);
    filter: url(#wobble-soft);}
body.site-home .moon {width: 40px;
    height: 40px;
    flex-shrink: 0;
    transform: translateY(6px);
    color: var(--ink-orange);}
body.site-home .subtitle {font-family: 'Kalam', cursive;
    font-size: 18px;
    color: var(--ink-black);
    opacity: 0.75;
    margin: 0 0 34px;
    line-height: 1.4;}
body.site-home .cards {display: flex;
    flex-direction: column;
    gap: 28px;}
body.site-home .card {position: relative;
    padding: 20px 26px 22px;
    color: var(--ink-black);}
body.site-home .card__frame {position: absolute;
    inset: 0;
    border: 2.2px solid var(--ink);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    filter: url(#wobble);
    pointer-events: none;}
body.site-home .card--blue {--ink: var(--ink-blue);}
body.site-home .card--red {--ink: var(--ink-red);}
body.site-home .card--green {--ink: var(--ink-green);}
body.site-home .card--purple {--ink: var(--ink-purple);}
body.site-home .card--red    .card__frame {border-radius: 15px 240px 20px 220px / 240px 15px 220px 20px;}
body.site-home .card--green  .card__frame {border-radius: 220px 20px 245px 15px / 20px 245px 15px 220px;}
body.site-home .card--purple .card__frame {border-radius: 20px 220px 15px 240px / 245px 15px 220px 20px;}
body.site-home .card__content {position: relative;
    z-index: 1;}
body.site-home .card__title {font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 30px;
    margin: 0 0 6px;
    color: var(--ink);
    display: inline-block;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 1px;}
body.site-home .card__tag {display: inline-block;
    font-family: 'Kalam', cursive;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: lowercase;
    color: var(--ink);
    opacity: 0.85;
    margin-left: 10px;
    vertical-align: baseline;}
body.site-home .card__desc {font-family: 'Kalam', cursive;
    font-size: 16px;
    line-height: 1.55;
    margin: 10px 0 16px;}
body.site-home .card__links {display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-family: 'Kalam', cursive;
    font-size: 16px;}
body.site-home .card__links a {color: var(--ink);
    text-decoration: none;
    padding: 2px 0;
    border-bottom: 1.6px dashed var(--ink);
    transition: opacity .15s;}
body.site-home .card__links a:hover {opacity: 0.65;}
body.site-home .card__links a:focus-visible {outline: 2px solid currentColor; outline-offset: 4px;}
body.site-home .card__links a::before {content: "в†’ ";
    opacity: 0.7;}
body.site-home .footer {margin-top: 46px;
    font-family: 'Kalam', cursive;
    font-size: 15px;
    color: var(--ink-black);
    opacity: 0.65;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;}
body.site-home .margin-doodle {position: absolute;
    color: var(--ink-black);
    pointer-events: none;
    opacity: 0.85;}
body.site-home .doodle-smile-1 {top: 90px;  left: 12px;  color: var(--ink-red);    transform: rotate(-8deg);}
body.site-home .doodle-smile-2 {top: 340px; left: 8px;   color: var(--ink-blue);   transform: rotate(6deg);}
body.site-home .doodle-smile-3 {bottom: 120px; left: 14px; color: var(--ink-green); transform: rotate(-4deg);}
body.site-home .doodle-star {top: 200px; right: 14px; color: var(--ink-orange); transform: rotate(12deg);}
body.site-home .doodle-moon {top: 22px;  right: 22px; color: var(--ink-purple); transform: rotate(-6deg);}
body.site-home .doodle-heart {bottom: 60px; right: 26px; color: var(--ink-red); transform: rotate(8deg);}
body.site-home .hatch {position: absolute;
    pointer-events: none;
    opacity: 0.55;
    background-image: repeating-linear-gradient(
      45deg,
      currentColor 0 1.4px,
      transparent 1.4px 6px
    );}
body.site-home .hatch-1 {top: 260px; left: 10px;  width: 44px; height: 60px; color: var(--ink-blue);   transform: rotate(-2deg);}
body.site-home .hatch-2 {top: 470px; left: 10px;  width: 40px; height: 44px; color: var(--ink-red);    transform: rotate(3deg);}
body.site-home .hatch-3 {top: 160px; right: 12px; width: 38px; height: 52px; color: var(--ink-green);  transform: rotate(-3deg);}
body.site-home .hatch-4 {bottom: 40px; right: 16px; width: 42px; height: 48px; color: var(--ink-purple); transform: rotate(4deg);}
@media (max-width: 720px) {
body.site-home {padding: 16px 8px 40px;}
body.site-home .page {padding: 32px 22px 36px 52px;
      transform: none;}
body.site-home .page::before {left: 34px;}
body.site-home .margin-doodle, body.site-home .hatch {display: none;}
body.site-home .card {padding: 20px 18px 22px;}
body.site-home .card__title {font-size: 26px;}
body.site-home .card__tag {display: block; margin: 0 0 4px;}
body.site-home .header {flex-wrap: wrap;}
}

/* Hobo page */
body.site-hobo {margin:0; padding:26px 14px 60px; color:var(--ink); background:radial-gradient(ellipse at top,#f3f0e6,#e8e4d6); font-family:Kalam,Caveat,cursive; -webkit-font-smoothing:antialiased;}
body.site-hobo .page {position:relative; max-width:1050px; min-height:100vh; margin:auto; padding:30px 56px 55px 91px; background-color:var(--paper); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:22px 22px; background-position:-1px -1px; box-shadow:0 18px 40px -12px rgba(40,40,60,.25),0 4px 12px rgba(40,40,60,.08); transform:rotate(-.12deg);}
body.site-hobo .page::before {content:""; position:absolute; left:66px; top:0; bottom:0; width:2px; background:rgba(220,90,90,.55);}
body.site-hobo .page::after {content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 93%,rgba(0,0,0,.055));}
body.site-hobo .content {position:relative; z-index:1;}
body.site-hobo a {color:var(--blue); text-underline-offset:4px;}
body.site-hobo a:hover {color:var(--red);}
body.site-hobo a:focus-visible {outline:2px solid var(--red); outline-offset:4px;}
body.site-hobo .crumb {font-size:16px;}
body.site-hobo .crumb a {text-decoration:none; border-bottom:1px dashed;}
body.site-hobo .hero {display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:12px; margin:20px 0 36px;}
body.site-hobo .eyebrow {color:var(--green); font-size:17px; margin:20px 0 3px; transform:rotate(-1deg);}
body.site-hobo h1, body.site-hobo h2, body.site-hobo h3 {font-family:Caveat,cursive; line-height:1.02;}
body.site-hobo h1 {color:var(--blue); font-size:clamp(62px,10vw,118px); margin:0; letter-spacing:-2px; text-shadow:1px 1px rgba(43,74,139,.15);}
body.site-hobo .hero__lead {font-size:clamp(18px,2.2vw,23px); line-height:1.42; max-width:600px; margin:18px 0;}
body.site-hobo .scribble {display:inline; background:linear-gradient(transparent 67%,rgba(243,191,67,.52) 67%);}
body.site-hobo .hero__image {display:block; width:auto; height:auto; max-width:100%; max-height:330px; justify-self:center; object-fit:contain; transform:rotate(4deg); filter:drop-shadow(2px 5px 1px rgba(43,74,139,.12));}
body.site-hobo .button {display:inline-block; padding:9px 26px 7px; margin:6px 12px 4px 0; color:var(--paper); background:var(--blue); border:2px solid var(--blue); border-radius:8px 20px 9px 19px; font-size:19px; text-decoration:none; transform:rotate(-1.2deg);}
body.site-hobo .button:hover {color:white; background:var(--red); border-color:var(--red);}
body.site-hobo .link {font-size:17px;}
body.site-hobo .margin-note {color:var(--red); font-family:Caveat,cursive; font-size:22px; transform:rotate(-6deg);}
body.site-hobo .hero .margin-note {margin:13px 0;}
body.site-hobo section {margin-top:34px;}
body.site-hobo h2 {color:var(--blue); font-size:clamp(40px,5vw,60px); margin:0 0 10px; display:inline-block; border-bottom:2px solid var(--blue); transform:rotate(-.8deg);}
body.site-hobo h3 {font-size:31px; margin:0 0 6px; color:var(--blue);}
body.site-hobo p {line-height:1.55;}
body.site-hobo .intro {max-width:740px; font-size:18px; margin:0 0 20px;}
body.site-hobo .rules {display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
body.site-hobo .rule {position:relative; padding:18px 20px 18px; min-height:170px;}
body.site-hobo .rule::before, body.site-hobo .item::before {content:""; position:absolute; inset:0; border:2px solid var(--rule-color,var(--blue)); border-radius:14px 65px 16px 75px / 69px 15px 65px 13px; pointer-events:none;}
body.site-hobo .rule:nth-child(2) {--rule-color:var(--red); transform:rotate(1deg);}
body.site-hobo .rule:nth-child(3) {--rule-color:var(--green); transform:rotate(-.7deg);}
body.site-hobo .rule:nth-child(2) h3 {color:var(--red);}
body.site-hobo .rule:nth-child(3) h3 {color:var(--green);}
body.site-hobo .rule p {margin:0; font-size:16px;}
body.site-hobo .num {position:absolute; top:-13px; right:18px; background:var(--paper); padding:0 6px; font:700 29px Caveat,cursive; color:var(--rule-color,var(--blue));}
body.site-hobo .items {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
body.site-hobo .item {position:relative; padding:8px 13px 13px; --rule-color:var(--blue);}
body.site-hobo .item:nth-child(2) {--rule-color:var(--orange); transform:rotate(-1deg);}
body.site-hobo .item:nth-child(3) {--rule-color:var(--green); transform:rotate(.7deg);}
body.site-hobo .item:nth-child(4) {--rule-color:var(--red); transform:rotate(-.6deg);}
body.site-hobo .item__picture {height:180px; display:grid; place-items:center;}
body.site-hobo .item img {display:block; max-width:100%; max-height:177px; object-fit:contain; filter:drop-shadow(1px 3px 0 rgba(43,74,139,.12));}
body.site-hobo .item h3 {font-size:27px; color:var(--rule-color); line-height:1.05;}
body.site-hobo .item p {font-size:14px; line-height:1.4; margin:5px 0;}
body.site-hobo .label {font:700 14px Caveat,cursive; color:var(--rule-color);}
body.site-hobo .small {font-size:14px; opacity:.78;}
body.site-hobo .chat-guide {display:grid; grid-template-columns:1fr 1fr; gap:20px;}
body.site-hobo .chat-panel {position:relative; padding:16px 22px 20px;}
body.site-hobo .chat-panel::before {content:""; position:absolute; inset:0; border:2px solid var(--panel-ink); border-radius:18px 70px 16px 68px / 68px 14px 70px 16px; pointer-events:none;}
body.site-hobo .chat-panel--group {--panel-ink:var(--red);}
body.site-hobo .chat-panel--private {--panel-ink:var(--green); transform:rotate(.6deg);}
body.site-hobo .chat-panel h3 {color:var(--panel-ink); font-size:36px;}
body.site-hobo .chat-panel p {font-size:16px; margin:8px 0 12px;}
body.site-hobo .screens {display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px, min(88%, 690px)); gap:16px; overflow-x:auto; padding:8px 6px 22px; scroll-snap-type:x mandatory; scrollbar-color:var(--blue) transparent;}
body.site-hobo .screen {margin:0; min-width:0; scroll-snap-align:start;}
body.site-hobo .screen a {display:block; padding:9px; background:#fbfaf3; border:2px solid var(--blue); border-radius:10px 24px 9px 20px; box-shadow:3px 5px 0 rgba(43,74,139,.14);}
body.site-hobo .screen:nth-child(2n) a {border-color:var(--red); transform:rotate(.35deg);}
body.site-hobo .screen img {display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; background:#0e1621;}
body.site-hobo .screen figcaption {padding:6px 9px; font:700 23px Caveat,cursive; color:var(--blue);}
body.site-hobo .commands {margin:0; padding:0; list-style:none;}
body.site-hobo .commands li {margin:10px 0; line-height:1.45;}
body.site-hobo .commands code {display:inline-block; padding:0 5px; margin-right:4px; color:var(--panel-ink); background:rgba(250,241,207,.75); font:700 19px Caveat,cursive;}
body.site-hobo .update {display:grid; grid-template-columns:auto 1fr; align-items:center; gap:22px; border-top:2px dashed var(--red); border-bottom:2px dashed var(--red); padding:18px 5px; max-width:840px;}
body.site-hobo .update__stamp {font:700 45px Caveat,cursive; color:var(--red); transform:rotate(-8deg); white-space:nowrap;}
body.site-hobo .update h3 {color:var(--red);}
body.site-hobo .update p {margin:0; font-size:17px;}
body.site-hobo .play {display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:42px; padding:15px 20px; background:rgba(243,191,67,.17); border-radius:40% 7% 38% 6% / 9% 39% 8% 35%;}
body.site-hobo .play h2 {border:0; margin:0;}
body.site-hobo .play p {margin:3px 0;}
body.site-hobo footer {margin-top:46px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:15px; opacity:.75;}
@media(max-width:760px) {
body.site-hobo {padding:12px 7px 30px;}
body.site-hobo .page {padding:22px 20px 36px 45px; transform:none;}
body.site-hobo .page::before {left:30px;}
body.site-hobo .hero {grid-template-columns:1fr; margin:18px 0 26px;}
body.site-hobo .hero__image {grid-row:1; max-height:180px; justify-self:end; margin-bottom:-45px; opacity:.93;}
body.site-hobo .hero__copy {position:relative; z-index:1;}
body.site-hobo .rules, body.site-hobo .chat-guide {grid-template-columns:1fr; gap:12px;}
body.site-hobo .rule {min-height:0;}
body.site-hobo .items {grid-template-columns:repeat(2,minmax(0,1fr));}
body.site-hobo .update {grid-template-columns:1fr; gap:0;}
body.site-hobo .play {display:block;}
}
@media(max-width:410px) {
body.site-hobo .hero__image {max-height:145px; margin-bottom:-30px;}
body.site-hobo h1 {font-size:64px;}
body.site-hobo .items {grid-template-columns:1fr;}
body.site-hobo .item {display:grid; grid-template-columns:105px 1fr; gap:0 10px; align-items:center;}
body.site-hobo .item__picture {grid-row:1 / 4; height:120px;}
body.site-hobo .item img {max-height:115px;}
body.site-hobo .item h3 {font-size:25px;}
}

/* Updates page */
body.site-updates {margin:0; padding:26px 14px 60px; background:radial-gradient(ellipse at top,#f3f0e6,#e8e4d6); color:var(--ink); font-family:Kalam,Caveat,cursive;}
body.site-updates .page {position:relative; max-width:900px; margin:auto; min-height:100vh; padding:35px 52px 60px 90px; background-color:var(--paper); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:22px 22px; background-position:-1px -1px; box-shadow:0 18px 40px -12px rgba(40,40,60,.25),0 4px 12px rgba(40,40,60,.08);}
body.site-updates .page::before {content:""; position:absolute; top:0; bottom:0; left:66px; width:2px; background:rgba(220,90,90,.55);}
body.site-updates main {position:relative; z-index:1;}
body.site-updates a {color:var(--blue); text-underline-offset:4px;}
body.site-updates a:hover {color:var(--red);}
body.site-updates a:focus-visible {outline:2px solid var(--red); outline-offset:4px;}
body.site-updates .crumb {font-size:15px;}
body.site-updates .crumb a {text-decoration:none; border-bottom:1px dashed;}
body.site-updates h1, body.site-updates h2, body.site-updates h3 {font-family:Caveat,cursive; line-height:1.05;}
body.site-updates h1 {color:var(--blue); font-size:clamp(54px,9vw,84px); margin:22px 0 8px; transform:rotate(-1deg);}
body.site-updates .lead {max-width:610px; font-size:18px; line-height:1.55; margin:0 0 30px;}
body.site-updates .feed {border-left:2px dashed var(--red); margin-left:13px; padding-left:29px;}
body.site-updates .post {position:relative; margin:0 0 34px; padding:16px 20px 20px; background:rgba(251,250,243,.72); border:2px solid var(--post-ink,var(--blue)); border-radius:14px 63px 18px 75px / 69px 16px 65px 14px;}
body.site-updates .post:nth-child(2) {--post-ink:var(--green); transform:rotate(.5deg);}
body.site-updates .post:nth-child(3) {--post-ink:var(--red); transform:rotate(-.4deg);}
body.site-updates .post::before {content:""; position:absolute; left:-39px; top:23px; width:14px; height:14px; background:var(--paper); border:2px solid var(--post-ink,var(--blue)); border-radius:50%;}
body.site-updates .post__type {font:700 17px Caveat,cursive; color:var(--post-ink,var(--blue));}
body.site-updates h2 {color:var(--post-ink,var(--blue)); font-size:42px; margin:0 0 6px;}
body.site-updates h3 {font-size:25px; margin:0 0 4px;}
body.site-updates p {line-height:1.55;}
body.site-updates .post p {margin:5px 0 11px;}
body.site-updates .post ul {padding-left:24px; line-height:1.55;}
body.site-updates .post li {margin:7px 0;}
body.site-updates .post code {font:700 20px Caveat,cursive; color:var(--post-ink,var(--blue));}
body.site-updates .mentor {float:right; width:165px; max-width:34%; margin:-8px 0 8px 15px;}
body.site-updates .bosses {display:block; width:min(100%,680px); height:auto; max-height:290px; object-fit:contain; margin:8px auto 16px;}
body.site-updates .sticker-row {display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0 4px;}
body.site-updates .sticker {text-align:center; min-width:0;}
body.site-updates .sticker img {display:block; width:100%; height:105px; object-fit:contain;}
body.site-updates .sticker span {font:700 18px Caveat,cursive;}
body.site-updates .fine {font-size:14px; opacity:.75;}
body.site-updates footer {margin-top:40px; font-size:15px; opacity:.78;}
@media(max-width:640px) {
body.site-updates {padding:12px 7px 30px;}
body.site-updates .page {padding:25px 18px 35px 43px;}
body.site-updates .page::before {left:29px;}
body.site-updates .feed {margin-left:7px; padding-left:15px;}
body.site-updates .post {padding:13px;}
body.site-updates .post::before {left:-25px;}
body.site-updates .sticker-row {grid-template-columns:repeat(2,1fr);}
body.site-updates h2 {font-size:35px;}
body.site-updates .mentor {width:100px;}
}

/* Quest page */
body.site-quest {margin:0;padding:26px 14px 64px;background:radial-gradient(ellipse at top,#f3f0e6,#e8e4d6);color:var(--ink);font-family:Kalam,Caveat,cursive}
body.site-quest .page {position:relative;max-width:960px;min-height:100vh;margin:auto;padding:34px 56px 66px 90px;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px;box-shadow:0 18px 40px -12px #28283c40,0 4px 12px #28283c14}
body.site-quest .page::before {content:"";position:absolute;left:65px;top:0;bottom:0;width:2px;background:#db64647f}
body.site-quest main {position:relative}
body.site-quest a {color:var(--blue);text-underline-offset:4px}
body.site-quest a:hover {color:var(--red)}
body.site-quest a:focus-visible {outline:2px solid var(--red);outline-offset:4px}
body.site-quest .topline {display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
body.site-quest .crumb {font-size:16px}
body.site-quest .crumb a {text-decoration:none;border-bottom:1px dashed}
body.site-quest .quicknav {display:flex;gap:14px;flex-wrap:wrap;font:700 19px Caveat,cursive}
body.site-quest h1, body.site-quest h2, body.site-quest h3 {font-family:Caveat,cursive;line-height:1.04}
body.site-quest h1 {margin:24px 0 8px;color:var(--blue);font-size:clamp(55px,9vw,90px);transform:rotate(-1deg)}
body.site-quest h2 {margin:0 0 13px;color:var(--blue);font-size:clamp(36px,5vw,49px)}
body.site-quest h3 {margin:0 0 8px;color:var(--red);font-size:32px}
body.site-quest p {line-height:1.55;margin:0 0 14px}
body.site-quest .eyebrow {color:var(--green);font:700 22px Caveat,cursive}
body.site-quest .lede {max-width:710px;font-size:clamp(19px,2.4vw,23px)}
body.site-quest .actions {display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0 28px}
body.site-quest .button {display:inline-block;background:var(--blue);border:2px solid var(--blue);border-radius:12px 30px 10px 25px;color:#fff;text-decoration:none;padding:11px 24px;font:700 22px Caveat,cursive;transform:rotate(-1deg)}
body.site-quest .button:hover {background:var(--red);border-color:var(--red);color:#fff}
body.site-quest .textlink {font:700 20px Caveat,cursive}
body.site-quest .hero-note {border-left:3px solid var(--green);padding:5px 0 5px 16px;margin:24px 0 40px;max-width:740px;font-size:17px}
body.site-quest .section {margin:54px 0}
body.site-quest .section-label {display:inline-block;margin-bottom:6px;font:700 19px Caveat,cursive;color:var(--red)}
body.site-quest .section-lead {max-width:680px;font-size:18px}
body.site-quest .play-grid {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:22px;align-items:start}
body.site-quest .paper-card {padding:20px 23px 22px;border:2px solid var(--blue);background:#fbfaf5c9;border-radius:13px 38px 14px 37px}
body.site-quest .paper-card:nth-child(2) {border-color:var(--green);transform:rotate(.6deg)}
body.site-quest .example {border-left:2px solid #b6353580;padding:7px 12px;margin:16px 0;font:19px/1.65 Kalam,cursive;color:var(--blue);background:#f6f4ea}
body.site-quest .example code {display:block;white-space:normal;font:inherit}
body.site-quest .margin-note {color:var(--green);font:700 25px Caveat,cursive;transform:rotate(-2deg);margin:18px 0 0}
body.site-quest .adventures {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
body.site-quest .adventure {overflow:hidden;background:#faf9f2e8;border:2px solid var(--blue);border-radius:13px 35px 17px 38px}
body.site-quest .adventure--live {grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);border-color:var(--green)}
body.site-quest .adventure__image {display:block;width:100%;height:215px;object-fit:cover}
body.site-quest .adventure--live .adventure__image {height:100%;min-height:300px}
body.site-quest .adventure__body {padding:18px 22px 20px}
body.site-quest .adventure__body p {font-size:17px}
body.site-quest .adventure__status {display:inline-block;margin-bottom:8px;color:var(--green);font:700 19px Caveat,cursive}
body.site-quest .adventure--planned .adventure__status {color:var(--red)}
body.site-quest .adventure__body h3 {color:var(--blue)}
body.site-quest .adventure__body .button {margin-top:8px}
body.site-quest .verbs {padding:24px 28px;border:2px solid var(--red);border-radius:15px 45px 18px 48px;background:#fffaf2b3}
body.site-quest .verbs-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:25px;align-items:center}
body.site-quest .verb-demo {min-width:205px;transform:rotate(2deg);padding:12px 20px;border:2px dashed var(--blue);border-radius:12px;text-align:center;font:700 27px/1.25 Caveat,cursive;color:var(--blue)}
body.site-quest .verb-demo span {display:block;font-size:39px}
body.site-quest .verb-demo em {display:block;color:var(--green);font-style:normal}
body.site-quest .command-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin:12px 0 0}
body.site-quest .command {display:grid;grid-template-columns:105px 1fr;gap:9px;padding:10px 2px;border-bottom:1px dashed #597cba78;font-size:16px}
body.site-quest .command code {font:700 22px Caveat,cursive;color:var(--blue)}
body.site-quest .group-note {margin-top:20px;padding:14px 18px;border-left:3px solid var(--green);background:#f3f5eab5}
body.site-quest .outro {margin:45px 0 15px;padding:22px 25px;border:2px solid var(--green);border-radius:22px 14px 33px 15px}
body.site-quest .outro p {font-size:18px}
body.site-quest .footer {display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;font-size:15px;margin-top:35px}
@media(max-width:730px) {
body.site-quest .page {padding:27px 25px 50px 48px}
body.site-quest .page::before {left:30px}
body.site-quest .play-grid, body.site-quest .adventure--live, body.site-quest .verbs-row {grid-template-columns:1fr}
body.site-quest .adventure--live .adventure__image {height:240px;min-height:0}
body.site-quest .verbs-row {gap:9px}
body.site-quest .verb-demo {max-width:280px}
body.site-quest .command-list {grid-template-columns:1fr}
}
@media(max-width:520px) {
body.site-quest {padding:8px 6px 30px}
body.site-quest .page {padding:22px 15px 38px 38px}
body.site-quest .page::before {left:25px}
body.site-quest .quicknav {gap:10px}
body.site-quest .adventures {grid-template-columns:1fr}
body.site-quest .adventure--live {grid-column:auto}
body.site-quest .adventure__image {height:190px}
body.site-quest .command {grid-template-columns:91px 1fr}
body.site-quest .paper-card, body.site-quest .verbs {padding:17px}
body.site-quest .section {margin:42px 0}
}
body.site-quest .section h2, body.site-quest .outro h2 {display:inline-block;border-bottom:2px solid currentColor;transform:rotate(-.8deg)}
body.site-quest .paper-card, body.site-quest .adventure, body.site-quest .verbs, body.site-quest .outro {position:relative;border:0;border-radius:14px 65px 16px 75px / 69px 15px 65px 13px}
body.site-quest .paper-card::before, body.site-quest .adventure::before, body.site-quest .verbs::before, body.site-quest .outro::before {content:"";position:absolute;inset:0;border:2px solid var(--frame-ink,var(--blue));border-radius:14px 65px 16px 75px / 69px 15px 65px 13px;pointer-events:none;z-index:2}
body.site-quest .paper-card:nth-child(2), body.site-quest .adventure--live, body.site-quest .outro {--frame-ink:var(--green)}
body.site-quest .verbs {--frame-ink:var(--red)}
body.site-quest .adventure--planned:nth-child(2) {transform:rotate(-.55deg)}
body.site-quest .adventure--planned:nth-child(3) {transform:rotate(.55deg)}
body.site-quest .adventure__image {border-radius:12px 61px 0 0 / 58px 12px 0 0}
body.site-quest .adventure--live .adventure__image {border-radius:12px 0 0 66px / 58px 0 0 12px}
@media(max-width:730px) {
body.site-quest .adventure--live .adventure__image {border-radius:12px 61px 0 0 / 58px 12px 0 0}
}

/* Placeholder page */
body.site-placeholder {margin:0;padding:25px 10px;background:#ebe7db;color:#2b2b2b;font-family:Kalam,Caveat,cursive}
body.site-placeholder .page {max-width:850px;min-height:80vh;margin:auto;padding:32px 45px 70px 82px;position:relative;background:#fbfaf3;background-image:linear-gradient(rgba(90,140,200,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(90,140,200,.28) 1px,transparent 1px);background-size:22px 22px;box-shadow:0 15px 30px #3c3a3550}
body.site-placeholder .page:before {content:"";position:absolute;left:62px;top:0;bottom:0;width:2px;background:#c86e73}
body.site-placeholder main {position:relative}
body.site-placeholder h1 {font:700 clamp(50px,8vw,80px) Caveat,cursive;color:#2b4a8b;line-height:1.05;margin:42px 0 15px}
body.site-placeholder h2 {font:700 39px Caveat,cursive;color:#b63535;margin:25px 0 4px}
body.site-placeholder p {max-width:590px;font-size:19px;line-height:1.55}
body.site-placeholder a {color:#2b4a8b;text-underline-offset:4px}
body.site-placeholder a:focus-visible {outline:2px solid #b63535;outline-offset:4px}
body.site-placeholder .button {display:inline-block;padding:8px 22px;color:white;background:#2b4a8b;text-decoration:none;border-radius:9px 22px 9px 20px;margin-top:8px}
body.site-placeholder .note {font:24px Caveat,cursive;color:#2f7a4a;transform:rotate(-2deg);margin-top:26px}
@media(max-width:600px) {
body.site-placeholder .page {padding:25px 18px 50px 43px}
body.site-placeholder .page:before {left:28px}
}

/* Shared pen strokes: filter is applied only to the outline, never the text or pictures. */
body.site-hobo .rule::before,body.site-hobo .item::before,body.site-hobo .chat-panel::before,
body.site-updates .post::after,body.site-quest .paper-card::before,body.site-quest .adventure::before,
body.site-quest .verbs::before,body.site-quest .outro::before{filter:url(#wobble)}
body.site-hobo .rule::before,body.site-hobo .item::before,body.site-hobo .chat-panel::before,
body.site-updates .post::after,body.site-quest .paper-card::before,body.site-quest .adventure::before,
body.site-quest .verbs::before,body.site-quest .outro::before{border-radius:255px 15px 225px 15px / 15px 225px 15px 255px}
body.site-hobo .rule:nth-child(2)::before,body.site-hobo .item:nth-child(2)::before,body.site-updates .post:nth-child(3)::after,body.site-quest .adventure--planned:nth-child(2)::before{border-radius:15px 240px 20px 220px / 240px 15px 220px 20px}
body.site-hobo .rule:nth-child(3)::before,body.site-hobo .item:nth-child(3)::before,body.site-updates .post:nth-child(2)::after,body.site-quest .adventure--live::before{border-radius:220px 20px 245px 15px / 20px 245px 15px 220px}
/* Quest: keep ink and frames separate so images and letters remain crisp. */
body.site-quest .paper-card,body.site-quest .adventure,body.site-quest .verbs,body.site-quest .outro{position:relative;border:0}
body.site-quest .paper-card::before,body.site-quest .adventure::before,body.site-quest .verbs::before,body.site-quest .outro::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border:2px solid var(--frame-ink,var(--ink-blue))}
body.site-quest .paper-card:nth-child(2),body.site-quest .adventure--live,body.site-quest .outro{--frame-ink:var(--ink-green)}
body.site-quest .verbs{--frame-ink:var(--ink-red)}
body.site-quest .adventure__image{border-radius:12px 40px 0 0 / 30px 12px 0 0}
body.site-quest .adventure--live .adventure__image{border-radius:12px 0 0 45px / 30px 0 0 12px}
body.site-quest .section h2,body.site-quest .outro h2{display:inline-block;border-bottom:2px solid currentColor;transform:rotate(-.8deg)}
/* Updates: add an uneven outline to the post, avoiding a filter on its content. */
body.site-updates .post{border:0}
body.site-updates .post::after{content:"";position:absolute;inset:0;z-index:0;border:2px solid var(--post-ink,var(--ink-blue));pointer-events:none}
body.site-updates .post>*{position:relative;z-index:1}
body.site-updates .mentor{height:auto}
@media(max-width:730px){body.site-quest .adventure--live .adventure__image{border-radius:12px 40px 0 0 / 30px 12px 0 0}}

/* Hub and project landing additions: same paper and four pen colors. */
.hub-nav,.hub-actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin:18px 0 26px;font-size:23px}
.hub-nav a{color:var(--ink-blue)}
.hub-button{display:inline-block;padding:10px 19px;color:var(--ink-blue);font:700 25px Caveat,cursive;text-decoration:none;position:relative;isolation:isolate}
.hub-button::before{content:"";position:absolute;inset:0;border:2px solid currentColor;border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;filter:url(#wobble);z-index:-1;background:#fbfaf3d9}
.hub-button:hover{color:var(--ink-red)}
.hub-profile{display:flex;align-items:center;gap:20px;margin:22px 0}.hub-avatar{flex:0 0 76px;width:76px;height:76px;display:grid;place-items:center;border:2px solid var(--ink-red);border-radius:45% 52% 48% 44%;font:700 35px Caveat,cursive;transform:rotate(-6deg);color:var(--ink-red)}
.hub-profile h2{margin:0;font-size:32px}.hub-bio{font:18px/1.65 Kalam,cursive;margin:9px 0;max-width:630px}
body.site-home .hub-title{font-size:clamp(34px,5vw,52px);line-height:1.15;letter-spacing:0;filter:none}
.hub-section-title{font:700 36px Caveat,cursive;color:var(--ink-blue);margin:38px 0 18px}
.hub-card-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;align-items:center}
.hub-project-image{width:100%;height:170px;object-fit:contain;display:block}.hub-project-image.scene{height:auto;border-radius:4px}
body.site-home .card__links a.hub-button::before{content:""}.hub-contact{margin:36px 0;padding:20px;position:relative;border-top:2px dashed var(--ink-red);border-bottom:2px dashed var(--ink-green)}
.hub-contact h2{font-size:34px;margin:0}.hub-contact p{font:18px/1.6 Kalam,cursive}
.hub-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}.hub-gallery figure{margin:0;min-width:0}.hub-gallery img{display:block;width:100%;height:auto;border:2px solid var(--ink-blue);border-radius:4px}.hub-gallery figcaption{font:19px/1.4 Caveat,cursive;margin-top:9px;color:var(--ink-blue)}
.hub-gallery a{display:block}.hub-steps{font:18px/1.7 Kalam,cursive;padding-left:25px}.hub-steps li{margin:10px 0}
.patch-strip{display:flex;gap:18px;overflow-x:auto;padding:10px 5px 20px;scroll-snap-type:x mandatory;scrollbar-color:var(--ink-blue) var(--paper)}
.patch-card{display:flex;flex-direction:column;flex:0 0 280px;scroll-snap-align:start;color:var(--ink-blue);text-decoration:none;padding:18px;position:relative;isolation:isolate}
.patch-card::before{content:"";position:absolute;inset:0;border:2px solid currentColor;border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;filter:url(#wobble);z-index:-1;background:#fbfaf3b8}.patch-card:nth-child(2){color:var(--ink-red)}.patch-card:nth-child(3){color:var(--ink-green)}
.patch-card img{width:100%;height:145px;object-fit:contain}.patch-card h3{font:700 28px/1.1 Caveat,cursive;margin:16px 0 8px}.patch-card p{font:16px/1.5 Kalam,cursive;color:var(--ink-black);margin:0 0 14px}.patch-card span{margin-top:auto;font:700 23px Caveat,cursive}.patch-card:hover span{text-decoration:underline}
html{scroll-padding-top:24px}img{max-width:100%}body.site-home .page{transform:none}.hub-status{color:var(--ink-green);font:700 21px Caveat,cursive}
@media(max-width:600px){.hub-card-layout{grid-template-columns:1fr;gap:12px}.hub-project-image{height:140px}.hub-project-image.scene{max-height:180px;object-fit:cover}.hub-gallery{grid-template-columns:1fr}.hub-profile{align-items:flex-start;gap:12px}.hub-avatar{flex-basis:54px;width:54px;height:54px;font-size:28px}.hub-profile h2{font-size:27px}.hub-bio{font-size:16px}.hub-nav{font-size:21px}.patch-card{flex-basis:82%;max-width:300px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Карточки горизонтальной ленты на лендинге Hobo */
.patch-card p {
  font-size: 20px;
  line-height: 1.6;
}

/* Текст полных заметок на странице обновлений */
body.site-updates .post {
  font-size: 20px;
  line-height: 1.6;
}

/* Читаемый основной текст на обеих страницах Hobo */
body.site-hobo,
body.site-updates {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.6;
}

body.site-hobo p,
body.site-hobo li,
body.site-updates p,
body.site-updates li {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-style: normal;
  line-height: 1.6;
}

/* Вступление */
body.site-hobo .hero__lead {
  font-size: 23px;
}

/* Кнопки и навигация */
body.site-hobo .button,
body.site-hobo .link,
body.site-updates .crumb,
body.site-updates .hub-button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-style: normal;
}

/* Названия команд */
body.site-hobo code,
body.site-updates code {
  font-family: Consolas, monospace;
  font-size: 18px;
}
/* natalya-patch-v1: notebook drawings, readable inherited body text */
body.site-updates .natalya-post h2{font-size:clamp(34px,5vw,46px);line-height:1.15}
body.site-updates .natalya-post h3{font:700 34px/1.2 Caveat,cursive;margin:28px 0 12px;color:var(--ink-blue)}
body.site-updates .natalya-post p,body.site-updates .natalya-post li{font:20px/1.65 Arial,Helvetica,sans-serif}
body.site-updates .natalya-portrait{display:block;float:right;width:260px;max-width:42%;height:auto;margin:8px 0 18px 22px}
body.site-updates .natalya-post blockquote{margin:22px 0;padding:8px 16px;border-left:3px solid var(--ink-red)}
body.site-updates .natalya-stats{color:var(--ink-blue)}
body.site-updates .natalya-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;clear:both;margin:20px 0}
body.site-updates .natalya-item{position:relative;padding:18px;min-width:0;border:2px dashed var(--ink-blue);border-radius:12px 25px 9px 20px;background:#fbfaf3b8}
body.site-updates .natalya-item img{display:block;width:180px;max-width:100%;height:auto;margin:0 auto 12px}
body.site-updates .natalya-item h4{font:700 29px/1.2 Caveat,cursive;color:var(--ink-blue);margin:8px 0 12px}
body.site-updates .natalya-rarity{font:700 16px/1.4 Arial,Helvetica,sans-serif;color:var(--ink-green)}
body.site-updates .natalya-ending{clear:both;border-top:2px dashed var(--ink-red);padding-top:18px;color:var(--ink-red)}
body.site-hobo .patch-card[href$="#natalya"]{color:var(--ink-blue)}
@media(max-width:650px){body.site-updates .natalya-items{grid-template-columns:1fr}body.site-updates .natalya-portrait{float:none;width:240px;max-width:100%;margin:12px auto 20px}}