/* Ngo Hoang Nguyen theme — base + components (Phase 2).
 *
 * Consumes the semantic tokens declared in tokens.css. This is ONE stylesheet
 * that serves both color schemes: nothing here is duplicated per scheme — the
 * scheme is expressed entirely through the semantic tokens. Selectors are scoped
 * to the theme's own Phase 1 class vocabulary and to element defaults inside the
 * document; broad global overrides that could invalidate plugin/Page-Builder
 * injected markup are avoided.
 *
 * Progressive enhancement: every core journey works with this file absent
 * (Phase 1 remains readable unstyled) and with JavaScript disabled (there is no
 * JavaScript in this theme yet). Icons are drawn with CSS affordances only —
 * no icon fonts or SVG files ship in Phase 2.
 *
 * Layout uses logical properties (inline/block, margin-inline, etc.) so the
 * theme is direction-aware for the dir="rtl" locales Core may serve.
 */

/* ------------------------------------------------------------------ *
 * 1. Reset & base
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--nhn-canvas);
    color: var(--nhn-text);
    font-family: var(--nhn-font-body);
    font-size: var(--nhn-text-base);
    line-height: var(--nhn-leading-normal);
    font-weight: var(--nhn-weight-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

img {
    max-inline-size: 100%;
    block-size: auto;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--nhn-heading);
    font-family: var(--nhn-font-heading);
    font-weight: var(--nhn-weight-semibold);
    line-height: var(--nhn-leading-tight);
    margin-block: 0 var(--nhn-space-4);
    overflow-wrap: break-word;
}

p {
    margin-block: 0 var(--nhn-space-4);
    overflow-wrap: break-word;
}

a {
    color: var(--nhn-link);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
    transition: color var(--nhn-duration-fast) var(--nhn-ease);
}

a:hover {
    color: var(--nhn-link-hover);
}

::selection {
    background-color: var(--nhn-selection-bg);
    color: var(--nhn-selection-text);
}

/* ------------------------------------------------------------------ *
 * 2. Accessibility primitives
 * ------------------------------------------------------------------ */

:focus-visible {
    outline: 2px solid var(--nhn-focus-ring);
    outline-offset: 2px;
    border-radius: var(--nhn-radius-sm);
}

/* Skip link — visually hidden until focused. */
.skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: var(--nhn-space-4);
    z-index: 1000;
    padding: var(--nhn-space-2) var(--nhn-space-4);
    background-color: var(--nhn-accent);
    color: var(--nhn-accent-contrast);
    text-decoration: none;
    border-radius: var(--nhn-radius-sm);
    font-weight: var(--nhn-weight-semibold);
}

.skip-link:focus {
    inset-block-start: var(--nhn-space-4);
    color: var(--nhn-accent-contrast);
}

/* ------------------------------------------------------------------ *
 * 3. Layout container
 * ------------------------------------------------------------------ */

.container {
    inline-size: 100%;
    max-inline-size: var(--nhn-content-width);
    margin-inline: auto;
    padding-inline: var(--nhn-space-5);
    padding-block: var(--nhn-space-section);
}

/* ------------------------------------------------------------------ *
 * 4. Site header + profile rail foundation
 *    (Interactive/responsive nav behavior is Phase 3.)
 * ------------------------------------------------------------------ */

.site-header {
    background-color: var(--nhn-surface-header);
    border-block-end: var(--nhn-border-width) solid var(--nhn-border-subtle);
    box-shadow: var(--nhn-shadow-sm);
}

.site-header__inner {
    inline-size: 100%;
    max-inline-size: var(--nhn-content-width);
    margin-inline: auto;
    padding-inline: var(--nhn-space-5);
    padding-block: var(--nhn-space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nhn-space-4);
}

.site-brand {
    font-family: var(--nhn-font-heading);
    font-size: var(--nhn-text-lg);
    font-weight: var(--nhn-weight-bold);
    color: var(--nhn-heading);
    text-decoration: none;
    letter-spacing: var(--nhn-tracking-wide);
}

.site-logo {
    display: block;
    max-block-size: 44px;
    inline-size: auto;
}

.site-tagline {
    margin: 0;
    color: var(--nhn-text-muted);
    font-size: var(--nhn-text-sm);
}

.site-nav {
    margin-inline-start: auto;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--nhn-space-2) var(--nhn-space-5);
    align-items: center;
}

.menu__item {
    position: relative;
}

.menu__link {
    display: inline-block;
    padding-block: var(--nhn-space-1);
    color: var(--nhn-text-strong);
    text-decoration: none;
    font-weight: var(--nhn-weight-medium);
    border-block-end: 2px solid transparent;
}

.menu__link:hover,
.menu__link[aria-current="page"] {
    color: var(--nhn-accent-ink);
    border-block-end-color: var(--nhn-accent);
}

/* Submenus render as a static nested list (keyboard/no-JS reachable). Phase 3
   may add a disclosure interaction; Phase 2 keeps them always visible and
   visually indented so nothing is hidden without a control. */
.menu__sub {
    list-style: none;
    margin-block: var(--nhn-space-1) 0;
    padding-inline-start: var(--nhn-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--nhn-space-1);
    border-inline-start: 2px solid var(--nhn-border-subtle);
}

/* Language switcher */
.lang-switcher__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--nhn-space-2);
    align-items: center;
}

.lang-switcher__form {
    margin: 0;
}

.lang-switcher__link {
    display: inline-block;
    padding: var(--nhn-space-1) var(--nhn-space-2);
    font-size: var(--nhn-text-sm);
    font-weight: var(--nhn-weight-semibold);
    color: var(--nhn-text-muted);
    text-decoration: none;
    border: var(--nhn-border-width) solid var(--nhn-border);
    border-radius: var(--nhn-radius-sm);
    background: none;
    cursor: pointer;
    line-height: 1.4;
}

.lang-switcher__link:hover,
.lang-switcher__link[aria-current="true"] {
    color: var(--nhn-accent-contrast);
    background-color: var(--nhn-accent);
    border-color: var(--nhn-accent);
}

/* ------------------------------------------------------------------ *
 * 5. Headings for page / archive / post
 * ------------------------------------------------------------------ */

.page-title,
.entry-title,
.archive-title {
    font-size: var(--nhn-h1);
    letter-spacing: -0.01em;
}

.entry--post .entry-title {
    margin-block-end: var(--nhn-space-3);
}

.archive-header {
    margin-block-end: var(--nhn-space-8);
    text-align: center;
    max-inline-size: var(--nhn-prose-width);
    margin-inline: auto;
}

.archive-description {
    color: var(--nhn-text-muted);
    font-size: var(--nhn-text-lg);
}

.archive-featured-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--nhn-radius-lg);
    margin-block: var(--nhn-space-5) 0;
}

/* ------------------------------------------------------------------ *
 * 6. Rich content typography (page + post body)
 * ------------------------------------------------------------------ */

.entry--page,
.entry--post {
    max-inline-size: var(--nhn-prose-width);
    margin-inline: auto;
}

.featured-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--nhn-radius-lg);
    box-shadow: var(--nhn-card-shadow);
    margin-block: 0 var(--nhn-space-6);
}

.entry-meta {
    color: var(--nhn-text-muted);
    font-size: var(--nhn-text-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--nhn-space-1) var(--nhn-space-4);
}

.entry-excerpt {
    font-size: var(--nhn-text-lg);
    color: var(--nhn-text-strong);
    font-weight: var(--nhn-weight-medium);
    margin-block: 0 var(--nhn-space-6);
}

.entry-content > :first-child {
    margin-block-start: 0;
}

.entry-content h2 { font-size: var(--nhn-h2); margin-block-start: var(--nhn-space-6); }
.entry-content h3 { font-size: var(--nhn-h3); margin-block-start: var(--nhn-space-5); }
.entry-content h4 { font-size: var(--nhn-h4); margin-block-start: var(--nhn-space-5); }

.entry-content img,
.entry-content video,
.entry-content iframe {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--nhn-radius-md);
}

.entry-content figure {
    margin-inline: 0;
    margin-block: var(--nhn-space-5);
}

.entry-content figcaption {
    margin-block-start: var(--nhn-space-2);
    font-size: var(--nhn-text-sm);
    color: var(--nhn-text-muted);
    text-align: center;
}

.entry-content a {
    text-decoration: underline;
}

.entry-content blockquote {
    margin-inline: 0;
    margin-block: var(--nhn-space-5);
    padding: var(--nhn-space-4) var(--nhn-space-5);
    background-color: var(--nhn-quote-surface);
    border-inline-start: 4px solid var(--nhn-quote-border);
    border-radius: 0 var(--nhn-radius-md) var(--nhn-radius-md) 0;
    color: var(--nhn-text-strong);
}

.entry-content :is(code, kbd, samp) {
    font-family: var(--nhn-font-mono);
    font-size: 0.9em;
    background-color: var(--nhn-code-surface);
    color: var(--nhn-code-text);
    padding: 0.15em 0.4em;
    border-radius: var(--nhn-radius-sm);
}

.entry-content pre {
    overflow-x: auto;
    padding: var(--nhn-space-4);
    background-color: var(--nhn-code-surface);
    border-radius: var(--nhn-radius-md);
    margin-block: var(--nhn-space-5);
}

.entry-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.entry-content ul,
.entry-content ol {
    padding-inline-start: var(--nhn-space-5);
    margin-block: var(--nhn-space-4);
}

.entry-content li {
    margin-block: var(--nhn-space-2);
}

.entry-content table {
    inline-size: 100%;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    margin-block: var(--nhn-space-5);
    font-size: var(--nhn-text-sm);
}

.entry-content :is(th, td) {
    padding: var(--nhn-space-2) var(--nhn-space-3);
    border: var(--nhn-border-width) solid var(--nhn-border);
    text-align: start;
}

.entry-content th {
    background-color: var(--nhn-surface-muted);
    color: var(--nhn-heading);
}

.entry-content tbody tr:nth-child(even) {
    background-color: var(--nhn-table-stripe);
}

/* Tags */
.entry-tags {
    list-style: none;
    margin-block: var(--nhn-space-6) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--nhn-space-2);
}

.entry-tags__link {
    display: inline-block;
    padding: var(--nhn-space-1) var(--nhn-space-3);
    font-size: var(--nhn-text-sm);
    color: var(--nhn-text-muted);
    text-decoration: none;
    background-color: var(--nhn-surface-muted);
    border-radius: var(--nhn-radius-pill);
}

.entry-tags__link:hover {
    color: var(--nhn-accent-contrast);
    background-color: var(--nhn-accent);
}

/* Post footer / related */
.entry-footer {
    margin-block-start: var(--nhn-space-8);
    padding-block-start: var(--nhn-space-6);
    border-block-start: var(--nhn-border-width) solid var(--nhn-divider);
}

.entry-related__title {
    font-size: var(--nhn-h3);
}

/* ------------------------------------------------------------------ *
 * 7. Post list (simple) — home latest + related posts
 * ------------------------------------------------------------------ */

.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.post-list__item {
    margin-block: 0 var(--nhn-space-4);
}

.post-list__title {
    font-size: var(--nhn-h4);
    margin: 0;
}

.post-list__link {
    color: var(--nhn-link);
}

/* ------------------------------------------------------------------ *
 * 8. Archive card grid — visual authority: Light index.html#blog
 * ------------------------------------------------------------------ */

.archive .post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--nhn-grid-gap);
}

.archive .post-list__item {
    margin: 0;
}

/* Emphasized lead card: the first article spans two columns on wide screens,
   but only when it has siblings so a lone result stays a normal single card. */
@media (min-width: 48rem) {
    .archive .post-list__item:first-child:not(:last-child) {
        grid-column: span 2;
    }
}

.archive .post-list__item article {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--nhn-space-5) var(--nhn-space-5) var(--nhn-space-6);
    background-color: var(--nhn-card-surface);
    border: var(--nhn-border-width) solid var(--nhn-border-subtle);
    border-radius: var(--nhn-radius-lg);
    box-shadow: var(--nhn-card-shadow);
    transition: transform var(--nhn-duration-normal) var(--nhn-ease),
        box-shadow var(--nhn-duration-normal) var(--nhn-ease);
}

.archive .post-list__item article:hover {
    transform: translateY(-4px);
}

.archive .post-list__title {
    font-size: var(--nhn-h4);
    margin-block-end: var(--nhn-space-3);
}

.archive .post-list__title a {
    color: var(--nhn-heading);
    text-decoration: none;
}

.archive .post-list__title a:hover {
    color: var(--nhn-accent-ink);
}

/* Card "read more" affordance drawn with CSS (no icon asset). Decorative. */
.archive .post-list__title a::after {
    content: "";
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    margin-inline-start: 0.5em;
    border-inline-end: 2px solid currentColor;
    border-block-start: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--nhn-duration-fast) var(--nhn-ease);
    vertical-align: middle;
}

.archive .post-list__title a:hover::after {
    transform: translateX(3px) rotate(45deg);
}

[dir="rtl"] .archive .post-list__title a::after {
    transform: rotate(225deg);
}

[dir="rtl"] .archive .post-list__title a:hover::after {
    transform: translateX(-3px) rotate(225deg);
}

.archive .post-list__date {
    margin: auto 0 0;
    color: var(--nhn-text-muted);
    font-size: var(--nhn-text-xs);
    letter-spacing: var(--nhn-tracking-wide);
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 9. Pagination
 * ------------------------------------------------------------------ */

.pagination {
    margin-block-start: var(--nhn-space-8);
}

.pagination__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nhn-space-2);
}

.pagination__item :is(a, span) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.5rem;
    padding: var(--nhn-space-2) var(--nhn-space-3);
    border: var(--nhn-border-width) solid var(--nhn-border);
    border-radius: var(--nhn-radius-md);
    color: var(--nhn-text-strong);
    text-decoration: none;
    font-weight: var(--nhn-weight-medium);
}

.pagination__item a:hover {
    color: var(--nhn-accent-contrast);
    background-color: var(--nhn-accent);
    border-color: var(--nhn-accent);
}

.pagination__item.is-current span {
    color: var(--nhn-accent-contrast);
    background-color: var(--nhn-accent);
    border-color: var(--nhn-accent);
}

.pagination__item.is-disabled span {
    color: var(--nhn-text-muted);
    opacity: 0.6;
}

/* ------------------------------------------------------------------ *
 * 10. Empty states
 * ------------------------------------------------------------------ */

.empty-state {
    padding: var(--nhn-space-8) var(--nhn-space-5);
    text-align: center;
    color: var(--nhn-text-muted);
    font-size: var(--nhn-text-lg);
    background-color: var(--nhn-surface-muted);
    border-radius: var(--nhn-radius-lg);
}

/* ------------------------------------------------------------------ *
 * 11. Footer
 * ------------------------------------------------------------------ */

.site-footer {
    background-color: var(--nhn-surface-footer);
    color: var(--nhn-text-on-footer);
    margin-block-start: var(--nhn-space-section);
}

.site-footer__inner {
    inline-size: 100%;
    max-inline-size: var(--nhn-content-width);
    margin-inline: auto;
    padding-inline: var(--nhn-space-5);
    padding-block: var(--nhn-space-8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nhn-space-4);
}

.footer-brand {
    font-family: var(--nhn-font-heading);
    font-weight: var(--nhn-weight-bold);
    font-size: var(--nhn-text-lg);
    color: var(--nhn-white);
    text-decoration: none;
}

.site-nav--footer {
    margin-inline-start: auto;
}

.menu--footer {
    gap: var(--nhn-space-4);
}

.menu--footer .menu__link {
    color: var(--nhn-text-on-footer);
}

.menu--footer .menu__link:hover,
.menu--footer .menu__link[aria-current="page"] {
    color: var(--nhn-white);
    border-block-end-color: var(--nhn-accent);
}

.site-footer__copy {
    flex-basis: 100%;
    margin: 0;
    color: var(--nhn-text-on-footer);
    font-size: var(--nhn-text-sm);
}

/* ------------------------------------------------------------------ *
 * 12. Maintenance (standalone document)
 * ------------------------------------------------------------------ */

.maintenance-brand {
    color: var(--nhn-accent-ink);
    font-weight: var(--nhn-weight-bold);
    letter-spacing: var(--nhn-tracking-wide);
    text-transform: uppercase;
    font-size: var(--nhn-text-sm);
    margin-block-end: var(--nhn-space-4);
}

.maintenance-title {
    font-size: var(--nhn-h1);
}

.maintenance-message {
    font-size: var(--nhn-text-lg);
    color: var(--nhn-text-strong);
    max-inline-size: var(--nhn-prose-width);
}

.maintenance-retry {
    color: var(--nhn-text-muted);
}

/* The maintenance view has no .container; give its <main> comfortable framing. */
body:not(:has(.site-header)) main {
    max-inline-size: var(--nhn-prose-width);
    margin-inline: auto;
    padding-inline: var(--nhn-space-5);
    padding-block: var(--nhn-space-section);
}

/* ------------------------------------------------------------------ *
 * 13. Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================== *
 * 14. Phase 3 — responsive shell, theme-mode control, navigation
 * ================================================================== */

/* Utility: content available to assistive tech only. */
.visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Respect the hidden attribute even against flex/grid display rules. */
[hidden] {
    display: none !important;
}

/* -- Header shell: top bar (identity + controls) then the nav row -- */
.site-header__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nhn-space-3) var(--nhn-space-4);
}

.site-header__controls {
    margin-inline-start: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nhn-space-2) var(--nhn-space-3);
}

/* The nav sits on its own row below the bar; it no longer needs the auto
   inline-start margin from the Phase 2 inline layout. */
.site-header .site-nav {
    margin-inline-start: 0;
    margin-block-start: var(--nhn-space-3);
}

/* -- Theme-mode control -- */
.theme-mode {
    display: inline-flex;
    align-items: center;
    gap: var(--nhn-space-2);
    min-block-size: 2.75rem;              /* ~44px touch target */
    padding: var(--nhn-space-1) var(--nhn-space-3);
    font: inherit;
    font-size: var(--nhn-text-sm);
    font-weight: var(--nhn-weight-medium);
    color: var(--nhn-text-strong);
    background-color: var(--nhn-surface-muted);
    border: var(--nhn-border-width) solid var(--nhn-border);
    border-radius: var(--nhn-radius-pill);
    cursor: pointer;
}

.theme-mode:hover {
    color: var(--nhn-accent-contrast);
    background-color: var(--nhn-accent);
    border-color: var(--nhn-accent);
}

/* Decorative mode indicator (aria-hidden). Meaning is carried by the text. */
.theme-mode__icon {
    inline-size: 0.85em;
    block-size: 0.85em;
    border-radius: 50%;
    border: 2px solid currentColor;
    flex: none;
}
.theme-mode[data-mode="light"] .theme-mode__icon {
    background-color: currentColor;
}
.theme-mode[data-mode="dark"] .theme-mode__icon {
    background-color: currentColor;
    box-shadow: inset -0.32em 0.18em 0 -0.06em var(--nhn-surface-muted);
}
.theme-mode[data-mode="system"] .theme-mode__icon {
    background-image: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
}
.theme-mode:hover[data-mode="dark"] .theme-mode__icon {
    box-shadow: inset -0.32em 0.18em 0 -0.06em var(--nhn-accent);
}

/* -- Mobile navigation toggle -- */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--nhn-space-2);
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding: var(--nhn-space-1) var(--nhn-space-3);
    font: inherit;
    font-size: var(--nhn-text-sm);
    font-weight: var(--nhn-weight-semibold);
    color: var(--nhn-text-strong);
    background-color: var(--nhn-surface-muted);
    border: var(--nhn-border-width) solid var(--nhn-border);
    border-radius: var(--nhn-radius-md);
    cursor: pointer;
}
.nav-toggle:hover {
    color: var(--nhn-accent-contrast);
    background-color: var(--nhn-accent);
    border-color: var(--nhn-accent);
}

/* CSS hamburger; morphs to an X when expanded. Decorative (aria-hidden). */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    inline-size: 1.15em;
    block-size: 2px;
    background-color: currentColor;
    transition: transform var(--nhn-duration-fast) var(--nhn-ease),
        opacity var(--nhn-duration-fast) var(--nhn-ease);
}
.nav-toggle__bars {
    position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}
.nav-toggle__bars::before { inset-block-start: -0.4em; }
.nav-toggle__bars::after { inset-block-start: 0.4em; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background-color: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(0.4em) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-0.4em) rotate(-45deg);
}

/* -- Progressive navigation collapse --
   Only applies once theme.js adds .is-nav-enhanced AND below the desktop
   breakpoint. Without JS (no marker) the nav stays visible at every width. */
@media (max-width: 61.999rem) {
    .site-header.is-nav-enhanced .site-nav {
        display: none;
        margin-block-start: var(--nhn-space-4);
    }
    .site-header.is-nav-enhanced.is-nav-open .site-nav {
        display: block;
    }
    .site-header.is-nav-enhanced .site-nav .menu {
        flex-direction: column;
        align-items: stretch;
        gap: var(--nhn-space-1);
    }
    .site-header.is-nav-enhanced .site-nav .menu__link {
        display: block;
        padding-block: var(--nhn-space-2);
    }
}

/* At desktop widths the toggle is never shown; the nav is always visible. */
@media (min-width: 62rem) {
    .nav-toggle {
        display: none !important;
    }
}

/* -- Forced-colors / Windows High Contrast: keep controls perceivable -- */
@media (forced-colors: active) {
    .theme-mode,
    .nav-toggle,
    .pagination__item :is(a, span),
    .lang-switcher__link {
        border: 1px solid CanvasText;
    }
    .theme-mode:hover,
    .nav-toggle:hover,
    .lang-switcher__link:hover,
    .lang-switcher__link[aria-current="true"] {
        color: HighlightText;
        background-color: Highlight;
    }
    :focus-visible {
        outline: 2px solid CanvasText;
    }
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        background-color: CanvasText;
    }
    .theme-mode__icon {
        border-color: CanvasText;
    }
}

/* ================================================================== *
 * 15. Phase 4F — Mulan CV shell (fixed left profile rail + canvas)
 * ================================================================== */

/* Content canvas fills beside the rail; footer sinks to the bottom. */
.canvas { display: flex; flex-direction: column; min-block-size: 100vh; }
.canvas > main { flex: 1 0 auto; }

/* -- Rail shell -- */
.rail { background-color: var(--nhn-rail-surface); overflow-x: clip; }
.rail__inner {
    display: flex;
    flex-direction: column;
    min-block-size: 100%;
    padding-block-end: var(--nhn-space-6);
}

/* Profile block with the Mulan angled bottom notch + overlapping avatar. */
.rail__profile {
    display: block;
    block-size: 180px;
    background-color: var(--nhn-rail-tint);
    position: relative;
}
.rail__profile::before,
.rail__profile::after {
    content: "";
    position: absolute;
    inset-block-end: -58px;
    inline-size: 62%;
    block-size: 70%;
    background-color: var(--nhn-rail-surface);
    z-index: 1;
}
.rail__profile::before { inset-inline-start: -14%; transform: rotate(15deg); }
.rail__profile::after { inset-inline-end: -14%; transform: rotate(-15deg); }

.rail__avatar {
    position: absolute;
    inset-block-end: -25px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 3;
    inline-size: 100px;
    block-size: 100px;
    border-radius: 50%;
    background-color: var(--nhn-avatar-ring);
    padding: 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
[dir="rtl"] .rail__avatar { transform: translateX(50%); }
.rail__avatar-img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; }
.rail__avatar-initial {
    font-size: 2rem;
    font-weight: var(--nhn-weight-bold);
    color: var(--nhn-accent-contrast);
    text-transform: uppercase;
}

.rail__identity {
    position: relative;
    z-index: 2;
    margin-block: 48px 8px;
    padding-inline: var(--nhn-space-4);
    text-align: center;
}
.rail__name {
    display: block;
    font-family: var(--nhn-font-heading);
    font-size: 1.375rem;
    font-weight: var(--nhn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--nhn-heading);
    text-decoration: none;
    overflow-wrap: break-word;
}
.rail__role { margin: var(--nhn-space-2) 0 0; color: var(--nhn-accent-ink); font-size: var(--nhn-text-sm); }

/* Vertical pill navigation (overrides the Phase 3 horizontal .menu). */
.rail__nav { margin-block-start: var(--nhn-space-4); }
.rail-menu { flex-direction: column; gap: 0; align-items: stretch; }
.rail-menu .menu__item { padding-inline-start: var(--nhn-space-5); }
.rail-menu .menu__link {
    display: flex;
    align-items: center;
    gap: var(--nhn-space-3);
    padding: var(--nhn-space-2) var(--nhn-space-4);
    margin-block-end: 8px;
    border: 0;
    border-start-start-radius: var(--nhn-radius-pill);
    border-end-start-radius: var(--nhn-radius-pill);
    color: var(--nhn-text);
    font-weight: var(--nhn-weight-medium);
    text-decoration: none;
}
/* Mulan accent-circle marker (decorative; text carries meaning; no icon font). */
.rail-menu .menu__link::before {
    content: "";
    flex: none;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    background-color: var(--nhn-accent);
}
.rail-menu .menu__link:hover,
.rail-menu .menu__link[aria-current="page"] {
    background-color: var(--nhn-rail-tint);
    color: var(--nhn-heading);
}
.rail-menu .menu__sub { padding-inline-start: var(--nhn-space-4); border: 0; margin-block: 0 var(--nhn-space-2); }

.rail__tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nhn-space-2);
    justify-content: center;
    align-items: center;
    margin-block-start: var(--nhn-space-5);
    padding-inline: var(--nhn-space-4);
}
.rail__copyright {
    margin-block-start: auto;
    padding: var(--nhn-space-5) var(--nhn-space-3) 0;
    text-align: center;
    font-size: var(--nhn-text-xs);
    color: var(--nhn-text-muted);
}

/* -- Mobile bar (hidden by default; shown only when JS-enhanced on mobile) -- */
.mobile-bar { display: none; }
.mobile-bar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--nhn-space-2);
    color: var(--nhn-accent-ink);
    font-weight: var(--nhn-weight-semibold);
    text-decoration: none;
}
.mobile-bar__logo { border-radius: 50%; }

/* -- Desktop (>= 62rem): fixed rail + offset canvas -- */
@media (min-width: 62rem) {
    .rail {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: var(--nhn-rail-w);
        overflow-y: auto;
        z-index: 20;
        box-shadow: var(--nhn-shadow-sm);
    }
    .canvas { margin-inline-start: var(--nhn-rail-w); }
}

/* -- Mobile (< 62rem): rail in normal flow (no-JS reachable); enhanced -> drawer -- */
@media (max-width: 61.999rem) {
    body.is-nav-enhanced .mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        block-size: 55px;
        padding: var(--nhn-space-2) var(--nhn-space-4);
        background-color: var(--nhn-surface);
        box-shadow: var(--nhn-shadow-sm);
        z-index: 40;
    }
    body.is-nav-enhanced .rail {
        position: fixed;
        inset-block-start: 55px;
        inset-block-end: 0;
        inset-inline-start: 0;
        inline-size: var(--nhn-rail-w);
        max-inline-size: 85vw;
        overflow-y: auto;
        z-index: 39;
        transform: translateX(-105%);
        transition: transform var(--nhn-duration-normal) var(--nhn-ease);
        box-shadow: var(--nhn-card-shadow);
    }
    [dir="rtl"] body.is-nav-enhanced .rail { transform: translateX(105%); }
    body.is-nav-enhanced.is-nav-open .rail { transform: translateX(0); }
    body.is-nav-enhanced .canvas { padding-block-start: 55px; }
}