.sc-page {
    --sc-ink: #143c31;
    --sc-muted: #586961;
    --sc-paper: #f8f8f3;
    --sc-rule: #c8d2c8;
    background: var(--sc-paper);
    color: var(--sc-ink);
}
.sc-page :where(h1, h2, p, ul, figure) { margin: 0; }
.sc-page a { color: inherit; text-decoration: none; }
.sc-page :where(a:focus-visible) { outline: 2px solid currentColor; outline-offset: 5px; }
.sc-page .sc-inner { width: min(87.5%, 1380px); margin-inline: auto; }
.sc-page .sc-kicker {
    font: 500 12px/1.6 var(--sans, sans-serif);
    letter-spacing: .2em;
}
.sc-kicker::before { content: ''; display: inline-block; width: 23px; height: 1px; margin-right: .85em; background: currentColor; vertical-align: middle; opacity: .68; }
.sc-page h1, .sc-page h2, .sc-entry-title, .sc-opening, .sc-next strong { font-family: var(--serif, 'Noto Serif CJK SC', 'Songti SC', serif); font-weight: 400; }
.sc-hero { background: #103d32; color: #f3f6ea; position: relative; overflow: hidden; }
.sc-hero-grid { min-height: clamp(475px, 40vw, 670px); display: grid; grid-template-columns: .91fr 1.09fr; align-items: center; }
.sc-intro { position: relative; z-index: 1; padding: clamp(66px, 8vw, 130px) 0; }
.sc-hero .sc-kicker { color: #bcd8bd; margin-bottom: clamp(21px, 2vw, 32px); }
.sc-hero h1 { font-size: clamp(65px, 6.7vw, 113px); letter-spacing: -.06em; line-height: 1.15; }
.sc-hero .sc-lead { max-width: 29em; line-height: 2; font-size: clamp(15px, 1.05vw, 18px); color: #d3dfd2; margin-top: clamp(17px, 2vw, 32px); }
.sc-hero-link { display: inline-flex; align-items: center; gap: 21px; padding: 9px 0; margin-top: 25px; border-bottom: 1px solid #8cae95; font-size: 14px; }
.sc-arrow { font-family: Arial, 'Noto Sans CJK SC', sans-serif; font-weight: 400; display: inline-flex; justify-content: center; align-items: center; line-height: 1; transition: transform .35s ease; }
.sc-hero-link:hover .sc-arrow { transform: translateY(3px); }
.sc-helix { width: 100%; height: clamp(350px, 35vw, 540px); min-width: 0; position: relative; isolation: isolate; }
.sc-helix canvas { display: block; width: 100%; height: 100%; }
.sc-directory { padding-block: clamp(62px, 7.5vw, 120px) clamp(75px, 9.5vw, 150px); scroll-margin-top: 100px; }
.sc-dir-head { display: flex; align-items: end; justify-content: space-between; gap: 35px; padding-bottom: clamp(24px, 3.3vw, 54px); }
.sc-dir-head .sc-kicker { color: #637864; margin-bottom: 11px; }
.sc-directory h2 { font-size: clamp(43px, 4.5vw, 76px); letter-spacing: -.055em; line-height: 1.22; }
.sc-dir-head > p { font-size: 14px; line-height: 1.9; color: var(--sc-muted); }
.sc-entries { padding: 0; list-style: none; border-top: 1px solid #a9baac; }
.sc-entries li { border-bottom: 1px solid var(--sc-rule); }
.sc-entry { display: grid; align-items: center; grid-template-columns: minmax(100px, 14%) 1fr minmax(125px, 22%) 44px; gap: clamp(20px, 3.3vw, 55px); padding: 13px min(1vw, 18px) 13px 0; min-height: 102px; transition: background .35s; }
.sc-swatch { aspect-ratio: 1.92; overflow: hidden; width: 100%; background: #d6e3dd; }
.sc-swatch img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.sc-entry-title { font-size: clamp(23px, 2.45vw, 40px); line-height: 1.3; letter-spacing: -.035em; }
.sc-subject { color: var(--sc-muted); font-size: clamp(12px, .95vw, 15px); letter-spacing: .06em; }
.sc-entry .sc-arrow { width: 40px; height: 40px; border: 1px solid #becabf; border-radius: 50%; font-size: 20px; transition: color .35s, background .35s, transform .35s; }
.sc-entry:is(:hover, :focus-visible) { background: #eaf0e7; }
.sc-entry:is(:hover, :focus-visible) .sc-swatch img { transform: scale(1.055); }
.sc-entry:is(:hover, :focus-visible) .sc-arrow { transform: translate(2px, -2px); background: var(--sc-ink); color: white; }
.sc-path { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; color: var(--sc-muted); padding-top: clamp(25px, 3.2vw, 57px); font-size: 12px; letter-spacing: .06em; }
.sc-path a:is(:hover,:focus-visible), .sc-index-back:is(:hover,:focus-visible) { color: #805b23; }
.sc-path > span[aria-hidden] { opacity: .4; }
.sc-article-title { padding: clamp(43px, 5.2vw, 85px) 0 clamp(32px, 3.8vw, 68px); }
.sc-article-title .sc-kicker { color: #617968; margin-bottom: 15px; }
.sc-article-title h1 { font-size: clamp(46px, 5.7vw, 92px); line-height: 1.17; letter-spacing: -.05em; }
.sc-article-title > p:last-child { font-size: clamp(15px, 1.23vw, 21px); line-height: 1.8; color: var(--sc-muted); margin-top: 19px; }
.sc-reading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6.9vw, 115px); align-items: start; border-top: 1px solid var(--sc-rule); padding-top: clamp(27px, 3.2vw, 54px); }
.sc-plate { position: sticky; top: 100px; }
.sc-plate img { display: block; width: 100%; aspect-ratio: 1.32; object-fit: cover; background: #dce9e2; }
.sc-plate figcaption { display: flex; gap: 12px; justify-content: space-between; padding: 12px 0; color: var(--sc-muted); font-size: 11px; letter-spacing: .09em; }
.sc-prose { padding: 0 0 7px; min-width: 0; }
.sc-opening { font-size: clamp(21px, 1.8vw, 32px); line-height: 1.7; letter-spacing: -.02em; }
.sc-note { padding-top: 28px; }
.sc-note h2 { font-size: clamp(19px, 1.45vw, 25px); line-height: 1.55; margin-bottom: 8px; }
.sc-note p { color: #495c51; font-size: clamp(14px, 1vw, 17px); line-height: 1.95; }
.sc-source { color: var(--sc-muted); border-left: 1px solid #79917e; padding-left: 10px; font-size: 12px; line-height: 1.65; margin-top: 30px!important; }
.sc-end { border-top: 1px solid var(--sc-rule); margin-top: clamp(45px, 6.3vw, 100px); padding: clamp(24px, 3.5vw, 60px) 0 clamp(47px, 6vw, 98px); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sc-index-back, .sc-next > span:first-child { font-size: 12px; letter-spacing: .06em; color: var(--sc-muted); }
.sc-next { display: grid; grid-template-columns: auto 35px; align-items: center; column-gap: 12px; }
.sc-next > span:first-child { grid-column: 1/-1; margin-bottom: 6px; }
.sc-next strong { font-size: clamp(22px, 2.1vw, 37px); line-height: 1.4; }
.sc-next .sc-arrow { font-size: 22px; }
.sc-next:hover .sc-arrow { transform: translate(3px,-3px); }
@media(max-width: 760px) {
    .sc-page .sc-inner { width: 88%; }
    .sc-hero-grid { display: flex; min-height: 0; flex-direction: column; align-items: stretch; }
    .sc-intro { padding: 48px 0 6px; }
    .sc-hero h1 { font-size: clamp(49px, 11vw, 77px); }
    .sc-hero .sc-kicker { margin-bottom: 14px; }
    .sc-hero .sc-lead { margin-top: 14px; font-size: 14px; line-height: 1.85; }
    .sc-hero-link { margin-top: 13px; padding: 6px 0; gap: 13px; font-size: 13px; }
    .sc-helix { height: clamp(215px, 54vw, 340px); margin-top: -3px; }
    .sc-dir-head { display: block; padding-bottom: 24px; }
    .sc-dir-head > p { margin-top: 14px; font-size: 13px; }
    .sc-dir-head > p br { display: none; }
    .sc-entry { min-height: 90px; grid-template-columns: 76px minmax(0,1fr) 30px; grid-template-rows: auto auto; gap: 0 15px; padding: 13px 0; }
    .sc-entry .sc-swatch { grid-column: 1; grid-row: 1/3; aspect-ratio: 1.29; }
    .sc-entry-title { grid-column: 2; grid-row: 1; align-self: end; font-size: clamp(19px,4.2vw,28px); }
    .sc-subject { grid-column: 2; grid-row: 2; align-self: start; padding-top: 4px; font-size: 11px; }
    .sc-entry .sc-arrow { grid-column: 3; grid-row: 1/3; width: 28px; height: 28px; font-size: 16px; }
    .sc-reading { display: block; }
    .sc-plate { position: static; }
    .sc-plate img { aspect-ratio: 1.65; }
    .sc-prose { margin-top: 28px; }
    .sc-article-title h1 { font-size: clamp(38px,8.5vw,59px); }
}
@media(max-width: 360px) {
    .sc-entry { grid-template-columns: 58px minmax(0,1fr) 26px; column-gap: 11px; }
    .sc-entry-title { font-size: 18px; }
    .sc-next { column-gap: 3px; grid-template-columns: auto 23px; }
    .sc-end { gap: 12px; }
}
@media(prefers-reduced-motion: reduce) {
    .sc-page *, .sc-page *::before { transition-duration: 0s!important; }
}