.archive-page { background: #e8edf2; }
.archive-hero { position: relative; overflow: hidden; background: #14294f; color: #f6f4ee; }
.archive-hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, #14294f 8%, rgba(20,41,79,.85) 47%, rgba(20,41,79,.26)), url('/graphics/academy-night-2026.webp') right 52% / cover no-repeat; opacity: .85; content: ''; }
.archive-hero::after { position: absolute; right: -12%; bottom: -130px; width: 65%; height: 220px; border: 1px solid rgba(196,222,240,.26); border-radius: 50%; box-shadow: 0 0 0 33px rgba(175,207,231,.04), 0 0 0 66px rgba(175,207,231,.025); content: ''; pointer-events: none; }
.archive-hero-inner { position: relative; min-height: 460px; padding-top: 134px; padding-bottom: 63px; }
.archive-hero .detail-back { display: inline-block; margin-bottom: 29px; }
.archive-hero h1 { margin: 20px 0; font-family: 'Maru Buri', serif; font-size: clamp(55px, 6.5vw, 83px); font-weight: 600; letter-spacing: -.08em; line-height: 1.24; }
.archive-hero h1 em { color: #b8d7ec; font-style: normal; }
.archive-hero-inner > p:last-of-type { position: relative; z-index: 1; margin: 0; color: #dae6ef; font-size: 16px; line-height: 1.85; word-break: keep-all; }
.archive-hero-mark { position: absolute; right: 10%; bottom: -48px; color: rgba(220,238,248,.1); font-family: 'Maru Buri', serif; font-size: clamp(170px, 21vw, 300px); line-height: 1; pointer-events: none; }
.archive-stories { padding: 91px 0 83px; background: #dbe7f0; color: #1b3558; }
.archive-stories-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 31px; }
.archive-stories-heading h2 { margin: 17px 0 0; font-family: 'Maru Buri', serif; font-size: clamp(36px, 3.6vw, 52px); font-weight: 600; letter-spacing: -.07em; line-height: 1.25; }
.archive-stories-heading > p { margin: 0 0 5px; color: #536e88; font-size: 15px; line-height: 1.7; text-align: right; word-break: keep-all; }
.archive-story-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 13px; }
.archive-story-tabs button { position: relative; display: flex; align-items: baseline; gap: 22px; min-height: 72px; padding: 17px 25px; overflow: hidden; border: 1px solid #a8bfce; border-radius: 3px 32px 3px 3px; background: #eaf1f5; color: #315574; font: inherit; text-align: left; cursor: pointer; }
.archive-story-tabs button:last-child { border-radius: 32px 3px 3px 3px; }
.archive-story-tabs button[aria-selected="true"] { border-color: #17385f; background: #17385f; color: #f5f4ee; }
.archive-story-tabs button span { position: relative; z-index: 1; font-size: 13px; font-weight: 700; white-space: nowrap; }
.archive-story-tabs button strong { position: relative; z-index: 1; font-family: 'Maru Buri', serif; font-size: 25px; font-weight: 600; letter-spacing: -.06em; }
.archive-story-tabs button i { position: absolute; right: 24px; bottom: -20px; color: rgba(23,56,95,.09); font-family: 'Maru Buri', serif; font-size: 95px; font-style: normal; line-height: 1; }
.archive-story-tabs button[aria-selected="true"] i { color: rgba(233,244,251,.1); }
.archive-story-tabs button:focus-visible, .archive-story-controls button:focus-visible, .archive-frame-copy a:focus-visible, .archive-story-track:focus-visible { outline: 2px solid #1b5486; outline-offset: 3px; }
.archive-story-panel[hidden] { display: none; }
.archive-story-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; }
.archive-story-track::-webkit-scrollbar { display: none; }
.archive-story-frame { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); flex: 0 0 100%; min-width: 0; min-height: 460px; overflow: hidden; scroll-snap-align: start; border: 1px solid #9bb2c5; border-radius: 3px 61px 3px 38px; background: #f7f7f2; }
.archive-frame-art { position: relative; min-height: 460px; overflow: hidden; background: #16375f; }
.archive-frame-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.archive-art-note { position: absolute; left: 20px; bottom: 18px; padding: 8px 12px; border: 1px solid rgba(231,242,250,.5); background: rgba(18,42,74,.86); color: #f5f8fa; font-size: 12px; font-weight: 600; }
.archive-frame-ink { display: flex; align-items: center; justify-content: center; flex-direction: column; background: #14345d url('/graphics/blue-current-wash-2026.webp') center / cover no-repeat; color: #f3f3ea; }
.archive-frame-ink-shin { background-color: #25466c; background-position: 60% center; }
.archive-frame-ink-go { background-color: #1b3e65; background-position: 64% center; }
.archive-frame-memory { background-color: #102c50; background-position: 68% center; }
.archive-frame-glyph { position: relative; font-family: 'Maru Buri', serif; font-size: clamp(155px, 16vw, 245px); font-weight: 600; line-height: 1; text-shadow: 0 7px 26px rgba(5,21,43,.36); }
.archive-frame-inkline { position: relative; margin-top: 14px; padding-top: 17px; border-top: 1px solid rgba(232,242,249,.7); font-family: 'Maru Buri', serif; font-size: 18px; letter-spacing: .09em; }
.archive-frame-copy { display: flex; align-items: flex-start; flex-direction: column; min-width: 0; padding: 46px 47px 41px; }
.archive-frame-count { margin: 0 0 32px; color: #2c5b85; font-family: 'Pretendard Variable', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.archive-frame-count span { margin-left: 8px; color: #6c8193; font-family: 'Pretendard Variable', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.archive-frame-copy h3 { margin: 0 0 21px; color: #1b3558; font-family: 'Maru Buri', serif; font-size: clamp(33px, 3.4vw, 47px); font-weight: 600; letter-spacing: -.07em; line-height: 1.34; word-break: keep-all; }
.archive-frame-copy > p:not(.archive-frame-count) { margin: 0 0 26px; max-width: 390px; color: #4f667c; font-size: 16px; line-height: 1.85; word-break: keep-all; }
.archive-frame-copy a { display: inline-flex; align-items: center; gap: 24px; margin-top: auto; padding-bottom: 8px; border-bottom: 1px solid #2f5d86; color: #244c74; font-size: 14px; font-weight: 700; }
.archive-frame-copy a:hover { color: #537da0; }
.archive-story-controls { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.archive-story-controls > span { min-width: 68px; color: #2b5276; font-family: 'Pretendard Variable', sans-serif; font-size: 15px; font-weight: 700; }
.archive-story-progressbar { position: relative; flex: 1; height: 2px; margin-right: 14px; background: #acc2d0; }
.archive-story-progressbar span { display: block; width: 33.333%; height: 100%; background: #285783; transition: width .22s ease; }
.archive-story-controls button { width: 45px; height: 45px; border: 1px solid #7d9ab1; border-radius: 50%; background: transparent; color: #1c496f; font: inherit; font-size: 21px; cursor: pointer; }
.archive-story-controls button:hover:not(:disabled) { background: #1d456d; color: #fff; }
.archive-story-controls button:disabled { border-color: #bdccd6; color: #9baebb; cursor: default; }
.archive-story-source { margin: 17px 0 0; color: #637d92; font-size: 12px; line-height: 1.6; }
.archive-browser { padding-top: 88px; padding-bottom: 112px; }
.archive-browser-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.archive-browser-heading h2 { margin: 17px 0 0; color: #1b2d49; font-family: 'Maru Buri', serif; font-size: clamp(34px, 3.5vw, 49px); font-weight: 600; letter-spacing: -.07em; }
.archive-browser-heading > p { margin: 0 0 6px; color: #60758a; font-size: 13px; line-height: 1.7; text-align: right; }
.archive-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px 0 19px; border-top: 1px solid #9cb3c6; border-bottom: 1px solid #9cb3c6; }
.archive-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.archive-filters button { min-height: 41px; padding: 8px 14px; border: 1px solid transparent; border-radius: 2px 15px 2px 11px; background: transparent; color: #45647f; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.archive-filters button span { margin-left: 3px; color: #7893aa; font-family: 'Pretendard Variable', sans-serif; font-size: 11px; }
.archive-filters button[aria-pressed="true"] { border-color: #284d79; background: #284d79; color: #fff; }
.archive-filters button[aria-pressed="true"] span { color: #bdd8ea; }
.archive-filters button:hover:not([aria-pressed="true"]) { background: #d8e5ee; }
.archive-filters button:focus-visible, .archive-card a:focus-visible, .archive-search input:focus-visible, .archive-search button:focus-visible, .archive-empty button:focus-visible { outline: 2px solid #1b5486; outline-offset: 3px; }
.archive-search { display: flex; align-items: center; gap: 8px; min-width: 230px; min-height: 42px; border-bottom: 1px solid #6f91aa; }
.archive-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.archive-search::before { color: #537695; content: '⌕'; font-size: 24px; line-height: 1; }
.archive-search input { min-width: 0; width: 100%; padding: 8px 0; border: 0; outline: 0; background: transparent; color: #193b5d; font: inherit; font-size: 13px; }
.archive-search input::placeholder { color: #8198aa; }
.archive-search button { padding: 5px 0; border: 0; background: transparent; color: #547493; font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.archive-search button[hidden] { display: none; }
.archive-result { margin: 26px 0 18px; color: #55728b; font-size: 12px; font-weight: 700; }
.archive-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.archive-page .archive-card { display: flex; min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; justify-content: flex-start; padding: 0; border: 1px solid #bacbd7; border-top: 3px solid #37618a; border-radius: 3px 35px 3px 26px; background: #f7f6f1; color: #1b3558; transition: border-color .2s; }
.archive-page .archive-card:hover { transform: none; box-shadow: none; border-color: #7898b0; }
.archive-page .archive-card[hidden] { display: none; }
.archive-card-event { grid-column: span 6; }
.archive-page .archive-card-season { grid-column: span 12; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); border-radius: 35px 3px 30px 3px; background: #dce9f2; }
.archive-page .archive-card-people { grid-column: span 4; min-height: 320px; border-radius: 3px 29px 3px 22px; background: #eef3f5; }
.archive-page .archive-card-event:nth-child(2) { border-radius: 35px 3px 27px 3px; }
.archive-card-art { position: relative; height: 275px; overflow: hidden; background: #1a3964; }
.archive-art-shin { background: #dbe7ef; }
.archive-art-shin img { display: block; width: 100%; height: 100%; object-fit: cover; }
.archive-art-go { background: #203e6c; }
.archive-art-go img { display: block; width: 100%; height: 100%; object-fit: cover; }
.archive-art-season { height: 100%; min-height: 340px; background: #183759; }
.archive-art-season img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.archive-card-copy { display: flex; min-height: 250px; flex: 1; flex-direction: column; padding: 28px 30px 26px; }
.archive-card-meta { margin: 0 0 12px; color: #607e99; font-family: 'Pretendard Variable', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.archive-card h3 { margin: 0 0 15px; color: #1b3457; font-family: 'Maru Buri', serif; font-size: clamp(29px, 2.8vw, 38px); font-weight: 600; letter-spacing: -.065em; line-height: 1.35; word-break: keep-all; }
.archive-card-copy > p:not(.archive-card-meta) { margin: 0 0 24px; color: #526980; font-size: 14px; line-height: 1.8; word-break: keep-all; }
.archive-card-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: auto; padding-top: 16px; border-top: 1px solid #b9cad8; }
.archive-card-links a { display: inline-flex; align-items: center; gap: 17px; color: #2c567d; font-size: 13px; font-weight: 700; }
.archive-card-links a:hover { color: #143656; text-decoration: underline; text-underline-offset: 5px; }
.archive-card-season .archive-card-copy { justify-content: center; padding: 37px 43px; }
.archive-card-season h3 { font-size: clamp(30px, 3.3vw, 46px); }
.archive-people-mark { display: block; height: 104px; padding: 12px 26px 0; overflow: hidden; background: linear-gradient(130deg, #244977, #416d99); color: rgba(237,246,251,.65); font-family: 'Maru Buri', serif; font-size: 108px; font-weight: 600; line-height: 1; text-align: right; }
.archive-card-people .archive-card-copy { min-height: 216px; padding: 24px 25px 26px; }
.archive-card-people h3 { font-size: 29px; }
.archive-empty { padding: 70px 24px; border: 1px solid #afc3d2; border-radius: 3px 33px 3px 23px; background: #f4f6f5; color: #294b6f; text-align: center; }
.archive-empty[hidden] { display: none; }
.archive-empty strong { font-family: 'Maru Buri', serif; font-size: 24px; font-weight: 600; }
.archive-empty p { color: #627d95; font-size: 13px; }
.archive-empty button { margin-top: 7px; padding: 8px 0; border: 0; border-bottom: 1px solid #6485a0; background: transparent; color: #285779; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.archive-closer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; padding-top: 27px; border-top: 1px solid #a4bbc9; }
.archive-closer p { margin: 0; color: #5d758e; font-size: 13px; }
.archive-closer a { padding-bottom: 4px; border-bottom: 1px solid #6989a4; color: #2a5277; font-size: 13px; font-weight: 700; }
@media (max-width: 900px) { .archive-story-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .archive-frame-copy { padding: 36px 32px; } .archive-toolbar { align-items: stretch; flex-direction: column; } .archive-search { width: min(100%, 450px); } .archive-page .archive-card-people { grid-column: span 6; } }
@media (max-width: 680px) { .archive-hero-inner { min-height: 390px; padding-top: 109px; padding-bottom: 49px; } .archive-hero h1 { font-size: clamp(46px, 11vw, 61px); } .archive-hero-inner > p:last-of-type { font-size: 14px; } .archive-hero-inner > p:last-of-type br { display: none; } .archive-hero-mark { right: -4%; bottom: -23px; font-size: 168px; } .archive-stories { padding: 64px 0 61px; } .archive-stories-heading { display: block; margin-bottom: 25px; } .archive-stories-heading h2 { font-size: 37px; } .archive-stories-heading > p { margin-top: 12px; font-size: 14px; text-align: left; } .archive-stories-heading > p br { display: none; } .archive-story-tabs { gap: 8px; } .archive-story-tabs button { display: block; min-height: 72px; padding: 11px 14px; border-radius: 3px 24px 3px 3px; } .archive-story-tabs button:last-child { border-radius: 24px 3px 3px 3px; } .archive-story-tabs button span { display: block; font-size: 12px; } .archive-story-tabs button strong { display: block; margin-top: 3px; font-size: 19px; } .archive-story-tabs button i { right: 8px; bottom: -10px; font-size: 63px; } .archive-story-frame { display: block; min-height: 0; border-radius: 3px 36px 3px 26px; } .archive-frame-art { height: 248px; min-height: 0; } .archive-frame-glyph { font-size: 150px; } .archive-frame-inkline { margin-top: 3px; font-size: 14px; } .archive-art-note { left: 12px; bottom: 12px; padding: 6px 9px; font-size: 11px; } .archive-frame-copy { min-height: 326px; padding: 26px 25px 29px; } .archive-frame-count { margin-bottom: 14px; font-size: 20px; } .archive-frame-copy h3 { margin-bottom: 13px; font-size: 32px; } .archive-frame-copy > p:not(.archive-frame-count) { font-size: 15px; line-height: 1.75; } .archive-story-controls { margin-top: 14px; } .archive-story-progressbar { margin-right: 2px; } .archive-story-controls button { width: 42px; height: 42px; flex: 0 0 42px; } .archive-story-source { font-size: 12px; } .archive-browser { padding-top: 64px; padding-bottom: 80px; } .archive-browser-heading { display: block; margin-bottom: 25px; } .archive-browser-heading h2 { font-size: 37px; } .archive-browser-heading > p { margin-top: 12px; text-align: left; } .archive-toolbar { gap: 17px; } .archive-filters { gap: 5px; } .archive-filters button { min-height: 38px; padding: 7px 10px; font-size: 11px; } .archive-filters button span { font-size: 10px; } .archive-search { width: 100%; } .archive-grid { gap: 14px; } .archive-page .archive-card-event, .archive-page .archive-card-people, .archive-page .archive-card-season { grid-column: span 12; } .archive-page .archive-card-season { display: flex; flex-direction: column; } .archive-card-art { height: 220px; } .archive-art-season { height: 250px; min-height: 0; } .archive-card-copy, .archive-card-season .archive-card-copy { min-height: 0; padding: 25px 23px 27px; } .archive-card h3 { font-size: 32px; } .archive-card-season h3 { font-size: 31px; } .archive-card-copy > p:not(.archive-card-meta) { font-size: 13px; } .archive-people-mark { height: 80px; font-size: 83px; } .archive-card-people .archive-card-copy { min-height: 0; padding: 22px 23px 25px; } .archive-closer { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .archive-story-progressbar span { transition: none; } }