/* ============ TOKENS ============ */
:root {
    --bg: #F7F6F2;
    --bg-2: #EFEDE6;
    --card: #FFFFFF;
    --ink: #111418;
    --ink-2: #464B53;
    --muted: #8B9098;
    --line: #E3E0D8;
    --line-2: #D4D0C6;
    --accent: #111418;
    --accent-light: #E9ECEF;
    --dead: #E5484D;
    --radius: 14.4px;
    --gutter: 135px;          /* graph column width — set by JS */
    --hero: #EAE6DD;          /* warm stone behind the top section */
    --pad: clamp(16px, 4vw, 72px); /* side gutter: grows with the screen so the content reaches near both edges */
    --sans: 'Geist', system-ui, -apple-system, sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    font-size: 15.3px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mono { font-family: var(--mono); }
.dim { color: var(--muted); }
.wrap { margin: 0 auto; padding: 0 var(--pad); }
::selection { background: #E4E2DB; }

/* ============ TOP BAR ============ */
.topbar {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    padding: 12.6px var(--pad);
    background: transparent; /* sits on the blue top section; turns page-coloured once you scroll */
    backdrop-filter: blur(10.8px); -webkit-backdrop-filter: blur(10.8px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, background .3s;
}
.topbar.smooth { transition: border-color .3s, background .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.topbar.scrolled { border-color: var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); }
.ver {
    display: inline-flex; align-items: center; gap: 2px;
    font-family: var(--mono); font-size: 12.6px; font-weight: 500;
    text-decoration: none;
    padding: 5.4px 10.8px 5.4px 9px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--line);
}
.ver-num { display: inline-block; min-width: 6ch; font-variant-numeric: tabular-nums; }
.ver-num.tick { animation: tick .25s ease; }
@keyframes tick { from { transform: translateY(-4px); opacity: .3; } }
.nav { display: flex; gap: 19.8px; font-family: var(--mono); font-size: 13.5px; }
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover { color: var(--ink); }
.nav { align-items: center; }
.nav-pill { padding: 7.2px 14.4px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink) !important; transition: background .2s, color .2s, border-color .2s; }
.nav-pill:hover { border-color: var(--ink); }
.nav-about { color: #fff !important; background: var(--ink); border-color: var(--ink); }
.nav-about:hover { background: var(--accent); border-color: var(--accent); }
.ver-age { font-size: 9.9px; color: var(--muted); margin-left: 9px; padding-left: 9px; border-left: 1px solid var(--line-2); letter-spacing: 0; }

/* ============ HERO ============ */
/* the top section has its own soft blue background and ends in a wave, to set it apart from the projects */
.hero {
    position: relative;
    padding: 82.8px 0 82px;
    background: linear-gradient(#E2DCD0, var(--hero));
}
.hero::after { /* the wave: two soft layers in the page colour */
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 58px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 36C180 8 360 8 540 32S900 70 1080 44 1320 12 1440 28V80H0Z' fill='%23F7F6F2' fill-opacity='.45'/%3E%3Cpath d='M0 50C200 22 420 22 640 46S1060 76 1260 52 1400 36 1440 40V80H0Z' fill='%23F7F6F2'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.hero::before { /* dot grid, faded out towards the bottom */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
    background-size: 19.8px 19.8px;
    background-position: -11px -11px;
    -webkit-mask-image: linear-gradient(#000 30%, transparent);
    mask-image: linear-gradient(#000 30%, transparent);
}
.hero-grid {
    display: grid; grid-template-columns: 1fr; gap: 50.4px; align-items: end;
    position: relative; z-index: 1;
}
.prompt { font-family: var(--mono); font-size: 12.6px; color: var(--ink-2); margin-bottom: 19.8px; min-height: 1.6em; }
.prompt-sign { color: var(--accent); }
.caret { display: inline-block; width: 7.2px; height: 1.05em; background: var(--ink); vertical-align: -3px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.name {
    font-size: clamp(28.8px, 4.3vw, 48.6px);
    font-weight: 600; letter-spacing: -0.045em; line-height: 1;
    margin-left: -0.04em;
}
.name .nm { position: relative; display: inline-block; cursor: default; outline: none; }
.name .nm[data-tip]::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7.2px);
    transform: translate(-50%, 3.6px); opacity: 0; pointer-events: none;
    font-family: var(--mono); font-size: 10.8px; font-weight: 500; letter-spacing: 0; white-space: nowrap;
    color: #fff; background: var(--ink); padding: 3.6px 8.1px; border-radius: 6.3px;
    -webkit-text-stroke: 0; transition: opacity .15s, transform .15s;
}
/* label shows on hover (computers), keyboard focus, or for a second after a tap/click (.tip, set in script.js) */
.name .nm[data-tip].tip::after, .name .nm[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) { .name .nm[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); } }
.name .n2 { color: var(--hero); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }




.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3.6px 9px; margin-top: 12.6px; font-size: 15.3px; color: var(--ink-2); }
.meta .sep { color: var(--line-2); }
.meta .has-tip {
    position: relative; cursor: pointer; outline: none; transition: color .15s, text-decoration-color .15s;
    text-decoration: underline dotted; text-decoration-color: var(--muted); text-decoration-thickness: 1.5px; text-underline-offset: 3.6px;
}
.meta .has-tip.open, .meta .has-tip:focus-visible { color: var(--ink); text-decoration-color: var(--ink); }
@media (hover: hover) { .meta .has-tip:hover { color: var(--ink); text-decoration-color: var(--ink); } }
.meta-tip {
    position: absolute; left: var(--tip-x, 0px); top: calc(100% + 9px); z-index: 20; width: 288px; max-width: calc(100vw - 28.8px);
    display: flex; flex-direction: column; gap: 7.2px;
    font-size: 12.6px; line-height: 1.5; color: #fff; background: var(--ink); padding: 10.8px 12.6px; border-radius: 9px;
    box-shadow: 0 9px 27px rgba(0,0,0,.18);
    opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.meta .has-tip.open .meta-tip, .meta .has-tip:focus-visible .meta-tip { opacity: 1; transform: translateY(0); }
@media (hover: hover) { .meta .has-tip:hover .meta-tip { opacity: 1; transform: translateY(0); } }

/* "where I've lived" card: short list, so a narrower card */
.meta-tip:has(.place) { width: 180px; white-space: nowrap; gap: 5.4px; }
.place { display: flex; justify-content: space-between; gap: 14.4px; }
.place b { font-family: var(--mono); font-size: 11.7px; font-weight: 500; color: #9AA1AB; }
/* location pin before "Dublin, Ireland" */
.meta .pin { width: 15.3px; height: 15.3px; vertical-align: -3px; margin-right: 3.6px; }
.meta .pin path { fill: #E5484D; }
.meta .pin circle { fill: #fff; }
/* swimmer + boxing glove in front of those lines: phones only */
.meta-ic { display: none; width: 16.2px; height: 16.2px; vertical-align: -3.5px; margin-right: 5.4px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-swim { stroke: #2B7FD8; }
.ic-swim .f { fill: #2B7FD8; stroke: none; }
.ic-swim .b { stroke-width: 2.6; }
.ic-glove { transform: rotate(90deg); } /* turned sideways, punching to the right */
.ic-glove .f { fill: #E5484D; stroke: none; }
.ic-glove .w { stroke: #fff; stroke-width: 1.4; }
@media (max-width: 640px) { .meta-ic { display: inline-block; } }

/* profile picture (placeholder until a photo is set) */
.hero-main { display: flex; align-items: center; gap: 19.8px; }
.avatar { flex: none; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--bg-2); border: 2px solid var(--ink); display: grid; place-items: center; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.is-placeholder span { font-weight: 600; font-size: 27px; letter-spacing: -0.03em; color: var(--muted); }
.avatar[role=button] { cursor: zoom-in; transition: transform .15s; }
.avatar[role=button]:hover { transform: scale(1.04); }
.photo-lightbox { z-index: 100; }
.photo-lightbox img { max-width: min(100%, 468px); }
.avatar-sm { width: 36px; height: 36px; border-width: 1.5px; }
.avatar-sm.is-placeholder span { font-size: 12.6px; }
.footer-id { display: flex; align-items: center; gap: 10.8px; }

/* ============ SECTIONS ============ */
.section-head { margin-bottom: 18px; }
.section-head h2 { font-size: clamp(23.4px, 3vw, 30.6px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }

/* ============ PROJECTS ============ */
.projects-section { padding: 14.4px 0 32.4px; }
.group + .group { margin-top: 36px; }
.group-title { display: flex; align-items: center; gap: 9px; font-size: 15.3px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10.8px; }
.group-count { margin-left: auto; font-family: var(--mono); font-size: 11.7px; font-weight: 500; letter-spacing: 0; color: var(--muted); text-transform: none; }
.group-note { font-family: var(--mono); font-size: 9.9px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #1E7A3C; background: #DDF5E3; padding: 2px 7.2px; border-radius: 999px; }

.status { display: inline-flex; align-items: center; gap: 5.4px; font-family: var(--mono); font-size: 9.9px; padding: 2px 7.2px; border-radius: 999px; font-weight: 500; white-space: nowrap; }
.status::before { content: ''; width: 5.4px; height: 5.4px; border-radius: 50%; background: currentColor; }
.status.live { color: var(--ink); background: var(--bg-2); }
.status.shipped { color: #8A5A00; background: #FDF0D5; }
.status.dead { color: #C2272D; background: #FDE3E3; }
.status.mine { color: #1E7A3C; background: #DDF5E3; }

.icon { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; display: block; box-shadow: 0 0 0 1px rgba(17,20,24,.08); }
.icon img, .icon svg { width: 100%; height: 100%; display: block; object-fit: cover; }

/* project list */
.pr-list { border-top: 1px solid var(--ink); }
.pr {
    display: grid; grid-template-columns: 54px 32.4px minmax(0, 1fr) auto 16.2px; gap: 16.2px; align-items: center;
    width: 100%; text-align: left; padding: 15.3px 3.6px;
    border-bottom: 1px solid var(--line);
    transition: background .2s;
}
.pr:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.pr-year { font-family: var(--mono); font-size: 12.6px; color: var(--muted); }
.pr-icon { width: 32.4px; height: 32.4px; border-radius: 8.1px; }
.pr-main { display: flex; align-items: baseline; gap: 12.6px; min-width: 0; }
.pr-name { font-size: 17.1px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.pr-sub { color: var(--ink-2); font-size: 15.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-status { font-size: 12.6px; color: var(--muted); white-space: nowrap; }
.pr.dead .pr-status { color: var(--dead); }
.pr.mine .pr-status { color: #1E7A3C; background: #DDF5E3; padding: 2px 8.1px; border-radius: 999px; font-weight: 500; }
.pr.dead .pr-name { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--muted); }
.pr-arrow { font-size: 17.1px; color: var(--muted); transition: transform .2s, color .2s; }
.pr:hover .pr-arrow { transform: translateX(3.6px); color: var(--ink); }
.pr:hover .pr-name { color: var(--accent); }

.pr-big { padding: 18px 3.6px; }
.pr-big .pr-icon { width: 36px; height: 36px; border-radius: 9px; }
.pr-big { grid-template-columns: 50.4px 36px minmax(0, 1fr) auto 16.2px; }
.pr-big .pr-name { font-size: 21.6px; letter-spacing: -0.02em; }
.pr-big .pr-status { color: var(--accent); }

/* ============ ABOUT ============ */
.life-section { padding: 32.4px 0; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-text { max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.about-text p + p { margin-top: 1em; }

/* ============ LINKS ============ */
.links-section { padding: 32.4px 0 21.6px; }
.terminal { background: var(--ink); color: #D5DBE1; border-radius: 14.4px; overflow: hidden; box-shadow: 0 36px 72px -40px rgba(17,20,24,.5); }
.terminal-bar { display: flex; align-items: center; gap: 7.2px; padding: 10.8px 14.4px; background: #1B1F24; font-size: 10.8px; color: #7D8793; }
.terminal-bar i { width: 9.9px; height: 9.9px; border-radius: 50%; background: #3A4048; }
.terminal-bar i:nth-child(1) { background: #FF5F57; } .terminal-bar i:nth-child(2) { background: #FEBC2E; } .terminal-bar i:nth-child(3) { background: #28C840; }
.terminal-bar span { margin-left: auto; margin-right: auto; transform: translateX(-24px); }
.terminal-body { padding: 18px 19.8px 21.6px; font-size: 13.5px; line-height: 2; overflow-x: auto; }
.terminal-body .cmd { color: #fff; }
.terminal-body .cmd::before { content: '$ '; color: var(--accent-light); }
.remote { display: grid; grid-template-columns: 11ch 1fr; gap: 10.8px; }
.remote .rn { color: #FFC56B; }
.remote a { color: #D5DBE1; text-decoration: none; border-bottom: 1px dashed #4A525C; word-break: break-all; }
.remote a:hover { color: var(--accent-light); border-color: var(--accent-light); }

.footer { border-top: 1px solid var(--line); margin-top: 28.8px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; padding-top: 25.2px; padding-bottom: 32.4px; }
.footer-name { font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }
.footer-meta { font-size: 11.7px; color: var(--muted); margin-top: 2px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 7.2px 21.6px; font-size: 13.5px; }
.footer-nav a { color: var(--ink-2); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2.7px; }

/* burger + mobile menu (phones only) */
.burger { display: none; width: 43.2px; height: 43.2px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); position: relative; }
.burger span { position: absolute; left: 12.6px; right: 12.6px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, top .25s; }
.burger span:nth-child(1) { top: 14.4px; }
.burger span:nth-child(2) { top: 19.6px; transition: opacity .2s; }
.burger span:nth-child(3) { top: 24.8px; }
.menu-open .burger span:nth-child(1) { top: 19.6px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { top: 19.6px; transform: rotate(-45deg); }
.mnav, .mnav-title { display: none; }

/* ============ MODAL ============ */
.modal {
    margin: 0; border: 0; padding: 0; background: transparent;
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    color: var(--ink);
    outline: none;
}
.modal::backdrop { background: var(--bg); }
.modal[open] .modal-inner { animation: pageIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes pageIn { from { transform: translateY(14.4px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
html.page-open { overflow: hidden; background: var(--ink); } /* iOS rubber-band behind the page: dark like the bar */
/* top half dark, bottom half page colour: scrolling past the top shows the bar's black, past the bottom shows the page */
.modal-inner { background: linear-gradient(var(--ink) 50%, var(--bg) 50%); height: 100%; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.m-content { position: relative; z-index: 0; background: var(--bg); min-height: calc(100% - 57.6px); } /* page colour over the dark backdrop; own layer so screenshot piles never draw over the bar */
.m-page { max-width: 684px; margin: 0 auto; padding: 0 21.6px; }
/* dark top bar, so a project page clearly feels different from the homepage */
.m-bar { position: sticky; top: 0; z-index: 2; background: var(--ink); backdrop-filter: blur(10.8px); -webkit-backdrop-filter: blur(10.8px); color: #fff; }
.m-bar .m-page { display: flex; align-items: center; gap: 16.2px; padding-top: 10.8px; padding-bottom: 10.8px; }
.m-close { flex: none; font-size: 14.4px; font-weight: 500; color: #fff; padding: 8.1px 18px 8.1px 15.3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); transition: background .2s, color .2s, border-color .2s; }
.m-close:hover { color: var(--ink); background: #fff; border-color: #fff; }
.m-close-top, .m-bar.scrolled .m-close-back { display: none; }
.m-bar.scrolled .m-close-top { display: inline; }
.m-close:focus:not(:focus-visible) { outline: none; }
.m-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* keyboard users still see where they are */
/* project icon + name, slides into the bar once the big title has scrolled away */
/* clickable: takes you back to the top of the project page */
.m-bar-title { display: flex; align-items: center; gap: 10.8px; min-width: 0; padding: 4.5px 12.6px 4.5px 4.5px; border-radius: 999px; color: #fff; font-size: 16.2px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .25s, transform .25s, background .2s; }
.m-bar.past .m-bar-title { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 1139px) { .m-bar-title { margin-left: auto; padding: 4.5px 4.5px 4.5px 12.6px; } } /* top right, until there's room to line it up with the content */
.m-bar-title:hover { background: rgba(255,255,255,.1); }
.m-bar-title:focus:not(:focus-visible) { outline: none; }
.m-bar-icon { flex: none; width: 28.8px; height: 28.8px; border-radius: 7.2px; }
.m-bar-icon .icon { box-shadow: 0 0 0 1px rgba(255,255,255,.16); } /* thin ring so dark icons still stand out on the black bar */
.m-hero { padding: 39.6px 0 21.6px; }
.m-top { display: flex; gap: 16.2px; align-items: center; }
.m-icon { width: 79.2px; height: 79.2px; border-radius: 18.9px; flex: none; box-shadow: 0 12.6px 27px -14px rgba(17,20,24,.5); }
.m-name { font-size: clamp(27px, 4vw, 37.8px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
/* the one-line description, as a yellow pill under the name */
.m-sub { margin-top: 9px; }
.m-sub span { display: inline-block; font-size: 12.6px; font-weight: 500; color: var(--ink); background: #FFE066; padding: 4.5px 12.6px; border-radius: 999px; line-height: 1.35; }
.m-status { margin: 9px 0 0; }
.m-status .status { margin-left: 0; font-size: 11.7px; padding: 3.6px 10.8px; gap: 6.3px; }
.m-status .status::before { width: 6.3px; height: 6.3px; }
/* headline numbers: one soft card, big numbers, small labels. If the project has Traction, the card links down to it. */
.m-stats { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); margin-top: 19.8px; background: var(--card); border: 1px solid var(--line); border-radius: 12.6px; }
.m-stats-label { margin-top: 19.8px; font: 500 9.9px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.m-stats-label + .m-stats { margin-top: 5.4px; }
.m-stats > div { padding: 14.4px 9px 12.6px; text-align: center; }
.m-stats > div + div { border-left: 1px solid var(--line); }
.m-stats b { display: block; font-family: var(--mono); font-size: 19.8px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.m-stats span { display: block; margin-top: 2.7px; font-size: 10.8px; line-height: 1.35; color: var(--muted); }
.m-stats-link { cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.m-stats-link:hover, .m-stats-link:focus-visible { border-color: var(--muted); box-shadow: 0 9px 21.6px -14px rgba(17,20,24,.35); outline: none; }
.m-stats-go { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%) scale(.9); padding: 3.6px 10.8px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 10.8px var(--mono); white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.m-stats-link:hover .m-stats-go, .m-stats-link:focus-visible .m-stats-go { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* on phones: 4 stats go 2 x 2, more than 3 otherwise wrap into rows of 3 */
@media (max-width: 640px) {
    .m-stats:not(.m-stats-4) { grid-template-columns: repeat(min(3, var(--cols, 3)), 1fr); grid-template-columns: repeat(3, 1fr); }
    .m-stats > div:nth-child(3n+1) { border-left: 0; }
    .m-stats > div:nth-child(n+4) { border-top: 1px solid var(--line); }
    .m-stats-4 { grid-template-columns: repeat(2, 1fr); }
    .m-stats-4 > div:nth-child(n) { border-left: 0; border-top: 0; }
    .m-stats-4 > div:nth-child(2n) { border-left: 1px solid var(--line); }
    .m-stats-4 > div:nth-child(n+3) { border-top: 1px solid var(--line); }
    .m-stats b { font-size: 17.1px; }
}
.m-stack { display: flex; flex-wrap: wrap; gap: 5.4px; margin-top: 14.4px; }
.m-stack span { font-family: var(--mono); font-size: 10.8px; padding: 2.7px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.m-body { padding: 0 0 57.6px; }
.m-sec { scroll-margin-top: 57.6px; } /* clear the sticky back bar when jumped to */
/* "On this page" box: one row per section, click to scroll down to it */
.m-jump { margin: 22px 0 4px; }
.m-jump-label { font: 500 10px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.m-jump-list { position: relative; display: flex; flex-direction: column; border-left: 1px solid var(--line-2); }
/* the black bar: slides to the section you're on */
.m-jump-ind { position: absolute; left: -1.5px; top: 0; width: 2px; height: 0; border-radius: 2px; background: var(--ink); transition: transform .15s ease-out, height .15s ease-out; } /* moved by the scroll itself; the short ease just smooths out mouse-wheel steps */
.m-jump button { position: relative; display: block; padding: 4px 0 4px 14px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted); text-align: left; background: none; border: 0; cursor: pointer; transition: color .15s; }
/* hover: a lighter grey bar + nudge, so it's clear what you're about to click */
.m-jump button::before { content: ''; position: absolute; left: -1.5px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--muted); opacity: 0; transition: opacity .15s; }
.m-jump button:hover { color: var(--ink-2); }
.m-jump-t { display: inline-block; transition: transform .15s; }
.m-jump button:hover .m-jump-t { transform: translateX(2px); }
.m-jump button:hover::before { opacity: .5; }
.m-jump button.on { color: var(--ink); }
.m-jump button.on::before { opacity: 0; }
.m-jump .sym, .m-jump-arrow { display: none; }
/* wide screens: the list sits in the left margin and follows you down the page */
@media (min-width: 1140px) {
    .m-jump { position: sticky; top: 90px; z-index: 1; height: 0; margin: 0; }
    .m-jump > * { position: relative; left: -210px; width: 170px; }
    .m-jump > .m-jump-label { margin-top: 22px; }
    /* back button lines up with "On this page"; the icon + name line up with the content below */
    .m-bar .m-page { position: relative; }
    .m-close { position: absolute; left: calc(21.6px - 210px); top: 50%; transform: translateY(-50%); }
    .m-bar-title { margin-left: -4.5px; } /* its padding, so the icon edge sits exactly on the content edge */
}
.m-links-br { flex-basis: 100%; height: 0; }
.m-sec { padding: 16.2px 0; border-bottom: 1px solid var(--line); }
.m-sec:last-child { border-bottom: 0; }
.m-sec h3 { font-family: var(--mono); font-size: 10.8px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px; display: flex; align-items: center; gap: 9px; }
/* section icon: a white line icon in a dark circle */
.m-sec h3 .sym { flex: none; display: grid; place-items: center; width: 21.6px; height: 21.6px; border-radius: 50%; background: var(--bc); color: #fff; }
.m-sec h3 .sym .sym-svg { width: 11.7px; height: 11.7px; vertical-align: 0; stroke-width: 2.2; }
.sym-svg { width: .9em; height: .9em; vertical-align: -.08em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-sec-big { padding: 28.8px 0; }
.m-sec-big h3 { font-family: inherit; font-size: clamp(21.6px, 3vw, 27px); font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: -0.02em; margin-bottom: 14.4px; gap: 12.6px; }
.m-sec-big h3 .sym { width: 39.6px; height: 39.6px; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line-2); }
.m-sec-big h3 .sym .sym-svg { width: 19.8px; height: 19.8px; stroke-width: 1.9; }
.m-sec-big p, .m-sec-big li { font-size: 15.3px; }
.m-sec ul { list-style: none; }
.m-sec li { position: relative; padding-left: 14.4px; margin: 5.4px 0; color: var(--ink-2); }
.m-sec li::before { content: ''; position: absolute; left: 0; top: .65em; width: 5.4px; height: 5.4px; border-radius: 2px; background: var(--bc); }
.m-sec li b, .m-sec p b { color: var(--ink); font-weight: 600; }
.m-sec li u, .m-sec p u { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 2.7px; }
/* small square screenshot previews sitting inline in the text, like photos with a white border, slightly tilted.
   Two or more in a row are stacked into one pile; the whole pile is one button and opens the first screenshot. */
.m-chips { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin: -6px 3.6px -2px; padding: 0 3.6px; border: 0; background: none; cursor: zoom-in; }
.m-shot-chip {
    display: block; flex: none; width: 39.6px; height: 39.6px; border-radius: 7.2px; overflow: hidden;
    border: 2.2px solid #fff; background: #fff;
    box-shadow: 0 0 0 1px var(--line), 0 5.4px 12.6px -4px rgba(17,20,24,.35);
    transform: rotate(-6deg); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.m-shot-chip img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4.5px; }
.m-shot-chip + .m-shot-chip { margin-left: -30px; transform: rotate(6deg) translateY(-2px); }
.m-shot-chip:first-child { position: relative; z-index: 1; } /* the one that opens sits on top */
.m-chips:hover .m-shot-chip { box-shadow: 0 0 0 1px var(--ink), 0 9px 18px -6px rgba(17,20,24,.45); }
.m-chips:hover .m-shot-chip:first-child { transform: rotate(-8deg) translateX(-2px); }
.m-chips:hover .m-shot-chip + .m-shot-chip { transform: rotate(8deg) translateX(3.6px); }
/* 3+ screenshots: stacked on the same spot and fanned out slightly, first on top */
.m-chips.m-pile { width: 55.8px; height: 46.8px; padding: 0; }
.m-h-chips { display: inline-flex; align-self: center; margin-left: 5.4px; } /* pile beside a big heading */
.m-pile .m-shot-chip { position: absolute; left: 8.1px; top: 3.6px; margin: 0; }
.m-pile .m-shot-chip:nth-child(1) { z-index: 5; transform: rotate(-4deg); }
.m-pile .m-shot-chip:nth-child(2) { z-index: 4; transform: rotate(5deg) translate(2.7px, -1px); }
.m-pile .m-shot-chip:nth-child(3) { z-index: 3; transform: rotate(12deg) translate(5.4px, -2px); }
.m-pile .m-shot-chip:nth-child(4) { z-index: 2; transform: rotate(-11deg) translate(-5px, 0); }
.m-pile .m-shot-chip:nth-child(n+5) { z-index: 1; transform: rotate(18deg) translate(7.2px, -3px); }
.m-chips.m-pile:hover .m-shot-chip:nth-child(1) { transform: rotate(-6deg) translateY(-2px); }
.m-chips.m-pile:hover .m-shot-chip:nth-child(2) { transform: rotate(8deg) translate(5.4px, -2px); }
.m-chips.m-pile:hover .m-shot-chip:nth-child(3) { transform: rotate(17deg) translate(9.9px, -3px); }
.m-chips.m-pile:hover .m-shot-chip:nth-child(4) { transform: rotate(-15deg) translate(-9px, 0); }
.m-chips.m-pile:hover .m-shot-chip:nth-child(n+5) { transform: rotate(24deg) translate(12.6px, -4px); }
.m-sec p { color: var(--ink-2); }
.m-links { display: flex; flex-wrap: wrap; gap: 7.2px; }
.m-links a { text-decoration: none; font-weight: 500; font-size: 12.6px; padding: 8.1px 14.4px; border-radius: 999px; background: var(--ink); color: #fff; }
.m-links a:hover { background: var(--bc); }
/* follower count inside a social link button: person icon + number */
.m-link-count { display: inline-flex; align-items: center; gap: 3.6px; margin-left: 7.2px; padding: 1px 7.2px 1px 5.4px; border-radius: 999px; background: rgba(255,255,255,.16); font: 500 10.8px var(--mono); }
.m-link-count svg { width: 10.8px; height: 10.8px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.m-intro { padding-top: 16.2px; font-size: 15.3px; color: var(--ink); }
.m-shots { display: flex; flex-wrap: wrap; gap: 9px; }
/* Videos section: a grid of vertical 9:16 tiles, like a TikTok profile. Click to play in the viewer. */
.m-videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12.6px; }
.m-video { position: relative; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: var(--ink); cursor: pointer; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.m-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-video:hover { box-shadow: 0 0 0 1px var(--ink); transform: translateY(-2px); }
.m-video-play { position: absolute; left: 50%; top: 50%; width: 41.4px; height: 41.4px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 5.4px 16.2px rgba(0,0,0,.3); transition: transform .2s; }
.m-video-play::after { content: ''; position: absolute; left: 16.2px; top: 12.6px; border-style: solid; border-width: 8.1px 0 8.1px 12.6px; border-color: transparent transparent transparent var(--ink); }
.m-video:hover .m-video-play { transform: scale(1.08); }
/* fit the whole video on screen, with room for the counter below, so the controls (and volume) are always visible */
.m-lightbox video { max-width: calc(100vw - 36px); max-height: calc(100vh - 99px); max-height: calc(100dvh - 99px); border-radius: 12px; box-shadow: 0 27px 54px rgba(0,0,0,.5); background: #000; cursor: auto; }
@media (max-width: 640px) { .m-videos { grid-template-columns: repeat(2, 1fr); } }
/* Screenshots section: one big heading, then a small heading per group (e.g. each subject) */
.m-shots-group + .m-shots-group { margin-top: 23.4px; }
.m-part + .m-part { margin-top: 19.8px; }
/* the small titles inside a section (e.g. App Store, Instagram & TikTok): a red outlined pill so they stand out */
.m-part h4 { display: inline-block; font: 600 10.8px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 3.6px 10.8px; margin-bottom: 9px; }
.m-shots-group h4 { font-family: var(--mono); font-size: 10.8px; font-weight: 500; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px; }
/* yellow marker highlight on the bottom half of subject names and the big section headings */
.m-sec h3 .hl, .m-shots-group h4 .hl { background: linear-gradient(transparent 55%, var(--hl) 55%); padding: 0 2px; }
.m-sec h3 .hl { color: var(--ink); }
.m-shot {
    --ar: 1.5; flex: var(--ar) 1 calc(var(--ar) * 171px); aspect-ratio: var(--ar);
    position: relative; border-radius: 9px; overflow: hidden; background: var(--card);
    box-shadow: 0 0 0 1px var(--line); cursor: zoom-in;
    transition: box-shadow .2s, transform .2s;
}
/* exactly three screenshots: always side by side in one row (stacked on mobile, see below) */
.m-shots-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.m-shots-row .m-shot { aspect-ratio: 4 / 3; }
.m-shot img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* hover: smooth rounded ring + an expand icon in the middle */
.m-shot:hover { box-shadow: 0 0 0 1px var(--ink); }
.m-shot::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 28.8px; height: 28.8px; margin: -16px 0 0 -16px;
    border-radius: 50%; background: rgba(255,255,255,.95) no-repeat center / 13.5px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111418' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
    box-shadow: 0 5.4px 16.2px rgba(0,0,0,.3);
    opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s;
}
.m-shot:hover::after, .m-shot:focus-visible::after { opacity: 1; transform: scale(1); }
.modal-inner { position: relative; }
.m-lightbox { position: fixed; inset: 0; z-index: 5; background: rgba(17,20,24,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; place-items: center; padding: 18px; cursor: zoom-out; animation: fade .2s ease; }
.m-lightbox img { max-width: calc(100vw - 36px); max-height: calc(100vh - 99px); max-height: calc(100dvh - 99px); border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 27px 54px rgba(0,0,0,.5); animation: shotIn .25s cubic-bezier(.2,.8,.2,1); }
#modal-inner .m-lightbox img:not([style]) { opacity: 0; } /* hidden until it has been sized, so it never flashes at the wrong size */
@keyframes shotIn { from { transform: scale(.97); opacity: 0; } }
/* ✕, arrows: small frosted circles that don't compete with the screenshot */
.m-lightbox-x, .m-lightbox-nav {
    position: fixed; display: grid; place-items: center; padding: 0; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.m-lightbox-x { top: 16.2px; right: 16.2px; width: 36px; height: 36px; font-size: 15.3px; line-height: 1; }
.m-lightbox-nav { top: 50%; width: 39.6px; height: 39.6px; margin-top: -19.8px; }
@media (max-width: 640px) {
    .m-lightbox-x { width: 45px; height: 45px; font-size: 18px; top: 12.6px; right: 12.6px; }
    /* solid white with a shadow, so the arrows show up on any screenshot */
    .m-lightbox-nav { width: 41.4px; height: 41.4px; margin-top: -20.7px; background: rgba(255,255,255,.95); color: var(--ink); border-color: transparent; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
    .m-lightbox-nav svg { width: 18px; height: 18px; stroke-width: 2.6; }
    .m-lightbox-nav.prev { left: 9px; }
    .m-lightbox-nav.next { right: 9px; }
}
.m-lightbox-x:hover, .m-lightbox-nav:hover { background: #fff; color: var(--ink); transform: scale(1.06); }
/* drawn chevron, so it sits dead centre in the circle (text glyphs sit off-centre) */
.m-lightbox-nav svg { width: 17.1px; height: 17.1px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-lightbox-nav.prev { left: 16.2px; }
.m-lightbox-nav.next { right: 16.2px; }
.m-lightbox-count { position: fixed; bottom: 16.2px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 11.7px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); padding: 3.6px 10.8px; border-radius: 999px; }

/* ============ BACK TO TOP ============ */
.to-top {
    position: fixed; right: max(16px, calc(var(--pad) - 4px)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40;
    width: 43.2px; height: 43.2px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ink); color: #fff; box-shadow: 0 0 0 3px rgba(247,246,242,.9), 0 9px 24px -8px rgba(17,20,24,.5); /* light ring so it shows on dark parts too */
    opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
    transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1), background .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
@media (hover: hover) { .to-top:hover svg { transform: translateY(-2px); } }
.to-top:focus:not(:focus-visible) { outline: none; }

/* ============ DRAFT PILL ============ */
.draft-pill { position: fixed; left: 14.4px; bottom: 14.4px; z-index: 60; font-size: 9.9px; padding: 5.4px 10.8px; border-radius: 999px; background: #FFE066; color: #5C4A00; box-shadow: 0 5.4px 14.4px -6px rgba(0,0,0,.3); }

/* ============ RESPONSIVE ============ */
/* wide screens: About and Contact go two-column (heading left, content right),
   so the text and terminal don't stretch across the whole width */
@media (min-width: 1024px) {
    .life-section .wrap, .links-section .wrap { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); gap: 36px; align-items: start; }
    .life-section .section-head, .links-section .section-head { margin-bottom: 0; }
    .terminal { max-width: 900px; }
    .life-section, .links-section { padding: 50px 0; }
}
/* big monitors: scale the header and rows up a touch so they don't look tiny */
@media (min-width: 1440px) {
    .hero { padding-top: 100px; padding-bottom: 100px; }
    .hero::after { height: 72px; }
    .avatar:not(.avatar-sm) { width: 124px; height: 124px; }
    .name { font-size: clamp(48.6px, 3.6vw, 68px); }
    .meta { font-size: 15.3px; }
    .projects-section { padding-top: 21.6px; }
    .group + .group { margin-top: 50px; }
    .pr { padding-top: 18px; padding-bottom: 18px; grid-template-columns: 58.5px 36px minmax(0, 1fr) auto 18px; gap: 18px; }
    .pr-icon { width: 36px; height: 36px; border-radius: 9px; }
    .pr-name { font-size: 18.9px; }
    .pr-sub { font-size: 16.2px; }
    .pr-status { font-size: 13.5px; }
    .group-title { font-size: 16.2px; }
}
@media (max-width: 640px) {
    .topbar { padding-top: 10.8px; padding-bottom: 10.8px; }
    .nav { display: none; }
    .burger { display: block; }
    /* open menu: the whole top section turns black with white text, and the page behind dims */
    .mnav {
        display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--ink); padding: 3.6px var(--pad) 18px; border-radius: 0 0 21.6px 21.6px;
        box-shadow: 0 27px 45px -20px rgba(0,0,0,.45);
        opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1);
    }
    .menu-open .mnav { opacity: 1; transform: none; pointer-events: auto; }
    .menu-open { border-color: transparent !important; background: var(--ink) !important; transition: background .2s; }
    .mnav a {
        display: flex; justify-content: space-between; align-items: center;
        color: #fff; font-size: 24.3px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none;
        padding: 14.4px 0; border-bottom: 1px solid rgba(255,255,255,.1);
        opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .45s cubic-bezier(.2,.8,.2,1), color .15s;
    }
    .mnav a::after { content: '→'; font-size: 18px; font-weight: 400; color: rgba(255,255,255,.4); transition: transform .2s, color .2s; }
    .mnav a:active::after { transform: translateX(4px); color: #fff; }
    .mnav a:last-child { border-bottom: 0; }
    /* links slide in one after another */
    .menu-open .mnav a { opacity: 1; transform: none; }
    .menu-open .mnav a:nth-child(1) { transition-delay: .08s; }
    .menu-open .mnav a:nth-child(2) { transition-delay: .16s; }
    .menu-open .mnav a:nth-child(3) { transition-delay: .24s; }
    /* "Menu" title takes the age pill's place while the menu is open */
    .mnav-title { display: block; position: absolute; left: var(--pad); top: 50%; color: rgba(255,255,255,.5); font-size: 16.2px; font-weight: 400; letter-spacing: -0.01em; opacity: 0; transform: translateY(-50%) translateX(-6px); pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
    .menu-open .mnav-title { opacity: 1; transform: translateY(-50%); }
    .menu-open .ver { opacity: 0; pointer-events: none; }
    /* top bar items flip to white on black */
    .menu-open .ver { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
    .menu-open .ver-age { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.2); }
    .menu-open .burger { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
    .menu-open .burger span { background: #fff; }
    .ver, .burger, .burger span, .ver-age { transition: background .2s, border-color .2s, color .2s, opacity .2s, transform .25s, top .25s; }
    body::after { content: ''; position: fixed; inset: 0; z-index: 49; background: rgba(17,20,24,.35); opacity: 0; pointer-events: none; transition: opacity .25s; }
    body.menu-dim::after { opacity: 1; pointer-events: auto; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
    .meta { flex-direction: column; align-items: flex-start; gap: 2px; }
    .hero-main { flex-direction: column; align-items: flex-start; gap: 14.4px; }
    .hero-main > .avatar { width: 84px; height: 84px; }
    .hero-main > .avatar.is-placeholder span { font-size: 21.6px; }
    .name { white-space: nowrap; }
    .meta { margin-top: 9px; gap: 2.7px; }
    .meta .sep { display: none; }
    .ver { white-space: nowrap; padding-left: 8.1px; padding-right: 9px; font-size: 11.7px; }
        .ver-num { min-width: 0; }
    .ver-age { margin-left: 6.3px; padding-left: 6.3px; white-space: nowrap; }
    .hero { padding-top: 72px; padding-bottom: 66px; }
    .hero::after { height: 46px; }
    .name { font-size: 9vw; }
    .projects-section { padding-top: 10.8px; }
    .pr, .pr-big { grid-template-columns: 34.2px minmax(0, 1fr) 12.6px; gap: 12.6px; padding: 14.4px 2px; }
    .pr-big { grid-template-columns: 36px minmax(0, 1fr) 12.6px; }
    .pr-year, .pr-status { display: none; }
    .pr-main { flex-direction: column; align-items: flex-start; gap: 2px; }
    .pr-name { font-size: 16.2px; }
    .pr-sub { white-space: normal; font-size: 13.5px; line-height: 1.4; }
    .pr-icon { width: 34.2px; height: 34.2px; }
    .about-text { font-size: 16.2px; }
    .pr-big .pr-name { font-size: 18.9px; }
    .modal-inner { scrollbar-width: thin; }
    .remote { grid-template-columns: 6ch 1fr; gap: 9px; }
    .terminal-body { font-size: 11.7px; padding: 14.4px 14.4px 18px; }
    .terminal-bar span { transform: none; margin-left: 7.2px; }
    .m-page { padding: 0 14.4px; }
    .m-shot { flex-basis: calc(var(--ar) * 99px); }
    .m-shots { gap: 7.2px; }
    .m-shots-row { grid-template-columns: 1fr; }
    .m-shots-row .m-shot { aspect-ratio: var(--ar); }
    .m-hero { padding-top: 25.2px; }
    .m-icon { width: 61.2px; height: 61.2px; border-radius: 14.4px; }
    .m-name { font-size: 20.7px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 700px) { .m-lightbox:has(.m-lightbox-nav) { padding: 18px 72px; } }