/* V2: shared portfolio chrome only. Native page surfaces and motion stay local. */
[data-portfolio-page] {
  --portfolio-accent: #215c48;
  --portfolio-line: rgba(32, 36, 34, .22);
  --portfolio-muted: #65726c;
  --portfolio-panel: #fff;
  --portfolio-panel-ink: #202422;
}
[data-portfolio-page="teaching"] {
  --portfolio-accent: var(--accent-deep, #245f4b);
  --portfolio-line: var(--line, #d9deda);
  --portfolio-muted: var(--muted, #64736c);
  --portfolio-panel: var(--paper, #f7f6f2);
  --portfolio-panel-ink: var(--ink, #202422);
}
[data-portfolio-page="jung"] {
  --portfolio-accent: var(--teal, #8fd3bd);
  --portfolio-line: var(--darkline, rgba(194, 222, 207, .22));
  --portfolio-muted: #a8bdb3;
  --portfolio-panel: #16312a;
  --portfolio-panel-ink: #edf5ef;
}
[data-portfolio-page="home"] .site-header[data-nav-state="stage"] {
  --portfolio-accent: #99cbbb;
  --portfolio-line: rgba(244, 243, 237, .24);
  --portfolio-muted: #b6c8bf;
  --portfolio-panel: #16312a;
  --portfolio-panel-ink: #edf5ef;
}

[data-portfolio-header] .portfolio-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
[data-portfolio-header] .portfolio-brand strong { font-size: 16px; font-weight: 650; letter-spacing: 0; }
[data-portfolio-header] .portfolio-brand span { color: var(--portfolio-muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
[data-portfolio-header] .portfolio-context { color: var(--portfolio-muted); font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
[data-portfolio-header] .portfolio-nav { position: relative; display: flex; align-items: center; gap: 22px; margin: 0; color: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; }
.portfolio-nav > a, .portfolio-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
.portfolio-nav > a:hover, .portfolio-nav > a:focus-visible, .portfolio-trigger:hover, .portfolio-trigger:focus-visible { color: var(--portfolio-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.portfolio-nav > a:focus-visible, .portfolio-trigger:focus-visible, .portfolio-work-item:focus-visible, .portfolio-bridge a:focus-visible, .portfolio-bridge button:focus-visible { outline: 2px solid var(--portfolio-accent); outline-offset: 4px; }
.portfolio-trigger > span { display: inline-flex; width: 10px; height: 10px; align-items: center; justify-content: center; font-size: 0; line-height: 1; transition: transform 180ms ease; }
.portfolio-trigger > span::before { content: ""; display: block; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); }
.portfolio-trigger[aria-expanded="true"] > span { transform: rotate(180deg); }
.portfolio-panel[hidden] { display: none; }
.portfolio-panel { position: fixed; top: 90px; right: 24px; z-index: 100; width: min(480px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--portfolio-line); border-radius: 12px; background: var(--portfolio-panel); color: var(--portfolio-panel-ink); box-shadow: 0 18px 44px rgba(9, 23, 19, .16); opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top right; transition: opacity 160ms ease, transform 180ms cubic-bezier(.2, .72, .24, 1); }
.portfolio-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.portfolio-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 2px 8px 11px; border-bottom: 1px solid var(--portfolio-line); color: var(--portfolio-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-work-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; align-items: center; gap: 12px; min-height: 64px; padding: 10px 8px; border-bottom: 1px solid var(--portfolio-line); color: inherit; text-decoration: none; transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease; }
.portfolio-work-item:last-child { border-bottom: 0; }
.portfolio-work-item:hover, .portfolio-work-item:focus-visible, .portfolio-work-item[aria-current="page"] { color: var(--portfolio-accent); background: color-mix(in srgb, var(--portfolio-accent) 7%, transparent); box-shadow: inset 2px 0 0 var(--portfolio-accent); }
.portfolio-work-index { color: var(--portfolio-muted); font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.portfolio-work-item strong, .portfolio-work-item small { display: block; }
.portfolio-work-item strong { font-size: 15px; font-weight: 600; line-height: 1.35; }
.portfolio-work-item small { margin-top: 3px; color: var(--portfolio-muted); font-size: 12px; line-height: 1.45; }
.portfolio-work-arrow { justify-self: end; font-size: 18px; transition: transform 140ms ease; }
.portfolio-work-item:hover .portfolio-work-arrow, .portfolio-work-item:focus-visible .portfolio-work-arrow { transform: translate(2px, -2px); }
.portfolio-chapter-panel { width: 260px; padding: 8px; }
.portfolio-chapter-panel a { display: flex; align-items: center; min-height: 42px; padding: 6px 10px; color: inherit; text-decoration: none; }
.portfolio-chapter-panel a:hover, .portfolio-chapter-panel a:focus-visible { color: var(--portfolio-accent); background: color-mix(in srgb, var(--portfolio-accent) 8%, transparent); }

.portfolio-bridge { width: min(1360px, calc(100% - 80px)); margin: 0 auto; padding: 54px 0 64px; color: inherit; }
.portfolio-bridge-heading { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--portfolio-line); color: var(--portfolio-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-bridge-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr) minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--portfolio-line); }
.portfolio-bridge-link, .portfolio-bridge-contact { min-height: 190px; padding: 26px 28px 28px 0; }
.portfolio-bridge-link { position: relative; display: flex; flex-direction: column; align-items: flex-start; color: inherit; text-decoration: none; border-right: 1px solid var(--portfolio-line); }
.portfolio-bridge-next { padding-right: 0; padding-left: 28px; border-right: 0; }
.portfolio-bridge-link > span, .portfolio-bridge-label { color: var(--portfolio-muted); font-size: 12px; }
.portfolio-bridge-link strong { margin-top: 25px; font-size: clamp(22px, 2.3vw, 32px); font-weight: 550; line-height: 1.2; }
.portfolio-bridge-link small { margin-top: 8px; color: var(--portfolio-muted); font-size: 13px; }
.portfolio-bridge-link i { position: absolute; right: 28px; bottom: 28px; font-size: 24px; font-style: normal; transition: transform 180ms ease; }
.portfolio-bridge-home i { right: auto; left: 0; }
.portfolio-bridge-link:hover strong, .portfolio-bridge-link:focus-visible strong { text-decoration: underline; text-underline-offset: 7px; }
.portfolio-bridge-link:hover i, .portfolio-bridge-link:focus-visible i { transform: translate(4px, -4px); }
.portfolio-bridge-home:hover i, .portfolio-bridge-home:focus-visible i { transform: translate(-4px, -4px); }
.portfolio-bridge-contact { padding-inline: 28px; }
.portfolio-contact-method { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 50px; border-bottom: 1px solid var(--portfolio-line); }
.portfolio-contact-method:first-of-type { margin-top: 18px; }
.portfolio-contact-method > span { color: var(--portfolio-muted); font-size: 12px; }
.portfolio-contact-method strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 500; }
.portfolio-contact-method button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--portfolio-line); border-radius: 2px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.portfolio-contact-method button:hover { border-color: var(--portfolio-accent); color: var(--portfolio-accent); }
.portfolio-copy-status { display: block; min-height: 25px; padding-top: 7px; color: var(--portfolio-muted); font-size: 12px; }
[data-portfolio-page="home"] .site-header .portfolio-brand strong { color: var(--motion-ink, #202422); }
[data-portfolio-page="home"] .site-header[data-nav-state="stage"] .portfolio-brand strong { color: var(--motion-stage-ink, #edf5ef); }
[data-portfolio-page="teaching"] [data-portfolio-header] { position: relative; z-index: 30; }
[data-portfolio-page="teaching"] [data-portfolio-header] .portfolio-context { justify-self: end; }
[data-portfolio-page="teaching"] [data-portfolio-header] .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
[data-portfolio-page="wecom"] [data-portfolio-header] { position: relative; z-index: 30; flex-wrap: wrap; }
[data-portfolio-page="wecom"] [data-portfolio-header] .portfolio-context { margin-right: auto; }
[data-portfolio-page="jung"] [data-portfolio-header] { position: relative; z-index: 30; }
[data-portfolio-page="jung"] [data-portfolio-header] .header-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
[data-portfolio-page="jung"] [data-portfolio-header] .portfolio-nav { justify-self: end; }
[data-portfolio-page="jung"] [data-portfolio-header] .portfolio-context { order: 2; margin-left: 24px; }

@media (max-width: 900px) {
  .portfolio-bridge { width: calc(100% - 48px); }
  .portfolio-bridge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-bridge-contact { grid-column: 1 / -1; grid-row: 2; min-height: auto; padding: 26px 0; border-top: 1px solid var(--portfolio-line); }
  .portfolio-bridge-next { grid-column: 2; grid-row: 1; }
  .portfolio-bridge-home { grid-column: 1; grid-row: 1; }
  .portfolio-bridge-next { border-left: 1px solid var(--portfolio-line); }
  [data-portfolio-page="wecom"] [data-portfolio-header] .portfolio-context { display: none; }
}
@media (max-width: 680px) {
  [data-portfolio-header] .portfolio-brand { gap: 9px; }
  [data-portfolio-header] .portfolio-brand strong { font-size: 14px; }
  [data-portfolio-header] .portfolio-brand span, [data-portfolio-header] .portfolio-context { font-size: 11px; }
  [data-portfolio-header] .portfolio-nav { gap: 12px; font-size: 12px; }
  [data-portfolio-page="teaching"] [data-portfolio-header] .header-inner { display: flex; flex-wrap: wrap; gap: 0 12px; padding-top: 10px; }
  [data-portfolio-page="teaching"] [data-portfolio-header] .portfolio-nav { width: 100%; justify-content: space-between; margin-top: 4px; }
  [data-portfolio-page="jung"] [data-portfolio-header] .header-row { display: flex; flex-wrap: wrap; gap: 6px 12px; }
  [data-portfolio-page="jung"] [data-portfolio-header] .portfolio-nav { width: 100%; justify-content: space-between; }
  [data-portfolio-page="jung"] [data-portfolio-header] .portfolio-context { order: 0; margin-left: auto; }
  [data-portfolio-page="wecom"] [data-portfolio-header] .portfolio-nav { width: 100%; justify-content: space-between; margin-top: 4px; }
  [data-portfolio-page="home"] [data-portfolio-header] .portfolio-nav { gap: 13px; }
  .portfolio-panel { right: 16px; width: calc(100vw - 32px); padding: 12px; border-radius: 10px; }
  .portfolio-bridge { width: calc(100% - 40px); padding: 36px 0 42px; }
  .portfolio-bridge-grid { display: grid; grid-template-columns: 1fr; }
  .portfolio-bridge-link, .portfolio-bridge-next { grid-column: 1; min-height: 136px; padding: 22px 0; border-right: 0; border-left: 0; }
  .portfolio-bridge-home { grid-row: 1; }
  .portfolio-bridge-next { grid-row: 2; border-top: 1px solid var(--portfolio-line); }
  .portfolio-bridge-contact { grid-column: 1; grid-row: 3; padding: 22px 0; }
  .portfolio-bridge-link strong { margin-top: 15px; font-size: 25px; }
  .portfolio-bridge-link i, .portfolio-bridge-home i { right: 0; left: auto; bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-trigger > span, .portfolio-panel, .portfolio-work-item .portfolio-work-arrow, .portfolio-bridge-link i { transition: none; }
}