@font-face { font-family: "MG Display"; src: url("/assets/MG-B-BiU9T5KX.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

[data-page="break"] {
  --break-ink: var(--bg-primary-dark);
  --break-paper: var(--text-on-dark-primary);
  --archive-blue: var(--accent-active);
  --archive-lavender: var(--bg-lavender);
  --archive-peach: var(--bg-peach);
  --archive-text-primary: var(--text-on-dark-primary);
  --archive-text-secondary: var(--text-on-dark-secondary);
  --archive-text-meta: var(--text-on-dark-meta);
  --archive-border: var(--border-dark);
  --archive-border-strong: var(--border-dark-strong);
  background: var(--break-ink);
  color: var(--break-paper);
  overflow: hidden;
}

.break-header { z-index: 20; }
.break-header .nav-link.is-active { color: var(--break-paper); }
.break-page[data-page="break"] { --route-style-ready: archive; }
.break-page { height: 100dvh; min-height: 100vh; overflow: hidden; }
.break-canvas { position: relative; height: 100%; min-height: 100%; overflow: hidden; touch-action: none; user-select: none; background: var(--break-ink); }
.break-canvas::before, .break-canvas::after { content: ""; position: absolute; inset: 35px 0 auto; height: 1px; background: var(--border-dark); pointer-events: none; }
.break-canvas::after { top: 50%; background: var(--border-dark); opacity:.67; }

.archive-wordmark { position: absolute; z-index: 1; left: 2.2vw; top: 50%; width: min(34vw, 480px); transform: translateY(-50%); pointer-events: none; }
.archive-wordmark-label { display: block; margin-bottom: 1.5vw; color: var(--archive-blue); font: 700 10px/1 ManropeLocal, Manrope, sans-serif; letter-spacing: .12em; }
.archive-wordmark-title { display: block; color: var(--break-paper); font-family: var(--font-display-cn); font-size: clamp(72px, 8.6vw, 126px); font-weight: 800; letter-spacing: -.13em; line-height: .82; white-space: nowrap; }
.archive-wordmark-english { display: block; margin-top: 1.8vw; color: var(--archive-lavender); font: 800 clamp(18px, 2vw, 28px)/1 ManropeLocal, Manrope, sans-serif; letter-spacing: .08em; }
.archive-context { position: absolute; z-index: 2; right: 4.5vw; bottom: 18px; display: flex; flex-direction: column; gap: 7px; width: min(23vw, 320px); color: var(--text-on-dark-secondary); font: 500 10px/1.4 var(--font-body-cn); text-align: right; }
.archive-context small { color: var(--archive-blue); font: 700 9px/1 ManropeLocal, Manrope, sans-serif; letter-spacing: .1em; }

.break-track-window { position: absolute; z-index: 4; left: 50%; top: 0; width: 22.5vw; height: 100%; overflow: hidden; transform: translateX(-50%); cursor: grab; }
.break-track-window.is-dragging { cursor: grabbing; }
.break-track { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; gap: 24px; will-change: transform; transition: transform 700ms cubic-bezier(.496,.004,0,1); }
.break-track.is-dragging { transition: none; }
.break-card { --archive-slot-accent: var(--archive-blue); display: block; flex: 0 0 auto; width: 100%; aspect-ratio: 1; padding: clamp(12px, 1vw, 16px); border: 1px solid var(--border-dark); background: var(--break-ink); cursor: grab; overflow: visible; color: inherit; transition: border-color 700ms cubic-bezier(.496,.004,0,1); }
.break-card[data-archive-accent="lavender"] { --archive-slot-accent: var(--archive-lavender); }
.break-card[data-archive-accent="peach"] { --archive-slot-accent: var(--archive-peach); }
.break-card:focus-visible { outline: 1px solid var(--focus-outline); outline-offset: 7px; }
.break-card-media { display: block; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--border-dark-strong); transition: border-color 1s cubic-bezier(.496,.004,0,1); }
.break-card[data-media-state="placeholder"] .break-card-media { background: var(--bg-primary-dark); }
.break-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.496,.004,0,1), filter 700ms ease; }
.break-card.is-active { border-color: var(--archive-slot-accent); }
.break-card.is-active .break-card-media { border-color: var(--archive-slot-accent); }
.break-card.is-active:hover img, .break-card:hover img { transform: scale(1.045); filter: saturate(1.06); }

.archive-slot-placeholder { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: clamp(18px, 2.4vw, 32px); overflow: hidden; color: var(--archive-slot-accent); background: linear-gradient(135deg, rgba(73,123,255,.08), transparent 48%), linear-gradient(315deg, rgba(187,145,255,.08), transparent 48%); }
.archive-slot-placeholder::before { content: ""; position: absolute; inset: clamp(14px, 1.7vw, 24px); border: 1px solid currentColor; opacity: .32; pointer-events: none; }
.archive-slot-placeholder::after { content: ""; position: absolute; right: clamp(18px, 2.4vw, 32px); top: clamp(18px, 2.4vw, 32px); width: clamp(34px, 4vw, 58px); aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: .72; pointer-events: none; }
.archive-slot-index { position: relative; z-index: 1; color: var(--archive-slot-accent); font: 700 12px/1 ManropeLocal, Manrope, sans-serif; letter-spacing: .08em; }
.archive-slot-title { position: relative; z-index: 1; max-width: 90%; color: var(--break-paper); font-family: var(--font-display-cn); font-size: clamp(28px, 3.4vw, 50px); font-weight: 800; letter-spacing: -.1em; line-height: .9; }
.archive-slot-meta { position: relative; z-index: 1; margin-top: auto; color: var(--archive-slot-accent); font: 700 9px/1 ManropeLocal, Manrope, sans-serif; letter-spacing: .12em; }
.archive-slot-label { position: relative; z-index: 1; margin-top: 8px; color: var(--text-on-dark-meta); font: 700 8px/1.3 ManropeLocal, Manrope, sans-serif; letter-spacing: .08em; }

.break-project-index { position: absolute; z-index: 5; right: 1.5vw; top: 50%; width: min(18vw, 238px); transform: translateY(-50%); text-align: left; }
.break-number-window { width: 180px; height: 30px; overflow: hidden; margin: 0 0 11px -155px; }
.break-number-track { display: flex; align-items: center; gap: 22px; width: max-content; height: 30px; white-space: nowrap; will-change: transform; transition: transform 500ms cubic-bezier(.496,.004,0,1); }
.break-number-track span { display: block; flex: 0 0 auto; min-width: 10px; color: var(--text-on-dark-meta); font: 12px/1 ManropeLocal, Manrope, sans-serif; text-align: center; }
.break-number-track span[data-archive-index="0"] { color: var(--archive-blue); opacity:.58; }
.break-number-track span[data-archive-index="1"] { color: var(--archive-lavender); opacity:.58; }
.break-number-track span[data-archive-index="2"] { color: var(--archive-peach); opacity:.58; }
.break-number-track span.is-active { color: var(--archive-blue); font-size: 18px; }
.break-title-window { height: 176px; overflow: hidden; }
.break-title-track { display: flex; flex-direction: column; gap: 10px; will-change: transform; transition: transform 600ms cubic-bezier(.496,.004,0,1); }
.break-title-track a { display: block; height: 22px; color: var(--text-on-dark-meta); font: 700 12px/22px var(--font-body-cn); text-decoration: none; white-space: nowrap; transition: color 350ms ease, transform 350ms ease; }
.break-title-track a[data-archive-index="0"] { color: var(--archive-blue); opacity:.66; }
.break-title-track a[data-archive-index="1"] { color: var(--archive-lavender); opacity:.66; }
.break-title-track a[data-archive-index="2"] { color: var(--archive-peach); opacity:.66; }
.break-title-track a.is-active { color: var(--break-paper); transform: scale(1.02); transform-origin: left center; }
.break-title-track a:hover { color: var(--break-paper); }

.break-mobile-controls { display: none; }
.break-mobile-controls button { color: var(--break-paper); font: 700 10px/1 var(--font-body-cn); cursor: pointer; }
.archive-canvas-status { color: var(--archive-blue); font-family: ManropeLocal, Manrope, sans-serif; }
.break-canvas-status { position: absolute; z-index: 6; left: 4.5vw; bottom: 18px; font-size: 10px; line-height: 1; letter-spacing: .04em; }

@media (min-width: 501px) and (max-width: 1279px), (max-width: 500px) {
  .break-canvas,
  .break-track-window { touch-action: pan-y; }
}

@media (min-width: 501px) and (max-width: 900px) {
  .archive-wordmark { left: 2vw; width: 35vw; }
  .archive-wordmark-title { font-size: clamp(62px, 8.7vw, 108px); }
  .archive-wordmark-english { margin-top: 2.4vw; font-size: 17px; }
  .archive-context { right: 3.6vw; width: 22vw; }
  .break-project-index { right: 3.6vw; width: 14vw; }
  .break-number-window { margin-left: -100px; width: 140px; }
  .break-number-track { gap: 13px; }
  .break-title-track a { font-size: 9px; }
  .break-canvas-status { left: 3.6vw; }
}

@media (max-width: 500px) {
  [data-page="break"] { overflow: hidden; }
  .break-page { height: 100dvh; min-height: 100dvh; }
  .break-canvas { height: 100dvh; min-height: 100dvh; }
  .break-canvas::before { top: 35px; }
  .break-canvas::after { top: 73%; }
  .archive-wordmark { left: 50%; top: 70%; width: auto; transform: translate(-50%, -50%); text-align: center; }
  .archive-wordmark-label { margin-bottom: 12px; font-size: 8px; }
  .archive-wordmark-title { font-size: clamp(52px, 14vw, 68px); letter-spacing: -.12em; }
  .archive-wordmark-english { margin-top: 14px; font-size: 11px; }
  .archive-context { top: 86%; right: 18px; bottom: auto; left: 18px; width: auto; align-items: center; font-size: 9px; text-align: center; }
  .archive-context small { font-size: 8px; }
  .break-track-window { top: 38.5%; left: 0; width: 100%; height: min(326px, calc(100vw - 64px)); transform: none; }
  .break-track { flex-direction: row; gap: 0; width: max-content; height: 100%; transition: transform 700ms cubic-bezier(.496,.004,0,1); }
  .break-card { width: calc(100vw - 64px); height: 100%; aspect-ratio: 1; margin: 0; }
  .break-card-media { border-color: var(--archive-border-strong); }
  .archive-slot-placeholder { padding: 16px; }
  .archive-slot-placeholder::before { inset: 12px; }
  .archive-slot-placeholder::after { right: 16px; top: 16px; width: 32px; }
  .archive-slot-index { font-size: 10px; }
  .archive-slot-title { max-width: 78%; font-size: clamp(25px, 8vw, 34px); }
  .archive-slot-meta { font-size: 8px; }
  .archive-slot-label { font-size: 7px; }
  .break-project-index { top: 13.1%; right: auto; left: 50%; width: 112px; transform: translateX(-50%); text-align: center; }
  .break-number-window { width: 112px; height: 23px; margin: 0 0 30px; }
  .break-number-track { width: max-content; gap: 15px; height: 23px; }
  .break-number-track span { min-width: 7px; font-size: 10px; }
  .break-number-track span.is-active { font-size: 17px; }
  .break-title-window { height: 142px; }
  .break-title-track { gap: 0; }
  .break-title-track a { height: 20px; font-size: 8px; line-height: 20px; text-align: center; }
  .break-title-track a.is-active { transform: scale(1.06); transform-origin: center; }
  .break-mobile-controls { position: absolute; z-index: 7; display: flex; justify-content: space-between; align-items: center; left: 0; top: 33.5%; width: 100%; height: 31px; padding: 0 18px; border-bottom: 1px solid var(--archive-border); }
  .break-canvas-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .break-track, .break-number-track, .break-title-track, .break-card img { transition-duration: 1ms; }
}

/* GLOBAL COLOR SYSTEM v1.0 — Phase C/D Archive semantic UI alignment. */
[data-page="break"] .break-canvas,
[data-page="break"] .break-page { background:var(--bg-primary-dark); color:var(--text-on-dark-primary); }
[data-page="break"] .break-card-media { border-color:var(--border-dark-strong); }
[data-page="break"] .break-mobile-controls { border-bottom-color:var(--border-dark); }
[data-page="break"] .break-card:focus-visible { outline-color:var(--focus-outline); }

/* Typography Production Migration v1.0 — bounded role mapping. */
[data-page="break"] .archive-wordmark-title {
  font-family:var(--font-editorial-cn);
  font-weight:400;
}
[data-page="break"] .archive-wordmark-english {
  font-family:var(--font-display-en);
  font-weight:700;
}