/* Fonts self-hosted from /fonts (originally IBM Plex Mono/Sans and Anton via Google Fonts) — removes the extra DNS lookup + round trip to fonts.googleapis.com/fonts.gstatic.com that every visitor paid before the font file could even start downloading. */ @font-face { font-family: 'Anton'; src: url('fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { --bg: #162126; --bg-raised: #1c2a30; --bg-raised-2: #22323a; --line: rgba(227, 182, 132, 0.16); --line-strong: rgba(227, 182, 132, 0.32); --accent: #e3b684; --accent-bright: #f0cba0; --accent-dim: rgba(227, 182, 132, 0.5); --text: #ece3d6; --text-soft: #a9b2ab; --text-faint: #6d7a74; --live: #7fc99a; --white-side: #ece3d6; --black-side: #6d7a74; --font-display: 'Anton', 'Arial Narrow', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --font-sans: 'IBM Plex Sans', sans-serif; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); color-scheme: dark; } /* =========================================================== Light mode — warm cream/parchment, same accent family. Scoped to so an inline blocking script in can apply it before first paint (no flash of dark theme). =========================================================== */ html.light-mode { --bg: #e8d9c3; --bg-raised: #ddc9a9; --bg-raised-2: #d1b892; --line: rgba(58, 42, 24, 0.18); --line-strong: rgba(58, 42, 24, 0.32); --accent: #a8551f; --accent-bright: #8a4316; --accent-dim: rgba(138, 67, 22, 0.5); --text: #241a10; --text-soft: #4a3624; --text-faint: #715a41; --live: #3d7e57; --white-side: #241a10; --black-side: #715a41; color-scheme: light; } html.light-mode body::before { display: none; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; position: fixed; top: 18px; right: 18px; z-index: 301; background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--accent); font-size: 15px; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); } .theme-toggle:hover { color: var(--accent-bright); border-color: var(--accent); } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* chessboard.js renders pieces as with inline pixel sizing. The global max-width:100% above resolves against a 0-width container during drag (the clone has no defined parent width), collapsing the dragged piece to nothing. Exempt it. */ img[data-piece] { max-width: none; width: auto; height: auto; display: inline-block; } /* chessboard.js's dragged-piece clone is appended directly to , as a SIBLING of .modal-overlay — not a descendant. If its z-index is lower than the overlay's, it renders behind the blurred glass panel mid-drag and appears to vanish. .piece-417f9 is chessboard.js's fixed, documented class for every piece image it renders (board + clone). */ .piece-417f9 { z-index: 100000; } /* chessboard.js computes the dragged piece's on-screen position using width/height math that assumes the default content-box model. Our global `* { box-sizing: border-box }` reset applies to its internal DOM too, throwing that math off enough to render the dragged clone outside the visible board — it looks like the piece vanishes mid-drag and reappears on drop (the settled position re-render is CSS-driven, so it isn't affected the same way). Restore content-box just for it. */ #puzzleBoard, #puzzleBoard * { box-sizing: content-box; } /* Suppress default touch behaviors (page scroll, text selection, iOS "save image" long-press menu) so the library's own touch-drag logic isn't fighting the browser for control of the gesture. */ #puzzleBoard { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #puzzleBoard img { -webkit-touch-callout: none; pointer-events: none; } /* =========================================================== Entry list — numbered records (publications, workshops, courses) =========================================================== */ .entry-list { list-style: none; padding: 0; margin: 0; } .entry-item { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); counter-increment: entry; } .entry-list { counter-reset: entry; } .entry-item:last-child { border-bottom: none; } .entry-item::before { content: counter(entry, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--accent); padding-top: 3px; } .entry-title { font-size: 14px; color: var(--text); margin: 0 0 5px; line-height: 1.55; text-align: justify; text-justify: inter-word; } .entry-title strong { color: var(--accent-bright); font-family: var(--font-sans); font-weight: 500; } .entry-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); margin: 0 0 4px; text-align: justify; text-justify: inter-word; } .entry-desc { font-size: 13px; color: var(--text-soft); margin: 6px 0 0; line-height: 1.6; text-align: justify; text-justify: inter-word; } /* =========================================================== Card grid — GitHub projects, certifications, memberships =========================================================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-items: stretch; } .card-grid .post-card { margin-bottom: 0; height: 100%; } .info-tile { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 9px; padding: 16px 18px; transition: border-color .18s var(--ease), transform .18s var(--ease); } .info-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); } .info-tile h4 { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0 0 6px; } .info-tile p { font-size: 12.5px; color: var(--text-soft); margin: 0; line-height: 1.55; } .info-tile .tile-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 8px; display: block; } /* Skills key/value rows (project page) */ .kv-list { display: flex; flex-direction: column; gap: 0; } .kv-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .kv-row:last-child { border-bottom: none; } .kv-row .k { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; } .kv-row .v { color: var(--text-soft); } /* =========================================================== SJR quartile badge Manually maintained — SCImago has no live per-journal API. Update quartile/score/year here when SCImago republishes rankings (typically once a year). =========================================================== */ .sjr-badge { display: inline-flex; align-items: center; gap: 9px; margin-top: 8px; padding: 4px 4px 4px 4px; font-family: var(--font-mono); } .sjr-q { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #10140f; } .sjr-q.q1 { background: #ADD372; } /* SCImago green */ .sjr-q.q2 { background: #EBD868; } /* SCImago yellow */ .sjr-q.q3 { background: #F5AA60; } /* SCImago orange */ .sjr-q.q4 { background: #DF675D; } /* SCImago red */ .sjr-q.unranked { background: var(--bg-raised-2); color: var(--text-faint); } .sjr-score { font-size: 10.5px; color: var(--text-soft); } .sjr-score strong { color: var(--accent); font-weight: 600; } .sjr-score a { border: none; background-image: none; padding-bottom: 0; border-bottom: 1px dotted var(--accent); transition: color .15s var(--ease); } .sjr-score a:hover strong { color: var(--accent-bright); } .sjr-score a:hover { border-bottom-color: var(--accent-bright); } .sjr-year { font-size: 10px; color: var(--text-faint); } .sjr-sep { color: var(--text-faint); } ::selection { background: rgba(227, 182, 132, 0.25); color: var(--accent-bright); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--bg-raised-2); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(227,182,132,0.3); transition: color .15s var(--ease), border-color .15s var(--ease); } a:hover, a:focus-visible { color: var(--accent-bright); border-color: var(--accent-bright); } a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } strong { color: var(--accent-bright); font-weight: 600; } /* =========================================================== Header / nav =========================================================== */ .site-header { padding: 30px 0 0; text-align: center; position: relative; } .nav-wrap { display: inline-block; position: relative; padding: 0 6vw; } .main-nav { display: flex; gap: clamp(24px, 4vw, 56px); list-style: none; margin: 0; padding: 0; justify-content: center; } .main-nav a { border: none; font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); letter-spacing: 0.03em; color: var(--text-soft); text-transform: uppercase; padding-bottom: 2px; transition: color .2s var(--ease); } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--accent-bright); } .nav-rule { height: 2px; background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); margin: 16px auto 0; width: 120%; max-width: 1400px; } .header-toggle { display: none; position: fixed; top: 18px; right: 62px; z-index: 300; background: var(--bg-raised); border: 1px solid var(--line-strong); color: var(--accent); font-family: var(--font-mono); font-size: 12px; border-radius: 6px; padding: 8px 12px; } /* =========================================================== Page shell — two column =========================================================== */ .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 0; max-width: 1440px; margin: 0 auto; align-items: start; } .main-col { padding: 48px clamp(24px, 4vw, 64px) 40px clamp(24px, 5vw, 72px); min-width: 0; } .side-col { padding: 48px clamp(20px, 3vw, 40px) 40px 24px; border-left: 1px solid var(--line); position: sticky; top: 0; max-height: 100vh; min-width: 0; overflow-y: auto; } /* =========================================================== About block =========================================================== */ .about-block { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 40px; } .portrait { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--bg), 0 0 18px rgba(227, 182, 132, 0.25); cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .portrait:hover { transform: scale(1.04); box-shadow: 0 0 0 4px var(--bg), 0 0 26px rgba(227, 182, 132, 0.4); } .portrait img { width: 100%; height: 100%; object-fit: cover; } .modal-box.photo-modal-box { max-width: 550px; padding: 30px; background: var(--bg-raised); overflow: visible; } .photo-modal-box .modal-close { top: 8px; right: 3px; background: var(--bg); background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-color: var(--line-strong); color: var(--text); } .photo-modal-img { display: block; width: 100%; height: auto; border-radius: 8px; } .about-name { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); letter-spacing: 0.01em; color: var(--accent-bright); margin: 0 0 6px; text-transform: uppercase; } .about-titles { font-family: var(--font-mono); font-size: 14px; color: var(--text-soft); margin: 0 0 14px; letter-spacing: 0.01em; } .about-titles .sep { color: var(--text-faint); margin: 0 6px; } .about-desc { color: var(--text-soft); font-size: 14.5px; max-width: none; margin: 0; text-align: justify; text-justify: inter-word; } /* =========================================================== Notebook — tag filter pills =========================================================== */ .tag-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .tag-pill { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease); } .tag-pill:hover { border-color: var(--line-strong); color: var(--text); } .tag-pill.active { color: var(--bg); background: var(--accent); border-color: var(--accent); } /* =========================================================== Section shell (generic left-column blocks) =========================================================== */ .block { padding: 30px 0; border-top: 1px solid var(--line); } .block:first-of-type { border-top: none; padding-top: 0; } .block-label { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-soft); margin: 0 0 16px; } /* Affiliation with live blink */ .affil-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; } .live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(127, 201, 154, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(127, 201, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 201, 154, 0); } } .affil-item h4 { margin: 0 0 4px; font-family: var(--font-mono); font-size: 13.5px; color: var(--accent); } .affil-item p { margin: 0; font-size: 13.5px; color: var(--text-soft); } .nowrap-link { white-space: nowrap; } .affil-item p + p { margin-top: 4px; } .affil-item .badge { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; color: var(--live); border: 1px solid rgba(127,201,154,0.4); border-radius: 3px; padding: 1px 6px; margin-left: 8px; vertical-align: 1px; } .affil-item.past { opacity: 1; } .affil-item.past h4 { color: var(--text); } .affil-item.past .live-dot { background: var(--accent); } /* Extra / "something else" */ .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; } /* =========================================================== Elsewhere — two-column now-status + stat grid =========================================================== */ .elsewhere-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; } .now-list { display: flex; flex-direction: column; gap: 18px; max-height: 260px; overflow-y: auto; border: 1px solid var(--accent-bright); border-radius: 10px; padding: 18px 20px 18px 16px; } .now-list::-webkit-scrollbar { width: 6px; } .now-list::-webkit-scrollbar-track { background: transparent; } .now-list::-webkit-scrollbar-thumb { background: rgba(240, 203, 160, 0.3); border-radius: 4px; border: none; } .now-list::-webkit-scrollbar-thumb:hover { background: var(--accent-bright); } .now-item { display: flex; gap: 12px; align-items: flex-start; } .now-led { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; } .now-item div { display: flex; flex-direction: column; gap: 3px; } .now-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); } .now-value { font-size: 13.5px; color: var(--text); line-height: 1.5; text-align: justify; text-justify: inter-word; } .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; } .stat-grid-2col { grid-template-columns: repeat(2, 1fr); } .stat-box { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 9px; padding: 16px 12px; text-align: center; transition: border-color .18s var(--ease), transform .18s var(--ease); } .stat-box:hover { border-color: var(--line-strong); transform: translateY(-2px); } .stat-box .num { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--accent-bright); line-height: 1; } .stat-box .lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 8px; line-height: 1.4; } @media screen and (max-width: 720px) { .elsewhere-grid { grid-template-columns: 1fr; } .stat-grid:not(.stat-grid-2col) { grid-template-columns: repeat(3, 1fr); } .stat-grid-2col { grid-template-columns: repeat(2, 1fr); } } /* =========================================================== Live Elsewhere — clickable GitHub / Chess stat cards =========================================================== */ .live-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; height: 100%; } .live-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 9px; padding: 10px 8px; cursor: pointer; text-align: center; font-family: inherit; transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease); } .live-card:hover { border-color: var(--line-strong); transform: translateY(-2px); background: var(--bg-raised-2); } .live-card-logo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--accent); } .live-card-logo svg { width: 100%; height: 100%; } .live-card-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); } .live-modal-loading { color: var(--text-soft); font-size: 13.5px; margin: 16px 0; } .live-modal-error { color: var(--text-soft); font-size: 13.5px; margin: 16px 0; } .live-profile-header { display: flex; align-items: center; gap: 14px; margin: 16px 0 20px; } .live-profile-avatar { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-strong); object-fit: cover; } .live-profile-name { font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--text); } .live-profile-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); margin-top: 2px; } .live-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .live-stat-item { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; } .live-stat-item .num { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--accent-bright); line-height: 1; } .live-stat-item .lbl { font-family: var(--font-mono); font-size: 10px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px; } .stat-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 0; } .stat-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 8px; text-align: center; } .stat-tile-icon { width: 28px; height: 28px; color: var(--accent); } .stat-tile-icon svg, .stat-tile-icon img { width: 100%; height: 100%; } .stat-tile-value { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); } .stat-tile-value .prov { color: var(--text-soft); font-weight: 400; font-size: 10px; } .stat-tile-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.03em; } @media screen and (max-width: 480px) { .stat-tile-grid { grid-template-columns: repeat(3, 1fr); } } .modal-profile-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 8px 0 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--line-strong); } .modal-profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; padding: 14px; color: var(--accent); margin-bottom: 10px; } .modal-profile-avatar svg { width: 100%; height: 100%; } img.modal-profile-avatar { padding: 0; } .modal-profile-name { font-family: var(--font-sans); font-weight: 600; font-size: 17px; color: var(--text); } .modal-profile-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); margin-top: 4px; } /* =========================================================== Footer =========================================================== */ .site-footer { max-width: 1440px; margin: 0 auto; padding: 24px clamp(24px, 4vw, 64px) 50px clamp(24px, 5vw, 72px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; } .site-footer p { margin: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); } .footer-socials { display: flex; gap: 18px; justify-self: end; } .footer-socials a { border: none; font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); } .footer-socials a:hover { color: var(--accent); } .footer-center { display: flex; flex-direction: column; align-items: center; gap: 14px; justify-self: center; } .footer-contact { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); border: none; background: transparent; cursor: pointer; padding: 0; } .footer-contact:hover { color: var(--accent); } .footer-changelog { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); border: none; background: transparent; cursor: pointer; padding: 0; } .footer-changelog:hover { color: var(--accent); } .changelog-text-short { display: none; } @media screen and (max-width: 640px) { .changelog-text-full { display: none; } .changelog-text-short { display: inline; } } /* =========================================================== Contact modal — form fields =========================================================== */ .contact-form { text-align: left; } .form-row { margin-bottom: 16px; } .form-row label { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 6px; } .form-row input, .form-row textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; color: var(--text); font-family: var(--font-sans); font-size: 13.5px; resize: vertical; transition: border-color .15s var(--ease); } .form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--accent-bright); } .form-status { font-family: var(--font-mono); font-size: 12px; margin: 10px 0 0; min-height: 16px; } .form-status.sending { color: var(--text-soft); } .form-status.success { color: var(--live); } .form-status.error { color: #d9755f; } @media screen and (max-width: 640px) { .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; padding-top: 28px; padding-bottom: 40px; } .footer-socials, .footer-contact { justify-self: center; } .footer-center { gap: 12px; } .footer-socials { gap: 24px; } .footer-contact, .footer-changelog { border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 18px; } } /* =========================================================== Side column — Research =========================================================== */ .side-title { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent-bright); margin: 0 0 4px; } .side-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin: 0 0 18px; text-align: justify; text-justify: inter-word; } .paper-card { display: block; width: 100%; text-align: left; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; cursor: pointer; transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease); font-family: inherit; } .paper-card:hover { border-color: var(--line-strong); transform: translateY(-1px); background: var(--bg-raised-2); } .paper-tag { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-bright); background: transparent; border: 1px solid var(--accent-bright); border-radius: 3px; padding: 2px 7px; margin-bottom: 8px; } .paper-title { font-size: 13px; color: var(--text); margin: 0 0 6px; line-height: 1.4; font-weight: 500; text-align: justify; text-justify: inter-word; } .paper-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin: 0; } .paper-skeleton { opacity: 0.5; } .paper-skeleton .paper-title { background: var(--bg-raised-2); color: transparent; border-radius: 4px; height: 1.4em; } /* =========================================================== Side column — Equation of the Day =========================================================== */ .equation-block { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); } .equation-card { display: block; width: 100%; text-align: left; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 20px 18px; cursor: pointer; transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease); font-family: inherit; } .equation-card:hover { border-color: var(--line-strong); transform: translateY(-1px); background: var(--bg-raised-2); } .eq-card-statement { font-size: 13px; color: var(--text-soft); line-height: 1.6; margin: 10px 0 0; } /* Statement and proof in the modal — plain wrapping text with small inline KaTeX spans mixed in, so it reflows exactly like any other paragraph at any screen width. */ .eq-statement, .eq-proof { line-height: 1.7; overflow-wrap: break-word; text-align: justify; text-justify: inter-word; } .eq-statement { font-size: 15.5px; color: var(--text); margin: 16px 0; } .eq-proof { font-size: 15.5px; color: var(--text); } .eq-statement .katex-display, .eq-proof .katex-display { margin: 8px 0; text-align: left; overflow-x: hidden; } .eq-statement .katex-display > .katex, .eq-proof .katex-display > .katex { max-width: 100%; } .eq-statement .katex, .eq-proof .katex { font-size: clamp(0.85em, 3.2vw, 1em); white-space: normal; } .eq-proof-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-bright); margin: 0 0 8px; } /* =========================================================== Side column — Chess puzzle =========================================================== */ .puzzle-block { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); } .puzzle-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 18px; text-align: center; } .puzzle-mini-board { border-radius: 6px; overflow: hidden; margin: 0 auto 14px; width: 100%; max-width: 220px; pointer-events: none; opacity: 0.9; } .puzzle-turn { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); margin: 0 0 12px; } .puzzle-turn .side-tag { color: var(--accent-bright); font-weight: 600; } .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--bg); background: var(--accent); border: none; border-radius: 6px; padding: 10px 18px; cursor: pointer; transition: background .15s var(--ease), transform .15s var(--ease); } .btn:hover { background: var(--accent-bright); transform: translateY(-1px); } .btn-ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--text-soft); } .btn-ghost:hover { color: var(--accent-bright); border-color: var(--accent); background: transparent; } /* =========================================================== Modal =========================================================== */ .modal-overlay { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 14, 16, 0.5); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } .modal-overlay.open { display: flex; } .modal-box { background: linear-gradient(155deg, var(--bg-raised-2), var(--bg-raised)); border: 1px solid var(--line-strong); border-radius: 14px; max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 30px 36px 30px 32px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,0.35); } .modal-box::-webkit-scrollbar { width: 6px; } .modal-box::-webkit-scrollbar-track { background: transparent; } .modal-box::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 4px; border: none; } .modal-box::-webkit-scrollbar-thumb:hover { background: var(--accent-bright); } .modal-close { position: absolute; top: 16px; right: 16px; background: transparent; border: 1px solid var(--line-strong); color: var(--text-soft); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-family: var(--font-mono); font-size: 14px; } .modal-close:hover { color: var(--accent-bright); border-color: var(--accent); } .modal-tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-bright); background: transparent; border: 1px solid var(--accent-bright); border-radius: 3px; padding: 3px 8px; margin-bottom: 14px; } .modal-box h3 { font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.4; color: var(--text); margin: 0 0 10px; } .modal-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin: 0 0 4px; text-align: justify; text-justify: inter-word; } .modal-meta strong { color: var(--accent); font-weight: 500; } .modal-abstract { font-size: 13.5px; color: var(--text-soft); margin: 16px 0; line-height: 1.7; text-align: justify; text-justify: inter-word; } .modal-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; } /* Puzzle modal specifics */ #puzzleModal .modal-box { max-width: 460px; text-align: center; } #equationModal .modal-box { max-width: 680px; max-height: 92vh; } #equationModal .modal-box, #equationModal .eq-statement, #equationModal .eq-proof { overflow-x: hidden; } #puzzleBoard { width: 100%; max-width: 380px; margin: 10px auto 16px; } .puzzle-status { font-family: var(--font-mono); font-size: 13px; color: var(--text-soft); min-height: 20px; margin: 0 0 14px; } .puzzle-status.correct { color: var(--live); } .puzzle-status.wrong { color: #d9755f; } .puzzle-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; } /* =========================================================== Responsive =========================================================== */ @media screen and (max-width: 1000px) { .shell { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100vw; overflow-x: hidden; /* Encapsulates any interior rogue elements */ } .main-col { width: 100%; max-width: 100vw; } .side-col { border-left: none; border-top: 1px solid var(--line); position: static; max-height: none; width: 100%; max-width: 100vw; } .about-block { flex-direction: column; align-items: center; text-align: center; width: 100%; } .about-desc { max-width: 100%; } .elsewhere-grid { grid-template-columns: 1fr; /* Prevents status boards from clipping on medium tablets */ } body.no-side-mobile .side-col { display: none; } } @media screen and (max-width: 680px) { #equationModal .modal-box h3 { font-size: 1rem; } .header-toggle { display: block; } .nav-wrap { display: none; } .nav-wrap.open { display: block; width: 100%; padding: 0 16px; margin-top: 46px; } .main-nav { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; width: 100%; } .main-nav a { font-size: 0.92rem; } .nav-rule { display: none; } .post-footer-row, .article-share-row { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .post-published { font-size: 9.5px; } .share-label { font-size: 9.5px; margin-right: 0; } .post-share { gap: 6px; } .share-link { font-size: 10px; padding: 3px 7px; } .post-excerpt { text-align: justify; text-justify: inter-word; } .month-body { padding-left: 22px; } .month-body::before { left: 4px; } .month-body::after { left: 0; width: 8px; height: 8px; } .month-body .trunk-end-dot { left: 0; width: 8px; height: 8px; } .month-body .post-card::before { left: -19px; width: 16px; height: 20px; } .main-col { padding: 26px 20px 32px; } .side-col { padding: 26px 20px 32px; } .card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .reviewer-grid { display: flex; grid-template-columns: none; overflow-x: auto; gap: 10px; padding-bottom: 6px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .reviewer-grid { align-items: stretch; } .reviewer-grid .post-card { flex: 20 0 80%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; height: 160px; box-sizing: border-box; } .info-tile { padding: 12px 14px; } .info-tile h4 { font-size: 12.5px; } .info-tile p { font-size: 11.5px; } .block { padding: 18px 0; } .about-block { margin-bottom: 22px; gap: 18px; } .site-header { padding-top: 16px; } .hide-chips-mobile { display: none; } } /* =========================================================== Notebook — post listing cards =========================================================== */ .post-list { display: flex; flex-direction: column; gap: 2px; } /* =========================================================== Notebook — year/month grouping =========================================================== */ .month-group { margin-bottom: 34px; } .month-group:last-child { margin-bottom: 0; } .month-body { position: relative; padding-left: 30px; } .month-body::before { /* the vertical trunk line */ content: ''; position: absolute; left: 6px; top: 6px; bottom: 10px; width: 2px; background: var(--accent-bright); } .month-body::after { /* the dot at the top of the trunk */ content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-bright); } .month-body .trunk-end-dot { position: absolute; left: 2px; bottom: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-bright); } .month-body .post-card { position: relative; } .month-body .post-card::before { /* curved branch from the trunk into each card — vertically centered on the card regardless of its height */ content: ''; position: absolute; left: -25px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-left: 2px solid var(--accent-bright); border-bottom: 2px solid var(--accent-bright); border-bottom-left-radius: 10px; } .post-card { display: block; padding: 22px 24px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); transition: border-color .18s var(--ease), transform .18s var(--ease); } .post-card:hover { border-color: var(--line-strong); transform: translateY(-2px); } .post-card:last-child { margin-bottom: 0; } .post-meta-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .post-tag { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-bright); background: transparent; border: 1px solid var(--accent-bright); border-radius: 3px; padding: 3px 8px; } .post-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); } .post-title { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; } .post-title a { color: var(--text); border: none; transition: color .18s var(--ease); } .post-title a:hover { color: var(--accent-bright); } .post-excerpt { font-size: 13.5px; color: var(--text-soft); line-height: 1.65; margin: 0; } .post-card.is-placeholder { border-style: dashed; opacity: 0.6; } .post-card.is-placeholder:hover { transform: none; border-color: var(--line); } .post-card.is-placeholder .post-title { color: var(--text); } .post-footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); } .post-published { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); } .post-share { display: flex; align-items: center; gap: 8px; } .share-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 2px; } .share-link { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent-bright); background: transparent; border: 1px solid var(--accent-bright); border-radius: 4px; padding: 4px 9px; text-decoration: none; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .share-link:hover { background: var(--accent-bright); color: var(--bg); } .code-copy-btn { position: absolute; top: 10px; right: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); } .code-copy-btn:hover { color: var(--accent-bright); border-color: var(--accent); } /* =========================================================== Notebook — individual article page =========================================================== */ .article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .article-body { font-size: 15px; line-height: 1.8; color: var(--text-soft); } .article-body p { margin: 0 0 18px; text-align: justify; text-justify: inter-word; } .article-body h2 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; color: var(--accent-bright); margin: 38px 0 14px; } .article-body h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 28px 0 10px; } .article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 18px; } .article-body li { margin-bottom: 8px; text-align: justify; text-justify: inter-word; } .article-body code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; color: var(--accent-bright); } .article-body pre { position: relative; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; padding: 14px 56px 14px 18px; overflow-x: auto; margin: 0 0 20px; } .article-body pre.output { background: var(--bg); border: 1px dashed var(--line); padding: 14px 18px; margin-top: -12px; } .article-body pre.output code { color: var(--text-faint); } .article-body pre code { background: none; border: none; padding: 0; color: var(--text); font-size: 13px; line-height: 1.6; } .article-body blockquote { border-left: 2px solid var(--accent); margin: 0 0 20px; padding: 4px 0 4px 18px; color: var(--text-soft); font-style: italic; } .article-table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 8px; } .article-body table { width: 100%; min-width: 480px; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; } .article-body th, .article-body td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; } .article-body tr:last-child td { border-bottom: none; } .article-body th { color: var(--accent-bright); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg-raised); } .article-body td { color: var(--text-soft); } .article-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-soft); border: none; margin-bottom: 8px; transform: translateY(-14px); } .article-back:hover { color: var(--accent); } .article-share-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 0; margin: 4px 0 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* =========================================================== Print — clean, ink-friendly, no dark theme or navigation. Only activates for actual printing / "Print to PDF", never affects normal on-screen browsing. =========================================================== */ @media print { /* Hide everything that only makes sense on screen */ .site-header, .side-col, .site-footer, .header-toggle, .modal-overlay, .puzzle-block, .research-block, .article-share-row, .post-share, .share-link, .copy-link-btn, .code-copy-btn, .article-back { display: none !important; } /* Flip dark theme to plain black-on-white for print */ body, .shell, .main-col, .block, .card, .info-tile, .post-card { background: #fff !important; color: #111 !important; } .main-col { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .shell { display: block !important; } h1, h2, h3, h4, .about-name, .block-label, .entry-title, .entry-title strong, .post-title { color: #000 !important; } a { color: #000 !important; text-decoration: underline; } /* Show the actual URL after external links, since a click target is meaningless on paper */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; } .live-dot, .now-led, .trunk-end-dot, .month-body::before, .month-body::after, .month-body .post-card::before { display: none !important; } .info-tile, .post-card, table, .article-table-wrap { border: 1px solid #ccc !important; box-shadow: none !important; } .entry-item, .post-card, .info-tile { page-break-inside: avoid; } } /* =========================================================== Changelog =========================================================== */ .changelog-list { list-style: disc; padding-left: 20px; margin: 12px 0 0; } .changelog-list li { margin-bottom: 7px; font-size: 12.5px; color: var(--text-soft); line-height: 1.6; text-align: justify; text-justify: inter-word; } .changelog-list li::marker { color: var(--accent); } .changelog-list li:last-child { margin-bottom: 0; }