* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- Ink tokens ----------

   A dark, quiet page: near-black paper, warm off-white type, and two accents
   used sparingly, a deep red for names and a muted gold for section labels.
   Everything structural is a hairline; nothing has a fill unless it needs one.
   Light mode is the same design with the values inverted, so the theme toggle
   still does something sensible. */
:root {
    --ink-bg: #121312;
    --ink-fg: #f0e9dd;
    --ink-muted: rgba(240, 233, 221, 0.62);
    --ink-faint: rgba(240, 233, 221, 0.38);
    --ink-rule: rgba(240, 233, 221, 0.14);
    --ink-panel: rgba(240, 233, 221, 0.035);
    /* One colour. The accents are kept as names so the palette has somewhere
       to come back to: give these a hue and the red name and gold section
       labels return everywhere at once. */
    --ink-blood: var(--ink-fg);
    --ink-gold: var(--ink-faint);
    --ink-font: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ink-measure: 672px;
}

/* The rest of the stylesheet was written against these five names. Pointing
   them at the ink palette re-themes every old rule in one place instead of
   rewriting hundreds of declarations. */
:root,
[data-theme="dark"],
[data-theme="light"] {
    --bg-color: var(--ink-bg);
    --text-color: var(--ink-fg);
    --text-color-dark: var(--ink-fg);
    --nav-text-color: var(--ink-fg);
    --footer-bar-color: var(--ink-rule);
}

[data-theme="light"] {
    --ink-bg: #fbfaf8;
    --ink-fg: #16171a;
    --ink-muted: rgba(22, 23, 26, 0.68);
    --ink-faint: rgba(22, 23, 26, 0.42);
    --ink-rule: rgba(22, 23, 26, 0.14);
    --ink-panel: rgba(22, 23, 26, 0.03);
    --ink-blood: var(--ink-fg);
    --ink-gold: var(--ink-faint);
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 14px;
    font-weight: 400;
}

a {
    color: #6666ff;
}

a:hover {
    color: var(--text-color);
}

a:visited {
    color: #cc66ff;
}

[data-theme="dark"] a {
    color: #9999ff;
}

[data-theme="dark"] a:visited {
    color: #dd99ff;
}

/* thume.ca-style heading markers */
h1, h2 {
    position: relative;
    font-weight: 700;
    font-size: 20px;
    margin: 1.6rem 0 0.6rem;
}

h2 {
    font-size: 15px;
    margin: 1.2rem 0 0.3rem;
}

h1:not(.nostyle)::before {
    content: "#";
    position: absolute;
    left: -1.15em;
    color: #bbb;
}

h1.nostyle {
    display: inline;
    font-size: inherit;
}

h2::before {
    content: "+";
    position: absolute;
    left: -1.15em;
    color: #bbb;
}

/* thume.ca-style title row */
.title {
    margin-bottom: 1.5rem;
}

.title .name {
    color: #a00;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
}

.title .name:hover {
    color: var(--text-color);
}

[data-theme="dark"] .title .name {
    color: #ff8080;
}

.title .extra {
    color: #999;
    font-size: 13px;
    text-decoration: none;
    margin-left: 0.75rem;
}

.title .extra:hover {
    color: var(--text-color);
    text-decoration: underline;
}

.title .theme-toggle {
    float: right;
}

.title .avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* thume.ca-style blockquote */
blockquote {
    border-left: 3px solid #ddd;
    padding-left: 1rem;
    font-size: 14px;
    opacity: 0.75;
    margin: 1rem 0 1.5rem;
}

nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 2rem 3rem;
    gap: 2rem;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: var(--nav-text-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
}

.nav-links a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nav-text-color);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    opacity: 0.7;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 3rem 4rem;
}

.home-container {
    max-width: 920px;
    padding: 0 2rem 4rem 4rem;
}

/* keep prose at a readable measure even though the page is wide */
.home-container .prose {
    max-width: 640px;
}

.home-container .prose > p {
    margin-bottom: 0.7rem;
}

.item .project-links {
    margin-top: 0.35rem;
    font-size: 13px;
}

/* dated news feed, most recent first */
.news {
    list-style: none;
    margin: 0.6rem 0 0.5rem;
}

.news li {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.5rem;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 0.7rem;
}

.news .news-date {
    color: #999;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    padding-top: 0.15rem;
    white-space: nowrap;
}

.news .news-body {
    opacity: 0.9;
}

/* the one worth stopping on */
.news-featured {
    border-left: 3px solid #ffd100;
    padding-left: 0.85rem;
    margin-left: calc(-0.85rem - 3px);
}

@media (max-width: 520px) {
    .news li {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

/* experience (left) / projects (right) */
.work-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1rem 3.5rem;
    align-items: start;
    margin-top: 0.5rem;
}

.work-col {
    min-width: 0;
}

.work-col > h1 {
    margin-top: 1.6rem;
}

.exp {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0.7rem;
    margin: 1.1rem 0 1.35rem;
}

.exp-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 2px;
    margin-top: 1px;
}

/* full-bleed marks fill their own tile */
.exp-logo--bleed {
    padding: 0;
    overflow: hidden;
}

[data-theme="dark"] .exp-logo {
    border-color: #222;
}

.exp-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.exp-org {
    font-size: 14px;
    font-weight: 700;
}

.exp-when {
    color: #999;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    white-space: nowrap;
}

.exp-role {
    color: #999;
    font-size: 12.5px;
}

.exp .role-list {
    margin-top: 0.35rem;
}

.exp .role-list li {
    font-size: 13px;
}

@media (max-width: 860px) {
    .home-container {
        max-width: 640px;
        padding-left: 2.5rem;
    }

    .work-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* thume.ca-style single-page sections */
.site-section {
    margin-bottom: 1.5rem;
}

.site-section > p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0.75rem 0;
}

.item {
    margin: 1rem 0 1.25rem;
}

.item h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.item .tags {
    font-size: 12px;
    color: #999;
    margin-bottom: 0.3rem;
}

.item p {
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.85;
}

.role {
    font-size: 14px;
    margin: 1rem 0 0.3rem;
}

.role-meta {
    color: #999;
    font-size: 13px;
}

.role-list {
    list-style: none;
    margin: 0.3rem 0 0;
}

.role-list li {
    position: relative;
    padding-left: 1.1em;
    font-size: 13.5px;
    line-height: 1.6;
    opacity: 0.85;
}

.role-list li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: #bbb;
}

ul.posts {
    list-style: none;
    margin: 0.5rem 0 1.5rem;
}

ul.posts li {
    position: relative;
    padding-left: 1.1em;
    line-height: 1.9em;
    font-size: 13.5px;
}

ul.posts li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: #bbb;
}

ul.posts .post-date-sm {
    color: #999;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
}

.site-footer {
    font-size: 12px;
    color: #999;
    border-top: 2px solid #eee;
    margin-top: 2rem;
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

[data-theme="dark"] .site-footer {
    border-top-color: #222;
}

.site-footer a {
    color: #999;
}

.site-footer a:hover {
    color: var(--text-color);
}

.intro {
    margin-bottom: 3rem;
}

.intro h1 {
    font-size: 2rem;
    font-weight: normal;
    color: var(--text-color-dark);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.6;
    margin-bottom: 0.75rem;
}

.status a {
    color: var(--text-color);
    text-decoration: none;
    opacity: 0.7;
}

.status a:hover {
    opacity: 1;
    text-decoration: underline;
}

.status-dot {
    width: 7px;
    height: 7px;
    background-color: #22c55e;
    border-radius: 0;
    display: inline-block;
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.intro p {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.6;
}

.experience {
    margin-bottom: 3rem;
}

.experience h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 1.5rem;
}

.experience-item {
    margin-bottom: 1.25rem;
}

.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.experience-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.company-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 0;
    flex-shrink: 0;
}

.experience-header h3 {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color-dark);
    margin: 0;
}

.experience-date {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.7;
}

.experience-company {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.7;
    padding-left: 1.875rem;
}

.experience-blurb {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.6;
    padding-left: 1.875rem;
    margin-top: 0.25rem;
    line-height: 1.5;
}

.projects {
    margin-bottom: 3rem;
}

.projects h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 1.5rem;
}

.project-item {
    margin-bottom: 2rem;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-header h3 {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color-dark);
    margin: 0;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.tag {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    background-color: #f5f5f5;
    padding: 0.15rem 0.6rem;
    border-radius: 0;
    display: inline-block;
}

[data-theme="dark"] .tag {
    color: #999999;
    background-color: #1a1a1a;
}

.project-date {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.7;
}

.project-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.project-link-text {
    font-size: 13px;
    font-weight: 400;
    color: #6666ff;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

[data-theme="dark"] .project-link-text {
    color: #9999ff;
}

.project-link-text:hover {
    color: var(--text-color);
}

.project-link-sep {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.3;
}

.demo-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.demo-overlay.active {
    display: flex;
}

.demo-modal {
    position: relative;
    width: 90%;
    max-width: 800px;
}

.demo-modal video {
    width: 100%;
    border-radius: 0;
    display: block;
}

.demo-close {
    position: absolute;
    top: -2rem;
    right: 0;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
}

.demo-close:hover {
    opacity: 1;
}

.project-desc {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.5;
}

.writing-container {
    max-width: 640px;
}

.writing-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 0.5rem;
}

.writing-subtitle {
    font-size: 15px;
    color: var(--text-color);
    opacity: 0.5;
    margin-bottom: 3rem;
}

.post-list {
    display: flex;
    flex-direction: column;
}

.post-item {
    display: block;
    text-decoration: none;
    padding: 1.75rem 0;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.post-item:last-child {
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.post-item:hover {
    opacity: 0.7;
}

.post-item:hover .post-heading {
    text-decoration: underline;
}

.post-date {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.post-heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin: 0.5rem 0;
    line-height: 1.35;
}

.post-preview {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.6;
    line-height: 1.55;
}

.notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 1rem;
}

.notfound-illustration {
    width: 100%;
    max-width: 360px;
    height: auto;
    margin-bottom: 2rem;
}

.notfound h1 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 0.5rem;
}

.notfound p {
    font-size: 15px;
    color: var(--text-color);
    opacity: 0.6;
}

[data-theme="dark"] .notfound-illustration {
    background-color: #ffffff;
    border-radius: 0;
    padding: 1rem;
}

.photography-container {
    max-width: 1400px;
    padding: 0 2rem 4rem;
}

.photography {
    margin-bottom: 4rem;
}

.photo-intro {
    font-size: 15px;
    color: var(--muted-color, var(--text-color));
    opacity: 0.75;
    margin: 0 0 1.75rem;
    max-width: 46ch;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    width: 100%;
    grid-auto-flow: dense;
}

.photo-grid img,
.photo-grid video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 0;
    opacity: 0.95;
    aspect-ratio: 3/4;
}

.photo-grid video {
    background-color: var(--bg-color);
}

.photo-grid img:hover,
.photo-grid video:hover {
    opacity: 1;
}

.main-footer {
    margin-top: 4rem;
}

.chat-cta {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.chat-cta a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chat-cta a:hover {
    opacity: 0.6;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.social-links a {
    color: var(--text-color-dark);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.social-links a:hover {
    opacity: 0.7;
}

.social-links svg {
    width: 20px;
    height: 20px;
}

.resume-link {
    font-size: 14px;
    font-weight: 400;
}

.copyright {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
}

.footer-bar {
    width: 100%;
    height: 1px;
    background-color: var(--footer-bar-color);
    position: fixed;
    bottom: 0;
    left: 0;
}

.admin-photo-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 0;
    background-color: var(--text-color);
    color: var(--bg-color);
    font-size: 24px;
    line-height: 1;
    border: none;
    cursor: pointer;
    opacity: 0.15;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-photo-btn:hover {
    opacity: 0.85;
}

.admin-photo-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* Post detail page */
.post-back {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.4;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 2rem;
}

.post-back:hover {
    opacity: 1;
}

.post-full-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin: 0.5rem 0 2rem;
    line-height: 1.3;
}

.post-body {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.8;
}

.post-body p {
    margin-bottom: 1.25rem;
}

.post-body .post-h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 2.25rem 0 0.9rem;
}

/* no "+" gutter marker inside article bodies */
.post-body .post-h2::before {
    content: none;
}

.writing-loading,
.writing-empty {
    font-size: 15px;
    color: var(--text-color);
    opacity: 0.4;
    padding: 2rem 0;
}

/* Admin page */
.admin-container {
    max-width: 640px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3rem;
}

.admin-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color-dark);
}

.admin-back {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.4;
    text-decoration: none;
}

.admin-back:hover {
    opacity: 1;
}

.admin-editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.admin-input {
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    padding: 0.75rem 0;
    outline: none;
}

.admin-input:focus {
    border-color: var(--text-color);
}

.admin-input-sm {
    font-size: 14px;
    font-weight: 400;
}

.admin-textarea {
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
    background: none;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0;
    padding: 1rem;
    outline: none;
    resize: vertical;
    min-height: 200px;
    line-height: 1.7;
}

.admin-textarea:focus {
    border-color: var(--text-color);
}

.admin-btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--bg-color);
    background-color: var(--text-color);
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 0;
    cursor: pointer;
    align-self: flex-start;
}

.admin-btn:hover {
    opacity: 0.8;
}

.admin-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-posts h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 1rem;
}

.admin-post-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}

.admin-post-date {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.4;
    margin-right: 0.75rem;
}

.admin-post-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color-dark);
}

.admin-delete {
    font-family: inherit;
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.3;
    background: none;
    border: none;
    cursor: pointer;
}

.admin-delete:hover {
    opacity: 1;
    color: #ef4444;
}

.admin-empty {
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.4;
}

.admin-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.admin-password {
    font-family: inherit;
    font-size: 16px;
    color: var(--text-color);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    padding: 0.5rem 0;
    outline: none;
    text-align: center;
    width: 200px;
}

.admin-password::placeholder {
    color: var(--text-color);
    opacity: 0.3;
}

/* Post images */
.post-image {
    width: 100%;
    border-radius: 0;
    margin: 1.5rem 0;
    display: block;
}

.post-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 1.75rem;
}

.post-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Likes */
.post-actions {
    margin: 2.5rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.5;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem 0;
}

.like-btn:hover {
    opacity: 0.8;
}

.like-btn.liked {
    opacity: 1;
    color: #ef4444;
}

/* Comments */
.comments-section {
    border-top: 1px solid rgba(128, 128, 128, 0.15);
    padding-top: 2rem;
}

.comments-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 1.5rem;
}

.comments-list {
    margin-bottom: 2rem;
}

.comments-empty {
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.4;
}

.comment-item {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.comment-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.comment-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-dark);
}

.comment-date {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.4;
}

.comment-text {
    font-size: 15px;
    color: var(--text-color);
    line-height: 1.6;
    opacity: 0.8;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment-input {
    font-family: inherit;
    font-size: 14px;
    color: var(--text-color);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    padding: 0.5rem 0;
    outline: none;
    max-width: 250px;
}

.comment-input:focus {
    border-color: var(--text-color);
}

.comment-textarea {
    font-family: inherit;
    font-size: 14px;
    color: var(--text-color);
    background: none;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0;
    padding: 0.75rem;
    outline: none;
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

.comment-textarea:focus {
    border-color: var(--text-color);
}

/* Admin toolbar */
.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-toolbar-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.5;
    background: none;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
}

.admin-toolbar-btn:hover {
    opacity: 1;
}

.admin-upload-status {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.5;
}

/* Daily log page: gate */
.daily-gate-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.daily-gate-error {
    font-size: 13px;
    color: #ef4444;
    min-height: 1rem;
}

/* NeetCode widget */
.nc-widget {
    margin-bottom: 2.5rem;
}

.nc-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.nc-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nc-count {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.5;
}

.nc-bar-track {
    width: 100%;
    height: 2px;
    background-color: rgba(128, 128, 128, 0.15);
    border-radius: 0;
    overflow: hidden;
}

.nc-bar-fill {
    height: 100%;
    background-color: var(--text-color);
    border-radius: 0;
}

/* Calendar */
.cal-wrap {
    margin-top: 0.5rem;
}

.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}


.cal-month-label {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color-dark);
}

.cal-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.35;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    font-family: inherit;
}

.cal-nav-btn:hover {
    opacity: 1;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 2px;
}

.cal-dow {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    padding-bottom: 0.75rem;
}

.cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0;
}

.cal-cell.has-log {
    cursor: pointer;
}

.cal-num {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.25;
}

.cal-cell.has-log .cal-num {
    opacity: 0.85;
}

.cal-cell.has-log:hover .cal-num {
    background-color: rgba(128, 128, 128, 0.1);
    opacity: 1;
}

.cal-cell.is-today .cal-num {
    box-shadow: none;
    opacity: 0.85;
}

.cal-cell.is-sel .cal-num {
    background-color: var(--text-color);
    color: var(--bg-color);
    opacity: 1;
}

.cal-cell.is-sel:hover .cal-num {
    background-color: var(--text-color);
}

.cal-dot {
    width: 4px;
    height: 4px;
    border-radius: 0;
    background-color: var(--text-color);
    opacity: 0.35;
}

.cal-cell.is-sel .cal-dot {
    opacity: 0;
}

/* past-30-day cells with no activity still get a visible number */
.cal-cell.has-perf .cal-num { opacity: 0.55; }

/* ── performance dots (red / green / purple) ─────────────────────── */
.cal-perf-dot {
    width: 7px;
    height: 7px;
    border-radius: 0;
    flex-shrink: 0;
}

.cal-cell.perf-bad  .cal-perf-dot { background: #ef4444; }
.cal-cell.perf-met  .cal-perf-dot { background: #22c55e; }
.cal-cell.perf-over .cal-perf-dot { background: #a855f7; }

/* also bump up the date number opacity so bad days still read */
.cal-cell.perf-bad  .cal-num,
.cal-cell.perf-met  .cal-num,
.cal-cell.perf-over .cal-num { opacity: 0.85; }

.cal-cell.is-sel .cal-perf-dot { opacity: 0; }

/* ── GCA prep calendar indicators ───────────────────────────── */
.cal-gca-badge {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-color);
    opacity: 0.35;
    line-height: 1;
}

.cal-cell.gca-expiry .cal-gca-badge {
    opacity: 0.6;
}

.cal-cell.has-gca .cal-num {
    opacity: 0.85;
}

.cal-cell.has-gca:hover .cal-gca-badge {
    opacity: 0.6;
}

/* ── GCA prep day panel ──────────────────────────────────────── */
.cal-gca-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(128,128,128,0.1);
}

.cal-gca-problem {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(128,128,128,0.07);
}

.cal-gca-problem:last-of-type {
    border-bottom: none;
}

.cal-gca-idx {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.25;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    width: 22px;
}

.cal-gca-title {
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.75;
    text-decoration: none;
    flex: 1;
}

.cal-gca-title:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }

.cal-gca-lc {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.25;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.cal-gca-expiry-note {
    margin-top: 0.75rem;
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.6;
}

.cal-gca-expiry-note a {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Expanded log panel */
.cal-panel {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
    animation: fadeSlideIn 0.2s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cal-panel-date {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cal-summary-btn {
    background: none;
    border: 1px solid rgba(128,128,128,0.2);
    color: var(--text-color);
    opacity: 0.45;
    font-size: 11px;
    font-family: inherit;
    padding: 0.22rem 0.55rem;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 4px;
}
.cal-summary-btn:hover {
    opacity: 0.85;
    border-color: rgba(128,128,128,0.45);
}

.cal-panel-day {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color-dark);
    line-height: 1.3;
}

.cal-panel-full {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cal-panel-sections {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cal-panel-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Shared label/text used in both panel and admin log list */
.daily-entry-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.35;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.daily-entry-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 0;
    flex-shrink: 0;
}

.daily-entry-text {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.7;
    opacity: 0.85;
}

/* Daily quote */
.daily-quote {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.12);
}

.daily-quote-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    color: var(--text-color-dark);
    line-height: 1.7;
    margin-bottom: 0.4rem;
}

.daily-quote-source {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Daily log two-column layout */
.daily-cols {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    align-items: start;
}

/* Goals section (standalone, below calendar) */
.goals-section {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
}

/* Goals column (inside two-col grid, no top border) */
.goals-col {
    min-width: 0;
}

.goals-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color-dark);
    margin-bottom: 0.4rem;
}

.goals-subtitle {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.4;
    margin-bottom: 2.5rem;
}

.goals-track {
    margin-bottom: 2rem;
}

.goals-track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.goals-progress {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.3;
}

.goals-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.goal-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.goal-box {
    width: 15px;
    height: 15px;
    border: 1.5px solid rgba(128, 128, 128, 0.25);
    border-radius: 0;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goal-item.checked .goal-box {
    background-color: var(--text-color);
    border-color: var(--text-color);
    color: var(--bg-color);
}

.goal-text {
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.75;
    line-height: 1.5;
}

.goal-item.checked .goal-text {
    opacity: 0.3;
    text-decoration: line-through;
    text-decoration-color: rgba(128, 128, 128, 0.35);
}

/* Workout split */
.split-section {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.split-label {
    margin-bottom: 1.5rem;
}

.split-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.split-day {
    padding-right: 2rem;
    border-right: 1px solid rgba(128, 128, 128, 0.1);
    padding-left: 2rem;
}

.split-day:first-child {
    padding-left: 0;
}

.split-day:last-child {
    border-right: none;
}

.split-day-meta {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}

.split-day-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-dark);
    margin-bottom: 1rem;
}

.split-muscles {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.split-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.65;
}

.split-sets {
    font-size: 12px;
    opacity: 0.55;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* NeetCode day submissions */
.nc-day-label {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.nc-loading {
    opacity: 0.4;
    font-style: italic;
}

.nc-problem {
    margin-bottom: 1.5rem;
}

.nc-problem-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-dark);
    margin-bottom: 0.5rem;
}

.nc-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.65;
    color: var(--text-color);
    background-color: rgba(128, 128, 128, 0.05);
    border: 1px solid rgba(128, 128, 128, 0.12);
    border-radius: 0;
    padding: 1rem;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 320px;
    white-space: pre;
    margin: 0;
}

[data-theme="dark"] .nc-code {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Rust commit panel (calendar day view) */
.rust-day-block {
    margin-top: 1.25rem;
}

.rust-commits {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rust-commit {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}

.rust-commit-repo {
    font-size: 11px;
    font-weight: 600;
    color: #a855f7;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    flex-shrink: 0;
    opacity: 0.85;
}

[data-theme="dark"] .rust-commit-repo {
    color: #c084fc;
}

.rust-commit-msg {
    font-size: 13px;
    color: var(--text-color-dark);
    line-height: 1.45;
    font-family: 'Courier New', Courier, monospace;
}

/* Admin tabs */
.admin-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.admin-tab {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.4;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0;
    margin-right: 1.5rem;
    margin-bottom: -1px;
    cursor: pointer;
}

.admin-tab:hover {
    opacity: 0.7;
}

.admin-tab-active {
    opacity: 1;
    border-bottom-color: var(--text-color);
}

/* Daily log form */
.daily-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.daily-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.daily-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 0;
    flex-shrink: 0;
}

.daily-textarea {
    min-height: 80px;
}

/* Daily log list */
.daily-log-item {
    border-top: 1px solid rgba(128, 128, 128, 0.1);
    padding: 1.25rem 0;
}

.daily-log-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.daily-log-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-dark);
}

.daily-log-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.daily-log-section {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.daily-log-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.daily-log-logo {
    width: 13px;
    height: 13px;
    object-fit: contain;
    border-radius: 0;
    flex-shrink: 0;
}

.daily-log-text {
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.6;
}

/* Gym hours widget */
.gym-hours-widget {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.gym-hours-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.gym-hours-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.35;
    font-size: 14px;
    padding: 2px 4px;
    line-height: 1;
    transform: rotate(-90deg);
}

.gym-hours-widget.gym-open .gym-hours-toggle {
    transform: rotate(0deg);
    opacity: 0.55;
}

.gym-hours-body {
    display: none;
    margin-top: 1rem;
    flex-direction: column;
    gap: 0.45rem;
}

.gym-hours-widget.gym-open .gym-hours-body {
    display: flex;
}

.gym-hours-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
}

.gym-hours-days {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color-dark);
    min-width: 70px;
}

.gym-hours-time {
    font-size: 13px;
    color: var(--text-color);
}

.gym-hours-note {
    font-size: 11.5px;
    opacity: 0.5;
}

.gym-hours-closures {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gym-hours-closure {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
}

.gym-hours-closure-date {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color-dark);
    opacity: 0.65;
    min-width: 160px;
}

.gym-hours-closure-reason {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.45;
}

/* Daily schedule widget */
.sch-widget {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.sch-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.sch-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sch-day-label {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.35;
}

.sch-summary-btn {
    background: none;
    border: 1px solid rgba(128,128,128,0.2);
    color: var(--text-color);
    opacity: 0.5;
    font-size: 11px;
    font-family: inherit;
    padding: 0.22rem 0.6rem;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}
.sch-summary-btn:hover {
    opacity: 0.9;
    border-color: rgba(128,128,128,0.45);
}

.sch-weekend {
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.35;
    font-style: italic;
}

/* timeline container: the vertical line lives here */
.sch-list {
    position: relative;
    display: flex;
    flex-direction: column;
}

.sch-list::before {
    content: '';
    position: absolute;
    left: calc(52px + 10px + 3.5px); /* time-col + gap + half-dot */
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(128, 128, 128, 0.12);
    pointer-events: none;
}

.sch-item {
    display: grid;
    grid-template-columns: 52px 7px 1fr;
    column-gap: 10px;
    align-items: flex-start;
    padding-bottom: 1.1rem;
}

.sch-item:last-child {
    padding-bottom: 0;
}

.sch-time {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.35;
    text-align: right;
    padding-top: 2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sch-dot {
    width: 7px;
    height: 7px;
    border-radius: 0;
    border: 1.5px solid rgba(128, 128, 128, 0.3);
    background: var(--bg-color);
    margin-top: 3px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.sch-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sch-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color-dark);
    line-height: 1.4;
}

.sch-detail {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.45;
    line-height: 1.45;
}

/* past items fade out */
.sch-item.past .sch-time  { opacity: 0.18; }
.sch-item.past .sch-dot   { opacity: 0.18; }
.sch-item.past .sch-label { opacity: 0.2;  }
.sch-item.past .sch-detail { opacity: 0.15; }

/* current item: filled dot, bolder label */
.sch-item.current .sch-dot {
    background: var(--text-color);
    border-color: var(--text-color);
}

.sch-item.current .sch-label {
    font-weight: 500;
}

.sch-item.current .sch-time {
    opacity: 0.55;
}

/* leetcode / rust check badges */
.sch-checks {
    display: flex;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.sch-check {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.28;
}

.sch-check.done {
    opacity: 0.75;
    color: var(--text-color-dark);
}

.sch-check-icon {
    width: 13px;
    height: 13px;
    border-radius: 0;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sch-check.done .sch-check-icon {
    background: var(--text-color-dark);
    border-color: var(--text-color-dark);
    color: var(--bg-color);
}

/* cartoonish alert when leetcode / rust is overdue */
.sch-alert {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.55rem;
    padding: 0.45rem 0.7rem;
    background: #fef9c3;
    border: 2.5px solid #eab308;
    border-radius: 0;
    box-shadow: none;
    transform: rotate(-1.5deg);
    animation: sch-alert-shake 5s ease-in-out infinite;
    max-width: 260px;
    cursor: default;
    user-select: none;
}

[data-theme="dark"] .sch-alert {
    background: #422006;
    border-color: #d97706;
    box-shadow: none;
}

.sch-alert-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.sch-alert-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sch-alert-miss {
    font-size: 12px;
    font-weight: 700;
    color: #713f12;
    letter-spacing: 0.01em;
}

[data-theme="dark"] .sch-alert-miss {
    color: #fde68a;
}

.sch-alert-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: #92400e;
    opacity: 0.8;
    font-style: italic;
}

[data-theme="dark"] .sch-alert-sub {
    color: #fcd34d;
    opacity: 0.7;
}

@keyframes sch-alert-shake {
    0%, 65%, 100% { transform: rotate(-1.5deg); }
    67%  { transform: rotate(2.5deg)  translateX(3px);  }
    69%  { transform: rotate(-3deg)   translateX(-3px); }
    71%  { transform: rotate(2deg)    translateX(2px);  }
    73%  { transform: rotate(-2.5deg) translateX(-1px); }
    75%  { transform: rotate(-1.5deg) translateX(0);    }
}

/* ── GCA problem list in schedule ─────────────────────────────────── */
.sch-gca-problems {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.4rem;
}

.sch-gca-link {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.5;
    text-decoration: none;
}

.sch-gca-link:hover { opacity: 0.9; text-decoration: underline; text-underline-offset: 2px; }

/* ── hype / above-and-beyond cartoon ──────────────────────────────── */
.sch-hype {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.55rem;
    padding: 0.45rem 0.7rem;
    background: #f0fdf4;
    border: 2.5px solid #22c55e;
    border-radius: 0;
    box-shadow: none;
    transform: rotate(1.2deg);
    animation: sch-hype-bounce 4s ease-in-out infinite;
    max-width: 260px;
    cursor: default;
    user-select: none;
}

.sch-hype.both-over {
    background: #faf5ff;
    border-color: #a855f7;
    box-shadow: none;
}

[data-theme="dark"] .sch-hype {
    background: #052e16;
    border-color: #16a34a;
    box-shadow: none;
}

[data-theme="dark"] .sch-hype.both-over {
    background: #2e1065;
    border-color: #9333ea;
    box-shadow: none;
}

.sch-hype-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.sch-hype-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sch-hype-title {
    font-size: 12px;
    font-weight: 700;
    color: #14532d;
    letter-spacing: 0.01em;
}

.sch-hype.both-over .sch-hype-title { color: #581c87; }
[data-theme="dark"] .sch-hype-title  { color: #86efac; }
[data-theme="dark"] .sch-hype.both-over .sch-hype-title { color: #d8b4fe; }

.sch-hype-what {
    font-size: 10.5px;
    font-weight: 600;
    color: #15803d;
    opacity: 0.85;
}

.sch-hype.both-over .sch-hype-what { color: #7e22ce; }
[data-theme="dark"] .sch-hype-what  { color: #4ade80; }
[data-theme="dark"] .sch-hype.both-over .sch-hype-what { color: #c084fc; }

.sch-hype-sub {
    font-size: 10.5px;
    font-style: italic;
    color: #166534;
    opacity: 0.7;
}

.sch-hype.both-over .sch-hype-sub { color: #6b21a8; }
[data-theme="dark"] .sch-hype-sub  { color: #86efac; }
[data-theme="dark"] .sch-hype.both-over .sch-hype-sub { color: #d8b4fe; }

@keyframes sch-hype-bounce {
    0%, 60%, 100% { transform: rotate(1.2deg); }
    62% { transform: rotate(-1deg)  translateY(-3px); }
    64% { transform: rotate(2deg)   translateY(-5px); }
    66% { transform: rotate(-0.5deg) translateY(-2px); }
    68% { transform: rotate(1.2deg) translateY(0); }
}

/* Notes widget */
.notes-widget {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.notes-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.notes-new-btn {
    font-family: inherit;
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.4;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.notes-new-btn:hover { opacity: 1; }

.notes-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.note-card {
    border: 1px solid rgba(128, 128, 128, 0.15);
    border-radius: 0;
    padding: 0.875rem 1rem;
    cursor: pointer;
}

.note-card:hover {
    border-color: rgba(128, 128, 128, 0.4);
    background-color: rgba(128, 128, 128, 0.03);
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.note-card-tag {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.35;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.note-card-date {
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.3;
}

.note-card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-dark);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-card-preview {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.5;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-empty {
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.35;
    font-style: italic;
}

.notes-see-all {
    font-family: inherit;
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.4;
    background: none;
    border: 1px dashed rgba(128, 128, 128, 0.25);
    border-radius: 0;
    padding: 0.875rem 1rem;
    cursor: pointer;
    text-align: left;
}

.notes-see-all:hover { opacity: 0.8; }

/* Notes overlay & modal */
.notes-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

[data-theme="dark"] .notes-overlay {
    background: rgba(0, 0, 0, 0.72);
}

.notes-modal {
    background: var(--bg-color);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0;
    width: 100%;
    max-width: 1000px;
    height: 80vh;
    max-height: 720px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.notes-sidebar {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid rgba(128, 128, 128, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notes-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    flex-shrink: 0;
}

.notes-sidebar-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color-dark);
}

.notes-sidebar-new {
    font-family: inherit;
    font-size: 20px;
    color: var(--text-color);
    opacity: 0.35;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.notes-sidebar-new:hover { opacity: 1; }

.notes-tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    flex-shrink: 0;
}

.notes-filter-chip {
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.4;
    background: none;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0;
    padding: 0.2rem 0.45rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.notes-filter-chip:hover { opacity: 0.75; }

.notes-filter-chip.active {
    opacity: 1;
    border-color: var(--text-color);
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem 0;
}

.notes-list-empty {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.35;
    padding: 1rem 1.25rem;
    font-style: italic;
}

.notes-list-item {
    padding: 0.7rem 1.25rem;
    cursor: pointer;
    border-left: 2px solid transparent;
}

.notes-list-item:hover {
    background-color: rgba(128, 128, 128, 0.05);
}

.notes-list-item.active {
    background-color: rgba(128, 128, 128, 0.07);
    border-left-color: var(--text-color);
}

.notes-list-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.notes-list-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.notes-list-item-tag {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.notes-list-item-date {
    font-size: 10px;
    color: var(--text-color);
    opacity: 0.3;
    white-space: nowrap;
}

/* Notes editor panel */
.notes-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.notes-editor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    gap: 1rem;
    flex-shrink: 0;
}

.notes-title-input {
    flex: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color-dark);
    background: none;
    border: none;
    outline: none;
    min-width: 0;
}

.notes-title-input::placeholder {
    color: var(--text-color);
    opacity: 0.25;
}

.notes-editor-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.notes-save-status {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.4;
}

.notes-delete-btn {
    font-family: inherit;
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.35;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.notes-delete-btn:hover {
    opacity: 1;
    color: #ef4444;
}

.notes-tag-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.07);
}

.notes-tag-chip {
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.35;
    background: none;
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0;
    padding: 0.2rem 0.45rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.notes-tag-chip:hover { opacity: 0.75; }

.notes-tag-chip.active {
    opacity: 1;
    border-color: var(--text-color);
}

.notes-body-input {
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-color);
    background: none;
    border: none;
    outline: none;
    resize: none;
    padding: 1rem 1.5rem 1.5rem;
    line-height: 1.75;
}

.notes-body-input::placeholder {
    color: var(--text-color);
    opacity: 0.25;
}

.notes-close {
    position: absolute;
    top: 0.75rem;
    right: 0.875rem;
    font-family: inherit;
    font-size: 18px;
    color: var(--text-color);
    opacity: 0.3;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.notes-close:hover { opacity: 0.8; }

/* Responsive design */
@media (max-width: 768px) {
    .daily-cols {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .notes-card-grid {
        grid-template-columns: 1fr;
    }

    .notes-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .notes-modal {
        flex-direction: column;
        height: 92vh;
        max-height: none;
        border-radius: 0;
        border-bottom: none;
    }

    .notes-sidebar {
        width: 100%;
        height: auto;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid rgba(128, 128, 128, 0.15);
    }

    .split-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .split-day {
        padding-left: 0;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid rgba(128, 128, 128, 0.1);
        padding-bottom: 1.5rem;
    }

    .split-day:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    nav {
        padding: 1.5rem 1.5rem;
        gap: 1rem;
    }

    .nav-links {
        gap: 1rem;
    }

    .container {
        padding: 0 1.5rem 4rem;
    }

    .intro h1 {
        font-size: 1.75rem;
    }

    .two-col {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .experience-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .company-logo {
        width: 18px;
        height: 18px;
    }

    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }

    .photography-container {
        max-width: 100%;
        padding: 0 1.5rem 4rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   SUMMARY CARD MODAL  ::  neobrutalist b&w
═══════════════════════════════════════════════════════════════════ */

.summary-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 1.5rem;
}

.summary-modal-wrap {
    width: 94vw;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.summary-modal-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-hint {
    font-size: 10.5px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.03em;
}

.summary-close {
    background: #fff;
    border: 2px solid #fff;
    box-shadow: none;
    color: #000;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    padding: 0.2rem 0.65rem;
    line-height: 1.4;
    border-radius: 0;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.summary-close:hover {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* the card */
.summary-card {
    width: 100%;
    background: #fff;
    border: 3px solid #000;
    border-radius: 0;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: none;
}
[data-theme="dark"] .summary-card {
    background: #111;
    border-color: #fff;
    box-shadow: none;
}

.sc-spinner {
    padding: 3rem;
    text-align: center;
    font-size: 12px;
    color: #000;
    opacity: 0.3;
    letter-spacing: 0.04em;
}
[data-theme="dark"] .sc-spinner { color: #fff; }

/* thick top accent stripe */
.sc-bar {
    height: 6px;
    background: #000;
}
[data-theme="dark"] .sc-bar { background: #fff; }

.sc-inner {
    padding: 1.2rem 1.3rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* header */
.sc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sc-header-left { display: flex; flex-direction: column; gap: 0.1rem; }

.sc-brand {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #000;
    opacity: 0.28;
}
[data-theme="dark"] .sc-brand { color: #fff; }

.sc-dow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #000;
    opacity: 0.38;
    text-transform: uppercase;
}
[data-theme="dark"] .sc-dow { color: #fff; }

.sc-date {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
[data-theme="dark"] .sc-date { color: #fff; }

.sc-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.sc-season {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #000;
    opacity: 0.18;
    text-transform: uppercase;
}
[data-theme="dark"] .sc-season { color: #fff; }

/* perf badge: b&w sticker */
.sc-perf {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.7rem;
    border-radius: 0;
    border: 2px solid #000;
    box-shadow: none;
    background: #000;
    color: #fff;
    white-space: nowrap;
}
[data-theme="dark"] .sc-perf {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: none;
}

/* tile grid */
.sc-tiles {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.sc-tile {
    flex: 1 1 148px;
    border-radius: 0;
    overflow: hidden;
    border: 2.5px solid #000;
    box-shadow: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}
[data-theme="dark"] .sc-tile {
    background: #1a1a1a;
    border-color: #fff;
    box-shadow: none;
}

.sc-tile-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.65rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #000;
    color: #fff;
    border-bottom: 2.5px solid #000;
    flex-shrink: 0;
}
[data-theme="dark"] .sc-tile-head {
    background: #fff;
    color: #000;
    border-bottom-color: #fff;
}

.sc-tile-count {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    opacity: 0.55;
    letter-spacing: 0.04em;
}

.sc-tile-body {
    padding: 0.6rem 0.65rem;
    font-size: 11.5px;
    color: #000;
    line-height: 1.5;
    flex: 1;
}
[data-theme="dark"] .sc-tile-body { color: #e5e5e5; }

/* leetcode chips */
.sc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sc-chip {
    font-size: 10.5px;
    font-weight: 700;
    padding: 0.2rem 0.52rem;
    border-radius: 0;
    background: #f4f4f5;
    border: 2px solid #000;
    box-shadow: none;
    color: #000;
    white-space: nowrap;
}
[data-theme="dark"] .sc-chip {
    background: #27272a;
    border-color: #fff;
    box-shadow: none;
    color: #fff;
}

/* rust rows */
.sc-rust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.45rem;
    align-items: baseline;
    margin-bottom: 0.35rem;
}
.sc-rust-row:last-child { margin-bottom: 0; }

.sc-rust-repo {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    color: #000;
    opacity: 0.4;
}
[data-theme="dark"] .sc-rust-repo { color: #fff; }

.sc-rust-msg {
    font-size: 11px;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.4;
    color: #000;
}
[data-theme="dark"] .sc-rust-msg { color: #e5e5e5; }

/* work rows */
.sc-work-row { margin-bottom: 0.4rem; }
.sc-work-row:last-child { margin-bottom: 0; }

.sc-work-co {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
    color: #000;
    opacity: 0.4;
}
[data-theme="dark"] .sc-work-co { color: #fff; }

.sc-work-text {
    font-size: 11px;
    line-height: 1.45;
    margin: 0;
    color: #000;
}
[data-theme="dark"] .sc-work-text { color: #e5e5e5; }

/* loading */
.sc-muted {
    font-size: 11px;
    color: #000;
    opacity: 0.3;
    font-style: italic;
}
[data-theme="dark"] .sc-muted { color: #fff; }

/* notes row */
.sc-notes-row {
    border: 2.5px solid #000;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    background: #fff;
}
[data-theme="dark"] .sc-notes-row {
    background: #1a1a1a;
    border-color: #fff;
    box-shadow: none;
}

.sc-notes-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.65rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: #000;
    border-bottom: 2.5px solid #000;
}
[data-theme="dark"] .sc-notes-head {
    background: #fff;
    color: #000;
    border-bottom-color: #fff;
}

.sc-notes {
    min-height: 40px;
    max-height: 70px;
    font-size: 12px;
    color: #000;
    line-height: 1.6;
    outline: none;
    padding: 0.5rem 0.65rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
}
[data-theme="dark"] .sc-notes { color: #e5e5e5; }

.sc-notes:empty::before {
    content: attr(data-placeholder);
    opacity: 0.28;
    pointer-events: none;
    display: block;
}

.sc-footer-text {
    font-size: 9px;
    color: #000;
    opacity: 0.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}
[data-theme="dark"] .sc-footer-text { color: #fff; }

/* ── Notion Prep daily widget (daily.html) ─────────────────────────── */
.prep-daily-widget {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.prep-daily-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.prep-daily-open {
    font-size: 13px;
    color: var(--text-color);
    opacity: 0.4;
    text-decoration: none;
}

.prep-daily-open:hover { opacity: 1; }

.prep-daily-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    user-select: none;
}

.prep-daily-box {
    width: 15px;
    height: 15px;
    border: 1.5px solid rgba(128, 128, 128, 0.25);
    border-radius: 0;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prep-daily-check.done .prep-daily-box {
    background-color: var(--text-color);
    border-color: var(--text-color);
}

.prep-daily-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.prep-daily-task {
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.75;
    line-height: 1.4;
}

.prep-daily-check.done .prep-daily-task {
    opacity: 0.3;
    text-decoration: line-through;
    text-decoration-color: rgba(128, 128, 128, 0.35);
}

.prep-daily-sub {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.4;
    line-height: 1.4;
}

.prep-daily-sub a {
    color: var(--text-color);
    text-decoration: none;
}

.prep-daily-sub a:hover { opacity: 0.65; }

/* Admin portal */
.portal-hint {
    font-size: 13px;
    opacity: 0.55;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.portal-error {
    font-size: 13px;
    color: #d33;
}

[data-theme="dark"] .portal-error {
    color: #f77;
}

.portal-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.portal-link {
    text-align: center;
    text-decoration: none;
    display: block;
}

.portal-logout {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

/* Recruiter CTA (index): plain sentence, no box */
.recruiter-cta {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 3rem;
}

.recruiter-cta-link {
    font-size: 15px;
}

/* Recruiter page */
.recruiter-container {
    max-width: 640px;
}

.recruiter-intro {
    margin-bottom: 2.5rem;
}

.recruiter-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color-dark);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.recruiter-subtitle {
    font-size: 14px;
    opacity: 0.65;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.status-line {
    font-size: 13.5px;
    opacity: 0.85;
    line-height: 1.6;
}

.status-line .status-dot {
    display: inline-block;
    margin-right: 0.4rem;
    transform: translateY(-1px);
    background-color: var(--text-color-dark);
}

.recruiter-section {
    margin-bottom: 2.25rem;
}

.recruiter-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 0.6rem;
}

.recruiter-lede {
    font-size: 13.5px;
    opacity: 0.65;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* Colored inline highlights, in the spirit of a plain-text bio page */
.hl {
    font-weight: 600;
}

a.hl {
    text-decoration: underline;
    text-underline-offset: 2px;
}

a.hl:hover {
    opacity: 0.65;
}

.hl-blue    { color: var(--text-color-dark); }
.hl-green   { color: var(--text-color-dark); }
.hl-orange  { color: var(--text-color-dark); }
.hl-pink    { color: var(--text-color-dark); }
.hl-purple  { color: var(--text-color-dark); }
.hl-teal    { color: var(--text-color-dark); }
.hl-red     { color: var(--text-color-dark); }
.hl-amber   { color: var(--text-color-dark); }
.hl-cyan    { color: var(--text-color-dark); }
.hl-indigo  { color: var(--text-color-dark); }

[data-theme="dark"] .hl-green  { color: var(--text-color-dark); }
[data-theme="dark"] .hl-teal   { color: var(--text-color-dark); }
[data-theme="dark"] .hl-red    { color: var(--text-color-dark); }
[data-theme="dark"] .hl-amber  { color: var(--text-color-dark); }
[data-theme="dark"] .hl-cyan   { color: var(--text-color-dark); }
[data-theme="dark"] .hl-indigo { color: var(--text-color-dark); }

/* Target roles: plain prose, not cards */
.target-list p {
    font-size: 13.5px;
    line-height: 1.65;
    opacity: 0.85;
    margin-bottom: 0.75rem;
}

.target-list strong {
    font-weight: 700;
    opacity: 1;
}

/* Quotes: plain left-border blocks, no boxes */
.quote-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.quote-item {
    border-left: 3px solid;
    padding-left: 0.9rem;
}

.quote-purple { border-left-color: var(--text-color); }
.quote-teal   { border-left-color: var(--text-color); }
.quote-blue   { border-left-color: var(--text-color); }
.quote-pink   { border-left-color: var(--text-color); }

.quote-item p {
    font-size: 13px;
    line-height: 1.55;
    font-style: italic;
    opacity: 0.85;
    margin-bottom: 0.3rem;
}

.quote-item cite {
    font-size: 12px;
    font-style: normal;
    opacity: 0.55;
}

/* Experience accordion: flat rows, no boxes */
.exp-list {
    display: flex;
    flex-direction: column;
}

.exp-item {
    border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

.exp-item:last-child {
    border-bottom: none;
}

.exp-item summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem 0;
    cursor: pointer;
    list-style: none;
}

.exp-item summary::-webkit-details-marker {
    display: none;
}

.exp-item summary::after {
    content: '+';
    font-size: 16px;
    opacity: 0.4;
    margin-left: auto;
}

.exp-item[open] summary::after {
    content: '\2212';
}

.exp-title {
    font-size: 14px;
}

.exp-meta {
    font-size: 12px;
    opacity: 0.5;
}

.exp-item p {
    font-size: 12.5px;
    line-height: 1.55;
    opacity: 0.7;
    padding-bottom: 0.85rem;
}

/* Skills */
.skills-compact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.skills-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.skills-label {
    font-size: 11.5px;
    font-weight: 600;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 85px;
    flex-shrink: 0;
    padding-top: 0.2rem;
}

.skills-footnote {
    font-size: 12px;
    opacity: 0.5;
    margin-top: 0.9rem;
}

.recruiter-links a {
    gap: 0.4rem;
    font-size: 13.5px;
}

/* FAQ accordion: flat rows, no boxes */
.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item summary {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-color-dark);
    padding: 0.75rem 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 16px;
    opacity: 0.4;
}

.faq-item[open] summary::after {
    content: '\2212';
}

.faq-item p {
    font-size: 12.5px;
    opacity: 0.65;
    line-height: 1.55;
    padding-bottom: 0.85rem;
}

@media (max-width: 640px) {
    .skills-label {
        width: auto;
    }
}

/* GitHub star count badge (unused here). Ships hidden and is only revealed
   once the count arrives, so a failed or rate-limited fetch leaves the links
   row looking exactly as it would without it. */
.gh-stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.3));
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-color);
    opacity: 0.65;
    text-decoration: none;
    vertical-align: 1px;
}

.gh-stars:hover {
    opacity: 1;
}

.gh-stars[hidden] {
    display: none;
}

/* ---------- Photo story viewer ---------- */

/* The grid tiles are buttons now, so they need to say so on hover. */
.photo-grid img.photo-open {
    cursor: zoom-in;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.3s ease,
                box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.photo-grid img.photo-open:hover {
    opacity: 1;
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.photo-grid img.photo-open:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Videos are ambient, not openable, so they keep the default cursor. */
.photo-grid video {
    cursor: default;
}

body.lightbox-open {
    overflow: hidden;
}

.lightbox[hidden] {
    display: none;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vmin, 40px);
    /* The depth the open animation travels through. */
    perspective: 1500px;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 12, 0.78);
    opacity: 0;
    transition: opacity 0.45s ease;
}

@supports (backdrop-filter: blur(1px)) {
    .lightbox-backdrop {
        background: rgba(10, 10, 12, 0.62);
        backdrop-filter: blur(20px) saturate(115%);
    }
}

.lightbox.is-open .lightbox-backdrop {
    opacity: 1;
}

.lightbox-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    max-width: min(1080px, 100%);
    max-height: 86vh;
    background: var(--bg-color, #fff);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.lightbox-frame {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    background: #0a0a0c;
}

.lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lightbox-story {
    flex: 0 0 300px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    background: var(--bg-color, #fff);
    color: var(--text-color, #000);
    overflow-y: auto;
    will-change: transform, opacity;
}

.lightbox-story[hidden] {
    display: none;
}

/* With no story to sit beside it, the picture should not be padded out to
   panel width. */
.lightbox-card.is-bare .lightbox-frame {
    flex: 1 1 auto;
}

.lightbox-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Opt out of the global "+" gutter marker, as article bodies do. */
.lightbox-title::before {
    content: none;
}

.lightbox-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    opacity: 0.82;
}

.lightbox-count {
    margin-top: auto;
    padding-top: 1.25rem;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.4;
}

.lightbox-btn {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lightbox-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.lightbox-close {
    top: clamp(10px, 2.5vmin, 26px);
    right: clamp(10px, 2.5vmin, 26px);
}

.lightbox-prev {
    left: clamp(10px, 2.5vmin, 26px);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: clamp(10px, 2.5vmin, 26px);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-prev:hover {
    transform: translateY(-50%) translateX(-2px);
}

.lightbox-next:hover {
    transform: translateY(-50%) translateX(2px);
}

/* Stack the story under the picture once there is no room beside it. */
@media (max-width: 820px) {
    .lightbox-card {
        flex-direction: column;
        max-height: 90vh;
    }

    .lightbox-img {
        max-height: 56vh;
        margin: 0 auto;
    }

    .lightbox-story {
        flex: 1 1 auto;
        padding: 1.25rem 1.25rem 1.5rem;
        justify-content: flex-start;
    }

    .lightbox-count {
        margin-top: 1rem;
        padding-top: 0;
    }

    .lightbox-prev,
    .lightbox-next {
        top: auto;
        bottom: clamp(10px, 2.5vmin, 26px);
        transform: none;
    }

    .lightbox-prev:hover,
    .lightbox-next:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-grid img.photo-open,
    .lightbox-backdrop,
    .lightbox-btn {
        transition: none;
    }

    .photo-grid img.photo-open:hover {
        transform: none;
    }
}


/* ================= Ink layer =================

   The quiet pass over everything the older rules above set up: Inter, a narrow
   measure, lowercase section labels prefixed with a slash, hairline rules
   instead of boxes, and colour used only on names and labels. */

@font-face {
    font-family: 'Inter';
    src: url('vendor/inter.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: var(--ink-font);
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink-fg);
    background: var(--ink-bg);
    -webkit-font-smoothing: antialiased;
}

.container,
.home-container {
    max-width: calc(var(--ink-measure) + 6rem);
    padding: 5rem 3rem 7rem;
}

/* The gallery is the exception: a 672px measure is right for prose and wrong
   for a wall of photographs, so it keeps its own width. */
.photography-container {
    max-width: 1400px;
    padding: 5rem 2rem 7rem;
}

/* One column, like the rest of the page. Two 320px columns inside the measure
   left the experience entries wrapping every four words. */
.work-grid {
    grid-template-columns: 1fr;
    gap: 0;
}

.home-container .prose,
.home-container .prose > p {
    max-width: var(--ink-measure);
}

p,
li {
    color: var(--ink-muted);
}

/* The whole bio is this one paragraph, so it sits directly under the name and
   gets the full measure. */
.intro {
    max-width: var(--ink-measure);
    margin-bottom: 1.6rem;
}

/* The original stylesheet colours links per theme with selectors more specific
   than a bare `a`, so every one of these needs the theme in front of it or the
   whole site keeps its periwinkle links. */
a,
[data-theme="dark"] a,
[data-theme="light"] a,
a:visited,
[data-theme="dark"] a:visited,
[data-theme="light"] a:visited {
    color: var(--ink-fg);
    text-decoration: underline;
    text-decoration-color: var(--ink-rule);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

a:hover,
[data-theme="dark"] a:hover,
[data-theme="light"] a:hover {
    color: var(--ink-blood);
    text-decoration-color: var(--ink-blood);
}

/* ---- headings: lowercase, slash-prefixed, gold ---- */

h1:not(.nostyle),
h2 {
    font-family: var(--ink-font);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: var(--ink-gold);
    margin: 3.5rem 0 1.1rem;
}

h1:not(.nostyle)::before,
h2::before {
    content: "/ ";
    position: static;
    color: var(--ink-gold);
}

/* The recruiter page sets its own bigger, bolder h2 with a more specific
   selector; section labels are one size everywhere. */
.recruiter-section h2 {
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-gold);
}

h3 {
    font-family: var(--ink-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-fg);
}

/* ---- the title row ---- */

/* The old row relied on inline flow plus a float for the toggle, which left
   the links wrapping into a ragged second line under the avatar. As a flex
   row they wrap as a group and the toggle stays pinned right. */
.title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.7rem;
    margin-bottom: 2.5rem;
}

/* Always last and always hard right, so it lands in the same place whether the
   row has room for it or wraps to a second line. */
.title .theme-toggle {
    order: 99;
    margin-left: auto;
    float: none;
}

.title h1.nostyle {
    display: inline;
}

.title .avatar {
    margin-right: 0;
}



/* Beats the original stylesheet's own dark-mode rule, which paints this
   salmon. */
.title .name,
[data-theme="dark"] .title .name,
[data-theme="light"] .title .name {
    color: var(--ink-blood);
}

.title .name {
    font-family: var(--ink-font);
    font-size: 1.95rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: var(--ink-blood);
    text-decoration: none;
    text-shadow: none;
}

.title .name:hover {
    color: var(--ink-blood);
    opacity: 0.8;
}

.title .extra {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--ink-font);
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-muted);
    text-decoration: underline;
    text-decoration-color: var(--ink-rule);
    text-underline-offset: 3px;
    white-space: nowrap;
}

.title .extra:hover {
    background: none;
    transform: none;
    box-shadow: none;
    color: var(--ink-blood);
    text-decoration-color: var(--ink-blood);
}

.title .theme-toggle {
    width: auto;
    height: auto;
    padding: 0.35rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ink-faint);
}

.title .theme-toggle:hover {
    background: none;
    transform: none;
    color: var(--ink-fg);
    opacity: 1;
}

/* The crosshair that opens the aim trainer, next to the name. */
.aim-link {
    display: inline-block;
    margin-left: -0.35rem;
    color: var(--ink-gold);
    opacity: 0.6;
    vertical-align: middle;
    text-decoration: none;
    transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.aim-link:hover {
    color: var(--ink-blood);
    opacity: 1;
    transform: rotate(90deg);
}

/* The note under the crosshair, pointing up at it. */
.aim-spot {
    position: relative;
    display: inline-block;
}

/* Offsets line the arrow's tip up under the middle of the crosshair, just
   clear of its bottom edge. */
.title .aim-pointer {
    position: absolute;
    top: calc(100% - 8px);
    left: -2px;
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0;
    white-space: nowrap;
    font-family: var(--ink-font);
    font-size: 12.5px;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color 0.18s ease;
}

/* The site's link rules underline and brighten every anchor; this is a note,
   not a nav link, so it stays quiet until hovered. */
.title .aim-pointer,
.title .aim-pointer:visited {
    color: var(--ink-muted);
    text-decoration: none;
}

.aim-pointer svg {
    flex: none;
    animation: aim-nudge 2.4s ease-in-out infinite;
}

.aim-pointer span {
    padding-top: 0.6rem;
}

.title .aim-pointer:hover {
    color: var(--ink-fg);
}

/* A small lift towards the crosshair now and then, to draw the eye up. */
@keyframes aim-nudge {
    0%, 70%, 100% { transform: translate(0, 0); }
    80% { transform: translate(-1px, -3px); }
    90% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .aim-pointer svg {
        animation: none;
    }
}

/* Room under the header for the note, and between the header's rows when it
   wraps, so the note never lands on the links. */
.title:has(.aim-pointer) {
    row-gap: 2.6rem;
    margin-bottom: 3rem;
}

/* On a phone the crosshair sits past the middle of the row, so the note wraps
   onto two lines rather than running off the edge. */
@media (max-width: 640px) {
    .title .aim-pointer {
        width: 9.5rem;
        white-space: normal;
        text-align: left;
        font-size: 12px;
    }
}

/* ---- status line ---- */

.status {
    display: inline-flex;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--ink-font);
    font-size: 14px;
    color: var(--ink-muted);
    opacity: 1;
    margin-bottom: 1.5rem;
}

.status-dot,
.status-line .status-dot {
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 50%;
    background-color: var(--ink-blood);
    align-self: center;
}

/* ---- blockquote ---- */

blockquote {
    position: static;
    margin: 1.5rem 0 2rem;
    padding: 0 0 0 1.1rem;
    border: 0;
    border-left: 1px solid var(--ink-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 16px;
    color: var(--ink-muted);
    opacity: 1;
}

blockquote::before,
blockquote::after {
    content: none;
}

/* ---- lists: a hairline down the left, no boxes ---- */

.news,
.posts,
.work-col .exp,
.work-col .item {
    border-left: 1px solid var(--ink-rule);
    padding-left: 1.1rem;
}

.news li {
    grid-template-columns: 5rem 1fr;
    gap: 0.9rem;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* ul.posts .post-date-sm in the original stylesheet is more specific than a
   bare class, and it sets Courier. */
.news .news-date,
.exp-when,
.post-date-sm,
ul.posts .post-date-sm,
.post-date {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--ink-font);
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-faint);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.news .news-body {
    color: var(--ink-muted);
    opacity: 1;
}

/* The original pulled this row out of the list with a negative margin and a
   yellow bar. Here it lines up with everything else and is marked by its date
   instead. */
.news-featured {
    padding: 0;
    margin-left: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.news-featured .news-date {
    color: var(--ink-blood);
}

.news-featured::after {
    content: none;
}

/* ---- experience and projects ---- */

.exp,
.item {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    margin: 0 0 1.4rem;
}

.exp:hover,
.item:hover,
.exp:nth-child(even),
.exp:nth-child(odd),
.item:nth-child(even),
.item:nth-child(odd) {
    transform: none;
    box-shadow: none;
}

.exp {
    grid-template-columns: 1fr;
    gap: 0.15rem;
}

/* The logo images are gone from the markup entirely; a display:none image is
   still downloaded. */

.exp-org,
.item h3 {
    font-family: var(--ink-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-fg);
}

.exp-role {
    font-family: var(--ink-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-faint);
}

.exp .role-list li,
.item p {
    font-size: 15px;
    color: var(--ink-muted);
    opacity: 1;
}

.role-list li::before,
ul.posts li::before {
    content: "";
}

/* Without their markers these items need space between them, or a two-point
   role reads as one run-on paragraph. */
.role-list li,
ul.posts li {
    padding-left: 0;
    margin-bottom: 0.5rem;
}

/* ---- tags and links ---- */

/* Back to plain inline text: as flex items the spans swallowed the space in
   front of each separator, printing "Rust· LSM-tree". */
.item .tags {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 13px;
    color: var(--ink-faint);
}

.item .tags .tag {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--ink-font);
    font-weight: 400;
}

/* The chips were separate boxes; as plain text they need a separator again. */
.item .tags .tag + .tag::before {
    content: " · ";
    color: var(--ink-faint);
}

.project-link-text,
.post-back {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--ink-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-muted);
    text-decoration: underline;
    text-decoration-color: var(--ink-rule);
    text-underline-offset: 3px;
}

.project-link-text:hover,
.post-back:hover {
    background: none;
    transform: none;
    box-shadow: none;
    color: var(--ink-blood);
    text-decoration-color: var(--ink-blood);
}

.item .project-links {
    gap: 1rem;
    margin-top: 0.5rem;
}

.gh-stars {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--ink-font);
    font-size: 13px;
    color: var(--ink-faint);
}

.gh-stars:hover {
    color: var(--ink-blood);
    transform: none;
}

/* ---- writing index and posts ---- */

.post-list {
    gap: 0;
    border-left: 1px solid var(--ink-rule);
    padding-left: 1.1rem;
}

/* The whole entry is one anchor, so the global link underline was running
   under the date and the preview as well. Only the title should read as the
   link. */
a.post-item,
[data-theme="dark"] a.post-item,
[data-theme="light"] a.post-item {
    text-decoration: none;
}

.post-item {
    padding: 0 0 1.6rem;
    border: 0;
    border-top: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
}

.post-item:last-child,
.post-item:nth-child(odd),
.post-item:nth-child(even) {
    border: 0;
    transform: none;
}

.post-item:hover {
    transform: none;
    box-shadow: none;
    opacity: 1;
}

.post-item:hover .post-heading {
    color: var(--ink-fg);
    text-decoration-color: var(--ink-fg);
}

/* Post titles are content, not section labels: no slash, no lowercasing. */
.post-heading::before {
    content: none;
}

.post-heading {
    text-decoration: underline;
    text-decoration-color: var(--ink-rule);
    text-underline-offset: 3px;
    text-transform: none;
    font-family: var(--ink-font);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink-fg);
    margin: 0.2rem 0 0.3rem;
}

.post-preview {
    font-size: 15px;
    color: var(--ink-muted);
    opacity: 1;
}

/* h1:not(.nostyle) is more specific than a bare class, so the article title
   needs the element in the selector or it renders as a section label. The
   writing index keeps the label treatment, which suits a page of one word. */
h1.post-full-title {
    font-family: var(--ink-font);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--ink-fg);
    text-transform: none;
    text-decoration: none;
    margin: 0.6rem 0 2rem;
}

h1.post-full-title::before {
    content: none;
}

.writing-subtitle {
    font-family: var(--ink-font);
    font-size: 15px;
    color: var(--ink-muted);
    opacity: 1;
}

.post-body {
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink-muted);
}

.post-body .post-h2 {
    font-family: var(--ink-font);
    font-size: 14px;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: var(--ink-gold);
}

.post-body .post-h2::before {
    content: "/ ";
    color: var(--ink-gold);
}

/* ---- photography ---- */

.photo-grid img,
.photo-grid video {
    border: 1px solid var(--ink-rule);
    border-radius: 2px;
    box-shadow: none;
    background: var(--ink-panel);
    opacity: 0.86;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.photo-grid img:nth-child(odd),
.photo-grid video:nth-child(odd),
.photo-grid img:nth-child(even),
.photo-grid video:nth-child(even) {
    transform: none;
}

.photo-grid img.photo-open:hover,
.photo-grid video:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: none;
}

.lightbox-card {
    border: 1px solid var(--ink-rule);
    border-radius: 4px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    background: var(--ink-bg);
}

.lightbox-title {
    font-family: var(--ink-font);
    font-weight: 500;
}

/* ---- recruiter page ---- */

.exp-item,
.faq-item {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--ink-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.exp-item:last-child,
.faq-item:last-child {
    border-bottom: 0;
}

.exp-item summary,
.faq-item summary {
    font-family: var(--ink-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--ink-fg);
}

.exp-item summary::after,
.faq-item summary::after {
    font-family: var(--ink-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--ink-faint);
}

.exp-item p,
.faq-item p {
    font-size: 14px;
    color: var(--ink-muted);
    opacity: 1;
}

/* The highlight swipes go: colour on this page is for names, not blocks. */
.hl {
    background-image: none;
    padding: 0;
    font-weight: 500;
    color: var(--ink-fg);
}

[data-theme="light"] .hl,
[data-theme="dark"] .hl {
    background-image: none;
}

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

.site-footer {
    border-top: 1px solid var(--ink-rule);
    margin-top: 4rem;
    padding-top: 1.5rem;
    font-family: var(--ink-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-faint);
    opacity: 1;
}

.site-footer a {
    color: var(--ink-muted);
}

.footer-bar {
    display: none;
}

@media (max-width: 640px) {
    .container,
    .home-container {
        padding: 3rem 1.5rem 4rem;
    }

    .title .name {
        font-size: 1.7rem;
    }

    .title .extra {
        margin: 0 1rem 0 0;
        font-size: 13px;
    }

    .news li {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* ---- high five row ----

   No photo any more: the whole thing is one small text button carrying its own
   count, sitting on the same hairline as the lists. */

/* Block level, sized to its contents: as an inline box it shared a line with
   the status above it. */
.hf {
    display: flex;
    width: fit-content;
    align-items: baseline;
    gap: 0.7rem;
    margin: 0 0 2rem;
    padding: 0 0 0 1.1rem;
    margin-top: 1.2rem;
    border-left: 1px solid var(--ink-rule);
    font-family: var(--ink-font);
}

.hf[hidden] {
    display: none;
}

.hf-tap {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--ink-font);
    font-size: 15px;
    color: var(--ink-fg);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--ink-rule);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.hf-tap:hover,
.hf-tap:focus-visible {
    text-decoration-color: var(--ink-fg);
    outline: none;
}

/* The one piece of motion left: a quick nod when the five lands. */
.hf.is-slapped .hf-icon {
    animation: hf-nod 0.45s ease;
}

@keyframes hf-nod {
    0%, 100% { transform: rotate(0); }
    35% { transform: rotate(-18deg) scale(1.1); }
    70% { transform: rotate(10deg); }
}

.hf-icon {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--ink-faint);
    transition: color 0.25s ease;
}

.hf.is-mine .hf-icon {
    color: var(--ink-fg);
}

.hf-line {
    white-space: nowrap;
}

.hf-count {
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

.hf.is-mine .hf-count {
    color: var(--ink-fg);
}

.hf-sub {
    font-size: 13px;
    color: var(--ink-faint);
}

.hf-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hf-tap,
    .hf-icon {
        transition: none;
    }

    .hf.is-slapped .hf-icon {
        animation: none;
    }
}

/* ---- aim trainer ----

   The arena is the page here: a full-window canvas with the panel and the
   readout floating over it, all in the same ink palette as everything else. */

/* The arena is always dark, so the page around it is too, whatever the site
   theme. Redefining the palette here, on body, beats the light values set on
   the root and keeps every aim rule below readable against the scene. */
.aim-body {
    --ink-bg: #121312;
    --ink-fg: #f0e9dd;
    --ink-muted: rgba(240, 233, 221, 0.62);
    --ink-faint: rgba(240, 233, 221, 0.38);
    --ink-rule: rgba(240, 233, 221, 0.14);
    --ink-panel: rgba(240, 233, 221, 0.035);
    --ink-blood: var(--ink-fg);
    --ink-gold: var(--ink-faint);
    --bg-color: var(--ink-bg);
    --text-color: var(--ink-fg);
    color-scheme: dark;
    overflow: hidden;
    background: var(--ink-bg);
    color: var(--ink-fg);
}

.aim-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.aim-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Only hide the cursor once the pointer is genuinely locked. Without a lock
   the player aims with the cursor, so hiding it would make the round
   unplayable. */
.aim-stage.is-locked {
    cursor: none;
}

.aim-btn[disabled] {
    opacity: 0.45;
    cursor: default;
}

.aim-btn[disabled]:hover {
    border-color: var(--ink-rule);
    background: none;
    color: var(--ink-muted);
}

.aim-crosshair {
    --xh: var(--ink-fg);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.aim-crosshair span {
    position: absolute;
    background: var(--xh);
    opacity: 0.9;
    /* A dark edge, so the ticks hold up against the bright maps. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

/* The centre dot and the ring, off unless a style asks for them. */
.aim-crosshair::before,
.aim-crosshair::after {
    content: '';
    position: absolute;
    display: none;
}

.aim-crosshair::before {
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--xh);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.aim-crosshair::after {
    inset: 1px;
    border: 2px solid var(--xh);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Styles. classic is the default: four ticks round a gap. */
.aim-crosshair[data-style="plus"] span:nth-child(1),
.aim-crosshair[data-style="plus"] span:nth-child(2) {
    height: 11px;
}

.aim-crosshair[data-style="plus"] span:nth-child(3),
.aim-crosshair[data-style="plus"] span:nth-child(4) {
    width: 11px;
}

.aim-crosshair[data-style="t"] span:nth-child(1) {
    display: none;
}

.aim-crosshair[data-style="dot"] span,
.aim-crosshair[data-style="circle"] span {
    display: none;
}

.aim-crosshair[data-style="dot"]::before,
.aim-crosshair[data-style="circle"]::before,
.aim-crosshair[data-style="circle"]::after,
.aim-crosshair[data-style="t"]::before {
    display: block;
}

/* The copy in the menu sits inline next to the colour swatches. */
.aim-crosshair.aim-crosshair-preview {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    transform: none;
}

.aim-sens {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.aim-sens-range {
    width: 12rem;
    accent-color: var(--ink-fg);
}

.aim-sens-value {
    width: 4.2rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--ink-rule);
    background: none;
    font-family: var(--ink-font);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-fg);
}

.aim-sens-value:focus {
    outline: none;
    border-color: var(--ink-fg);
}

.aim-swatches {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.55rem;
}

.aim-swatch-row {
    display: flex;
    gap: 0.4rem;
}

.aim-swatch {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--ink-rule);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px var(--ink-bg);
}

.aim-swatch[aria-checked="true"] {
    border-color: var(--ink-fg);
    box-shadow: inset 0 0 0 2px var(--ink-bg), 0 0 0 1px var(--ink-fg);
}

.aim-ammo {
    position: absolute;
    right: 2.2rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    font-family: var(--ink-font);
    color: var(--ink-fg);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    cursor: pointer;
    user-select: none;
}

.aim-ammo[hidden] {
    display: none;
}

.aim-ammo-gun {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.aim-ammo-count b {
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.aim-ammo-count i {
    margin-left: 0.35rem;
    font-size: 18px;
    font-style: normal;
    color: var(--ink-muted);
}

.aim-ammo.is-low .aim-ammo-count b {
    color: #ff6b5a;
}

/* Only there while reloading: a thin bar that fills as it goes. */
.aim-ammo-bar {
    width: 96px;
    height: 3px;
    background: rgba(0, 0, 0, 0.35);
    visibility: hidden;
}

.aim-ammo.is-reloading .aim-ammo-bar {
    visibility: visible;
}

.aim-ammo-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--ink-fg);
}

.aim-eggs {
    margin: -1.2rem 0 1.6rem;
    font-size: 13px;
    color: var(--ink-muted);
}

.aim-eggs[hidden] {
    display: none;
}

.aim-bot-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.aim-pick[hidden] {
    display: none;
}

/* Drag the showcase to spin it: the open middle of the menu on a wide
   screen, a box that sticks to the top of the menu on a phone. */
.aim-menu {
    cursor: grab;
}

.aim-menu.is-spinning,
.aim-preview canvas.is-spinning {
    cursor: grabbing;
}

.aim-panel,
.aim-side {
    cursor: auto;
}

.aim-stage canvas {
    touch-action: none;
}

.aim-preview {
    display: none;
}

@media (max-width: 900px) {
    .aim-preview:not([hidden]) {
        position: sticky;
        /* Up past the menu's own top padding, so nothing scrolls above it. */
        top: -2.5rem;
        z-index: 3;
        display: block;
        height: min(36vh, 280px);
        margin: 0 -1rem;
        border-bottom: 1px solid var(--ink-rule);
        background: radial-gradient(ellipse at center, #2a2a27 0%, var(--ink-bg) 75%);
    }

    .aim-preview canvas {
        display: block;
        width: 100%;
        height: 100%;
        touch-action: none;
        cursor: grab;
    }

    .aim-preview-hint {
        position: absolute;
        right: 0.9rem;
        bottom: 0.6rem;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-faint);
        pointer-events: none;
    }
}

/* What the picked mode is, under the mode chips. */
.aim-mode-note {
    max-width: 30rem;
    margin: 0.55rem 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* The menu's demo: the round's own HUD stays out of it, and a tag says what
   is going on back there. */
.is-demo .aim-killfeed,
.is-demo .aim-damage,
.is-demo .aim-health {
    display: none;
}

.aim-demo-tag {
    position: absolute;
    left: 50%;
    bottom: 1.4rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.35rem 0.8rem;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.55);
    font-family: var(--ink-font);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f0e9dd;
    pointer-events: none;
}

.aim-demo-tag[hidden] {
    display: none;
}

@media (max-width: 900px) {
    .aim-demo-tag {
        display: none;
    }
}

/* The character picker: a small label beside each row of chips or swatches. */
.aim-look {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 0.45rem 0.9rem;
}

.aim-look-label {
    font-size: 12px;
    color: var(--ink-muted);
}

.aim-look .aim-chip,
.aim-look-actions .aim-chip {
    padding: 0.22rem 0.6rem;
    font-size: 12px;
}

.aim-look-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

/* ---- bots mode HUD ---- */

.aim-health {
    position: absolute;
    left: 2.2rem;
    bottom: 2rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--ink-font);
    color: var(--ink-fg);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    pointer-events: none;
}

.aim-health[hidden] {
    display: none;
}

.aim-health-cross {
    font-size: 26px;
    font-weight: 600;
    color: var(--ink-muted);
}

.aim-health b {
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.aim-health.is-low b,
.aim-health.is-low .aim-health-cross {
    color: #ff6b5a;
}

/* csgo's kill feed: dark rows top right, your kills outlined in red. */
.aim-killfeed {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    font-family: var(--ink-font);
    font-size: 13px;
    pointer-events: none;
}

.kf-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.6rem;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid transparent;
    color: #f0e9dd;
    transition: opacity 0.5s ease;
}

.kf-row.is-mine {
    border-color: #d9372b;
}

.kf-row.is-leaving {
    opacity: 0;
}

.kf-ct {
    color: #7fb2ff;
    font-weight: 600;
}

.kf-t {
    color: #e6b84f;
    font-weight: 600;
}

.kf-gun {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(240, 233, 221, 0.75);
}

.kf-hs {
    display: inline-flex;
    color: #f0e9dd;
}

.aim-damage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(170, 10, 10, 0.75) 100%);
}

.aim-death {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.6rem 1.1rem;
    background: rgba(0, 0, 0, 0.6);
    font-family: var(--ink-font);
    font-size: 15px;
    color: #f0e9dd;
    pointer-events: none;
}

.aim-death[hidden] {
    display: none;
}

/* 1v1: the round banner. Big and brief, in the middle of the upper screen. */
.aim-round {
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.8rem 1.6rem;
    background: rgba(0, 0, 0, 0.55);
    font-family: var(--ink-font);
    color: #f0e9dd;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}

.aim-round b {
    font-size: clamp(22px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.aim-round span {
    font-size: 14px;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.aim-round[data-tone="win"] b {
    color: #7fb2ff;
}

.aim-round[data-tone="loss"] b {
    color: #e6b84f;
}

.aim-round[hidden],
.aim-chips[hidden] {
    display: none;
}

.is-killcam .aim-killfeed {
    top: calc(11vh + 1rem);
}

/* The end-of-round killcam: letterbox bars, a red rec dot, and who went down. */
.aim-killcam {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    font-family: var(--ink-font);
    color: #f0e9dd;
}

.aim-killcam[hidden] {
    display: none;
}

.kc-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 11vh;
    padding: 0 1.6rem;
    background: #000;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kc-top {
    transform: translateY(-100%);
}

.kc-bottom {
    transform: translateY(100%);
}

.aim-killcam.is-in .kc-bar {
    transform: none;
}

.kc-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d9372b;
    animation: kc-blink 1s steps(2, start) infinite;
}

@keyframes kc-blink {
    to {
        visibility: hidden;
    }
}

.kc-count {
    font-size: 13px;
    color: rgba(240, 233, 221, 0.6);
}

.kc-line {
    font-size: 14px;
    color: #e6b84f;
}

.kc-skip {
    display: flex;
    gap: 0.5rem;
    pointer-events: auto;
}

.kc-skip button {
    font: inherit;
    font-size: 12px;
    color: #f0e9dd;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 0.7rem;
    cursor: pointer;
}

.kc-skip button:hover {
    background: rgba(255, 255, 255, 0.16);
}

.kc-skip kbd {
    font: inherit;
    font-size: 10px;
    opacity: 0.6;
    margin-left: 0.3rem;
}

@media (max-width: 640px) {
    .kc-bar {
        padding: 0 1rem;
    }

    .kc-bottom {
        flex-direction: column;
        justify-content: center;
        gap: 0.4rem;
    }
}

.aim-scope {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(#000, #000) center / 100% 1px no-repeat,
        linear-gradient(#000, #000) center / 1px 100% no-repeat,
        radial-gradient(circle at center, transparent 0 calc(min(46vw, 46vh) - 2px), #000 min(46vw, 46vh));
}

.aim-scope[hidden] {
    display: none;
}

/* Four ticks around a gap, so the centre stays readable against the target. */
.aim-crosshair span:nth-child(1),
.aim-crosshair span:nth-child(2) {
    left: 50%;
    width: 2px;
    height: 7px;
    margin-left: -1px;
}

.aim-crosshair span:nth-child(1) { top: 0; }
.aim-crosshair span:nth-child(2) { bottom: 0; }

.aim-crosshair span:nth-child(3),
.aim-crosshair span:nth-child(4) {
    top: 50%;
    height: 2px;
    width: 7px;
    margin-top: -1px;
}

.aim-crosshair span:nth-child(3) { left: 0; }
.aim-crosshair span:nth-child(4) { right: 0; }

.aim-crosshair[hidden] {
    display: none;
}

.aim-hud {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2.5rem;
    font-family: var(--ink-font);
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.aim-hud[hidden] {
    display: none;
}

.aim-hud-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.aim-hud-cell b {
    font-size: 26px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-fg);
}

.aim-hud-cell i {
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

/* The menu covers the arena between rounds: game panel on the left, board against
   the right edge, the floating gun in between. It scrolls on its own if a short window cannot fit
   both, since the page itself never scrolls. */
.aim-menu {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    /* The board hugs the right edge, leaving the middle open for the gun. */
    padding: 3rem 3rem 3rem max(3rem, calc(50% - 30rem));
    overflow-y: auto;
    font-family: var(--ink-font);
}

.aim-menu[hidden] {
    display: none;
}

.aim-panel {
    flex: 0 1 24rem;
    margin: auto 0;
}

.aim-side {
    flex: 0 1 19rem;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.aim-board {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--ink-rule);
    background: color-mix(in srgb, var(--ink-bg) 85%, transparent);
}

h2.aim-side-title {
    display: block;
    margin: 0 0 0.8rem;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-gold);
}

.aim-side-title::before {
    content: none;
}

.aim-board-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 17rem;
    overflow-y: auto;
}

.aim-board-row {
    display: grid;
    grid-template-columns: 1.6rem 1fr auto 2.8rem;
    gap: 0.6rem;
    padding: 0.32rem 0;
    border-top: 1px solid var(--ink-rule);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
}

.aim-board-row:first-child {
    border-top: none;
}

.aim-board-row.is-mine {
    color: var(--ink-fg);
    font-weight: 600;
}

.aim-board-place,
.aim-board-acc {
    color: var(--ink-faint);
}

.aim-board-acc {
    text-align: right;
}

.aim-board-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aim-board-score {
    color: var(--ink-fg);
}

.aim-board-empty {
    margin: 0;
    font-size: 14px;
    color: var(--ink-faint);
}

.aim-inspo {
    margin: 0;
}

.aim-inspo img {
    display: block;
    width: 100%;
    height: auto;
}

.aim-inspo figcaption {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    margin-top: 0.6rem;
    font-size: 13px;
    color: var(--ink-muted);
}

.aim-board-empty[hidden],
.aim-save[hidden],
.aim-btn[hidden] {
    display: none;
}

.aim-save {
    margin-bottom: 1.5rem;
}

.aim-save-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-gold);
}

.aim-save-row {
    display: flex;
    gap: 0.6rem;
}

.aim-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ink-rule);
    background: none;
    font-family: var(--ink-font);
    font-size: 16px;
    color: var(--ink-fg);
}

.aim-input:focus {
    outline: none;
    border-color: var(--ink-fg);
}

.aim-save-msg {
    min-height: 1.2em;
    margin: 0.5rem 0 0;
    font-size: 13px;
    color: var(--ink-faint);
}

.aim-back {
    display: inline-block;
    margin-bottom: 1.6rem;
    font-size: 14px;
    color: var(--ink-muted);
    text-decoration: none;
}

.aim-back:hover {
    color: var(--ink-blood);
}

.aim-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, var(--ink-bg) 0%, rgba(18, 19, 18, 0.93) 28%, rgba(18, 19, 18, 0.72) 42%, rgba(18, 19, 18, 0.08) 54%, rgba(18, 19, 18, 0.05) 62%, rgba(18, 19, 18, 0.6) 80%, rgba(18, 19, 18, 0.78) 100%);
    transition: opacity 0.35s ease;
}

/* Out of the way the moment a round starts. */
.aim-stage.is-running .aim-scrim {
    opacity: 0;
}

h1.aim-title {
    display: block;
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: var(--ink-blood);
    margin: 0 0 1.6rem;
}

.aim-title::before {
    content: none;
}

.aim-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 1.8rem;
}

.aim-stat-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-gold);
}

.aim-stat-value {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ink-fg);
}

.aim-stat-note {
    font-size: 14px;
    color: var(--ink-faint);
}

.aim-picks {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.6rem;
}

.aim-pick-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-gold);
}

.aim-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.aim-chip {
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--ink-rule);
    background: none;
    font-family: var(--ink-font);
    font-size: 13px;
    color: var(--ink-muted);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.aim-chip:hover:not([disabled]):not([aria-checked="true"]) {
    border-color: var(--ink-fg);
    color: var(--ink-fg);
}

.aim-chip[aria-checked="true"] {
    border-color: var(--ink-fg);
    background: var(--ink-fg);
    color: var(--ink-bg);
}

.aim-chip[disabled] {
    opacity: 0.45;
    cursor: default;
}

.aim-board-name small {
    font-size: 11px;
    color: var(--ink-faint);
    font-weight: 400;
}

.aim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.aim-btn {
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--ink-rule);
    background: none;
    font-family: var(--ink-font);
    font-size: 15px;
    color: var(--ink-muted);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.aim-btn:hover {
    border-color: var(--ink-fg);
    color: var(--ink-fg);
}

.aim-btn-go {
    border-color: var(--ink-blood);
    color: var(--ink-fg);
}

.aim-btn-go:hover {
    background: var(--ink-fg);
    border-color: var(--ink-fg);
    color: var(--ink-bg);
}

.aim-hint {
    font-size: 13px;
    color: var(--ink-faint);
}

/* Sits on the stage, not in the panel, so it survives the panel being hidden. */
.aim-note {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    transform: translateX(-50%);
    padding-left: 0.9rem;
    border-left: 1px solid var(--ink-blood);
    font-family: var(--ink-font);
    font-size: 13px;
    color: var(--ink-muted);
    background: rgba(18, 19, 18, 0.85);
    pointer-events: none;
}

.aim-note[hidden] {
    display: none;
}

@media (max-width: 900px) {
    .aim-menu {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2rem;
        padding: 2.5rem 1rem;
    }

    .aim-panel,
    .aim-side {
        flex: none;
        margin: 0;
    }
}

@media (max-width: 720px) {

    .aim-hud {
        top: 1.2rem;
        gap: 1.6rem;
    }

    .aim-hud-cell b {
        font-size: 21px;
    }
}

/* On a phone the avatar, name, and links don't fit on one row. Rather than
   letting one link cling to the name and the rest wrap, the links all move
   to their own row together. */
.title .title-break {
    display: none;
}

@media (max-width: 560px) {
    .title .title-break {
        display: block;
        flex-basis: 100%;
        height: 0.6rem;
    }
}

/* The home header leaves a tall row gap for the aim note, and the break sits
   on its own flex line, so it would get that gap twice. On a phone the gap
   shrinks and the break itself holds the room for the note's two lines. */
@media (max-width: 560px) {
    .title:has(.aim-pointer) {
        row-gap: 0.4rem;
    }
    .title:has(.aim-pointer) .title-break {
        height: 3.1rem;
    }
}

/* The smallest phones: a slightly smaller avatar and name keep the aim note
   inside the screen. */
@media (max-width: 380px) {
    .title .avatar {
        width: 42px;
        height: 42px;
    }
    .title .name {
        font-size: 1.6rem;
    }
    .title .aim-pointer {
        width: 7.5rem;
    }
    .title .extra {
        margin-right: 0;
    }
}

/* Flex centring lines the photo up with the name's line box, which reads as
   too high next to lowercase letters. Nudge it down to the middle of the
   word itself. */
.title .avatar {
    position: relative;
    top: 7px;
}

@media (max-width: 380px) {
    .title .avatar {
        top: 6px;
    }
}