@charset "utf-8";

/* ==========================================================================
   WiPDA-Asia 2027
   Visual idea: the double-pulse test. The hero is an oscilloscope screen -
   drain voltage rising through its overshoot while the current falls -
   because that transient is the one picture everyone at this workshop knows.
   Everything below stays quiet: light paper, one accent, and a mono face for
   anything a reader treats as data.
   No webfonts, no absolute URLs, no build step beyond build.py.
   ========================================================================== */

:root {
    /* ロゴ（FullLogo_NoBuffer.png）から採った色 */
    --scope:      #071A21;   /* 深いティール寄りの黒。ヒーロー・フッタ */
    --trace-v:    #E53256;   /* ロゴの赤。V_DS の軌跡とサイト全体のアクセント */
    --trace-i:    #99D2CB;   /* ロゴのミント。I_D の軌跡 */
    --teal:       #048484;   /* ロゴのワードマークのティール。リンク */
    --blue:       var(--teal);
    --ink:        #16222E;
    --ink-soft:   #5B6B78;
    --paper:      #F5F7F8;
    --card:       #FFFFFF;
    --line:       #DFE5E9;
    --max:        1140px;
    --bar:        76px;   /* マストヘッドの高さ */
    --measure:    780px;
    --sans:       -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                  Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --mono:       ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
                  "Roboto Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
figure, p, blockquote, th, td, fieldset, legend, input, textarea { margin: 0; padding: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, svg { max-width: 100%; }
img { height: auto; border: 0; }

html { font-size: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--scope); color: #fff; padding: 12px 18px; }
.skip-link:focus { left: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; width: 100%; }
/* ノッチ付き端末の横向きで文字が欠けないように */
@supports (padding: max(0px)) {
    .wrap { padding-left: max(1.5rem, env(safe-area-inset-left));
            padding-right: max(1.5rem, env(safe-area-inset-right)); }
}

/* --- shared type ---------------------------------------------------------- */
.eyebrow {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--trace-v); margin-bottom: 0.9rem;
}
.eyebrow.on-paper { color: var(--ink-soft); }
.eyebrow.on-paper::before {
    content: ''; display: inline-block; width: 22px; height: 2px;
    background: var(--trace-v); vertical-align: middle; margin-right: 0.7rem;
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: 1.9rem; font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 0.8rem; }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; margin: 1.8rem 0 0.5rem; }
h4 { font-size: 0.95rem; font-weight: 700; color: var(--ink-soft); margin: 1.2rem 0 0.3rem; }
p { margin: 0.85rem 0; }
strong { font-weight: 700; }
code { font-family: var(--mono); font-size: 0.86em;
    background: rgba(22, 34, 46, 0.07); border-radius: 3px; padding: 0.12em 0.4em; }

/* --- masthead ------------------------------------------------------------- */
.masthead { position: -webkit-sticky; position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.94);
    border-bottom: 1px solid var(--line); }
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .masthead { background: rgba(255,255,255,0.82);
        -webkit-backdrop-filter: saturate(160%) blur(10px);
        backdrop-filter: saturate(160%) blur(10px); }
}
.masthead .wrap { display: flex; align-items: center; gap: 0.85rem; height: var(--bar);
    position: relative; }
.wordmark { display: flex; align-items: center; gap: 0.7rem; color: var(--teal); font-weight: 800;
    letter-spacing: -0.02em; font-size: 1.15rem; white-space: nowrap; flex: 0 0 auto; }
.wordmark:hover { text-decoration: none; }
.wordmark img { width: auto; height: 52px; }
.wordmark .yr { font-family: var(--mono); font-weight: 400; color: var(--trace-v);
    letter-spacing: 0.02em; }

#show-menu { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#show-menu:focus-visible + .show-menu, .show-menu:focus-visible {
    outline: 3px solid var(--trace-v); outline-offset: 3px; }
.show-menu { margin-left: auto; font-family: var(--mono); font-size: 0.75rem;
    letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px;
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.navigation { display: none; }
#show-menu:checked ~ .navigation { display: block; position: absolute; top: var(--bar); left: 0;
    right: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 0.6rem 1.5rem 1.4rem;
    z-index: 70; max-height: calc(100vh - var(--bar)); overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
.navigation a { display: block; padding: 11px 0; color: var(--ink); font-weight: 600; }
.navigation .sub-menu { padding-left: 0.9rem; }
.navigation .sub-menu a { font-weight: 400; color: var(--ink-soft); }
.navigation .group { display: block; font-family: var(--mono); font-size: 0.7rem;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--trace-v);
    padding-top: 1.1rem; }
/* ドロワーでは見出しと同じ文字のリンクが重複するので隠す */
.navigation .group + a { display: none; }

@media (min-width: 900px) {
    .show-menu { display: none; }
    .navigation { display: flex; margin-left: auto; align-items: center; gap: 0.2rem; }
    .navigation > li { position: relative; }
    .navigation > li > a { font-size: 0.95rem; font-weight: 600; padding: 26px 12px;
        border-bottom: 3px solid transparent; }
    .navigation > li > a:hover { text-decoration: none; border-bottom-color: var(--line); }
    .navigation > li > a[aria-current] { border-bottom-color: var(--trace-v); }
    .navigation .group { display: none; }
    .navigation .group + a { display: block; }
    .navigation .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 230px;
        background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0.4rem;
        box-shadow: 0 18px 40px rgba(8, 18, 30, 0.14); }
    .navigation > li:hover .sub-menu, .navigation > li:focus-within .sub-menu { display: block; }
    .navigation .sub-menu a { padding: 9px 12px; border-radius: 7px; color: var(--ink); }
    .navigation .sub-menu a:hover { background: var(--paper); text-decoration: none; }
    .navigation .sub-menu a[aria-current] { color: var(--blue); font-weight: 700; }
}

/* --- hero: the scope screen ----------------------------------------------- */
.hero { position: relative; background: var(--scope); color: #fff; overflow: hidden; }
.hero::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    background: radial-gradient(120% 90% at 78% 12%, rgba(153,210,203,0.14), transparent 60%);
    pointer-events: none; }
.hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(7,26,33,0.97) 0%, rgba(7,26,33,0.93) 34%,
        rgba(7,26,33,0.55) 62%, rgba(7,26,33,0.25) 100%); }
.scope-screen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.scope-screen svg { width: 100%; height: 100%; display: block; }
.graticule line { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.trace { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trace-v { stroke: var(--trace-v); }
.trace-i { stroke: var(--trace-i); }
.trace-glow { fill: none; stroke-width: 10; opacity: 0.15; }

.hero-inner { position: relative; z-index: 2; padding-top: 4.5rem; padding-bottom: 4rem; }
.hero-copy { max-width: 640px; }
.hero h1 { font-size: 2rem; font-size: clamp(1.75rem, 3.6vw, 2.9rem); line-height: 1.08;
    max-width: 19ch; }
.hero h1 .shortname { display: block; margin-top: 0.9rem; font-family: var(--mono);
    font-size: 0.46em; font-weight: 400; letter-spacing: 0.08em; color: var(--trace-v); }
.hero-lead { max-width: 46ch; color: rgba(255,255,255,0.74); margin-top: 1.2rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.chip { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em;
    border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 5px 13px;
    color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.04); }
.chip .k { color: var(--trace-v); margin-right: 0.5rem; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }

@media (max-width: 760px) {
    .hero-inner { padding-top: 3rem; padding-bottom: 2.8rem; }
    .hero::before { background: linear-gradient(180deg, rgba(7,26,33,0.6), rgba(7,26,33,0.92)); }
}

/* --- buttons -------------------------------------------------------------- */
.button { display: inline-block; font-weight: 700; font-size: 0.95rem; padding: 13px 24px;
    border-radius: 999px; background: var(--trace-v); color: #fff !important;
    border: 1px solid var(--trace-v); }
.button:hover { text-decoration: none; background: #C9203F; border-color: #C9203F; }
.button.ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,0.35); }
.button.ghost:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.6); }
.prose .button.ghost { color: var(--blue) !important; border-color: var(--blue); }
.prose .button.ghost:hover { background: rgba(0,103,165,0.07); }

/* --- page header for subpages --------------------------------------------- */
.page-head { background: var(--scope); color: #fff; padding: 3.2rem 0 2.6rem; position: relative;
    overflow: hidden; }
.page-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--trace-v) 0 22%, var(--trace-i) 22% 34%,
        rgba(255,255,255,0.12) 34%); }
.page-head h1 { font-size: 2.1rem; font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
.page-head p { color: rgba(255,255,255,0.68); max-width: 60ch; }

/* --- sections ------------------------------------------------------------- */
.section { padding: 3.6rem 0; border-top: 1px solid var(--line); }
.section.first { border-top: 0; }
.section.tint { background: #fff; }
.section-head { max-width: var(--measure); margin-bottom: 1.6rem; }
.prose { max-width: var(--measure); }
.prose ul { margin: 0.9rem 0; }
.prose ul > li { position: relative; padding-left: 1.5rem; margin: 0.45rem 0; }
.prose ul > li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 9px;
    height: 2px; background: var(--trace-v); }
.prose ul ul { margin: 0.3rem 0 0.5rem; }
.prose ul ul > li::before { background: var(--line); }
.prose ol.numbered { counter-reset: step; margin: 1rem 0; }
.prose ol.numbered > li { counter-increment: step; position: relative; padding-left: 2.4rem;
    margin: 0.6rem 0; }
.prose ol.numbered > li::before { content: counter(step, decimal-leading-zero);
    position: absolute; left: 0; top: 0.15em; font-family: var(--mono); font-size: 0.8rem;
    color: var(--trace-v); }
.lead { font-size: 1.15rem; color: var(--ink-soft); }

/* --- intro with the full logo --------------------------------------------- */
.intro { display: flex; align-items: center; gap: 3rem; }
.intro-text { flex: 1 1 480px; min-width: 0; }
.intro-logo { flex: 0 0 400px; }
.intro-logo img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
    .intro { flex-direction: column; align-items: center; gap: 1.6rem; }
    .intro-logo { flex-basis: auto; width: min(100%, 360px); order: -1; }
}

/* --- date rail ------------------------------------------------------------ */
.rail { display: flex; flex-wrap: wrap; gap: 1rem; }
.rail > li { flex: 1 1 165px; background: var(--card); border: 1px solid var(--line);
    border-top: 3px solid var(--trace-v); border-radius: 8px; padding: 1rem; }
.rail .label { font-size: 0.85rem; color: var(--ink-soft); display: block; min-height: 2.6em; }
.rail .date { font-family: var(--mono); font-weight: 700; font-size: 1rem; }
.rail .done { border-top-color: var(--line); opacity: 0.6; }
.rail .done .date { text-decoration: line-through; font-weight: 400; }

/* --- topic chips ---------------------------------------------------------- */
.topics { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.2rem 0; }
.topics > li { background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 15px; font-size: 0.92rem; }
.topics > li:hover { border-color: var(--trace-v); }

/* --- cards ---------------------------------------------------------------- */
.cards { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.card { flex: 1 1 260px; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 1.4rem 1.5rem; transition: transform 0.18s ease,
    box-shadow 0.18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(8,18,30,0.09); }
.card .num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
    color: var(--trace-v); }
.card h3 { margin-top: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.97rem; }
.card .go { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; }

.speakers { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.speaker { flex: 1 1 220px; max-width: 280px; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 1.2rem; text-align: center; }
.speaker .photo { width: 118px; height: 148px; margin: 0 auto 0.8rem; border-radius: 8px;
    background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center;
    justify-content: center; color: var(--ink-soft); font-family: var(--mono); font-size: 0.7rem; }
.speaker .photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.speaker .track { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--trace-v); margin-bottom: 0.3rem; }
.speaker .name { font-weight: 700; }
.speaker .talk { font-size: 0.87rem; font-style: italic; color: var(--ink-soft); }
.speaker .affil { font-size: 0.87rem; color: var(--ink-soft); }

/* --- speaker profiles (abstract + bio) ------------------------------------ */
.profiles { display: flex; flex-direction: column; gap: 2.2rem; margin-top: 2rem; }
.profile { display: flex; gap: 2rem; align-items: flex-start; background: var(--card);
    border: 1px solid var(--line); border-radius: 12px; padding: 1.6rem;
    scroll-margin-top: calc(var(--bar) + 1rem); }
.profile-photo { flex: 0 0 170px; width: 170px; height: auto; border-radius: 8px;
    border: 1px solid var(--line); }
.profile-body { flex: 1 1 400px; min-width: 0; }
.profile-body .track { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--trace-v); margin: 0 0 0.3rem; }
.profile-body .talk-title { margin: 0 0 0.5rem; font-size: 1.35rem; }
.profile-body .name { font-weight: 700; margin: 0; }
.profile-body .affil { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 0.6rem; }
.profile-body h4 { margin: 1.3rem 0 0.3rem; }
.profile-body p { font-size: 0.97rem; }
@media (max-width: 640px) {
    .profile { flex-direction: column; }
    .profile-photo { width: 130px; }
}
.speaker .photo img { object-position: top; }

/* --- placeholders --------------------------------------------------------- */
.tbd { display: inline-block; font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.1em; color: #7A5B00; background: #FFEFC8; border: 1px solid #EFCB6A;
    border-radius: 4px; padding: 0 7px; white-space: nowrap; }
.hero .tbd, .page-head .tbd { color: #FFD166; background: rgba(255,209,102,0.12);
    border-color: rgba(255,209,102,0.42); }
.slot { border: 1px dashed var(--line); background: rgba(255,255,255,0.65); border-radius: 10px;
    padding: 1.2rem; color: var(--ink-soft); font-size: 0.95rem; }
.notice { border-left: 3px solid var(--trace-v); background: var(--card);
    border-radius: 0 10px 10px 0; padding: 1.1rem 1.3rem; margin: 1.4rem 0; }
.notice p:first-child { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }

/* --- tables --------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 1.2rem 0; -webkit-overflow-scrolling: touch; }
/* 画面が狭いときは表を画面幅いっぱいまで使い、横スクロールできることを示す */
@media (max-width: 620px) {
    .table-scroll { margin-left: -1.5rem; margin-right: -1.5rem;
        padding: 0 1.5rem 0.4rem; }
    .table-scroll::after { content: 'swipe \2192'; display: block; text-align: right;
        font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
        color: var(--ink-soft); padding-top: 0.4rem; }
    table.grid { min-width: 420px; font-size: 0.92rem; }
    table.grid th, table.grid td { padding: 0.6rem 0.7rem; }
}
table.grid { width: 100%; min-width: 460px; background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden; font-size: 0.97rem; }
table.grid caption { text-align: left; color: var(--ink-soft); font-size: 0.85rem;
    padding-bottom: 0.5rem; }
table.grid th, table.grid td { border-bottom: 1px solid var(--line); padding: 0.7rem 0.9rem;
    text-align: left; vertical-align: top; }
table.grid thead th { background: var(--scope); color: #fff; font-family: var(--mono);
    font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
table.grid tbody th { font-weight: 700; }
table.grid tbody tr:last-child th, table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid td.num { text-align: right; font-family: var(--mono); white-space: nowrap; }

.people > li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); display: flex;
    flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.people .role { flex: 0 0 280px; font-family: var(--mono); font-size: 0.76rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.35em; }
.people .names { flex: 1 1 240px; }
.people .names li { margin: 0.35rem 0; }
.people .names .who { font-weight: 700; }
.people .names .affil { display: block; font-size: 0.9rem; color: var(--ink-soft); }
.people .names li.topic-chair { padding-bottom: 0.6rem; margin-bottom: 0.6rem;
    border-bottom: 1px dashed var(--line); }
.people .names li.topic-chair .affil { display: block; }
.people .names li.topic-chair .who::after { content: 'Topic Chair'; font-family: var(--mono);
    font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400;
    color: var(--trace-v); margin-left: 0.7rem; vertical-align: middle; }

/* Message from the Chair */
.chair { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.chair-photo { flex: 0 0 200px; width: 200px; height: auto; border-radius: 10px;
    border: 1px solid var(--line); }
.chair .prose { flex: 1 1 420px; }
.signature { font-weight: 700; margin-top: 1.6rem; }
.signature span { font-weight: 400; color: var(--ink-soft); }

.member-bio { flex-basis: 100%; display: flex; gap: 1rem; align-items: flex-start;
    margin: 0.4rem 0 0.3rem 0; padding-left: calc(280px + 1.2rem); }
.member-bio img { flex: 0 0 72px; width: 72px; height: auto; border-radius: 6px;
    border: 1px solid var(--line); }
.member-bio p { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 0.4rem; }
@media (max-width: 700px) { .member-bio { padding-left: 0; } }

.map-embed { position: relative; padding-top: 52%; border-radius: 12px; overflow: hidden;
    background: var(--card); border: 1px solid var(--line); margin: 1.2rem 0; }
.map-embed iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }

.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin-top: 1rem; }
.logo-strip img { max-height: 60px; width: auto; }

/* --- footer --------------------------------------------------------------- */
.site-footer { margin-top: auto; background: var(--scope); color: rgba(255,255,255,0.7);
    font-size: 0.92rem; padding: 2.8rem 0 2rem; }
.site-footer a { color: #fff; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
.footer-grid > div { flex: 1 1 200px; }
.site-footer h4 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--trace-v); margin: 0 0 0.6rem; }
.site-footer li { margin: 0.25rem 0; }
.colophon { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2rem; padding-top: 1.2rem;
    font-size: 0.8rem; color: rgba(255,255,255,0.5); }

/* --- motion --------------------------------------------------------------- */
/* 掃引アニメーション。開始値はキーフレーム側に置いてあるので、
   アニメーション非対応の環境でも波形はそのまま表示されます。 */
@keyframes sweep { from { stroke-dashoffset: 3000; } to { stroke-dashoffset: 0; } }
.trace, .trace-glow { stroke-dasharray: 3000; animation: sweep 1.8s ease-out forwards; }
.trace-i, .trace-glow.trace-i { animation-duration: 2.4s; }
.hero-copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.hero-copy > *:nth-child(2) { animation-delay: 0.06s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.12s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.18s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .trace, .trace-glow { stroke-dashoffset: 0; }
}

@media print {
    .masthead, .show-menu, .navigation, .skip-link, .scope-screen { display: none !important; }
    body { background: #fff; color: #000; }
    .hero, .page-head, .site-footer { background: #fff !important; color: #000 !important; }
}