:root {
    --paper: #f5f1ea;
    --paper-2: #ede6da;
    --paper-3: #e3dacb;
    --white: #fbf9f5;
    --ink: #16191d;
    --ink-2: #3b3e43;
    --muted: #7a7266;
    --faint: #cfc6b7;
    --line: rgba(22, 25, 29, .12);
    --seal: #a3271c;
    --seal-deep: #861d14;
    --brass: #a8854f;
    --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --sans: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --gutter: clamp(24px, 5vw, 80px);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.is-loading { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--seal); color: var(--white); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.wrap {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- shared type ---------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
    color: var(--seal);
    font-size: 13px;
    letter-spacing: .34em;
}

.eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: currentColor;
}

.display {
    margin: 0 0 32px;
    font-family: var(--serif);
    font-size: clamp(34px, 4.3vw, 66px);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: .02em;
    text-wrap: balance;
}

.display.huge { font-size: clamp(44px, 7.2vw, 116px); line-height: 1.12; }

.lead {
    max-width: 34em;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 2;
}

.section-head { margin-bottom: clamp(56px, 7vw, 96px); }
.section-head.center { text-align: center; }
.section-head.center .lead { margin: 0 auto; }

/* ---------- seal & buttons ---------- */

.seal {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 4px;
    background: var(--seal);
    color: var(--white);
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 0 0 3px var(--seal), inset 0 0 0 4px rgba(251, 249, 245, .6);
}

.seal-lg { width: 64px; height: 64px; font-size: 32px; border-radius: 6px; }

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 15px 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    letter-spacing: .12em;
    cursor: pointer;
    transition: color .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease);
    isolation: isolate;
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform .6s var(--ease);
}

.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

.btn span { position: relative; }

.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink::before { background: var(--seal); }

.btn-seal { background: var(--seal); color: var(--white); }
.btn-seal::before { background: var(--ink); }

.btn-line { border-color: rgba(22, 25, 29, .4); color: var(--ink); }
.btn-line::before { background: var(--ink); }
.btn-line:hover, .btn-line:focus-visible { color: var(--white); border-color: var(--ink); }

/* ---------- curtain ---------- */

.curtain {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--paper);
    transition: transform 1.2s var(--ease-io) .1s, visibility 0s linear 1.4s;
}

.curtain-mark { display: grid; justify-items: center; gap: 18px; }

.curtain .brand-logo { animation: sealIn 1s var(--ease) both; }

.curtain-name {
    font-family: var(--serif);
    font-size: clamp(20px, 4.2vw, 28px);
    font-weight: 600;
    letter-spacing: .16em;
    padding-left: .16em;
    animation: fadeUp 1s var(--ease) .25s both;
}

.curtain-rule {
    width: 120px;
    height: 1px;
    background: var(--ink);
    transform-origin: left;
    animation: draw 1s var(--ease) .45s both;
}

.curtain-sub {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .12em;
    text-align: center;
    animation: fadeUp 1s var(--ease) .6s both;
}

body.is-ready .curtain { transform: translateY(-100%); visibility: hidden; }

/* ---------- cursor & progress ---------- */

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
}

.cursor span {
    display: block;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid rgba(22, 25, 29, .45);
    border-radius: 50%;
    transition: transform .5s var(--ease), background .5s var(--ease), border-color .5s;
}

.cursor.is-on { opacity: 1; }
.cursor.is-hover span { transform: scale(1.9); background: rgba(163, 39, 28, .08); border-color: rgba(163, 39, 28, .5); }

.progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: 2px;
    pointer-events: none;
}

.progress span {
    display: block;
    height: 100%;
    background: var(--seal);
    transform: scaleX(0);
    transform-origin: left;
}

/* ---------- nav ---------- */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 22px var(--gutter);
    transition: padding .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease), transform .7s var(--ease);
}

.nav.is-scrolled {
    padding-top: 14px;
    padding-bottom: 14px;
    background: rgba(245, 241, 234, .82);
    box-shadow: 0 1px 0 var(--line);
    backdrop-filter: blur(16px) saturate(1.2);
}

.nav.is-hidden { transform: translateY(-100%); }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-logo { width: 44px; height: auto; flex: none; align-self: center; object-fit: contain; }
.brand-logo.lg { width: 148px; }

.brand-text { display: grid; gap: 3px; line-height: 1.15; }
.brand-text strong { font-family: var(--serif); font-size: 15px; font-weight: 650; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.brand-text small { color: var(--muted); font-size: 11px; letter-spacing: 0; line-height: 1.2; white-space: nowrap; }

.nav-links { display: flex; gap: clamp(18px, 2.6vw, 40px); }

.nav-links a {
    position: relative;
    padding: 6px 0;
    color: var(--ink-2);
    font-size: 15px;
    letter-spacing: .2em;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: .2em;
    bottom: 0;
    height: 1px;
    background: var(--seal);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .6s var(--ease);
}

.nav-links a:hover::after, .nav-links a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.is-current { color: var(--seal); }

.nav .btn { padding: 11px 24px; font-size: 14px; }

/* ---------- hero ---------- */

.hero {
    position: relative;
    height: 100svh;
    min-height: 700px;
    overflow: hidden;
}

.hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(10% 12% 10% 46% round 8px);
    transform: scale(1.08);
}

body.is-ready .hero-media {
    animation: heroReveal 1.9s var(--ease-io) .15s forwards, breathe 18s ease-in-out 2.1s infinite alternate;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
    transform: scale(1.12);
    will-change: transform;
}

.hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(245, 241, 234, .9) 0%, rgba(245, 241, 234, .55) 34%, rgba(245, 241, 234, 0) 62%),
        linear-gradient(0deg, rgba(245, 241, 234, .85) 0%, rgba(245, 241, 234, 0) 26%);
    opacity: 0;
    transition: opacity 1.6s var(--ease) .9s;
}

body.is-ready .hero-veil { opacity: 1; }

.hero-body {
    position: absolute;
    top: 50%;
    left: var(--gutter);
    max-width: min(760px, 46vw);
    transform: translateY(-54%);
}

.hero-title {
    margin: 0 0 32px;
    font-family: var(--serif);
    font-size: clamp(48px, 6.4vw, 112px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
}

.hero-title .line { display: block; overflow: hidden; padding-bottom: .08em; white-space: nowrap; }

.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(105%);
    transition: transform 1.3s var(--ease), opacity 1.3s var(--ease);
    transition-delay: calc(.55s + var(--i) * .075s);
}

body.is-ready .char { opacity: 1; transform: none; }

.hero-title .line:last-child .char:last-child { color: var(--seal); }

.hero-lead {
    max-width: 30em;
    margin: 0 0 40px;
    color: var(--ink-2);
    font-size: 17px;
    line-height: 2;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
    transition-delay: var(--d, 0s);
}

body.is-ready .hero-in { opacity: 1; transform: none; }

.hero-vertical {
    position: absolute;
    top: 50%;
    right: calc(var(--gutter) * .6);
    margin-top: -150px;
    color: var(--white);
    font-family: var(--serif);
    font-size: 14px;
    letter-spacing: .6em;
    writing-mode: vertical-rl;
    text-shadow: 0 1px 12px rgba(22, 25, 29, .35);
}

.hero-foot {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 34px;
    display: flex;
    align-items: flex-end;
    gap: clamp(28px, 4vw, 64px);
}

.hero-fact { display: flex; align-items: baseline; gap: 8px; color: var(--ink-2); font-size: 13px; letter-spacing: .2em; }
.hero-fact b { color: var(--seal); font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: 0; }

.scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    color: var(--ink-2);
    font-size: 13px;
    letter-spacing: .24em;
}

.scroll-cue i {
    position: relative;
    width: 1px;
    height: 52px;
    overflow: hidden;
    background: rgba(22, 25, 29, .18);
}

.scroll-cue i::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--seal);
    animation: cue 2.6s var(--ease-io) infinite;
}

/* ---------- marquee ---------- */

.marquee {
    overflow: hidden;
    padding: 26px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee 48s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee span, .marquee em { margin-right: 44px; }
.marquee span { font-family: var(--serif); font-size: 24px; letter-spacing: .24em; white-space: nowrap; }
.marquee em { color: var(--seal); font-size: 10px; font-style: normal; }

/* ---------- prelude ---------- */

.prelude { padding: clamp(120px, 16vw, 220px) 0 clamp(100px, 12vw, 180px); }

.ink-fill {
    max-width: 22em;
    margin: 0 0 clamp(80px, 10vw, 140px);
    font-family: var(--serif);
    font-size: clamp(30px, 3.7vw, 56px);
    font-weight: 600;
    line-height: 1.62;
    letter-spacing: .03em;
}

.ink-fill .ch { color: var(--faint); transition: color .5s var(--ease); }
.ink-fill .ch.on { color: var(--ink); }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }

.value { position: relative; padding-top: 34px; }

.value::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s var(--ease) calc(var(--d, 0s) + .2s);
}

.value.is-in::before { transform: scaleX(1); }

.value-no { color: var(--seal); font-family: var(--serif); font-size: 14px; letter-spacing: .2em; }
.value h3 { margin: 14px 0 12px; font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: .08em; }
.value p { margin: 0; color: var(--muted); line-height: 1.95; }

/* ---------- layers ---------- */

.layers { padding: clamp(80px, 10vw, 160px) 0; background: var(--white); }

.layers-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 110px); }

.layers-stage { position: sticky; top: 13vh; align-self: start; }

.layers-frame {
    position: relative;
    height: 70vh;
    min-height: 460px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--paper-2);
}

.layers-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1.2s var(--ease), transform 2.4s var(--ease);
}

.layers-frame img.is-on { opacity: 1; transform: scale(1); }

.layers-caption {
    display: flex;
    justify-content: space-between;
    margin: 18px 0 0;
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: .3em;
}

.layers-caption i { color: var(--muted); font-style: normal; letter-spacing: .1em; }
.layers-caption b { color: var(--seal); font-weight: 600; }

.layers-text { padding-top: 4vh; }

.layer-list { margin: 64px 0 0; padding: 0; list-style: none; }

.layer {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 20px;
    padding: 9vh 0 9vh;
    border-top: 1px solid var(--line);
    opacity: .32;
    cursor: default;
    transition: opacity .8s var(--ease);
}

.layer:first-child { padding-top: 40px; }
.layer.is-on { opacity: 1; }

.layer-no {
    color: var(--seal);
    font-family: var(--serif);
    font-size: 34px;
    line-height: 1.2;
    transform: translateX(-8px);
    transition: transform .8s var(--ease);
}

.layer.is-on .layer-no { transform: none; }

.layer h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: .1em;
}

.layer p { max-width: 26em; margin: 0; color: var(--muted); line-height: 1.95; }

.tag {
    padding: 3px 10px;
    border: 1px solid var(--seal);
    border-radius: 999px;
    color: var(--seal);
    font-family: var(--sans);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .14em;
}

/* ---------- day (horizontal) ---------- */

.day { position: relative; background: var(--paper); }

.day-pin {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding: clamp(96px, 13vh, 132px) 0 36px;
}

.day-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 0 var(--gutter);
    margin-bottom: clamp(24px, 4vh, 44px);
}

.day-head .display { margin: 0; font-size: clamp(32px, 3.6vw, 54px); }

.day-clock { display: grid; justify-items: end; gap: 4px; text-align: right; }

.day-clock-time {
    color: var(--seal);
    font-family: var(--serif);
    font-size: clamp(44px, 5.4vw, 84px);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.day-clock-place { color: var(--ink-2); font-family: var(--serif); font-size: 16px; letter-spacing: .4em; }

.day-clock.tick .day-clock-time, .day-clock.tick .day-clock-place { animation: tick .7s var(--ease); }

.day-track {
    display: flex;
    flex: 1;
    gap: clamp(32px, 4vw, 64px);
    min-height: 0;
    padding: 0 var(--gutter);
    will-change: transform;
}

.stop {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    flex: none;
    width: min(84vw, 1120px);
    height: 100%;
    max-height: 560px;
    opacity: .38;
    transition: opacity .9s var(--ease);
}

.stop.is-active { opacity: 1; }

.stop figure { margin: 0; overflow: hidden; border-radius: 6px; background: var(--paper-2); }

.stop figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 2.2s var(--ease);
}

.stop.is-active figure img { transform: scale(1); }

.stop-text { align-self: end; padding-bottom: 12px; }

.stop-time { color: var(--seal); font-family: var(--serif); font-size: 15px; letter-spacing: .3em; }

.stop h3 {
    margin: 14px 0 18px;
    font-family: var(--serif);
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 600;
    letter-spacing: .06em;
}

.stop p { max-width: 22em; margin: 0; color: var(--muted); font-size: 16px; line-height: 2; }

.day-rail {
    height: 1px;
    margin: 28px var(--gutter) 0;
    background: var(--line);
}

.day-rail span {
    display: block;
    height: 100%;
    background: var(--seal);
    transform: scaleX(0);
    transform-origin: left;
}

/* ---------- needs ---------- */

.needs { padding: clamp(120px, 14vw, 200px) 0; background: var(--white); }

.need-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }

.need {
    --mx: 50%;
    --my: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: 40px 36px 34px;
    overflow: hidden;
    background: var(--white);
    outline: none;
    isolation: isolate;
}

.need::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    clip-path: circle(0% at var(--mx) var(--my));
    transition: clip-path .9s var(--ease);
}

.need::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(260px circle at var(--mx) var(--my), rgba(163, 39, 28, .35), transparent 70%);
    opacity: 0;
    transition: opacity .6s;
}

.need:hover::before, .need:focus-visible::before { clip-path: circle(150% at var(--mx) var(--my)); }
.need:hover::after, .need:focus-visible::after { opacity: 1; }

.need-no { color: var(--seal); font-family: var(--serif); font-size: 14px; letter-spacing: .2em; transition: color .6s; }

.need h3 {
    margin: auto 0 0;
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .04em;
    transition: transform .9s var(--ease), color .6s, font-size .9s var(--ease);
}

.need-answer {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    color: rgba(251, 249, 245, .82);
    line-height: 1.95;
    opacity: 0;
    transform: translateY(16px);
    transition: max-height .9s var(--ease), opacity .7s var(--ease), transform .9s var(--ease), margin .9s var(--ease);
}

.need-space {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .28em;
    transition: color .6s, border-color .6s;
}

.need:hover h3, .need:focus-visible h3 { color: var(--white); font-size: 21px; }
.need:hover .need-answer, .need:focus-visible .need-answer { max-height: 120px; margin-top: 14px; opacity: 1; transform: none; }
.need:hover .need-no, .need:focus-visible .need-no { color: #e7a598; }
.need:hover .need-space, .need:focus-visible .need-space { color: #e7a598; border-color: rgba(251, 249, 245, .18); }

/* ---------- stars ---------- */

.stars { padding: clamp(120px, 14vw, 200px) 0; }

.tier-tabs {
    position: relative;
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 auto clamp(40px, 5vw, 64px);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
}

.tier-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-2);
    font-size: 15px;
    letter-spacing: .14em;
    cursor: pointer;
    transition: color .5s var(--ease);
}

.tier-tab span { color: var(--seal); font-size: 12px; letter-spacing: 2px; transition: color .5s; }
.tier-tab.is-on, .tier-tab.is-on span { color: var(--white); }

.tier-ink {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: var(--ink);
    transition: transform .7s var(--ease), width .7s var(--ease);
}

.tier-stage { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 5vw, 88px); align-items: center; }

.tier-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: var(--paper-2);
}

.tier-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 0 0 100%);
    transform: scale(1.08);
    transition: clip-path 1.2s var(--ease-io), transform 2s var(--ease);
}

.tier-media img.is-on { z-index: 1; clip-path: inset(0); transform: scale(1); }
.tier-media img.is-leaving { z-index: 0; clip-path: inset(0); }

.tier-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--seal);
    color: var(--white);
    font-size: 13px;
    letter-spacing: 4px;
}

.tier-panels { display: grid; }

.tier-panel {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition: opacity .7s var(--ease), transform .9s var(--ease);
}

.tier-panel.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .2s; }

.tier-value { margin: 0 0 10px; color: var(--seal); font-family: var(--serif); font-size: 16px; letter-spacing: .4em; }

.tier-panel h3 { margin: 0 0 20px; font-family: var(--serif); font-size: clamp(38px, 3.8vw, 58px); font-weight: 700; letter-spacing: .06em; }

.tier-promise { margin: 0 0 30px; font-family: var(--serif); font-size: 21px; line-height: 1.85; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }

.chips li {
    padding: 8px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-size: 14px;
    letter-spacing: .14em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s var(--ease), transform .7s var(--ease), border-color .4s, color .4s;
}

.tier-panel.is-on .chips li { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i, 0) * .07s); }
.chips li:hover { border-color: var(--seal); color: var(--seal); }

.tier-where { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .24em; }

.kit { margin-top: clamp(96px, 11vw, 160px); }

.kit-title { margin: 0 0 32px; font-family: var(--serif); font-size: 22px; letter-spacing: .2em; }

.kit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 40px); }

.kit-item {
    display: grid;
    align-content: start;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid var(--ink);
    transition: border-color .5s;
}

.kit-item b { font-family: var(--serif); font-size: 22px; letter-spacing: .12em; }
.kit-item span { color: var(--muted); line-height: 1.9; }
.kit-item.is-key { border-top: 2px solid var(--seal); }
.kit-item.is-key b { color: var(--seal); }

/* ---------- steward ---------- */

.steward { padding: clamp(120px, 14vw, 200px) 0 clamp(100px, 12vw, 160px); background: var(--paper-2); }

.steward-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 100px); align-items: center; }

.steward .display, .network .display { font-size: clamp(30px, 3.5vw, 56px); }

.abilities { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; margin: 52px 0 0; padding: 0; list-style: none; }

.abilities li { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.abilities b { font-family: var(--serif); font-size: 19px; letter-spacing: .1em; }
.abilities span { color: var(--muted); font-size: 15px; line-height: 1.85; }

.device-wrap { position: relative; perspective: 1600px; }

.device {
    position: relative;
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 50px 100px -40px rgba(22, 25, 29, .35), 0 0 0 1px rgba(22, 25, 29, .06);
    transform-style: preserve-3d;
    transition: transform .9s var(--ease);
}

.device.is-tilting { transition-duration: .35s; }

.device-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .2em;
}

.device-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); }
.device-bar i:first-child { background: var(--seal); }
.device-bar span { margin-left: 12px; }

.device-body { display: grid; gap: 18px; padding: 24px; }

.mock-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.mock-metrics div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; }
.mock-metrics small, .mock-col small, .mock-next small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .16em; }
.mock-metrics b { font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.3; }

.mock-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.mock-col { display: grid; align-content: start; gap: 8px; padding: 12px; border-radius: 8px; background: var(--paper); }

.mock-card {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--white);
    box-shadow: 0 1px 0 var(--line);
    font-size: 12px;
}

.mock-card b { font-size: 13px; font-weight: 600; }
.mock-card span { color: var(--muted); }
.mock-card.is-today { box-shadow: inset 3px 0 0 var(--seal), 0 1px 0 var(--line); }
.mock-card.is-done b { color: var(--muted); }

.mock-next {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--white);
}

.mock-next small { color: rgba(251, 249, 245, .6); }
.mock-next b { font-family: var(--serif); font-size: 17px; letter-spacing: .06em; }
.mock-next em { margin-left: auto; color: #e7a598; font-size: 12px; font-style: normal; letter-spacing: .14em; }

.pulse { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--seal); }

.pulse::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid var(--seal);
    border-radius: 50%;
    animation: ping 2.8s var(--ease) infinite;
}

.device-float {
    position: absolute;
    left: -56px;
    bottom: -124px;
    display: grid;
    gap: 6px;
    width: 260px;
    padding: 22px 24px;
    border-radius: 10px;
    background: var(--paper);
    box-shadow: 0 30px 60px -24px rgba(22, 25, 29, .35), 0 0 0 1px rgba(22, 25, 29, .06);
    transform: translateZ(70px);
    animation: float 7s ease-in-out infinite;
}

.device-float small { color: var(--seal); font-size: 11px; letter-spacing: .3em; }
.device-float b { font-family: var(--serif); font-size: 22px; letter-spacing: .08em; }
.device-float span { color: var(--muted); font-size: 13px; line-height: 1.8; }
.device-float i { height: 1px; margin: 6px 0; background: var(--line); }

.gains { margin-top: clamp(120px, 14vw, 200px); }

.gain-list { margin: 0; padding: 0; list-style: none; counter-reset: none; }

.gain-list li {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: baseline;
    padding: 30px 0;
    border-top: 1px solid var(--line);
}

.gain-list li:last-child { border-bottom: 1px solid var(--line); }

.gain-list li::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--seal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s var(--ease);
}

.gain-list li:hover::before { transform: scaleX(1); }

.gain-list span { color: var(--seal); font-family: var(--serif); font-size: 15px; letter-spacing: .2em; }

.gain-list p {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(22px, 2.5vw, 36px);
    font-weight: 600;
    letter-spacing: .04em;
    transition: transform .8s var(--ease), color .5s;
}

.gain-list li:hover p { transform: translateX(18px); color: var(--seal-deep); }

/* ---------- network ---------- */

.network { padding: clamp(120px, 14vw, 200px) 0; background: var(--white); overflow: hidden; }

.network-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }

.stat { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.stat b { color: var(--ink); font-family: var(--serif); font-size: clamp(44px, 4.6vw, 70px); font-weight: 600; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 13px; letter-spacing: .2em; }

.map svg { width: 100%; height: auto; overflow: visible; }

.map-rings circle { fill: none; stroke: rgba(22, 25, 29, .1); stroke-dasharray: 2 6; }
.map-rings circle:nth-child(2) { animation: spin 120s linear infinite; transform-origin: 260px 260px; }
.map-grid line { stroke: rgba(22, 25, 29, .06); }

.arc {
    fill: none;
    stroke: var(--seal);
    stroke-width: 1.4;
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    transition: stroke-dashoffset 2.4s var(--ease-io);
}

.map.is-in .arc { stroke-dashoffset: 0; }
.map.is-in .arc:nth-of-type(2) { transition-delay: .4s; }
.map.is-in .arc:nth-of-type(3) { transition-delay: .8s; }

.node-dot { fill: var(--seal); }
.node-glow { transform-box: fill-box; transform-origin: center; animation: glow 4.8s ease-in-out infinite; }
.node.is-main .node-glow { animation-duration: 3.6s; }
.node text { fill: var(--ink); font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: .1em; }
.node text.node-star { fill: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .14em; }

.node { opacity: 0; transition: opacity 1s var(--ease) 1.2s; }
.map.is-in .node { opacity: 1; }

/* ---------- boundary ---------- */

.boundary { padding: clamp(120px, 14vw, 200px) 0; background: var(--paper); }

.boundary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-top: clamp(48px, 6vw, 88px); }

.scene { padding: 0 0 32px; border-bottom: 2px solid var(--ink); }

.scene figure { margin: 0 0 28px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; }

.scene figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 1.8s var(--ease);
}

.scene:hover figure img { transform: scale(1.1); }
.scene span { color: var(--seal); font-size: 13px; letter-spacing: .3em; }
.scene p { max-width: 20em; margin: 16px 0 0; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.7; }

.boundary-note { max-width: 36em; margin: clamp(48px, 6vw, 80px) 0 0; color: var(--muted); font-size: 16px; line-height: 2; }

/* ---------- finale ---------- */

.finale { position: relative; height: 96vh; min-height: 640px; overflow: hidden; }

.finale-media { position: absolute; inset: 0; overflow: hidden; }
.finale-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }

.finale-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(245, 241, 234, .96) 0%, rgba(245, 241, 234, .72) 38%, rgba(245, 241, 234, .05) 78%);
}

.finale-body {
    position: relative;
    display: grid;
    justify-items: center;
    padding: clamp(100px, 16vh, 160px) var(--gutter) 0;
    text-align: center;
}

.finale-body .brand-logo { width: 120px; margin-bottom: 32px; }
.finale-body .display { font-size: clamp(38px, 5vw, 78px); margin-bottom: 40px; }

/* ---------- footer ---------- */

.footer { padding: 88px 0 36px; background: var(--paper-2); border-top: 1px solid var(--line); }

.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }

.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand .brand-logo { width: 72px; }
.footer-brand strong { font-family: var(--serif); font-size: 18px; letter-spacing: .04em; }
.footer-brand p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }

.footer-col { display: grid; align-content: start; gap: 10px; font-size: 14px; }
.footer-col b { margin-bottom: 6px; font-family: var(--serif); font-size: 15px; letter-spacing: .2em; }
.footer-col a, .footer-col span { color: var(--muted); transition: color .4s; }
.footer-col a:hover { color: var(--seal); }

.footer-base {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 72px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .16em;
}

/* ---------- reveal ---------- */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
    transition-delay: var(--d, 0s);
}

.reveal.is-in { opacity: 1; transform: none; }

/* ---------- keyframes ---------- */

@keyframes heroReveal {
    to { clip-path: inset(0 0 0 0 round 0); transform: scale(1); }
}

@keyframes breathe {
    from { transform: scale(1); }
    to { transform: scale(1.045); }
}

@keyframes sealIn {
    from { opacity: 0; transform: scale(.6) rotate(-8deg); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes cue {
    0% { transform: translateY(-100%); }
    60%, 100% { transform: translateY(100%); }
}

@keyframes marquee {
    to { transform: translateX(-50%); }
}

@keyframes tick {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes ping {
    0% { opacity: .9; transform: scale(.6); }
    80%, 100% { opacity: 0; transform: scale(1.9); }
}

@keyframes float {
    0%, 100% { transform: translateZ(70px) translateY(0); }
    50% { transform: translateZ(70px) translateY(-12px); }
}

@keyframes glow {
    0%, 100% { opacity: .5; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
    .nav-links { display: none; }
    .layers-grid, .tier-stage, .steward-grid, .network-grid { grid-template-columns: 1fr; }
    .layers-stage { position: relative; top: 0; }
    .layers-frame { height: 52vh; }
    .layer { padding: 36px 0; }
    .need-grid { grid-template-columns: 1fr 1fr; }
    .kit-grid { grid-template-columns: 1fr 1fr; }
    .device-float { left: 16px; }
    .steward-grid { gap: 120px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .day-pin { position: relative; height: auto; overflow: visible; }
    .day-head { flex-direction: column; align-items: flex-start; }
    .day-clock { display: none; }
    .day-track { flex-direction: column; transform: none !important; }
    .stop { grid-template-columns: 1fr; width: 100%; height: auto; max-height: none; opacity: 1; }
    .stop figure { aspect-ratio: 16 / 10; }
    .stop figure img { transform: none; }
    .day-rail { display: none; }
}

@media (max-width: 720px) {
    .brand-text small { display: none; }
    .hero-vertical, .hero-fact { display: none; }
    .hero-body { right: var(--gutter); }
    .values, .need-grid, .kit-grid, .abilities, .boundary-grid, .footer-grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }
    .mock-metrics { grid-template-columns: 1fr 1fr; }
    .mock-board { grid-template-columns: 1fr; }
    .gain-list li { grid-template-columns: 56px 1fr; }
    .tier-tab { padding: 10px 14px; font-size: 13px; }
    .tier-tab span { display: none; }
    .footer-base { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    html { scroll-behavior: auto; }
    .hero-media { clip-path: none; transform: none; }
    .reveal, .hero-in, .char { opacity: 1; transform: none; }
    .ink-fill .ch { color: var(--ink); }
    .cursor { display: none; }
}

/* ---------- notice / 阅读须知 ---------- */

.notice-page {
    min-height: 100svh;
    padding: 176px 0 104px;
    background: var(--paper);
}

.notice-page .lead { margin-bottom: 48px; }

.notice-list {
    display: grid;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.notice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 26px 4px;
    background: var(--paper);
}

.notice-text { min-width: 0; }

.notice-item h2 {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .04em;
}

.notice-item p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.notice-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .08em;
}

.notice-meta i { color: var(--seal); font-style: normal; }

.notice-item h2 { display: flex; align-items: baseline; gap: 10px; }

.notice-version {
    color: var(--seal);
    font-family: var(--sans, sans-serif);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .12em;
}

.notice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: none;
}

.notice-ack {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.notice-ack label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .06em;
    cursor: pointer;
}

.notice-ack .btn { padding: 10px 20px; font-size: 13px; }

.notice-done {
    color: var(--seal);
    font-size: 12px;
    letter-spacing: .08em;
}

.notice-login {
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .08em;
}

.notice-login:hover { color: var(--seal); }

.notice-flash {
    max-width: 42em;
    margin: 0 0 28px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--seal);
    font-size: 14px;
}

.notice-flash.error { color: #a3271c; }

.notice-item .btn { flex: none; }

.notice-empty {
    padding: 40px 0;
    color: var(--muted);
    font-size: 15px;
}

.notice-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 56px;
}

@media (max-width: 720px) {
    .notice-page { padding-top: 132px; }
    .notice-item { flex-direction: column; align-items: flex-start; gap: 16px; }
}