/* Light editorial style for /profile and /lab. Loaded only on those two pages. */

body.page-profile, body.page-lab {
    --bg: #f7f5f0;
    --fg: #1b1b1b;
    --muted: #5f5d58;
    --faint: #e4e0d6;
    --code-bg: #efece4;
    --link: #1b1b1b;
    --accent: #1f4fd1;
    --panel: #ffffff;
    --serif: 'Source Serif 4', Georgia, serif;
    --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}
html:has(body.page-profile), html:has(body.page-lab) { background: #f7f5f0; }
body.page-profile .site-header__brand, body.page-lab .site-header__brand { color: var(--fg); }
body.page-profile .site-footer, body.page-lab .site-footer { border-color: var(--faint); }

/* Profile layout ------------------------------------------------- */
body.page-profile .site-main.wrap { max-width: 80rem; }
.profile-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.profile { min-width: 0; max-width: 60rem; }
.profile-toc { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; font-size: 0.84rem; padding-top: 0.5rem; }
.profile-toc summary { cursor: pointer; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; list-style: none; }
.profile-toc summary::-webkit-details-marker { display: none; }
.profile-toc ol { list-style: none; margin: 0; padding: 0; }
.profile-toc li { margin: 0.1rem 0; }
.profile-toc ol ol { padding-left: 0.8rem; margin: 0.15rem 0 0.5rem; border-left: 1px solid var(--faint); }
.profile-toc a { color: var(--muted); text-decoration: none; display: block; padding: 0.15rem 0; line-height: 1.35; }
.profile-toc a:hover { color: var(--fg); }
.profile-toc a.is-active { color: var(--accent); font-weight: 500; }
.profile__source { margin: 1.25rem 0 0; font-size: 0.82rem; }
.profile__source a { color: var(--accent); }
.profile-jumps { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--faint); }
.profile-jumps a { font-size: 0.84rem; color: var(--fg); background: var(--panel); border: 1px solid var(--faint); border-radius: 6px; padding: 0.3rem 0.75rem; text-decoration: none; }
.profile-jumps a:hover { border-color: #c9c3b5; }
.profile-jumps a.profile-jumps__lab { color: var(--accent); border-color: #c8d4f5; }
.profile-top { position: fixed; right: 1.25rem; bottom: 1.25rem; background: var(--panel); color: var(--fg); border: 1px solid var(--faint); border-radius: 6px; padding: 0.45rem 0.85rem; font-size: 0.84rem; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.06); opacity: 0; pointer-events: none; transition: opacity .2s; }
.profile-top.is-visible { opacity: 1; pointer-events: auto; }

/* Profile prose (the Markdown) ----------------------------------- */
body.page-profile .prose { font-size: 1rem; line-height: 1.7; }
body.page-profile .prose h2 { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--faint); }
body.page-profile .prose h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin-top: 2.2rem; }
body.page-profile .prose h4 { font-size: 1.02rem; font-weight: 600; margin-top: 1.8rem; }
body.page-profile .prose h2, body.page-profile .prose h3, body.page-profile .prose h4 { scroll-margin-top: 1.5rem; color: var(--fg); }
body.page-profile .prose a { color: var(--accent); text-decoration-color: #c8d4f5; }
body.page-profile .prose strong { color: var(--fg); }
body.page-profile .prose hr { border-top-color: var(--faint); }
body.page-profile .prose code { background: var(--code-bg); color: var(--fg); }
body.page-profile .prose table { font-size: 0.92rem; display: block; overflow-x: auto; }
body.page-profile .prose th, body.page-profile .prose td { border-bottom-color: var(--faint); }
body.page-profile .prose th { color: var(--muted); }
body.page-profile .prose img { border: 1px solid var(--faint); border-radius: 8px; background: #111; }
body.page-profile .prose a:has(img) { display: block; text-decoration: none; }

/* Hero ----------------------------------------------------------- */
.hero { margin: 0.5rem 0 3rem; }
.hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 0.5rem; }
.hero__name { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 0.9rem; color: var(--fg); }
.hero__role { font-size: 1.25rem; line-height: 1.45; margin: 0 0 0.75rem; color: var(--fg); max-width: 46rem; }
.hero__lead { font-size: 1.05rem; color: var(--muted); max-width: 46rem; margin: 0 0 0.9rem; }
.hero__contact { font-size: 0.88rem; color: var(--muted); margin: 0; }
.hero__contact a { color: var(--accent); }
.hero__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 2rem 0 0; padding: 1.3rem 0; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.hero__facts dt { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--fg); }
.hero__facts dd { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); }
.hero__block { margin-top: 3.2rem; }
.hero__h2 { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; margin: 0 0 0.25rem; color: var(--fg); }
.hero__sub { color: var(--muted); margin: 0 0 1.4rem; }
.hero__sub a { color: var(--accent); }

.eras { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.era { padding-right: 2.5rem; }
.era--ai { padding: 0 0 0 2.5rem; border-left: 1px solid var(--faint); }
.era__years { font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 0 0 0.3rem; }
.era--ai .era__years { color: var(--accent); }
.era__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0 0 0.8rem; color: var(--fg); }
.era ul { margin: 0; padding-left: 1.1rem; } .era li { margin: 0.4rem 0; }
.era a { color: var(--accent); }
.era__more { display: inline-block; margin-top: 0.8rem; font-weight: 500; text-decoration: none; }

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.flow li { position: relative; padding: 0 1rem 0 0; }
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 34px; right: 4px; height: 1px; background: #d6d0c3; }
.flow__n { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; background: var(--bg); position: relative; z-index: 1; }
.flow b { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.97rem; color: var(--fg); }
.flow li > span:last-child { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.45; }

.skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.skills__group h3 { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: var(--accent); padding-bottom: 0.6rem; border-bottom: 1.5px solid var(--fg); margin: 0; }
.skills__item { padding: 0.7rem 0; border-bottom: 1px solid var(--faint); }
.skills__item b { display: block; font-size: 0.92rem; font-weight: 600; color: var(--fg); }
.skills__item span { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.45; margin-top: 0.15rem; }

.featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.featured__card { display: block; background: var(--panel); border: 1px solid var(--faint); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--fg); transition: border-color .2s, box-shadow .2s; }
.featured__card:hover { border-color: #c9c3b5; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.featured__thumb { display: block; height: 9rem; background: #111 center top / cover no-repeat; border-bottom: 1px solid var(--faint); }
.featured__text { display: block; padding: 0.75rem 0.9rem 0.9rem; }
.featured__text b { display: block; font-size: 0.95rem; }
.featured__text span { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.4; margin-top: 0.15rem; }

/* The Lab -------------------------------------------------------- */
body.page-lab .site-main.wrap { max-width: 84rem; }
.lab { font-family: var(--sans); }
.lab-hero { max-width: 52rem; margin: 1rem 0 2.5rem; }
.lab-eyebrow { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 0.6rem; }
.lab-title { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.08; margin: 0 0 1rem; color: var(--fg); }
.lab-lead { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.75rem; }
.lab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 0 0 1.25rem; padding: 1.1rem 0; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.lab-stats dt { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; line-height: 1.1; color: var(--fg); }
.lab-stats dd { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); }
.lab-note { font-size: 0.88rem; color: var(--muted); }
.lab-note a { color: var(--accent); }
.lab-bar { position: sticky; top: 0; z-index: 5; background: rgba(247,245,240,0.94); backdrop-filter: blur(6px); padding: 0.9rem 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--faint); }
.lab-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.lab-cats button { font: inherit; font-size: 0.82rem; color: var(--fg); background: var(--panel); border: 1px solid var(--faint); border-radius: 6px; padding: 0.3rem 0.65rem; cursor: pointer; }
.lab-cats button span { color: var(--muted); margin-left: 0.2rem; }
.lab-cats button:hover { border-color: #c9c3b5; }
.lab-cats button.is-on { background: var(--fg); color: #fff; border-color: var(--fg); }
.lab-cats button.is-on span { color: #bbb; }
.lab-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.lab-controls input, .lab-controls select { font: inherit; font-size: 0.88rem; background: var(--panel); color: var(--fg); border: 1px solid var(--faint); border-radius: 6px; padding: 0.4rem 0.7rem; }
.lab-search { flex: 1 1 16rem; min-width: 12rem; }
.lab-count { font-size: 0.82rem; color: var(--muted); margin-left: auto; }
.lab-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.1rem; }
.lab-card { background: var(--panel); border: 1px solid var(--faint); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.lab-card:hover { border-color: #c9c3b5; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.lab-card[hidden] { display: none; }
.lab-cover { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--faint);
    background: repeating-linear-gradient(var(--a), hsl(var(--h) 38% 93%) 0 14px, hsl(var(--h) 38% 90%) 14px 28px); }
.lab-mono { font-family: var(--serif); font-size: 2.6rem; font-weight: 600; color: hsl(var(--h) 40% 35%); letter-spacing: 0.02em; }
.lab-cover-lang { position: absolute; left: 0.7rem; bottom: 0.55rem; font-size: 0.72rem; color: hsl(var(--h) 25% 38%); }
.lab-cover--img { background: #111; }
.lab-cover--img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform .3s; }
.lab-cover--img:hover img { transform: scale(1.03); }
.lab-body { padding: 0.85rem 0.95rem 0.95rem; display: flex; flex-direction: column; flex: 1; }
.lab-meta { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.7rem; margin-bottom: 0.35rem; }
.lab-cat { color: hsl(var(--h) 45% 36%); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.lab-status { color: var(--muted); }
.lab-status--live { color: #1d7a3a; font-weight: 600; } .lab-status--shipped { color: var(--accent); font-weight: 600; } .lab-status--work { color: #9a6a12; }
.lab-name { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; margin: 0 0 0.3rem; color: var(--fg); }
.lab-desc { font-size: 0.86rem; color: var(--muted); line-height: 1.5; margin: 0 0 0.7rem; flex: 1; }
.lab-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; font-size: 0.75rem; color: #86837c; margin: 0; }
.lab-empty { color: var(--muted); padding: 2rem 0; }
.lab-rest { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--faint); }
.lab-rest h2 { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 0.5rem; color: var(--fg); }
.lab-rest p { color: var(--muted); max-width: 46rem; }
.lab-rest ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lab-rest li { font-size: 0.78rem; color: var(--muted); background: var(--panel); border: 1px solid var(--faint); border-radius: 5px; padding: 0.15rem 0.5rem; }

/* Responsive ----------------------------------------------------- */
@media (max-width: 1100px) {
    .skills { grid-template-columns: repeat(2, 1fr); }
    .featured { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
    .profile-layout { grid-template-columns: 1fr; gap: 1rem; }
    .profile-toc { position: sticky; top: 0; z-index: 5; background: var(--bg); max-height: 70vh; padding: 0.75rem 0; border-bottom: 1px solid var(--faint); }
    .profile-toc summary { margin-bottom: 0; }
    .profile-toc summary::after { content: " ▾"; }
    .profile-toc details[open] nav { margin-top: 0.75rem; }
    .flow { grid-template-columns: 1fr; gap: 1rem; }
    .flow li { display: grid; grid-template-columns: 30px 1fr; column-gap: 0.9rem; }
    .flow li::after { display: none; }
    .flow b { margin: 0.3rem 0 0.1rem; grid-column: 2; }
    .flow li > span:last-child { grid-column: 2; }
}
@media (max-width: 700px) {
    .hero__facts, .lab-stats { grid-template-columns: 1fr 1fr; }
    .eras { grid-template-columns: 1fr; }
    .era { padding: 0 0 1.5rem; }
    .era--ai { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--faint); }
    .skills, .featured { grid-template-columns: 1fr; }
    .lab-count { margin-left: 0; }
}
.lab-cover-tag { position: absolute; right: 0.5rem; bottom: 0.5rem; font-size: 0.68rem; background: rgba(255,255,255,0.92); color: #5f5d58; border: 1px solid var(--faint); border-radius: 4px; padding: 0.1rem 0.4rem; }
.lab-cover--repo { background: #f7f5f0; }

/* Hero: cloud & DevOps sections ---------------------------------- */
.what { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.what__col h3 { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: var(--accent); padding-bottom: 0.6rem; border-bottom: 1.5px solid var(--fg); margin: 0 0 0.4rem; }
.what__col ul { list-style: none; margin: 0; padding: 0; }
.what__col li { padding: 0.55rem 0; border-bottom: 1px solid var(--faint); font-size: 0.92rem; line-height: 1.45; }

.journey { list-style: none; margin: 0; padding: 0; position: relative; }
.journey::before { content: ""; position: absolute; left: 8.4rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background: #d6d0c3; }
.journey li { display: grid; grid-template-columns: 8rem 1fr; gap: 1.6rem; padding: 0 0 1.25rem; position: relative; }
.journey li::before { content: ""; position: absolute; left: calc(8.4rem - 4px); top: 0.45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--accent); }
.journey__when { font-size: 0.82rem; font-weight: 600; color: var(--muted); text-align: right; padding-top: 0.1rem; }
.journey b { display: block; font-size: 1rem; color: var(--fg); }
.journey p { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; max-width: 44rem; }

.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.phases li { background: var(--panel); border: 1px solid var(--faint); border-radius: 10px; padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; }
.phases__n { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: 0.45rem; }
.phases b { font-size: 0.98rem; color: var(--fg); margin-bottom: 0.25rem; }
.phases__d { font-size: 0.86rem; color: var(--muted); line-height: 1.45; flex: 1; }
.phases__w { font-size: 0.75rem; color: #86837c; margin-top: 0.6rem; }

.tools { margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1.5px solid var(--fg); }
.tools div { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; padding: 0.7rem 0; border-bottom: 1px solid var(--faint); }
.tools dt { font-size: 0.9rem; font-weight: 600; color: var(--fg); }
.tools dd { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }

.hero__block--split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.hero__block--split .hero__h2 { font-size: 1.35rem; }

@media (max-width: 1100px) { .phases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
    .what, .phases, .hero__block--split { grid-template-columns: 1fr; }
    .journey::before { left: 0.3rem; }
    .journey li { grid-template-columns: 1fr; gap: 0.2rem; padding-left: 1.4rem; }
    .journey li::before { left: -0.05rem; }
    .journey__when { text-align: left; }
    .tools div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* Machine-readable links for AI agents */
.agent-bar { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 0.8rem; color: var(--muted); background: var(--panel); border: 1px solid var(--faint); border-radius: 6px; padding: 0.3rem 0.7rem; margin: 0 0 1.25rem; }
.agent-bar a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); text-decoration: none; }
.agent-bar a:hover { text-decoration: underline; }

/* Hero spotlight (bakerdays cake personaliser) */
.spot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.spot__img { display: block; border: 1px solid var(--faint); border-radius: 10px; overflow: hidden; background: #fff; }
.spot__img img { display: block; width: 100%; height: auto; }
.spot__text p { margin: 0 0 0.8rem; }
.spot__text ul { margin: 0 0 0.9rem; padding-left: 1.1rem; font-size: 0.93rem; }
.spot__text li { margin: 0.35rem 0; }
.spot__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.spot__links a { color: var(--accent); font-weight: 500; text-decoration: none; }
@media (max-width: 860px) { .spot { grid-template-columns: 1fr; } }

/* Hero v3: hired for, proof cards, how I use AI */
.hire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.hire__col h3, .ai-use__col h3 { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: var(--accent); padding-bottom: 0.6rem; border-bottom: 1.5px solid var(--fg); margin: 0; }
.hire__col ul, .ai-use__col ul { list-style: none; margin: 0; padding: 0; }
.hire__col li { padding: 0.55rem 0; border-bottom: 1px solid var(--faint); font-size: 0.9rem; line-height: 1.45; }
.hire__col li b { font-weight: 600; }
.cloud-strip { margin: 1.1rem 0 0; font-size: 0.9rem; color: var(--muted); background: var(--panel); border: 1px solid var(--faint); border-radius: 8px; padding: 0.7rem 1rem; }
.cloud-strip b { color: var(--fg); }
.cloud-strip a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.proof-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.proof-card { display: block; background: var(--panel); border: 1px solid var(--faint); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--fg); transition: border-color .2s, box-shadow .2s; }
.proof-card:hover { border-color: #c9c3b5; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.proof-card__th { display: block; height: 9.5rem; background: #111 center top / cover no-repeat; border-bottom: 1px solid var(--faint); }
.proof-card__t { display: block; padding: 0.75rem 0.9rem 0.9rem; }
.proof-card__tag { display: block; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.proof-card b { display: block; font-size: 0.98rem; margin: 0.2rem 0 0.25rem; }
.proof-card__d { display: block; font-size: 0.84rem; color: var(--muted); line-height: 1.45; }
.ai-use { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 1.6rem; align-items: start; }
.ai-use__intro p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.ai-use__intro .ai-use__m { color: var(--muted); font-size: 0.88rem; }
.ai-use__col li { padding: 0.5rem 0; border-bottom: 1px solid var(--faint); font-size: 0.9rem; line-height: 1.4; }
.ai-use__col li span { display: block; color: var(--muted); font-size: 0.8rem; }
@media (max-width: 1100px) { .hire, .ai-use { grid-template-columns: repeat(2, 1fr); } .proof-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .hire, .ai-use, .proof-cards { grid-template-columns: 1fr; } }
.lab-card:target { border-color: #2f6f4f; box-shadow: 0 0 0 3px rgba(47, 111, 79, .25); }