:root { --ink: #111; --paper: #fff; --mute: #8a8a8a; --red: #e63b2e; --blue: #2f6fd6; --green: #3aa655 }
* { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 15px/1.75 "Helvetica Neue", Helvetica, Arial, sans-serif }
a { color: var(--ink) }
a:hover { color: var(--red) }
img { max-width: 100%; height: auto; display: block; margin: 1.2rem auto }
.body > iframe { max-width: 100%; display: block; margin: 1.2rem auto }
.body > div { width: 484px; max-width: 100%; margin: 15px 0 }
.body figure { display: flex; gap: 1.2rem; align-items: flex-start; margin: 15px 0 }
.body figure > a { flex: 0 0 484px; max-width: 100% }
.body figure img { display: block; width: 100%; height: auto; margin: 0 }
.body figcaption { font-size: .85rem; color: var(--mute) }
.body figcaption p { margin: 0 }
.ftitle { display: block; margin-bottom: .3rem; font-weight: 700; font-size: 1.05rem; color: var(--ink) }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px }
.band { padding: 28px 0 8px }
.brand { font: 2.8rem/1 "Gochi Hand", cursive; text-decoration: none; display: inline-flex; align-items: center; gap: .4em }
.brand:hover { color: var(--ink) }
.cols { display: grid; grid-template-columns: 1fr 280px; gap: 56px; padding-top: 32px }
.listtitle, .sub { font: 1.7rem/1.2 "Gochi Hand", cursive; margin: 0 0 1rem }
.sub { font-size: 1.3rem; margin-top: 2rem }
.post { padding-bottom: 1.5rem }
.post .date { margin: 0; font-size: .85rem; color: var(--mute) }
.post .title { font: 1.7rem/1.2 "Gochi Hand", cursive; margin: .2rem 0 1rem }
.post .title a { text-decoration: none }
.post .meta { font-size: .8rem; color: var(--mute) }
.post .meta a { color: var(--mute) }
.sep { display: block; width: 56px; height: 28px; margin: 0 auto 2.5rem }
.intro { max-width: 40rem; margin: 0 0 2.5rem }
.intro p:last-child { font: 1.5rem/1 "Gochi Hand", cursive }
ul.plain { list-style: none; padding: 0; margin: 0 }
.side h3 { font: 1.25rem/1 "Gochi Hand", cursive; margin: 1.8rem 0 .5rem }
.side a { text-decoration: none }
.side a:hover { text-decoration: underline }
.side img { width: 100%; margin: 0 0 1rem }
.mute { color: var(--mute); font-size: .85rem }
.trip { display: grid; grid-template-columns: 4.5em 1fr; gap: .2rem 1rem; margin: 0 0 1rem; padding: 1rem 1.2rem; border: 2.5px solid var(--ink); border-radius: 16px }
.trip dt { color: var(--mute) }
.trip dd { margin: 0 }
.button { display: inline-block; border: 2.5px solid var(--ink); border-radius: 999px; padding: .25rem 1.1rem; text-decoration: none; font: 1.15rem "Gochi Hand", cursive }
.button:hover { background: var(--ink); color: var(--paper) }
.doodle { filter: url(#wobble); color: var(--ink) }
.doodle.red { color: var(--red) }
.doodle.blue { color: var(--blue) }
.doodle.green { color: var(--green) }
.doodle.mark { width: 96px; height: 96px }
footer { text-align: center; padding: 3rem 0 }
footer p { margin: 0; font-size: .8rem; color: var(--mute) }
footer a { color: var(--mute) }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; gap: 32px } .brand { font-size: 2.2rem } .body figure, .map { flex-direction: column } .body figure > a, .map > div { flex: none } }
.signup { display: grid; gap: .5rem; max-width: 22rem; margin: 0 0 1.5rem }
.signup label { display: flex; align-items: center; gap: .5rem }
.signup input:not([type=checkbox]), .signup select { font: inherit; border: 2px solid var(--ink); border-radius: 8px; padding: .2rem .5rem; background: var(--paper) }
.signup input[type=checkbox] { accent-color: var(--ink) }
.signup .button { justify-self: start; cursor: pointer; background: var(--paper) }
.note { margin: 0; color: var(--mute) }
.map { display: flex; gap: 1.2rem; align-items: flex-start; margin: 0 0 15px }
.map > div { flex: 0 0 484px; max-width: 100% }
.map svg { width: 100%; height: 272px; display: block }
.map figcaption { font-size: .85rem; color: var(--mute) }
.map figcaption p { margin: 0 }