:root {
    color-scheme: light dark;

    /* Theme tokens — light-dark() picks the right value from color-scheme. */
    --mac-fg: light-dark(#000, #e8e8e8);
    --mac-window-shadow: #000;
    --mac-muted: light-dark(#555, #9a9a9a);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(light-dark(#9a9a9a, #1a1a1a) 1px, transparent 1px) 0 0 / 4px 4px, light-dark(#c0c0c0, #0d0d0d);
    overflow: hidden;
}

/* Chips (reused everywhere) */
.chip {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--mac-fg);
    background: var(--mac-chip-bg);
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
}

/* ========== Menu bar ========== */

ul[role="menu-bar"] {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--mac-fg);
}

/* Apple logo: We need it black on light backgrounds and white
   on dark, which means inverting based on (theme XOR hover/focus): system.css
   flips an item's bg from --primary to --secondary on hover, so the apple
   must invert the opposite way. light-dark() only handles colors, so we
   carry the 0/1 invert amount in a custom property. */

:root {
    --apple-invert: 0;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --apple-invert: 1;
    }
}

:root[data-theme="dark"] {
    --apple-invert: 1;
}

.apple-icon {
    filter: invert(var(--apple-invert));
}

ul[role="menu-bar"]>[role="menu-item"]:is(:hover, :focus, :focus-within) .apple-icon {
    filter: invert(calc(1 - var(--apple-invert)));
}

/* Tabular alignment for our state-marker spans (✓ / blank). */
.menu-check {
  display: inline-block;
  width: 14px;
  margin-right: 2px;
  white-space: pre;
}

/* ========== Desktop / Bento grid ========== */

.desktop {
    flex: 1;
    overflow: auto;
    padding: 20px clamp(12px, 3vw, 32px) 40px;
}

.desktop>* {
    /* Center the inner content while letting the scrollbar sit at the viewport edge. */
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(64px, auto);
    grid-auto-flow: row dense;
    gap: 12px;
}

.window {
    grid-column: span var(--span-cols, 4);
    grid-row: span var(--span-rows, 1);
    /* Classic Mac drop shadow (system.css's .window sets the background). */
    box-shadow: 4px 4px 0 0 var(--mac-window-shadow);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.window:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 0 var(--mac-window-shadow);
}

/* Card spans (desktop 12-col bento) — overridden in @media for tablet/phone. */
.card-hero {
    --span-cols: 8;
    --span-rows: 3;
}

.card-now {
    --span-cols: 4;
    --span-rows: 3;
}

.card-exp {
    --span-cols: 4;
    --span-rows: 3;
}

.card-hobbies {
    --span-cols: 4;
    --span-rows: 3;
}

.card-contact {
    --span-cols: 4;
    --span-rows: 3;
}

.card-apps {
    --span-cols: 4;
    --span-rows: 3;
}

.card-photo {
    --span-cols: 8;
    --span-rows: 3;
}

.card-blog {
    --span-cols: 4;
    --span-rows: 3;
}

.window-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

/* ========== Hero ========== */

.hero-pane {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.hero-text {
    /* Prefer 280px width; wraps below the picture when too tight. */
    flex: 1 1 280px;
    min-width: 0;
}

.hero-avatar {
    flex: 0 0 auto;
    margin: 0;
    width: clamp(120px, 16vw, 180px);
    aspect-ratio: 1 / 1;
}

.hero-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid currentColor;
    filter: grayscale(100%) contrast(1.05);
    transition: filter 200ms ease;
}

.hero-avatar:hover img {
    filter: none;
}

.hello {
    /*font-size: 14px;*/
    margin-bottom: 6px;
}

.big-name {
    line-height: 1.05;
    margin: 0 0 12px;
}

.hero-sub {
    /*font-size: 15px;*/
    max-width: 50ch;
    margin-bottom: 14px;
}

/* ========== Currently ========== */

.now-pane {
    align-items: flex-start;
    justify-content: center;
}

.now-role, .now-company {
    margin: 0;
}

.now-meta {
    font-size: 12px;
    color: var(--mac-muted);
}

.now-blurb {
    font-size: 13px;
    margin-top: 6px;
}