:root { /* fonts */ --sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; --serif: ui-serif,serif; --mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace; /* ── Baseline grid ───────────────────────────────────────────── Everything on the site is sized in whole (or half) multiples of --grid. 1rem is pinned to one grid cell, so `rem` units snap to the grid for free. The dotted background is drawn on the same 20px lattice by baseline-grid.js. */ --grid: 20px; /* one baseline cell = 1rem (html is 20px) */ --half: 10px; /* half cell, for fine alignment */ --lh: 40px; /* base line-height = 2 cells (vertical rhythm unit) */ /* Spacing scale — all whole grid cells */ --space-1: var(--grid); /* 20px */ --space-2: calc(2 * var(--grid)); /* 40px */ --space-3: calc(3 * var(--grid)); /* 60px */ --space-4: calc(4 * var(--grid)); /* 80px */ --space-6: calc(6 * var(--grid)); /* 120px */ --space-8: calc(8 * var(--grid)); /* 160px */ /* dot radius of the background lattice */ --dot-size: 1px; /* Sizes */ --br: 0.2rem; --content: 70ch; /* Transitions */ } html { /* Pin 1rem to exactly one grid cell so all rem-based sizing lands on the 20px baseline. */ font-size: 20px; } /* Small screens: scale everything down. 1rem stays pinned to one grid cell, so text and the whole grid-based spacing/rhythm shrink together (~20%). */ @media (max-width: 44em) { :root { --grid: 16px; --half: 8px; --lh: 32px; } html { font-size: 16px; } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background-color: var(--surface-1); font-family: var(--sans); font-size: 1.125rem; /* 18px */ line-height: var(--lh); /* 32px — 2 grid cells */ color: var(--text-1); transition: color 1s ease, background-color 1s ease; /* Flex column so the footer is pushed to the bottom on short pages. */ display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } /* ── Baseline dot grid canvas ───────────────────────────────────── Absolutely positioned inside , spanning the full document height, sitting behind all content. baseline-grid.js paints the dots (DPR-aware, theme-aware) and keeps it sized to the page. */ #baseline-grid { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; } /* article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section */ /* Text and Layout — vertical rhythm snapped to the grid. Font-sizes are grid-derived; line-heights and margins are whole cells so every block keeps the baseline. */ p { font-size: 1.125rem; /* 18px */ line-height: var(--lh); /* 32px = 2 cells */ margin: 0 0 var(--space-2); /* 32px */ } h1, h2, h3, h4, h5, h6 { margin: var(--space-3) 0 var(--space-1); line-height: var(--lh); } h1 { font-size: 3rem; line-height: calc(3 * var(--grid)); } /* 48/48 */ h2 { font-size: 2rem; line-height: calc(3 * var(--grid)); } /* 32/48 */ h3 { font-size: 1.5rem; line-height: var(--lh); } /* 24/32 */ h4 { font-size: 1.25rem; line-height: var(--lh); } /* 20/32 */ h5, h6 { font-size: 1rem; line-height: var(--lh); } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* abbr */ abbr { text-decoration: none; border-bottom: 2px dashed var(--text-2); } /* Lists */ ul, ol { padding-left: 1em; } ol > li, ul > li { line-height: 1.5; } ul > li { list-style-type: "↟ "; list-style-type: "✻ "; list-style-type: "• "; } ol > li::marker, ul > li::marker { color: var(--text-2); } ol > li::marker { font-size: 0.9em; } /* dl, dt, dd */ /* details, summary */ details { position: relative; transition: height 0.5s ease; margin: 1em 0; } details summary::marker { content: ""; } details summary::-webkit-details-marker { display: none; } details summary { cursor: pointer; padding: 0.5em 1em 0.5em 1em; } details::after { content: ""; position: absolute; top: 0.6em; right: 0.5em; display: block; width: 0.7em; height: 0.7em; border: 1px solid var(--text-1); border-bottom-right-radius: var(--br); border-top: none; border-left: none; transform-origin: 66.67% 66.67%; transform: translate(-100%, 0%) rotate(45deg); transition: transform 0.25s ease; pointer-events: none; } details[open]::after { transform: translate(-100%, 0%) rotate(225deg); } details .content { padding: 0.5em 1em 1em 1em; } /* dialog */ dialog { border: none; background-color: var(--surface-2); color: var(--text-1); padding: 0.5em 1em; border-radius: var(--br); transition: backdrop-filter 0.2s ease; } dialog::backdrop { background-color: var(--surface-4); opacity: 1; backdrop-filter: blur(3px); } /* Table */ table { border-collapse: collapse; border-spacing: 0; } /* table, caption, tbody, tfoot, thead, tr, th, td */ /* pre, code Inline code gets a faint tinted chip with rounded corners, site-wide. Code inside

 stays plain — the pre block carries its own styling. */
code {
   background: color-mix(in srgb, var(--text-1) 8%, transparent);
   padding: 0.1em 0.35em;
   border-radius: 0.35em;
   font-family: var(--mono);
   font-size: 0.9em;
}
pre code {
   background: none;
   padding: 0;
   border-radius: 0;
   font-size: inherit;
}

/* Links */
a {
   position: relative;
   color: var(--primary);
   text-decoration: none;
   outline-color: var(--primary);
   transition: color 0.2s ease;
}
a::after {
   content: "";
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0%;
   height: 2px;
   background-color: var(--text-2);
   border-radius: 1px;
   transition: width 0.2s ease;
}
@media (hover: hover) {
   a:hover::after {
      width: 100%;
   }
   a:hover {
      color: var(--text-2);
      position: relative;
      z-index: 1; 
   }
}
a:not(:active):focus-visible { position: relative; z-index: 1; outline-offset: 0.5em; }
@media (prefers-reduced-motion: no-preference) {
   button:focus-visible { transition: outline-offset 75ms ease-out; }
   button:not(:active):focus-visible { transition-duration: 250ms; }
}

/* Buttons */
button {
   font-family: var(--sans);
   font-size: 1em;
   font-weight: 600;
   line-height: 1.5;
   padding: 0.5em 1em;
   border: none;
   background: var(--surface-2);
   color: var(--text-1);
   border-radius: var(--br);
   outline-color: var(--surface-3);

   display: inline-flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 1ch;
   
   -webkit-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   touch-action: manipulation;
   cursor: pointer;

   --highlight-size: 0;
   box-shadow: 0 1px var(--surface-4),
               0 0 0 var(--highlight-size) var(--surface-4);
   text-shadow: 0 1px 0 var(--surface-2);
}
button:disabled {
   background-color: var(--surface-4);
   color: var(--text-2);
   cursor: not-allowed;
}
button:not(:active):focus-visible { position: relative; z-index: 1; --highlight-size: 0.5em; outline-offset: 0.5em; }
button:active { position: relative; z-index: 1; --highlight-size: 0.25em; outline-offset: 0.25em; }
@media (hover: hover) {
   button:not(:active, :disabled):hover { position: relative; z-index: 1; --highlight-size: 0.5em; }
}
@media (prefers-reduced-motion: no-preference) {
   button { transition: box-shadow 0.2s ease, outline-offset 0.2s ease; }
   button:focus-visible { transition: outline-offset 75ms ease-out; }
   button:not(:active):focus-visible { transition-duration: 250ms; }
}

/* figure, figcaption */
figure {
   margin: 1em 1em;
}
figcaption {
   margin: 0.5em 0;
}
figure > image, figure > svg, figure > canvas, figure > video {
   display: block;
}
/* img, audio, video, canvas, svg, iframe, object, embed */

/* form, fieldset, label, legend */
input {
   accent-color: var(--primary);
}
input[type=text] {
   font-family: var(--sans);
   font-size: 1em;
   border: 0;
   background-color: var(--surface-2);
   border-radius: var(--br);
   padding: 0.5em 1em;
   outline-color: var(--primary);
   outline-offset: var(--br);
}
input:focus-visible { outline-offset: var(--br); }


/* ── Shared sub-page layout ───────────────────────────────────────
   Every route except the full-bleed homepage shares one centred
   container (same width, padding, and margin-inline auto) plus a
   back-arrow header and a centred footer. `body >` / `main.page`
   selectors beat the per-section rules in the thoughts CSS. */
body > main.page {
   width: min(56em, 100%);
   margin-inline: auto;
   padding: var(--space-3) var(--space-2);
}

body > header {
   width: min(56em, 100%);
   margin-inline: auto;
   padding: var(--space-2) var(--space-2) 0;
}
.backlink {
   display: inline-flex;
   align-items: center;
   gap: 0.5ch;
   color: var(--text-2);
   font-weight: 600;
}
.backlink::after { content: none; }        /* no base underline slide */
.backlink-arrow { font-size: 1.2em; line-height: 1; transition: transform 0.15s ease; }
@media (hover: hover) {
   .backlink:hover { color: var(--text-1); }
   .backlink:hover .backlink-arrow { transform: translateX(-3px); }
}

/* Footer: centred everywhere, pinned to the bottom by the flex column. */
#footer { flex: none; }
#footer footer {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   column-gap: 1em;
   padding: var(--space-2) var(--space-1);
   margin: 0;
}


/* ── Butterfly ────────────────────────────────────────────────────
   Lives on every page (markup + script are in base.html). The wrapper
   figure is taken out of flow so it never adds layout space. */
figure.butterfly-animation { margin: 0; height: 0; }
butterfly-animation {
   position: absolute; top: 0; left: 0;
   z-index: 9999; pointer-events: none;
   will-change: transform;
}
.bf-inner {
   position: relative;
   width: 72px; aspect-ratio: 207 / 205;   /* matches the butterfly1..4 frames */
   transform: translate(-50%, -50%) scaleX(var(--flip, 1));
   transform-origin: center;
   filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
}
/* the flap frames, stacked; visibility is class-driven */
.bf-frame {
   position: absolute; inset: 0;
   width: 100%; height: 100%;
   opacity: 0;
}
/* sitting: show butterfly1, perfectly still (no idle animation) */
.bf-inner.sitting .frame-1 { opacity: 1; }

/* ?landingspots=1 debug overlay: red circle at every resolved perch point */
#butterfly-spots { position: absolute; inset: 0; z-index: 10000; pointer-events: none; }
.butterfly-spot-marker {
   position: absolute;
   width: 14px; height: 14px;
   margin: -7px 0 0 -7px;             /* centre the circle on the point */
   border: 2px solid red;
   border-radius: 50%;
   background: rgba(255, 0, 0, 0.25);
}

/* flying: cycle frame1 → 2 → 3 → 4 to flap the wings. */
.bf-inner.flying .bf-frame { animation: bf-flap 0.44s linear infinite; }
.bf-inner.flying .frame-1 { animation-delay:  0s;     }
.bf-inner.flying .frame-2 { animation-delay: -0.33s;  }
.bf-inner.flying .frame-3 { animation-delay: -0.22s;  }
.bf-inner.flying .frame-4 { animation-delay: -0.11s;  }
@keyframes bf-flap {
   0%,    25%   { opacity: 1; }
   25.01%, 100% { opacity: 0; }
}


/* TEMP (testing): hide the baseline dot grid. */
#baseline-grid { display: none; }