/* ============================================================
   HOBBIES (/hobbies) - crystals. Every hobby is one big crystal: a faceted card cut from the page with clip-path,
   shaded by two or three translucent planes, with a druse of little crystals growing from its top edge.
   Colours come from the site tokens (white page / charcoal / terracotta), so both themes and the no-black rule hold.
   Only this page loads this file. 2026-10-18.
   ============================================================ */
.hobbies {
  --f1: #ffffff;                       /* lit face */
  --f2: #ececea;                       /* shaded face */
  --f3: #f3dfd6;                       /* terracotta-tinted face */
  --f4: #d9d9d6;                       /* deep face */
  --edge: rgba(43, 45, 49, 0.22);      /* crystal edges */
  --seam: rgba(43, 45, 49, 0.06);      /* seams between planes */
  --glass: rgba(236, 236, 234, 0.55);
  --drop: drop-shadow(0 18px 28px rgba(43, 45, 49, 0.10)) drop-shadow(0 2px 4px rgba(43, 45, 49, 0.06));
  max-width: 1040px; padding-top: 40px; padding-bottom: 80px;
}
html[data-theme="dark"] .hobbies {
  --f1: #4a4e55;
  --f2: #3a3d42;
  --f3: #53433d;
  --f4: #2f3135;
  --edge: rgba(246, 241, 231, 0.12);
  --seam: rgba(246, 241, 231, 0.05);
  --glass: rgba(255, 255, 255, 0.05);
  --drop: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.0)) drop-shadow(0 2px 4px rgba(36, 37, 41, 0.3));
}
.hobbies svg .f1 { fill: var(--f1); }
.hobbies svg .f2 { fill: var(--f2); }
.hobbies svg .f3 { fill: var(--f3); }
.hobbies svg .f4 { fill: var(--f4); }
.hobbies svg polygon { stroke: var(--edge); stroke-width: 0.6; stroke-linejoin: round; }

/* ---------- hero: copy left, the cube right ---------- */
.xtal-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: center; margin-bottom: 44px; }
.xtal-hero-copy { min-width: 0; }   /* the scrolling tab row must not widen the column (it pushed phones into sideways scroll) */
.xtal-hero .section-title { font-size: clamp(30px, 4.2vw, 44px); }

/* THE CUBE. Six real faces in CSS 3D under a mild perspective. Turned to look straight down its space diagonal and flattened,
   the outline is a regular hexagon of three rhombi. The animation turns a corner to the viewer, compresses the cube
   corner to corner (scaleZ along the view axis once the diagonal is on it), squashes, and holds the hexagon; then it runs back. */
.cube-col { justify-self: end; text-align: center; width: 300px; }
.cube-note { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 2px 8px 0; }
.cube-stage { --s: 150px; width: 300px; height: 300px; display: grid; place-items: center; filter: var(--drop); perspective: 300px; }   /* a strong perspective: without it the compression along the view axis is invisible */
.cube { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: scaleZ(1) rotateX(-18deg) rotateY(28deg); }
.cube-stage .cube { animation: cube-squash 9s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
.cf { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid var(--edge); box-sizing: border-box; }
.cf-front  { transform: translateZ(calc(var(--s) / 2)); background: var(--f2); }
.cf-back   { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); background: var(--f2); }
.cf-right  { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: var(--f4); }
.cf-left   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: var(--f4); }
.cf-top    { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: var(--f1); }
.cf-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: var(--f3); }
@keyframes cube-squash {
  0%   { transform: scale3d(1, 1, 1) rotateX(-18deg) rotateY(28deg); }
  26%  { transform: scale3d(1, 1, 1) rotateX(-31deg) rotateY(40deg); }         /* the near corner comes to the viewer */
  36%  { transform: scale3d(1, 1, 1) rotateX(-31deg) rotateY(40deg); }
  70%  { transform: scale3d(1, 1, 0.02) rotateX(-31deg) rotateY(40deg); }      /* compressed corner to corner: the depth goes */
  78%  { transform: scale3d(1.1, 0.92, 0.02) rotateX(-35.264deg) rotateY(45deg); } /* the squash, onto the exact diagonal */
  86%  { transform: scale3d(0.97, 1.03, 0.02) rotateX(-35.264deg) rotateY(45deg); }
  100% { transform: scale3d(1, 1, 0.02) rotateX(-35.264deg) rotateY(45deg); }  /* a regular hexagon of three rhombi */
}
/* the small cube beside each heading plays once as its crystal scrolls in, and stays a hexagon */
.cube-mini { --s: 18px; width: 34px; height: 34px; display: grid; place-items: center; flex: none; perspective: 48px; }
html.js .xtal.revealed .cube-mini .cube { animation: cube-squash 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s 1 both; }
html:not(.js) .cube-mini .cube, .xtal-nav .hex { transform: scale3d(1, 1, 0.02) rotateX(-35.264deg) rotateY(45deg); }
.hex { display: inline-block; width: 12px; height: 12px; background: var(--f4); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cube-stage .cube, html.js .xtal.revealed .cube-mini .cube { animation: none; transform: scale3d(1, 1, 0.02) rotateX(-35.264deg) rotateY(45deg); }
}
.xtal-nav { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 22px; }
.xtal-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-body); text-decoration: none;
  padding: 7px 12px 7px 9px; border: 1px solid var(--border); background: var(--bg-raised);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.xtal-nav a:hover { color: var(--text-primary); border-color: var(--border-hover); text-decoration: none; }

/* ---------- the big crystals ---------- */
.xtal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.xtal { grid-column: 1 / -1; position: relative; filter: var(--drop); }
.xtal-half { grid-column: auto; }
/* outer = the edge colour, inner = the faces 1px inside it: a crystal with a visible rim */
.xtal, .xtal-in { clip-path: var(--cut); }
.xtal { background: var(--edge); padding: 1px; display: flex; }   /* flex so the face fills a card stretched by its grid row */
.xtal-in {
  position: relative; padding: 44px 44px 40px; flex: 1 1 auto; width: 100%;
  /* one quiet highlight plane and two hairline seams: the facets live on the silhouette, the text sits on a flat ground */
  background:
    linear-gradient(118deg, var(--glass) 0 34%, var(--seam) 34% calc(34% + 1px), transparent calc(34% + 1px) 62%, var(--seam) 62% calc(62% + 1px), transparent calc(62% + 1px)),
    var(--f1);
}
html[data-theme="dark"] .xtal-in { background:
    linear-gradient(118deg, var(--glass) 0 34%, var(--seam) 34% calc(34% + 1px), transparent calc(34% + 1px) 62%, var(--seam) 62% calc(62% + 1px), transparent calc(62% + 1px)),
    var(--bg-raised); }
/* a specular line along the top edges: the rim catches the light */
.xtal-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 100%); opacity: 0.7; }
html[data-theme="dark"] .xtal-in::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 100%); }
.xtal-in > * { position: relative; }
/* after the squash: the crystals carry the hexagon. A honeycomb of hairline hexagons, dense in the lit corner, fading out before the text */
.hobbies { --hexpat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224.25%22%20height%3D%2242.00%22%20viewBox%3D%220%200%2024.25%2042.00%22%3E%3Cpath%20d%3D%22M12.12%2028.00%20L-0.00%2021.00%20L0.00%207.00%20L12.12%200.00%20L24.25%207.00%20L24.25%2021.00%20Z%20M0.00%2049.00%20L-12.12%2042.00%20L-12.12%2028.00%20L-0.00%2021.00%20L12.12%2028.00%20L12.12%2042.00%20Z%20M24.25%2049.00%20L12.12%2042.00%20L12.12%2028.00%20L24.25%2021.00%20L36.37%2028.00%20L36.37%2042.00%20Z%22%20fill%3D%22none%22%20stroke%3D%22%232b2d31%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
html[data-theme="dark"] .hobbies { --hexpat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224.25%22%20height%3D%2242.00%22%20viewBox%3D%220%200%2024.25%2042.00%22%3E%3Cpath%20d%3D%22M12.12%2028.00%20L-0.00%2021.00%20L0.00%207.00%20L12.12%200.00%20L24.25%207.00%20L24.25%2021.00%20Z%20M0.00%2049.00%20L-12.12%2042.00%20L-12.12%2028.00%20L-0.00%2021.00%20L12.12%2028.00%20L12.12%2042.00%20Z%20M24.25%2049.00%20L12.12%2042.00%20L12.12%2028.00%20L24.25%2021.00%20L36.37%2028.00%20L36.37%2042.00%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23f6f1e7%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.xtal-in > .hexes { position: absolute; inset: 0; pointer-events: none; background: var(--hexpat) 0 0 / 24.25px 42px; opacity: 0.11;
  -webkit-mask-image: linear-gradient(205deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 62%); mask-image: linear-gradient(205deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 62%); }
.xtal-b .hexes, .xtal-d .hexes { -webkit-mask-image: linear-gradient(155deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 62%); mask-image: linear-gradient(155deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 62%); }
html[data-theme="dark"] .xtal-in > .hexes { opacity: 0.09; }
/* five silhouettes so no two crystals look alike */
.xtal-a { --cut: polygon(0 34px, 34px 0, calc(100% - 90px) 0, 100% 46px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 24px 100%, 0 calc(100% - 40px)); }
.xtal-b { --cut: polygon(0 52px, 72px 0, calc(100% - 40px) 0, 100% 30px, 100% calc(100% - 44px), calc(100% - 60px) 100%, 20px 100%, 0 calc(100% - 20px)); }
.xtal-c { --cut: polygon(0 28px, 28px 0, calc(100% - 120px) 0, calc(100% - 60px) 22px, 100% 22px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 40px 100%, 0 calc(100% - 56px)); }
.xtal-d { --cut: polygon(0 40px, 40px 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 18px 100%, 0 calc(100% - 18px)); }
.xtal-e { --cut: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 36px 100%, 0 calc(100% - 36px)); }


.xtal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.xtal h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(24px, 2.8vw, 30px); line-height: 1.15; color: var(--text-primary); margin: 0; }
.xtal h3, .xtal h2.label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ink); margin: 26px 0 10px; }
.xtal h2.label { font-family: inherit; line-height: inherit; }   /* section labels on a hobby page: h2 for the outline, the h3 look */
.xtal p { font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; max-width: 68ch; color: var(--text-body); }
.xtal p:last-child { margin-bottom: 0; }
.xtal a { color: var(--accent-ink); }

/* Rubik's cube: copy beside the photo, the photo cut like a crystal too */
.hobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; }
.hobby-photo { margin: 0; }
.hobby-photo img {
  width: 100%; height: auto; display: block;
  clip-path: polygon(0 24px, 24px 0, calc(100% - 36px) 0, 100% 36px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 16px 100%, 0 calc(100% - 16px));
}
.hobby-photo figcaption { font-size: 13px; color: var(--text-muted); margin-top: 10px; }
.hobby-steps { margin: 0 0 16px 22px; }
.hobby-steps li { font-size: 15.5px; line-height: 1.6; margin-bottom: 6px; padding-left: 4px; color: var(--text-body); }
/* official records: four small crystals in a row, 2x2 on narrow screens, never ragged */
.wca-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 14px; padding: 0; }
.wca-card {
  display: grid; grid-template-rows: auto auto auto; gap: 6px; align-content: start;
  padding: 18px 16px 16px;
  background: linear-gradient(135deg, var(--f1) 0 48%, var(--seam) 48% calc(48% + 1px), var(--f2) calc(48% + 1px));
  clip-path: polygon(0 14px, 14px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}
@supports (grid-template-rows: subgrid) { .wca-card { grid-row: span 3; grid-template-rows: subgrid; } }
.wca-event { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.wca-time { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-primary); }
.wca-sub { font-size: 13px; color: var(--text-muted); }
.wca-link a { text-decoration: underline; text-underline-offset: 0.2rem; }

/* the video inside the music crystal */
.hobby-video { margin: 22px 0 18px; max-width: 760px; }
.hobby-video video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; background: var(--charcoal); border: 1px solid var(--border);
  clip-path: polygon(0 18px, 18px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.hobby-video figcaption { font-size: 13px; color: var(--text-muted); margin-top: 10px; max-width: 68ch; }

/* writing: the two pieces as small facets */
.writing-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.writing-list .facet {
  padding: 16px 20px; max-width: 68ch; font-size: 15px; line-height: 1.6; color: var(--text-body);
  background: linear-gradient(112deg, var(--f1) 0 40%, var(--seam) 40% calc(40% + 1px), var(--f2) calc(40% + 1px));
  clip-path: polygon(0 12px, 12px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.writing-list a { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--text-primary); }
.writing-kind { color: var(--text-muted); margin-left: 6px; }
.writing-list q { display: block; margin-top: 6px; font-family: var(--serif); font-style: italic; }
.writing-list q::before, .writing-list q::after { content: none; }

/* chess: one number, cut like a gem */
.chess-stat { display: inline-grid; gap: 2px; padding: 14px 22px 12px; margin-top: 4px;
  background: linear-gradient(135deg, var(--f3) 0 50%, var(--seam) 50% calc(50% + 1px), var(--f1) calc(50% + 1px));
  clip-path: polygon(0 12px, 12px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)); }
.chess-num { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); }
.chess-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- motion: the site's reveal, plus a glint that crosses each crystal once as it arrives ---------- */
html.js .xtal.revealed .xtal-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58%);
  transform: translateX(-130%); animation: glint 1.3s var(--ease-ui) 0.3s 1 both;
}
@keyframes glint { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { html.js .xtal.revealed .xtal-in::after { animation: none; display: none; } }

/* ---------- narrower screens ---------- */
/* phones and tablets (24 Oct 2026): the glint's one-shot animation ended with `both`, parking the ::after at translateX(130%),
   452px to the right of each crystal. Invisible (the clip-path hides it) but it made body.scrollWidth 821px on every hobby page
   at 390. Resting it on the left instead: same glint, no sideways overflow. */
@media (max-width: 980px) { html.js .xtal.revealed .xtal-in::after { animation-fill-mode: backwards; } }
@media (max-width: 900px) {
  .xtal-hero { grid-template-columns: 1fr; gap: 10px; }
  .cube-col { width: 220px; order: -1; }
  .cube-stage { --s: 110px; width: 220px; height: 220px; }
  .hobby-grid { grid-template-columns: 1fr; gap: 24px; }
  .hobby-photo { max-width: 300px; }
  .wca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xtal-grid { grid-template-columns: 1fr; }
  .xtal-half { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .hobbies { padding-top: 28px; }
  .xtal-nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100vw; padding-bottom: 8px; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }
  .xtal-nav a { white-space: nowrap; flex: none; }
  .xtal-in { padding: 36px 22px 30px; }
  .xtal-a, .xtal-b, .xtal-c, .xtal-d, .xtal-e { --cut: polygon(0 22px, 22px 0, calc(100% - 48px) 0, 100% 26px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 14px 100%, 0 calc(100% - 22px)); }
  .cube-col { width: 180px; }
  .cube-stage { --s: 90px; width: 180px; height: 180px; }
}

/* ---------- the overview (/hobbies) and the hobby pages (/hobbies/<slug>) ---------- */
.crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.crumbs a { color: var(--text-body); }
.figures { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.figures li { display: grid; gap: 4px; padding: 16px 14px 14px; border-top: 2px solid var(--accent); background: var(--bg-chip);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.fig-num { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.05; color: var(--text-primary); }
.fig-label { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
/* five equal teasers in one row: a square thumbnail, the number and name, a line or two, a link; one column on phones */
.teasers { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.teasers .xtal { grid-column: auto; --cut: polygon(0 18px, 18px 0, calc(100% - 30px) 0, 100% 24px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 12px 100%, 0 calc(100% - 18px)); }
.teaser .xtal-in { padding: 22px 18px 20px; display: flex; flex-direction: column; }
.teaser-media { display: block; margin: 0 0 16px; }
.teaser-media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border: 1px solid var(--border);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.teaser .xtal-head { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 8px; margin-bottom: 10px; align-items: center; }
.teaser .xtal-head h2 { grid-column: 1 / -1; }
.teaser .cube-mini { --s: 14px; width: 26px; height: 26px; }
.teaser h2 { font-size: 18px; }
.teaser-num { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; color: var(--accent-ink); }
.teaser h2 a { color: var(--text-primary); text-decoration: none; }
.teaser h2 a:hover { text-decoration: underline; text-underline-offset: 0.2rem; }
.teaser p { font-size: 14px; line-height: 1.6; }
.teaser-more { display: inline-block; margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); align-self: flex-start; }
.teaser-more { display: inline-block; margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); align-self: flex-start; }
.hobbies-closing { margin: 40px auto 56px; max-width: 60ch; text-align: center; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--text-body); }
.hobby-page .xtal-hero { margin-bottom: 34px; }
.hobby-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: 28px; align-items: stretch; }
.hobby-nav a { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; background: var(--bg-chip); color: var(--text-primary); text-decoration: none;
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px)); }
.hobby-nav a:hover { background: var(--pm-hover, var(--border-soft)); text-decoration: none; }
.hobby-nav .title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.hobby-nav .next { text-align: right; }
.hobby-nav .all { justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
@media (max-width: 900px) {
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .teasers { grid-template-columns: 1fr; gap: 20px; }
  .teaser .xtal-in { padding: 28px 24px 24px; }
  .teaser-media { max-width: 320px; }
}
@media (max-width: 620px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hobby-nav { grid-template-columns: 1fr 1fr; }
  .hobby-nav .all { grid-column: 1 / -1; order: 3; }
}

/* ============================================================
   THE EASTER EGG (js/easter-egg.js): one animated story to the song. Its own palette on purpose (Dylan asked for blue).
   Everything is scoped under .egg. The world layer is the camera: it scales around a point for the zooms.
   ============================================================ */
.cube-stage { cursor: pointer; border: 0; background: none; padding: 0; font: inherit; color: inherit; }
.cube-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 12px; }
html.egg-open { overflow: hidden; }
.egg { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #07204d; color: #f6f1e7; font-family: var(--sans); }
.egg-flood { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #1f6fd1; z-index: 5; animation: egg-flood 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes egg-flood { to { transform: scale(400); } }
.egg-lake-on .egg-flood { opacity: 0; transition: opacity 0.8s; }
.egg-world { position: absolute; inset: 0; will-change: transform; }
.egg-lake { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.egg-lake-on .egg-lake { opacity: 1; }
.egg-end { position: absolute; top: 16px; right: 16px; z-index: 40; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(7, 32, 77, 0.6); color: #ffffff; font: 600 13px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); }
.egg-end:hover, .egg-end:focus-visible { background: #ffffff; color: #07204d; outline: none; }
.egg-layer { position: absolute; inset: 0; pointer-events: none; }
.egg-fade { opacity: 0 !important; transition: opacity 1.4s ease; }
/* spiders: a body with eight legs that scissor as it walks, one on a thread */
.egg-spider { position: absolute; left: 0; top: 0; width: 46px; height: 30px; will-change: transform; transition: opacity 0.6s; }
.egg-spider.egg-flip .egg-spider-body { transform: scaleX(-1); }
.egg-spider-body { position: absolute; left: 10px; top: 8px; width: 26px; height: 16px; border-radius: 50% 50% 46% 46%; background: #0b1324; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset; }
.egg-spider-body::before { content: ""; position: absolute; left: -9px; top: 4px; width: 12px; height: 10px; border-radius: 50%; background: #0b1324; }
.egg-leg { position: absolute; top: 7px; width: 22px; height: 2px; background: #0b1324; transform-origin: 0 50%; border-radius: 2px; }
.egg-leg::after { content: ""; position: absolute; left: 100%; top: 0; width: 12px; height: 2px; background: #0b1324; transform-origin: 0 50%; transform: rotate(70deg); border-radius: 2px; }
.egg-leg-0, .egg-leg-1, .egg-leg-2, .egg-leg-3 { left: 20px; }
.egg-leg-4, .egg-leg-5, .egg-leg-6, .egg-leg-7 { left: 6px; transform: scaleX(-1); }
.egg-leg-0 { --a: -58deg; } .egg-leg-1 { --a: -24deg; } .egg-leg-2 { --a: 10deg; } .egg-leg-3 { --a: 42deg; }
.egg-leg-4 { --a: -58deg; } .egg-leg-5 { --a: -24deg; } .egg-leg-6 { --a: 10deg; } .egg-leg-7 { --a: 42deg; }
.egg-leg-0, .egg-leg-2, .egg-leg-5, .egg-leg-7 { animation: egg-step 0.36s ease-in-out infinite alternate; }
.egg-leg-1, .egg-leg-3, .egg-leg-4, .egg-leg-6 { animation: egg-step 0.36s ease-in-out infinite alternate-reverse; }
.egg-leg-4, .egg-leg-5, .egg-leg-6, .egg-leg-7 { animation-name: egg-step-l; }
@keyframes egg-step { from { transform: rotate(calc(var(--a) - 9deg)); } to { transform: rotate(calc(var(--a) + 9deg)); } }
@keyframes egg-step-l { from { transform: scaleX(-1) rotate(calc(var(--a) - 9deg)); } to { transform: scaleX(-1) rotate(calc(var(--a) + 9deg)); } }
.egg-thread { display: none; }
.egg-dropper .egg-thread { display: block; position: absolute; left: 23px; bottom: 100%; width: 1px; height: var(--thread, 0px); background: rgba(255, 255, 255, 0.55); }
.egg-crawler { transform-origin: 23px 15px; }
.egg-crawler.egg-still .egg-leg { animation-duration: 1.4s; }
/* webs: strands draw on from the corner, rings after the spokes */
.egg-web { position: absolute; inset: 0; width: 100%; height: 100%; }
.egg-strand { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: egg-spin 1.6s ease-out forwards; animation-delay: var(--d, 0s); }
.egg-ring { stroke-width: 1; stroke: rgba(255, 255, 255, 0.42); }
@keyframes egg-spin { to { stroke-dashoffset: 0; } }
/* the fly on the web: wings buzz until the spider arrives */
.egg-fly { position: absolute; width: 20px; height: 14px; margin: -7px 0 0 -10px; transition: opacity 1s; }
.egg-fly svg { width: 100%; height: 100%; overflow: visible; }
.egg-fly-wing { transform-box: fill-box; transform-origin: 0% 100%; animation: egg-buzz 0.08s linear infinite alternate; }
.egg-fly-wing2 { animation-delay: 0.04s; }
@keyframes egg-buzz { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.egg-fly.egg-caught .egg-fly-wing { animation: none; }
/* the butterfly: drawn SVG, each side flapping from the body line */
.egg-butterfly { position: absolute; left: 0; top: 0; width: 240px; height: 170px; margin: -85px 0 0 -120px; transform-origin: 50% 50%; pointer-events: none; z-index: 15; will-change: transform; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35)); }
.egg-butterfly svg { width: 100%; height: 100%; overflow: visible; }
.egg-wings-l, .egg-wings-r { transform-box: fill-box; animation: egg-flap 0.46s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.egg-wings-l { transform-origin: 100% 50%; }
.egg-wings-r { transform-origin: 0% 50%; }
@keyframes egg-flap { from { transform: scaleX(1); } to { transform: scaleX(0.3); } }
/* the ship, then the cabin */
.egg-ship { position: absolute; left: 0; top: 0; width: 260px; height: 120px; margin: -92px 0 0 -130px; will-change: transform; transition: opacity 1.2s; }
.egg-ship svg { width: 100%; height: 100%; overflow: visible; }
.egg-cabin { position: absolute; inset: 0; z-index: 20; opacity: 0; transition: opacity 1.1s ease; background: #4a3522; }
.egg-cabin.egg-on { opacity: 1; }
.egg-cabin svg { width: 100%; height: 100%; }
/* the two figures: each forearm pivots at the elbow and stretches a little (cartoon foreshortening) so the hand lands on the lips;
   the hand group counter-rotates and counter-scales so the glass or cigarette keeps its size, then tilts at the mouth. One 12 s cycle:
   drink at 20-52%, smoke at 56-78%, a puff after; the second figure runs the same cycle six seconds behind. */
.egg-darm, .egg-sarm, .egg-dhand, .egg-shand { transform-box: view-box; }
.egg-puff, .egg-tip { transform-box: fill-box; transform-origin: 50% 50%; }
.egg-darm-a { transform-origin: 200px 292px; } .egg-dhand-a { transform-origin: 248px 322px; }
.egg-sarm-a { transform-origin: 120px 300px; } .egg-shand-a { transform-origin: 86px 262px; }
.egg-darm-b { transform-origin: 390px 292px; } .egg-dhand-b { transform-origin: 342px 322px; }
.egg-sarm-b { transform-origin: 470px 300px; } .egg-shand-b { transform-origin: 504px 262px; }
.egg-darm-a { animation: egg-drink-a 12s ease-in-out infinite; } .egg-dhand-a { animation: egg-drinkhand-a 12s ease-in-out infinite; }
.egg-darm-b { animation: egg-drink-b 12s ease-in-out infinite -6s; } .egg-dhand-b { animation: egg-drinkhand-b 12s ease-in-out infinite -6s; }
.egg-sarm-a { animation: egg-smoke-a 12s ease-in-out infinite; } .egg-shand-a { animation: egg-smokehand-a 12s ease-in-out infinite; }
.egg-sarm-b { animation: egg-smoke-b 12s ease-in-out infinite -6s; } .egg-shand-b { animation: egg-smokehand-b 12s ease-in-out infinite -6s; }
.egg-puff-a { animation: egg-puff 12s ease-out infinite; } .egg-puff-b { animation: egg-puff 12s ease-out infinite -6s; }
.egg-shand-a .egg-tip { animation: egg-glow 12s ease-in-out infinite; } .egg-shand-b .egg-tip { animation: egg-glow 12s ease-in-out infinite -6s; }
@keyframes egg-drink-a { 0%, 20%, 52%, 100% { transform: rotate(0deg) scale(1); } 28%, 44% { transform: rotate(-164.8deg) scale(1.30); } }
@keyframes egg-drinkhand-a { 0%, 20%, 52%, 100% { transform: rotate(0deg) scale(1); } 28% { transform: rotate(164.8deg) scale(0.77); } 36%, 44% { transform: rotate(124.8deg) scale(0.77); } }
@keyframes egg-drink-b { 0%, 20%, 52%, 100% { transform: rotate(0deg) scale(1); } 28%, 44% { transform: rotate(164.8deg) scale(1.30); } }
@keyframes egg-drinkhand-b { 0%, 20%, 52%, 100% { transform: rotate(0deg) scale(1); } 28% { transform: rotate(-164.8deg) scale(0.77); } 36%, 44% { transform: rotate(-124.8deg) scale(0.77); } }
@keyframes egg-smoke-a { 0%, 56%, 78%, 100% { transform: rotate(0deg) scale(1); } 62%, 72% { transform: rotate(65.5deg) scale(1.76); } }
@keyframes egg-smokehand-a { 0%, 56%, 78%, 100% { transform: rotate(0deg) scale(1); } 62%, 72% { transform: rotate(-65.5deg) scale(0.57); } }
@keyframes egg-smoke-b { 0%, 56%, 78%, 100% { transform: rotate(0deg) scale(1); } 62%, 72% { transform: rotate(-65.5deg) scale(1.76); } }
@keyframes egg-smokehand-b { 0%, 56%, 78%, 100% { transform: rotate(0deg) scale(1); } 62%, 72% { transform: rotate(65.5deg) scale(0.57); } }
@keyframes egg-puff { 0%, 73%, 90%, 100% { opacity: 0; transform: translate(0, 0) scale(0.3); } 75% { opacity: 0.85; transform: translate(0, -6px) scale(0.6); } 88% { opacity: 0; transform: translate(-16px, -64px) scale(2.2); } }
.egg-puff-b { animation-name: egg-puff-b; }
@keyframes egg-puff-b { 0%, 73%, 90%, 100% { opacity: 0; transform: translate(0, 0) scale(0.3); } 75% { opacity: 0.85; transform: translate(0, -6px) scale(0.6); } 88% { opacity: 0; transform: translate(16px, -64px) scale(2.2); } }
@keyframes egg-glow { 0%, 60%, 74%, 100% { opacity: 0.7; transform: scale(1); } 64%, 70% { opacity: 1; transform: scale(1.8); } }
.egg-smoke-p { stroke-dasharray: 60; animation: egg-smoke 2.6s linear infinite; opacity: 0.8; }
@keyframes egg-smoke { from { stroke-dashoffset: 120; opacity: 0.9; } to { stroke-dashoffset: 0; opacity: 0.2; } }
/* the flick: the right-hand figure's smoking arm snaps toward the window and the cigarette leaves the hand */
.egg-flicked .egg-sarm-b { animation: egg-throw-b 0.6s ease-out forwards; }
.egg-flicked .egg-shand-b { animation: none; transform: rotate(10deg) scale(0.9); }
.egg-flicked .egg-shand-b rect, .egg-flicked .egg-shand-b .egg-tip, .egg-flicked .egg-shand-b .egg-smoke-p { opacity: 0; }
@keyframes egg-throw-b { 0% { transform: rotate(-65.5deg) scale(1.76); } 60% { transform: rotate(-125deg) scale(1.9); } 100% { transform: rotate(-110deg) scale(1.7); } }
.egg-cig-fly { position: absolute; left: 0; top: 0; width: 34px; height: 7px; border-radius: 2px; background: #f6f1e7; z-index: 25; box-shadow: 28px 0 0 -0.5px #ff8a3a, 28px 0 10px 2px rgba(255, 138, 58, 0.6); will-change: transform; }
/* under the water */
.egg-veil { position: absolute; inset: 0; z-index: 22; background: linear-gradient(180deg, rgba(43, 134, 230, 0) 0%, #0f4ea8 46%, #061a3d 100%); transform: translateY(100%); transition: transform 3.6s cubic-bezier(0.4, 0, 0.2, 1); }
.egg-veil.egg-on { transform: translateY(0); }
.egg-sea { transition: opacity 1.4s; }
.egg-fish { position: absolute; left: 0; top: 0; width: 120px; height: 40px; will-change: transform; }
.egg-fish svg { width: 100%; height: 100%; overflow: visible; }
.egg-fish.egg-flipx svg { transform: scaleX(-1); }
.egg-tail { transform-box: fill-box; transform-origin: 0% 50%; animation: egg-tail 0.5s ease-in-out infinite alternate; }
@keyframes egg-tail { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.egg-bubbles { position: absolute; inset: 0; }
.egg-bubble { position: absolute; width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.15); animation: egg-rise 3.2s linear forwards; }
@keyframes egg-rise { to { transform: translate(14px, -60vh); opacity: 0; } }
.egg-floor { transition: opacity 1.4s; }
.egg-weed { position: absolute; bottom: 0; width: 40px; height: var(--h, 120px); transform-origin: 50% 100%; animation: egg-sway 3.4s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.egg-weed svg { width: 100%; height: 100%; }
@keyframes egg-sway { from { transform: skewX(-7deg); } to { transform: skewX(7deg); } }
.egg-crab { position: absolute; left: 50%; bottom: 10px; width: 160px; height: 100px; margin-left: -80px; animation: egg-scuttle 6s ease-in-out infinite alternate; }
.egg-crab svg { width: 100%; height: 100%; overflow: visible; }
@keyframes egg-scuttle { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
.egg-pincer { transform-box: fill-box; transform-origin: 100% 100%; animation: egg-clench 1.1s ease-in-out infinite alternate; }
.egg-claw-r .egg-pincer { transform-origin: 0% 100%; animation-name: egg-clench-r; animation-delay: 0.3s; }
@keyframes egg-clench { from { transform: rotate(0deg); } to { transform: rotate(-38deg); } }
@keyframes egg-clench-r { from { transform: rotate(0deg); } to { transform: rotate(38deg); } }
/* the shark, and the bite */
.egg-shark { position: absolute; left: 0; top: 0; width: 320px; height: 180px; margin: -90px 0 0 -160px; z-index: 24; will-change: transform; }
.egg-shark svg { width: 100%; height: 100%; overflow: visible; }
.egg-jaw { transform-box: fill-box; transform-origin: 0% 0%; transition: transform 0.6s ease-in; }
.egg-mouth .egg-jaw { transform: rotate(22deg) scaleY(1.6); }
.egg-bite::after { content: ""; position: absolute; inset: 0; z-index: 30; background: #121318; animation: egg-chomp 0.35s steps(2, end) forwards; }
@keyframes egg-chomp { 0% { clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%, 0 90%, 100% 90%, 100% 100%, 0 100%); } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
.egg-finale { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; text-align: center; animation: egg-in 1s ease both; }
@keyframes egg-in { from { opacity: 0; } }
.egg-finale-text { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.02em; color: #f6f1e7; margin: 0 0 18px; }
.egg-btn { display: inline-block; margin: 8px 8px 0 0; padding: 11px 18px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.4); background: #ffd166; color: #07204d; font: 700 14px/1 var(--sans); cursor: pointer; }
.egg-btn:hover, .egg-btn:focus-visible { background: #ffffff; outline: none; }
.egg-btn-quiet { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
@media (prefers-reduced-motion: reduce) {
  .egg-flood { animation-duration: 0.01s; } .egg-leg, .egg-wings-l, .egg-wings-r, .egg-tail, .egg-weed, .egg-crab, .egg-pincer, .egg-fly-wing, .egg-darm, .egg-sarm, .egg-dhand, .egg-shand, .egg-puff, .egg-tip, .egg-smoke-p { animation: none; } .egg-strand { animation-duration: 0.01s; } .egg-world { transition: none !important; }
}

/* ============================================================
   THE CHESS EASTER EGG (js/chess-egg.js): click "1700" on /hobbies/chess to play a bot.
   Board in the site's warm palette; pieces are the cburnett set, recoloured to charcoal (media/chess).
   ============================================================ */
button.chess-stat { border: 0; cursor: pointer; font: inherit; text-align: start; color: inherit; transition: transform var(--t-fast) var(--ease-ui), filter var(--t-fast) var(--ease-ui); }
button.chess-stat:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 10px rgba(43, 45, 49, 0.15)); }
button.chess-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
html.cg-open { overflow: hidden; }
.cg { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(43, 45, 49, 0.72); backdrop-filter: blur(4px); }
.cg-panel { display: grid; grid-template-columns: minmax(0, auto) 280px; grid-template-areas: "head head" "board side"; gap: 16px 22px; padding: 20px 22px 22px;
  background: var(--bg-raised); color: var(--text-body); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 30px 80px rgba(36, 37, 41, 0.45); max-height: calc(100vh - 32px); overflow: auto; }
.cg-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cg-title { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; }
.cg-close { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-chip); color: var(--text-primary); font: 600 13px/1 var(--sans); cursor: pointer; }
.cg-close:hover, .cg-close:focus-visible { border-color: var(--border-hover); outline: none; }
.cg-board { grid-area: board; position: relative; display: grid; grid-template-columns: repeat(8, 1fr); width: min(72vh, 560px, calc(100vw - 76px)); aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-hover); touch-action: none; user-select: none; }
.cg-sq { position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; background-size: 86%; background-position: center; background-repeat: no-repeat; font: inherit; }
.cg-light { background-color: #efe5d4; } .cg-dark { background-color: #b98563; }
.cg-sq:focus-visible { outline: 3px solid #2b6fd1; outline-offset: -3px; z-index: 1; }
.cg-sq::before { content: attr(data-rank); position: absolute; left: 4px; top: 2px; font: 700 11px/1 var(--sans); }
.cg-sq::after { content: attr(data-file); position: absolute; right: 4px; bottom: 2px; font: 700 11px/1 var(--sans); }
.cg-light::before, .cg-light::after { color: #9a6a4b; } .cg-dark::before, .cg-dark::after { color: #f6eee0; }   /* each label in the other square's colour */
.cg-last { box-shadow: inset 0 0 0 999px rgba(255, 209, 102, 0.42); }
.cg-sel { box-shadow: inset 0 0 0 999px rgba(255, 196, 80, 0.62); }
.cg-check { background-image: radial-gradient(circle, rgba(214, 48, 39, 0.85) 0%, rgba(214, 48, 39, 0.35) 45%, transparent 72%); }
.cg-dot { background-image: radial-gradient(circle, rgba(43, 45, 49, 0.28) 0 16%, transparent 17%); background-size: 100%; }
.cg-cap { box-shadow: inset 0 0 0 5px rgba(43, 45, 49, 0.32); }
.cg-lift { background-image: none !important; }
.cg-wK { background-image: url("/media/chess/wK.svg?v=1"); } .cg-wQ { background-image: url("/media/chess/wQ.svg?v=1"); } .cg-wR { background-image: url("/media/chess/wR.svg?v=1"); }
.cg-wB { background-image: url("/media/chess/wB.svg?v=1"); } .cg-wN { background-image: url("/media/chess/wN.svg?v=1"); } .cg-wP { background-image: url("/media/chess/wP.svg?v=1"); }
.cg-bK { background-image: url("/media/chess/bK.svg?v=1"); } .cg-bQ { background-image: url("/media/chess/bQ.svg?v=1"); } .cg-bR { background-image: url("/media/chess/bR.svg?v=1"); }
.cg-bB { background-image: url("/media/chess/bB.svg?v=1"); } .cg-bN { background-image: url("/media/chess/bN.svg?v=1"); } .cg-bP { background-image: url("/media/chess/bP.svg?v=1"); }
/* a capture target that already shows a piece keeps the piece and gets the ring */
.cg-cap.cg-p { background-size: 86%; }
.cg-dot.cg-p { background-size: 86%; }
.cg-ghost { position: fixed; left: 0; top: 0; z-index: 1001; pointer-events: none; background-size: 86%; background-position: center; background-repeat: no-repeat; opacity: 0; filter: drop-shadow(0 8px 10px rgba(36, 37, 41, 0.35)); }
.cg-ghost-on { opacity: 1; }
.cg-promo { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-content: center; gap: 8px; padding: 0 10%; background: rgba(43, 45, 49, 0.55); z-index: 2; }
.cg-promo-btn { aspect-ratio: 1; border-radius: 10px; border: 2px solid #f6f1e7; background-color: #efe5d4; background-size: 80%; background-position: center; background-repeat: no-repeat; cursor: pointer; }
.cg-promo-btn:hover, .cg-promo-btn:focus-visible { background-color: #ffd166; outline: none; }
.cg-side { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cg-field { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.cg-select { font: 500 14px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-primary); background: var(--bg-chip); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; }
.cg-status { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--text-primary); margin: 4px 0 0; min-height: 1.5em; }
.cg-over .cg-status { color: var(--accent-ink); }
.cg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cg-btn { padding: 10px 10px; border-radius: 8px; border: 1px solid transparent; background: var(--accent); color: var(--on-accent); font: 600 13px/1.2 var(--sans); cursor: pointer; }
.cg-btn:hover, .cg-btn:focus-visible { background: var(--accent-hover); outline: none; }
.cg-quiet { background: var(--bg-chip); color: var(--text-primary); border-color: var(--border); }
.cg-quiet:hover, .cg-quiet:focus-visible { background: var(--border-soft); }
.cg-moves { list-style: decimal; margin: 0; padding: 8px 10px 8px 34px; flex: 1; min-height: 90px; max-height: 260px; overflow: auto; background: var(--bg-chip); border: 1px solid var(--border-soft); border-radius: 8px;
  font: 500 13.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-body); white-space: pre; }
.cg-note { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.cg-note a { color: var(--accent-ink); text-decoration: underline; }
@media (max-width: 820px) {
  .cg { padding: 8px; align-items: start; }
  .cg-panel { grid-template-columns: 1fr; grid-template-areas: "head" "board" "side"; padding: 14px; gap: 12px; max-height: calc(100vh - 16px); }
  .cg-board { width: min(100%, calc(100vw - 46px)); }
  .cg-moves { max-height: 140px; }
}
@media (prefers-reduced-motion: reduce) { button.chess-stat { transition: none; } }

/* ============================================================
   THE CUBE EASTER EGG (js/cube-egg.js): click the Pyraminx photo on /hobbies/rubiks-cube.
   A hand-built CSS 3D cube; the dialog matches the chess one.
   ============================================================ */
.photo-egg { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: transform var(--t-fast) var(--ease-ui), filter var(--t-fast) var(--ease-ui); }
.photo-egg:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 14px rgba(43, 45, 49, 0.18)); }
.photo-egg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
html.rc-open { overflow: hidden; }
.rc { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(43, 45, 49, 0.78); backdrop-filter: blur(4px); }
.rc-panel { display: grid; grid-template-columns: minmax(0, auto) 290px; grid-template-areas: "head head" "stage side"; gap: 14px 24px; padding: 20px 22px 22px;
  background: var(--bg-raised); color: var(--text-body); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 30px 80px rgba(36, 37, 41, 0.45); max-height: calc(100vh - 32px); overflow: auto; }
.rc-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-title { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; }
.rc-close { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-chip); color: var(--text-primary); font: 600 13px/1 var(--sans); cursor: pointer; }
.rc-close:hover, .rc-close:focus-visible { border-color: var(--border-hover); outline: none; }
.rc-stage { grid-area: stage; width: min(62vh, 440px, calc(100vw - 76px)); aspect-ratio: 1; display: grid; place-items: center; perspective: 1200px; perspective-origin: 50% 45%;
  border-radius: 12px; background: radial-gradient(circle at 50% 40%, var(--bg-chip), var(--bg-raised) 70%); overflow: hidden; }
.rc-view { position: relative; width: 0; height: 0; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.rc-cube { position: relative; width: 0; height: 0; transform-style: preserve-3d; --s: 52px; }
.rc-cubie { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); transform-style: preserve-3d; }
.rc-face { position: absolute; inset: 0; background: #26282c; }   /* square bodies: rounded ones leave gaps the far side shows through */
.rc-px { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.rc-nx { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.rc-py { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.rc-ny { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.rc-pz { transform: translateZ(calc(var(--s) / 2)); }
.rc-nz { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.rc-st { position: absolute; inset: 7%; border-radius: 16%; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.rc-U { background: #ffd23f; } .rc-D { background: #f6f4ee; } .rc-F { background: #2563c9; } .rc-B { background: #1f9a57; } .rc-R { background: #c8323c; } .rc-L { background: #ff8a1f; }
.rc-side { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rc-steps { list-style: none; counter-reset: rc; margin: 0; padding: 0; display: grid; gap: 6px; }
.rc-steps li { counter-increment: rc; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--bg-chip); font-size: 14px; color: var(--text-muted); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.rc-steps li::before { content: counter(rc); display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-hover); font: 700 12px/1 var(--sans); }
.rc-steps li.rc-on { color: var(--text-primary); border-color: var(--accent); background: var(--accent-dim); font-weight: 600; }
.rc-steps li.rc-on::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rc-steps li.rc-done { color: var(--text-body); }
.rc-steps li.rc-done::before { content: "\2713"; background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-raised); }
.rc-status { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--text-primary); margin: 4px 0 0; min-height: 1.5em; }
.rc-alg { margin: 0; min-height: 3.4em; font: 600 14px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-muted); word-spacing: 2px; }
.rc-alg .rc-past { opacity: 0.5; }
.rc-alg .rc-now { color: var(--on-accent); background: var(--accent); border-radius: 4px; padding: 1px 4px; }
.rc-count { margin: 0; font-size: 13px; color: var(--text-muted); min-height: 1.4em; }
.rc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-btn { padding: 10px; border-radius: 8px; border: 1px solid transparent; background: var(--accent); color: var(--on-accent); font: 600 13px/1.2 var(--sans); cursor: pointer; }
.rc-btn:hover, .rc-btn:focus-visible { background: var(--accent-hover); outline: none; }
.rc-quiet { background: var(--bg-chip); color: var(--text-primary); border-color: var(--border); }
.rc-quiet:hover, .rc-quiet:focus-visible { background: var(--border-soft); }
.rc-note { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 0; }
@media (max-width: 820px) {
  .rc { padding: 8px; align-items: start; }
  .rc-panel { grid-template-columns: 1fr; grid-template-areas: "head" "stage" "side"; padding: 14px; gap: 12px; max-height: calc(100vh - 16px); }
  .rc-stage { width: min(100%, calc(100vw - 46px)); }
  .rc-steps li { padding: 6px 9px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .rc-view { transition: none; } .photo-egg { transition: none; } }

/* party mode (the theme toggle's easter egg, 24 Oct 2026): the crystals in party colours */
html[data-theme="party"] .hobbies {
  --f1: #6b2fa0;
  --f2: #4e1f7a;
  --f3: #7a2a74;
  --f4: #3a1458;
  --edge: rgba(255, 217, 61, 0.35);
  --seam: rgba(255, 217, 61, 0.12);
  --glass: rgba(255, 255, 255, 0.07);
  --drop: drop-shadow(0 18px 28px rgba(255, 79, 163, 0.18)) drop-shadow(0 2px 4px rgba(20, 5, 35, 0.4));
}
html[data-theme="party"] .xtal-in { background:
    linear-gradient(118deg, var(--glass) 0 34%, var(--seam) 34% calc(34% + 1px), transparent calc(34% + 1px) 62%, var(--seam) 62% calc(62% + 1px), transparent calc(62% + 1px)),
    var(--bg-raised); }
html[data-theme="party"] .xtal-in::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 100%); }
html[data-theme="party"] .xtal-in > .hexes { opacity: 0.12; }