/* slide the active-tab blob */
  body:has(#tab-about:checked)    .background::after { translate: 0 0; }
  body:has(#tab-projects:checked)    .background::after { translate: 100% 0; }
  body:has(#tab-resume:checked)   .background::after { translate: 200% 0; }
  body:has(#tab-contact:checked) .background::after { translate: 300% 0; }

  /* show matching panel */
  .panel { display: none; }
  body:has(#tab-about:checked)    #panel-about,
  body:has(#tab-projects:checked)    #panel-projects,
  body:has(#tab-resume:checked)   #panel-resume,
  body:has(#tab-contact:checked) #panel-contact { display: block; }

  .filters { position: absolute; width: 0; height: 0; }

  .wrapper {
    width: 100%;
    max-width: 640px;
    position: relative;
    isolation: isolate;
    z-index: 3;
  }
  .wrapper::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    display: none;                  /* the mirror replaces the old sage frame */
  }

  .background {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    color: #eef3f7;                 /* pale glass, the same in light and dark themes */
    filter: url("#gooey");
    opacity: .2;                    /* mostly clear, so the reflection shows across the whole card */
    will-change: transform;         /* its own layer: the gooey blur is kept, not redone as the mirror under it repaints */
  }
  .background::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: calc(100% - var(--tab-height));
    background: currentColor;
  }
  .background::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 25%;
    height: var(--tab-height);
    background: currentColor;
    transition: translate .2s;
  }

  .tabs {
    height: var(--tab-height);
    display: flex;
    align-items: stretch;
  }

  input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .tabs label {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--mirror-ink-soft, rgba(29, 35, 40, .7));
    position: relative;
    cursor: pointer;
    min-width: 0;
    font-size: .9em;
    white-space: nowrap;
    user-select: none;
    text-shadow: var(--mirror-halo, 0 0 6px rgba(255, 255, 255, .7));
    transition: color .8s, text-shadow .8s;
  }
  .tabs label::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background: var(--hover);
    border-radius: 12px;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
    z-index: -1;
  }
  .tabs label:hover::before { opacity: 1; }
  .tabs input:checked + label { color: var(--mirror-ink, #1d2328); font-weight: 600; }
  .tabs input:checked + label:hover::before { display: none; }
  .tabs input:focus-visible + label { outline: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
  @media (max-width: 720px) {
    .tabs label { font-size: .68em; letter-spacing: -0.03em; }
  }

  .content {
    padding: 18px;
    min-height: 10em;
    color: var(--mirror-ink, #1d2328);
    text-shadow: var(--mirror-halo, 0 0 6px rgba(255, 255, 255, .7));
    transition: color .8s, text-shadow .8s;
  }
  /* ---------- Resume tab ---------- */
  .wrapper { transition: max-width .45s ease; }
  body:has(#tab-resume:checked) .wrapper { max-width: 880px; }
  .resume {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
  }
  .cv-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 14px;
  }
  .cv-switch input { position: absolute; opacity: 0; pointer-events: none; }
  .cv-switch label {
    flex: 0 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    background: color-mix(in srgb, currentColor 7%, transparent);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    user-select: none;
  }
  .cv-switch label:hover { background: color-mix(in srgb, currentColor 13%, transparent); }
  .cv-switch input:checked + label {
    color: var(--accent-ink, #fff6e6);
    text-shadow: none;
    background: linear-gradient(180deg, var(--accent-hi, #c56a14), var(--accent, #a24f06));
    border-color: var(--accent-edge, #7e3b03);
    box-shadow: 0 0 0 1px rgba(255, 230, 160, .3) inset, 0 2px 10px var(--accent-glow, rgba(162, 79, 6, .45));
  }
  .cv-switch input:focus-visible + label { outline: 2px solid currentColor; outline-offset: 3px; }
  .cv-pane { display: none; }
  body:has(#cv-write:checked) #pane-write,
  body:has(#cv-code:checked) #pane-code { display: block; }
  .cv-pane {
    max-height: min(56vh, 560px);
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
  }
  .resume p, .resume ul, .resume ol, .resume h1, .resume h2 { margin: 0; }
  .resume ul, .resume ol { list-style: none; padding: 0; }
  .cv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }
  .cv-name {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-wrap: balance;
  }
  .cv-role { font-size: 1rem; opacity: .85; margin-top: 4px; letter-spacing: .02em; }
  .cv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .85rem; opacity: .9; text-align: right; }
  .cv-open {
    font-size: .75rem;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
  .cv-summary { margin-top: 14px; max-width: 62ch; font-size: 1rem; }
  .cv-side { margin-top: 6px !important; font-size: .85rem; opacity: .75; }
  .cv-btn {
    font: inherit;
    font-size: .85rem;
    color: inherit;
    text-shadow: inherit;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    background: color-mix(in srgb, currentColor 7%, transparent);
    text-decoration: none;
  }
  .cv-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
  .cv-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .cv-btn-note { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
  .cv-meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
  /* the resume download: a solid fill in the accent colour, so it always stands out */
  .cv-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 5px 11px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--accent-ink, #fff6e6);
    text-shadow: none;
    text-decoration: none;
    background: linear-gradient(180deg, var(--accent-hi, #c56a14), var(--accent, #a24f06));
    border: 1px solid var(--accent-edge, #7e3b03);
    box-shadow: 0 0 0 1px rgba(255, 230, 160, .3) inset, 0 2px 10px var(--accent-glow, rgba(162, 79, 6, .45));
    transition: transform .15s, box-shadow .15s, filter .15s, color .8s;
  }
  .cv-pdf svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .cv-pdf:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 230, 160, .45) inset, 0 4px 16px rgba(242, 173, 46, .6); }
  .cv-pdf:focus-visible { outline: 2px solid var(--accent, #a24f06); outline-offset: 3px; }
  @media (max-width: 720px) { .cv-meta-row { justify-content: flex-start; } }
  .cv-btn-solid { font-weight: 600; }

  .cv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 8px 28px;
    margin-top: 6px;
  }
  @media (max-width: 720px) { .cv-grid { grid-template-columns: minmax(0, 1fr); } .cv-meta { align-items: flex-start; text-align: left; } }
  .cv-h {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .75;
    margin: 18px 0 8px !important;
  }
  .cv-h-note { font-weight: 400; letter-spacing: .04em; text-transform: none; opacity: .8; margin-left: 6px; }
  /* section headings and the resume button share one accent that moves with
     the time of day: deep amber in daylight, warm light gold at night */
  .cv-h { font-size: .8rem; font-weight: 800; opacity: 1; color: var(--accent, #a24f06); }
  .cv-h-note { font-weight: 400; color: var(--mirror-ink-soft); }
  .cv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .cv-tags li {
    font-size: .8rem;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    background: color-mix(in srgb, currentColor 9%, transparent);
  }
  .cv-tags-quiet li { background: transparent; opacity: .9; }
  .cv-edu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
  }
  .cv-edu-row { margin-top: 6px; }
  .cv-edu li { padding: 2px 0; }
  .cv-item-title { font-weight: 600; }
  .cv-item-sub, .cv-item-when { font-size: .85rem; opacity: .85; }

  .cv-exp { display: grid; gap: 2px; }
  .cv-exp details { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
  .cv-exp summary {
    list-style: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 2px;
    cursor: pointer;
  }
  .cv-exp summary::-webkit-details-marker { display: none; }
  .cv-exp summary .cv-item-title::before {
    content: "+";
    display: inline-block;
    width: 1em;
    opacity: .6;
    transition: transform .2s;
  }
  .cv-exp details[open] summary .cv-item-title::before { transform: rotate(45deg); }
  .cv-exp summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }
  .cv-when { font-size: .78rem; opacity: .75; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .cv-exp details p { padding: 0 2px 10px 1em; font-size: .9rem; opacity: .92; max-width: 60ch; }

  /* ---------- Projects tab: its own colour is the brown of the soil ---------- */
  body:has(#tab-projects:checked) .wrapper { max-width: 760px; }
  .projects { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; max-height: min(64vh, 640px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
  .projects p, .projects h2, .projects h3, .projects ul { margin: 0; }
  .projects ul { list-style: none; padding: 0; }
  .pj-title { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 700; letter-spacing: -0.015em; color: var(--accent-soil, #6e4626); }
  .pj-sub { opacity: .85; margin-top: 2px !important; }
  /* a little browser window around the screenshot */
  .pj-bar {
    display: flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 10px;
    background: #1b2133;
    font-size: .68rem; color: #aeb6cc; letter-spacing: .02em;
    text-shadow: none;
  }
  .pj-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a4258; }
  .pj-bar i:nth-child(1) { background: #ff6b6b; } .pj-bar i:nth-child(2) { background: #ffd166; } .pj-bar i:nth-child(3) { background: #5bd38a; }
  .pj-bar span { margin-left: 8px; padding: 2px 10px; border-radius: 6px; background: #11172a; flex: 1; max-width: 220px; }
  /* project rows: one line each, with a preview that pops up on hover */
  .pj-list { margin-top: 18px !important; }
  .pj-list li + li .pj-row { border-top: 0; }
  .pj-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 16px;
    padding: 14px 4px;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    color: inherit; text-decoration: none;
    transition: padding .25s ease, background .25s ease;
  }
  .pj-row:hover, .pj-row:focus-visible { padding-left: 12px; background: color-mix(in srgb, currentColor 6%, transparent); }
  .pj-row:focus-visible { outline: 2px solid var(--accent-soil, #6e4626); outline-offset: 2px; }
  .pj-row-name { font-size: 1.3rem; font-weight: 700; color: var(--accent-soil, #6e4626); }
  .pj-row-what { font-size: .9rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pj-row-go { font-size: 1.1rem; }
  @media (max-width: 600px) { .pj-row { grid-template-columns: minmax(0, 1fr) auto; } .pj-row-what { display: none; } }

  .pj-soon { margin-top: 18px !important; font-size: .9rem; opacity: .75; font-style: italic; }

  /* the floating preview for option B */
  .pj-float {
    position: fixed; left: 0; top: 0; z-index: 2147482000;
    width: min(380px, calc(100vw - 24px)); border-radius: 12px; overflow: hidden;
    background: #0d1220;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .25);
    pointer-events: none;
    opacity: 0; scale: .92;
    transition: opacity .2s ease, scale .2s ease;
  }
  .pj-float.on { opacity: 1; scale: 1; }
  .pj-float-view { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
  .pj-float-view img { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; transition: opacity .6s ease; }
  .pj-float-view img.show { opacity: 1; }
  @media (hover: none) { .pj-float { display: none; } }
  @media (prefers-reduced-motion: reduce) { .pj-view img, .pj-float, .pj-float-view img { transition: none; } }

  /* ---------- About Me tab ---------- */
  body:has(#tab-about:checked) .wrapper { max-width: 820px; }
  .about { font-family: var(--font-ui); font-size: 15px; line-height: 1.65; max-height: min(64vh, 620px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
  .about p, .about h2, .about h3, .about ul, .about figure { margin: 0; }
  .about ul { list-style: none; padding: 0; }
  .ab-grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 26px; align-items: start; }
  /* highlighted words: bold, in About Me's own sky blue, which shifts from deep
     blue by day to a light, glowing blue at night */
  .about mark { background: none; color: var(--accent-sky, #1756a6); font-weight: 700; }
  .ab-photo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-width: 100%;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .35);
  }
  @media (max-width: 680px) { .ab-grid { grid-template-columns: minmax(0, 1fr); } .ab-photo { width: 170px; max-width: 60%; order: 2; } }
  .ab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ab-photo::after {          /* a touch of the card's shine on the glass over the photo */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%);
    pointer-events: none;
  }
  .ab-text { display: grid; gap: 12px; }
  .ab-title { font-size: clamp(1.9rem, 4.4vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; margin-bottom: 4px !important; }
  .ab-text p { max-width: 62ch; }
  .ab-place { margin-top: 4px !important; font-size: .85rem; letter-spacing: .02em; opacity: .8; }

  /* ---------- Contact tab ---------- */
  .contact { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; }
  .contact p, .contact ul, .contact h2 { margin: 0; }
  /* Contact's own colour: grass green, deep by day and fresh light green at night */
  .ct-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; color: var(--accent-grass, #23702a); }
  .ct-icon { color: var(--accent-grass, #23702a); }
  .ct-label { color: var(--accent-grass, #23702a); }
  .ct-lede { margin-top: 6px; max-width: 52ch; opacity: .9; }
  .ct-list { list-style: none; padding: 0; margin-top: 18px !important; display: grid; gap: 4px; }
  .ct-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 2px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  }
  .ct-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ct-text { display: flex; flex-direction: column; min-width: 0; }
  .ct-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .ct-value { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
  @media (max-width: 480px) {
    .ct-row { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; }
    .ct-icon { width: 18px; height: 18px; }
    .ct-value { font-size: .95rem; }
    .ct-btn { min-width: 0; padding: 5px 11px; }
  }
  .ct-btn {
    font: inherit;
    font-size: .78rem;
    letter-spacing: .06em;
    color: inherit;
    text-shadow: inherit;
    text-decoration: none;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    background: color-mix(in srgb, currentColor 7%, transparent);
    min-width: 72px;
    text-align: center;
  }
  .ct-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
  .ct-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .ct-foot { margin-top: 14px !important; font-size: .82rem; opacity: .75; }

  /* placeholder copy renders as scribbles until real text goes in */
  .blank {
    font-family: var(--font-blank);
    line-height: 1.8;
    margin: 0;
  }

  @media (max-width: 420px) {
    .tabs label { font-size: .8em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .background::after, .tabs label::before { transition: none; }
    body, .sky-bg, .track, .sun::before { animation: none; }
  }

  /* accent-coloured words fade with the text when the ink flips dark/light */
  .about mark, .cv-h, .pj-title, .pj-row-name, .ct-title, .ct-icon, .ct-label { transition: color .8s; }