/* droberts.xyz - folder archive. plain CSS. */
:root {
 --kraft: #c9aa7d;
 --paper: #f5efe1;
 --paper-2: #efe7d4;
 --line: #e4d9c0;
 --ink: #2c2620;
 --ink-soft: #6d6453;
 --faint: #9a8f78;
 --accent: #2f6f62;
 --accent-2: #4a7c8a;
 --accent-soft: #5a8f82;
 --red: var(--accent);
 --edge: #2c262033;
 --tab-green: #8a9a5b;
 --tab-blue: #4a7c8a;
 --tab-red: #2f6f62;
 --tab-dark: #3d362a;
 --radius: 4px;
 --shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px rgba(60,45,25,.28);
 --mono: rgba(91, 74, 48, 0.45);
 --glow: rgba(255,255,255,.22);
 --max: 1100px;
 --pad-x: clamp(0.9rem, 2.2vw, 1.5rem);
 --folder-pad: clamp(1.35rem, 3vw, 2.75rem);
 --folder-pad-left: clamp(2.2rem, 3.5vw, 3.5rem);
}

/* same binder identity, evening desk */
html[data-theme="dark"] {
 --kraft: #1c1814;
 --paper: #2a241c;
 --paper-2: #231e18;
 --line: #3d3428;
 --ink: #ebe4d6;
 --ink-soft: #b5a894;
 --faint: #8a7d6a;
 --accent: #5fa896;
 --accent-2: #6a9aab;
 --accent-soft: #4d8a7a;
 --edge: #ebe4d622;
 --tab-green: #6d7d4a;
 --tab-blue: #4a6d80;
 --tab-red: #3d7a6c;
 --tab-dark: #14110e;
 --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 22px 48px rgba(0,0,0,.55);
 --mono: rgba(235, 228, 214, 0.12);
 --glow: rgba(255,255,255,.04);
}
html[data-theme="dark"] .polaroid {
  --pol-bg: #1f1a15;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 16px 36px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.04) inset;
}
html[data-theme="dark"] .polaroid::before {
  background: linear-gradient(180deg, rgba(90,74,48,.7), rgba(60,48,32,.45));
}

html[data-theme="dark"] .polaroid::after {
  background: radial-gradient(circle, rgba(235,228,214,.12), transparent 70%);
}
html[data-theme="dark"] .polaroid-flagged:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 22px 44px rgba(0,0,0,.55),
    0 0 0 6px rgba(235,228,214,.08);
}
html[data-theme="dark"] .home-card,
html[data-theme="dark"] .connect-list li a,
html[data-theme="dark"] .connect-list li .cl-btn,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .proj {
  background: rgba(0,0,0,.22);
}
html[data-theme="dark"] .tile:hover {
  background: rgba(0,0,0,.28);
}
html {
  color-scheme: light;
  transition: color-scheme .2s ease;
}
html[data-theme="dark"] { color-scheme: dark; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* keyboard focus - keep visible */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent, #2f6f62);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 100;
  padding: .65rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: .8rem;
  font-weight: 600;
  border-radius: 3px;
  transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline-offset: 2px;
}
body {
 font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
 color: var(--ink);
 background-color: var(--kraft);
 background-image:
 radial-gradient(ellipse 120% 80% at 50% -20%, var(--glow), transparent 55%),
 radial-gradient(ellipse 80% 60% at 100% 100%, rgba(0,0,0,.12), transparent 50%),
 radial-gradient(ellipse 70% 50% at 0% 80%, rgba(0,0,0,.08), transparent 45%);
 line-height: 1.65;
 transition: background-color .35s ease, color .25s ease;
 font-size: clamp(15.5px, 0.25vw + 14.5px, 17.5px);
 -webkit-font-smoothing: antialiased;
 padding: clamp(0.85rem, 1.8vw, 1.75rem) var(--pad-x) clamp(1.25rem, 2.2vw, 2.25rem);
 min-height: 100vh;
 position: relative;
}
/* kraft fibre + DR monogram watermark (mask = theme-aware colour) */
.bg-texture {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 0;
 background-color: transparent;
 background-image:
 url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"),
 repeating-linear-gradient(0deg, transparent 0 23px, var(--mono) 23px 24px),
 repeating-linear-gradient(90deg, transparent 0 23px, var(--mono) 23px 24px),
 repeating-linear-gradient(0deg, transparent, transparent 2px, var(--mono) 2px, var(--mono) 3px);
 background-size: 160px 160px, 100% 100%, 100% 100%, 100% 100%;
 opacity: 0.55;
}
 .bg-texture::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-color: var(--mono);
  -webkit-mask: url("/monogram.svg?v=7") center / 150px repeat;
  mask: url("/monogram.svg?v=7") center / 150px repeat;
  opacity: 1;
  transform: rotate(-8deg);
 }
 .bg-texture::after { display: none; }
body > *:not(.bg-texture) { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
.serif { font-family: 'Fraunces', Georgia, serif; }

/* page enter */
.folder, .folder-foot {
 animation: folder-in .6s cubic-bezier(.2,.8,.2,1) both;
}
.folder-foot { animation-delay: .12s; }
.tabs {
 animation: tabs-in .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes folder-in {
 from {
 opacity: 0;
 transform: translateY(16px) scale(.988);
 }
 to {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}
@keyframes tabs-in {
 from {
 opacity: 0;
 transform: translateY(8px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
.grid-2x2 .tile {
 opacity: 0;
 animation: tile-in .55s cubic-bezier(.2,.8,.2,1) forwards;
}
.grid-2x2 .tile:nth-child(1) { animation-delay: .1s; }
.grid-2x2 .tile:nth-child(2) { animation-delay: .18s; }
.grid-2x2 .tile:nth-child(3) { animation-delay: .26s; }
.grid-2x2 .tile:nth-child(4) { animation-delay: .34s; }
@keyframes tile-in {
 from {
 opacity: 0;
 transform: translateY(12px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes polaroid-float {
 0%, 100% { transform: rotate(-2deg) translateY(0); }
 50% { transform: rotate(-1.2deg) translateY(-5px); }
}
 .bg-texture::before {
  animation: mono-drift 90s linear infinite;
 }
 @keyframes mono-drift {
  from { transform: rotate(-8deg) translate3d(0, 0, 0); }
  to { transform: rotate(-8deg) translate3d(-28px, -20px, 0); }
 }
.stat, .chart-card, .home-card, .post a, .tile {
 transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.stat:hover, .chart-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 18px rgba(60,45,25,.1);
}
.tile:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 22px rgba(60,45,25,.12);
 background: rgba(255,255,255,.55);
}
.btn {
 transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover {
 box-shadow: 0 4px 12px rgba(60,45,25,.12);
}
.tab {
 transition: transform .18s ease, filter .18s ease;
}
.tab:hover { filter: brightness(1.06); }
.fig img {
 transition: box-shadow .25s ease, transform .25s ease;
}
.fig:hover img {
 transform: translateY(-2px);
 box-shadow: 0 12px 28px rgba(60,45,25,.16);
}
.rb-fill {
 transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.stat-v {
 transition: color .2s ease;
}
.stat:hover .stat-v { color: var(--accent); }

.tabs {
 max-width: min(var(--max), 100%);
 width: 100%;
 margin: 0 auto;
 display: flex;
 gap: 3px;
 padding-left: clamp(.75rem, 2vw, 1.5rem);
 position: relative;
 z-index: 3;
 flex-wrap: wrap;
}
.tab {
 font-family: 'IBM Plex Mono', ui-monospace, monospace;
 font-size: clamp(.78rem, 0.2vw + .72rem, .92rem);
 font-weight: 600;
 letter-spacing: .05em;
 text-transform: uppercase;
 color: #fff;
 padding: .7rem clamp(.85rem, 1.5vw, 1.4rem) .9rem;
 border-radius: 8px 8px 0 0;
 transform: translateY(2px);
 transition: transform .15s;
 white-space: nowrap;
 box-shadow: 0 -2px 6px rgba(0,0,0,.12) inset;
}
.tab:hover { transform: translateY(-2px); }
.tab.active { transform: translateY(0); box-shadow: 0 -3px 8px rgba(0,0,0,.18) inset; }
.tab:nth-child(1) { background: var(--tab-green); }
.tab:nth-child(2) { background: var(--tab-blue); color: #fff; }
.tab:nth-child(3) { background: var(--tab-dark); }
.tab .n { opacity: .65; margin-right: .3rem; }

/* wide aliases kept for markup - same width as rest of site */
.folder.folder-wide,
.folder-foot.folder-foot-wide,
.tabs.tabs-wide {
  max-width: min(var(--max), 100%);
}

/* guestbook / visitor log */
.gb-page { overflow-x: hidden; }
.gb-hero {
 margin-bottom: .5rem;
 max-width: 40rem;
}
.gb-kicker {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .75rem;
 font-weight: 600;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--accent);
 margin: 0 0 .55rem;
}
.gb-hero h1 {
 font-family: 'Fraunces', Georgia, serif;
 font-size: clamp(2.6rem, 5.2vw, 3.75rem);
 font-weight: 600;
 line-height: 1.08;
 margin: 0 0 .85rem;
 color: var(--ink);
}
.gb-pitch {
 font-size: clamp(1.08rem, 0.4vw + 1rem, 1.22rem);
 color: var(--ink-soft);
 max-width: 42rem;
 margin: 0;
 line-height: 1.6;
}
.gb-layout {
 display: grid;
 grid-template-columns: minmax(300px, 360px) 1fr;
 gap: 1.75rem 2rem;
 align-items: start;
 margin-top: 1.5rem;
}
.gb-wall-wrap { min-width: 0; }
.gb-count {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .78rem;
 color: var(--faint);
 letter-spacing: .04em;
}
.sr-only {
 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
 overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.gb-form {
 margin: 0;
 position: sticky;
 top: 1.25rem;
 opacity: 0;
 animation: compose-in .5s cubic-bezier(.2,.8,.2,1) .05s forwards;
}
.gb-compose-label {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .7rem;
 font-weight: 600;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: rgba(90,74,24,.55);
 margin: 0 0 .65rem;
}
.sticky-compose {
 --note: #f3df7e;
 background: var(--note);
 width: 100%;
 padding: 1.35rem 1.35rem 1.45rem;
 box-shadow: 0 16px 40px rgba(60,45,25,.28);
 transform: rotate(-1deg);
 position: relative;
 border-radius: 2px;
}
.sticky-compose::before {
 content: '';
 position: absolute;
 top: -12px; left: 50%;
 transform: translateX(-50%) rotate(2deg);
 width: 96px; height: 24px;
 background: rgba(210,183,135,.55);
 box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.pad-wrap {
 background: rgba(255,255,255,.22);
 border-radius: 3px;
 margin-bottom: .5rem;
 border: 1px dashed rgba(90,74,24,.18);
}
#pad {
 display: block;
 width: 100%;
 height: 260px;
 touch-action: none;
 cursor: crosshair;
 border-radius: 3px;
}
.pad-tools {
 display: flex;
 flex-wrap: wrap;
 gap: .4rem;
 margin-bottom: .55rem;
 align-items: center;
}
.tool-sep {
 width: 1px;
 height: 1rem;
 background: rgba(44,38,32,.18);
 margin: 0 .15rem;
}
.pad-tools .tool {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .68rem;
 font-weight: 600;
 letter-spacing: .04em;
 text-transform: uppercase;
 border: 1px solid rgba(44,38,32,.25);
 background: rgba(255,255,255,.4);
 color: #5a4a18;
 padding: .35rem .55rem;
 border-radius: 3px;
 cursor: pointer;
 transition: background .15s, color .15s, border-color .15s;
}
.pad-tools .tool.on,
.pad-tools .tool:hover {
 background: var(--ink);
 color: var(--paper);
 border-color: var(--ink);
}
.sticky-compose input,
.sticky-compose textarea {
 width: 100%;
 border: 0;
 background: transparent;
 font-family: 'Caveat', cursive;
 color: #5a4a18;
 resize: none;
}
.sticky-compose input {
 font-size: 1.45rem;
 font-weight: 600;
 border-top: 1px dashed rgba(90,74,24,.25);
 margin-top: .35rem;
 padding: .5rem 0 .2rem;
}
.sticky-compose textarea {
 font-size: 1.35rem;
 line-height: 1.35;
 min-height: 4rem;
}
.sticky-compose input::placeholder,
.sticky-compose textarea::placeholder { color: rgba(90,74,24,.4); }
.gb-form-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: .75rem;
 margin-top: .75rem;
 flex-wrap: wrap;
}
.gb-colors { display: flex; gap: .45rem; }
.swatch {
 width: 22px; height: 22px;
 border-radius: 50%;
 border: 1.5px solid rgba(44,38,32,.35);
 background: var(--c);
 cursor: pointer;
 padding: 0;
 transition: transform .15s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.gb-status {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .75rem;
 color: var(--ink-soft);
 margin-top: .65rem;
 min-height: 1.1em;
}
.gb-wall-wrap {
 opacity: 1;
 min-width: 0;
}
/* tidy grid + internal scroll (no messy pile, no endless page) */
.gb-wall {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
 gap: 1rem 0.95rem;
 align-content: start;
 max-height: min(62vh, 560px);
 overflow-y: auto;
 overflow-x: hidden;
 padding: .55rem .45rem 1.1rem 0.2rem;
 margin: 0;
 scrollbar-width: thin;
 scrollbar-color: rgba(44,38,32,.25) transparent;
 perspective: 800px;
}
.gb-wall.gb-wall-animating {
 overflow: hidden; /* avoid scrollbar jump during entrance */
}
.gb-wall .note {
 will-change: transform, opacity, filter;
}
.gb-wall::-webkit-scrollbar { width: 8px; }
.gb-wall::-webkit-scrollbar-thumb {
 background: rgba(44,38,32,.2);
 border-radius: 4px;
}
@keyframes compose-in {
 from {
 opacity: 0;
 transform: translateY(20px) rotate(-6deg) scale(.94);
 }
 to {
 opacity: 1;
 transform: translateY(0) rotate(0) scale(1);
 }
}
.gb-wall .note {
 --note: #f3df7e;
 --rot: 0deg;
 position: relative;
 min-height: 148px;
 padding: .9rem .85rem .95rem;
 background: var(--note, #f3df7e);
 box-shadow: 0 8px 18px rgba(60,45,25,.16);
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 border-radius: 2px;
 /* start state set in JS; ends rotated slightly */
}
.gb-wall .note::before {
 content: '';
 position: absolute;
 top: -8px; left: 50%;
 transform: translateX(-50%);
 width: 44px; height: 12px;
 background: rgba(210,183,135,.45);
}
.gb-wall .note:hover {
 z-index: 2;
 box-shadow: 0 12px 24px rgba(60,45,25,.22);
}
.gb-wall .note-fresh {
 box-shadow: 0 0 0 2px var(--accent), 0 12px 24px rgba(60,45,25,.2);
}
.note-draw {
 width: 100%;
 height: auto;
 max-height: 88px;
 object-fit: contain;
 display: block;
 margin-bottom: .35rem;
 pointer-events: none;
 border-radius: 2px;
}
.note-msg {
 font-family: 'Caveat', cursive;
 font-size: 1.25rem;
 line-height: 1.25;
 color: #3d3420;
 word-break: break-word;
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.note-foot {
 display: flex;
 justify-content: space-between;
 gap: .35rem;
 align-items: baseline;
 margin-top: .5rem;
 color: rgba(61,52,32,.65);
}
.note-name {
 font-family: 'Caveat', cursive;
 font-size: 1.05rem;
 color: #5a4a18;
}
.note-foot time {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .62rem;
 letter-spacing: .04em;
 white-space: nowrap;
}
.gb-empty {
 font-size: .95rem;
 color: var(--ink-soft);
 margin-top: .75rem;
 padding: 1.5rem;
 border: 1px dashed var(--edge);
 border-radius: 3px;
 background: rgba(255,255,255,.35);
 text-align: center;
}

@media (max-width: 900px) {
 .gb-layout { grid-template-columns: 1fr; gap: 2rem; }
 .gb-form { position: static; max-width: 420px; }
 .sticky-compose { transform: none; }
 .gb-wall { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 520px) {
 .gb-wall { grid-template-columns: 1fr 1fr; gap: 1rem; }
 #pad { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
 .note, .note-fresh, .home-in, .gb-in, .grid-2x2 .tile,
 .gb-wall-wrap, .gb-form, .folder, .folder-foot, .tabs,
 .polaroid, .bg-texture::before, .bg-texture::after {
 animation: none !important;
 opacity: 1;
 transform: none !important;
 filter: none;
 }
 .tile:hover, .stat:hover, .fig:hover img, .btn:hover {
 transform: none;
 }
}

.folder {
 max-width: min(var(--max), 100%);
 width: 100%;
 margin: 0 auto;
 background: var(--paper);
 background-image:
 linear-gradient(165deg, var(--glow), transparent 40%),
 linear-gradient(var(--paper), var(--paper-2));
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 position: relative;
 padding: var(--folder-pad) var(--folder-pad) var(--folder-pad) var(--folder-pad-left);
 overflow: hidden;
 transition: background .35s ease, box-shadow .35s ease, color .25s ease;
}
.folder::before {
 content: '';
 position: absolute;
 inset: 0;
 pointer-events: none;
 opacity: .5;
 background-image:
 url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.35'/%3E%3C/svg%3E"),
 repeating-linear-gradient(180deg, transparent, transparent 31px, var(--line) 32px);
 background-size: 160px 160px, 100% 100%;
 mix-blend-mode: multiply;
}
/* 6 punch holes - even, compact, less left-margin tax */
.folder::after {
 content: '';
 position: absolute;
 top: 0;
 bottom: 0;
 left: 1.15rem;
 width: 12px;
 pointer-events: none;
 opacity: 1;
 background-image:
  radial-gradient(circle, var(--kraft) 4px, rgba(44,38,32,.16) 4.5px, transparent 6px),
  radial-gradient(circle, var(--kraft) 4px, rgba(44,38,32,.16) 4.5px, transparent 6px),
  radial-gradient(circle, var(--kraft) 4px, rgba(44,38,32,.16) 4.5px, transparent 6px),
  radial-gradient(circle, var(--kraft) 4px, rgba(44,38,32,.16) 4.5px, transparent 6px),
  radial-gradient(circle, var(--kraft) 4px, rgba(44,38,32,.16) 4.5px, transparent 6px),
  radial-gradient(circle, var(--kraft) 4px, rgba(44,38,32,.16) 4.5px, transparent 6px);
 background-size: 12px 12px;
 background-repeat: no-repeat;
 background-position:
  center 10%,
  center 26%,
  center 42%,
  center 58%,
  center 74%,
  center 90%;
}
.folder > * { position: relative; z-index: 1; }

/* home 2×2 */
.grid-2x2 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto auto;
 gap: clamp(0.85rem, 1.2vw, 1.2rem);
 min-height: 0;
}
.tile {
 background: color-mix(in srgb, var(--paper) 70%, transparent);
 border: 1px solid var(--edge);
 border-radius: 3px;
 padding: clamp(1.1rem, 1.5vw, 1.45rem);
 min-height: 100%;
 display: flex;
 flex-direction: column;
 transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* theme toggle on binder - labelled so purpose is obvious */
.theme-toggle {
 position: absolute;
 top: 0.85rem;
 right: 0.85rem;
 z-index: 5;
 display: inline-flex;
 align-items: center;
 gap: .4rem;
 height: 2.35rem;
 padding: 0 .75rem 0 .55rem;
 border-radius: 999px;
 border: 1.5px solid var(--edge);
 background: color-mix(in srgb, var(--paper) 92%, var(--ink));
 color: var(--ink);
 box-shadow: 0 3px 10px rgba(60,45,25,.14);
 cursor: pointer;
 font-family: 'IBM Plex Mono', ui-monospace, monospace;
 font-size: .68rem;
 font-weight: 600;
 letter-spacing: .06em;
 text-transform: uppercase;
 line-height: 1;
 transition: background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.theme-toggle:hover {
 transform: translateY(-1px);
 border-color: var(--accent);
}
.theme-toggle .theme-ico {
 font-size: 1rem;
 line-height: 1;
 width: 1.15rem;
 text-align: center;
}
.theme-toggle .icon-moon { display: none; }
.theme-toggle .theme-label-dark { display: none; }
html[data-theme="dark"] .theme-toggle {
 background: color-mix(in srgb, var(--paper) 80%, #000);
 border-color: var(--faint);
 box-shadow: 0 3px 12px rgba(0,0,0,.35);
}
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }
html[data-theme="dark"] .theme-toggle .theme-label-light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-label-dark { display: inline; }

@media (max-width: 600px) {
  .theme-toggle {
    top: 0.65rem;
    right: 0.55rem;
    padding: 0 .55rem 0 .45rem;
    height: 2.15rem;
    font-size: .62rem;
    gap: .3rem;
  }
  .theme-toggle .theme-ico { font-size: .9rem; }
}
.tile-hero {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: center;
 gap: 1rem;
}
.tile-hero .polaroid { width: 168px; margin-bottom: .25rem; }
.tile-hero .name { font-size: clamp(2.1rem, 3.2vw, 2.75rem); }
.tile-hero .lead { margin: 0; font-size: 1.05rem; }
.block-head {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 1rem;
 margin-bottom: .55rem;
}
.block-title {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .78rem;
 font-weight: 600;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--ink-soft);
 margin-bottom: .65rem;
}
.block-head .block-title { margin-bottom: 0; }
.block-more {
 font-size: .84rem;
 color: var(--faint);
 letter-spacing: .02em;
}
.block-more:hover { color: var(--accent); }
.block-body {
 font-size: 1.08rem;
 color: var(--ink-soft);
 line-height: 1.55;
 flex: 1;
}
.block-body a {
 color: var(--ink);
 background: linear-gradient(var(--accent), var(--accent)) bottom / 100% 1.5px no-repeat;
}
.home-card {
 display: block;
 background: rgba(255,255,255,.45);
 border: 1px solid var(--edge);
 border-radius: 3px;
 padding: 1.05rem 1.15rem;
 transition: background .15s, transform .15s, box-shadow .15s;
}
.home-card:hover {
 background: #fff;
 transform: translateY(-1px);
 box-shadow: 0 8px 18px rgba(60,45,25,.12);
}
.home-card time {
 display: block;
 font-size: .75rem;
 color: var(--faint);
 letter-spacing: .04em;
 margin-bottom: .35rem;
}
.home-card strong {
 display: block;
 font-family: 'Fraunces', Georgia, serif;
 font-size: 1.25rem;
 font-weight: 600;
 color: var(--ink);
 margin-bottom: .3rem;
 line-height: 1.25;
}
.home-card span {
 display: block;
 font-size: .92rem;
 color: var(--ink-soft);
}
/* home connect list */
.connect-list {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  display: grid;
  gap: .45rem;
  flex: 1;
}
.connect-list li a,
.connect-list li .cl-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  width: 100%;
  text-align: left;
  padding: .55rem .65rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: rgba(255,255,255,.45);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.connect-list li a:hover,
.connect-list li .cl-btn:hover {
  background: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
}
.cl-k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cl-v {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
}
.cl-hint {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 500;
  color: var(--faint);
  margin-left: .35rem;
}
.support-note {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.support-note a {
  color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) bottom / 100% 1.5px no-repeat;
  font-weight: 500;
  white-space: nowrap;
}
.connect-list-row {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .65rem;
}
@media (max-width: 800px) {
  .connect-list-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .connect-list-row { grid-template-columns: 1fr; }
}

.home-proj-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.home-proj-list li {
 display: flex;
 justify-content: space-between;
 gap: 1rem;
 align-items: baseline;
 padding: .35rem 0;
 border-bottom: 1px dashed var(--line);
 font-size: .95rem;
}
.home-proj-list li:last-child { border-bottom: 0; }
.home-proj-list a {
 font-family: 'Fraunces', Georgia, serif;
 font-weight: 600;
 color: var(--ink);
 background: linear-gradient(var(--accent), var(--accent)) bottom / 0 1.5px no-repeat;
 transition: background-size .2s ease, color .2s ease;
}
.home-proj-list a:hover {
 color: var(--accent);
 background-size: 100% 1.5px;
}
.home-proj-list span {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .72rem;
 color: var(--faint);
 letter-spacing: .03em;
}

@media (max-width: 600px) {
 .grid-2x2 { grid-template-columns: 1fr; }
}
.polaroid {
  --pol-bg: #fffdf8;
  position: relative;
  width: 168px;
  padding: .55rem .55rem 1.15rem;
  background: var(--pol-bg);
  border-radius: 3px;
  transform: rotate(-2deg);
  animation: polaroid-float 7s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(44,38,32,.06),
    0 14px 32px rgba(60,45,25,.22),
    0 2px 0 rgba(255,255,255,.65) inset;
  transition: box-shadow .3s ease, transform .3s ease;
}
.polaroid::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 78px;
  height: 22px;
  background: linear-gradient(180deg, rgba(230,210,170,.75), rgba(200,175,130,.5));
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  border-radius: 1px;
}
/* soft glow ring behind photo */
.polaroid::after {
  content: '';
  position: absolute;
  inset: auto;
  left: 50%;
  top: 42%;
  width: 88%;
  height: 72%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%);
  z-index: 0;
  pointer-events: none;
  opacity: .85;
  filter: blur(2px);
}
.polaroid img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--paper-2);
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 1px rgba(44,38,32,.08),
    0 1px 2px rgba(0,0,0,.06);
  filter: contrast(1.04) saturate(0.96);
}
.polaroid .avatar-dark { display: none; }
html[data-theme="dark"] .polaroid .avatar-light { display: none; }
html[data-theme="dark"] .polaroid .avatar-dark {
  display: block;
  filter: contrast(1.06) saturate(0.9) brightness(1.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.polaroid-flagged:hover {
  animation-play-state: paused;
  transform: rotate(-0.5deg) translateY(-3px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(44,38,32,.08),
    0 20px 40px rgba(60,45,25,.28),
    0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
}
h1.name {
 font-family: 'Fraunces', Georgia, serif;
 font-size: clamp(2.2rem, 4vw, 2.85rem);
 font-weight: 600;
 letter-spacing: -0.02em;
 line-height: 1.05;
}
h1.name em {
 font-style: italic;
 color: var(--accent);
 font-weight: 500;
}
.lead {
 font-size: 1.05rem;
 font-weight: 400;
 color: var(--ink-soft);
 max-width: 32rem;
 line-height: 1.55;
}
.lead-sub {
 margin: .4rem 0 0;
 font-family: 'IBM Plex Mono', monospace;
 font-size: 1.05rem;
 letter-spacing: .02em;
}
.lead-sub a {
 color: var(--ink-soft);
 background: linear-gradient(var(--accent), var(--accent)) bottom / 100% 1.5px no-repeat;
 transition: color .15s ease;
}
.lead-sub a:hover { color: var(--accent); }
.lead a {
 color: var(--ink);
 background: linear-gradient(var(--accent), var(--accent)) bottom / 100% 1.5px no-repeat;
}
.meta-line {
 font-size: .72rem;
 color: var(--faint);
 letter-spacing: .04em;
}
.meta-loc {
 display: inline-flex;
 align-items: center;
 gap: .55rem;
}
/* Union Jack (SVG) - blue + white + red */
.flag-uk {
 display: inline-block;
 width: 1.45rem;
 height: 1rem;
 border-radius: 1px;
 box-shadow: 0 0 0 1px rgba(44,38,32,.2);
 background: #012169 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='2' d='m0 0 60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E") center / cover no-repeat;
 flex-shrink: 0;
 vertical-align: middle;
}
.polaroid-flagged {
  position: relative;
}
.flag-uk-badge {
  position: absolute;
  right: .55rem;
  bottom: 1.55rem;
  width: 2.35rem;
  height: 1.55rem;
  border-radius: 2px;
  z-index: 3;
  box-shadow:
    0 0 0 2px var(--pol-bg, #fffdf8),
    0 2px 6px rgba(60,45,25,.25);
}

/* speech bubble from polaroid */
.pfp-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: .35rem;
}
.speech-bubble {
  position: absolute;
  left: calc(100% + 0.55rem);
  top: 12%;
  z-index: 4;
  margin: 0;
  padding: .45rem .7rem;
  max-width: 9.5rem;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--edge);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(60,45,25,.14);
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  line-height: 1.15;
  white-space: nowrap;
  transform: rotate(3deg);
  animation: bubble-in .55s cubic-bezier(.2,.85,.2,1.1) .25s both;
}
.speech-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-left: 1.5px solid var(--edge);
  border-bottom: 1.5px solid var(--edge);
  transform: translateY(-50%) rotate(45deg);
}
@keyframes bubble-in {
  from {
    opacity: 0;
    transform: rotate(3deg) translateX(-8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotate(3deg) translateX(0) scale(1);
  }
}
html[data-theme="dark"] .speech-bubble {
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
@media (max-width: 600px) {
  .speech-bubble {
    left: auto;
    right: -0.25rem;
    top: -0.35rem;
    font-size: 1.1rem;
    padding: .4rem .6rem;
  }
  .speech-bubble::before {
    left: 18%;
    top: auto;
    bottom: -6px;
    transform: rotate(-45deg);
    border-left: 0;
    border-right: 1.5px solid var(--edge);
    border-bottom: 1.5px solid var(--edge);
  }
}
@media (prefers-reduced-motion: reduce) {
  .speech-bubble { animation: none; }
}

.btns { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .25rem; }
.btn {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .84rem;
 font-weight: 600;
 letter-spacing: .06em;
 text-transform: uppercase;
 padding: .88rem 1.4rem;
 border: 1.5px solid var(--ink);
 border-radius: 3px;
 background: transparent;
 color: var(--ink);
 cursor: pointer;
 transition: all .15s;
 display: inline-flex;
 align-items: center;
 gap: .4rem;
}
.btn:hover,
.btn.solid:hover {
 background: var(--ink);
 color: var(--paper);
 border-color: var(--ink);
 transform: translateY(-1px);
}
/* solid = same as default outline (kept for older markup) */
.btn.solid {
 background: transparent;
 color: var(--ink);
 border-color: var(--ink);
}

/* blog list */
.doc-head { margin-bottom: 1.75rem; }
.doc-head .kicker {
 font-size: .68rem;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--ink-soft);
 margin-bottom: .7rem;
}
.doc-head h1 {
 font-family: 'Fraunces', Georgia, serif;
 font-size: clamp(2.35rem, 4.8vw, 3.35rem);
 font-weight: 600;
 line-height: 1.1;
}
.doc-head .byline {
 font-size: .88rem;
 color: var(--ink-soft);
 margin-top: .55rem;
}

.post-group { margin: 0 0 2.2rem; }
.post-group .block-title a:hover { color: var(--accent); }
.post-group-lead {
  color: var(--ink-soft);
  font-size: .92rem;
  margin: .35rem 0 1rem;
  max-width: 40rem;
}
.posts { display: grid; gap: 0; }
.post {
 display: grid;
 grid-template-columns: 7rem 1fr;
 gap: 1rem;
 padding: 1.1rem 0;
 border-bottom: 1px dashed var(--line);
}
.post:first-child { border-top: 1px dashed var(--line); }
.post time { color: var(--faint); font-size: .72rem; padding-top: .2rem; }
.post h2 {
 font-family: 'Fraunces', Georgia, serif;
 font-weight: 600;
 font-size: 1.15rem;
 line-height: 1.25;
}
.post h2 a:hover { color: var(--accent); }
.post p { color: var(--ink-soft); font-size: .84rem; margin-top: .25rem; }

/* prose */
.prose { max-width: 48rem; }
.prose > p, .prose > ul, .prose > ol {
  font-size: 1.12rem;
  color: #3a342b;
  margin-bottom: 1.25rem;
  line-height: 1.7;
}
.prose h2 {
 font-family: 'Fraunces', Georgia, serif;
 font-size: 1.55rem;
 font-weight: 600;
 margin: 2.2rem 0 .85rem;
}
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.prose strong { color: var(--ink); }
.prose a {
 color: var(--accent);
 background: linear-gradient(var(--accent), var(--accent)) bottom / 100% 1px no-repeat;
}
.prose code {
 font-size: .85em;
 background: rgba(44,38,32,.07);
 border: 1px solid var(--edge);
 border-radius: 3px;
 padding: .06rem .3rem;
}
.cmd-block {
 font-size: .9rem;
 color: var(--ink-soft);
 background: rgba(44,38,32,.06);
 border: 1px dashed var(--edge);
 border-radius: 3px;
 padding: 1.15rem 1.25rem;
 margin: 0 0 1.2rem;
 overflow-x: hidden;
 white-space: pre-wrap;
 word-break: break-word;
 overflow-wrap: anywhere;
 line-height: 1.65;
}
.prose .cmd-block code {
 background: none;
 border: 0;
 padding: 0;
 font-size: inherit;
 color: inherit;
 white-space: inherit;
 word-break: inherit;
}

.facts { font-size: .8rem; max-width: 24rem; margin: 0 0 1.25rem; }
.facts .row {
 display: flex;
 justify-content: space-between;
 gap: 1rem;
 padding: .45rem 0;
 border-bottom: 1px dashed var(--line);
}
.facts .row span:first-child {
 color: var(--faint);
 text-transform: uppercase;
 letter-spacing: .06em;
 font-size: .68rem;
}

.disclaim {
 font-size: .72rem;
 color: var(--faint);
 border-top: 1px dashed var(--line);
 margin-top: 1.75rem;
 padding-top: .85rem;
}
.backlink { display: inline-block; margin-top: 1.5rem; }
/* projects */
.proj-list {
 display: grid;
 gap: 1rem;
 margin: 0.25rem 0 2.25rem;
}
.proj {
 background: rgba(255,255,255,.48);
 border: 1px solid var(--edge);
 border-left: 4px solid var(--accent);
 border-radius: 3px;
 padding: 1.25rem 1.35rem 1.3rem;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.proj:nth-child(2) { border-left-color: var(--tab-blue); }
.proj:nth-child(3) { border-left-color: var(--tab-green); }
.proj:nth-child(4) { border-left-color: #8a7355; }
.proj:nth-child(5) { border-left-color: var(--tab-dark); }
.proj:hover {
 transform: translateY(-2px);
 background: rgba(255,255,255,.7);
 box-shadow: 0 10px 22px rgba(60,45,25,.12);
}
.proj-top {
 display: flex;
 align-items: baseline;
 gap: .75rem;
 flex-wrap: wrap;
 margin-bottom: .4rem;
}
.proj h2 {
 font-family: 'Fraunces', Georgia, serif;
 font-size: 1.35rem;
 font-weight: 600;
 color: var(--ink);
}
.proj-tag {
 font-size: .62rem;
 font-weight: 600;
 letter-spacing: .08em;
 text-transform: uppercase;
 padding: .15rem .45rem;
 border-radius: 3px;
 background: #d9e8e4;
 color: #2f6f62;
}
.proj-tag.stable {
 background: #e3ecd4;
 color: #5d6b3a;
}
.proj p {
 font-size: .98rem;
 color: var(--ink-soft);
 line-height: 1.5;
 margin: 0 0 .65rem;
 max-width: 40rem;
}
.proj-meta {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .72rem;
 letter-spacing: .04em;
 text-transform: uppercase;
 color: var(--faint);
 margin-bottom: .85rem;
}
.btn.sm {
 padding: .45rem .75rem;
 font-size: .72rem;
}
.connect {
 border-top: 1px dashed var(--line);
 padding-top: 1.75rem;
}
.connect .block-title { margin-bottom: .4rem; }
.connect .block-body { margin-bottom: 1rem; }
.connect-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: .75rem;
}
.connect-card {
 display: flex;
 flex-direction: column;
 gap: .35rem;
 text-align: left;
 background: rgba(255,255,255,.5);
 border: 1px solid var(--edge);
 border-radius: 3px;
 padding: 1rem 1.05rem;
 cursor: pointer;
 font: inherit;
 color: inherit;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.connect-card:hover {
 transform: translateY(-2px);
 background: #fff;
 border-color: var(--accent);
 box-shadow: 0 8px 18px rgba(60,45,25,.1);
}
.connect-k {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .66rem;
 font-weight: 600;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: var(--ink-soft);
}
.connect-v {
 font-family: 'Fraunces', Georgia, serif;
 font-size: 1.15rem;
 font-weight: 600;
 color: var(--ink);
 word-break: break-all;
}
.connect-hint {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .68rem;
 color: var(--faint);
}
.connect-discord { width: 100%; }

@media (max-width: 800px) {
 .connect-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
 .connect-row { grid-template-columns: 1fr; }
}

/* stats + reward bars (no Charts.css label clipping) */
.stat-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: .75rem;
 margin: 0 0 1.15rem;
}
.stat {
 background: rgba(255,255,255,.5);
 border: 1px solid var(--edge);
 border-radius: 3px;
 padding: .85rem .9rem;
 display: flex;
 flex-direction: column;
 gap: .35rem;
}
.stat-k {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .68rem;
 font-weight: 600;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: var(--ink-soft);
}
.stat-v {
 font-family: 'Fraunces', Georgia, serif;
 font-size: 1.45rem;
 font-weight: 600;
 color: var(--ink);
 line-height: 1.1;
}
.stat-s {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .72rem;
 font-weight: 500;
 color: var(--faint);
 margin-left: .25rem;
}
.chart-card {
 background: rgba(255,255,255,.5);
 border: 1px solid var(--edge);
 border-radius: 3px;
 padding: 1.15rem 1.25rem 1.25rem;
 margin: 0 0 1.25rem;
}
.chart-label {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .72rem;
 font-weight: 600;
 letter-spacing: .1em;
 text-transform: uppercase;
 color: var(--ink-soft);
 margin: 0 0 1rem;
}
.reward-bars {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: .85rem;
}
.reward-bars li {
 display: grid;
 grid-template-columns: 8.5rem 1fr 2.6rem;
 gap: .75rem;
 align-items: center;
}
.rb-label {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .78rem;
 color: var(--ink-soft);
}
.rb-track {
 height: 1.15rem;
 background: rgba(44,38,32,.08);
 border-radius: 2px;
 overflow: hidden;
}
.rb-fill {
 display: block;
 height: 100%;
 min-width: 2px;
 background: var(--faint);
 border-radius: 2px;
}
.rb-fill.rb-ink { background: var(--ink); }
.rb-fill.rb-red { background: var(--accent); }
.rb-fill.rb-teal { background: var(--accent-2); }
.rb-val {
 font-family: 'IBM Plex Mono', monospace;
 font-size: .84rem;
 font-weight: 600;
 color: var(--ink);
 text-align: right;
}

@media (max-width: 700px) {
 .stat-grid { grid-template-columns: 1fr 1fr; }
 .reward-bars li {
 grid-template-columns: 1fr auto;
 grid-template-rows: auto auto;
 }
 .rb-label { grid-column: 1 / -1; }
 .rb-track { grid-column: 1; }
 .rb-val { grid-column: 2; }
}

.fig {
 margin: 1.5rem 0 1.75rem;
 padding: 0;
 max-width: 100%;
}
.fig img {
 display: block;
 width: 100%;
 max-width: 100%;
 height: auto !important;
 object-fit: contain;
 object-position: center;
 border: 1px solid var(--edge);
 border-radius: 3px;
 background: var(--paper-2);
 box-shadow: 0 8px 20px rgba(60,45,25,.12);
}
.fig-hero img {
 box-shadow: 0 14px 36px rgba(60,45,25,.18);
}
.fig figcaption {
 font-size: .78rem;
 color: var(--faint);
 margin-top: .55rem;
 line-height: 1.4;
}

.folder-foot {
  max-width: min(var(--max), 100%);
  width: 100%;
  margin: 1.25rem auto 0;
  background: var(--tab-dark);
  color: #d8cdb6;
  border-radius: var(--radius);
  padding: 1.25rem var(--folder-pad) 1.25rem var(--folder-pad-left);
  font-size: .9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.folder-foot-simple {
  justify-content: center;
  padding: 1.15rem 1.5rem;
  text-align: center;
}
.folder-foot-simple .filelabel {
  letter-spacing: .08em;
}
.folder-foot .filelabel {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: .04em;
  color: #b6a888;
}
.folder-foot nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.folder-foot a:hover { color: #fff; }

/* 404 */
.err404 {
  max-width: 36rem;
  padding: .5rem 0 1rem;
}
.err404-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .75rem;
}
.err404 .name {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  margin-bottom: .85rem;
}
.err404 .lead {
  margin-bottom: 1.1rem;
}
.err404-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  color: var(--faint);
  letter-spacing: .04em;
  margin: 0 0 1.1rem;
}

.sad-face {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 0 1.25rem;
  color: var(--ink);
  animation: sad-bob 2.8s ease-in-out infinite;
}
.sad-face svg { width: 100%; height: 100%; display: block; }
.sad-eye-l { animation: sad-blink 4.5s ease-in-out infinite; transform-origin: 42px 48px; }
.sad-eye-r { animation: sad-blink 4.5s ease-in-out infinite 0.08s; transform-origin: 78px 48px; }
.sad-mouth { animation: sad-wobble 2.8s ease-in-out infinite; transform-origin: 60px 82px; }
.sad-tear {
  animation: sad-tear 2.8s ease-in-out infinite;
}
@keyframes sad-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(7px) rotate(2deg); }
}
@keyframes sad-blink {
  0%, 42%, 48%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(0.12); }
}
@keyframes sad-wobble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
@keyframes sad-tear {
  0%, 15% { opacity: 0; transform: translateY(0); }
  35% { opacity: 0.8; }
  85% { opacity: 0.2; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(18px); }
}
@media (prefers-reduced-motion: reduce) {
  .sad-face, .sad-eye-l, .sad-eye-r, .sad-mouth, .sad-tear {
    animation: none !important;
  }
}

/* ---------- responsive: same design, scaled shell ---------- */
@media (max-width: 1100px) {
  .grid-2x2 { min-height: 0; }
}

@media (max-width: 900px) {
  .grid-2x2 {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1rem;
  }
  .tile-hero {
    align-items: flex-start;
  }
  .tile-hero .polaroid { width: min(196px, 42vw); }
  .connect-list-row { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .proj { padding: 1.15rem 1.2rem; }
}

@media (max-width: 600px) {
  body { padding: .85rem .7rem 1.6rem; }
  .folder {
    padding: 1.6rem 1.15rem 1.7rem 2.65rem;
    border-radius: 3px;
  }
  .folder::after {
    left: .7rem;
    width: 11px;
    background-size: 11px 11px;
  }
  .folder {
    padding-left: 2.2rem;
  }
  .folder-foot {
    padding: 1rem 1.15rem;
    justify-content: center;
    text-align: center;
  }
  .tabs {
    padding-left: .35rem;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    padding: .6rem .85rem .75rem;
    font-size: .74rem;
    flex: 0 0 auto;
  }
  .tab .n { margin-right: .22rem; }
  .btn {
    padding: .75rem 1.1rem;
    font-size: .78rem;
  }
  .post { grid-template-columns: 1fr; gap: .25rem; }
  .connect-list-row { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .flag-uk-badge {
    width: 2.2rem;
    height: 1.45rem;
  }
  /* keep motion subtler on small screens */
  .polaroid { animation-duration: 7s; }
}

@media (min-width: 1600px) {
  :root {
    --max: 1180px;
  }
}