/* =========================================================
   Personal corner stylesheet
   Colors live in the variables at the top. Change them there.
   ========================================================= */

:root {
  --ink: #022859;
  --wall: #AFCAD1;
  --wall-img: url("img/wall-day.svg");
  --paper: #C4EEF2;
  --paper-soft: #FCFEFE;
  --mint: #AFCAD1;
  --bar: #022859;
  --bar-text: #FCFEFE;
  --head: #022859;
  --text: #022859;
  --muted: #2d4b7a;
  --link: #0b4aa0;
  --visited: #3a4f94;
  --mark: #7EBCF2;
  --sticky: #7EBCF2;
  --accent: #0b5cc2;
  --accent-text: #FCFEFE;
  --chip: #FCFEFE;
  --shadow: #022859;

  --f-head: "DotGothic16", "Courier New", monospace;
  --f-body: "DotGothic16", "Courier New" , monospace;
}

:root[data-theme="dark"] {
  --ink: #010f26;
  --wall: #022859;
  --wall-img: url("img/wall-night.svg");
  --paper: #124282;
  --paper-soft: #0a3270;
  --mint: #1a4d94;
  --bar: #7EBCF2;
  --bar-text: #022859;
  --head: #C4EEF2;
  --text: #FCFEFE;
  --muted: #AFCAD1;
  --link: #7EBCF2;
  --visited: #C4EEF2;
  --mark: #7EBCF2;
  --sticky: #C4EEF2;
  --accent: #7EBCF2;
  --accent-text: #022859;
  --chip: #124282;
  --shadow: #010a1a;
}

/* ---------- theme transition ---------- */
/* All the colours above come from variables, so a theme swap is just those
   variables changing: give the affected properties a transition and the page
   fades.

   `color` is special: it is an INHERITED property. Transitioning it on every
   element (the old `*` rule) meant each DOM level re-transitioned the colour its
   parent was still animating, so an element's text stayed frozen on its old
   colour for ~0.35s for every level it sat below the first element that set a
   colour. A paragraph in the main column sits 7 levels down
   (body > .wrap > .frame > .cols > .col-main > #page-content > section.box > p),
   so its text sat on the old colour for ~2.5s before it settled. Going
   night -> day that reads as the text "glowing" white on a page that has
   already turned light.

   So `color` is only transitioned where a text colour is actually declared.
   Everything else inherits the body's fading colour and follows it for free,
   with no delay. If you add a rule that sets a text `color`, add its selector to
   the list below too, or its text will snap instead of fading. */
*,
*::before,
*::after {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

body,
a,
.site-title,
.tagline,
.marquee,
.nav-title,
.bar,
.nav-list a,
.theme-btn,
.stamp-note,
.col-main h1,
.col-main h2,
.sticker,
.avatar,
.chips li:nth-child(3n),
.post-date,
.pin,
.article .meta,
.shot,
.link-grid a,
.link-grid .ico,
.link-grid small,
.btn88,
textarea.code,
.feed-scroll b,
.foot-date,
.hit-counter,
.hit-label,
.folder-card,
.folder-count,
.folder-back,
.pat-flair span {
  /* same duration/timing/delay as the rule above; this only adds `color` */
  transition-property: background-color, border-color, box-shadow, color;
}

/* exclude animated elements from theme transition */
.marquee-track,
.pat-btn img {
  transition: none;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--bar) var(--wall); }

body {
  margin: 0;
  /* top padding leaves room for the header kitty to sit above the frame */
  padding: 58px 16px 48px;
  background-color: var(--wall);
  background-image: var(--wall-img);
  background-size: 64px 64px;
  image-rendering: pixelated;
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;   /* long words / URLs wrap instead of stretching the page */
}

img { image-rendering: pixelated; max-width: 100%; height: auto; }

::selection { background: var(--mark); color: var(--ink); }

a { color: var(--link); text-underline-offset: 3px; }
a:visited { color: var(--visited); }
a:hover { background: var(--mark); color: var(--ink); text-decoration-style: wavy; }
a:focus-visible,
button:focus-visible {
  outline: 3px dashed var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 4px 10px;
  z-index: 50;
}
.skip:focus { left: 8px; }

/* ---------- page shell ---------- */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}

.top {
  position: relative;
  /* The right padding reserves room for the corner sticker (its width + its right
     offset + a little breathing room) so the title and tagline wrap before they can
     ever reach underneath it. Keep this in sync if the sticker's size changes. */
  padding: 0 calc(285px + 116px) 22px 50px;
  min-height: 118px;
}

.site-title {
  display: inline-block;
  margin: 14px 0 0;
  padding: 6px 18px 10px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  transform: rotate(-1.6deg);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(26px, 7vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--head);
  text-decoration: none;
  text-shadow: 3px 3px 0 var(--mark);
}
.site-title:visited { color: var(--head); }
.site-title:hover { background: var(--paper); color: var(--accent); }

.tagline {
  margin: 10px 0 0 34px;
  font-size: 15px;
  color: var(--text);
  background: var(--paper);
  display: inline-block;
  padding: 0 10px;
  border: 2px solid var(--ink);
  transform: rotate(0.8deg);
}

.top .cat-wrap {
  position: absolute;
  right: 100px;
  bottom: -6px;
  width: 285px;
  height: 265px;                 /* room for the tallest sticker */
  z-index: 3;
  pointer-events: none;
  /* clip at the marquee's top edge so a kitty can dive out of sight behind the page */
  clip-path: inset(0 0 2px 0);
}

.top .cat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  /* diving down reads as falling, so it accelerates */
  transition-property: transform;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  transition-delay: 0s;
}

/* Sleepy art is a taller aspect ratio; size it so its visible art reads the same
   width as the peek art, and nudge its bottom so it still rests on the frame edge. */
.top .cat-sleepy {
  width: 260px;
  left: 50%;
  bottom: -3px;
}

/* ---------- day mode: peek is out, sleepy is parked below the page edge ---------- */

/* peek climbs back out of hiding and eases gently into place */
.top .cat-peek {
  transform: translateY(0);
  transition-duration: 0.45s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.28s;
}
/* sleepy drops out of sight the moment day returns */
.top .cat-sleepy {
  transform: translateX(-50%) translateY(180px);
}

/* ---------- night mode: sleepy is out, peek is parked below the page edge ---------- */

/* peek drops out of sight the moment night falls */
:root[data-theme="dark"] .top .cat-peek {
  transform: translateY(150px);
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  transition-delay: 0s;
}
/* sleepy climbs back out and eases gently into place */
:root[data-theme="dark"] .top .cat-sleepy {
  transform: translateX(-50%) translateY(0);
  transition-duration: 0.45s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.28s;
}

.frame {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--shadow);
  overflow: hidden;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: var(--bar);
  color: var(--bar-text);
  border-bottom: 3px solid var(--ink);
  font-family: var(--f-head);
  font-size: 15px;
  padding: 3px 0;
}
.marquee-track {
  display: inline-flex;
  animation: slide 150s linear infinite;
}
.marquee-track span { padding-right: 2.2em; }
@keyframes slide { to { transform: translateX(-50%); } }

.cols {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr) 248px;
  grid-template-areas: "nav main feed";
  gap: 0;
}

.col-nav  { grid-area: nav;  background: var(--mint); border-right: 3px solid var(--ink); padding: 18px 14px 24px; }
.col-main { grid-area: main; padding: 22px 26px 30px; min-width: 0; }
.col-feed { grid-area: feed; background: var(--paper-soft); border-left: 3px solid var(--ink); padding: 18px 14px 24px; }

/* ---------- nav ---------- */

.nav-title,
.bar {
  margin: 0;
  background: var(--bar);
  color: var(--bar-text);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  padding: 3px 10px;
  border: 3px solid var(--ink);
}

.nav-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 8px 0 8px;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  border-top: 0;
}
.nav-list a {
  display: block;
  padding: 2px 10px 2px 30px;
  font-family: var(--f-head);
  font-size: 19px;
  text-decoration: none;
  color: var(--text);
  position: relative;
}
.nav-list a:visited { color: var(--text); }
.nav-list a::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  width: 14px;
  height: 14px;
  background: url("img/star.svg") center / contain no-repeat;
  opacity: 0.65;
}
.nav-list a:hover { background: var(--mark); color: var(--ink); }
.nav-list a:hover::before { opacity: 1; }
.nav-list a[aria-current="page"] {
  background: var(--mark);
  color: var(--ink);
  font-weight: 700;
}
.nav-list a[aria-current="page"]::before { opacity: 1; background-image: url("img/heart.svg"); }

.theme-btn {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 4px 8px;
  font-family: var(--f-head);
  font-size: 16px;
  color: var(--text);
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  cursor: pointer;
}
.theme-btn:hover { background: var(--mark); color: var(--ink); }
.theme-btn:active { box-shadow: none; transform: translate(3px, 3px); }

.stamp {
  display: block;
  margin: 0 auto 6px;
  border: 3px solid var(--ink);
  background: var(--paper-soft);
  padding: 2px;
  width: max-content;
  transform: rotate(2deg);
}
.stamp img { display: block; width: 88px; height: 31px; }
.stamp-note { font-size: 13px; text-align: center; margin: 0 0 4px; color: var(--muted); }

.sprite-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 26px;
}
.sprite-row img { width: 56px; height: auto; }
.sprite-row img:nth-child(2) { width: 46px; margin-bottom: 4px; }

/* ---------- main content ---------- */

.col-main h1 {
  margin: 0 0 12px;
  font-family: var(--f-head);
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1.15;
  color: var(--head);
}
.col-main h2:not(.bar) {
  margin: 28px 0 8px;
  font-family: var(--f-head);
  font-size: clamp(21px, 5.5vw, 25px);
  line-height: 1.2;
  color: var(--head);
}
.col-main p { margin: 0 0 14px; max-width: 62ch; }
.col-main ul:not(.plain) { max-width: 62ch; padding-left: 22px; }

.box {
  position: relative;
  margin: 0 0 24px;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
}
.box > .bar { border: 0; border-bottom: 3px solid var(--ink); }
.box-body { padding: 14px 18px 8px; }
.box-body > :last-child { margin-bottom: 8px; }

.hello { padding: 18px 20px 6px; background: var(--paper-soft); }
.hello h1 { margin-top: 0; }

.sticker {
  position: absolute;
  top: -14px;
  right: 18px;
  padding: 1px 10px;
  background: var(--accent);
  color: var(--accent-text);
  border: 3px solid var(--ink);
  font-family: var(--f-head);
  font-size: 15px;
  transform: rotate(4deg);
}

.keeper-row {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.avatar {
  width: 124px;
  height: 124px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
  border: 3px dashed var(--ink);
  background: var(--mint);
  transform: rotate(-2deg);
}

.thumbs { display: flex; gap: 14px; margin: 4px 0 12px; flex-wrap: wrap; }
.thumbs a {
  display: grid;
  place-items: center;
  width: 92px;
  height: 78px;
  background: var(--tint, var(--mint));
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
}
.thumbs li:nth-child(1) a { transform: rotate(-2deg); }
.thumbs li:nth-child(2) a { transform: rotate(1.5deg); }
.thumbs li:nth-child(3) a { transform: rotate(-1deg); }
.thumbs a:hover { background: var(--mark); }
.thumbs img { width: 52px; height: auto; }

.chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 0 10px;
  border: 2px dashed var(--ink);
  background: var(--chip);
  font-size: 15px;
}
.chips li:nth-child(odd)  { transform: rotate(-1.2deg); }
.chips li:nth-child(even) { transform: rotate(1deg); }
.chips li:nth-child(3n)   { background: var(--mark); color: var(--ink); }

.plain { list-style: none; margin: 0; padding: 0; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list > li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-top: 2px dotted var(--muted);
}
.post-list > li:first-child { border-top: 0; }
.post-date {
  align-self: start;
  text-align: center;
  font-family: var(--f-head);
  font-size: 15px;
  line-height: 1.25;
  padding: 3px 4px;
  background: var(--mark);
  color: var(--ink);
  border: 2px solid var(--ink);
}
.post-list h2, .post-list h3 {
  margin: 0 0 2px;
  font-family: var(--f-head);
  font-size: clamp(18px, 5vw, 21px);
  line-height: 1.25;
}
.post-list p { margin: 0 0 6px; font-size: 16px; }
.post-list .chips { margin: 0; }
.post-list .chips li { font-size: 13px; }

.pin {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 12px;
  font-family: var(--f-head);
  background: var(--accent);
  color: var(--accent-text);
  border: 2px solid var(--ink);
  vertical-align: middle;
  transform: rotate(-3deg);
}

/* article */
.article h1 { font-size: clamp(26px, 7vw, 36px); }
.article .meta { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.article blockquote {
  margin: 18px 0;
  padding: 6px 16px;
  border-left: 6px solid var(--bar);
  background: var(--paper-soft);
  max-width: 58ch;
}
.article code {
  padding: 0 5px;
  background: var(--chip);
  border: 2px solid var(--ink);
  font-size: 15px;
}
.article .after {
  margin-top: 30px;
  padding-top: 12px;
  border-top: 3px double var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* gallery */
.gallery {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px 18px;
}
.gallery li { margin: 0; }
/* the tilt lives in a variable so hover transforms can compose with it instead of
   replacing it (a plain `transform` would cancel the rotation) */
.gallery li:nth-child(odd)  { --rot: -0.8deg; }
.gallery li:nth-child(even) { --rot: 0.9deg; }
.gallery li.wide { grid-column: span 2; }
.shot {
  display: block;
  padding: 8px 8px 6px;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  text-decoration: none;
  color: var(--text);
  transform: rotate(var(--rot, 0deg));
  /* Every property the theme transition touches is listed on purpose: a bare
     `transition: transform` would replace the shorthand from the `*` rule and the
     card would stop fading between day and night. */
  transition:
    transform 0.16s ease,
    box-shadow 0.2s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}
.shot:visited { color: var(--text); }
.shot:hover {
  background: var(--mark);
  color: var(--ink);
  /* pop the card out of the grid, keeping its tilt */
  transform: rotate(var(--rot, 0deg)) scale(1.05) translateY(-3px);
  box-shadow: 6px 6px 0 var(--shadow);
}
.shot .pic {
  display: grid;
  place-items: center;
  height: 140px;
  border: 2px solid var(--ink);
  background: var(--tint, var(--mint));
}
.wide .shot .pic { height: 140px; }
.shot .pic img { width: 88px; height: auto; }
.shot .cap { display: block; padding-top: 6px; font-size: 14px; line-height: 1.35; }
.shot.empty {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
  color: var(--muted);
}
.shot.empty .pic { height: auto; min-height: 140px; border-style: dashed; background: transparent; padding: 10px; text-align: center; font-size: 14px; line-height: 1.35; }

/* gallery: folders */
.folder-grid {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px 18px;
}
.folder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 8px;
  text-align: center;
  text-decoration: none;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  color: var(--text);
  /* same reasoning as .shot above: list every theme property or the day/night fade breaks */
  transition:
    transform 0.16s ease,
    box-shadow 0.2s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}
.folder-card:visited { color: var(--text); }
.folder-card:hover {
  background: var(--mark);
  transform: scale(1.05) translateY(-3px);
  box-shadow: 6px 6px 0 var(--shadow);
}
.folder-card:active { box-shadow: none; transform: translate(3px, 3px); }
.folder-icon { display: block; width: 96px; height: auto; }   /* the icon sits above the name */
.folder-name { font-family: var(--f-head); font-size: 17px; line-height: 1.25; }
.folder-count { font-size: 13px; line-height: 1.2; color: var(--muted); }
.folder-card:hover .folder-count { color: var(--ink); }

/* gallery: inside a folder */
#gallery-root[hidden],
#gallery-folder-view[hidden] { display: none; }
#gallery-root.is-returning { animation: gallery-return 0.24s ease-out; }
@keyframes gallery-return { from { opacity: 0; transform: translateY(6px); } }

.folder-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.folder-back {
  display: inline-block;
  padding: 0 8px;
  font-family: var(--f-head);
  font-size: 15px;
  text-decoration: none;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  color: var(--text);
}
.folder-back:visited { color: var(--text); }
.folder-back:hover { background: var(--mark); color: var(--ink); }
.folder-title { font-family: var(--f-head); font-size: 18px; }
/* the FLIP maths in site.js assumes the default centre transform-origin */
.folder-stage { transform-origin: 50% 50%; }
.folder-stage.is-opening { transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease; }
/* the pictures tumble out of the folder one after another */
.folder-stage.is-opening li { animation: folder-item 0.3s ease-out backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes folder-item { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* gallery: the picture viewer (same look as the old lightbox, now with motion) */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}
.viewer[hidden] { display: none; }
.viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 15, 38, 0.86);
  opacity: 0;
  transition: opacity 0.28s ease;
  cursor: zoom-out;
}
.viewer.is-open .viewer-backdrop { opacity: 1; }
.viewer-figure {
  position: relative;
  margin: 0;
  padding: 14px 14px 10px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--shadow);
  max-width: min(92vw, 520px);
  transform-origin: 50% 50%;
  /* transform/opacity for the zoom, plus the theme properties so a theme change still fades */
  transition:
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.viewer-figure.from-center { animation: viewer-pop 0.3s ease-out; }
@keyframes viewer-pop { from { opacity: 0; transform: scale(0.88); } }
.viewer-frame {
  display: grid;
  place-items: center;
  padding: 24px;
  border: 2px solid var(--ink);
  background: var(--tint, var(--mint));
}
.viewer-frame img { width: min(60vw, 320px); height: auto; }
.viewer figcaption { padding-top: 8px; font-size: 15px; }
.viewer-close { position: relative; display: inline-block; margin-top: 6px; }
html.gallery-locked { overflow: hidden; }

/* gallery: reduced motion — opening, closing and hovering all happen instantly */
@media (prefers-reduced-motion: reduce) {
  .shot,
  .folder-card,
  .folder-stage.is-opening,
  .folder-stage.is-opening li,
  .viewer-figure,
  .viewer-backdrop,
  #gallery-root.is-returning { transition: none; animation: none; }
}

/* links page */
.link-grid {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.link-grid a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  text-decoration: none;
  color: var(--text);
}
.link-grid a:visited { color: var(--text); }
.link-grid a:hover { background: var(--mark); color: var(--ink); }
.link-grid .ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  background: var(--c, var(--mint));
  border: 2px solid var(--ink);
}
.link-grid strong { display: block; font-family: var(--f-head); font-size: 18px; line-height: 1.2; }
.link-grid small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.link-grid a:hover small { color: var(--ink); }

.btn88-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.btn88 {
  width: 88px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--c, var(--mint));
  color: var(--ink);
  font-family: var(--f-head);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  image-rendering: auto;
}
.btn88:visited { color: var(--ink); }
.btn88:hover { background: var(--mark); }

textarea.code {
  width: 100%;
  max-width: 62ch;
  height: 78px;
  padding: 8px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  resize: vertical;
}

/* ---------- right column ---------- */

.feed-box {
  margin: 0 0 22px;
  border: 3px solid var(--ink);
  background: var(--paper);
}
.feed-box .bar { border: 0; border-bottom: 3px solid var(--ink); }
.feed-scroll {
  max-height: 258px;
  overflow-y: auto;
  padding: 8px 12px;
  scrollbar-color: var(--bar) var(--paper);
}
.feed-scroll p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.feed-scroll b {
  font-family: var(--f-head);
  font-weight: 700;
  background: var(--mark);
  color: var(--ink);
  padding: 0 4px;
  margin-right: 6px;
}

.sticky {
  margin: 0 0 20px;
  padding: 12px 14px 10px;
  background: var(--sticky);
  color: #022859;
  box-shadow: 4px 4px 0 var(--shadow);
  transform: rotate(-1.8deg);
  font-size: 15px;
  line-height: 1.5;
}
.sticky h2 {
  margin: 0 0 4px;
  font-family: var(--f-head);
  font-size: 20px;
  color: #022859;
}
.sticky dl { margin: 0; }
.sticky dt { font-family: var(--f-head); font-weight: 700; float: left; clear: left; margin-right: 6px; }
.sticky dd { margin: 0 0 2px; }

.mini-pics { display: flex; gap: 10px; align-items: flex-end; justify-content: flex-end; }
.mini-pics img { height: auto; }
.mini-pics img:nth-child(1) { width: 58px; }
.mini-pics img:nth-child(2) { width: 62px; margin-bottom: -2px; }

/* ---------- footer ---------- */

.foot {
  border-top: 3px solid var(--ink);
  background: var(--mint);
  position: relative;
  padding: 0 0 12px;
  display: flex;
  flex-direction: column;
}
.foot .footertext {
  height: 12px;
  margin-top: -2px;
}
.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  margin-top: 8px;
}

.foot-date {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- hit counter ---------- */
.hit-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  background: var(--paper-soft);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  font-family: var(--f-head);
  font-size: 14px;
  color: var(--text);
  transform: rotate(-0.5deg);
}
.hit-icon {
  font-size: 16px;
  line-height: 1;
}
#hit-count {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 16px;
  min-width: 3ch;
  text-align: right;
}
.hit-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- small screens ---------- */

/* Below this width the header stops sitting next to the sticker. The sticker moves under
   the title and centers on the frame edge, so it can never overlap the text no matter
   how long the title/tagline gets or how many items the header grows to. */
@media (max-width: 1000px) {
  body { padding: 22px 10px 32px; }
  .top {
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .site-title { margin-top: 4px; }
  .tagline { margin: 0 0 0 10px; max-width: 100%; }
  .top .cat-wrap {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: center;
    width: min(66vw, 260px);
    height: auto;
    aspect-ratio: 609 / 454;   /* matches mitsu_peek.webp, the tallest sticker */
    margin: 0 0 -6px;          /* tuck the artwork down onto the frame's top edge */
  }
  .top .cat-sleepy { width: 91.2%; }   /* keep sleepy's proportion to the wrap */
}

@media (max-width: 880px) {
  .cols {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nav" "main" "feed";
  }
  .col-nav { border-right: 0; border-bottom: 3px solid var(--ink); padding: 14px; }
  .col-feed { border-left: 0; border-top: 3px solid var(--ink); }
  .nav-list { display: flex; flex-wrap: wrap; padding: 6px 4px; border-top: 0; }
  .nav-list li { flex: 1 1 auto; }
  .nav-list a { padding: 2px 8px 2px 26px; }
  .col-nav .stamp,
  .col-nav .stamp-note,
  .col-nav .sprite-row { display: none; }
  .theme-btn { width: auto; margin-bottom: 0; }
  .col-main { padding: 20px 16px 26px; }
  .keeper-row { grid-template-columns: 1fr; }
  .gallery li.wide { grid-column: auto; }
  .hit-counter { transform: none; }
  .foot-row { flex-direction: column; gap: 6px; text-align: center; }
}

@media (max-width: 560px) {
  body { padding: 18px 8px 28px; }
  .box-body { padding: 12px 14px 6px; }
  .hello { padding: 16px 14px 6px; }
  .sticker { font-size: 13px; right: 10px; }
  .marquee { font-size: 14px; }
  .top .cat-wrap { width: min(72vw, 240px); }
  .article .after { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .post-list > li { grid-template-columns: 1fr; gap: 6px; }
  .post-date { justify-self: start; padding: 0 8px; }
  .thumbs a { width: 84px; height: 72px; }
  .nav-list a { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* lists that are layout, not prose: no bullet indent */
.col-main ul.link-grid,
.col-main ul.post-list,
.col-main ul.gallery,
.col-main ul.folder-grid { padding-left: 0; }

img.avatar {
  object-fit: cover;
  padding: 0;
  border-style: solid;
  image-rendering: auto;
}

/* ---------- easter egg: pat the image (built in site.js) ---------- */

.pat {
  --pat-w: 104px;
  --pat-hide: 64%;           /* how much of the image is tucked out of view */
  position: fixed;
  right: 22px;
  bottom: 0;
  width: var(--pat-w);
  z-index: 30;
  transform: translateY(var(--pat-hide));
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.pat.is-open { transform: translateY(0); }

.pat-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.pat-btn img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
  transform-origin: 50% 100%;
  user-select: none;
}
.pat-btn.pop img { animation: pat-pop 0.16s ease-out; }
@keyframes pat-pop { 50% { transform: scale(0.93, 0.9); } }

/* the text that stacks above the image: milestone flair on top, counter underneath */
.pat-hud {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.pat-count {
  margin: 0;
  padding: 1px 10px;
  white-space: nowrap;
  background: var(--paper-soft);
  color: var(--text);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  font-family: var(--f-head);
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  transform: rotate(-2deg);
  transition: opacity 0.45s ease;      /* slow fade out */
}
.pat-count.show { opacity: 1; transition-duration: 0.1s; }

/* milestone flair ("patting spree!" and friends) */
.pat-flair {
  margin: 0;
  white-space: nowrap;
  opacity: 0;
  transform: rotate(-2deg);
  transform-origin: 100% 100%;
  transition: opacity 0.45s ease;
}
.pat-flair span {
  display: inline-block;
  padding: 0 12px;
  background: var(--accent);
  color: var(--accent-text);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
}
.pat-flair.show { opacity: 1; transition-duration: 0.1s; }
.pat-flair.show span { animation: pat-shake 0.18s linear infinite; }   /* --shake and --tilt are set per tier in site.js */
.pat-flair.pop { animation: flair-pop 0.28s ease-out; }

/* after the last tier, the flair slowly fades (duration is set in site.js) */
.pat-flair.show.fading {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: linear;
  transition-duration: 30s;
}

@keyframes pat-shake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(calc(var(--shake, 1px) * -1), calc(var(--shake, 1px) * 0.5)) rotate(calc(var(--tilt, 0.3) * -1deg)); }
  40%  { transform: translate(var(--shake, 1px), calc(var(--shake, 1px) * -0.6)) rotate(calc(var(--tilt, 0.3) * 1deg)); }
  60%  { transform: translate(calc(var(--shake, 1px) * -0.7), calc(var(--shake, 1px) * -0.4)) rotate(calc(var(--tilt, 0.3) * 0.6deg)); }
  80%  { transform: translate(calc(var(--shake, 1px) * 0.8), calc(var(--shake, 1px) * 0.6)) rotate(calc(var(--tilt, 0.3) * -0.6deg)); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes flair-pop {
  0%   { transform: rotate(-2deg) scale(0.6); }
  60%  { transform: rotate(-2deg) scale(1.15); }
  100% { transform: rotate(-2deg) scale(1); }
}

@media (max-width: 880px) {
  .pat { --pat-w: 86px; right: 12px; }
  .pat-flair span { font-size: 17px; padding: 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .pat { transition: none; }
  .pat-btn.pop img { animation: none; }
  .pat-flair.show span,
  .pat-flair.pop { animation: none; }
  /* swap the header kitty instantly instead of animating it */
  .top .cat-peek,
  .top .cat-sleepy,
  :root[data-theme="dark"] .top .cat-peek,
  :root[data-theme="dark"] .top .cat-sleepy { transition: none; }
}