/* Homepage layer (2026-11-01). The homepage is version 5e (html[data-idea="13"], set in index.html); the other versions here are
   kept but unused (the Options menu was removed 2026-11-01; it is archived in _archive/_ideas-options-2026-11-01). Desktop only. */

@media (min-width: 1181px) {
  /* shared: whichever column is visually first has no left hairline */
  html[data-idea] body[data-hm] .spread > * { border-left: 1px solid var(--line); }

  /* ---------- 2 · Work-forward: portrait column removed; ECS gets the width ---------- */
  html[data-idea="2"] body[data-hm] .spread { grid-template-columns: minmax(280px, 24fr) minmax(0, 76fr); }
  html[data-idea="2"] body[data-hm] .portrait { display: none; }
  html[data-idea="2"] body[data-hm] .id { border-left: 0; }

  /* ---------- 3 · Portrait as the right bookend: identity | work | portrait ---------- */
  html[data-idea="3"] body[data-hm] .spread { grid-template-columns: minmax(260px, 21fr) minmax(0, 62fr) minmax(200px, 17fr); }
  html[data-idea="3"] body[data-hm] .id { order: 1; border-left: 0; }
  html[data-idea="3"] body[data-hm] .book { order: 2; }
  html[data-idea="3"] body[data-hm] .portrait { order: 3; }

  /* ---------- 4 · Work first: ECS where the eye starts; identity and portrait follow ---------- */
  html[data-idea="4"] body[data-hm] .spread { grid-template-columns: minmax(0, 62fr) minmax(260px, 21fr) minmax(200px, 17fr); }
  html[data-idea="4"] body[data-hm] .book { order: 1; border-left: 0; }
  html[data-idea="4"] body[data-hm] .id { order: 2; }
  html[data-idea="4"] body[data-hm] .portrait { order: 3; }

  /* ---------- 5 · Portrait behind the identity text: two columns, the photo fills the left column and fades out ---------- */
  html[data-idea="5"] body[data-hm] .spread { grid-template-columns: minmax(300px, 27fr) minmax(0, 73fr); }
  html[data-idea="5"] body[data-hm] .portrait { grid-column: 1; grid-row: 1; border-left: 0; clip-path: none; }
  html[data-idea="5"] body[data-hm] .portrait::after { content: ""; position: absolute; inset: 0; z-index: 1; clip-path: none;
    background: linear-gradient(#151618 8%, rgba(21, 22, 24, .35) 34%, rgba(21, 22, 24, .2) 52%, #151618 74%); box-shadow: none; }
  html[data-idea="5"] body[data-hm] .portrait img { object-position: 50% 22%; filter: grayscale(.35) brightness(.8); }
  html[data-idea="5"] body[data-hm] .portrait figcaption { display: none; }
  html[data-idea="5"] body[data-hm] .id { grid-column: 1; grid-row: 1; position: relative; z-index: 2; border-left: 0; background: transparent !important; }
  html[data-idea="5"] body[data-hm] .id .impact { background: #151618; }
  html[data-idea="5"] body[data-hm] .book { grid-column: 2; grid-row: 1; }

  /* ---------- 6 · Portrait above the identity: photo band on top of the left column ---------- */
  html[data-idea="6"] body[data-hm] .spread { grid-template-columns: minmax(300px, 26fr) minmax(0, 74fr); grid-template-rows: minmax(0, 30fr) minmax(0, 70fr); }
  html[data-idea="6"] body[data-hm] .portrait { grid-column: 1; grid-row: 1; border-left: 0; border-bottom: 1px solid var(--line); }
  html[data-idea="6"] body[data-hm] .portrait img { object-position: 50% 28%; }
  html[data-idea="6"] body[data-hm] .portrait figcaption { display: none; }
  html[data-idea="6"] body[data-hm] .id { grid-column: 1; grid-row: 2; border-left: 0; padding-top: 22px; }
  html[data-idea="6"] body[data-hm] .id .name { font-size: clamp(36px, 3vw, 48px); }
  html[data-idea="6"] body[data-hm] .book { grid-column: 2; grid-row: 1 / span 2; }

  /* ---------- 7 · ECS full height; Vision and Aggressive Pickup stacked in a side column (no portrait) ---------- */
  html[data-idea="7"] body[data-hm] .spread { grid-template-columns: minmax(280px, 24fr) minmax(0, 76fr); }
  html[data-idea="7"] body[data-hm] .portrait { display: none; }
  html[data-idea="7"] body[data-hm] .id { border-left: 0; }
  html[data-idea="7"] body[data-hm] .work-grid { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-idea="7"] body[data-hm] .work-grid .prem { grid-column: 1; grid-row: 1 / span 2; }
  html[data-idea="7"] body[data-hm] .work-grid .vibe.wide { grid-column: 2; grid-row: 1; }
  html[data-idea="7"] body[data-hm] .work-grid .vibe.apu { grid-column: 2; grid-row: 2; }
  html[data-idea="7"] body[data-hm] .work-grid > .vibe.wide .im :is(img, video) { top: 40%; left: 10%; width: 120%; }
  html[data-idea="7"] body[data-hm] .work-grid > .vibe.apu .im img { top: 40%; height: 60%; }
  html[data-idea="7"] body[data-hm] .work-grid > .vibe:is(.wide, .apu) .cap .go { display: none; }

  /* ---------- 8 · Type-led: the intro is the headline, the name a small label; no portrait ---------- */
  html[data-idea="8"] body[data-hm] .spread { grid-template-columns: minmax(340px, 33fr) minmax(0, 67fr); }
  html[data-idea="8"] body[data-hm] .portrait { display: none; }
  html[data-idea="8"] body[data-hm] .id { border-left: 0; padding-top: 32px; }
  html[data-idea="8"] body[data-hm] .id .name { font: 500 13px/16px var(--m3, var(--sans)); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
  html[data-idea="8"] body[data-hm] .id .intro { margin-top: 18px; max-width: none; font: 400 clamp(22px, 1.75vw, 30px)/1.3 'Google Sans', var(--sans); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }

  /* ---------- 9 · Secondaries as text rows: ECS takes the whole work column; Vision and Aggressive Pickup become one-line links ---------- */
  html[data-idea="9"] body[data-hm] .work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  html[data-idea="9"] body[data-hm] .work-grid .prem { grid-column: 1 / -1; grid-row: 1; }
  html[data-idea="9"] body[data-hm] .work-grid > .vibe:is(.wide, .apu) { grid-row: 2; pointer-events: auto; cursor: pointer; padding: 0 14px 14px; }
  html[data-idea="9"] body[data-hm] .work-grid > .vibe.wide { grid-column: 1; }
  html[data-idea="9"] body[data-hm] .work-grid > .vibe.apu { grid-column: 2; }
  html[data-idea="9"] body[data-hm] .work-grid > .vibe:is(.wide, .apu) .im { display: none; }
  html[data-idea="9"] body[data-hm] .work-grid > .vibe:is(.wide, .apu) .cap { position: static; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
  html[data-idea="9"] body[data-hm] .work-grid > .vibe:is(.wide, .apu):hover .cap { color: var(--ink); }
  html[data-idea="9"] body[data-hm] .work-grid > .vibe:is(.wide, .apu):hover .cap .go i { transform: translateX(4px); }
  html[data-idea="9"] body[data-hm] .work-grid > .vibe:is(.wide, .apu) .cap .go i { display: inline-block; transition: transform .2s ease; }
}

/* ---------- 5b (idea 10) · Portrait behind identity, more of James: the photo runs the full column at near full strength, head
   just under the intro and body down behind the Impact list; only thin fades at the top and bottom keep the text readable ---------- */
@media (min-width: 1181px) {
  html[data-idea="10"] body[data-hm] .spread { grid-template-columns: minmax(300px, 27fr) minmax(0, 73fr); }
  html[data-idea="10"] body[data-hm] .portrait { grid-column: 1; grid-row: 1; border-left: 0; clip-path: none; }
  html[data-idea="10"] body[data-hm] .portrait::after { content: ""; position: absolute; inset: 0; z-index: 1; clip-path: none; box-shadow: none;
    background: linear-gradient(#151618 0%, rgba(21, 22, 24, .55) 22%, transparent 36%, transparent 62%, rgba(21, 22, 24, .7) 80%, #151618 100%); }
  html[data-idea="10"] body[data-hm] .portrait img { object-position: 50% 0; top: 14%; height: 86%; filter: none; }
  html[data-idea="10"] body[data-hm] .portrait figcaption { display: none; }
  html[data-idea="10"] body[data-hm] .id { grid-column: 1; grid-row: 1; position: relative; z-index: 2; border-left: 0; background: transparent !important; }
  html[data-idea="10"] body[data-hm] .id .impact, html[data-idea="10"] body[data-hm] .id .impact .ph { background: transparent; }
  html[data-idea="10"] body[data-hm] .id .impact .num.q { background: #151618; }
  html[data-idea="10"] body[data-hm] .book { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1181px) {   /* 5b tuning: scale the photo up so the head lands just under the intro and the crop runs head to hips, as in James's reference */
  html[data-idea="10"] body[data-hm] .portrait img { top: -31%; height: 135%; object-position: 50% 0; }
  html[data-idea="10"] body[data-hm] .portrait::after { background: linear-gradient(#151618 0%, rgba(21, 22, 24, .7) 20%, transparent 32%, transparent 66%, rgba(21, 22, 24, .75) 84%, #151618 100%); }
  html[data-idea="10"] body[data-hm] .id .impact .ph { background: rgba(21, 22, 24, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* ---------- 5c (idea 11) · 5b with the nav inside the side sheet and more air around James ----------
   The top bar leaves the full width and becomes the first row of the left sheet (Work · LinkedIn · Contact Me); the work column
   runs the full screen height. The nav photo + name mark is hidden: the sheet is already James's photo with his name under the bar.
   The photo is zoomed out (118%, was 135%) so there is headroom and space on both sides of him. */
@media (min-width: 1181px) {
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) { --sw: clamp(320px, 27vw, 460px); }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .spread { grid-template-columns: var(--sw) minmax(0, 1fr); height: 100vh; height: 100dvh; margin-top: 0; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body.hxf header.hud { position: fixed; top: 0; left: 0; width: var(--sw); height: 52px; margin: 0; padding: 0 0 0 14px;
    background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body.hxf header.hud .mark { display: none; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body.hxf header.hud nav[aria-label="Primary"] { margin-left: 0; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body.hxf header.hud nav[aria-label="Primary"] a.it { padding: 0 14px; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body.hxf header.hud nav.sep { padding: 0 14px; border-left: 0; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body.hxf header.hud a.go { margin: 0 14px 0 0; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body.hxf header.hud::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4) 50%, transparent) bottom / 80% 1px no-repeat; }

  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .portrait { grid-column: 1; grid-row: 1; border-left: 0; clip-path: none; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .portrait::after { content: ""; position: absolute; inset: 0; z-index: 1; clip-path: none; box-shadow: none;
    background: linear-gradient(#151618 0%, rgba(21, 22, 24, .7) 24%, transparent 38%, transparent 66%, rgba(21, 22, 24, .75) 84%, #151618 100%); }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: -17%; height: 118%; object-position: 50% 0; filter: none; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .portrait figcaption { display: none; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .id { grid-column: 1; grid-row: 1; position: relative; z-index: 2; border-left: 0; padding-top: 80px; background: transparent !important; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .id .impact, html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .id .impact .ph { background: transparent; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .id .impact .ph { background: rgba(21, 22, 24, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .id .impact .num.q { background: #151618; }
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .book { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1181px) {   /* 5c air: hair top ~40px under the intro at every height (head top sits at ~41% of the photo), zoomed out to 108% */
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: calc(290px - 44.3%); height: 108%; }
}
@media (min-width: 1181px) {   /* 5c zoomed out further (2026-11-01, James): 88% of the sheet height (was 108%), hair top still ~40px under the intro;
     the photo's own bottom edge fades out so it never shows a seam where it ends above the sheet's bottom */
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: calc(296px - 36.1%); height: 88%;
    -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
}
@media (min-width: 1181px) {   /* 5c: a little more zoomed out (78%) and shifted right so James's outstretched hand is in frame (2026-11-01) */
  html:is([data-idea="11"], [data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: calc(296px - 32%); height: 78%; object-position: 30% 0; }
}

/* ---------- 5d (idea 12) · 5c with every live page in the side sheet: the top row stays (Work · LinkedIn · Contact Me) and a second
   row lists the case studies under Work in the same uppercase nav type (Proximity: they sit under the Work they belong to) ---------- */
@media (min-width: 1181px) {
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud { flex-wrap: wrap; align-content: flex-start; height: 88px; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud > .grp { height: 52px; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub { flex: 1 0 100%; display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 28px 0 14px; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub a { padding: 8px 0; font: 500 .6875rem/1 var(--display, 'Google Sans', sans-serif); letter-spacing: .1em; text-transform: uppercase;
    color: #9aa0a6; transition: color .15s; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub a:is(:hover, :focus-visible) { color: #fff; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .id { padding-top: 116px; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: calc(332px - 32%); }
}

@media (min-width: 1181px) {   /* 5d fit: top row never wraps on a narrow sheet; tighter rows (28px) so the photo keeps its room */
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud { flex-wrap: wrap; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud > .grp:first-of-type { flex: 1 1 0; min-width: 0; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud > .grp:nth-of-type(2) { flex: none; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .id { padding-top: 196px; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: calc(408px - 32%); }
}
/* 5d: the photo is the background of the whole side sheet (2026-11-01, James) — top to bottom behind the nav, list, name, intro and
   Impact; no bottom fade-out, no solid quote panel. A scrim keeps the text readable: darker at the top (nav + name), clear through
   the middle, darker again at the bottom (Impact). */
@media (min-width: 1181px) {
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: 0; height: 100%; object-position: 30% 50%; -webkit-mask-image: none; mask-image: none; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .portrait::after { background: linear-gradient(rgba(21, 22, 24, .82) 0%, rgba(21, 22, 24, .55) 30%, rgba(21, 22, 24, .1) 48%,
    rgba(21, 22, 24, .1) 58%, rgba(21, 22, 24, .7) 76%, rgba(21, 22, 24, .9) 100%); }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .id .impact .num.q { background: transparent; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub a:not(:hover):not(:focus-visible) { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .id :is(.name, .intro) { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
}
@media (min-width: 1181px) { html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { object-position: 37% 50%; } }   /* hand and far shoulder both in frame */
@media (min-width: 1181px) {   /* 5d: body higher (2026-11-01, James) — photo zoomed out to 80% of the sheet with the hair ~20px under the intro, so head,
     torso and hands sit above the Impact rows; it still runs behind everything above, and its bottom edge fades into the dark sheet */
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: calc(385px - 32.8%); height: 80%;
    -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
}

/* 5d case studies as list rows like the Impact rows (2026-11-01, James: "similar to the startup and mentoring bits"): a small
   thumbnail, the name in sentence case with an arrow, a hairline above each row, the same hover ground. The header's own bottom
   line closes the last row, so there is one line there, not two. */
@media (min-width: 1181px) {
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud { height: auto; padding-bottom: 0; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub { display: block; height: auto; padding: 0; margin-left: -14px; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub ul { margin: 0; padding: 0; list-style: none; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub li { margin: 0; padding: 0; border-top: 1px solid var(--line); }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub li::before { content: none; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub a { display: flex; align-items: center; gap: 14px; padding: 5px 28px;
    font: 400 15px/20px var(--m3, 'Google Sans', sans-serif); letter-spacing: 0; text-transform: none; color: var(--ink, #e1e3e4); transition: background .15s ease; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub img { flex: none; width: 40px; height: 28px; object-fit: cover; }
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud .hm-sub a:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .07); outline: none; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .id { padding-top: 220px; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: calc(409px - 32.8%); }
}

/* 5d, links under the intro (2026-11-01, James): the top bar is gone; name and intro open the sheet, then every page as a text
   link row like the Impact rows (no thumbnails): Work, the four case studies, LinkedIn, Contact Me. Hairlines fade out to the right
   so they don't cut across James's face; rows are transparent so the photo runs behind them. */
@media (min-width: 1181px) {
  html:is([data-idea="12"], [data-idea="13"]) body.hxf header.hud { display: none; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .id { padding-top: 28px; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .hm-links { margin: 18px -28px 0; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .hm-links ul { margin: 0; padding: 0; list-style: none; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .hm-links li { margin: 0; padding: 0; border-top: 1px solid;
    border-image: linear-gradient(90deg, rgba(225, 227, 228, .2), rgba(225, 227, 228, .2) 40%, transparent 85%) 1; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .hm-links li::before { content: none; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .hm-links a { display: block; padding: 8px 28px; font: 400 15px/20px var(--m3, 'Google Sans', sans-serif); color: var(--ink, #e1e3e4);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .7); transition: background .15s ease, color .15s ease; }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .hm-links a:is(:hover, :focus-visible) { color: #fff; outline: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03) 60%, transparent); }
  html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .portrait img { top: calc(225px - 32.8%); object-position: 22% 50%; }
}
@media (min-width: 1181px) and (max-height: 860px) { html:is([data-idea="12"], [data-idea="13"]) body[data-hm] .hm-links a { padding-block: 6px; } }

/* ---------- 5e (idea 13) · 5d's side sheet + the whole Work page on the right (2026-11-01, James: "change the entire right hand
   side to be a duplicate of the Works page"). The right column holds projects.html in a frame (always in sync with the real page),
   minus its top bar; it scrolls on its own while the sheet stays put, so the screen itself never scrolls. Links open in the main window. ---------- */
@media (min-width: 1181px) {
  html[data-idea="13"] body[data-hm] .book > :not(.hm-col) { display: none; }
  html[data-idea="13"] body[data-hm] .book { position: relative; }
  html[data-idea="13"] body[data-hm] .hm-col { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg, #151618);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; container: hmcol / size; }   /* scrolls on its own, as the frame did; work.css sizes against its width and height */
}

/* 5e sheet (2026-11-01, James: "only Contact Me and LinkedIn", with the cooler Contact Me styling back): under the intro, the real
   nav Contact Me button (its shine layer, rim and hover flare come from contact.css) at the nav's size and type, LinkedIn beside it
   as a plain uppercase nav link. No page links; the Work page is already on the right. */
@media (min-width: 1181px) {
  html[data-idea="13"] body[data-hm] .hm-links { display: none; }
  html[data-idea="13"] body[data-hm] .hm-cta { display: flex; align-items: center; gap: 24px; margin-top: 22px; }
  html[data-idea="13"] body[data-hm] .hm-cta a.go { display: inline-flex; align-items: center; height: 40px; margin: 0; padding: 0 28px; clip-path: none; border-radius: 0 !important;
    font: 500 .75rem/1 var(--display, 'Google Sans', sans-serif); letter-spacing: .12em; text-transform: uppercase; }
  html[data-idea="13"] body[data-hm] .hm-cta .hm-li { font: 500 .75rem/1 var(--display, 'Google Sans', sans-serif); letter-spacing: .12em; text-transform: uppercase;
    color: #c4c7c8; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); transition: color .15s ease; }
  html[data-idea="13"] body[data-hm] .hm-cta .hm-li:is(:hover, :focus-visible) { color: #fff; }
}
@media (min-width: 1181px) {   /* 5e: photo lower (2026-11-01, James) — hair ~30px under the Contact Me / LinkedIn row instead of behind it */
  html[data-idea="13"] body[data-hm] .portrait img { top: calc(300px - 32.8%); }
}

/* 5e below the desktop layout (2026-11-01, 5e is the homepage): the framed Work column is desktop-only; narrower screens keep the
   home cards in the right column. The top bar keeps its links there; the moved Contact Me sits in the sheet. */
/* (until 2026-11-02 the project column was hidden here; the 5e narrow layout at the end of this file shows it) */

/* Contact Me in the side sheet takes the site's frame shape (2026-11-01, James: "fit the theme"): the same chamfer as the project
   frames (top-left + bottom-right cut), with the hairline rim carried along both cuts so the edge reads unbroken; the button's own
   shine layer and hover from contact.css stay. */
@media (min-width: 1181px) {
  html[data-idea="13"] body[data-hm] .hm-cta a.go { --c: 10px; height: 42px; padding: 0 30px; border-radius: 0 !important;
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  html[data-idea="13"] body[data-hm] .hm-cta a.go::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: none; filter: none;
    background:
      linear-gradient(135deg, transparent calc(50% - .75px), rgba(225, 227, 230, .5) 50%, transparent calc(50% + .75px)) top left / var(--c) var(--c) no-repeat,
      linear-gradient(135deg, transparent calc(50% - .75px), rgba(225, 227, 230, .5) 50%, transparent calc(50% + .75px)) bottom right / var(--c) var(--c) no-repeat; }
  html[data-idea="13"] body[data-hm] .hm-cta a.go:is(:hover, :focus-visible)::before { background:
      linear-gradient(135deg, transparent calc(50% - .75px), #fff 50%, transparent calc(50% + .75px)) top left / var(--c) var(--c) no-repeat,
      linear-gradient(135deg, transparent calc(50% - .75px), #fff 50%, transparent calc(50% + .75px)) bottom right / var(--c) var(--c) no-repeat; }
}
/* the moved top-bar LinkedIn link keeps its inner <span>; strip the bar's pill styling from it in the sheet */
@media (min-width: 1181px) { html[data-idea="13"] body[data-hm] .hm-cta .hm-li span { display: inline; padding: 0; background: none !important; clip-path: none; border-radius: 0; font: inherit; letter-spacing: inherit; color: inherit; } }
@media (min-width: 1181px) { html[data-idea="13"] body[data-hm] .hm-cta .hm-li { display: inline-flex; align-items: center; height: 42px; padding: 0 6px; } }   /* full-height hit area */
/* side-sheet photo in black and white (2026-11-01, James: "make the image of me in the sidesheet monochromatic") */
html[data-idea="13"] body[data-hm] .portrait img { filter: grayscale(1) contrast(1.05); }
/* side-sheet link rows as name banners (2026-11-02, James: "these should have that gradient effect we used to have with the
   James Kim button"): like the old top-bar mark, each photo is a strip along the row's left edge, muted, fading gradually into
   the row from about halfway; the label overlaps the fade; a faint diagonal sheen crosses the row */
html[data-idea="13"] body[data-hm] .id .impact .ph { overflow: hidden; }
html[data-idea="13"] body[data-hm] .id .impact .ph .im { position: absolute; left: 0; top: 0; bottom: 0; width: 132px !important; height: auto !important; clip-path: none !important;
  background: none; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0, 0, 0, .5) 72%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0, 0, 0, .5) 72%, transparent 100%); }
html[data-idea="13"] body[data-hm] .id .impact .ph .im img { inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 40%;
  filter: saturate(.75) brightness(.85) contrast(1.05); transition: filter .3s; }
html[data-idea="13"] body[data-hm] .id .impact .ph:is(:hover, :focus-visible) .im img { filter: saturate(1) brightness(1) contrast(1.05); }
html[data-idea="13"] body[data-hm] .id .impact .ph::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .06) 42%, transparent 54%); }
html[data-idea="13"] body[data-hm] .id .impact .ph figcaption { position: relative; z-index: 2; margin-left: 70px; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
/* rows as tall as the Contact Me button, photos black and white until hover/focus (2026-11-02, James) */
html[data-idea="13"] body[data-hm] .id .impact .ph { height: 42px; min-height: 0; padding-top: 0; padding-bottom: 0; align-items: center; }
html[data-idea="13"] body[data-hm] .id .impact .ph .im img { filter: grayscale(1) brightness(.85) contrast(1.05); }
html[data-idea="13"] body[data-hm] .id .impact .ph:is(:hover, :focus-visible) .im img { filter: none; }
/* projects column built in (2026-11-02; was projects.html in an iframe, see work.css): what the frame's injected style did */
html[data-idea="13"] body[data-hm] .hm-col .hm-main > section.gs-sec:first-of-type { padding-top: 32px !important; }
/* without JavaScript nothing fades the cards in (editorial.js), so they simply show */
html:not(.js) .hm-col .reveal { opacity: 1; transform: none; }
/* the project column's scrollbar was the browser's light one (a white strip down the right edge); the frame had been dark */
html[data-idea="13"] body[data-hm] .hm-col { color-scheme: dark; scrollbar-color: #3c3e41 transparent; }

/* ---------- 5e below 1181px (2026-11-02, James: phones and tablets got an older homepage with no projects) ----------
   One column that scrolls: the side sheet as a full-screen opening (photo behind, name, intro, Contact Me + LinkedIn at the top,
   the two link rows and the quote at the bottom), then the project column in the page's flow. No top bar, as on desktop. */
@media (max-width: 1180px) {
  html[data-idea="13"] body.hxf header.hud { display: none; }
  html[data-idea="13"] body[data-hm] .spread { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; margin: 0; padding: 0; border: 0; }
  html[data-idea="13"] body[data-hm] .portrait { grid-column: 1; grid-row: 1; position: relative; margin: 0; border: 0; clip-path: none; height: auto; min-height: 0; aspect-ratio: auto; overflow: hidden; }
  html[data-idea="13"] body[data-hm] .portrait img { position: absolute; left: 0; top: 14%; width: 100%; height: 66%; object-fit: cover; object-position: 34% 18%;
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); }
  html[data-idea="13"] body[data-hm] .portrait::after { content: ""; position: absolute; inset: 0; z-index: 1; clip-path: none; box-shadow: none;
    background: linear-gradient(rgba(21, 22, 24, .92) 0%, rgba(21, 22, 24, .6) 34%, rgba(21, 22, 24, .1) 52%, rgba(21, 22, 24, .55) 78%, #151618 100%); }
  html[data-idea="13"] body[data-hm] .portrait figcaption { display: none; }
  html[data-idea="13"] body[data-hm] .id { grid-column: 1; grid-row: 1; position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100svh;
    margin: 0; padding: 28px clamp(20px, 5vw, 40px) 0; border: 0; background: transparent !important; }
  html[data-idea="13"] body[data-hm] .id :is(.name, .intro) { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); max-width: 34em; }
  html[data-idea="13"] body[data-hm] .id .impact { margin: auto calc(-1 * clamp(20px, 5vw, 40px)) 0; padding: 0; border: 0; background: transparent; }
  html[data-idea="13"] body[data-hm] .id .impact .bd { padding: 0; background: transparent; }
  html[data-idea="13"] body[data-hm] .id .impact .row { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; background: transparent; }
  html[data-idea="13"] body[data-hm] .id .impact .row > * { width: auto; margin: 0; border-left: 0; border-right: 0; }
  html[data-idea="13"] body[data-hm] .id .impact .row > .ph { order: 1; border-top: 1px solid rgba(225, 227, 228, .16); padding: 0 clamp(20px, 5vw, 40px); }
  html[data-idea="13"] body[data-hm] .id .impact .row > .num.q { order: 2; border-top: 1px solid rgba(225, 227, 228, .16); padding: 20px clamp(20px, 5vw, 40px) 24px; background: transparent; }
  html[data-idea="13"] body[data-hm] .hm-cta { display: flex; align-items: center; gap: 24px; margin-top: 22px; }
  html[data-idea="13"] body[data-hm] .hm-cta a.go { display: inline-flex; align-items: center; height: 42px; margin: 0; padding: 0 30px;
    font: 500 .75rem/1 var(--display, 'Google Sans', sans-serif); letter-spacing: .12em; text-transform: uppercase; }
  html[data-idea="13"] body[data-hm] .hm-cta .hm-li { display: inline-flex; align-items: center; height: 42px; padding: 0 6px; color: #c4c7c8; text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
    font: 500 .75rem/1 var(--display, 'Google Sans', sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
  html[data-idea="13"] body[data-hm] .hm-cta .hm-li span { display: inline; padding: 0; background: none !important; clip-path: none; border-radius: 0; font: inherit; letter-spacing: inherit; color: inherit; }
  html[data-idea="13"] body[data-hm] .book { grid-column: 1; grid-row: 2; position: static; display: block; margin: 0; padding: 0; border: 0; }
  html[data-idea="13"] body[data-hm] .book > :not(.hm-col) { display: none; }
  html[data-idea="13"] body[data-hm] .hm-col { display: block; position: static; height: auto; overflow: visible; color-scheme: dark; container: hmcol / inline-size; }
}
@media (max-width: 1180px) {
  html[data-idea="13"] body[data-hm] .id .impact .row > .ph { justify-content: flex-start; }   /* label right after the photo strip, as on desktop */
}
@media (min-width: 640px) and (max-width: 1180px) {   /* tablets: the 3:4 photo keeps its shape on the right, fading into the ground on its left */
  html[data-idea="13"] body[data-hm] .portrait img { left: auto; right: 0; top: 8%; width: auto; height: 74%; aspect-ratio: 3 / 4; max-width: 100%; object-position: 50% 20%;
    -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 30%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 16%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 30%); mask-composite: intersect; }
}
/* ---------- the project column when it is narrower than 1024px (2026-11-02): phones, tablets and 1181–1365px desktops ----------
   The old Work page's narrow layout was a sideways carousel whose ECS card crushed its headline beside the mockup. Here the cards
   stack, full width: story first, then the card's art in a window under it that runs off the right edge (as the cards' art does
   on desktop). ECS shows its desk + phone mockup; the chart, the two small frames and the hover stage stay desktop-only. */
@container hmcol (max-width: 1023.98px) {
  html[data-idea="13"] body[data-hm] .hm-col .pcs { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; gap: 16px;
    overflow: visible; scroll-snap-type: none; }
  html[data-idea="13"] body[data-hm] .hm-col .pc { grid-column: auto; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-c { aspect-ratio: auto; min-height: 0; height: auto; padding: 24px 24px 0; }
  html[data-idea="13"] body[data-hm] .hm-col .pc :is(.pc-k, .pc-t, .pc-s, .gs-tdl) { max-width: 40em; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-cv, html[data-idea="13"] body[data-hm] .hm-col .pc .pc-shot.e2-tiles,
  html[data-idea="13"] body[data-hm] .hm-col .pc .e2-win > .pc-shot.e2 { display: none; }
  /* the art window */
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-shot { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; display: block;
    width: auto; height: 260px; margin: 22px -24px 0 0; overflow: hidden; transform: none; scale: none; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-shot img { position: absolute; max-width: none; transform: none; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-shot.svg img { left: auto; right: 0; top: auto; bottom: 0; width: min(100%, 520px); height: auto; }   /* the art sits in the svg's bottom-right, as on desktop */
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-shot.cut img { left: -6%; top: -16%; width: 150%; height: auto; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-shot.vid { height: 230px; margin-right: -24px; border-top: 4px solid #0b0c0d; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-shot.vid::after { content: none; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-shot.vid video { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .pc-shot.e2-box { padding: 0; clip-path: none; background: none; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .e2-win { position: absolute; inset: 0; display: block; clip-path: none; background: none; overflow: hidden; }
  html[data-idea="13"] body[data-hm] .hm-col .pc .e2-win > .e2-cut { left: -4%; top: 0; width: 128%; margin: -24% 0 0; }   /* % margin = of the width, so the desk sits at the top at any width */
}
/* one dark ground behind everything at every width (2026-11-02, James: white showed around and between the project cards; the
   column's background had come from the homepage's --bg, which isn't the dark ground at every width) */
html[data-idea="13"], html[data-idea="13"] body[data-hm] { background: #151618; color-scheme: dark; }
html[data-idea="13"] body[data-hm] :is(.spread, .book, .hm-col, .hm-col .hm-main) { background-color: #151618; }