:root { --ink: #111; --paper: #fff; --mute: #8a8a8a; --red: #e63b2e; --blue: #2f6fd6; --green: #3aa655 }
* { box-sizing: border-box }
html { font-size: clamp(15px, 1.35vw, 26px) }
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 1rem/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 }
.card { display: flex; gap: 1.2rem; align-items: flex-start; margin: 0 0 15px }
.card > a, .card > div { flex: 0 0 32.3rem; max-width: 100%; min-width: 0 }
.card figcaption { flex: 1; min-width: 0 }
.card img, .card svg { display: block; width: 100%; height: auto; margin: 0 }
.card svg, .card .frame { height: auto; aspect-ratio: 16 / 9 }
.card .frame iframe { display: block; width: 100%; height: 100%; border: 0 }
.card figcaption { font-size: 1rem; line-height: 1.6; color: var(--mute) }
.card figcaption p { margin: 0 }
.water .card:not(.map) { margin-left: 1.5rem }
.entry { background: var(--box, #f3f3f1); border-radius: 1rem; padding: .95rem .95rem 1px; margin: 0 0 1.2rem }
.water .card:not(.map), .entry .card:not(.map) { background: var(--paper); border-radius: .8rem; padding: .6rem }
.water .card.map, .entry .card.map { background: var(--deep, #e6e6e3); border-radius: .8rem; padding: .6rem }
.entry-title { font: 1.25rem/1.2 "Gochi Hand", cursive; margin: 0 0 .9rem }
.entry-title a { text-decoration: none }
.entry-title a:hover { text-decoration: underline }
.entry .entry { background: var(--mid, #ebebe8); padding: .7rem .7rem 1px; margin: 0 0 .9rem }
.entry .entry .entry { background: var(--deep, #e2e2de) }
.entry .entry .entry .entry { background: var(--deeper, #d9d9d4) }
.entry.top > .listtitle { margin-top: 0 }
.entry .entry > .entry-title { font-size: 1.1rem; margin: 0 0 .6rem }
.tags { margin-top: .4rem }
.tags a, .tags span { display: inline-block; overflow-wrap: anywhere; color: var(--mute); font-size: .85rem; margin-right: .7em }
.ftitle { display: block; margin-bottom: .3rem; font-weight: 700; font-size: 1rem; color: var(--ink) }
.wrap { margin: 0; padding: 0 1.6rem }
.band { grid-area: band; padding: 4px 0 10px }
.brand { font: 2.3rem/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: minmax(0, 1fr) 16.5rem; grid-template-areas: "band band" "main side"; column-gap: 0; padding-top: .6rem }
.listtitle, .sub { font: 1.7rem/1.2 "Gochi Hand", cursive; margin: 0 0 1rem }
.latin { font-style: italic; text-transform: none; color: var(--mute); margin: -.6rem 0 1.2rem }
.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 }
body { text-transform: lowercase }
.post .title a { text-decoration: none }
.post .meta { font-size: .85rem; color: var(--mute) }
.post .meta a { color: var(--mute) }
.sep { display: block; width: 3.7rem; height: 1.9rem; margin: 0 auto 2.5rem }
.intro { max-width: none; margin: 0 0 2rem; font-size: 26px; font-weight: 400; color: var(--ink); text-transform: none }
.intro p { margin: 0 0 .9rem }
.people li { overflow: hidden; margin: 0 0 1.2rem; font-size: 1rem; text-transform: none }
.people img { float: left; width: 7rem; height: 9.3rem; object-fit: cover; border-radius: .6rem; margin: .2rem 1rem .3rem 0 }
.people b { display: block; font: 700 1.45rem/1.7 "Brush Script MT", "Dancing Script", cursive; text-transform: none }
.people p { margin: 0 0 .9rem }
.faf { text-transform: none; animation: rainbow 3s linear infinite }
body:has(.faf:hover) .brand, body:has(.faf:hover) .brand .doodle { animation: rainbow .8s linear infinite }
.intro .bro a { font: 700 1.45em/1.7 "Brush Script MT", "Dancing Script", cursive; text-transform: none; text-decoration: none; color: var(--ink) }
.intro .bro a:hover { color: var(--red) }
.intro .bro .heart { font-size: .72em; vertical-align: .08em }
.intro p:last-child { font: 700 1.45em/1 "Brush Script MT", "Dancing Script", cursive; text-transform: none; margin-top: 1.2rem }
.wire { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; color: var(--ink) }
.plain > li[id] { scroll-margin-top: 1.2rem }
main { grid-area: main; position: sticky; top: .5rem; align-self: start; margin: 0 0 1rem }
.sphere { position: relative; height: calc(100vh - 7.5rem); min-height: 26rem; margin: 0 }
.world { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; color: hsl(var(--hue, 215) 60% 48%) }
.sheds { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none }
.page { position: absolute; top: 0; left: 0; width: 36rem; height: 36rem; overflow: hidden; background: var(--paper); border: 2px solid hsl(215 40% 72%); border-radius: 50%; padding: 7rem 3.6rem; box-shadow: 0 .3rem 1.2rem hsl(215 30% 25% / .14) }
.port { height: 100%; overflow-y: auto; overscroll-behavior: contain; container-type: inline-size; padding: 0 .4rem 0 0 }
.page .close { float: right; position: sticky; top: 0; z-index: 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin: 0 -.4rem 0 .5rem; border-radius: 50%; background: var(--paper); border: 2px solid hsl(215 40% 72%); color: var(--mute); font: 1.3rem/1 "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none }
.page .close:hover { color: var(--red); border-color: var(--red) }
.marks { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden }
.marks a { position: absolute; left: 0; top: 0; pointer-events: auto; white-space: nowrap; font: 1rem/1.15 "Gochi Hand", cursive; color: inherit; text-decoration: none; background: hsl(0 0% 100% / .85); border-radius: 4px; padding: 0 .25em }
.marks a:hover { text-decoration: underline; color: var(--red) }
.marks.hover a { background: var(--pill); color: var(--on, #fff); border-radius: 5px }
.marks.hover a:hover { color: var(--on, #fff) }
.page:empty { display: none }
.page > * { animation: rise .25s ease-out }
@keyframes rise { from { opacity: 0; transform: translateY(.4rem) } to { opacity: 1; transform: none } }
@container (max-width: 46rem) { .card { flex-direction: column } .card > a, .card > div { flex: none; width: 100%; max-width: 32.3rem } .water .card:not(.map) { margin-left: 0 } }
.world.held { cursor: grabbing }
.world.over { cursor: pointer }
.world.rainbow { animation: flash .4s steps(2, jump-none) infinite }
.waterlist { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0 }
.waterlist a { color: hsl(var(--hue) 60% 48%) }
.tip { position: absolute; z-index: 3; margin: 0; pointer-events: none; text-align: center; font: 1.3rem/1.1 "Gochi Hand", cursive; white-space: nowrap; background: var(--paper); border-radius: 7px; padding: .05em .35em; box-shadow: 0 0 0 3px var(--paper) }
.tip span { display: block; max-width: 16rem; margin: .2rem auto 0; white-space: normal; font: .85rem/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--mute) }
.tip span:empty { display: none }
ul.plain { list-style: none; padding: 0; margin: 0 }
.side { grid-area: side; padding: 1rem 0 0 1.2rem; position: relative; z-index: 1; font-size: 1rem; font-weight: 400 }
.side li[data-tab] { --ink: hsl(var(--hue) 60% 48%) }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1 }
.ring .fish { pointer-events: all; cursor: pointer; opacity: .9; transition: opacity .3s }
.ring .tab { filter: url(#wobble) }
.ring .fish.lit, .ring .fish.on { opacity: 1; stroke-width: 3.2 }
.ring .fish.lit { animation: glow 1.4s ease-in-out infinite alternate }
.ring .fish:focus { outline: none }
.ring .fish:focus-visible { filter: drop-shadow(0 0 3px currentColor) }
.ring .fish.open { fill: currentColor; fill-opacity: .14 }
.ring .fish.on { fill: currentColor; fill-opacity: .3 }
.ring .go { animation: rainbow 3s linear infinite }
.ring .go.lit { animation: rainbow .8s linear infinite, flash .4s steps(2, jump-none) infinite }
.plate { position: absolute; z-index: 3; margin: 0; pointer-events: none; text-align: center; font: 1.3rem/1.1 "Gochi Hand", cursive; white-space: nowrap; background: var(--paper); border-radius: 7px; padding: .05em .35em; box-shadow: 0 0 0 3px var(--paper) }
.plate i { font: .85rem/1 "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; color: var(--mute); margin-left: .3em }
.plate span { display: block; max-width: 16rem; margin: .2rem auto 0; white-space: normal; font: .85rem/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--mute) }
.plate i:empty, .plate span:empty { display: none }
.plate.go { animation: rainbow 3s linear infinite }
.side li[data-sub] > span { color: hsl(var(--hue) 45% 38%) }
.tablink { color: hsl(var(--hue) 55% 42%); text-decoration-color: hsl(var(--hue) 55% 70%) }
.tablink:hover { background: hsl(var(--hue) 70% 91%); border-radius: 5px; box-shadow: 0 0 0 3px hsl(var(--hue) 70% 91%) }
.side li { white-space: normal }
.side .mute { white-space: nowrap }
.side li[data-tab] > a, .side li[data-tab] > details > summary { color: hsl(var(--hue) 55% 42%) }
.gofish { display: inline-flex; align-items: center; gap: .35em; text-decoration: none }
.gofish svg { width: 2rem; height: 1rem; color: inherit }
.gofish:hover { animation: rainbow .8s linear infinite, flash .4s steps(2, jump-none) infinite }
.side li[data-sub] > a, .side li[data-sub] > details > summary { color: hsl(var(--hue) 45% 38%) }
.side li.lit > a, .side li.lit > details > summary, .side li.lit > span { background: var(--ink); color: var(--on, #fff); border-radius: 5px; box-shadow: 0 0 0 3px var(--ink) }
.side li.lit > a .mute, .side li.lit > details > summary .mute, .side li.lit > details > summary::before { color: var(--on, #fff) }
.themed { --theme: hsl(var(--tab) 55% var(--tl, 40%)); --box: hsl(var(--tab) 55% 94%); --deep: hsl(var(--tab) 55% 87%); --mid: hsl(var(--tab) 55% 90.5%); --deeper: hsl(var(--tab) 55% 83%) }
.themed .trip, .themed .signup input:not([type=checkbox]), .themed .signup select, .themed .button { border-color: var(--theme); color: var(--theme) }
.themed .signup input[type=checkbox] { accent-color: var(--theme) }
.themed .trip dt, .themed .note { color: var(--theme) }
.themed, .themed a, .themed h1, .themed h2, .themed .ftitle, .themed .card figcaption, .themed .tags a, .themed .latin, .themed .date, .themed .meta, .themed .meta a, .themed .mute, .themed .doodle { color: var(--theme) }
.themed .card.map svg { stroke: var(--theme) }
html, body { overflow-x: clip }
@keyframes glow { from { opacity: .7 } to { opacity: 1 } }
.side li.on > a, .side li.on > details > summary { font-weight: 700 }
.side > :first-child { margin-top: 0 }
.side a { text-decoration: none }
ul.plain.nest { margin-left: 1.1em }
.side summary { cursor: pointer; list-style: none; display: inline-block }
.side summary::before { content: "+ "; color: var(--mute) }
.side details[open] > summary::before { content: "- " }
.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-flex; align-items: center; gap: .35em; border: 2px solid var(--ink); border-radius: 999px; padding: .05rem .85rem; text-decoration: none; font: 1rem/1.9 "Gochi Hand", cursive }
.button svg { width: 36px; height: 19px; color: inherit }
.button:hover { animation: rainbow .8s linear infinite, flash .4s steps(2, jump-none) infinite }
@keyframes rainbow { 0% { color: hsl(0 75% 45%); border-color: hsl(0 75% 45%) } 17% { color: hsl(35 80% 45%); border-color: hsl(35 80% 45%) } 33% { color: hsl(55 80% 40%); border-color: hsl(55 80% 40%) } 50% { color: hsl(130 60% 38%); border-color: hsl(130 60% 38%) } 67% { color: hsl(215 70% 45%); border-color: hsl(215 70% 45%) } 83% { color: hsl(275 60% 45%); border-color: hsl(275 60% 45%) } 100% { color: hsl(0 75% 45%); border-color: hsl(0 75% 45%) } }
@keyframes flash { from { opacity: 1 } to { opacity: .45 } }
.doodle { filter: url(#wobble); color: var(--ink) }
.doodle.blue { color: var(--blue) }
.doodle.mark { width: 4.2rem; height: 4.2rem }
@media (max-width: 1000px) { .card { flex-direction: column } .card > a, .card > div { flex: none; width: 100% } .water .card:not(.map) { margin-left: 0 } }
@media (max-width: 820px), (max-width: 1000px) and (hover: none), (max-width: 1000px) and (pointer: coarse), (pointer: coarse) and (max-height: 500px) { .cols { column-gap: 1.5rem } .sphere { height: auto; min-height: 0 } .world { height: auto; aspect-ratio: 16 / 9 } .page { position: relative; width: auto; height: auto; min-height: 0; transform: none !important; border: 0; border-radius: 0; padding: 0; overflow: visible; box-shadow: none } .port { height: auto; overflow: visible; padding: 0 } main { margin-bottom: 0 } .sphere { margin-bottom: 1.5rem } }
@media (max-width: 600px) { .world { aspect-ratio: 1 } }
@media (min-width: 1001px), (hover: hover) and (pointer: fine) and (min-width: 821px) { .page { visibility: hidden; animation: show 0s 2s forwards } .page.docked { visibility: visible; animation: none } }
@keyframes show { to { visibility: visible } }
@media (hover: hover) and (pointer: fine) and (min-width: 821px) { .cols { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; position: relative } .band { position: absolute; top: .6rem; left: 1.6rem; z-index: 3; padding: 0 } .sphere { height: calc(100vh - 1.6rem) } .side { display: none } }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) { .cols { grid-template-columns: 1fr; grid-template-areas: "band" "main" "side"; gap: 32px } main { position: relative; top: 0 } html { font-size: clamp(15.75px, min(3.9vw, 2.6vh), 31.5px) } .brand { font-size: 2.2rem } .side { clip-path: none; overflow: visible; padding: 3.33em 0 0 9.52em; font-size: 1rem } .side li { white-space: normal; overflow-wrap: anywhere } ul.plain.nest { margin-left: .8em } .side summary, .side li > a, .side li > span { display: inline-block; padding: .25rem 0 } .side li { padding: .05rem 0 } }
.garden { display: none }
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) { .sphere, body.shut main { display: none } body.shut .cols { grid-template-areas: "band" "side" } .page { visibility: visible; animation: none } .side .garden { display: block; position: absolute; top: 0; left: 0; width: 17.8em; height: 100%; z-index: -1; overflow: visible } .side > *:not(.garden) { position: relative; pointer-events: none } .side a, .side summary, .side li > span { pointer-events: auto } .garden .petal, .garden .centre, .garden .leaf { pointer-events: all; cursor: pointer } .garden .centre:hover circle { stroke-width: 4 } .garden .centre .face { opacity: 0; transition: opacity .25s } .garden .centre:hover .face { opacity: 1 } .garden .stem { opacity: .55 } .garden .petal, .garden .leaf { opacity: .5; transition: opacity .3s } .garden .lit { opacity: 1; stroke-width: 3.2; animation: glow 1.4s ease-in-out infinite alternate } }
.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) }