/* Shared rhythm for the paper book and its compact, single-page reader. */
:root { --ink-faint: #657994; --sky-deeper: #356fa5; --font-body: "Jost",Futura,"Avenir Next",system-ui,sans-serif; --font-display: "Mieszkanie9", serif; --font-accent: var(--font-body); }
html { font-size: 100%; }
body { background: radial-gradient(ellipse at 50% 35%, #f4fbff, transparent 65%), linear-gradient(180deg, #d6eaff, #edf7ff 75%, #f8fbff); }
.stage { height: 100dvh; padding: 64px 64px 88px; }
.book { max-width: 1200px; max-height: 780px; font-size: 16px; }
.page__face { padding: 32px clamp(24px, 3vw, 44px) 48px; }
.pg-label { flex-shrink: 0; font-size: 11px; letter-spacing: 1.8px; margin-bottom: 24px; }
.pg-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c2d9eb transparent; padding-right: 6px; font-size: 15px; line-height: 1.75; }
.pg-body p { margin-bottom: 16px; }
.pg-body > p:first-child > strong { font-size: 1.15em; }
.display { font-weight: 400; letter-spacing: .01em; }
.cover-face .cover-title { font-family: 'Mieszkanie9', serif; font-weight: 400; font-size: clamp(40px, 5.3vw, 76px); letter-spacing: .035em; line-height: 1.3; text-shadow: none; }
.cover-eyebrow { color: var(--sky-deeper); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 28px; }
.cover-description { max-width: 28ch; margin-top: 22px; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.pg-hint { font-size: 10px; letter-spacing: 1.4px; margin-top: 40px; animation: none; }
.ch-num { font-size: 48px; opacity: .7; }
.ch-name { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.35; }
.bk-edu { padding: 16px; gap: 12px; border-width: 1px; border-radius: 12px; background: #f7fbfe; margin-bottom: 14px; }
.bk-edu__txt { min-width: 0; flex-basis: 100%; }
.bk-edu__txt strong { font-size: 15px; line-height: 1.5; }
.bk-edu__txt em, .bk-edu__loc { font-size: 12px; line-height: 1.7; }
.bk-exp, .bk-exp__list { gap: 0; }
.bk-item { padding: 18px 0; border-bottom: 1px solid #e0ebf3; }
.bk-item:first-child { padding-top: 0; }
.bk-item:last-child { border-bottom: 0; }
.bk-item__top { flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.bk-item__top strong { flex-basis: 100%; font-size: 15px; line-height: 1.6; }
.bk-org { font-size: 14px; line-height: 1.7; }
.bk-loc, .bk-lab { font-size: 12px; line-height: 1.7; }
.bk-date, .bk-tag { font-size: 10px; line-height: 1.5; padding: 4px 8px; letter-spacing: .3px; }
.bk-tag { white-space: nowrap; }
.bk-date, .bk-tag { background: #eef5fa; border: 1px solid #dce7f0; border-radius: 4px; font-weight: 500; }
.bk-tag--research { background: #f3eff8; border-color: #e5ddef; }
.bk-proj { gap: 14px; }
.bk-proj .project-entry { border-radius: 12px; padding: 16px 12px; border-width: 1px; gap: 16px; }
.bk-meta { display: grid; gap: 5px; justify-items: start; }
.bk-proj .project-entry strong { font-size: 17px; }
.bk-proj .project-entry em { font-size: 12px; white-space: normal; line-height: 1.5; }
.bk-thumb { width: 58px; height: 66px; border-radius: 10px; font-size: 28px; }
.pj-title { font-size: 36px; line-height: 1.4; }
.pj-tag { font-size: 10px; }
.pj-meta { font-size: 12px; line-height: 1.7; }
.pj-h { font-size: 11px; letter-spacing: 1.6px; margin-top: 24px; }
.pj-hi { padding: 12px 0; border-bottom: 1px solid #e0ebf3; }
.subtabs { gap: 4px; padding: 0 12px; }
.subtab { min-width: 0; padding: 0 10px 6px; font-size: 10px; }
.bk-map__title { font-size: 15px; }
.bk-map__note { font-size: 13px; }
.bk-map__row { gap: 16px; }
.bk-idx { font-size: 12px; }
.controls { bottom: 20px; gap: 20px; }
.ctrl { background: #fafdff; border-color: #d4e4f1; box-shadow: 0 3px 12px #44749a0a; }
.dot { position: relative; }
.dot::before { content: ''; position: absolute; inset: -16px -4px; }
.gb-card input { min-height: 38px; font-size: 14px; }
.gb-private { font-size: 11px; margin-top: -3px; padding-left: 4px; }
.gb-note { font-size: 12px; line-height: 1.8; padding-right: 12px; }
.clear-stickers { font-size: 12px; min-height: 36px; }
.backcover-face .cover-title { font-size: clamp(28px, 3.3vw, 48px); line-height: 1.5; }
.cover-sub { font-size: 13px; letter-spacing: .3px; overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible { outline: 2px solid #356fa5; outline-offset: 4px; }
#stardust-top { opacity: .55; }

@media (min-width: 721px) and (max-width: 1000px) {
  .stage { padding: 48px 44px 80px; }
  .page__face { padding: 24px 22px 40px; }
  .subtabs { flex-wrap: wrap; top: -36px; gap: 2px; }
  .subtab { font-size: 8px; padding-inline: 5px; }
}
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .stage { height: 100dvh; padding: calc(68px + env(safe-area-inset-top)) 16px calc(84px + env(safe-area-inset-bottom)); }
  .book { width: 100%; height: 100%; max-width: 560px; max-height: none; aspect-ratio: auto; font-size: 16px; }
  .page__face { padding: 24px 22px 32px; border-radius: 16px; box-shadow: 0 8px 32px #5384ab10; overscroll-behavior: contain; touch-action: pan-y; }
  .pg-body { flex-shrink: 0; overflow: visible; padding-right: 0; font-size: 15px; line-height: 1.8; }
  .pg-label { margin-bottom: 22px; font-size: 10px; }
  .cover-face .cover-title { font-size: clamp(38px, 11vw, 66px); }
  .cover-eyebrow { font-size: 10px; margin-bottom: 22px; }
  .cover-description { font-size: 13px; }
  .pg-hint { font-size: 9px; margin-top: 32px; }
  .ch-num { font-size: 42px; }
  .ch-name { font-size: clamp(32px, 9vw, 46px); }
  .mchips { top: env(safe-area-inset-top); left: 16px; right: 16px; max-width: 560px; margin-inline: auto; padding: 8px 0 0; gap: 0; justify-content: space-between; background: transparent; border-bottom: 1px solid #526c8526; }
  .mchips button:nth-child(n) { position: relative; flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 10px 3px 12px; border-radius: 0; background: transparent; color: #62758b; font-size: clamp(10px, 2.8vw, 12px); font-weight: 400; letter-spacing: 0; text-transform: none; box-shadow: none; transform: none; }
  .mchips button:nth-child(n).is-active { color: var(--ink); font-weight: 500; }
  .mchips button.is-active::after { content: ''; position: absolute; bottom: 0; left: 3px; right: 3px; height: 1px; background: var(--ink); }
  .mchips button:focus-visible { outline-offset: -3px; }
  .controls { display: flex; bottom: calc(14px + env(safe-area-inset-bottom)); gap: 112px; }
  .controls .dots { display: none; }
  .mprog { bottom: calc(28px + env(safe-area-inset-bottom)); font-size: 12px; color: var(--ink-soft); pointer-events: none; }
  .bk-edu { padding: 14px; }
  .bk-edu__txt { min-width: 0; }
  .bk-item strong .bk-tag { margin-left: 4px; }
  .bk-map__fig { flex-basis: 100%; }
  .bk-proj .project-entry { gap: 12px; padding: 12px 10px; }
  .bk-thumb { width: 46px; height: 56px; font-size: 24px; }
  .bk-proj .project-entry strong { font-size: 16px; }
  .gb-tray { bottom: 20px; }
  .gb-card input { min-height: 44px; font-size: 16px; }
  .backcover-face .cover-title { font-size: 32px; }
}
@media (max-height: 540px) and (max-width: 960px) {
  .stage { padding-top: 66px; padding-bottom: 66px; }
  .cover-eyebrow { margin-bottom: 8px; }
  .cover-description, .pg-hint { margin-top: 12px; }
  .gb-tray { position: relative; left: auto; bottom: auto; transform: rotate(-1.5deg); align-self: center; margin-top: 30px; }
  .gb-doodle { display: none; } /* the sheet is in the flow here, so the doodle has nothing to point at */
}

/* Content flows between paper faces, never into an inner scroll container. */
.page__face { overflow: hidden; }
.pg-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-right: 0; }
.bk-edu { padding: 11px 14px; margin-bottom: 10px; gap: 7px; }
.bk-item { padding-block: 12px; }
.pg-label { margin-bottom: 18px; }
.book.is-measuring .page__face { display: flex; visibility: hidden; }
.book.is-measuring .page { transition: none; }
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .page__face { overflow: hidden; padding: 20px 20px 28px; }
  .pg-body { flex: 1 1 auto; min-height: 0; overflow: hidden; font-size: 14px; line-height: 1.65; }
  .pg-body p { margin-bottom: 12px; }
  .bk-edu__txt strong { font-size: 14px; }
  .bk-map__fig svg { max-height: 140px; }
}
.pg-body > :last-child { margin-bottom: 0; }
.project-number { flex: 0 0 26px; align-self: flex-start; padding-top: 3px; font-family: var(--font-body); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--ink-faint); }
.project-number--detail { margin-bottom: 20px; padding: 0; font-size: 14px; }
.tab__side { font-family: var(--font-body); font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; }
.tab.is-active .tab__side { font-weight: 400; }
@media (min-width: 961px) {
  .bk-item__top strong { flex-basis: auto; }
}

/* Project navigation lives only on the outer edge of the book. */
.project-bookmarks { position: absolute; left: 50%; right: 0; top: -32px; z-index: 1000; display: flex; justify-content: flex-end; gap: 5px; padding: 0 16px; }
.project-bookmarks[hidden] { display: none; }
.project-bookmarks .subtab { height: 36px; padding: 0 12px 4px; font: 400 11px var(--font-body); letter-spacing: 0; text-transform: none; color: #5a5560; box-shadow: none; border-radius: 8px 8px 0 0; background: #d9f7ff; }
/* 오색 — one hue per category, same family as the guestbook stickers */
.project-bookmarks .subtab:nth-child(5n+2) { background: #ffdcee; }
.project-bookmarks .subtab:nth-child(5n+3) { background: #f6fbc0; }
.project-bookmarks .subtab:nth-child(5n+4) { background: #ffeabc; }
.project-bookmarks .subtab:nth-child(5n+5) { background: #d3f7d0; }
/* active keeps its own hue, just deeper */
.project-bookmarks .subtab.is-active { color: #33313a; font-weight: 500; filter: saturate(1.5) brightness(0.96); }
.bk-proj .project-entry { background: transparent; border: 0; border-bottom: 1px solid #dce7f0; border-radius: 0; padding: 16px 0; cursor: var(--cursor-wand); }
.bk-proj .project-entry:hover { transform: none; }
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .stage { padding-top: calc(100px + env(safe-area-inset-top)); }
  .project-bookmarks { left: 0; top: -28px; padding: 0 8px; gap: 4px; }
  .project-bookmarks .subtab { height: 32px; padding: 0 8px 4px; font-size: 10px; }
}

/* Quiet editorial titles; signature chapter lettering stays unchanged. The site
   runs on two faces only — Jost for text, Mieszkanie9 for display — so these
   mid-level titles are Jost at a heavier weight rather than a third face. */
:root { --font-editorial: var(--font-body); }
.bk-edu__txt strong,
.bk-item__top strong,
.bk-proj .project-entry strong,
.pj-title {
  font-family: var(--font-editorial);
  font-weight: 500;
  letter-spacing: -.02em;
}
.bk-edu__txt strong, .bk-item__top strong { font-size: 18px; line-height: 1.35; }
.bk-proj .project-entry strong { font-size: 22px; line-height: 1.3; }
.pj-title { font-size: 36px; line-height: 1.2; }
.bk-edu__txt strong .bk-link { border-bottom: 1px solid #b7cad766; }
.bk-edu__txt strong .bk-link:hover { border-bottom-color: var(--sky-deeper); }
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .bk-edu__txt strong, .bk-item__top strong { font-size: 17px; }
  .bk-proj .project-entry strong { font-size: 21px; }
  .pj-title { font-size: 30px; }
}

/* School location and dates share a compact metadata row. */
.bk-edu__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; width: 100%; }
.bk-edu__meta .bk-edu__loc { margin: 0; }
.bk-edu__meta .bk-date { white-space: nowrap; margin: 0; }

/* Concise school labels keep the title readable without shrinking the type. */
.bk-edu__txt strong { text-wrap: pretty; }
.bk-edu__meta { column-gap: 8px; }
.bk-edu__meta .bk-date { font-size: 9px; letter-spacing: 0; padding: 3px 6px; }
.bk-edu__meta .bk-edu__loc { font-size: 11px; }

/* Dates are metadata, not badges. */
.bk-item .bk-date,
.bk-edu__meta .bk-date {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.7;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* Tabs belong to the turning leaf, with the selected tab overlapping its paper. */
.book > .project-bookmarks { display: none; }
.page > .project-bookmarks {
  left: 0;
  top: -36px;
  height: 44px;
  align-items: flex-end;
  z-index: 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  visibility: hidden;
  pointer-events: none;
}
.page.show-subtabs > .project-bookmarks,
.page.is-turning > .project-bookmarks,
.page.is-dragging > .project-bookmarks { visibility: visible; }
.page.show-subtabs > .project-bookmarks { pointer-events: auto; }
.page > .project-bookmarks .subtab { height: 32px; margin-bottom: 8px; padding-bottom: 4px; }
.page > .project-bookmarks .subtab.is-active {
  height: 44px;
  margin-bottom: 0;
  padding-bottom: 8px;
  box-shadow: 0 2px 0 rgba(139, 82, 109, .12);
  border-radius: 8px 8px 2px 2px;
}
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .page > .project-bookmarks { display: none; }
  .book > .project-bookmarks:not([hidden]) { display: flex; align-items: flex-end; height: 36px; top: -32px; }
  .book > .project-bookmarks .subtab.is-active { height: 36px; border-radius: 8px 8px 2px 2px; }
}

/* Soft paper index colors, with readable ink across every chapter. */
.tab--about .tab__side { background: #e3f2fa; }
.tab--education .tab__side { background: #d8edf9; }
.tab--experience .tab__side { background: #cde6f7; }
.tab--projects .tab__side { background: #c2dff4; }
.tab--guestbook .tab__side { background: #b7d8ef; }
.tab .tab__side {
  color: #526176;
  box-shadow: 3px 3px 12px rgba(100, 128, 155, .10);
}
.tab:hover .tab__side { filter: brightness(1.025); }
.tab.is-active .tab__side { color: #293c56; filter: none; }

/* Geographic travel plate: quiet coastlines and fixed, city-centred markers. */
.bk-map__fig { background: #eaf4f8; box-shadow: none; border-color: #dae6e9; }
.bk-map__fig .bk-land { fill: #f5efdf; stroke: #cfdbcF; stroke-width: .25; }
.bk-map__fig .bk-pin { color: #6488a2; }
.bk-map__fig .bk-pin__dot { stroke-width: .45; }
.bk-map__fig .bk-pin__num { font: 400 2px var(--font-body); }
.bk-map__fig .bk-arc { stroke: #b4a6bd; stroke-width: .3; stroke-dasharray: none; animation: none; opacity: .7; }
.bk-map__fig .bk-city-label { font: 400 3px var(--font-body); fill: #53677a; }
.bk-map__fig svg text { font-family: var(--font-body); }
.bk-map__fig svg svg { max-height: none; }

.bk-map__fig svg svg { width: 42px; height: 27px; }

.bk-exp__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 3px; }
.bk-exp__meta .bk-loc, .bk-exp__meta .bk-date { margin: 0; }
.bk-exp__meta .bk-date { white-space: nowrap; }

.bk-item__bullets { list-style: disc; margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.bk-item__bullets li + li { margin-top: 2px; }

/* Project categories are quiet captions, not button-like badges. */
.project-category, .pg-body .pj-tag {
  display: inline-block;
  font: 400 11px/1.5 var(--font-body);
  color: #65798d;
  letter-spacing: .02em;
  text-transform: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Restrained running titles for the inside pages. */
.pg-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #718297;
  margin-bottom: 20px;
}

/* Both bookmark directions share the same typographic scale. */
.project-bookmarks .subtab {
  font-family: var(--font-body);
  font-size: var(--tabfs, 16px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: #526176;
}
.project-bookmarks .subtab.is-active { font-weight: 400; color: #293c56; }
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .project-bookmarks .subtab { font-size: 12px; padding-inline: 7px; }
}

/* Experience categories match the plain project captions. */
.bk-item .bk-tag {
  font: 400 11px/1.5 var(--font-body);
  color: #65798d;
  letter-spacing: .02em;
  text-transform: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-left: 10px;
  box-shadow: none;
  vertical-align: baseline;
}

/* Keep all five experience entries on one leaf without shrinking the type. */
.bk-exp .bk-item { padding-block: 4px; }
.bk-exp .bk-item:first-child { padding-top: 0; }
.bk-exp .bk-item:last-child { padding-bottom: 0; }
.bk-exp .bk-item__top { margin-bottom: 2px; }
.bk-exp .bk-exp__meta { margin-top: 1px; }
/* Experience is grouped by sub-labels (Industry / Research / Volunteer) like the project list. */
.bk-exp .bk-item:has(+ .project-group-label) { border-bottom: 0; }
.bk-exp .project-group-label + .bk-item { padding-top: 0; }
.bk-exp .bk-item + .project-group-label { margin-top: 28px; }
.bk-exp .project-group-label { font-size: 14px; color: var(--sky-deeper); }
/* lab sits on the school line, one step quieter than the school name */
.bk-org .bk-lab { display: inline; font-size: 13px; font-weight: 500; color: var(--ink-soft); }

/* Consecutive roles share a company heading and a quiet connecting rule. */
.bk-company-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.bk-company-heading .bk-tag { margin-left: 0; }
.bk-role-history { margin: 12px 0 0 3px; border-left: 1px solid #cbdde9; padding-left: 14px; }
.bk-role { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 12px; }
.bk-role:last-child { padding-bottom: 0; }
.bk-role::before { content: ''; position: absolute; left: -17px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #9fbcd1; }
.bk-role strong { font: 400 18px/1.35 var(--font-editorial); letter-spacing: -.015em; }
.bk-role .bk-date { white-space: nowrap; }
@media (max-width: 720px) { .bk-role strong { font-size: 17px; } }

/* Eeze is a native spread in the project chapter. */
.eeze-entry { width:100%; text-align:left; font:inherit; color:inherit; cursor: var(--cursor-point); }
.eeze-body .eeze-lead { font-size:24px; line-height:1.4; color:#356fa5; margin:18px 0; }
.eeze-role { border-top:1px solid #d9e6ef; padding-top:14px; font-size:12px; line-height:1.8; }
.eeze-poster { margin:0; text-align:center; }
.eeze-poster img { display:block; width:auto; max-width:100%; height:auto; max-height:440px; margin:auto; object-fit:contain; border-radius:6px; }
.eeze-body figcaption, .eeze-body .eeze-caption { font-size:11px; line-height:1.55; color:#657994; margin:10px 0; }
.eeze-zoom { display:block; margin:12px auto 0; border:1px solid #c7ddeb; border-radius:20px; background:#eff7fc; color:#356fa5; padding:8px 14px; font:inherit; font-size:12px; cursor: var(--cursor-point); }
.eeze-step { margin:18px 0; border-bottom:1px solid #d9e6ef; }
.eeze-step strong { color:#356fa5; font-size:12px; letter-spacing:.7px; }
.eeze-step p { margin-top:7px; }
.eeze-demo { margin:0; text-align:center; }
.eeze-demo video { display:block; width:auto; max-width:100%; height:235px; margin:auto; border-radius:12px; background:#edf6fa; }
.eeze-dialog { border:1px solid #d0e1ec; border-radius:14px; padding:16px; max-width:min(94vw,900px); max-height:92dvh; color:#233c50; }
.eeze-dialog::backdrop { background:#172c426e; backdrop-filter:blur(5px); }
.eeze-dialog form { position:sticky; top:0; display:flex; justify-content:flex-end; margin-bottom:12px; }
.eeze-dialog button { border:1px solid #bdd2df; border-radius:24px; background:#f2f8fc; padding:10px 18px; color:#233c50; cursor: var(--cursor-point); }
.eeze-dialog img { display:block; width:100%; height:auto; }
@media(max-width:700px) { .eeze-poster img { max-height:380px; } .eeze-demo video { height:215px; } }
/* Let the opening Eeze spread use the available paper height. */
.eeze-poster img { max-height: min(580px, calc(100dvh - 290px)); width:100%; }
.eeze-build-note { margin-top:22px; padding:17px 19px; background:#e8f3fa; border:1px solid #d4e6f2; border-radius:10px; font-size:13px; line-height:1.7; }
.eeze-build-note strong { display:block; margin-bottom:8px; color:#356fa5; font-size:14px; }
.eeze-build-note p { margin-bottom:0; }
@media(max-width:720px) { .eeze-poster img { max-height:min(560px,calc(100dvh - 245px)); } .eeze-build-note { margin-top:14px; padding:14px; } }

/* Interaction steps use a section heading, not the project-title treatment. */
.eeze-flow-heading { font-family:var(--font-body); font-size:18px; font-weight:600; line-height:1.45; letter-spacing:0; color:var(--sky-deeper); margin:0 0 22px; }
/* Keep the poster and its expandable prototype on the same book page. */
.eeze-inline-demo { margin:10px auto 0; width:100%; text-align:center; }
.eeze-inline-demo summary { display:inline-flex; align-items:center; gap:16px; cursor: var(--cursor-point); padding:9px 18px; border-radius:22px; background:#e0eff8; color:#356fa5; font-size:12px; list-style:none; }
.eeze-inline-demo summary::-webkit-details-marker { display:none; }
.eeze-inline-demo[open] summary span { transform:rotate(90deg); }
.eeze-inline-demo .eeze-demo { margin-top:12px; }
.eeze-inline-demo .eeze-demo video { height:240px; }
.eeze-body:has(.eeze-inline-demo) .eeze-poster img { max-height:min(520px,calc(100dvh - 350px)); }
.eeze-body:has(.eeze-inline-demo[open]) .eeze-poster img { max-height: min(235px,26dvh); }
.eeze-body:has(.eeze-inline-demo[open]) .eeze-poster figcaption { display:none; }
.eeze-body .pj-h { font-weight:600; letter-spacing:.8px; }
@media(max-width:720px) { .eeze-inline-demo .eeze-demo video { height:200px; } .eeze-body:has(.eeze-inline-demo[open]) .eeze-poster img { max-height:160px; } }

.bk-proj .eeze-entry .bk-meta { min-width:0; }
.bk-proj .eeze-entry strong { white-space:normal; overflow-wrap:break-word; line-height:1.4; }

/* Show a compact film preview before expanding playback. */
.eeze-inline-demo summary { display:flex; width:min(100%,330px); margin:auto; padding:9px 14px 9px 9px; gap:15px; border:1px solid #c9dfed; border-radius:14px; text-align:left; }
.eeze-demo-thumb { display:block; width:55px; height:82px; object-fit:cover; border-radius:8px; }
.eeze-demo-label { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:1; }
.eeze-inline-demo[open] summary span { transform:none; }
.eeze-inline-demo[open] .eeze-play-icon { transform:rotate(90deg); }
.eeze-inline-demo[open] .eeze-demo-thumb { display:none; }
.eeze-inline-demo[open] summary { padding:12px 18px; }
.eeze-body:has(.eeze-inline-demo:not([open])) .eeze-poster img { max-height:min(460px,calc(100dvh - 410px)); }

/* Prototype preview sits beside the opening title and tagline. */
.eeze-opening { display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:18px; align-items:center; margin:8px 0 20px; }
.eeze-opening .eeze-lead { font-size:22px; }
.eeze-top-demo { border:1px solid #c7deeb; padding:6px; background:#e8f4fb; border-radius:14px; cursor: var(--cursor-point); color:#356fa5; font-family:var(--font-body); }
.eeze-top-demo img { display:block; width:100%; height:145px; object-fit:cover; border-radius:9px; }
.eeze-top-demo span { display:block; font-size:10px; padding:7px 0 3px; }
.eeze-video-dialog video { display:block; max-height:75dvh; max-width:100%; width:auto; border-radius:10px; }
@media(max-width:480px) { .eeze-opening { grid-template-columns:minmax(0,1fr) 86px; gap:10px; } .eeze-top-demo img { height:115px; } .eeze-opening .eeze-lead { font-size:18px; } }
/* Dialog controls share the book's Jost typography. */
.eeze-dialog button { font-family:var(--font-body); font-size:13px; font-weight:400; }

/* Connect the prototype preview to the summary it demonstrates. */
.eeze-opening { display:block; margin:8px 0 20px; }
.eeze-top-demo { display:flex; align-items:center; gap:15px; width:100%; margin:16px 0 22px; padding:8px 16px 8px 8px; text-align:left; }
.eeze-top-demo img { flex:none; width:48px; height:68px; border-radius:7px; }
.eeze-top-demo span { padding:0; font-size:13px; }
.eeze-top-demo .eeze-demo-play { margin-left:auto; font-size:14px; }

/* Next Securities: native case-study spreads. */
.next-body .next-deck { font:400 29px/1.25 var(--font-editorial); color:#356fa5; letter-spacing:-.6px; margin:14px 0 22px; }
.next-heading { font:400 30px/1.2 var(--font-editorial); color:#356fa5; letter-spacing:-.6px; margin:10px 0 22px; }
.next-metrics { display:grid; grid-template-columns:1fr; border-block:1px solid #d1e1ed; margin:20px 0 12px; padding:5px 0; }
.next-metrics>div { display:flex; align-items:baseline; justify-content:space-between; gap:15px; padding:11px 0; }
.next-metrics strong { font-size:24px; font-weight:400; letter-spacing:-.6px; color:#356fa5; }
.next-metrics span { font-size:11px; text-align:right; color:#65798d; }
.next-body .next-note { font-size:11px; line-height:1.6; color:#65798d; }
.next-roles { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
.next-roles p { font-size:12px; line-height:1.65; }
.next-roles strong { font-weight:500; color:#356fa5; }
.next-figure { margin:18px 0; }
.next-figure a { display:block; border:1px solid #d5e3ed; border-radius:7px; overflow:hidden; background:#fff; }
.next-figure img { display:block; width:100%; height:auto; }
.next-figure figcaption { font-size:10px; line-height:1.5; color:#65798d; margin-top:7px; }
.next-figure figcaption span { float:right; }
.next-figure a:focus-visible { outline:3px solid #356fa5; outline-offset:3px; }
.next-scenes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:20px 0; }
.next-scenes .next-figure { margin:0; }
.next-scenes figcaption { display:none; }
.next-process { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:13px 0; margin:10px 0; border-block:1px solid #d5e3ed; font-size:11px; color:#356fa5; }
.next-process b { font-weight:400; color:#92adc2; }
.next-chart a { background:#233c50; padding:8px; }
.bk-proj button.project-entry { cursor: var(--cursor-point); }
.bk-proj button.project-entry:hover strong { color:#356fa5; }
@media(max-width:720px) { .next-heading { font-size:27px; } .next-body .next-deck { font-size:26px; } .next-metrics strong { font-size:22px; } }
/* Keep supporting evidence and its explanation on the same spread. */
.next-body { font-size:14px; line-height:1.65; }
.next-body .next-figure img { max-height:175px; object-fit:contain; }
.next-body .next-scenes img { max-height:215px; object-fit:cover; }
.next-body .next-figure { margin:14px 0; }
.next-body .next-heading { margin-bottom:18px; }

/* Keep the interaction diagram and playable portrait demo together. */
.eeze-media-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:14px; align-items:center; }
.eeze-media-pair .eeze-main-teaser img { width:100%; height:auto; }
.eeze-embedded-demo { margin:0; min-width:0; text-align:center; }
.eeze-embedded-demo video { display:block; width:100%; aspect-ratio:540/924; object-fit:contain; border-radius:10px; background:#e8f4fb; }
.eeze-embedded-demo figcaption { margin-top:8px; font:400 11px/1.4 var(--font-body); color:var(--ink-faint); }

/* Verbatim Notion content: preserve case, lists, tables, and source captions. */
.next-verbatim .next-heading { font-size:25px; line-height:1.3; }
.next-verbatim .next-subheading { font:600 15px/1.4 var(--font-body); margin:20px 0 10px; text-transform:none; }
.next-verbatim code { font:inherit; font-size:11px; color:#65798d; }
.next-verbatim ul { padding-left:19px; margin:12px 0 18px; }
.next-verbatim li { margin-bottom:9px; }
.next-verbatim a { text-decoration:underline; text-underline-offset:3px; }
.next-verbatim .next-figure a { text-decoration:none; }
.next-source-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:11px; line-height:1.5; margin:18px 0; overflow-wrap:break-word; }
.next-source-table th,.next-source-table td { text-align:left; vertical-align:top; border:1px solid #d5e3ed; padding:9px 7px; }
.next-source-table th { font-weight:600; background:#eaf3fa; }

/* Vertically center the diagram and demo columns. */
.eeze-media-pair { align-items:center; gap:20px; }
.eeze-diagram-column { min-width:0; text-align:center; }
.eeze-diagram-column .eeze-zoom { margin:14px auto 0; }
.eeze-embedded-demo { padding-top:0; }

/* Summary and portrait demo share the right-hand page. */
.eeze-summary-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:22px; margin:0 0 24px; }
.eeze-summary-copy { min-width:0; }
.eeze-summary-copy .pj-h { margin-top:0; }
.eeze-summary-copy p { margin-bottom:0; }
.eeze-summary-grid .eeze-embedded-demo { width:100%; }
.eeze-diagram-only .eeze-main-teaser img { width:100%; }
@media(max-width:480px) { .eeze-summary-grid { gap:14px; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }

/* Keep company and project names on one line, including narrow screens. */
.project-bookmarks { overflow-x:auto; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:thin; scrollbar-color:#e8bdd0 #fff1f6; justify-content:safe flex-end; scroll-padding-inline:16px; }
.project-bookmarks::-webkit-scrollbar { height:4px; }
.project-bookmarks::-webkit-scrollbar-track { background:#fff1f6; }
.project-bookmarks::-webkit-scrollbar-thumb { background:#e8bdd0; border-radius:4px; }
.project-bookmarks .subtab { flex:0 0 auto; white-space:nowrap; }
.project-bookmarks .subtab:focus-visible { outline:2px solid #765263; outline-offset:-3px; }
.project-bookmarks .subtab[data-go="proj-next"] { padding-inline:16px; }
@media(max-width:720px) {
  .project-bookmarks .subtab[data-go="proj-next"] { padding-inline:10px; }
}

/* Shared project facts: labels stay aligned when values wrap. */
.pg-body .project-facts { margin:18px 0 26px; padding:0 0 20px; border-bottom:1px solid #d5e3ed; font-family:var(--font-body); }
.project-facts > div { display:grid; grid-template-columns:78px minmax(0,1fr); column-gap:16px; margin-bottom:10px; }
.project-facts > div:last-child { margin-bottom:0; }
.project-facts dt { font-size:11px; line-height:1.8; font-weight:400; color:#7b8c9e; padding-top:1px; }
.project-facts dd { margin:0; font-size:12px; line-height:1.75; color:#526b83; overflow-wrap:break-word; }
@media(max-width:480px) {
  .project-facts > div { grid-template-columns:68px minmax(0,1fr); column-gap:12px; }
}

/* Keep the Eeze introduction together with its embedded demo. */
[data-face="eeze-poster"] .eeze-opening { margin:0 0 12px; }
[data-face="eeze-poster"] .pj-title { margin:0; }
[data-face="eeze-poster"] .project-facts { margin:0 0 16px; padding-bottom:12px; }
[data-face="eeze-poster"] .eeze-summary-grid { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; margin-bottom:18px; }
[data-face="eeze-poster"] .eeze-summary-copy p { font-size:13px; line-height:1.65; }
[data-face="eeze-poster"] .eeze-summary-grid + .pj-h { margin-top:0; }
[data-face="eeze-poster"] .eeze-summary-grid ~ p { font-size:13px; line-height:1.65; }

/* Project headings share the editorial face; hierarchy comes from size and weight. */
.pg-body .pj-title, .pg-body .next-heading, .pg-body .next-subheading,
.pg-body .pj-h, .pg-body .eeze-flow-heading { font-family:var(--font-editorial); }
.next-verbatim h2.next-heading { font-size:25px; font-weight:500; line-height:1.3; letter-spacing:-.5px; }
.next-verbatim h3.next-heading { font-size:20px; font-weight:600; line-height:1.35; letter-spacing:-.3px; margin:18px 0 12px; }
.next-verbatim .next-heading strong { font-weight:inherit; }
.next-verbatim .next-subheading { margin:16px 0 8px; }
.next-verbatim .next-figure figcaption { font:400 11px/1.5 var(--font-body); margin-top:8px; color:var(--ink-faint); }

/* Keep the complete evaluation story on one page, without shortening the text. */
.next-performance { font-size:12.5px; line-height:1.5; }
.next-verbatim .next-performance h2.next-heading { font-size:21px; margin:0 0 12px; line-height:1.25; }
.next-verbatim .next-performance h3.next-heading { font-size:18px; margin:13px 0 9px; }
.next-verbatim .next-performance .next-subheading { font-size:13px; margin:11px 0 5px; }
.next-performance p { margin-bottom:10px; }
.next-verbatim .next-performance ul { margin:5px 0 10px; padding-left:17px; }
.next-verbatim .next-performance li { margin-bottom:5px; }
.next-body .next-performance .next-figure { margin:10px 0; }
.next-body .next-performance .next-figure img { max-height:95px; object-fit:contain; }
.next-performance > :last-child { margin-bottom:0; }

/* One cohesive section per face, with related evidence arranged together. */
.next-page-section { font-size:12.5px; line-height:1.5; }
.next-page-section > :first-child { margin-top:0!important; }
.next-page-section > :last-child { margin-bottom:0!important; }
.next-verbatim .next-page-section h2.next-heading { font-size:21px; line-height:1.25; margin-bottom:12px; }
.next-verbatim .next-page-section h3.next-heading { font-size:20px; margin:13px 0 12px; }
.next-verbatim .next-page-section .next-subheading { font-size:13px; margin:11px 0 5px; }
.next-page-section p { margin-bottom:10px; }
.next-verbatim .next-page-section ul { margin:5px 0 10px; padding-left:17px; }
.next-verbatim .next-page-section li { margin-bottom:5px; }
.next-section-gallery { display:flex; gap:10px; align-items:flex-start; margin:12px 0; }
.next-section-gallery .next-figure { flex:1; min-width:0; margin:0!important; }
.next-body .next-section-gallery img { max-height:125px; object-fit:contain; }
.next-verbatim .next-section-gallery figcaption { font-size:10px; line-height:1.35; }

/* Give the detailed backlog table enough space to read. */
.next-body .next-backlog-figure img { width:100%; max-height:440px; object-fit:contain; }

/* Image inspection stays inside the book, without external links. */
.image-magnifier { display:block; position:relative; width:100%; border:0; padding:0; background:transparent; color:#356fa5; cursor:zoom-in; }
.project-face figure img:not(a img):not(button img) { cursor:zoom-in; }
.magnifier-icon { position:absolute; right:5px; bottom:5px; display:grid; place-items:center; width:28px; height:28px; background:#f8fcfff2; border:1px solid #bdd2e3; border-radius:50%; box-shadow:0 1px 5px #233c501a; }
.image-magnifier:focus-visible { outline:2px solid #356fa5; outline-offset:3px; }
.project-image-dialog { width:min(94vw,1400px); max-width:94vw; max-height:92dvh; padding:16px; border:1px solid #ccdfea; border-radius:14px; background:#f8fcff; color:#233c50; }
.project-image-dialog::backdrop { background:#15283e99; backdrop-filter:blur(4px); }
.project-image-dialog form { display:flex; justify-content:flex-end; margin:0 0 12px; }
.project-image-dialog button { font:400 13px var(--font-body); padding:8px 16px; border:1px solid #c7ddeb; border-radius:20px; background:white; color:inherit; cursor: var(--cursor-point); }
.project-image-scroll { max-height:calc(92dvh - 90px); overflow:auto; }
.project-image-scroll img { display:block; width:100%; height:auto; margin:auto; }
@media(max-width:600px) { .project-image-dialog { padding:10px; } .project-image-scroll img { width:auto; min-width:100%; max-width:none; max-height:none; } }

/* FriendliAI case study, using the book's existing section pagination. */
.friendli-body .friendli-deck{font-size:22px;line-height:1.3;color:#356fa5;letter-spacing:-.4px;margin:10px 0 20px}
.friendli-video{margin:15px 0}.friendli-video video{display:block;width:100%;aspect-ratio:16/9;max-height:215px;object-fit:contain;background:#edf3f8;border:1px solid #d5e3ed;border-radius:6px}.friendli-video figcaption{font-size:10px;line-height:1.4;color:#65798d;margin-top:6px}
.friendli-links{display:grid;gap:8px;margin:14px 0;font-size:11px;line-height:1.5}.friendli-links a{width:fit-content;overflow-wrap:anywhere}.friendli-outcomes{border-top:1px solid #d5e3ed;padding-top:12px}.friendli-outcomes strong{display:block;color:#356fa5;margin-bottom:3px}

/* Typography: an introduction on paper, a doorway into the songbook. */
.typography-intro .pj-title { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.18; margin: 20px 0; }
.typography-deck { font-size: 19px; color: #356fa5; }
.typography-intro .project-facts { margin: 22px 0; }
.typography-preview { display: flex; flex-direction: column; flex: 1; overflow: visible; padding: 0; min-height: 240px; }
.typography-highlights { flex: 0 0 auto; margin-bottom: 14px; }
.typography-highlights .friendli-bullets li { margin-bottom: 10px; }
.typography-preview .starlight-portal { flex: 1; min-height: 260px; padding: 22px 20px; }
.typography-preview .portal-book { width: min(46%, 150px); }
/* the interactive book is the hero of its page: one short intro, then the doorway fills the rest */
.typography-book-intro { flex: 0 0 auto; margin-bottom: 16px; }
.typography-book-intro .next-heading { font-size: 25px; line-height: 1.3; margin: 0 0 10px; }
.typography-book-intro p { margin: 0; }
.typography-preview .typography-book-intro + .starlight-portal { min-height: 340px; gap: 20px; }
.typography-preview .typography-book-intro + .starlight-portal .portal-book { width: auto; height: min(62%, 360px); aspect-ratio: 2560 / 4096; }
.typography-preview .typography-book-intro + .starlight-portal .portal-cover { height: 100%; width: auto; }
.typography-preview .typography-book-intro + .starlight-portal .portal-orbit { width: 340px; height: 340px; }
/* photo slots: polaroids until the real shots land — white frame, thick foot,
   a little tilt, caption written in the foot. Stuck flat: no shadow. */
.typo-photos { display: flex; justify-content: center; gap: 18px; margin: 14px 0 18px; }
.typo-photos figure { flex: 0 1 auto; min-width: 0; margin: 0; background: #fff;
  padding: 7px 7px 0; box-shadow: 0 0 0 1px rgba(120, 160, 210, .4); }
.typo-photos figure:nth-child(odd)  { transform: rotate(-2.5deg); }
.typo-photos figure:nth-child(even) { transform: rotate(2deg) translateY(4px); }
.typo-photos figcaption { font-family: "Pangolin", "Poor Story", cursive; font-weight: 400; font-size: 10px; line-height: 1; color: #65798d; text-align: center; padding: 8px 0 10px; }
.typo-ph { display: grid; place-items: center; width: auto; height: 100%; object-fit: cover;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #6f82a4; background: linear-gradient(160deg, #eef3fb, #d6e1f3); }
.typo-photos--hero { margin-top: 22px; }
.typo-photos--hero { flex-wrap: wrap; gap: 14px 12px; }
.typo-photos--hero figure { flex: 0 1 calc(25% - 12px); max-width: 210px; }
.typo-photos--hero .typo-ph { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.typo-photos--hero figcaption { line-height: 1.25; padding: 7px 2px 9px; }
/* the miscut one: caption scribbled a little off, like an apology */
.typo-photos--hero figure:nth-child(3) figcaption { color: #8a6f7d; }
@media (max-width: 560px) { .typo-photos--hero figure { flex-basis: calc(50% - 12px); } }
/* the story page must stay ONE verso (the interactive book faces it), so its
   polaroids take fixed bands sized to the viewport */
.typography-story .typo-photos { margin: 8px 0 10px; }
.typography-story .typo-ph { height: clamp(54px, 7.5vh, 110px); aspect-ratio: 4 / 3; }
.typography-story .typo-photos--spreads .typo-ph { aspect-ratio: 16 / 7; }
.typography-story .typo-photos figcaption { padding: 6px 0 8px; }
.typography-story .typo-photos figure { padding: 5px 5px 0; }
.typography-story .typo-photos figcaption { padding: 5px 0 6px; font-size: 9.5px; }
.project-face .next-verbatim.typography-story .next-page-section h2.next-heading { margin-bottom: 8px; }
.project-face .next-verbatim.typography-story .next-page-section p { margin-bottom: 8px; }
.starlight-portal {
  position: relative; isolation: isolate; width: 100%; min-height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 30px 20px; border-radius: 12px; overflow: hidden;
  color: #e8edf9; text-decoration: none; background: radial-gradient(ellipse at 70% 70%, #30315d, transparent 65%), #0b1027;
}
.starlight-portal::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, #dce5ff 1px, transparent 1.6px),radial-gradient(circle, #c7d7f7 1px, transparent 1.8px);
  background-size: 71px 83px, 113px 131px; background-position: 11px 23px, 38px 58px; opacity: .5;
}
.portal-book {
  position: relative; display: block; width: min(62%, 194px); flex: 0 0 auto;
  transform: perspective(1000px) rotateY(-9deg);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 24px 35px -10px rgba(0,0,0,.55);
}
.portal-book::before {
  content: ''; position: absolute; inset: 3px -4px -2px 4px; z-index: -1;
  background: repeating-linear-gradient(to bottom, #c9cbd2 0 1px, #ececf0 1px 2px);
  border-radius: 0 2px 2px 0;
}
.portal-book::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.24), transparent 3%, rgba(255,255,255,.13) 4%, transparent 7%);
  border-radius: 1px;
}
.portal-cover { display: block; width: 100%; height: auto; max-height: none; border-radius: 1px; }
.starlight-portal:hover .portal-book, .starlight-portal:focus-visible .portal-book { transform: perspective(1000px) rotateY(-3deg) translateY(-5px); }
.starlight-portal:focus-visible { outline: 3px solid #9fc0df; outline-offset: 4px; }
.portal-caption { font-size: 15px; letter-spacing: .02em; margin-top: 10px; }
.portal-caption span { margin-left: 8px; }
.portal-hint { font-size: 11px; color: #bec7df; }
.portal-orbit { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: #9facdf20; filter: blur(40px); z-index: -1; }
.typography-transition { position: fixed; inset: 0; z-index: 10000; pointer-events: none; background: #0b1027; opacity: 0; transition: opacity .5s; }
.typography-transition.is-active { opacity: 1; }
.typography-transition-cover { position: fixed; z-index: 10001; object-fit: contain; pointer-events: none; border-radius: 2px; box-shadow: 0 25px 80px #0008; }

/* Drift up into the night, without enlarging the book cover. */
.typography-transition {
  background: radial-gradient(ellipse at 18% 8%, #26305755, transparent 60%),
    radial-gradient(ellipse at 85% 88%, #442d6250, transparent 60%),
    linear-gradient(180deg, #04061a, #0a0e2e 55%, #141b4d);
  overflow: hidden;
}
.typography-transition i {
  position: absolute; border-radius: 50%; background: #e4ebff;
  box-shadow: 0 0 var(--glow) #d9e3ff; opacity: .7;
  animation: portal-sky-rise 1.3s cubic-bezier(.15,.5,.3,1) both;
}
@keyframes portal-sky-rise {
  from { transform: translateY(calc(-1 * var(--fall))); opacity: 0; }
  35% { opacity: .8; }
  to { transform: translateY(var(--fall)); opacity: .6; }
}

/* One introduction hierarchy across every project. */
.project-intro .pj-title { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.18; margin: 20px 0 12px; font-weight: 500; }
.project-intro .project-subtitle { font-size: 17px; line-height: 1.5; color: #356fa5; margin: 0 0 22px; }
.pg-body.project-intro .project-facts, .project-intro .project-facts { margin: 18px 0 24px; padding-bottom: 20px; }
.project-intro .pj-tag { display: inline-block; }
.project-intro .pj-h { margin: 20px 0 12px; }

/* Responsibilities stay distinct from outcomes in the FriendliAI introduction. */
.friendli-responsibilities{margin:0}.friendli-responsibilities>div{margin:0 0 12px}.friendli-responsibilities dt{font-weight:600;color:#356fa5;margin-bottom:4px}.friendli-responsibilities dd{margin:0;font-size:12px;line-height:1.55}.friendli-roles .project-facts{margin-bottom:18px;padding-bottom:15px}.friendli-results .next-subheading{color:#356fa5}
.friendli-body .friendli-bullets{padding-left:18px;margin:12px 0;font-size:12px;line-height:1.65}.friendli-body .friendli-bullets li{margin-bottom:14px}.friendli-results .friendli-bullets{font-size:13px;line-height:1.7}.friendli-results .friendli-bullets li{margin-bottom:22px}
.friendli-demo-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.friendli-demo-pair .friendli-video{margin:0}.friendli-model-crush .friendli-bullets{margin:12px 0}.friendli-model-crush .friendli-bullets li{margin-bottom:9px}@media(max-width:720px){.friendli-demo-pair{grid-template-columns:1fr;gap:12px}.friendli-demo-pair video{max-height:145px}}
.friendli-talk{margin:14px 0;padding:12px 14px;background:#eaf3fb;border-left:2px solid #83b5dc;border-radius:0 6px 6px 0;font-size:12px;line-height:1.5}
.friendli-video .friendli-gif{display:block;width:100%;height:auto;max-height:215px;object-fit:contain;background:white;border:1px solid #d5e3ed;border-radius:6px}
.friendli-content-label{font-size:11px;letter-spacing:.02em;color:#65798d;margin:0 0 10px}.friendli-blog-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px;line-height:1.5}.friendli-blog-table th,.friendli-blog-table td{text-align:left;vertical-align:top;padding:11px 9px;border-bottom:1px solid #d5e3ed;overflow-wrap:break-word}.friendli-blog-table th{font-weight:600;color:#356fa5;background:#eef5fb}.friendli-blog-table th:first-child{width:44%}.friendli-blog-figures{display:grid;grid-template-columns:1fr 1fr;gap:12px}.friendli-blog-figures .friendli-video{min-width:0}.friendli-blog-figures .friendli-gif{height:150px;object-fit:contain}@media(max-width:720px){.friendli-blog-table{font-size:10px}.friendli-blog-table th,.friendli-blog-table td{padding:8px 6px}.friendli-blog-figures .friendli-gif{height:110px}}

/* Project directory: the same hierarchy for all nine projects. */
.project-directory.bk-proj { gap: 0; }
/* the whole directory fits one page: tighter rows, a flex column like the body */
.project-list { display: flex; flex-direction: column; }
.project-directory .project-list .project-entry { padding-top: 8px; padding-bottom: 8px; }
.project-directory .project-list .project-entry + .project-group-label { margin-top: 16px; }
.project-group-label { margin: 0 0 10px; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .01em; text-transform: none; color: var(--ink-faint); }
.project-group-label--more { margin-top: 22px; }
.project-directory .project-entry { padding: 12px 0; gap: 14px; cursor: var(--cursor-point); }
.project-directory .bk-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.project-directory .project-category { font-size: 10px; }
.project-directory .project-entry strong { font-size: 20px; line-height: 1.2; }
.project-directory .project-entry em { font-size: 12px; line-height: 1.4; }
.project-directory .project-entry--compact { padding: 9px 0; }
.project-directory .project-entry--compact .bk-meta { flex-direction: row; justify-content: space-between; align-items: baseline; }
.project-directory .project-entry--compact strong { font-size: 16px; }
.project-directory .project-entry:hover strong { color: #356fa5; }
.project-directory .project-entry:focus-visible { outline: 2px solid #356fa5; outline-offset: 3px; }

.project-paper-title { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.friendli-figure-gallery .friendli-video{margin:12px 0}.friendli-figure-gallery .friendli-gif{max-height:155px}.friendli-figure-gallery figcaption{font-size:10px}.friendli-vote{display:block;width:100%;height:470px;max-height:58vh;border:1px solid #d5e3ed;border-radius:8px;background:#fff}@media(max-width:720px){.friendli-figure-gallery .friendli-gif{max-height:140px}.friendli-vote{height:460px;max-height:57vh}}
.friendli-game-embed{display:block;width:100%;height:340px;max-height:43vh;margin:16px 0;border:1px solid #d5e3ed;border-radius:8px;background:#fff}
.friendli-body .friendli-cake-layers{list-style:none;padding:0;margin:12px 0}.friendli-body .friendli-cake-layers li{margin-bottom:5px}
.friendli-vote-preview{padding:28px 24px;background:#eef5fb;border:1px solid #d5e3ed;border-radius:10px;margin:18px 0}.friendli-vote-preview h3{font-size:20px;line-height:1.3;color:#356fa5;margin:12px 0}.friendli-vote-preview p{font-size:13px;line-height:1.6}.friendli-vote-preview>a{display:inline-block;margin-top:12px;font-size:13px}
.friendli-demo-pair:has(> .friendli-video:only-child){grid-template-columns:1fr}
.friendli-talk-video{margin:14px 0}.friendli-talk-video iframe{display:block;width:100%;aspect-ratio:16/9;max-height:220px;border:1px solid #d5e3ed;border-radius:7px;background:#fff}.friendli-talk-video figcaption{font-size:10px;line-height:1.4;color:#65798d;margin-top:6px}.friendli-model-crush:has(.friendli-talk-video) .friendli-demo-pair video{max-height:155px}
.friendli-game-preview{margin:16px 0}.friendli-game-preview a{display:block}.friendli-game-preview img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;border-radius:8px}.friendli-game-preview a:focus-visible{outline:2px solid #356fa5;outline-offset:4px}
.friendli-vote-screenshot{margin:18px 0}.friendli-vote-screenshot img{display:block;width:100%;height:auto;border:1px solid #d5e3ed;border-radius:8px}.friendli-vote-screenshot figcaption{margin-top:12px;font-size:12px}.friendli-vote-screenshot>a{display:block}
.friendli-source-caption{line-height:1.45!important}.friendli-source-caption>a,.friendli-source-caption>span{display:block}.friendli-source-caption>span{margin-top:4px}.friendli-figure-gallery:has(.friendli-source-caption) .friendli-gif{max-height:125px}

/* Use the full project title as Eezey’s single subtitle. */
.project-intro .eeze-paper-subtitle { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; }

/* Eezey uses its complete research title as the main heading. */
.project-intro .pj-title.eeze-full-title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; margin-bottom: 24px; }

/* Fit the introduction and playable demo below Eezey's project facts. */
[data-face="eeze-poster"] .eeze-full-title { margin: 0 0 14px; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.3; }
[data-face="eeze-poster"] .project-intro .project-facts { margin: 12px 0 16px; padding-bottom: 12px; }
[data-face="eeze-poster"] .project-facts > div { margin-bottom: 6px; }
[data-face="eeze-poster"] .eeze-summary-grid { grid-template-columns: minmax(0, 1fr) minmax(90px, 26%); align-items: start; gap: 16px; margin-bottom: 12px; }
[data-face="eeze-poster"] .eeze-summary-copy p { font-size: 12px; line-height: 1.55; }
[data-face="eeze-poster"] .eeze-embedded-demo video { max-height: 190px; }
[data-face="eeze-poster"] .project-intro .pj-title.eeze-full-title { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.25; margin: 0 0 12px; }
[data-face^="eeze-poster"] .eeze-summary-grid { grid-template-columns: minmax(0, 1fr) 100px; gap: 14px; align-items: start; }
[data-face^="eeze-poster"] .eeze-summary-copy p { font-size: 12px; line-height: 1.5; }
[data-face^="eeze-poster"] .eeze-summary-copy .pj-h { margin: 0 0 8px; }
[data-face^="eeze-poster"] .eeze-embedded-demo video { height: 170px; max-height: 170px; }

/* Keep category headings attached to their first project in the directory. */
.project-directory .project-entry + .project-group-label { margin-top: 22px; }
.project-bookmarks .subtab { padding-inline: clamp(6px, 1vw, 12px); font-size: clamp(10px, 1.1vw, 14px); }


/* Shared project typography: editorial headings, readable prose, quiet metadata.
   :is() keeps specificity above older per-project rules without !important. */
.project-face .pg-body:is(.pg-body) {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;
}
.project-face .pg-body:is(.pg-body) :is(h2.next-heading, h3.next-heading) {
  font-family: var(--font-editorial);
  font-weight: 400;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--sky-deeper);
}
.project-face .pg-body:is(.pg-body) h2.next-heading { font-size: 24px; line-height: 1.25; margin: 0 0 16px; }
.project-face .pg-body:is(.pg-body) h3.next-heading { font-size: 19px; line-height: 1.3; margin: 18px 0 10px; }
.project-face .pg-body:is(.pg-body) :is(h3.next-subheading, .eeze-flow-heading) {
  font: 400 19px/1.35 var(--font-editorial);
  color: var(--sky-deeper);
  letter-spacing: 0;
  text-transform: none;
  margin: 16px 0 8px;
}
.project-face .pg-body:is(.pg-body) :is(.pj-h, h4.next-subheading, .eeze-step > strong) {
  font: 500 12px/1.5 var(--font-body);
  color: var(--ink-faint);
  letter-spacing: 0;
  text-transform: none;
  margin: 16px 0 8px;
}
.project-face .pg-body:is(.pg-body) :is(p, .friendli-bullets, .friendli-bullets li) {
  font-size: inherit;
  line-height: 1.65;
}
.project-face .pg-body:is(.pg-body) p { margin-bottom: 12px; }
.project-face .pg-body:is(.pg-body) .friendli-bullets li { margin-bottom: 9px; }
.project-face .pg-body:is(.pg-body) :is(figcaption, .eeze-caption) {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-faint);
  margin-top: 8px;
}
.project-face .pg-body:is(.pg-body) :is(.pj-tag, .friendli-content-label) {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink-faint);
}
.project-face .pg-body:is(.pg-body) .project-subtitle { font-size: 16px; line-height: 1.5; }
.project-face .pg-body:is(.pg-body) .project-facts { font: 400 12px/1.6 var(--font-body); }
.project-face .pg-body:is(.pg-body) .project-facts dt { font-weight: 500; }

/* Shared rhythm for prose, lists, and metadata on every project leaf. */
.project-face .pg-body:is(.pg-body) :is(ul, ol) { padding-left: 19px; margin: 12px 0 16px; }
.project-face .pg-body:is(.pg-body) li { margin-bottom: 8px; line-height: 1.65; }
.project-face .pg-body:is(.pg-body) .project-facts { margin: 16px 0 20px; padding-bottom: 16px; }
.project-face .pg-body:is(.pg-body) .project-facts > div { margin-bottom: 8px; }
.project-face .pg-body:is(.pg-body) .project-facts > div:last-child { margin-bottom: 0; }
.project-face .pg-body:is(.pg-body) .project-facts :is(dt, dd) { font-size: 12px; line-height: 1.6; }
.project-face .pg-body:is(.pg-body) .friendli-content-label { margin: 0 0 10px; }
.project-face .pg-body:is(.pg-body) :is(.next-heading, .next-subheading) strong { font-weight: inherit; }
.project-directory .project-entry .bk-meta { min-width: 0; }
.project-directory .project-entry em { font-style: normal; }

/* Reserve stable media space before metadata loads, and keep preview links
   with the artwork instead of sending a lone link to the next face. */
.project-face .mrfidget-figure video { height: 210px; max-height: 210px; }
.project-face .mrfidget-figure { margin: 14px 0; }
/* Paired clips: match the 16:9 source so no navy letterbox bar shows above the frame. */
.project-face .mrfidget-pair .mrfidget-figure video { height: auto; max-height: none; aspect-ratio: 16 / 9; }
.project-face .depthink-preview .depthink-space { height: 215px; }
.project-face .depthink-preview .depthink-figure { margin: 12px 0; }
.project-face .friendli-vote-screenshot img { max-height: 255px; object-fit: contain; }

/* The journey is one spread: a map-led story opposite a city-led index. */
.journey-intro h2,
.journey-index-heading h2 {
  margin: 0;
  font: 400 clamp(26px, 2.4vw, 34px)/1.3 var(--font-display);
  letter-spacing: .035em;
  color: #294d6e;
}
.journey-intro { margin-bottom: 20px; }
.about-map-body .bk-map__note:first-child { margin-top: 0; }
/* the map page talks in the same voice as the About text beside it */
.about-map-body .bk-map__note { font-size: inherit; line-height: inherit; margin: 10px 0 0; color: inherit; }
.about-map-body .bk-map__row { display: block; }
.about-map-body .bk-map__fig { width: 100%; padding: 6px 4px 4px; border-radius: 16px; background: #eaf4f8; }
.about-map-body .bk-map__fig > svg { width: 100%; height: auto; max-height: none; }
.journey-index-heading { margin-bottom: 12px; }
.journey-index-heading h2 { font-size: clamp(23px, 2vw, 30px); }
.journey-index-heading p { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-faint); }
.about-journey-body .bk-map__index { grid-template-columns: 1fr; gap: 2px; margin: 0; }
.about-journey-body .bk-idx {
  width: 100%; min-height: 46px; margin: 0; padding: 5px 9px;
  align-items: center; gap: 12px; border: 0; border-bottom: 1px solid #dce7ed;
  border-radius: 9px; background: transparent; color: inherit; text-align: left;
  font: inherit; cursor: var(--cursor-point);
}
.about-journey-body .bk-idx:last-child { border-bottom-color: transparent; }
.about-journey-body .bk-idx:hover,
.about-journey-body .bk-idx.is-hot { background: #e5f1f8; }
.about-journey-body .bk-idx:focus-visible { outline: 2px solid #356fa5; outline-offset: 1px; }
.about-journey-body .bk-idx__n {
  width: 28px; height: 28px; border-radius: 50%; transform: none;
  background: #7697ad; font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.about-journey-body .bk-idx.is-hot .bk-idx__n { background: #356fa5; }
.bk-idx__copy { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; }
.bk-idx__city { font: 400 17px/1.2 var(--font-editorial); color: #29445f; }
.bk-idx__experience { grid-column: 1 / -1; margin-top: 3px; font-size: 11px; line-height: 1.4; color: #60758a; }
.bk-idx__experience b { color: #455f75; font-weight: 500; }
.bk-idx__now {
  justify-self: start; padding: 2px 7px; border-radius: 999px;
  background: #356fa5; color: #fff; font-size: 9px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}

/* Calm, high-contrast map marks. The only route on the map is the journey
   itself — one thin contrail the paper plane draws as it flies the stops in
   order, quiet enough not to compete with the city labels. */
.bk-map__fig .bk-pin { color: #6d8fa8; cursor: var(--cursor-point); outline: none; }
.bk-map__fig .bk-pin__dot { stroke: #fff; stroke-width: .75; }
.bk-map__fig .bk-pin__num { fill: #fff; font: 700 2.1px var(--font-body); }
.bk-map__fig .bk-city-label { fill: #405d72; font: 500 5px var(--font-body); paint-order: stroke; stroke: #eaf4f8; stroke-width: 1px; stroke-linejoin: round; }
.bk-map__fig .bk-pin.is-hot { color: #285f91; }
.bk-map__fig .bk-pin.is-hot .bk-pin__dot { transform: scale(1.22); }
.bk-map__fig .bk-pin.is-hot .bk-pin__halo { opacity: .22; }
.bk-map__fig svg.is-focus .bk-pin:not(.is-hot) { opacity: .42; }
.bk-map__fig .bk-route { stroke: #8fb0c6; stroke-width: .42; opacity: .5; }

/* Leave reliable room for the page-turn controls inside short desktop views. */
@media (min-width: 721px) {
  .stage { padding-top: 52px; padding-bottom: 92px; }
  .controls { bottom: 24px; }
}

@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .journey-intro { margin-bottom: 14px; }
  .journey-intro h2 { font-size: 25px; }
  .about-map-body .bk-map__fig { padding: 8px; }
  .about-map-body .bk-map__fig > svg { max-height: 235px; }
  .bk-card { left: 10px; bottom: 10px; max-width: 64%; padding: 6px 9px; font-size: 11px; }
  .bk-card__n { width: 15px; height: 15px; font-size: 9px; }
  .journey-index-heading { margin-bottom: 12px; }
  .journey-index-heading h2 { font-size: 25px; }
  .about-journey-body .bk-map__index { gap: 2px; }
  .about-journey-body .bk-idx { min-height: 48px; padding: 6px 8px; }
  .bk-idx__city { font-size: 17px; }
}

/* Category colors for the top project tabs. */
.project-bookmarks .subtab[data-go="proj-friendli"] {
  --bookmark-bg: #edf0fc; --bookmark-active: #d6def6; --bookmark-ink: #3e4e78;
}
.project-bookmarks .subtab[data-go="proj-eeze"] {
  --bookmark-bg: #e8f4ee; --bookmark-active: #cce6d9; --bookmark-ink: #365d4f;
}
.project-bookmarks .subtab[data-go="proj-mrfidget"] {
  --bookmark-bg: #f0eaf8; --bookmark-active: #e0d2ee; --bookmark-ink: #604875;
}
.project-bookmarks .subtab[data-go="proj-akgi"] {
  --bookmark-bg: #fff0e5; --bookmark-active: #f5dbc5; --bookmark-ink: #78533d;
}
.project-bookmarks .subtab[data-go] {
  background: var(--bookmark-bg);
  color: var(--bookmark-ink);
}
.project-bookmarks .subtab[data-go]:hover,
.project-bookmarks .subtab[data-go].is-active {
  background: var(--bookmark-active);
  color: var(--bookmark-ink);
}
.project-bookmarks .subtab[data-go].is-active { font-weight: 500; }
.project-bookmarks .subtab[data-go]:focus-visible { outline: 2px solid var(--bookmark-ink); outline-offset: 2px; }

/* A résumé line that produced a project says so in the line itself. This used
   to be an edge bookmark that appeared on hover, but a hover-only affordance
   the reader never sees — and that competed with the chapter tabs for the same
   edge — bought less than it cost. A quiet inline link is always visible, works
   on touch, and reads as part of the entry instead of as navigation. */
.related-project {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: #eef4fa;
  color: #64768c;
  font: 400 10px/1.5 var(--font-body);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  transition: background .16s ease, color .16s ease;
}
.related-project:hover,
.related-project:focus-visible { background: #dde9f5; color: var(--sky-deeper, #2d3f57); }
.related-project:focus-visible { outline: 2px solid #8fb4d6; outline-offset: 2px; }
/* the pill rides on the same line as the org / program name rather than
   adding a row to every entry — :has() keeps it to entries that have one */
.bk-item:has(> .related-project) .bk-org { display: inline-block; }
/* education: same right-hand slot as experience — title | pill, program below */
.bk-edu__txt:has(> .related-project) { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: start; }
.bk-edu__txt:has(> .related-project) em { grid-column: 1 / -1; grid-row: 2; }
.bk-edu .related-project { grid-column: 2; grid-row: 1; margin: 4px 0 0; }
/* extracurricular lines: the pill trails the sentence inline */
.bk-edu__extra-txt .related-project { margin: 0 0 0 6px; vertical-align: 1px; }
/* experience: the pill sits at the right end of the title row, above the date,
   so it reads as its own column instead of crowding the org link */
.bk-item__top .related-project { flex: none; margin: 4px 0 0; }
.bk-item__top:has(> .related-project) { flex-wrap: nowrap; }
.bk-item__top:has(> .related-project) strong { flex: 1 1 0; }

/* Top bookmarks share the blue edge tabs' type scale and 30px protrusion. */
.project-bookmarks .subtab {
  font-size: var(--tabfs, 16px);
  line-height: 1;
}
.page > .project-bookmarks { top: -30px; height: 38px; }
.page > .project-bookmarks .subtab { height: 30px; margin-bottom: 8px; }
.page > .project-bookmarks .subtab.is-active { height: 38px; margin-bottom: 0; }
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .book > .project-bookmarks:not([hidden]) { top: -30px; height: 38px; }
  .book > .project-bookmarks .subtab { height: 30px; margin-bottom: 8px; }
  .book > .project-bookmarks .subtab.is-active { height: 38px; margin-bottom: 0; }
}

/* Education reads as the same list as Experience — hairline rows, no cards. */
.bk-edu {
  display: block;
  background: none;
  border: 0;
  border-bottom: 1px solid #e0ebf3;
  border-radius: 0;
  padding: 14px 0;
  margin-bottom: 0;
}
.bk-edu:first-child { padding-top: 0; }
.bk-edu:last-child { border-bottom: 0; padding-bottom: 0; }
.bk-edu__txt { display: block; flex-basis: auto; min-width: 0; }
.bk-edu__txt em { display: block; font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin-top: 2px; }
.bk-edu__meta { margin-top: 3px; margin-left: 0; text-align: left; column-gap: 12px; }
.bk-edu__meta .bk-edu__loc { font-size: 12px; line-height: 1.7; }
.bk-edu__meta .bk-date { font-size: 10px; line-height: 1.5; letter-spacing: .3px; padding: 0; }
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .bk-edu { padding: 12px 0; }
}

/* ---------- journey map · night sky ----------
   The stops are a constellation: the panel goes deep navy, the coastlines are
   redrawn as a dotted line of faint stars instead of filled land, and each
   city is a bright star on the route the plane traces between them. */
.about-map-body .bk-map__fig,
.bk-map__fig {
  background:
    radial-gradient(1.1px 1.1px at 12% 22%, rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1px 1px at 27% 68%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.3px 1.3px at 41% 14%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 55% 47%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.2px 1.2px at 68% 80%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1px 1px at 78% 31%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.4px 1.4px at 88% 62%, rgba(255,255,255,.65), transparent 100%),
    radial-gradient(1px 1px at 94% 12%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1px 1px at 6% 86%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.1px 1.1px at 35% 92%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(130% 150% at 50% -10%, #20365c 0%, #142449 52%, #0c162e 100%);
  border-color: #24385f;
  box-shadow: inset 0 1px 14px rgba(4, 10, 24, .5);
}

/* coastlines as a dotted star trail — no fill, round caps on a 0-length dash */
.bk-map__fig .bk-land {
  fill: none;
  stroke: rgba(176, 206, 247, .38);
  stroke-width: .36;
  stroke-linecap: round;
  stroke-dasharray: 0 1.6;
}

/* cities: bright stars with a soft bloom, current stop warm gold */
.bk-map__fig .bk-pin { color: #a9d2ff; }
.bk-map__fig .bk-pin__dot {
  stroke: rgba(255, 255, 255, .5);
  stroke-width: .5;
  filter: drop-shadow(0 0 1.4px currentColor);
}
.bk-map__fig .bk-pin__dot { stroke-linejoin: round; }
/* the star is too slim to hold a number; the label + card carry it */
.bk-map__fig .bk-pin__num { display: none; }
.bk-map__fig .bk-pin__halo { opacity: .3; }
.bk-map__fig .bk-pin.is-hot { color: #ffd489; }
.bk-map__fig svg.is-focus .bk-pin:not(.is-hot) { opacity: .34; }
.bk-map__fig .bk-city-label {
  fill: #d7e6ff;
  font-size: 3.6px;
  paint-order: stroke;
  stroke: rgba(12, 22, 46, .85);
  stroke-width: 1.1px;
}

/* constellation lines between the stops */
.bk-map__fig .bk-arc { stroke: rgba(160, 197, 245, .5); }
.bk-map__fig .bk-route { stroke: rgba(173, 205, 247, .35); opacity: .5; }
.bk-map__fig path[stroke="#839aac"] { stroke: rgba(150, 183, 226, .55) !important; }

/* the stop card reads as glass over the sky */
.bk-map__fig .bk-card {
  background: rgba(15, 28, 55, .74);
  border-color: rgba(150, 190, 240, .26);
  box-shadow: 0 6px 20px rgba(4, 10, 24, .38);
  backdrop-filter: blur(6px);
  color: #b9cce6;
}
.bk-map__fig .bk-card__city { color: #f2f7ff; }
.bk-map__fig .bk-card__exp { color: #9fb5d2; }
.bk-map__fig .bk-card__exp b { color: #d7e6ff; }
.bk-map__fig .bk-card__n { background: #6ea8ea; color: #0c162e; }
.bk-map__fig .bk-card__now { background: #ffd489; color: #33260c; }

/* ---------- bookmarks read as paper tucked BEHIND the page ----------
   Tabs used to float in front of the paper with rounded, shadowed bottoms,
   which read as stickers sitting on top of the book. Real bookmarks slide in
   from behind: only the protruding head shows, the foot disappears under the
   page. So every tab now runs past the page's top edge and is painted behind
   it — the leaf's own paper is what cuts them off. */

/* Inside a leaf the faces and the nav share one preserve-3d space, so a 1px
   push back (not z-index, which fights the flip) parks the tabs behind paper.
   The nav is bound to the front face only, so it never flips toward the reader. */
.page > .project-bookmarks {
  top: -38px;
  height: 50px;
  z-index: auto;
  transform: translateZ(-1px);
}
.page > .project-bookmarks .subtab {
  height: 42px;              /* 30px shows, 12px hides under the paper */
  margin-bottom: 0;
  padding-bottom: 14px;
  border-radius: 9px 9px 0 0;
  box-shadow: 0 -1px 4px rgba(82, 113, 141, .10);
}
.page > .project-bookmarks .subtab.is-active {
  height: 50px;              /* 38px shows — the open tab stands taller */
  margin-bottom: 0;
  padding-bottom: 14px;
  border-radius: 9px 9px 0 0;
  box-shadow: 0 -1px 5px rgba(82, 113, 141, .12);
}
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .book > .project-bookmarks:not([hidden]) { top: -38px; height: 50px; z-index: 0; }
  .book > .project-bookmarks .subtab { height: 42px; margin-bottom: 0; padding-bottom: 12px; }
  .book > .project-bookmarks .subtab.is-active { height: 50px; margin-bottom: 0; }
}

/* The journey map owns the whole page: the sky panel takes every pixel left
   under the intro, so the constellation reads as a window cut into the page
   instead of a thumbnail floating in white space. */
.about-map-body { justify-content: flex-start; }
.about-map-body .journey-intro { flex: none; }
.about-map-body .bk-map__row {
  display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch;
}
.about-map-body .bk-map__fig {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.about-map-body .bk-map__fig > svg {
  width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; max-height: none;
}
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .about-map-body .bk-map__fig > svg { max-height: none; }
}

/* Stops read as stars, not numbered markers: drop the digits and shrink the
   dot to a point of light. The halo circle stays full size, so the click /
   tap target is unchanged even though the visible star is small. */
.bk-map__fig .bk-pin__num { display: none; }
.bk-map__fig .bk-pin__dot {
  stroke-width: .25;
  filter: drop-shadow(0 0 .7px currentColor);
}
.bk-map__fig .bk-pin.is-hot .bk-pin__dot { transform: scale(1.2); }
/* the card drops its number badge too — the city name carries it */
.bk-map__fig .bk-card__n { display: none; }

/* No numbering anywhere on the journey: the index rows lose their badges too,
   the card drops the NOW pill (the "2026 – now" date already says it), and the
   current stop is the brightest white star instead of a gold one. */
.about-journey-body .bk-idx__n,
.bk-idx__n { display: none; }
.bk-map__fig .bk-card__now { display: none; }
.bk-map__fig .bk-pin { color: #8fb6e8; }
.bk-map__fig .bk-pin.is-hot { color: #ffffff; }
.bk-map__fig .bk-pin.is-hot .bk-pin__dot {
  filter: drop-shadow(0 0 1px rgba(255,255,255,.85));
}

/* ── Highlight mode ────────────────────────────────────────────────────────
   A toggle on a text page fades everything except the sentences marked
   .hl-key, so a skim-reader sees only the gist. Off by default; the faded
   text stays selectable and in the flow, only its ink drops back. */
.pg-label--row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
/* A leaf that ended up with no faces must not occupy a slot in the stack. */
.page--void { display: none; }

/* A switch, sitting where a running head's folio would. The track takes the
   marker's own yellow when it is on, so the control still names its effect —
   but the affordance is now explicit: readers can see it is a thing to flip
   without hovering first. */
.hl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .08em;
  color: #8296ac;
  background: none;
  border: 0;
  border-radius: 0;
  /* Transparent padding, pulled back out again: a comfortable tap target that
     does not shift the running head it sits in. */
  padding: 9px 7px;
  margin: -9px -7px;
  cursor: var(--cursor-point);
  transition: color .2s ease;
}
.hl-toggle__label { white-space: nowrap; }
/* Shaped like the pen itself: a slightly tapered barrel, felt tip as the
   thumb. The barrel stays white — only the tip carries color. */
.hl-toggle__switch {
  position: relative;
  flex: none;
  width: 28px;
  height: 14px;
  border-radius: 3px 999px 999px 3px;
  background: var(--paper, #fdfeff);
  box-shadow: inset 0 0 0 1px #cfe0ee;
  transition: box-shadow .25s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.hl-toggle__switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 2px 50% 50% 2px;
  background: #b9c4d4;
  box-shadow: 0 1px 2px rgba(27, 42, 74, .2);
  transition: transform .28s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              background .25s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.hl-toggle:hover { color: var(--sky-deeper); }
.hl-toggle:hover .hl-toggle__switch::after { background: #a3b2c8; }
.hl-toggle:focus-visible { outline: 2px solid var(--sky-deeper); outline-offset: 4px; border-radius: 4px; }
/* on: only the tip inks up, the same yellow the marker lays on the page */
.hl-toggle[aria-pressed="true"] { color: #6d5a17; }
.hl-toggle[aria-pressed="true"] .hl-toggle__switch::after {
  background: #f5da2e;
  transform: translateX(14px);
}

.hl-scope p,
.hl-scope .bk-link { transition: color .45s ease .15s; }
.hl-scope.is-highlighting p { color: #bccbd9; }
.hl-scope.is-highlighting .bk-link { color: inherit; border-bottom-color: transparent; }
.hl-scope.is-highlighting .hl-key { color: var(--ink, #2b3c52); }
.hl-scope.is-highlighting .hl-key .bk-link {
  color: #2f4a6b;
  border-bottom-color: #c9a63f66;
}

/* The marker itself: a band of ink laid under the words, grown from left to
   right so it reads as a pen stroke rather than a background switching on.
   The gradient stops keep the band a little shorter than the line box, and
   the slight tilt at the tail is what a real highlighter leaves behind.
   box-decoration-break lets a sentence that wraps get a stroke per line. */
.hl-key {
  --hl-marker: rgba(255, 243, 74, .5);
  background-image: linear-gradient(
    to bottom,
    transparent 8%,
    var(--hl-marker) 8%,
    var(--hl-marker) 88%,
    rgba(255, 243, 74, .22) 88%,
    transparent 96%
  );
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .06em .16em;
  margin: 0 -.16em;
  border-radius: .18em .5em .35em .22em;
  transition: background-size .5s cubic-bezier(.33, .68, .3, 1);
  transition-delay: calc(var(--hl-i, 0) * 130ms);
}
.hl-scope.is-highlighting .hl-key { background-size: 100% 100%; }

/* Going back to plain text, the strokes lift all at once — an undo, not a
   second performance. */
.hl-scope:not(.is-highlighting) .hl-key {
  transition-duration: .3s;
  transition-delay: 0s;
}


/* A fixed caption keeps the active stop readable without crossing the map. */
.bk-map__fig .bk-card {
  position: static; width: 100%; max-width: none; min-height: 44px;
  margin: 0; padding: 6px 10px; box-sizing: border-box;
  border: 0; border-top: 1px solid rgba(173, 205, 247, .22);
  border-radius: 0; background: rgba(9, 20, 43, .42);
  box-shadow: none; backdrop-filter: none;
  font-size: 10px;
}
.bk-map__fig .bk-card__city { font-size: 12px; }
.bk-map__fig .bk-card__exp { margin-top: 2px; font-size: 10px; line-height: 1.3; }

/* Directory rows read as two lines: the title, then one quiet meta line
   that folds the category and the description together. */
.project-directory .project-entry:not(.project-entry--compact) .bk-meta { display: block; }
.project-directory .project-entry:not(.project-entry--compact) strong { display: block; margin-bottom: 3px; }
.project-directory .bk-sub { display: block; font-size: 12px; line-height: 1.5; color: #7b8ea1; text-wrap: pretty; }
.project-directory .bk-sub .project-category { display: inline; font-size: inherit; font-weight: 500; color: #52677c; }
.project-directory .bk-sub .project-category::after { content: " · "; color: #a9bdcf; }
.project-directory .bk-sub em { font-style: normal; color: inherit; }

/* A drawn arrow instead of the heavy ↗ glyph. */
svg.bk-go {
  flex: 0 0 auto;
  align-self: center;
  width: 15px;
  height: 15px;
  color: #9db3c6;
  transition: color .18s ease, transform .18s ease;
}
.project-entry:hover svg.bk-go,
.project-entry:focus-visible svg.bk-go { color: #356fa5; transform: translate(2px, -2px); }

/* ── Running heads retired ───────────────────────────────────────────────────
   Every inside page carried a "About · My summers" line, but the tab you came
   in through and the chapter opener already say where you are — so the line
   was repeating what the reader just read. The nodes stay in the DOM on
   purpose: search and the tab/bookmark sync read `.pg-label`'s text content.
   Only the ink is gone.
   The one exception is `.pg-label--row`, which also holds the Highlights
   switch; there just its text hides and the switch keeps its folio position. */
.pg-label:not(.pg-label--row) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pg-label--row {
  justify-content: flex-end;
}
.pg-label--row > span {
  display: none;
}

/* Experience reuses the marker: bullets fade, the marked phrases stay inked.
   Titles and dates are left alone so the page still scans as a list. */
.hl-scope li { transition: color .45s ease .15s; }
.hl-scope.is-highlighting li { color: #bccbd9; }
.journey-outro { margin-top: 10px; }

/* FriendliAI — blog evolution timeline (one row) */
.friendli-body .friendli-timeline{list-style:none;display:flex;flex-wrap:nowrap;align-items:center;padding:0!important;margin:12px 0 16px!important;font-size:10px;line-height:1.2;white-space:nowrap}
.friendli-body .friendli-timeline li{flex:0 1 auto;min-width:0;padding:3px 7px;border:1px solid #d5e3ed;border-radius:999px;background:#eef5fb;color:#356fa5;margin:0!important;overflow:hidden;text-overflow:ellipsis}
.friendli-body .friendli-timeline li+li{margin-left:15px!important;position:relative;overflow:visible}
.friendli-body .friendli-timeline li+li::before{content:"→";position:absolute;left:-12px;top:50%;transform:translateY(-50%);color:#83b5dc}
.friendli-source-caption>a{width:fit-content}
.friendli-body a.bk-link{text-decoration:none}
/* project intro: title with role · period beside it */
.pg-body .pj-titlerow{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:4px;margin:0 0 22px}
.pg-body .pj-titlerow .pj-title{margin:0!important}
.pg-body .pj-meta{font-family:var(--font-body);font-weight:400;margin:0;font-size:13px;line-height:1.5;color:#526b83}
/* standalone intro pages match the flowed FriendliAI/eeze/Next intros */
.project-face .pg-body.project-intro .friendli-results .friendli-bullets{font-size:12.5px}
.project-face .friendli-body .friendli-vote-screenshot img{max-height:210px}

/* Behind the Blogs: the table picks a story, the facing page shows it. All
   stories share one grid cell so the page is sized to the longest one and
   switching never reflows the book. */
.friendli-blog-table tr.is-active td { background: #f3f8fd; }
/* The four rows share one vertical switch: a white barrel down the last
   column (the same barrel as the Highlights switch), a stop per row, and a
   single blue thumb that slides to the chosen row, its arrow pointing at the
   facing page where the story opens. JS places the rail and thumb from the
   rows' own offsets, so rows of any height line up. */
.behind-wrap { position: relative; }
.friendli-blog-table th.behind-col { width: 44px; padding-left: 0; padding-right: 0; text-align: center; }
.friendli-blog-table td.behind-cell { padding: 0; vertical-align: middle; position: relative; }
.friendli-blog-table tbody tr { cursor: var(--cursor-point); }
.friendli-blog-table tbody tr td { transition: background .25s ease; }
.friendli-blog-table tbody tr:not(.is-active):hover td { background: #f8fbfe; }
.behind-btn {
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
  width: 100%; height: 100%; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: var(--cursor-point);
}
.behind-btn__stop {
  width: 5px; height: 5px; border-radius: 50%;
  background: #b9c4d4;
  transition: transform .2s ease, background .2s ease;
}
tr:hover .behind-btn__stop, .behind-btn:hover .behind-btn__stop { background: #356fa5; transform: scale(1.5); }
.behind-btn:focus-visible { outline: 2px solid #356fa5; outline-offset: -4px; border-radius: 8px; }
.behind-rail, .behind-knob { position: absolute; pointer-events: none; opacity: 0; }
.behind-wrap.is-ready .behind-rail, .behind-wrap.is-ready .behind-knob { opacity: 1; }
.behind-rail {
  z-index: 1; width: 22px; border-radius: 999px;
  background: var(--paper, #fdfeff);
  box-shadow: inset 0 0 0 1px #cfe0ee;
}
.behind-knob {
  z-index: 3; width: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #356fa5; color: #fff; font: 600 11px/1 var(--font-body);
  box-shadow: 0 1px 2px rgba(27, 42, 74, .25), 0 3px 8px -2px rgba(53, 111, 165, .35);
  transition: top .5s cubic-bezier(.34, 1.36, .5, 1), height .5s cubic-bezier(.34, 1.36, .5, 1), opacity .2s ease;
}
.behind-knob.is-moving { animation: behind-nudge .5s ease; }
@keyframes behind-nudge { 40% { transform: scaleX(.8); } }
@media (max-width: 720px) { .friendli-blog-table th.behind-col { width: 36px; font-size: 9.5px; } }
.behind-stories { display: grid; }
.behind-story {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateX(28px);
  transition: opacity .38s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s;
}
.behind-story.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .38s ease .06s, transform .45s cubic-bezier(.2,.7,.2,1) .06s, visibility 0s;
}
.behind-story > h3.next-heading:first-child { margin-top: 0; }
.behind-story { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c2d9eb transparent; padding-right: 4px; }

/* eeze case study — FriendliAI-style opening + flowing sections */
.eeze-intro .project-subtitle { margin: 6px 0 14px; font-size: 14px; }
.eeze-demo-page .eeze-embedded-demo { margin: 0; text-align: center; }
.eeze-demo-page .eeze-embedded-demo video { display: inline-block; width: auto; max-width: 100%; height: auto; max-height: 72vh; margin: 0; border: 1px solid #d5e3ed; }
/* book mode: size the video to the page body, not the viewport (72vh overflowed the page on tall windows) */
html:not(.is-scroll) .eeze-demo-page { height: 100%; display: flex; flex-direction: column; }
html:not(.is-scroll) .eeze-demo-page .eeze-embedded-demo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; }
html:not(.is-scroll) .eeze-demo-page .eeze-embedded-demo video { flex: 0 1 auto; min-height: 0; max-height: 100%; }
html:not(.is-scroll) .eeze-demo-page .eeze-embedded-demo figcaption { flex: none; }
.eeze-poster-full { margin: 0; text-align: center; }
.eeze-poster-full .eeze-poster-open { display: inline-block; width: auto; max-width: 100%; }
.eeze-poster-full img { display: block; width: auto; max-width: 100%; height: auto; max-height: 72vh; border: 1px solid #d5e3ed; border-radius: 10px; }
.eeze-poster-full figcaption { margin-top: 10px; font: 400 12px/1.4 var(--font-body); color: var(--ink-faint); }
.eeze-intro .friendli-results { padding-top: 4px; }
.eeze-body .eeze-interface .friendli-gif { max-height: 300px; }
/* sized to share the intro face with the Highlights */
.eeze-body .eeze-landing { margin: 20px 0 0; }
.eeze-body .eeze-landing img { max-height: 280px; }
.eeze-body .eeze-landing figcaption { text-align: center; margin: 8px 0 0; }
.eeze-poster-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.eeze-poster-open:focus-visible, .eeze-zoom-link:focus-visible { outline: 2px solid #356fa5; outline-offset: 3px; border-radius: 6px; }
.eeze-body .eeze-poster-thumb .friendli-gif { max-height: 260px; }
.eeze-zoom-link { border: 0; background: none; padding: 0; font: inherit; color: #356fa5; cursor: var(--cursor-point); }
.eeze-zoom-link:hover { text-decoration: underline; }

/* source-caption links sit on one row (wrap if narrow) — saves vertical room on the page */
.friendli-source-caption:has(>a+a){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px;row-gap:4px}
.friendli-source-caption:has(>a+a)>span{flex-basis:100%}
/* link lists run on one row (wrap when they don't fit), and the cake GIF shrinks and sits centered, so the section fits on one page */
.friendli-links{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px;row-gap:6px}
.friendli-game-preview a{width:fit-content;max-width:100%;margin-inline:auto}
.friendli-game-preview img{width:auto;max-width:100%;max-height:360px}

/* The global `* { margin:0 }` reset strips the UA's `margin:auto` from modal
   dialogs, pinning them top-left; restore centering for every modal. */
dialog:modal { margin:auto; }
/* Close buttons get focus on open; keep the ring for keyboard users only. */
.eeze-dialog button:focus:not(:focus-visible), .project-image-dialog button:focus:not(:focus-visible) { outline:none; }
.eeze-dialog button:focus-visible, .project-image-dialog button:focus-visible { outline:2px solid #356fa5; outline-offset:2px; }
/* AKGI renders are white-background PNGs: multiply them into the page paper. */
.akgi-body .next-figure img { mix-blend-mode:multiply; }
.akgi-body .akgi-figure img { max-height:210px; }
.akgi-body p + .next-heading { margin-top:24px; }

/* polaroid captions: Pangolin handwriting (beats the project-page Jost figcaption rule) */
.project-face .pg-body:is(.pg-body) .typo-photos figcaption { font-family: "Pangolin", "Poor Story", cursive; font-weight: 400; font-size: 11.5px; }

/* ── tape & star stickers holding every polaroid down ──────────────────
   ::before = a strip of tape (torn zigzag ends), ::after = a star sticker.
   Stuck flat: no shadow, no hover movement. Each photo gets its own mix. */
.snap, .typo-photos figure { position: relative; }
.snap::before, .typo-photos figure::before,
.snap::after,  .typo-photos figure::after {
  content: none; position: absolute; z-index: 3; pointer-events: none;
}
/* tape strip base */
.snap::before, .typo-photos figure::before {
  width: 48%; aspect-ratio: 3.3 / 1; left: 26%; top: 0;
  --zig: 5px;
  -webkit-mask:
    conic-gradient(from -45deg at left, #0000 25%, #000 0) left / 51% var(--zig) repeat-y,
    conic-gradient(from 135deg at right, #0000 25%, #000 0) right / 51% var(--zig) repeat-y;
          mask:
    conic-gradient(from -45deg at left, #0000 25%, #000 0) left / 51% var(--zig) repeat-y,
    conic-gradient(from 135deg at right, #0000 25%, #000 0) right / 51% var(--zig) repeat-y;
}
/* star sticker base */
.snap::after, .typo-photos figure::after {
  width: 30%; aspect-ratio: 1; background: center / contain no-repeat;
}

/* tape looks */
.snap:is(.snaps--about :nth-child(1), .snaps--friendli :nth-child(3))::before,
.typo-photos figure:nth-child(2)::before {                                   /* pink striped washi, top centre */
  content: ""; transform: translateY(-50%) rotate(-5deg);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 3px, transparent 3px 7px), rgba(255, 196, 226, .78);
}
.snap:is(.snaps--about :nth-child(3))::before,
.typo-photos figure:nth-child(1)::before {                                   /* clear tape across the top-left corner */
  content: ""; left: -14%; top: 4%; transform: rotate(-40deg);
  background: rgba(255, 255, 255, .58); box-shadow: inset 0 0 0 .6px rgba(27, 42, 74, .1);
}
.snap:is(.snaps--friendli :nth-child(1))::before,
.typo-photos figure:nth-child(4)::before {                                   /* mint polka-dot tape, top-right corner */
  content: ""; left: auto; right: -14%; top: 4%; transform: rotate(38deg);
  background: radial-gradient(circle, rgba(255,255,255,.75) 1.3px, transparent 1.6px) 0 0 / 7px 7px, rgba(178, 230, 210, .78);
}
.snap:is(.snaps--friendli :nth-child(2))::before,
.typo-photos figure:nth-child(3)::before {                                   /* butter-yellow tape, top centre */
  content: ""; transform: translateY(-50%) rotate(4deg);
  background: rgba(255, 232, 150, .78);
}

/* star stickers */
.snap:is(.snaps--about :nth-child(2))::after {                               /* star instead of tape */
  content: ""; top: -10%; right: -12%; transform: rotate(14deg);
  background-image: url(assets/stickers/star-butter.webp);
}
.snap:is(.snaps--about :nth-child(3))::after {
  content: ""; width: 22%; bottom: 2%; right: -8%; transform: rotate(-12deg);
  background-image: url(assets/stickers/star-pink.webp);
}
.snap:is(.snaps--friendli :nth-child(2))::after {
  content: ""; width: 24%; bottom: 3%; left: -9%; transform: rotate(-10deg);
  background-image: url(assets/stickers/star-sky.webp);
}
.typo-photos figure:nth-child(1)::after {
  content: ""; width: 20%; bottom: 3%; right: -7%; transform: rotate(10deg);
  background-image: url(assets/stickers/star-lilac-jelly.webp);
}
.typo-photos figure:nth-child(3)::after {                                    /* a patch over the miscut */
  content: ""; width: 24%; top: 40%; right: -9%; transform: rotate(-16deg);
  background-image: url(assets/stickers/star-peach.webp);
}
/* the cafe snap's left edge sits under its neighbour — tape its right corner instead */
.snap:is(.snaps--about :nth-child(3))::before { left: auto; right: -14%; transform: rotate(40deg); }
.snap:is(.snaps--about :nth-child(3))::after { right: -10%; bottom: -5%; }

/* ── the verso facing Projects: the three favourites, pinned up ────────
   A loose collage, each piece a link to its project. Photos are polaroids;
   the poster is taped straight to the page with a note pencilled under it. Stuck flat like everything else in the book:
   tape, no shadow, no hover lift — hovering just inks the writing.
   Serious-page rules: no stars. Sized off the page height (cq units) so a
   wide spread doesn't grow the pieces taller than the page and pile them up. */
.fav-face .fav-board { position: absolute; inset: 0; container-type: size; }
.fav-snap, .fav-pin { position: absolute; display: block; text-decoration: none; color: var(--ink); }
.fav-snap:focus-visible, .fav-pin:focus-visible { outline: 2px solid var(--sky-deeper); outline-offset: 3px; }
.fav-note { display: block; font: 400 clamp(11px, 1vw, 15px)/1.2 "Pangolin", "Poor Story", cursive; text-wrap: balance; transition: color .2s var(--ease); }
.fav-note b { display: block; font-weight: 400; color: var(--sky-deeper); }
:is(.fav-snap, .fav-pin):is(:hover, :focus-visible) .fav-note { color: var(--sky-deeper); }
/* polaroids: a thin white border, the foot just deep enough for the note */
.fav-snap { padding: 1.6% 1.6% 0; background: #fff; box-shadow: 0 0 0 1px rgba(120, 160, 210, .4); }
.fav-snap img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.fav-snap .fav-note { padding: .45em .1em .6em; text-align: center; }
.fav-snap--friendli { left: 5%;  top: 4%;  width: min(40cqw, 30cqh); transform: rotate(-4deg); }
.fav-snap--songbook { left: 14%; top: 55%; width: min(34cqw, 24cqh); transform: rotate(3deg); }
/* taped straight on, the note written on the page underneath */
.fav-pin > img { display: block; width: 100%; box-shadow: 0 0 0 .6px rgba(27, 42, 74, .12); }
.fav-pin > img { height: auto; }
.fav-pin .fav-note { margin-top: .5em; transform: rotate(-3deg); transform-origin: left top; }
.fav-pin--poster { right: 4%; top: 3%; width: min(47cqw, 38cqh); transform: rotate(1.5deg); }
.fav-pin--poster .fav-note { display: flex; align-items: flex-start; gap: .35em; }
.fav-pin--poster .fav-note > span { padding-top: .9em; }
.fav-arrow { flex: none; width: 2.4em; height: 2.6em; color: var(--sky-deeper); }
/* no picture for the digital songbook — just a note beside the physical one,
   pointing at it, that opens the 3D book itself */
.fav-aside { position: absolute; left: 52%; top: 74%; width: min(44cqw, 34cqh); display: block; text-decoration: none; color: var(--ink); }
.fav-aside:focus-visible { outline: 2px solid var(--sky-deeper); outline-offset: 3px; }
.fav-aside .fav-note { display: flex; align-items: center; gap: .3em; transform: rotate(-4deg); }
.fav-aside .fav-arrow { transform: rotate(-75deg); }
.fav-aside:is(:hover, :focus-visible) .fav-note { color: var(--sky-deeper); }
/* scroll view (and phones): the verso is still data-blank so the book's
   phone card mode skips it, but the unrolled sheet keeps it — as a
   page-shaped board of its own, just before the Projects list */
html.is-scroll .page__face.fav-face[data-blank] { display: flex !important; justify-content: center; }
html.is-scroll .fav-face .fav-board { position: relative; inset: auto; width: 100%; max-width: 600px; aspect-ratio: 600 / 780; }
/* tape */
.fav-snap::before, .fav-pin::before { content: ""; position: absolute; z-index: 1; width: 44%; aspect-ratio: 3.3 / 1; pointer-events: none; }
.fav-snap--friendli::before { left: 28%; top: 0; transform: translateY(-50%) rotate(-4deg); background: rgba(205, 239, 255, .85); }
.fav-snap--songbook::before { left: 28%; top: 0; transform: translateY(-50%) rotate(5deg);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 3px, transparent 3px 7px), rgba(205, 239, 255, .85); }
.fav-pin--poster::before { width: 30%; left: 35%; top: 0; transform: translateY(-50%) rotate(-3deg); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .6px rgba(27, 42, 74, .1); }

/* Project bookmarks: one family of color per category, no raised open tab —
   the open one is marked by a deeper tint and heavier ink instead.
   Industry = pink · Personal = yellow · HCI Research = lime · Design = sky. */
.project-bookmarks .subtab[data-go="proj-friendli"]   { --bookmark-bg: #ffe3ee; --bookmark-active: #ffc8dd; --bookmark-ink: #8a3d5c; }
.project-bookmarks .subtab[data-go="proj-next"]       { --bookmark-bg: #ffe9f1; --bookmark-active: #ffd0e2; --bookmark-ink: #8a3d5c; }
.project-bookmarks .subtab[data-go="proj-eeze"]       { --bookmark-bg: #fff6c4; --bookmark-active: #ffeb85; --bookmark-ink: #74601c; }
.project-bookmarks .subtab[data-go="proj-mrfidget"]   { --bookmark-bg: #e6f8cc; --bookmark-active: #cdf0a0; --bookmark-ink: #45672a; }
.project-bookmarks .subtab[data-go="proj-depthink"]   { --bookmark-bg: #ecfad6; --bookmark-active: #d6f3ad; --bookmark-ink: #45672a; }
.project-bookmarks .subtab[data-go="proj-typography"] { --bookmark-bg: #dcf0ff; --bookmark-active: #bfe2ff; --bookmark-ink: #2d5a84; }
.project-bookmarks .subtab[data-go="proj-akgi"]       { --bookmark-bg: #e4f4ff; --bookmark-active: #c9e7ff; --bookmark-ink: #2d5a84; }
.page > .project-bookmarks .subtab.is-active,
.book > .project-bookmarks .subtab.is-active {
  height: 42px;
  box-shadow: 0 -1px 4px rgba(82, 113, 141, .10);
}
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .book > .project-bookmarks .subtab.is-active { height: 42px; }
}
/* All seven fit on one page edge — no sideways scroll. */
.project-bookmarks .subtab,
.project-bookmarks .subtab[data-go="proj-next"] { font-size: 14px; padding-inline: 9px; }
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  .project-bookmarks .subtab,
  .project-bookmarks .subtab[data-go="proj-next"] { font-size: 12px; padding-inline: 7px; }
}

/* ── Project rows: shimmer ───────────────────────────────────────────────────
   Hovering a row — or its photo on the favorites board across the spread
   (.is-lit, set in index.html) — washes the row pale blue and sweeps a
   glint of light across it once. */
.project-directory .project-entry { position: relative; overflow: hidden; margin-inline: -10px; padding-inline: 10px; transition: background-color .3s ease; }
.project-directory .project-entry::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.95) 48%, rgba(190,222,255,.7) 52%, transparent 70%);
  transform: translateX(-110%);
}
.project-directory .project-entry:is(:hover, :focus-visible, .is-lit) { background-color: #e7f2fe; }
.project-directory .project-entry:is(:hover, :focus-visible, .is-lit)::after { transform: translateX(110%); transition: transform .8s ease; }
.project-directory .project-entry.is-lit strong { color: #356fa5; }
.project-directory .project-entry.is-lit svg.bk-go { color: #356fa5; transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .project-directory .project-entry::after { display: none; } }

/* ── Digital book: a taped sticky note under the aside, so it reads as a
   button rather than one more caption ── */
.fav-book {
  position: relative; display: inline-block; white-space: nowrap;
  margin: 1.1em 0 0 2.2em; padding: .75em 1.2em;
  font: 400 clamp(12px, 1.05vw, 16px)/1.2 "Pangolin", "Poor Story", cursive; color: var(--ink);
  background: #fff6c9; transform: rotate(-2deg); transition: background-color .2s ease;
}
.fav-book::before { content: ""; position: absolute; top: 0; left: 50%; width: 3.2em; height: 1.1em; transform: translate(-50%, -55%) rotate(3deg); background: rgba(205, 239, 255, .85); }
.fav-aside:is(:hover, :focus-visible) .fav-book { background: #fff0a8; }