/*
Theme Name: Personal Home
Theme URI: https://haveyouself.fun/
Author: Site Owner
Description: A focused, full-screen personal homepage and writing theme.
Version: 1.8.11
Text Domain: personal-home
*/

@font-face {
    font-family: "Shoujin Home";
    src: url("assets/fonts/shoujin-home.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

:root {
    --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
    --font-shoujin: "Shoujin Home", "FZShouJinShu-S10S", "STKaiti", "KaiTi", var(--font-serif);
    --page-gutter: clamp(1.5rem, 5vw, 5.5rem);
    --header-height: 5.5rem;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ink: #171a17;
    --paper: #f4f0e8;
    --brand-blue: #0066cc;
    --brand-red: #b42318;
}

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

html {
    background: #11150f;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

html.has-damped-scroll {
    scroll-behavior: auto;
}

html.has-panels {
    scroll-snap-type: none;
    overscroll-behavior-y: contain;
    scroll-padding-top: 0;
}

html.has-panels .snap-panel {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Touch input keeps the same one-theme-per-screen stop without JavaScript wheel interception. */
@media (pointer: coarse) {
    html.has-panels:not(.is-panel-scrolling) {
        scroll-snap-type: y mandatory;
    }
}

html.no-js.has-panels {
    scroll-snap-type: y mandatory;
}

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

body.home,
body.home * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body.home {
    overflow-x: hidden;
}

/* Direct page title headers stay visually distinct from selectable article content. */
body > main > header {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.js body > main > header > :not(img):not(picture) {
    transform-origin: left bottom;
    transition: transform 260ms var(--ease-out), opacity 200ms ease-out;
}

.js body > main > header.is-title-header-collapsed > :not(img):not(picture) {
    opacity: .88;
    transform: translate3d(0, -.45rem, 0) scale(.92);
}

@media (prefers-reduced-motion: reduce) {
    .js body > main > header > :not(img):not(picture) {
        transition: none;
    }
}

a {
    color: inherit;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

button,
input,
textarea,
select {
    font: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

.screen-reader-text,
.skip-link:not(:focus) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: .7rem 1rem;
    color: #10130f;
    background: #e7ff57;
    border-radius: 999px;
    font-weight: 700;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: var(--header-height);
    padding: 1.1rem var(--page-gutter);
    color: #171d18;
    border-bottom: 1px solid rgba(23, 29, 24, .12);
    background: rgba(244, 240, 232, .92);
    box-shadow: 0 .55rem 1.8rem rgba(16, 23, 17, .08);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    mix-blend-mode: normal;
    pointer-events: none;
}

.site-header a,
.site-header .header-progress {
    pointer-events: auto;
}

.site-brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.15rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-family: var(--font-sans);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: 0;
}

.brand-letter {
    display: inline-block;
    line-height: 1;
}

.brand-letter--n {
    color: var(--brand-blue);
}

.brand-letter--slash {
    padding: 0 .03em;
    color: currentColor;
}

.brand-letter--c {
    color: var(--brand-red);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.5vw, 2.6rem);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .14em;
}

.header-nav a {
    position: relative;
    text-decoration: none;
}

.header-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -.35rem;
    height: 1px;
    background: currentColor;
    transition: right .4s var(--ease-out);
}

.header-nav a:hover::after,
.header-nav a:focus-visible::after {
    right: 0;
}

.header-progress {
    justify-self: end;
    display: grid;
    grid-template-columns: auto minmax(3.5rem, 7vw) auto;
    align-items: center;
    gap: .65rem;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .12em;
}

.progress-track {
    position: relative;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, .38);
}

.progress-line {
    position: absolute;
    inset: 0;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--ease-out);
}

.snap-panel {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    min-height: 36rem;
    min-height: min(36rem, 100dvh);
    overflow: hidden;
    isolation: isolate;
}

.panel-inner {
    position: relative;
    z-index: 2;
    width: min(100%, 96rem);
    height: 100%;
    margin: 0 auto;
    padding: calc(var(--header-height) + 2rem) var(--page-gutter) clamp(2.4rem, 6vh, 5.5rem);
}

.hero-panel {
    color: #f5f2e9;
    background:
        radial-gradient(circle at 78% 24%, rgba(205, 239, 83, .16), transparent 24rem),
        linear-gradient(135deg, #10150f 0%, #182019 56%, #0b100c 100%);
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: clamp(3.5rem, 7vw, 7rem) clamp(3.5rem, 7vw, 7rem);
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
}

.hero-panel::after {
    content: "";
    position: absolute;
    right: clamp(-12rem, -8vw, -4rem);
    bottom: clamp(-12rem, -16vw, -5rem);
    width: clamp(22rem, 48vw, 48rem);
    aspect-ratio: 1;
    border: clamp(2.4rem, 6vw, 6rem) solid rgba(231, 255, 87, .08);
    border-radius: 50%;
}

.hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, .34fr);
    align-items: end;
    gap: clamp(2rem, 6vw, 8rem);
}

.hero-copy {
    align-self: center;
    max-width: 72rem;
}

.hero-eyebrow,
.story-kicker,
.reading-kicker {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0 0 clamp(1.4rem, 3vh, 2.8rem);
    font-size: clamp(.68rem, .85vw, .78rem);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.hero-eyebrow::before,
.story-kicker::before,
.reading-kicker::before {
    content: "";
    width: 2.8rem;
    height: 1px;
    background: currentColor;
}

.hero-title {
    max-width: 13ch;
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(3.75rem, 8.3vw, 8.8rem);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.07em;
}

.hero-title span {
    display: block;
}

.hero-title .accent-word {
    color: #e7ff57;
    font-style: italic;
}

.hero-aside {
    align-self: end;
    padding: 0 0 .6rem;
}

.hero-intro {
    max-width: 25rem;
    margin: 0 0 2rem;
    color: rgba(245, 242, 233, .72);
    font-size: clamp(.95rem, 1.2vw, 1.08rem);
    line-height: 1.95;
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-tags li {
    padding: .42rem .78rem;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    color: rgba(255,255,255,.82);
    font-size: .72rem;
    letter-spacing: .08em;
}

.scroll-cue {
    position: absolute;
    left: var(--page-gutter);
    bottom: clamp(1.5rem, 3vh, 2.5rem);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255,255,255,.68);
    text-decoration: none;
    font-size: .72rem;
    letter-spacing: .14em;
}

.scroll-cue-icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
}

.scroll-cue-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: .72rem;
    width: .36rem;
    height: .36rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
    animation: cue-down 1.8s ease-in-out infinite;
}

@keyframes cue-down {
    0%, 100% { transform: translate(-50%, 0) rotate(45deg); opacity: .3; }
    50% { transform: translate(-50%, .45rem) rotate(45deg); opacity: 1; }
}

.panel-nav {
    position: fixed;
    top: 50%;
    right: clamp(.7rem, 1.8vw, 2rem);
    z-index: 90;
    display: grid;
    gap: .58rem;
    transform: translateY(-50%);
    color: #fff;
    mix-blend-mode: difference;
}

.panel-nav a {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.2rem;
    color: inherit;
    text-decoration: none;
}

.panel-nav a::before {
    content: "";
    width: .28rem;
    height: .28rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: width .4s var(--ease-out), border-radius .4s var(--ease-out), background .4s ease;
}

.panel-nav a.is-active::before,
.panel-nav a[aria-current="true"]::before {
    width: 1.25rem;
    border-radius: 999px;
    background: currentColor;
}

.story-panel {
    --panel-bg: #f3eee5;
    --panel-ink: #172019;
    --panel-accent: #d65c40;
    color: var(--panel-ink);
    background: var(--panel-bg);
}

.tone-1 { --panel-bg: #f1eadf; --panel-ink: #1d2821; --panel-accent: #dd5c3f; }
.tone-2 { --panel-bg: #17382f; --panel-ink: #eff4e8; --panel-accent: #dff35f; }
.tone-3 { --panel-bg: #f3cf52; --panel-ink: #241f17; --panel-accent: #fff8e0; }
.tone-4 { --panel-bg: #dfe8f5; --panel-ink: #173257; --panel-accent: #f05f46; }
.tone-5 { --panel-bg: #24213e; --panel-ink: #fbf0f6; --panel-accent: #f2a6cc; }
.tone-6 { --panel-bg: #e9ecdf; --panel-ink: #263229; --panel-accent: #ca5038; }
.tone-7 { --panel-bg: #b9d8f5; --panel-ink: #142b42; --panel-accent: #fff26f; }

.story-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .22;
    background-image: linear-gradient(90deg, currentColor 1px, transparent 1px);
    background-size: 16.666vw 100%;
    mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.story-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr);
    align-items: center;
    gap: clamp(3rem, 9vw, 10rem);
}

.story-panel.layout-reverse .story-copy {
    order: 2;
}

.story-panel.layout-reverse .story-art {
    order: 1;
}

.story-copy {
    position: relative;
    z-index: 3;
    max-width: 42rem;
}

.story-kicker {
    margin-bottom: clamp(1.2rem, 2.5vh, 2.2rem);
}

.story-kicker .category-name {
    color: var(--panel-accent);
}

.story-title {
    max-width: 10ch;
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(3rem, 6.6vw, 7.2rem);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.065em;
}

.story-title a {
    text-decoration: none;
}

.story-excerpt {
    max-width: 37rem;
    margin: clamp(1.5rem, 4vh, 3.2rem) 0 0;
    color: color-mix(in srgb, var(--panel-ink) 72%, transparent);
    font-size: clamp(.96rem, 1.3vw, 1.12rem);
    line-height: 1.95;
}

.story-footer {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: clamp(1.6rem, 4vh, 3rem);
}

.read-link {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .78rem 1.05rem .78rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--panel-ink) 35%, transparent);
    border-radius: 999px;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    transition: color .35s ease, background .35s ease, transform .35s var(--ease-out);
}

.read-link::after {
    content: "↗";
    font-size: 1rem;
    transition: transform .35s var(--ease-out);
}

.read-link:hover,
.read-link:focus-visible {
    color: var(--panel-bg);
    background: var(--panel-ink);
    transform: translateY(-2px);
}

.read-link:hover::after,
.read-link:focus-visible::after {
    transform: translate(.15rem, -.15rem);
}

.reading-time {
    font-size: .72rem;
    letter-spacing: .1em;
    opacity: .62;
}

.story-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: min(62vh, 43rem);
}

.story-orbit {
    position: absolute;
    width: min(31vw, 27rem);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--panel-ink) 28%, transparent);
    border-radius: 50%;
}

.story-orbit::before,
.story-orbit::after {
    content: "";
    position: absolute;
    border-radius: inherit;
}

.story-orbit::before {
    inset: 12%;
    border: 1px dashed color-mix(in srgb, var(--panel-ink) 22%, transparent);
}

.story-orbit::after {
    top: 5%;
    right: 12%;
    width: 1.1rem;
    aspect-ratio: 1;
    background: var(--panel-accent);
    box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--panel-accent) 22%, transparent);
}

.story-glyph {
    position: relative;
    z-index: 2;
    font-family: var(--font-serif);
    font-size: clamp(11rem, 23vw, 23rem);
    font-weight: 500;
    line-height: .8;
    letter-spacing: -.1em;
    color: var(--panel-accent);
    text-shadow: .06em .06em 0 color-mix(in srgb, var(--panel-ink) 8%, transparent);
}

.story-count {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    gap: .3rem;
    justify-items: end;
    font-size: .68rem;
    letter-spacing: .15em;
}

.story-count strong {
    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.06em;
}

.last-panel-note {
    position: absolute;
    left: var(--page-gutter);
    bottom: clamp(1.4rem, 3vh, 2.2rem);
    z-index: 4;
    margin: 0;
    font-size: .68rem;
    letter-spacing: .12em;
    opacity: .62;
}

.js .hero-eyebrow,
.js .hero-title span,
.js .hero-intro,
.js .hero-tags,
.js .story-kicker,
.js .story-title,
.js .story-excerpt,
.js .story-footer,
.js .story-art {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}

.js .hero-title span {
    transform: translateY(3.5rem);
}

.js .story-art {
    transform: scale(.92) rotate(-3deg);
    transition-duration: 1.1s;
}

.js .snap-panel.is-active .hero-eyebrow,
.js .snap-panel.is-active .hero-title span,
.js .snap-panel.is-active .hero-intro,
.js .snap-panel.is-active .hero-tags,
.js .snap-panel.is-active .story-kicker,
.js .snap-panel.is-active .story-title,
.js .snap-panel.is-active .story-excerpt,
.js .snap-panel.is-active .story-footer,
.js .snap-panel.is-active .story-art {
    opacity: 1;
    transform: none;
}

.js .snap-panel.is-active .hero-title span:nth-child(1) { transition-delay: .08s; }
.js .snap-panel.is-active .hero-title span:nth-child(2) { transition-delay: .15s; }
.js .snap-panel.is-active .hero-title span:nth-child(3) { transition-delay: .22s; }
.js .snap-panel.is-active .hero-intro,
.js .snap-panel.is-active .story-title { transition-delay: .12s; }
.js .snap-panel.is-active .hero-tags,
.js .snap-panel.is-active .story-excerpt { transition-delay: .2s; }
.js .snap-panel.is-active .story-footer { transition-delay: .28s; }
.js .snap-panel.is-active .story-art { transition-delay: .08s; }

/* Article reading view */
.reading-page,
.archive-page {
    min-height: 100vh;
    color: #1f2821;
    background: #f5f0e8;
}

.reading-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 64vh;
    padding: calc(var(--header-height) + 5rem) var(--page-gutter) 5rem;
    color: #f5f2e9;
    background:
        radial-gradient(circle at 80% 20%, rgba(231,255,87,.15), transparent 25rem),
        #111711;
    overflow: hidden;
}

.reading-hero::after {
    content: attr(data-glyph);
    position: absolute;
    right: 4vw;
    bottom: -10%;
    color: rgba(231,255,87,.08);
    font-family: var(--font-serif);
    font-size: min(52vw, 34rem);
    line-height: 1;
}

.reading-hero-inner {
    position: relative;
    z-index: 2;
    width: min(100%, 76rem);
    margin: 0 auto;
}

.reading-title {
    max-width: 12ch;
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(3.2rem, 8vw, 8rem);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.065em;
}

.reading-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 2.2rem;
    color: rgba(255,255,255,.62);
    font-size: .78rem;
    letter-spacing: .1em;
}

.reading-intro {
	position: relative;
	padding: calc(var(--header-height) + clamp(1.5rem, 2.4vw, 2.25rem)) var(--page-gutter) clamp(2rem, 2.6vw, 2.6rem);
	overflow: hidden;
	background: #e7ece8;
	border-bottom: 1px solid rgba(35, 66, 71, .16);
}

.reading-intro::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, #234247 0 58%, #d68a5b 58% 82%, #779265 82% 100%);
}

.reading-intro-inner {
	display: grid;
	justify-items: center;
	width: min(100%, 68rem);
	margin: 0 auto;
	text-align: center;
}

.reading-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: clamp(1.1rem, 1.8vw, 1.5rem);
	color: rgba(31, 50, 44, .58);
	text-decoration: none;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
}

.reading-breadcrumb:hover,
.reading-breadcrumb:focus-visible {
	color: #b65339;
}

.reading-intro .reading-title {
	max-width: 16ch;
	font-size: clamp(2.8rem, 4.8vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: 0;
	text-align: center;
	color: #20332e;
}

.reading-byline {
	display: grid;
	grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
	width: min(100%, 58rem);
	margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
	padding: 1rem 0;
	border-top: 1px solid rgba(31, 50, 44, .16);
	border-bottom: 1px solid rgba(31, 50, 44, .16);
	text-align: left;
}

.reading-byline .reading-author {
	justify-self: start;
}

.reading-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(4.75rem, auto));
	justify-content: center;
	color: rgba(31, 50, 44, .58);
	font-size: .68rem;
}

.reading-fact {
	display: grid;
	gap: .2rem;
	min-width: 5.5rem;
	padding: 0 1rem;
	text-align: center;
}

.reading-fact + .reading-fact {
	border-left: 1px solid rgba(31, 50, 44, .14);
}

.reading-fact-label {
	color: #b65339;
	font-size: .56rem;
	font-weight: 800;
	letter-spacing: 0;
}

.reading-fact time,
.reading-fact strong {
	color: #29433c;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: 0;
}

.reading-byline .reading-post-like {
	justify-self: end;
}

.reading-post-like {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .42rem;
	min-width: 3.4rem;
	height: 2.6rem;
	padding: 0 .85rem;
	border: 1px solid rgba(35, 66, 71, .25);
	border-radius: 999px;
	cursor: pointer;
	color: #234247;
	background: rgba(255, 255, 255, .48);
	font-size: .72rem;
	font-weight: 750;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.reading-post-like:hover,
.reading-post-like:focus-visible,
.reading-post-like.is-liked {
	color: #a9402d;
	border-color: rgba(169, 64, 45, .38);
	background: rgba(214, 138, 91, .14);
}

.reading-post-like:hover,
.reading-post-like:focus-visible {
	transform: translateY(-1px);
}

.reading-post-like:disabled {
	cursor: wait;
	opacity: .62;
}

.reading-like-icon {
	font-size: 1rem;
}

.reading-wrap {
    width: min(calc(100% - 2 * var(--page-gutter)), 54rem);
    margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}

.reading-content {
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1.55vw, 1.28rem);
    line-height: 2.05;
}

.reading-content > * {
    margin-top: 0;
    margin-bottom: 1.65em;
}

.reading-content h2,
.reading-content h3 {
    margin-top: 2.4em;
    font-family: var(--font-sans);
    line-height: 1.3;
}

.reading-content blockquote {
    margin-left: 0;
    padding-left: 1.4rem;
    border-left: .2rem solid #ce5a3e;
    color: #4a594d;
    font-size: 1.15em;
}

.back-home {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-top: 3rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(31,40,33,.26);
    border-radius: 999px;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem var(--page-gutter);
    color: rgba(255,255,255,.62);
    background: #111711;
    font-size: .72rem;
    letter-spacing: .08em;
}

.site-footer-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(.9rem, 2vw, 1.5rem);
    flex-wrap: wrap;
}

.site-footer--with-back-to-top {
    padding-right: calc(var(--page-gutter) + 4rem);
}

.site-filing {
    color: inherit;
    text-decoration: none;
    opacity: .78;
    transition: opacity .25s ease;
}

.site-filing:hover,
.site-filing:focus-visible {
    text-decoration: underline;
    opacity: 1;
}

.home-site-footer {
    position: absolute;
    left: var(--page-gutter);
    bottom: clamp(.8rem, 1.7vh, 1.2rem);
    z-index: 7;
    margin: 0;
    font-size: .64rem;
    line-height: 1.5;
    letter-spacing: .05em;
}

.site-filing--home {
    color: #f7f1e7;
    opacity: .72;
    text-shadow: 0 1px 12px rgba(7, 17, 18, .7);
}

.archive-page {
    padding: calc(var(--header-height) + 5rem) var(--page-gutter) 6rem;
}

.archive-inner {
    width: min(100%, 72rem);
    margin: 0 auto;
}

.archive-title {
    margin: 0 0 4rem;
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 500;
    letter-spacing: -.06em;
}

.archive-list {
    display: grid;
    gap: 0;
}

.archive-item {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.6rem 0;
    border-top: 1px solid rgba(31,40,33,.18);
}

.archive-item:last-child {
    border-bottom: 1px solid rgba(31,40,33,.18);
}

.archive-item a {
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 3vw, 2.4rem);
}

.archive-item time,
.archive-index {
    color: rgba(31,40,33,.55);
    font-size: .72rem;
    letter-spacing: .1em;
}

@media (max-width: 900px) {
    :root {
        --header-height: 4.75rem;
    }

    .site-header {
        grid-template-columns: 1fr auto;
    }

    .header-nav {
        display: none;
    }

    .hero-layout,
    .story-layout {
        grid-template-columns: 1fr;
    }

    .hero-layout {
        align-content: center;
    }

    .hero-aside {
        max-width: 34rem;
        padding-bottom: 3rem;
    }

    .hero-intro {
        margin-bottom: 1.2rem;
    }

    .story-layout {
        align-content: center;
    }

    .story-panel.layout-reverse .story-copy,
    .story-panel.layout-reverse .story-art {
        order: initial;
    }

    .story-copy {
        max-width: 38rem;
    }

    .story-art {
        position: absolute;
        right: -5vw;
        bottom: 8vh;
        z-index: 0;
        min-height: 0;
        opacity: .24 !important;
        pointer-events: none;
    }

    .story-orbit {
        width: 48vw;
    }

    .story-glyph {
        font-size: 42vw;
    }

    .story-count {
        display: none;
    }
}

@media (max-width: 600px) {
    :root {
        --page-gutter: 1.35rem;
    }

    .site-header {
        padding-top: .9rem;
        padding-bottom: .9rem;
    }

    .brand-name {
        display: none;
    }

    .header-progress {
        grid-template-columns: auto 3rem auto;
    }

    .panel-inner {
        padding-top: calc(var(--header-height) + 1.2rem);
        padding-bottom: 4.5rem;
    }

    .hero-title {
        font-size: clamp(3.25rem, 17vw, 5.3rem);
    }

    .hero-aside {
        padding-bottom: 2.2rem;
    }

    .hero-intro {
        font-size: .9rem;
        line-height: 1.8;
    }

    .scroll-cue {
        bottom: 1.2rem;
    }

    .panel-nav {
        display: none;
    }

    .story-title {
        max-width: 11ch;
        font-size: clamp(2.8rem, 14vw, 4.8rem);
    }

    .story-excerpt {
        display: -webkit-box;
        overflow: hidden;
        margin-top: 1.35rem;
        font-size: .9rem;
        line-height: 1.8;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .story-footer {
        margin-top: 1.5rem;
    }

    .last-panel-note {
        bottom: 1rem;
    }

    .reading-hero {
        min-height: 58vh;
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
    }

	.reading-title {
		font-size: clamp(3rem, 16vw, 5rem);
	}

	.reading-intro {
		padding-top: calc(var(--header-height) + 1.5rem);
		padding-bottom: 2rem;
	}

	.reading-intro .reading-title {
		max-width: 100%;
		font-size: clamp(2.45rem, 11vw, 3.65rem);
		text-wrap: balance;
	}

	.reading-breadcrumb {
		margin-bottom: 1.15rem;
	}

	.reading-byline {
		grid-template-columns: auto auto;
		justify-content: center;
		gap: .9rem 1.5rem;
		margin-top: 1.4rem;
		padding: .9rem 0;
	}

	.reading-byline .reading-author {
		justify-self: end;
	}

	.reading-byline .reading-post-like {
		justify-self: start;
	}

	.reading-facts {
		grid-column: 1 / -1;
		grid-row: 2;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
	}

	.reading-fact {
		min-width: 0;
		padding: 0 .65rem;
	}

    .archive-item {
        grid-template-columns: 2.5rem 1fr;
        gap: 1rem;
    }

    .archive-item time {
        display: none;
    }

    .site-footer {
        display: grid;
    }

    .site-footer-meta {
        justify-content: flex-start;
    }

    .site-footer--with-back-to-top {
        padding-right: var(--page-gutter);
    }

    .home-site-footer {
        right: 2.5rem;
        bottom: .8rem;
        font-size: .6rem;
    }
}

@media (max-height: 700px) and (min-width: 601px) {
    .panel-inner {
        padding-top: calc(var(--header-height) + .8rem);
        padding-bottom: 2.2rem;
    }

    .hero-title {
        font-size: clamp(3.5rem, 7vw, 6.3rem);
    }

    .story-title {
        font-size: clamp(2.8rem, 5.5vw, 5rem);
    }

    .story-excerpt {
        margin-top: 1.25rem;
        line-height: 1.7;
    }

    .story-footer {
        margin-top: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    html.has-panels {
        scroll-behavior: auto;
    }

    html.has-panels {
        scroll-snap-type: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Homepage navigation state and elemental motion. */

.wind-scene::before {
    background:
        linear-gradient(90deg, rgba(7, 31, 38, .75) 0%, rgba(12, 43, 50, .55) 38%, rgba(17, 48, 54, .08) 74%, rgba(8, 27, 32, .18) 100%),
        linear-gradient(180deg, rgba(12, 36, 43, .18), transparent 42%, rgba(7, 29, 35, .25));
}

.wind-scene::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 8% -24%;
    background: repeating-linear-gradient(168deg, transparent 0 4.5rem, rgba(220, 249, 251, .16) 4.55rem 4.62rem, transparent 4.68rem 8rem);
    opacity: .36;
    transform: translate3d(-8%, 0, 0);
    -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 34%, #000 78%, transparent 96%);
    mask-image: linear-gradient(90deg, transparent 5%, #000 34%, #000 78%, transparent 96%);
}

body.home {
    --home-nav-active: #e1f9fb;
}

body.home[data-home-theme="wind"] { --home-nav-active: #ddf8fb; }
body.home[data-home-theme="forest"] { --home-nav-active: #d7ed9f; }
body.home[data-home-theme="fire"] { --home-nav-active: #ff8b4c; }
body.home[data-home-theme="mountain"] { --home-nav-active: #ffc082; }

body.home .header-nav {
    position: relative;
    isolation: isolate;
}

body.home .header-nav .primary-nav-link {
    z-index: 2;
    padding: .38rem .18rem;
    color: color-mix(in srgb, var(--home-header-ink) 76%, transparent);
    transition: color .45s ease, text-shadow .45s ease, transform .55s var(--ease-out);
}

body.home .header-nav .primary-nav-link::after {
    display: none;
}

body.home .header-nav .primary-nav-link.is-active {
    color: var(--home-nav-active);
    text-shadow: 0 0 1.25rem currentColor;
    transform: translateY(-1px);
}

.header-nav-fluid {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    width: 3.5rem;
    height: 2.05rem;
    overflow: hidden;
    pointer-events: none;
    border: 1px solid var(--nav-fluid-border, rgba(210, 244, 248, .34));
    border-radius: 58% 42% 54% 46% / 44% 56% 42% 58%;
    background: var(--nav-fluid-color, rgba(190, 235, 241, .15));
    box-shadow: 0 0 1.35rem var(--nav-fluid-glow, rgba(190, 235, 241, .22)), inset 0 0 .8rem rgba(255, 255, 255, .08);
    transform: translate3d(0, -50%, 0) scaleX(1);
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
    will-change: transform;
}

.header-nav-fluid::before,
.header-nav-fluid::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.header-nav-fluid::before {
    inset: .23rem 12%;
    border-top: 1px solid rgba(255, 255, 255, .38);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    animation: nav-liquid-tide 3.8s ease-in-out infinite alternate;
}

.header-nav-fluid::after {
    top: .48rem;
    left: 18%;
    width: .62rem;
    height: .62rem;
    border-radius: 46% 54% 62% 38%;
    background: currentColor;
    opacity: .1;
    animation: nav-liquid-drop 4.4s var(--ease-out) infinite alternate;
}

@keyframes nav-liquid-tide {
    to { transform: translateX(10%) skewX(-8deg); }
}

@keyframes nav-liquid-drop {
    to { left: 70%; transform: scale(.7) rotate(115deg); }
}

body.home[data-home-theme="fire"] .header-nav .primary-nav-link.is-active::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -.18rem;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #ffd49b;
    box-shadow: -.7rem -.15rem 0 #ff7b35, .55rem -.35rem 0 #ffc174, 1rem .05rem 0 #ff5a1f;
    animation: nav-fire-sparks 1.45s ease-out infinite;
}

@keyframes nav-fire-sparks {
    0% { opacity: 0; transform: translateY(.2rem) scale(.7); }
    35% { opacity: .9; }
    100% { opacity: 0; transform: translateY(-.75rem) scale(.2); }
}

.fire-embers {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.fire-ember {
    position: absolute;
    left: var(--ember-x);
    bottom: -1.5rem;
    width: var(--ember-size);
    height: calc(var(--ember-size) * 2.4);
    border-radius: 55% 45% 58% 42%;
    background: #ffd08a;
    box-shadow: 0 0 .65rem #ff6a23, 0 0 1.35rem rgba(255, 62, 12, .55);
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(8deg);
    animation: fire-ember-rise var(--ember-duration) var(--ember-delay) ease-in infinite;
    animation-play-state: paused;
}

.element-fire.is-active .fire-ember {
    animation-play-state: running;
}

@keyframes fire-ember-rise {
    0% { opacity: 0; transform: translate3d(0, 1rem, 0) scale(.55) rotate(8deg); }
    15% { opacity: .9; }
    72% { opacity: .55; }
    100% { opacity: 0; transform: translate3d(var(--ember-drift), calc(-1 * var(--ember-rise)), 0) scale(.15) rotate(250deg); }
}

.element-button::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 120%;
    aspect-ratio: 1;
    pointer-events: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--element-accent) 62%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

.element-button.is-pressed::after {
    animation: element-button-pulse .48s var(--ease-out);
}

@keyframes element-button-pulse {
    0% { opacity: .5; transform: translate(-50%, -50%) scale(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

body.is-element-transitioning {
    overflow: hidden;
    cursor: progress;
}

.element-transition {
    --transition-tone: rgba(9, 35, 42, .38);
    --transition-flow: rgba(218, 248, 250, .22);
    --transition-flow-angle: 112deg;
    --transition-scene-from: translate3d(-.8%, .35%, 0) scale(1.025);
    --transition-scene-to: translate3d(.8%, -.35%, 0) scale(1.045);
    --transition-flow-from: translate3d(-34%, 0, 0);
    --transition-flow-to: translate3d(34%, 0, 0);
    position: fixed;
    z-index: 1000;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    color: #fff;
    background: #102b32;
    opacity: 1;
    transition: opacity .3s var(--ease-out);
}

.element-transition.is-receding {
    opacity: 0;
}

.element-transition__aperture {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #102b32;
    clip-path: circle(0 at var(--transition-x) var(--transition-y));
    transition: clip-path .48s cubic-bezier(.22, 1, .36, 1);
    will-change: clip-path;
}

.element-transition.is-running .element-transition__aperture {
    clip-path: circle(160vmax at var(--transition-x) var(--transition-y));
}

.element-transition__poster,
.element-transition__motion,
.element-transition__tone {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.element-transition__poster {
    object-fit: cover;
    object-position: center;
    filter: none;
    image-rendering: auto;
    transform: var(--transition-scene-from);
    backface-visibility: hidden;
    will-change: transform;
}

.element-transition.is-running .element-transition__poster {
    animation: element-transition-scene .56s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes element-transition-scene {
    from { transform: var(--transition-scene-from); }
    to { transform: var(--transition-scene-to); }
}

.element-transition__motion {
    z-index: 1;
    inset: -18%;
    width: auto;
    height: auto;
    opacity: 0;
    background: linear-gradient(
        var(--transition-flow-angle),
        transparent 26%,
        var(--transition-flow) 45%,
        rgba(255, 255, 255, .08) 51%,
        transparent 69%
    );
    transform: var(--transition-flow-from);
    will-change: transform, opacity;
}

.element-transition.is-running .element-transition__motion {
    animation: element-transition-flow .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes element-transition-flow {
    0% { opacity: 0; transform: var(--transition-flow-from); }
    18% { opacity: .78; }
    72% { opacity: .42; }
    100% { opacity: 0; transform: var(--transition-flow-to); }
}

.element-transition__tone {
    z-index: 1;
    background: linear-gradient(120deg, var(--transition-tone), transparent 58%, rgba(0, 0, 0, .18));
}

.element-transition--forest {
    --transition-tone: rgba(4, 42, 27, .44);
    --transition-flow: rgba(225, 244, 215, .2);
    --transition-flow-angle: 98deg;
    --transition-scene-from: translate3d(-.9%, .4%, 0) scale(1.025);
    --transition-scene-to: translate3d(1%, -.35%, 0) scale(1.045);
    background: #0b2d21;
}

.element-transition--fire {
    --transition-tone: rgba(61, 8, 2, .36);
    --transition-flow: rgba(255, 145, 74, .28);
    --transition-flow-angle: 18deg;
    --transition-scene-from: translate3d(0, .85%, 0) scale(1.025);
    --transition-scene-to: translate3d(0, -.9%, 0) scale(1.045);
    --transition-flow-from: translate3d(0, 32%, 0);
    --transition-flow-to: translate3d(0, -32%, 0);
    background: #1a0502;
}

.element-transition--mountain {
    --transition-tone: rgba(9, 31, 34, .4);
    --transition-flow: rgba(226, 238, 226, .2);
    --transition-flow-angle: 82deg;
    --transition-scene-from: translate3d(.9%, .5%, 0) scale(1.025);
    --transition-scene-to: translate3d(-.9%, -.3%, 0) scale(1.045);
    background: #17282a;
}

@media (max-width: 900px) {
    .header-nav-fluid {
        display: none;
    }

    body.home .menu-open .header-nav .primary-nav-link.is-active {
        color: var(--home-nav-active);
        text-shadow: 0 0 1.4rem currentColor;
    }
}

@media (max-width: 700px) {
    .fire-ember:nth-child(n + 13) {
        display: none;
    }
}

@media (max-height: 700px) and (max-width: 700px) {
    .element-wind .element-summary {
        -webkit-line-clamp: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fire-embers,
    body.home[data-home-theme="fire"] .header-nav .primary-nav-link.is-active::before {
        display: none;
    }

    .header-nav-fluid::before,
    .header-nav-fluid::after {
        animation: none;
    }
}

/* Extended navigation */
.site-brand,
.header-end,
.menu-toggle {
    position: relative;
    z-index: 3;
}

.header-end {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1rem;
    pointer-events: auto;
}

.site-language {
    position: relative;
    color: inherit;
    font-family: var(--font-sans);
    letter-spacing: 0;
    pointer-events: auto;
}

.site-language--mobile {
    display: none;
}

.site-language-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 4.35rem;
    min-height: 2.35rem;
    padding: .4rem .68rem;
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 18%, transparent);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: 0;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.site-language-trigger:hover,
.site-language-trigger:focus-visible,
.site-language.is-open .site-language-trigger {
    border-color: currentColor;
    background: color-mix(in srgb, var(--paper) 34%, transparent);
}

.site-language-caret {
    width: .42rem;
    height: .42rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-.1rem) rotate(45deg);
    transition: transform .2s var(--ease-out);
}

.site-language.is-open .site-language-caret {
    transform: translateY(.1rem) rotate(225deg);
}

.site-language-list {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    width: 10.5rem;
    padding: .35rem;
    color: #171d18;
    border-radius: 6px;
    background: #f7f4ed;
    box-shadow: 0 .8rem 2.2rem rgba(12, 17, 13, .2);
}

.site-language-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-height: 2.65rem;
    padding: .55rem .72rem;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: 0;
    white-space: nowrap;
}

.site-language-option:hover,
.site-language-option:focus-visible {
    color: #111711;
    background: #e7ff57;
}

.site-language-status {
    flex: 0 0 auto;
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: transparent;
}

.site-language-option.is-current .site-language-status {
    background: #187044;
    box-shadow: 0 .12rem .35rem rgba(24, 112, 68, .28);
}

.nav-auth {
    padding: .36rem .68rem;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.nav-auth::after {
    display: none;
}

.site-user-menu {
    position: fixed;
    top: 1rem;
    right: var(--page-gutter);
    z-index: 120;
    display: flex;
    align-items: center;
    gap: .3rem;
    min-height: 2.8rem;
    max-width: min(23rem, calc(100vw - 2 * var(--page-gutter)));
    padding: .28rem;
    color: #f7f3e9;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(17, 23, 17, .92);
    box-shadow: 0 .7rem 2rem rgba(7, 12, 8, .18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.user-menu-identity {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding-right: .35rem;
}

.user-menu-avatar {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: #263126;
}

.user-menu-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-menu-name {
    min-width: 0;
    max-width: 9rem;
    overflow: hidden;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-actions {
    display: flex;
    align-items: center;
    gap: .16rem;
    padding-left: .38rem;
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.user-menu-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: .48rem .68rem;
    border-radius: 999px;
    color: #f7f3e9;
    text-decoration: none;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
    transition: color .22s ease, background-color .22s ease;
}

.user-menu-actions a:hover,
.user-menu-actions a:focus-visible {
    color: #111711;
    background: #e7ff57;
}

.user-menu-actions [data-user-logout] {
    color: rgba(247, 243, 233, .72);
}

body.logged-in .header-progress {
    margin-right: clamp(16rem, 22vw, 20rem);
}

body.logged-in .site-language--desktop {
    margin-right: clamp(16rem, 22vw, 20rem);
}

body.logged-in.home .site-language--desktop {
    margin-right: 0;
}

.menu-toggle {
    display: none;
    width: 2.7rem;
    height: 2.7rem;
    padding: .72rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    pointer-events: auto;
    color: inherit;
    background: transparent;
}

.menu-toggle > span:not(.screen-reader-text) {
    display: block;
    width: 100%;
    height: 1px;
    margin: .22rem 0;
    background: currentColor;
    transition: transform .3s var(--ease-out), opacity .2s ease;
}

.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 1100px) and (min-width: 901px) {
    .header-nav {
        gap: 1.1rem;
        font-size: .7rem;
    }
}

@media (max-width: 900px) {
    body.menu-open {
        overflow: hidden;
    }

    .menu-toggle {
        position: fixed;
        top: 1rem;
        right: 1.35rem;
        display: block;
    }

    .site-user-menu {
        top: 1rem;
        right: 4.55rem;
    }

    .user-menu-identity {
        max-width: 6.5rem;
    }

    .user-menu-name {
        max-width: 4rem;
    }

    body.logged-in .header-progress {
        display: none;
    }

    .site-language--desktop {
        display: none;
    }

    body.logged-in.home:not(.menu-open) .menu-toggle {
        right: 1.35rem;
    }

    body.menu-open .site-user-menu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    body.home:not(.menu-open) .menu-toggle {
        right: 7.4rem;
    }

    .menu-open .site-header {
        color: #f7f3e9;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        mix-blend-mode: normal;
    }

    .menu-open .header-end {
        opacity: 0;
        pointer-events: none;
    }

    .menu-open .menu-toggle > span:nth-child(1) {
        transform: translateY(.45rem) rotate(45deg);
    }

    .menu-open .menu-toggle > span:nth-child(2) {
        opacity: 0;
    }

    .menu-open .menu-toggle > span:nth-child(3) {
        transform: translateY(-.45rem) rotate(-45deg);
    }

    .menu-open .header-nav {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: .65rem;
        padding: 6rem var(--page-gutter) 3rem;
        color: #f7f3e9;
        background:
            radial-gradient(circle at 85% 20%, rgba(231,255,87,.14), transparent 18rem),
            #111711;
    }

    .menu-open .header-nav a {
        font-family: var(--font-serif);
        font-size: clamp(2.8rem, 13vw, 5rem);
        font-weight: 500;
        line-height: 1.12;
        letter-spacing: -.04em;
    }

    .menu-open .header-nav a::after {
        display: none;
    }

    .menu-open .header-nav .nav-auth {
        margin-top: 1rem;
        padding: .55rem 1rem;
        color: #e7ff57;
        border-color: #e7ff57;
        font-family: var(--font-sans);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .menu-open .header-nav .site-language--mobile {
        display: block;
        width: min(100%, 22rem);
        margin-top: 1.15rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(247, 243, 233, .18);
    }

    .site-language-label {
        display: block;
        margin-bottom: .55rem;
        color: rgba(247, 243, 233, .62);
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .site-language--mobile .site-language-list {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
        width: 100%;
        padding: 0;
        color: #f7f3e9;
        background: transparent;
        box-shadow: none;
    }

    .menu-open .header-nav .site-language-option {
        min-height: 2.8rem;
        padding: .55rem .7rem;
        color: inherit;
        border: 1px solid rgba(247, 243, 233, .22);
        border-radius: 4px;
        font-family: var(--font-sans);
        font-size: .76rem;
        font-weight: 650;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .menu-open .header-nav .site-language-option:hover,
    .menu-open .header-nav .site-language-option:focus-visible,
    .menu-open .header-nav .site-language-option.is-current {
        color: #111711;
        border-color: #e7ff57;
        background: #e7ff57;
    }
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    body.home:not(.menu-open) .menu-toggle {
        right: 6.7rem;
    }

    .menu-toggle {
        width: 2.35rem;
        height: 2.35rem;
        padding: .6rem;
    }

    .site-user-menu {
        top: .9rem;
        right: 4.15rem;
        min-height: 2.35rem;
        padding: .22rem;
    }

    .user-menu-identity {
        padding-right: .2rem;
    }

    .user-menu-avatar {
        width: 1.75rem;
        height: 1.75rem;
    }

    .user-menu-name {
        display: none;
    }

    .user-menu-actions {
        gap: .05rem;
        padding-left: .28rem;
    }

    .user-menu-actions a {
        min-height: 1.9rem;
        padding: .38rem .48rem;
        font-size: .62rem;
    }

    .header-progress {
        grid-template-columns: auto 2.2rem auto;
        gap: .45rem;
    }
}

/* Elemental homepage: Wind / Forest / Fire / Mountain */
body.home {
    --home-header-ink: #173c49;
    --home-header-line: rgba(23, 60, 73, .18);
}

body.home .site-header {
    color: var(--home-header-ink);
    border-color: var(--home-header-line);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .13), transparent);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: color .65s var(--ease-out), border-color .65s var(--ease-out), background .65s ease;
}

body.home .progress-track {
    background: color-mix(in srgb, currentColor 24%, transparent);
}

body.home[data-home-theme="wind"] {
	--home-header-ink: #f1fbfc;
	--home-header-line: rgba(241, 251, 252, .24);
}

body.home[data-home-theme="forest"] {
    --home-header-ink: #edf3d8;
    --home-header-line: rgba(237, 243, 216, .2);
}

body.home[data-home-theme="fire"] {
    --home-header-ink: #fff0d5;
    --home-header-line: rgba(255, 240, 213, .2);
}

body.home[data-home-theme="mountain"] {
	--home-header-ink: #f7f1e7;
	--home-header-line: rgba(247, 241, 231, .24);
}

.element-panel {
    --element-bg: #eaf6f7;
    --element-ink: #173c49;
    --element-accent: #278ca2;
    --element-muted: rgba(23, 60, 73, .66);
	--element-seam-in: transparent;
	--element-seam-out: transparent;
    color: var(--element-ink);
    background: var(--element-bg);
    contain: paint;
}

.element-panel::before,
.element-panel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: clamp(4.5rem, 10vh, 8rem);
	pointer-events: none;
}

.element-panel::before {
	top: 0;
	background: linear-gradient(
		to bottom,
		var(--element-seam-in) 0%,
		color-mix(in srgb, var(--element-seam-in) 62%, transparent) 42%,
		transparent 100%
	);
}

.element-panel::after {
	bottom: 0;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		color-mix(in srgb, var(--element-seam-out) 62%, transparent) 58%,
		var(--element-seam-out) 100%
	);
}

.element-shell {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: clamp(1rem, 2vw, 2.25rem);
}

.element-topline {
    position: relative;
    z-index: 6;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: clamp(.25rem, 1vh, .8rem);
    font-family: var(--font-shoujin);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
}

.element-topline::before {
    content: "";
    position: absolute;
    top: calc(100% + .9rem);
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    opacity: .18;
}

.element-word {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.element-glyph {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(17rem, 35vw, 35rem);
    font-weight: 600;
    line-height: .74;
    letter-spacing: -.12em;
}

.element-reading {
    position: absolute;
    font-size: clamp(.62rem, .75vw, .72rem);
    font-weight: 800;
    letter-spacing: .45em;
}

.element-copy {
    position: relative;
    z-index: 5;
    grid-row: 2 / 4;
    align-self: end;
    max-width: 40rem;
	padding-bottom: clamp(2.4rem, 4.6vh, 4.2rem);
}

.element-kicker {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 0 clamp(1rem, 2.3vh, 1.7rem);
    font-family: var(--font-shoujin);
    font-size: .88rem;
    font-weight: 400;
    letter-spacing: 0;
}

.element-kicker::before {
    content: "";
    flex: 0 0 auto;
    width: 2.7rem;
    height: 1px;
    background: var(--element-accent);
}

.element-heading {
    margin: 0;
    font-family: var(--font-shoujin);
    font-size: 5.5rem;
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: 0;
}

.element-summary {
    max-width: 35rem;
    margin: clamp(1.2rem, 2.6vh, 2rem) 0 0;
    color: var(--element-muted);
    font-family: var(--font-shoujin);
    font-size: 1.08rem;
    line-height: 1.85;
}

.element-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.1rem;
    min-width: clamp(12.5rem, 16vw, 15rem);
    margin-top: clamp(1.35rem, 3vh, 2.25rem);
    padding: .84rem .9rem .84rem 1.25rem;
    overflow: hidden;
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--element-bg) 70%, transparent);
    text-decoration: none;
    font-family: var(--font-shoujin);
    font-size: .88rem;
    font-weight: 400;
    letter-spacing: 0;
    box-shadow: 0 .8rem 2.5rem color-mix(in srgb, var(--element-ink) 9%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color .4s ease, background .4s ease, border-color .4s ease, transform .4s var(--ease-out), box-shadow .4s ease;
}

.element-button > span,
.element-button > i {
    position: relative;
    z-index: 2;
}

.element-button > i {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--element-accent);
    color: var(--element-bg);
    font-family: var(--font-sans);
    font-size: .95rem;
    font-style: normal;
    transition: transform .45s var(--ease-out);
}

.element-button::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: var(--element-ink);
    transform: translateX(-102%);
    transition: transform .5s var(--ease-out);
}

.element-button:hover,
.element-button:focus-visible {
    color: var(--element-bg);
    border-color: var(--element-ink);
    box-shadow: 0 1rem 3rem color-mix(in srgb, var(--element-ink) 18%, transparent);
    transform: translateY(-3px);
}

.element-button:hover::before,
.element-button:focus-visible::before {
    transform: none;
}

.element-button:hover > i,
.element-button:focus-visible > i {
    transform: rotate(45deg) scale(1.06);
}

.element-aside {
    position: relative;
    z-index: 4;
    grid-column: 11 / -1;
    grid-row: 3;
    justify-self: end;
    align-self: end;
    margin: 0 0 .45rem;
    font-family: var(--font-shoujin);
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;
    text-align: right;
    opacity: .57;
}

.element-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.element-photo {
	--photo-start: scale(1.035);
	position: absolute;
	inset: -2%;
	z-index: 0;
	width: 104%;
	height: 104%;
	max-width: none;
	object-fit: cover;
	transform: var(--photo-start);
	transform-origin: center;
}

html.is-panel-scrolling .header-nav-fluid::before,
html.is-panel-scrolling .header-nav-fluid::after,
html.is-panel-scrolling .element-fire.is-active .fire-ember {
	animation-play-state: paused;
}

/* Wind: airy editorial lines */
.element-wind {
		--element-bg: #102b32;
		--element-ink: #f2fbfc;
		--element-accent: #83dae6;
		--element-muted: rgba(242, 251, 252, .74);
		--element-seam-out: #173a39;
		background: #102b32;
}

.wind-scene::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(6, 27, 34, .9) 0%, rgba(9, 35, 42, .69) 38%, rgba(9, 30, 36, .16) 74%, rgba(4, 18, 22, .28) 100%),
		linear-gradient(180deg, rgba(2, 15, 20, .32), transparent 38%, rgba(2, 13, 17, .35));
}

.wind-scene .element-photo {
	object-position: center 52%;
}

.wind-copy {
    grid-column: 1 / 7;
}

.wind-word {
    top: 48%;
    right: clamp(7%, 10vw, 14%);
    transform: translateY(-50%) rotate(4deg);
}

.wind-word .element-glyph {
	color: rgba(205, 241, 244, .17);
	text-shadow: 0 0 4rem rgba(126, 216, 228, .12);
}

.wind-word .element-reading {
    right: 4%;
    bottom: -8%;
	color: rgba(231, 248, 250, .7);
    transform: rotate(-4deg);
}

/* Forest: deep, vertical and quietly alive */
.element-forest {
    --element-bg: #123b2d;
    --element-ink: #eef3d9;
    --element-accent: #b8d278;
    --element-muted: rgba(238, 243, 217, .66);
	--element-seam-in: #173a39;
	--element-seam-out: #171d15;
	background: #0a2b21;
}

.forest-scene::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(3, 24, 19, .16) 0%, rgba(4, 29, 22, .43) 48%, rgba(4, 27, 20, .88) 100%),
		linear-gradient(180deg, rgba(2, 19, 15, .28), transparent 42%, rgba(2, 17, 13, .56));
}

.forest-scene .element-photo {
	object-position: center 48%;
}

.forest-copy {
    grid-column: 7 / 12;
    justify-self: end;
}

.forest-word {
    top: 51%;
    left: clamp(4%, 7vw, 10%);
    transform: translateY(-50%);
}

.forest-word .element-glyph {
    color: rgba(210, 231, 166, .18);
    text-shadow: 0 0 5rem rgba(172, 207, 106, .08);
}

.forest-word .element-reading {
    left: 8%;
    bottom: -9%;
    color: rgba(238, 243, 217, .65);
}

.element-forest .element-button {
    background: rgba(7, 35, 26, .42);
}

/* Fire: graphic, hot and kinetic */
.element-fire {
    --element-bg: #1b0805;
    --element-ink: #fff0d5;
    --element-accent: #ff5a1f;
    --element-muted: rgba(255, 240, 213, .68);
	--element-seam-in: #171d15;
	--element-seam-out: #17191a;
	background: #170503;
}

.fire-scene::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(15, 3, 2, .9) 0%, rgba(22, 4, 2, .64) 42%, rgba(20, 3, 1, .08) 76%),
		linear-gradient(180deg, rgba(11, 2, 2, .18), transparent 42%, rgba(10, 1, 0, .58));
}

.fire-scene .element-photo {
	--photo-start: scaleX(-1) scale(1.035);
	object-position: center 51%;
}

.fire-copy {
    grid-column: 1 / 7;
}

.fire-copy .element-heading {
    font-family: var(--font-shoujin);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: 0;
}

.fire-word {
    top: 48%;
    right: clamp(2%, 6vw, 8%);
    transform: translateY(-50%) rotate(-6deg);
}

.fire-word .element-glyph {
    color: rgba(255, 79, 24, .31);
    font-family: var(--font-sans);
    font-weight: 900;
    text-shadow: 0 0 6rem rgba(255, 61, 16, .24);
}

.fire-word .element-reading {
    right: 4%;
    bottom: -6%;
    color: rgba(255, 229, 194, .7);
    transform: rotate(6deg);
}

.element-fire .element-button {
    border-color: rgba(255, 224, 187, .36);
    background: rgba(55, 12, 5, .58);
}

.element-fire .element-button > i {
    color: #220704;
}

/* Mountain: quiet ink-wash composition */
.element-mountain {
		--element-bg: #17282a;
		--element-ink: #fff8ea;
		--element-accent: #ed9d67;
		--element-muted: rgba(255, 248, 234, .73);
		--element-seam-in: #17191a;
		background: #17282a;
}

.mountain-scene::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(5, 20, 23, .83) 0%, rgba(8, 27, 29, .57) 40%, rgba(8, 24, 25, .05) 76%),
		linear-gradient(180deg, rgba(5, 15, 17, .15), transparent 40%, rgba(3, 15, 17, .52));
}

.mountain-scene .element-photo {
	object-position: center 52%;
}

.mountain-copy {
    grid-column: 2 / 8;
}

.mountain-word {
    top: 43%;
    right: clamp(7%, 14vw, 18%);
    transform: translateY(-50%);
}

.mountain-word .element-glyph {
	color: rgba(249, 239, 219, .17);
}

.mountain-word .element-reading {
    right: 1%;
    bottom: -7%;
	color: rgba(255, 247, 232, .66);
}

.element-mountain .element-button {
	background: rgba(10, 28, 30, .5);
}

/* Non-clickable section position; only the main buttons navigate. */
.element-panel-nav {
    position: fixed;
    z-index: 88;
    right: clamp(.65rem, 1.5vw, 1.6rem);
    top: 50%;
    display: grid;
    gap: .58rem;
    color: #fff;
    mix-blend-mode: difference;
    transform: translateY(-50%);
    pointer-events: none;
}

.element-panel-nav > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .48rem;
    width: 2.4rem;
    height: 1.2rem;
}

.element-panel-nav > span::after {
    content: "";
    width: .28rem;
    height: .28rem;
    border: 1px solid currentColor;
    border-radius: 99px;
    transition: width .45s var(--ease-out), background .35s ease;
}

.element-panel-nav b {
    font-family: var(--font-serif);
    font-size: .62rem;
    font-weight: 500;
    opacity: 0;
    transform: translateX(.3rem);
    transition: opacity .35s ease, transform .35s var(--ease-out);
}

.element-panel-nav > span.is-active::after {
    width: 1.15rem;
    background: currentColor;
}

.element-panel-nav > span.is-active b {
    opacity: .8;
    transform: none;
}

/* Panel entrance motion */
.js .element-panel .element-topline,
.js .element-panel .element-copy,
.js .element-panel .element-word,
.js .element-panel .element-aside {
    opacity: 0;
    transition: opacity .85s var(--ease-out), transform .95s var(--ease-out);
}

.js .element-panel .element-topline {
    transform: translateY(-1rem);
}

.js .element-panel .element-copy {
    transform: translateY(2.2rem);
}

.js .element-panel .element-word {
    opacity: 0;
}

.js .element-panel .wind-word,
.js .element-panel .fire-word {
    transform: translateY(-47%) rotate(1deg) scale(.93);
}

.js .element-panel .forest-word,
.js .element-panel .mountain-word {
    transform: translateY(-47%) scale(.93);
}

.js .element-panel .element-aside {
    transform: translateX(1rem);
}

.js .element-panel.is-active .element-topline,
.js .element-panel.is-active .element-copy,
.js .element-panel.is-active .element-word,
.js .element-panel.is-active .element-aside,
.js .element-panel.is-scroll-visible .element-topline,
.js .element-panel.is-scroll-visible .element-copy,
.js .element-panel.is-scroll-visible .element-word,
.js .element-panel.is-scroll-visible .element-aside {
    opacity: 1;
}

.js .element-panel.is-active .element-topline,
.js .element-panel.is-active .element-copy,
.js .element-panel.is-active .element-aside,
.js .element-panel.is-scroll-visible .element-topline,
.js .element-panel.is-scroll-visible .element-copy,
.js .element-panel.is-scroll-visible .element-aside {
    transform: none;
}

.js .element-panel.is-active .wind-word,
.js .element-panel.is-scroll-visible .wind-word {
    transform: translateY(-50%) rotate(4deg);
}

.js .element-panel.is-active .forest-word,
.js .element-panel.is-active .mountain-word,
.js .element-panel.is-scroll-visible .forest-word,
.js .element-panel.is-scroll-visible .mountain-word {
    transform: translateY(-50%);
}

.js .element-panel.is-active .fire-word,
.js .element-panel.is-scroll-visible .fire-word {
    transform: translateY(-50%) rotate(-6deg);
}

.js .element-panel:is(.is-active, .is-scroll-visible) .element-copy { transition-delay: .1s; }
.js .element-panel:is(.is-active, .is-scroll-visible) .element-word { transition-delay: .04s; }
.js .element-panel:is(.is-active, .is-scroll-visible) .element-aside { transition-delay: .22s; }

/* Do not let a dropped frame leave the incoming theme transparent. */
.js .element-panel.is-scroll-visible .element-topline,
.js .element-panel.is-scroll-visible .element-copy,
.js .element-panel.is-scroll-visible .element-word,
.js .element-panel.is-scroll-visible .element-aside {
    transition-property: transform;
    transition-delay: 0s;
}


@media (max-width: 980px) {
    .element-heading,
    .fire-copy .element-heading {
        font-size: 4.5rem;
    }

    .element-glyph {
        font-size: clamp(15rem, 48vw, 29rem);
    }

    .wind-copy,
    .fire-copy,
    .mountain-copy {
        grid-column: 1 / 8;
    }

    .forest-copy {
        grid-column: 6 / 12;
    }

    .element-aside {
        display: none;
    }
}

@media (max-width: 700px) {
    .element-panel {
        min-height: 42rem;
        min-height: min(42rem, 100dvh);
    }

    .element-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        padding-top: calc(var(--header-height) + 1.3rem);
        padding-bottom: 4.2rem;
    }

    .element-topline {
        grid-column: 1;
        padding-top: 0;
        font-size: .7rem;
    }

    .element-topline span:last-child {
        letter-spacing: 0;
    }

    .element-copy,
    .wind-copy,
    .forest-copy,
    .fire-copy,
    .mountain-copy {
        grid-column: 1;
        grid-row: 2;
        justify-self: stretch;
        align-self: end;
        max-width: 100%;
        padding-bottom: 0;
    }

    .element-word,
    .wind-word,
    .forest-word,
    .fire-word,
    .mountain-word {
        top: 34%;
        left: 50%;
        right: auto;
    }

    .element-glyph {
        font-size: clamp(13rem, 65vw, 20rem);
    }

    .element-reading,
    .wind-word .element-reading,
    .forest-word .element-reading,
    .fire-word .element-reading,
    .mountain-word .element-reading {
        left: 50%;
        right: auto;
        bottom: -12%;
        transform: translateX(-50%);
    }

    .js .element-panel .element-word,
    .js .element-panel .wind-word,
    .js .element-panel .forest-word,
    .js .element-panel .fire-word,
    .js .element-panel .mountain-word {
        transform: translate(-50%, -44%) scale(.93);
    }

    .element-word,
    .wind-word,
    .forest-word,
    .fire-word,
    .mountain-word,
    .js .element-panel.is-active .element-word,
    .js .element-panel.is-active .wind-word,
    .js .element-panel.is-active .forest-word,
    .js .element-panel.is-active .fire-word,
    .js .element-panel.is-active .mountain-word {
        transform: translate(-50%, -50%);
    }

    .element-kicker {
        margin-bottom: .8rem;
        font-size: .78rem;
    }

    .element-kicker::before {
        width: 1.8rem;
    }

    .element-heading,
    .fire-copy .element-heading {
        font-size: 3.05rem;
        line-height: 1.16;
    }

    .element-summary {
        display: -webkit-box;
        margin-top: .9rem;
        overflow: hidden;
        font-size: .9rem;
        line-height: 1.78;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .element-button {
        min-width: 12.3rem;
        margin-top: 1.05rem;
        padding-top: .7rem;
        padding-bottom: .7rem;
        font-size: .8rem;
    }

    .element-button > i {
        width: 1.8rem;
        height: 1.8rem;
    }

    .element-panel-nav {
        right: .2rem;
        gap: .35rem;
        transform: translateY(-30%);
    }

    .element-panel-nav b {
        display: none;
    }

    .mountain-sun {
        top: 18%;
        right: 12%;
    }

    .mountain-range {
        opacity: .75;
    }
}

@media (max-height: 720px) and (min-width: 701px) {
    .element-heading,
    .fire-copy .element-heading {
        font-size: 4.35rem;
    }

    .element-summary {
        margin-top: .9rem;
        line-height: 1.65;
    }

    .element-button {
        margin-top: 1rem;
        padding-top: .68rem;
        padding-bottom: .68rem;
    }
}

@media (max-width: 390px) {
    .element-heading,
    .fire-copy .element-heading {
        font-size: 2.75rem;
    }
}

/* Native touch scrolling keeps adjacent panel content present during the snap. */
@media (pointer: coarse) {
    .js .element-panel .element-topline,
    .js .element-panel .element-copy,
    .js .element-panel .element-word,
    .js .element-panel .element-aside {
        opacity: 1;
    }

    .js .element-panel .element-topline,
    .js .element-panel .element-copy,
    .js .element-panel .element-aside {
        transform: none;
    }

    .js .element-panel .wind-word {
        transform: translateY(-50%) rotate(4deg);
    }

    .js .element-panel .forest-word,
    .js .element-panel .mountain-word {
        transform: translateY(-50%);
    }

    .js .element-panel .fire-word {
        transform: translateY(-50%) rotate(-6deg);
    }
}

@media (pointer: coarse) and (max-width: 700px) {
    .js .element-panel .element-word,
    .js .element-panel .wind-word,
    .js .element-panel .forest-word,
    .js .element-panel .fire-word,
    .js .element-panel .mountain-word {
        transform: translate(-50%, -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .element-transition {
        display: none;
    }

    .js .element-panel .element-topline,
    .js .element-panel .element-copy,
    .js .element-panel .element-word,
    .js .element-panel .element-aside {
        opacity: 1;
        transform: none;
    }
}